krl-alfred 2.17.11 → 2.17.13

package/dist/components/Input/Input.d.ts

@@ -1,3 +1,3 @@
 import { InputProps } from "./props";
-declare const Input: ({ hasError, disabled, label, customLinkText, customLinkHref, onCustomLinkClick, onChange, errorMessage, type, name, width, mask, placeholder, hasCopyButton, readOnly, autoFocus, value, format, visible, infoText, id, isClearable, onClear, hasNumericFormat, inline, minDate, maxDate, ...other }: InputProps) => import("react/jsx-runtime").JSX.Element;
+declare const Input: ({ hasError, disabled, label, customLinkText, customLinkHref, onCustomLinkClick, onChange, errorMessage, type, name, width, mask, placeholder, hasCopyButton, readOnly, autoFocus, value, format, visible, infoText, id, isClearable, onClear, hasNumericFormat, inline, minDate, maxDate, filterDate, ...other }: InputProps) => import("react/jsx-runtime").JSX.Element;
 export default Input;

package/dist/components/Input/Input.js

@@ -41,11 +41,11 @@ var locale_1 = require("date-fns/locale");
 var date_fns_1 = require("date-fns");
 var Input = function (_a) {
     var _b;
-    var _c = _a.hasError, hasError = _c === void 0 ? props_1.InputDefault.hasError : _c, _d = _a.disabled, disabled = _d === void 0 ? props_1.InputDefault.disabled : _d, _e = _a.label, label = _e === void 0 ? props_1.InputDefault.label : _e, _f = _a.customLinkText, customLinkText = _f === void 0 ? props_1.InputDefault.customLinkText : _f, _g = _a.customLinkHref, customLinkHref = _g === void 0 ? props_1.InputDefault.customLinkHref : _g, _h = _a.onCustomLinkClick, onCustomLinkClick = _h === void 0 ? props_1.InputDefault.onCustomLinkClick : _h, _j = _a.onChange, onChange = _j === void 0 ? props_1.InputDefault.onChange : _j, _k = _a.errorMessage, errorMessage = _k === void 0 ? props_1.InputDefault.errorMessage : _k, _l = _a.type, type = _l === void 0 ? props_1.InputDefault.type : _l, _m = _a.name, name = _m === void 0 ? props_1.InputDefault.name : _m, _o = _a.width, width = _o === void 0 ? props_1.InputDefault.width : _o, _p = _a.mask, mask = _p === void 0 ? props_1.InputDefault.mask : _p, _q = _a.placeholder, placeholder = _q === void 0 ? props_1.InputDefault.placeholder : _q, _r = _a.hasCopyButton, hasCopyButton = _r === void 0 ? props_1.InputDefault.hasCopyButton : _r, _s = _a.readOnly, readOnly = _s === void 0 ? props_1.InputDefault.readOnly : _s, _t = _a.autoFocus, autoFocus = _t === void 0 ? props_1.InputDefault.autoFocus : _t, value = _a.value, _u = _a.format, format = _u === void 0 ? props_1.InputDefault.format : _u, _v = _a.visible, visible = _v === void 0 ? props_1.InputDefault.visible : _v, _w = _a.infoText, infoText = _w === void 0 ? props_1.InputDefault.infoText : _w, _x = _a.id, id = _x === void 0 ? props_1.InputDefault.id : _x, _y = _a.isClearable, isClearable = _y === void 0 ? props_1.InputDefault.isClearable : _y, _z = _a.onClear, onClear = _z === void 0 ? props_1.InputDefault.onClear : _z, _0 = _a.hasNumericFormat, hasNumericFormat = _0 === void 0 ? props_1.InputDefault.hasNumericFormat : _0, _1 = _a.inline, inline = _1 === void 0 ? props_1.InputDefault.inline : _1, _2 = _a.minDate, minDate = _2 === void 0 ? props_1.InputDefault.minDate : _2, _3 = _a.maxDate, maxDate = _3 === void 0 ? props_1.InputDefault.maxDate : _3, other = __rest(_a, ["hasError", "disabled", "label", "customLinkText", "customLinkHref", "onCustomLinkClick", "onChange", "errorMessage", "type", "name", "width", "mask", "placeholder", "hasCopyButton", "readOnly", "autoFocus", "value", "format", "visible", "infoText", "id", "isClearable", "onClear", "hasNumericFormat", "inline", "minDate", "maxDate"]);
-    var _4 = (0, react_1.useState)(type), inputType = _4[0], setInputType = _4[1];
-    var _5 = (0, react_1.useState)(false), alert = _5[0], setAlert = _5[1];
-    var _6 = (0, react_1.useState)(value), inputValue = _6[0], setInputValue = _6[1];
-    var _7 = (0, react_1.useState)(value ? new Date(value) : null), startDate = _7[0], setStartDate = _7[1];
+    var _c = _a.hasError, hasError = _c === void 0 ? props_1.InputDefault.hasError : _c, _d = _a.disabled, disabled = _d === void 0 ? props_1.InputDefault.disabled : _d, _e = _a.label, label = _e === void 0 ? props_1.InputDefault.label : _e, _f = _a.customLinkText, customLinkText = _f === void 0 ? props_1.InputDefault.customLinkText : _f, _g = _a.customLinkHref, customLinkHref = _g === void 0 ? props_1.InputDefault.customLinkHref : _g, _h = _a.onCustomLinkClick, onCustomLinkClick = _h === void 0 ? props_1.InputDefault.onCustomLinkClick : _h, _j = _a.onChange, onChange = _j === void 0 ? props_1.InputDefault.onChange : _j, _k = _a.errorMessage, errorMessage = _k === void 0 ? props_1.InputDefault.errorMessage : _k, _l = _a.type, type = _l === void 0 ? props_1.InputDefault.type : _l, _m = _a.name, name = _m === void 0 ? props_1.InputDefault.name : _m, _o = _a.width, width = _o === void 0 ? props_1.InputDefault.width : _o, _p = _a.mask, mask = _p === void 0 ? props_1.InputDefault.mask : _p, _q = _a.placeholder, placeholder = _q === void 0 ? props_1.InputDefault.placeholder : _q, _r = _a.hasCopyButton, hasCopyButton = _r === void 0 ? props_1.InputDefault.hasCopyButton : _r, _s = _a.readOnly, readOnly = _s === void 0 ? props_1.InputDefault.readOnly : _s, _t = _a.autoFocus, autoFocus = _t === void 0 ? props_1.InputDefault.autoFocus : _t, value = _a.value, _u = _a.format, format = _u === void 0 ? props_1.InputDefault.format : _u, _v = _a.visible, visible = _v === void 0 ? props_1.InputDefault.visible : _v, _w = _a.infoText, infoText = _w === void 0 ? props_1.InputDefault.infoText : _w, _x = _a.id, id = _x === void 0 ? props_1.InputDefault.id : _x, _y = _a.isClearable, isClearable = _y === void 0 ? props_1.InputDefault.isClearable : _y, _z = _a.onClear, onClear = _z === void 0 ? props_1.InputDefault.onClear : _z, _0 = _a.hasNumericFormat, hasNumericFormat = _0 === void 0 ? props_1.InputDefault.hasNumericFormat : _0, _1 = _a.inline, inline = _1 === void 0 ? props_1.InputDefault.inline : _1, _2 = _a.minDate, minDate = _2 === void 0 ? props_1.InputDefault.minDate : _2, _3 = _a.maxDate, maxDate = _3 === void 0 ? props_1.InputDefault.maxDate : _3, _4 = _a.filterDate, filterDate = _4 === void 0 ? props_1.InputDefault.filterDate : _4, other = __rest(_a, ["hasError", "disabled", "label", "customLinkText", "customLinkHref", "onCustomLinkClick", "onChange", "errorMessage", "type", "name", "width", "mask", "placeholder", "hasCopyButton", "readOnly", "autoFocus", "value", "format", "visible", "infoText", "id", "isClearable", "onClear", "hasNumericFormat", "inline", "minDate", "maxDate", "filterDate"]);
+    var _5 = (0, react_1.useState)(type), inputType = _5[0], setInputType = _5[1];
+    var _6 = (0, react_1.useState)(false), alert = _6[0], setAlert = _6[1];
+    var _7 = (0, react_1.useState)(value), inputValue = _7[0], setInputValue = _7[1];
+    var _8 = (0, react_1.useState)(value ? new Date(value) : null), startDate = _8[0], setStartDate = _8[1];
     var inputRef = (0, react_1.useRef)(null);
     var t = (0, react_i18next_1.useTranslation)().t;
     var language = i18n_1.default.language;
@@ -95,7 +95,7 @@ var Input = function (_a) {
                                     }, 1);
                                 }, selected: startDate, ref: inputRef, dateFormat: format, locale: language === "tr" ? locale_1.tr : locale_1.enGB, customInput: (0, jsx_runtime_1.jsx)(CustomDateInput, {}), 
                                 //customInput={<InputStyled $hasError={hasError} id={id}/>}
-                                inline: inline, minDate: minDate, maxDate: maxDate, renderCustomHeader: function (_a) {
+                                inline: inline, minDate: minDate, maxDate: maxDate, filterDate: filterDate, renderCustomHeader: function (_a) {
                                     var monthDate = _a.monthDate, customHeaderCount = _a.customHeaderCount, decreaseMonth = _a.decreaseMonth, increaseMonth = _a.increaseMonth, decreaseYear = _a.decreaseYear, increaseYear = _a.increaseYear, prevMonthButtonDisabled = _a.prevMonthButtonDisabled, nextMonthButtonDisabled = _a.nextMonthButtonDisabled, prevYearButtonDisabled = _a.prevYearButtonDisabled, nextYearButtonDisabled = _a.nextYearButtonDisabled;
                                     return ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "headerTopContent" }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "leftButtons" }, { children: [(0, jsx_runtime_1.jsx)("button", __assign({ "aria-label": "Previous Year", className: "react-datepicker__navigation react-datepicker__navigation--previous", onClick: decreaseYear, type: "button", disabled: prevYearButtonDisabled }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "CalenderArrowleftsmall" }) })), (0, jsx_runtime_1.jsx)("button", __assign({ "aria-label": "Previous Month", className: "react-datepicker__navigation react-datepicker__navigation--previous", onClick: decreaseMonth, type: "button", disabled: prevMonthButtonDisabled }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowSmallLeft" }) }))] })), (0, jsx_runtime_1.jsxs)("span", __assign({ className: "react-datepicker__current-month" }, { children: [monthDate.toLocaleString(language === "tr" ? "tr-TR" : "en-GB", { month: "long" }), ", ", monthDate.toLocaleString(language === "tr" ? "tr-TR" : "en-GB", { year: "numeric" })] })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "rightButtons" }, { children: [(0, jsx_runtime_1.jsx)("button", __assign({ "aria-label": "Next Month", className: "react-datepicker__navigation react-datepicker__navigation--next", onClick: increaseMonth, type: "button", disabled: nextMonthButtonDisabled }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowSmallRight" }) })), (0, jsx_runtime_1.jsx)("button", __assign({ "aria-label": "Next Year", className: "react-datepicker__navigation react-datepicker__navigation--next", onClick: increaseYear, type: "button", disabled: nextYearButtonDisabled }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Calenderarrowrightsmall" }) }))] }))] })));
                                 } }) }))) : ((0, jsx_runtime_1.jsx)(Input_styled_1.InputStyled, __assign({ ref: inputRef, type: inputType, "$hasError": hasError, disabled: disabled, onChange: function (e) {

package/dist/components/Input/Input.styled.js

@@ -12,5 +12,5 @@ var styled_components_1 = __importDefault(require("styled-components"));
 exports.AlertStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    position: absolute;\n    right: 8px;\n    top: -20px;\n    height: 28px;\n    border-radius: 0.5rem;\n    background-color: white;\n    box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0 1rem;\n    user-select: none;\n    pointer-events: none;\n    transition: opacity .4s ease;\n    opacity: ", ";\n    font: var(--caption-medium-10-12);\n"], ["\n    position: absolute;\n    right: 8px;\n    top: -20px;\n    height: 28px;\n    border-radius: 0.5rem;\n    background-color: white;\n    box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0 1rem;\n    user-select: none;\n    pointer-events: none;\n    transition: opacity .4s ease;\n    opacity: ", ";\n    font: var(--caption-medium-10-12);\n"])), function (props) { return props.$visible ? '1' : '0'; });
 exports.Container = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    display: flex;\n    flex-direction: column;\n    width: ", ";\n\n    .top {\n        display: flex;\n        margin-bottom: 16px;\n        font: var(--caption-bold-12-15);\n\n        &.justify-between {\n            justify-content: space-between;\n        }\n\n        label {\n            margin: 0;\n            color: var(--dark-opacity-50);\n            display: block;\n        }\n\n        /*a {\n          margin: 0;\n          color: var(--primary);\n          text-decoration: none;\n          cursor: pointer;\n          &:hover,:focus,:active{\n            color: var(--primary-hover) !important;\n          }\n        }*/\n    }\n\n    .input {\n        position: relative;\n\n        .inputIcon {\n            position: absolute;\n            width: 24px;\n            height: 24px;\n            top: 16px;\n            right: 16px;\n            cursor: pointer;\n\n            &:not(.hasNoBg) {\n                &:hover {\n                    background-color: var(--primary-opacity-5);\n                }\n            }\n        }\n\n        .removeIcon {\n            position: absolute;\n            top: 16px;\n            right: 1rem;\n            cursor: pointer;\n            *{\n                display: block;\n            }\n        }\n\n        .popupText {\n            font: var(--caption-semi-bold-11-13);\n            text-align: center;\n        }\n    }\n\n    .error {\n        display: flex;\n        align-items: center;\n        margin-top: 8px;\n        color: var(--red);\n\n        svg {\n            margin-right: 8px;\n        }\n\n        p {\n            margin: 0;\n            font: var(--caption-semi-bold-11-13);\n        }\n    }\n"], ["\n    display: flex;\n    flex-direction: column;\n    width: ", ";\n\n    .top {\n        display: flex;\n        margin-bottom: 16px;\n        font: var(--caption-bold-12-15);\n\n        &.justify-between {\n            justify-content: space-between;\n        }\n\n        label {\n            margin: 0;\n            color: var(--dark-opacity-50);\n            display: block;\n        }\n\n        /*a {\n          margin: 0;\n          color: var(--primary);\n          text-decoration: none;\n          cursor: pointer;\n          &:hover,:focus,:active{\n            color: var(--primary-hover) !important;\n          }\n        }*/\n    }\n\n    .input {\n        position: relative;\n\n        .inputIcon {\n            position: absolute;\n            width: 24px;\n            height: 24px;\n            top: 16px;\n            right: 16px;\n            cursor: pointer;\n\n            &:not(.hasNoBg) {\n                &:hover {\n                    background-color: var(--primary-opacity-5);\n                }\n            }\n        }\n\n        .removeIcon {\n            position: absolute;\n            top: 16px;\n            right: 1rem;\n            cursor: pointer;\n            *{\n                display: block;\n            }\n        }\n\n        .popupText {\n            font: var(--caption-semi-bold-11-13);\n            text-align: center;\n        }\n    }\n\n    .error {\n        display: flex;\n        align-items: center;\n        margin-top: 8px;\n        color: var(--red);\n\n        svg {\n            margin-right: 8px;\n        }\n\n        p {\n            margin: 0;\n            font: var(--caption-semi-bold-11-13);\n        }\n    }\n"])), function (props) { return props.$width || '370px'; });
 exports.InputStyled = styled_components_1.default.input(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    box-sizing: border-box;\n    width: 100%;\n    height: 56px;\n    background: ", ";\n    border-radius: 0.5rem;\n    border: ", ";\n    padding: ", ";\n    color: ", ";\n    ", "\n    font: var(--body-semi-bold-14-17);\n    outline: none;\n    user-select: ", ";\n    pointer-events: ", ";\n    -webkit-appearance: none;\n\n    &::-webkit-outer-spin-button,\n    &::-webkit-inner-spin-button {\n        -webkit-appearance: none;\n        margin: 0;\n    }\n\n    &::placeholder {\n        color: ", ";\n    }\n\n    &:focus {\n        padding: 18.5px 23px;\n        border: 2px solid ", ";\n        color: ", ";\n        background: white;\n    }\n\n    &:is([disabled]) {\n        color: var(--dark-opacity-25);\n    }\n\n"], ["\n    box-sizing: border-box;\n    width: 100%;\n    height: 56px;\n    background: ", ";\n    border-radius: 0.5rem;\n    border: ", ";\n    padding: ", ";\n    color: ", ";\n    ", "\n    font: var(--body-semi-bold-14-17);\n    outline: none;\n    user-select: ", ";\n    pointer-events: ", ";\n    -webkit-appearance: none;\n\n    &::-webkit-outer-spin-button,\n    &::-webkit-inner-spin-button {\n        -webkit-appearance: none;\n        margin: 0;\n    }\n\n    &::placeholder {\n        color: ", ";\n    }\n\n    &:focus {\n        padding: 18.5px 23px;\n        border: 2px solid ", ";\n        color: ", ";\n        background: white;\n    }\n\n    &:is([disabled]) {\n        color: var(--dark-opacity-25);\n    }\n\n"])), function (props) { return props.disabled ? 'var(--dark-opacity-5)' : (props.$hasError ? 'white' : 'var(--dark-opacity-3)'); }, function (props) { return props.$hasError ? '2px solid var(--red)' : '1px solid var(--dark-opacity-10)'; }, function (props) { return props.$hasError ? '18.5px 23px' : '19.5px 24px'; }, function (props) { return props.$hasError ? 'var(--red)' : 'var(--dark)'; }, function (props) { return props.$hasIcon ? 'padding-right: 45px !important;' : ''; }, function (props) { return props.readOnly ? 'none' : 'initial'; }, function (props) { return props.readOnly ? 'none' : 'initial'; }, function (props) { return props.$hasError ? 'var(--red)' : 'var(--dark-opacity-50)'; }, function (props) { return props.$hasError ? 'var(--red)' : 'var(--primary)'; }, function (props) { return props.$hasError ? 'var(--red)' : 'var(--dark)'; });
-exports.DatePickerWrapperStyled = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject([";\n    .react-datepicker-wrapper {\n        display: block;\n    }\n\n    .react-datepicker-popper {\n        transform: none !important;\n        top: 100% !important;\n        width: 100%;\n        z-index: 5;\n\n        .react-datepicker__triangle {\n            display: none !important;\n        }\n\n    }\n    .react-datepicker {\n        font-family: inherit !important;\n        width: 100%;\n        border: none !important;\n        border-radius: 0 0 0.5rem 0.5rem !important;\n        box-shadow: ", ";\n\n        .react-datepicker__day--keyboard-selected, .react-datepicker__month-text--keyboard-selected, .react-datepicker__quarter-text--keyboard-selected, .react-datepicker__year-text--keyboard-selected {\n            background-color: transparent !important;\n            color: inherit !important;\n        }\n\n        .react-datepicker__day-name, .react-datepicker__day, .react-datepicker__time-name {\n            margin: 0 !important;\n            width: 1.5rem !important;\n            height: 1.5rem !important;\n            line-height: 1.5rem !important;\n        }\n\n        .react-datepicker__navigation {\n            position: static;\n            border-radius: 0.5rem;\n            transition: all .2s ease;\n            &:is([disabled]){\n                cursor: not-allowed;\n            }\n            &:not([disabled]):hover {\n                background-color: white;\n                box-shadow: 0 0 16px 0 var(--dark-opacity-10);\n                z-index: 2;\n                cursor: pointer;\n            }\n        }\n\n        .react-datepicker__month-container {\n            float: none !important;\n\n            .react-datepicker__header {\n                background-color: white !important;\n                border: none !important;\n                padding: 0 0 0 0 !important;\n\n                .headerTopContent {\n                    display: flex;\n                    align-items: center;\n                    justify-content: space-between;\n                    padding: ", ";\n\n                    .react-datepicker__navigation {\n                        width: 1.5rem;\n                        height: 1.5rem;\n                    }\n\n                    .leftButtons, .rightButtons {\n                        display: flex;\n                        align-items: center;\n                        justify-content: space-between;\n                        color: var(--dark-opacity-50);\n\n                        svg {\n                            color: var(--dark-opacity-50);\n                        }\n                    }\n                }\n\n                .react-datepicker__current-month {\n                    display: block !important;\n                    font: var(--body-semi-bold-14-17);\n                }\n            }\n\n            .react-datepicker__month {\n                margin: ", ";\n            }\n\n            .react-datepicker__day-names {\n                display: flex;\n                align-items: center;\n                justify-content: space-between;\n                margin: ", ";\n\n                .react-datepicker__day-name {\n                    color: var(--grey-50);\n                    font: var(--body-medium-13-16);\n                }\n            }\n\n            .react-datepicker__week {\n                display: flex;\n                align-items: center;\n                justify-content: space-between;\n\n                + .react-datepicker__week {\n                    margin-top: 0.5rem;\n                }\n\n\n                .react-datepicker__day {\n                    font: var(--caption-bold-12-15);\n                    color: var(--dark);\n                    outline: none !important;\n                    \n                    &:is(.react-datepicker__day--selected), &:not(.react-datepicker__day--disabled):hover {\n                        border-radius: 0.25rem;\n                        background-color: var(--primary-opacity-10) !important;\n                        color: var(--primary) !important;\n                        cursor: pointer;\n                    }\n\n                    &:is(.react-datepicker__day--today) {\n                        color: var(--primary) !important;\n                    }\n\n                    &:is(.react-datepicker__day--outside-month) {\n                        color: var(--grey-50);\n                    }\n                }\n                .react-datepicker__day--disabled, .react-datepicker__month-text--disabled, .react-datepicker__quarter-text--disabled, .react-datepicker__year-text--disabled{\n                    color: var(--grey-50) !important;\n                    background-color: transparent !important;\n                }\n            }\n        }\n    }\n\n    input {\n        &:is(.react-datepicker-ignore-onclickoutside) {\n            border-bottom-left-radius: 0;\n            border-bottom-right-radius: 0;\n        }\n    }\n\n"], [";\n    .react-datepicker-wrapper {\n        display: block;\n    }\n\n    .react-datepicker-popper {\n        transform: none !important;\n        top: 100% !important;\n        width: 100%;\n        z-index: 5;\n\n        .react-datepicker__triangle {\n            display: none !important;\n        }\n\n    }\n    .react-datepicker {\n        font-family: inherit !important;\n        width: 100%;\n        border: none !important;\n        border-radius: 0 0 0.5rem 0.5rem !important;\n        box-shadow: ", ";\n\n        .react-datepicker__day--keyboard-selected, .react-datepicker__month-text--keyboard-selected, .react-datepicker__quarter-text--keyboard-selected, .react-datepicker__year-text--keyboard-selected {\n            background-color: transparent !important;\n            color: inherit !important;\n        }\n\n        .react-datepicker__day-name, .react-datepicker__day, .react-datepicker__time-name {\n            margin: 0 !important;\n            width: 1.5rem !important;\n            height: 1.5rem !important;\n            line-height: 1.5rem !important;\n        }\n\n        .react-datepicker__navigation {\n            position: static;\n            border-radius: 0.5rem;\n            transition: all .2s ease;\n            &:is([disabled]){\n                cursor: not-allowed;\n            }\n            &:not([disabled]):hover {\n                background-color: white;\n                box-shadow: 0 0 16px 0 var(--dark-opacity-10);\n                z-index: 2;\n                cursor: pointer;\n            }\n        }\n\n        .react-datepicker__month-container {\n            float: none !important;\n\n            .react-datepicker__header {\n                background-color: white !important;\n                border: none !important;\n                padding: 0 0 0 0 !important;\n\n                .headerTopContent {\n                    display: flex;\n                    align-items: center;\n                    justify-content: space-between;\n                    padding: ", ";\n\n                    .react-datepicker__navigation {\n                        width: 1.5rem;\n                        height: 1.5rem;\n                    }\n\n                    .leftButtons, .rightButtons {\n                        display: flex;\n                        align-items: center;\n                        justify-content: space-between;\n                        color: var(--dark-opacity-50);\n\n                        svg {\n                            color: var(--dark-opacity-50);\n                        }\n                    }\n                }\n\n                .react-datepicker__current-month {\n                    display: block !important;\n                    font: var(--body-semi-bold-14-17);\n                }\n            }\n\n            .react-datepicker__month {\n                margin: ", ";\n            }\n\n            .react-datepicker__day-names {\n                display: flex;\n                align-items: center;\n                justify-content: space-between;\n                margin: ", ";\n\n                .react-datepicker__day-name {\n                    color: var(--grey-50);\n                    font: var(--body-medium-13-16);\n                }\n            }\n\n            .react-datepicker__week {\n                display: flex;\n                align-items: center;\n                justify-content: space-between;\n\n                + .react-datepicker__week {\n                    margin-top: 0.5rem;\n                }\n\n\n                .react-datepicker__day {\n                    font: var(--caption-bold-12-15);\n                    color: var(--dark);\n                    outline: none !important;\n                    \n                    &:is(.react-datepicker__day--selected), &:not(.react-datepicker__day--disabled):hover {\n                        border-radius: 0.25rem;\n                        background-color: var(--primary-opacity-10) !important;\n                        color: var(--primary) !important;\n                        cursor: pointer;\n                    }\n\n                    &:is(.react-datepicker__day--today) {\n                        color: var(--primary) !important;\n                    }\n\n                    &:is(.react-datepicker__day--outside-month) {\n                        color: var(--grey-50);\n                    }\n                }\n                .react-datepicker__day--disabled, .react-datepicker__month-text--disabled, .react-datepicker__quarter-text--disabled, .react-datepicker__year-text--disabled{\n                    color: var(--grey-50) !important;\n                    background-color: transparent !important;\n                }\n            }\n        }\n    }\n\n    input {\n        &:is(.react-datepicker-ignore-onclickoutside) {\n            border-bottom-left-radius: 0;\n            border-bottom-right-radius: 0;\n        }\n    }\n\n"])), function (props) { return props.$inline ? "none" : "0 6px 30px 0 var(--box-shadow-color)"; }, function (props) { return props.$inline ? "0 0 1rem 0" : "1rem 1.5rem"; }, function (props) { return props.$inline ? "0 !important" : "0 1.5rem 1rem 1.5rem !important"; }, function (props) { return props.$inline ? "0.5rem 0 !important" : "0.5rem 1.5rem !important"; });
+exports.DatePickerWrapperStyled = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject([";\n    .react-datepicker-wrapper {\n        display: block;\n    }\n\n    .react-datepicker-popper {\n        transform: none !important;\n        top: 100% !important;\n        width: 100%;\n        z-index: 5;\n\n        .react-datepicker__triangle {\n            display: none !important;\n        }\n\n    }\n    .react-datepicker {\n        font-family: inherit !important;\n        width: 100%;\n        border: none !important;\n        border-radius: 0 0 0.5rem 0.5rem !important;\n        box-shadow: ", ";\n\n        .react-datepicker__day--keyboard-selected, .react-datepicker__month-text--keyboard-selected, .react-datepicker__quarter-text--keyboard-selected, .react-datepicker__year-text--keyboard-selected {\n            background-color: transparent !important;\n            color: inherit !important;\n        }\n\n        .react-datepicker__day-name, .react-datepicker__day, .react-datepicker__time-name {\n            margin: 0 !important;\n            width: 1.5rem !important;\n            height: 1.5rem !important;\n            line-height: 1.5rem !important;\n        }\n\n        .react-datepicker__navigation {\n            position: static;\n            border-radius: 0.5rem;\n            transition: all .2s ease;\n            &:is([disabled]){\n                cursor: not-allowed;\n            }\n            &:not([disabled]):hover {\n                background-color: white;\n                box-shadow: 0 0 16px 0 var(--dark-opacity-10);\n                z-index: 2;\n                cursor: pointer;\n            }\n        }\n\n        .react-datepicker__month-container {\n            float: none !important;\n\n            .react-datepicker__header {\n                background-color: white !important;\n                border: none !important;\n                padding: 0 0 0 0 !important;\n\n                .headerTopContent {\n                    display: flex;\n                    align-items: center;\n                    justify-content: space-between;\n                    padding: ", ";\n\n                    .react-datepicker__navigation {\n                        width: 1.5rem;\n                        height: 1.5rem;\n                    }\n\n                    .leftButtons, .rightButtons {\n                        display: flex;\n                        align-items: center;\n                        justify-content: space-between;\n                        color: var(--dark-opacity-50);\n\n                        svg {\n                            color: var(--dark-opacity-50);\n                        }\n                    }\n                }\n\n                .react-datepicker__current-month {\n                    display: block !important;\n                    font: var(--body-semi-bold-14-17);\n                }\n            }\n\n            .react-datepicker__month {\n                margin: ", ";\n            }\n\n            .react-datepicker__day-names {\n                display: flex;\n                align-items: center;\n                justify-content: space-between;\n                margin: ", ";\n\n                .react-datepicker__day-name {\n                    color: var(--grey-50);\n                    font: var(--body-medium-13-16);\n                }\n            }\n\n            .react-datepicker__week {\n                display: flex;\n                align-items: center;\n                justify-content: space-between;\n\n                + .react-datepicker__week {\n                    margin-top: 0.5rem;\n                }\n\n\n                .react-datepicker__day {\n                    font: var(--caption-bold-12-15);\n                    color: var(--dark);\n                    outline: none !important;\n                    \n                    &:is(.react-datepicker__day--selected), &:not(.react-datepicker__day--disabled):hover {\n                        border-radius: 0.25rem;\n                        background-color: var(--primary-opacity-10) !important;\n                        color: var(--primary) !important;\n                        cursor: pointer;\n                    }\n\n                    &:is(.react-datepicker__day--today):not(.react-datepicker__day--disabled) {\n                        color: var(--primary) !important;\n                    }\n\n                    &:is(.react-datepicker__day--outside-month) {\n                        color: var(--grey-50);\n                    }\n                }\n                .react-datepicker__day--disabled, .react-datepicker__month-text--disabled, .react-datepicker__quarter-text--disabled, .react-datepicker__year-text--disabled{\n                    color: var(--grey-50) !important;\n                    background-color: transparent !important;\n                    text-decoration: line-through;\n                }\n            }\n        }\n    }\n\n    input {\n        &:is(.react-datepicker-ignore-onclickoutside) {\n            border-bottom-left-radius: 0;\n            border-bottom-right-radius: 0;\n        }\n    }\n\n"], [";\n    .react-datepicker-wrapper {\n        display: block;\n    }\n\n    .react-datepicker-popper {\n        transform: none !important;\n        top: 100% !important;\n        width: 100%;\n        z-index: 5;\n\n        .react-datepicker__triangle {\n            display: none !important;\n        }\n\n    }\n    .react-datepicker {\n        font-family: inherit !important;\n        width: 100%;\n        border: none !important;\n        border-radius: 0 0 0.5rem 0.5rem !important;\n        box-shadow: ", ";\n\n        .react-datepicker__day--keyboard-selected, .react-datepicker__month-text--keyboard-selected, .react-datepicker__quarter-text--keyboard-selected, .react-datepicker__year-text--keyboard-selected {\n            background-color: transparent !important;\n            color: inherit !important;\n        }\n\n        .react-datepicker__day-name, .react-datepicker__day, .react-datepicker__time-name {\n            margin: 0 !important;\n            width: 1.5rem !important;\n            height: 1.5rem !important;\n            line-height: 1.5rem !important;\n        }\n\n        .react-datepicker__navigation {\n            position: static;\n            border-radius: 0.5rem;\n            transition: all .2s ease;\n            &:is([disabled]){\n                cursor: not-allowed;\n            }\n            &:not([disabled]):hover {\n                background-color: white;\n                box-shadow: 0 0 16px 0 var(--dark-opacity-10);\n                z-index: 2;\n                cursor: pointer;\n            }\n        }\n\n        .react-datepicker__month-container {\n            float: none !important;\n\n            .react-datepicker__header {\n                background-color: white !important;\n                border: none !important;\n                padding: 0 0 0 0 !important;\n\n                .headerTopContent {\n                    display: flex;\n                    align-items: center;\n                    justify-content: space-between;\n                    padding: ", ";\n\n                    .react-datepicker__navigation {\n                        width: 1.5rem;\n                        height: 1.5rem;\n                    }\n\n                    .leftButtons, .rightButtons {\n                        display: flex;\n                        align-items: center;\n                        justify-content: space-between;\n                        color: var(--dark-opacity-50);\n\n                        svg {\n                            color: var(--dark-opacity-50);\n                        }\n                    }\n                }\n\n                .react-datepicker__current-month {\n                    display: block !important;\n                    font: var(--body-semi-bold-14-17);\n                }\n            }\n\n            .react-datepicker__month {\n                margin: ", ";\n            }\n\n            .react-datepicker__day-names {\n                display: flex;\n                align-items: center;\n                justify-content: space-between;\n                margin: ", ";\n\n                .react-datepicker__day-name {\n                    color: var(--grey-50);\n                    font: var(--body-medium-13-16);\n                }\n            }\n\n            .react-datepicker__week {\n                display: flex;\n                align-items: center;\n                justify-content: space-between;\n\n                + .react-datepicker__week {\n                    margin-top: 0.5rem;\n                }\n\n\n                .react-datepicker__day {\n                    font: var(--caption-bold-12-15);\n                    color: var(--dark);\n                    outline: none !important;\n                    \n                    &:is(.react-datepicker__day--selected), &:not(.react-datepicker__day--disabled):hover {\n                        border-radius: 0.25rem;\n                        background-color: var(--primary-opacity-10) !important;\n                        color: var(--primary) !important;\n                        cursor: pointer;\n                    }\n\n                    &:is(.react-datepicker__day--today):not(.react-datepicker__day--disabled) {\n                        color: var(--primary) !important;\n                    }\n\n                    &:is(.react-datepicker__day--outside-month) {\n                        color: var(--grey-50);\n                    }\n                }\n                .react-datepicker__day--disabled, .react-datepicker__month-text--disabled, .react-datepicker__quarter-text--disabled, .react-datepicker__year-text--disabled{\n                    color: var(--grey-50) !important;\n                    background-color: transparent !important;\n                    text-decoration: line-through;\n                }\n            }\n        }\n    }\n\n    input {\n        &:is(.react-datepicker-ignore-onclickoutside) {\n            border-bottom-left-radius: 0;\n            border-bottom-right-radius: 0;\n        }\n    }\n\n"])), function (props) { return props.$inline ? "none" : "0 6px 30px 0 var(--box-shadow-color)"; }, function (props) { return props.$inline ? "0 0 1rem 0" : "1rem 1.5rem"; }, function (props) { return props.$inline ? "0 !important" : "0 1.5rem 1rem 1.5rem !important"; }, function (props) { return props.$inline ? "0.5rem 0 !important" : "0.5rem 1.5rem !important"; });
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/dist/components/Input/props.d.ts

@@ -27,6 +27,7 @@ export interface Input {
     inline?: boolean;
     minDate?: Date;
     maxDate?: Date;
+    filterDate?: any;
 }
 export interface InputStyledProps {
     disabled?: boolean;

package/dist/components/Input/props.js

@@ -28,4 +28,5 @@ exports.InputDefault = {
     inline: false,
     minDate: null,
     maxDate: null,
+    filterDate: null,
 };

package/dist/components/Modal/Modal.d.ts

@@ -1,4 +1,3 @@
-import React from "react";
 import { ModalProps } from "./props";
-declare const Modal: ({ size, showCloseIcon, showBackIcon, hasCloseOnOutsideClick, onClose, onBack, show, showDivider, title, children, modalFooter, showPrimaryButton, showSecondaryButton, onPrimaryAction, onSecondaryAction, buttonsAlignment, buttonsAlignmentOnMobile, primaryButtonText, secondaryButtonText, showHeaderBorder, showFooterBorder, autoHeight, titleAlignment, titleDescription, isPrimaryButtonLoading, primaryButtonIcon, secondaryButtonIcon, isSecondaryButtonLoading, isPrimaryButtonDisabled, isSecondaryButtonDisabled, primaryButtonWidth, secondaryButtonWidth, customContent, id, ...other }: ModalProps) => React.ReactPortal;
+declare const Modal: ({ size, showCloseIcon, showBackIcon, hasCloseOnOutsideClick, onClose, onBack, show, showDivider, title, children, modalFooter, showPrimaryButton, showSecondaryButton, onPrimaryAction, onSecondaryAction, buttonsAlignment, buttonsAlignmentOnMobile, primaryButtonText, secondaryButtonText, showHeaderBorder, showFooterBorder, autoHeight, titleAlignment, titleDescription, isPrimaryButtonLoading, primaryButtonIcon, secondaryButtonIcon, isSecondaryButtonLoading, isPrimaryButtonDisabled, isSecondaryButtonDisabled, primaryButtonWidth, secondaryButtonWidth, customContent, id, renderInDOM, ...other }: ModalProps) => import("react/jsx-runtime").JSX.Element;
 export default Modal;

package/dist/components/Modal/Modal.js

@@ -36,10 +36,10 @@ var Divider_1 = __importDefault(require("../Divider"));
 var useOnClickOutside_1 = __importDefault(require("../../hooks/useOnClickOutside"));
 var react_i18next_1 = require("react-i18next");
 var Modal = function (_a) {
-    var _b = _a.size, size = _b === void 0 ? props_1.ModalDefault.size : _b, _c = _a.showCloseIcon, showCloseIcon = _c === void 0 ? props_1.ModalDefault.showCloseIcon : _c, _d = _a.showBackIcon, showBackIcon = _d === void 0 ? props_1.ModalDefault.showBackIcon : _d, _e = _a.hasCloseOnOutsideClick, hasCloseOnOutsideClick = _e === void 0 ? props_1.ModalDefault.hasCloseOnOutsideClick : _e, _f = _a.onClose, onClose = _f === void 0 ? props_1.ModalDefault.onClose : _f, _g = _a.onBack, onBack = _g === void 0 ? props_1.ModalDefault.onBack : _g, _h = _a.show, show = _h === void 0 ? props_1.ModalDefault.show : _h, _j = _a.showDivider, showDivider = _j === void 0 ? props_1.ModalDefault.showDivider : _j, _k = _a.title, title = _k === void 0 ? props_1.ModalDefault.title : _k, _l = _a.children, children = _l === void 0 ? props_1.ModalDefault.children : _l, _m = _a.modalFooter, modalFooter = _m === void 0 ? props_1.ModalDefault.modalFooter : _m, _o = _a.showPrimaryButton, showPrimaryButton = _o === void 0 ? props_1.ModalDefault.showPrimaryButton : _o, _p = _a.showSecondaryButton, showSecondaryButton = _p === void 0 ? props_1.ModalDefault.showSecondaryButton : _p, _q = _a.onPrimaryAction, onPrimaryAction = _q === void 0 ? props_1.ModalDefault.onPrimaryAction : _q, _r = _a.onSecondaryAction, onSecondaryAction = _r === void 0 ? props_1.ModalDefault.onSecondaryAction : _r, _s = _a.buttonsAlignment, buttonsAlignment = _s === void 0 ? props_1.ModalDefault.buttonsAlignment : _s, _t = _a.buttonsAlignmentOnMobile, buttonsAlignmentOnMobile = _t === void 0 ? props_1.ModalDefault.buttonsAlignmentOnMobile : _t, _u = _a.primaryButtonText, primaryButtonText = _u === void 0 ? props_1.ModalDefault.primaryButtonText : _u, _v = _a.secondaryButtonText, secondaryButtonText = _v === void 0 ? props_1.ModalDefault.secondaryButtonText : _v, _w = _a.showHeaderBorder, showHeaderBorder = _w === void 0 ? props_1.ModalDefault.showHeaderBorder : _w, _x = _a.showFooterBorder, showFooterBorder = _x === void 0 ? props_1.ModalDefault.showFooterBorder : _x, _y = _a.autoHeight, autoHeight = _y === void 0 ? props_1.ModalDefault.autoHeight : _y, _z = _a.titleAlignment, titleAlignment = _z === void 0 ? props_1.ModalDefault.titleAlignment : _z, _0 = _a.titleDescription, titleDescription = _0 === void 0 ? props_1.ModalDefault.titleDescription : _0, _1 = _a.isPrimaryButtonLoading, isPrimaryButtonLoading = _1 === void 0 ? props_1.ModalDefault.isPrimaryButtonLoading : _1, _2 = _a.primaryButtonIcon, primaryButtonIcon = _2 === void 0 ? props_1.ModalDefault.primaryButtonIcon : _2, _3 = _a.secondaryButtonIcon, secondaryButtonIcon = _3 === void 0 ? props_1.ModalDefault.secondaryButtonIcon : _3, _4 = _a.isSecondaryButtonLoading, isSecondaryButtonLoading = _4 === void 0 ? props_1.ModalDefault.isSecondaryButtonLoading : _4, _5 = _a.isPrimaryButtonDisabled, isPrimaryButtonDisabled = _5 === void 0 ? props_1.ModalDefault.isPrimaryButtonDisabled : _5, _6 = _a.isSecondaryButtonDisabled, isSecondaryButtonDisabled = _6 === void 0 ? props_1.ModalDefault.isSecondaryButtonDisabled : _6, _7 = _a.primaryButtonWidth, primaryButtonWidth = _7 === void 0 ? props_1.ModalDefault.primaryButtonWidth : _7, _8 = _a.secondaryButtonWidth, secondaryButtonWidth = _8 === void 0 ? props_1.ModalDefault.secondaryButtonWidth : _8, _9 = _a.customContent, customContent = _9 === void 0 ? props_1.ModalDefault.customContent : _9, _10 = _a.id, id = _10 === void 0 ? props_1.ModalDefault.id : _10, other = __rest(_a, ["size", "showCloseIcon", "showBackIcon", "hasCloseOnOutsideClick", "onClose", "onBack", "show", "showDivider", "title", "children", "modalFooter", "showPrimaryButton", "showSecondaryButton", "onPrimaryAction", "onSecondaryAction", "buttonsAlignment", "buttonsAlignmentOnMobile", "primaryButtonText", "secondaryButtonText", "showHeaderBorder", "showFooterBorder", "autoHeight", "titleAlignment", "titleDescription", "isPrimaryButtonLoading", "primaryButtonIcon", "secondaryButtonIcon", "isSecondaryButtonLoading", "isPrimaryButtonDisabled", "isSecondaryButtonDisabled", "primaryButtonWidth", "secondaryButtonWidth", "customContent", "id"]);
+    var _b = _a.size, size = _b === void 0 ? props_1.ModalDefault.size : _b, _c = _a.showCloseIcon, showCloseIcon = _c === void 0 ? props_1.ModalDefault.showCloseIcon : _c, _d = _a.showBackIcon, showBackIcon = _d === void 0 ? props_1.ModalDefault.showBackIcon : _d, _e = _a.hasCloseOnOutsideClick, hasCloseOnOutsideClick = _e === void 0 ? props_1.ModalDefault.hasCloseOnOutsideClick : _e, _f = _a.onClose, onClose = _f === void 0 ? props_1.ModalDefault.onClose : _f, _g = _a.onBack, onBack = _g === void 0 ? props_1.ModalDefault.onBack : _g, _h = _a.show, show = _h === void 0 ? props_1.ModalDefault.show : _h, _j = _a.showDivider, showDivider = _j === void 0 ? props_1.ModalDefault.showDivider : _j, _k = _a.title, title = _k === void 0 ? props_1.ModalDefault.title : _k, _l = _a.children, children = _l === void 0 ? props_1.ModalDefault.children : _l, _m = _a.modalFooter, modalFooter = _m === void 0 ? props_1.ModalDefault.modalFooter : _m, _o = _a.showPrimaryButton, showPrimaryButton = _o === void 0 ? props_1.ModalDefault.showPrimaryButton : _o, _p = _a.showSecondaryButton, showSecondaryButton = _p === void 0 ? props_1.ModalDefault.showSecondaryButton : _p, _q = _a.onPrimaryAction, onPrimaryAction = _q === void 0 ? props_1.ModalDefault.onPrimaryAction : _q, _r = _a.onSecondaryAction, onSecondaryAction = _r === void 0 ? props_1.ModalDefault.onSecondaryAction : _r, _s = _a.buttonsAlignment, buttonsAlignment = _s === void 0 ? props_1.ModalDefault.buttonsAlignment : _s, _t = _a.buttonsAlignmentOnMobile, buttonsAlignmentOnMobile = _t === void 0 ? props_1.ModalDefault.buttonsAlignmentOnMobile : _t, _u = _a.primaryButtonText, primaryButtonText = _u === void 0 ? props_1.ModalDefault.primaryButtonText : _u, _v = _a.secondaryButtonText, secondaryButtonText = _v === void 0 ? props_1.ModalDefault.secondaryButtonText : _v, _w = _a.showHeaderBorder, showHeaderBorder = _w === void 0 ? props_1.ModalDefault.showHeaderBorder : _w, _x = _a.showFooterBorder, showFooterBorder = _x === void 0 ? props_1.ModalDefault.showFooterBorder : _x, _y = _a.autoHeight, autoHeight = _y === void 0 ? props_1.ModalDefault.autoHeight : _y, _z = _a.titleAlignment, titleAlignment = _z === void 0 ? props_1.ModalDefault.titleAlignment : _z, _0 = _a.titleDescription, titleDescription = _0 === void 0 ? props_1.ModalDefault.titleDescription : _0, _1 = _a.isPrimaryButtonLoading, isPrimaryButtonLoading = _1 === void 0 ? props_1.ModalDefault.isPrimaryButtonLoading : _1, _2 = _a.primaryButtonIcon, primaryButtonIcon = _2 === void 0 ? props_1.ModalDefault.primaryButtonIcon : _2, _3 = _a.secondaryButtonIcon, secondaryButtonIcon = _3 === void 0 ? props_1.ModalDefault.secondaryButtonIcon : _3, _4 = _a.isSecondaryButtonLoading, isSecondaryButtonLoading = _4 === void 0 ? props_1.ModalDefault.isSecondaryButtonLoading : _4, _5 = _a.isPrimaryButtonDisabled, isPrimaryButtonDisabled = _5 === void 0 ? props_1.ModalDefault.isPrimaryButtonDisabled : _5, _6 = _a.isSecondaryButtonDisabled, isSecondaryButtonDisabled = _6 === void 0 ? props_1.ModalDefault.isSecondaryButtonDisabled : _6, _7 = _a.primaryButtonWidth, primaryButtonWidth = _7 === void 0 ? props_1.ModalDefault.primaryButtonWidth : _7, _8 = _a.secondaryButtonWidth, secondaryButtonWidth = _8 === void 0 ? props_1.ModalDefault.secondaryButtonWidth : _8, _9 = _a.customContent, customContent = _9 === void 0 ? props_1.ModalDefault.customContent : _9, _10 = _a.id, id = _10 === void 0 ? props_1.ModalDefault.id : _10, _11 = _a.renderInDOM, renderInDOM = _11 === void 0 ? props_1.ModalDefault.renderInDOM : _11, other = __rest(_a, ["size", "showCloseIcon", "showBackIcon", "hasCloseOnOutsideClick", "onClose", "onBack", "show", "showDivider", "title", "children", "modalFooter", "showPrimaryButton", "showSecondaryButton", "onPrimaryAction", "onSecondaryAction", "buttonsAlignment", "buttonsAlignmentOnMobile", "primaryButtonText", "secondaryButtonText", "showHeaderBorder", "showFooterBorder", "autoHeight", "titleAlignment", "titleDescription", "isPrimaryButtonLoading", "primaryButtonIcon", "secondaryButtonIcon", "isSecondaryButtonLoading", "isPrimaryButtonDisabled", "isSecondaryButtonDisabled", "primaryButtonWidth", "secondaryButtonWidth", "customContent", "id", "renderInDOM"]);
     var uniqueId = (0, react_1.useId)();
     var t = (0, react_i18next_1.useTranslation)().t;
-    var _11 = (0, react_1.useState)(show), showModal = _11[0], setShowModal = _11[1];
+    var _12 = (0, react_1.useState)(show), showModal = _12[0], setShowModal = _12[1];
     (0, react_1.useEffect)(function () {
         setShowModal(show);
         if (!show) {
@@ -61,7 +61,11 @@ var Modal = function (_a) {
     };
     var modalRef = (0, react_1.useRef)();
     (0, useOnClickOutside_1.default)(modalRef, onClose, hasCloseOnOutsideClick);
+    var modalContent = ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(Modal_styled_1.OverlayStyled, __assign({ id: "modalBackdrop_".concat(id), "$show": renderInDOM ? showModal : true }, { children: (0, jsx_runtime_1.jsxs)(Modal_styled_1.ModalStyled, __assign({ ref: modalRef, "$size": size, "$autoHeight": autoHeight, "$showHeaderBorder": showHeaderBorder, "$titleAlignment": titleAlignment, "$customContent": customContent, "$showFooterBorder": showFooterBorder, "$buttonsAlignment": buttonsAlignment, "$showSecondaryButton": showSecondaryButton, "$showDivider": showDivider, "$buttonsAlignmentOnMobile": buttonsAlignmentOnMobile, id: id }, other, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "header" }, { children: [showBackIcon ? ((0, jsx_runtime_1.jsx)("div", __assign({ onClick: onBack, className: "icon" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowLeftBig" }) }))) : (titleAlignment === "center" && (0, jsx_runtime_1.jsx)("div", { className: "empty" })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "title" }, { children: [title && ((0, jsx_runtime_1.jsx)("h5", { children: title })), titleDescription && (0, jsx_runtime_1.jsx)("p", { children: titleDescription })] })), showCloseIcon ? ((0, jsx_runtime_1.jsx)("div", __assign({ onClick: handleClose, className: "icon" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Closebig" }) }))) : ((0, jsx_runtime_1.jsx)("div", { className: "empty" }))] })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "content" }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: "contentInner" }, { children: children })) })), modalFooter ? modalFooter : (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (showPrimaryButton || showSecondaryButton) && (0, jsx_runtime_1.jsxs)("div", __assign({ className: "buttons" }, { children: [showPrimaryButton && ((0, jsx_runtime_1.jsx)(Button_1.default, __assign({ onClick: onPrimaryAction, size: "big", variant: "primary", isLoading: isPrimaryButtonLoading, disabled: isPrimaryButtonDisabled, width: primaryButtonWidth, icon: primaryButtonIcon }, { children: primaryButtonText }))), showSecondaryButton && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [buttonsAlignment === "vertical" && showDivider && ((0, jsx_runtime_1.jsx)(Divider_1.default, { text: t("or") })), (0, jsx_runtime_1.jsx)(Button_1.default, __assign({ onClick: onSecondaryAction, size: "big", variant: "inverted", isLoading: isSecondaryButtonLoading, disabled: isSecondaryButtonDisabled, width: secondaryButtonWidth, icon: secondaryButtonIcon }, { children: secondaryButtonText }))] }))] })) })] })) })) }));
+    if (renderInDOM) {
+        return modalContent;
+    }
     return (showModal &&
-        react_dom_1.default.createPortal((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(Modal_styled_1.OverlayStyled, __assign({ id: "modalBackdrop_".concat(id) }, { children: (0, jsx_runtime_1.jsxs)(Modal_styled_1.ModalStyled, __assign({ ref: modalRef, "$size": size, "$autoHeight": autoHeight, "$showHeaderBorder": showHeaderBorder, "$titleAlignment": titleAlignment, "$customContent": customContent, "$showFooterBorder": showFooterBorder, "$buttonsAlignment": buttonsAlignment, "$showSecondaryButton": showSecondaryButton, "$showDivider": showDivider, "$buttonsAlignmentOnMobile": buttonsAlignmentOnMobile, id: id }, other, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "header" }, { children: [showBackIcon ? ((0, jsx_runtime_1.jsx)("div", __assign({ onClick: onBack, className: "icon" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowLeftBig" }) }))) : (titleAlignment === "center" && (0, jsx_runtime_1.jsx)("div", { className: "empty" })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "title" }, { children: [title && ((0, jsx_runtime_1.jsx)("h5", { children: title })), titleDescription && (0, jsx_runtime_1.jsx)("p", { children: titleDescription })] })), showCloseIcon ? ((0, jsx_runtime_1.jsx)("div", __assign({ onClick: handleClose, className: "icon" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Closebig" }) }))) : ((0, jsx_runtime_1.jsx)("div", { className: "empty" }))] })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "content" }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: "contentInner" }, { children: children })) })), modalFooter ? modalFooter : (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (showPrimaryButton || showSecondaryButton) && (0, jsx_runtime_1.jsxs)("div", __assign({ className: "buttons" }, { children: [showPrimaryButton && ((0, jsx_runtime_1.jsx)(Button_1.default, __assign({ onClick: onPrimaryAction, size: "big", variant: "primary", isLoading: isPrimaryButtonLoading, disabled: isPrimaryButtonDisabled, width: primaryButtonWidth, icon: primaryButtonIcon }, { children: primaryButtonText }))), showSecondaryButton && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [buttonsAlignment === "vertical" && showDivider && ((0, jsx_runtime_1.jsx)(Divider_1.default, { text: t("or") })), (0, jsx_runtime_1.jsx)(Button_1.default, __assign({ onClick: onSecondaryAction, size: "big", variant: "inverted", isLoading: isSecondaryButtonLoading, disabled: isSecondaryButtonDisabled, width: secondaryButtonWidth, icon: secondaryButtonIcon }, { children: secondaryButtonText }))] }))] })) })] })) })) }), document.body));
+        react_dom_1.default.createPortal(modalContent, document.body));
 };
 exports.default = Modal;

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

@@ -1,4 +1,6 @@
 /// <reference types="react" />
 import { ModalStyledProps } from "./props";
 export declare const ModalStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ModalStyledProps>> & string;
-export declare const OverlayStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const OverlayStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $show?: boolean;
+}>> & string;

package/dist/components/Modal/Modal.styled.js

@@ -35,5 +35,5 @@ exports.ModalStyled = styled_components_1.default.div(templateObject_1 || (templ
             return "";
     }
 }, devices_1.devices.md, function (props) { return props.$buttonsAlignmentOnMobile === 'vertical' ? "\n        flex-direction : column;\n        button {\n          margin : 0 !important;\n          + button {\n            margin-top:1rem !important;\n          }\n        }\n    " : " "; });
-exports.OverlayStyled = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: fixed;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: #a3a5ad40;\n  overflow: auto;\n  left: 0;\n  top: 0;\n  z-index: 999999;\n"], ["\n  position: fixed;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: #a3a5ad40;\n  overflow: auto;\n  left: 0;\n  top: 0;\n  z-index: 999999;\n"])));
+exports.OverlayStyled = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: fixed;\n  width: 100%;\n  height: 100%;\n  display: ", ";\n  align-items: center;\n  justify-content: center;\n  background-color: #a3a5ad40;\n  overflow: auto;\n  left: 0;\n  top: 0;\n  z-index: 999999;\n"], ["\n  position: fixed;\n  width: 100%;\n  height: 100%;\n  display: ", ";\n  align-items: center;\n  justify-content: center;\n  background-color: #a3a5ad40;\n  overflow: auto;\n  left: 0;\n  top: 0;\n  z-index: 999999;\n"])), function (props) { return props.$show ? 'flex' : 'none'; });
 var templateObject_1, templateObject_2;

package/dist/components/Modal/props.d.ts

@@ -42,6 +42,7 @@ export interface Modal {
     secondaryButtonWidth?: string;
     customContent?: boolean;
     id?: string;
+    renderInDOM?: boolean;
 }
 export type ModalStyledProps = {
     $size: SIZES;

package/dist/components/Modal/props.js

@@ -41,4 +41,5 @@ exports.ModalDefault = {
     secondaryButtonWidth: null,
     customContent: false,
     id: null,
+    renderInDOM: false,
 };

package/dist/components/Modal/stories/Modal.stories.d.ts

@@ -1,7 +1,6 @@
-import React from 'react';
 declare const _default: {
     title: string;
-    component: ({ size, showCloseIcon, showBackIcon, hasCloseOnOutsideClick, onClose, onBack, show, showDivider, title, children, modalFooter, showPrimaryButton, showSecondaryButton, onPrimaryAction, onSecondaryAction, buttonsAlignment, buttonsAlignmentOnMobile, primaryButtonText, secondaryButtonText, showHeaderBorder, showFooterBorder, autoHeight, titleAlignment, titleDescription, isPrimaryButtonLoading, primaryButtonIcon, secondaryButtonIcon, isSecondaryButtonLoading, isPrimaryButtonDisabled, isSecondaryButtonDisabled, primaryButtonWidth, secondaryButtonWidth, customContent, id, ...other }: import("../props").Modal) => React.ReactPortal;
+    component: ({ size, showCloseIcon, showBackIcon, hasCloseOnOutsideClick, onClose, onBack, show, showDivider, title, children, modalFooter, showPrimaryButton, showSecondaryButton, onPrimaryAction, onSecondaryAction, buttonsAlignment, buttonsAlignmentOnMobile, primaryButtonText, secondaryButtonText, showHeaderBorder, showFooterBorder, autoHeight, titleAlignment, titleDescription, isPrimaryButtonLoading, primaryButtonIcon, secondaryButtonIcon, isSecondaryButtonLoading, isPrimaryButtonDisabled, isSecondaryButtonDisabled, primaryButtonWidth, secondaryButtonWidth, customContent, id, renderInDOM, ...other }: import("../props").Modal) => import("react/jsx-runtime").JSX.Element;
     tags: string[];
     argTypes: {
         showDivider: {

package/dist/components/ProductCardCheckbox/ProductCardCheckbox.d.ts

@@ -1,3 +1,3 @@
 import { ProductCardCheckboxProps } from "./props";
-declare const ProductCardCheckbox: ({ hasCheckbox, title, content, checkboxId, size, productCardOnChange, disabled, value, name, isContentOffset, checked, image, hasBadge, badgeText, badgeVariant, infoText, infoTitle, valid, }: ProductCardCheckboxProps) => import("react/jsx-runtime").JSX.Element;
+declare const ProductCardCheckbox: ({ hasCheckbox, title, content, checkboxId, size, productCardOnChange, disabled, value, name, isContentOffset, checked, image, hasBadge, badgeText, badgeVariant, infoText, infoTitle, popupWidth, valid, }: ProductCardCheckboxProps) => import("react/jsx-runtime").JSX.Element;
 export default ProductCardCheckbox;

package/dist/components/ProductCardCheckbox/ProductCardCheckbox.js

@@ -22,7 +22,7 @@ var Checkbox_1 = __importDefault(require("../Checkbox"));
 var Badges_1 = __importDefault(require("../Badges"));
 var Tooltip_1 = __importDefault(require("../Tooltip"));
 var ProductCardCheckbox = function (_a) {
-    var _b = _a.hasCheckbox, hasCheckbox = _b === void 0 ? props_1.ProductCardCheckboxDefault.hasCheckbox : _b, _c = _a.title, title = _c === void 0 ? props_1.ProductCardCheckboxDefault.title : _c, _d = _a.content, content = _d === void 0 ? props_1.ProductCardCheckboxDefault.content : _d, _e = _a.checkboxId, checkboxId = _e === void 0 ? props_1.ProductCardCheckboxDefault.checkboxId : _e, _f = _a.size, size = _f === void 0 ? props_1.ProductCardCheckboxDefault.size : _f, _g = _a.productCardOnChange, productCardOnChange = _g === void 0 ? props_1.ProductCardCheckboxDefault.productCardOnChange : _g, _h = _a.disabled, disabled = _h === void 0 ? props_1.ProductCardCheckboxDefault.disabled : _h, _j = _a.value, value = _j === void 0 ? props_1.ProductCardCheckboxDefault.value : _j, _k = _a.name, name = _k === void 0 ? props_1.ProductCardCheckboxDefault.name : _k, _l = _a.isContentOffset, isContentOffset = _l === void 0 ? props_1.ProductCardCheckboxDefault.isContentOffset : _l, _m = _a.checked, checked = _m === void 0 ? props_1.ProductCardCheckboxDefault.checked : _m, _o = _a.image, image = _o === void 0 ? props_1.ProductCardCheckboxDefault.image : _o, _p = _a.hasBadge, hasBadge = _p === void 0 ? props_1.ProductCardCheckboxDefault.hasBadge : _p, _q = _a.badgeText, badgeText = _q === void 0 ? props_1.ProductCardCheckboxDefault.badgeText : _q, _r = _a.badgeVariant, badgeVariant = _r === void 0 ? props_1.ProductCardCheckboxDefault.badgeVariant : _r, _s = _a.infoText, infoText = _s === void 0 ? props_1.ProductCardCheckboxDefault.infoText : _s, _t = _a.infoTitle, infoTitle = _t === void 0 ? props_1.ProductCardCheckboxDefault.infoTitle : _t, valid = _a.valid;
-    return ((0, jsx_runtime_1.jsx)(ProductCardCheckbox_styled_1.ProductCardCheckboxStyled, __assign({ htmlFor: checkboxId, disabled: disabled, "$isContentOffset": isContentOffset, "$size": size, "$hasBadge": hasBadge }, { children: (0, jsx_runtime_1.jsxs)("div", __assign({ className: "productCardInner" }, { children: [hasBadge && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "badgeWrapper" }, { children: (0, jsx_runtime_1.jsx)(Badges_1.default, { title: badgeText, layout: "text", variant: badgeVariant }) }))), (0, jsx_runtime_1.jsx)("div", __assign({ className: (0, classnames_1.default)({ "hidden": !hasCheckbox }, "productCardCheckboxContent") }, { children: (0, jsx_runtime_1.jsx)(Checkbox_1.default, { id: checkboxId, size: size === "large" ? "medium" : "small", label: "", onChange: productCardOnChange, value: value, checked: checked, name: name, disabled: disabled, valid: valid }) })), image && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "productCardImg" }, { children: image }))), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "productCardText" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "productCardTitle" }, { children: title })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "tooltipWrapper" }, { children: (infoText || infoTitle) && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "inputIcon hasNoBg" }, { children: (0, jsx_runtime_1.jsx)(Tooltip_1.default, __assign({ popupSize: "small", position: "topRight", popupWidth: "302px", popupRight: "-23px", iconWidth: "24px", iconHeight: "24px", title: infoTitle }, { children: (0, jsx_runtime_1.jsx)("div", { className: "popupText", dangerouslySetInnerHTML: { __html: infoText } }) })) }))) }))] })), content && ((0, jsx_runtime_1.jsxs)("label", __assign({ htmlFor: "notSelect_".concat(checkboxId), className: "productCardContent" }, { children: [(0, jsx_runtime_1.jsx)("input", { id: "notSelect_".concat(checkboxId), style: { display: "none" } }), content] })))] })) })));
+    var _b = _a.hasCheckbox, hasCheckbox = _b === void 0 ? props_1.ProductCardCheckboxDefault.hasCheckbox : _b, _c = _a.title, title = _c === void 0 ? props_1.ProductCardCheckboxDefault.title : _c, _d = _a.content, content = _d === void 0 ? props_1.ProductCardCheckboxDefault.content : _d, _e = _a.checkboxId, checkboxId = _e === void 0 ? props_1.ProductCardCheckboxDefault.checkboxId : _e, _f = _a.size, size = _f === void 0 ? props_1.ProductCardCheckboxDefault.size : _f, _g = _a.productCardOnChange, productCardOnChange = _g === void 0 ? props_1.ProductCardCheckboxDefault.productCardOnChange : _g, _h = _a.disabled, disabled = _h === void 0 ? props_1.ProductCardCheckboxDefault.disabled : _h, _j = _a.value, value = _j === void 0 ? props_1.ProductCardCheckboxDefault.value : _j, _k = _a.name, name = _k === void 0 ? props_1.ProductCardCheckboxDefault.name : _k, _l = _a.isContentOffset, isContentOffset = _l === void 0 ? props_1.ProductCardCheckboxDefault.isContentOffset : _l, _m = _a.checked, checked = _m === void 0 ? props_1.ProductCardCheckboxDefault.checked : _m, _o = _a.image, image = _o === void 0 ? props_1.ProductCardCheckboxDefault.image : _o, _p = _a.hasBadge, hasBadge = _p === void 0 ? props_1.ProductCardCheckboxDefault.hasBadge : _p, _q = _a.badgeText, badgeText = _q === void 0 ? props_1.ProductCardCheckboxDefault.badgeText : _q, _r = _a.badgeVariant, badgeVariant = _r === void 0 ? props_1.ProductCardCheckboxDefault.badgeVariant : _r, _s = _a.infoText, infoText = _s === void 0 ? props_1.ProductCardCheckboxDefault.infoText : _s, _t = _a.infoTitle, infoTitle = _t === void 0 ? props_1.ProductCardCheckboxDefault.infoTitle : _t, _u = _a.popupWidth, popupWidth = _u === void 0 ? props_1.ProductCardCheckboxDefault.popupWidth : _u, valid = _a.valid;
+    return ((0, jsx_runtime_1.jsx)(ProductCardCheckbox_styled_1.ProductCardCheckboxStyled, __assign({ htmlFor: checkboxId, disabled: disabled, "$isContentOffset": isContentOffset, "$size": size, "$hasBadge": hasBadge }, { children: (0, jsx_runtime_1.jsxs)("div", __assign({ className: "productCardInner" }, { children: [hasBadge && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "badgeWrapper" }, { children: (0, jsx_runtime_1.jsx)(Badges_1.default, { title: badgeText, layout: "text", variant: badgeVariant }) }))), (0, jsx_runtime_1.jsx)("div", __assign({ className: (0, classnames_1.default)({ "hidden": !hasCheckbox }, "productCardCheckboxContent") }, { children: (0, jsx_runtime_1.jsx)(Checkbox_1.default, { id: checkboxId, size: size === "large" ? "medium" : "small", label: "", onChange: productCardOnChange, value: value, checked: checked, name: name, disabled: disabled, valid: valid }) })), image && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "productCardImg" }, { children: image }))), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "productCardText" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "productCardTitle" }, { children: title })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "tooltipWrapper" }, { children: (infoText || infoTitle) && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "inputIcon hasNoBg" }, { children: (0, jsx_runtime_1.jsx)(Tooltip_1.default, __assign({ popupSize: "small", position: "topRight", popupWidth: popupWidth, popupRight: "-23px", iconWidth: "24px", iconHeight: "24px", title: infoTitle }, { children: (0, jsx_runtime_1.jsx)("div", { className: "popupText", dangerouslySetInnerHTML: { __html: infoText } }) })) }))) }))] })), content && ((0, jsx_runtime_1.jsxs)("label", __assign({ htmlFor: "notSelect_".concat(checkboxId), className: "productCardContent" }, { children: [(0, jsx_runtime_1.jsx)("input", { id: "notSelect_".concat(checkboxId), style: { display: "none" } }), content] })))] })) })));
 };
 exports.default = ProductCardCheckbox;

package/dist/components/ProductCardCheckbox/ProductCardCheckbox.styled.js

@@ -10,5 +10,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ProductCardCheckboxStyled = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
 var devices_1 = require("../../constants/devices");
-exports.ProductCardCheckboxStyled = styled_components_1.default.label(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    display: block;\n    max-width: 634px;\n\n    ", "\n    .productCardInner {\n        border: 1px solid var(--dark-opacity-10);\n        border-radius: 0.5rem;\n        padding: 24px;\n        background-color: white;\n        grid-template-columns: auto auto 1fr;\n        display: grid;\n        justify-content: flex-start;\n        @media only screen and ", " {\n            padding: 1rem;\n        }\n\n        .badgeWrapper {\n            margin: 0 auto 1rem 0;\n            grid-column-start: 1;\n            grid-column-end: 4;\n            width: 100%;\n            text-align: right;\n            height: 17px;\n\n            > * {\n                vertical-align: super;\n                display: inline-block;\n            }\n        }\n\n        .productCardCheckboxContent {\n            height: 64px;\n            display: flex;\n            align-items: center;\n            justify-content: flex-start;\n\n            &:is(.hidden) {\n                display: none;\n            }\n\n            .indicator {\n                margin-right: 24px;\n                @media only screen and ", " {\n                    margin-right: 8px;\n                    width: 16px;\n                    height: 16px;\n                }\n            }\n        }\n\n        .productCardImg {\n            width: 64px;\n            height: 64px;\n            border: 1px solid var(--dark-opacity-5);\n            border-radius: 0.5rem;\n            position: relative;\n            margin-right: 16px;\n            overflow: hidden;\n            box-sizing: border-box;\n\n            > * {\n                display: block;\n                position: absolute;\n                inset: 0;\n                width: 100%;\n                height: 100%;\n                object-fit: cover;\n                object-position: center center;\n            }\n        }\n\n        .productCardText {\n            display: flex;\n            align-items: center;\n            justify-content: space-between;\n            .productCardTitle {\n                min-height: 64px;\n                display: flex;\n                align-items: center;\n                justify-content: flex-start;\n                text-align: start;\n                font: ", ";\n                @media only screen and ", " {\n                    font: var(--body-semi-bold-14-17);\n                }\n            }\n            .tooltipWrapper{\n                user-select: initial !important;\n                pointer-events: initial !important;\n                padding-left: 1rem;\n                .popupText{\n                    font: var(--caption-medium-12-15);\n                }\n            }\n        }\n\n        .productCardContent {\n            margin: 1.5rem auto 0 ", ";\n            grid-column-start: 1;\n            grid-column-end: 4;\n            width: ", ";\n            cursor: initial;\n            @media only screen and ", " {\n                margin: 1rem auto 0 0 !important;\n                width: 100% !important;\n            }\n        }\n    }\n\n    ", "\n"], ["\n    display: block;\n    max-width: 634px;\n\n    ", "\n    .productCardInner {\n        border: 1px solid var(--dark-opacity-10);\n        border-radius: 0.5rem;\n        padding: 24px;\n        background-color: white;\n        grid-template-columns: auto auto 1fr;\n        display: grid;\n        justify-content: flex-start;\n        @media only screen and ", " {\n            padding: 1rem;\n        }\n\n        .badgeWrapper {\n            margin: 0 auto 1rem 0;\n            grid-column-start: 1;\n            grid-column-end: 4;\n            width: 100%;\n            text-align: right;\n            height: 17px;\n\n            > * {\n                vertical-align: super;\n                display: inline-block;\n            }\n        }\n\n        .productCardCheckboxContent {\n            height: 64px;\n            display: flex;\n            align-items: center;\n            justify-content: flex-start;\n\n            &:is(.hidden) {\n                display: none;\n            }\n\n            .indicator {\n                margin-right: 24px;\n                @media only screen and ", " {\n                    margin-right: 8px;\n                    width: 16px;\n                    height: 16px;\n                }\n            }\n        }\n\n        .productCardImg {\n            width: 64px;\n            height: 64px;\n            border: 1px solid var(--dark-opacity-5);\n            border-radius: 0.5rem;\n            position: relative;\n            margin-right: 16px;\n            overflow: hidden;\n            box-sizing: border-box;\n\n            > * {\n                display: block;\n                position: absolute;\n                inset: 0;\n                width: 100%;\n                height: 100%;\n                object-fit: cover;\n                object-position: center center;\n            }\n        }\n\n        .productCardText {\n            display: flex;\n            align-items: center;\n            justify-content: space-between;\n            .productCardTitle {\n                min-height: 64px;\n                display: flex;\n                align-items: center;\n                justify-content: flex-start;\n                text-align: start;\n                font: ", ";\n                @media only screen and ", " {\n                    font: var(--body-semi-bold-14-17);\n                }\n            }\n            .tooltipWrapper{\n                user-select: initial !important;\n                pointer-events: initial !important;\n                padding-left: 1rem;\n                .popupText{\n                    font: var(--caption-medium-12-15);\n                }\n            }\n        }\n\n        .productCardContent {\n            margin: 1.5rem auto 0 ", ";\n            grid-column-start: 1;\n            grid-column-end: 4;\n            width: ", ";\n            cursor: initial;\n            @media only screen and ", " {\n                margin: 1rem auto 0 0 !important;\n                width: 100% !important;\n            }\n        }\n    }\n\n    ", "\n"])), function (props) { return props.disabled ? "\n        user-select:none;\n        pointer-events:none;\n      " : "\n        cursor: pointer;\n    "; }, devices_1.devices.md, devices_1.devices.md, function (props) { return props.$size === "small" ? "var(--body-semi-bold-14-17)" : "var(--title-semi-bold-16-19)"; }, devices_1.devices.md, function (props) { return props.$isContentOffset ? '128px' : '0'; }, function (props) { return props.$isContentOffset ? 'calc(100% - 128px)' : '100%'; }, devices_1.devices.md, function (props) { return props.$size === "small" && "\n        .productCardInner{\n          padding: 1rem;\n          .productCardCheckboxContent {\n            .indicator {\n                margin-right: 8px;\n                width: 16px;\n                height: 16px;\n            }\n          }\n   \n          .productCardImg {\n          \n          }\n          .productCardTitle {\n            font: var(--body-semi-bold-14-17);\n          }\n          .productCardContent{\n            margin: 1rem auto 0 0;\n          }\n        }\n    "; });
+exports.ProductCardCheckboxStyled = styled_components_1.default.label(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    display: block;\n    max-width: 634px;\n\n    ", "\n    .productCardInner {\n        border: 1px solid var(--dark-opacity-10);\n        border-radius: 0.5rem;\n        padding: 24px;\n        background-color: white;\n        grid-template-columns: auto auto 1fr;\n        display: grid;\n        justify-content: flex-start;\n        @media only screen and ", " {\n            padding: 1rem;\n        }\n\n        .badgeWrapper {\n            margin: 0 auto 1rem 0;\n            grid-column-start: 1;\n            grid-column-end: 4;\n            width: 100%;\n            text-align: right;\n            height: 17px;\n\n            > * {\n                vertical-align: super;\n                display: inline-block;\n            }\n        }\n\n        .productCardCheckboxContent {\n            height: 64px;\n            display: flex;\n            align-items: center;\n            justify-content: flex-start;\n\n            &:is(.hidden) {\n                display: none;\n            }\n\n            .indicator {\n                margin-right: 24px;\n                @media only screen and ", " {\n                    margin-right: 8px;\n                    width: 16px;\n                    height: 16px;\n                }\n            }\n        }\n\n        .productCardImg {\n            width: 64px;\n            height: 64px;\n            border: 1px solid var(--dark-opacity-5);\n            border-radius: 0.5rem;\n            position: relative;\n            margin-right: 16px;\n            overflow: hidden;\n            box-sizing: border-box;\n\n            > * {\n                display: block;\n                position: absolute;\n                inset: 0;\n                width: 100%;\n                height: 100%;\n                object-fit: cover;\n                object-position: center center;\n            }\n        }\n\n        .productCardText {\n            display: flex;\n            align-items: center;\n            justify-content: space-between;\n            .productCardTitle {\n                min-height: 64px;\n                display: flex;\n                align-items: center;\n                justify-content: flex-start;\n                text-align: start;\n                font: ", ";\n                @media only screen and ", " {\n                    font: var(--body-semi-bold-14-17);\n                }\n            }\n            .tooltipWrapper{\n                user-select: initial !important;\n                pointer-events: initial !important;\n                padding-left: 1rem;\n                .popupText{\n                    font: var(--caption-medium-12-15);\n                    a{\n                        color: var(--primary);\n                    }\n                }\n            }\n        }\n\n        .productCardContent {\n            margin: 1.5rem auto 0 ", ";\n            grid-column-start: 1;\n            grid-column-end: 4;\n            width: ", ";\n            cursor: initial;\n            @media only screen and ", " {\n                margin: 1rem auto 0 0 !important;\n                width: 100% !important;\n            }\n        }\n    }\n\n    ", "\n"], ["\n    display: block;\n    max-width: 634px;\n\n    ", "\n    .productCardInner {\n        border: 1px solid var(--dark-opacity-10);\n        border-radius: 0.5rem;\n        padding: 24px;\n        background-color: white;\n        grid-template-columns: auto auto 1fr;\n        display: grid;\n        justify-content: flex-start;\n        @media only screen and ", " {\n            padding: 1rem;\n        }\n\n        .badgeWrapper {\n            margin: 0 auto 1rem 0;\n            grid-column-start: 1;\n            grid-column-end: 4;\n            width: 100%;\n            text-align: right;\n            height: 17px;\n\n            > * {\n                vertical-align: super;\n                display: inline-block;\n            }\n        }\n\n        .productCardCheckboxContent {\n            height: 64px;\n            display: flex;\n            align-items: center;\n            justify-content: flex-start;\n\n            &:is(.hidden) {\n                display: none;\n            }\n\n            .indicator {\n                margin-right: 24px;\n                @media only screen and ", " {\n                    margin-right: 8px;\n                    width: 16px;\n                    height: 16px;\n                }\n            }\n        }\n\n        .productCardImg {\n            width: 64px;\n            height: 64px;\n            border: 1px solid var(--dark-opacity-5);\n            border-radius: 0.5rem;\n            position: relative;\n            margin-right: 16px;\n            overflow: hidden;\n            box-sizing: border-box;\n\n            > * {\n                display: block;\n                position: absolute;\n                inset: 0;\n                width: 100%;\n                height: 100%;\n                object-fit: cover;\n                object-position: center center;\n            }\n        }\n\n        .productCardText {\n            display: flex;\n            align-items: center;\n            justify-content: space-between;\n            .productCardTitle {\n                min-height: 64px;\n                display: flex;\n                align-items: center;\n                justify-content: flex-start;\n                text-align: start;\n                font: ", ";\n                @media only screen and ", " {\n                    font: var(--body-semi-bold-14-17);\n                }\n            }\n            .tooltipWrapper{\n                user-select: initial !important;\n                pointer-events: initial !important;\n                padding-left: 1rem;\n                .popupText{\n                    font: var(--caption-medium-12-15);\n                    a{\n                        color: var(--primary);\n                    }\n                }\n            }\n        }\n\n        .productCardContent {\n            margin: 1.5rem auto 0 ", ";\n            grid-column-start: 1;\n            grid-column-end: 4;\n            width: ", ";\n            cursor: initial;\n            @media only screen and ", " {\n                margin: 1rem auto 0 0 !important;\n                width: 100% !important;\n            }\n        }\n    }\n\n    ", "\n"])), function (props) { return props.disabled ? "\n        user-select:none;\n        pointer-events:none;\n      " : "\n        cursor: pointer;\n    "; }, devices_1.devices.md, devices_1.devices.md, function (props) { return props.$size === "small" ? "var(--body-semi-bold-14-17)" : "var(--title-semi-bold-16-19)"; }, devices_1.devices.md, function (props) { return props.$isContentOffset ? '128px' : '0'; }, function (props) { return props.$isContentOffset ? 'calc(100% - 128px)' : '100%'; }, devices_1.devices.md, function (props) { return props.$size === "small" && "\n        .productCardInner{\n          padding: 1rem;\n          .productCardCheckboxContent {\n            .indicator {\n                margin-right: 8px;\n                width: 16px;\n                height: 16px;\n            }\n          }\n   \n          .productCardImg {\n          \n          }\n          .productCardTitle {\n            font: var(--body-semi-bold-14-17);\n          }\n          .productCardContent{\n            margin: 1rem auto 0 0;\n          }\n        }\n    "; });
 var templateObject_1;

package/dist/components/ProductCardCheckbox/props.d.ts

@@ -20,6 +20,7 @@ interface ProductCardCheckbox {
     badgeVariant?: string;
     infoText?: string;
     infoTitle?: string;
+    popupWidth?: string;
     image?: React.ReactNode;
 }
 export declare const ProductCardCheckboxDefault: ProductCardCheckbox;

package/dist/components/ProductCardCheckbox/props.js

@@ -21,4 +21,5 @@ exports.ProductCardCheckboxDefault = {
     badgeVariant: null,
     infoText: null,
     infoTitle: null,
+    popupWidth: "302px",
 };

package/dist/components/TextLink/TextLink.d.ts

@@ -1,3 +1,3 @@
 import { TextLinkProps } from "./props";
-declare const TextLink: ({ iconWidth, iconHeight, variant, size, iconDirection, alertText, hasAlert, onClick, children, href, target, icon, ...other }: TextLinkProps) => import("react/jsx-runtime").JSX.Element;
+declare const TextLink: ({ iconWidth, iconHeight, variant, size, iconDirection, alertText, hasAlert, alertposition, onClick, children, href, target, icon, ...other }: TextLinkProps) => import("react/jsx-runtime").JSX.Element;
 export default TextLink;

package/dist/components/TextLink/TextLink.js

@@ -31,10 +31,11 @@ var props_1 = require("./props");
 var TextLink_styled_1 = require("./TextLink.styled");
 var Icon_1 = __importDefault(require("../Icon/Icon"));
 var TextLink = function (_a) {
-    var _b = _a.iconWidth, iconWidth = _b === void 0 ? props_1.TextLinkDefault.iconWidth : _b, _c = _a.iconHeight, iconHeight = _c === void 0 ? props_1.TextLinkDefault.iconHeight : _c, _d = _a.variant, variant = _d === void 0 ? props_1.TextLinkDefault.variant : _d, _e = _a.size, size = _e === void 0 ? props_1.TextLinkDefault.size : _e, _f = _a.iconDirection, iconDirection = _f === void 0 ? props_1.TextLinkDefault.iconDirection : _f, _g = _a.alertText, alertText = _g === void 0 ? props_1.TextLinkDefault.alertText : _g, _h = _a.hasAlert, hasAlert = _h === void 0 ? props_1.TextLinkDefault.hasAlert : _h, onClick = _a.onClick, children = _a.children, href = _a.href, target = _a.target, icon = _a.icon, other = __rest(_a, ["iconWidth", "iconHeight", "variant", "size", "iconDirection", "alertText", "hasAlert", "onClick", "children", "href", "target", "icon"]);
-    var _j = (0, react_1.useState)(false), showAlert = _j[0], setShowAlert = _j[1];
+    var _b = _a.iconWidth, iconWidth = _b === void 0 ? props_1.TextLinkDefault.iconWidth : _b, _c = _a.iconHeight, iconHeight = _c === void 0 ? props_1.TextLinkDefault.iconHeight : _c, _d = _a.variant, variant = _d === void 0 ? props_1.TextLinkDefault.variant : _d, _e = _a.size, size = _e === void 0 ? props_1.TextLinkDefault.size : _e, _f = _a.iconDirection, iconDirection = _f === void 0 ? props_1.TextLinkDefault.iconDirection : _f, _g = _a.alertText, alertText = _g === void 0 ? props_1.TextLinkDefault.alertText : _g, _h = _a.hasAlert, hasAlert = _h === void 0 ? props_1.TextLinkDefault.hasAlert : _h, _j = _a.alertposition, alertposition = _j === void 0 ? props_1.TextLinkDefault.alertposition : _j, onClick = _a.onClick, children = _a.children, href = _a.href, target = _a.target, icon = _a.icon, other = __rest(_a, ["iconWidth", "iconHeight", "variant", "size", "iconDirection", "alertText", "hasAlert", "alertposition", "onClick", "children", "href", "target", "icon"]);
+    var _k = (0, react_1.useState)(false), showAlert = _k[0], setShowAlert = _k[1];
     var handleClick = function (e) {
-        onClick(e);
+        if (onClick)
+            onClick(e);
         if (hasAlert) {
             setShowAlert(true);
         }
@@ -44,6 +45,6 @@ var TextLink = function (_a) {
             setTimeout(function () { return setShowAlert(false); }, 1000);
         }
     }, [showAlert]);
-    return ((0, jsx_runtime_1.jsxs)(TextLink_styled_1.TextLinkStyled, __assign({ "$size": size, "$variant": variant, href: href, target: target, onClick: handleClick }, other, { children: [(0, jsx_runtime_1.jsxs)(TextLink_styled_1.Inner, __assign({ "$iconDirection": iconDirection }, { children: [icon && ((0, jsx_runtime_1.jsx)(TextLink_styled_1.IconStyled, __assign({ "$iconDirection": iconDirection }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: icon }) }))), children] })), showAlert && hasAlert && (0, jsx_runtime_1.jsx)(TextLink_styled_1.AlertStyled, { children: alertText })] })));
+    return ((0, jsx_runtime_1.jsxs)(TextLink_styled_1.TextLinkStyled, __assign({ "$size": size, "$variant": variant, href: href, target: target, onClick: handleClick }, other, { children: [(0, jsx_runtime_1.jsxs)(TextLink_styled_1.Inner, __assign({ "$iconDirection": iconDirection }, { children: [icon && ((0, jsx_runtime_1.jsx)(TextLink_styled_1.IconStyled, __assign({ "$iconDirection": iconDirection }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: icon }) }))), children] })), showAlert && hasAlert && (0, jsx_runtime_1.jsx)(TextLink_styled_1.AlertStyled, __assign({ "$alertposition": alertposition }, { children: alertText }))] })));
 };
 exports.default = TextLink;

package/dist/components/TextLink/TextLink.styled.js

@@ -22,5 +22,26 @@ exports.TextLinkStyled = styled_components_1.default.a(templateObject_1 || (temp
 }, function (props) { return props.$variant === "primary" ? "var(--primary-hover)" : "var(--grey-50)"; }, devices_1.devices.lg, function (props) { return props.$variant === "primary" ? "var(--primary)" : "var(--grey-50)"; }, function (props) { return props.$variant === "primary" ? "var(--primary-hover)" : "var(--grey-50)"; });
 exports.IconStyled = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    ", ";\n"], ["\n    ", ";\n"])), function (props) { return props.$iconDirection === 'right' ? "margin-left: 0.5rem;" : 'margin-right: 0.5rem;'; });
 exports.Inner = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n    flex-direction: ", ";\n"], ["\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n    flex-direction: ", ";\n"])), function (props) { return props.$iconDirection === 'right' ? "row-reverse" : 'row'; });
-exports.AlertStyled = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    position: absolute;\n    right: 0px;\n    top: calc(100% + 6px);\n    height: 28px;\n    border-radius: 0.5rem;\n    background-color: white;\n    box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0 1rem;\n    user-select: none;\n    pointer-events: none;\n    transition: opacity .4s ease;\n    font: var(--caption-medium-10-12);\n    color: var(--dark);\n    z-index: 99;\n"], ["\n    position: absolute;\n    right: 0px;\n    top: calc(100% + 6px);\n    height: 28px;\n    border-radius: 0.5rem;\n    background-color: white;\n    box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0 1rem;\n    user-select: none;\n    pointer-events: none;\n    transition: opacity .4s ease;\n    font: var(--caption-medium-10-12);\n    color: var(--dark);\n    z-index: 99;\n"])));
+exports.AlertStyled = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    position: absolute;\n    height: 28px;\n    border-radius: 0.5rem;\n    background-color: white;\n    box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0 1rem;\n    user-select: none;\n    pointer-events: none;\n    transition: opacity .4s ease;\n    font: var(--caption-medium-10-12);\n    color: var(--dark);\n    z-index: 99;\n    white-space: nowrap;\n    \n    ", "\n"], ["\n    position: absolute;\n    height: 28px;\n    border-radius: 0.5rem;\n    background-color: white;\n    box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0 1rem;\n    user-select: none;\n    pointer-events: none;\n    transition: opacity .4s ease;\n    font: var(--caption-medium-10-12);\n    color: var(--dark);\n    z-index: 99;\n    white-space: nowrap;\n    \n    ", "\n"])), function (props) {
+    switch (props.$alertposition) {
+        case 'top':
+            return "\n                    bottom: calc(100% + 6px);\n                    left: 50%;\n                    transform: translateX(-50%);\n                ";
+        case 'bottom':
+            return "\n                    top: calc(100% + 6px);\n                    left: 50%;\n                    transform: translateX(-50%);\n                ";
+        case 'left':
+            return "\n                    left: 0;\n                    top: 50%;\n                    transform: translateY(-50%);\n                ";
+        case 'right':
+            return "\n                    right: 0;\n                    top: 50%;\n                    transform: translateY(-50%);\n                ";
+        case 'top-left':
+            return "\n                    bottom: calc(100% + 6px);\n                    left: 0;\n                ";
+        case 'top-right':
+            return "\n                    bottom: calc(100% + 6px);\n                    right: 0;\n                ";
+        case 'bottom-left':
+            return "\n                    top: calc(100% + 6px);\n                    left: 0;\n                ";
+        case 'bottom-right':
+            return "\n                    top: calc(100% + 6px);\n                    right: 0;\n                ";
+        default:
+            return "\n                    top: calc(100% + 6px);\n                    left: 50%;\n                    transform: translateX(-50%);\n                ";
+    }
+});
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/dist/components/TextLink/props.d.ts

@@ -2,11 +2,13 @@
 export declare const variants: string[];
 export declare const sizes: string[];
 export declare const iconDirections: string[];
+export declare const alertPositions: string[];
 export declare const iconNames: string[];
 type ICON = typeof iconNames[any];
 type VARIANT = typeof variants[number];
 type SIZE = typeof sizes[number];
 type ICONDIRECTION = typeof iconDirections[number];
+type ALERTPOSITION = typeof alertPositions[number];
 export interface TextLink {
     onClick?(e: any): void;
     children?: React.ReactNode;
@@ -20,12 +22,14 @@ export interface TextLink {
     iconDirection?: ICONDIRECTION;
     alertText?: string;
     hasAlert?: boolean;
+    alertposition?: ALERTPOSITION;
 }
 export interface TextLinkStyledProps {
     $variant?: VARIANT;
     $size?: SIZE;
     $iconDirection?: ICONDIRECTION;
     $hasAlert?: boolean;
+    $alertposition?: ALERTPOSITION;
 }
 export declare const TextLinkDefault: TextLink;
 export type TextLinkProps = typeof TextLinkDefault;

package/dist/components/TextLink/props.js

@@ -1,10 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TextLinkDefault = exports.iconNames = exports.iconDirections = exports.sizes = exports.variants = void 0;
+exports.TextLinkDefault = exports.iconNames = exports.alertPositions = exports.iconDirections = exports.sizes = exports.variants = void 0;
 var iconList_1 = require("../Icon/iconList");
 exports.variants = ['primary', 'secondary'];
 exports.sizes = ['small', 'medium'];
 exports.iconDirections = ['left', 'right'];
+exports.alertPositions = ['top', 'bottom', 'left', 'right', 'top-left', 'top-right', 'bottom-left', 'bottom-right'];
 exports.iconNames = Object.keys(iconList_1.iconList);
 exports.TextLinkDefault = {
     iconWidth: "24px",
@@ -13,5 +14,6 @@ exports.TextLinkDefault = {
     size: "small",
     iconDirection: "left",
     alertText: "Alert",
-    hasAlert: false
+    hasAlert: false,
+    alertposition: "bottom-right"
 };

package/dist/components/TextLink/stories/TextLink.stories.d.ts

@@ -1,6 +1,6 @@
 declare const _default: {
     title: string;
-    component: ({ iconWidth, iconHeight, variant, size, iconDirection, alertText, hasAlert, onClick, children, href, target, icon, ...other }: import("../props").TextLink) => import("react/jsx-runtime").JSX.Element;
+    component: ({ iconWidth, iconHeight, variant, size, iconDirection, alertText, hasAlert, alertposition, onClick, children, href, target, icon, ...other }: import("../props").TextLink) => import("react/jsx-runtime").JSX.Element;
     tags: string[];
     argTypes: {
         variant: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "krl-alfred",
-  "version": "2.17.11",
+  "version": "2.17.13",
   "files": [
     "dist"
   ],