oolib 2.166.1 → 2.167.0

package/dist/stories/v2/components/Date.stories.d.ts

@@ -42,3 +42,50 @@ export namespace DateRangePicker_ {
         export let withPortal: boolean;
     }
 }
+export function DatePicker_(args: any): import("react").JSX.Element;
+export namespace DatePicker_ {
+    export namespace argTypes_1 {
+        export namespace previousDateOnly_2 {
+            let name_5: string;
+            export { name_5 as name };
+        }
+        export { previousDateOnly_2 as previousDateOnly };
+        export namespace futureDateOnly_2 {
+            let name_6: string;
+            export { name_6 as name };
+        }
+        export { futureDateOnly_2 as futureDateOnly };
+        export namespace disabled_2 {
+            let name_7: string;
+            export { name_7 as name };
+        }
+        export { disabled_2 as disabled };
+        export namespace readOnly_2 {
+            let name_8: string;
+            export { name_8 as name };
+        }
+        export { readOnly_2 as readOnly };
+        export namespace pickerLabel {
+            let name_9: string;
+            export { name_9 as name };
+        }
+    }
+    export { argTypes_1 as argTypes };
+    export namespace args_1 {
+        let previousDateOnly_3: boolean;
+        export { previousDateOnly_3 as previousDateOnly };
+        let futureDateOnly_3: boolean;
+        export { futureDateOnly_3 as futureDateOnly };
+        let disabled_3: boolean;
+        export { disabled_3 as disabled };
+        let readOnly_3: boolean;
+        export { readOnly_3 as readOnly };
+        let debug_1: boolean;
+        export { debug_1 as debug };
+        let withPortal_1: boolean;
+        export { withPortal_1 as withPortal };
+        let pickerLabel_1: string;
+        export { pickerLabel_1 as pickerLabel };
+    }
+    export { args_1 as args };
+}

package/dist/stories/v2/components/Date.stories.js

@@ -10,10 +10,14 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DateRangePicker_ = void 0;
+exports.DatePicker_ = exports.DateRangePicker_ = void 0;
 var react_1 = require("react");
 var DateRangePicker_1 = require("../../../v2/components/DateRangePicker");
+var DatePicker_1 = __importDefault(require("../../../v2/components/DatePicker"));
 exports.default = {
     title: 'Oolib V 2.0/components/Date',
 };
@@ -60,3 +64,43 @@ exports.DateRangePicker_.args = {
     endDateLabel: "",
     withPortal: false
 };
+var DatePicker_ = function (args) {
+    var _a = (0, react_1.useState)(undefined), date = _a[0], setDate = _a[1];
+    var handleChange = function (date) {
+        setDate(date);
+    };
+    return (React.createElement("div", { style: {
+            width: '45vw',
+            height: '95vh',
+            backgroundColor: args.invert && greyColor100,
+            padding: '1rem',
+        } },
+        React.createElement(DatePicker_1.default, __assign({}, args, { onChange: function (date) { return handleChange(date); }, value: date, label: "Date Picker", sublabel: "Calendar pickers default to showing today’s date when opened and only one month is shown at a time. Calendar pickers allow users to navigate through months and years, however they work best when used for recent or near future dates." }))));
+};
+exports.DatePicker_ = DatePicker_;
+exports.DatePicker_.argTypes = {
+    previousDateOnly: {
+        name: 'Previous Date Only',
+    },
+    futureDateOnly: {
+        name: 'Future Date Only',
+    },
+    disabled: {
+        name: 'Disabled',
+    },
+    readOnly: {
+        name: 'Read Only',
+    },
+    pickerLabel: {
+        name: "Picker Label"
+    }
+};
+exports.DatePicker_.args = {
+    previousDateOnly: false,
+    futureDateOnly: false,
+    disabled: false,
+    readOnly: false,
+    debug: false,
+    withPortal: false,
+    pickerLabel: ""
+};

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

@@ -0,0 +1,22 @@
+import React from "react";
+import 'react-datepicker/dist/react-datepicker.css';
+interface DatePickerProps {
+    value: Date | null;
+    onChange: (date: Date | null) => void;
+    id: string;
+    readOnly?: boolean;
+    previousDateOnly?: boolean;
+    futureDateOnly?: boolean;
+    invert?: boolean;
+    disabled?: boolean;
+    debug?: boolean;
+    withPortal?: boolean;
+    label?: string;
+    portalId?: string;
+    minDate?: Date;
+    maxDate?: Date;
+    pickerLabel?: string;
+}
+declare function DatePicker_(props: DatePickerProps): React.JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof DatePicker_>;
+export default _default;

package/dist/v2/components/DatePicker/index.js

@@ -0,0 +1,39 @@
+"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 __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 BlockLabel_1 = require("../BlockLabel");
+var getBlockLabelProps_1 = require("../../../utils/getBlockLabelProps");
+var Typo2_1 = require("../Typo2");
+var useDatePickerState_1 = require("./utils/useDatePickerState");
+var styled_1 = require("./styled");
+require("react-datepicker/dist/react-datepicker.css");
+function DatePicker_(props) {
+    var value = props.value, onChange = props.onChange, readOnly = props.readOnly, disabled = props.disabled, _a = props.withPortal, withPortal = _a === void 0 ? false : _a, _b = props.portalId, portalId = _b === void 0 ? 'date-picker-portal' : _b, minDate = props.minDate, maxDate = props.maxDate, pickerLabel = props.pickerLabel;
+    var _c = (0, useDatePickerState_1.useDatePickerState)({
+        withPortal: withPortal,
+        portalId: portalId,
+        onDateSelect: onChange
+    }), datePickerProps = _c.datePickerProps, isOpen = _c.isOpen;
+    var baseProps = __assign({ className: 'UI_BODY_SM', selected: value, minDate: minDate, maxDate: maxDate, readOnly: readOnly, disabled: disabled, dateFormat: "MM/dd/yyyy" }, datePickerProps);
+    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("div", { style: {} },
+            pickerLabel && react_1.default.createElement(Typo2_1.UI_CAPTION, null, pickerLabel),
+            react_1.default.createElement(styled_1.StyledDatePicker, __assign({}, baseProps))),
+        props.debug && (react_1.default.createElement("pre", null, JSON.stringify({ value: value }, null, 2)))));
+}
+exports.default = react_1.default.memo(DatePicker_);

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

@@ -0,0 +1,2 @@
+import DatePicker from "react-datepicker";
+export declare const StyledDatePicker: import("styled-components").StyledComponent<typeof DatePicker, any, {}, never>;

package/dist/v2/components/DatePicker/styled.js

@@ -0,0 +1,14 @@
+"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.StyledDatePicker = void 0;
+var react_datepicker_1 = __importDefault(require("react-datepicker"));
+var styled_components_1 = __importDefault(require("styled-components"));
+exports.StyledDatePicker = (0, styled_components_1.default)(react_datepicker_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding: 8px;\n  border: 1px solid #ccc;\n  border-radius: 4px;\n  font-size: 16px;\n  width: 120px;\n  &:disabled {\n    background-color: #f0f0f0;\n    cursor: not-allowed;\n  }\n"], ["\n  padding: 8px;\n  border: 1px solid #ccc;\n  border-radius: 4px;\n  font-size: 16px;\n  width: 120px;\n  &:disabled {\n    background-color: #f0f0f0;\n    cursor: not-allowed;\n  }\n"])));
+var templateObject_1;

package/dist/v2/components/DatePicker/utils/useDatePickerState.d.ts

@@ -0,0 +1,23 @@
+interface UseDatePickerStateProps {
+    withPortal?: boolean;
+    portalId: string;
+    onDateSelect?: (date: Date | null) => void;
+}
+export declare const useDatePickerState: ({ withPortal, portalId, onDateSelect }: UseDatePickerStateProps) => {
+    datePickerProps: {
+        withPortal: boolean;
+        portalId: string;
+        onCalendarOpen: () => void;
+        onCalendarClose: () => void;
+        open: boolean;
+        onInputClick: () => void;
+        onChange: (date: Date | null) => void;
+    } | {
+        onClickOutside: () => void;
+        open: boolean;
+        onInputClick: () => void;
+        onChange: (date: Date | null) => void;
+    };
+    isOpen: boolean;
+};
+export {};

package/dist/v2/components/DatePicker/utils/useDatePickerState.js

@@ -0,0 +1,81 @@
+"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.useDatePickerState = void 0;
+var react_1 = require("react");
+// handles auto closing of date picker popper in both conditions -  withPoral true and false  
+var useDatePickerState = function (_a) {
+    var _b = _a.withPortal, withPortal = _b === void 0 ? false : _b, portalId = _a.portalId, onDateSelect = _a.onDateSelect;
+    var _c = (0, react_1.useState)(false), isOpen = _c[0], setIsOpen = _c[1];
+    var _d = (0, react_1.useState)(false), portalOpen = _d[0], setPortalOpen = _d[1];
+    var cleanupPortalBackdrop = (0, react_1.useCallback)(function (id) {
+        var portal = document.getElementById(id);
+        if (portal) {
+            var portalOverlay = portal.querySelector('.react-datepicker__portal');
+            if (portalOverlay) {
+                portalOverlay.remove();
+            }
+        }
+    }, []);
+    var handleDateChange = (0, react_1.useCallback)(function (date) {
+        if (onDateSelect) {
+            onDateSelect(date);
+        }
+        if (!withPortal) {
+            setIsOpen(false);
+        }
+        else {
+            setPortalOpen(false);
+            cleanupPortalBackdrop(portalId);
+        }
+    }, [withPortal, portalId, onDateSelect, cleanupPortalBackdrop]);
+    var handlePortalClick = (0, react_1.useCallback)(function () {
+        if (withPortal) {
+            setPortalOpen(function (prev) {
+                var newState = !prev;
+                if (!newState) {
+                    cleanupPortalBackdrop(portalId);
+                }
+                return newState;
+            });
+        }
+    }, [withPortal, portalId, cleanupPortalBackdrop]);
+    var handleInputClick = (0, react_1.useCallback)(function () {
+        if (withPortal) {
+            handlePortalClick();
+        }
+        else {
+            setIsOpen(function (prev) { return !prev; });
+        }
+    }, [withPortal, handlePortalClick]);
+    (0, react_1.useEffect)(function () {
+        return function () {
+            if (withPortal) {
+                cleanupPortalBackdrop(portalId);
+            }
+        };
+    }, [withPortal, portalId, cleanupPortalBackdrop]);
+    var datePickerProps = __assign({ open: withPortal ? portalOpen : isOpen, onInputClick: handleInputClick, onChange: handleDateChange }, (withPortal ? {
+        withPortal: true,
+        portalId: portalId,
+        onCalendarOpen: handlePortalClick,
+        onCalendarClose: handlePortalClick,
+    } : {
+        onClickOutside: function () { return setIsOpen(false); }
+    }));
+    return {
+        datePickerProps: datePickerProps,
+        isOpen: withPortal ? portalOpen : isOpen
+    };
+};
+exports.useDatePickerState = useDatePickerState;

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

@@ -1,5 +1,19 @@
 import React from 'react';
-import 'react-datepicker/dist/react-datepicker.css';
+interface DateRangePickerProps {
+    onChange: (id: string, value: (Date | null)[]) => void;
+    value: (Date | null)[];
+    id: string;
+    readOnly?: boolean;
+    futureDateOnly?: boolean;
+    previousDateOnly?: boolean;
+    allowPresentlyOngoing?: boolean;
+    invert?: boolean;
+    disabled?: boolean;
+    debug?: boolean;
+    startDateLabel?: string;
+    endDateLabel?: string;
+    withPortal?: boolean;
+}
 interface DateRangePickerProps {
     onChange: (id: string, value: (Date | null)[]) => void;
     value: (Date | null)[];

package/dist/v2/components/DateRangePicker/index.js

@@ -42,17 +42,19 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     }
     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 });
 exports.DateRangePicker = void 0;
 var react_1 = __importStar(require("react"));
-require("react-datepicker/dist/react-datepicker.css");
 var RadioAndCheckbox_1 = require("../../../components/RadioAndCheckbox");
 var BlockLabel_1 = require("../BlockLabel");
 var getBlockLabelProps_1 = require("../../../utils/getBlockLabelProps");
-var Typo2_1 = require("../Typo2");
 var styled_1 = require("./styled");
 var TextInputs_1 = require("../TextInputs");
 var __1 = require("../../..");
+var DatePicker_1 = __importDefault(require("../DatePicker"));
 function DateRangePicker_(props) {
     var onChange = props.onChange, value = props.value, id = props.id, readOnly = props.readOnly, futureDateOnly = props.futureDateOnly, previousDateOnly = props.previousDateOnly, allowPresentlyOngoing = props.allowPresentlyOngoing, invert = props.invert, disabled = props.disabled, debug = props.debug, startDateLabel = props.startDateLabel, endDateLabel = props.endDateLabel, _a = props.withPortal, withPortal = _a === void 0 ? false : _a;
     var _b = (0, react_1.useState)(value[0] || null), startDate = _b[0], setStartDate = _b[1];
@@ -61,29 +63,18 @@ function DateRangePicker_(props) {
         setStartDate(value[0] || null);
         setEndDate(value[1] || null);
     }, [value]);
-    // Get current date at midnight for consistent comparison
     var currentDate = new Date();
     currentDate.setHours(0, 0, 0, 0);
-    // Get yesterday's date
     var yesterday = new Date(currentDate);
     yesterday.setDate(currentDate.getDate() - 1);
-    var handleOnChange = function (index, date) {
+    var handleDateChange = function (index, date) {
         var newValue = __spreadArray([], value, true);
         newValue[index] = date;
-        onChange(id, newValue);
-        if (index === 0) {
-            setStartDate(date);
-            if (date && endDate && date > endDate) {
-                setEndDate(null);
-                newValue[1] = null;
-                onChange(id, newValue);
-            }
-        }
-        else {
-            setEndDate(date);
+        if (index === 0 && date && endDate && date > endDate) {
+            newValue[1] = null;
         }
+        onChange(id, newValue);
     };
-    // Calculate min and max dates based on restrictions
     var getMinDate = function (isEndDate) {
         if (futureDateOnly) {
             return currentDate;
@@ -103,21 +94,15 @@ function DateRangePicker_(props) {
         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("div", { style: { display: "flex", flexDirection: "column" } },
-                react_1.default.createElement(Typo2_1.UI_CAPTION, null, startDateLabel),
-                react_1.default.createElement(styled_1.StyledDatePicker, { locale: "es", className: 'UI_BODY_SM', selected: startDate, onChange: function (date) { return handleOnChange(0, date); }, selectsStart: true, startDate: startDate, endDate: endDate, minDate: getMinDate(false), maxDate: getMaxDate(), readOnly: readOnly, disabled: disabled, dateFormat: "MM/dd/yyyy", withPortal: withPortal })),
+                react_1.default.createElement(DatePicker_1.default, { value: startDate, onChange: function (date) { return handleDateChange(0, date); }, id: "".concat(id, "-start"), readOnly: readOnly, disabled: disabled, withPortal: withPortal, portalId: "date-picker-portal-start", minDate: getMinDate(false), maxDate: getMaxDate(), pickerLabel: startDateLabel, debug: debug })),
             react_1.default.createElement(styled_1.StyledDateRangeInputDivider, null),
-            react_1.default.createElement("div", { style: { display: "flex", flexDirection: "column" } },
-                react_1.default.createElement(Typo2_1.UI_CAPTION, null, endDateLabel),
-                value && value[1] === null ?
-                    react_1.default.createElement("div", { style: { border: "1px solid ".concat(__1.colors2.grey20), padding: '8px 20px', borderRadius: '5px', width: '120px', background: "".concat(__1.colors2.grey5) } },
-                        react_1.default.createElement(TextInputs_1.TextInput, { value: "OnGoing", readOnly: true }))
-                    :
-                        react_1.default.createElement(styled_1.StyledDatePicker, { locale: "es", className: 'UI_BODY_SM', selected: endDate, onChange: function (date) { return handleOnChange(1, date); }, selectsEnd: true, startDate: startDate, endDate: endDate, minDate: getMinDate(true), maxDate: getMaxDate(), readOnly: readOnly, disabled: disabled || (value && value[1] === null), dateFormat: "MM/dd/yyyy", withPortal: withPortal }))),
+            react_1.default.createElement("div", { style: { display: "flex", flexDirection: "column" } }, value && value[1] === null ? (react_1.default.createElement("div", { style: { border: "1px solid ".concat(__1.colors2.grey20), padding: '8px 20px', borderRadius: '5px', width: '120px', background: "".concat(__1.colors2.grey5) } },
+                react_1.default.createElement(TextInputs_1.TextInput, { value: "OnGoing", readOnly: true }))) : (react_1.default.createElement(DatePicker_1.default, { value: endDate, onChange: function (date) { return handleDateChange(1, date); }, id: "".concat(id, "-end"), readOnly: readOnly, disabled: disabled || (value && value[1] === null), withPortal: withPortal, portalId: "date-picker-portal-end", minDate: getMinDate(true), maxDate: getMaxDate(), pickerLabel: endDateLabel, debug: debug })))),
         !readOnly && allowPresentlyOngoing && (react_1.default.createElement("div", { style: { marginTop: '0.5rem' } },
             react_1.default.createElement(RadioAndCheckbox_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);
+                    return handleDateChange(1, isSelected ? undefined : null);
                 }, disabled: disabled || readOnly }))),
         debug && (react_1.default.createElement("pre", null, JSON.stringify({ startDate: startDate, endDate: endDate, value: value }, null, 2)))));
 }

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

@@ -1,7 +1,5 @@
-import DatePicker from "react-datepicker";
 export declare const StyledDateRangeInputWrapper: import("styled-components").StyledComponent<"div", any, {
     invert?: boolean;
     readOnly?: boolean;
 }, never>;
 export declare const StyledDateRangeInputDivider: import("styled-components").StyledComponent<"span", any, {}, never>;
-export declare const StyledDatePicker: import("styled-components").StyledComponent<typeof DatePicker, any, {}, never>;

package/dist/v2/components/DateRangePicker/styled.js

@@ -7,18 +7,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.StyledDatePicker = exports.StyledDateRangeInputDivider = exports.StyledDateRangeInputWrapper = void 0;
+exports.StyledDateRangeInputDivider = exports.StyledDateRangeInputWrapper = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
 var themes_1 = require("../../themes");
 var __1 = require("../../..");
-var react_datepicker_1 = __importDefault(require("react-datepicker"));
-exports.StyledDateRangeInputWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  /* gap: 8px; */\n  ", "\n  ", "\n\n  .react-datepicker{\n    margin-left: 3rem;\n  }\n\n  .react-datepicker__header{\n    font-family: ", ";\n    background-color: ", ";\n    \n    .react-datepicker__current-month{\n      font-family: ", ";    \n      margin-bottom: 0.5rem;\n    }\n  }\n\n  .react-datepicker__month{\n    font-family: ", ";\n    .react-datepicker__day{\n      /* width: 20px; */\n      margin: 0.2rem;\n    }\n  }\n  .react-datepicker__day-name{\n      margin: 0.2rem;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  /* gap: 8px; */\n  ", "\n  ", "\n\n  .react-datepicker{\n    margin-left: 3rem;\n  }\n\n  .react-datepicker__header{\n    font-family: ", ";\n    background-color: ", ";\n    \n    .react-datepicker__current-month{\n      font-family: ", ";    \n      margin-bottom: 0.5rem;\n    }\n  }\n\n  .react-datepicker__month{\n    font-family: ", ";\n    .react-datepicker__day{\n      /* width: 20px; */\n      margin: 0.2rem;\n    }\n  }\n  .react-datepicker__day-name{\n      margin: 0.2rem;\n  }\n"])), function (_a) {
-    var invert = _a.invert;
-    return invert && "\n    background-color: #333;\n    color: #fff;\n  ";
-}, function (_a) {
+exports.StyledDateRangeInputWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n\n  ", "\n\n  .react-datepicker{\n    margin-left: 3rem;\n  }\n\n  .react-datepicker__header{\n    font-family: ", ";\n    background-color: ", ";\n    \n    .react-datepicker__current-month{\n      font-family: ", ";    \n      margin-bottom: 0.5rem;\n    }\n  }\n\n  .react-datepicker__month{\n    font-family: ", ";\n    .react-datepicker__day{\n      /* width: 20px; */\n      margin: 0.2rem;\n    }\n  }\n  .react-datepicker__day-name{\n      margin: 0.2rem;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n\n  ", "\n\n  .react-datepicker{\n    margin-left: 3rem;\n  }\n\n  .react-datepicker__header{\n    font-family: ", ";\n    background-color: ", ";\n    \n    .react-datepicker__current-month{\n      font-family: ", ";    \n      margin-bottom: 0.5rem;\n    }\n  }\n\n  .react-datepicker__month{\n    font-family: ", ";\n    .react-datepicker__day{\n      /* width: 20px; */\n      margin: 0.2rem;\n    }\n  }\n  .react-datepicker__day-name{\n      margin: 0.2rem;\n  }\n"])), function (_a) {
     var readOnly = _a.readOnly;
     return readOnly && "\n    opacity: 0.7;\n    pointer-events: none;\n  ";
 }, themes_1.typo.UI_CAPTION, __1.colors2.grey10, themes_1.typo.UI_CAPTION, themes_1.typo.UI_CAPTION);
 exports.StyledDateRangeInputDivider = styled_components_1.default.span(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin: 1rem;\n"], ["\n  margin: 1rem;\n"])));
-exports.StyledDatePicker = (0, styled_components_1.default)(react_datepicker_1.default)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  padding: 8px;\n  border: 1px solid #ccc;\n  border-radius: 4px;\n  font-size: 16px;\n  width: 120px;\n  &:disabled {\n    background-color: #f0f0f0;\n    cursor: not-allowed;\n  }\n"], ["\n  padding: 8px;\n  border: 1px solid #ccc;\n  border-radius: 4px;\n  font-size: 16px;\n  width: 120px;\n  &:disabled {\n    background-color: #f0f0f0;\n    cursor: not-allowed;\n  }\n"])));
-var templateObject_1, templateObject_2, templateObject_3;
+var templateObject_1, templateObject_2;

package/package.json

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