krl-alfred 2.20.5 → 2.20.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/dist/components/OtpInput/Otp.js +2 -2
  2. package/dist/components/OtpInput/OtpInput.styled.d.ts +2 -2
  3. package/dist/components/OtpInput/OtpInput.styled.js +14 -5
  4. package/dist/components/OtpInput/props.d.ts +4 -0
  5. package/dist/components/OtpInput/stories/OtpInput.stories.d.ts +8 -0
  6. package/dist/components/OtpInput/stories/OtpInput.stories.js +9 -1
  7. package/dist/components/ProductCardVertical/ProductCardVertical.styled.js +3 -3
  8. package/dist/components/ShoppingCartProduct/ShoppingCartProduct.js +6 -6
  9. package/dist/components/ShoppingCartProduct/ShoppingCartProduct.styled.d.ts +38 -1
  10. package/dist/components/ShoppingCartProduct/ShoppingCartProduct.styled.js +51 -22
  11. package/package.json +1 -1
package/dist/components/OtpInput/Otp.js CHANGED
@@ -142,9 +142,9 @@ var Otp = function (_a) {
142
142
  setOtpValue(event.target.value);
143
143
  }
144
144
  };
145
- 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) ||
145
+ 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) ||
146
146
  (otpValue &&
147
147
  otpValue.length === inputSize &&
148
- 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 })] });
148
+ 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 })] });
149
149
  };
150
150
  exports.default = Otp;
package/dist/components/OtpInput/OtpInput.styled.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  /// <reference types="react" />
2
- import { OtpSpanProps } from "./props";
2
+ import { OtpSpanProps, OtpSpanWrapperProps } from "./props";
3
3
  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;
4
- 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;
4
+ 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;
5
5
  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;
6
6
  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 CHANGED
@@ -9,12 +9,21 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
9
9
  Object.defineProperty(exports, "__esModule", { value: true });
10
10
  exports.OtpError = exports.OtpSpan = exports.OtpSpanWrapper = exports.OtpInputWrapper = void 0;
11
11
  var styled_components_1 = __importDefault(require("styled-components"));
12
- 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"])));
13
- 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"])));
14
- 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) {
15
- var active = _a.active, hasError = _a.hasError;
12
+ 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"])));
13
+ 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) {
14
+ var $inputSize = _a.$inputSize;
15
+ return $inputSize;
16
+ }, function (_a) {
17
+ var $inputSize = _a.$inputSize;
18
+ return ($inputSize >= 8 ? '8px' : '18.33px');
19
+ });
20
+ 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) {
21
+ var hasError = _a.hasError, active = _a.active, filled = _a.filled;
22
+ return hasError ? 'var(--red)' : active || filled ? 'var(--dark)' : 'var(--dark-opacity-10)';
23
+ }, function (props) { return props.hasError ? 'var(--red)' : 'var(--dark)'; }, function (_a) {
24
+ var active = _a.active;
16
25
  return active &&
17
- "\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 ");
26
+ "\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 ";
18
27
  });
19
28
  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"])));
20
29
  var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
package/dist/components/OtpInput/props.d.ts CHANGED
@@ -9,6 +9,10 @@ export interface OtpInput {
9
9
  export interface OtpSpanProps {
10
10
  hasError: boolean;
11
11
  active: boolean;
12
+ filled: boolean;
13
+ }
14
+ export interface OtpSpanWrapperProps {
15
+ $inputSize: number;
12
16
  }
13
17
  export declare const OtpInputDefault: OtpInput;
14
18
  export type OtpInputProps = typeof OtpInputDefault;
package/dist/components/OtpInput/stories/OtpInput.stories.d.ts CHANGED
@@ -18,3 +18,11 @@ export declare const Default: {
18
18
  inputSize: number;
19
19
  };
20
20
  };
21
+ export declare const TenDigits: {
22
+ args: {
23
+ autoFocus: boolean;
24
+ errorMessage: string;
25
+ hasError: boolean;
26
+ inputSize: number;
27
+ };
28
+ };
package/dist/components/OtpInput/stories/OtpInput.stories.js CHANGED
@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
3
3
  return (mod && mod.__esModule) ? mod : { "default": mod };
4
4
  };
5
5
  Object.defineProperty(exports, "__esModule", { value: true });
6
- exports.Default = void 0;
6
+ exports.TenDigits = exports.Default = void 0;
7
7
  var jsx_runtime_1 = require("react/jsx-runtime");
8
8
  var react_1 = require("react");
9
9
  var Otp_1 = __importDefault(require("../Otp"));
@@ -30,3 +30,11 @@ exports.Default = {
30
30
  inputSize: 4
31
31
  },
32
32
  };
33
+ exports.TenDigits = {
34
+ args: {
35
+ autoFocus: true,
36
+ errorMessage: "Hata Mesajı",
37
+ hasError: false,
38
+ inputSize: 10
39
+ },
40
+ };
package/dist/components/ProductCardVertical/ProductCardVertical.styled.js CHANGED
@@ -17,7 +17,7 @@ exports.ProductCardRoot = styled_components_1.default.div(templateObject_1 || (t
17
17
  });
18
18
  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"])));
19
19
  exports.CardBody = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
20
- 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) {
20
+ 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) {
21
21
  return p.$isInset &&
22
22
  "\n left: 7px;\n top: 0;\n ";
23
23
  }, function (p) {
@@ -26,7 +26,7 @@ exports.CartBadge = styled_components_1.default.div(templateObject_4 || (templat
26
26
  });
27
27
  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) {
28
28
  return props.$hasSquareFillImage
29
- ? "\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 "
29
+ ? "\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 "
30
30
  : props.$hasImageOffset
31
31
  ? "\n padding: 0.5rem;\n "
32
32
  : "\n padding: 0;\n background-color: var(--dark-opacity-5);\n ";
@@ -59,7 +59,7 @@ exports.ProductDescription = styled_components_1.default.p(templateObject_10 ||
59
59
  return props.$isResponsive &&
60
60
  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 "));
61
61
  });
62
- 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) {
62
+ 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) {
63
63
  return props.$isResponsive &&
64
64
  responsiveSm("height: 48px;");
65
65
  });
package/dist/components/ShoppingCartProduct/ShoppingCartProduct.js CHANGED
@@ -24,6 +24,10 @@ var Loader_1 = __importDefault(require("../Loader"));
24
24
  var QuantitySelector_1 = __importDefault(require("../QuantitySelector"));
25
25
  var QuantitySelector_styled_1 = require("../QuantitySelector/QuantitySelector.styled");
26
26
  var Badges_1 = __importDefault(require("../Badges"));
27
+ var LinkComponent = function (_a) {
28
+ var item = _a.item, children = _a.children;
29
+ 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 })));
30
+ };
27
31
  var ShoppingCartProduct = function (_a) {
28
32
  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;
29
33
  var tooltipWrapperRef = (0, react_1.useRef)(null);
@@ -47,13 +51,9 @@ var ShoppingCartProduct = function (_a) {
47
51
  scrollableParent.scrollBy({ top: 200, behavior: "smooth" });
48
52
  }
49
53
  }, []);
50
- var LinkComponent = function (_a) {
51
- var item = _a.item, children = _a.children;
52
- return item.component ? ((0, jsx_runtime_1.jsx)(item.component, { children: children })) : ((0, jsx_runtime_1.jsx)("a", __assign({ href: item.slug }, { children: children })));
53
- };
54
54
  var showUpfrontProductPriceLoading = insuranceType === 3 && upfrontAddonChecked && hasUpfrontAddonPriceLoading;
55
55
  var hasUpfrontAddonDiscount = Boolean(upfrontAddonOldPrice);
56
- 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 &&
57
- (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 })] }))] })) }))] })) }))] })));
56
+ var hasInsurancePointer = !hasLoading && insuranceType === 1 && Boolean(toggleInsurance);
57
+ 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 })] }))] })) }))] })) }))] }));
58
58
  };
59
59
  exports.default = ShoppingCartProduct;
package/dist/components/ShoppingCartProduct/ShoppingCartProduct.styled.d.ts CHANGED
@@ -1,5 +1,37 @@
1
1
  /// <reference types="react" />
2
2
  import { ShoppingCartProductStyledProps } from "./props";
3
+ 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;
4
+ 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;
5
+ 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;
6
+ 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;
7
+ 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;
8
+ 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;
9
+ 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;
10
+ 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;
11
+ 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;
12
+ 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;
13
+ 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;
14
+ 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;
15
+ 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;
16
+ 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;
17
+ 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;
18
+ 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;
19
+ 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;
20
+ 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;
21
+ 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;
22
+ 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;
23
+ 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;
24
+ 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;
25
+ 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;
26
+ 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;
27
+ 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;
28
+ 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;
29
+ 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"> & {
30
+ ref?: import("react").Ref<HTMLInputElement>;
31
+ }, "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"> & {
32
+ ref?: import("react").Ref<HTMLInputElement>;
33
+ }, "type">>> & string;
34
+ 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;
3
35
  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;
4
36
  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;
5
37
  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").
14
46
  $selected?: boolean;
15
47
  }, never>>> & string;
16
48
  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;
49
+ 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"> & {
50
+ ref?: import("react").Ref<HTMLInputElement>;
51
+ }, "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"> & {
52
+ ref?: import("react").Ref<HTMLInputElement>;
53
+ }, "type">>> & string;
17
54
  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;
18
55
  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;
19
56
  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"
23
60
  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;
24
61
  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;
25
62
  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;
26
- 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;
63
+ 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 CHANGED
@@ -7,30 +7,59 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
7
7
  return (mod && mod.__esModule) ? mod : { "default": mod };
8
8
  };
9
9
  Object.defineProperty(exports, "__esModule", { value: true });
10
- 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;
10
+ 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;
11
11
  var jsx_runtime_1 = require("react/jsx-runtime");
12
12
  var styled_components_1 = __importDefault(require("styled-components"));
13
13
  var devices_1 = require("../../constants/devices");
14
14
  var Icon_1 = __importDefault(require("../Icon/Icon"));
15
15
  var svgToBase64_1 = __importDefault(require("../../utils/svgToBase64"));
16
- 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"])));
17
- 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" })));
18
- 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"])));
19
- exports.InsuranceType2Content = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n\n"], ["\n\n"])));
20
- 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"])));
21
- 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"])));
22
- 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"])));
23
- 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"])));
24
- 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" })));
25
- 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"])));
26
- 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" })));
27
- 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"])));
28
- 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"])));
29
- 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"])));
30
- 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"])));
31
- 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"])));
32
- 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"])));
33
- 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" })));
34
- 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"])));
35
- 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);
36
- 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;
16
+ 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"])));
17
+ 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"])));
18
+ 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);
19
+ exports.ProductImage = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n width: 96px;\n height: 96px;\n border: 1px solid var(--dark-opacity-5);\n border-radius: 0.5rem;\n position: relative;\n margin-right: 1rem;\n overflow: hidden;\n display: flex;\n align-items: center;\n justify-content: center;\n background: white;\n\n &:hover ~ ", " ", " {\n color: var(--primary-hover);\n }\n img{\n width: calc(100% - 1.5rem);\n height: calc(100% - 1.5rem);\n object-fit: cover;\n border-radius: 0.5rem;\n display: block;\n margin: 0 auto;\n }\n"], ["\n width: 96px;\n height: 96px;\n border: 1px solid var(--dark-opacity-5);\n border-radius: 0.5rem;\n position: relative;\n margin-right: 1rem;\n overflow: hidden;\n display: flex;\n align-items: center;\n justify-content: center;\n background: white;\n\n &:hover ~ ", " ", " {\n color: var(--primary-hover);\n }\n img{\n width: calc(100% - 1.5rem);\n height: calc(100% - 1.5rem);\n object-fit: cover;\n border-radius: 0.5rem;\n display: block;\n margin: 0 auto;\n }\n"])), exports.ProductText, exports.ProductTitle);
20
+ 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"])));
21
+ 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'; });
22
+ 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"])));
23
+ exports.ProductPriceStack = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject([""], [""])));
24
+ 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"])));
25
+ 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"])));
26
+ 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"])));
27
+ 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"])));
28
+ 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"])));
29
+ 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"])));
30
+ 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"])));
31
+ 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"])));
32
+ 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"])));
33
+ 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"])));
34
+ 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'; });
35
+ 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"])));
36
+ 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);
37
+ 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"])));
38
+ 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"])));
39
+ exports.InsurancePriceValue = styled_components_1.default.b(templateObject_24 || (templateObject_24 = __makeTemplateObject([""], [""])));
40
+ 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"])));
41
+ 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"])));
42
+ 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"])));
43
+ exports.InsuranceType2TooltipWrapper = styled_components_1.default.label(templateObject_28 || (templateObject_28 = __makeTemplateObject([""], [""])));
44
+ 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"])));
45
+ 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" })));
46
+ 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"])));
47
+ exports.InsuranceType2Content = styled_components_1.default.div(templateObject_32 || (templateObject_32 = __makeTemplateObject([""], [""])));
48
+ 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"])));
49
+ 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"])));
50
+ 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"])));
51
+ 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"])));
52
+ 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" })));
53
+ 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"])));
54
+ 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"])));
55
+ 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" })));
56
+ 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"])));
57
+ 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"])));
58
+ 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"])));
59
+ 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"])));
60
+ 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"])));
61
+ 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"])));
62
+ 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" })));
63
+ 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"])));
64
+ 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"])));
65
+ 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 CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "krl-alfred",
3
- "version": "2.20.5",
3
+ "version": "2.20.6",
4
4
  "files": [
5
5
  "dist"
6
6
  ],