krl-alfred 2.23.22 → 2.23.24

package/dist/components/CategoryMenu/CategoryMenu.styled.js

@@ -37,5 +37,5 @@ exports.CategoryItemButtonIcon = styled_components_1.default.span(templateObject
 exports.CategoryItemButtonBadge = styled_components_1.default.span(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    font: var(--caption-bold-10-12);\n    line-height: 17px;\n    border-radius: 3px;\n    background-color: var(--primary);\n    color: white;\n    padding: 0 0.5rem;\n    display: inline-block;\n    margin-top: 2px;\n"], ["\n    font: var(--caption-bold-10-12);\n    line-height: 17px;\n    border-radius: 3px;\n    background-color: var(--primary);\n    color: white;\n    padding: 0 0.5rem;\n    display: inline-block;\n    margin-top: 2px;\n"])));
 exports.CategoryItemButtonBadgeSm = styled_components_1.default.span(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    position: absolute;\n    right: 8px;\n    top: 8px;\n"], ["\n    position: absolute;\n    right: 8px;\n    top: 8px;\n"])));
 exports.CategoryItemButtonTitle = styled_components_1.default.strong(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n    margin-top: ", ";\n    display:block;\n    font:var(--caption-semi-bold-12-15);\n"], ["\n    margin-top: ", ";\n    display:block;\n    font:var(--caption-semi-bold-12-15);\n"])), function (props) { return props.$showIcons === false ? 0 : '8px'; });
-exports.SubMenu = styled_components_1.default.ul(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n    position: absolute;\n    left: 0;\n    top: 100%;\n    transition: all 0.2s ease-in-out;\n    opacity: 0;\n    visibility: hidden;\n    transform: translateY(10px);\n    transition-delay: 0s;\n    padding: 0;\n    margin: 0;\n"], ["\n    position: absolute;\n    left: 0;\n    top: 100%;\n    transition: all 0.2s ease-in-out;\n    opacity: 0;\n    visibility: hidden;\n    transform: translateY(10px);\n    transition-delay: 0s;\n    padding: 0;\n    margin: 0;\n"])));
+exports.SubMenu = styled_components_1.default.ul(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n    position: absolute;\n    left: 0;\n    top: 100%;\n    transition: all 0.2s ease-in-out;\n    opacity: 0;\n    visibility: hidden;\n    transform: translateY(10px);\n    transition-delay: 0s;\n    padding: 0;\n    margin: 0;\n    white-space: nowrap;\n"], ["\n    position: absolute;\n    left: 0;\n    top: 100%;\n    transition: all 0.2s ease-in-out;\n    opacity: 0;\n    visibility: hidden;\n    transform: translateY(10px);\n    transition-delay: 0s;\n    padding: 0;\n    margin: 0;\n    white-space: nowrap;\n"])));
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;

package/dist/components/CategoryMenu/CategoryMenu.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/CategoryMenu/CategoryMenu.test.js

@@ -0,0 +1,43 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("@testing-library/react");
+var CategoryMenu_1 = __importDefault(require("./CategoryMenu"));
+var props_1 = require("./props");
+var data = [
+    {
+        id: 1,
+        name: 'Elektronik',
+        slug: 'elektronik',
+        icon: 'Lightning',
+        children: [
+            { id: 11, name: 'Uzun alt kategori adı', slug: 'uzun', children: [] },
+        ],
+    },
+];
+var renderCategoryMenu = function (props) {
+    if (props === void 0) { props = {}; }
+    return (0, react_1.render)((0, jsx_runtime_1.jsx)(CategoryMenu_1.default, __assign({}, props_1.CategoryMenuDefault, { data: data }, props)));
+};
+describe('CategoryMenu', function () {
+    it('keeps submenu labels on a single line', function () {
+        var container = renderCategoryMenu().container;
+        var subMenu = container.querySelector('li > ul');
+        expect(subMenu).toHaveStyle({ whiteSpace: 'nowrap' });
+        expect(react_1.screen.getByText('Uzun alt kategori adı')).toBeInTheDocument();
+    });
+});

package/dist/components/InfoBox/InfoBox.js

@@ -56,6 +56,6 @@ var InfoBox = function (_a) {
             }
         });
     }, [description]);
-    return ((0, jsx_runtime_1.jsxs)(InfoBox_styled_1.InfoBoxStyled, __assign({ onClick: onClick, "$radius": radius, "$variant": variant, "$hasLink": !!onClick, "$size": size }, { children: [hasIcon && ((0, jsx_runtime_1.jsx)(InfoBox_styled_1.IconWrapper, __assign({ "$variant": variant }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: variant === "danger" ? "Danger" : icon }) }))), (0, jsx_runtime_1.jsxs)(InfoBox_styled_1.TextWrapper, { children: [title && (0, jsx_runtime_1.jsx)(InfoBox_styled_1.Title, { dangerouslySetInnerHTML: { __html: title } }), description && (0, jsx_runtime_1.jsx)(InfoBox_styled_1.Description, __assign({ "$size": size, ref: descriptionRef }, { children: description })), (0, jsx_runtime_1.jsx)(InfoBox_styled_1.AlertStyled, __assign({ "$visible": alert, "$alertLeft": alertLeft, "$alertTop": alertTop }, { children: t('copied') })), (0, jsx_runtime_1.jsx)(InfoBox_styled_1.Input, { ref: inputRef, id: "infoBoxInput" })] }), !!onClick && ((0, jsx_runtime_1.jsx)(InfoBox_styled_1.LinkIconWrapper, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowRightBig" }) }))] })));
+    return ((0, jsx_runtime_1.jsxs)(InfoBox_styled_1.InfoBoxStyled, __assign({ onClick: onClick, "$radius": radius, "$variant": variant, "$hasLink": !!onClick, "$size": size }, { children: [hasIcon && ((0, jsx_runtime_1.jsx)(InfoBox_styled_1.IconWrapper, __assign({ "$variant": variant }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: variant === "danger" ? "Danger" : icon }) }))), (0, jsx_runtime_1.jsxs)(InfoBox_styled_1.TextWrapper, { children: [title && (0, jsx_runtime_1.jsx)(InfoBox_styled_1.Title, { children: title }), description && (0, jsx_runtime_1.jsx)(InfoBox_styled_1.Description, __assign({ "$size": size, ref: descriptionRef }, { children: description })), (0, jsx_runtime_1.jsx)(InfoBox_styled_1.AlertStyled, __assign({ "$visible": alert, "$alertLeft": alertLeft, "$alertTop": alertTop }, { children: t('copied') })), (0, jsx_runtime_1.jsx)(InfoBox_styled_1.Input, { ref: inputRef, id: "infoBoxInput" })] }), !!onClick && ((0, jsx_runtime_1.jsx)(InfoBox_styled_1.LinkIconWrapper, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowRightBig" }) }))] })));
 };
 exports.default = InfoBox;

package/dist/components/InfoBox/InfoBox.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/InfoBox/InfoBox.test.js

@@ -0,0 +1,136 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("@testing-library/react");
+var user_event_1 = __importDefault(require("@testing-library/user-event"));
+var InfoBox_1 = __importDefault(require("./InfoBox"));
+var props_1 = require("./props");
+jest.mock('react-i18next', function () { return ({
+    useTranslation: function () { return ({
+        t: function (key) { return key; },
+    }); },
+}); });
+var renderInfoBox = function (props) {
+    if (props === void 0) { props = {}; }
+    return (0, react_1.render)((0, jsx_runtime_1.jsx)(InfoBox_1.default, __assign({}, props_1.InfoBoxDefault, { title: "Info text", description: "A\u00E7\u0131klama" }, props)));
+};
+describe('InfoBox', function () {
+    it('renders string title and description', function () {
+        renderInfoBox();
+        expect(react_1.screen.getByText('Info text')).toBeInTheDocument();
+        expect(react_1.screen.getByText('Açıklama')).toBeInTheDocument();
+    });
+    it('renders title and description as ReactNode', function () {
+        renderInfoBox({
+            title: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("b", { children: "\u00D6nemli" }), " ", (0, jsx_runtime_1.jsx)("span", { children: "ba\u015Fl\u0131k" })] })),
+            description: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("p", { children: "Detay metni" }), (0, jsx_runtime_1.jsx)("img", { src: "/info.png", alt: "Bilgi" })] })),
+        });
+        expect(react_1.screen.getByText('Önemli')).toBeInTheDocument();
+        expect(react_1.screen.getByText('başlık')).toBeInTheDocument();
+        expect(react_1.screen.getByText('Detay metni')).toBeInTheDocument();
+        expect(react_1.screen.getByAltText('Bilgi')).toBeInTheDocument();
+    });
+    it('does not execute HTML strings passed as title or description', function () {
+        renderInfoBox({
+            title: '<script>window.__xssTitle = true</script>Başlık',
+            description: '<img src="x" onerror="window.__xssDesc = true" />Açıklama',
+        });
+        expect(react_1.screen.getByText(/Başlık/)).toBeInTheDocument();
+        expect(react_1.screen.getByText(/Açıklama/)).toBeInTheDocument();
+        expect(document.querySelector('script')).not.toBeInTheDocument();
+        expect(document.querySelector('img[onerror]')).not.toBeInTheDocument();
+        expect(window.__xssTitle).toBeUndefined();
+        expect(window.__xssDesc).toBeUndefined();
+    });
+    it('does not render title or description when they are null', function () {
+        renderInfoBox({ title: null, description: null });
+        expect(react_1.screen.queryByText('Info text')).not.toBeInTheDocument();
+        expect(react_1.screen.queryByText('Açıklama')).not.toBeInTheDocument();
+    });
+    it('calls onClick when the box is clicked', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var onClick, container;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    onClick = jest.fn();
+                    container = renderInfoBox({ onClick: onClick }).container;
+                    return [4 /*yield*/, user_event_1.default.click(container.firstChild)];
+                case 1:
+                    _a.sent();
+                    expect(onClick).toHaveBeenCalledTimes(1);
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('copies digits from a description span click', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var _a;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    document.execCommand = jest.fn();
+                    renderInfoBox({
+                        description: ((0, jsx_runtime_1.jsx)("div", __assign({ className: "bottom" }, { children: (0, jsx_runtime_1.jsxs)("p", { children: ["Kod: ", (0, jsx_runtime_1.jsx)("span", { children: "567890678" })] }) }))),
+                    });
+                    return [4 /*yield*/, user_event_1.default.click(react_1.screen.getByText('567890678'))];
+                case 1:
+                    _b.sent();
+                    expect(document.execCommand).toHaveBeenCalledWith('copy');
+                    _a = expect;
+                    return [4 /*yield*/, react_1.screen.findByText('copied')];
+                case 2:
+                    _a.apply(void 0, [_b.sent()]).toBeInTheDocument();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+});

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

@@ -6,7 +6,7 @@ type SIZES = typeof sizes[number];
 type VARIANT = typeof variants[number];
 type ICON = typeof iconNames[any];
 export interface InfoBox {
-    title?: string;
+    title?: React.ReactNode;
     description?: React.ReactNode;
     radius?: string;
     size?: SIZES;

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

@@ -153,6 +153,13 @@ export declare const SimpleDescription: {
         onClick: () => void;
     };
 };
+export declare const ReactNodeTitle: {
+    args: {
+        title: React.JSX.Element;
+        description: string;
+        onClick: any;
+    };
+};
 export declare const ReactNodeDescription: {
     args: {
         title: string;

package/dist/components/InfoBox/stories/InfoBox.stories.js

@@ -14,7 +14,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Empty = exports.Clickable = exports.CustomIcon = exports.WithCustomRadius = exports.ReactNodeDescription = exports.SimpleDescription = exports.Minimal = exports.WithoutDescription = exports.WithoutTitle = exports.WithoutOnClick = exports.AllSizes = exports.AllVariants = exports.Large = exports.Medium = exports.Small = exports.WithoutIcon = exports.Secondary = exports.Warning = exports.Danger = exports.Primary = exports.Default = void 0;
+exports.Empty = exports.Clickable = exports.CustomIcon = exports.WithCustomRadius = exports.ReactNodeDescription = exports.ReactNodeTitle = exports.SimpleDescription = exports.Minimal = exports.WithoutDescription = exports.WithoutTitle = exports.WithoutOnClick = exports.AllSizes = exports.AllVariants = exports.Large = exports.Medium = exports.Small = exports.WithoutIcon = exports.Secondary = exports.Warning = exports.Danger = exports.Primary = exports.Default = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var InfoBox_1 = __importDefault(require("../InfoBox"));
 var props_1 = require("../props");
@@ -93,6 +93,9 @@ exports.Minimal = {
 exports.SimpleDescription = {
     args: __assign(__assign({}, defaultArgs), { title: "Basit bilgi", description: "Bu sadece düz metin açıklamasıdır. HTML veya kopyalanabilir alan içermez." }),
 };
+exports.ReactNodeTitle = {
+    args: __assign(__assign({}, defaultArgs), { title: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("b", { children: "\u00D6nemli" }), " ", (0, jsx_runtime_1.jsx)("span", { children: "bilgi" })] })), description: "Başlık React node olarak geçilebilir.", onClick: undefined }),
+};
 exports.ReactNodeDescription = {
     args: __assign(__assign({}, defaultArgs), { title: "React node açıklama", description: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("p", { children: "\u0130ade g\u00FCn\u00FCn kiralama biti\u015F g\u00FCn\u00FCnd\u00FCr." }), (0, jsx_runtime_1.jsxs)("p", { children: ["Detaylar i\u00E7in ", (0, jsx_runtime_1.jsx)("b", { children: "info@kiralarsin.com" }), " adresine yazabilirsin."] })] })), onClick: undefined }),
 };

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

@@ -1,4 +1,4 @@
 import React from 'react';
 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, filterDate, onCalendarOpen, maxLength, showMaxLengthCounter, description, ...other }: InputProps) => React.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, tooltipText, tooltipWidth, id, isClearable, onClear, hasNumericFormat, inline, minDate, maxDate, filterDate, onCalendarOpen, maxLength, showMaxLengthCounter, description, ...other }: InputProps) => React.JSX.Element;
 export default Input;

package/dist/components/Input/Input.js

@@ -40,20 +40,21 @@ var locale_1 = require("date-fns/locale");
 var useDatePickerCalendar_1 = require("./hooks/useDatePickerCalendar");
 var datePicker_1 = require("./utils/datePicker");
 var Input = function (_a) {
-    var _b = _a.hasError, hasError = _b === void 0 ? props_1.InputDefault.hasError : _b, _c = _a.disabled, disabled = _c === void 0 ? props_1.InputDefault.disabled : _c, _d = _a.label, label = _d === void 0 ? props_1.InputDefault.label : _d, _e = _a.customLinkText, customLinkText = _e === void 0 ? props_1.InputDefault.customLinkText : _e, _f = _a.customLinkHref, customLinkHref = _f === void 0 ? props_1.InputDefault.customLinkHref : _f, _g = _a.onCustomLinkClick, onCustomLinkClick = _g === void 0 ? props_1.InputDefault.onCustomLinkClick : _g, _h = _a.onChange, onChange = _h === void 0 ? props_1.InputDefault.onChange : _h, _j = _a.errorMessage, errorMessage = _j === void 0 ? props_1.InputDefault.errorMessage : _j, _k = _a.type, type = _k === void 0 ? props_1.InputDefault.type : _k, _l = _a.name, name = _l === void 0 ? props_1.InputDefault.name : _l, _m = _a.width, width = _m === void 0 ? props_1.InputDefault.width : _m, _o = _a.mask, mask = _o === void 0 ? props_1.InputDefault.mask : _o, _p = _a.placeholder, placeholder = _p === void 0 ? props_1.InputDefault.placeholder : _p, _q = _a.hasCopyButton, hasCopyButton = _q === void 0 ? props_1.InputDefault.hasCopyButton : _q, _r = _a.readOnly, readOnly = _r === void 0 ? props_1.InputDefault.readOnly : _r, _s = _a.autoFocus, autoFocus = _s === void 0 ? props_1.InputDefault.autoFocus : _s, value = _a.value, _t = _a.format, format = _t === void 0 ? props_1.InputDefault.format : _t, _u = _a.visible, visible = _u === void 0 ? props_1.InputDefault.visible : _u, _v = _a.infoText, infoText = _v === void 0 ? props_1.InputDefault.infoText : _v, _w = _a.id, id = _w === void 0 ? props_1.InputDefault.id : _w, _x = _a.isClearable, isClearable = _x === void 0 ? props_1.InputDefault.isClearable : _x, _y = _a.onClear, onClear = _y === void 0 ? props_1.InputDefault.onClear : _y, _z = _a.hasNumericFormat, hasNumericFormat = _z === void 0 ? props_1.InputDefault.hasNumericFormat : _z, _0 = _a.inline, inline = _0 === void 0 ? props_1.InputDefault.inline : _0, _1 = _a.minDate, minDate = _1 === void 0 ? props_1.InputDefault.minDate : _1, _2 = _a.maxDate, maxDate = _2 === void 0 ? props_1.InputDefault.maxDate : _2, _3 = _a.filterDate, filterDate = _3 === void 0 ? props_1.InputDefault.filterDate : _3, _4 = _a.onCalendarOpen, onCalendarOpen = _4 === void 0 ? props_1.InputDefault.onCalendarOpen : _4, _5 = _a.maxLength, maxLength = _5 === void 0 ? props_1.InputDefault.maxLength : _5, _6 = _a.showMaxLengthCounter, showMaxLengthCounter = _6 === void 0 ? props_1.InputDefault.showMaxLengthCounter : _6, _7 = _a.description, description = _7 === void 0 ? props_1.InputDefault.description : _7, 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", "onCalendarOpen", "maxLength", "showMaxLengthCounter", "description"]);
-    var _8 = (0, react_1.useState)(type), inputType = _8[0], setInputType = _8[1];
-    var _9 = (0, react_1.useState)(false), alert = _9[0], setAlert = _9[1];
-    var _10 = (0, react_1.useState)(value), inputValue = _10[0], setInputValue = _10[1];
-    var _11 = (0, react_1.useState)(function () { return (0, datePicker_1.parseDateValue)(value, format); }), startDate = _11[0], setStartDate = _11[1];
+    var _b = _a.hasError, hasError = _b === void 0 ? props_1.InputDefault.hasError : _b, _c = _a.disabled, disabled = _c === void 0 ? props_1.InputDefault.disabled : _c, _d = _a.label, label = _d === void 0 ? props_1.InputDefault.label : _d, _e = _a.customLinkText, customLinkText = _e === void 0 ? props_1.InputDefault.customLinkText : _e, _f = _a.customLinkHref, customLinkHref = _f === void 0 ? props_1.InputDefault.customLinkHref : _f, _g = _a.onCustomLinkClick, onCustomLinkClick = _g === void 0 ? props_1.InputDefault.onCustomLinkClick : _g, _h = _a.onChange, onChange = _h === void 0 ? props_1.InputDefault.onChange : _h, _j = _a.errorMessage, errorMessage = _j === void 0 ? props_1.InputDefault.errorMessage : _j, _k = _a.type, type = _k === void 0 ? props_1.InputDefault.type : _k, _l = _a.name, name = _l === void 0 ? props_1.InputDefault.name : _l, _m = _a.width, width = _m === void 0 ? props_1.InputDefault.width : _m, _o = _a.mask, mask = _o === void 0 ? props_1.InputDefault.mask : _o, _p = _a.placeholder, placeholder = _p === void 0 ? props_1.InputDefault.placeholder : _p, _q = _a.hasCopyButton, hasCopyButton = _q === void 0 ? props_1.InputDefault.hasCopyButton : _q, _r = _a.readOnly, readOnly = _r === void 0 ? props_1.InputDefault.readOnly : _r, _s = _a.autoFocus, autoFocus = _s === void 0 ? props_1.InputDefault.autoFocus : _s, value = _a.value, _t = _a.format, format = _t === void 0 ? props_1.InputDefault.format : _t, _u = _a.visible, visible = _u === void 0 ? props_1.InputDefault.visible : _u, _v = _a.infoText, infoText = _v === void 0 ? props_1.InputDefault.infoText : _v, _w = _a.tooltipText, tooltipText = _w === void 0 ? props_1.InputDefault.tooltipText : _w, _x = _a.tooltipWidth, tooltipWidth = _x === void 0 ? props_1.InputDefault.tooltipWidth : _x, _y = _a.id, id = _y === void 0 ? props_1.InputDefault.id : _y, _z = _a.isClearable, isClearable = _z === void 0 ? props_1.InputDefault.isClearable : _z, _0 = _a.onClear, onClear = _0 === void 0 ? props_1.InputDefault.onClear : _0, _1 = _a.hasNumericFormat, hasNumericFormat = _1 === void 0 ? props_1.InputDefault.hasNumericFormat : _1, _2 = _a.inline, inline = _2 === void 0 ? props_1.InputDefault.inline : _2, _3 = _a.minDate, minDate = _3 === void 0 ? props_1.InputDefault.minDate : _3, _4 = _a.maxDate, maxDate = _4 === void 0 ? props_1.InputDefault.maxDate : _4, _5 = _a.filterDate, filterDate = _5 === void 0 ? props_1.InputDefault.filterDate : _5, _6 = _a.onCalendarOpen, onCalendarOpen = _6 === void 0 ? props_1.InputDefault.onCalendarOpen : _6, _7 = _a.maxLength, maxLength = _7 === void 0 ? props_1.InputDefault.maxLength : _7, _8 = _a.showMaxLengthCounter, showMaxLengthCounter = _8 === void 0 ? props_1.InputDefault.showMaxLengthCounter : _8, _9 = _a.description, description = _9 === void 0 ? props_1.InputDefault.description : _9, other = __rest(_a, ["hasError", "disabled", "label", "customLinkText", "customLinkHref", "onCustomLinkClick", "onChange", "errorMessage", "type", "name", "width", "mask", "placeholder", "hasCopyButton", "readOnly", "autoFocus", "value", "format", "visible", "infoText", "tooltipText", "tooltipWidth", "id", "isClearable", "onClear", "hasNumericFormat", "inline", "minDate", "maxDate", "filterDate", "onCalendarOpen", "maxLength", "showMaxLengthCounter", "description"]);
+    var _10 = (0, react_1.useState)(type), inputType = _10[0], setInputType = _10[1];
+    var _11 = (0, react_1.useState)(false), alert = _11[0], setAlert = _11[1];
+    var _12 = (0, react_1.useState)(value), inputValue = _12[0], setInputValue = _12[1];
+    var _13 = (0, react_1.useState)(false), isFocused = _13[0], setIsFocused = _13[1];
+    var _14 = (0, react_1.useState)(function () { return (0, datePicker_1.parseDateValue)(value, format); }), startDate = _14[0], setStartDate = _14[1];
     var inputRef = (0, react_1.useRef)(null);
     var t = (0, react_i18next_1.useTranslation)().t;
     var language = i18n_1.default.language;
-    var _12 = (0, useDatePickerCalendar_1.useDatePickerCalendar)({
+    var _15 = (0, useDatePickerCalendar_1.useDatePickerCalendar)({
         disabled: disabled,
         inline: inline,
         onCalendarOpen: onCalendarOpen,
         readOnly: readOnly,
-    }), calendarControlProps = _12.calendarControlProps, dateInputRef = _12.dateInputRef, datePickerRef = _12.datePickerRef, isCalendarOpen = _12.isCalendarOpen;
+    }), calendarControlProps = _15.calendarControlProps, dateInputRef = _15.dateInputRef, datePickerRef = _15.datePickerRef, isCalendarOpen = _15.isCalendarOpen;
     (0, react_1.useEffect)(function () {
         setInputType(type);
     }, [type]);
@@ -91,8 +92,18 @@ var Input = function (_a) {
         onChange === null || onChange === void 0 ? void 0 : onChange(formattedValue);
     };
     var CustomDateInput = (0, react_1.useMemo)(function () {
-        return (0, react_1.forwardRef)(function (props, ref) { return ((0, jsx_runtime_1.jsx)(Input_styled_1.InputStyled, __assign({ ref: (0, datePicker_1.mergeInputRefs)(ref, dateInputRef), "$hasError": hasError, "$hasIcon": (isClearable && inputValue) || ['password', 'date'].includes(type) || hasCopyButton || infoText, "$isCalendarOpen": isCalendarOpen, id: id }, props, { value: (0, datePicker_1.getDateDisplayValue)(props.value, format, inputValue) }))); });
+        return (0, react_1.forwardRef)(function (props, ref) { return ((0, jsx_runtime_1.jsx)(Input_styled_1.InputStyled, __assign({ ref: (0, datePicker_1.mergeInputRefs)(ref, dateInputRef), "$hasError": hasError, "$hasIcon": (isClearable && inputValue) || ['password', 'date'].includes(type) || hasCopyButton || infoText, "$isCalendarOpen": isCalendarOpen, id: id }, props, { onFocus: function (event) {
+                var _a;
+                (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, event);
+                setIsFocused(true);
+            }, onBlur: function (event) {
+                var _a;
+                (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, event);
+                setIsFocused(false);
+            }, value: (0, datePicker_1.getDateDisplayValue)(props.value, format, inputValue) }))); });
     }, [dateInputRef, format, hasCopyButton, hasError, id, infoText, inputValue, isCalendarOpen, isClearable, type]);
+    var handleFocus = function () { return setIsFocused(true); };
+    var handleBlur = function () { return setIsFocused(false); };
     var handleClearValue = function () {
         var _a, _b;
         setInputValue('');
@@ -110,12 +121,12 @@ var Input = function (_a) {
     var showCharCount = showMaxLengthCounter && maxLength != null;
     var showTopRow = Boolean(label || customLinkText || showCharCount);
     var hasInputIcon = (isClearable && inputValue) || ['password', 'date'].includes(type) || hasCopyButton || infoText;
-    return ((0, jsx_runtime_1.jsxs)(Input_styled_1.Container, __assign({ "$width": width }, { children: [showTopRow && ((0, jsx_runtime_1.jsxs)(Input_styled_1.FieldTop, { children: [label ? (0, jsx_runtime_1.jsx)(Input_styled_1.FieldLabel, __assign({ htmlFor: id }, { children: label })) : (0, jsx_runtime_1.jsx)("span", {}), (0, jsx_runtime_1.jsxs)(Input_styled_1.FieldTopActions, { children: [showCharCount && ((0, jsx_runtime_1.jsxs)(Input_styled_1.CharCount, { children: [currentLength, "/", maxLength] })), customLinkText && ((0, jsx_runtime_1.jsx)(TextLink_1.default, __assign({}, (customLinkHref && { href: customLinkHref }), { onClick: onCustomLinkClick }, { children: customLinkText })))] })] })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "input" }, { children: [hasNumericFormat ? ((0, jsx_runtime_1.jsx)(react_number_format_1.NumericFormat, __assign({ "$hasError": hasError, disabled: disabled, onChange: onChange, name: name, placeholder: placeholder, readOnly: readOnly, autoFocus: autoFocus, value: inputValue, maxLength: maxLength }, other, { customInput: Input_styled_1.InputStyled, id: id }))) : mask && format ? ((0, jsx_runtime_1.jsx)(react_number_format_1.PatternFormat, __assign({ "$hasError": hasError, disabled: disabled, onChange: onChange, name: name, placeholder: placeholder, readOnly: readOnly, autoFocus: autoFocus, value: inputValue, maxLength: maxLength }, other, { format: format, mask: mask, customInput: Input_styled_1.InputStyled, id: id }))) : type === 'date' ? ((0, jsx_runtime_1.jsx)(Input_styled_1.DatePickerWrapperStyled, __assign({ "$inline": inline }, { children: (0, jsx_runtime_1.jsx)(react_datepicker_1.default, __assign({ placeholderText: placeholder, disabled: disabled, name: name, readOnly: readOnly, autoFocus: autoFocus, onChange: handleDateChange, selected: startDate, ref: datePickerRef, id: id, dateFormat: "yyyy-MM-dd", locale: language === 'tr' ? locale_1.tr : locale_1.enGB, customInput: (0, jsx_runtime_1.jsx)(CustomDateInput, {}), inline: inline, minDate: minDate, maxDate: maxDate, filterDate: filterDate, renderCustomHeader: function (_a) {
+    return ((0, jsx_runtime_1.jsxs)(Input_styled_1.Container, __assign({ "$width": width }, { children: [showTopRow && ((0, jsx_runtime_1.jsxs)(Input_styled_1.FieldTop, { children: [label ? (0, jsx_runtime_1.jsx)(Input_styled_1.FieldLabel, __assign({ htmlFor: id }, { children: label })) : (0, jsx_runtime_1.jsx)("span", {}), (0, jsx_runtime_1.jsxs)(Input_styled_1.FieldTopActions, { children: [showCharCount && ((0, jsx_runtime_1.jsxs)(Input_styled_1.CharCount, { children: [currentLength, "/", maxLength] })), customLinkText && ((0, jsx_runtime_1.jsx)(TextLink_1.default, __assign({}, (customLinkHref && { href: customLinkHref }), { onClick: onCustomLinkClick }, { children: customLinkText })))] })] })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "input" }, { children: [hasNumericFormat ? ((0, jsx_runtime_1.jsx)(react_number_format_1.NumericFormat, __assign({ "$hasError": hasError, disabled: disabled, onChange: onChange, name: name, placeholder: placeholder, readOnly: readOnly, autoFocus: autoFocus, value: inputValue, maxLength: maxLength }, other, { customInput: Input_styled_1.InputStyled, id: id, onFocus: handleFocus, onBlur: handleBlur }))) : mask && format ? ((0, jsx_runtime_1.jsx)(react_number_format_1.PatternFormat, __assign({ "$hasError": hasError, disabled: disabled, onChange: onChange, name: name, placeholder: placeholder, readOnly: readOnly, autoFocus: autoFocus, value: inputValue, maxLength: maxLength }, other, { format: format, mask: mask, customInput: Input_styled_1.InputStyled, id: id, onFocus: handleFocus, onBlur: handleBlur }))) : type === 'date' ? ((0, jsx_runtime_1.jsx)(Input_styled_1.DatePickerWrapperStyled, __assign({ "$inline": inline }, { children: (0, jsx_runtime_1.jsx)(react_datepicker_1.default, __assign({ placeholderText: placeholder, disabled: disabled, name: name, readOnly: readOnly, autoFocus: autoFocus, onChange: handleDateChange, selected: startDate, ref: datePickerRef, id: id, dateFormat: "yyyy-MM-dd", locale: language === 'tr' ? locale_1.tr : locale_1.enGB, customInput: (0, jsx_runtime_1.jsx)(CustomDateInput, {}), inline: inline, minDate: minDate, maxDate: maxDate, filterDate: filterDate, renderCustomHeader: function (_a) {
                                 var monthDate = _a.monthDate, 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" }) }))] }))] })));
                             } }, calendarControlProps)) }))) : ((0, jsx_runtime_1.jsx)(Input_styled_1.InputStyled, __assign({ ref: inputRef, type: inputType, "$hasError": hasError, disabled: disabled, onChange: function (e) {
                             onChange === null || onChange === void 0 ? void 0 : onChange(e);
                             setInputValue(e.currentTarget.value);
-                        }, name: name, placeholder: placeholder, readOnly: readOnly, autoFocus: autoFocus, value: inputValue, id: id, maxLength: maxLength, "$hasIcon": hasInputIcon }, other))), isClearable && inputValue ? ((0, jsx_runtime_1.jsx)("div", __assign({ onClick: handleClearValue, className: "removeIcon" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--dark)", name: "Closebig" }) }))) : type === 'password' ? ((0, jsx_runtime_1.jsx)("div", __assign({ onClick: toggleInputType, className: "inputIcon hasNoBg" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--dark-opacity-50)", name: inputType === 'password' ? 'Show' : 'Hide' }) }))) : type === 'date' && !inline ? ((0, jsx_runtime_1.jsx)("div", __assign({ className: "inputIcon hasNoBg hasNoCursor" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--grey-50)", name: "Calendar" }) }))) : (hasCopyButton && ((0, jsx_runtime_1.jsx)("div", __assign({ onClick: copyToClipboard, className: "inputIcon" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--primary)", name: "Copy" }) })))), infoText && ((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: "160px", popupRight: "-10px", iconWidth: "24px", iconHeight: "24px" }, { children: (0, jsx_runtime_1.jsx)("div", { className: "popupText", dangerouslySetInnerHTML: { __html: infoText } }) })) }))), (0, jsx_runtime_1.jsx)(Input_styled_1.AlertStyled, __assign({ "$visible": alert }, { children: t('copied') }))] })), hasError && errorMessage && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "error" }, { children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { name: "SwitchPassive" }), (0, jsx_runtime_1.jsx)("p", { children: errorMessage })] }))), description && (0, jsx_runtime_1.jsx)(Input_styled_1.FieldDescription, { children: description })] })));
+                        }, name: name, placeholder: placeholder, readOnly: readOnly, autoFocus: autoFocus, value: inputValue, id: id, maxLength: maxLength, "$hasIcon": hasInputIcon }, other, { onFocus: handleFocus, onBlur: handleBlur }))), isClearable && inputValue ? ((0, jsx_runtime_1.jsx)("div", __assign({ onClick: handleClearValue, className: "removeIcon" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--dark)", name: "Closebig" }) }))) : type === 'password' ? ((0, jsx_runtime_1.jsx)("div", __assign({ onClick: toggleInputType, className: "inputIcon hasNoBg" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--dark-opacity-50)", name: inputType === 'password' ? 'Show' : 'Hide' }) }))) : type === 'date' && !inline ? ((0, jsx_runtime_1.jsx)("div", __assign({ className: "inputIcon hasNoBg hasNoCursor" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--grey-50)", name: "Calendar" }) }))) : (hasCopyButton && ((0, jsx_runtime_1.jsx)("div", __assign({ onClick: copyToClipboard, className: "inputIcon" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--primary)", name: "Copy" }) })))), infoText && ((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: "160px", popupRight: "-10px", iconWidth: "24px", iconHeight: "24px" }, { children: (0, jsx_runtime_1.jsx)(Input_styled_1.PopupText, { dangerouslySetInnerHTML: { __html: infoText } }) })) }))), tooltipText && ((0, jsx_runtime_1.jsx)(Input_styled_1.FocusTooltip, __assign({ "$isOpen": isFocused, "$maxWidth": tooltipWidth }, { children: (0, jsx_runtime_1.jsx)(Input_styled_1.PopupText, { dangerouslySetInnerHTML: { __html: tooltipText } }) }))), (0, jsx_runtime_1.jsx)(Input_styled_1.AlertStyled, __assign({ "$visible": alert }, { children: t('copied') }))] })), hasError && errorMessage && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "error" }, { children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { name: "SwitchPassive" }), (0, jsx_runtime_1.jsx)("p", { children: errorMessage })] }))), description && (0, jsx_runtime_1.jsx)(Input_styled_1.FieldDescription, { children: description })] })));
 };
 exports.default = Input;

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

@@ -1,6 +1,14 @@
 /// <reference types="react" />
 import { ContainerProps, InputStyledProps } from "./props";
 export declare const AlertStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ContainerProps> & ContainerProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ContainerProps> & ContainerProps, never>>> & string;
+export declare const FocusTooltip: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$isOpen" | "$maxWidth"> & {
+    $isOpen?: boolean;
+    $maxWidth?: string;
+}, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$isOpen" | "$maxWidth"> & {
+    $isOpen?: boolean;
+    $maxWidth?: string;
+}, never>>> & string;
+export declare const PopupText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
 export declare const Container: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ContainerProps> & ContainerProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ContainerProps> & ContainerProps, never>>> & string;
 export declare const FieldTop: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
 export declare const FieldTopActions: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;

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

@@ -7,16 +7,18 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DatePickerWrapperStyled = exports.InputStyled = exports.FieldDescription = exports.CharCount = exports.FieldLabel = exports.FieldTopActions = exports.FieldTop = exports.Container = exports.AlertStyled = void 0;
+exports.DatePickerWrapperStyled = exports.InputStyled = exports.FieldDescription = exports.CharCount = exports.FieldLabel = exports.FieldTopActions = exports.FieldTop = exports.Container = exports.PopupText = exports.FocusTooltip = exports.AlertStyled = void 0;
 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\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            &.hasNoCursor {\n                user-select: none;\n                pointer-events: none;\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\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            &.hasNoCursor {\n                user-select: none;\n                pointer-events: none;\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.FieldTop = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 1rem;\n    margin-bottom: 16px;\n"], ["\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 1rem;\n    margin-bottom: 16px;\n"])));
-exports.FieldTopActions = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    gap: 1rem;\n    margin-left: auto;\n"], ["\n    display: flex;\n    align-items: center;\n    gap: 1rem;\n    margin-left: auto;\n"])));
-exports.FieldLabel = styled_components_1.default.label(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    margin: 0;\n    color: var(--dark-opacity-50);\n    display: block;\n    font: var(--caption-bold-12-15);\n"], ["\n    margin: 0;\n    color: var(--dark-opacity-50);\n    display: block;\n    font: var(--caption-bold-12-15);\n"])));
-exports.CharCount = styled_components_1.default.span(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    margin: 0;\n    color: var(--dark-opacity-50);\n    font: var(--caption-bold-12-15);\n    white-space: nowrap;\n"], ["\n    margin: 0;\n    color: var(--dark-opacity-50);\n    font: var(--caption-bold-12-15);\n    white-space: nowrap;\n"])));
-exports.FieldDescription = styled_components_1.default.p(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    margin: 0.5rem 0 0;\n    color: var(--dark-opacity-50);\n    font: var(--caption-semi-bold-12-15);\n"], ["\n    margin: 0.5rem 0 0;\n    color: var(--dark-opacity-50);\n    font: var(--caption-semi-bold-12-15);\n"])));
-exports.InputStyled = styled_components_1.default.input(templateObject_8 || (templateObject_8 = __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        &::placeholder {\n            color: var(--dark-opacity-25);\n        }\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        &::placeholder {\n            color: var(--dark-opacity-25);\n        }\n    }\n\n"])), function (props) {
+exports.FocusTooltip = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    position: absolute;\n    left: 50%;\n    bottom: calc(100% + 10px);\n    transform: translateX(-50%);\n    max-width: ", ";\n    width: max-content;\n    padding: 10px;\n    border-radius: 0.5rem;\n    background-color: var(--primary-opacity-10);\n    z-index: 99999;\n    box-sizing: border-box;\n    user-select: none;\n    pointer-events: none;\n    transition: all 0.15s ease;\n    opacity: ", ";\n    font: var(--caption-medium-11-13);\n\n    &:before {\n        content: '';\n        position: absolute;\n        left: 50%;\n        bottom: -6px;\n        transform: translateX(-50%) rotate(45deg);\n        width: 12px;\n        height: 12px;\n        border-radius: 3px;\n        background-color: var(--primary-opacity-10);\n    }\n"], ["\n    position: absolute;\n    left: 50%;\n    bottom: calc(100% + 10px);\n    transform: translateX(-50%);\n    max-width: ", ";\n    width: max-content;\n    padding: 10px;\n    border-radius: 0.5rem;\n    background-color: var(--primary-opacity-10);\n    z-index: 99999;\n    box-sizing: border-box;\n    user-select: none;\n    pointer-events: none;\n    transition: all 0.15s ease;\n    opacity: ", ";\n    font: var(--caption-medium-11-13);\n\n    &:before {\n        content: '';\n        position: absolute;\n        left: 50%;\n        bottom: -6px;\n        transform: translateX(-50%) rotate(45deg);\n        width: 12px;\n        height: 12px;\n        border-radius: 3px;\n        background-color: var(--primary-opacity-10);\n    }\n"])), function (props) { return props.$maxWidth || '140px'; }, function (props) { return props.$isOpen ? '1' : '0'; });
+exports.PopupText = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    font: var(--caption-semi-bold-11-13);\n    text-align: center;\n    white-space: pre-wrap;\n"], ["\n    font: var(--caption-semi-bold-11-13);\n    text-align: center;\n    white-space: pre-wrap;\n"])));
+exports.Container = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __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\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            &.hasNoCursor {\n                user-select: none;\n                pointer-events: none;\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\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\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            &.hasNoCursor {\n                user-select: none;\n                pointer-events: none;\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\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.FieldTop = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 1rem;\n    margin-bottom: 16px;\n"], ["\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 1rem;\n    margin-bottom: 16px;\n"])));
+exports.FieldTopActions = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    gap: 1rem;\n    margin-left: auto;\n"], ["\n    display: flex;\n    align-items: center;\n    gap: 1rem;\n    margin-left: auto;\n"])));
+exports.FieldLabel = styled_components_1.default.label(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    margin: 0;\n    color: var(--dark-opacity-50);\n    display: block;\n    font: var(--caption-bold-12-15);\n"], ["\n    margin: 0;\n    color: var(--dark-opacity-50);\n    display: block;\n    font: var(--caption-bold-12-15);\n"])));
+exports.CharCount = styled_components_1.default.span(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n    margin: 0;\n    color: var(--dark-opacity-50);\n    font: var(--caption-bold-12-15);\n    white-space: nowrap;\n"], ["\n    margin: 0;\n    color: var(--dark-opacity-50);\n    font: var(--caption-bold-12-15);\n    white-space: nowrap;\n"])));
+exports.FieldDescription = styled_components_1.default.p(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n    margin: 0.5rem 0 0;\n    color: var(--dark-opacity-50);\n    font: var(--caption-semi-bold-12-15);\n"], ["\n    margin: 0.5rem 0 0;\n    color: var(--dark-opacity-50);\n    font: var(--caption-semi-bold-12-15);\n"])));
+exports.InputStyled = styled_components_1.default.input(templateObject_10 || (templateObject_10 = __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        &::placeholder {\n            color: var(--dark-opacity-25);\n        }\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        &::placeholder {\n            color: var(--dark-opacity-25);\n        }\n    }\n\n"])), function (props) {
     if (props.disabled)
         return 'var(--dark-opacity-5)';
     if (props.$isCalendarOpen || props.$hasError)
@@ -38,5 +40,5 @@ exports.InputStyled = styled_components_1.default.input(templateObject_8 || (tem
         return 'var(--red)';
     return '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_9 || (templateObject_9 = __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        .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        margin-bottom: 1.5rem;\n        background-color: white;\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            text-align: center;\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                padding: ", ";\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                    text-align: center;\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                    cursor: no-drop;\n                }\n                .react-datepicker__day--outside-month{\n                    visibility: hidden;\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        .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        margin-bottom: 1.5rem;\n        background-color: white;\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            text-align: center;\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                padding: ", ";\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                    text-align: center;\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                    cursor: no-drop;\n                }\n                .react-datepicker__day--outside-month{\n                    visibility: hidden;\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, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;
+exports.DatePickerWrapperStyled = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __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        .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        margin-bottom: 1.5rem;\n        background-color: white;\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            text-align: center;\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                padding: ", ";\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                    text-align: center;\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                    cursor: no-drop;\n                }\n                .react-datepicker__day--outside-month{\n                    visibility: hidden;\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        .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        margin-bottom: 1.5rem;\n        background-color: white;\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            text-align: center;\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                padding: ", ";\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                    text-align: center;\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                    cursor: no-drop;\n                }\n                .react-datepicker__day--outside-month{\n                    visibility: hidden;\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, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;

package/dist/components/Input/Input.test.js

@@ -115,4 +115,35 @@ describe('Input', function () {
     it('renders with potentially unsafe infoText without crashing', function () {
         expect(function () { return renderInput({ infoText: '<script>alert(1)</script>Info' }); }).not.toThrow();
     });
+    it('renders with potentially unsafe tooltipText without crashing', function () {
+        expect(function () { return renderInput({ tooltipText: '<script>alert(1)</script>Hint' }); }).not.toThrow();
+    });
+    it('applies tooltipWidth to the focus tooltip', function () {
+        renderInput({ tooltipText: 'Hint', tooltipWidth: '200px' });
+        expect(react_1.screen.getByText('Hint').parentElement).toHaveStyle({ maxWidth: '200px' });
+    });
+    it('shows tooltip on focus and hides it on blur', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var tooltip;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    renderInput({ tooltipText: 'Focus hint', placeholder: 'Type here' });
+                    tooltip = react_1.screen.getByText('Focus hint');
+                    expect(tooltip).not.toBeVisible();
+                    return [4 /*yield*/, user_event_1.default.click(react_1.screen.getByPlaceholderText('Type here'))];
+                case 1:
+                    _a.sent();
+                    return [4 /*yield*/, (0, react_1.waitFor)(function () { return expect(tooltip).toBeVisible(); })];
+                case 2:
+                    _a.sent();
+                    return [4 /*yield*/, user_event_1.default.tab()];
+                case 3:
+                    _a.sent();
+                    return [4 /*yield*/, (0, react_1.waitFor)(function () { return expect(tooltip).not.toBeVisible(); })];
+                case 4:
+                    _a.sent();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
 });

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

@@ -23,6 +23,8 @@ export interface Input {
     visible?: boolean;
     hasNumericFormat?: boolean;
     infoText?: string;
+    tooltipText?: string;
+    tooltipWidth?: string;
     id?: string;
     inline?: boolean;
     minDate?: Date;

package/dist/components/Input/props.js

@@ -22,6 +22,8 @@ exports.InputDefault = {
     format: null,
     visible: null,
     infoText: null,
+    tooltipText: null,
+    tooltipWidth: "140px",
     id: null,
     isClearable: false,
     hasNumericFormat: false,

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

@@ -41,6 +41,12 @@ declare const _default: {
         description: {
             control: string;
         };
+        tooltipText: {
+            control: string;
+        };
+        tooltipWidth: {
+            control: string;
+        };
         label: {
             control: string;
         };
@@ -63,6 +69,7 @@ export declare const Default: {
         label: string;
         type: string;
         infoText: any;
+        tooltipText: any;
         id: string;
         format: any;
         mask: any;
@@ -81,6 +88,7 @@ export declare const Empty: {
         isClearable: boolean;
         type: string;
         infoText: any;
+        tooltipText: any;
         format: any;
         mask: any;
         onChange: (e: any) => void;
@@ -98,6 +106,7 @@ export declare const WithValue: {
         isClearable: boolean;
         type: string;
         infoText: any;
+        tooltipText: any;
         format: any;
         mask: any;
         onChange: (e: any) => void;
@@ -305,6 +314,20 @@ export declare const WithInfoText: {
         onChange: (e: any) => void;
     };
 };
+export declare const WithTooltip: {
+    args: {
+        placeholder: string;
+        label: string;
+        hasError: boolean;
+        disabled: boolean;
+        readOnly: boolean;
+        isClearable: boolean;
+        type: string;
+        tooltipText: string;
+        id: string;
+        onChange: (e: any) => void;
+    };
+};
 export declare const NumericFormat: {
     args: {
         placeholder: string;
@@ -499,6 +522,7 @@ export declare const Interactive: {
         isClearable: boolean;
         type: string;
         infoText: any;
+        tooltipText: any;
         format: any;
         mask: any;
         onChange: (e: any) => void;

package/dist/components/Input/stories/Input.stories.js

@@ -14,7 +14,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Interactive = exports.PercentageMaskWithValue = exports.PercentageMask = exports.WithMaxLengthAndDescription = exports.ErrorWithCustomLink = exports.Complete = exports.CustomWidth = exports.Number = exports.Tel = exports.Email = exports.PatternFormatWithValue = exports.PatternFormat = exports.NumericFormat = exports.WithInfoText = exports.Clearable = exports.WithCopyButton = exports.DateWithMinMax = exports.DateInline = exports.DateInput = exports.PasswordWithValue = exports.Password = exports.WithCustomLink = exports.ReadOnly = exports.Disabled = exports.WithError = exports.WithLabel = exports.WithValue = exports.Empty = exports.Default = void 0;
+exports.Interactive = exports.PercentageMaskWithValue = exports.PercentageMask = exports.WithMaxLengthAndDescription = exports.ErrorWithCustomLink = exports.Complete = exports.CustomWidth = exports.Number = exports.Tel = exports.Email = exports.PatternFormatWithValue = exports.PatternFormat = exports.NumericFormat = exports.WithTooltip = exports.WithInfoText = exports.Clearable = exports.WithCopyButton = exports.DateWithMinMax = exports.DateInline = exports.DateInput = exports.PasswordWithValue = exports.Password = exports.WithCustomLink = exports.ReadOnly = exports.Disabled = exports.WithError = exports.WithLabel = exports.WithValue = exports.Empty = exports.Default = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = __importDefault(require("react"));
 var Input_1 = __importDefault(require("../Input"));
@@ -27,6 +27,7 @@ var baseArgs = {
     label: "Label",
     type: "text",
     infoText: null,
+    tooltipText: null,
     id: "input_default",
     format: null,
     mask: null,
@@ -36,7 +37,7 @@ var baseArgs = {
 };
 exports.default = {
     title: "Components/Input",
-    component: function (props) { return ((0, jsx_runtime_1.jsx)("div", __assign({ style: { maxWidth: "370px" } }, { children: (0, jsx_runtime_1.jsx)(Input_1.default, __assign({}, props)) }))); },
+    component: function (props) { return ((0, jsx_runtime_1.jsx)("div", __assign({ style: { maxWidth: "370px", paddingTop: props.tooltipText ? 48 : undefined } }, { children: (0, jsx_runtime_1.jsx)(Input_1.default, __assign({}, props)) }))); },
     tags: ["autodocs"],
     argTypes: {
         hasError: { control: "boolean" },
@@ -51,6 +52,8 @@ exports.default = {
         maxLength: { control: "number" },
         showMaxLengthCounter: { control: "boolean" },
         description: { control: "text" },
+        tooltipText: { control: "text" },
+        tooltipWidth: { control: "text" },
         label: { control: "text" },
         placeholder: { control: "text" },
         value: { control: "text" },
@@ -295,6 +298,22 @@ exports.WithInfoText = {
         }
     },
 };
+exports.WithTooltip = {
+    args: {
+        placeholder: "Enter your information",
+        label: "Input with Tooltip",
+        hasError: false,
+        disabled: false,
+        readOnly: false,
+        isClearable: false,
+        type: "text",
+        tooltipText: "This is helpful information about this field",
+        id: "input_tooltip",
+        onChange: function (e) {
+            console.log(e, "onChange");
+        }
+    },
+};
 exports.NumericFormat = {
     args: {
         placeholder: "Enter number",

package/package.json

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