oolib 2.94.0 → 2.95.0

package/dist/components/DatePicker/index.js

@@ -44,6 +44,8 @@ var handlePos_1 = require("./utils/handlePos");
 var themes_1 = require("../../themes");
 var styled_1 = require("./styled");
 var Buttons_1 = require("../Buttons");
+var mixins_1 = require("../../themes/mixins");
+var Modal_1 = require("../Modals/Modal");
 var white = themes_1.colors.white, greyColor40 = themes_1.colors.greyColor40;
 var months = [
     "January",
@@ -68,17 +70,17 @@ var isEqualDate = function (date1, date2) {
         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)(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 _a = (0, react_1.useState)({}), calender = _a[0], setCalender = _a[1];
+    var _b = (0, react_1.useState)(false), showCalendar = _b[0], setShowCalendar = _b[1];
+    var _c = (0, react_1.useState)(null), range = _c[0], setRange = _c[1];
+    var _d = (0, react_1.useState)(0), monthNumber = _d[0], setMonthNumber = _d[1];
+    // handle click outside should only work when calender container is not shown in modal.
+    (0, _EXPORTS_1.useHandleClickOutside)(containerRef, setShowCalendar, { enabled: screenWidth > (0, mixins_1.getBreakPoint)('sm') });
     var debounce = function (dy, delay) {
         clearTimeout(dy._tId);
         dy._tId = setTimeout(function () {
@@ -244,106 +246,113 @@ function DatePicker(props) {
         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, 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 () {
-                        (0, handlePos_1.handleVerticalPos)(calenderRef, inputRef);
-                    } }))),
-            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(),
-                        react_1.default.createElement(styled_1.StyledMonthTitle, { invert: invert },
-                            react_1.default.createElement("span", null,
-                                react_1.default.createElement(Typo_1.SANS_3, { semibold: true }, months[calender === null || calender === void 0 ? void 0 : calender.month])),
-                            react_1.default.createElement("span", null,
-                                react_1.default.createElement(Typo_1.SANS_3, { semibold: true }, calender === null || calender === void 0 ? void 0 : calender.year))),
-                        wrapCaretRight()),
-                    react_1.default.createElement(styled_1.StyledWeekDaysWrapper, null, weeks.map(function (item, i) { return (react_1.default.createElement(styled_1.StyledWeekdays, { key: i, invert: invert },
-                        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) {
-                            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, 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, 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, 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())));
-                                }
+    var genCalenderContainer = function () {
+        var _a, _b, _c;
+        return (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(),
+                    react_1.default.createElement(styled_1.StyledMonthTitle, { invert: invert },
+                        react_1.default.createElement("span", null,
+                            react_1.default.createElement(Typo_1.SANS_3, { semibold: true }, months[calender === null || calender === void 0 ? void 0 : calender.month])),
+                        react_1.default.createElement("span", null,
+                            react_1.default.createElement(Typo_1.SANS_3, { semibold: true }, calender === null || calender === void 0 ? void 0 : calender.year))),
+                    wrapCaretRight()),
+                react_1.default.createElement(styled_1.StyledWeekDaysWrapper, null, weeks.map(function (item, i) { return (react_1.default.createElement(styled_1.StyledWeekdays, { key: i, invert: invert },
+                    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) {
+                        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, 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, disableClick: isDisabledDate(item), calenderRef: calenderRef },
+                                    react_1.default.createElement(Typo_1.SANS_3, null, item.getDate())));
                             }
                             else {
-                                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) },
+                                // 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, 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())));
                             }
-                        }), (_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(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); }, 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, 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, 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 :
+                    _b.map(function (item, i) {
+                        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, 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); }, 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, isSelectedDate: isSelectedDate(item), isTodaysDate: isTodaysDate(item), isDisabledDate: isDisabledDate(item), disableClick: isDisabledDate(item), invert: invert, onMouseDown: function (e) { return handleDayClick(e, 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 {
+                            // 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, 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) {
+                        if (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, 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())));
                             }
-                        }), (_c = calender === null || calender === void 0 ? void 0 : calender.nextDays) === null || _c === void 0 ? void 0 :
-                        _c.map(function (item, i) {
-                            if (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, 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, 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, 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 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, disableClick: isDisabledDate(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, isSelectedDate: isSelectedDate(item), isDisabledDate: true, disableClick: isDisabledDate(item), onMouseDown: function (e) { return handleDayClick(e, item); } },
+                                // 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, 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, 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())));
+                        }
+                    })))));
+    };
+    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, 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 () {
+                        (0, handlePos_1.handleVerticalPos)(calenderRef, inputRef);
+                    } }))),
+            screenWidth > (0, mixins_1.getBreakPoint)('sm') ?
+                genCalenderContainer()
+                :
+                    showCalendar ? react_1.default.createElement(Modal_1.Modal, { onClose: function () { return setShowCalendar(false); }, overflowVisible: false, fitToContentHeight: true, title: "Select Date" }, genCalenderContainer()) : null)));
 }
 exports.default = react_1.default.memo(DatePicker);

package/dist/components/DatePicker/styled.js

@@ -57,11 +57,11 @@ exports.StyledInput = styled_components_1.default.input(templateObject_3 || (tem
     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"], ["\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) {
+exports.StyledCalenderContainer = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  z-index: 10000;\n  height: 40rem;\n  visibility: ", ";\n  \n  ", "{\n      position: absolute;\n      height: unset;\n      width: 30rem;\n      ", "\n  }\n\n"], ["\n  z-index: 10000;\n  height: 40rem;\n  visibility: ", ";\n  \n  ", "{\n      position: absolute;\n      height: unset;\n      width: 30rem;\n      ", "\n  }\n\n"])), 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) {
+}, (0, mixins_1.mediaQuery)('sm'), globalVariables_1.globalLightboxStyle);
+exports.StyledDateBlock = styled_components_1.default.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  font-size: 1.4rem;\n  width: calc(93.3% / 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(93.3% / 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) {
@@ -117,7 +117,7 @@ exports.StyledMonthTitle = styled_components_1.default.div(templateObject_16 ||
 });
 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) {
+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(93.3% / 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(93.3% / 7);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  color: ", ";\n"])), function (_a) {
     var invert = _a.invert;
     return invert && white;
 });

package/dist/components/EmptyStates2/config/index.d.ts

@@ -1,4 +1,9 @@
-export function getConfig(preset: any, contentTypeTitle: any, commaSeparatedTags: any): {
+export function getEmptyStatesConfig({ preset, title, contentTypeTitle, commaSeparatedTags }: {
+    preset: any;
+    title: any;
+    contentTypeTitle: any;
+    commaSeparatedTags: any;
+}): {
     align: string;
     image: {
         src: string;
@@ -7,9 +12,9 @@ export function getConfig(preset: any, contentTypeTitle: any, commaSeparatedTags
             opacity: number;
         };
     };
+    imageSize: number;
     title: string;
     subtitle: string;
-    imageSize?: undefined;
     button?: undefined;
     link?: undefined;
 } | {
@@ -21,9 +26,9 @@ export function getConfig(preset: any, contentTypeTitle: any, commaSeparatedTags
             opacity: number;
         };
     };
-    imageSize: number;
-    title: string;
+    title: any;
     subtitle: string;
+    imageSize?: undefined;
     button?: undefined;
     link?: undefined;
 } | {

package/dist/components/EmptyStates2/config/index.js

@@ -1,7 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getConfig = void 0;
-var getConfig = function (preset, contentTypeTitle, commaSeparatedTags) {
+exports.getEmptyStatesConfig = void 0;
+var getEmptyStatesConfig = function (_a) {
+    var preset = _a.preset, title = _a.title, contentTypeTitle = _a.contentTypeTitle, commaSeparatedTags = _a.commaSeparatedTags;
     switch (preset) {
         case "multipleCollectionsListing":
             return {
@@ -105,7 +106,7 @@ var getConfig = function (preset, contentTypeTitle, commaSeparatedTags) {
                         opacity: 1,
                     },
                 },
-                title: "Content Published Successfully",
+                title: title || "Content Published Successfully",
                 subtitle: " ",
             };
         case "draftsListing":
@@ -234,4 +235,4 @@ var getConfig = function (preset, contentTypeTitle, commaSeparatedTags) {
             };
     }
 };
-exports.getConfig = getConfig;
+exports.getEmptyStatesConfig = getEmptyStatesConfig;

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

@@ -1,6 +1,7 @@
-export function EmptyStates({ preset, contentTypeTitle, tags, onClick, }: {
+export function EmptyStates({ preset, contentTypeTitle, title: titleProp, tags, onClick, }: {
     preset?: string;
     contentTypeTitle: any;
+    title: any;
     tags: any;
     onClick: any;
 }): React.JSX.Element;

package/dist/components/EmptyStates2/index.js

@@ -19,9 +19,14 @@ var react_1 = __importDefault(require("react"));
 var EmptyStatesRenderer_1 = require("./comps/EmptyStatesRenderer");
 var config_1 = require("./config");
 var EmptyStates = function (_a) {
-    var _b = _a.preset, preset = _b === void 0 ? "multiplePublishingListing" : _b, contentTypeTitle = _a.contentTypeTitle, tags = _a.tags, onClick = _a.onClick;
-    var commaSeparatedTags = tags === null || tags === void 0 ? void 0 : tags.map(function (item) { return item.toLowerCase(); }).join(',');
-    var _c = (0, config_1.getConfig)(preset, contentTypeTitle, commaSeparatedTags), image = _c.image, title = _c.title, subtitle = _c.subtitle, link = _c.link, button = _c.button, align = _c.align;
+    var _b = _a.preset, preset = _b === void 0 ? "multiplePublishingListing" : _b, contentTypeTitle = _a.contentTypeTitle, titleProp = _a.title, tags = _a.tags, onClick = _a.onClick;
+    var commaSeparatedTags = tags === null || tags === void 0 ? void 0 : tags.map(function (item) { return item.toLowerCase(); }).join(",");
+    var _c = (0, config_1.getEmptyStatesConfig)({
+        preset: preset,
+        contentTypeTitle: contentTypeTitle,
+        commaSeparatedTags: commaSeparatedTags,
+        title: titleProp
+    }), image = _c.image, title = _c.title, subtitle = _c.subtitle, link = _c.link, button = _c.button, align = _c.align;
     return (react_1.default.createElement(EmptyStatesRenderer_1.EmptyStatesRenderer, __assign({}, { image: image, align: align, title: title, subtitle: subtitle, link: link, button: button, onClick: onClick })));
 };
 exports.EmptyStates = EmptyStates;

package/package.json

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