oolib 2.49.2 → 2.50.0

package/dist/components/BlockLabel/index.js

@@ -61,6 +61,6 @@ var BlockLabel = function (props) {
             infoTooltip && (react_1.default.createElement(Tooltip_1.Tooltip, { text: infoTooltip.text || infoTooltip, position: infoTooltip.position || "right", invert: invert, debug: infoTooltip.debug, popOutOfOverflowHiddenParent: infoTooltip.popOutOfOverflowHiddenParent, presetTarget: "infoIcon" }))),
         !readOnly &&
             sublabel &&
-            (0, toArray_1.toArray)(sublabel).map(function (subL) { return (react_1.default.createElement(Typo_1.SANS_3, { color: invert ? greyColor40 : greyColor80 }, subL)); }))));
+            (0, toArray_1.toArray)(sublabel).map(function (i, subL) { return (react_1.default.createElement(Typo_1.SANS_3, { key: i, color: invert ? greyColor40 : greyColor80 }, subL)); }))));
 };
 exports.BlockLabel = BlockLabel;

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

@@ -0,0 +1,2 @@
+declare const _default: any;
+export default _default;

package/dist/components/DatePicker/index.js

@@ -0,0 +1,309 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var BlockLabel_1 = require("../BlockLabel");
+var phosphor_react_1 = require("phosphor-react");
+var useScreenWidth_1 = require("../../utils/customHooks/useScreenWidth");
+var _EXPORTS_1 = require("../../utils/_EXPORTS");
+var Typo_1 = require("../Typo");
+var buildCalenderObj_1 = require("./utils/buildCalenderObj");
+var handlePos_1 = require("./utils/handlePos");
+var themes_1 = require("../../themes");
+var styled_1 = require("./styled");
+var white = themes_1.colors.white;
+var months = [
+    'January',
+    'Febuary',
+    'March',
+    'April',
+    'May',
+    'June',
+    'July',
+    'August',
+    'September',
+    'October',
+    'November',
+    'December',
+];
+var weeks = ['S', 'M', 'T', 'W', 'Th', 'F', 'Sa'];
+var flag = true;
+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;
+    var screenWidth = (0, useScreenWidth_1.useScreenWidth)();
+    var inputRef = (0, react_1.useRef)(null);
+    var calenderRef = (0, react_1.useRef)(null);
+    var _d = (0, react_1.useState)({}), calender = _d[0], setCalender = _d[1];
+    var _e = (0, react_1.useState)(null), range = _e[0], setRange = _e[1];
+    var _f = (0, react_1.useState)(0), monthNumber = _f[0], setMonthNumber = _f[1];
+    var debounce = function (dy, delay) {
+        clearTimeout(dy._tId);
+        dy._tId = setTimeout(function () {
+            dy();
+        }, delay);
+    };
+    (0, react_1.useEffect)(function () {
+        if (readOnly)
+            return;
+        var handleVerticalPosDebounced = debounce(function () {
+            (0, handlePos_1.handleVerticalPos)(calenderRef, inputRef);
+        }, 500);
+        window.addEventListener('scroll', handleVerticalPosDebounced);
+        return function () {
+            window.removeEventListener('scroll', handleVerticalPosDebounced);
+        };
+    }, []);
+    (0, react_1.useEffect)(function () {
+        if (readOnly)
+            return;
+        debounce(function () {
+            (0, handlePos_1.handleHorizontalPos)(calenderRef, id);
+        }, 500);
+    }, [screenWidth]);
+    (0, react_1.useEffect)(function () {
+        // buildDateinput return date string in dd/mm/yyyy format if you pass date object
+        if (readOnly)
+            return;
+        if (value) {
+            inputRef.current.value =
+                value === 'Ongoing' ? value : buildDateInput(new Date(value));
+        }
+        else {
+            inputRef.current.value = '';
+            setRange(null);
+        }
+        if (from) {
+            setRange(new Date(calender.year, calender.month, calender.today));
+        }
+        (0, buildCalenderObj_1.buildCalenderObj)(from, inputRef, monthNumber, calender, setCalender);
+    }, [from]);
+    (0, react_1.useEffect)(function () {
+        if (readOnly)
+            return;
+        if (!value) {
+            inputRef.current.value = '';
+            (0, buildCalenderObj_1.buildCalenderObj)(from, inputRef, monthNumber, calender, setCalender);
+        }
+        else if (value !== 'Ongoing') {
+            inputRef.current.value = buildDateInput(new Date(value));
+        }
+    }, [value]);
+    // handle on change month
+    var handleChangeMonth = function (e, month) {
+        e.preventDefault();
+        monthNumber += month;
+        setMonthNumber(monthNumber);
+        (0, buildCalenderObj_1.buildCalenderObj)(from, inputRef, monthNumber, calender, setCalender);
+    };
+    var handleDayClick = function (e, item) {
+        var clickedDate = item;
+        inputRef.current.value = buildDateInput(clickedDate);
+        monthNumber = 0;
+        setMonthNumber(monthNumber);
+        (0, buildCalenderObj_1.buildCalenderObj)(from, inputRef, monthNumber, calender, setCalender);
+        if (from) {
+            setRange(item);
+        }
+    };
+    // returns date string in dd/mm/yyyy
+    var buildDateInput = function (dateObj) {
+        if (!dateObj)
+            return '';
+        var options = {
+            year: 'numeric',
+            month: '2-digit',
+            day: '2-digit',
+        };
+        return dateObj.toLocaleDateString('en-GB', options);
+    };
+    var autoFormatter = function () {
+        var input = inputRef.current.value;
+        if (/^\d{2}\/?$/.test(input) && flag) {
+            input += '/';
+        }
+        else if (/^\d{2}\/\d{2}$/.test(input) && flag) {
+            input += '/';
+        }
+        inputRef.current.value = input;
+    };
+    var handleFocusOut = function () {
+        if (from && inputRef.current.value.split('/')[1] === calender.month + 1) {
+            setRange(new Date(calender.year, calender.month, calender.today));
+        }
+        monthNumber = 0;
+        setMonthNumber(monthNumber);
+        var dateObj = (0, buildCalenderObj_1.buildCalenderObj)(from, inputRef, monthNumber, calender, setCalender);
+        if (from && dateObj < from) {
+            dateObj = from;
+        }
+        inputRef.current.value = buildDateInput(dateObj);
+        onParentChange(id, dateObj.toISOString(), props.passChangeHandlerOps && props);
+    };
+    var handleOnChange = function () {
+        autoFormatter();
+        setMonthNumber(0);
+        var dateObj = (0, buildCalenderObj_1.buildCalenderObj)(from, inputRef, monthNumber, calender, setCalender);
+        if (from) {
+            setRange(dateObj);
+        }
+    };
+    var handleKeyDown = function (e) {
+        if (e.keyCode === 8) {
+            flag = false;
+        }
+        else {
+            flag = true;
+        }
+    };
+    var handlePointerEnter = function (item) {
+        setRange(item);
+    };
+    var wrapCaretLeft = react_1.default.useCallback(function () {
+        return (react_1.default.createElement(phosphor_react_1.CaretLeft, { onMouseDown: function (e) { return handleChangeMonth(e, -1); }, style: { cursor: 'pointer', color: invert && white }, size: 20 }));
+    }, [value, invert]);
+    var wrapCaretRight = react_1.default.useCallback(function () {
+        return (react_1.default.createElement(phosphor_react_1.CaretRight, { onMouseDown: function (e) { return handleChangeMonth(e, 1); }, style: { cursor: 'pointer', color: invert && white }, size: 20 }));
+    }, [value, invert]);
+    var getReadOnlyDate = function () {
+        var dateObj = new Date(value);
+        if (isNaN(dateObj.getDate()))
+            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' } },
+        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", invert: invert, disabled: disabled, onChange: handleOnChange, placeholder: "DD/MM/YYYY", maxLength: "10", onKeyDown: handleKeyDown, onBlur: handleFocusOut, onFocus: (0, handlePos_1.handleVerticalPos)(calenderRef, inputRef) }))),
+            react_1.default.createElement(styled_1.StyledCalenderContainer, { 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(),
+                        react_1.default.createElement(styled_1.StyledMonthTitle, { invert: invert },
+                            react_1.default.createElement("span", null, months[calender === null || calender === void 0 ? void 0 : calender.month]),
+                            react_1.default.createElement("span", null, 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 }, 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) {
+                                    return (react_1.default.createElement("div", { key: i, className: "range", onMouseDown: function (e) { return handleDayClick(e, item); }, onPointerEnter: function () { return handlePointerEnter(item); } }, item.getDate()));
+                                }
+                                else if (item < from) {
+                                    return (react_1.default.createElement("div", { key: i, className: "disabled-date" }, item.getDate()));
+                                }
+                                else {
+                                    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); } }, item.getDate()));
+                                }
+                            }
+                            else {
+                                return react_1.default.createElement("div", { key: i, className: "disabled-date" }, 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) {
+                                    return (react_1.default.createElement("div", { key: i, className: "disabled-date" }, item.getDate()));
+                                }
+                                else if (item > from && item < range) {
+                                    return (react_1.default.createElement("div", { key: i, className: "range", onMouseDown: function (e) { return handleDayClick(e, item); }, onPointerEnter: function () { return handlePointerEnter(item); } }, item.getDate()));
+                                }
+                                else {
+                                    return (react_1.default.createElement("div", { key: i, className: 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'
+                                                : '', onMouseDown: function (e) { return handleDayClick(e, item); }, onPointerEnter: function () { return handlePointerEnter(item); } }, item.getDate()));
+                                }
+                            }
+                            else {
+                                return (react_1.default.createElement("div", { key: i, className: 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'
+                                            : '', onMouseDown: function (e) { return handleDayClick(e, item); } }, 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 < range && item > from) {
+                                    return (react_1.default.createElement("div", { key: i, className: "range", onMouseDown: function (e) { return handleDayClick(e, item); }, onPointerEnter: function () { return handlePointerEnter(item); } }, item.getDate()));
+                                }
+                                else if (item < from) {
+                                    return (react_1.default.createElement("div", { key: i, className: "disabled-date" }, item.getDate()));
+                                }
+                                else {
+                                    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]
+                                            ? 'today'
+                                            : (previousDateOnly && new Date() < item) ||
+                                                (futureDateOnly && new Date() > item)
+                                                ? 'disabled-date'
+                                                : '', onMouseDown: function (e) { return handleDayClick(e, item); }, onPointerEnter: function () { return handlePointerEnter(item); } }, item.getDate()));
+                                }
+                            }
+                            else {
+                                return react_1.default.createElement("div", { key: i, className: "disabled-date" }, item.getDate());
+                            }
+                        })))))));
+}
+exports.default = react_1.default.memo(DatePicker);

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

@@ -0,0 +1,10 @@
+export const StyledDateInputContainer: any;
+export const StyledInput: any;
+export const StyledDateInputWrapper: any;
+export const StyledCalenderContainer: any;
+export const StyledMonthView: any;
+export const StyledMonthTitle: any;
+export const StyledHeader: any;
+export const StyledWeekDaysWrapper: any;
+export const StyledWeekdays: any;
+export const StyledBodyWrapper: any;

package/dist/components/DatePicker/styled.js

@@ -0,0 +1,68 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+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"));
+var themes_1 = require("../../themes");
+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\n    &:focus-within .calender-container {\n        visibility: visible;\n    }\n\n"], ["\n    position: relative;\n    width: fit-content;\n\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    text-align: center;\n    background: ", ";\n    outline: none;\n    border: none;\n    font-size: 1.6rem;\n    width: 13.2rem;\n    height: 4rem;\n    color: ", ";\n    &:hover {\n        background-color: ", ";\n    }\n\n    &:focus {\n        background-color: ", ";\n    }\n\n    ", "\n\n    &::placeholder {\n        color: ", " !important;\n        font-size: 1.6rem;\n    }\n\n"], ["\n    text-align: center;\n    background: ", ";\n    outline: none;\n    border: none;\n    font-size: 1.6rem;\n    width: 13.2rem;\n    height: 4rem;\n    color: ", ";\n    &:hover {\n        background-color: ", ";\n    }\n\n    &:focus {\n        background-color: ", ";\n    }\n\n    ", "\n\n    &::placeholder {\n        color: ", " !important;\n        font-size: 1.6rem;\n    }\n\n"])), function (_a) {
+    var invert = _a.invert;
+    return (invert ? greyColor80 : greyColor5);
+}, function (_a) {
+    var invert = _a.invert, disabled = _a.disabled;
+    return disabled ? greyColor100 : invert && white;
+}, function (_a) {
+    var invert = _a.invert, disabled = _a.disabled;
+    return disabled ? greyColor15 : invert ? greyColor70 : greyColor10;
+}, function (_a) {
+    var invert = _a.invert, disabled = _a.disabled;
+    return disabled ? greyColor15 : invert ? greyColor70 : greyColor10;
+}, function (_a) {
+    var disabled = _a.disabled;
+    return disabled &&
+        "\n        background-color: ".concat(greyColor15, ";\n        cursor: not-allowed;\n    ");
+}, greyColor40);
+exports.StyledDateInputWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    &::after{\n        content: '';\n        position: absolute;\n        width: 0;\n        height: 0.2rem;\n        bottom: 0;\n        left: 0;\n        background-color: ", ";\n        ", ";\n    }\n\n    &:focus-within {\n        background-color: ", ";\n    &::after {\n        width: 100%;\n    }\n  }\n"], ["\n    &::after{\n        content: '';\n        position: absolute;\n        width: 0;\n        height: 0.2rem;\n        bottom: 0;\n        left: 0;\n        background-color: ", ";\n        ", ";\n    }\n\n    &:focus-within {\n        background-color: ", ";\n    &::after {\n        width: 100%;\n    }\n  }\n"])), primaryColor100, (0, mixins_1.transition)('width'), greyColor10);
+exports.StyledCalenderContainer = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    font-family: sans-serif;\n    position: absolute;\n    width: 30rem;\n    /* height: 319px; */\n    box-shadow: 0 0.4rem 0.8rem 0 rgba(0, 0, 0, 0.2);\n    background-color: ", ";\n    visibility: hidden;\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    .right-class {\n        right: 0;\n    }\n"], ["\n    font-family: sans-serif;\n    position: absolute;\n    width: 30rem;\n    /* height: 319px; */\n    box-shadow: 0 0.4rem 0.8rem 0 rgba(0, 0, 0, 0.2);\n    background-color: ", ";\n    visibility: hidden;\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    .right-class {\n        right: 0;\n    }\n"])), function (_a) {
+    var invert = _a.invert;
+    return invert ? greyColor80 : white;
+}, function (_a) {
+    var invert = _a.invert;
+    return invert ? greyColor3 : primaryColor10;
+}, function (_a) {
+    var invert = _a.invert;
+    return invert && greyColor80;
+}, primaryColor100, 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) {
+    var invert = _a.invert;
+    return invert && white;
+});
+exports.StyledHeader = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    display: flex;\n    width: 90%;\n    margin: auto;\n    padding: 1rem 0;\n    font-size: 1.6rem;\n    font-weight: bold;\n    align-items: center;\n    justify-content: space-between;\n"], ["\n    display: flex;\n    width: 90%;\n    margin: auto;\n    padding: 1rem 0;\n    font-size: 1.6rem;\n    font-weight: bold;\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.6rem;\n    font-weight: bold;\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.6rem;\n    font-weight: bold;\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_10 || (templateObject_10 = __makeTemplateObject(["\n    display: flex;\n    flex-wrap: wrap;\n    justify-content: center;\n\n    div {\n        font-size: 16px;\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(.disabled-date) {\n            background-color: ", ";\n            color: ", ";\n            cursor: pointer;\n        }\n      }\n\n"], ["\n    display: flex;\n    flex-wrap: wrap;\n    justify-content: center;\n\n    div {\n        font-size: 16px;\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(.disabled-date) {\n            background-color: ", ";\n            color: ", ";\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) {
+    var invert = _a.invert;
+    return !invert ? "6px solid ".concat(white) : "6px solid ".concat(greyColor80);
+}, function (_a) {
+    var invert = _a.invert;
+    return !invert ? "6px solid ".concat(white) : "6px solid ".concat(greyColor80);
+}, function (_a) {
+    var invert = _a.invert;
+    return invert && white;
+}, primaryColor100, white);
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10;

package/dist/components/DatePicker/utils/buildCalenderObj.d.ts

@@ -0,0 +1 @@
+export function buildCalenderObj(from: any, inputRef: any, monthNumber: any, calender: any, setCalender: any): Date;

package/dist/components/DatePicker/utils/buildCalenderObj.js

@@ -0,0 +1,70 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.buildCalenderObj = void 0;
+var buildCalenderObj = function (from, inputRef, monthNumber, calender, setCalender) {
+    // The buildCalenderObj function is used to generate an object representing the calendar for 
+    // the current month, including the dates of the current, previous, and next months. 
+    // This function is called whenever the value or from props change, which may happen when the user 
+    // selects a new date or when the component is initially mounted.
+    var _a, _b, _c, _d, _e, _f;
+    var date = from || new Date();
+    var day = (((_b = (_a = inputRef.current.value) === null || _a === void 0 ? void 0 : _a.split('/')[0]) === null || _b === void 0 ? void 0 : _b.length) > 1 &&
+        inputRef.current.value.split('/')[0]) ||
+        date.getDate();
+    var month = (((_d = (_c = inputRef.current.value) === null || _c === void 0 ? void 0 : _c.split('/')[1]) === null || _d === void 0 ? void 0 : _d.length) > 1 &&
+        inputRef.current.value.split('/')[1]) ||
+        date.getMonth();
+    if (month == inputRef.current.value.split('/')[1]) {
+        month--;
+    }
+    var year = (((_f = (_e = inputRef.current.value) === null || _e === void 0 ? void 0 : _e.split('/')[2]) === null || _f === void 0 ? void 0 : _f.length) > 3 &&
+        inputRef.current.value.split('/')[2]) ||
+        // calender?.year ||
+        date.getFullYear();
+    var customeDate = new Date(year, month + monthNumber, day);
+    // last day date of the current month
+    var lastDayDate = new Date(customeDate.getFullYear(), customeDate.getMonth() + 1, 0).getDate();
+    // last day of the current month
+    var lastDay = new Date(customeDate.getFullYear(), customeDate.getMonth() + 1, 0).getDay();
+    //get last day of the previous month
+    var lastDayPrev = new Date(customeDate.getFullYear(), customeDate.getMonth(), 0).getDate();
+    var days = [];
+    for (var i = 1; i <= lastDayDate; i++) {
+        // days.push(i);
+        var obj = new Date(customeDate.getFullYear(), customeDate.getMonth(), i);
+        days.push(obj);
+    }
+    var prevDays = [];
+    calender.today = customeDate.getDate();
+    customeDate.setDate(1);
+    for (var i = customeDate.getDay() - 1; i >= 0; i--) {
+        var obj = new Date(customeDate.getFullYear(), customeDate.getMonth() - 1, lastDayPrev - i);
+        prevDays.push(obj);
+    }
+    var nextDays = [];
+    for (var i = 1; i < 7 - lastDay; i++) {
+        var obj = new Date(customeDate.getFullYear(), customeDate.getMonth() + 1, i);
+        nextDays.push(obj);
+        // nextDays.push(i);
+    }
+    calender.days = days;
+    calender.prevDays = prevDays;
+    calender.nextDays = nextDays;
+    calender.month = customeDate.getMonth();
+    calender.year = customeDate.getFullYear();
+    var modified = __assign({}, calender);
+    setCalender(modified);
+    return new Date(calender.year, calender.month, calender.today);
+};
+exports.buildCalenderObj = buildCalenderObj;

package/dist/components/DatePicker/utils/handlePos.d.ts

@@ -0,0 +1,2 @@
+export function handleVerticalPos(calenderRef: any, inputRef: any): void;
+export function handleHorizontalPos(calenderRef: any, id: any): void;

package/dist/components/DatePicker/utils/handlePos.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.handleHorizontalPos = exports.handleVerticalPos = void 0;
+var handleVerticalPos = function (calenderRef, inputRef) {
+    var _a, _b;
+    if (!calenderRef.current || !inputRef.current)
+        return;
+    var height = ((_a = calenderRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()).height;
+    var inputBottom = ((_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect()).bottom;
+    var innerHeight = window.innerHeight;
+    // innerHeight -= 30;
+    if (inputBottom + height > innerHeight) {
+        calenderRef.current.style.top = "".concat(-height, "px");
+    }
+    else {
+        calenderRef.current.style.top = "";
+    }
+};
+exports.handleVerticalPos = handleVerticalPos;
+var handleHorizontalPos = function (calenderRef, id) {
+    var _a;
+    if (!calenderRef || !calenderRef.current)
+        return;
+    var innerWidth = window.innerWidth;
+    var _b = (_a = calenderRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect(), left = _b.left, right = _b.right, width = _b.width;
+    if (id === 0) {
+        if (left > width / 2) {
+            calenderRef.current.style.right = '0';
+        }
+        else {
+            calenderRef.current.style.right = '';
+        }
+    }
+    if (id === 1) {
+        if (innerWidth > width / 2 + right) {
+            calenderRef.current.style.left = '0';
+        }
+        else {
+            calenderRef.current.style.left = '';
+        }
+    }
+};
+exports.handleHorizontalPos = handleHorizontalPos;

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

@@ -0,0 +1,2 @@
+declare const _default: any;
+export default _default;

package/dist/components/DateRangePicker/index.js

@@ -0,0 +1,55 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var themes_1 = require("../../themes");
+var BlockLabel_1 = require("../BlockLabel");
+var getBlockLabelProps_1 = require("../../utils/getBlockLabelProps");
+var CheckboxInput_1 = require("../RadioAndCheckbox/comps/CheckboxList/comps/CheckboxInput");
+var DatePicker_1 = __importDefault(require("../DatePicker"));
+var styled_1 = require("./styled");
+var none = themes_1.colors.none;
+function DateRangePicker(props) {
+    var onChange = props.onChange, value = props.value, id = props.id, readOnly = props.readOnly, futureDateOnly = props.futureDateOnly, previousDateOnly = props.previousDateOnly, allowPresentlyOngoing = props.allowPresentlyOngoing, invert = props.invert, disabled = props.disabled;
+    var currentDate = new Date(new Date().toLocaleDateString());
+    var handleOnChange = function (i, v) {
+        var newValue = value ? __spreadArray([], value, true) : [];
+        newValue[i] = v;
+        onChange && onChange(id, newValue);
+    };
+    return (react_1.default.createElement("div", { style: { display: 'flex', flexDirection: 'column' } },
+        react_1.default.createElement(BlockLabel_1.BlockLabel, __assign({}, (0, getBlockLabelProps_1.getBlockLabelProps)(props))),
+        react_1.default.createElement(styled_1.StyledDateRangeInputWrapper, { invert: invert, readOnly: readOnly },
+            react_1.default.createElement(DatePicker_1.default, { id: 0, value: value && value[0], onChange: handleOnChange, readOnly: readOnly, futureDateOnly: futureDateOnly, previousDateOnly: previousDateOnly, invert: invert, disabled: disabled }),
+            react_1.default.createElement(styled_1.StyledDateRangeInputDivider, null, "-"),
+            react_1.default.createElement(DatePicker_1.default, { id: 1, from: value && value[0] ? new Date(value[0]) : currentDate, futureDateOnly: futureDateOnly, previousDateOnly: previousDateOnly, value: value && (value[1] === null ? 'Ongoing' : value[1]), onChange: handleOnChange, readOnly: readOnly, disabled: value && value[1] === null ? true : false, invert: invert })),
+        !readOnly && allowPresentlyOngoing && (react_1.default.createElement("div", { style: { marginTop: '1rem' } },
+            react_1.default.createElement(CheckboxInput_1.CheckboxInput, { option: { display: 'Presently Ongoing', value: 'Ongoing' }, value: value && value[1] === null
+                    ? [{ display: 'Presently Ongoing', value: 'Ongoing' }]
+                    : [], onClick: function (isSelected) {
+                    return handleOnChange(1, isSelected ? undefined : null);
+                }, invert: invert })))));
+}
+exports.default = react_1.default.memo(DateRangePicker);

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

@@ -0,0 +1,3 @@
+export const StyledDateRangeInputWrapper: any;
+export const StyledDateRangeInputDivider: any;
+export const StyledDateRangeCheckbox: any;

package/dist/components/DateRangePicker/styled.js

@@ -0,0 +1,20 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledDateRangeCheckbox = exports.StyledDateRangeInputDivider = exports.StyledDateRangeInputWrapper = void 0;
+var styled_components_1 = __importDefault(require("styled-components"));
+var themes_1 = require("../../themes");
+var greyColor40 = themes_1.colors.greyColor40, greyColor5 = themes_1.colors.greyColor5, greyColor80 = themes_1.colors.greyColor80, white = themes_1.colors.white;
+exports.StyledDateRangeInputWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    border-radius: \"2px\";\n    /* height: 50px; */\n    /* width: 306px; */\n    width: max-content;\n    background-color: ", ";\n    display: flex;\n    align-items: center;\n"], ["\n    border-radius: \"2px\";\n    /* height: 50px; */\n    /* width: 306px; */\n    width: max-content;\n    background-color: ", ";\n    display: flex;\n    align-items: center;\n"])), function (_a) {
+    var invert = _a.invert, readOnly = _a.readOnly;
+    return (readOnly ? "none" : invert ? greyColor80 : greyColor5);
+});
+exports.StyledDateRangeInputDivider = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    font-size: 2rem;\n    line-height: 0;\n    color: ", ";\n"], ["\n    font-size: 2rem;\n    line-height: 0;\n    color: ", ";\n"])), greyColor40);
+exports.StyledDateRangeCheckbox = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n     margin-top: 2rem;\n"], ["\n     margin-top: 2rem;\n"])));
+var templateObject_1, templateObject_2, templateObject_3;

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

@@ -0,0 +1,8 @@
+export function HomeCover({ title, subtitle, desc, CTALink, customComp, coverImagesConfig, }: {
+    title: any;
+    subtitle: any;
+    desc: any;
+    CTALink: any;
+    customComp: any;
+    coverImagesConfig: any;
+}): any;

package/dist/components/HomeCover/index.js

@@ -0,0 +1,132 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HomeCover = void 0;
+var react_1 = __importStar(require("react"));
+var react_router_dom_1 = require("react-router-dom");
+// import { useScreenWidth } from "../../utils/customHooks/useScreenWidth";
+var toArray_1 = require("../../utils/toArray");
+var Buttons_1 = require("../Buttons");
+var mixins_1 = require("../../themes/mixins");
+var Typo_1 = require("../Typo");
+var styled_1 = require("./styled");
+var HomeCover = function (_a) {
+    var title = _a.title, subtitle = _a.subtitle, desc = _a.desc, CTALink = _a.CTALink, customComp = _a.customComp, coverImagesConfig = _a.coverImagesConfig;
+    var history = (0, react_router_dom_1.useHistory)();
+    //   const {deployment: {_CoverImages : coverImagesConfig}} = useGetQueryData('platformConfigs');
+    //backwards compat
+    var _CoverImages = coverImagesConfig.every(function (c) { return typeof c === "string"; })
+        ? coverImagesConfig
+        : coverImagesConfig.map(function (c) { return c.publicUrl; });
+    var _b = (0, react_1.useState)(undefined), dynamicTitleWidth = _b[0], setDynamicTitleWidth = _b[1];
+    var _c = (0, react_1.useState)({
+        currLayer: "layer1",
+        layer1: [0, 1],
+        layer2: [2, 3],
+    }), coverImageIdx = _c[0], setCoverImageIdx = _c[1];
+    //console.log({_CoverImages:_CoverImages[coverImageIdx.layer1[0]]})
+    var titleTextSpan_ref = (0, react_1.useRef)(null);
+    var title_ref = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(function () {
+        if (titleTextSpan_ref.current) {
+            var titleRect = title_ref.current.getBoundingClientRect();
+            var titleTextSpanRect = titleTextSpan_ref.current.getBoundingClientRect();
+            var titleWidth = titleRect.width;
+            var spanWidth = titleTextSpanRect.width;
+            var spanPadding = titleTextSpanRect.x - titleRect.x;
+            if (spanPadding * 2 + spanWidth > titleWidth) {
+                setDynamicTitleWidth(spanPadding * 2 + spanWidth);
+            }
+        }
+        var interval, timeout;
+        interval = setInterval(function () {
+            setCoverImageIdx(function (prev) {
+                return __assign(__assign({}, prev), { currLayer: prev.currLayer === "layer1" ? "layer2" : "layer1" });
+            });
+            timeout = setTimeout(function () {
+                setCoverImageIdx(function (prev) {
+                    var _a;
+                    var layerToSwitch = prev.currLayer === "layer1" ? "layer2" : "layer1";
+                    return __assign(__assign({}, prev), (_a = {}, _a[layerToSwitch] = [
+                        (prev[layerToSwitch][0] + 4) % _CoverImages.length,
+                        (prev[layerToSwitch][1] + 4) % _CoverImages.length,
+                    ], _a));
+                });
+            }, 300); // the interval here shoudl be the same as the css transition interval
+        }, 3000);
+        //resize title container if text is bleeding out due to long word
+        return function () {
+            clearTimeout(timeout);
+            clearInterval(interval);
+        };
+    }, []);
+    //   const getFontSize = (titleLength) => {
+    //     let decay = (80 / (titleLength * 0.08));
+    //     let max = 40;
+    //     let min = 20;
+    //     return (
+    //       (decay < max && decay > min)
+    //       ? decay
+    //       : decay > max
+    //         ? 40
+    //         : decay < min
+    //         && 20
+    //     )
+    //   }
+    return (react_1.default.createElement(styled_1.StyledHomeCover, null,
+        react_1.default.createElement(styled_1.StyledHomeCoverTitle, { ref: title_ref, style: dynamicTitleWidth && { width: dynamicTitleWidth + "px" } },
+            react_1.default.createElement(Typo_1.SERIF_9_10, null,
+                react_1.default.createElement("span", { ref: titleTextSpan_ref, className: "__textSpan" }, title)),
+            subtitle && react_1.default.createElement(Typo_1.SANS_3, { style: { paddingTop: "1rem" } }, subtitle)),
+        react_1.default.createElement(styled_1.StyledHomeCoverDesc, null,
+            react_1.default.createElement(styled_1.StyledHomeCoverDescContents, null,
+                desc &&
+                    (0, toArray_1.toArray)(desc).map(function (d, i) { return (react_1.default.createElement(Typo_1.SERIF_3_4, { key: i, style: {
+                            paddingBottom: i + 1 !== (0, toArray_1.toArray)(desc).length ? "1rem" : 0,
+                        } }, d)); }),
+                customComp && customComp,
+                CTALink && (react_1.default.createElement(Buttons_1.ButtonPrimary, { className: "HomeCover__cta", icon: "CaretRight", onClick: function () {
+                        // trackEventGA("Publishing Flow",`Clicked Publish CTA Button On Listing Page`,`${title}`)
+                        history.push(CTALink);
+                    } })))),
+        react_1.default.createElement(styled_1.StyledHomeCoverImgWrapper, { breakPoint: "none" },
+            react_1.default.createElement(styled_1.StyledHomeCoverImg, { backgroundImage: _CoverImages[coverImageIdx.layer1[0]], opacity: coverImageIdx.currLayer === "layer1" ? 1 : 0 }),
+            react_1.default.createElement(styled_1.StyledHomeCoverImg, { backgroundImage: _CoverImages[coverImageIdx.layer2[0]], opacity: coverImageIdx.currLayer === "layer2" ? 1 : 0 })),
+        (0, mixins_1.getBreakPoint)("md") && (react_1.default.createElement(styled_1.StyledHomeCoverImgWrapper, { breakPoint: "md" },
+            react_1.default.createElement(styled_1.StyledHomeCoverImg, { backgroundImage: _CoverImages[coverImageIdx.layer1[1]], opacity: coverImageIdx.currLayer === "layer1" ? 1 : 0 }),
+            react_1.default.createElement(styled_1.StyledHomeCoverImg, { backgroundImage: _CoverImages[coverImageIdx.layer2[1]], opacity: coverImageIdx.currLayer === "layer2" ? 1 : 0 })))));
+};
+exports.HomeCover = HomeCover;

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

@@ -0,0 +1,7 @@
+export const StyledHomeCover: any;
+export const StyledHomeCoverImg: any;
+export const StyledHomeCoverImgWrapper: any;
+export const StyledHomeCoverTitle: any;
+export const StyledHomeCoverDesc: any;
+export const StyledHomeCoverDescContents: any;
+export const StyledHomeCoverCta: any;

package/dist/components/HomeCover/styled.js

@@ -0,0 +1,60 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledHomeCoverCta = exports.StyledHomeCoverDescContents = exports.StyledHomeCoverDesc = exports.StyledHomeCoverTitle = exports.StyledHomeCoverImgWrapper = exports.StyledHomeCoverImg = exports.StyledHomeCover = void 0;
+var styled_components_1 = __importStar(require("styled-components"));
+var mixins_1 = require("../../themes/mixins");
+var themes_1 = require("../../themes");
+var utilsOolib_1 = require("../../utilsOolib");
+var greyColor3 = themes_1.colors.greyColor3, white = themes_1.colors.white;
+exports.StyledHomeCover = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  position: relative;\n  height: calc(100vh - 6rem);\n  ", " {\n    height: 60rem;\n  }\n"], ["\n  display: flex;\n  position: relative;\n  height: calc(100vh - 6rem);\n  ", " {\n    height: 60rem;\n  }\n"])), (0, mixins_1.mediaQuery)("sm"));
+exports.StyledHomeCoverImg = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-size: cover;\n  background-position: center;\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n  background-image: ", ";\n  opacity: ", ";\n  ", "\n"], ["\n  background-size: cover;\n  background-position: center;\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n  background-image: ", ";\n  opacity: ", ";\n  ", "\n"])), function (_a) {
+    var backgroundImage = _a.backgroundImage;
+    return "url(".concat(backgroundImage, ")");
+}, function (_a) {
+    var opacity = _a.opacity;
+    return "".concat(opacity);
+}, (0, mixins_1.transition)("opacity"));
+exports.StyledHomeCoverImgWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  position: relative;\n  ", "\n"], ["\n  position: relative;\n  ", "\n"])), function (_a) {
+    var breakPoint = _a.breakPoint;
+    switch (breakPoint) {
+        case "none":
+            return (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n          width: 100%;\n          margin-top: 5rem;\n          height: 0;\n          padding-bottom: 130%;\n\n          ", " {\n            width: 50%;\n          }\n\n          ", " {\n            margin-top: 0;\n            height: auto;\n            padding-bottom: unset;\n          }\n        "], ["\n          width: 100%;\n          margin-top: 5rem;\n          height: 0;\n          padding-bottom: 130%;\n\n          ", " {\n            width: 50%;\n          }\n\n          ", " {\n            margin-top: 0;\n            height: auto;\n            padding-bottom: unset;\n          }\n        "])), (0, mixins_1.mediaQuery)("md"), (0, mixins_1.mediaQuery)("sm"));
+        case "md":
+            return (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n          width: 50%;\n        "], ["\n          width: 50%;\n        "])));
+    }
+});
+exports.StyledHomeCoverTitle = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 22rem;\n  background-color: ", ";\n  padding: 5rem;\n  color: ", ";\n  z-index: 100;\n  ", " {\n    left: 6rem;\n  }\n  ", " {\n    width: 26rem;\n  }\n"], ["\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 22rem;\n  background-color: ", ";\n  padding: 5rem;\n  color: ", ";\n  z-index: 100;\n  ", " {\n    left: 6rem;\n  }\n  ", " {\n    width: 26rem;\n  }\n"])), function (_a) {
+    var colors = _a.theme.colors;
+    return (0, utilsOolib_1.getPrimaryColor100)(colors);
+}, white, (0, mixins_1.mediaQuery)("sm"), (0, mixins_1.mediaQuery)("lg"));
+exports.StyledHomeCoverDesc = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  position: absolute;\n  bottom: 0;\n  width: 100%;\n  z-index: 100; \n\n  padding: 2rem;\n\n  ", " {\n    left: 50%;\n    right: unset;\n  }\n\n  ", " {\n    padding: 0;\n    right: 6rem;\n    width: 40rem;\n  }\n"], ["\n  position: absolute;\n  bottom: 0;\n  width: 100%;\n  z-index: 100; \n\n  padding: 2rem;\n\n  ", " {\n    left: 50%;\n    right: unset;\n  }\n\n  ", " {\n    padding: 0;\n    right: 6rem;\n    width: 40rem;\n  }\n"])), (0, mixins_1.mediaQuery)("md"), (0, mixins_1.mediaQuery)("sm"));
+exports.StyledHomeCoverDescContents = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  padding: 5rem;\n  background-color: ", ";\n  position: relative;\n"], ["\n  padding: 5rem;\n  background-color: ", ";\n  position: relative;\n"])), greyColor3);
+exports.StyledHomeCoverCta = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  position: absolute;\n  bottom: 0;\n  right: 0;\n  border-radius: 0;\n"], ["\n  position: absolute;\n  bottom: 0;\n  right: 0;\n  border-radius: 0;\n"])));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;

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

@@ -0,0 +1 @@
+export function PageScrollIndicator(): any;

package/dist/components/PageScrollIndicator/index.js

@@ -0,0 +1,43 @@
+"use strict";
+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.PageScrollIndicator = void 0;
+var react_1 = __importStar(require("react"));
+var useScroll_1 = require("../../utils/customHooks/useScroll");
+var styled_1 = require("./styled");
+var PageScrollIndicator = function () {
+    var _a = (0, react_1.useState)(0), highLightLine = _a[0], setHighLightLine = _a[1];
+    var scrollFn = function () {
+        var totalDocHeight = document.body.offsetHeight;
+        var viewportHeight = window.innerHeight;
+        var scrollY = window.scrollY;
+        var scrollPercent = scrollY === 0 ? 0 : (scrollY / (totalDocHeight - viewportHeight)) * 100;
+        setHighLightLine(scrollPercent);
+    };
+    (0, useScroll_1.useScroll)(scrollFn);
+    return (react_1.default.createElement(styled_1.StyledScrollHighlight, null,
+        react_1.default.createElement(styled_1.StyledScrollHighlightVisible, { width: highLightLine })));
+};
+exports.PageScrollIndicator = PageScrollIndicator;

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

@@ -0,0 +1,2 @@
+export const StyledScrollHighlight: any;
+export const StyledScrollHighlightVisible: any;

package/dist/components/PageScrollIndicator/styled.js

@@ -0,0 +1,23 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledScrollHighlightVisible = exports.StyledScrollHighlight = void 0;
+var styled_components_1 = __importDefault(require("styled-components"));
+var themes_1 = require("../../themes");
+var utilsOolib_1 = require("../../utilsOolib");
+var greyColor15 = themes_1.colors.greyColor15;
+exports.StyledScrollHighlight = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: fixed;\n  top: 0rem;\n  left: 0;\n  width: 100%;\n  height: 3px;\n  background-color: ", ";\n  z-index: 1000000000;\n"], ["\n  position: fixed;\n  top: 0rem;\n  left: 0;\n  width: 100%;\n  height: 3px;\n  background-color: ", ";\n  z-index: 1000000000;\n"])), greyColor15);
+exports.StyledScrollHighlightVisible = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: 100%;\n  background-color: ", ";\n  width: ", ";\n"], ["\n  height: 100%;\n  background-color: ", ";\n  width: ", ";\n"])), function (_a) {
+    var colors = _a.theme.colors;
+    return (0, utilsOolib_1.getPrimaryColor100)(colors);
+}, function (_a) {
+    var width = _a.width;
+    return "".concat(width, "%");
+});
+var templateObject_1, templateObject_2;

package/dist/index.d.ts

@@ -31,5 +31,7 @@ export { ModalConfirm } from "./components/Modals/derivedComps/ModalConfirm";
 export { ModalLarge } from "./components/Modals/ModalLarge";
 export { ModalSmall } from "./components/Modals/ModalSmall";
 export { EmptyStates } from "./components/EmptyStates";
+export { HomeCover } from "./components/HomeCover";
+export { PageScrollIndicator } from "./components/PageScrollIndicator";
 export { HintsProvider } from "./components/Hints/contextApi";
 export { LoaderCircle, ProgressBar, LoaderCircle as Loader, LoaderOverlay } from "./components/LoadersAndProgress";

package/dist/index.js

@@ -14,7 +14,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.HintsProvider = exports.EmptyStates = exports.ModalSmall = exports.ModalLarge = exports.ModalConfirm = exports.SkeletonLoader = exports.Divider = exports.PercentCompletedPie = exports.Accordion = exports.ActionMenu = exports.Tooltip = exports.OKELink = exports.UserRoleBadge = exports.Section = exports.LoaderOverlay = exports.Loader = exports.ProgressBar = exports.LoaderCircle = exports.icons = exports.colors = exports.GlobalStyles = void 0;
+exports.HintsProvider = exports.DateRangePicker = exports.DatePicker = exports.PageScrollIndicator = exports.HomeCover = exports.EmptyStates = exports.ModalSmall = exports.ModalLarge = exports.ModalConfirm = exports.SkeletonLoader = exports.Divider = exports.PercentCompletedPie = exports.Accordion = exports.ActionMenu = exports.Tooltip = exports.OKELink = exports.UserRoleBadge = exports.Section = exports.LoaderOverlay = exports.Loader = exports.ProgressBar = exports.LoaderCircle = exports.icons = exports.colors = exports.GlobalStyles = void 0;
 //css and styling related ( styled-components )
 var globalStyles_1 = require("./globalStyles");
 Object.defineProperty(exports, "GlobalStyles", { enumerable: true, get: function () { return globalStyles_1.GlobalStyles; } });
@@ -72,6 +72,14 @@ var ModalSmall_1 = require("./components/Modals/ModalSmall");
 Object.defineProperty(exports, "ModalSmall", { enumerable: true, get: function () { return ModalSmall_1.ModalSmall; } });
 var EmptyStates_1 = require("./components/EmptyStates");
 Object.defineProperty(exports, "EmptyStates", { enumerable: true, get: function () { return EmptyStates_1.EmptyStates; } });
+var HomeCover_1 = require("./components/HomeCover");
+Object.defineProperty(exports, "HomeCover", { enumerable: true, get: function () { return HomeCover_1.HomeCover; } });
+var PageScrollIndicator_1 = require("./components/PageScrollIndicator");
+Object.defineProperty(exports, "PageScrollIndicator", { enumerable: true, get: function () { return PageScrollIndicator_1.PageScrollIndicator; } });
+var DatePicker_1 = require("./components/DatePicker");
+Object.defineProperty(exports, "DatePicker", { enumerable: true, get: function () { return DatePicker_1.DatePicker; } });
+var DateRangePicker_1 = require("./components/DateRangePicker");
+Object.defineProperty(exports, "DateRangePicker", { enumerable: true, get: function () { return DateRangePicker_1.DateRangePicker; } });
 //// context
 var contextApi_1 = require("./components/Hints/contextApi");
 Object.defineProperty(exports, "HintsProvider", { enumerable: true, get: function () { return contextApi_1.HintsProvider; } });

package/package.json

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