krl-alfred 2.20.6 → 2.20.7

package/dist/components/CouponCode/CouponCode.js

@@ -42,6 +42,6 @@ var CouponCode = function (_a) {
         setIsExpanded(expanded);
     }, [expanded]);
     var toggleExpand = function () { return setIsExpanded(function (prevState) { return !prevState; }); };
-    return ((0, jsx_runtime_1.jsxs)(CouponCode_styled_1.CouponCodeStyled, __assign({ "$expanded": isExpanded }, other, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ onClick: toggleExpand, className: "header" }, { children: [(0, jsx_runtime_1.jsx)("strong", __assign({ className: "title" }, { children: title })), (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowSmallDown" })] })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "body" }, { children: [(0, jsx_runtime_1.jsx)(Input_1.default, { disabled: isInputDisabled, name: name, onChange: onChange, hasError: hasError, errorMessage: errorMessage, value: value, autoFocus: autoFocus, label: "", width: "auto", placeholder: placeholder, hasCopyButton: false }), (0, jsx_runtime_1.jsx)(Button_1.default, __assign({ width: buttonWidth, isLoading: isButtonLoading, disabled: buttonDisabled, size: "big", variant: buttonVariant }, { children: buttonText }))] }))] })));
+    return ((0, jsx_runtime_1.jsxs)(CouponCode_styled_1.CouponCodeStyled, __assign({ "$expanded": isExpanded, "$hasError": hasError }, other, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ onClick: toggleExpand, className: "header" }, { children: [(0, jsx_runtime_1.jsx)("strong", __assign({ className: "title" }, { children: title })), (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowSmallDown" })] })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "body" }, { children: [(0, jsx_runtime_1.jsxs)(CouponCode_styled_1.CouponCodeFields, __assign({ "$hasError": hasError }, { children: [(0, jsx_runtime_1.jsx)(Input_1.default, { disabled: isInputDisabled, name: name, onChange: onChange, hasError: hasError, value: value, autoFocus: autoFocus, label: "", width: "auto", placeholder: placeholder, hasCopyButton: false }), (0, jsx_runtime_1.jsx)(Button_1.default, __assign({ width: buttonWidth, isLoading: isButtonLoading, disabled: buttonDisabled, size: "big", variant: buttonVariant }, { children: buttonText }))] })), hasError && errorMessage && ((0, jsx_runtime_1.jsxs)(CouponCode_styled_1.CouponCodeError, { children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { name: "SwitchPassive" }), (0, jsx_runtime_1.jsx)("p", { children: errorMessage })] }))] }))] })));
 };
 exports.default = CouponCode;

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

@@ -1,3 +1,5 @@
 /// <reference types="react" />
 import { CouponCodeStyledProps } from "./props";
-export declare const CouponCodeStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$expanded"> & CouponCodeStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$expanded"> & CouponCodeStyledProps, never>>> & string;
+export declare const CouponCodeStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof CouponCodeStyledProps> & CouponCodeStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof CouponCodeStyledProps> & CouponCodeStyledProps, never>>> & string;
+export declare const CouponCodeFields: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$hasError"> & Pick<CouponCodeStyledProps, "$hasError">, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$hasError"> & Pick<CouponCodeStyledProps, "$hasError">, never>>> & string;
+export declare const CouponCodeError: 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/CouponCode/CouponCode.styled.js

@@ -7,7 +7,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CouponCodeStyled = void 0;
+exports.CouponCodeError = exports.CouponCodeFields = exports.CouponCodeStyled = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
-exports.CouponCodeStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding: 0;\n  border-radius: 0.5rem;\n  background-color: var(--dark-opacity-3);\n  .header{\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    cursor: pointer;\n    padding: 1rem;\n    height: 1.5rem;\n    box-sizing: content-box;\n    .title{\n      font:var(--body-bold-14-17);\n      display: block;\n    }\n    svg{\n      transition: all .2s ease;\n      transform: ", ";\n      color: var(--primary);\n    }\n  }\n  .body{\n    padding: ", " ;\n    transition: all .2s ease;\n    position: relative;\n    overflow: hidden;\n    display: grid;\n    align-items: flex-start;\n    justify-content: space-between;\n    grid-template-columns: 1fr auto;\n    max-height: ", ";\n    /*input{\n      background-color: white;\n    }*/\n    button{\n      margin-left: 1rem;\n    }\n  }\n"], ["\n  padding: 0;\n  border-radius: 0.5rem;\n  background-color: var(--dark-opacity-3);\n  .header{\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    cursor: pointer;\n    padding: 1rem;\n    height: 1.5rem;\n    box-sizing: content-box;\n    .title{\n      font:var(--body-bold-14-17);\n      display: block;\n    }\n    svg{\n      transition: all .2s ease;\n      transform: ", ";\n      color: var(--primary);\n    }\n  }\n  .body{\n    padding: ", " ;\n    transition: all .2s ease;\n    position: relative;\n    overflow: hidden;\n    display: grid;\n    align-items: flex-start;\n    justify-content: space-between;\n    grid-template-columns: 1fr auto;\n    max-height: ", ";\n    /*input{\n      background-color: white;\n    }*/\n    button{\n      margin-left: 1rem;\n    }\n  }\n"])), function (props) { return props.$expanded ? 'rotate(180deg)' : 'none'; }, function (props) { return props.$expanded ? '0 1rem 1rem 1rem' : '0 1rem 0 1rem'; }, function (props) { return props.$expanded ? '96px' : '0'; });
-var templateObject_1;
+exports.CouponCodeStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding: 0;\n  border-radius: 0.5rem;\n  background-color: var(--dark-opacity-3);\n  .header{\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    cursor: pointer;\n    padding: 1rem;\n    height: 1.5rem;\n    box-sizing: content-box;\n    .title{\n      font:var(--body-bold-14-17);\n      display: block;\n    }\n    svg{\n      transition: all .2s ease;\n      transform: ", ";\n      color: var(--primary);\n    }\n  }\n  .body{\n    padding: ", " ;\n    transition: all .2s ease;\n    position: relative;\n    overflow: hidden;\n    display: flex;\n    flex-direction: column;\n    max-height: ", ";\n  }\n"], ["\n  padding: 0;\n  border-radius: 0.5rem;\n  background-color: var(--dark-opacity-3);\n  .header{\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    cursor: pointer;\n    padding: 1rem;\n    height: 1.5rem;\n    box-sizing: content-box;\n    .title{\n      font:var(--body-bold-14-17);\n      display: block;\n    }\n    svg{\n      transition: all .2s ease;\n      transform: ", ";\n      color: var(--primary);\n    }\n  }\n  .body{\n    padding: ", " ;\n    transition: all .2s ease;\n    position: relative;\n    overflow: hidden;\n    display: flex;\n    flex-direction: column;\n    max-height: ", ";\n  }\n"])), function (props) { return props.$expanded ? 'rotate(180deg)' : 'none'; }, function (props) { return props.$expanded ? '0 1rem 1rem 1rem' : '0 1rem 0 1rem'; }, function (props) { return props.$expanded ? (props.$hasError ? '140px' : '96px') : '0'; });
+exports.CouponCodeFields = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: grid;\n  align-items: flex-start;\n  justify-content: space-between;\n  grid-template-columns: 1fr auto;\n\n  button {\n    margin-left: 1rem;\n  }\n"], ["\n  display: grid;\n  align-items: flex-start;\n  justify-content: space-between;\n  grid-template-columns: 1fr auto;\n\n  button {\n    margin-left: 1rem;\n  }\n"])));
+exports.CouponCodeError = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\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  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"])));
+var templateObject_1, templateObject_2, templateObject_3;

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

@@ -20,6 +20,7 @@ export interface CouponCode {
 }
 export interface CouponCodeStyledProps {
     $expanded?: boolean;
+    $hasError?: boolean;
 }
 export declare const CouponCodeDefault: CouponCode;
 export type CouponCodeProps = typeof CouponCodeDefault;

package/dist/components/Input/Input.js

@@ -61,6 +61,9 @@ var Input = function (_a) {
         return new Date(value);
     }), startDate = _11[0], setStartDate = _11[1];
     var inputRef = (0, react_1.useRef)(null);
+    var datePickerRef = (0, react_1.useRef)(null);
+    var dateInputRef = (0, react_1.useRef)(null);
+    var dateBlurTimeoutRef = (0, react_1.useRef)([]);
     var t = (0, react_i18next_1.useTranslation)().t;
     var language = i18n_1.default.language;
     (0, react_1.useEffect)(function () {
@@ -103,26 +106,62 @@ var Input = function (_a) {
         setAlert(true);
         inputRef.current.blur();
     };
-    var CustomDateInput = (0, react_1.forwardRef)(function (props, ref) {
-        // DatePicker ISO formatında ("yyyy-MM-dd") value gönderir
-        // Biz bunu format'a göre formatlayıp gösteririz
-        var displayValue = '';
-        if (props.value && format) {
-            try {
-                // ISO formatındaki değeri parse et ve format'a göre göster
-                var date = (0, date_fns_1.parse)(props.value, "yyyy-MM-dd", new Date());
-                displayValue = (0, date_fns_1.format)(date, format);
+    var mergeInputRefs = function () {
+        var refs = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            refs[_i] = arguments[_i];
+        }
+        return function (node) {
+            refs.forEach(function (ref) {
+                if (!ref)
+                    return;
+                if (typeof ref === "function") {
+                    ref(node);
+                }
+                else {
+                    ref.current = node;
+                }
+            });
+        };
+    };
+    var clearScheduledDateBlur = function () {
+        dateBlurTimeoutRef.current.forEach(function (timeoutId) { return window.clearTimeout(timeoutId); });
+        dateBlurTimeoutRef.current = [];
+    };
+    var blurDateInputAfterSelect = (0, react_1.useCallback)(function () {
+        if (inline)
+            return;
+        clearScheduledDateBlur();
+        var blur = function () {
+            var _a, _b, _c, _d, _e, _f;
+            (_b = (_a = datePickerRef.current) === null || _a === void 0 ? void 0 : _a.setBlur) === null || _b === void 0 ? void 0 : _b.call(_a);
+            (_c = dateInputRef.current) === null || _c === void 0 ? void 0 : _c.blur();
+            (_f = (_e = (_d = datePickerRef.current) === null || _d === void 0 ? void 0 : _d.input) === null || _e === void 0 ? void 0 : _e.blur) === null || _f === void 0 ? void 0 : _f.call(_e);
+        };
+        [0, 10, 50].forEach(function (delay) {
+            var timeoutId = window.setTimeout(blur, delay);
+            dateBlurTimeoutRef.current.push(timeoutId);
+        });
+    }, [inline]);
+    (0, react_1.useEffect)(function () { return function () { return clearScheduledDateBlur(); }; }, []);
+    var CustomDateInput = (0, react_1.useMemo)(function () {
+        return (0, react_1.forwardRef)(function (props, ref) {
+            var displayValue = '';
+            if (props.value && format) {
+                try {
+                    var date = (0, date_fns_1.parse)(props.value, "yyyy-MM-dd", new Date());
+                    displayValue = (0, date_fns_1.format)(date, format);
+                }
+                catch (_a) {
+                    displayValue = inputValue || '';
+                }
             }
-            catch (_a) {
-                // Parse edilemezse inputValue'yu kullan
+            else {
                 displayValue = inputValue || '';
             }
-        }
-        else {
-            displayValue = inputValue || '';
-        }
-        return ((0, jsx_runtime_1.jsx)(Input_styled_1.InputStyled, __assign({ ref: ref, "$hasError": hasError, "$hasIcon": (isClearable && inputValue) || ["password", "date"].includes(type) || hasCopyButton || infoText, "$isCalendarOpen": isCalendarOpen }, props, { value: displayValue })));
-    });
+            return ((0, jsx_runtime_1.jsx)(Input_styled_1.InputStyled, __assign({ ref: mergeInputRefs(ref, dateInputRef), "$hasError": hasError, "$hasIcon": (isClearable && inputValue) || ["password", "date"].includes(type) || hasCopyButton || infoText, "$isCalendarOpen": isCalendarOpen }, props, { value: displayValue })));
+        });
+    }, [format, hasCopyButton, hasError, infoText, inputValue, isCalendarOpen, isClearable, type]);
     var handleClearValue = function () {
         setInputValue(null);
         inputRef.current.value = null;
@@ -132,7 +171,7 @@ var Input = function (_a) {
             onClear();
     };
     return (0, jsx_runtime_1.jsxs)(Input_styled_1.Container, __assign({ "$width": width }, { children: [label && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: (0, classnames_1.default)("top", (_b = {}, _b["justify-between"] = customLinkText, _b)) }, { children: [(0, jsx_runtime_1.jsx)("label", __assign({ htmlFor: id }, { 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: [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, { placeholderText: placeholder, disabled: disabled, name: name, readOnly: readOnly, autoFocus: autoFocus, onChange: function (date, event) {
+                        : type === 'date' ? ((0, jsx_runtime_1.jsx)(Input_styled_1.DatePickerWrapperStyled, __assign({ "$inline": inline }, { children: (0, jsx_runtime_1.jsx)(react_datepicker_1.default, { placeholderText: placeholder, disabled: disabled, name: name, readOnly: readOnly, autoFocus: autoFocus, onChange: function (date) {
                                     if (date) {
                                         setStartDate(date);
                                         // DatePicker'dan gelen Date objesini format'a göre formatla
@@ -145,23 +184,24 @@ var Input = function (_a) {
                                         setInputValue(null);
                                         onChange(null);
                                     }
-                                    setTimeout(function () {
-                                        var _a, _b;
-                                        (_b = (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.input) === null || _b === void 0 ? void 0 : _b.blur();
-                                    }, 10);
-                                }, selected: startDate, ref: inputRef, dateFormat: "yyyy-MM-dd", locale: language === "tr" ? locale_1.tr : locale_1.enGB, customInput: (0, jsx_runtime_1.jsx)(CustomDateInput, {}), 
+                                }, onSelect: function () {
+                                    blurDateInputAfterSelect();
+                                }, selected: startDate, ref: datePickerRef, dateFormat: "yyyy-MM-dd", locale: language === "tr" ? locale_1.tr : locale_1.enGB, customInput: (0, jsx_runtime_1.jsx)(CustomDateInput, {}), 
                                 //customInput={<InputStyled $hasError={hasError} id={id}/>}
                                 inline: inline, minDate: minDate, maxDate: maxDate, filterDate: filterDate, onCalendarOpen: function () {
                                     setIsCalendarOpen(true);
                                     if (onCalendarOpen) {
                                         onCalendarOpen();
                                     }
-                                }, onCalendarClose: function () { return setIsCalendarOpen(false); }, onBlur: function () { return setIsCalendarOpen(false); }, renderCustomHeader: function (_a) {
+                                }, onCalendarClose: function () {
+                                    setIsCalendarOpen(false);
+                                    blurDateInputAfterSelect();
+                                }, onBlur: function () { return setIsCalendarOpen(false); }, renderCustomHeader: function (_a) {
                                     var monthDate = _a.monthDate, customHeaderCount = _a.customHeaderCount, decreaseMonth = _a.decreaseMonth, increaseMonth = _a.increaseMonth, decreaseYear = _a.decreaseYear, increaseYear = _a.increaseYear, prevMonthButtonDisabled = _a.prevMonthButtonDisabled, nextMonthButtonDisabled = _a.nextMonthButtonDisabled, prevYearButtonDisabled = _a.prevYearButtonDisabled, nextYearButtonDisabled = _a.nextYearButtonDisabled;
                                     return ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "headerTopContent" }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "leftButtons" }, { children: [(0, jsx_runtime_1.jsx)("button", __assign({ "aria-label": "Previous Year", className: "react-datepicker__navigation react-datepicker__navigation--previous", onClick: decreaseYear, type: "button", disabled: prevYearButtonDisabled }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "CalenderArrowleftsmall" }) })), (0, jsx_runtime_1.jsx)("button", __assign({ "aria-label": "Previous Month", className: "react-datepicker__navigation react-datepicker__navigation--previous", onClick: decreaseMonth, type: "button", disabled: prevMonthButtonDisabled }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowSmallLeft" }) }))] })), (0, jsx_runtime_1.jsxs)("span", __assign({ className: "react-datepicker__current-month" }, { children: [monthDate.toLocaleString(language === "tr" ? "tr-TR" : "en-GB", { month: "long" }), ", ", monthDate.toLocaleString(language === "tr" ? "tr-TR" : "en-GB", { year: "numeric" })] })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "rightButtons" }, { children: [(0, jsx_runtime_1.jsx)("button", __assign({ "aria-label": "Next Month", className: "react-datepicker__navigation react-datepicker__navigation--next", onClick: increaseMonth, type: "button", disabled: nextMonthButtonDisabled }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowSmallRight" }) })), (0, jsx_runtime_1.jsx)("button", __assign({ "aria-label": "Next Year", className: "react-datepicker__navigation react-datepicker__navigation--next", onClick: increaseYear, type: "button", disabled: nextYearButtonDisabled }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Calenderarrowrightsmall" }) }))] }))] })));
                                 } }) }))) : ((0, jsx_runtime_1.jsx)(Input_styled_1.InputStyled, __assign({ ref: inputRef, type: inputType, "$hasError": hasError, disabled: disabled, onChange: function (e) {
                                 onChange(e);
                                 setInputValue(e.currentTarget.value);
-                            }, name: name, placeholder: placeholder, readOnly: readOnly, autoFocus: autoFocus, value: inputValue, id: id, maxLength: maxLength, "$hasIcon": (isClearable && inputValue) || ["password", "date"].includes(type) || hasCopyButton || infoText }, 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 && (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 })] }))] }));
+                            }, name: name, placeholder: placeholder, readOnly: readOnly, autoFocus: autoFocus, value: inputValue, id: id, maxLength: maxLength, "$hasIcon": (isClearable && inputValue) || ["password", "date"].includes(type) || hasCopyButton || infoText }, 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 })] }))] }));
 };
 exports.default = Input;

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

@@ -12,7 +12,7 @@ var styled_components_1 = __importDefault(require("styled-components"));
 var devices_1 = require("../../constants/devices");
 exports.BadgeWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    margin: 0 auto 1rem 0;\n    grid-column-start: 1;\n    grid-column-end: 4;\n    width: 100%;\n    text-align: right;\n    height: 17px;\n\n    > * {\n        vertical-align: super;\n        display: inline-block;\n    }\n"], ["\n    margin: 0 auto 1rem 0;\n    grid-column-start: 1;\n    grid-column-end: 4;\n    width: 100%;\n    text-align: right;\n    height: 17px;\n\n    > * {\n        vertical-align: super;\n        display: inline-block;\n    }\n"])));
 exports.ProductCardCheckboxContent = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    height: 64px;\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n    ", "\n\n    > label > div {\n        margin-right: 24px;\n\n        @media only screen and ", " {\n            margin-right: 8px;\n            width: 16px;\n            height: 16px;\n        }\n    }\n"], ["\n    height: 64px;\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n    ", "\n\n    > label > div {\n        margin-right: 24px;\n\n        @media only screen and ", " {\n            margin-right: 8px;\n            width: 16px;\n            height: 16px;\n        }\n    }\n"])), function (props) { return props.$hidden && "display: none;"; }, devices_1.devices.md);
-exports.ProductCardImg = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    width: 64px;\n    height: 64px;\n    border: 1px solid var(--dark-opacity-5);\n    border-radius: 0.5rem;\n    position: relative;\n    margin-right: 16px;\n    overflow: hidden;\n    box-sizing: border-box;\n\n    > * {\n        display: block;\n        position: absolute;\n        inset: 0;\n        width: 100%;\n        height: 100%;\n        object-fit: cover;\n        object-position: center center;\n    }\n"], ["\n    width: 64px;\n    height: 64px;\n    border: 1px solid var(--dark-opacity-5);\n    border-radius: 0.5rem;\n    position: relative;\n    margin-right: 16px;\n    overflow: hidden;\n    box-sizing: border-box;\n\n    > * {\n        display: block;\n        position: absolute;\n        inset: 0;\n        width: 100%;\n        height: 100%;\n        object-fit: cover;\n        object-position: center center;\n    }\n"])));
+exports.ProductCardImg = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    width: 64px;\n    height: 64px;\n    border: 1px solid var(--dark-opacity-5);\n    border-radius: 0.5rem;\n    position: relative;\n    margin-right: 16px;\n    overflow: hidden;\n    box-sizing: border-box;\n\n    > * {\n        display: block;\n        position: absolute;\n        inset: 0.375rem;\n        width: calc(100% - 0.75rem);\n        height: calc(100% - 0.75rem);\n        object-fit: cover;\n        object-position: center center;\n        border-radius: 0.5rem;\n    }\n"], ["\n    width: 64px;\n    height: 64px;\n    border: 1px solid var(--dark-opacity-5);\n    border-radius: 0.5rem;\n    position: relative;\n    margin-right: 16px;\n    overflow: hidden;\n    box-sizing: border-box;\n\n    > * {\n        display: block;\n        position: absolute;\n        inset: 0.375rem;\n        width: calc(100% - 0.75rem);\n        height: calc(100% - 0.75rem);\n        object-fit: cover;\n        object-position: center center;\n        border-radius: 0.5rem;\n    }\n"])));
 exports.ProductCardText = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n"], ["\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n"])));
 exports.ProductCardTitle = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    min-height: 64px;\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n    text-align: start;\n    font: ", ";\n\n    @media only screen and ", " {\n        font: var(--body-semi-bold-14-17);\n    }\n"], ["\n    min-height: 64px;\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n    text-align: start;\n    font: ", ";\n\n    @media only screen and ", " {\n        font: var(--body-semi-bold-14-17);\n    }\n"])), function (props) { return props.$size === "small" ? "var(--body-semi-bold-14-17)" : "var(--title-semi-bold-16-19)"; }, devices_1.devices.md);
 exports.TooltipWrapper = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    user-select: initial !important;\n    pointer-events: initial !important;\n    padding-left: 1rem;\n"], ["\n    user-select: initial !important;\n    pointer-events: initial !important;\n    padding-left: 1rem;\n"])));

package/dist/components/ProductCardHorizontalSm/ProductCardHorizontalSm.js

@@ -37,6 +37,7 @@ var ImageContent = (0, react_1.memo)(function (_a) {
         prev.imageHeight === next.imageHeight &&
         prev.imageWidth === next.imageWidth &&
         prev.hasImageBorder === next.hasImageBorder &&
+        prev.hasImageRounded === next.hasImageRounded &&
         prev.imageComponent === next.imageComponent;
 });
 var ProductCardHorizontalSm = function (_a) {

package/dist/components/ProductCardHorizontalSm/ProductCardHorizontalSm.styled.js

@@ -24,7 +24,7 @@ exports.ProductCardHorizontalSmStyled = styled_components_1.default.div(template
         "\n      @media ((hover: hover) and (pointer: fine)) {\n        cursor: pointer;\n        &:hover {\n          ".concat(exports.Border, " {\n            border-color: var(--primary);\n            border-width: 2px;\n          }\n        }\n      }\n  ");
 }, exports.Title, exports.Title);
 exports.HorizontalSmWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  text-decoration: none;\n  display: grid;\n  grid-template-columns: auto 1fr auto;\n  align-items: center;\n  min-height: 66px;\n  padding-right: 0.5rem;\n"], ["\n  text-decoration: none;\n  display: grid;\n  grid-template-columns: auto 1fr auto;\n  align-items: center;\n  min-height: 66px;\n  padding-right: 0.5rem;\n"])));
-exports.ImgWrapper = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  border: ", ";\n  border-radius: 0.5rem;\n  position: relative;\n  overflow: hidden;\n  width: ", ";\n  height: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-right: 1rem;\n  background: white;\n  transform: translateZ(0);\n\n  img {\n    vertical-align: middle !important;\n    display: block !important;\n    object-fit: cover !important;\n    border-radius: ", " !important;\n  }\n"], ["\n  border: ", ";\n  border-radius: 0.5rem;\n  position: relative;\n  overflow: hidden;\n  width: ", ";\n  height: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-right: 1rem;\n  background: white;\n  transform: translateZ(0);\n\n  img {\n    vertical-align: middle !important;\n    display: block !important;\n    object-fit: cover !important;\n    border-radius: ", " !important;\n  }\n"])), function (props) { return (props.$hasImageBorder ? "1px solid var(--dark-opacity-5)" : "none"); }, function (props) { return (props.$imageWidth ? props.$imageWidth : "71px"); }, function (props) { return (props.$imageHeight ? props.$imageHeight : "50px"); }, function (props) { return (props.$hasImageRounded ? "4px" : "0"); });
+exports.ImgWrapper = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  border: ", ";\n  border-radius: ", ";\n  position: relative;\n  overflow: hidden;\n  width: ", ";\n  height: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-right: 1rem;\n  background: white;\n  transform: translateZ(0);\n\n  img {\n    vertical-align: middle !important;\n    display: block !important;\n    object-fit: cover !important;\n    border-radius: ", " !important;\n  }\n"], ["\n  border: ", ";\n  border-radius: ", ";\n  position: relative;\n  overflow: hidden;\n  width: ", ";\n  height: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-right: 1rem;\n  background: white;\n  transform: translateZ(0);\n\n  img {\n    vertical-align: middle !important;\n    display: block !important;\n    object-fit: cover !important;\n    border-radius: ", " !important;\n  }\n"])), function (props) { return (props.$hasImageBorder ? "1px solid var(--dark-opacity-5)" : "none"); }, function (props) { return (props.$hasImageRounded ? "0.5rem" : "0"); }, function (props) { return (props.$imageWidth ? props.$imageWidth : "71px"); }, function (props) { return (props.$imageHeight ? props.$imageHeight : "50px"); }, function (props) { return (props.$hasImageRounded ? "0.5rem" : "0"); });
 exports.TextWrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  padding-right: ", ";\n"], ["\n  padding-right: ", ";\n"])), function (props) { return (props.$hasPeriod ? "1rem" : "0.5rem"); });
 exports.PriceContent = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
     return (props === null || props === void 0 ? void 0 : props.$infoPosition) === "left"

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

@@ -13,6 +13,8 @@ export interface ProductCardHorizontalSm {
     /** Örn. `import Image from "next/image"` → `imageComponent={Image}` */
     imageComponent?: React.ElementType | null;
     hasImageBorder?: boolean;
+    /** Görsele 0.5rem border-radius uygular */
+    hasImageRounded?: boolean;
     imageWidth?: string;
     imageHeight?: string;
     infoPosition?: 'left' | 'right';
@@ -31,7 +33,6 @@ export interface ProductCardHorizontalSm {
     isDisabled?: boolean;
     imageInnerWidth?: number;
     imageInnerHeight?: number;
-    hasImageRounded?: boolean;
 }
 export interface ProductCardHorizontalSmStyledProps {
     $hasPeriod?: boolean;

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

@@ -35,6 +35,10 @@ declare const _default: {
         hasImageBorder: {
             control: string;
         };
+        hasImageRounded: {
+            control: string;
+            description: string;
+        };
         imageWidth: {
             control: string;
         };

package/dist/components/ProductCardHorizontalSm/stories/ProductCardHorizontalSm.stories.js

@@ -36,6 +36,10 @@ exports.default = {
             description: "Next.js Image — verilmezse native `img` kullanılır",
         },
         hasImageBorder: { control: "boolean" },
+        hasImageRounded: {
+            control: "boolean",
+            description: "Görsele 0.5rem border-radius uygular",
+        },
         imageWidth: { control: "text" },
         imageHeight: { control: "text" },
         imageInnerWidth: { control: "number" },

package/dist/components/ShoppingCartProduct/ShoppingCartProduct.styled.js

@@ -16,7 +16,7 @@ var svgToBase64_1 = __importDefault(require("../../utils/svgToBase64"));
 exports.ProductCardLink = styled_components_1.default.a(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    text-decoration: none;\n    color: inherit;\n"], ["\n    text-decoration: none;\n    color: inherit;\n"])));
 exports.ProductTitle = styled_components_1.default.strong(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    display: block;\n    color: var(--dark);\n    display: -webkit-box;\n    -webkit-line-clamp: 1;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n    height: 19px;\n    word-break: break-word;\n    margin-bottom: 0.5rem;\n    font: var(--title-semi-bold-16-19);\n    transition: all .2s ease;\n"], ["\n    display: block;\n    color: var(--dark);\n    display: -webkit-box;\n    -webkit-line-clamp: 1;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n    height: 19px;\n    word-break: break-word;\n    margin-bottom: 0.5rem;\n    font: var(--title-semi-bold-16-19);\n    transition: all .2s ease;\n"])));
 exports.ProductText = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    padding-right: 0.5rem;\n\n    a:hover ", " {\n        color: var(--primary-hover);\n    }\n"], ["\n    padding-right: 0.5rem;\n\n    a:hover ", " {\n        color: var(--primary-hover);\n    }\n"])), exports.ProductTitle);
-exports.ProductImage = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    width: 96px;\n    height: 96px;\n    border: 1px solid var(--dark-opacity-5);\n    border-radius: 0.5rem;\n    position: relative;\n    margin-right: 1rem;\n    overflow: hidden;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: white;\n\n    &:hover ~ ", " ", " {\n        color: var(--primary-hover);\n    }\n    img{\n        width: calc(100% - 1.5rem);\n        height: calc(100% - 1.5rem);\n        object-fit: cover;\n        border-radius: 0.5rem;\n        display: block;\n        margin: 0 auto;\n    }\n"], ["\n    width: 96px;\n    height: 96px;\n    border: 1px solid var(--dark-opacity-5);\n    border-radius: 0.5rem;\n    position: relative;\n    margin-right: 1rem;\n    overflow: hidden;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: white;\n\n    &:hover ~ ", " ", " {\n        color: var(--primary-hover);\n    }\n    img{\n        width: calc(100% - 1.5rem);\n        height: calc(100% - 1.5rem);\n        object-fit: cover;\n        border-radius: 0.5rem;\n        display: block;\n        margin: 0 auto;\n    }\n"])), exports.ProductText, exports.ProductTitle);
+exports.ProductImage = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    width: 96px;\n    height: 96px;\n    border: 1px solid var(--dark-opacity-5);\n    border-radius: 0.5rem;\n    position: relative;\n    margin-right: 1rem;\n    overflow: hidden;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: white;\n\n    &:hover ~ ", " ", " {\n        color: var(--primary-hover);\n    }\n    img{\n        width: calc(100% - 1rem);\n        height: calc(100% - 1rem);\n        object-fit: cover;\n        border-radius: 0.5rem;\n        display: block;\n        margin: 0 auto;\n    }\n"], ["\n    width: 96px;\n    height: 96px;\n    border: 1px solid var(--dark-opacity-5);\n    border-radius: 0.5rem;\n    position: relative;\n    margin-right: 1rem;\n    overflow: hidden;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: white;\n\n    &:hover ~ ", " ", " {\n        color: var(--primary-hover);\n    }\n    img{\n        width: calc(100% - 1rem);\n        height: calc(100% - 1rem);\n        object-fit: cover;\n        border-radius: 0.5rem;\n        display: block;\n        margin: 0 auto;\n    }\n"])), exports.ProductText, exports.ProductTitle);
 exports.ProductInner = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    display: grid;\n    grid-template-columns: auto 1fr auto;\n    align-items: center;\n    position: relative;\n    z-index: 5;\n"], ["\n    display: grid;\n    grid-template-columns: auto 1fr auto;\n    align-items: center;\n    position: relative;\n    z-index: 5;\n"])));
 exports.ProductPriceContent = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    display: grid;\n    align-items: ", ";\n    justify-content: flex-start;\n    grid-template-columns: ", ";\n"], ["\n    display: grid;\n    align-items: ", ";\n    justify-content: flex-start;\n    grid-template-columns: ", ";\n"])), function (props) { return props.$discountRate ? 'center' : 'end'; }, function (props) { return props.$discountRate ? 'auto 1fr' : '1fr'; });
 exports.ProductDiscountRate = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    margin-right: 0.5rem;\n    width: 48px;\n    height: 36px;\n    border-radius: 0.5rem;\n    background-color: var(--primary-opacity-10);\n    color: var(--primary);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font: var(--body-extra-bold-13-16);\n"], ["\n    margin-right: 0.5rem;\n    width: 48px;\n    height: 36px;\n    border-radius: 0.5rem;\n    background-color: var(--primary-opacity-10);\n    color: var(--primary);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font: var(--body-extra-bold-13-16);\n"])));

package/package.json

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