oolib 2.64.17 → 2.65.0

package/dist/UIContent/index.d.ts

@@ -0,0 +1,7 @@
+export namespace UIContent {
+    const general: {};
+    namespace ImageInput {
+        const onlyFirstFileConsiderErrMsg: string;
+        const corruptUrlErrMsg: string;
+    }
+}

package/dist/UIContent/index.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UIContent = void 0;
+exports.UIContent = {
+    general: {},
+    ImageInput: {
+        onlyFirstFileConsiderErrMsg: "This is a single image input. Only first file will be considered",
+        corruptUrlErrMsg: "Image URL seems to be corrupt. Cannot render it"
+    },
+};

package/dist/components/ActionMenu/styled.js

@@ -101,5 +101,5 @@ exports.StyledActionMenuOpsWrapper = styled_components_1.default.div(templateObj
 exports.StyledOption = styled_components_1.default.button(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n  white-space: nowrap;\n  border: none;\n  cursor: pointer;\n  width: 100%;\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  text-align: left;\n  padding: 0.25rem 1.2rem;\n  background-color: transparent;\n  color: ", ";\n  ", ";\n  ", "\n"], ["\n  white-space: nowrap;\n  border: none;\n  cursor: pointer;\n  width: 100%;\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  text-align: left;\n  padding: 0.25rem 1.2rem;\n  background-color: transparent;\n  color: ", ";\n  ", ";\n  ", "\n"])), function (_a) {
     var invert = _a.invert;
     return (invert ? white : greyColor100);
-}, (0, mixins_1.transition)("background-color"), globalVariables_1.globalHoverBackgroundColor);
+}, (0, mixins_1.transition)("background-color"), globalVariables_1.globalHoverOnWhiteBG);
 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;

package/dist/components/Buttons/index.styled.js

@@ -32,7 +32,7 @@ var styled_components_1 = __importStar(require("styled-components"));
 var colors_1 = require("../../themes/colors");
 var mixins_1 = require("../../themes/mixins");
 var utilsOolib_1 = require("../../utilsOolib");
-var greyColor100 = colors_1.colors.greyColor100, greyColor90 = colors_1.colors.greyColor90, greyColor80 = colors_1.colors.greyColor80, greyColor70 = colors_1.colors.greyColor70, greyColor15 = colors_1.colors.greyColor15, greyColor40 = colors_1.colors.greyColor40, white = colors_1.colors.white, none = colors_1.colors.none;
+var greyColor100 = colors_1.colors.greyColor100, greyColor90 = colors_1.colors.greyColor90, greyColor80 = colors_1.colors.greyColor80, greyColor70 = colors_1.colors.greyColor70, greyColor15 = colors_1.colors.greyColor15, greyColor40 = colors_1.colors.greyColor40, greyColor10 = colors_1.colors.greyColor10, white = colors_1.colors.white, none = colors_1.colors.none;
 //sizes
 var SIZES = {
     S: "3rem",
@@ -64,12 +64,12 @@ var hoverStylingCustom = (0, styled_components_1.css)(templateObject_3 || (templ
         : (0, utilsOolib_1.getPrimaryColor40)(colors);
 });
 var hoverStylingGhost = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
-    var invert = _a.invert, active = _a.active, colors = _a.theme.colors;
+    var invert = _a.invert, active = _a.active;
     return active
         ? ""
         : invert
             ? greyColor80
-            : (0, utilsOolib_1.getPrimaryColor10)(colors);
+            : greyColor10;
 });
 var ButtonPrimary = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  border: none; // $none;\n  background-color: ", ";\n  color: ", ";\n  ", "\n  ", "\n\n  ", "  \n  \n  @media (hover: hover) {\n    &:hover {\n      ", "\n    }\n  }\n"], ["\n  border: none; // $none;\n  background-color: ", ";\n  color: ", ";\n  ", "\n  ", "\n\n  ", "  \n  \n  @media (hover: hover) {\n    &:hover {\n      ", "\n    }\n  }\n"])), function (_a) {
     var invert = _a.invert, colors = _a.theme.colors;

package/dist/components/DatePicker/index.js

@@ -43,22 +43,23 @@ var buildCalenderObj_1 = require("./utils/buildCalenderObj");
 var handlePos_1 = require("./utils/handlePos");
 var themes_1 = require("../../themes");
 var styled_1 = require("./styled");
+var Buttons_1 = require("../Buttons");
 var white = themes_1.colors.white, greyColor40 = themes_1.colors.greyColor40;
 var months = [
-    'January',
-    'Febuary',
-    'March',
-    'April',
-    'May',
-    'June',
-    'July',
-    'August',
-    'September',
-    'October',
-    'November',
-    'December',
+    "January",
+    "Febuary",
+    "March",
+    "April",
+    "May",
+    "June",
+    "July",
+    "August",
+    "September",
+    "October",
+    "November",
+    "December",
 ];
-var weeks = ['S', 'M', 'T', 'W', 'Th', 'F', 'Sa'];
+var weeks = ["S", "M", "T", "W", "Th", "F", "Sa"];
 var flag = true;
 function DatePicker(props) {
     var _a, _b, _c;
@@ -93,7 +94,7 @@ function DatePicker(props) {
         // When the user scrolls the page, the 'handleVerticalPosDebounced' function will be called.
         window.addEventListener("scroll", handleVerticalPosDebounced);
         return function () {
-            window.removeEventListener('scroll', handleVerticalPosDebounced);
+            window.removeEventListener("scroll", handleVerticalPosDebounced);
         };
     }, []);
     (0, react_1.useEffect)(function () {
@@ -109,10 +110,10 @@ function DatePicker(props) {
             return;
         if (value) {
             inputRef.current.value =
-                value === 'Ongoing' ? value : buildDateInput(new Date(value));
+                value === "Ongoing" ? value : buildDateInput(new Date(value));
         }
         else {
-            inputRef.current.value = '';
+            inputRef.current.value = "";
             setRange(null);
         }
         if (from) {
@@ -124,10 +125,10 @@ function DatePicker(props) {
         if (readOnly)
             return;
         if (!value) {
-            inputRef.current.value = '';
+            inputRef.current.value = "";
             (0, buildCalenderObj_1.buildCalenderObj)(from, inputRef, monthNumber, calender, setCalender);
         }
-        else if (value !== 'Ongoing') {
+        else if (value !== "Ongoing") {
             inputRef.current.value = buildDateInput(new Date(value));
         }
     }, [value]);
@@ -151,26 +152,26 @@ function DatePicker(props) {
     // returns date string in dd/mm/yyyy
     var buildDateInput = function (dateObj) {
         if (!dateObj)
-            return '';
+            return "";
         var options = {
-            year: 'numeric',
-            month: '2-digit',
-            day: '2-digit',
+            year: "numeric",
+            month: "2-digit",
+            day: "2-digit",
         };
-        return dateObj.toLocaleDateString('en-GB', options);
+        return dateObj.toLocaleDateString("en-GB", options);
     };
     var autoFormatter = function () {
         var input = inputRef.current.value;
         if (/^\d{2}\/?$/.test(input) && flag) {
-            input += '/';
+            input += "/";
         }
         else if (/^\d{2}\/\d{2}$/.test(input) && flag) {
-            input += '/';
+            input += "/";
         }
         inputRef.current.value = input;
     };
     var handleFocusOut = function () {
-        if (from && inputRef.current.value.split('/')[1] === calender.month + 1) {
+        if (from && inputRef.current.value.split("/")[1] === calender.month + 1) {
             setRange(new Date(calender.year, calender.month, calender.today));
         }
         monthNumber = 0;
@@ -202,10 +203,10 @@ function DatePicker(props) {
         setRange(item);
     };
     var wrapCaretLeft = react_1.default.useCallback(function () {
-        return (react_1.default.createElement(styled_1.StyledButtonGhost, { S: true, invert: invert, icon: "CaretLeft", onMouseDown: function (e) { return handleChangeMonth(e, -1); }, style: { cursor: "pointer", color: invert && white } }));
+        return (react_1.default.createElement(Buttons_1.ButtonGhost, { S: true, invert: invert, icon: "CaretLeft", onMouseDown: function (e) { return handleChangeMonth(e, -1); }, style: { cursor: "pointer", color: invert && white } }));
     }, [value, invert]);
     var wrapCaretRight = react_1.default.useCallback(function () {
-        return (react_1.default.createElement(styled_1.StyledButtonGhost, { S: true, invert: invert, icon: "CaretRight", onMouseDown: function (e) { return handleChangeMonth(e, 1); }, style: { cursor: "pointer", color: invert && white } }));
+        return (react_1.default.createElement(Buttons_1.ButtonGhost, { S: true, invert: invert, icon: "CaretRight", onMouseDown: function (e) { return handleChangeMonth(e, 1); }, style: { cursor: "pointer", color: invert && white } }));
     }, [value, invert]);
     var getReadOnlyDate = function () {
         var dateObj = new Date(value);
@@ -213,14 +214,30 @@ 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());
     };
-    return (react_1.default.createElement("div", { style: { display: 'flex', flexDirection: 'column' } },
+    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 isTodaysDate = function (item) {
+        return item.getDate() === new Date().getDate() &&
+            calender.month === new Date().getMonth() &&
+            calender.year === new Date().getFullYear();
+    };
+    var isDisabledDate = function (item) {
+        return (previousDateOnly && new Date() < item) ||
+            (futureDateOnly && new Date() > item);
+    };
+    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 },
             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, ref: calenderRef, className: "calender-container ".concat(from ? "right-class" : ""), invert: invert },
                 react_1.default.createElement(styled_1.StyledMonthView, null,
                     react_1.default.createElement(styled_1.StyledHeader, null,
                         wrapCaretLeft(),
@@ -234,68 +251,59 @@ 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("div", { key: i, 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, 
+                                        // className="range"
+                                        onMouseDown: function (e) { return handleDayClick(e, item); }, onPointerEnter: function () { return handlePointerEnter(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("div", { key: i, className: "disabled-date" },
+                                    // Render disabled days before 'from' previous date (last month)
+                                    return (react_1.default.createElement(styled_1.StyledDateBlock, { isDisabledDate: true, key: i, invert: invert },
                                         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("div", { key: i, className: (item.getDate() ===
-                                            inputRef.current.value.split('/')[0] &&
-                                            item.getMonth() + 1 ===
-                                                inputRef.current.value.split('/')[1] &&
-                                            item.getFullYear() ===
-                                                inputRef.current.value.split('/')[2]) ||
-                                            from.getTime() === item.getTime()
-                                            ? 'today'
-                                            : (previousDateOnly && new Date() < item) ||
-                                                (futureDateOnly && new Date() > item)
-                                                ? 'disabled-date'
-                                                : '', onMouseDown: function (e) { return handleDayClick(e, item); }, onPointerEnter: function () { return handlePointerEnter(item); } },
+                                    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); } },
                                         react_1.default.createElement(Typo_1.SANS_3, null, item.getDate())));
                                 }
                             }
                             else {
-                                return react_1.default.createElement("div", { key: i, className: "disabled-date", onMouseDown: function (e) { return handleDayClick(e, item); } },
-                                    react_1.default.createElement(Typo_1.SANS_3, null, item.getDate()));
+                                return (react_1.default.createElement(styled_1.StyledDateBlock, { isDisabledDate: true, futureDateOnly: futureDateOnly, key: i, invert: invert, onMouseDown: function (e) { return handleDayClick(e, 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 :
                         _b.map(function (item, i) {
                             if (from) {
                                 if (item < from) {
                                     // Render days before 'from' as disabled
-                                    return (react_1.default.createElement("div", { key: i, className: "disabled-date" },
+                                    return (react_1.default.createElement(styled_1.StyledDateBlock, { key: i, invert: invert, isDisabledDate: true },
                                         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("div", { key: i, className: "range ".concat(calender.todaysDate.getDate() === item.getDate() && calender.todaysDate.getMonth() === item.getMonth() && calender.todaysDate.getFullYear() === item.getFullYear()
-                                            ? " todaysDate "
-                                            : " "), 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); } },
                                         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("div", { key: i, className: "\n                          ".concat(from.getTime() === item.getTime() ||
-                                            item.getTime() === (range === null || range === void 0 ? void 0 : range.getTime())
-                                            ? 'today'
-                                            : (previousDateOnly && new Date() < item) ||
-                                                (futureDateOnly && new Date() > item)
-                                                ? ' disabled-date '
-                                                : '', "\n                          ").concat(calender.todaysDate.getDate() === item.getDate() && calender.todaysDate.getMonth() === item.getMonth() && calender.todaysDate.getFullYear() === item.getFullYear()
-                                            ? " todaysDate "
-                                            : " ", "  \n                        "), onMouseDown: function (e) { return handleDayClick(e, item); }, onPointerEnter: function () { return handlePointerEnter(item); } },
+                                    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); } },
                                         react_1.default.createElement(Typo_1.SANS_3, null, item.getDate())));
                                 }
                             }
@@ -303,53 +311,48 @@ 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("div", { key: i, className: "\n                      ".concat(calender.today === item.getDate() &&
-                                        ((calender.month === new Date().getMonth() && calender.year === new Date().getFullYear()) ||
-                                            (calender.month === inputRef.current.value.split("/")[1] - 1 && calender.year === inputRef.current.value.split("/")[2]))
-                                        ? " today "
-                                        : (previousDateOnly && new Date() < item) || (futureDateOnly && new Date() > item)
-                                            ? "disabled-date "
-                                            : "").concat(calender.todaysDate.getDate() === item.getDate() && calender.todaysDate.getMonth() === item.getMonth() && calender.todaysDate.getFullYear() === item.getFullYear()
-                                        ? " todaysDate "
-                                        : " ", "\n                      ").concat(calender.month === new Date().getMonth() && calender.year === new Date().getFullYear() ||
-                                        (calender.month === inputRef.current.value.split("/")[1] - 1 && calender.year === inputRef.current.value.split("/")[2])
-                                        ? " selectedToday " : "", "\n                      "), onMouseDown: function (e) { return handleDayClick(e, item); } },
+                                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); } },
                                     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) {
                                     // Render days within the selected range
-                                    return (react_1.default.createElement("div", { key: i, className: "range", 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, 
+                                        // isDisabledDate={true}
+                                        onMouseDown: function (e) { return handleDayClick(e, item); }, onPointerEnter: function () { return handlePointerEnter(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("div", { key: i, className: "disabled-date" },
+                                    return (react_1.default.createElement(styled_1.StyledDateBlock, { key: i, 
+                                        // className="disabled-date"
+                                        invert: invert, isDisabledDate: true, previousDateOnly: previousDateOnly, futureDateOnly: futureDateOnly },
                                         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("div", { key: i, className: item.getDate() ===
-                                            inputRef.current.value.split("/")[0] &&
+                                    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 ===
-                                                inputRef.current.value.split("/")[1] &&
+                                                ((_e = inputRef.current) === null || _e === void 0 ? void 0 : _e.value.split("/")[1]) &&
                                             item.getFullYear() ===
-                                                inputRef.current.value.split("/")[2]
-                                            ? "today"
-                                            : (previousDateOnly && new Date() < item) ||
-                                                (futureDateOnly && new Date() > item)
-                                                ? "disabled-date"
-                                                : "", onMouseDown: function (e) { return handleDayClick(e, item); }, onPointerEnter: function () { return handlePointerEnter(item); } },
+                                                ((_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); } },
                                         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("div", { key: i, className: "disabled-date", onMouseDown: function (e) { return handleDayClick(e, item); } },
+                                return (react_1.default.createElement(styled_1.StyledDateBlock, { key: i, invert: invert, isDisabledDate: true, previousDateOnly: previousDateOnly, onMouseDown: function (e) { return handleDayClick(e, item); } },
                                     react_1.default.createElement(Typo_1.SANS_3, null, item.getDate())));
                             }
                         })))))));

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

@@ -2,10 +2,10 @@ export const StyledDateInputContainer: import("styled-components").StyledCompone
 export const StyledInput: import("styled-components").StyledComponent<"input", any, {}, never>;
 export const StyledDateInputWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export const StyledCalenderContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledDateBlock: import("styled-components").StyledComponent<"div", any, {}, never>;
 export const StyledMonthView: import("styled-components").StyledComponent<"div", any, {}, never>;
 export const StyledMonthTitle: import("styled-components").StyledComponent<"div", any, {}, never>;
 export const StyledHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
 export const StyledWeekDaysWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export const StyledWeekdays: import("styled-components").StyledComponent<"div", any, {}, never>;
 export const StyledBodyWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export const StyledButtonGhost: import("styled-components").StyledComponent<(props: any) => import("react").JSX.Element, any, {}, never>;

package/dist/components/DatePicker/styled.js

@@ -3,18 +3,39 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+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.StyledButtonGhost = exports.StyledBodyWrapper = exports.StyledWeekdays = exports.StyledWeekDaysWrapper = exports.StyledHeader = exports.StyledMonthTitle = exports.StyledMonthView = exports.StyledCalenderContainer = exports.StyledDateInputWrapper = exports.StyledInput = exports.StyledDateInputContainer = void 0;
-var styled_components_1 = __importDefault(require("styled-components"));
+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 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, primaryColor40 = themes_1.colors.primaryColor40;
-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    }\n\n"], ["\n    position: relative;\n    width: fit-content;\n\n    &:focus-within .calender-container {\n        visibility: visible;\n    }\n\n"])));
-exports.StyledInput = styled_components_1.default.input(templateObject_2 || (templateObject_2 = __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) {
+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) {
     var invert = _a.invert;
     return (invert ? greyColor80 : greyColor5);
 }, function (_a) {
@@ -22,18 +43,20 @@ exports.StyledInput = styled_components_1.default.input(templateObject_2 || (tem
     return invert
         ? (disabled ? themes_1.colors.greyColor40 : themes_1.colors.white)
         : disabled ? themes_1.colors.greyColor40 : themes_1.colors.greyColor100;
-}, globalVariables_1.globalInputElemHover, function (_a) {
+}, function (_a) {
+    var disabled = _a.disabled;
+    return (disabled ? '' : globalVariables_1.globalInputElemHover);
+}, function (_a) {
     var invert = _a.invert, disabled = _a.disabled;
     return disabled ? greyColor15 : invert ? greyColor70 : greyColor10;
 }, function (_a) {
     var disabled = _a.disabled;
-    return disabled &&
-        "\n        color: ".concat(greyColor40, "\n        background-color: ").concat(greyColor15, ";\n        cursor: not-allowed;\n    ");
+    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_3 || (templateObject_3 = __makeTemplateObject(["\n    ", "\n"], ["\n    ", "\n"])), globalVariables_1.globalInputElemFocused);
-exports.StyledCalenderContainer = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    ", "\n    font-family: sans-serif;\n    position: absolute;\n    width: 30rem;\n    /* height: 350px; */\n    visibility: ", ";\n    z-index: 10000;\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    .today.todaysDate.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    font-family: sans-serif;\n    position: absolute;\n    width: 30rem;\n    /* height: 350px; */\n    visibility: ", ";\n    z-index: 10000;\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    .today.todaysDate.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) {
+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';
+    return (debug ? '' : 'hidden');
 }, function (_a) {
     var invert = _a.invert;
     return invert ? greyColor3 : primaryColor10;
@@ -44,18 +67,43 @@ exports.StyledCalenderContainer = styled_components_1.default.div(templateObject
     var invert = _a.invert;
     return !invert ? greyColor100 : white;
 }, primaryColor100, primaryColor100, white, white);
-exports.StyledMonthView = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n\n"], ["\n\n"])));
-exports.StyledMonthTitle = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __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.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) {
+    var invert = _a.invert;
+    return !invert ? "1px solid ".concat(white) : "1px solid ".concat(greyColor80);
+}, (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);
+}, 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    "])));
+}, 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);
+}, 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);
+}, 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);
+}, 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        "])));
 });
-exports.StyledHeader = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __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_8 || (templateObject_8 = __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_9 || (templateObject_9 = __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.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) {
     var invert = _a.invert;
     return invert && white;
 });
-exports.StyledBodyWrapper = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __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        \n        &:hover:not(.today.todaysDate.selectedToday) {\n            ", "\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        \n        &:hover:not(.today.todaysDate.selectedToday) {\n            ", "\n            cursor: pointer;\n        }\n      }\n\n"])), function (_a) {
+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) {
+    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) {
     var invert = _a.invert;
     return !invert ? "6px 0px ".concat(white) : "6px 0px ".concat(greyColor80);
 }, function (_a) {
@@ -67,6 +115,5 @@ exports.StyledBodyWrapper = styled_components_1.default.div(templateObject_10 ||
 }, function (_a) {
     var invert = _a.invert;
     return invert && white;
-}, globalVariables_1.globalHoverBackgroundColor);
-exports.StyledButtonGhost = (0, styled_components_1.default)(Buttons_1.ButtonGhost)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n    ", "\n"], ["\n    ", "\n"])), globalVariables_1.globalHoverBackgroundColor);
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;
+});
+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;

package/dist/components/Dropdowns/comps/OptionsSingle/styled.js

@@ -44,5 +44,5 @@ exports.StyledOption = styled_components_1.default.li(templateObject_3 || (templ
         : isFocussed
             ? (invert ? themes_1.colors.greyColor80 : themes_1.colors.greyColor5)
             : (invert ? themes_1.colors.greyColor90 : themes_1.colors.white);
-}, globalVariables_1.globalHoverBackgroundColor);
+}, globalVariables_1.globalHoverOnWhiteBG);
 var templateObject_1, templateObject_2, templateObject_3;

package/dist/components/ImageInput/comps/ImageEditor/index.js

@@ -98,7 +98,8 @@ function ImageEditor(_a) {
         publicUrl: publicUrl,
         aspectRatio: aspectRatio,
         underEditImageData: underEditImageData,
-        isFirstMount: isFirstMount
+        isFirstMount: isFirstMount,
+        handleDeleteSingleImage: handleDeleteSingleImage
     }), reorientedImageTempUrl = _l.reorientedImageTempUrl, imageLazyLoading = _l.imageLazyLoading;
     var _m = (0, react_1.useState)(undefined), showDeleteImageModal = _m[0], setShowDeleteImageModal = _m[1];
     var inputRef = (0, react_1.useRef)(null);

package/dist/components/ImageInput/comps/ImageEditor/utils/useReorientImage/index.d.ts

@@ -1,10 +1,11 @@
-export function useReorientImage({ imageRotate, setFullWidthOrFullHeightImg, setUnderEditImageData, publicUrl, aspectRatio, isFirstMount, }: {
+export function useReorientImage({ imageRotate, setFullWidthOrFullHeightImg, setUnderEditImageData, publicUrl, aspectRatio, isFirstMount, handleDeleteSingleImage }: {
     imageRotate: any;
     setFullWidthOrFullHeightImg: any;
     setUnderEditImageData: any;
     publicUrl: any;
     aspectRatio: any;
     isFirstMount: any;
+    handleDeleteSingleImage: any;
 }): {
     reorientedImageTempUrl: any;
     imageLazyLoading: boolean;

package/dist/components/ImageInput/comps/ImageEditor/utils/useReorientImage/index.js

@@ -5,8 +5,10 @@ var lodash_1 = require("lodash");
 var react_1 = require("react");
 var decideIfFullWidthOrFullHeightImg_1 = require("../decideIfFullWidthOrFullHeightImg");
 var changeImageOrientation_1 = require("./changeImageOrientation");
+var bannerContext_1 = require("../../../../../Banners/bannerContext");
 var useReorientImage = function (_a) {
-    var imageRotate = _a.imageRotate, setFullWidthOrFullHeightImg = _a.setFullWidthOrFullHeightImg, setUnderEditImageData = _a.setUnderEditImageData, publicUrl = _a.publicUrl, aspectRatio = _a.aspectRatio, isFirstMount = _a.isFirstMount;
+    var imageRotate = _a.imageRotate, setFullWidthOrFullHeightImg = _a.setFullWidthOrFullHeightImg, setUnderEditImageData = _a.setUnderEditImageData, publicUrl = _a.publicUrl, aspectRatio = _a.aspectRatio, isFirstMount = _a.isFirstMount, handleDeleteSingleImage = _a.handleDeleteSingleImage;
+    var SET_ALERT_BANNER = (0, bannerContext_1.useBannerContext)().SET_ALERT_BANNER;
     var _b = (0, react_1.useState)(true), imageLazyLoading = _b[0], setImageLazyLoading = _b[1];
     var _c = (0, react_1.useState)(undefined), reorientedImageTempUrl = _c[0], setReorientedImageTempUrl = _c[1];
     (0, react_1.useEffect)(function () {
@@ -19,6 +21,17 @@ var useReorientImage = function (_a) {
                 setReorientedImageTempUrl(undefined);
             var img = new Image();
             img.src = publicUrl;
+            img.onerror = function () {
+                /**
+                 * even tho we have several checks on the okf mediaupload api to
+                 * ensure proper file format and such. it is still sometimes possible that
+                 * an incorrect / corrupt url is being passed through as 'publicUrl' to
+                 * this component. In such cases, an error will fire here, and we need to
+                 * handle it, by deleting said url and throwing an alert
+                 */
+                handleDeleteSingleImage({ publicUrl: publicUrl });
+                SET_ALERT_BANNER(UIContent.ImageInput.corruptUrlErrMsg, 'red', 3000);
+            };
             img.onload = function () {
                 setFullWidthOrFullHeightImg((0, decideIfFullWidthOrFullHeightImg_1.decideIfFullWidthOrFullHeightImg)({
                     imgWidth: this.width,

package/dist/components/ImageInput/comps/ImageUploadShell/index.d.ts

@@ -1,8 +1,9 @@
 export default ImageUploadShell;
-declare function ImageUploadShell({ style, children, disabled, enableFilesDrop }: {
+declare function ImageUploadShell({ style, children, disabled, enableFilesDrop, setDragOverActive }: {
     style: any;
     children: any;
     disabled: any;
     enableFilesDrop: any;
+    setDragOverActive: any;
 }): React.JSX.Element;
 import React from "react";

package/dist/components/ImageInput/comps/ImageUploadShell/index.js

@@ -34,8 +34,11 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
 var ImageInputContext_1 = require("../../ImageInputContext");
+var bannerContext_1 = require("../../../Banners/bannerContext");
+var UIContent_1 = require("../../../../UIContent");
 var ImageUploadShell = function (_a) {
-    var style = _a.style, children = _a.children, disabled = _a.disabled, enableFilesDrop = _a.enableFilesDrop;
+    var style = _a.style, children = _a.children, disabled = _a.disabled, enableFilesDrop = _a.enableFilesDrop, setDragOverActive = _a.setDragOverActive;
+    var SET_ALERT_BANNER = (0, bannerContext_1.useBannerContext)().SET_ALERT_BANNER;
     var inputRef = (0, react_1.useRef)(null);
     var _b = (0, ImageInputContext_1.useImageInputContext)(), handleUpload = _b.handleUpload, onChange = _b.onChange, value = _b.value, id = _b.id, multiple = _b.multiple;
     if (disabled)
@@ -52,21 +55,27 @@ var ImageUploadShell = function (_a) {
     };
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement("input", { type: "file", accept: "image/*", style: { display: 'none' }, ref: inputRef, onChange: function (e) { return fireHandleUpload(e.target.files); }, multiple: multiple }),
-        react_1.default.createElement("div", { onDragOver: enableFilesDrop
+        react_1.default.createElement("div", { onDragEnter: function (e) {
+                e.preventDefault();
+                setDragOverActive(true);
+            }, onDragLeave: function (e) {
+                e.preventDefault();
+                setDragOverActive(false);
+            }, onDragOver: enableFilesDrop
                 ? function (e) { return e.preventDefault(); }
                 : function () { }, onDrop: enableFilesDrop
                 ? function (e) {
-                    var _a;
+                    var _a, _b;
                     e.preventDefault();
                     e.stopPropagation();
                     if ((_a = e.dataTransfer) === null || _a === void 0 ? void 0 : _a.files) {
+                        if (!multiple && ((_b = e.dataTransfer) === null || _b === void 0 ? void 0 : _b.files.length) > 1) { //then set alert saying only first image will be attempted to upload
+                            SET_ALERT_BANNER(UIContent_1.UIContent.ImageInput.onlyFirstFileConsiderErrMsg, 'red', 3000);
+                        }
                         var filesToUpload = multiple
                             ? Array.from(e.dataTransfer.files)
                             : [Array.from(e.dataTransfer.files)[0]];
-                        if (filesToUpload
-                            .every(function (d) { return d.type.split('/')[0] === 'image'; })) {
-                            fireHandleUpload(e.dataTransfer.files);
-                        }
+                        fireHandleUpload(filesToUpload);
                     }
                 }
                 : function () { }, onClick: function () { return inputRef.current.click(); }, style: { height: '100%', width: '100%' } }, children)));

package/dist/components/ImageInput/comps/Placeholder/index.js

@@ -75,15 +75,16 @@ var Placeholder = function (_a) {
      * then that image is rendered instead of placeholder
      *
      */
+    var _d = (0, react_1.useState)(false), dragOverActive = _d[0], setDragOverActive = _d[1];
     return (react_1.default.createElement(AspectRatioShell_1.default, __assign({}, {
         aspectRatio: aspectRatio,
         containerShape: containerShape,
         stretchToFullHeight: stretchToFullHeight,
         onShellPrepared: decideUIStyle,
     }),
-        react_1.default.createElement(styled_1.StyledPlaceholderWrapper, { smallPlaceholderUI: smallPlaceholderUI, ref: styledPlaceholderWrapperRef }, isLoading ? (react_1.default.createElement(ProgressBar_1.ProgressBar, { progress: uploadProgress, text: uploadProgress && uploadProgress !== 100
+        react_1.default.createElement(styled_1.StyledPlaceholderWrapper, { smallPlaceholderUI: smallPlaceholderUI, ref: styledPlaceholderWrapperRef, dragOverActive: dragOverActive }, isLoading ? (react_1.default.createElement(ProgressBar_1.ProgressBar, { progress: uploadProgress, text: uploadProgress && uploadProgress !== 100
                 ? uploadProgress + "%"
-                : "Almost Done..." })) : (react_1.default.createElement(ImageUploadShell_1.default, { enableFilesDrop: true, multiple: multiple },
+                : "Almost Done..." })) : (react_1.default.createElement(ImageUploadShell_1.default, { enableFilesDrop: true, multiple: multiple, setDragOverActive: setDragOverActive },
             react_1.default.createElement(styled_1.StyledPlaceholder, __assign({}, { containerShape: containerShape }, { smallPlaceholderUI: smallPlaceholderUI }), smallPlaceholderUI ? (react_1.default.createElement(react_1.Fragment, null,
                 react_1.default.createElement(ImageSquare, { size: 16, color: greyColor100 }),
                 react_1.default.createElement(Typo_1.SANS_0, { semibold: true }, dropzoneLabel),

package/dist/components/ImageInput/comps/Placeholder/styled.d.ts

@@ -1,4 +1,3 @@
 export const StyledPlaceholderWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export const StyledPlaceholder: import("styled-components").StyledComponent<"div", any, {}, never>;
-export const SstyledPlaceholderWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export const SstyledPlaceholder: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/components/ImageInput/comps/Placeholder/styled.js

@@ -7,35 +7,33 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SstyledPlaceholder = exports.SstyledPlaceholderWrapper = exports.StyledPlaceholder = exports.StyledPlaceholderWrapper = void 0;
+exports.SstyledPlaceholder = exports.StyledPlaceholder = exports.StyledPlaceholderWrapper = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
 var themes_1 = require("../../../../themes");
 var utilsOolib_1 = require("../../../../utilsOolib");
+var mixins_1 = require("../../../../themes/mixins");
 var greyColor100 = themes_1.colors.greyColor100;
-exports.StyledPlaceholderWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color : ", ";\n  padding: ", ";\n  width: 100%;\n  height: 100%;\n"], ["\n  background-color : ", ";\n  padding: ", ";\n  width: 100%;\n  height: 100%;\n"])), function (_a) {
-    var theme = _a.theme;
-    return (0, utilsOolib_1.getPrimaryColor10)(theme === null || theme === void 0 ? void 0 : theme.colors);
+exports.StyledPlaceholderWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  padding: ", ";\n  width: 100%;\n  height: 100%;\n  ", "\n"], ["\n  background-color: ", ";\n  padding: ", ";\n  width: 100%;\n  height: 100%;\n  ", "\n"])), function (_a) {
+    var theme = _a.theme, dragOverActive = _a.dragOverActive;
+    return dragOverActive
+        ? (0, utilsOolib_1.getPrimaryColor40)(theme === null || theme === void 0 ? void 0 : theme.colors)
+        : (0, utilsOolib_1.getPrimaryColor10)(theme === null || theme === void 0 ? void 0 : theme.colors);
 }, function (_a) {
     var smallPlaceholderUI = _a.smallPlaceholderUI;
-    return !smallPlaceholderUI && '1.2rem';
-});
-exports.StyledPlaceholder = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-flow: column nowrap;\n  height: 100%;\n  width: 100%;\n  gap: ", " ;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  border-radius: ", ";\n  border: 0.12rem dashed ", "; \n  padding: ", "; \n  cursor: pointer;\n"], ["\n  display: flex;\n  flex-flow: column nowrap;\n  height: 100%;\n  width: 100%;\n  gap: ", " ;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  border-radius: ", ";\n  border: 0.12rem dashed ", "; \n  padding: ", "; \n  cursor: pointer;\n"])), function (_a) {
+    return !smallPlaceholderUI && "1.2rem";
+}, (0, mixins_1.transition)("background-color"));
+exports.StyledPlaceholder = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-flow: column nowrap;\n  height: 100%;\n  width: 100%;\n  gap: ", ";\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  border-radius: ", ";\n  border: 0.12rem dashed ", ";\n  padding: ", ";\n  cursor: pointer;\n"], ["\n  display: flex;\n  flex-flow: column nowrap;\n  height: 100%;\n  width: 100%;\n  gap: ", ";\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  border-radius: ", ";\n  border: 0.12rem dashed ", ";\n  padding: ", ";\n  cursor: pointer;\n"])), function (_a) {
     var smallPlaceholderUI = _a.smallPlaceholderUI;
     return !smallPlaceholderUI && "0.3rem";
 }, function (_a) {
     var containerShape = _a.containerShape;
-    return containerShape === 'circle' ? '50%' : 'unset';
+    return containerShape === "circle" ? "50%" : "unset";
 }, greyColor100, function (_a) {
     var smallPlaceholderUI = _a.smallPlaceholderUI;
     return !smallPlaceholderUI && "2rem";
 });
-//
-exports.SstyledPlaceholderWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background-color : ", ";\n  padding: 1.2rem;\n  width: 100%;\n  height: 100%;\n"], ["\n  background-color : ", ";\n  padding: 1.2rem;\n  width: 100%;\n  height: 100%;\n"])), function (_a) {
-    var theme = _a.theme;
-    return (0, utilsOolib_1.getPrimaryColor10)(theme === null || theme === void 0 ? void 0 : theme.colors);
-});
-exports.SstyledPlaceholder = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  flex-flow: column nowrap;\n  height: 100%;\n  width: 100%;\n  gap: 0.3rem;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  border-radius: ", ";\n  border: 0.12rem dashed ", ";\n  padding: 2rem;\n  cursor: pointer;\n"], ["\n  display: flex;\n  flex-flow: column nowrap;\n  height: 100%;\n  width: 100%;\n  gap: 0.3rem;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  border-radius: ", ";\n  border: 0.12rem dashed ", ";\n  padding: 2rem;\n  cursor: pointer;\n"])), function (_a) {
+exports.SstyledPlaceholder = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  flex-flow: column nowrap;\n  height: 100%;\n  width: 100%;\n  gap: 0.3rem;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  border-radius: ", ";\n  border: 0.12rem dashed ", ";\n  padding: 2rem;\n  cursor: pointer;\n"], ["\n  display: flex;\n  flex-flow: column nowrap;\n  height: 100%;\n  width: 100%;\n  gap: 0.3rem;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  border-radius: ", ";\n  border: 0.12rem dashed ", ";\n  padding: 2rem;\n  cursor: pointer;\n"])), function (_a) {
     var containerShape = _a.containerShape;
-    return containerShape === 'circle' ? '50%' : 'unset';
+    return containerShape === "circle" ? "50%" : "unset";
 }, greyColor100);
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+var templateObject_1, templateObject_2, templateObject_3;

package/dist/globalStyles/globalVariables.d.ts

@@ -2,4 +2,4 @@ export const globalInputElemPadding: import("styled-components").FlattenSimpleIn
 export const globalInputElemHover: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
 export const globalInputElemFocused: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
 export const globalLightboxStyle: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
-export const globalHoverBackgroundColor: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
+export const globalHoverOnWhiteBG: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;

package/dist/globalStyles/globalVariables.js

@@ -4,7 +4,7 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     return cooked;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.globalHoverBackgroundColor = exports.globalLightboxStyle = exports.globalInputElemFocused = exports.globalInputElemHover = exports.globalInputElemPadding = void 0;
+exports.globalHoverOnWhiteBG = exports.globalLightboxStyle = exports.globalInputElemFocused = exports.globalInputElemHover = exports.globalInputElemPadding = void 0;
 var styled_components_1 = require("styled-components");
 var themes_1 = require("../themes");
 var mixins_1 = require("../themes/mixins");
@@ -29,11 +29,11 @@ exports.globalLightboxStyle = (0, styled_components_1.css)(templateObject_4 || (
     var invert = _a.invert;
     return (invert ? themes_1.colors.greyColor80 : themes_1.colors.white);
 }, themes_1.colors.black_opacity05);
-exports.globalHoverBackgroundColor = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  &:hover {\n    color: ", ";\n    background-color: ", ";\n  }\n"], ["\n  &:hover {\n    color: ", ";\n    background-color: ", ";\n  }\n"])), function (_a) {
+exports.globalHoverOnWhiteBG = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  &:hover {\n    color: ", ";\n    background-color: ", ";\n  }\n"], ["\n  &:hover {\n    color: ", ";\n    background-color: ", ";\n  }\n"])), function (_a) {
     var invert = _a.invert;
     return invert ? themes_1.colors.white : themes_1.colors.greyColor100;
 }, function (_a) {
     var invert = _a.invert;
-    return invert ? themes_1.colors.greyColor70 : themes_1.colors.greyColor5;
+    return invert ? themes_1.colors.greyColor70 : themes_1.colors.greyColor10;
 });
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oolib",
-  "version": "2.64.17",
+  "version": "2.65.0",
   "description": " OKE Component Library",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",