krl-alfred 2.20.5 → 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/OtpInput/Otp.js

@@ -142,9 +142,9 @@ var Otp = function (_a) {
             setOtpValue(event.target.value);
         }
     };
-    return (0, jsx_runtime_1.jsxs)(OtpInput_styled_1.OtpInputWrapper, { children: [(0, jsx_runtime_1.jsx)(OtpInput_styled_1.OtpSpanWrapper, __assign({ onClick: setUserFocus }, { children: Array.from({ length: inputSize }, function (_, index) { return index; }).map(function (index) { return ((0, jsx_runtime_1.jsx)(OtpInput_styled_1.OtpSpan, __assign({ active: (otpValue ? index === otpValue.length : index === 0) ||
+    return (0, jsx_runtime_1.jsxs)(OtpInput_styled_1.OtpInputWrapper, { children: [(0, jsx_runtime_1.jsx)(OtpInput_styled_1.OtpSpanWrapper, __assign({ "$inputSize": inputSize, onClick: setUserFocus }, { children: Array.from({ length: inputSize }, function (_, index) { return index; }).map(function (index) { return ((0, jsx_runtime_1.jsx)(OtpInput_styled_1.OtpSpan, __assign({ active: (otpValue ? index === otpValue.length : index === 0) ||
                         (otpValue &&
                             otpValue.length === inputSize &&
-                            index === inputSize - 1), hasError: hasError }, { children: otpValue && otpValue[index] }), index)); }) })), hasError && (0, jsx_runtime_1.jsxs)(OtpInput_styled_1.OtpError, { children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { name: "SwitchPassive" }), (0, jsx_runtime_1.jsx)("p", { children: errorMessage })] }), (0, jsx_runtime_1.jsx)("input", { type: 'tel', autoComplete: 'one-time-code', autoFocus: autoFocus, value: otpValue, maxLength: inputSize, ref: inputRef, onBlur: onInputBlur, onChange: onChange })] });
+                            index === inputSize - 1), filled: Boolean(otpValue === null || otpValue === void 0 ? void 0 : otpValue[index]), hasError: hasError }, { children: otpValue && otpValue[index] }), index)); }) })), hasError && (0, jsx_runtime_1.jsxs)(OtpInput_styled_1.OtpError, { children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { name: "SwitchPassive" }), (0, jsx_runtime_1.jsx)("p", { children: errorMessage })] }), (0, jsx_runtime_1.jsx)("input", { type: 'tel', autoComplete: 'one-time-code', autoFocus: autoFocus, value: otpValue, maxLength: inputSize, ref: inputRef, onBlur: onInputBlur, onChange: onChange })] });
 };
 exports.default = Otp;

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import { OtpSpanProps } from "./props";
+import { OtpSpanProps, OtpSpanWrapperProps } from "./props";
 export declare const OtpInputWrapper: 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 OtpSpanWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, never>>> & string;
+export declare const OtpSpanWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "$inputSize"> & OtpSpanWrapperProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "$inputSize"> & OtpSpanWrapperProps, never>>> & string;
 export declare const OtpSpan: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, keyof OtpSpanProps> & OtpSpanProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, keyof OtpSpanProps> & OtpSpanProps, never>>> & string;
 export declare const OtpError: 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/OtpInput/OtpInput.styled.js

@@ -9,12 +9,21 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.OtpError = exports.OtpSpan = exports.OtpSpanWrapper = exports.OtpInputWrapper = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
-exports.OtpInputWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  \n  input {\n    background-color: transparent;\n    border: none;\n    caret-color: transparent;\n    cursor: default;\n    height: 0;\n    opacity: 0;\n    outline: none;\n    width: 0;\n    z-index: 0;\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n  \n  input {\n    background-color: transparent;\n    border: none;\n    caret-color: transparent;\n    cursor: default;\n    height: 0;\n    opacity: 0;\n    outline: none;\n    width: 0;\n    z-index: 0;\n  }\n"])));
-exports.OtpSpanWrapper = styled_components_1.default.label(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: inline-flex;\n  gap: 18.33px;\n  justify-content: center;\n"], ["\n  display: inline-flex;\n  gap: 18.33px;\n  justify-content: center;\n"])));
-exports.OtpSpan = styled_components_1.default.span(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  border: none;\n  width: 48px !important;\n  height: 48px;\n  border-bottom: 2px solid ", ";\n  text-align: center;\n  color: ", ";\n  font: var(--headline-semi-bold-40-48);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  user-select: none;\n\n  @keyframes blink-caret {\n    from,\n    to {\n      opacity: 0;\n    }\n    50% {\n      opacity: 1;\n    }\n  }\n\n  ", "\n"], ["\n  border: none;\n  width: 48px !important;\n  height: 48px;\n  border-bottom: 2px solid ", ";\n  text-align: center;\n  color: ", ";\n  font: var(--headline-semi-bold-40-48);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  user-select: none;\n\n  @keyframes blink-caret {\n    from,\n    to {\n      opacity: 0;\n    }\n    50% {\n      opacity: 1;\n    }\n  }\n\n  ", "\n"])), function (props) { return props.hasError ? 'var(--red)' : 'var(--dark-opacity-10)'; }, function (props) { return props.hasError ? 'var(--red)' : 'var(--dark)'; }, function (_a) {
-    var active = _a.active, hasError = _a.hasError;
+exports.OtpInputWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  \n  input {\n    background-color: transparent;\n    border: none;\n    caret-color: transparent;\n    cursor: default;\n    height: 0;\n    opacity: 0;\n    outline: none;\n    width: 0;\n    z-index: 0;\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  \n  input {\n    background-color: transparent;\n    border: none;\n    caret-color: transparent;\n    cursor: default;\n    height: 0;\n    opacity: 0;\n    outline: none;\n    width: 0;\n    z-index: 0;\n  }\n"])));
+exports.OtpSpanWrapper = styled_components_1.default.label(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: grid;\n  width: 100%;\n  grid-template-columns: repeat(", ", minmax(0, 48px));\n  justify-content: center;\n  gap: ", ";\n"], ["\n  display: grid;\n  width: 100%;\n  grid-template-columns: repeat(", ", minmax(0, 48px));\n  justify-content: center;\n  gap: ", ";\n"])), function (_a) {
+    var $inputSize = _a.$inputSize;
+    return $inputSize;
+}, function (_a) {
+    var $inputSize = _a.$inputSize;
+    return ($inputSize >= 8 ? '8px' : '18.33px');
+});
+exports.OtpSpan = styled_components_1.default.span(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  border: none;\n  width: 100%;\n  height: 48px;\n  border-bottom: 2px solid ", ";\n  text-align: center;\n  color: ", ";\n  font: var(--headline-semi-bold-40-48);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  user-select: none;\n\n  @keyframes blink-caret {\n    from,\n    to {\n      opacity: 0;\n    }\n    50% {\n      opacity: 1;\n    }\n  }\n\n  ", "\n"], ["\n  border: none;\n  width: 100%;\n  height: 48px;\n  border-bottom: 2px solid ", ";\n  text-align: center;\n  color: ", ";\n  font: var(--headline-semi-bold-40-48);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  user-select: none;\n\n  @keyframes blink-caret {\n    from,\n    to {\n      opacity: 0;\n    }\n    50% {\n      opacity: 1;\n    }\n  }\n\n  ", "\n"])), function (_a) {
+    var hasError = _a.hasError, active = _a.active, filled = _a.filled;
+    return hasError ? 'var(--red)' : active || filled ? 'var(--dark)' : 'var(--dark-opacity-10)';
+}, function (props) { return props.hasError ? 'var(--red)' : 'var(--dark)'; }, function (_a) {
+    var active = _a.active;
     return active &&
-        "\n    border-color: ".concat(hasError ? 'var(--red)' : 'var(--dark)', ";\n\n    &:empty:before {\n      animation: blink-caret 0.9s step-end infinite;\n      content: \"|\";\n      color:var(--dark);\n      display: inline-flex;\n      font-weight: 100;\n      font-size: 32px;\n      margin-top: -4px;\n\n    }\n  ");
+        "\n    &:empty:before {\n      animation: blink-caret 0.9s step-end infinite;\n      content: \"|\";\n      color:var(--dark);\n      display: inline-flex;\n      font-weight: 100;\n      font-size: 32px;\n      margin-top: -4px;\n    }\n  ";
 });
 exports.OtpError = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __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"], ["\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"])));
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

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

@@ -9,6 +9,10 @@ export interface OtpInput {
 export interface OtpSpanProps {
     hasError: boolean;
     active: boolean;
+    filled: boolean;
+}
+export interface OtpSpanWrapperProps {
+    $inputSize: number;
 }
 export declare const OtpInputDefault: OtpInput;
 export type OtpInputProps = typeof OtpInputDefault;

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

@@ -18,3 +18,11 @@ export declare const Default: {
         inputSize: number;
     };
 };
+export declare const TenDigits: {
+    args: {
+        autoFocus: boolean;
+        errorMessage: string;
+        hasError: boolean;
+        inputSize: number;
+    };
+};

package/dist/components/OtpInput/stories/OtpInput.stories.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Default = void 0;
+exports.TenDigits = exports.Default = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
 var Otp_1 = __importDefault(require("../Otp"));
@@ -30,3 +30,11 @@ exports.Default = {
         inputSize: 4
     },
 };
+exports.TenDigits = {
+    args: {
+        autoFocus: true,
+        errorMessage: "Hata Mesajı",
+        hasError: false,
+        inputSize: 10
+    },
+};

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/ProductCardVertical/ProductCardVertical.styled.js

@@ -17,7 +17,7 @@ exports.ProductCardRoot = styled_components_1.default.div(templateObject_1 || (t
 });
 exports.CardLink = styled_components_1.default.a(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: block;\n  text-decoration: none;\n  color: inherit;\n"], ["\n  display: block;\n  text-decoration: none;\n  color: inherit;\n"])));
 exports.CardBody = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: relative;\n"], ["\n  position: relative;\n"])));
-exports.CartBadge = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  position: absolute;\n  left: -8px;\n  top: -8px;\n  z-index: 2;\n\n  ", "\n\n  ", "\n"], ["\n  position: absolute;\n  left: -8px;\n  top: -8px;\n  z-index: 2;\n\n  ", "\n\n  ", "\n"])), function (p) {
+exports.CartBadge = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  position: absolute;\n  left: -7px;\n  top: -7px;\n  z-index: 2;\n\n  ", "\n\n  ", "\n"], ["\n  position: absolute;\n  left: -7px;\n  top: -7px;\n  z-index: 2;\n\n  ", "\n\n  ", "\n"])), function (p) {
     return p.$isInset &&
         "\n    left: 7px;\n    top: 0;\n  ";
 }, function (p) {
@@ -26,7 +26,7 @@ exports.CartBadge = styled_components_1.default.div(templateObject_4 || (templat
 });
 exports.ImageSection = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  border-radius: 0.5rem;\n  border: 1px solid var(--dark-opacity-5);\n  background: #fff;\n  position: relative;\n  overflow: hidden;\n  height: ", ";\n  aspect-ratio: ", ";\n  box-sizing: border-box;\n  z-index: 1;\n  text-align: center;\n\n  ", "\n\n  ", "\n\n  ", "\n"], ["\n  border-radius: 0.5rem;\n  border: 1px solid var(--dark-opacity-5);\n  background: #fff;\n  position: relative;\n  overflow: hidden;\n  height: ", ";\n  aspect-ratio: ", ";\n  box-sizing: border-box;\n  z-index: 1;\n  text-align: center;\n\n  ", "\n\n  ", "\n\n  ", "\n"])), function (props) { return (props.$hasSquareFillImage ? "auto" : "150px"); }, function (props) { return (props.$hasSquareFillImage ? "1 / 1" : "auto"); }, function (props) {
     return props.$hasSquareFillImage
-        ? "\n    padding: 0;\n    background-color: var(--dark-opacity-5);\n\n    > img,\n    > *:first-child {\n      position: absolute;\n      inset: 0;\n      width: 100%;\n      height: 100%;\n      display: block;\n    }\n\n    > img,\n    > *:first-child,\n    > *:first-child img,\n    > *:first-child * {\n      width: 100% !important;\n      height: 100% !important;\n      aspect-ratio: 1 / 1 !important;\n      object-fit: cover !important;\n      max-width: 100% !important;\n    }\n  "
+        ? "\n    padding: 0;\n\n    > img,\n    > *:first-child {\n      position: absolute;\n      inset: 0.75rem;\n      width: 100%;\n      height: 100%;\n      display: block;\n    }\n\n    > img,\n    > *:first-child,\n    > *:first-child img,\n    > *:first-child * {\n      width: calc(100% - 0.75rem) !important;\n      height: calc(100% - 0.75rem) !important;\n      aspect-ratio: 1 / 1 !important;\n      object-fit: cover !important;\n      max-width: 100% !important;\n      border-radius: 0.5rem;\n    }\n  "
         : props.$hasImageOffset
             ? "\n    padding: 0.5rem;\n  "
             : "\n    padding: 0;\n    background-color: var(--dark-opacity-5);\n  ";
@@ -59,7 +59,7 @@ exports.ProductDescription = styled_components_1.default.p(templateObject_10 ||
     return props.$isResponsive &&
         responsiveSm("\n    margin-bottom: ".concat(props.$hasSingleLineDescription ? "1rem" : "1.5rem", ";\n    height: ").concat(props.$hasSingleLineDescription ? "19px" : "37px", ";\n    font: var(--title-medium-16-19);\n  "));
 });
-exports.PriceLayout = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  display: grid;\n  align-items: ", ";\n  justify-content: flex-start;\n  height: 36px;\n  grid-template-columns: ", ";\n  color: ", ";\n\n  ", "\n"], ["\n  display: grid;\n  align-items: ", ";\n  justify-content: flex-start;\n  height: 36px;\n  grid-template-columns: ", ";\n  color: ", ";\n\n  ", "\n"])), function (props) { return (props.$discountRate ? "center" : "end"); }, function (props) { return (props.$discountRate ? "auto 1fr" : "1fr"); }, function (props) { return (props.$hasOutOfStock ? "var(--dark-opacity-50)" : "var(--dark)"); }, function (props) {
+exports.PriceLayout = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  display: grid;\n  align-items: ", ";\n  justify-content: flex-start;\n  height: 34px;\n  grid-template-columns: ", ";\n  color: ", ";\n\n  ", "\n"], ["\n  display: grid;\n  align-items: ", ";\n  justify-content: flex-start;\n  height: 34px;\n  grid-template-columns: ", ";\n  color: ", ";\n\n  ", "\n"])), function (props) { return (props.$discountRate ? "center" : "end"); }, function (props) { return (props.$discountRate ? "auto 1fr" : "1fr"); }, function (props) { return (props.$hasOutOfStock ? "var(--dark-opacity-50)" : "var(--dark)"); }, function (props) {
     return props.$isResponsive &&
         responsiveSm("height: 48px;");
 });

package/dist/components/ShoppingCartProduct/ShoppingCartProduct.js

@@ -24,6 +24,10 @@ var Loader_1 = __importDefault(require("../Loader"));
 var QuantitySelector_1 = __importDefault(require("../QuantitySelector"));
 var QuantitySelector_styled_1 = require("../QuantitySelector/QuantitySelector.styled");
 var Badges_1 = __importDefault(require("../Badges"));
+var LinkComponent = function (_a) {
+    var item = _a.item, children = _a.children;
+    return item.component ? ((0, jsx_runtime_1.jsx)(item.component, { children: children })) : ((0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.ProductCardLink, __assign({ href: item.slug }, { children: children })));
+};
 var ShoppingCartProduct = function (_a) {
     var _b = _a.title, title = _b === void 0 ? props_1.ShoppingCartProductDefault.title : _b, _c = _a.priceSm, priceSm = _c === void 0 ? props_1.ShoppingCartProductDefault.priceSm : _c, _d = _a.price, price = _d === void 0 ? props_1.ShoppingCartProductDefault.price : _d, _e = _a.period, period = _e === void 0 ? props_1.ShoppingCartProductDefault.period : _e, _f = _a.oldPrice, oldPrice = _f === void 0 ? props_1.ShoppingCartProductDefault.oldPrice : _f, _g = _a.oldPriceSm, oldPriceSm = _g === void 0 ? props_1.ShoppingCartProductDefault.oldPriceSm : _g, _h = _a.oldPricePeriod, oldPricePeriod = _h === void 0 ? props_1.ShoppingCartProductDefault.oldPricePeriod : _h, _j = _a.discountRate, discountRate = _j === void 0 ? props_1.ShoppingCartProductDefault.discountRate : _j, _k = _a.slug, slug = _k === void 0 ? props_1.ShoppingCartProductDefault.slug : _k, _l = _a.image, image = _l === void 0 ? props_1.ShoppingCartProductDefault.image : _l, _m = _a.component, component = _m === void 0 ? props_1.ShoppingCartProductDefault.component : _m, _o = _a.hasRemove, hasRemove = _o === void 0 ? props_1.ShoppingCartProductDefault.hasRemove : _o, _p = _a.hasInsurance, hasInsurance = _p === void 0 ? props_1.ShoppingCartProductDefault.hasInsurance : _p, _q = _a.insuranceType, insuranceType = _q === void 0 ? props_1.ShoppingCartProductDefault.insuranceType : _q, _r = _a.insuranceText, insuranceText = _r === void 0 ? props_1.ShoppingCartProductDefault.insuranceText : _r, _s = _a.insurancePrice, insurancePrice = _s === void 0 ? props_1.ShoppingCartProductDefault.insurancePrice : _s, _t = _a.insuranceQuantity, insuranceQuantity = _t === void 0 ? props_1.ShoppingCartProductDefault.insuranceQuantity : _t, _u = _a.insuranceOption1Title, insuranceOption1Title = _u === void 0 ? props_1.ShoppingCartProductDefault.insuranceOption1Title : _u, _v = _a.insuranceOption1Description, insuranceOption1Description = _v === void 0 ? props_1.ShoppingCartProductDefault.insuranceOption1Description : _v, _w = _a.insuranceOption1Price, insuranceOption1Price = _w === void 0 ? props_1.ShoppingCartProductDefault.insuranceOption1Price : _w, _x = _a.insuranceOption1PricePeriod, insuranceOption1PricePeriod = _x === void 0 ? props_1.ShoppingCartProductDefault.insuranceOption1PricePeriod : _x, _y = _a.hasInsuranceOption1PriceLoading, hasInsuranceOption1PriceLoading = _y === void 0 ? props_1.ShoppingCartProductDefault.hasInsuranceOption1PriceLoading : _y, _z = _a.insuranceOption1TooltipText, insuranceOption1TooltipText = _z === void 0 ? props_1.ShoppingCartProductDefault.insuranceOption1TooltipText : _z, _0 = _a.insuranceOption2Title, insuranceOption2Title = _0 === void 0 ? props_1.ShoppingCartProductDefault.insuranceOption2Title : _0, _1 = _a.insuranceOption2Description, insuranceOption2Description = _1 === void 0 ? props_1.ShoppingCartProductDefault.insuranceOption2Description : _1, _2 = _a.selectedInsuranceOption, selectedInsuranceOption = _2 === void 0 ? props_1.ShoppingCartProductDefault.selectedInsuranceOption : _2, _3 = _a.onInsuranceOptionSelect, onInsuranceOptionSelect = _3 === void 0 ? props_1.ShoppingCartProductDefault.onInsuranceOptionSelect : _3, _4 = _a.upfrontAddonTitle, upfrontAddonTitle = _4 === void 0 ? props_1.ShoppingCartProductDefault.upfrontAddonTitle : _4, _5 = _a.upfrontAddonChecked, upfrontAddonChecked = _5 === void 0 ? props_1.ShoppingCartProductDefault.upfrontAddonChecked : _5, _6 = _a.onUpfrontAddonChange, onUpfrontAddonChange = _6 === void 0 ? props_1.ShoppingCartProductDefault.onUpfrontAddonChange : _6, _7 = _a.upfrontAddonDiscountBadge, upfrontAddonDiscountBadge = _7 === void 0 ? props_1.ShoppingCartProductDefault.upfrontAddonDiscountBadge : _7, _8 = _a.upfrontAddonSummaryText, upfrontAddonSummaryText = _8 === void 0 ? props_1.ShoppingCartProductDefault.upfrontAddonSummaryText : _8, _9 = _a.upfrontAddonOldPrice, upfrontAddonOldPrice = _9 === void 0 ? props_1.ShoppingCartProductDefault.upfrontAddonOldPrice : _9, _10 = _a.upfrontAddonPrice, upfrontAddonPrice = _10 === void 0 ? props_1.ShoppingCartProductDefault.upfrontAddonPrice : _10, _11 = _a.hasUpfrontAddonPriceLoading, hasUpfrontAddonPriceLoading = _11 === void 0 ? props_1.ShoppingCartProductDefault.hasUpfrontAddonPriceLoading : _11, _12 = _a.deliveryText, deliveryText = _12 === void 0 ? props_1.ShoppingCartProductDefault.deliveryText : _12, _13 = _a.quantity, quantity = _13 === void 0 ? props_1.ShoppingCartProductDefault.quantity : _13, _14 = _a.hasLoading, hasLoading = _14 === void 0 ? props_1.ShoppingCartProductDefault.hasLoading : _14, _15 = _a.deliveryDangerText, deliveryDangerText = _15 === void 0 ? props_1.ShoppingCartProductDefault.deliveryDangerText : _15, _16 = _a.hasError, hasError = _16 === void 0 ? props_1.ShoppingCartProductDefault.hasError : _16, _17 = _a.errorText, errorText = _17 === void 0 ? props_1.ShoppingCartProductDefault.errorText : _17, _18 = _a.hasInsuranceActions, hasInsuranceActions = _18 === void 0 ? props_1.ShoppingCartProductDefault.hasInsuranceActions : _18, _19 = _a.hasInsuranceTooltip, hasInsuranceTooltip = _19 === void 0 ? props_1.ShoppingCartProductDefault.hasInsuranceTooltip : _19, _20 = _a.hasDisableActions, hasDisableActions = _20 === void 0 ? props_1.ShoppingCartProductDefault.hasDisableActions : _20, _21 = _a.hasInsuranceTooltipClickAction, hasInsuranceTooltipClickAction = _21 === void 0 ? props_1.ShoppingCartProductDefault.hasInsuranceTooltipClickAction : _21, _22 = _a.insuranceTooltipText, insuranceTooltipText = _22 === void 0 ? props_1.ShoppingCartProductDefault.insuranceTooltipText : _22, _23 = _a.insuranceTooltipWidth, insuranceTooltipWidth = _23 === void 0 ? props_1.ShoppingCartProductDefault.insuranceTooltipWidth : _23, _24 = _a.onRemove, onRemove = _24 === void 0 ? props_1.ShoppingCartProductDefault.onRemove : _24, _25 = _a.onIncrement, onIncrement = _25 === void 0 ? props_1.ShoppingCartProductDefault.onIncrement : _25, _26 = _a.onDecrement, onDecrement = _26 === void 0 ? props_1.ShoppingCartProductDefault.onDecrement : _26, _27 = _a.toggleInsurance, toggleInsurance = _27 === void 0 ? props_1.ShoppingCartProductDefault.toggleInsurance : _27, _28 = _a.toggleInsuranceLogo, toggleInsuranceLogo = _28 === void 0 ? props_1.ShoppingCartProductDefault.toggleInsuranceLogo : _28, _29 = _a.hasInsurancePriceAdded, hasInsurancePriceAdded = _29 === void 0 ? props_1.ShoppingCartProductDefault.hasInsurancePriceAdded : _29, _30 = _a.hasInsuranceLoading, hasInsuranceLoading = _30 === void 0 ? props_1.ShoppingCartProductDefault.hasInsuranceLoading : _30, _31 = _a.hasDisableIncrement, hasDisableIncrement = _31 === void 0 ? props_1.ShoppingCartProductDefault.hasDisableIncrement : _31, _32 = _a.insuranceOption1TooltipTitle, insuranceOption1TooltipTitle = _32 === void 0 ? props_1.ShoppingCartProductDefault.insuranceOption1TooltipTitle : _32;
     var tooltipWrapperRef = (0, react_1.useRef)(null);
@@ -47,13 +51,9 @@ var ShoppingCartProduct = function (_a) {
             scrollableParent.scrollBy({ top: 200, behavior: "smooth" });
         }
     }, []);
-    var LinkComponent = function (_a) {
-        var item = _a.item, children = _a.children;
-        return item.component ? ((0, jsx_runtime_1.jsx)(item.component, { children: children })) : ((0, jsx_runtime_1.jsx)("a", __assign({ href: item.slug }, { children: children })));
-    };
     var showUpfrontProductPriceLoading = insuranceType === 3 && upfrontAddonChecked && hasUpfrontAddonPriceLoading;
     var hasUpfrontAddonDiscount = Boolean(upfrontAddonOldPrice);
-    return ((0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.ShoppingCartProductStyled, __assign({ "$discountRate": discountRate, "$hasDisableActions": hasDisableActions, "$hasInsurance": !hasLoading && insuranceType === 1 && toggleInsurance, "$insuranceType": insuranceType }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "inner" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "img" }, { children: (0, jsx_runtime_1.jsx)(LinkComponent, __assign({ item: { component: component, slug: slug } }, { children: image })) })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "text" }, { children: (0, jsx_runtime_1.jsxs)(LinkComponent, __assign({ item: { component: component, slug: slug } }, { children: [(0, jsx_runtime_1.jsx)("strong", __assign({ className: "productCardTitle" }, { children: title })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "productCardPriceContent" }, { children: [discountRate > 0 && (0, jsx_runtime_1.jsxs)("div", __assign({ className: "discountRate" }, { children: ["%", discountRate] })), (0, jsx_runtime_1.jsx)("div", { children: showUpfrontProductPriceLoading ? ((0, jsx_runtime_1.jsx)(Loader_1.default, { type: "wave", variant: "primary" })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [oldPrice && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "oldPrice" }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "price" }, { children: [oldPrice, oldPriceSm && (0, jsx_runtime_1.jsx)("small", { children: oldPriceSm })] })), oldPricePeriod && (0, jsx_runtime_1.jsx)("div", __assign({ className: "period" }, { children: "/".concat(oldPricePeriod) }))] }))), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "newPrice" }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "price" }, { children: [price, priceSm && (0, jsx_runtime_1.jsx)("small", { children: priceSm })] })), period && (0, jsx_runtime_1.jsx)("div", __assign({ className: "period" }, { children: "/".concat(period) }))] }))] })) })] })), (0, jsx_runtime_1.jsxs)("p", __assign({ className: "productCardDeliveryText" }, { children: [deliveryDangerText &&
-                                            (0, jsx_runtime_1.jsx)("span", __assign({ className: "productCardDeliveryDanger" }, { children: deliveryDangerText })), deliveryText] }))] })) })), (0, jsx_runtime_1.jsx)(QuantitySelector_1.default, { orientation: "vertical", quantity: quantity, onIncrement: onIncrement, onDecrement: onDecrement, onRemove: onRemove, hasRemove: hasRemove, hasLoading: hasLoading, hasError: hasError, errorText: errorText, hasDisableActions: hasDisableActions, hasDisableIncrement: hasDisableIncrement })] })), hasInsurance && insuranceType === 1 && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "insurance" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "insuranceImg", onClick: !hasLoading ? toggleInsuranceLogo : undefined }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--primary)", name: "Tamamlarsin", width: "80px", height: "9.14px" }) })), (0, jsx_runtime_1.jsxs)("div", __assign({ onClick: !hasLoading ? toggleInsurance : undefined, className: "insuranceContent" }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "text" }, { children: [insuranceText, insurancePrice && (0, jsx_runtime_1.jsx)("p", __assign({ className: "price" }, { children: hasInsuranceLoading ? (0, jsx_runtime_1.jsx)(Loader_1.default, { type: "wave", variant: "primary" }) : (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("b", { dangerouslySetInnerHTML: { __html: insurancePrice } }), (0, jsx_runtime_1.jsx)("span", __assign({ className: "quantity" }, { children: insuranceQuantity }))] }) }))] })), hasInsuranceActions && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "actions" }, { children: hasInsuranceTooltip ? ((0, jsx_runtime_1.jsx)(Tooltip_1.default, __assign({ popupRight: "-16px", hasClickAction: hasInsuranceTooltipClickAction, popupWidth: insuranceTooltipWidth, position: "bottomRight" }, { children: insuranceTooltipText }))) : (hasInsurancePriceAdded ? ((0, jsx_runtime_1.jsx)(QuantitySelector_styled_1.SelectorButton, __assign({ type: "button", "$hasShadow": true, disabled: hasLoading }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "DeleteSmall" }) }))) : ((0, jsx_runtime_1.jsx)(QuantitySelector_styled_1.SelectorButton, __assign({ type: "button", "$hasShadow": true, disabled: hasLoading }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "PlusSmall" }) })))) })))] }))] }))), hasInsurance && insuranceType === 2 && !hasLoading && ((0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.InsuranceType2Wrapper, { children: [(0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.InsuranceType2Card, __assign({ "$selected": selectedInsuranceOption === 1 }, { children: [(0, jsx_runtime_1.jsx)("input", { type: "radio", name: "insurance-option", checked: selectedInsuranceOption === 1, onChange: function () { return onInsuranceOptionSelect === null || onInsuranceOptionSelect === void 0 ? void 0 : onInsuranceOptionSelect(1); } }), (0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.InsuranceType2Header, { children: [(0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.InsuranceType2Indicator, {}), (0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.InsuranceType2Title, { children: insuranceOption1Title }), insuranceOption1TooltipText && ((0, jsx_runtime_1.jsx)("label", __assign({ ref: tooltipWrapperRef, htmlFor: "insurance-option-1-tooltip", onClick: handleTooltipWrapperClick, onMouseDown: function (e) { return e.stopPropagation(); } }, { children: (0, jsx_runtime_1.jsx)(Tooltip_1.default, __assign({ popupRight: "-16px", popupWidth: "302px", position: "bottomRight", iconWidth: "24px", iconHeight: "24px", title: insuranceOption1TooltipTitle, popupSize: "medium", hasClickAction: hasInsuranceTooltipClickAction }, { children: insuranceOption1TooltipText })) })))] }), (0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.InsuranceType2Content, { children: [(0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.InsuranceType2Description, { children: insuranceOption1Description }), (insuranceOption1Price || hasInsuranceOption1PriceLoading) && ((0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.InsuranceType2Price, { children: hasInsuranceOption1PriceLoading ? ((0, jsx_runtime_1.jsx)(Loader_1.default, { type: "wave", variant: "primary" })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.InsuranceType2PriceValue, { children: insuranceOption1Price }), insuranceOption1PricePeriod && ((0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.InsuranceType2PricePeriod, { children: [" ", insuranceOption1PricePeriod] }))] })) }))] })] })), (0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.InsuranceType2Card, __assign({ "$selected": selectedInsuranceOption === 2 }, { children: [(0, jsx_runtime_1.jsx)("input", { type: "radio", name: "insurance-option", checked: selectedInsuranceOption === 2, onChange: function () { return onInsuranceOptionSelect === null || onInsuranceOptionSelect === void 0 ? void 0 : onInsuranceOptionSelect(2); } }), (0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.InsuranceType2Header, { children: [(0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.InsuranceType2Indicator, {}), (0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.InsuranceType2Title, { children: insuranceOption2Title })] }), (0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.InsuranceType2Content, { children: (0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.InsuranceType2Description, { children: insuranceOption2Description }) })] }))] })), hasInsurance && insuranceType === 3 && !hasLoading && ((0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.UpfrontAddonWrapper, { children: (0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.UpfrontAddonCard, __assign({ htmlFor: "upfront-addon" }, { children: [(0, jsx_runtime_1.jsx)("input", { type: "checkbox", id: "upfront-addon", checked: upfrontAddonChecked, onChange: onUpfrontAddonChange }), (0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.UpfrontAddonHeader, { children: [(0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.UpfrontAddonIndicator, {}), (0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.UpfrontAddonTitle, { children: upfrontAddonTitle }), upfrontAddonDiscountBadge && ((0, jsx_runtime_1.jsx)(Badges_1.default, { layout: "text", variant: "light", title: upfrontAddonDiscountBadge }))] }), (upfrontAddonSummaryText || upfrontAddonPrice) && ((0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.UpfrontAddonPriceBlock, { children: hasUpfrontAddonDiscount ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.UpfrontAddonPriceLine, { children: [upfrontAddonSummaryText, " ", (0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.UpfrontAddonOldPrice, { children: upfrontAddonOldPrice })] }), (0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.UpfrontAddonPriceLine, { children: ["yerine \u015Fimdi", " ", (0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.UpfrontAddonDiscountedPrice, { children: upfrontAddonPrice })] })] })) : ((0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.UpfrontAddonPriceLine, { children: [upfrontAddonSummaryText, upfrontAddonPrice && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [" ", (0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.UpfrontAddonDiscountedPrice, { children: upfrontAddonPrice })] }))] })) }))] })) }))] })));
+    var hasInsurancePointer = !hasLoading && insuranceType === 1 && Boolean(toggleInsurance);
+    return ((0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.ShoppingCartProductStyled, { children: [(0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.ProductInner, { children: [(0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.ProductImage, { children: (0, jsx_runtime_1.jsx)(LinkComponent, __assign({ item: { component: component, slug: slug } }, { children: image })) }), (0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.ProductText, { children: (0, jsx_runtime_1.jsxs)(LinkComponent, __assign({ item: { component: component, slug: slug } }, { children: [(0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.ProductTitle, { children: title }), (0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.ProductPriceContent, __assign({ "$discountRate": discountRate }, { children: [discountRate > 0 && (0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.ProductDiscountRate, { children: ["%", discountRate] }), (0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.ProductPriceStack, { children: showUpfrontProductPriceLoading ? ((0, jsx_runtime_1.jsx)(Loader_1.default, { type: "wave", variant: "primary" })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [oldPrice && ((0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.ProductOldPrice, { children: [(0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.ProductOldPriceAmount, { children: [oldPrice, oldPriceSm && (0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.ProductOldPriceSmall, { children: oldPriceSm })] }), oldPricePeriod && ((0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.ProductOldPricePeriod, { children: "/".concat(oldPricePeriod) }))] })), (0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.ProductNewPrice, { children: [(0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.ProductNewPriceAmount, { children: [price, priceSm && (0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.ProductNewPriceSmall, { children: priceSm })] }), period && (0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.ProductNewPricePeriod, { children: "/".concat(period) })] })] })) })] })), (0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.ProductDeliveryText, { children: [deliveryDangerText && ((0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.ProductDeliveryDanger, { children: deliveryDangerText })), deliveryText] })] })) }), (0, jsx_runtime_1.jsx)(QuantitySelector_1.default, { orientation: "vertical", quantity: quantity, onIncrement: onIncrement, onDecrement: onDecrement, onRemove: onRemove, hasRemove: hasRemove, hasLoading: hasLoading, hasError: hasError, errorText: errorText, hasDisableActions: hasDisableActions, hasDisableIncrement: hasDisableIncrement })] }), hasInsurance && insuranceType === 1 && ((0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.InsuranceSection, __assign({ "$hasInsurance": hasInsurancePointer }, { children: [(0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.InsuranceImage, __assign({ onClick: !hasLoading ? toggleInsuranceLogo : undefined }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--primary)", name: "Tamamlarsin", width: "80px", height: "9.14px" }) })), (0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.InsuranceContent, __assign({ onClick: !hasLoading ? toggleInsurance : undefined }, { children: [(0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.InsuranceText, { children: [insuranceText, insurancePrice && ((0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.InsurancePrice, { children: hasInsuranceLoading ? ((0, jsx_runtime_1.jsx)(Loader_1.default, { type: "wave", variant: "primary" })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.InsurancePriceValue, { dangerouslySetInnerHTML: { __html: insurancePrice } }), (0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.InsuranceQuantity, { children: insuranceQuantity })] })) }))] }), hasInsuranceActions && ((0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.InsuranceActions, { children: hasInsuranceTooltip ? ((0, jsx_runtime_1.jsx)(Tooltip_1.default, __assign({ popupRight: "-16px", hasClickAction: hasInsuranceTooltipClickAction, popupWidth: insuranceTooltipWidth, position: "bottomRight" }, { children: insuranceTooltipText }))) : (hasInsurancePriceAdded ? ((0, jsx_runtime_1.jsx)(QuantitySelector_styled_1.SelectorButton, __assign({ type: "button", "$hasShadow": true, disabled: hasLoading }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "DeleteSmall" }) }))) : ((0, jsx_runtime_1.jsx)(QuantitySelector_styled_1.SelectorButton, __assign({ type: "button", "$hasShadow": true, disabled: hasLoading }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "PlusSmall" }) })))) }))] }))] }))), hasInsurance && insuranceType === 2 && !hasLoading && ((0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.InsuranceType2Wrapper, { children: [(0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.InsuranceType2Card, __assign({ "$selected": selectedInsuranceOption === 1 }, { children: [(0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.InsuranceType2RadioInput, { name: "insurance-option", checked: selectedInsuranceOption === 1, onChange: function () { return onInsuranceOptionSelect === null || onInsuranceOptionSelect === void 0 ? void 0 : onInsuranceOptionSelect(1); } }), (0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.InsuranceType2Header, { children: [(0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.InsuranceType2Indicator, {}), (0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.InsuranceType2Title, { children: insuranceOption1Title }), insuranceOption1TooltipText && ((0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.InsuranceType2TooltipWrapper, __assign({ ref: tooltipWrapperRef, htmlFor: "insurance-option-1-tooltip", onClick: handleTooltipWrapperClick, onMouseDown: function (e) { return e.stopPropagation(); } }, { children: (0, jsx_runtime_1.jsx)(Tooltip_1.default, __assign({ popupRight: "-16px", popupWidth: "302px", position: "bottomRight", iconWidth: "24px", iconHeight: "24px", title: insuranceOption1TooltipTitle, popupSize: "medium", hasClickAction: hasInsuranceTooltipClickAction }, { children: insuranceOption1TooltipText })) })))] }), (0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.InsuranceType2Content, { children: [(0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.InsuranceType2Description, { children: insuranceOption1Description }), (insuranceOption1Price || hasInsuranceOption1PriceLoading) && ((0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.InsuranceType2Price, { children: hasInsuranceOption1PriceLoading ? ((0, jsx_runtime_1.jsx)(Loader_1.default, { type: "wave", variant: "primary" })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.InsuranceType2PriceValue, { children: insuranceOption1Price }), insuranceOption1PricePeriod && ((0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.InsuranceType2PricePeriod, { children: [" ", insuranceOption1PricePeriod] }))] })) }))] })] })), (0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.InsuranceType2Card, __assign({ "$selected": selectedInsuranceOption === 2 }, { children: [(0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.InsuranceType2RadioInput, { name: "insurance-option", checked: selectedInsuranceOption === 2, onChange: function () { return onInsuranceOptionSelect === null || onInsuranceOptionSelect === void 0 ? void 0 : onInsuranceOptionSelect(2); } }), (0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.InsuranceType2Header, { children: [(0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.InsuranceType2Indicator, {}), (0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.InsuranceType2Title, { children: insuranceOption2Title })] }), (0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.InsuranceType2Content, { children: (0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.InsuranceType2Description, { children: insuranceOption2Description }) })] }))] })), hasInsurance && insuranceType === 3 && !hasLoading && ((0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.UpfrontAddonWrapper, { children: (0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.UpfrontAddonCard, __assign({ htmlFor: "upfront-addon" }, { children: [(0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.UpfrontAddonCheckboxInput, { id: "upfront-addon", checked: upfrontAddonChecked, onChange: onUpfrontAddonChange }), (0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.UpfrontAddonHeader, { children: [(0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.UpfrontAddonIndicator, {}), (0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.UpfrontAddonTitle, { children: upfrontAddonTitle }), upfrontAddonDiscountBadge && ((0, jsx_runtime_1.jsx)(Badges_1.default, { layout: "text", variant: "light", title: upfrontAddonDiscountBadge }))] }), (upfrontAddonSummaryText || upfrontAddonPrice) && ((0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.UpfrontAddonPriceBlock, { children: hasUpfrontAddonDiscount ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.UpfrontAddonPriceLine, { children: [upfrontAddonSummaryText, " ", (0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.UpfrontAddonOldPrice, { children: upfrontAddonOldPrice })] }), (0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.UpfrontAddonPriceLine, { children: ["yerine \u015Fimdi", " ", (0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.UpfrontAddonDiscountedPrice, { children: upfrontAddonPrice })] })] })) : ((0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.UpfrontAddonPriceLine, { children: [upfrontAddonSummaryText, upfrontAddonPrice && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [" ", (0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.UpfrontAddonDiscountedPrice, { children: upfrontAddonPrice })] }))] })) }))] })) }))] }));
 };
 exports.default = ShoppingCartProduct;

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

@@ -1,5 +1,37 @@
 /// <reference types="react" />
 import { ShoppingCartProductStyledProps } from "./props";
+export declare const ProductCardLink: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, never>>> & string;
+export declare const ProductTitle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never>>> & string;
+export declare const ProductText: 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 ProductImage: 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 ProductInner: 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 ProductPriceContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$discountRate"> & Pick<ShoppingCartProductStyledProps, "$discountRate">, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$discountRate"> & Pick<ShoppingCartProductStyledProps, "$discountRate">, never>>> & string;
+export declare const ProductDiscountRate: 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 ProductPriceStack: 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 ProductOldPrice: 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 ProductOldPriceAmount: 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 ProductOldPriceSmall: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never>>> & string;
+export declare const ProductOldPricePeriod: 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 ProductNewPrice: 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 ProductNewPriceAmount: 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 ProductNewPriceSmall: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never>>> & string;
+export declare const ProductNewPricePeriod: 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 ProductDeliveryText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never>>> & string;
+export declare const ProductDeliveryDanger: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>>> & string;
+export declare const InsuranceSection: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$hasInsurance"> & Pick<ShoppingCartProductStyledProps, "$hasInsurance">, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$hasInsurance"> & Pick<ShoppingCartProductStyledProps, "$hasInsurance">, never>>> & string;
+export declare const InsuranceImage: 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 InsuranceContent: 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 InsuranceText: 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 InsurancePrice: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never>>> & string;
+export declare const InsurancePriceValue: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never>>> & string;
+export declare const InsuranceQuantity: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>>> & string;
+export declare const InsuranceActions: 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 InsuranceType2RadioInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref" | "key" | keyof import("react").InputHTMLAttributes<HTMLInputElement>> & Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & {
+    ref?: import("react").Ref<HTMLInputElement>;
+}, "type"> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref" | "key" | keyof import("react").InputHTMLAttributes<HTMLInputElement>> & Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & {
+    ref?: import("react").Ref<HTMLInputElement>;
+}, "type">>> & string;
+export declare const InsuranceType2TooltipWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, never>>> & string;
 export declare const InsuranceType2Header: 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 InsuranceType2Indicator: 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 InsuranceType2Title: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>>> & string;
@@ -14,6 +46,11 @@ export declare const InsuranceType2Card: import("styled-components/dist/types").
     $selected?: boolean;
 }, never>>> & string;
 export declare const InsuranceType2Wrapper: 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 UpfrontAddonCheckboxInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref" | "key" | keyof import("react").InputHTMLAttributes<HTMLInputElement>> & Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & {
+    ref?: import("react").Ref<HTMLInputElement>;
+}, "type"> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref" | "key" | keyof import("react").InputHTMLAttributes<HTMLInputElement>> & Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & {
+    ref?: import("react").Ref<HTMLInputElement>;
+}, "type">>> & string;
 export declare const UpfrontAddonIndicator: 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 UpfrontAddonTitle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>>> & string;
 export declare const UpfrontAddonHeader: 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;
@@ -23,4 +60,4 @@ export declare const UpfrontAddonOldPrice: import("styled-components/dist/types"
 export declare const UpfrontAddonDiscountedPrice: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>>> & string;
 export declare const UpfrontAddonCard: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, never>>> & string;
 export declare const UpfrontAddonWrapper: 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 ShoppingCartProductStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ShoppingCartProductStyledProps> & ShoppingCartProductStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ShoppingCartProductStyledProps> & ShoppingCartProductStyledProps, never>>> & string;
+export declare const ShoppingCartProductStyled: 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/ShoppingCartProduct/ShoppingCartProduct.styled.js

@@ -7,30 +7,59 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ShoppingCartProductStyled = exports.UpfrontAddonWrapper = exports.UpfrontAddonCard = exports.UpfrontAddonDiscountedPrice = exports.UpfrontAddonOldPrice = exports.UpfrontAddonPriceLine = exports.UpfrontAddonPriceBlock = exports.UpfrontAddonHeader = exports.UpfrontAddonTitle = exports.UpfrontAddonIndicator = exports.InsuranceType2Wrapper = exports.InsuranceType2Card = exports.InsuranceType2PricePeriod = exports.InsuranceType2PriceValue = exports.InsuranceType2Price = exports.InsuranceType2Description = exports.InsuranceType2Content = exports.InsuranceType2Title = exports.InsuranceType2Indicator = exports.InsuranceType2Header = void 0;
+exports.ShoppingCartProductStyled = exports.UpfrontAddonWrapper = exports.UpfrontAddonCard = exports.UpfrontAddonDiscountedPrice = exports.UpfrontAddonOldPrice = exports.UpfrontAddonPriceLine = exports.UpfrontAddonPriceBlock = exports.UpfrontAddonHeader = exports.UpfrontAddonTitle = exports.UpfrontAddonIndicator = exports.UpfrontAddonCheckboxInput = exports.InsuranceType2Wrapper = exports.InsuranceType2Card = exports.InsuranceType2PricePeriod = exports.InsuranceType2PriceValue = exports.InsuranceType2Price = exports.InsuranceType2Description = exports.InsuranceType2Content = exports.InsuranceType2Title = exports.InsuranceType2Indicator = exports.InsuranceType2Header = exports.InsuranceType2TooltipWrapper = exports.InsuranceType2RadioInput = exports.InsuranceActions = exports.InsuranceQuantity = exports.InsurancePriceValue = exports.InsurancePrice = exports.InsuranceText = exports.InsuranceContent = exports.InsuranceImage = exports.InsuranceSection = exports.ProductDeliveryDanger = exports.ProductDeliveryText = exports.ProductNewPricePeriod = exports.ProductNewPriceSmall = exports.ProductNewPriceAmount = exports.ProductNewPrice = exports.ProductOldPricePeriod = exports.ProductOldPriceSmall = exports.ProductOldPriceAmount = exports.ProductOldPrice = exports.ProductPriceStack = exports.ProductDiscountRate = exports.ProductPriceContent = exports.ProductInner = exports.ProductImage = exports.ProductText = exports.ProductTitle = exports.ProductCardLink = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var styled_components_1 = __importDefault(require("styled-components"));
 var devices_1 = require("../../constants/devices");
 var Icon_1 = __importDefault(require("../Icon/Icon"));
 var svgToBase64_1 = __importDefault(require("../../utils/svgToBase64"));
-exports.InsuranceType2Header = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n"], ["\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n"])));
-exports.InsuranceType2Indicator = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    flex-shrink: 0;\n    width: 20px;\n    height: 20px;\n    background-image: url('", "');\n    background-size: 100% 100%;\n"], ["\n    flex-shrink: 0;\n    width: 20px;\n    height: 20px;\n    background-image: url('", "');\n    background-size: 100% 100%;\n"])), (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, color: "var(--primary)", name: "RadioButtonElementUnchecked" })));
-exports.InsuranceType2Title = styled_components_1.default.span(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    font: var(--body-extra-bold-13-16);\n    color: var(--dark);\n    flex: 1;\n"], ["\n    font: var(--body-extra-bold-13-16);\n    color: var(--dark);\n    flex: 1;\n"])));
-exports.InsuranceType2Content = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n\n"], ["\n\n"])));
-exports.InsuranceType2Description = styled_components_1.default.p(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    font: var(--caption-medium-12-15);\n    color: var(--grey-50);\n    margin: 0;\n"], ["\n    font: var(--caption-medium-12-15);\n    color: var(--grey-50);\n    margin: 0;\n"])));
-exports.InsuranceType2Price = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    font: var(--body-extra-bold-13-16);\n    margin: 0.5rem 0 0 0;\n"], ["\n    font: var(--body-extra-bold-13-16);\n    margin: 0.5rem 0 0 0;\n"])));
-exports.InsuranceType2PriceValue = styled_components_1.default.span(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    font: var(--title-semi-bold-14-17);\n    color: var(--dark);\n"], ["\n    font: var(--title-semi-bold-14-17);\n    color: var(--dark);\n"])));
-exports.InsuranceType2PricePeriod = styled_components_1.default.span(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n    font: var(--caption-regular-12-15);\n    color: var(--dark);\n"], ["\n    font: var(--caption-regular-12-15);\n    color: var(--dark);\n"])));
-exports.InsuranceType2Card = styled_components_1.default.label(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n    display: flex;\n    flex-direction: column;\n    gap: 1rem;\n    padding: 1rem;\n    background: var(--primary-opacity-5);\n    border-radius: 0.5rem;\n    cursor: pointer;\n\n    input[type=\"radio\"] {\n        height: 0;\n        width: 0;\n        opacity: 0;\n        position: absolute;\n        pointer-events: none;\n\n        &:checked ~ ", " ", " {\n            background-image: url('", "');\n        }\n    }\n"], ["\n    display: flex;\n    flex-direction: column;\n    gap: 1rem;\n    padding: 1rem;\n    background: var(--primary-opacity-5);\n    border-radius: 0.5rem;\n    cursor: pointer;\n\n    input[type=\"radio\"] {\n        height: 0;\n        width: 0;\n        opacity: 0;\n        position: absolute;\n        pointer-events: none;\n\n        &:checked ~ ", " ", " {\n            background-image: url('", "');\n        }\n    }\n"])), exports.InsuranceType2Header, exports.InsuranceType2Indicator, (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, color: "var(--primary)", name: "RadioButtonElementChecked" })));
-exports.InsuranceType2Wrapper = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n    position: relative;\n    margin-top: 1.5rem;\n    padding: 1.5rem;\n    border: 1px solid var(--grey-10);\n    border-radius: 0.5rem;\n    display: flex;\n    flex-direction: column;\n    gap: 1rem;\n\n    &:before {\n        content: \"\";\n        position: absolute;\n        left: 47px;\n        bottom: 100%;\n        width: 1px;\n        background-color: var(--dark-opacity-5);\n        height: 40px;\n    }\n"], ["\n    position: relative;\n    margin-top: 1.5rem;\n    padding: 1.5rem;\n    border: 1px solid var(--grey-10);\n    border-radius: 0.5rem;\n    display: flex;\n    flex-direction: column;\n    gap: 1rem;\n\n    &:before {\n        content: \"\";\n        position: absolute;\n        left: 47px;\n        bottom: 100%;\n        width: 1px;\n        background-color: var(--dark-opacity-5);\n        height: 40px;\n    }\n"])));
-exports.UpfrontAddonIndicator = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n    flex-shrink: 0;\n    width: 24px;\n    height: 24px;\n    background-image: url('", "');\n    background-size: 100% 100%;\n"], ["\n    flex-shrink: 0;\n    width: 24px;\n    height: 24px;\n    background-image: url('", "');\n    background-size: 100% 100%;\n"])), (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, color: "var(--primary)", name: "CheckboxElementUncheck" })));
-exports.UpfrontAddonTitle = styled_components_1.default.span(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n    font: var(--body-extra-bold-13-16);\n    color: var(--dark);\n    flex: 1;\n    min-width: 0;\n"], ["\n    font: var(--body-extra-bold-13-16);\n    color: var(--dark);\n    flex: 1;\n    min-width: 0;\n"])));
-exports.UpfrontAddonHeader = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    gap: 1rem;\n    width: 100%;\n"], ["\n    display: flex;\n    align-items: center;\n    gap: 1rem;\n    width: 100%;\n"])));
-exports.UpfrontAddonPriceBlock = styled_components_1.default.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n    display: flex;\n    flex-direction: column;\n    gap: 0.25rem;\n    margin-top: auto;\n    padding-left: 2.5rem;\n"], ["\n    display: flex;\n    flex-direction: column;\n    gap: 0.25rem;\n    margin-top: auto;\n    padding-left: 2.5rem;\n"])));
-exports.UpfrontAddonPriceLine = styled_components_1.default.p(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n    margin: 0;\n    font: var(--caption-regular-11-13);\n    color: var(--grey-50);\n"], ["\n    margin: 0;\n    font: var(--caption-regular-11-13);\n    color: var(--grey-50);\n"])));
-exports.UpfrontAddonOldPrice = styled_components_1.default.span(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n    text-decoration: line-through;\n    color: var(--dark-opacity-25);\n    font: var(--caption-semi-bold-12-15);\n"], ["\n    text-decoration: line-through;\n    color: var(--dark-opacity-25);\n    font: var(--caption-semi-bold-12-15);\n"])));
-exports.UpfrontAddonDiscountedPrice = styled_components_1.default.span(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n    font: var(--body-extra-bold-13-16);\n    color: var(--dark);\n"], ["\n    font: var(--body-extra-bold-13-16);\n    color: var(--dark);\n"])));
-exports.UpfrontAddonCard = styled_components_1.default.label(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n    display: flex;\n    flex-direction: column;\n    gap: 0.5rem;\n    padding: 1rem;\n    background: var(--primary-opacity-5);\n    border-radius: 0.5rem;\n    cursor: pointer;\n\n    input[type=\"checkbox\"] {\n        height: 0;\n        width: 0;\n        opacity: 0;\n        position: absolute;\n        pointer-events: none;\n\n        &:checked ~ ", " ", " {\n            background-image: url('", "');\n        }\n    }\n"], ["\n    display: flex;\n    flex-direction: column;\n    gap: 0.5rem;\n    padding: 1rem;\n    background: var(--primary-opacity-5);\n    border-radius: 0.5rem;\n    cursor: pointer;\n\n    input[type=\"checkbox\"] {\n        height: 0;\n        width: 0;\n        opacity: 0;\n        position: absolute;\n        pointer-events: none;\n\n        &:checked ~ ", " ", " {\n            background-image: url('", "');\n        }\n    }\n"])), exports.UpfrontAddonHeader, exports.UpfrontAddonIndicator, (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, color: "var(--primary)", name: "CheckboxElementChecked" })));
-exports.UpfrontAddonWrapper = styled_components_1.default.div(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n    position: relative;\n    margin-top: 1.5rem;\n    padding: 1rem;\n    border: 1px solid var(--grey-10);\n    border-radius: 0.5rem;\n\n    &:before {\n        content: \"\";\n        position: absolute;\n        left: 47px;\n        bottom: 100%;\n        width: 1px;\n        background-color: var(--dark-opacity-5);\n        height: 40px;\n    }\n"], ["\n    position: relative;\n    margin-top: 1.5rem;\n    padding: 1rem;\n    border: 1px solid var(--grey-10);\n    border-radius: 0.5rem;\n\n    &:before {\n        content: \"\";\n        position: absolute;\n        left: 47px;\n        bottom: 100%;\n        width: 1px;\n        background-color: var(--dark-opacity-5);\n        height: 40px;\n    }\n"])));
-exports.ShoppingCartProductStyled = styled_components_1.default.div(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n\n    a {\n        text-decoration: none;\n        color: inherit;\n    }\n\n    .inner {\n        display: grid;\n        grid-template-columns: auto 1fr auto;\n        align-items: center;\n        position: relative;\n        z-index: 5;\n\n        .img {\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                ~ .text {\n                    .productCardTitle {\n                        color: var(--primary-hover);\n                    }\n                }\n            }\n        }\n\n        .text {\n            padding-right: 0.5rem;\n\n            a {\n                &:hover {\n                    .productCardTitle {\n                        color: var(--primary-hover);\n                    }\n                }\n            }\n\n            .productCardTitle {\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\n            .productCardDeliveryText {\n                margin-top: 0.5rem;\n                margin-bottom: 0;\n                color: var(--grey-40);\n                display: block;\n                overflow: hidden;\n                font: var(--body-medium-13-16);\n\n                .productCardDeliveryDanger {\n                    display: block;\n                    color: var(--red);\n                }\n            }\n\n            .productCardPriceContent {\n                display: grid;\n                align-items: ", ";\n                justify-content: flex-start;\n                grid-template-columns: ", ";\n\n                .discountRate {\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\n                .oldPrice, .newPrice {\n                    display: flex;\n                    align-items: end;\n                    justify-content: flex-start;\n\n                    .price {\n                        margin-right: 4px;\n                        white-space: nowrap;\n                    }\n\n                    .period {\n                        display: -webkit-box;\n                        -webkit-line-clamp: 1;\n                        -webkit-box-orient: vertical;\n                        overflow: hidden;\n                        text-overflow: ellipsis;\n                        word-break: break-all;\n                    }\n                }\n\n                .oldPrice {\n                    color: var(--dark-opacity-25);\n                    margin-bottom: 2px;\n\n                    .price {\n                        text-decoration: line-through;\n                        font: var(--caption-semi-bold-11-13);\n\n                        small {\n                            font: var(--caption-semi-bold-10-12);\n                        }\n                    }\n\n                    .period {\n                        text-decoration: line-through;\n                        font: var(--caption-regular-11-13);\n                    }\n                }\n\n                .newPrice {\n                    .price {\n                        font: var(--body-extra-bold-14-17);\n\n                        small {\n                            font: var(--caption-bold-12-15);\n                        }\n                    }\n\n                    .period {\n                        font: var(--caption-regular-12-15);\n                    }\n                }\n            }\n        }\n\n    }\n\n    .insurance {\n        position: relative;\n        margin-top: 1.5rem;\n        display: grid;\n        grid-template-columns: auto 1fr auto;\n        align-items: center;\n        padding-right: 4px;\n        cursor: ", ";\n\n        &:before {\n            content: \"\";\n            position: absolute;\n            left: 47px;\n            bottom: 100%;\n            width: 1px;\n            background-color: var(--dark-opacity-5);\n            height: 40px;\n        }\n\n        .insuranceImg {\n            width: 96px;\n            height: 40px;\n            border: 1px solid var(--dark-opacity-5);\n            border-radius: 0.5rem;\n            position: relative;\n            margin-right: 16px;\n            overflow: hidden;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n        }\n\n        .insuranceContent {\n            display: flex;\n            align-items: center;\n            justify-content: space-between;\n\n            @media only screen and ", " {\n                &:hover {\n                    button{\n                        background-color: var(--primary);\n                        color: white;\n                    }\n                }\n            }\n\n            &:active {\n                button {\n                    color: white;\n                    background-color: var(--primary);\n                }\n            }\n            .text {\n                display: block;\n                font: var(--caption-semi-bold-12-15);\n\n                .price {\n                    display: block;\n                    margin: 0;\n                    font: var(--caption-extra-bold-12-15);\n\n                    b {\n                        span {\n                            font-weight: 400;\n                        }\n                    }\n\n                    .quantity {\n                        display: inline-block;\n                        margin-left: 0.5rem;\n                    }\n                }\n            }\n\n            .actions {\n                width: 24px;\n                display: flex;\n                align-items: center;\n                justify-content: center;\n            }\n        }\n    }\n"], ["\n\n    a {\n        text-decoration: none;\n        color: inherit;\n    }\n\n    .inner {\n        display: grid;\n        grid-template-columns: auto 1fr auto;\n        align-items: center;\n        position: relative;\n        z-index: 5;\n\n        .img {\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                ~ .text {\n                    .productCardTitle {\n                        color: var(--primary-hover);\n                    }\n                }\n            }\n        }\n\n        .text {\n            padding-right: 0.5rem;\n\n            a {\n                &:hover {\n                    .productCardTitle {\n                        color: var(--primary-hover);\n                    }\n                }\n            }\n\n            .productCardTitle {\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\n            .productCardDeliveryText {\n                margin-top: 0.5rem;\n                margin-bottom: 0;\n                color: var(--grey-40);\n                display: block;\n                overflow: hidden;\n                font: var(--body-medium-13-16);\n\n                .productCardDeliveryDanger {\n                    display: block;\n                    color: var(--red);\n                }\n            }\n\n            .productCardPriceContent {\n                display: grid;\n                align-items: ", ";\n                justify-content: flex-start;\n                grid-template-columns: ", ";\n\n                .discountRate {\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\n                .oldPrice, .newPrice {\n                    display: flex;\n                    align-items: end;\n                    justify-content: flex-start;\n\n                    .price {\n                        margin-right: 4px;\n                        white-space: nowrap;\n                    }\n\n                    .period {\n                        display: -webkit-box;\n                        -webkit-line-clamp: 1;\n                        -webkit-box-orient: vertical;\n                        overflow: hidden;\n                        text-overflow: ellipsis;\n                        word-break: break-all;\n                    }\n                }\n\n                .oldPrice {\n                    color: var(--dark-opacity-25);\n                    margin-bottom: 2px;\n\n                    .price {\n                        text-decoration: line-through;\n                        font: var(--caption-semi-bold-11-13);\n\n                        small {\n                            font: var(--caption-semi-bold-10-12);\n                        }\n                    }\n\n                    .period {\n                        text-decoration: line-through;\n                        font: var(--caption-regular-11-13);\n                    }\n                }\n\n                .newPrice {\n                    .price {\n                        font: var(--body-extra-bold-14-17);\n\n                        small {\n                            font: var(--caption-bold-12-15);\n                        }\n                    }\n\n                    .period {\n                        font: var(--caption-regular-12-15);\n                    }\n                }\n            }\n        }\n\n    }\n\n    .insurance {\n        position: relative;\n        margin-top: 1.5rem;\n        display: grid;\n        grid-template-columns: auto 1fr auto;\n        align-items: center;\n        padding-right: 4px;\n        cursor: ", ";\n\n        &:before {\n            content: \"\";\n            position: absolute;\n            left: 47px;\n            bottom: 100%;\n            width: 1px;\n            background-color: var(--dark-opacity-5);\n            height: 40px;\n        }\n\n        .insuranceImg {\n            width: 96px;\n            height: 40px;\n            border: 1px solid var(--dark-opacity-5);\n            border-radius: 0.5rem;\n            position: relative;\n            margin-right: 16px;\n            overflow: hidden;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n        }\n\n        .insuranceContent {\n            display: flex;\n            align-items: center;\n            justify-content: space-between;\n\n            @media only screen and ", " {\n                &:hover {\n                    button{\n                        background-color: var(--primary);\n                        color: white;\n                    }\n                }\n            }\n\n            &:active {\n                button {\n                    color: white;\n                    background-color: var(--primary);\n                }\n            }\n            .text {\n                display: block;\n                font: var(--caption-semi-bold-12-15);\n\n                .price {\n                    display: block;\n                    margin: 0;\n                    font: var(--caption-extra-bold-12-15);\n\n                    b {\n                        span {\n                            font-weight: 400;\n                        }\n                    }\n\n                    .quantity {\n                        display: inline-block;\n                        margin-left: 0.5rem;\n                    }\n                }\n            }\n\n            .actions {\n                width: 24px;\n                display: flex;\n                align-items: center;\n                justify-content: center;\n            }\n        }\n    }\n"])), function (props) { return props.$discountRate ? 'center' : 'end'; }, function (props) { return props.$discountRate ? 'auto 1fr' : '1fr'; }, function (props) { return props.$hasInsurance ? 'pointer' : 'initial'; }, devices_1.devices.mdUp);
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20;
+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% - 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"])));
+exports.ProductPriceStack = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject([""], [""])));
+exports.ProductOldPrice = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n    display: flex;\n    align-items: end;\n    justify-content: flex-start;\n    color: var(--dark-opacity-25);\n    margin-bottom: 2px;\n"], ["\n    display: flex;\n    align-items: end;\n    justify-content: flex-start;\n    color: var(--dark-opacity-25);\n    margin-bottom: 2px;\n"])));
+exports.ProductOldPriceAmount = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n    margin-right: 4px;\n    white-space: nowrap;\n    text-decoration: line-through;\n    font: var(--caption-semi-bold-11-13);\n"], ["\n    margin-right: 4px;\n    white-space: nowrap;\n    text-decoration: line-through;\n    font: var(--caption-semi-bold-11-13);\n"])));
+exports.ProductOldPriceSmall = styled_components_1.default.small(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n    font: var(--caption-semi-bold-10-12);\n"], ["\n    font: var(--caption-semi-bold-10-12);\n"])));
+exports.ProductOldPricePeriod = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n    display: -webkit-box;\n    -webkit-line-clamp: 1;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    word-break: break-all;\n    text-decoration: line-through;\n    font: var(--caption-regular-11-13);\n"], ["\n    display: -webkit-box;\n    -webkit-line-clamp: 1;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    word-break: break-all;\n    text-decoration: line-through;\n    font: var(--caption-regular-11-13);\n"])));
+exports.ProductNewPrice = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n    display: flex;\n    align-items: end;\n    justify-content: flex-start;\n"], ["\n    display: flex;\n    align-items: end;\n    justify-content: flex-start;\n"])));
+exports.ProductNewPriceAmount = styled_components_1.default.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n    margin-right: 4px;\n    white-space: nowrap;\n    font: var(--body-extra-bold-14-17);\n"], ["\n    margin-right: 4px;\n    white-space: nowrap;\n    font: var(--body-extra-bold-14-17);\n"])));
+exports.ProductNewPriceSmall = styled_components_1.default.small(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n    font: var(--caption-bold-12-15);\n"], ["\n    font: var(--caption-bold-12-15);\n"])));
+exports.ProductNewPricePeriod = styled_components_1.default.div(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n    display: -webkit-box;\n    -webkit-line-clamp: 1;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    word-break: break-all;\n    font: var(--caption-regular-12-15);\n"], ["\n    display: -webkit-box;\n    -webkit-line-clamp: 1;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    word-break: break-all;\n    font: var(--caption-regular-12-15);\n"])));
+exports.ProductDeliveryText = styled_components_1.default.p(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n    margin-top: 0.5rem;\n    margin-bottom: 0;\n    color: var(--grey-40);\n    display: block;\n    overflow: hidden;\n    font: var(--body-medium-13-16);\n"], ["\n    margin-top: 0.5rem;\n    margin-bottom: 0;\n    color: var(--grey-40);\n    display: block;\n    overflow: hidden;\n    font: var(--body-medium-13-16);\n"])));
+exports.ProductDeliveryDanger = styled_components_1.default.span(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n    display: block;\n    color: var(--red);\n"], ["\n    display: block;\n    color: var(--red);\n"])));
+exports.InsuranceSection = styled_components_1.default.div(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n    position: relative;\n    margin-top: 1.5rem;\n    display: grid;\n    grid-template-columns: auto 1fr auto;\n    align-items: center;\n    padding-right: 4px;\n    cursor: ", ";\n\n    &:before {\n        content: \"\";\n        position: absolute;\n        left: 47px;\n        bottom: 100%;\n        width: 1px;\n        background-color: var(--dark-opacity-5);\n        height: 40px;\n    }\n"], ["\n    position: relative;\n    margin-top: 1.5rem;\n    display: grid;\n    grid-template-columns: auto 1fr auto;\n    align-items: center;\n    padding-right: 4px;\n    cursor: ", ";\n\n    &:before {\n        content: \"\";\n        position: absolute;\n        left: 47px;\n        bottom: 100%;\n        width: 1px;\n        background-color: var(--dark-opacity-5);\n        height: 40px;\n    }\n"])), function (props) { return props.$hasInsurance ? 'pointer' : 'initial'; });
+exports.InsuranceImage = styled_components_1.default.div(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n    width: 96px;\n    height: 40px;\n    border: 1px solid var(--dark-opacity-5);\n    border-radius: 0.5rem;\n    position: relative;\n    margin-right: 16px;\n    overflow: hidden;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n"], ["\n    width: 96px;\n    height: 40px;\n    border: 1px solid var(--dark-opacity-5);\n    border-radius: 0.5rem;\n    position: relative;\n    margin-right: 16px;\n    overflow: hidden;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n"])));
+exports.InsuranceContent = styled_components_1.default.div(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n\n    @media only screen and ", " {\n        &:hover {\n            button {\n                background-color: var(--primary);\n                color: white;\n            }\n        }\n    }\n\n    &:active {\n        button {\n            color: white;\n            background-color: var(--primary);\n        }\n    }\n"], ["\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n\n    @media only screen and ", " {\n        &:hover {\n            button {\n                background-color: var(--primary);\n                color: white;\n            }\n        }\n    }\n\n    &:active {\n        button {\n            color: white;\n            background-color: var(--primary);\n        }\n    }\n"])), devices_1.devices.mdUp);
+exports.InsuranceText = styled_components_1.default.div(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n    display: block;\n    font: var(--caption-semi-bold-12-15);\n"], ["\n    display: block;\n    font: var(--caption-semi-bold-12-15);\n"])));
+exports.InsurancePrice = styled_components_1.default.p(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n    display: block;\n    margin: 0;\n    font: var(--caption-extra-bold-12-15);\n\n    b span {\n        font-weight: 400;\n    }\n"], ["\n    display: block;\n    margin: 0;\n    font: var(--caption-extra-bold-12-15);\n\n    b span {\n        font-weight: 400;\n    }\n"])));
+exports.InsurancePriceValue = styled_components_1.default.b(templateObject_24 || (templateObject_24 = __makeTemplateObject([""], [""])));
+exports.InsuranceQuantity = styled_components_1.default.span(templateObject_25 || (templateObject_25 = __makeTemplateObject(["\n    display: inline-block;\n    margin-left: 0.5rem;\n"], ["\n    display: inline-block;\n    margin-left: 0.5rem;\n"])));
+exports.InsuranceActions = styled_components_1.default.div(templateObject_26 || (templateObject_26 = __makeTemplateObject(["\n    width: 24px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n"], ["\n    width: 24px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n"])));
+exports.InsuranceType2RadioInput = styled_components_1.default.input.attrs({ type: 'radio' })(templateObject_27 || (templateObject_27 = __makeTemplateObject(["\n    height: 0;\n    width: 0;\n    opacity: 0;\n    position: absolute;\n    pointer-events: none;\n"], ["\n    height: 0;\n    width: 0;\n    opacity: 0;\n    position: absolute;\n    pointer-events: none;\n"])));
+exports.InsuranceType2TooltipWrapper = styled_components_1.default.label(templateObject_28 || (templateObject_28 = __makeTemplateObject([""], [""])));
+exports.InsuranceType2Header = styled_components_1.default.div(templateObject_29 || (templateObject_29 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n"], ["\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n"])));
+exports.InsuranceType2Indicator = styled_components_1.default.div(templateObject_30 || (templateObject_30 = __makeTemplateObject(["\n    flex-shrink: 0;\n    width: 20px;\n    height: 20px;\n    background-image: url('", "');\n    background-size: 100% 100%;\n"], ["\n    flex-shrink: 0;\n    width: 20px;\n    height: 20px;\n    background-image: url('", "');\n    background-size: 100% 100%;\n"])), (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, color: "var(--primary)", name: "RadioButtonElementUnchecked" })));
+exports.InsuranceType2Title = styled_components_1.default.span(templateObject_31 || (templateObject_31 = __makeTemplateObject(["\n    font: var(--body-extra-bold-13-16);\n    color: var(--dark);\n    flex: 1;\n"], ["\n    font: var(--body-extra-bold-13-16);\n    color: var(--dark);\n    flex: 1;\n"])));
+exports.InsuranceType2Content = styled_components_1.default.div(templateObject_32 || (templateObject_32 = __makeTemplateObject([""], [""])));
+exports.InsuranceType2Description = styled_components_1.default.p(templateObject_33 || (templateObject_33 = __makeTemplateObject(["\n    font: var(--caption-medium-12-15);\n    color: var(--grey-50);\n    margin: 0;\n"], ["\n    font: var(--caption-medium-12-15);\n    color: var(--grey-50);\n    margin: 0;\n"])));
+exports.InsuranceType2Price = styled_components_1.default.div(templateObject_34 || (templateObject_34 = __makeTemplateObject(["\n    font: var(--body-extra-bold-13-16);\n    margin: 0.5rem 0 0 0;\n"], ["\n    font: var(--body-extra-bold-13-16);\n    margin: 0.5rem 0 0 0;\n"])));
+exports.InsuranceType2PriceValue = styled_components_1.default.span(templateObject_35 || (templateObject_35 = __makeTemplateObject(["\n    font: var(--title-semi-bold-14-17);\n    color: var(--dark);\n"], ["\n    font: var(--title-semi-bold-14-17);\n    color: var(--dark);\n"])));
+exports.InsuranceType2PricePeriod = styled_components_1.default.span(templateObject_36 || (templateObject_36 = __makeTemplateObject(["\n    font: var(--caption-regular-12-15);\n    color: var(--dark);\n"], ["\n    font: var(--caption-regular-12-15);\n    color: var(--dark);\n"])));
+exports.InsuranceType2Card = styled_components_1.default.label(templateObject_37 || (templateObject_37 = __makeTemplateObject(["\n    display: flex;\n    flex-direction: column;\n    gap: 1rem;\n    padding: 1rem;\n    background: var(--primary-opacity-5);\n    border-radius: 0.5rem;\n    cursor: pointer;\n\n    ", ":checked ~ ", " ", " {\n        background-image: url('", "');\n    }\n"], ["\n    display: flex;\n    flex-direction: column;\n    gap: 1rem;\n    padding: 1rem;\n    background: var(--primary-opacity-5);\n    border-radius: 0.5rem;\n    cursor: pointer;\n\n    ", ":checked ~ ", " ", " {\n        background-image: url('", "');\n    }\n"])), exports.InsuranceType2RadioInput, exports.InsuranceType2Header, exports.InsuranceType2Indicator, (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, color: "var(--primary)", name: "RadioButtonElementChecked" })));
+exports.InsuranceType2Wrapper = styled_components_1.default.div(templateObject_38 || (templateObject_38 = __makeTemplateObject(["\n    position: relative;\n    margin-top: 1.5rem;\n    padding: 1.5rem;\n    border: 1px solid var(--grey-10);\n    border-radius: 0.5rem;\n    display: flex;\n    flex-direction: column;\n    gap: 1rem;\n\n    &:before {\n        content: \"\";\n        position: absolute;\n        left: 47px;\n        bottom: 100%;\n        width: 1px;\n        background-color: var(--dark-opacity-5);\n        height: 40px;\n    }\n"], ["\n    position: relative;\n    margin-top: 1.5rem;\n    padding: 1.5rem;\n    border: 1px solid var(--grey-10);\n    border-radius: 0.5rem;\n    display: flex;\n    flex-direction: column;\n    gap: 1rem;\n\n    &:before {\n        content: \"\";\n        position: absolute;\n        left: 47px;\n        bottom: 100%;\n        width: 1px;\n        background-color: var(--dark-opacity-5);\n        height: 40px;\n    }\n"])));
+exports.UpfrontAddonCheckboxInput = styled_components_1.default.input.attrs({ type: 'checkbox' })(templateObject_39 || (templateObject_39 = __makeTemplateObject(["\n    height: 0;\n    width: 0;\n    opacity: 0;\n    position: absolute;\n    pointer-events: none;\n"], ["\n    height: 0;\n    width: 0;\n    opacity: 0;\n    position: absolute;\n    pointer-events: none;\n"])));
+exports.UpfrontAddonIndicator = styled_components_1.default.div(templateObject_40 || (templateObject_40 = __makeTemplateObject(["\n    flex-shrink: 0;\n    width: 24px;\n    height: 24px;\n    background-image: url('", "');\n    background-size: 100% 100%;\n"], ["\n    flex-shrink: 0;\n    width: 24px;\n    height: 24px;\n    background-image: url('", "');\n    background-size: 100% 100%;\n"])), (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, color: "var(--primary)", name: "CheckboxElementUncheck" })));
+exports.UpfrontAddonTitle = styled_components_1.default.span(templateObject_41 || (templateObject_41 = __makeTemplateObject(["\n    font: var(--body-extra-bold-13-16);\n    color: var(--dark);\n    flex: 1;\n    min-width: 0;\n"], ["\n    font: var(--body-extra-bold-13-16);\n    color: var(--dark);\n    flex: 1;\n    min-width: 0;\n"])));
+exports.UpfrontAddonHeader = styled_components_1.default.div(templateObject_42 || (templateObject_42 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    gap: 1rem;\n    width: 100%;\n"], ["\n    display: flex;\n    align-items: center;\n    gap: 1rem;\n    width: 100%;\n"])));
+exports.UpfrontAddonPriceBlock = styled_components_1.default.div(templateObject_43 || (templateObject_43 = __makeTemplateObject(["\n    display: flex;\n    flex-direction: column;\n    gap: 0.25rem;\n    margin-top: auto;\n    padding-left: 2.5rem;\n"], ["\n    display: flex;\n    flex-direction: column;\n    gap: 0.25rem;\n    margin-top: auto;\n    padding-left: 2.5rem;\n"])));
+exports.UpfrontAddonPriceLine = styled_components_1.default.p(templateObject_44 || (templateObject_44 = __makeTemplateObject(["\n    margin: 0;\n    font: var(--caption-regular-11-13);\n    color: var(--grey-50);\n"], ["\n    margin: 0;\n    font: var(--caption-regular-11-13);\n    color: var(--grey-50);\n"])));
+exports.UpfrontAddonOldPrice = styled_components_1.default.span(templateObject_45 || (templateObject_45 = __makeTemplateObject(["\n    text-decoration: line-through;\n    color: var(--dark-opacity-25);\n    font: var(--caption-semi-bold-12-15);\n"], ["\n    text-decoration: line-through;\n    color: var(--dark-opacity-25);\n    font: var(--caption-semi-bold-12-15);\n"])));
+exports.UpfrontAddonDiscountedPrice = styled_components_1.default.span(templateObject_46 || (templateObject_46 = __makeTemplateObject(["\n    font: var(--body-extra-bold-13-16);\n    color: var(--dark);\n"], ["\n    font: var(--body-extra-bold-13-16);\n    color: var(--dark);\n"])));
+exports.UpfrontAddonCard = styled_components_1.default.label(templateObject_47 || (templateObject_47 = __makeTemplateObject(["\n    display: flex;\n    flex-direction: column;\n    gap: 0.5rem;\n    padding: 1rem;\n    background: var(--primary-opacity-5);\n    border-radius: 0.5rem;\n    cursor: pointer;\n\n    ", ":checked ~ ", " ", " {\n        background-image: url('", "');\n    }\n"], ["\n    display: flex;\n    flex-direction: column;\n    gap: 0.5rem;\n    padding: 1rem;\n    background: var(--primary-opacity-5);\n    border-radius: 0.5rem;\n    cursor: pointer;\n\n    ", ":checked ~ ", " ", " {\n        background-image: url('", "');\n    }\n"])), exports.UpfrontAddonCheckboxInput, exports.UpfrontAddonHeader, exports.UpfrontAddonIndicator, (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, color: "var(--primary)", name: "CheckboxElementChecked" })));
+exports.UpfrontAddonWrapper = styled_components_1.default.div(templateObject_48 || (templateObject_48 = __makeTemplateObject(["\n    position: relative;\n    margin-top: 1.5rem;\n    padding: 1rem;\n    border: 1px solid var(--grey-10);\n    border-radius: 0.5rem;\n\n    &:before {\n        content: \"\";\n        position: absolute;\n        left: 47px;\n        bottom: 100%;\n        width: 1px;\n        background-color: var(--dark-opacity-5);\n        height: 40px;\n    }\n"], ["\n    position: relative;\n    margin-top: 1.5rem;\n    padding: 1rem;\n    border: 1px solid var(--grey-10);\n    border-radius: 0.5rem;\n\n    &:before {\n        content: \"\";\n        position: absolute;\n        left: 47px;\n        bottom: 100%;\n        width: 1px;\n        background-color: var(--dark-opacity-5);\n        height: 40px;\n    }\n"])));
+exports.ShoppingCartProductStyled = styled_components_1.default.div(templateObject_49 || (templateObject_49 = __makeTemplateObject(["\n    a {\n        text-decoration: none;\n        color: inherit;\n    }\n"], ["\n    a {\n        text-decoration: none;\n        color: inherit;\n    }\n"])));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26, templateObject_27, templateObject_28, templateObject_29, templateObject_30, templateObject_31, templateObject_32, templateObject_33, templateObject_34, templateObject_35, templateObject_36, templateObject_37, templateObject_38, templateObject_39, templateObject_40, templateObject_41, templateObject_42, templateObject_43, templateObject_44, templateObject_45, templateObject_46, templateObject_47, templateObject_48, templateObject_49;

package/package.json

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