oolib 2.66.0 → 2.67.1

package/dist/components/DatePicker/index.js

@@ -61,15 +61,24 @@ var months = [
 ];
 var weeks = ["S", "M", "T", "W", "Th", "F", "Sa"];
 var flag = true;
+// note -> doesn't check time
+var isEqualDate = function (date1, date2) {
+    return date1.getDate() === date2.getDate() &&
+        date1.getMonth() === date2.getMonth() &&
+        date1.getFullYear() === date2.getFullYear();
+};
 function DatePicker(props) {
     var _a, _b, _c;
     var value = props.value, onParentChange = props.onChange, id = props.id, from = props.from, readOnly = props.readOnly, previousDateOnly = props.previousDateOnly, futureDateOnly = props.futureDateOnly, invert = props.invert, disabled = props.disabled, debug = props.debug;
     var screenWidth = (0, useScreenWidth_1.useScreenWidth)();
     var inputRef = (0, react_1.useRef)(null);
     var calenderRef = (0, react_1.useRef)(null);
+    var containerRef = (0, react_1.useRef)(null);
     var _d = (0, react_1.useState)({}), calender = _d[0], setCalender = _d[1];
-    var _e = (0, react_1.useState)(null), range = _e[0], setRange = _e[1];
-    var _f = (0, react_1.useState)(0), monthNumber = _f[0], setMonthNumber = _f[1];
+    var _e = (0, react_1.useState)(false), showCalendar = _e[0], setShowCalendar = _e[1];
+    var _f = (0, react_1.useState)(null), range = _f[0], setRange = _f[1];
+    var _g = (0, react_1.useState)(0), monthNumber = _g[0], setMonthNumber = _g[1];
+    (0, _EXPORTS_1.useHandleClickOutside)(containerRef, setShowCalendar);
     var debounce = function (dy, delay) {
         clearTimeout(dy._tId);
         dy._tId = setTimeout(function () {
@@ -120,7 +129,7 @@ function DatePicker(props) {
             setRange(new Date(calender.year, calender.month, calender.today));
         }
         (0, buildCalenderObj_1.buildCalenderObj)(from, inputRef, monthNumber, calender, setCalender);
-    }, [from]);
+    }, [from, showCalendar]);
     (0, react_1.useEffect)(function () {
         if (readOnly)
             return;
@@ -136,7 +145,7 @@ function DatePicker(props) {
     var handleChangeMonth = function (e, month) {
         e.preventDefault();
         monthNumber += month;
-        setMonthNumber(monthNumber);
+        setMonthNumber(monthNumber < 0 ? 0 : monthNumber); // if
         (0, buildCalenderObj_1.buildCalenderObj)(from, inputRef, monthNumber, calender, setCalender);
     };
     var handleDayClick = function (e, item) {
@@ -148,6 +157,8 @@ function DatePicker(props) {
         if (from) {
             setRange(item);
         }
+        onParentChange(id, item.toISOString(), props.passChangeHandlerOps && props);
+        setShowCalendar(false);
     };
     // returns date string in dd/mm/yyyy
     var buildDateInput = function (dateObj) {
@@ -170,19 +181,29 @@ function DatePicker(props) {
         }
         inputRef.current.value = input;
     };
-    var handleFocusOut = function () {
-        if (from && inputRef.current.value.split("/")[1] === calender.month + 1) {
-            setRange(new Date(calender.year, calender.month, calender.today));
-        }
-        monthNumber = 0;
-        setMonthNumber(monthNumber);
-        var dateObj = (0, buildCalenderObj_1.buildCalenderObj)(from, inputRef, monthNumber, calender, setCalender);
-        if (from && dateObj < from) {
-            dateObj = from;
-        }
-        inputRef.current.value = buildDateInput(dateObj);
-        onParentChange(id, dateObj.toISOString(), props.passChangeHandlerOps && props);
-    };
+    // function handleFocusOut() {
+    //   if (from && inputRef.current.value.split("/")[1] === calender.month + 1) {
+    //     setRange(new Date(calender.year, calender.month, calender.today));
+    //   }
+    //   monthNumber = 0;
+    //   setMonthNumber(monthNumber);
+    //   let dateObj = buildCalenderObj(
+    //     from,
+    //     inputRef,
+    //     monthNumber,
+    //     calender,
+    //     setCalender
+    //   );
+    //   if (from && dateObj < from) {
+    //     dateObj = from;
+    //   }
+    //   inputRef.current.value = buildDateInput(dateObj);
+    //   onParentChange(
+    //     id,
+    //     dateObj.toISOString(),
+    //     props.passChangeHandlerOps && props
+    //   );
+    // }
     var handleOnChange = function () {
         autoFormatter();
         setMonthNumber(0);
@@ -190,6 +211,7 @@ function DatePicker(props) {
         if (from) {
             setRange(dateObj);
         }
+        onParentChange(id, dateObj.toISOString(), props.passChangeHandlerOps && props);
     };
     var handleKeyDown = function (e) {
         if (e.keyCode === 8) {
@@ -214,17 +236,18 @@ function DatePicker(props) {
             return value; // this means that the value is 'Presently Ongoing'
         return "".concat(dateObj.getDate(), " ").concat(months[dateObj.getMonth()].substring(0, 3), " ").concat(dateObj.getFullYear());
     };
-    var isToday = function (item) {
-        var _a, _b;
-        return item ?
-            calender.today === (item === null || item === void 0 ? void 0 : item.getDate()) &&
-                calender.month === ((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value.split("/")[1]) - 1 &&
-                calender.year == ((_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.value.split("/")[2]) : null;
+    var isSelectedDate = function (item) {
+        var _a, _b, _c;
+        return item
+            ? ((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value.split("/")[0]) == item.getDate() &&
+                ((_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.value.split("/")[1]) - 1 === item.getMonth() &&
+                ((_c = inputRef.current) === null || _c === void 0 ? void 0 : _c.value.split("/")[2]) == item.getFullYear()
+            : false;
     };
     var isTodaysDate = function (item) {
         return item.getDate() === new Date().getDate() &&
-            calender.month === new Date().getMonth() &&
-            calender.year === new Date().getFullYear();
+            item.getMonth() === new Date().getMonth() &&
+            item.getFullYear() === new Date().getFullYear();
     };
     var isDisabledDate = function (item) {
         return (previousDateOnly && new Date() < item) ||
@@ -232,12 +255,14 @@ function DatePicker(props) {
     };
     return (react_1.default.createElement("div", { style: { display: "flex", flexDirection: "column" } },
         react_1.default.createElement(BlockLabel_1.BlockLabel, __assign({}, (0, _EXPORTS_1.getBlockLabelProps)(props))),
-        react_1.default.createElement(styled_1.StyledDateInputContainer, { invert: invert },
+        react_1.default.createElement(styled_1.StyledDateInputContainer, { invert: invert, onClick: function () { return setShowCalendar(true); }, ref: containerRef },
             readOnly ? (react_1.default.createElement(Typo_1.SANS_3, null, getReadOnlyDate())) : (react_1.default.createElement(styled_1.StyledDateInputWrapper, null,
-                react_1.default.createElement(styled_1.StyledInput, { ref: inputRef, type: "text", className: "SANS_3", invert: invert, disabled: disabled, onChange: handleOnChange, placeholder: "DD/MM/YYYY", maxLength: "10", onKeyDown: handleKeyDown, onBlur: handleFocusOut, onFocus: function () {
+                react_1.default.createElement(styled_1.StyledInput, { ref: inputRef, type: "text", className: "SANS_3", invert: invert, disabled: disabled, onChange: handleOnChange, placeholder: "DD/MM/YYYY", maxLength: "10", onKeyDown: handleKeyDown, 
+                    // onBlur={handleFocusOut}
+                    onFocus: function () {
                         (0, handlePos_1.handleVerticalPos)(calenderRef, inputRef);
                     } }))),
-            react_1.default.createElement(styled_1.StyledCalenderContainer, { debug: debug, ref: calenderRef, className: "calender-container ".concat(from ? "right-class" : ""), invert: invert },
+            react_1.default.createElement(styled_1.StyledCalenderContainer, { debug: debug, showCalendar: showCalendar, ref: calenderRef, className: " ".concat(from ? "right-class" : ""), invert: invert },
                 react_1.default.createElement(styled_1.StyledMonthView, null,
                     react_1.default.createElement(styled_1.StyledHeader, null,
                         wrapCaretLeft(),
@@ -251,38 +276,27 @@ function DatePicker(props) {
                         react_1.default.createElement(Typo_1.SANS_3, null, item))); })),
                     react_1.default.createElement(styled_1.StyledBodyWrapper, { invert: invert }, (_a = calender === null || calender === void 0 ? void 0 : calender.prevDays) === null || _a === void 0 ? void 0 :
                         _a.map(function (item, i) {
-                            var _a, _b, _c, _d, _e, _f;
                             if (from) {
                                 if (item < range && item > from) {
                                     // Render the day as part of the selected range (when 'from' and 'range' are defined)
-                                    return (react_1.default.createElement(styled_1.StyledDateBlock, { range: true, key: i, invert: invert, 
-                                        // className="range"
-                                        onMouseDown: function (e) { return handleDayClick(e, item); }, onPointerEnter: function () { return handlePointerEnter(item); } },
+                                    return (react_1.default.createElement(styled_1.StyledDateBlock, { range: true, key: i, invert: invert, onMouseDown: function (e) { return handleDayClick(e, item); }, onPointerEnter: function () { return handlePointerEnter(item); }, disableClick: isDisabledDate(item) },
                                         react_1.default.createElement(Typo_1.SANS_3, null, item.getDate())));
                                 }
                                 else if (item < from) {
                                     // Render disabled days before 'from' previous date (last month)
-                                    return (react_1.default.createElement(styled_1.StyledDateBlock, { isDisabledDate: true, key: i, invert: invert },
+                                    return (react_1.default.createElement(styled_1.StyledDateBlock, { isDisabledDate: true, key: i, invert: invert, disableClick: isDisabledDate(item) },
                                         react_1.default.createElement(Typo_1.SANS_3, null, item.getDate())));
                                 }
                                 else {
                                     // Render days in the previous month
                                     // Check if the current day is 'today' or falls in the range of previousDateOnly or futureDateOnly
                                     // and apply appropriate class name for styling
-                                    return (react_1.default.createElement(styled_1.StyledDateBlock, { key: i, invert: invert, 
-                                        // isToday={isToday(item)}
-                                        isToday: item.getDate() === ((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value.split("/")[0]) &&
-                                            item.getMonth() + 1 === ((_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.value.split("/")[1]) &&
-                                            item.getFullYear() === ((_c = inputRef.current) === null || _c === void 0 ? void 0 : _c.value.split("/")[2]) ||
-                                            from.getTime() === item.getTime(), isDisabledDate: !(item.getDate() === ((_d = inputRef.current) === null || _d === void 0 ? void 0 : _d.value.split("/")[0]) &&
-                                            item.getMonth() + 1 === ((_e = inputRef.current) === null || _e === void 0 ? void 0 : _e.value.split("/")[1]) &&
-                                            item.getFullYear() === ((_f = inputRef.current) === null || _f === void 0 ? void 0 : _f.value.split("/")[2]) ||
-                                            from.getTime() === item.getTime()) && isDisabledDate(item) && isDisabledDate(item), previousDateOnly: previousDateOnly, futureDateOnly: futureDateOnly, onMouseDown: function (e) { return handleDayClick(e, item); }, onPointerEnter: function () { return handlePointerEnter(item); } },
+                                    return (react_1.default.createElement(styled_1.StyledDateBlock, { key: i, invert: invert, isSelectedDate: isSelectedDate(item) || isEqualDate(from, item), isDisabledDate: isDisabledDate(item), isTodaysDate: isTodaysDate(item), onMouseDown: function (e) { return handleDayClick(e, item); }, onPointerEnter: function () { return handlePointerEnter(item); }, disableClick: isDisabledDate(item) },
                                         react_1.default.createElement(Typo_1.SANS_3, null, item.getDate())));
                                 }
                             }
                             else {
-                                return (react_1.default.createElement(styled_1.StyledDateBlock, { isDisabledDate: true, futureDateOnly: futureDateOnly, key: i, invert: invert, onMouseDown: function (e) { return handleDayClick(e, item); } },
+                                return (react_1.default.createElement(styled_1.StyledDateBlock, { isDisabledDate: true, key: i, invert: invert, isSelectedDate: isSelectedDate(item), onMouseDown: function (e) { return handleDayClick(e, item); }, disableClick: isDisabledDate(item) },
                                     react_1.default.createElement(Typo_1.SANS_3, null, item.getDate())));
                             }
                         }), (_b = calender === null || calender === void 0 ? void 0 : calender.days) === null || _b === void 0 ? void 0 :
@@ -290,20 +304,19 @@ function DatePicker(props) {
                             if (from) {
                                 if (item < from) {
                                     // Render days before 'from' as disabled
-                                    return (react_1.default.createElement(styled_1.StyledDateBlock, { key: i, invert: invert, isDisabledDate: true },
+                                    return (react_1.default.createElement(styled_1.StyledDateBlock, { key: i, invert: invert, isDisabledDate: true, disableClick: isDisabledDate(item) },
                                         react_1.default.createElement(Typo_1.SANS_3, null, item.getDate())));
                                 }
                                 else if (item > from && item < range) {
                                     // Render days within the selected range
-                                    return (react_1.default.createElement(styled_1.StyledDateBlock, { key: i, range: true, isTodaysDate: isTodaysDate(item), invert: invert, onMouseDown: function (e) { return handleDayClick(e, item); }, onPointerEnter: function () { return handlePointerEnter(item); } },
+                                    return (react_1.default.createElement(styled_1.StyledDateBlock, { key: i, range: true, isTodaysDate: isTodaysDate(item), invert: invert, onMouseDown: function (e) { return handleDayClick(e, item); }, onPointerEnter: function () { return handlePointerEnter(item); }, disableClick: isDisabledDate(item) },
                                         react_1.default.createElement(Typo_1.SANS_3, null, item.getDate())));
                                 }
                                 else {
                                     // Render days in the current month
                                     // Check if the current day is 'today' or falls in the range of previousDateOnly or futureDateOnly
                                     // and apply appropriate class name for styling
-                                    return (react_1.default.createElement(styled_1.StyledDateBlock, { key: i, invert: invert, isToday: from.getTime() === item.getTime() || item.getTime() === (range === null || range === void 0 ? void 0 : range.getTime()), isDisabledDate: !(from.getTime() === item.getTime() || item.getTime() === (range === null || range === void 0 ? void 0 : range.getTime()))
-                                            && isDisabledDate(item), isTodaysDate: isTodaysDate(item), previousDateOnly: previousDateOnly, futureDateOnly: futureDateOnly, onMouseDown: function (e) { return handleDayClick(e, item); }, onPointerEnter: function () { return handlePointerEnter(item); } },
+                                    return (react_1.default.createElement(styled_1.StyledDateBlock, { key: i, invert: invert, isSelectedDate: isSelectedDate(item) || isEqualDate(from, item), isDisabledDate: isDisabledDate(item), isTodaysDate: isTodaysDate(item), onMouseDown: function (e) { return handleDayClick(e, item); }, onPointerEnter: function () { return handlePointerEnter(item); }, disableClick: isDisabledDate(item) },
                                         react_1.default.createElement(Typo_1.SANS_3, null, item.getDate())));
                                 }
                             }
@@ -311,48 +324,35 @@ function DatePicker(props) {
                                 // Render days in the current month
                                 // Check if the current day is 'today' or falls in the range of previousDateOnly or futureDateOnly
                                 // and apply appropriate class name for styling
-                                return (react_1.default.createElement(styled_1.StyledDateBlock, { key: i, isToday: isToday(item), isTodaysDate: isTodaysDate(item), isDisabledDate: isDisabledDate(item), previousDateOnly: previousDateOnly, futureDateOnly: futureDateOnly, invert: invert, onMouseDown: function (e) { return handleDayClick(e, item); } },
+                                return (react_1.default.createElement(styled_1.StyledDateBlock, { key: i, isSelectedDate: isSelectedDate(item), isTodaysDate: isTodaysDate(item), isDisabledDate: isDisabledDate(item), disableClick: isDisabledDate(item), invert: invert, onMouseDown: function (e) { return handleDayClick(e, item); } },
                                     react_1.default.createElement(Typo_1.SANS_3, null, item.getDate())));
                             }
                         }), (_c = calender === null || calender === void 0 ? void 0 : calender.nextDays) === null || _c === void 0 ? void 0 :
                         _c.map(function (item, i) {
-                            var _a, _b, _c, _d, _e, _f;
                             if (from) {
-                                if (item < range && item > from) {
+                                if (item > from && item < range) {
                                     // Render days within the selected range
-                                    return (react_1.default.createElement(styled_1.StyledDateBlock, { key: i, invert: invert, range: true, 
-                                        // isDisabledDate={true}
-                                        onMouseDown: function (e) { return handleDayClick(e, item); }, onPointerEnter: function () { return handlePointerEnter(item); } },
+                                    return (react_1.default.createElement(styled_1.StyledDateBlock, { key: i, invert: invert, range: true, onMouseDown: function (e) { return handleDayClick(e, item); }, onPointerEnter: function () { return handlePointerEnter(item); }, disableClick: isDisabledDate(item) },
                                         react_1.default.createElement(Typo_1.SANS_3, null, item.getDate())));
                                 }
                                 else if (item < from) {
                                     // Render disabled days before 'from'
                                     return (react_1.default.createElement(styled_1.StyledDateBlock, { key: i, 
                                         // className="disabled-date"
-                                        invert: invert, isDisabledDate: true, previousDateOnly: previousDateOnly, futureDateOnly: futureDateOnly },
+                                        invert: invert, isDisabledDate: true, disableClick: isDisabledDate(item) },
                                         react_1.default.createElement(Typo_1.SANS_3, null, item.getDate())));
                                 }
                                 else {
                                     // Render days in the next month
                                     // Check if the current day is 'today' or falls in the range of previousDateOnly or futureDateOnly
                                     // and apply appropriate class name for styling
-                                    return (react_1.default.createElement(styled_1.StyledDateBlock, { key: i, invert: invert, isToday: (item.getDate() ===
-                                            ((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value.split("/")[0]) &&
-                                            item.getMonth() + 1 ===
-                                                ((_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.value.split("/")[1]) &&
-                                            item.getFullYear() ===
-                                                ((_c = inputRef.current) === null || _c === void 0 ? void 0 : _c.value.split("/")[2])), isDisabledDate: !(item.getDate() ===
-                                            ((_d = inputRef.current) === null || _d === void 0 ? void 0 : _d.value.split("/")[0]) &&
-                                            item.getMonth() + 1 ===
-                                                ((_e = inputRef.current) === null || _e === void 0 ? void 0 : _e.value.split("/")[1]) &&
-                                            item.getFullYear() ===
-                                                ((_f = inputRef.current) === null || _f === void 0 ? void 0 : _f.value.split("/")[2])) && isDisabledDate(item), previousDateOnly: previousDateOnly, futureDateOnly: futureDateOnly, onMouseDown: function (e) { return handleDayClick(e, item); }, onPointerEnter: function () { return handlePointerEnter(item); } },
+                                    return (react_1.default.createElement(styled_1.StyledDateBlock, { key: i, invert: invert, isSelectedDate: isSelectedDate(item) || isEqualDate(from, item), isDisabledDate: isDisabledDate(item), disableClick: isDisabledDate(item), isTodaysDate: isTodaysDate(item), onMouseDown: function (e) { return handleDayClick(e, item); }, onPointerEnter: function () { return handlePointerEnter(item); } },
                                         react_1.default.createElement(Typo_1.SANS_3, null, item.getDate())));
                                 }
                             }
                             else {
                                 // Render days in the next month as disabled if 'from' is not defined
-                                return (react_1.default.createElement(styled_1.StyledDateBlock, { key: i, invert: invert, isDisabledDate: true, previousDateOnly: previousDateOnly, onMouseDown: function (e) { return handleDayClick(e, item); } },
+                                return (react_1.default.createElement(styled_1.StyledDateBlock, { key: i, invert: invert, isSelectedDate: isSelectedDate(item), isDisabledDate: true, disableClick: isDisabledDate(item), onMouseDown: function (e) { return handleDayClick(e, item); } },
                                     react_1.default.createElement(Typo_1.SANS_3, null, item.getDate())));
                             }
                         })))))));

package/dist/components/DatePicker/styled.js

@@ -30,22 +30,25 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.StyledBodyWrapper = exports.StyledWeekdays = exports.StyledWeekDaysWrapper = exports.StyledHeader = exports.StyledMonthTitle = exports.StyledMonthView = exports.StyledDateBlock = exports.StyledCalenderContainer = exports.StyledDateInputWrapper = exports.StyledInput = exports.StyledDateInputContainer = void 0;
 var styled_components_1 = __importStar(require("styled-components"));
 var themes_1 = require("../../themes");
-var Buttons_1 = require("../Buttons");
 var globalVariables_1 = require("../../globalStyles/globalVariables");
 var mixins_1 = require("../../themes/mixins");
 var greyColor80 = themes_1.colors.greyColor80, greyColor5 = themes_1.colors.greyColor5, greyColor70 = themes_1.colors.greyColor70, greyColor10 = themes_1.colors.greyColor10, primaryColor100 = themes_1.colors.primaryColor100, greyColor40 = themes_1.colors.greyColor40, white = themes_1.colors.white, primaryColor10 = themes_1.colors.primaryColor10, greyColor15 = themes_1.colors.greyColor15, greyColor3 = themes_1.colors.greyColor3, greyColor100 = themes_1.colors.greyColor100;
-exports.StyledDateInputContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    position: relative;\n    width: fit-content;\n\n    &:focus-within .calender-container {\n        visibility: visible;\n        /* transform: scaleY(1); \n        transition: transform 0.5s;\n        display: block; */\n    }\n\n"], ["\n    position: relative;\n    width: fit-content;\n\n    &:focus-within .calender-container {\n        visibility: visible;\n        /* transform: scaleY(1); \n        transition: transform 0.5s;\n        display: block; */\n    }\n\n"])));
-exports.StyledInput = styled_components_1.default.input(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    ", "\n    background: ", ";\n    outline: none;\n    border: none;\n    width: 13rem;\n    height: 4rem;\n    color: ", ";\n\n    ", "\n    &:focus {\n        background-color: ", ";\n    }\n\n    ", "\n\n    &::placeholder {\n        color: ", ";\n    }\n\n"], ["\n    ", "\n    background: ", ";\n    outline: none;\n    border: none;\n    width: 13rem;\n    height: 4rem;\n    color: ", ";\n\n    ", "\n    &:focus {\n        background-color: ", ";\n    }\n\n    ", "\n\n    &::placeholder {\n        color: ", ";\n    }\n\n"])), globalVariables_1.globalInputElemPadding, function (_a) {
+exports.StyledDateInputContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  width: fit-content;\n"], ["\n  position: relative;\n  width: fit-content;\n"])));
+exports.StyledInput = styled_components_1.default.input(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", "\n  background: ", ";\n  outline: none;\n  border: none;\n  width: 13rem;\n  height: 4rem;\n  color: ", ";\n\n  ", "\n  &:focus {\n    background-color: ", ";\n  }\n\n  ", "\n\n  &::placeholder {\n    color: ", ";\n  }\n"], ["\n  ", "\n  background: ", ";\n  outline: none;\n  border: none;\n  width: 13rem;\n  height: 4rem;\n  color: ", ";\n\n  ", "\n  &:focus {\n    background-color: ", ";\n  }\n\n  ", "\n\n  &::placeholder {\n    color: ", ";\n  }\n"])), globalVariables_1.globalInputElemPadding, function (_a) {
     var invert = _a.invert;
     return (invert ? greyColor80 : greyColor5);
 }, function (_a) {
     var invert = _a.invert, disabled = _a.disabled;
     return invert
-        ? (disabled ? themes_1.colors.greyColor40 : themes_1.colors.white)
-        : disabled ? themes_1.colors.greyColor40 : themes_1.colors.greyColor100;
+        ? disabled
+            ? themes_1.colors.greyColor40
+            : themes_1.colors.white
+        : disabled
+            ? themes_1.colors.greyColor40
+            : themes_1.colors.greyColor100;
 }, function (_a) {
     var disabled = _a.disabled;
-    return (disabled ? '' : globalVariables_1.globalInputElemHover);
+    return (disabled ? "" : globalVariables_1.globalInputElemHover);
 }, function (_a) {
     var invert = _a.invert, disabled = _a.disabled;
     return disabled ? greyColor15 : invert ? greyColor70 : greyColor10;
@@ -53,57 +56,72 @@ exports.StyledInput = styled_components_1.default.input(templateObject_3 || (tem
     var disabled = _a.disabled;
     return disabled && (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n            color: ", "\n            background-color: ", ";\n            cursor: not-allowed;\n            &:hover{\n                background-color: none !important;\n            }\n    "], ["\n            color: ", "\n            background-color: ", ";\n            cursor: not-allowed;\n            &:hover{\n                background-color: none !important;\n            }\n    "])), greyColor40, greyColor15);
 }, greyColor40);
-exports.StyledDateInputWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    ", "\n"], ["\n    ", "\n"])), globalVariables_1.globalInputElemFocused);
-exports.StyledCalenderContainer = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    ", "\n    position: absolute;\n    width: 30rem;\n    z-index: 10000;\n\n    visibility: ", ";\n    /* transform: scaleY(0); \n    transform-origin: top center; \n    transition: transform 0.5s; */\n\n    /* &:not(:focus-within .calender-container) {\n        transform: scaleY(0);\n        visibility: hidden;\n        transition: transform 0.5s, visibility 0s 0.5s; /* Delay visibility change after animation */\n    } */\n\n    .disabled-date {\n        opacity: 0.5;\n        /* pointer-events: none; */\n    }\n    \n    .range {\n        background-color: ", ";\n        color: ", ";\n    }\n\n    .today {\n        background-color: ", ";\n        color: ", ";\n    }\n    \n    .todaysDate {\n        position: relative;\n    }\n    \n    .range.todaysDate{\n        position: relative;\n    }\n\n    .range.todaysDate::after{\n        content: '';\n        background-color: ", ";\n        width: .7rem;\n        height: .7rem;\n        position: absolute;\n        border-radius: 50%;\n        bottom: 0.3rem;\n    }\n\n\n    .todaysDate::after {\n        content: '';\n        background-color: ", ";\n        width: .7rem;\n        height: .7rem;\n        position: absolute;\n        border-radius: 50%;\n        bottom: 0.3rem;\n    }\n\n    .today.todaysDate {\n        /* color: ", "; */\n        background-color: ", ";\n    }\n\n    .selectedToday{\n        background-color: ", ";\n        color: ", ";\n    }\n\n    .today.todaysDate.selectedToday::after {\n        content: '';\n        background-color: ", ";\n        width: .7rem;\n        height: .7rem;\n        position: absolute;\n        border-radius: 50%;\n        bottom: 0.3rem;\n    }\n\n    .right-class {\n        right: 0;\n    }\n"], ["\n    ", "\n    position: absolute;\n    width: 30rem;\n    z-index: 10000;\n\n    visibility: ", ";\n    /* transform: scaleY(0); \n    transform-origin: top center; \n    transition: transform 0.5s; */\n\n    /* &:not(:focus-within .calender-container) {\n        transform: scaleY(0);\n        visibility: hidden;\n        transition: transform 0.5s, visibility 0s 0.5s; /* Delay visibility change after animation */\n    } */\n\n    .disabled-date {\n        opacity: 0.5;\n        /* pointer-events: none; */\n    }\n    \n    .range {\n        background-color: ", ";\n        color: ", ";\n    }\n\n    .today {\n        background-color: ", ";\n        color: ", ";\n    }\n    \n    .todaysDate {\n        position: relative;\n    }\n    \n    .range.todaysDate{\n        position: relative;\n    }\n\n    .range.todaysDate::after{\n        content: '';\n        background-color: ", ";\n        width: .7rem;\n        height: .7rem;\n        position: absolute;\n        border-radius: 50%;\n        bottom: 0.3rem;\n    }\n\n\n    .todaysDate::after {\n        content: '';\n        background-color: ", ";\n        width: .7rem;\n        height: .7rem;\n        position: absolute;\n        border-radius: 50%;\n        bottom: 0.3rem;\n    }\n\n    .today.todaysDate {\n        /* color: ", "; */\n        background-color: ", ";\n    }\n\n    .selectedToday{\n        background-color: ", ";\n        color: ", ";\n    }\n\n    .today.todaysDate.selectedToday::after {\n        content: '';\n        background-color: ", ";\n        width: .7rem;\n        height: .7rem;\n        position: absolute;\n        border-radius: 50%;\n        bottom: 0.3rem;\n    }\n\n    .right-class {\n        right: 0;\n    }\n"])), globalVariables_1.globalLightboxStyle, function (_a) {
-    var debug = _a.debug;
-    return (debug ? '' : 'hidden');
-}, function (_a) {
-    var invert = _a.invert;
-    return invert ? greyColor3 : primaryColor10;
-}, function (_a) {
-    var invert = _a.invert;
-    return invert && greyColor80;
-}, primaryColor100, white, primaryColor100, primaryColor100, function (_a) {
-    var invert = _a.invert;
-    return !invert ? greyColor100 : white;
-}, primaryColor100, primaryColor100, white, white);
-exports.StyledDateBlock = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n    font-size: 1.4rem;\n    width: calc(280px / 7);\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    height: 4rem;\n    border-bottom: ", ";\n    ", "\n    cursor: pointer;\n    color: ", ";\n    ", "\n    ", "\n  \n    ", "\n\n\n    ", "     \n    \n    ", "\n\n\n    ", "\n\n    ", "\n"], ["\n    font-size: 1.4rem;\n    width: calc(280px / 7);\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    height: 4rem;\n    border-bottom: ", ";\n    ", "\n    cursor: pointer;\n    color: ", ";\n    ", "\n    ", "\n  \n    ", "\n\n\n    ", "     \n    \n    ", "\n\n\n    ", "\n\n    ", "\n"])), function (_a) {
+exports.StyledDateInputWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), globalVariables_1.globalInputElemFocused);
+exports.StyledCalenderContainer = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  ", "\n  position: absolute;\n  width: 30rem;\n  z-index: 10000;\n\n  visibility: ", ";\n  /* transform: scaleY(0); \n    transform-origin: top center; \n    transition: transform 0.5s; */\n\n  /* &:not(:focus-within .calender-container) {\n        transform: scaleY(0);\n        visibility: hidden;\n        transition: transform 0.5s, visibility 0s 0.5s; /* Delay visibility change after animation */\n  /* } */\n\n"], ["\n  ", "\n  position: absolute;\n  width: 30rem;\n  z-index: 10000;\n\n  visibility: ", ";\n  /* transform: scaleY(0); \n    transform-origin: top center; \n    transition: transform 0.5s; */\n\n  /* &:not(:focus-within .calender-container) {\n        transform: scaleY(0);\n        visibility: hidden;\n        transition: transform 0.5s, visibility 0s 0.5s; /* Delay visibility change after animation */\n  /* } */\n\n"])), globalVariables_1.globalLightboxStyle, function (_a) {
+    var showCalendar = _a.showCalendar, debug = _a.debug;
+    return debug ? "" : showCalendar ? "visible" : "hidden";
+});
+exports.StyledDateBlock = styled_components_1.default.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  font-size: 1.4rem;\n  width: calc(280px / 7);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 4rem;\n  border-bottom: ", ";\n  ", "\n  cursor: pointer;\n  color: ", ";\n  ", "\n  ", "\n  \n    ", "\n\n\n    ", "     \n    \n    ", "\n\n\n    ", "\n\n    ", "\n\n\n    ", "\n\n    ", "\n"], ["\n  font-size: 1.4rem;\n  width: calc(280px / 7);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 4rem;\n  border-bottom: ", ";\n  ", "\n  cursor: pointer;\n  color: ", ";\n  ", "\n  ", "\n  \n    ", "\n\n\n    ", "     \n    \n    ", "\n\n\n    ", "\n\n    ", "\n\n\n    ", "\n\n    ", "\n"])), function (_a) {
     var invert = _a.invert;
     return !invert ? "1px solid ".concat(white) : "1px solid ".concat(greyColor80);
-}, (0, mixins_1.transition)('background-color 0.2s'), function (_a) {
+}, (0, mixins_1.transition)("background-color 0.2s"), function (_a) {
     var invert = _a.invert;
     return invert && white;
 }, globalVariables_1.globalHoverOnWhiteBG, function (_a) {
-    var isTodaysDate = _a.isTodaysDate, invert = _a.invert;
-    return isTodaysDate && (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n            position: relative;\n            &::after {\n                content: '';\n                background-color: ", ";\n                width: 0.7rem;\n                height: 0.7rem;\n                position: absolute;\n                border-radius: 50%;\n                bottom: 0.3rem;\n            }\n    "], ["\n            position: relative;\n            &::after {\n                content: '';\n                background-color: ", ";\n                width: 0.7rem;\n                height: 0.7rem;\n                position: absolute;\n                border-radius: 50%;\n                bottom: 0.3rem;\n            }\n    "])), primaryColor100);
+    var isTodaysDate = _a.isTodaysDate;
+    return isTodaysDate && (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      position: relative;\n      &::after {\n        content: \"\";\n        background-color: ", ";\n        width: 0.7rem;\n        height: 0.7rem;\n        position: absolute;\n        border-radius: 50%;\n        bottom: 0.3rem;\n      }\n    "], ["\n      position: relative;\n      &::after {\n        content: \"\";\n        background-color: ", ";\n        width: 0.7rem;\n        height: 0.7rem;\n        position: absolute;\n        border-radius: 50%;\n        bottom: 0.3rem;\n      }\n    "])), primaryColor100);
 }, function (_a) {
     var isDisabledDate = _a.isDisabledDate;
-    return isDisabledDate && (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n            opacity: 0.5;\n    "], ["\n            opacity: 0.5;\n    "])));
+    return isDisabledDate && (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      opacity: 0.5;\n    "], ["\n      opacity: 0.5;\n    "])));
 }, function (_a) {
-    var isToday = _a.isToday, isTodaysDate = _a.isTodaysDate, invert = _a.invert;
-    return (isToday && isTodaysDate) && (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n            position: relative;\n            /* background-color: ", "; */\n            pointer-events: none;\n            color: white;\n            &::after {\n                content: '';\n                    background-color: ", ";\n                    width: 0.7rem;\n                    height: 0.7rem;\n                    position: absolute;\n                    border-radius: 50%;\n                    bottom: 0.3rem;\n                }\n        "], ["\n            position: relative;\n            /* background-color: ", "; */\n            pointer-events: none;\n            color: white;\n            &::after {\n                content: '';\n                    background-color: ", ";\n                    width: 0.7rem;\n                    height: 0.7rem;\n                    position: absolute;\n                    border-radius: 50%;\n                    bottom: 0.3rem;\n                }\n        "])), primaryColor100, white);
+    var isSelectedDate = _a.isSelectedDate, isTodaysDate = _a.isTodaysDate;
+    return isSelectedDate &&
+        isTodaysDate && (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n      position: relative;\n      /* background-color: ", "; */\n      pointer-events: none;\n      color: white;\n      &::after {\n        content: \"\";\n        background-color: ", ";\n        width: 0.7rem;\n        height: 0.7rem;\n        position: absolute;\n        border-radius: 50%;\n        bottom: 0.3rem;\n      }\n    "], ["\n      position: relative;\n      /* background-color: ", "; */\n      pointer-events: none;\n      color: white;\n      &::after {\n        content: \"\";\n        background-color: ", ";\n        width: 0.7rem;\n        height: 0.7rem;\n        position: absolute;\n        border-radius: 50%;\n        bottom: 0.3rem;\n      }\n    "])), primaryColor100, white);
 }, function (_a) {
     var range = _a.range, invert = _a.invert;
-    return (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n        background-color: ", ";\n        color: ", ";\n        &:hover{\n            background-color: ", ";\n            color: ", ";\n        }\n    "], ["\n        background-color: ", ";\n        color: ", ";\n        &:hover{\n            background-color: ", ";\n            color: ", ";\n        }\n    "])), (!invert && range) ? primaryColor10 : (invert && range) && greyColor3, (!invert && range) ? greyColor80 : (invert && range) ? greyColor80 : (!invert && !range) ? greyColor100 : white, (!invert && range) ? primaryColor10 : (invert && range) && greyColor3, (!invert && range) ? greyColor80 : (invert && range) ? greyColor80 : (!invert && !range) ? greyColor100 : white);
+    return (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n    background-color: ", ";\n    color: ", ";\n    &:hover {\n      background-color: ", ";\n      color: ", ";\n    }\n  "], ["\n    background-color: ", ";\n    color: ", ";\n    &:hover {\n      background-color: ", ";\n      color: ", ";\n    }\n  "])), !invert && range
+        ? primaryColor10
+        : invert && range && greyColor3, !invert && range
+        ? greyColor80
+        : invert && range
+            ? greyColor80
+            : !invert && !range
+                ? greyColor100
+                : white, !invert && range
+        ? primaryColor10
+        : invert && range && greyColor3, !invert && range
+        ? greyColor80
+        : invert && range
+            ? greyColor80
+            : !invert && !range
+                ? greyColor100
+                : white);
 }, function (_a) {
     var isToday = _a.isToday;
-    return isToday && (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n            pointer-events: none; // disable hover style\n            background-color: ", ";\n            color: white;\n            &:hover{\n                background-color: ", ";\n                color: white;\n            }\n    "], ["\n            pointer-events: none; // disable hover style\n            background-color: ", ";\n            color: white;\n            &:hover{\n                background-color: ", ";\n                color: white;\n            }\n    "])), primaryColor100, primaryColor100);
+    return isToday && (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n      pointer-events: none; // disable hover style\n      background-color: ", ";\n      color: white;\n      &:hover {\n        background-color: ", ";\n        color: white;\n      }\n    "], ["\n      pointer-events: none; // disable hover style\n      background-color: ", ";\n      color: white;\n      &:hover {\n        background-color: ", ";\n        color: white;\n      }\n    "])), primaryColor100, primaryColor100);
+}, function (_a) {
+    var isSelectedDate = _a.isSelectedDate;
+    return isSelectedDate && (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n      pointer-events: none; // disable hover style\n      background-color: ", ";\n      color: white;\n      &:hover {\n        background-color: ", ";\n        color: white;\n      }\n    "], ["\n      pointer-events: none; // disable hover style\n      background-color: ", ";\n      color: white;\n      &:hover {\n        background-color: ", ";\n        color: white;\n      }\n    "])), primaryColor100, primaryColor100);
+}, function (_a) {
+    var disableClick = _a.disableClick;
+    return disableClick && (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n      pointer-events: none;\n    "], ["\n      pointer-events: none;\n    "])));
 }, function (_a) {
     var previousDateOnly = _a.previousDateOnly, futureDateOnly = _a.futureDateOnly, isDisabledDate = _a.isDisabledDate;
-    return ((previousDateOnly && isDisabledDate) || (futureDateOnly && isDisabledDate)) && (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n            pointer-events: none !important;\n        "], ["\n            pointer-events: none !important;\n        "])));
+    return ((previousDateOnly && isDisabledDate) ||
+        (futureDateOnly && isDisabledDate)) && (0, styled_components_1.css)(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n      pointer-events: none !important;\n    "], ["\n      pointer-events: none !important;\n    "])));
 });
-exports.StyledMonthView = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n\n"], ["\n\n"])));
-exports.StyledMonthTitle = styled_components_1.default.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n    display: flex;\n    justify-content: center;\n    gap: 0.5rem;\n    color: ", ";\n"], ["\n    display: flex;\n    justify-content: center;\n    gap: 0.5rem;\n    color: ", ";\n"])), function (_a) {
+exports.StyledMonthView = styled_components_1.default.div(templateObject_15 || (templateObject_15 = __makeTemplateObject([""], [""])));
+exports.StyledMonthTitle = styled_components_1.default.div(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  gap: 0.5rem;\n  color: ", ";\n"], ["\n  display: flex;\n  justify-content: center;\n  gap: 0.5rem;\n  color: ", ";\n"])), function (_a) {
     var invert = _a.invert;
     return invert && white;
 });
-exports.StyledHeader = styled_components_1.default.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n    display: flex;\n    width: 90%;\n    margin: auto;\n    padding: 1.5rem 0 1rem 0;\n    font-size: 1.4rem;\n    font-weight: 600;\n    align-items: center;\n    justify-content: space-between;\n"], ["\n    display: flex;\n    width: 90%;\n    margin: auto;\n    padding: 1.5rem 0 1rem 0;\n    font-size: 1.4rem;\n    font-weight: 600;\n    align-items: center;\n    justify-content: space-between;\n"])));
-exports.StyledWeekDaysWrapper = styled_components_1.default.div(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n    display: flex;\n    justify-content: center;\n    height: 3.5rem;\n"], ["\n    display: flex;\n    justify-content: center;\n    height: 3.5rem;\n"])));
-exports.StyledWeekdays = styled_components_1.default.div(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n    font-size: 1.4rem;\n    /* font-weight: 600; */\n    opacity: 0.7;\n    width: calc(280px / 7);\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    color: ", ";\n"], ["\n    font-size: 1.4rem;\n    /* font-weight: 600; */\n    opacity: 0.7;\n    width: calc(280px / 7);\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    color: ", ";\n"])), function (_a) {
+exports.StyledHeader = styled_components_1.default.div(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  display: flex;\n  width: 90%;\n  margin: auto;\n  padding: 1.5rem 0 1rem 0;\n  font-size: 1.4rem;\n  font-weight: 600;\n  align-items: center;\n  justify-content: space-between;\n"], ["\n  display: flex;\n  width: 90%;\n  margin: auto;\n  padding: 1.5rem 0 1rem 0;\n  font-size: 1.4rem;\n  font-weight: 600;\n  align-items: center;\n  justify-content: space-between;\n"])));
+exports.StyledWeekDaysWrapper = styled_components_1.default.div(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  height: 3.5rem;\n"], ["\n  display: flex;\n  justify-content: center;\n  height: 3.5rem;\n"])));
+exports.StyledWeekdays = styled_components_1.default.div(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n  font-size: 1.4rem;\n  /* font-weight: 600; */\n  opacity: 0.7;\n  width: calc(280px / 7);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  color: ", ";\n"], ["\n  font-size: 1.4rem;\n  /* font-weight: 600; */\n  opacity: 0.7;\n  width: calc(280px / 7);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  color: ", ";\n"])), function (_a) {
     var invert = _a.invert;
     return invert && white;
 });
-exports.StyledBodyWrapper = styled_components_1.default.div(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n    display: flex;\n    flex-wrap: wrap;\n    justify-content: center;\n    padding-bottom: 1rem;\n    div {\n        /* font-size: 1.4rem;\n        width: calc(280px / 7);\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        height: 4rem;\n        border: ", ";\n        border-top: ", ";\n        border-bottom: ", ";\n        color: ", ";\n        transition: background-color 0.2s; */\n        /* &:hover:not(.today.todaysDate.selectedToday, .today) {\n            cursor: pointer;\n        } */\n      }\n\n"], ["\n    display: flex;\n    flex-wrap: wrap;\n    justify-content: center;\n    padding-bottom: 1rem;\n    div {\n        /* font-size: 1.4rem;\n        width: calc(280px / 7);\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        height: 4rem;\n        border: ", ";\n        border-top: ", ";\n        border-bottom: ", ";\n        color: ", ";\n        transition: background-color 0.2s; */\n        /* &:hover:not(.today.todaysDate.selectedToday, .today) {\n            cursor: pointer;\n        } */\n      }\n\n"])), function (_a) {
+exports.StyledBodyWrapper = styled_components_1.default.div(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: center;\n  padding-bottom: 1rem;\n  div {\n    /* font-size: 1.4rem;\n        width: calc(280px / 7);\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        height: 4rem;\n        border: ", ";\n        border-top: ", ";\n        border-bottom: ", ";\n        color: ", ";\n        transition: background-color 0.2s; */\n    /* &:hover:not(.today.todaysDate.selectedToday, .today) {\n            cursor: pointer;\n        } */\n  }\n"], ["\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: center;\n  padding-bottom: 1rem;\n  div {\n    /* font-size: 1.4rem;\n        width: calc(280px / 7);\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        height: 4rem;\n        border: ", ";\n        border-top: ", ";\n        border-bottom: ", ";\n        color: ", ";\n        transition: background-color 0.2s; */\n    /* &:hover:not(.today.todaysDate.selectedToday, .today) {\n            cursor: pointer;\n        } */\n  }\n"])), function (_a) {
     var invert = _a.invert;
     return !invert ? "6px 0px ".concat(white) : "6px 0px ".concat(greyColor80);
 }, function (_a) {
@@ -116,4 +134,4 @@ exports.StyledBodyWrapper = styled_components_1.default.div(templateObject_18 ||
     var invert = _a.invert;
     return invert && white;
 });
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20;

package/dist/components/DateRangePicker/index.js

@@ -30,7 +30,6 @@ var getBlockLabelProps_1 = require("../../utils/getBlockLabelProps");
 var CheckboxInput_1 = require("../RadioAndCheckbox/comps/CheckboxList/comps/CheckboxInput");
 var DatePicker_1 = __importDefault(require("../DatePicker"));
 var styled_1 = require("./styled");
-var none = themes_1.colors.none;
 function DateRangePicker(props) {
     var onChange = props.onChange, value = props.value, id = props.id, readOnly = props.readOnly, futureDateOnly = props.futureDateOnly, previousDateOnly = props.previousDateOnly, allowPresentlyOngoing = props.allowPresentlyOngoing, invert = props.invert, disabled = props.disabled, debug = props.debug;
     var currentDate = new Date(new Date().toLocaleDateString());

package/dist/components/Dropdowns/comps/OptionsShell/index.js

@@ -62,7 +62,7 @@ exports.OptionsShell = react_1.default.forwardRef(function (_a, ref) {
     var selectCompRect = (_c = relativeToRef === null || relativeToRef === void 0 ? void 0 : relativeToRef.current) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect();
     return isDesktop ? (react_1.default.createElement(react_1.Fragment, null,
         popOutOfOverflowHiddenParent && react_1.default.createElement("div", { ref: trackerRef }),
-        react_1.default.createElement(styled_1.StyledOptionsAnimateWrapper, { isOpen: showOptions, width: (_e = (_d = ref.current) === null || _d === void 0 ? void 0 : _d.getBoundingClientRect()) === null || _e === void 0 ? void 0 : _e.width, openHeight: (_g = (_f = ref.current) === null || _f === void 0 ? void 0 : _f.getBoundingClientRect()) === null || _g === void 0 ? void 0 : _g.height, style: __assign({ zIndex: 100000 }, (fixPos
+        react_1.default.createElement(styled_1.StyledOptionsAnimateWrapper, { invert: invert, isOpen: showOptions, width: (_e = (_d = ref.current) === null || _d === void 0 ? void 0 : _d.getBoundingClientRect()) === null || _e === void 0 ? void 0 : _e.width, openHeight: (_g = (_f = ref.current) === null || _f === void 0 ? void 0 : _f.getBoundingClientRect()) === null || _g === void 0 ? void 0 : _g.height, style: __assign({ zIndex: 100000 }, (fixPos
                 ? __assign({ position: "fixed", top: "".concat(fixPos.y -
                         (yOrientation === "top" ? (selectCompRect === null || selectCompRect === void 0 ? void 0 : selectCompRect.height) || 0 : 0), "px"), left: "".concat(fixPos.x, "px") }, (yOrientation === "top"
                     ? { transform: "translateY(-100%)" }

package/dist/components/SimpleTable/comps/AddRowColButtons/index.d.ts

@@ -0,0 +1,7 @@
+export function AddRowButton({ onClick }: {
+    onClick: any;
+}): React.JSX.Element;
+export function AddColButton({ onClick }: {
+    onClick: any;
+}): React.JSX.Element;
+import React from "react";

package/dist/components/SimpleTable/comps/AddRowColButtons/index.js

@@ -0,0 +1,55 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AddColButton = exports.AddRowButton = void 0;
+var react_1 = __importDefault(require("react"));
+var icons_1 = require("../../../../icons");
+var themes_1 = require("../../../../themes");
+var styled_components_1 = __importStar(require("styled-components"));
+var mixins_1 = require("../../../../themes/mixins");
+var Plus = icons_1.icons.Plus;
+var commonStyles = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  border: none;\n  ", "\n  &:hover {\n    background-color: ", ";\n  }\n  cursor: pointer;\n"], ["\n  background-color: ", ";\n  border: none;\n  ", "\n  &:hover {\n    background-color: ", ";\n  }\n  cursor: pointer;\n"])), themes_1.colors.greyColor5, (0, mixins_1.transition)("background-color"), themes_1.colors.greyColor10);
+var StyledRowButton = styled_components_1.default.button(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: 2rem;\n  text-align: center;\n  width: 100%;\n  ", "\n"], ["\n  height: 2rem;\n  text-align: center;\n  width: 100%;\n  ", "\n"])), commonStyles);
+var StyledColButton = styled_components_1.default.button(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  width: 2rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-bottom: 2rem; //should be same as height of StyledRowButton\n  flex-shrink: 0;\n  ", "\n"], ["\n  width: 2rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-bottom: 2rem; //should be same as height of StyledRowButton\n  flex-shrink: 0;\n  ", "\n"])), commonStyles);
+var AddRowButton = function (_a) {
+    var onClick = _a.onClick;
+    return (react_1.default.createElement(StyledRowButton, { onClick: onClick },
+        react_1.default.createElement(Plus, { size: 12, weight: "bold" })));
+};
+exports.AddRowButton = AddRowButton;
+var AddColButton = function (_a) {
+    var onClick = _a.onClick;
+    return (react_1.default.createElement(StyledColButton, { onClick: onClick },
+        react_1.default.createElement(Plus, { size: 12, weight: "bold" })));
+};
+exports.AddColButton = AddColButton;
+var templateObject_1, templateObject_2, templateObject_3;

package/dist/components/SimpleTable/functions.d.ts

@@ -0,0 +1,3 @@
+export function genHash(len: any): string;
+export function handleAddCol(value: any, props: any): void;
+export function handleAddRow(value: any, props: any): void;

package/dist/components/SimpleTable/functions.js

@@ -0,0 +1,52 @@
+"use strict";
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.handleAddRow = exports.handleAddCol = exports.genHash = void 0;
+var makeArrayFromLength_1 = require("../../utils/makeArrayFromLength");
+var genHash = function (len) {
+    var arr = "1234567890abcdefghijklmnopqrstuvwxyz";
+    var ans = "";
+    for (var i = len; i > 0; i--) {
+        ans += arr[Math.floor(Math.random() * arr.length)];
+    }
+    return ans;
+};
+exports.genHash = genHash;
+var handleAddCol = function (value, props) {
+    var onChange = props.onChange, id = props.id;
+    var data = value.data, colWidthConfig = value.colWidthConfig;
+    var newData = __spreadArray([], data, true);
+    newData.map(function (row) {
+        row.cellData.push({
+            id: "row_".concat((0, exports.genHash)(8)),
+        });
+    });
+    onChange && onChange(id, { data: newData, colWidthConfig: colWidthConfig });
+};
+exports.handleAddCol = handleAddCol;
+var handleAddRow = function (value, props) {
+    var onChange = props.onChange, id = props.id;
+    var data = value.data, colWidthConfig = value.colWidthConfig;
+    var newData = __spreadArray([], data, true);
+    var lastRowIdx = newData.length - 1;
+    var newRowTotCells = newData[lastRowIdx].cellData.length;
+    if (!newRowTotCells)
+        return;
+    var newRow = {
+        id: "row_".concat((0, exports.genHash)(8)),
+        cellData: (0, makeArrayFromLength_1.makeArrayFromLength)(newRowTotCells).map(function (d, i) { return ({
+            id: "cell_".concat((0, exports.genHash)(8)),
+        }); })
+    };
+    newData.push(newRow);
+    onChange && onChange(id, { data: newData, colWidthConfig: colWidthConfig });
+};
+exports.handleAddRow = handleAddRow;

package/dist/components/SimpleTable/index.d.ts

@@ -0,0 +1,15 @@
+export function SimpleTable({ id, readOnly, config, value: _value, onChange, canAddRows, defaultColWidth, }: {
+    id: any;
+    readOnly: any;
+    config?: {
+        noOfCols: number;
+        noOfRows: number;
+        colHeaderData: any;
+        rowHeaderData: any;
+    };
+    value: any;
+    onChange: any;
+    canAddRows?: boolean;
+    defaultColWidth?: number;
+}, ...args: any[]): React.JSX.Element;
+import React from "react";

package/dist/components/SimpleTable/index.js

@@ -0,0 +1,179 @@
+"use strict";
+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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SimpleTable = void 0;
+var react_1 = __importStar(require("react"));
+var themes_1 = require("../../themes");
+var getBlockLabelProps_1 = require("../../utils/getBlockLabelProps");
+var BlockLabel_1 = require("../BlockLabel");
+//local utils
+var styled_components_1 = require("styled-components");
+var utilsOolib_1 = require("../../utilsOolib");
+var AddRowColButtons_1 = require("./comps/AddRowColButtons");
+var functions_1 = require("./functions");
+var styled_1 = require("./styled");
+var useResizeTableColumns_1 = require("./useResizeTableColumns");
+var prepInitValueFromConfigIfNoValue_1 = require("./utils/prepInitValueFromConfigIfNoValue");
+var greyColor100 = themes_1.colors.greyColor100;
+/*pending:
+- first test whatever is done on okf
+- add col is still buggy. cannot resize, plus width seems wrong of new col
+- add rowHeaderData functionality
+- fix bugs in the pointer and risize hover
+- action menu to toggle header styles for col & row
+- action menu to toggle between stretch to available width vs fixed col widths (this might not be straightforward)
+- delete cols & rows
+- reposition cols & rows
+*/
+function SimpleTable(_a) {
+    var id = _a.id, readOnly = _a.readOnly, _b = _a.config, config = _b === void 0 ? {
+        noOfCols: 3,
+        noOfRows: 3,
+        colHeaderData: undefined,
+        rowHeaderData: undefined
+    } : _b, _value = _a.value, onChange = _a.onChange, _c = _a.canAddRows, canAddRows = _c === void 0 ? true : _c, _d = _a.defaultColWidth, defaultColWidth = _d === void 0 ? 200 : _d;
+    var props = arguments[0];
+    var theme = (0, styled_components_1.useTheme)();
+    var _e = theme || {}, RichTextEditor = _e.RichTextEditor, convertToRichText = _e.convertToRichText;
+    var _f = (0, prepInitValueFromConfigIfNoValue_1.prepInitValueFromConfigIfNoValue)({
+        _value: _value,
+        config: config,
+        defaultColWidth: defaultColWidth,
+        convertToRichText: convertToRichText
+    }), value = _f.value, canAddCols = _f.canAddCols, //returns true if no config.colHeaderData is defined. else false
+    canToggleColHeaderStyle = _f.canToggleColHeaderStyle // returns true if no config.colHeaderData is defined. else false
+    ;
+    console.log({ value: value });
+    var _g = (0, useResizeTableColumns_1.useResizeTableColumns)({
+        setColWidthConfig: function (setterFn) {
+            var newColWidthConfig = setterFn(value.colWidthConfig);
+            onChange(id, __assign(__assign({}, value), { colWidthConfig: newColWidthConfig }));
+        },
+        colWidthConfig: value.colWidthConfig,
+        theme: theme,
+    }), resetColResizeState = _g.resetColResizeState, hideShowDragZoneIndicator = _g.hideShowDragZoneIndicator, initColResizeState = _g.initColResizeState, resetDragZoneIndicator = _g.resetDragZoneIndicator, handleResizeColumn = _g.handleResizeColumn, colResizeState = _g.colResizeState, dragZoneWidth = _g.dragZoneWidth;
+    (0, react_1.useEffect)(function () {
+        window.addEventListener("mouseup", resetColResizeState);
+        window.addEventListener("mousemove", handleResizeColumn);
+        return function () {
+            window.removeEventListener("mousemove", handleResizeColumn);
+            window.removeEventListener("mouseup", resetColResizeState);
+        };
+    }, [colResizeState]);
+    var CellContentBlocks = {
+        RichTextEditor: RichTextEditor,
+        // KPDropdown,
+        // TextInput,
+        // RadioList,
+        // SANS_3,
+    };
+    var CellContentBlockDefaultProps = {
+        RichTextEditor: {
+            variant: "simple",
+            typo: "SANS_3",
+            placeholder: " ",
+        },
+        // KPDropdown: {
+        // 	size: 'small',
+        // },
+    };
+    var CellValueGetters = {
+        RichTextEditor: function (v) { return (convertToRichText ? convertToRichText(v) : v); },
+    }; //prob dont need this..
+    var handleCellInputChange = function (_a) {
+        var cellIdx = _a.cellIdx, rowIdx = _a.rowIdx, v = _a.v;
+        var valData = value.data;
+        var colWidthConfig = value.colWidthConfig;
+        var newData = __spreadArray([], valData, true);
+        newData[rowIdx].cellData[cellIdx].value = v;
+        onChange && onChange(id, { data: newData, colWidthConfig: colWidthConfig });
+    };
+    var genRow = function (_a) {
+        var row = _a.row, rowIdx = _a.rowIdx;
+        var StyledWrapper = row.isColHeader
+            ? styled_1.StyledSimpleTableHeader
+            : styled_1.StyledSimpleTableRow;
+        return (react_1.default.createElement(StyledWrapper
+        // onClick={() => row.link && history.push(row.link)}
+        , { 
+            // onClick={() => row.link && history.push(row.link)}
+            style: { display: "flex" }, readOnly: readOnly, rowIdx: rowIdx, key: "row_" + rowIdx }, row.cellData.map(function (cell, cellIdx) {
+            var CellComp = RichTextEditor //cuz in oolib, richtexteditor will not be there for now
+                ? CellContentBlocks["RichTextEditor"]
+                : function () { return react_1.default.createElement("div", null, "RTE Doesnt Exist"); };
+            var cellProps = __assign({}, CellContentBlockDefaultProps["RichTextEditor"]);
+            var cellValue = CellValueGetters["RichTextEditor"](cell.value);
+            var cellWidth = value.colWidthConfig["col_".concat(cellIdx)];
+            //(100% - totalExplicitWidths)/(totalColumns - noOfColsWithExplicitWidths)
+            // let cellProps = {
+            // 	...CellContentBlockDefaultProps[cell.comp],
+            // 	...(cell.props ? cell.props : {}),
+            // }
+            return (react_1.default.createElement(styled_1.StyledSimpleTableCell, { key: cell.id, id: "kp_table__cell__".concat(cell.id), style: {
+                    color: greyColor100,
+                    width: "".concat(cellWidth),
+                    minHeight: "4rem",
+                    borderRight: (colResizeState === null || colResizeState === void 0 ? void 0 : colResizeState.colId) === "col_".concat(cellIdx) &&
+                        "2px solid ".concat((0, utilsOolib_1.getPrimaryColor100)(theme === null || theme === void 0 ? void 0 : theme.colors)),
+                }, onMouseDown: function (e) {
+                    initColResizeState(e, { colId: "col_".concat(cellIdx) });
+                }, onMouseOut: resetDragZoneIndicator, onMouseMove: hideShowDragZoneIndicator },
+                react_1.default.createElement(CellComp, __assign({}, cellProps, { id: "kp_table_cell__".concat(cell.id, "__rich_input") /*dont mess with this id nomenclature. it needs to stay this way. check out the handleCellInputChange fn to understand */, value: cellValue, readOnly: readOnly || cell.readOnly, onChange: function (k, v) {
+                        return handleCellInputChange({ v: v, rowIdx: rowIdx, cellIdx: cellIdx });
+                    } }))));
+        })));
+    };
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement(BlockLabel_1.BlockLabel, __assign({}, (0, getBlockLabelProps_1.getBlockLabelProps)(props))),
+        react_1.default.createElement("div", { style: {
+                display: "flex",
+                alignItems: "stretch" /**without stretch AddColButton will be wonky */,
+            } },
+            react_1.default.createElement("div", null,
+                react_1.default.createElement(styled_1.StyledSimpleTable, null, value.data.map(function (row, rowIdx) { return genRow({ row: row, rowIdx: rowIdx }); })),
+                !readOnly && canAddRows && (react_1.default.createElement(AddRowColButtons_1.AddRowButton, { onClick: function () { return (0, functions_1.handleAddRow)(value, props); } }))),
+            !readOnly && canAddCols && (react_1.default.createElement(AddRowColButtons_1.AddColButton, { onClick: function () { return (0, functions_1.handleAddCol)(value, props); } })))));
+}
+exports.SimpleTable = SimpleTable;

package/dist/components/SimpleTable/styled.d.ts

@@ -0,0 +1,4 @@
+export const StyledSimpleTable: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledSimpleTableRow: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledSimpleTableCell: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledSimpleTableHeader: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/components/SimpleTable/styled.js

@@ -0,0 +1,45 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledSimpleTableHeader = exports.StyledSimpleTableCell = exports.StyledSimpleTableRow = exports.StyledSimpleTable = void 0;
+var themes_1 = require("../../themes");
+var transitions_1 = require("../../themes/mixins/transitions");
+var styled_components_1 = __importStar(require("styled-components"));
+var utilsOolib_1 = require("../../utilsOolib");
+exports.StyledSimpleTable = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-top: 1px solid ", ";\n  border-bottom: 1px solid ", ";\n  border-left: 1px solid ", ";\n"], ["\n  border-top: 1px solid ", ";\n  border-bottom: 1px solid ", ";\n  border-left: 1px solid ", ";\n"])), themes_1.colors.greyColor10, themes_1.colors.greyColor10, themes_1.colors.greyColor10);
+exports.StyledSimpleTableRow = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  ", ";\n  background-color: ", ";\n  ", "\n"], ["\n  display: flex;\n  ", ";\n  background-color: ", ";\n  ", "\n"])), (0, transitions_1.transition)("background-color"), function (_a) {
+    var rowIdx = _a.rowIdx;
+    return rowIdx % 2 === 1 ? themes_1.colors.greyColor3 : themes_1.colors.white;
+}, function (_a) {
+    var readOnly = _a.readOnly, theme = _a.theme;
+    return !readOnly && (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    :hover{\n        background-color: ", ";\n    }\n      \n    "], ["\n    :hover{\n        background-color: ", ";\n    }\n      \n    "])), (0, utilsOolib_1.getPrimaryColor10)(theme === null || theme === void 0 ? void 0 : theme.colors));
+});
+exports.StyledSimpleTableCell = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  /* max-width: 300px; */\n  padding: 0.8rem 1rem;\n  /* margin: 0 1rem; */\n  border-right: 1px solid ", ";\n"], ["\n  /* max-width: 300px; */\n  padding: 0.8rem 1rem;\n  /* margin: 0 1rem; */\n  border-right: 1px solid ", ";\n"])), themes_1.colors.greyColor10);
+exports.StyledSimpleTableHeader = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  .public-DraftEditor-content {\n    font-weight: 600;\n  }\n  background-color: ", ";\n  border-bottom: 2px solid ", ";\n"], ["\n  .public-DraftEditor-content {\n    font-weight: 600;\n  }\n  background-color: ", ";\n  border-bottom: 2px solid ", ";\n"])), themes_1.colors.greyColor, themes_1.colors.greyColor10);
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/dist/components/SimpleTable/useResizeTableColumns.d.ts

@@ -0,0 +1,14 @@
+export function useResizeTableColumns({ setColWidthConfig, colWidthConfig, theme, builderProps }: {
+    setColWidthConfig: any;
+    colWidthConfig: any;
+    theme: any;
+    builderProps: any;
+}): {
+    resetColResizeState: (e: any) => void;
+    hideShowDragZoneIndicator: (e: any) => void;
+    initColResizeState: (e: any, d: any) => void;
+    resetDragZoneIndicator: (e: any) => void;
+    handleResizeColumn: (e: any) => void;
+    colResizeState: any;
+    dragZoneWidth: number;
+};

package/dist/components/SimpleTable/useResizeTableColumns.js

@@ -0,0 +1,86 @@
+"use strict";
+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);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useResizeTableColumns = void 0;
+var react_1 = require("react");
+var themes_1 = require("../../themes");
+var utilsOolib_1 = require("../../utilsOolib");
+var useResizeTableColumns = function (_a) {
+    var setColWidthConfig = _a.setColWidthConfig, colWidthConfig = _a.colWidthConfig, theme = _a.theme, builderProps = _a.builderProps;
+    var _b = (0, react_1.useState)(undefined), colResizeState = _b[0], setColResizeState = _b[1];
+    var dragZoneWidth = 5;
+    var handleResizeColumn = function (e) {
+        e.preventDefault();
+        e.stopPropagation();
+        if (colResizeState) {
+            setColWidthConfig(function (prev) {
+                var _a;
+                return (__assign(__assign({}, prev), (_a = {}, _a[colResizeState.colId] = (colResizeState.initWidth + (e.clientX - colResizeState.mousePos)) + 'px', _a)));
+            });
+        }
+    };
+    var resetDragZoneIndicator = function (e) {
+        if (colResizeState || e.currentTarget.id !== e.target.id)
+            return;
+        e.currentTarget.style.borderRight = "1px solid ".concat(themes_1.colors.greyColor10);
+        e.currentTarget.style.cursor = 'pointer';
+    };
+    var isInDragZone = function (e) {
+        var mouseX = e.clientX;
+        var colRightEdge = e.currentTarget.getBoundingClientRect().right;
+        return mouseX > colRightEdge - dragZoneWidth;
+    };
+    var initColResizeState = function (e, d) {
+        e.preventDefault();
+        e.stopPropagation();
+        if (isInDragZone(e)) {
+            setColResizeState({
+                mousePos: e.clientX,
+                initWidth: parseInt(colWidthConfig[d.colId].replace('px', '')),
+                colId: d.colId
+            });
+        }
+    };
+    var hideShowDragZoneIndicator = function (e) {
+        e.preventDefault();
+        /** currentTarget is the element that this event is bound to */
+        if (e.currentTarget.id !== e.target.id)
+            return; //very important, else the indicator shows in some cases, when its not supposed to. we don't completely understand why...
+        if (!colResizeState) {
+            if (isInDragZone(e)) {
+                e.currentTarget.style.borderRight = "1px solid ".concat((0, utilsOolib_1.getPrimaryColor100)(theme === null || theme === void 0 ? void 0 : theme.colors));
+                e.currentTarget.style.cursor = 'col-resize';
+            }
+            else {
+                e.currentTarget.style.borderRight = "1px solid ".concat(themes_1.colors.greyColor10);
+                e.currentTarget.style.cursor = 'pointer';
+            }
+        }
+    };
+    var resetColResizeState = function (e) {
+        setColResizeState(undefined);
+        if (builderProps === null || builderProps === void 0 ? void 0 : builderProps.updateColWidthsInTableConfig) {
+            builderProps.updateColWidthsInTableConfig(colWidthConfig);
+        }
+    };
+    return ({
+        resetColResizeState: resetColResizeState,
+        hideShowDragZoneIndicator: hideShowDragZoneIndicator,
+        initColResizeState: initColResizeState,
+        resetDragZoneIndicator: resetDragZoneIndicator,
+        handleResizeColumn: handleResizeColumn,
+        colResizeState: colResizeState,
+        dragZoneWidth: dragZoneWidth
+    });
+};
+exports.useResizeTableColumns = useResizeTableColumns;

package/dist/components/SimpleTable/utils/prepInitValueFromConfigIfNoValue.d.ts

@@ -0,0 +1,10 @@
+export function prepInitValueFromConfigIfNoValue({ _value, config, defaultColWidth, convertToRichText }: {
+    _value: any;
+    config: any;
+    defaultColWidth: any;
+    convertToRichText: any;
+}): {
+    value: any;
+    canAddCols: boolean;
+    canToggleColHeaderStyle: boolean;
+};

package/dist/components/SimpleTable/utils/prepInitValueFromConfigIfNoValue.js

@@ -0,0 +1,85 @@
+"use strict";
+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 __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.prepInitValueFromConfigIfNoValue = void 0;
+var makeArrayFromLength_1 = require("../../../utils/makeArrayFromLength");
+var toArray_1 = require("../../../utils/toArray");
+var functions_1 = require("../functions");
+var prepInitValueFromConfigIfNoValue = function (_a) {
+    var _b;
+    var _value = _a._value, config = _a.config, defaultColWidth = _a.defaultColWidth, convertToRichText = _a.convertToRichText;
+    //if colHeaderData is defined then that decides the noOfCols.
+    var noOfCols = ((_b = config.colHeaderData) === null || _b === void 0 ? void 0 : _b.length) || config.noOfCols;
+    var value = !_value
+        ? {
+            data: __spreadArray(__spreadArray([], (config.colHeaderData ? [convertColHeaderConfigToRowData({ colHeaderData: config.colHeaderData, convertToRichText: convertToRichText })] : []), true), insertRowAndCellIds({
+                noOfRows: config.noOfRows,
+                noOfCols: noOfCols
+            }), true),
+            colWidthConfig: getInitColWidthConfigs({ noOfCols: noOfCols, defaultColWidth: defaultColWidth }),
+        }
+        : !_value.data
+            ? {
+                data: _value,
+                colWidthConfig: getInitColWidthConfigs({ noOfCols: _value[0].cellData.length, defaultColWidth: defaultColWidth }),
+            } //backwars compat
+            : _value;
+    return ({
+        value: value,
+        canAddCols: !!!config.colHeaderData,
+        canToggleColHeaderStyle: !!!config.colHeaderData // meaning its true if no config.colHeaderData is defined. else false
+    });
+};
+exports.prepInitValueFromConfigIfNoValue = prepInitValueFromConfigIfNoValue;
+var convertColHeaderConfigToRowData = function (_a) {
+    var colHeaderData = _a.colHeaderData, convertToRichText = _a.convertToRichText;
+    return {
+        id: "colHeader",
+        isColHeader: true,
+        cellData: colHeaderData.map(function (d, i) { return ({
+            value: convertToRichText ? convertToRichText(d) : d,
+            readOnly: true,
+            id: "colHeaderCell_".concat(i),
+        }); }),
+    };
+};
+var getInitColWidthConfigs = function (_a) {
+    var noOfCols = _a.noOfCols, defaultColWidth = _a.defaultColWidth;
+    return (0, makeArrayFromLength_1.makeArrayFromLength)(noOfCols)
+        .map(function (d, i) { return ({
+        colId: "col_".concat(i),
+        width: defaultColWidth + "px",
+    }); })
+        .reduce(function (a, b) {
+        var _a;
+        return (__assign(__assign({}, a), (_a = {}, _a[b.colId] = b.width, _a)));
+    }, {});
+};
+var insertRowAndCellIds = function (_a) {
+    var noOfRows = _a.noOfRows, noOfCols = _a.noOfCols;
+    return (0, makeArrayFromLength_1.makeArrayFromLength)(noOfRows).map(function () { return ({
+        id: "row_".concat((0, functions_1.genHash)(8)),
+        cellData: (0, makeArrayFromLength_1.makeArrayFromLength)(noOfCols).map(function () { return ({
+            id: "cell_".concat((0, functions_1.genHash)(8)),
+        }); }),
+    }); });
+};

package/dist/index.d.ts

@@ -52,6 +52,7 @@ export { default as MetaBlock } from "./components/MetaBlock";
 export { ImageInput } from "./components/ImageInput";
 export { ProfileImageInput } from "./components/ImageInput/derivedComps/ProfileImageInput";
 export { default as VideoInput } from "./components/VideoInput";
+export { SimpleTable } from "./components/SimpleTable";
 export { LoaderCircle, ProgressBar, LoaderCircle as Loader, LoaderOverlay } from "./components/LoadersAndProgress";
 export { BannerAlert, BannerInfo } from "./components/Banners";
 export { BannerContext, useBannerContext, BannerProvider } from "./components/Banners/bannerContext";

package/dist/index.js

@@ -17,7 +17,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.BannerProvider = exports.useBannerContext = exports.BannerContext = exports.BannerInfo = exports.BannerAlert = exports.VideoInput = exports.ProfileImageInput = exports.ImageInput = exports.MetaBlock = exports.HintsProvider = exports.genTagComp = exports.generateOptions = exports.OptionsSingle = exports.DropdownMulti = exports.DropdownSingle = exports.parseCardConfig = exports.ListProfile = exports.CardProfile = exports.CardEmbed = exports.ListContent = exports.CardContent = exports.TextLoader = exports.BarChart = exports.DateRangePicker = exports.DatePicker = exports.PageScrollIndicator = exports.HomeCover = exports.EmptyStates = exports.ModalSmall = exports.ModalLarge = exports.ModalConfirm = exports.SkeletonLoader = exports.Divider = exports.PercentCompletedPie = exports.Accordion = exports.ActionMenu = exports.Tooltip = exports.OKELink = exports.UserRoleBadge = exports.Section = exports.LoaderOverlay = exports.Loader = exports.ProgressBar = exports.LoaderCircle = exports.icons = exports.colors = exports.GlobalStyles = void 0;
+exports.SimpleTable = exports.BannerProvider = exports.useBannerContext = exports.BannerContext = exports.BannerInfo = exports.BannerAlert = exports.VideoInput = exports.ProfileImageInput = exports.ImageInput = exports.MetaBlock = exports.HintsProvider = exports.genTagComp = exports.generateOptions = exports.OptionsSingle = exports.DropdownMulti = exports.DropdownSingle = exports.parseCardConfig = exports.ListProfile = exports.CardProfile = exports.CardEmbed = exports.ListContent = exports.CardContent = exports.TextLoader = exports.BarChart = exports.DateRangePicker = exports.DatePicker = exports.PageScrollIndicator = exports.HomeCover = exports.EmptyStates = exports.ModalSmall = exports.ModalLarge = exports.ModalConfirm = exports.SkeletonLoader = exports.Divider = exports.PercentCompletedPie = exports.Accordion = exports.ActionMenu = exports.Tooltip = exports.OKELink = exports.UserRoleBadge = exports.Section = exports.LoaderOverlay = exports.Loader = exports.ProgressBar = exports.LoaderCircle = exports.icons = exports.colors = exports.GlobalStyles = void 0;
 //css and styling related ( styled-components )
 var globalStyles_1 = require("./globalStyles");
 Object.defineProperty(exports, "GlobalStyles", { enumerable: true, get: function () { return globalStyles_1.GlobalStyles; } });
@@ -138,3 +138,5 @@ var bannerContext_1 = require("./components/Banners/bannerContext");
 Object.defineProperty(exports, "BannerContext", { enumerable: true, get: function () { return bannerContext_1.BannerContext; } });
 Object.defineProperty(exports, "useBannerContext", { enumerable: true, get: function () { return bannerContext_1.useBannerContext; } });
 Object.defineProperty(exports, "BannerProvider", { enumerable: true, get: function () { return bannerContext_1.BannerProvider; } });
+var SimpleTable_1 = require("./components/SimpleTable");
+Object.defineProperty(exports, "SimpleTable", { enumerable: true, get: function () { return SimpleTable_1.SimpleTable; } });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oolib",
-  "version": "2.66.0",
+  "version": "2.67.1",
   "description": " OKE Component Library",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -92,6 +92,7 @@
     "draft-js": "^0.11.7",
     "draftjs-conductor": "^2.2.0",
     "immutable": "^3.7.6",
+    "localtunnel": "^2.0.2",
     "lodash": "^4.17.21",
     "modularscale-js": "^3.0.1",
     "moment": "^2.24.0",