krl-alfred 1.76.21 → 1.76.22

package/dist/components/AddressCard/AddressCard.js

@@ -19,7 +19,10 @@ var AddressCard_styled_1 = require("./AddressCard.styled");
 var RadioButton_1 = __importDefault(require("../RadioButton"));
 var TextLink_1 = __importDefault(require("../TextLink"));
 var AddressCard = function (props) {
-    return ((0, jsx_runtime_1.jsxs)(AddressCard_styled_1.AddressCardStyled, __assign({ htmlFor: props.id, checked: props.checked }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "head" }, { children: [(0, jsx_runtime_1.jsx)(RadioButton_1.default, { id: props.id, onChange: props.onChange, checked: props.checked, isWrapText: false, layout: "basic", size: "small", label: props.title }), (0, jsx_runtime_1.jsx)("div", __assign({ className: "editBtn" }, { children: (0, jsx_runtime_1.jsx)(TextLink_1.default, __assign({ onClick: props.handleUpdate }, { children: "D\u00FCzenle" })) }))] })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "description" }, { children: props.description }))] })));
+    return ((0, jsx_runtime_1.jsxs)(AddressCard_styled_1.AddressCardStyled, __assign({ htmlFor: props.id, checked: props.checked, "$minHeight": props.minHeight }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "head" }, { children: [(0, jsx_runtime_1.jsx)(RadioButton_1.default, { id: props.id, onChange: props.onChange, checked: props.checked, isWrapText: false, layout: "basic", size: "small", label: props.title, name: props.name, value: props.value, disabled: props.disabled }), (props === null || props === void 0 ? void 0 : props.isShowEditBtn) && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "editBtn" }, { children: (0, jsx_runtime_1.jsx)(TextLink_1.default, __assign({ onClick: props.handleUpdate }, { children: "D\u00FCzenle" })) })))] })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "description" }, { children: props.description }))] })));
+};
+AddressCard.defaultProps = {
+    isShowEditBtn: true,
+    minHeight: "68px",
 };
-AddressCard.defaultProps = {};
 exports.default = AddressCard;

package/dist/components/AddressCard/AddressCard.styled.js

@@ -9,5 +9,5 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AddressCardStyled = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
-exports.AddressCardStyled = styled_components_1.default.label(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    border-radius: 8px;\n    border: 1px solid ", ";\n    background: white;\n    padding: 1rem;\n    cursor: pointer;\n    display: block;\n    .head{\n        margin-bottom: 1.5rem;\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        cursor: inherit;\n        .editBtn{\n            font : var(--body-bold-14-17);\n            margin-left: 1rem;\n            * {\n                display: block;\n            }\n        }\n    }\n    .description{\n        -webkit-line-clamp: 4;\n        -webkit-box-orient: vertical;\n        overflow: hidden;\n        word-break: break-word;\n        display: -webkit-inline-box;\n        font : var(--body-regular-14-17);\n        color: var(--dark);\n        height: 68px;\n        cursor: inherit;\n        vertical-align: middle;\n    }\n"], ["\n    border-radius: 8px;\n    border: 1px solid ", ";\n    background: white;\n    padding: 1rem;\n    cursor: pointer;\n    display: block;\n    .head{\n        margin-bottom: 1.5rem;\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        cursor: inherit;\n        .editBtn{\n            font : var(--body-bold-14-17);\n            margin-left: 1rem;\n            * {\n                display: block;\n            }\n        }\n    }\n    .description{\n        -webkit-line-clamp: 4;\n        -webkit-box-orient: vertical;\n        overflow: hidden;\n        word-break: break-word;\n        display: -webkit-inline-box;\n        font : var(--body-regular-14-17);\n        color: var(--dark);\n        height: 68px;\n        cursor: inherit;\n        vertical-align: middle;\n    }\n"])), function (props) { return props.checked ? 'var(--primary)' : 'var(--dark-opacity-10)'; });
+exports.AddressCardStyled = styled_components_1.default.label(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    border-radius: 8px;\n    border: 1px solid ", ";\n    background: white;\n    padding: 1rem;\n    cursor: pointer;\n    display: block;\n    .head{\n        margin-bottom: 1.5rem;\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        cursor: inherit;\n        .editBtn{\n            font : var(--body-bold-14-17);\n            margin-left: 1rem;\n            * {\n                display: block;\n            }\n        }\n    }\n    .description{\n        -webkit-line-clamp: 4;\n        -webkit-box-orient: vertical;\n        overflow: hidden;\n        word-break: break-word;\n        display: -webkit-inline-box;\n        font : var(--body-regular-14-17);\n        color: var(--dark);\n        height: ", ";\n        cursor: inherit;\n        vertical-align: middle;\n    }\n"], ["\n    border-radius: 8px;\n    border: 1px solid ", ";\n    background: white;\n    padding: 1rem;\n    cursor: pointer;\n    display: block;\n    .head{\n        margin-bottom: 1.5rem;\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        cursor: inherit;\n        .editBtn{\n            font : var(--body-bold-14-17);\n            margin-left: 1rem;\n            * {\n                display: block;\n            }\n        }\n    }\n    .description{\n        -webkit-line-clamp: 4;\n        -webkit-box-orient: vertical;\n        overflow: hidden;\n        word-break: break-word;\n        display: -webkit-inline-box;\n        font : var(--body-regular-14-17);\n        color: var(--dark);\n        height: ", ";\n        cursor: inherit;\n        vertical-align: middle;\n    }\n"])), function (props) { return props.checked ? 'var(--primary)' : 'var(--dark-opacity-10)'; }, function (props) { return props.$minHeight ? props.$minHeight : '68px'; });
 var templateObject_1;

package/dist/components/AddressCard/stories/AddressCard.stories.js

@@ -31,5 +31,6 @@ exports.Default = {
         description: "Manchester, Kentucky 394954517 Washington Ave. Manchester, Kentucky 394954517 Washington Ave.4517 Washington Ave. 4517 Washington Ave. 4517 Washington Ave.",
         handleUpdate: function () { return console.log('handleUpdate'); },
         id: "addressCard_1",
+        minHeight: "68px",
     },
 };

package/dist/components/AutocompleteInput/AutocompleteInput.js

@@ -22,6 +22,7 @@ var Icon_1 = __importDefault(require("../Icon/Icon"));
 var TextLink_1 = __importDefault(require("../TextLink"));
 var Loader_1 = __importDefault(require("../Loader"));
 var useOnClickOutside_1 = __importDefault(require("../../hooks/useOnClickOutside"));
+var genericUtils_1 = require("../../utils/genericUtils");
 var AutocompleteInput = function (props) {
     var _a;
     var _b, _c;
@@ -29,6 +30,7 @@ var AutocompleteInput = function (props) {
     var _d = (0, react_1.useState)(isShowDropdown), showDropdown = _d[0], setShowDropdown = _d[1];
     var _e = (0, react_1.useState)(false), hasClear = _e[0], setHasClear = _e[1];
     var _f = (0, react_1.useState)(value), inputValue = _f[0], setInputValue = _f[1];
+    var _g = (0, react_1.useState)(0), selectedIndex = _g[0], setSelectedIndex = _g[1];
     var inputRef = (0, react_1.useRef)(null);
     var realInputRef = (0, react_1.useRef)(null);
     var containerRef = (0, react_1.useRef)(null);
@@ -45,7 +47,7 @@ var AutocompleteInput = function (props) {
     }, [value]);
     (0, react_1.useEffect)(function () {
         var _a, _b, _c, _d;
-        if (((_b = (_a = realInputRef === null || realInputRef === void 0 ? void 0 : realInputRef.current) === null || _a === void 0 ? void 0 : _a.value) === null || _b === void 0 ? void 0 : _b.length) > 0 && ((_d = (_c = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _c === void 0 ? void 0 : _c.value) === null || _d === void 0 ? void 0 : _d.length) > 0) {
+        if (((_b = (_a = realInputRef === null || realInputRef === void 0 ? void 0 : realInputRef.current) === null || _a === void 0 ? void 0 : _a.value) === null || _b === void 0 ? void 0 : _b.length) > 0 || ((_d = (_c = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _c === void 0 ? void 0 : _c.value) === null || _d === void 0 ? void 0 : _d.length) > 0) {
             setHasClear(true);
         }
         else {
@@ -66,6 +68,15 @@ var AutocompleteInput = function (props) {
             realInputRef.current.dispatchEvent(event_2);
         }
     }, [inputValue]);
+    (0, react_1.useEffect)(function () {
+        var _a;
+        //dropdownRef?.current?.children[selectedIndex]?.scrollIntoView({ behavior: 'smooth', block: 'start' })
+        (_a = dropdownRef === null || dropdownRef === void 0 ? void 0 : dropdownRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo({
+            top: (selectedIndex > 0 ? selectedIndex * 51 : 0),
+            left: 0,
+            behavior: 'smooth'
+        });
+    }, [selectedIndex]);
     var handleClear = function (e) {
         onClear();
         inputRef.current.value = null;
@@ -77,30 +88,51 @@ var AutocompleteInput = function (props) {
         setShowDropdown(false);
     };
     var handleKeyUp = function (e) {
-        onKeyUp(e);
-        setInputValue(null);
+        e = e || window.event;
+        var charCode = e.keyCode || e.which;
+        if (![38, 40].includes(charCode)) {
+            e.target.value = ("" + (0, genericUtils_1.replaceTRtoEn)(e.target.value)).toUpperCase();
+            setInputValue(null);
+            onKeyUp(e);
+        }
+        else {
+            e.preventDefault();
+        }
     };
     var handleKeyDown = function (e) {
-        var _a;
-        onKeyDown(e);
+        var _a, _b;
         e = e || window.event;
         var charCode = e.keyCode || e.which;
         if (charCode == 13) {
             e.preventDefault();
-            (_a = dropdownRef === null || dropdownRef === void 0 ? void 0 : dropdownRef.current) === null || _a === void 0 ? void 0 : _a.children[0].click();
+            (_a = dropdownRef === null || dropdownRef === void 0 ? void 0 : dropdownRef.current) === null || _a === void 0 ? void 0 : _a.children[selectedIndex].click();
             inputRef.current.blur();
         }
+        if ([38, 40].includes(charCode)) {
+            e.preventDefault();
+            // 38 up , 40 down
+            if (((_b = dropdownRef === null || dropdownRef === void 0 ? void 0 : dropdownRef.current) === null || _b === void 0 ? void 0 : _b.children.length) > 0)
+                setSelectedIndex(function (prev) { var _a, _b; return charCode === 38 ? prev === 0 ? 0 : prev - 1 : prev === ((_a = dropdownRef === null || dropdownRef === void 0 ? void 0 : dropdownRef.current) === null || _a === void 0 ? void 0 : _a.children.length) - 1 ? ((_b = dropdownRef === null || dropdownRef === void 0 ? void 0 : dropdownRef.current) === null || _b === void 0 ? void 0 : _b.children.length) - 1 : prev + 1; });
+        }
+        else {
+            setSelectedIndex(0);
+        }
+        onKeyDown(e);
     };
     var handleBlur = function (e) {
+        var _a, _b;
         onBlur(e);
+        if (dropdownList.length === 1) {
+            handleSelectValue((_a = dropdownList[0]) === null || _a === void 0 ? void 0 : _a.value, (_b = dropdownList[0]) === null || _b === void 0 ? void 0 : _b.label);
+        }
     };
     var handleChange = function (e) {
         if (e === void 0) { e = null; }
         onChange(__assign(__assign({}, e), { target: __assign(__assign({}, e === null || e === void 0 ? void 0 : e.target), { value: inputValue }) }));
     };
     return ((0, jsx_runtime_1.jsxs)(AutocompleteInput_styled_1.Container, __assign({ width: width, ref: containerRef }, { children: [label && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: (0, classnames_1.default)("top", (_a = {}, _a["justify-between"] = customLinkText, _a)) }, { children: [(0, jsx_runtime_1.jsx)("p", { children: label }), 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: [(0, jsx_runtime_1.jsx)(AutocompleteInput_styled_1.InputStyled, { ref: inputRef, placeholder: placeholder, autofocus: autofocus, readonly: readonly, type: "text", disabled: disabled, hasError: hasError, isShowDropdown: showDropdown, onKeyUp: handleKeyUp, onBlur: handleBlur, onFocus: onFocus, onKeyDown: handleKeyDown, autoComplete: autoComplete }), (0, jsx_runtime_1.jsx)("input", { ref: realInputRef, type: "text", name: name, onChange: handleChange, className: "hiddenInput", autoComplete: autoComplete }), hasLoading && (0, jsx_runtime_1.jsx)("div", __assign({ className: "inputIcon" }, { children: (0, jsx_runtime_1.jsx)(Loader_1.default, { variant: "primary", width: "16px", height: "16px" }) })), hasClear && !hasLoading && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "inputIcon", onClick: handleClear }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Close", color: "var(--dark)", strokeWidth: "3px", width: "16px", height: "16px" }) }))), showDropdown && ((0, jsx_runtime_1.jsx)(AutocompleteInput_styled_1.DropdownStyled, __assign({ ref: dropdownRef, dropdownMaxHeight: dropdownMaxHeight }, { children: dropdownList.length > 0 ? (dropdownList.map(function (item, key) {
-                            return (0, jsx_runtime_1.jsx)("li", __assign({ className: (0, classnames_1.default)({ "isFixedBottom": item.isFixedBottom }), onClick: function () { return handleSelectValue(item.value, item.label); } }, { children: item.label }));
-                        })) : (0, jsx_runtime_1.jsx)("li", __assign({ className: "isFixedBottom hasNoResult", onClick: function () { return handleSelectValue(null, null); } }, { children: noResultTemplate() })) })))] })), hasError && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "error" }, { children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ErrorIcon" }), (0, jsx_runtime_1.jsx)("p", { children: errorMessage })] })))] })));
+                            return (0, jsx_runtime_1.jsx)("li", __assign({ className: (0, classnames_1.default)({ "isFixedBottom": item.isFixedBottom }, { "isSelected": key === selectedIndex }), onClick: function () { return handleSelectValue(item.value, item.label); } }, { children: item.label }));
+                        })) : (0, jsx_runtime_1.jsx)("li", __assign({ className: "isFixedBottom hasNoResult" }, { children: noResultTemplate() })) })))] })), hasError && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "error" }, { children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ErrorIcon" }), (0, jsx_runtime_1.jsx)("p", { children: errorMessage })] })))] })));
 };
 AutocompleteInput.defaultValues = {
     hasError: false,

package/dist/components/AutocompleteInput/AutocompleteInput.styled.js

@@ -10,6 +10,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.DropdownStyled = exports.InputStyled = exports.Container = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
 exports.Container = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __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    &.justify-between {\n      justify-content: space-between;\n    }\n\n    p {\n      margin: 0;\n      color: var(--dark-opacity-50);\n    }\n\n    /*a {\n      margin: 0;\n      color: var(--primary);\n      text-decoration: none;\n      cursor: pointer;\n      &:hover,:focus,:active{\n        color: var(--primary-hover) !important;\n      }\n    }*/\n  }\n\n  .input {\n    position: relative;\n    .hiddenInput{\n        opacity: 0;\n        user-select: none;\n        pointer-events: none;\n        position: absolute;\n        left: 0;\n        width: 0;\n    }\n    .inputIcon {\n      position: absolute;\n      top: 50%;\n      right: 24px;\n      transform: translateY(-50%);\n      cursor: pointer;\n      div{\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      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    &.justify-between {\n      justify-content: space-between;\n    }\n\n    p {\n      margin: 0;\n      color: var(--dark-opacity-50);\n    }\n\n    /*a {\n      margin: 0;\n      color: var(--primary);\n      text-decoration: none;\n      cursor: pointer;\n      &:hover,:focus,:active{\n        color: var(--primary-hover) !important;\n      }\n    }*/\n  }\n\n  .input {\n    position: relative;\n    .hiddenInput{\n        opacity: 0;\n        user-select: none;\n        pointer-events: none;\n        position: absolute;\n        left: 0;\n        width: 0;\n    }\n    .inputIcon {\n      position: absolute;\n      top: 50%;\n      right: 24px;\n      transform: translateY(-50%);\n      cursor: pointer;\n      div{\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      svg {\n          margin-right: 8px;\n      }\n\n      p {\n          margin: 0;\n          font:var(--caption-semi-bold-11-13);\n      }\n  }\n"])), function (props) { return props.width || '370px'; });
-exports.InputStyled = styled_components_1.default.input(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  box-sizing: border-box;\n  width: 100%;\n  height: 56px;\n  background: ", ";\n  border-radius: ", ";\n  border: ", ";\n  padding: ", ";\n  color: ", ";\n  font : var(--body-semi-bold-14-17);\n  outline: none;\n  user-select: ", ";\n  pointer-events: ", ";\n\n  &::placeholder {\n    color: ", ";\n  }\n\n  &:focus {\n    padding: 18.5px 23px !important;\n    border: 2px solid var(--primary) !important;\n    color: var(--dark) !important;\n    background: white !important;\n    &::placeholder {\n      color: var(--dark-opacity-50);\n    }\n  }\n  &:is([disabled]){\n    color: var(--dark-opacity-25);\n  }\n\n"], ["\n  box-sizing: border-box;\n  width: 100%;\n  height: 56px;\n  background: ", ";\n  border-radius: ", ";\n  border: ", ";\n  padding: ", ";\n  color: ", ";\n  font : var(--body-semi-bold-14-17);\n  outline: none;\n  user-select: ", ";\n  pointer-events: ", ";\n\n  &::placeholder {\n    color: ", ";\n  }\n\n  &:focus {\n    padding: 18.5px 23px !important;\n    border: 2px solid var(--primary) !important;\n    color: var(--dark) !important;\n    background: white !important;\n    &::placeholder {\n      color: var(--dark-opacity-50);\n    }\n  }\n  &:is([disabled]){\n    color: var(--dark-opacity-25);\n  }\n\n"])), function (props) { return props.disabled ? 'var(--dark-opacity-5)' : (props.hasError ? 'white' : 'var(--dark-opacity-3)'); }, function (props) { return props.isShowDropdown ? '8px 8px 0 0' : '8px 8px 8px 8px'; }, function (props) { return props.hasError ? '2px solid var(--red)' : '1px solid var(--dark-opacity-10)'; }, function (props) { return props.hasError ? '18.5px 23px' : '19.5px 24px'; }, function (props) { return props.hasError ? 'var(--red)' : 'var(--dark)'; }, function (props) { return props.readonly ? 'none' : 'initial'; }, function (props) { return props.readonly ? 'none' : 'initial'; }, function (props) { return props.hasError ? 'var(--red)' : 'var(--dark-opacity-50)'; });
-exports.DropdownStyled = styled_components_1.default.ul(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    border-radius: 0 0 8px 8px;\n    box-shadow: none;\n    border: 1px solid var(--dark-opacity-10);\n    overflow: auto;\n    max-height: ", ";\n    border-top: 0;\n    position: absolute;\n    top: 100%;\n    left: 0;\n    right: 0;\n    z-index: 10;\n    padding: 0;\n    margin: 0;\n    > li {\n        height: 51px;\n        padding: 0 1.5rem;\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        background-color: #fff;\n        position: relative;\n        color: var(--dark);\n        cursor: pointer;\n        box-sizing: border-box;\n        font : var(--title-bold-16-19);\n        &:not(.hasNoResult):hover{\n            background-color: var(--dark-opacity-3);\n        }\n        &.isFixedBottom{\n            color: var(--dark-opacity-50);\n            position: sticky;\n            bottom: 0;\n            left: 0;\n            right: 0;\n            z-index: 4;\n        }\n        &.hasNoResult{\n            cursor: initial;\n            height: auto;\n        }\n    }\n"], ["\n    border-radius: 0 0 8px 8px;\n    box-shadow: none;\n    border: 1px solid var(--dark-opacity-10);\n    overflow: auto;\n    max-height: ", ";\n    border-top: 0;\n    position: absolute;\n    top: 100%;\n    left: 0;\n    right: 0;\n    z-index: 10;\n    padding: 0;\n    margin: 0;\n    > li {\n        height: 51px;\n        padding: 0 1.5rem;\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        background-color: #fff;\n        position: relative;\n        color: var(--dark);\n        cursor: pointer;\n        box-sizing: border-box;\n        font : var(--title-bold-16-19);\n        &:not(.hasNoResult):hover{\n            background-color: var(--dark-opacity-3);\n        }\n        &.isFixedBottom{\n            color: var(--dark-opacity-50);\n            position: sticky;\n            bottom: 0;\n            left: 0;\n            right: 0;\n            z-index: 4;\n        }\n        &.hasNoResult{\n            cursor: initial;\n            height: auto;\n        }\n    }\n"])), function (props) { return props.dropdownMaxHeight && props.dropdownMaxHeight; });
+exports.InputStyled = styled_components_1.default.input(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  box-sizing: border-box;\n  width: 100%;\n  height: 56px;\n  background: ", ";\n  border-radius: ", ";\n  border: ", ";\n  padding: ", ";\n  color: ", ";\n  font : var(--body-semi-bold-14-17);\n  outline: none;\n  user-select: ", ";\n  pointer-events: ", ";\n  text-transform: uppercase;\n  &::placeholder {\n    color: ", ";\n    text-transform: initial;\n  }\n\n  &:focus {\n    padding: 18.5px 23px !important;\n    border: 2px solid var(--primary) !important;\n    color: var(--dark) !important;\n    background: white !important;\n    &::placeholder {\n      color: var(--dark-opacity-50);\n    }\n  }\n  &:is([disabled]){\n    color: var(--dark-opacity-25);\n  }\n\n"], ["\n  box-sizing: border-box;\n  width: 100%;\n  height: 56px;\n  background: ", ";\n  border-radius: ", ";\n  border: ", ";\n  padding: ", ";\n  color: ", ";\n  font : var(--body-semi-bold-14-17);\n  outline: none;\n  user-select: ", ";\n  pointer-events: ", ";\n  text-transform: uppercase;\n  &::placeholder {\n    color: ", ";\n    text-transform: initial;\n  }\n\n  &:focus {\n    padding: 18.5px 23px !important;\n    border: 2px solid var(--primary) !important;\n    color: var(--dark) !important;\n    background: white !important;\n    &::placeholder {\n      color: var(--dark-opacity-50);\n    }\n  }\n  &:is([disabled]){\n    color: var(--dark-opacity-25);\n  }\n\n"])), function (props) { return props.disabled ? 'var(--dark-opacity-5)' : (props.hasError ? 'white' : 'var(--dark-opacity-3)'); }, function (props) { return props.isShowDropdown ? '8px 8px 0 0' : '8px 8px 8px 8px'; }, function (props) { return props.hasError ? '2px solid var(--red)' : '1px solid var(--dark-opacity-10)'; }, function (props) { return props.hasError ? '18.5px 23px' : '19.5px 24px'; }, function (props) { return props.hasError ? 'var(--red)' : 'var(--dark)'; }, function (props) { return props.readonly ? 'none' : 'initial'; }, function (props) { return props.readonly ? 'none' : 'initial'; }, function (props) { return props.hasError ? 'var(--red)' : 'var(--dark-opacity-50)'; });
+exports.DropdownStyled = styled_components_1.default.ul(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    border-radius: 0 0 8px 8px;\n    box-shadow: none;\n    border: 1px solid var(--dark-opacity-10);\n    overflow: auto;\n    max-height: ", ";\n    border-top: 0;\n    position: absolute;\n    top: 100%;\n    left: 0;\n    right: 0;\n    z-index: 10;\n    padding: 0;\n    margin: 0;\n    > li {\n        height: 51px;\n        padding: 0 1.5rem;\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        background-color: #fff;\n        position: relative;\n        color: var(--dark);\n        cursor: pointer;\n        box-sizing: border-box;\n        font : var(--title-bold-16-19);\n        &:not(.hasNoResult):hover{\n            background-color: var(--dark-opacity-3);\n        }\n        &:is(.isSelected){\n            background-color: var(--dark-opacity-3);\n        }\n        &.isFixedBottom{\n            color: var(--dark-opacity-50);\n            position: sticky;\n            bottom: 0;\n            left: 0;\n            right: 0;\n            z-index: 4;\n        }\n        &.hasNoResult{\n            cursor: initial;\n            height: auto;\n        }\n    }\n"], ["\n    border-radius: 0 0 8px 8px;\n    box-shadow: none;\n    border: 1px solid var(--dark-opacity-10);\n    overflow: auto;\n    max-height: ", ";\n    border-top: 0;\n    position: absolute;\n    top: 100%;\n    left: 0;\n    right: 0;\n    z-index: 10;\n    padding: 0;\n    margin: 0;\n    > li {\n        height: 51px;\n        padding: 0 1.5rem;\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        background-color: #fff;\n        position: relative;\n        color: var(--dark);\n        cursor: pointer;\n        box-sizing: border-box;\n        font : var(--title-bold-16-19);\n        &:not(.hasNoResult):hover{\n            background-color: var(--dark-opacity-3);\n        }\n        &:is(.isSelected){\n            background-color: var(--dark-opacity-3);\n        }\n        &.isFixedBottom{\n            color: var(--dark-opacity-50);\n            position: sticky;\n            bottom: 0;\n            left: 0;\n            right: 0;\n            z-index: 4;\n        }\n        &.hasNoResult{\n            cursor: initial;\n            height: auto;\n        }\n    }\n"])), function (props) { return props.dropdownMaxHeight && props.dropdownMaxHeight; });
 var templateObject_1, templateObject_2, templateObject_3;

package/dist/components/InfoBox/InfoBox.js

@@ -19,7 +19,7 @@ var react_1 = require("react");
 var InfoBox_styled_1 = require("./InfoBox.styled");
 var Icon_1 = __importDefault(require("../Icon/Icon"));
 var InfoBox = function (props) {
-    var title = props.title, description = props.description, radius = props.radius;
+    var title = props.title, description = props.description, radius = props.radius, size = props.size;
     var descriptionRef = (0, react_1.useRef)(null);
     var inputRef = (0, react_1.useRef)(null);
     var _a = (0, react_1.useState)(false), alert = _a[0], setAlert = _a[1];
@@ -53,7 +53,9 @@ var InfoBox = function (props) {
             }
         });
     }, []);
-    return ((0, jsx_runtime_1.jsxs)(InfoBox_styled_1.InfoBoxStyled, __assign({ radius: radius }, { children: [(0, jsx_runtime_1.jsx)(InfoBox_styled_1.IconWrapper, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--dark)", strokeWidth: "2px", name: "InfoSquare", width: "24px", height: "24px" }) }), (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, { ref: descriptionRef, dangerouslySetInnerHTML: { __html: description } }), (0, jsx_runtime_1.jsx)(InfoBox_styled_1.AlertStyled, __assign({ visible: alert, alertLeft: alertLeft, alertTop: alertTop }, { children: "Kopyaland\u0131" })), (0, jsx_runtime_1.jsx)(InfoBox_styled_1.Input, { ref: inputRef, id: "infoBoxInput" })] })] })));
+    return ((0, jsx_runtime_1.jsxs)(InfoBox_styled_1.InfoBoxStyled, __assign({ radius: radius }, { children: [(0, jsx_runtime_1.jsx)(InfoBox_styled_1.IconWrapper, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--dark)", strokeWidth: "2px", name: "InfoSquare", width: "24px", height: "24px" }) }), (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, { "$size": size, ref: descriptionRef, dangerouslySetInnerHTML: { __html: description } }), (0, jsx_runtime_1.jsx)(InfoBox_styled_1.AlertStyled, __assign({ visible: alert, alertLeft: alertLeft, alertTop: alertTop }, { children: "Kopyaland\u0131" })), (0, jsx_runtime_1.jsx)(InfoBox_styled_1.Input, { ref: inputRef, id: "infoBoxInput" })] })] })));
+};
+InfoBox.defaultProps = {
+    size: "small"
 };
-InfoBox.defaultProps = {};
 exports.default = InfoBox;

package/dist/components/InfoBox/InfoBox.styled.js

@@ -14,7 +14,7 @@ exports.InfoBoxStyled = styled_components_1.default.div(templateObject_1 || (tem
 exports.IconWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: block;\n  margin-right: 1rem;\n  svg{\n    display: block;\n  }\n"], ["\n  display: block;\n  margin-right: 1rem;\n  svg{\n    display: block;\n  }\n"])));
 exports.TextWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    position: relative;\n"], ["\n    position: relative;\n"])));
 exports.Title = styled_components_1.default.strong(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: block;\n  margin: 0;\n  font:var(--caption-bold-12-15);\n"], ["\n  display: block;\n  margin: 0;\n  font:var(--caption-bold-12-15);\n"])));
-exports.Description = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: block;\n  margin: 0;\n  font:var(--caption-medium-12-15);\n  b{\n    font-weight: 700;\n  }\n  .bottom{\n    p{\n      font-weight: 700;\n      color: var(--dark);\n      display: inline-block;\n      margin: 0;\n      position: relative;\n      &:is(.block){\n        display: none;\n        @media only screen and ", " {\n          display: block;\n        }\n      }\n      &:nth-child(3){\n        margin-left: 0.5rem;\n        padding-left: 0.5rem;\n        @media only screen and ", " {\n          margin: 0;\n          padding: 0;\n        }\n        &:before{\n          content: \"\";\n          position: absolute;\n          top: 50%;\n          transform: translateY(-50%);\n          left: 0;\n          height: 9px;\n          width: 1px;\n          background-color: var(--dark);\n          @media only screen and ", " {\n            display: none;\n          }\n        }\n      }\n      span{\n        color: var(--primary);\n        cursor: pointer;\n      }\n    }\n  }\n"], ["\n  display: block;\n  margin: 0;\n  font:var(--caption-medium-12-15);\n  b{\n    font-weight: 700;\n  }\n  .bottom{\n    p{\n      font-weight: 700;\n      color: var(--dark);\n      display: inline-block;\n      margin: 0;\n      position: relative;\n      &:is(.block){\n        display: none;\n        @media only screen and ", " {\n          display: block;\n        }\n      }\n      &:nth-child(3){\n        margin-left: 0.5rem;\n        padding-left: 0.5rem;\n        @media only screen and ", " {\n          margin: 0;\n          padding: 0;\n        }\n        &:before{\n          content: \"\";\n          position: absolute;\n          top: 50%;\n          transform: translateY(-50%);\n          left: 0;\n          height: 9px;\n          width: 1px;\n          background-color: var(--dark);\n          @media only screen and ", " {\n            display: none;\n          }\n        }\n      }\n      span{\n        color: var(--primary);\n        cursor: pointer;\n      }\n    }\n  }\n"])), devices_1.devices.sm, devices_1.devices.sm, devices_1.devices.sm);
+exports.Description = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: block;\n  margin: 0;\n  font:", ";\n  b{\n    font-weight: 700;\n  }\n  .bottom{\n    p{\n      font-weight: 700;\n      color: var(--dark);\n      display: inline-block;\n      margin: 0;\n      position: relative;\n      &:is(.block){\n        display: none;\n        @media only screen and ", " {\n          display: block;\n        }\n      }\n      &:nth-child(3){\n        margin-left: 0.5rem;\n        padding-left: 0.5rem;\n        @media only screen and ", " {\n          margin: 0;\n          padding: 0;\n        }\n        &:before{\n          content: \"\";\n          position: absolute;\n          top: 50%;\n          transform: translateY(-50%);\n          left: 0;\n          height: 9px;\n          width: 1px;\n          background-color: var(--dark);\n          @media only screen and ", " {\n            display: none;\n          }\n        }\n      }\n      span{\n        color: var(--primary);\n        cursor: pointer;\n      }\n    }\n  }\n"], ["\n  display: block;\n  margin: 0;\n  font:", ";\n  b{\n    font-weight: 700;\n  }\n  .bottom{\n    p{\n      font-weight: 700;\n      color: var(--dark);\n      display: inline-block;\n      margin: 0;\n      position: relative;\n      &:is(.block){\n        display: none;\n        @media only screen and ", " {\n          display: block;\n        }\n      }\n      &:nth-child(3){\n        margin-left: 0.5rem;\n        padding-left: 0.5rem;\n        @media only screen and ", " {\n          margin: 0;\n          padding: 0;\n        }\n        &:before{\n          content: \"\";\n          position: absolute;\n          top: 50%;\n          transform: translateY(-50%);\n          left: 0;\n          height: 9px;\n          width: 1px;\n          background-color: var(--dark);\n          @media only screen and ", " {\n            display: none;\n          }\n        }\n      }\n      span{\n        color: var(--primary);\n        cursor: pointer;\n      }\n    }\n  }\n"])), function (props) { return props.$size === "small" ? "var(--caption-medium-12-15)" : "var(--body-medium-14-17)"; }, devices_1.devices.sm, devices_1.devices.sm, devices_1.devices.sm);
 exports.AlertStyled = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  position: absolute;\n  left: ", "px;\n  top: ", "px;\n  height: 28px;\n  border-radius: 8px;\n  background-color: white;\n  box-shadow: 0 6px 30px 0 #EAE9F0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0 1rem;\n  user-select: none;\n  pointer-events: none;\n  transform: translateX(-100%) translateY(-100%);\n  transition: opacity .4s ease;\n  opacity: ", ";\n  font:var(--caption-medium-10-12);\n"], ["\n  position: absolute;\n  left: ", "px;\n  top: ", "px;\n  height: 28px;\n  border-radius: 8px;\n  background-color: white;\n  box-shadow: 0 6px 30px 0 #EAE9F0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0 1rem;\n  user-select: none;\n  pointer-events: none;\n  transform: translateX(-100%) translateY(-100%);\n  transition: opacity .4s ease;\n  opacity: ", ";\n  font:var(--caption-medium-10-12);\n"])), function (props) { return props.alertLeft; }, function (props) { return props.alertTop - 5; }, function (props) { return props.visible ? '1' : '0'; });
 exports.Input = styled_components_1.default.input(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  position: absolute;\n  opacity: 0;\n  user-select: none;\n  pointer-events: none;\n"], ["\n  position: absolute;\n  opacity: 0;\n  user-select: none;\n  pointer-events: none;\n"])));
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

package/dist/components/InfoBox/props.js

@@ -1,2 +1,4 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.sizes = void 0;
+exports.sizes = ['small', 'medium'];

package/dist/components/SelectBox/SelectBox.js

@@ -54,6 +54,9 @@ var SelectBox = (0, react_1.forwardRef)(function (props, ref) {
     };
     var Input = function (props) { return (0, jsx_runtime_1.jsx)(react_select_1.components.Input, __assign({}, props, { autoComplete: autoComplete })); };
     var DropdownIndicator = function (props) { return (0, jsx_runtime_1.jsx)("div", __assign({ className: "customSelect__indicator customSelect__dropdown-indicator" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--dark)", strokeWidth: "3px", name: "ArrowDown", width: "16px", height: "16px" }) })); };
-    return ((0, jsx_runtime_1.jsxs)(SelectBox_styled_1.Container, __assign({ width: props.width, hasError: hasError, maxOptionListHeight: maxOptionListHeight, hasShowDropdownIcon: hasShowDropdownIcon }, { children: [(props === null || props === void 0 ? void 0 : props.label) && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "top" }, { children: (0, jsx_runtime_1.jsx)("p", { children: props === null || props === void 0 ? void 0 : props.label }) }))), (0, jsx_runtime_1.jsx)("div", __assign({ className: "select" }, { children: isAsync ? ((0, jsx_runtime_1.jsx)(async_1.default, __assign({ components: { Option: formatOptionLabel, Input: Input, DropdownIndicator: DropdownIndicator }, options: options, instanceId: instanceId, filterOption: filterOption, isSearchable: isSearchable, name: name, menuIsOpen: menuIsOpen, onChange: onChange, classNamePrefix: "customSelect", className: (0, classnames_1.default)("customSelect", (_a = {}, _a['isSearchable'] = isSearchable && hasShowSearchIcon, _a), (_b = {}, _b['lightBg'] = lightBg, _b)), placeholder: placeholder, noOptionsMessage: function () { return 'Sonuç bulunamadı'; } }, props, { ref: ref }))) : ((0, jsx_runtime_1.jsx)(react_select_1.default, __assign({ components: { Option: formatOptionLabel, Input: Input, DropdownIndicator: DropdownIndicator }, options: options, instanceId: instanceId, filterOption: filterOption, isSearchable: isSearchable, name: name, menuIsOpen: menuIsOpen, onChange: onChange, classNamePrefix: "customSelect", className: (0, classnames_1.default)("customSelect", (_c = {}, _c['isSearchable'] = isSearchable && hasShowSearchIcon, _c), (_d = {}, _d['lightBg'] = lightBg, _d)), placeholder: placeholder, noOptionsMessage: function () { return 'Sonuç bulunamadı'; } }, props, { ref: ref }))) })), hasError && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "error" }, { children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ErrorIcon" }), (0, jsx_runtime_1.jsx)("p", { children: errorMessage })] })))] })));
+    var MenuList = function (props) {
+        return ((0, jsx_runtime_1.jsx)(react_select_1.components.MenuList, __assign({}, props, { children: props.children })));
+    };
+    return ((0, jsx_runtime_1.jsxs)(SelectBox_styled_1.Container, __assign({ width: props.width, hasError: hasError, maxOptionListHeight: maxOptionListHeight, hasShowDropdownIcon: hasShowDropdownIcon }, { children: [(props === null || props === void 0 ? void 0 : props.label) && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "top" }, { children: (0, jsx_runtime_1.jsx)("p", { children: props === null || props === void 0 ? void 0 : props.label }) }))), (0, jsx_runtime_1.jsx)("div", __assign({ className: "select" }, { children: isAsync ? ((0, jsx_runtime_1.jsx)(async_1.default, __assign({ components: { Option: formatOptionLabel, Input: Input, DropdownIndicator: DropdownIndicator, MenuList: MenuList }, options: options, instanceId: instanceId, filterOption: filterOption, isSearchable: isSearchable, name: name, menuIsOpen: menuIsOpen, onChange: onChange, classNamePrefix: "customSelect", className: (0, classnames_1.default)("customSelect", (_a = {}, _a['isSearchable'] = isSearchable && hasShowSearchIcon, _a), (_b = {}, _b['lightBg'] = lightBg, _b)), placeholder: placeholder, noOptionsMessage: function () { return 'Sonuç bulunamadı'; } }, props, { ref: ref }))) : ((0, jsx_runtime_1.jsx)(react_select_1.default, __assign({ components: { Option: formatOptionLabel, Input: Input, DropdownIndicator: DropdownIndicator, MenuList: MenuList }, options: options, instanceId: instanceId, filterOption: filterOption, isSearchable: isSearchable, name: name, menuIsOpen: menuIsOpen, onChange: onChange, classNamePrefix: "customSelect", className: (0, classnames_1.default)("customSelect", (_c = {}, _c['isSearchable'] = isSearchable && hasShowSearchIcon, _c), (_d = {}, _d['lightBg'] = lightBg, _d)), placeholder: placeholder, noOptionsMessage: function () { return 'Sonuç bulunamadı'; } }, props, { ref: ref }))) })), hasError && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "error" }, { children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ErrorIcon" }), (0, jsx_runtime_1.jsx)("p", { children: errorMessage })] })))] })));
 });
 exports.default = SelectBox;

package/dist/utils/genericUtils.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.replaceTRtoEn = void 0;
+var replaceTRtoEn = function (text) {
+    return text
+        .replace(/Ğ/gim, 'g')
+        .replace(/Ü/gim, 'u')
+        .replace(/Ş/gim, 's')
+        .replace(/I/gim, 'i')
+        .replace(/İ/gim, 'i')
+        .replace(/Ö/gim, 'o')
+        .replace(/Ç/gim, 'c')
+        .replace(/ğ/gim, 'g')
+        .replace(/ü/gim, 'u')
+        .replace(/ş/gim, 's')
+        .replace(/ı/gim, 'i')
+        .replace(/ö/gim, 'o')
+        .replace(/ç/gim, 'c')
+        .replace(/i̇/gim, 'i');
+};
+exports.replaceTRtoEn = replaceTRtoEn;

package/package.json

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