@trafilea/afrodita-components 6.36.5 → 6.36.7
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.
- package/build/index.esm.js +204 -202
- package/build/index.esm.js.map +1 -1
- package/build/index.js +204 -202
- package/build/index.js.map +1 -1
- package/package.json +1 -1
package/build/index.esm.js
CHANGED
|
@@ -3181,7 +3181,7 @@ var getStylesBySize$g = function (size) {
|
|
|
3181
3181
|
};
|
|
3182
3182
|
}
|
|
3183
3183
|
};
|
|
3184
|
-
var Container$
|
|
3184
|
+
var Container$1p = newStyled.div(templateObject_1$2i || (templateObject_1$2i = __makeTemplateObject(["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n padding: ", ";\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: ", ";\n text-align: center;\n cursor: default;\n"], ["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n padding: ", ";\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: ", ";\n text-align: center;\n cursor: default;\n"])), function (_a) {
|
|
3185
3185
|
var backgroundColor = _a.backgroundColor;
|
|
3186
3186
|
return backgroundColor;
|
|
3187
3187
|
}, function (_a) {
|
|
@@ -3218,7 +3218,7 @@ var H3$3 = newStyled.h3(templateObject_2$1E || (templateObject_2$1E = __makeTemp
|
|
|
3218
3218
|
var ClubOfferTag = function (_a) {
|
|
3219
3219
|
var clubOfferText = _a.clubOfferText, className = _a.className, disabled = _a.disabled, _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#882A2B' : _b, _c = _a.borderColor, borderColor = _c === void 0 ? 'transparent' : _c, _d = _a.textColor, textColor = _d === void 0 ? '#fff' : _d, _e = _a.size, size = _e === void 0 ? ComponentSize.Medium : _e, style = _a.style;
|
|
3220
3220
|
var theme = useTheme();
|
|
3221
|
-
return (jsx$1(Container$
|
|
3221
|
+
return (jsx$1(Container$1p, __assign$1({ backgroundColor: disabled ? theme.colors.shades['50'].color : backgroundColor, borderColor: disabled ? theme.colors.shades['50'].color : borderColor, size: size, "data-testid": "cluboffer-container", style: style, className: className }, { children: jsx$1(H3$3, __assign$1({ textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size, style: { fontSize: '0.875rem', lineHeight: '18px' } }, { children: clubOfferText }), void 0) }), void 0));
|
|
3222
3222
|
};
|
|
3223
3223
|
var templateObject_1$2i, templateObject_2$1E;
|
|
3224
3224
|
|
|
@@ -3251,7 +3251,7 @@ var getStylesBySize$f = function (size, bordersRounded, theme) {
|
|
|
3251
3251
|
};
|
|
3252
3252
|
}
|
|
3253
3253
|
};
|
|
3254
|
-
var Container$
|
|
3254
|
+
var Container$1o = newStyled.div(templateObject_1$2h || (templateObject_1$2h = __makeTemplateObject(["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n padding: ", ";\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: ", ";\n text-align: center;\n cursor: default;\n"], ["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n padding: ", ";\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: ", ";\n text-align: center;\n cursor: default;\n"])), function (_a) {
|
|
3255
3255
|
var backgroundColor = _a.backgroundColor;
|
|
3256
3256
|
return backgroundColor;
|
|
3257
3257
|
}, function (_a) {
|
|
@@ -3288,7 +3288,7 @@ var H3$2 = newStyled.h3(templateObject_2$1D || (templateObject_2$1D = __makeTemp
|
|
|
3288
3288
|
var DiscountTag$3 = function (_a) {
|
|
3289
3289
|
var discount = _a.discount, offText = _a.offText, savings = _a.savings, _b = _a.showSavings, showSavings = _b === void 0 ? false : _b, disabled = _a.disabled, _c = _a.backgroundColor, backgroundColor = _c === void 0 ? '#fff' : _c, _d = _a.borderColor, borderColor = _d === void 0 ? 'transparent' : _d, _e = _a.textColor, textColor = _e === void 0 ? '#fff' : _e, _f = _a.size, size = _f === void 0 ? ComponentSize.Medium : _f, style = _a.style, _g = _a.bordersRounded, bordersRounded = _g === void 0 ? false : _g;
|
|
3290
3290
|
var theme = useTheme();
|
|
3291
|
-
return (jsx$1(Container$
|
|
3291
|
+
return (jsx$1(Container$1o, __assign$1({ backgroundColor: disabled ? theme.colors.shades['50'].color : backgroundColor, borderColor: disabled ? theme.colors.shades['50'].color : borderColor, size: size, "data-testid": "discount-container", style: style, bordersRounded: bordersRounded }, { children: jsxs$1(H3$2, __assign$1({ textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size, style: style, theme: theme }, { children: [discount, "% ", offText, " ", showSavings && savings && "- ".concat(savings)] }), void 0) }), void 0));
|
|
3292
3292
|
};
|
|
3293
3293
|
var templateObject_1$2h, templateObject_2$1D;
|
|
3294
3294
|
|
|
@@ -3399,7 +3399,7 @@ var getFontSize = function (size, theme, finalPriceStyled, finalPriceStyledSmall
|
|
|
3399
3399
|
return (_c = getStylesBySize$e(size, theme)) === null || _c === void 0 ? void 0 : _c.fontSize;
|
|
3400
3400
|
}
|
|
3401
3401
|
};
|
|
3402
|
-
var Container$
|
|
3402
|
+
var Container$1n = newStyled.div(templateObject_1$2g || (templateObject_1$2g = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
3403
3403
|
var Price = newStyled.p(templateObject_2$1C || (templateObject_2$1C = __makeTemplateObject(["\n font-weight: ", ";\n font-size: ", ";\n line-height: ", ";\n color: ", ";\n text-decoration: ", ";\n margin: ", ";\n position: relative;\n margin-top: ", ";\n"], ["\n font-weight: ", ";\n font-size: ", ";\n line-height: ", ";\n color: ", ";\n text-decoration: ", ";\n margin: ", ";\n position: relative;\n margin-top: ", ";\n"])), function (_a) {
|
|
3404
3404
|
var weight = _a.weight;
|
|
3405
3405
|
return (weight ? weight : '400');
|
|
@@ -3455,7 +3455,7 @@ var PriceLabel$1 = function (_a) {
|
|
|
3455
3455
|
: ComponentSize.XSmall;
|
|
3456
3456
|
return (jsx$1(Price, __assign$1({ size: sizeProp, color: theme.component.pricing.priceLabel.price.originalPriceColor, margin: !clubStyle, underlined: originalPriceUnderlined, "data-testid": getTestId$1(testId, 'original-product-price'), theme: theme }, { children: originalPrice }), void 0));
|
|
3457
3457
|
};
|
|
3458
|
-
return (jsxs$1(Container$
|
|
3458
|
+
return (jsxs$1(Container$1n, __assign$1({}, rest, { id: "priceLabel" }, { children: [clubStyle ? (jsxs$1(Fragment$2, { children: [!!originalPrice && jsx$1(OriginalPrice, {}, void 0), jsx$1(Price, __assign$1({ margin: true, "data-testid": getTestId$1(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: finalPrice }), void 0)] }, void 0)) : (jsxs$1(Fragment$2, { children: [jsx$1(Price, __assign$1({ margin: true, "data-testid": getTestId$1(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: finalPrice }), void 0), !!originalPrice && jsx$1(OriginalPrice, {}, void 0)] }, void 0)), discount && (jsx$1(TagContainer, __assign$1({ size: size }, { children: jsx$1(DiscountTag$3, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
|
|
3459
3459
|
};
|
|
3460
3460
|
var templateObject_1$2g, templateObject_2$1C, templateObject_3$1f;
|
|
3461
3461
|
|
|
@@ -3512,7 +3512,7 @@ var PriceLabelV2$1 = function (_a) {
|
|
|
3512
3512
|
var savetoString = saveto.toFixed(2);
|
|
3513
3513
|
var OriginalPrice = function () { return (jsx$1(Price, __assign$1({ size: originalPriceStyled ? size : ComponentSize.Small, color: theme.component.pricing.priceLabel.price.originalPriceColor ||
|
|
3514
3514
|
theme.colors.shades['300'].color, margin: true, underlined: originalPriceUnderlined, "data-testid": getTestId$1(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
|
|
3515
|
-
return (jsxs$1(Container$
|
|
3515
|
+
return (jsxs$1(Container$1n, __assign$1({}, rest, { id: "priceLabelV2" }, { children: [isOriginalPrice && jsx$1(OriginalPrice, {}, void 0), jsxs$1(FinalPriceStyledContainer$3, __assign$1({ "data-testid": getTestId$1(testId, 'final-product-price') }, { children: [jsx$1(Price, __assign$1({ margin: true, finalPriceStyledSmall: true }, priceCommonProps, { size: size }, { children: currencySymbol }), void 0), jsx$1(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size }, { children: finalPriceArray[0]
|
|
3516
3516
|
? finalPriceArray[0]
|
|
3517
3517
|
: (_b = "".concat(productFinalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1] }), void 0), jsx$1(Price, __assign$1({ finalPriceStyledSmall: true, style: {
|
|
3518
3518
|
marginTop: '-6px',
|
|
@@ -3587,7 +3587,7 @@ var PriceLabelV3 = function (_a) {
|
|
|
3587
3587
|
return null;
|
|
3588
3588
|
return (jsxs$1(DiscountEachOneContainer, __assign$1({ "data-testid": getTestId$1(testId, 'each-one-price') }, { children: [jsxs$1(Price, __assign$1({}, priceCommonProps, { weight: 600 }, { children: ["(", packUnitPrice] }), void 0), jsx$1(Price, __assign$1({}, priceCommonProps, { weight: 400 }, { children: "/each" }), void 0), jsx$1(Price, __assign$1({}, priceCommonProps, { weight: 600 }, { children: ")" }), void 0)] }), void 0));
|
|
3589
3589
|
};
|
|
3590
|
-
return (jsxs$1(ContainerDirectionColumn, __assign$1({}, rest, { children: [jsx$1(Container$
|
|
3590
|
+
return (jsxs$1(ContainerDirectionColumn, __assign$1({}, rest, { children: [jsx$1(Container$1n, __assign$1({ style: { paddingBottom: '0.5rem' } }, { children: isOriginalPrice && jsx$1(OriginalPrice, {}, void 0) }), void 0), jsxs$1(Container$1n, { children: [jsxs$1(FinalPriceStyledContainer$2, __assign$1({ "data-testid": getTestId$1(testId, 'final-product-price') }, { children: [jsx$1(Price, __assign$1({ margin: true, finalPriceStyledSmall: true, style: {
|
|
3591
3591
|
marginTop: '-5px',
|
|
3592
3592
|
} }, priceCommonProps, { size: size }, { children: currencySymbol }), void 0), jsx$1(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size }, { children: finalPriceArray[0] ? finalPriceArray[0] : (_b = "".concat(finalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1] }), void 0), jsx$1(Price, __assign$1({ finalPriceStyledSmall: true, style: {
|
|
3593
3593
|
marginTop: '-6px',
|
|
@@ -3633,7 +3633,7 @@ var PriceLabel = function (_a) {
|
|
|
3633
3633
|
};
|
|
3634
3634
|
var OriginalPrice = function () { return (jsx$1(Price, __assign$1({ size: originalPriceStyled ? size : ComponentSize.Small, color: theme.component.pricing.priceLabel.price.originalPriceColor ||
|
|
3635
3635
|
theme.colors.shades['300'].color, margin: true, underlined: originalPriceUnderlined, "data-testid": getTestId$1(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
|
|
3636
|
-
return (jsxs$1(Container$
|
|
3636
|
+
return (jsxs$1(Container$1n, __assign$1({}, rest, { children: [isOriginalPrice && !isClubOffer && jsx$1(OriginalPrice, {}, void 0), jsxs$1(FinalPriceStyledContainer$1, __assign$1({ "data-testid": getTestId$1(testId, 'final-product-price') }, { children: [jsx$1(Price, __assign$1({ margin: true, finalPriceStyledSmall: true, style: {
|
|
3637
3637
|
marginTop: '-5px',
|
|
3638
3638
|
} }, priceCommonProps, { size: size }, { children: currencySymbol }), void 0), jsx$1(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size, "data-testid": "test-price-final-product-price'" }, { children: finalPriceArray[0] ? finalPriceArray[0] : (_b = "".concat(finalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1] }), void 0), jsx$1(Price, __assign$1({ finalPriceStyledSmall: true, style: {
|
|
3639
3639
|
marginTop: '-6px',
|
|
@@ -3672,7 +3672,7 @@ var PriceLabelV2 = function (_a) {
|
|
|
3672
3672
|
var finalPriceString = finalPriceArray[0]
|
|
3673
3673
|
? finalPriceArray[0]
|
|
3674
3674
|
: (_b = "".concat(finalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1];
|
|
3675
|
-
return (jsxs$1(Container$
|
|
3675
|
+
return (jsxs$1(Container$1n, __assign$1({}, rest, { children: [isOriginalPrice && !isClubOffer && jsx$1(OriginalPrice, {}, void 0), jsxs$1(FinalPriceStyledContainer, __assign$1({ "data-testid": getTestId$1(testId, 'final-product-price'), style: { marginLeft: '-3px' } }, { children: [jsxs$1(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size }, { children: [currencySymbol, finalPriceString] }), void 0), jsx$1(Price, __assign$1({ finalPriceStyledSmall: true }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }), void 0)] }), void 0));
|
|
3676
3676
|
};
|
|
3677
3677
|
var templateObject_1$2c;
|
|
3678
3678
|
|
|
@@ -3687,7 +3687,7 @@ var ClubPriceMemberLabel = function (_a) {
|
|
|
3687
3687
|
return (jsx$1("div", { children: isClub ? (jsxs$1(ContainerWrapper$2, __assign$1({ id: "priceMemberLabelWrapper" }, { children: [PriceComponent, jsx$1(ImgWrapper, __assign$1({ id: "priceMemberLabelImgWrapper" }, { children: icon }), void 0)] }), void 0)) : (jsx$1(Fragment$2, { children: PriceComponent }, void 0)) }, void 0));
|
|
3688
3688
|
};
|
|
3689
3689
|
|
|
3690
|
-
var Container$
|
|
3690
|
+
var Container$1m = newStyled.div(templateObject_1$2a || (templateObject_1$2a = __makeTemplateObject(["\n @keyframes shimmer {\n 100% {\n transform: translateX(100%);\n }\n }\n\n display: inline-block;\n height: ", ";\n width: ", ";\n position: relative;\n overflow: hidden;\n background-color: ", ";\n border-radius: ", ";\n box-sizing: border-box;\n\n ::after {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n transform: translateX(-100%);\n background-image: linear-gradient(\n 90deg,\n ", ",\n ", ",\n ", "\n );\n animation: shimmer 2s infinite;\n content: '';\n box-sizing: border-box;\n }\n"], ["\n @keyframes shimmer {\n 100% {\n transform: translateX(100%);\n }\n }\n\n display: inline-block;\n height: ", ";\n width: ", ";\n position: relative;\n overflow: hidden;\n background-color: ", ";\n border-radius: ", ";\n box-sizing: border-box;\n\n ::after {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n transform: translateX(-100%);\n background-image: linear-gradient(\n 90deg,\n ", ",\n ", ",\n ", "\n );\n animation: shimmer 2s infinite;\n content: '';\n box-sizing: border-box;\n }\n"])), function (_a) {
|
|
3691
3691
|
var height = _a.height;
|
|
3692
3692
|
return height !== null && height !== void 0 ? height : '1.5em';
|
|
3693
3693
|
}, function (_a) {
|
|
@@ -3712,7 +3712,7 @@ var Container$1n = newStyled.div(templateObject_1$2a || (templateObject_1$2a = _
|
|
|
3712
3712
|
var SkeletonBox = function (_a) {
|
|
3713
3713
|
var width = _a.width, height = _a.height;
|
|
3714
3714
|
var theme = useTheme();
|
|
3715
|
-
return jsx$1(Container$
|
|
3715
|
+
return jsx$1(Container$1m, { "data-testid": "skeleton-container", width: width, height: height, theme: theme }, void 0);
|
|
3716
3716
|
};
|
|
3717
3717
|
var templateObject_1$2a;
|
|
3718
3718
|
|
|
@@ -4910,7 +4910,7 @@ var DEFAULTS = {
|
|
|
4910
4910
|
};
|
|
4911
4911
|
var templateObject_1$26, templateObject_2$1x, templateObject_3$1c, templateObject_4$Z, templateObject_5$J, templateObject_6$E, templateObject_7$v, templateObject_8$n, templateObject_9$d, templateObject_10$c, templateObject_11$8, templateObject_12$5, templateObject_13$5, templateObject_14$3, templateObject_15$2, templateObject_16$2, templateObject_17$2, templateObject_18$2, templateObject_19$2, templateObject_20$1;
|
|
4912
4912
|
|
|
4913
|
-
var Container$
|
|
4913
|
+
var Container$1l = newStyled.div(templateObject_1$25 || (templateObject_1$25 = __makeTemplateObject(["\n position: relative;\n display: flex;\n border-radius: 6px;\n gap: 6px;\n"], ["\n position: relative;\n display: flex;\n border-radius: 6px;\n gap: 6px;\n"])));
|
|
4914
4914
|
var Card$4 = newStyled.div(templateObject_2$1w || (templateObject_2$1w = __makeTemplateObject(["\n --background: var(--colors-background-color);\n\n flex: 1;\n position: relative;\n overflow: hidden;\n cursor: pointer;\n border: 2px solid var(--component-packSelector-borderColor);\n padding: 16px 7px 7px;\n text-align: center;\n background-color: var(--background);\n border-radius: var(--component-packSelector-borderRadius);\n\n &[aria-checked='true'] {\n --color: var(--component-packSelector-selectedColor);\n\n border-color: var(--color);\n\n & * {\n p {\n color: var(--color);\n }\n }\n }\n"], ["\n --background: var(--colors-background-color);\n\n flex: 1;\n position: relative;\n overflow: hidden;\n cursor: pointer;\n border: 2px solid var(--component-packSelector-borderColor);\n padding: 16px 7px 7px;\n text-align: center;\n background-color: var(--background);\n border-radius: var(--component-packSelector-borderRadius);\n\n &[aria-checked='true'] {\n --color: var(--component-packSelector-selectedColor);\n\n border-color: var(--color);\n\n & * {\n p {\n color: var(--color);\n }\n }\n }\n"])));
|
|
4915
4915
|
var Tag$2 = newStyled.div(templateObject_3$1b || (templateObject_3$1b = __makeTemplateObject(["\n position: absolute;\n width: 100%;\n left: 50%;\n top: 0;\n transform: translateX(-50%);\n background-color: var(--component-packSelector-tagColor);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 1px 0;\n\n [aria-checked='true'] & {\n background-color: var(--component-packSelector-selectedColor);\n\n & * {\n color: var(--component-packSelector-selectedContrast) !important;\n }\n }\n"], ["\n position: absolute;\n width: 100%;\n left: 50%;\n top: 0;\n transform: translateX(-50%);\n background-color: var(--component-packSelector-tagColor);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 1px 0;\n\n [aria-checked='true'] & {\n background-color: var(--component-packSelector-selectedColor);\n\n & * {\n color: var(--component-packSelector-selectedContrast) !important;\n }\n }\n"])));
|
|
4916
4916
|
var Label$7 = newStyled.div(templateObject_4$Y || (templateObject_4$Y = __makeTemplateObject(["\n position: relative;\n width: fit-content;\n margin: 0 auto;\n"], ["\n position: relative;\n width: fit-content;\n margin: 0 auto;\n"])));
|
|
@@ -4918,7 +4918,7 @@ var Check$1 = newStyled.div(templateObject_5$I || (templateObject_5$I = __makeTe
|
|
|
4918
4918
|
var DiscountContainer$1 = newStyled.div(templateObject_6$D || (templateObject_6$D = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n flex-wrap: wrap;\n"], ["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n flex-wrap: wrap;\n"])));
|
|
4919
4919
|
var PackSelectorV2 = function (_a) {
|
|
4920
4920
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange, currencyCode = _a.currencyCode;
|
|
4921
|
-
return (jsx$1(Container$
|
|
4921
|
+
return (jsx$1(Container$1l, __assign$1({ role: "radiogroup" }, { children: packs.map(function (pack) {
|
|
4922
4922
|
return (jsx$1(PackCard$1, { pack: pack, onChange: onChange, selected: selectedValue === pack, currencyCode: currencyCode }, pack.label));
|
|
4923
4923
|
}) }), void 0));
|
|
4924
4924
|
};
|
|
@@ -4942,23 +4942,23 @@ var PackCard$1 = function (_a) {
|
|
|
4942
4942
|
};
|
|
4943
4943
|
var templateObject_1$25, templateObject_2$1w, templateObject_3$1b, templateObject_4$Y, templateObject_5$I, templateObject_6$D;
|
|
4944
4944
|
|
|
4945
|
-
var Container$
|
|
4945
|
+
var Container$1k = newStyled.div(templateObject_1$24 || (templateObject_1$24 = __makeTemplateObject(["\n height: 32px;\n display: flex;\n align-items: center;\n"], ["\n height: 32px;\n display: flex;\n align-items: center;\n"])));
|
|
4946
4946
|
var DropContainer = newStyled.div(templateObject_2$1v || (templateObject_2$1v = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
4947
4947
|
var DropList = function (_a) {
|
|
4948
4948
|
var dropTotal = _a.dropTotal, drops = _a.drops;
|
|
4949
|
-
return (jsx$1(Container$
|
|
4949
|
+
return (jsx$1(Container$1k, { children: __spreadArray([], new Array(dropTotal), true).map(function (_, index) {
|
|
4950
4950
|
return (jsx$1(DropContainer, __assign$1({ "data-testid": "star-container" }, { children: index < Math.floor(drops) ? (jsx$1(Icon.PDP.Drop, { width: 0.875, height: 0.875 }, void 0)) : (jsx$1(Icon.PDP.DropEmpty, { width: 0.875, height: 0.875 }, void 0)) }), index));
|
|
4951
4951
|
}) }, void 0));
|
|
4952
4952
|
};
|
|
4953
4953
|
var templateObject_1$24, templateObject_2$1v;
|
|
4954
4954
|
|
|
4955
4955
|
var DROPS_TOTAL = 5;
|
|
4956
|
-
var Container$
|
|
4956
|
+
var Container$1j = newStyled.div(templateObject_1$23 || (templateObject_1$23 = __makeTemplateObject(["\n height: 32px;\n display: flex;\n"], ["\n height: 32px;\n display: flex;\n"])));
|
|
4957
4957
|
var Title$b = newStyled.p(templateObject_2$1u || (templateObject_2$1u = __makeTemplateObject(["\n height: 32px;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n display: flex;\n align-items: center;\n font-weight: 600;\n margin-right: 7px;\n"], ["\n height: 32px;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n display: flex;\n align-items: center;\n font-weight: 600;\n margin-right: 7px;\n"])));
|
|
4958
4958
|
var Description$3 = newStyled.p(templateObject_3$1a || (templateObject_3$1a = __makeTemplateObject(["\n height: 32px;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n display: flex;\n align-items: center;\n font-weight: 600;\n margin-left: 7px;\n"], ["\n height: 32px;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n display: flex;\n align-items: center;\n font-weight: 600;\n margin-left: 7px;\n"])));
|
|
4959
4959
|
var AbsorbencyLevel = function (_a) {
|
|
4960
4960
|
var dropTotal = _a.dropTotal, drops = _a.drops, absorbencyTitle = _a.absorbencyTitle, absorbencyDescription = _a.absorbencyDescription;
|
|
4961
|
-
return (jsxs$1(Container$
|
|
4961
|
+
return (jsxs$1(Container$1j, { children: [jsx$1(Title$b, { children: absorbencyTitle }, void 0), jsx$1(DropList, { dropTotal: dropTotal || DROPS_TOTAL, drops: drops }, void 0), jsx$1(Description$3, { children: absorbencyDescription }, void 0)] }, void 0));
|
|
4962
4962
|
};
|
|
4963
4963
|
var templateObject_1$23, templateObject_2$1u, templateObject_3$1a;
|
|
4964
4964
|
|
|
@@ -5062,7 +5062,7 @@ var Accordion$1 = function (_a) {
|
|
|
5062
5062
|
};
|
|
5063
5063
|
var templateObject_1$22;
|
|
5064
5064
|
|
|
5065
|
-
var Container$
|
|
5065
|
+
var Container$1i = newStyled.div(templateObject_1$21 || (templateObject_1$21 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 16px;\n"], ["\n display: flex;\n flex-direction: column;\n gap: 16px;\n"])));
|
|
5066
5066
|
var AccordionOptions = function (_a) {
|
|
5067
5067
|
var titleColor = _a.titleColor, accordions = _a.accordions;
|
|
5068
5068
|
var _b = useState({
|
|
@@ -5075,7 +5075,7 @@ var AccordionOptions = function (_a) {
|
|
|
5075
5075
|
}
|
|
5076
5076
|
return false;
|
|
5077
5077
|
};
|
|
5078
|
-
return (jsx$1(Container$
|
|
5078
|
+
return (jsx$1(Container$1i, { children: accordions.map(function (accordion, index) {
|
|
5079
5079
|
var forceOpenValue = getForceOpen(index);
|
|
5080
5080
|
var accordionTitleColor = forceOpenValue && openAccordionIndex.open ? titleColor : undefined;
|
|
5081
5081
|
return (jsx$1(Accordion$1, __assign$1({ onClick: function () {
|
|
@@ -5226,7 +5226,7 @@ var Bold = newStyled.span(templateObject_1$20 || (templateObject_1$20 = __makeTe
|
|
|
5226
5226
|
var FlexContainer$4 = newStyled.div(templateObject_2$1t || (templateObject_2$1t = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n padding: 12px;\n background-color: white;\n border-radius: 8px;\n text-align: start;\n margin: 10px;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n padding: 12px;\n background-color: white;\n border-radius: 8px;\n text-align: start;\n margin: 10px;\n"])));
|
|
5227
5227
|
var templateObject_1$20, templateObject_2$1t;
|
|
5228
5228
|
|
|
5229
|
-
var Container$
|
|
5229
|
+
var Container$1h = newStyled.div(templateObject_1$1$ || (templateObject_1$1$ = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: center;\n width: ", ";\n height: ", ";\n border-radius: 12px;\n background-color: #fff;\n"], ["\n display: flex;\n flex-direction: row;\n align-items: center;\n width: ", ";\n height: ", ";\n border-radius: 12px;\n background-color: #fff;\n"])), function (_a) {
|
|
5230
5230
|
var _b = _a.width, width = _b === void 0 ? '100%' : _b;
|
|
5231
5231
|
return width;
|
|
5232
5232
|
}, function (_a) {
|
|
@@ -5242,7 +5242,7 @@ var templateObject_1$1$, templateObject_2$1s, templateObject_3$19, templateObjec
|
|
|
5242
5242
|
var CouponCard = function (_a) {
|
|
5243
5243
|
var image = _a.image, title = _a.title, content = _a.content, couponCode = _a.couponCode, offerLink = _a.offerLink, width = _a.width, height = _a.height, _b = _a.btnText, btnText = _b === void 0 ? 'Redeem Offer' : _b, onClickRedeemOfferHandler = _a.onClickRedeemOfferHandler, onClickHandler = _a.onClickHandler;
|
|
5244
5244
|
var _c = useState(false), showCoupon = _c[0], setShowCoupon = _c[1];
|
|
5245
|
-
return (jsxs$1(Container$
|
|
5245
|
+
return (jsxs$1(Container$1h, __assign$1({ height: height, width: width }, { children: [jsx$1(LeftSide, { children: jsx$1(Image$3, { objectFit: "cover", src: image.src, alt: image.alt, width: "100%", height: "100%", borderRadius: "8px 0 0 8px" }, void 0) }, void 0), jsxs$1(RightSide, { children: [jsxs$1(FlexStart, { children: [jsx$1(Text$7, __assign$1({ variant: "body", weight: "bold", size: "small" }, { children: title }), void 0), content] }, void 0), jsx$1(FlexCentered, { children: !showCoupon ? (jsx$1(ButtonPrimary, { type: "button", text: btnText, wide: true, size: ComponentSize.Large, onClick: function () {
|
|
5246
5246
|
onClickRedeemOfferHandler && onClickRedeemOfferHandler();
|
|
5247
5247
|
setShowCoupon(function (prev) { return !prev; });
|
|
5248
5248
|
} }, void 0)) : (jsxs$1(Fragment$2, { children: [jsx$1(ButtonSecondaryOutline, { "data-testid": "coupon-code-btn", testId: "coupon-code-btn", type: "button", text: couponCode !== null && couponCode !== void 0 ? couponCode : '', wide: true, size: ComponentSize.Small, icon: {
|
|
@@ -5553,7 +5553,7 @@ var CustomCheckboxStyles = {
|
|
|
5553
5553
|
},
|
|
5554
5554
|
};
|
|
5555
5555
|
|
|
5556
|
-
var Container$
|
|
5556
|
+
var Container$1g = newStyled.div(templateObject_1$1X || (templateObject_1$1X = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n width: fit-content;\n user-select: none;\n position: relative;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n width: fit-content;\n user-select: none;\n position: relative;\n"])));
|
|
5557
5557
|
var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (props) { return [
|
|
5558
5558
|
CustomCheckboxStyles[props.size](props.theme),
|
|
5559
5559
|
CustomCheckboxStyles[props.variant](props.theme, props.isChecked, props.disabled),
|
|
@@ -5578,7 +5578,7 @@ var Checkbox = function (_a) {
|
|
|
5578
5578
|
}
|
|
5579
5579
|
onChange(e.target.checked);
|
|
5580
5580
|
};
|
|
5581
|
-
return (jsxs$1(Container$
|
|
5581
|
+
return (jsxs$1(Container$1g, { children: [jsx$1(Input$5, { type: "checkbox", checked: checked, disabled: disabled, onChange: handleChange, id: id }, void 0), jsx$1(CustomCheckbox, __assign$1({ theme: theme, size: size, disabled: disabled, isChecked: checked, "data-testid": "checkbox", variant: variant, backgroundColor: backgroundColor, text: text }, { children: checked && jsx$1(Icon.Actions.Check, { fill: "#fff" }, void 0) }), void 0), jsx$1(Label$6, __assign$1({ "data-testid": "checkbox-text", size: size, variant: checked ? 'demi' : 'regular', htmlFor: id, disabled: disabled }, { children: text }), void 0)] }, void 0));
|
|
5582
5582
|
};
|
|
5583
5583
|
var templateObject_1$1X, templateObject_2$1q;
|
|
5584
5584
|
|
|
@@ -5629,7 +5629,7 @@ var BaseDropdown$1 = Object.assign(BaseDropdown, {
|
|
|
5629
5629
|
Option: BaseDropdownOption,
|
|
5630
5630
|
});
|
|
5631
5631
|
|
|
5632
|
-
var Container$
|
|
5632
|
+
var Container$1f = newStyled.div(templateObject_1$1W || (templateObject_1$1W = __makeTemplateObject([""], [""])));
|
|
5633
5633
|
var RequiredPlaceholder = newStyled.p(templateObject_2$1p || (templateObject_2$1p = __makeTemplateObject(["\n margin: unset;\n &:after {\n content: '*';\n color: var(--colors-semantic-urgent-color);\n }\n"], ["\n margin: unset;\n &:after {\n content: '*';\n color: var(--colors-semantic-urgent-color);\n }\n"])));
|
|
5634
5634
|
var SelectedOption = newStyled.span(templateObject_3$18 || (templateObject_3$18 = __makeTemplateObject(["\n font-weight: ", ";\n"], ["\n font-weight: ", ";\n"])), function (_a) {
|
|
5635
5635
|
var fontWeight = _a.fontWeight;
|
|
@@ -5664,7 +5664,7 @@ function SimpleDropdown(_a) {
|
|
|
5664
5664
|
}
|
|
5665
5665
|
setSelectedValue(value);
|
|
5666
5666
|
}, [value, options, initialValue]);
|
|
5667
|
-
var DropdownContainer = showRequiredPlaceholder ? Container$
|
|
5667
|
+
var DropdownContainer = showRequiredPlaceholder ? Container$1f : Fragment$1;
|
|
5668
5668
|
return (jsxs$1(DropdownContainer, { children: [jsxs$1(BaseDropdown$1, __assign$1({ value: selectedValue, onChange: onChangeHandler, disabled: disabled, wide: wide }, { children: [jsxs$1(BaseDropdown$1.Button, __assign$1({ label: label, OpenIcon: Icon.Arrows.ChevronDown, CloseIcon: Icon.Arrows.ChevronUp, wide: wide, isSortOrFilter: sort, testId: testId }, { children: [!!(selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.imageURL) && (jsx$1("img", { src: selectedValue.imageURL, alt: selectedValue.label, style: { paddingRight: 8 } }, void 0)), selectedOptionWeight && disabled ? (jsx$1(SelectedOption, __assign$1({ fontWeight: selectedOptionWeight }, { children: selectedOptionLabel }), void 0)) : (jsx$1(Fragment$2, { children: selectedOptionLabel }, void 0))] }), void 0), jsx$1(BaseDropdown$1.Options, { children: options.map(function (item) { return (jsxs$1(BaseDropdown$1.Option, __assign$1({ value: item, disabled: item.disabled, hasImage: !!item.imageURL }, { children: [!!item.imageURL && (jsx$1("img", { src: item.imageURL, alt: item.label, style: { paddingRight: 8 } }, void 0)), item.label] }), item.key)); }) }, void 0)] }), void 0), !!required && jsx$1(Error$1, { error: required }, void 0)] }, void 0));
|
|
5669
5669
|
}
|
|
5670
5670
|
var templateObject_1$1W, templateObject_2$1p, templateObject_3$18;
|
|
@@ -5733,7 +5733,7 @@ var ContainerStyles$2 = {
|
|
|
5733
5733
|
};
|
|
5734
5734
|
|
|
5735
5735
|
var Wrapper$7 = newStyled.div(templateObject_1$1V || (templateObject_1$1V = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
5736
|
-
var Container$
|
|
5736
|
+
var Container$1e = newStyled.div(__assign$1({}, ContainerStyles$2.baseStyles), function (props) { return [ContainerStyles$2[props.size](props.theme)]; });
|
|
5737
5737
|
var Input$4 = newStyled.input(templateObject_2$1o || (templateObject_2$1o = __makeTemplateObject(["\n position: absolute;\n opacity: 0;\n cursor: ", ";\n height: 100%;\n width: 100%;\n margin: 0;\n"], ["\n position: absolute;\n opacity: 0;\n cursor: ", ";\n height: 100%;\n width: 100%;\n margin: 0;\n"])), function (_a) {
|
|
5738
5738
|
var disabled = _a.disabled;
|
|
5739
5739
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
@@ -5766,7 +5766,7 @@ var RadioInput = function (_a) {
|
|
|
5766
5766
|
var value = event.currentTarget.value;
|
|
5767
5767
|
onChange({ value: value, label: label });
|
|
5768
5768
|
};
|
|
5769
|
-
return (jsxs$1(Wrapper$7, { children: [jsxs$1(Container$
|
|
5769
|
+
return (jsxs$1(Wrapper$7, { children: [jsxs$1(Container$1e, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsx$1(Input$4, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled, style: style }, void 0), jsx$1(CustomRadio$2, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), useV2Style ? (jsxs$1(StyledLabelV2, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled, style: labelStyle }, { children: [icon, " ", label] }), void 0)) : (jsx$1(StyledLabel$3, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0))] }, void 0));
|
|
5770
5770
|
};
|
|
5771
5771
|
var templateObject_1$1V, templateObject_2$1o, templateObject_3$17, templateObject_4$W;
|
|
5772
5772
|
|
|
@@ -6006,7 +6006,7 @@ var StyledPrice$3 = newStyled(PriceLabelV2$1)(templateObject_12$4 || (templateOb
|
|
|
6006
6006
|
var selected = _a.selected, theme = _a.theme;
|
|
6007
6007
|
return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
|
|
6008
6008
|
});
|
|
6009
|
-
var Container$
|
|
6009
|
+
var Container$1d = newStyled.div(templateObject_13$4 || (templateObject_13$4 = __makeTemplateObject([""], [""])));
|
|
6010
6010
|
var templateObject_1$1T, templateObject_2$1m, templateObject_3$15, templateObject_4$U, templateObject_5$F, templateObject_6$B, templateObject_7$t, templateObject_8$l, templateObject_9$c, templateObject_10$b, templateObject_11$7, templateObject_12$4, templateObject_13$4;
|
|
6011
6011
|
|
|
6012
6012
|
var radioIds$2 = {
|
|
@@ -6057,7 +6057,7 @@ var Autoship = function (_a) {
|
|
|
6057
6057
|
onChange(__assign$1(__assign$1({}, dataObj), { subscriptionPeriod: value }));
|
|
6058
6058
|
};
|
|
6059
6059
|
var benefitsColor = benefitsColorMapper(theme);
|
|
6060
|
-
return (jsxs$1(Container$
|
|
6060
|
+
return (jsxs$1(Container$1d, __assign$1({ className: className }, { children: [jsxs$1(SinglePurchaseContainer$3, __assign$1({ "data-testid": "single-purchase-block", selected: radioIds$2.oneTime.id === radioCheck.id, onClick: function () { return handleChange(radioIds$2.oneTime, 'radio'); } }, { children: [jsx$1(RadioInput, { label: singlePurchaseLabel, name: radioIds$2.oneTime.id, id: radioIds$2.oneTime.id, value: radioIds$2.oneTime.id, checked: radioIds$2.oneTime.id === radioCheck.id, size: ComponentSize.Medium, onChange: function () { return handleChange(radioIds$2.oneTime, 'radio'); } }, void 0), jsx$1(StyledPrice$3, { testId: "single-purchase", finalPrice: "$".concat(decimalFormat(Number(discountedProdPrice))), selected: radioIds$2.oneTime.id === radioCheck.id, size: ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(originalProdPrice))) }, void 0)] }), void 0), jsxs$1(SubscriptionContainer$3, __assign$1({ "data-testid": "subscription-purchase-block", selected: radioIds$2.autoship.id === radioCheck.id }, { children: [jsxs$1(SubscriptionHeader$3, __assign$1({ onClick: function () { return handleChange(radioIds$2.autoship, 'radio'); } }, { children: [jsx$1(RadioInput, { label: subscriptionLabel, name: radioIds$2.autoship.id, id: radioIds$2.autoship.id, value: radioIds$2.autoship.id, checked: radioIds$2.autoship.id === radioCheck.id, size: ComponentSize.Medium, onChange: function () { return handleChange(radioIds$2.autoship, 'radio'); } }, void 0), jsx$1(StyledPrice$3, { testId: "subscription", finalPrice: "$".concat(decimalFormat(Number(discountedAutoshipPrice))), selected: radioIds$2.autoship.id === radioCheck.id, size: ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(originalProdPrice))) }, void 0)] }), void 0), jsx$1(BenefitsContainer$3, { children: autoshipBenefits.map(function (benefit) { return (jsxs$1(Benefit$3, { children: [jsx$1(Icon.Actions.Check, { width: 1.2, height: 1.2, fill: radioIds$2.autoship.id === radioCheck.id
|
|
6061
6061
|
? benefitsColor.selected
|
|
6062
6062
|
: benefitsColor.base }, void 0), jsx$1(BenefitText$3, __assign$1({ variant: "body" }, { children: benefit }), void 0)] }, benefit)); }) }, void 0), radioIds$2.autoship.id === radioCheck.id && (jsxs$1(Fragment$2, { children: [jsxs$1(FlexContainer$3, { children: [jsx$1(DeliveryFrequencyLabel$1, __assign$1({ variant: "body" }, { children: "Deliver every:" }), void 0), jsx$1(SimpleDropdown, { testId: "subscription-frecuency", initialValue: dropdownOptions[0], options: dropdownOptions, onChange: function (value) { return handleChange(value.value, 'dropdown'); }, placeHolder: "" }, void 0)] }, void 0), jsx$1(SubscriptionDetailsContainer, { children: jsx$1(Tooltip, __assign$1({ position: 0, content: tooltipContent, header: tooltipHeader, maxWidth: "300px", showCloseIcon: closeIcon }, { children: jsxs$1(FlexContainer$3, { children: [jsx$1(SubscriptionDetails, __assign$1({ variant: "body", weight: "demi" }, { children: "Subscription Details" }), void 0), jsx$1(Icon.Actions.CircleQuestion, { width: 1.2 }, void 0)] }, void 0) }), void 0) }, void 0)] }, void 0))] }), void 0)] }), void 0));
|
|
6063
6063
|
};
|
|
@@ -6115,7 +6115,7 @@ var StyledPrice$2 = newStyled(PriceLabelV2$1)(templateObject_11$6 || (templateOb
|
|
|
6115
6115
|
var selected = _a.selected, theme = _a.theme;
|
|
6116
6116
|
return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
|
|
6117
6117
|
});
|
|
6118
|
-
var Container$
|
|
6118
|
+
var Container$1c = newStyled.div(templateObject_12$3 || (templateObject_12$3 = __makeTemplateObject(["\n margin-top: 20px;\n"], ["\n margin-top: 20px;\n"])));
|
|
6119
6119
|
var TooltipWrapper$1 = newStyled.div(templateObject_13$3 || (templateObject_13$3 = __makeTemplateObject(["\n margin: ", ";\n"], ["\n margin: ", ";\n"])), function (_a) {
|
|
6120
6120
|
var theme = _a.theme;
|
|
6121
6121
|
return theme.component.autoship.tooltip.margin;
|
|
@@ -6180,7 +6180,7 @@ var AutoshipV2 = function (_a) {
|
|
|
6180
6180
|
onChange(__assign$1(__assign$1({}, dataObj), { subscriptionPeriod: value }));
|
|
6181
6181
|
};
|
|
6182
6182
|
var benefitsColor = benefitsColorMapper(theme);
|
|
6183
|
-
return (jsxs$1(Container$
|
|
6183
|
+
return (jsxs$1(Container$1c, __assign$1({ className: className }, { children: [jsxs$1(SubscriptionContainer$2, __assign$1({ onClick: function () { return handleChange(radioIds$1.autoship, 'radio'); }, "data-testid": "subscription-purchase-block", selected: radioIds$1.autoship.id === radioCheck.id }, { children: [jsx$1(DiscountTag$2, __assign$1({ isSelected: radioIds$1.autoship.id === radioCheck.id }, { children: discountLabel !== null && discountLabel !== void 0 ? discountLabel : "".concat(autoShipPctOverListPriceRounded, "% OFF - SAVE ").concat(currencySymbol).concat(autoShipSaving.toFixed(2)) }), void 0), jsxs$1(SubscriptionHeader$2, { children: [jsxs$1(FlexContainer$2, { children: [jsx$1(RadioInput, { label: subscriptionLabel, name: radioIds$1.autoship.id, id: radioIds$1.autoship.id, value: radioIds$1.autoship.id, checked: radioIds$1.autoship.id === radioCheck.id, size: ComponentSize.Medium, style: { marginRight: '10px' }, useV2Style: true, onChange: function () { }, disabled: disabledInputs && disabledInputs.includes(radioIds$1.autoship.id) }, void 0), jsx$1(TooltipWrapper$1, { children: jsx$1(Tooltip, __assign$1({ position: 0, content: tooltipContent, header: tooltipHeader, maxWidth: "248px", showCloseIcon: closeIcon, closeBtnSize: 0.7 }, { children: jsx$1(Icon.Actions.CircleQuestion, { width: 1 }, void 0) }), void 0) }, void 0)] }, void 0), jsx$1(StyledPrice$2, { testId: "subscription", finalPrice: "".concat(currencySymbol).concat(decimalFormat(Number(autoshipFinalPrice))), selected: radioIds$1.autoship.id === radioCheck.id, size: ComponentSize.Large, originalPrice: "".concat(currencySymbol).concat(decimalFormat(Number(listPrice))) }, void 0)] }, void 0), jsx$1(BenefitsContainer$2, { children: updatedAutoshipBenefits.map(function (benefit) { return (jsxs$1(Benefit$2, { children: [jsx$1(Icon.Actions.Check, { width: 1.2, height: 1.2, fill: radioIds$1.autoship.id === radioCheck.id
|
|
6184
6184
|
? benefitsColor.selected
|
|
6185
6185
|
: benefitsColor.base }, void 0), jsx$1(BenefitText$2, { variant: "body", dangerouslySetInnerHTML: { __html: benefit } }, void 0)] }, benefit)); }) }, void 0), jsx$1(Fragment$2, { children: dropdownOptions.length > 1 ? (jsxs$1(FlexContainer$2, __assign$1({ onClick: function (e) { return e.stopPropagation(); } }, { children: [jsx$1(DeliveryFrequencyLabel, __assign$1({ variant: "body" }, { children: "Deliver every:" }), void 0), jsx$1(SimpleDropdown, { testId: "subscription-frequency", initialValue: dropdownOptions[0], options: dropdownOptions, onChange: function (value) { return handleChange(value.value, 'dropdown'); }, placeHolder: "" }, void 0)] }), void 0)) : (jsxs$1(DeliveryFrequencyLabel, __assign$1({ variant: "body" }, { children: ["Deliver every ", dropdownOptions[0].label.toLowerCase()] }), void 0)) }, void 0)] }), void 0), jsxs$1(SinglePurchaseContainer$2, __assign$1({ "data-testid": "single-purchase-block", selected: radioIds$1.oneTime.id === radioCheck.id, onClick: function () { return handleChange(radioIds$1.oneTime, 'radio'); } }, { children: [jsx$1(RadioInput, { label: singlePurchaseLabel, name: radioIds$1.oneTime.id, id: radioIds$1.oneTime.id, value: radioIds$1.oneTime.id, checked: radioIds$1.oneTime.id === radioCheck.id, size: ComponentSize.Medium, onChange: function () { }, useV2Style: true, disabled: disabledInputs && disabledInputs.includes(radioIds$1.oneTime.id) }, void 0), jsx$1(StyledPrice$2, { testId: "single-purchase", finalPrice: "".concat(currencySymbol).concat(decimalFormat(Number(discountedPrice))), selected: radioIds$1.oneTime.id === radioCheck.id, size: ComponentSize.Large, originalPrice: "".concat(currencySymbol).concat(decimalFormat(Number(listPrice))) }, void 0)] }), void 0)] }), void 0));
|
|
6186
6186
|
};
|
|
@@ -6222,7 +6222,7 @@ var ResultFeedback = function (_a) {
|
|
|
6222
6222
|
return (jsxs$1(CustomerDetails, { children: [jsx$1(NameWithStars, { name: name, size: size }, void 0), description && jsx$1(Description$2, { children: description }, void 0), reviewDays && jsx$1(ReviewDays, { children: reviewDays }, void 0)] }, void 0));
|
|
6223
6223
|
};
|
|
6224
6224
|
|
|
6225
|
-
var Container$
|
|
6225
|
+
var Container$1b = newStyled.div(templateObject_1$1Q || (templateObject_1$1Q = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n row-gap: 15px;\n background: var(--colors-shades-white-color);\n border: 1px solid var(--colors-shades-50-color);\n box-sizing: border-box;\n border-radius: 10px;\n max-width: ", ";\n width: 100%;\n height: 100%;\n padding: ", ";\n flex-wrap: wrap;\n\n @media (max-width: 768px) {\n row-gap: 12px;\n max-width: ", ";\n }\n"], ["\n display: flex;\n flex-direction: column;\n row-gap: 15px;\n background: var(--colors-shades-white-color);\n border: 1px solid var(--colors-shades-50-color);\n box-sizing: border-box;\n border-radius: 10px;\n max-width: ", ";\n width: 100%;\n height: 100%;\n padding: ", ";\n flex-wrap: wrap;\n\n @media (max-width: 768px) {\n row-gap: 12px;\n max-width: ", ";\n }\n"])), function (props) { return props.styles.imageContainerMaxWidth; }, function (props) { return props.styles.imageContainerPadding; }, function (props) { return props.styles.imageContainerMobileMaxWidth; });
|
|
6226
6226
|
var ImageContainer$7 = newStyled.div(templateObject_2$1j || (templateObject_2$1j = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n width: 100%;\n height: 100%;\n column-gap: 4px;\n align-items: center;\n justify-content: center;\n"], ["\n display: flex;\n flex-direction: row;\n width: 100%;\n height: 100%;\n column-gap: 4px;\n align-items: center;\n justify-content: center;\n"])));
|
|
6227
6227
|
var ImageCard = newStyled.div(templateObject_3$12 || (templateObject_3$12 = __makeTemplateObject(["\n display: flex;\n min-height: ", ";\n min-width: ", ";\n width: ", ";\n flex-wrap: wrap;\n\n @media (max-width: 768px) {\n min-height: ", ";\n min-width: ", ";\n width: ", ";\n }\n"], ["\n display: flex;\n min-height: ", ";\n min-width: ", ";\n width: ", ";\n flex-wrap: wrap;\n\n @media (max-width: 768px) {\n min-height: ", ";\n min-width: ", ";\n width: ", ";\n }\n"])), function (props) { return props.styles.imageMinHeight; }, function (props) { return props.styles.imageMinWidth; }, function (props) { return props.styles.imageMinWidth; }, function (props) { return props.styles.mobileImageMinHeight; }, function (props) { return props.styles.mobileImageMinWidth; }, function (props) { return props.styles.mobileImageMinWidth; });
|
|
6228
6228
|
var UserInfoText = newStyled.div(templateObject_4$R || (templateObject_4$R = __makeTemplateObject(["\n color: ", ";\n font-size: ", ";\n text-align: ", ";\n margin: 0;\n font-weight: 400;\n line-height: 130%;\n\n @media (max-width: 768px) {\n font-size: ", ";\n }\n"], ["\n color: ", ";\n font-size: ", ";\n text-align: ", ";\n margin: 0;\n font-weight: 400;\n line-height: 130%;\n\n @media (max-width: 768px) {\n font-size: ", ";\n }\n"])), function (_a) {
|
|
@@ -6310,7 +6310,7 @@ var BeforeAfterCard = function (_a) {
|
|
|
6310
6310
|
var stylesBySize = getStylesBySize$d(size, theme);
|
|
6311
6311
|
var infoText = buildInfoText(name, age, months);
|
|
6312
6312
|
var Component = componentByVariant[variant];
|
|
6313
|
-
return (jsxs$1(Container$
|
|
6313
|
+
return (jsxs$1(Container$1b, __assign$1({ "data-testid": "Container", styles: stylesBySize }, { children: [jsxs$1(ImageContainer$7, __assign$1({ "data-testid": "ImageContainer" }, { children: [jsx$1(ImageCard, __assign$1({ "data-testid": "ImageCard", styles: stylesBySize }, { children: jsx$1(Image$3, { borderRadius: imageBorderRadius, src: beforeImage, alt: "before", height: "100%", width: "100%" }, void 0) }), void 0), jsx$1(ImageCard, __assign$1({ styles: stylesBySize }, { children: jsx$1(Image$3, { borderRadius: imageBorderRadius, src: afterImage, alt: "after", height: "100%", width: "100%" }, void 0) }), void 0)] }), void 0), jsx$1(Component, __assign$1({ name: name, size: size, alignCenter: alignCenter, text: infoText }, rest), void 0)] }), void 0));
|
|
6314
6314
|
};
|
|
6315
6315
|
|
|
6316
6316
|
var Section = newStyled.div(templateObject_1$1P || (templateObject_1$1P = __makeTemplateObject(["\n font-weight: 600;\n display: flex;\n flex-direction: row;\n align-items: center;\n align-text: left;\n width: 100%;\n box-sizing: border-box;\n align-self: flex-start;\n padding: ", ";\n"], ["\n font-weight: 600;\n display: flex;\n flex-direction: row;\n align-items: center;\n align-text: left;\n width: 100%;\n box-sizing: border-box;\n align-self: flex-start;\n padding: ", ";\n"])), function (props) {
|
|
@@ -6333,7 +6333,7 @@ var CardBody$1 = function (_a) {
|
|
|
6333
6333
|
};
|
|
6334
6334
|
var templateObject_1$1O;
|
|
6335
6335
|
|
|
6336
|
-
var Container$
|
|
6336
|
+
var Container$1a = newStyled.div(templateObject_1$1N || (templateObject_1$1N = __makeTemplateObject(["\n ", "\n width: ", ";\n background: ", ";\n border-radius: ", ";\n border: ", ";\n"], ["\n ", "\n width: ", ";\n background: ", ";\n border-radius: ", ";\n border: ", ";\n"])), function (_a) {
|
|
6337
6337
|
var flex = _a.flex;
|
|
6338
6338
|
return flex &&
|
|
6339
6339
|
"display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;";
|
|
@@ -6348,7 +6348,7 @@ var Container$1b = newStyled.div(templateObject_1$1N || (templateObject_1$1N = _
|
|
|
6348
6348
|
var Card$2 = function (_a) {
|
|
6349
6349
|
var children = _a.children, backgroundColor = _a.backgroundColor, _b = _a.widthAuto, widthAuto = _b === void 0 ? true : _b, border = _a.border, _c = _a.flex, flex = _c === void 0 ? true : _c;
|
|
6350
6350
|
var theme = useTheme();
|
|
6351
|
-
return (jsx$1(Container$
|
|
6351
|
+
return (jsx$1(Container$1a, __assign$1({ backgroundColor: backgroundColor ? backgroundColor : theme.component.card.backgroundColor, widthAuto: widthAuto, border: border, flex: flex, "data-testid": "CardContainer", theme: theme }, { children: children }), void 0));
|
|
6352
6352
|
};
|
|
6353
6353
|
var Card$3 = Object.assign(Card$2, {
|
|
6354
6354
|
Header: CardHeader,
|
|
@@ -6372,14 +6372,14 @@ var Minimalistic = function (_a) {
|
|
|
6372
6372
|
return (jsx$1(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxs$1(StyledWrapper, { children: [jsxs$1(StyledContainer, __assign$1({ "data-testid": "".concat(testId, "-section") }, { children: [jsx$1(StyledContainer, { children: jsx$1(TextLabel, __assign$1({ variant: "body", weight: "demi", size: "small" }, { children: getMorePayLessText }), void 0) }, void 0), jsx$1(PriceLabel$1, { finalPrice: price, originalPrice: originalPrice, color: theme.colors.pallete.secondary.color, size: ComponentSize.Small, testId: testId }, void 0)] }), void 0), jsxs$1(StyledContainer, __assign$1({ "data-testid": "".concat(testId, "-section-bottom") }, { children: [jsxs$1(TextLabel, __assign$1({ variant: "body", weight: "demi", size: "small", color: "var(--colors-pallete-red-color)" }, { children: [getQtyForText, " ", discount, "% ", offText.toLocaleUpperCase()] }), void 0), jsxs$1(YouAreSaving, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [youAreSavingText, ": ", savingPrice] }), void 0)] }), void 0)] }, void 0) }), void 0));
|
|
6373
6373
|
};
|
|
6374
6374
|
|
|
6375
|
-
var Container$
|
|
6375
|
+
var Container$19 = newStyled.div(templateObject_1$1L || (templateObject_1$1L = __makeTemplateObject(["\n padding: 0.625rem 1.5rem;\n"], ["\n padding: 0.625rem 1.5rem;\n"])));
|
|
6376
6376
|
var Title$9 = newStyled.h1(templateObject_2$1h || (templateObject_2$1h = __makeTemplateObject(["\n font-weight: 700;\n font-size: 1rem;\n line-height: 1.25rem;\n color: ", ";\n margin: 0;\n margin-bottom: 0.125rem;\n text-align: center;\n"], ["\n font-weight: 700;\n font-size: 1rem;\n line-height: 1.25rem;\n color: ", ";\n margin: 0;\n margin-bottom: 0.125rem;\n text-align: center;\n"])), function (props) { return props.color; });
|
|
6377
6377
|
var Details$1 = newStyled.span(templateObject_3$10 || (templateObject_3$10 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n font-weight: 400;\n font-size: 1rem;\n margin: 0;\n line-height: 1.5rem;\n justify-content: center;\n color: ", ";\n"], ["\n display: flex;\n align-items: center;\n font-weight: 400;\n font-size: 1rem;\n margin: 0;\n line-height: 1.5rem;\n justify-content: center;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
6378
6378
|
var PriceContainer$2 = newStyled.span(templateObject_4$P || (templateObject_4$P = __makeTemplateObject(["\n margin: 0 0.313rem;\n display: flex;\n align-items: center;\n"], ["\n margin: 0 0.313rem;\n display: flex;\n align-items: center;\n"])));
|
|
6379
6379
|
var Simple = function (_a) {
|
|
6380
6380
|
var title = _a.title, freeShippingText = _a.freeShippingText, price = _a.price, anyQtyForText = _a.anyQtyForText, backgroundColor = _a.backgroundColor, _b = _a.widthAuto, widthAuto = _b === void 0 ? false : _b;
|
|
6381
6381
|
var theme = useTheme();
|
|
6382
|
-
return (jsx$1(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxs$1(Container$
|
|
6382
|
+
return (jsx$1(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxs$1(Container$19, { children: [jsx$1(Title$9, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Title" }, { children: title }), void 0), jsxs$1(Details$1, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Details" }, { children: [anyQtyForText, jsx$1(PriceContainer$2, __assign$1({ "data-testid": "Price" }, { children: jsx$1(PriceLabel$1, { finalPrice: price, color: "var(--colors-pallete-red-color)", size: ComponentSize.Small }, void 0) }), void 0), "+ ", freeShippingText] }), void 0)] }, void 0) }), void 0));
|
|
6383
6383
|
};
|
|
6384
6384
|
var templateObject_1$1L, templateObject_2$1h, templateObject_3$10, templateObject_4$P;
|
|
6385
6385
|
|
|
@@ -6388,7 +6388,7 @@ var Bundle = {
|
|
|
6388
6388
|
Simple: Simple,
|
|
6389
6389
|
};
|
|
6390
6390
|
|
|
6391
|
-
var Container$
|
|
6391
|
+
var Container$18 = newStyled.div(templateObject_1$1K || (templateObject_1$1K = __makeTemplateObject(["\n display: ", ";\n align-items: center;\n font-size: 0.88rem;\n"], ["\n display: ", ";\n align-items: center;\n font-size: 0.88rem;\n"])), function (_a) {
|
|
6392
6392
|
var displayBNPL = _a.displayBNPL;
|
|
6393
6393
|
return (displayBNPL ? 'flex' : 'none');
|
|
6394
6394
|
});
|
|
@@ -6403,7 +6403,7 @@ var BuyNowPayLater = function (_a) {
|
|
|
6403
6403
|
console.error('Icon', iconName, 'not found');
|
|
6404
6404
|
return null;
|
|
6405
6405
|
}
|
|
6406
|
-
return (jsx$1(Container$
|
|
6406
|
+
return (jsx$1(Container$18, __assign$1({ displayBNPL: displayBNPL }, { children: jsxs$1(TextContainer$1, __assign$1({ style: { fontSize: fontSize }, "data-testid": "mainText" }, { children: ["Or ".concat(installments, " payments of "), jsx$1(Text$7, __assign$1({ variant: "heading6", style: { display: 'inline', fontSize: fontSize }, testId: "InstallmentPriceId" }, { children: installmentPrice }), void 0), showLogo ? ' with' : '', showLogo && (jsx$1(IconWrapper$1, { children: jsx$1(IconComponent, { width: 3.2, height: 2, fill: iconColor, style: { top: '-3px', position: 'relative' } }, void 0) }, void 0))] }), void 0) }), void 0));
|
|
6407
6407
|
};
|
|
6408
6408
|
var templateObject_1$1K, templateObject_2$1g, templateObject_3$$;
|
|
6409
6409
|
|
|
@@ -6431,11 +6431,11 @@ var Description$1 = function (_a) {
|
|
|
6431
6431
|
};
|
|
6432
6432
|
var templateObject_1$1H;
|
|
6433
6433
|
|
|
6434
|
-
var Container$
|
|
6434
|
+
var Container$17 = newStyled.div(templateObject_1$1G || (templateObject_1$1G = __makeTemplateObject(["\n margin: 0;\n padding: 0.25rem;\n background-color: ", ";\n display: inline-flex;\n border-radius: 50%;\n cursor: pointer;\n width: ", ";\n height: ", ";\n justify-content: center;\n align-items: center;\n"], ["\n margin: 0;\n padding: 0.25rem;\n background-color: ", ";\n display: inline-flex;\n border-radius: 50%;\n cursor: pointer;\n width: ", ";\n height: ", ";\n justify-content: center;\n align-items: center;\n"])), function (props) { return props.backgroundColor; }, function (props) { return "".concat(props.size, "em"); }, function (props) { return "".concat(props.size, "em"); });
|
|
6435
6435
|
var CloseButton$1 = function (_a) {
|
|
6436
6436
|
var onClick = _a.onClick, size = _a.size;
|
|
6437
6437
|
var theme = useTheme();
|
|
6438
|
-
return (jsx$1(Container$
|
|
6438
|
+
return (jsx$1(Container$17, __assign$1({ backgroundColor: theme.colors.shades['700'].color, onClick: onClick, "data-testid": "CartProductItemCloseBtn", size: size }, { children: jsx$1(Icon.Actions.Close, { width: size - 1, height: size - 1, fill: "#fff" }, void 0) }), void 0));
|
|
6439
6439
|
};
|
|
6440
6440
|
var templateObject_1$1G;
|
|
6441
6441
|
|
|
@@ -6464,8 +6464,8 @@ var CartProductItem = {
|
|
|
6464
6464
|
CloseButton: CloseButton$1,
|
|
6465
6465
|
};
|
|
6466
6466
|
|
|
6467
|
-
var Container$
|
|
6468
|
-
var MobileContainer = newStyled(Container$
|
|
6467
|
+
var Container$16 = newStyled.div(templateObject_1$1E || (templateObject_1$1E = __makeTemplateObject(["\n display: inline-flex;\n height: 20px;\n padding: 1px 10px;\n align-items: center;\n gap: 6px;\n flex-shrink: 0;\n border-radius: 6px;\n background: #882a2b;\n margin-top: 4px;\n margin-bottom: 10px;\n"], ["\n display: inline-flex;\n height: 20px;\n padding: 1px 10px;\n align-items: center;\n gap: 6px;\n flex-shrink: 0;\n border-radius: 6px;\n background: #882a2b;\n margin-top: 4px;\n margin-bottom: 10px;\n"])));
|
|
6468
|
+
var MobileContainer = newStyled(Container$16)(templateObject_2$1f || (templateObject_2$1f = __makeTemplateObject(["\n padding: 2px 2px;\n gap: 3px;\n"], ["\n padding: 2px 2px;\n gap: 3px;\n"])));
|
|
6469
6469
|
var DollarPart = newStyled.span(templateObject_3$_ || (templateObject_3$_ = __makeTemplateObject(["\n color: #fff;\n font-family: 'Avenir Next', sans-serif;\n font-weight: 700;\n line-height: 14px; /* 116.667% */\n"], ["\n color: #fff;\n font-family: 'Avenir Next', sans-serif;\n font-weight: 700;\n line-height: 14px; /* 116.667% */\n"])));
|
|
6470
6470
|
var ClubMembersText = newStyled.span(templateObject_4$O || (templateObject_4$O = __makeTemplateObject(["\n color: #fff;\n font-family: 'Avenir Next', sans-serif;\n font-weight: 500;\n line-height: 14px; /* 116.667% */\n"], ["\n color: #fff;\n font-family: 'Avenir Next', sans-serif;\n font-weight: 500;\n line-height: 14px; /* 116.667% */\n"])));
|
|
6471
6471
|
var MobileDollarPart = newStyled(DollarPart)(templateObject_5$C || (templateObject_5$C = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
@@ -6475,7 +6475,7 @@ var DesktopClubMembersText = newStyled(ClubMembersText)(templateObject_8$j || (t
|
|
|
6475
6475
|
var ClubPriceLabel = function (_a) {
|
|
6476
6476
|
var clubPrice = _a.clubPrice;
|
|
6477
6477
|
var isMobile = useWindowDimensions().isMobile;
|
|
6478
|
-
return (jsx$1(Fragment$2, { children: isMobile ? (jsxs$1(MobileContainer, { children: [jsx$1(MobileDollarPart, { children: clubPrice }, void 0), jsx$1(MobileClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) : (jsxs$1(Container$
|
|
6478
|
+
return (jsx$1(Fragment$2, { children: isMobile ? (jsxs$1(MobileContainer, { children: [jsx$1(MobileDollarPart, { children: clubPrice }, void 0), jsx$1(MobileClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) : (jsxs$1(Container$16, { children: [jsx$1(DesktopDollarPart, { children: clubPrice }, void 0), jsx$1(DesktopClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) }, void 0));
|
|
6479
6479
|
};
|
|
6480
6480
|
var templateObject_1$1E, templateObject_2$1f, templateObject_3$_, templateObject_4$O, templateObject_5$C, templateObject_6$y, templateObject_7$r, templateObject_8$j;
|
|
6481
6481
|
|
|
@@ -6485,7 +6485,7 @@ var Spacing = function (_a) {
|
|
|
6485
6485
|
return jsx$1("div", __assign$1({ style: style }, { children: children }), void 0);
|
|
6486
6486
|
};
|
|
6487
6487
|
|
|
6488
|
-
var Container$
|
|
6488
|
+
var Container$15 = newStyled('div')(templateObject_1$1D || (templateObject_1$1D = __makeTemplateObject(["\n gap: 6px;\n display: flex;\n color: #292929;\n align-items: flex-end;\n"], ["\n gap: 6px;\n display: flex;\n color: #292929;\n align-items: flex-end;\n"])));
|
|
6489
6489
|
var Content$2 = newStyled('div')(templateObject_2$1e || (templateObject_2$1e = __makeTemplateObject(["\n display: flex;\n align-items: flex-end;\n font-size: 14px;\n font-weight: 600;\n"], ["\n display: flex;\n align-items: flex-end;\n font-size: 14px;\n font-weight: 600;\n"])));
|
|
6490
6490
|
var BarContainer$1 = newStyled('div')(templateObject_3$Z || (templateObject_3$Z = __makeTemplateObject(["\n gap: 2px;\n display: flex;\n align-items: flex-end;\n width: fit-content;\n"], ["\n gap: 2px;\n display: flex;\n align-items: flex-end;\n width: fit-content;\n"])));
|
|
6491
6491
|
var Bar$2 = newStyled('div')(templateObject_4$N || (templateObject_4$N = __makeTemplateObject(["\n width: 2px;\n border-radius: 2px;\n height: ", ";\n background-color: ", ";\n"], ["\n width: 2px;\n border-radius: 2px;\n height: ", ";\n background-color: ", ";\n"])), function (_a) {
|
|
@@ -6497,7 +6497,7 @@ var Bar$2 = newStyled('div')(templateObject_4$N || (templateObject_4$N = __makeT
|
|
|
6497
6497
|
});
|
|
6498
6498
|
var StrengthBars = function (_a) {
|
|
6499
6499
|
var _b = _a.barsFilled, barsFilled = _b === void 0 ? 0 : _b, supportText = _a.supportText;
|
|
6500
|
-
return (jsxs$1(Container$
|
|
6500
|
+
return (jsxs$1(Container$15, __assign$1({ "data-testid": "strength-bar" }, { children: [jsx$1(BarContainer$1, { children: [1, 2, 3, 4, 5].map(function (bar, index) { return (jsx$1(Bar$2, { index: index, isFilled: bar <= barsFilled }, bar)); }) }, void 0), jsx$1(Content$2, { children: supportText }, void 0)] }), void 0));
|
|
6501
6501
|
};
|
|
6502
6502
|
var templateObject_1$1D, templateObject_2$1e, templateObject_3$Z, templateObject_4$N;
|
|
6503
6503
|
|
|
@@ -6554,7 +6554,7 @@ var PriceLabelV4 = function (_a) {
|
|
|
6554
6554
|
: ComponentSize.XSmall;
|
|
6555
6555
|
return (jsx$1(Price, __assign$1({ size: sizeProp, color: theme.component.pricing.priceLabel.price.originalPriceColor, underlined: originalPriceUnderlined, "data-testid": getTestId(testId, 'original-product-price'), theme: theme }, { children: originalPrice }), void 0));
|
|
6556
6556
|
};
|
|
6557
|
-
return (jsxs$1(Container$
|
|
6557
|
+
return (jsxs$1(Container$1n, __assign$1({}, rest, { children: [clubStyle && !styledPrice ? (jsxs$1(PriceContainer$1, { children: [jsxs$1(PriceWithTagContainer, { children: [jsx$1(OriginalPrice, {}, void 0), jsx$1(RegularPriceTag, {}, void 0)] }, void 0), jsxs$1(PriceWithTagContainer, { children: [jsx$1(Price, __assign$1({ margin: true, "data-testid": getTestId(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: clubPrice }), void 0), jsx$1(ClubPriceTag, {}, void 0)] }, void 0)] }, void 0)) : (jsxs$1(PriceContainer$1, { children: [jsxs$1(PriceWithTagContainer, { children: [jsx$1(OriginalPrice, {}, void 0), jsx$1(RegularPriceTag, {}, void 0)] }, void 0), jsxs$1(PriceWithTagContainer, { children: [jsxs$1(PriceContainerV2, { children: [jsx$1(Price, __assign$1({ margin: true, finalPriceStyledSmall: true, style: { marginTop: '-5px', color: '#c64844' } }, priceCommonProps, { size: size, "data-testid": getTestId(testId, 'final-product-price') }, { children: currencySymbol }), void 0), jsxs$1(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size, style: { color: '#c64844' } }, { children: [finalPriceArray[0]
|
|
6558
6558
|
? finalPriceArray[0]
|
|
6559
6559
|
: (_b = "".concat(productFinalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1], "."] }), void 0), jsx$1(Price, __assign$1({ finalPriceStyledSmall: true, style: { marginTop: '-6px', color: '#c64844' } }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }, void 0), jsx$1(ClubPriceTag, {}, void 0)] }, void 0)] }, void 0)), discount && (jsx$1(TagContainer, __assign$1({ size: size }, { children: jsx$1(DiscountTag$3, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
|
|
6560
6560
|
};
|
|
@@ -6562,7 +6562,7 @@ var templateObject_1$1C, templateObject_2$1d, templateObject_3$Y, templateObject
|
|
|
6562
6562
|
|
|
6563
6563
|
var STARTS_NUMBER = 5;
|
|
6564
6564
|
|
|
6565
|
-
var Container$
|
|
6565
|
+
var Container$14 = newStyled.div(templateObject_1$1B || (templateObject_1$1B = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
6566
6566
|
var templateObject_1$1B;
|
|
6567
6567
|
|
|
6568
6568
|
var StarContainer = newStyled.div(templateObject_1$1A || (templateObject_1$1A = __makeTemplateObject(["\n display: flex;\n margin-right: ", ";\n"], ["\n display: flex;\n margin-right: ", ";\n"])), function (_a) {
|
|
@@ -6577,7 +6577,7 @@ var StarList = function (_a) {
|
|
|
6577
6577
|
width: theme.component.stars.element[size].width,
|
|
6578
6578
|
height: theme.component.stars.element[size].height,
|
|
6579
6579
|
};
|
|
6580
|
-
return (jsx$1(Container$
|
|
6580
|
+
return (jsx$1(Container$14, { children: __spreadArray([], new Array(starsNumber), true).map(function (_, index) {
|
|
6581
6581
|
return (jsx$1(StarContainer, __assign$1({ "data-testid": "star-container", marginRight: theme.component.stars.element[size].marginRight }, { children: index < Math.floor(rating) ? (jsx$1(Icon.PDP.Star, __assign$1({}, iconProps), void 0)) : index === Math.floor(rating) && rating % 1 != 0 ? (jsx$1(Icon.PDP.StarHalf, __assign$1({}, iconProps), void 0)) : (jsx$1(Icon.PDP.StarEmpty, __assign$1({}, iconProps), void 0)) }), "star-container-".concat(index)));
|
|
6582
6582
|
}) }, void 0));
|
|
6583
6583
|
};
|
|
@@ -6622,7 +6622,7 @@ var LabelStyles = {
|
|
|
6622
6622
|
});
|
|
6623
6623
|
},
|
|
6624
6624
|
};
|
|
6625
|
-
var Container$
|
|
6625
|
+
var Container$13 = newStyled.a(templateObject_1$1z || (templateObject_1$1z = __makeTemplateObject(["\n display: flex;\n align-items: center;\n text-decoration: none;\n"], ["\n display: flex;\n align-items: center;\n text-decoration: none;\n"])));
|
|
6626
6626
|
var CustomLabel = newStyled.div(function (_a) {
|
|
6627
6627
|
var theme = _a.theme, size = _a.size, wrapWithParenthesis = _a.wrapWithParenthesis, underline = _a.underline;
|
|
6628
6628
|
return [
|
|
@@ -6663,7 +6663,7 @@ var Rating = function (_a) {
|
|
|
6663
6663
|
href: reviewsContainerId,
|
|
6664
6664
|
}
|
|
6665
6665
|
: {};
|
|
6666
|
-
return (jsxs$1(Container$
|
|
6666
|
+
return (jsxs$1(Container$13, __assign$1({ as: reviewsContainerId ? 'a' : 'div' }, containerAttributes, { "data-testid": "Container", onClick: handleAnchorClick }, { children: [showRatingText && (jsx$1(RatingLabel, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "RatingLabel" }, { children: rating }), void 0)), jsx$1(StarList, { rating: rating, size: size, starsNumber: STARTS_NUMBER, fill: theme.component.stars.element.color }, void 0), jsxs$1(CustomLabel, __assign$1({ theme: theme, size: size, wrapWithParenthesis: wrapWithParenthesis, underline: underline, "data-testid": "CustomLabel" }, { children: [reviews ? reviews : '', " ", reviewsText ? reviewsText : ''] }), void 0)] }), void 0));
|
|
6667
6667
|
};
|
|
6668
6668
|
|
|
6669
6669
|
var STYLES_BY_THEME = {
|
|
@@ -6738,7 +6738,7 @@ var ImageContainer$6 = newStyled.div(function (_a) {
|
|
|
6738
6738
|
});
|
|
6739
6739
|
});
|
|
6740
6740
|
var ImageHoverContainer$3 = newStyled.img(templateObject_1$1y || (templateObject_1$1y = __makeTemplateObject(["\n opacity: 0;\n position: absolute;\n transition: all 0.4s ease-in-out;\n"], ["\n opacity: 0;\n position: absolute;\n transition: all 0.4s ease-in-out;\n"])));
|
|
6741
|
-
var Container$
|
|
6741
|
+
var Container$12 = newStyled.a(templateObject_2$1b || (templateObject_2$1b = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n text-decoration: none;\n\n &:hover .hover__image {\n opacity: 1;\n }\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n text-decoration: none;\n\n &:hover .hover__image {\n opacity: 1;\n }\n"])));
|
|
6742
6742
|
var ProdCardContainer$4 = newStyled.div(templateObject_3$X || (templateObject_3$X = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: min-content;\n text-decoration: none;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: min-content;\n text-decoration: none;\n"])));
|
|
6743
6743
|
var Title$7 = newStyled.p(templateObject_4$L || (templateObject_4$L = __makeTemplateObject(["\n font-size: ", ";\n font-weight: ", ";\n line-height: 1.375rem;\n min-height: 2.75rem;\n text-align: center;\n color: ", ";\n margin: 0.25rem 0;\n text-align: ", ";\n\n ", "\n\n ", "\n\n @media (max-width: ", "px) {\n font-size: ", ";\n }\n"], ["\n font-size: ", ";\n font-weight: ", ";\n line-height: 1.375rem;\n min-height: 2.75rem;\n text-align: center;\n color: ", ";\n margin: 0.25rem 0;\n text-align: ", ";\n\n ", "\n\n ", "\n\n @media (max-width: ", "px) {\n font-size: ", ";\n }\n"])), function (_a) {
|
|
6744
6744
|
var theme = _a.theme;
|
|
@@ -6863,7 +6863,7 @@ var ProductItemMobile = function (_a) {
|
|
|
6863
6863
|
return jsx(Fragment, {}, void 0);
|
|
6864
6864
|
return (jsx(Rating, { size: size === ComponentSize.Large ? ComponentSize.Small : ComponentSize.XSmall, rating: rating.rating, reviews: rating.reviews, reviewsText: "", wrapWithParenthesis: true }, void 0));
|
|
6865
6865
|
};
|
|
6866
|
-
return (jsxs(ProdCardContainer$4, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$
|
|
6866
|
+
return (jsxs(ProdCardContainer$4, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$12, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', className: "picContainer", onClick: onClick }, { children: [!!topTag || !!bottomTag ? (jsxs(ImageContainer$6, __assign$1({ width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height, "data-testid": "tags-image-container" }, { children: [jsx(Image$3, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, width: hasDefaultSize ? styles === null || styles === void 0 ? void 0 : styles.width : '100%', height: hasDefaultSize ? styles === null || styles === void 0 ? void 0 : styles.height : '100%', loading: isOnViewport ? 'eager' : 'lazy', decoding: isOnViewport ? 'sync' : 'async', borderRadius: STYLES_BY_THEME[theme.name].image.borderRadius }, void 0), jsx(TopTagContainer$9, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: topTag }), void 0), jsx(BottomTagContainer$9, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: bottomTag }), void 0)] }), void 0)) : (jsx(Image$3, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height, loading: isOnViewport ? 'eager' : 'lazy', decoding: isOnViewport ? 'sync' : 'async', borderRadius: STYLES_BY_THEME[theme.name].image.borderRadius }, void 0)), imageHover ? (jsx(ImageHoverContainer$3, { className: "hover__image", src: imageHover.src, srcSet: getSrcSet(imageHover.src, 180, 360, 720, 960), loading: "lazy", decoding: "async", alt: imageHover.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)) : null] }), void 0), colorPicker.display && colorPicker.position === 'top' && (jsxs(Fragment, { children: [jsx(Spacing, { size: space }, void 0), colorPicker.component] }, void 0)), jsxs(Container$12, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', onClick: onClick, className: "textContainer", style: { alignItems: showClubPriceLabel ? 'flex-start' : 'center' } }, { children: [jsx(Spacing, { size: space }, void 0), jsx(Title$7, __assign$1({ theme: theme, align: showClubPriceLabel ? 'left' : alignName }, { children: title }), void 0), jsx(Spacing, { size: space }, void 0), hasStrength && hasStrength.strength !== -1 && (jsxs(Fragment, { children: [jsx(StrengthBars, { barsFilled: hasStrength.strength, supportText: hasStrength.description }, void 0), jsx(Spacing, { size: 10 }, void 0)] }, void 0)), priceAtBottom ? (jsxs(Fragment, { children: [jsx(RatingDisplay, {}, void 0), jsx(Spacing, { size: space }, void 0), jsxs(MarginTopContainer$1, __assign$1({ style: { marginTop: (clubOffer === null || clubOffer === void 0 ? void 0 : clubOffer.isClubOffer) ? 0 : 8 } }, { children: [priceLoading ? jsx(SkeletonBox, { height: "20px", width: "140px" }, void 0) : PriceLabelDisplay(), (clubOffer === null || clubOffer === void 0 ? void 0 : clubOffer.isClubOffer) && PriceLabelDisplay(5)] }), void 0)] }, void 0)) : (jsxs(Fragment, { children: [priceLoading ? (jsx(SkeletonBox, { height: "20px", width: "140px" }, void 0)) : (jsxs(Fragment, { children: [!(clubOffer === null || clubOffer === void 0 ? void 0 : clubOffer.isClubMember) && PriceLabelDisplay(), (clubOffer === null || clubOffer === void 0 ? void 0 : clubOffer.isClubOffer) && PriceLabelDisplay(5), jsx(BuyNowPayLater, { displayBNPL: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.displayBNPL, installments: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.installments) || 0, installmentPrice: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.installmentPrice) || '', iconFolder: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconFolder, iconName: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconName) || '', showLogo: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.showLogo, iconColor: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconColor, fontSize: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.fontSize }, void 0)] }, void 0)), showClubPriceLabel && jsx(ClubPriceLabel, { clubPrice: clubPrice }, void 0), discountTagLoading ? (jsx(SkeletonBox, { height: "22px", width: "75px" }, void 0)) : (showDiscountPercentageTag && (jsx(TagContainer, __assign$1({ size: ComponentSize.Small }, { children: discountTag && (jsx(DiscountTag$3, __assign$1({}, discountTag, { size: ComponentSize.Medium, style: {
|
|
6867
6867
|
letterSpacing: '-0.05rem',
|
|
6868
6868
|
} }), void 0)) }), void 0))), jsx(Spacing, { size: space }, void 0), jsx(RatingDisplay, {}, void 0)] }, void 0))] }), void 0), colorPicker.display && colorPicker.position === 'bottom' && (jsxs(Fragment, { children: [jsx(Spacing, { size: space }, void 0), colorPicker.component] }, void 0))] }), void 0));
|
|
6869
6869
|
};
|
|
@@ -6877,7 +6877,7 @@ var ImageContainer$5 = newStyled.div(function (_a) {
|
|
|
6877
6877
|
});
|
|
6878
6878
|
});
|
|
6879
6879
|
var ImageHoverContainer$2 = newStyled.img(templateObject_1$1x || (templateObject_1$1x = __makeTemplateObject(["\n opacity: 0;\n position: absolute;\n transition: all 0.4s ease-in-out;\n border-radius: ", ";\n"], ["\n opacity: 0;\n position: absolute;\n transition: all 0.4s ease-in-out;\n border-radius: ", ";\n"])), function (props) { return props.borderRadius; });
|
|
6880
|
-
var Container$
|
|
6880
|
+
var Container$11 = newStyled.a(templateObject_2$1a || (templateObject_2$1a = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n text-decoration: none;\n\n &:hover .hover__image {\n opacity: 1;\n }\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n text-decoration: none;\n\n &:hover .hover__image {\n opacity: 1;\n }\n"])));
|
|
6881
6881
|
var ProdCardContainer$3 = newStyled.div(templateObject_3$W || (templateObject_3$W = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: min-content;\n text-decoration: none;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: min-content;\n text-decoration: none;\n"])));
|
|
6882
6882
|
var Title$6 = newStyled.p(templateObject_4$K || (templateObject_4$K = __makeTemplateObject(["\n font-size: 0.83rem;\n font-weight: normal;\n line-height: 1.375rem;\n min-height: 2.75rem;\n text-align: center;\n color: ", ";\n margin: 0.25rem 0;\n text-align: ", ";\n"], ["\n font-size: 0.83rem;\n font-weight: normal;\n line-height: 1.375rem;\n min-height: 2.75rem;\n text-align: center;\n color: ", ";\n margin: 0.25rem 0;\n text-align: ", ";\n"])), function (props) { return props.theme.colors.pallete.secondary.color; }, function (props) { return props.align; });
|
|
6883
6883
|
var getStylesBySize$b = function (size) {
|
|
@@ -6958,7 +6958,7 @@ var ProductItemTK = function (_a) {
|
|
|
6958
6958
|
: undefined }, void 0));
|
|
6959
6959
|
};
|
|
6960
6960
|
var RatingDisplay = function () { return (jsx(Rating, { size: size === ComponentSize.Large ? ComponentSize.Small : ComponentSize.XSmall, rating: rating.rating, reviews: rating.reviews, reviewsText: "", wrapWithParenthesis: true }, void 0)); };
|
|
6961
|
-
return (jsxs(ProdCardContainer$3, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$
|
|
6961
|
+
return (jsxs(ProdCardContainer$3, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$11, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', className: "picContainer", onClick: onClick }, { children: [!!topTag || !!bottomTag || !!topRightTag ? (jsxs(ImageContainer$5, __assign$1({ width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height, "data-testid": "tags-image-container" }, { children: [jsx(Image$3, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, borderRadius: ImageBorderRadius, width: "100%", height: "100%" }, void 0), jsx(TopTagContainer$8, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: topTag }), void 0), jsx(BottomTagContainer$8, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: bottomTag }), void 0), !!topRightTag && jsx(TopRightTagContainer$3, { children: topRightTag }, void 0)] }), void 0)) : (jsx(Image$3, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, borderRadius: ImageBorderRadius, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)), imageHover ? (jsx(ImageHoverContainer$2, { className: "hover__image", src: imageHover.src, srcSet: getSrcSet(imageHover.src, 180, 360, 720, 960), loading: "lazy", alt: imageHover.alt, borderRadius: ImageBorderRadius, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)) : null] }), void 0), colorPicker.display && colorPicker.position === 'top' && (jsxs(Fragment, { children: [hasSpacing && jsx(Spacing, { size: space }, void 0), colorPicker.component] }, void 0)), jsxs(Container$11, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', onClick: onClick, className: "textContainer", style: { alignItems: showClubPriceLabel ? 'flex-start' : 'center', gap: textContainerGap } }, { children: [hasSpacing && jsx(Spacing, { size: space }, void 0), titleStyle ? (
|
|
6962
6962
|
// @ts-ignore
|
|
6963
6963
|
jsx(Text$7, __assign$1({ variant: titleStyle.variant, weight: titleStyle.weight, size: titleStyle.size, style: {
|
|
6964
6964
|
textAlign: showClubPriceLabel ? 'left' : alignName,
|
|
@@ -6967,10 +6967,10 @@ var ProductItemTK = function (_a) {
|
|
|
6967
6967
|
};
|
|
6968
6968
|
var templateObject_1$1x, templateObject_2$1a, templateObject_3$W, templateObject_4$K, templateObject_5$z, templateObject_6$w, templateObject_7$p, templateObject_8$h;
|
|
6969
6969
|
|
|
6970
|
-
var Container$
|
|
6970
|
+
var Container$10 = newStyled.div(templateObject_1$1w || (templateObject_1$1w = __makeTemplateObject(["\n display: flex;\n row-gap: 1.875rem;\n column-gap: 1.875rem;\n flex-wrap: wrap;\n"], ["\n display: flex;\n row-gap: 1.875rem;\n column-gap: 1.875rem;\n flex-wrap: wrap;\n"])));
|
|
6971
6971
|
function withProductGrid(ProductItemComponent, data) {
|
|
6972
6972
|
function WithProductGrid(props) {
|
|
6973
|
-
return (jsx$1(Container$
|
|
6973
|
+
return (jsx$1(Container$10, __assign$1({ "data-testid": "product-grid-container" }, { children: data.map(function (product, index) { return (jsx$1(ProductItemComponent, __assign$1({}, product, props), index)); }) }), void 0));
|
|
6974
6974
|
}
|
|
6975
6975
|
/* istanbul ignore next */
|
|
6976
6976
|
var wrappedComponentName = ProductItemComponent.displayName || ProductItemComponent.name || 'Component';
|
|
@@ -7048,7 +7048,7 @@ var OutOfStock = function (_a) {
|
|
|
7048
7048
|
return (jsxs$1("svg", __assign$1({ width: "32", height: "33", viewBox: "0 0 32 33", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsx$1("title", { children: title }, void 0), jsx$1("mask", __assign$1({ id: "path-1-inside-1", fill: "white" }, { children: jsx$1("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.89435 9.60565C8.40619 10.0938 8.40619 10.8853 8.89435 11.3734L14.0209 16.5L8.89433 21.6266C8.40617 22.1147 8.40617 22.9062 8.89433 23.3943C9.38248 23.8825 10.1739 23.8825 10.6621 23.3943L15.7887 18.2677L21.2687 23.7478C21.7569 24.2359 22.5483 24.2359 23.0365 23.7478C23.5246 23.2596 23.5246 22.4682 23.0365 21.98L17.5564 16.5L23.0365 11.02C23.5246 10.5318 23.5246 9.74035 23.0365 9.25219C22.5483 8.76404 21.7568 8.76404 21.2687 9.25219L15.7887 14.7322L10.6621 9.60565C10.174 9.1175 9.3825 9.1175 8.89435 9.60565Z" }, void 0) }), void 0), jsx$1("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.89435 9.60565C8.40619 10.0938 8.40619 10.8853 8.89435 11.3734L14.0209 16.5L8.89433 21.6266C8.40617 22.1147 8.40617 22.9062 8.89433 23.3943C9.38248 23.8825 10.1739 23.8825 10.6621 23.3943L15.7887 18.2677L21.2687 23.7478C21.7569 24.2359 22.5483 24.2359 23.0365 23.7478C23.5246 23.2596 23.5246 22.4682 23.0365 21.98L17.5564 16.5L23.0365 11.02C23.5246 10.5318 23.5246 9.74035 23.0365 9.25219C22.5483 8.76404 21.7568 8.76404 21.2687 9.25219L15.7887 14.7322L10.6621 9.60565C10.174 9.1175 9.3825 9.1175 8.89435 9.60565Z", fill: theme.colors.shades['300'].color }, void 0), jsx$1("path", { d: "M14.0209 16.5L14.5866 17.0657L15.1523 16.5L14.5866 15.9343L14.0209 16.5ZM8.89433 21.6266L9.46001 22.1922L8.89433 21.6266ZM10.6621 23.3943L11.2278 23.96L10.6621 23.3943ZM15.7887 18.2677L16.3544 17.7021L15.7887 17.1364L15.223 17.7021L15.7887 18.2677ZM17.5564 16.5L16.9908 15.9343L16.4251 16.5L16.9908 17.0657L17.5564 16.5ZM23.0365 11.02L23.6021 11.5856L23.0365 11.02ZM21.2687 9.25219L21.8344 9.81788L21.2687 9.25219ZM15.7887 14.7322L15.223 15.2979L15.7887 15.8636L16.3544 15.2979L15.7887 14.7322ZM9.46003 10.8077C9.2843 10.632 9.2843 10.3471 9.46003 10.1713L8.32866 9.03997C7.52809 9.84054 7.52809 11.1385 8.32866 11.9391L9.46003 10.8077ZM14.5866 15.9343L9.46003 10.8077L8.32866 11.9391L13.4552 17.0657L14.5866 15.9343ZM9.46001 22.1922L14.5866 17.0657L13.4552 15.9343L8.32864 21.0609L9.46001 22.1922ZM9.46001 22.8286C9.28428 22.6529 9.28428 22.368 9.46001 22.1922L8.32864 21.0609C7.52807 21.8614 7.52807 23.1594 8.32864 23.96L9.46001 22.8286ZM10.0964 22.8286C9.92067 23.0044 9.63575 23.0044 9.46001 22.8286L8.32864 23.96C9.12922 24.7606 10.4272 24.7606 11.2278 23.96L10.0964 22.8286ZM15.223 17.7021L10.0964 22.8286L11.2278 23.96L16.3544 18.8334L15.223 17.7021ZM21.8344 23.1821L16.3544 17.7021L15.223 18.8334L20.703 24.3135L21.8344 23.1821ZM22.4708 23.1821C22.2951 23.3578 22.0101 23.3578 21.8344 23.1821L20.703 24.3135C21.5036 25.114 22.8016 25.114 23.6022 24.3135L22.4708 23.1821ZM22.4708 22.5457C22.6465 22.7214 22.6465 23.0064 22.4708 23.1821L23.6022 24.3135C24.4027 23.5129 24.4027 22.2149 23.6022 21.4143L22.4708 22.5457ZM16.9908 17.0657L22.4708 22.5457L23.6022 21.4143L18.1221 15.9343L16.9908 17.0657ZM22.4708 10.4543L16.9908 15.9343L18.1221 17.0657L23.6021 11.5856L22.4708 10.4543ZM22.4708 9.81788C22.6465 9.99361 22.6465 10.2785 22.4708 10.4543L23.6021 11.5856C24.4027 10.7851 24.4027 9.48708 23.6021 8.68651L22.4708 9.81788ZM21.8344 9.81788C22.0101 9.64214 22.295 9.64214 22.4708 9.81788L23.6021 8.68651C22.8016 7.88593 21.5036 7.88593 20.703 8.68651L21.8344 9.81788ZM16.3544 15.2979L21.8344 9.81788L20.703 8.68651L15.223 14.1665L16.3544 15.2979ZM10.0964 10.1713L15.223 15.2979L16.3544 14.1665L11.2278 9.03997L10.0964 10.1713ZM9.46003 10.1713C9.63577 9.9956 9.92069 9.9956 10.0964 10.1713L11.2278 9.03997C10.4272 8.23939 9.12924 8.23939 8.32866 9.03997L9.46003 10.1713Z", fill: "white", mask: "url(#path-1-inside-1)" }, void 0), jsx$1("circle", { cx: "16", cy: "16.5", r: "12", stroke: theme.colors.shades['300'].color, strokeWidth: "0.5" }, void 0)] }), void 0));
|
|
7049
7049
|
};
|
|
7050
7050
|
|
|
7051
|
-
var Container
|
|
7051
|
+
var Container$$ = newStyled.div(templateObject_1$1u || (templateObject_1$1u = __makeTemplateObject(["\n width: 2rem;\n height: 2rem;\n border-radius: 50%;\n border: 0.081rem solid ", ";\n box-sizing: border-box;\n padding: 0.156rem;\n cursor: pointer;\n opacity: ", ";\n"], ["\n width: 2rem;\n height: 2rem;\n border-radius: 50%;\n border: 0.081rem solid ", ";\n box-sizing: border-box;\n padding: 0.156rem;\n cursor: pointer;\n opacity: ", ";\n"])), function (_a) {
|
|
7052
7052
|
var borderColor = _a.borderColor;
|
|
7053
7053
|
return borderColor;
|
|
7054
7054
|
}, function (_a) {
|
|
@@ -7060,7 +7060,7 @@ var PatternSelector = function (_a) {
|
|
|
7060
7060
|
var url = _a.url, selected = _a.selected, testId = _a.testId, noStock = _a.noStock;
|
|
7061
7061
|
var theme = useTheme();
|
|
7062
7062
|
var outerBorder = selected ? theme.colors.shades['550'].color : 'transparent';
|
|
7063
|
-
return (jsx$1(Container
|
|
7063
|
+
return (jsx$1(Container$$, __assign$1({ "data-testid": testId, borderColor: outerBorder, noStock: noStock }, { children: jsx$1(Image$2, { src: url, alt: "pattern" }, void 0) }), void 0));
|
|
7064
7064
|
};
|
|
7065
7065
|
var templateObject_1$1u, templateObject_2$18;
|
|
7066
7066
|
|
|
@@ -7285,14 +7285,14 @@ var ButtonSecondaryOutline = function (props) {
|
|
|
7285
7285
|
} }), void 0));
|
|
7286
7286
|
};
|
|
7287
7287
|
|
|
7288
|
-
var Container
|
|
7288
|
+
var Container$_ = newStyled.div(templateObject_1$1q || (templateObject_1$1q = __makeTemplateObject(["\n padding: 0.625rem 1.25rem;\n background-color: ", ";\n border-radius: 0.313rem;\n display: flex;\n margin-bottom: 1.25rem;\n"], ["\n padding: 0.625rem 1.25rem;\n background-color: ", ";\n border-radius: 0.313rem;\n display: flex;\n margin-bottom: 1.25rem;\n"])), function (props) { return props.color; });
|
|
7289
7289
|
var IconContainer$5 = newStyled.div(templateObject_2$15 || (templateObject_2$15 = __makeTemplateObject(["\n width: 1rem;\n height: 0.875rem;\n margin-right: 0.5rem;\n margin-top: 0.125rem;\n"], ["\n width: 1rem;\n height: 0.875rem;\n margin-right: 0.5rem;\n margin-top: 0.125rem;\n"])));
|
|
7290
7290
|
var Text$3 = newStyled.p(templateObject_3$T || (templateObject_3$T = __makeTemplateObject(["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 400;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 400;\n margin: 0;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
7291
7291
|
var Details = newStyled.span(templateObject_4$H || (templateObject_4$H = __makeTemplateObject(["\n color: ", ";\n font-weight: 700;\n"], ["\n color: ", ";\n font-weight: 700;\n"])), function (props) { return props.color; });
|
|
7292
7292
|
var Note = function (_a) {
|
|
7293
7293
|
var accentColor = _a.accentColor, color = _a.color, backgroundColor = _a.backgroundColor, importantNoteText = _a.importantNoteText, text = _a.text;
|
|
7294
7294
|
var theme = useTheme();
|
|
7295
|
-
return (jsxs$1(Container
|
|
7295
|
+
return (jsxs$1(Container$_, __assign$1({ color: backgroundColor ? backgroundColor : theme.component.deliveryDetails.note.backgroundColor, "data-testid": "Container" }, { children: [jsx$1(IconContainer$5, { children: jsx$1(Icon.Actions.Warning, { fill: accentColor ? accentColor : theme.component.deliveryDetails.note.accentColor }, void 0) }, void 0), jsx$1("div", { children: jsxs$1(Text$3, __assign$1({ color: color ? color : theme.component.deliveryDetails.note.color }, { children: [importantNoteText && (jsxs$1(Details, __assign$1({ color: accentColor ? accentColor : theme.component.deliveryDetails.note.accentColor }, { children: [importantNoteText, ":"] }), void 0)), ' ', text] }), void 0) }, void 0)] }), void 0));
|
|
7296
7296
|
};
|
|
7297
7297
|
var templateObject_1$1q, templateObject_2$15, templateObject_3$T, templateObject_4$H;
|
|
7298
7298
|
|
|
@@ -7498,12 +7498,12 @@ function FilteringDropdown(_a) {
|
|
|
7498
7498
|
var Title$4 = newStyled.div(templateObject_1$1k || (templateObject_1$1k = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n border-bottom: 0.063rem solid ", ";\n user-select: none;\n cursor: pointer;\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n border-bottom: 0.063rem solid ", ";\n user-select: none;\n cursor: pointer;\n"])), function (props) { return props.borderColor; });
|
|
7499
7499
|
var H3 = newStyled.h3(templateObject_2$$ || (templateObject_2$$ = __makeTemplateObject(["\n font-size: 1rem;\n font-weight: 700;\n line-height: 1.5rem;\n color: ", ";\n margin: 0.75rem 0;\n"], ["\n font-size: 1rem;\n font-weight: 700;\n line-height: 1.5rem;\n color: ", ";\n margin: 0.75rem 0;\n"])), function (props) { return props.color; });
|
|
7500
7500
|
var ArrowContainer = newStyled.div(templateObject_3$O || (templateObject_3$O = __makeTemplateObject(["\n width: 1rem;\n height: 1rem;\n"], ["\n width: 1rem;\n height: 1rem;\n"])));
|
|
7501
|
-
var Container$
|
|
7501
|
+
var Container$Z = newStyled.div(templateObject_4$C || (templateObject_4$C = __makeTemplateObject(["\n @media (max-width: 768px) {\n display: ", ";\n }\n"], ["\n @media (max-width: 768px) {\n display: ", ";\n }\n"])), function (props) { return (props.showInMobile ? 'block' : 'none'); });
|
|
7502
7502
|
var Accordion = function (_a) {
|
|
7503
7503
|
var title = _a.title, children = _a.children, _b = _a.isOpenByDefault, isOpenByDefault = _b === void 0 ? false : _b, _c = _a.showInMobile, showInMobile = _c === void 0 ? true : _c;
|
|
7504
7504
|
var theme = useTheme();
|
|
7505
7505
|
var _d = React__default.useState(isOpenByDefault), isOpen = _d[0], setIsOpen = _d[1];
|
|
7506
|
-
return (jsxs$1(Container$
|
|
7506
|
+
return (jsxs$1(Container$Z, __assign$1({ "data-testid": "FiltersAccordion", showInMobile: showInMobile }, { children: [jsxs$1(Title$4, __assign$1({ onClick: function () { return setIsOpen(function (state) { return !state; }); }, borderColor: theme.colors.shades['100'].color, "data-testid": "accordion-title" }, { children: [jsx$1(H3, __assign$1({ color: theme.colors.shades['550'].color }, { children: title }), void 0), jsx$1(ArrowContainer, { children: isOpen ? (jsx$1(Icon.Arrows.ChevronUp, { fill: theme.colors.shades['700'].color }, void 0)) : (jsx$1(Icon.Arrows.ChevronDown, { fill: theme.colors.shades['700'].color }, void 0)) }, void 0)] }), void 0), jsx$1("div", __assign$1({ style: { display: isOpen ? 'block' : 'none' }, "data-testid": "accordion-children-container" }, { children: children }), void 0)] }), void 0));
|
|
7507
7507
|
};
|
|
7508
7508
|
var templateObject_1$1k, templateObject_2$$, templateObject_3$O, templateObject_4$C;
|
|
7509
7509
|
|
|
@@ -7729,7 +7729,7 @@ var FilterCheckboxColor = function (_a) {
|
|
|
7729
7729
|
};
|
|
7730
7730
|
|
|
7731
7731
|
var Wrapper$4 = newStyled.div(templateObject_1$1h || (templateObject_1$1h = __makeTemplateObject(["\n padding: 12px 58px;\n display: flex;\n gap: 1.5em;\n @media (max-width: 768px) {\n padding: 0.625rem 1.5rem;\n }\n"], ["\n padding: 12px 58px;\n display: flex;\n gap: 1.5em;\n @media (max-width: 768px) {\n padding: 0.625rem 1.5rem;\n }\n"])));
|
|
7732
|
-
var Container$
|
|
7732
|
+
var Container$Y = newStyled.div(templateObject_2$Y || (templateObject_2$Y = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n"], ["\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n"])));
|
|
7733
7733
|
var FitGuarantee = function (_a) {
|
|
7734
7734
|
var _b;
|
|
7735
7735
|
var _c = _a.backgroundColor, backgroundColor = _c === void 0 ? '#FFF6EF' : _c, _d = _a.borderColor, borderColor = _d === void 0 ? '#E7C9B2' : _d, title = _a.title, description = _a.description, _e = _a.widthAuto, widthAuto = _e === void 0 ? false : _e, _f = _a.testId, testId = _f === void 0 ? 'FitGuarantee' : _f, _g = _a.iconFolder, iconFolder = _g === void 0 ? 'Custom' : _g, _h = _a.iconName, iconName = _h === void 0 ? 'SixtyDaysGuarantee' : _h, _j = _a.iconWidth, iconWidth = _j === void 0 ? 3.7 : _j, _k = _a.iconHeight, iconHeight = _k === void 0 ? 3.38 : _k;
|
|
@@ -7740,7 +7740,7 @@ var FitGuarantee = function (_a) {
|
|
|
7740
7740
|
console.error('Icon', iconName, 'not found');
|
|
7741
7741
|
return null;
|
|
7742
7742
|
}
|
|
7743
|
-
return (jsx$1(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxs$1(Wrapper$4, { children: [jsx$1(Container$
|
|
7743
|
+
return (jsx$1(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxs$1(Wrapper$4, { children: [jsx$1(Container$Y, __assign$1({ "data-testid": "".concat(testId, "-section"), style: { justifyContent: 'center' } }, { children: jsx$1(IconComponent, { width: iconWidth, height: iconHeight }, void 0) }), void 0), jsxs$1(Container$Y, __assign$1({ "data-testid": "".concat(testId, "-section-bottom") }, { children: [jsx$1(Text$7, __assign$1({ variant: "body", weight: "demi", size: "small", style: {
|
|
7744
7744
|
margin: '0.1rem 0',
|
|
7745
7745
|
width: '100%',
|
|
7746
7746
|
fontSize: theme.component.text.fitGuarantee.titleFontSize,
|
|
@@ -7749,7 +7749,7 @@ var FitGuarantee = function (_a) {
|
|
|
7749
7749
|
};
|
|
7750
7750
|
var templateObject_1$1h, templateObject_2$Y;
|
|
7751
7751
|
|
|
7752
|
-
var Container$
|
|
7752
|
+
var Container$X = newStyled.div(templateObject_1$1g || (templateObject_1$1g = __makeTemplateObject(["\n display: flex;\n align-items: center;\n font-size: 0.88rem;\n"], ["\n display: flex;\n align-items: center;\n font-size: 0.88rem;\n"])));
|
|
7753
7753
|
var P$2 = newStyled.p(templateObject_2$X || (templateObject_2$X = __makeTemplateObject(["\n margin: 0 0.25rem;\n font-weight: 700;\n color: ", ";\n"], ["\n margin: 0 0.25rem;\n font-weight: 700;\n color: ", ";\n"])), function (props) { return props.theme.colors.shades['550'].color; });
|
|
7754
7754
|
var textButtonStyles$1 = function (theme) { return ({
|
|
7755
7755
|
border: 'none',
|
|
@@ -7763,7 +7763,7 @@ var textButtonStyles$1 = function (theme) { return ({
|
|
|
7763
7763
|
var FitPredictor = function (_a) {
|
|
7764
7764
|
var onClick = _a.onClick;
|
|
7765
7765
|
var theme = useTheme();
|
|
7766
|
-
return (jsxs(Container$
|
|
7766
|
+
return (jsxs(Container$X, __assign$1({ theme: theme }, { children: [jsx(Container$X, { children: jsx(Icon.Other.FitPredictor, { width: 1.125, height: 1.125, fill: theme.colors.shades['550'].color }, void 0) }, void 0), jsx(P$2, __assign$1({ theme: theme }, { children: "FIT PREDICTOR" }), void 0), jsx(BaseButton, __assign$1({ css: textButtonStyles$1(theme), onClick: onClick }, { children: "Calculate your size" }), void 0)] }), void 0));
|
|
7767
7767
|
};
|
|
7768
7768
|
var templateObject_1$1g, templateObject_2$X;
|
|
7769
7769
|
|
|
@@ -12103,7 +12103,7 @@ var ImageSmallPreview = function (_a) {
|
|
|
12103
12103
|
|
|
12104
12104
|
var horizontalStyles = css(templateObject_1$1d || (templateObject_1$1d = __makeTemplateObject(["\n grid-row: 2;\n grid-auto-flow: column;\n grid-column-gap: 6px;\n margin-top: 20px;\n max-width: 360px;\n overflow: auto;\n"], ["\n grid-row: 2;\n grid-auto-flow: column;\n grid-column-gap: 6px;\n margin-top: 20px;\n max-width: 360px;\n overflow: auto;\n"])));
|
|
12105
12105
|
var verticalStyles = css(templateObject_2$W || (templateObject_2$W = __makeTemplateObject(["\n grid-row-gap: 20px;\n overflow: auto;\n grid-area: 1/1;\n"], ["\n grid-row-gap: 20px;\n overflow: auto;\n grid-area: 1/1;\n"])));
|
|
12106
|
-
var Container$
|
|
12106
|
+
var Container$W = newStyled.div(templateObject_3$L || (templateObject_3$L = __makeTemplateObject(["\n display: grid;\n max-height: ", ";\n height: min-content;\n align-items: flex-start;\n ", "\n\n ", "\n"], ["\n display: grid;\n max-height: ", ";\n height: min-content;\n align-items: flex-start;\n ", "\n\n ", "\n"])), function (_a) {
|
|
12107
12107
|
var isRatioSquare = _a.isRatioSquare, theme = _a.theme;
|
|
12108
12108
|
return isRatioSquare ? '530px' : "calc(530px / (".concat(theme.component.gallery.aspectRatio, "))");
|
|
12109
12109
|
}, function (_a) {
|
|
@@ -12147,7 +12147,7 @@ var ImagePreviewList = function (_a) {
|
|
|
12147
12147
|
var element = document.querySelector(".imageListContainer");
|
|
12148
12148
|
element.scrollBy(0, 200);
|
|
12149
12149
|
};
|
|
12150
|
-
return (jsxs$1(Fragment$2, { children: [jsx$1(Container$
|
|
12150
|
+
return (jsxs$1(Fragment$2, { children: [jsx$1(Container$W, __assign$1({ role: "list", "data-testid": dataTestId, position: position, className: hasOverflowArrows ? 'imageListContainer' : position, hasOverflowArrows: hasOverflowArrows, isRatioSquare: isRatioSquare }, { children: position == 'horizontal' ? (jsx$1("div", __assign$1({ style: { maxWidth: '360px' } }, { children: jsx$1(SliderNavigation, __assign$1({ speed: 200, infinite: false, arrows: {
|
|
12151
12151
|
arrowWidth: 0.75,
|
|
12152
12152
|
arrowHeight: 1.25,
|
|
12153
12153
|
arrowPadding: 1.625,
|
|
@@ -12165,7 +12165,7 @@ var ProgressBar$1 = function (_a) {
|
|
|
12165
12165
|
return (jsx$1(ProgressContainer, __assign$1({ "data-testid": "progress-bar", hide: hide }, { children: jsx$1(ProgressFiller, { progress: progress }, void 0) }), void 0));
|
|
12166
12166
|
};
|
|
12167
12167
|
|
|
12168
|
-
var Container$
|
|
12168
|
+
var Container$V = newStyled.div(templateObject_1$1b || (templateObject_1$1b = __makeTemplateObject(["\n max-width: 530px;\n position: relative;\n"], ["\n max-width: 530px;\n position: relative;\n"])));
|
|
12169
12169
|
var HTMLVideo = newStyled.video(templateObject_2$U || (templateObject_2$U = __makeTemplateObject(["\n width: 100%;\n max-width: 530px;\n height: ", ";\n"], ["\n width: 100%;\n max-width: 530px;\n height: ", ";\n"])), function (props) { return props.height; });
|
|
12170
12170
|
var PlayIcon = newStyled(Icon.PDP.PlayVideo)(templateObject_3$K || (templateObject_3$K = __makeTemplateObject(["\n width: 120px;\n height: 120px;\n\n @media (max-width: 768px) {\n width: 80px;\n height: 80px;\n }\n"], ["\n width: 120px;\n height: 120px;\n\n @media (max-width: 768px) {\n width: 80px;\n height: 80px;\n }\n"])));
|
|
12171
12171
|
var PlayContainer = newStyled.div(templateObject_4$z || (templateObject_4$z = __makeTemplateObject(["\n z-index: 1;\n width: 100%;\n height: 100%;\n display: flex;\n position: absolute;\n align-items: center;\n justify-content: center;\n"], ["\n z-index: 1;\n width: 100%;\n height: 100%;\n display: flex;\n position: absolute;\n align-items: center;\n justify-content: center;\n"])));
|
|
@@ -12221,7 +12221,7 @@ var Video$1 = function (_a) {
|
|
|
12221
12221
|
setVideoProgress(videoRef.current.currentTime);
|
|
12222
12222
|
}
|
|
12223
12223
|
};
|
|
12224
|
-
return (jsxs$1(Container$
|
|
12224
|
+
return (jsxs$1(Container$V, __assign$1({ className: className }, { children: [!isLoading && withProgressBar && jsx$1(ProgressBar$1, { progress: progress, hide: hideProgressBar }, void 0), !isPlaying ? (jsx$1(PlayContainer, __assign$1({ "data-testid": "play", onClick: handlePlayClick }, { children: isStarted && jsx$1(PlayIcon, {}, void 0) }), void 0)) : (jsx$1(PauseContainer, { "data-testid": "pause", onClick: handlePauseClick }, void 0)), hasAudioControl && (jsxs$1(MuteButton, __assign$1({ onClick: handleMuteToggle }, { children: [isMuted && jsx$1(Icon$1, { name: "custom/sound_off" }, void 0), !isMuted && jsx$1(Icon$1, { name: "custom/sound_on" }, void 0)] }), void 0)), jsxs$1(HTMLVideo, __assign$1({}, rest, { muted: isMuted, "data-testid": "video", poster: thumbnail, playsInline: true, ref: videoRef, onTimeUpdate: onTimeUpdate, onCanPlay: function () { return setIsLoading(false); }, onLoadedData: function () { return setIsLoading(false); }, onPause: function () { return setIsPlaying(false); }, onPlaying: function () { return setIsPlaying(true); }, height: height || 'auto' }, { children: [jsx$1("track", { kind: "captions" }, void 0), jsx$1("source", { src: source }, void 0)] }), void 0)] }), void 0));
|
|
12225
12225
|
};
|
|
12226
12226
|
|
|
12227
12227
|
var propTypes = {exports: {}};
|
|
@@ -13815,7 +13815,7 @@ InnerImageZoom.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
13815
13815
|
afterZoomOut: PropTypes.func
|
|
13816
13816
|
} : {};
|
|
13817
13817
|
|
|
13818
|
-
var Container$
|
|
13818
|
+
var Container$U = newStyled.div(templateObject_1$1a || (templateObject_1$1a = __makeTemplateObject(["\n ", "\n z-index: 0;\n position: relative;\n height: fit-content;\n /* &.styleforhorizontal {\n height: 30rem;\n } */\n display: block;\n overflow: hidden;\n white-space: nowrap;\n grid-area: 1/2;\n width: 100%;\n max-width: max-content;\n"], ["\n ", "\n z-index: 0;\n position: relative;\n height: fit-content;\n /* &.styleforhorizontal {\n height: 30rem;\n } */\n display: block;\n overflow: hidden;\n white-space: nowrap;\n grid-area: 1/2;\n width: 100%;\n max-width: max-content;\n"])), function (_a) {
|
|
13819
13819
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
13820
13820
|
return borderRadiusVariant && "border-radius: 40px;";
|
|
13821
13821
|
});
|
|
@@ -13847,7 +13847,7 @@ var ImageProductSlide$1 = function (_a) {
|
|
|
13847
13847
|
var content = _a.content, topTag = _a.topTag, topRightTag = _a.topRightTag, bottomTag = _a.bottomTag, testId = _a.testId, _c = _a.position, position = _c === void 0 ? 'vertical' : _c, borderRadiusVariant = _a.borderRadiusVariant, ctaText = _a.ctaText, ctaAction = _a.ctaAction, hideCTA = _a.hideCTA, withZoom = _a.withZoom, isRatioSquare = _a.isRatioSquare;
|
|
13848
13848
|
var source = content === null || content === void 0 ? void 0 : content.url;
|
|
13849
13849
|
var isVideo = (_b = content === null || content === void 0 ? void 0 : content.isVideo) !== null && _b !== void 0 ? _b : false;
|
|
13850
|
-
return (jsxs$1(Container$
|
|
13850
|
+
return (jsxs$1(Container$U, __assign$1({ "data-testid": testId, className: "stylefor".concat(position), borderRadiusVariant: borderRadiusVariant }, { children: [!isVideo && (jsxs$1(Fragment$2, { children: [withZoom ? (jsx$1(InnerImageZoomStyled, { src: source, zoomSrc: source, zoomType: "hover", imgAttributes: {
|
|
13851
13851
|
alt: content.alt,
|
|
13852
13852
|
style: { objectFit: 'cover', objectPosition: 'center' },
|
|
13853
13853
|
loading: 'eager',
|
|
@@ -13855,7 +13855,7 @@ var ImageProductSlide$1 = function (_a) {
|
|
|
13855
13855
|
}, width: position == 'horizontal' ? 360 : 530, height: position == 'horizontal' ? 480 : 720, hideHint: true, isRatioSquare: isRatioSquare }, void 0)) : (jsx$1(ImageStyled, { width: position == 'horizontal' ? '360px' : '530px', height: "auto", src: source, alt: content.alt, objectFit: "cover", loading: "eager", decoding: "sync", isRatioSquare: isRatioSquare }, void 0)), jsx$1(TopTagContainer$7, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsx$1(BottomTagContainer$7, __assign$1({ isCTAHidden: hideCTA }, { children: bottomTag }), void 0), !!topRightTag && jsx$1(TopRightTagContainer$2, { children: topRightTag }, void 0)] }, void 0)), isVideo && jsx$1(Video$1, { source: source, thumbnail: content === null || content === void 0 ? void 0 : content.thumbnailUrl }, void 0), ctaText && ctaAction && (jsx$1("div", __assign$1({ style: { display: hideCTA ? 'none' : 'block' } }, { children: jsx$1(ButtonSecondaryOutlineWrapper, { wide: true, onClick: ctaAction, text: ctaText }, void 0) }), void 0))] }), void 0));
|
|
13856
13856
|
};
|
|
13857
13857
|
|
|
13858
|
-
var Container$
|
|
13858
|
+
var Container$T = newStyled.div(templateObject_1$19 || (templateObject_1$19 = __makeTemplateObject(["\n display: grid;\n grid-template-columns: minmax(6rem, max-content) 1fr;\n grid-column-gap: 20px;\n max-height: 50rem;\n width: 100%;\n"], ["\n display: grid;\n grid-template-columns: minmax(6rem, max-content) 1fr;\n grid-column-gap: 20px;\n max-height: 50rem;\n width: 100%;\n"])));
|
|
13859
13859
|
var templateObject_1$19;
|
|
13860
13860
|
|
|
13861
13861
|
var getInitialIndex = function (images, selectedValue) {
|
|
@@ -13882,7 +13882,7 @@ var ProductGallery = function (_a) {
|
|
|
13882
13882
|
setActiveIndex(index);
|
|
13883
13883
|
};
|
|
13884
13884
|
var selectedImage = images[activeIndex];
|
|
13885
|
-
return (jsxs$1(Container$
|
|
13885
|
+
return (jsxs$1(Container$T, { children: [jsx$1(ImagePreviewList, { images: images, selectedImage: selectedImage, dataTestId: previewListDataTestId, onClick: onContentChange, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor, hasOverflowArrows: hasOverflowArrows, isRatioSquare: isRatioSquare, itemsOnViewport: itemsOnViewport }, void 0), jsx$1(ImageProductSlide$1, { content: selectedImage, topTag: topTag, topRightTag: topRightTag, bottomTag: bottomTag, testId: productImageDataTestId, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant, ctaText: ctaText, ctaAction: ctaAction, hideCTA: hideCTA, withZoom: withZoom, isRatioSquare: isRatioSquare }, void 0)] }, void 0));
|
|
13886
13886
|
};
|
|
13887
13887
|
|
|
13888
13888
|
var getStylesBySize$8 = function (size) {
|
|
@@ -13904,7 +13904,7 @@ var getStylesBySize$8 = function (size) {
|
|
|
13904
13904
|
};
|
|
13905
13905
|
}
|
|
13906
13906
|
};
|
|
13907
|
-
var Container$
|
|
13907
|
+
var Container$S = newStyled.div(templateObject_1$18 || (templateObject_1$18 = __makeTemplateObject(["\n background-color: ", ";\n width: ", ";\n height: ", ";\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n transition: background-color 0.1s ease;\n\n padding: ", ";\n\n &:hover {\n background-color: ", ";\n cursor: pointer;\n }\n\n &.disabled {\n background-color: ", ";\n cursor: not-allowed;\n\n svg path {\n fill: ", ";\n }\n }\n"], ["\n background-color: ", ";\n width: ", ";\n height: ", ";\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n transition: background-color 0.1s ease;\n\n padding: ", ";\n\n &:hover {\n background-color: ", ";\n cursor: pointer;\n }\n\n &.disabled {\n background-color: ", ";\n cursor: not-allowed;\n\n svg path {\n fill: ", ";\n }\n }\n"])), function (_a) {
|
|
13908
13908
|
var backgroundColor = _a.backgroundColor;
|
|
13909
13909
|
return backgroundColor;
|
|
13910
13910
|
}, function (_a) {
|
|
@@ -13932,7 +13932,7 @@ var Container$T = newStyled.div(templateObject_1$18 || (templateObject_1$18 = __
|
|
|
13932
13932
|
var IconButton = function (_a) {
|
|
13933
13933
|
var children = _a.children, disabled = _a.disabled, _b = _a.size, size = _b === void 0 ? ComponentSize.Medium : _b, onClick = _a.onClick;
|
|
13934
13934
|
var theme = useTheme();
|
|
13935
|
-
return (jsx$1(Container$
|
|
13935
|
+
return (jsx$1(Container$S, __assign$1({ className: disabled ? 'disabled' : '', backgroundColor: theme.component.button.primary.active.backgroundColor, hoverBackgroundColor: theme.component.button.secondary.active.backgroundColor, disabledColor: theme.colors.shades['50'].color, disabledIconColor: theme.colors.shades['200'].color, size: size, "data-testid": "Container", onClick: disabled ? function () { } : onClick }, { children: children }), void 0));
|
|
13936
13936
|
};
|
|
13937
13937
|
var templateObject_1$18;
|
|
13938
13938
|
|
|
@@ -13947,7 +13947,7 @@ var PaypalButton = function (_a) {
|
|
|
13947
13947
|
};
|
|
13948
13948
|
var templateObject_1$17;
|
|
13949
13949
|
|
|
13950
|
-
var Container$
|
|
13950
|
+
var Container$R = newStyled.div(function (props) { return ({
|
|
13951
13951
|
height: 'auto',
|
|
13952
13952
|
textAlign: 'center',
|
|
13953
13953
|
justifyContent: 'center',
|
|
@@ -13997,10 +13997,10 @@ var IconsWithTitle = function (_a) {
|
|
|
13997
13997
|
textAlign: 'center',
|
|
13998
13998
|
lineHeight: '18px',
|
|
13999
13999
|
};
|
|
14000
|
-
return (jsx$1(Fragment$2, { children: jsxs$1(Container$
|
|
14000
|
+
return (jsx$1(Fragment$2, { children: jsxs$1(Container$R, __assign$1({ textPosition: iconTitlePosition }, { children: [withWrapper ? (jsx$1(IconWrapper, __assign$1({ backgroundColor: backgroundColor, style: iconStyles, iconSize: isMobile ? iconSizeMobile : iconSizeDesktop }, { children: jsx$1(IconComponent, { width: isMobile ? iconSizeMobile : iconSizeDesktop, height: isMobile ? iconSizeMobile : iconSizeDesktop, fill: iconColor }, void 0) }), void 0)) : (jsx$1(IconComponent, { width: isMobile ? iconSizeMobile : iconSizeDesktop, height: isMobile ? iconSizeMobile : iconSizeDesktop, fill: iconColor }, void 0)), jsx$1(Text$7, { variant: "heading6", weight: "demi", style: titleStyles ? titleStyles : defaultTitleStyle, dangerouslySetInnerHTML: isTitleInnerHtml ? { __html: iconTitle } : { __html: "<span>".concat(iconTitle, "</span>") } }, void 0)] }), void 0) }, void 0));
|
|
14001
14001
|
};
|
|
14002
14002
|
|
|
14003
|
-
var Container$
|
|
14003
|
+
var Container$Q = newStyled.div(templateObject_1$16 || (templateObject_1$16 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n border-radius: 10px;\n max-width: ", ";\n width: 100%;\n height: 100%;\n flex-wrap: wrap;\n row-gap: 15px;\n"], ["\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n border-radius: 10px;\n max-width: ", ";\n width: 100%;\n height: 100%;\n flex-wrap: wrap;\n row-gap: 15px;\n"])), function (props) { return (props.isMobile ? '200px' : '207px'); });
|
|
14004
14004
|
var ImageContainer$4 = newStyled.div(templateObject_2$S || (templateObject_2$S = __makeTemplateObject(["\n display: flex;\n max-width: ", ";\n height: ", ";\n"], ["\n display: flex;\n max-width: ", ";\n height: ", ";\n"])), function (props) { return (props.isMobile ? '200px' : '207px'); }, function (props) { return (props.isMobile ? '200px' : '207px'); });
|
|
14005
14005
|
var StyledTitle = newStyled.div(templateObject_3$I || (templateObject_3$I = __makeTemplateObject(["\n display: flex;\n ", "\n"], ["\n display: flex;\n ", "\n"])), function (_a) {
|
|
14006
14006
|
var titlePosition = _a.titlePosition;
|
|
@@ -14010,7 +14010,7 @@ var StyledTitle = newStyled.div(templateObject_3$I || (templateObject_3$I = __ma
|
|
|
14010
14010
|
var ImageCardWithDescription = function (_a) {
|
|
14011
14011
|
var image = _a.image, title = _a.title, description = _a.description, _b = _a.titlePosition, titlePosition = _b === void 0 ? 'left' : _b;
|
|
14012
14012
|
var isMobile = useWindowDimensions().isMobile;
|
|
14013
|
-
return (jsxs$1(Container$
|
|
14013
|
+
return (jsxs$1(Container$Q, __assign$1({ "data-testid": "Container", isMobile: isMobile }, { children: [jsx$1(ImageContainer$4, __assign$1({ "data-testid": "ImageContainer", isMobile: isMobile }, { children: jsx$1(Image$3, { src: image, borderRadius: "40px", alt: "before", height: "100%", width: "100%" }, void 0) }), void 0), jsx$1(StyledTitle, __assign$1({ titlePosition: titlePosition, "data-testid": "StyledTitle" }, { children: isMobile ? (jsx$1(Text$7, __assign$1({ variant: "link", weight: "demi" }, { children: title }), void 0)) : (jsx$1(Text$7, __assign$1({ variant: "heading6", weight: "demi" }, { children: title }), void 0)) }), void 0), jsx$1(Text$7, __assign$1({ variant: "link", weight: "regular" }, { children: description }), void 0)] }), void 0));
|
|
14014
14014
|
};
|
|
14015
14015
|
var templateObject_1$16, templateObject_2$S, templateObject_3$I;
|
|
14016
14016
|
|
|
@@ -14036,7 +14036,7 @@ var containerByStatus = function (theme, status) {
|
|
|
14036
14036
|
return theme.colors.semantic.urgent.color;
|
|
14037
14037
|
return '';
|
|
14038
14038
|
};
|
|
14039
|
-
var Container$
|
|
14039
|
+
var Container$P = newStyled.div(templateObject_1$14 || (templateObject_1$14 = __makeTemplateObject(["\n position: relative;\n input {\n border-color: ", ";\n }\n"], ["\n position: relative;\n input {\n border-color: ", ";\n }\n"])), function (_a) {
|
|
14040
14040
|
var theme = _a.theme, status = _a.status, hasError = _a.hasError;
|
|
14041
14041
|
return hasError ? '' : containerByStatus(theme, status);
|
|
14042
14042
|
});
|
|
@@ -14137,7 +14137,7 @@ var BaseInput = function (_a) {
|
|
|
14137
14137
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
14138
14138
|
}, [status]);
|
|
14139
14139
|
var hasValue = Boolean(value);
|
|
14140
|
-
return (jsxs$1(Container$
|
|
14140
|
+
return (jsxs$1(Container$P, __assign$1({ status: status, hasError: hasError }, { children: [label && (jsx$1(InputLabel, { label: label, isDisabled: rest.disabled, isRequired: Boolean(required) }, void 0)), jsxs$1(InputWrapper, __assign$1({ className: "inputWrapper", size: size, inlinePlaceholder: inlinePlaceholder }, { children: [jsx$1(StyledInput, __assign$1({ id: requiredPlaceholder ? 'requiredPlaceholder' : undefined, hasValue: hasValue, inlinePlaceholder: inlinePlaceholder, hasError: hasError, ref: innerRef, "data-testid": "base-input", type: inputType, onChange: function (event) {
|
|
14141
14141
|
onChange(event.target.value, event);
|
|
14142
14142
|
}, onBlur: onBlur, required: Boolean(required), value: value, placeholder: inlinePlaceholder ? '' : placeholder }, rest), void 0), !!requiredPlaceholder && (jsx$1(StyledLabel$2, __assign$1({ htmlFor: "requiredPlaceholder" }, { children: requiredPlaceholder }), void 0)), inlinePlaceholder && (jsx$1(AnimatedPlaceholder, __assign$1({ "data-testid": "input-placeholder" }, { children: placeholder }), void 0)), children] }), void 0), !hideClear && !rest.disabled && inlinePlaceholder && hasValue && (jsx$1(ClearInput, __assign$1({ onClick: function () {
|
|
14143
14143
|
onChange('', { target: { value: '' } });
|
|
@@ -14158,7 +14158,7 @@ var Button$6 = function (_a) {
|
|
|
14158
14158
|
throw new Error("Invalid button variant ".concat(variant));
|
|
14159
14159
|
};
|
|
14160
14160
|
|
|
14161
|
-
var Container$
|
|
14161
|
+
var Container$O = newStyled.div(templateObject_1$13 || (templateObject_1$13 = __makeTemplateObject(["\n overflow: hidden;\n\n input {\n border-radius: ", ";\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n border-right: none;\n width: 100%;\n }\n"], ["\n overflow: hidden;\n\n input {\n border-radius: ", ";\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n border-right: none;\n width: 100%;\n }\n"])), function (_a) {
|
|
14162
14162
|
var theme = _a.theme;
|
|
14163
14163
|
return theme.component.inputCustom.input.borderRadius;
|
|
14164
14164
|
});
|
|
@@ -14177,7 +14177,7 @@ var Custom = function (_a) {
|
|
|
14177
14177
|
text: text,
|
|
14178
14178
|
disabled: rest.disabled,
|
|
14179
14179
|
}); }, [variant, onClick, text, rest.disabled]);
|
|
14180
|
-
return (jsx$1(Container$
|
|
14180
|
+
return (jsx$1(Container$O, __assign$1({ theme: theme }, { children: jsx$1(BaseInput, __assign$1({}, rest, { children: jsx$1(ButtonContainer$1, __assign$1({ theme: theme, defaultRounded: defaultRounded }, { children: jsx$1(Button$6, __assign$1({}, props), void 0) }), void 0) }), void 0) }), void 0));
|
|
14181
14181
|
};
|
|
14182
14182
|
var templateObject_1$13, templateObject_2$P;
|
|
14183
14183
|
|
|
@@ -14212,12 +14212,12 @@ var BasePlusButton = function (_a) {
|
|
|
14212
14212
|
};
|
|
14213
14213
|
var templateObject_1$11;
|
|
14214
14214
|
|
|
14215
|
-
var Container$
|
|
14215
|
+
var Container$N = newStyled.div(templateObject_1$10 || (templateObject_1$10 = __makeTemplateObject(["\n input {\n padding-right: 2.688rem;\n }\n"], ["\n input {\n padding-right: 2.688rem;\n }\n"])));
|
|
14216
14216
|
var IconContainer$3 = newStyled.div(templateObject_2$N || (templateObject_2$N = __makeTemplateObject(["\n position: absolute;\n right: 0.875rem;\n width: 1.125rem;\n height: 100%;\n display: flex;\n align-items: center;\n"], ["\n position: absolute;\n right: 0.875rem;\n width: 1.125rem;\n height: 100%;\n display: flex;\n align-items: center;\n"])));
|
|
14217
14217
|
var BasePlusIcon = function (_a) {
|
|
14218
14218
|
var Icon = _a.Icon, rest = __rest(_a, ["Icon"]);
|
|
14219
14219
|
var theme = useTheme();
|
|
14220
|
-
return (jsx$1(Container$
|
|
14220
|
+
return (jsx$1(Container$N, { children: jsx$1(BaseInput, __assign$1({}, rest, { children: jsx$1(IconContainer$3, { children: jsx$1(Icon, { testId: "IconWrapper", fill: theme.colors.shades['250'].color }, void 0) }, void 0) }), void 0) }, void 0));
|
|
14221
14221
|
};
|
|
14222
14222
|
var templateObject_1$10, templateObject_2$N;
|
|
14223
14223
|
|
|
@@ -14366,7 +14366,7 @@ var transformStyle = function (_a) {
|
|
|
14366
14366
|
return opened
|
|
14367
14367
|
? css(templateObject_3$F || (templateObject_3$F = __makeTemplateObject(["\n transform: ", ";\n top: ", ";\n "], ["\n transform: ", ";\n top: ", ";\n "])), maxFullScreen ? 'translateY(0)' : 'translate(-50%, -50%)', maxFullScreen ? '0' : initialTop ? initialTop : '50%') : css(templateObject_4$w || (templateObject_4$w = __makeTemplateObject(["\n transform: ", ";\n top: ", ";\n "], ["\n transform: ", ";\n top: ", ";\n "])), maxFullScreen ? 'translateY(10%)' : 'translate(-50%, -40%)', maxFullScreen ? '0' : initialTop ? initialTop : '50%');
|
|
14368
14368
|
};
|
|
14369
|
-
var Container$
|
|
14369
|
+
var Container$M = newStyled.div(templateObject_6$m || (templateObject_6$m = __makeTemplateObject(["\n border: 1px solid var(--colors-pallete-primary-color);\n border-radius: ", ";\n padding: ", ";\n position: fixed;\n left: ", ";\n top: ", ";\n z-index: var(--zIndex-modal);\n background-color: var(--colors-background-color);\n transition: transform 0.3s, opacity 0.3s;\n overflow-y: auto;\n max-width: ", ";\n max-height: ", ";\n width: ", ";\n height: ", ";\n ", "\n ", "\n ", "\n"], ["\n border: 1px solid var(--colors-pallete-primary-color);\n border-radius: ", ";\n padding: ", ";\n position: fixed;\n left: ", ";\n top: ", ";\n z-index: var(--zIndex-modal);\n background-color: var(--colors-background-color);\n transition: transform 0.3s, opacity 0.3s;\n overflow-y: auto;\n max-width: ", ";\n max-height: ", ";\n width: ", ";\n height: ", ";\n ", "\n ", "\n ", "\n"])), function (props) { return "".concat(props.maxFullScreen ? '0' : 'var(--radius-regular)'); }, function (props) { return "".concat(props.padding ? props.padding : '20px 10px'); }, function (props) { return "".concat(props.maxFullScreen ? '0' : '50%'); }, function (props) { return (props.maxFullScreen ? '0' : props.initialTop ? props.initialTop : '50%'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : '90vw'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : '90vh'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : 'auto'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : 'inherit'); }, function (_a) {
|
|
14370
14370
|
var width = _a.width;
|
|
14371
14371
|
return width
|
|
14372
14372
|
? css(templateObject_5$o || (templateObject_5$o = __makeTemplateObject(["\n width: ", ";\n "], ["\n width: ", ";\n "])), width) : mediaQueries({
|
|
@@ -14383,7 +14383,7 @@ var Modal = function (_a) {
|
|
|
14383
14383
|
}
|
|
14384
14384
|
close();
|
|
14385
14385
|
};
|
|
14386
|
-
return (jsxs(Portal, __assign$1({ id: id }, { children: [jsx(Container$
|
|
14386
|
+
return (jsxs(Portal, __assign$1({ id: id }, { children: [jsx(Container$M, __assign$1({ opened: opened, maxFullScreen: maxFullScreen, padding: padding, width: width, initialTop: initialTop }, { children: children }), void 0), jsx(Overlay, { "data-testid": "modal-overlay", opened: opened, onClick: function () {
|
|
14387
14387
|
onClickOverlayHandler === null || onClickOverlayHandler === void 0 ? void 0 : onClickOverlayHandler();
|
|
14388
14388
|
onDismiss();
|
|
14389
14389
|
} }, void 0)] }), void 0));
|
|
@@ -18234,7 +18234,7 @@ var BarContainer = newStyled.div({
|
|
|
18234
18234
|
padding: '0 16px',
|
|
18235
18235
|
position: 'relative',
|
|
18236
18236
|
});
|
|
18237
|
-
var Container$
|
|
18237
|
+
var Container$L = newStyled.div(function (_a) {
|
|
18238
18238
|
var backgroundColor = _a.backgroundColor;
|
|
18239
18239
|
return ({
|
|
18240
18240
|
width: '475px',
|
|
@@ -18276,11 +18276,11 @@ var MotivatorProgressBar = function (_a) {
|
|
|
18276
18276
|
message = message.replace('remainingAmount', remainingAmount.toString());
|
|
18277
18277
|
return (jsx$1(MessageContainer, { children: HTMLReactParser$1(message) }, void 0));
|
|
18278
18278
|
};
|
|
18279
|
-
return (jsxs$1(Container$
|
|
18279
|
+
return (jsxs$1(Container$L, __assign$1({ backgroundColor: backgroundColor }, { children: [jsxs$1(BarContainer, __assign$1({ "data-testid": "MPBContainer" }, { children: [jsxs$1(Value, { children: [currencyCode, currentAmount] }, void 0), jsx$1(Background$1, __assign$1({ backgroundColor: unfilledColor || theme.colors.shades['100'].color, "data-testid": "MPBBackground" }, { children: jsx$1(Bar$1, { "data-testid": "MPBBar", backgroundColor: fillColor, percent: progress }, void 0) }), void 0), jsxs$1(Value, __assign$1({ isBold: true }, { children: [currencyCode, endingValue] }), void 0)] }), void 0), isRewardUnlocked ? (jsx$1(MessageContainer, { dangerouslySetInnerHTML: { __html: rewardUnlockedMessage } }, void 0)) : (getRemainingAmountMessage())] }), void 0));
|
|
18280
18280
|
};
|
|
18281
18281
|
var templateObject_1$_, templateObject_2$L;
|
|
18282
18282
|
|
|
18283
|
-
var Container$
|
|
18283
|
+
var Container$K = newStyled.div(templateObject_1$Z || (templateObject_1$Z = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: ", ";\n padding: 0.75rem 0;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: ", ";\n padding: 0.75rem 0;\n"])), function (_a) {
|
|
18284
18284
|
var theme = _a.theme;
|
|
18285
18285
|
return theme.component.orderBar.backgroundColor;
|
|
18286
18286
|
});
|
|
@@ -18288,11 +18288,11 @@ var H1 = newStyled.h1(templateObject_2$K || (templateObject_2$K = __makeTemplate
|
|
|
18288
18288
|
var OrderBar = function (_a) {
|
|
18289
18289
|
var message = _a.message, color = _a.color;
|
|
18290
18290
|
var theme = useTheme();
|
|
18291
|
-
return (jsxs$1(Container$
|
|
18291
|
+
return (jsxs$1(Container$K, __assign$1({ color: color }, { children: [jsx$1(Icon.Actions.Check, { width: 1.25, height: 0.875, fill: "#2F806A" }, void 0), jsx$1(H1, __assign$1({ color: theme.component.orderBar.fontColor }, { children: message }), void 0)] }), void 0));
|
|
18292
18292
|
};
|
|
18293
18293
|
var templateObject_1$Z, templateObject_2$K;
|
|
18294
18294
|
|
|
18295
|
-
var Container$
|
|
18295
|
+
var Container$J = newStyled.div(templateObject_1$Y || (templateObject_1$Y = __makeTemplateObject(["\n position: relative;\n display: flex;\n border-radius: 6px;\n gap: 6px;\n"], ["\n position: relative;\n display: flex;\n border-radius: 6px;\n gap: 6px;\n"])));
|
|
18296
18296
|
var Card$1 = newStyled.div(templateObject_2$J || (templateObject_2$J = __makeTemplateObject(["\n --background: var(--colors-background-color);\n\n flex: 1;\n position: relative;\n overflow: hidden;\n cursor: pointer;\n border: 2px solid var(--component-packSelector-borderColor);\n padding: 20px 7px 7px;\n text-align: center;\n background-color: var(--background);\n border-radius: var(--component-packSelector-borderRadius);\n\n &[aria-checked='true'] {\n --color: var(--component-packSelector-selectedColor);\n\n border-color: var(--color);\n\n & * {\n p {\n color: var(--color);\n }\n }\n }\n"], ["\n --background: var(--colors-background-color);\n\n flex: 1;\n position: relative;\n overflow: hidden;\n cursor: pointer;\n border: 2px solid var(--component-packSelector-borderColor);\n padding: 20px 7px 7px;\n text-align: center;\n background-color: var(--background);\n border-radius: var(--component-packSelector-borderRadius);\n\n &[aria-checked='true'] {\n --color: var(--component-packSelector-selectedColor);\n\n border-color: var(--color);\n\n & * {\n p {\n color: var(--color);\n }\n }\n }\n"])));
|
|
18297
18297
|
var Tag$1 = newStyled.div(templateObject_3$E || (templateObject_3$E = __makeTemplateObject(["\n position: absolute;\n width: 100%;\n left: 50%;\n top: 0;\n transform: translateX(-50%);\n background-color: var(--component-packSelector-tagColor);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 1px 0;\n\n [aria-checked='true'] & {\n background-color: var(--component-packSelector-selectedColor);\n\n & * {\n color: var(--component-packSelector-selectedContrast) !important;\n }\n }\n"], ["\n position: absolute;\n width: 100%;\n left: 50%;\n top: 0;\n transform: translateX(-50%);\n background-color: var(--component-packSelector-tagColor);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 1px 0;\n\n [aria-checked='true'] & {\n background-color: var(--component-packSelector-selectedColor);\n\n & * {\n color: var(--component-packSelector-selectedContrast) !important;\n }\n }\n"])));
|
|
18298
18298
|
var Label$3 = newStyled.div(templateObject_4$v || (templateObject_4$v = __makeTemplateObject(["\n position: relative;\n width: fit-content;\n margin: 0 auto;\n"], ["\n position: relative;\n width: fit-content;\n margin: 0 auto;\n"])));
|
|
@@ -18302,7 +18302,7 @@ var IconPlaceholder = newStyled.div(templateObject_7$j || (templateObject_7$j =
|
|
|
18302
18302
|
var DiscountContainer = newStyled.div(templateObject_8$d || (templateObject_8$d = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n"], ["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n"])));
|
|
18303
18303
|
var PackSelector = function (_a) {
|
|
18304
18304
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange, currencyCode = _a.currencyCode;
|
|
18305
|
-
return (jsx$1(Container$
|
|
18305
|
+
return (jsx$1(Container$J, __assign$1({ role: "radiogroup" }, { children: packs.map(function (pack) {
|
|
18306
18306
|
return (jsx$1(PackCard, { pack: pack, onChange: onChange, selected: selectedValue === pack, currencyCode: currencyCode }, pack.label));
|
|
18307
18307
|
}) }), void 0));
|
|
18308
18308
|
};
|
|
@@ -18331,7 +18331,7 @@ var PackCard = function (_a) {
|
|
|
18331
18331
|
};
|
|
18332
18332
|
var templateObject_1$Y, templateObject_2$J, templateObject_3$E, templateObject_4$v, templateObject_5$n, templateObject_6$l, templateObject_7$j, templateObject_8$d;
|
|
18333
18333
|
|
|
18334
|
-
var Container$
|
|
18334
|
+
var Container$I = newStyled.div(templateObject_1$X || (templateObject_1$X = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n user-select: none;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n user-select: none;\n"])));
|
|
18335
18335
|
var IconContainer$1 = newStyled.div(templateObject_2$I || (templateObject_2$I = __makeTemplateObject(["\n width: 0.531rem;\n height: 0.875rem;\n display: flex;\n align-items: center;\n cursor: pointer;\n"], ["\n width: 0.531rem;\n height: 0.875rem;\n display: flex;\n align-items: center;\n cursor: pointer;\n"])));
|
|
18336
18336
|
var PageNumbersContainer = newStyled.div(templateObject_3$D || (templateObject_3$D = __makeTemplateObject(["\n display: flex;\n ", ";\n"], ["\n display: flex;\n ", ";\n"])), mediaQueries({
|
|
18337
18337
|
margin: ['0 0.75rem', '0 1.25rem'],
|
|
@@ -18399,7 +18399,7 @@ var Pagination = function (_a) {
|
|
|
18399
18399
|
}
|
|
18400
18400
|
return pages;
|
|
18401
18401
|
}, [from, page, showReducedPages, to]);
|
|
18402
|
-
return (jsxs$1(Container$
|
|
18402
|
+
return (jsxs$1(Container$I, __assign$1({ "data-testid": "PaginationContainer" }, { children: [jsx$1(IconContainer$1, __assign$1({ onClick: function () { return handlePageChange(page - 1); }, "data-testid": "LeftChevron" }, { children: jsx$1(Icon.Arrows.ChevronLeft, { fill: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, void 0) }), void 0), !showReducedPages && (jsx$1(PageNumbersContainer, __assign$1({ "data-testid": "PageNumbersContainer", theme: theme }, { children: new Array(to - from + 1).fill(0).map(function (_, i) { return (jsx$1(PageNumber, __assign$1({ onClick: function () { return handlePageChange(i + from); }, bold: boldActive && page === i + from, underline: underlineActive && page === i + from, role: 'button', color: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color, borderColor: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color, theme: theme }, { children: i + from }), i)); }) }), void 0)), showReducedPages && (jsx$1(PageNumbersContainer, __assign$1({ "data-testid": "PageNumbersContainer", theme: theme }, { children: reducedPages.map(function (reducedPage, index) { return (jsx$1(PageNumber, __assign$1({ onClick: function () { return handlePageChange(reducedPage); }, bold: boldActive && page === reducedPage, underline: underlineActive && page === reducedPage, role: 'button', color: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color, borderColor: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color, theme: theme }, { children: reducedPage !== -2 ? reducedPage : '...' }), index)); }) }), void 0)), jsx$1(IconContainer$1, __assign$1({ onClick: function () { return handlePageChange(page + 1); }, "data-testid": "RightChevron" }, { children: jsx$1(Icon.Arrows.ChevronRight, { fill: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, void 0) }), void 0)] }), void 0));
|
|
18403
18403
|
};
|
|
18404
18404
|
|
|
18405
18405
|
var PaginatorBlog = function (_a) {
|
|
@@ -18413,12 +18413,12 @@ var PaginatorBlog = function (_a) {
|
|
|
18413
18413
|
setPage(page);
|
|
18414
18414
|
onChange(page);
|
|
18415
18415
|
};
|
|
18416
|
-
return (jsxs$1(Container$
|
|
18416
|
+
return (jsxs$1(Container$I, __assign$1({ "data-testid": "PaginatorBlogContainer" }, { children: [jsx$1(IconContainer$1, __assign$1({ onClick: function () { return handlePageChange(page - 1); }, "data-testid": "PaginatorBlogLeftChevron" }, { children: jsx$1(Icon.Arrows.ChevronLeft, { fill: page === 1 ? theme.colors.shades['white'].color : theme.colors.shades['700'].color }, void 0) }), void 0), jsx$1(PageNumbersContainer, __assign$1({ "data-testid": "PaginatorBlogPageNumbersContainer", theme: theme }, { children: new Array(to - from + 1).fill(0).map(function (_, i) { return (jsx$1(PageNumber, __assign$1({ onClick: function () { return handlePageChange(i + from); }, background: page === i + from ? 'black' : '', role: 'button', color: page === i + from
|
|
18417
18417
|
? theme.colors.shades['white'].color
|
|
18418
18418
|
: theme.colors.shades['700'].color, borderColor: theme.colors.shades['700'].color, theme: theme, bold: false, underline: false }, { children: i + from }), i)); }) }), void 0), jsx$1(IconContainer$1, __assign$1({ onClick: function () { return handlePageChange(page + 1); }, "data-testid": "PaginatorBlogRightChevron" }, { children: jsx$1(Icon.Arrows.ChevronRight, { fill: page === to ? theme.colors.shades['white'].color : theme.colors.shades['700'].color }, void 0) }), void 0)] }), void 0));
|
|
18419
18419
|
};
|
|
18420
18420
|
|
|
18421
|
-
var Container$
|
|
18421
|
+
var Container$H = newStyled.div(templateObject_1$W || (templateObject_1$W = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n border: 0.063rem solid ", ";\n border-radius: 0.25rem;\n padding: 0.375rem;\n cursor: ", ";\n"], ["\n width: ", ";\n height: ", ";\n border: 0.063rem solid ", ";\n border-radius: 0.25rem;\n padding: 0.375rem;\n cursor: ", ";\n"])), function (_a) {
|
|
18422
18422
|
var width = _a.width;
|
|
18423
18423
|
return width;
|
|
18424
18424
|
}, function (_a) {
|
|
@@ -18434,11 +18434,11 @@ var Container$I = newStyled.div(templateObject_1$W || (templateObject_1$W = __ma
|
|
|
18434
18434
|
var PaymentMethod = function (_a) {
|
|
18435
18435
|
var Icon = _a.Icon, width = _a.width, height = _a.height, onClick = _a.onClick;
|
|
18436
18436
|
var theme = useTheme();
|
|
18437
|
-
return (jsx$1(Container$
|
|
18437
|
+
return (jsx$1(Container$H, __assign$1({ width: width, height: height, borderColor: theme.colors.shades['100'].color, isClickable: Boolean(onClick), onClick: onClick, "data-testid": "payment-method-container" }, { children: createElement(Icon) }), void 0));
|
|
18438
18438
|
};
|
|
18439
18439
|
var templateObject_1$W;
|
|
18440
18440
|
|
|
18441
|
-
var Container$
|
|
18441
|
+
var Container$G = newStyled.div(templateObject_1$V || (templateObject_1$V = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n width: auto;\n padding: 10px 0;\n"], ["\n display: flex;\n flex-direction: row;\n width: auto;\n padding: 10px 0;\n"])));
|
|
18442
18442
|
var IMAGE_WIDTH = '63px';
|
|
18443
18443
|
var ImageContainer$3 = newStyled.div(templateObject_2$H || (templateObject_2$H = __makeTemplateObject(["\n position: relative;\n width: ", ";\n img {\n display: block;\n }\n"], ["\n position: relative;\n width: ", ";\n img {\n display: block;\n }\n"])), IMAGE_WIDTH);
|
|
18444
18444
|
var DescriptionContainer$1 = newStyled.div(templateObject_3$C || (templateObject_3$C = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n ", ";\n width: calc(100% - ", ");\n"], ["\n display: flex;\n flex-direction: column;\n ", ";\n width: calc(100% - ", ");\n"])), mediaQueries({
|
|
@@ -18483,7 +18483,7 @@ var SimpleOrderItem = function (_a) {
|
|
|
18483
18483
|
var _b, _c, _d, _e, _f, _g, _h, _j;
|
|
18484
18484
|
var title = _a.title, className = _a.className, subtitle = _a.subtitle, midElement = _a.midElement, image = _a.image, price = _a.price, tag = _a.tag, quantity = _a.quantity, finalPriceStyle = _a.finalPriceStyle, isGift = _a.isGift;
|
|
18485
18485
|
var theme = useTheme();
|
|
18486
|
-
return (jsxs$1(Container$
|
|
18486
|
+
return (jsxs$1(Container$G, __assign$1({ className: className }, { children: [jsxs$1(ImageContainer$3, { children: [jsx$1(Image$3, { src: image.src, alt: image.alt, width: "4.063rem", height: "5.375rem", objectFit: "cover", objectPosition: "center" }, void 0), quantity ? (jsx$1(Quantity, __assign$1({ "data-testid": "order-item-quantity" }, { children: jsx$1(StyledSpan, { children: quantity }, void 0) }), void 0)) : null] }, void 0), jsxs$1(DescriptionContainer$1, __assign$1({ "data-testid": "order-item-description-container", theme: theme }, { children: [jsx$1(Title$3, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "product-title" }, { children: title }), void 0), subtitle && (jsx$1(Subtitle, __assign$1({ color: ((_c = (_b = theme.component.pricing) === null || _b === void 0 ? void 0 : _b.subtitle) === null || _c === void 0 ? void 0 : _c.color) || theme.colors.shades['700'].color, fontSize: ((_e = (_d = theme.component.pricing) === null || _d === void 0 ? void 0 : _d.subtitle) === null || _e === void 0 ? void 0 : _e.fontSize) || '0.75rem', lineHeight: ((_g = (_f = theme.component.pricing) === null || _f === void 0 ? void 0 : _f.subtitle) === null || _g === void 0 ? void 0 : _g.lineHeight) || '1rem', fontWeight: ((_j = (_h = theme.component.pricing) === null || _h === void 0 ? void 0 : _h.subtitle) === null || _j === void 0 ? void 0 : _j.fontWeight) || 'normal', "data-testid": "product-variant-title", margin: "0.5rem 0 0 0" }, { children: subtitle }), void 0)), midElement, isGift && jsx$1(Gift, { children: "Limited Time Only" }, void 0), jsxs$1(PriceContainer, __assign$1({ "data-testid": "order-item-price-container", withTag: !!tag, theme: theme }, { children: [tag && (jsx$1(OfferBanner, { discountAppliedText: tag === null || tag === void 0 ? void 0 : tag.text, backgroundColor: tag === null || tag === void 0 ? void 0 : tag.backgroundColor }, void 0)), isGift ? (jsx$1(Gift, { children: "GIFT" }, void 0)) : (jsx$1(PriceLabel$1, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, color: price.color || theme.colors.shades['700'].color, size: theme.component.pricing.priceLabel.price.size, finalPriceStyle: finalPriceStyle, originalPriceStyled: true }, void 0))] }), void 0)] }), void 0)] }), void 0));
|
|
18487
18487
|
};
|
|
18488
18488
|
var templateObject_1$V, templateObject_2$H, templateObject_3$C, templateObject_4$t, templateObject_5$m, templateObject_6$k, templateObject_7$i;
|
|
18489
18489
|
|
|
@@ -18528,7 +18528,7 @@ var Background = newStyled.div(function (_a) {
|
|
|
18528
18528
|
position: 'absolute',
|
|
18529
18529
|
});
|
|
18530
18530
|
});
|
|
18531
|
-
var Container$
|
|
18531
|
+
var Container$F = newStyled.div(function (_a) {
|
|
18532
18532
|
var widthAuto = _a.widthAuto, description = _a.description;
|
|
18533
18533
|
return ({
|
|
18534
18534
|
width: widthAuto ? 'auto' : 'fit-content',
|
|
@@ -18542,11 +18542,11 @@ var getBarWithBasedOnPercent = function (percent) {
|
|
|
18542
18542
|
var ProgressBar = function (_a) {
|
|
18543
18543
|
var description = _a.description, fillColor = _a.fillColor, _b = _a.widthAuto, widthAuto = _b === void 0 ? true : _b, percent = _a.percent, height = _a.height, backgroundColor = _a.backgroundColor, borderRadius = _a.borderRadius;
|
|
18544
18544
|
var theme = useTheme();
|
|
18545
|
-
return (jsxs$1(Container$
|
|
18545
|
+
return (jsxs$1(Container$F, __assign$1({ "data-testid": "PBContainer", widthAuto: widthAuto, description: description }, { children: [jsx$1(Background, __assign$1({ backgroundColor: backgroundColor || theme.colors.shades['100'].color, height: height, borderRadius: borderRadius, "data-testid": "PBBackground" }, { children: jsx$1(Bar, { "data-testid": "PBBar", backgroundColor: fillColor, percent: percent, height: height, borderRadius: borderRadius }, void 0) }), void 0), description && (jsx$1(P$1, __assign$1({ "data-testid": "paragraph", color: theme.colors.pallete.secondary.color }, { children: description }), void 0))] }), void 0));
|
|
18546
18546
|
};
|
|
18547
18547
|
var templateObject_1$U;
|
|
18548
18548
|
|
|
18549
|
-
var Container$
|
|
18549
|
+
var Container$E = newStyled.div(templateObject_1$T || (templateObject_1$T = __makeTemplateObject(["\n padding: 0.625rem 0;\n border: 0.063rem solid ", ";\n border-radius: ", ";\n display: inline-flex;\n align-items: center;\n justify-content: space-around;\n width: 100%;\n max-width: 3.75rem;\n\n * {\n color: ", ";\n }\n"], ["\n padding: 0.625rem 0;\n border: 0.063rem solid ", ";\n border-radius: ", ";\n display: inline-flex;\n align-items: center;\n justify-content: space-around;\n width: 100%;\n max-width: 3.75rem;\n\n * {\n color: ", ";\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.borderRadius; }, function (props) { return props.color; });
|
|
18550
18550
|
var Item$1 = newStyled.span(templateObject_2$G || (templateObject_2$G = __makeTemplateObject(["\n font-size: 0.875rem;\n line-height: 1.125rem;\n margin: 0;\n padding: 0;\n"], ["\n font-size: 0.875rem;\n line-height: 1.125rem;\n margin: 0;\n padding: 0;\n"])));
|
|
18551
18551
|
var Number$1 = newStyled(Item$1)(templateObject_3$B || (templateObject_3$B = __makeTemplateObject(["\n width: 1.25rem;\n text-align: center;\n font-weight: 600;\n"], ["\n width: 1.25rem;\n text-align: center;\n font-weight: 600;\n"])));
|
|
18552
18552
|
var IncreaseDecrease = newStyled(Item$1)(templateObject_4$s || (templateObject_4$s = __makeTemplateObject(["\n cursor: pointer;\n user-select: none;\n padding: 0 0.313rem;\n font-weight: 400;\n color: ", ";\n"], ["\n cursor: pointer;\n user-select: none;\n padding: 0 0.313rem;\n font-weight: 400;\n color: ", ";\n"])), function (props) { return props.isMaxSelected && 'var(--colors-shades-175-color)'; });
|
|
@@ -18572,7 +18572,7 @@ var QuantityPicker = function (_a) {
|
|
|
18572
18572
|
return clamp(value);
|
|
18573
18573
|
});
|
|
18574
18574
|
}, [value, clamp]);
|
|
18575
|
-
return (jsxs$1(Container$
|
|
18575
|
+
return (jsxs$1(Container$E, __assign$1({ borderColor: theme.colors.shades['200'].color, color: theme.colors.shades['700'].color, "data-testid": testId, borderRadius: theme.component.qtyPicker.borderRadius }, { children: [jsx$1(IncreaseDecrease, __assign$1({ "data-testid": "".concat(testId, "-minus"), onClick: function () { return setInternal(function (value) { return clamp(value - 1); }); } }, { children: "-" }), void 0), jsx$1(Number$1, { children: internal }, void 0), jsx$1(IncreaseDecrease, __assign$1({ isMaxSelected: value === maxValue, "data-testid": "".concat(testId, "-plus"), onClick: function () { return setInternal(function (value) { return clamp(value + 1); }); } }, { children: "+" }), void 0)] }), void 0));
|
|
18576
18576
|
};
|
|
18577
18577
|
var templateObject_1$T, templateObject_2$G, templateObject_3$B, templateObject_4$s;
|
|
18578
18578
|
|
|
@@ -18644,7 +18644,7 @@ var ContainerStyles$1 = {
|
|
|
18644
18644
|
};
|
|
18645
18645
|
|
|
18646
18646
|
var Wrapper$3 = newStyled.div(templateObject_1$S || (templateObject_1$S = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
18647
|
-
var Container$
|
|
18647
|
+
var Container$D = newStyled.div(__assign$1({}, ContainerStyles$1.baseStyles), function (props) { return [ContainerStyles$1[props.size](props.theme)]; });
|
|
18648
18648
|
var Input$2 = newStyled.input(templateObject_2$F || (templateObject_2$F = __makeTemplateObject(["\n position: absolute;\n opacity: 0;\n cursor: ", ";\n height: 100%;\n width: 100%;\n margin: 0;\n"], ["\n position: absolute;\n opacity: 0;\n cursor: ", ";\n height: 100%;\n width: 100%;\n margin: 0;\n"])), function (_a) {
|
|
18649
18649
|
var disabled = _a.disabled;
|
|
18650
18650
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
@@ -18661,7 +18661,7 @@ var RadioPrimary = function (_a) {
|
|
|
18661
18661
|
var value = event.currentTarget.value;
|
|
18662
18662
|
onChange({ value: value, label: label });
|
|
18663
18663
|
};
|
|
18664
|
-
return (jsxs$1(Wrapper$3, { children: [jsxs$1(Container$
|
|
18664
|
+
return (jsxs$1(Wrapper$3, { children: [jsxs$1(Container$D, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsx$1(Input$2, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled, style: style }, void 0), jsx$1(CustomRadio$1, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), jsx$1(StyledLabel$1, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0)] }, void 0));
|
|
18665
18665
|
};
|
|
18666
18666
|
var templateObject_1$S, templateObject_2$F, templateObject_3$A;
|
|
18667
18667
|
|
|
@@ -18743,7 +18743,7 @@ var ContainerStyles = {
|
|
|
18743
18743
|
};
|
|
18744
18744
|
|
|
18745
18745
|
var Wrapper$2 = newStyled.div(templateObject_1$R || (templateObject_1$R = __makeTemplateObject(["\n display: flex;\n align-items: center;\n padding-bottom: 10px;\n"], ["\n display: flex;\n align-items: center;\n padding-bottom: 10px;\n"])));
|
|
18746
|
-
var Container$
|
|
18746
|
+
var Container$C = newStyled.div(__assign$1({}, ContainerStyles.baseStyles), function (props) { return [ContainerStyles[props.size](props.theme)]; });
|
|
18747
18747
|
var Input$1 = newStyled.input(templateObject_2$E || (templateObject_2$E = __makeTemplateObject(["\n position: absolute;\n opacity: 0;\n cursor: ", ";\n height: 100%;\n width: 100%;\n margin: 0;\n"], ["\n position: absolute;\n opacity: 0;\n cursor: ", ";\n height: 100%;\n width: 100%;\n margin: 0;\n"])), function (_a) {
|
|
18748
18748
|
var disabled = _a.disabled;
|
|
18749
18749
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
@@ -18766,7 +18766,7 @@ var ClubRadioInput = function (_a) {
|
|
|
18766
18766
|
var value = event.currentTarget.value;
|
|
18767
18767
|
onChange({ value: value, label: label });
|
|
18768
18768
|
};
|
|
18769
|
-
return (jsxs$1(Wrapper$2, { children: [jsxs$1(Container$
|
|
18769
|
+
return (jsxs$1(Wrapper$2, { children: [jsxs$1(Container$C, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsx$1(Input$1, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled, style: style }, void 0), jsx$1(CustomRadio, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), jsx$1(StyledLabel, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled, "aria-checked": checked }, { children: label }), void 0)] }, void 0));
|
|
18770
18770
|
};
|
|
18771
18771
|
var templateObject_1$R, templateObject_2$E, templateObject_3$z;
|
|
18772
18772
|
|
|
@@ -18796,7 +18796,7 @@ function formatDate(date, format) {
|
|
|
18796
18796
|
}
|
|
18797
18797
|
}
|
|
18798
18798
|
|
|
18799
|
-
var Container$
|
|
18799
|
+
var Container$B = newStyled.div(templateObject_1$Q || (templateObject_1$Q = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n\n @media (min-width: 768px) {\n flex-direction: row;\n }\n"], ["\n display: flex;\n flex-direction: column;\n\n @media (min-width: 768px) {\n flex-direction: row;\n }\n"])));
|
|
18800
18800
|
var Content$1 = newStyled.div(templateObject_2$D || (templateObject_2$D = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n padding: 20px;\n padding-top: 0;\n"], ["\n display: flex;\n flex-direction: column;\n padding: 20px;\n padding-top: 0;\n"])));
|
|
18801
18801
|
var StarsContent = newStyled.div(templateObject_3$y || (templateObject_3$y = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n"], ["\n display: flex;\n justify-content: space-between;\n"])));
|
|
18802
18802
|
var ReviewContainer$1 = newStyled.div(templateObject_4$r || (templateObject_4$r = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n margin-top: 15px;\n margin-bottom: 5px;\n\n @media (min-width: 768px) {\n margin-top: 10px;\n }\n"], ["\n display: flex;\n flex-direction: column;\n margin-top: 15px;\n margin-bottom: 5px;\n\n @media (min-width: 768px) {\n margin-top: 10px;\n }\n"])));
|
|
@@ -18834,14 +18834,14 @@ var Review$1 = function (_a) {
|
|
|
18834
18834
|
}
|
|
18835
18835
|
}
|
|
18836
18836
|
}, [opened]);
|
|
18837
|
-
return (jsx$1(Modal, __assign$1({ id: modalId, maxFullScreen: maxFullScreen, padding: "0" }, { children: jsxs$1(Container$
|
|
18837
|
+
return (jsx$1(Modal, __assign$1({ id: modalId, maxFullScreen: maxFullScreen, padding: "0" }, { children: jsxs$1(Container$B, { children: [jsx$1(CloseButton, __assign$1({ onClick: close }, { children: "X" }), void 0), jsx$1(ImageContainer$2, { children: image &&
|
|
18838
18838
|
(!isVideo ? (jsx$1(ImageWrapper$3, { src: image.src, alt: image.alt }, void 0)) : (jsx$1(VideoWrapper, { ref: refVideo, src: image.src, width: "100%", controls: true }, void 0))) }, void 0), jsxs$1(DescriptionContainer, { children: [opened && (jsxs$1(ReviewerName$1, { children: [reviewerName, verified && jsx$1(VerifiedText, { children: "Verified Buyer" }, void 0)] }, void 0)), jsxs$1(Content$1, __assign$1({ "data-testid": "review-detail-content" }, { children: [jsxs$1(StarsContent, { children: [jsx$1(StarList, { starsNumber: 5, rating: rating, fill: stars.color, size: stars.size }, void 0), jsx$1(DateText$1, { children: formatDate(date) }, void 0)] }, void 0), jsxs$1(ReviewContainer$1, { children: [jsx$1(ReviewTitle$1, { children: title }, void 0), jsx$1(ReviewDescription, { dangerouslySetInnerHTML: { __html: description } }, void 0)] }, void 0), jsxs$1(HelpfulContainer, { children: [jsxs$1(HelpfulAction, __assign$1({ "data-testid": "helpful-action", onClick: function () { return (helpfulAction ? helpfulAction(reviewId) : undefined); } }, { children: [jsx$1(Icon.Custom.ThumbsUp, { width: 1, height: 1, fill: "#000" }, void 0), jsx$1(HelpfulCount, { children: helpfulCount }, void 0)] }), void 0), jsxs$1(NotHelpfulAction, __assign$1({ "data-testid": "not-helpful-action", onClick: function () { return (notHelpfulAction ? notHelpfulAction(reviewId) : undefined); } }, { children: [jsx$1(Icon.Custom.ThumbsDown, { width: 1, height: 1, fill: "#000" }, void 0), jsx$1(NotHelpfulCount, { children: notHelpfulCount }, void 0)] }), void 0)] }, void 0)] }), void 0), productImage && productLink && (jsxs$1(ProductContainer, __assign$1({ onClick: function () { return (window.location.href = productLink); } }, { children: [jsx$1(ProductImageWrapper, { children: jsx$1(ProductImage, { src: productImage, alt: "productImage" }, void 0) }, void 0), jsx$1(ProductTitle, { children: productTitle }, void 0)] }), void 0))] }, void 0)] }, void 0) }), void 0));
|
|
18839
18839
|
};
|
|
18840
18840
|
var templateObject_1$Q, templateObject_2$D, templateObject_3$y, templateObject_4$r, templateObject_5$l, templateObject_6$j, templateObject_7$h, templateObject_8$c, templateObject_9$9, templateObject_10$8, templateObject_11$5, templateObject_12$2, templateObject_13$2, templateObject_14$2, templateObject_15$1, templateObject_16$1, templateObject_17$1, templateObject_18$1, templateObject_19$1, templateObject_20, templateObject_21, templateObject_22, templateObject_23;
|
|
18841
18841
|
|
|
18842
18842
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_DESKTOP = 500;
|
|
18843
18843
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_MOBILE = 168;
|
|
18844
|
-
var Container$
|
|
18844
|
+
var Container$A = newStyled.div(templateObject_1$P || (templateObject_1$P = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n width: auto;\n color: #292929;\n"], ["\n display: flex;\n flex-direction: column;\n width: auto;\n color: #292929;\n"])));
|
|
18845
18845
|
var Heading = newStyled.div(templateObject_2$C || (templateObject_2$C = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n width: 100%;\n font-size: 14px;\n line-height: 22px;\n text-align: right;\n margin-bottom: 10px;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"], ["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n width: 100%;\n font-size: 14px;\n line-height: 22px;\n text-align: right;\n margin-bottom: 10px;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"])));
|
|
18846
18846
|
var Content = newStyled.div(templateObject_3$x || (templateObject_3$x = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n"], ["\n display: flex;\n justify-content: space-between;\n"])));
|
|
18847
18847
|
var ReviewContainer = newStyled.div(templateObject_4$q || (templateObject_4$q = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
@@ -18883,7 +18883,7 @@ var Review = function (_a) {
|
|
|
18883
18883
|
});
|
|
18884
18884
|
};
|
|
18885
18885
|
}, [randomId]);
|
|
18886
|
-
return (jsxs$1(Container$
|
|
18886
|
+
return (jsxs$1(Container$A, { children: [jsxs$1(Heading, { children: [jsx$1(ReviewerName, { children: reviewerName }, void 0), jsx$1(DateText, { children: formatDate(date, dateFormat) }, void 0)] }, void 0), jsx$1(StarList, { starsNumber: 5, rating: rating, fill: stars.color, size: stars.size }, void 0), jsxs$1(Content, __assign$1({ "data-testid": "review-content" }, { children: [jsxs$1(ReviewContainer, { children: [jsx$1(ReviewTitle, { children: title }, void 0), jsx$1(ReviewDescriptionMobile, { dangerouslySetInnerHTML: {
|
|
18887
18887
|
__html: showMoreMobile
|
|
18888
18888
|
? "".concat(description.slice(0, REVIEWS_DESCRIPTION_MAX_LENGTH_MOBILE), "... <a id=\"see-more-").concat(randomId, "\" class=\"see-more\">See more</a>")
|
|
18889
18889
|
: description,
|
|
@@ -18895,7 +18895,7 @@ var Review = function (_a) {
|
|
|
18895
18895
|
};
|
|
18896
18896
|
var templateObject_1$P, templateObject_2$C, templateObject_3$x, templateObject_4$q, templateObject_5$k, templateObject_6$i, templateObject_7$g, templateObject_8$b, templateObject_9$8, templateObject_10$7, templateObject_11$4, templateObject_12$1, templateObject_13$1, templateObject_14$1, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19;
|
|
18897
18897
|
|
|
18898
|
-
var Container$
|
|
18898
|
+
var Container$z = newStyled.div(templateObject_1$O || (templateObject_1$O = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: auto;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: auto;\n"])));
|
|
18899
18899
|
var ReviewsContainer = newStyled.div(templateObject_2$B || (templateObject_2$B = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n text-align: center;\n align-items: center;\n\n @media (min-width: 768px) {\n flex-direction: row;\n gap: 30px;\n }\n"], ["\n display: flex;\n flex-direction: column;\n text-align: center;\n align-items: center;\n\n @media (min-width: 768px) {\n flex-direction: row;\n gap: 30px;\n }\n"])));
|
|
18900
18900
|
var ReviewsCount = newStyled.div(templateObject_3$w || (templateObject_3$w = __makeTemplateObject(["\n display: block;\n\n @media (min-width: 768px) {\n display: flex;\n flex-direction: column;\n }\n"], ["\n display: block;\n\n @media (min-width: 768px) {\n display: flex;\n flex-direction: column;\n }\n"])));
|
|
18901
18901
|
var ReviewsStars = newStyled.div(templateObject_4$p || (templateObject_4$p = __makeTemplateObject(["\n display: flex;\n margin-bottom: 10px;\n\n @media (min-width: 768px) {\n margin-bottom: 0;\n }\n"], ["\n display: flex;\n margin-bottom: 10px;\n\n @media (min-width: 768px) {\n margin-bottom: 0;\n }\n"])));
|
|
@@ -18909,17 +18909,17 @@ var ReviewsHeader = function (_a) {
|
|
|
18909
18909
|
var _b = _a.title, title = _b === void 0 ? 'Reviews' : _b, rating = _a.rating, reviews = _a.reviews, reviewsText = _a.reviewsText, reviewsSummary = _a.reviewsSummary, onClickReview = _a.onClickReview;
|
|
18910
18910
|
var starsNumber = 5;
|
|
18911
18911
|
var theme = useTheme();
|
|
18912
|
-
return (jsxs$1(Container$
|
|
18912
|
+
return (jsxs$1(Container$z, { children: [jsx$1(Text$7, __assign$1({ variant: "heading3", weight: "bold", style: { margin: '10px 0' } }, { children: title }), void 0), jsxs$1(ReviewsContainer, { children: [jsxs$1(ReviewsCount, { children: [jsxs$1(ReviewsStars, { children: [jsx$1(ReviewsTextCount, __assign$1({ variant: "heading3", weight: "bold" }, { children: rating }), void 0), jsx$1(StarList, { rating: rating, size: ComponentSize.Medium, starsNumber: starsNumber, fill: theme.component.stars.element.color }, void 0)] }, void 0), jsxs$1(Text$7, __assign$1({ variant: "body", size: "small", weight: "regular", style: { marginBottom: '20px' } }, { children: [reviews, " ", reviewsText] }), void 0)] }, void 0), jsx$1(ReviewsImages, { children: reviewsSummary.map(function (summaryItem) { return (jsx$1(SummaryItem, { onClick: function () { return onClickReview(summaryItem); }, backgroundUrl: summaryItem, "data-testid": "summary-review-item" }, summaryItem)); }) }, void 0)] }, void 0)] }, void 0));
|
|
18913
18913
|
};
|
|
18914
18914
|
var templateObject_1$O, templateObject_2$B, templateObject_3$w, templateObject_4$p, templateObject_5$j, templateObject_6$h, templateObject_7$f;
|
|
18915
18915
|
|
|
18916
|
-
var Container$
|
|
18916
|
+
var Container$y = newStyled.div(templateObject_1$N || (templateObject_1$N = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n cursor: pointer;\n user-select: none;\n"], ["\n display: inline-flex;\n align-items: center;\n cursor: pointer;\n user-select: none;\n"])));
|
|
18917
18917
|
var Text$1 = newStyled.p(templateObject_2$A || (templateObject_2$A = __makeTemplateObject(["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 700;\n color: ", ";\n margin-right: 0.313rem;\n"], ["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 700;\n color: ", ";\n margin-right: 0.313rem;\n"])), function (props) { return props.color; });
|
|
18918
18918
|
var ScrollToTop = function (_a) {
|
|
18919
18919
|
var scrollToTopText = _a.scrollToTopText, onClick = _a.onClick, fill = _a.fill, _b = _a.Icon, Icon$1 = _b === void 0 ? Icon.Arrows.CircleChevronUp : _b;
|
|
18920
18920
|
var theme = useTheme();
|
|
18921
18921
|
var fillValue = fill || theme.colors.pallete.primary.color;
|
|
18922
|
-
return (jsxs$1(Container$
|
|
18922
|
+
return (jsxs$1(Container$y, __assign$1({ onClick: onClick, "data-testid": "scrollTopContainer" }, { children: [jsx$1(Text$1, __assign$1({ color: theme.colors.shades['700'].color }, { children: scrollToTopText }), void 0), jsx$1(Icon$1, { width: 1.375, height: 1.375, fill: fillValue }, void 0)] }), void 0));
|
|
18923
18923
|
};
|
|
18924
18924
|
var templateObject_1$N, templateObject_2$A;
|
|
18925
18925
|
|
|
@@ -18952,7 +18952,7 @@ var Input = newStyled.input(function (props) { return ({
|
|
|
18952
18952
|
},
|
|
18953
18953
|
}); });
|
|
18954
18954
|
|
|
18955
|
-
var Container$
|
|
18955
|
+
var Container$x = newStyled.div(templateObject_1$M || (templateObject_1$M = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n width: auto;\n padding: 0.688rem 0rem;\n ", ",\n"], ["\n display: flex;\n flex-direction: row;\n width: auto;\n padding: 0.688rem 0rem;\n ", ",\n"])), mediaQueries({
|
|
18956
18956
|
borderTop: ['0.063rem solid var(--colors-shades-100-color)', 'none'],
|
|
18957
18957
|
}));
|
|
18958
18958
|
var Description = newStyled.div({
|
|
@@ -18969,18 +18969,18 @@ var Description = newStyled.div({
|
|
|
18969
18969
|
var ProductItem = function (_a) {
|
|
18970
18970
|
var src = _a.src, title = _a.title, price = _a.price;
|
|
18971
18971
|
var theme = useTheme();
|
|
18972
|
-
return (jsxs$1(Container$
|
|
18972
|
+
return (jsxs$1(Container$x, __assign$1({ theme: theme }, { children: [jsx$1(Image$3, { src: src, alt: "", width: "4.063rem", height: "5.375rem" }, void 0), jsxs$1(Description, { children: [jsx$1(Text$7, __assign$1({ variant: "body", weight: "regular", size: "regular" }, { children: jsx$1("div", { dangerouslySetInnerHTML: { __html: title } }, void 0) }), void 0), jsx$1(PriceLabel$1, { finalPrice: price, color: "#C64844", size: ComponentSize.Small }, void 0)] }, void 0)] }), void 0));
|
|
18973
18973
|
};
|
|
18974
18974
|
var templateObject_1$M;
|
|
18975
18975
|
|
|
18976
|
-
var Container$
|
|
18976
|
+
var Container$w = newStyled.div({
|
|
18977
18977
|
display: 'flex',
|
|
18978
18978
|
justifyContent: 'center',
|
|
18979
18979
|
padding: '1rem',
|
|
18980
18980
|
});
|
|
18981
18981
|
var Footer = function (_a) {
|
|
18982
18982
|
var text = _a.text, onClick = _a.onClick;
|
|
18983
|
-
return (jsx$1(Container$
|
|
18983
|
+
return (jsx$1(Container$w, { children: jsx$1(Text$7, __assign$1({ variant: "link", size: "regular", underline: true, onClick: onClick }, { children: text }), void 0) }, void 0));
|
|
18984
18984
|
};
|
|
18985
18985
|
|
|
18986
18986
|
var Ul = newStyled.ul({
|
|
@@ -18999,7 +18999,7 @@ var Anchor = newStyled.a({
|
|
|
18999
18999
|
padding: 0,
|
|
19000
19000
|
textDecoration: 'none',
|
|
19001
19001
|
});
|
|
19002
|
-
var Container$
|
|
19002
|
+
var Container$v = newStyled.div(templateObject_2$z || (templateObject_2$z = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n margin: 0rem;\n padding: 0rem;\n position: absolute;\n width: 100%;\n background-color: white;\n box-sizing: border-box;\n z-index: 2;\n ", ",\n"], ["\n display: flex;\n flex-direction: column;\n margin: 0rem;\n padding: 0rem;\n position: absolute;\n width: 100%;\n background-color: white;\n box-sizing: border-box;\n z-index: 2;\n ", ",\n"])), mediaQueries({
|
|
19003
19003
|
border: ['none', '0.063rem solid var(--colors-pallete-secondary-color)'],
|
|
19004
19004
|
marginTop: ['1.25rem', '0.125rem'],
|
|
19005
19005
|
borderRadius: ['0', '0.5rem'],
|
|
@@ -19010,7 +19010,7 @@ var Header$2 = newStyled.div(templateObject_3$v || (templateObject_3$v = __makeT
|
|
|
19010
19010
|
var ResultsPanel = function (_a) {
|
|
19011
19011
|
var options = _a.options, header = _a.header, footer = _a.footer, onViewAll = _a.onViewAll, testId = _a.testId;
|
|
19012
19012
|
var theme = useTheme();
|
|
19013
|
-
return (jsxs$1(Container$
|
|
19013
|
+
return (jsxs$1(Container$v, __assign$1({ "data-testid": testId, theme: theme }, { children: [header && (jsx$1(Header$2, __assign$1({ theme: theme }, { children: jsx$1(Text$7, __assign$1({ variant: "heading6", weight: "demi" }, { children: header }), void 0) }), void 0)), jsx$1(Ul, { children: options.map(function (item, index) { return (jsx$1(Li, __assign$1({ theme: theme }, { children: jsx$1(Anchor, __assign$1({ href: item.optionUrl }, { children: jsx$1(ProductItem, { src: item.src, title: item.title, price: item.price }, void 0) }), void 0) }), index)); }) }, void 0), footer && jsx$1(Footer, { text: footer, onClick: onViewAll }, void 0)] }), void 0));
|
|
19014
19014
|
};
|
|
19015
19015
|
var templateObject_1$L, templateObject_2$z, templateObject_3$v;
|
|
19016
19016
|
|
|
@@ -19065,7 +19065,7 @@ var reducer = function (state, action) {
|
|
|
19065
19065
|
}
|
|
19066
19066
|
}
|
|
19067
19067
|
};
|
|
19068
|
-
var Container$
|
|
19068
|
+
var Container$u = newStyled.div({
|
|
19069
19069
|
position: 'relative',
|
|
19070
19070
|
display: 'flex',
|
|
19071
19071
|
});
|
|
@@ -19105,7 +19105,7 @@ var SearchBar = function (_a) {
|
|
|
19105
19105
|
if (e.cancelable) {
|
|
19106
19106
|
e.preventDefault();
|
|
19107
19107
|
}
|
|
19108
|
-
}, ref: ref, style: { position: 'relative' } }, { children: [jsxs$1(Container$
|
|
19108
|
+
}, ref: ref, style: { position: 'relative' } }, { children: [jsxs$1(Container$u, __assign$1({ theme: theme }, { children: [jsx$1(Input, { value: state.term, placeholder: placeholder, onChange: function (e) { return dispatch({ type: 'UPDATE_TERM', payload: { term: e.target.value } }); }, onFocus: function () { return dispatch({ type: 'TOGGLE_PANEL', payload: { open: true } }); }, id: id, autoComplete: autoComplete, theme: theme, "aria-label": ariaLabel, onKeyDown: function (e) {
|
|
19109
19109
|
if (e.key === 'Enter') {
|
|
19110
19110
|
if (e.cancelable) {
|
|
19111
19111
|
e.preventDefault();
|
|
@@ -19116,20 +19116,20 @@ var SearchBar = function (_a) {
|
|
|
19116
19116
|
} }, void 0), jsx$1(SearchControl, { showSearchIcon: isBlogSearchBar, open: state.open, onClose: handleOnClose, onSearch: function () { return onSearch(state.term); } }, void 0)] }), void 0), state.open && !!options.length && (jsx$1(ResultsPanel, { testId: resultsPanelDataTestId, options: options, header: shouldDisplaySuggestion() ? 'Most popular products' : undefined, footer: allResults ? "View all results (".concat(allResults, ")") : undefined, onViewAll: function () { return onSearch(state.term); } }, void 0))] }), void 0));
|
|
19117
19117
|
};
|
|
19118
19118
|
|
|
19119
|
-
var Container$
|
|
19119
|
+
var Container$t = newStyled.div(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["\n display: flex;\n flex-wrap: wrap;\n padding: 0 1rem 1rem;\n"], ["\n display: flex;\n flex-wrap: wrap;\n padding: 0 1rem 1rem;\n"])));
|
|
19120
19120
|
var BackArrow = newStyled.div(templateObject_2$y || (templateObject_2$y = __makeTemplateObject(["\n transform: rotate(180deg);\n margin-right: 0.5rem;\n"], ["\n transform: rotate(180deg);\n margin-right: 0.5rem;\n"])));
|
|
19121
19121
|
var BoldSpan = newStyled.span(templateObject_3$u || (templateObject_3$u = __makeTemplateObject(["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 600;\n"], ["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 600;\n"])));
|
|
19122
19122
|
var NormalSpan = newStyled.span(templateObject_4$o || (templateObject_4$o = __makeTemplateObject(["\n font-size: 0.875rem;\n line-height: 1.375rem;\n white-space: pre;\n"], ["\n font-size: 0.875rem;\n line-height: 1.375rem;\n white-space: pre;\n"])));
|
|
19123
19123
|
var SearchNavigationParents = newStyled.div(templateObject_5$i || (templateObject_5$i = __makeTemplateObject(["\n display: flex;\n flex-wrap: wrap;\n padding-left: 1.25rem;\n padding-right: 1rem;\n"], ["\n display: flex;\n flex-wrap: wrap;\n padding-left: 1.25rem;\n padding-right: 1rem;\n"])));
|
|
19124
19124
|
var SearchNavigation = function (_a) {
|
|
19125
19125
|
var returnText = _a.returnText, returnUrl = _a.returnUrl, _b = _a.steps, steps = _b === void 0 ? [] : _b, returnAction = _a.returnAction;
|
|
19126
|
-
return (jsxs$1(Container$
|
|
19126
|
+
return (jsxs$1(Container$t, { children: [jsxs$1(Text$7, __assign$1({ variant: "link", style: { display: 'flex', justifyContent: 'center' }, href: returnUrl || '/', onClick: returnAction }, { children: [jsx$1(BackArrow, { children: jsx$1(Icon.Arrows.ChevronRightVariant, { width: 1.375, height: 1.375 }, void 0) }, void 0), returnText && jsx$1(BoldSpan, { children: returnText }, void 0)] }), void 0), jsx$1(SearchNavigationParents, { children: steps.map(function (step, index) {
|
|
19127
19127
|
return index === steps.length - 1 ? (jsx$1(BoldSpan, { children: step }, step)) : (jsx$1(NormalSpan, { children: "".concat(step, " / ") }, step));
|
|
19128
19128
|
}) }, void 0)] }, void 0));
|
|
19129
19129
|
};
|
|
19130
19130
|
var templateObject_1$I, templateObject_2$y, templateObject_3$u, templateObject_4$o, templateObject_5$i;
|
|
19131
19131
|
|
|
19132
|
-
var Container$
|
|
19132
|
+
var Container$s = newStyled.div(templateObject_1$H || (templateObject_1$H = __makeTemplateObject(["\n ", "\n display: flex;\n flex-direction: column;\n padding: 0px 0px 5px;\n width: ", ";\n background: ", ";\n color: ", ";\n border: ", ";\n"], ["\n ", "\n display: flex;\n flex-direction: column;\n padding: 0px 0px 5px;\n width: ", ";\n background: ", ";\n color: ", ";\n border: ", ";\n"])), function (_a) {
|
|
19133
19133
|
var alignCenter = _a.alignCenter;
|
|
19134
19134
|
return alignCenter &&
|
|
19135
19135
|
"\n justify-content: center;\n align-items: center;\n text-align: center;\n ";
|
|
@@ -19144,7 +19144,7 @@ var BannerText = newStyled.div(templateObject_3$t || (templateObject_3$t = __mak
|
|
|
19144
19144
|
var ShortBanner = function (_a) {
|
|
19145
19145
|
var textColor = _a.textColor, title = _a.title, bannerText = _a.bannerText, backgroundColor = _a.backgroundColor, _b = _a.alignCenter, alignCenter = _b === void 0 ? false : _b, _c = _a.widthAuto, widthAuto = _c === void 0 ? true : _c;
|
|
19146
19146
|
var theme = useTheme();
|
|
19147
|
-
return (jsxs$1(Container$
|
|
19147
|
+
return (jsxs$1(Container$s, __assign$1({ backgroundColor: backgroundColor, alignCenter: alignCenter, widthAuto: widthAuto, "data-testid": "BannerContainer", theme: theme, textColor: textColor }, { children: [jsx$1(TitleText, { children: title }, void 0), jsx$1(BannerText, { children: bannerText }, void 0)] }), void 0));
|
|
19148
19148
|
};
|
|
19149
19149
|
var templateObject_1$H, templateObject_2$x, templateObject_3$t;
|
|
19150
19150
|
|
|
@@ -19154,7 +19154,7 @@ var TableHead$3 = newStyled.th(templateObject_3$s || (templateObject_3$s = __mak
|
|
|
19154
19154
|
var Label$2 = newStyled('div')(templateObject_4$n || (templateObject_4$n = __makeTemplateObject(["\n gap: 15px;\n width: 100%;\n display: flex;\n font-size: 14px;\n font-weight: 600;\n align-items: center;\n justify-content: center;\n"], ["\n gap: 15px;\n width: 100%;\n display: flex;\n font-size: 14px;\n font-weight: 600;\n align-items: center;\n justify-content: center;\n"])));
|
|
19155
19155
|
var TopLabel$1 = newStyled(Label$2)(templateObject_5$h || (templateObject_5$h = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
19156
19156
|
var LeftLabel$1 = newStyled(Label$2)(templateObject_6$g || (templateObject_6$g = __makeTemplateObject(["\n width: 20px;\n transform: rotate(270deg);\n"], ["\n width: 20px;\n transform: rotate(270deg);\n"])));
|
|
19157
|
-
var Container$
|
|
19157
|
+
var Container$r = newStyled('div')(templateObject_7$e || (templateObject_7$e = __makeTemplateObject(["\n gap: 5px;\n display: flex;\n width: fit-content;\n align-items: center;\n"], ["\n gap: 5px;\n display: flex;\n width: fit-content;\n align-items: center;\n"])));
|
|
19158
19158
|
var LabelText$1 = newStyled('span')(templateObject_8$a || (templateObject_8$a = __makeTemplateObject(["\n display: flex;\n min-width: 70px;\n justify-content: center;\n"], ["\n display: flex;\n min-width: 70px;\n justify-content: center;\n"])));
|
|
19159
19159
|
var Column$2 = newStyled('div')(templateObject_9$7 || (templateObject_9$7 = __makeTemplateObject(["\n display: flex;\n min-width: 675px;\n align-items: center;\n flex-direction: column;\n\n @media (max-width: 768px) {\n min-width: 100%;\n }\n"], ["\n display: flex;\n min-width: 675px;\n align-items: center;\n flex-direction: column;\n\n @media (max-width: 768px) {\n min-width: 100%;\n }\n"])));
|
|
19160
19160
|
var TableRow$3 = newStyled.tr(templateObject_10$6 || (templateObject_10$6 = __makeTemplateObject(["\n &:last-child {\n td {\n border-bottom: none;\n }\n }\n\n &.background {\n background-color: ", ";\n }\n"], ["\n &:last-child {\n td {\n border-bottom: none;\n }\n }\n\n &.background {\n background-color: ", ";\n }\n"])), function (props) { return props.backgroundColor; });
|
|
@@ -19194,7 +19194,7 @@ var SizeChartTable = function (_a) {
|
|
|
19194
19194
|
var theme = useTheme();
|
|
19195
19195
|
var _d = (_c = (_b = headers === null || headers === void 0 ? void 0 : headers[0]) === null || _b === void 0 ? void 0 : _b.split('/')) !== null && _c !== void 0 ? _c : [], xLabel = _d[0], yLabel = _d[1];
|
|
19196
19196
|
var isMultilabel = xLabel && yLabel;
|
|
19197
|
-
return (jsxs$1(Container$
|
|
19197
|
+
return (jsxs$1(Container$r, { children: [isMultilabel && (jsxs$1(LeftLabel$1, { children: [jsx$1(Icon.Arrows.ChevronLeftVariant, {}, void 0), jsx$1(LabelText$1, { children: xLabel }, void 0), jsx$1(Icon.Arrows.ChevronRightVariant, {}, void 0)] }, void 0)), jsxs$1(Column$2, { children: [isMultilabel && (jsxs$1(TopLabel$1, { children: [jsx$1(Icon.Arrows.ChevronLeftVariant, {}, void 0), jsx$1(LabelText$1, { children: yLabel }, void 0), jsx$1(Icon.Arrows.ChevronRightVariant, {}, void 0)] }, void 0)), jsxs$1(TableElement$3, __assign$1({ color: theme.colors.shades['700'].color, borderColor: theme.colors.shades['100'].color }, { children: [jsx$1("thead", __assign$1({ style: { backgroundColor: newSizeTableCss ? '#f6f0e7' : '' } }, { children: jsx$1(TableRow$3, __assign$1({ backgroundColor: theme.colors.shades['10'].color }, { children: headers === null || headers === void 0 ? void 0 : headers.map(function (header, index) { return (jsx$1(TableHead$3, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: !(index === 0 && isMultilabel) && header }), index)); }) }), void 0) }), void 0), newSizeTableCss ? (jsx$1("tbody", { children: tableContent === null || tableContent === void 0 ? void 0 : tableContent.map(function (row, index) { return (jsx$1("tr", { children: row === null || row === void 0 ? void 0 : row.map(function (cell, index) { return (jsx$1(TableCell$3, __assign$1({ style: {
|
|
19198
19198
|
backgroundColor: getCellColor$2(index, cell),
|
|
19199
19199
|
}, borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }, index)); }) }, void 0)) : (jsx$1("tbody", { children: tableContent === null || tableContent === void 0 ? void 0 : tableContent.map(function (row, index) { return (jsx$1(TableRow$3, __assign$1({ className: getIsOdd$2(index) ? 'background' : '', backgroundColor: theme.colors.shades['10'].color }, { children: row === null || row === void 0 ? void 0 : row.map(function (cell, index) { return (jsx$1(TableCell$3, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }), index)); }) }, void 0))] }), void 0)] }, void 0)] }, void 0));
|
|
19200
19200
|
};
|
|
@@ -19253,12 +19253,12 @@ var TextButton = function (_a) {
|
|
|
19253
19253
|
};
|
|
19254
19254
|
var templateObject_1$E;
|
|
19255
19255
|
|
|
19256
|
-
var Container$
|
|
19256
|
+
var Container$q = newStyled.div(templateObject_1$D || (templateObject_1$D = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n font-size: 0.88rem;\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n font-size: 0.88rem;\n"])));
|
|
19257
19257
|
var P = newStyled.p(templateObject_2$u || (templateObject_2$u = __makeTemplateObject(["\n margin: 0;\n"], ["\n margin: 0;\n"])));
|
|
19258
19258
|
var PercentageSpan = newStyled.span(templateObject_3$q || (templateObject_3$q = __makeTemplateObject(["\n font-weight: 700;\n text-decoration-line: underline;\n cursor: pointer;\n"], ["\n font-weight: 700;\n text-decoration-line: underline;\n cursor: pointer;\n"])));
|
|
19259
19259
|
var SizeFitGuide = function (_a) {
|
|
19260
19260
|
var title = _a.title, fitPercentage = _a.fitPercentage, onClick = _a.onClick, onClickFitPercentage = _a.onClickFitPercentage, _b = _a.hideIcon, hideIcon = _b === void 0 ? false : _b;
|
|
19261
|
-
return (jsxs$1(Container$
|
|
19261
|
+
return (jsxs$1(Container$q, { children: [jsx$1(TextButton, { LeadingIcon: hideIcon ? undefined : Icon.PDP.Rule, size: ComponentSize.Small, text: title, onClick: onClick, uppercase: false }, void 0), !!fitPercentage && (jsxs$1(P, { children: ["Fit As Expected:", ' ', jsxs$1(PercentageSpan, __assign$1({ onClick: onClickFitPercentage, role: "button" }, { children: [fitPercentage, "%"] }), void 0)] }, void 0))] }, void 0));
|
|
19262
19262
|
};
|
|
19263
19263
|
var templateObject_1$D, templateObject_2$u, templateObject_3$q;
|
|
19264
19264
|
|
|
@@ -19308,7 +19308,7 @@ var Tab = function (_a) {
|
|
|
19308
19308
|
};
|
|
19309
19309
|
var templateObject_1$B;
|
|
19310
19310
|
|
|
19311
|
-
var Container$
|
|
19311
|
+
var Container$p = newStyled.div(templateObject_1$A || (templateObject_1$A = __makeTemplateObject(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
|
|
19312
19312
|
var TabList = newStyled.div(templateObject_2$s || (templateObject_2$s = __makeTemplateObject(["\n background-color: ", ";\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n padding: 0 25px;\n ", ";\n"], ["\n background-color: ", ";\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n padding: 0 25px;\n ", ";\n"])), function (_a) {
|
|
19313
19313
|
var backgroundColor = _a.backgroundColor;
|
|
19314
19314
|
return backgroundColor;
|
|
@@ -19326,14 +19326,14 @@ var Tabs = function (_a) {
|
|
|
19326
19326
|
return null;
|
|
19327
19327
|
}
|
|
19328
19328
|
var selectedContent = (_b = tabs.find(function (tab) { return tab.title === selectedTab; })) === null || _b === void 0 ? void 0 : _b.content;
|
|
19329
|
-
return (jsxs$1(Container$
|
|
19329
|
+
return (jsxs$1(Container$p, __assign$1({ "data-testid": "tabs-container" }, { children: [jsx$1(TabList, __assign$1({ backgroundColor: backgroundColor, borderColor: fixedBorderColor }, { children: tabs.map(function (tab, index) { return (jsxs$1(React__default.Fragment, { children: [jsx$1(Tab, { title: tab.title, selected: selectedTab === tab.title, onClick: setSelectedTab, tabsMaxWidth: tabsMaxWidth, color: selectedBorderColor }, tab.title), index + 1 < tabs.length && jsx$1(TabSeparator, { children: "|" }, void 0)] }, tab.title)); }) }), void 0), jsx$1(TabContent, __assign$1({ "data-testid": "tab-content" }, { children: selectedContent }), void 0)] }), void 0));
|
|
19330
19330
|
};
|
|
19331
19331
|
var templateObject_1$A, templateObject_2$s, templateObject_3$p, templateObject_4$l;
|
|
19332
19332
|
|
|
19333
|
-
var Container$
|
|
19333
|
+
var Container$o = newStyled.div(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n width: fit-content;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n width: fit-content;\n"])));
|
|
19334
19334
|
var Tag = function (_a) {
|
|
19335
19335
|
var text = _a.text, className = _a.className;
|
|
19336
|
-
return jsx$1(Container$
|
|
19336
|
+
return jsx$1(Container$o, __assign$1({ className: className }, { children: text }), void 0);
|
|
19337
19337
|
};
|
|
19338
19338
|
var templateObject_1$z;
|
|
19339
19339
|
|
|
@@ -19472,7 +19472,7 @@ var templateObject_1$y, templateObject_2$r, templateObject_3$o;
|
|
|
19472
19472
|
|
|
19473
19473
|
var ContainerDesktop = css(templateObject_1$x || (templateObject_1$x = __makeTemplateObject(["\n flex: 0 0 50%;\n justify-content: space-around;\n height: 574px;\n"], ["\n flex: 0 0 50%;\n justify-content: space-around;\n height: 574px;\n"])));
|
|
19474
19474
|
var ContainerMobile = css(templateObject_2$q || (templateObject_2$q = __makeTemplateObject(["\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 16px;\n height: auto;\n @media (max-width: 768px) {\n max-height: fit-content;\n padding: 50px 15px;\n }\n"], ["\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 16px;\n height: auto;\n @media (max-width: 768px) {\n max-height: fit-content;\n padding: 50px 15px;\n }\n"])));
|
|
19475
|
-
var Container$
|
|
19475
|
+
var Container$n = newStyled.div(templateObject_3$n || (templateObject_3$n = __makeTemplateObject(["\n padding: 60px 34px 40px 34px;\n display: flex;\n @media (min-width: 769px) {\n ", "\n }\n @media (max-width: 768px) {\n ", "\n }\n"], ["\n padding: 60px 34px 40px 34px;\n display: flex;\n @media (min-width: 769px) {\n ", "\n }\n @media (max-width: 768px) {\n ", "\n }\n"])), ContainerDesktop, ContainerMobile);
|
|
19476
19476
|
var TextContainer = newStyled.div(templateObject_4$k || (templateObject_4$k = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 0 15px;\n gap: 24px;\n text-align: center;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 0 15px;\n gap: 24px;\n text-align: center;\n"])));
|
|
19477
19477
|
var TextWithImage = function (_a) {
|
|
19478
19478
|
var _b, _c, _d, _e;
|
|
@@ -19493,7 +19493,7 @@ var TextWithImage = function (_a) {
|
|
|
19493
19493
|
// @ts-ignore
|
|
19494
19494
|
props.isRedirectionURL ? (window.location.href = props.URLLink) : props.onButtonClick();
|
|
19495
19495
|
};
|
|
19496
|
-
return (jsxs(Container$
|
|
19496
|
+
return (jsxs(Container$n, __assign$1({ style: { backgroundColor: backgroundColor } }, { children: [isMobile && jsx(ImageTitle, {}, void 0), (imageLeftSide || isMobile) && (jsx(ImageVideo, { imageLink: (_b = props.imgVideo) === null || _b === void 0 ? void 0 : _b.imageLink, isMobile: isMobile, isVideo: (_c = props.imgVideo) === null || _c === void 0 ? void 0 : _c.isVideo }, void 0)), jsxs(TextContainer, { children: [!isMobile && jsx(ImageTitle, {}, void 0), jsx(Text$7, __assign$1({ variant: "body", weight: "regular", style: textStyle ? textStyle : { maxWidth: '450px' } }, { children: text }), void 0), children, jsx(BaseCTA, { text: buttomText, size: ComponentSize.Medium, wide: isMobile && buttonWideOnMobile, onClick: buttonAction, testId: buttomText, css: {
|
|
19497
19497
|
backgroundColor: props.btnBGColor,
|
|
19498
19498
|
color: '#ffffff',
|
|
19499
19499
|
border: props.btnBGColor,
|
|
@@ -19624,11 +19624,11 @@ var Currency = newStyled.span(templateObject_3$k || (templateObject_3$k = __make
|
|
|
19624
19624
|
var theme = _a.theme;
|
|
19625
19625
|
return theme.component.total.basicTotal.currency.alignSelf;
|
|
19626
19626
|
});
|
|
19627
|
-
var Container$
|
|
19627
|
+
var Container$m = newStyled.div(templateObject_4$h || (templateObject_4$h = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n width: 100%;\n margin-top: 0.625rem;\n color: ", ";\n align-items: center;\n"], ["\n display: flex;\n justify-content: space-between;\n width: 100%;\n margin-top: 0.625rem;\n color: ", ";\n align-items: center;\n"])), function (_a) {
|
|
19628
19628
|
var highlightColor = _a.highlightColor;
|
|
19629
19629
|
return highlightColor;
|
|
19630
19630
|
});
|
|
19631
|
-
var TotalContainer = newStyled(Container$
|
|
19631
|
+
var TotalContainer = newStyled(Container$m)(templateObject_5$f || (templateObject_5$f = __makeTemplateObject(["\n justify-content: ", ";\n margin-top: 0;\n"], ["\n justify-content: ", ";\n margin-top: 0;\n"])), function (_a) {
|
|
19632
19632
|
var showTotalLabel = _a.showTotalLabel;
|
|
19633
19633
|
return (showTotalLabel ? 'space-between' : 'flex-end');
|
|
19634
19634
|
});
|
|
@@ -19643,7 +19643,7 @@ var templateObject_1$u, templateObject_2$n, templateObject_3$k, templateObject_4
|
|
|
19643
19643
|
var Total = function (_a) {
|
|
19644
19644
|
var total = _a.total, currency = _a.currency, saving = _a.saving, _b = _a.highlightColor, highlightColor = _b === void 0 ? '#2f806a' : _b, _c = _a.showTotalLabel, showTotalLabel = _c === void 0 ? false : _c;
|
|
19645
19645
|
var theme = useTheme();
|
|
19646
|
-
return (jsxs$1(Wrapper$1, __assign$1({ "data-testid": "total-wrapper" }, { children: [jsxs$1(TotalContainer, __assign$1({ showTotalLabel: showTotalLabel }, { children: [showTotalLabel && (jsx$1(TotalLabel, __assign$1({ variant: "heading6", size: "regular", weight: "bold" }, { children: "Total" }), void 0)), jsxs$1(GrandTotal, __assign$1({ color: theme.component.total.basicTotal.amount.color, "data-testid": "total-price" }, { children: [jsx$1(Currency, { children: currency }, void 0), total] }), void 0)] }), void 0), saving && (jsxs$1(Container$
|
|
19646
|
+
return (jsxs$1(Wrapper$1, __assign$1({ "data-testid": "total-wrapper" }, { children: [jsxs$1(TotalContainer, __assign$1({ showTotalLabel: showTotalLabel }, { children: [showTotalLabel && (jsx$1(TotalLabel, __assign$1({ variant: "heading6", size: "regular", weight: "bold" }, { children: "Total" }), void 0)), jsxs$1(GrandTotal, __assign$1({ color: theme.component.total.basicTotal.amount.color, "data-testid": "total-price" }, { children: [jsx$1(Currency, { children: currency }, void 0), total] }), void 0)] }), void 0), saving && (jsxs$1(Container$m, __assign$1({ "data-testid": "subtotal-container", highlightColor: highlightColor }, { children: [jsx$1(DiscountText, __assign$1({ "data-testid": "saving-title" }, { children: saving.savingText }), void 0), jsx$1(DiscountAmount, __assign$1({ "data-testid": "saving-price" }, { children: saving.amount }), void 0)] }), void 0))] }), void 0));
|
|
19647
19647
|
};
|
|
19648
19648
|
|
|
19649
19649
|
var Wrapper = newStyled.div(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
@@ -19678,7 +19678,7 @@ var Totals = {
|
|
|
19678
19678
|
Subtotal: Subtotal,
|
|
19679
19679
|
};
|
|
19680
19680
|
|
|
19681
|
-
var Container$
|
|
19681
|
+
var Container$l = newStyled.div(templateObject_1$s || (templateObject_1$s = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
19682
19682
|
var CheckpointContainer$1 = newStyled.div(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
19683
19683
|
var CheckpointDate$1 = newStyled.div(templateObject_3$i || (templateObject_3$i = __makeTemplateObject(["\n display: flex;\n justify-content: flex-start;\n flex-direction: column;\n padding-bottom: ", ";\n width: 60px;\n min-width: 60px;\n margin-right: 10px;\n"], ["\n display: flex;\n justify-content: flex-start;\n flex-direction: column;\n padding-bottom: ", ";\n width: 60px;\n min-width: 60px;\n margin-right: 10px;\n"])), function (props) { return props.currentSpace; });
|
|
19684
19684
|
var CheckpointDateLabel$1 = newStyled.p(templateObject_4$f || (templateObject_4$f = __makeTemplateObject(["\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n font-weight: ", ";\n"], ["\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n font-weight: ", ";\n"])), function (props) { return (props.lastElement ? '600' : '400'); });
|
|
@@ -19719,7 +19719,7 @@ var TrackingProgressV2 = function (_a) {
|
|
|
19719
19719
|
}
|
|
19720
19720
|
return '30px';
|
|
19721
19721
|
};
|
|
19722
|
-
return (jsxs$1(Container$
|
|
19722
|
+
return (jsxs$1(Container$l, __assign$1({ "data-testid": "tracking-progress" }, { children: [checkPoints.map(function (_a, index) {
|
|
19723
19723
|
var day = _a.day, date = _a.date, statusMessage = _a.statusMessage;
|
|
19724
19724
|
return (jsxs$1(CheckpointContainer$1, __assign$1({ "data-testid": "checkpoint-track" }, { children: [jsx$1(CheckpointDate$1, __assign$1({ currentSpace: getCurrentSpace(index) }, { children: !resumedStyle && (jsxs$1(Fragment$2, { children: [jsx$1(CheckpointDateLabel$1, __assign$1({ lastElement: index + 1 === checkPoints.length }, { children: day }), void 0), jsx$1(CheckpointDateLabel$1, __assign$1({ lastElement: index + 1 === checkPoints.length }, { children: date }), void 0)] }, void 0)) }), void 0), index + 1 !== checkPoints.length && (jsx$1(ActiveCheckpointTrack$1, __assign$1({ trackColor: fillSpaces
|
|
19725
19725
|
? activeCheckpointColor
|
|
@@ -19732,7 +19732,7 @@ var TrackingProgressV2 = function (_a) {
|
|
|
19732
19732
|
};
|
|
19733
19733
|
var templateObject_1$s, templateObject_2$l, templateObject_3$i, templateObject_4$f, templateObject_5$e, templateObject_6$d, templateObject_7$c, templateObject_8$8, templateObject_9$6, templateObject_10$5, templateObject_11$3;
|
|
19734
19734
|
|
|
19735
|
-
var Container$
|
|
19735
|
+
var Container$k = newStyled.div(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
19736
19736
|
var CheckpointContainer = newStyled.div(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
19737
19737
|
var CheckpointDate = newStyled.div(templateObject_3$h || (templateObject_3$h = __makeTemplateObject(["\n display: flex;\n justify-content: flex-start;\n flex-direction: column;\n padding-bottom: ", ";\n width: 60px;\n min-width: 60px;\n margin-right: 10px;\n"], ["\n display: flex;\n justify-content: flex-start;\n flex-direction: column;\n padding-bottom: ", ";\n width: 60px;\n min-width: 60px;\n margin-right: 10px;\n"])), function (props) { return props.currentSpace; });
|
|
19738
19738
|
var CheckpointDateLabel = newStyled.p(templateObject_4$e || (templateObject_4$e = __makeTemplateObject(["\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n font-weight: ", ";\n"], ["\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n font-weight: ", ";\n"])), function (props) { return (props.lastElement ? '600' : '400'); });
|
|
@@ -19761,7 +19761,7 @@ var TrackingProgress = function (_a) {
|
|
|
19761
19761
|
}
|
|
19762
19762
|
return '30px';
|
|
19763
19763
|
};
|
|
19764
|
-
return (jsxs$1(Container$
|
|
19764
|
+
return (jsxs$1(Container$k, __assign$1({ "data-testid": "tracking-progress" }, { children: [checkPoints.map(function (_a, index) {
|
|
19765
19765
|
var day = _a.day, date = _a.date, statusMessage = _a.statusMessage;
|
|
19766
19766
|
return (jsxs$1(CheckpointContainer, __assign$1({ "data-testid": "checkpoint-track" }, { children: [jsxs$1(CheckpointDate, __assign$1({ currentSpace: getCurrentSpace(index) }, { children: [jsx$1(CheckpointDateLabel, __assign$1({ lastElement: index + 1 === checkPoints.length }, { children: day }), void 0), jsx$1(CheckpointDateLabel, __assign$1({ lastElement: index + 1 === checkPoints.length }, { children: date }), void 0)] }), void 0), index + 1 !== checkPoints.length && (jsx$1(ActiveCheckpointTrack, __assign$1({ trackColor: fillSpaces
|
|
19767
19767
|
? theme.colors.semantic.informative.color
|
|
@@ -19963,7 +19963,7 @@ var StyledPrice$1 = newStyled(PriceLabelV2$1)(templateObject_10$4 || (templateOb
|
|
|
19963
19963
|
? ClubBorderColor
|
|
19964
19964
|
: Shades200Color;
|
|
19965
19965
|
});
|
|
19966
|
-
var Container$
|
|
19966
|
+
var Container$j = newStyled.div(templateObject_11$2 || (templateObject_11$2 = __makeTemplateObject(["\n margin-top: 20px;\n"], ["\n margin-top: 20px;\n"])));
|
|
19967
19967
|
var templateObject_1$n, templateObject_2$g, templateObject_3$e, templateObject_4$b, templateObject_5$a, templateObject_6$9, templateObject_7$8, templateObject_8$6, templateObject_9$5, templateObject_10$4, templateObject_11$2;
|
|
19968
19968
|
|
|
19969
19969
|
var ClubOfferSelector = function (_a) {
|
|
@@ -20003,7 +20003,7 @@ var ClubOfferSelector = function (_a) {
|
|
|
20003
20003
|
onChange(__assign$1({}, dataObj));
|
|
20004
20004
|
};
|
|
20005
20005
|
var isSelected = radioIds.clubOfferSelector.id === radioCheck.id;
|
|
20006
|
-
return (jsxs$1(Container$
|
|
20006
|
+
return (jsxs$1(Container$j, __assign$1({ className: className }, { children: [jsxs$1(SubscriptionContainer$1, __assign$1({ onClick: function () { return handleChange(radioIds.clubOfferSelector, 'radio'); }, "data-testid": "subscription-purchase-block", selected: isSelected }, { children: [jsx$1(DiscountTag$1, __assign$1({ isSelected: isSelected }, { children: discountLabel !== null && discountLabel !== void 0 ? discountLabel : "".concat(clubOfferPctOverListPriceRounded, "% OFF - SAVE ").concat(currencySymbol).concat(clubOfferSaving.toFixed(2)) }), void 0), jsxs$1(SubscriptionHeader$1, __assign$1({ isSelected: isSelected }, { children: [jsx$1(FlexContainer$1, { children: jsx$1(RadioInput, { label: subscriptionLabel, name: radioIds.clubOfferSelector.id, id: radioIds.clubOfferSelector.id, value: radioIds.clubOfferSelector.id, checked: isSelected, size: ComponentSize.Medium, style: {
|
|
20007
20007
|
marginRight: '10px',
|
|
20008
20008
|
}, labelStyle: {
|
|
20009
20009
|
color: ClubBorderColor,
|
|
@@ -20047,7 +20047,7 @@ var ImageContainer$1 = newStyled.div(function (_a) {
|
|
|
20047
20047
|
});
|
|
20048
20048
|
});
|
|
20049
20049
|
var ImageHoverContainer$1 = newStyled.img(templateObject_1$l || (templateObject_1$l = __makeTemplateObject(["\n opacity: 0;\n position: absolute;\n transition: all 0.4s ease-in-out;\n"], ["\n opacity: 0;\n position: absolute;\n transition: all 0.4s ease-in-out;\n"])));
|
|
20050
|
-
var Container$
|
|
20050
|
+
var Container$i = newStyled.a(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n text-decoration: none;\n\n &:hover .hover__image {\n opacity: 1;\n }\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n text-decoration: none;\n\n &:hover .hover__image {\n opacity: 1;\n }\n"])));
|
|
20051
20051
|
var ProdCardContainer$2 = newStyled.div(templateObject_3$c || (templateObject_3$c = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: min-content;\n text-decoration: none;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: min-content;\n text-decoration: none;\n"])));
|
|
20052
20052
|
var Title$2 = newStyled.p(templateObject_4$9 || (templateObject_4$9 = __makeTemplateObject(["\n font-size: 0.83rem;\n font-weight: normal;\n line-height: 1.375rem;\n min-height: 2.75rem;\n color: ", ";\n margin: 0.25rem 0;\n text-align: ", ";\n"], ["\n font-size: 0.83rem;\n font-weight: normal;\n line-height: 1.375rem;\n min-height: 2.75rem;\n color: ", ";\n margin: 0.25rem 0;\n text-align: ", ";\n"])), function (props) { return props.theme.colors.pallete.secondary.color; }, function (props) { return props.align; });
|
|
20053
20053
|
newStyled.div(templateObject_5$8 || (templateObject_5$8 = __makeTemplateObject(["\n position: absolute;\n left: 0;\n top: 0;\n width: ", ";\n z-index: 1;\n"], ["\n position: absolute;\n left: 0;\n top: 0;\n width: ", ";\n z-index: 1;\n"])), function (_a) {
|
|
@@ -20113,7 +20113,7 @@ var ProductCard = function (_a) {
|
|
|
20113
20113
|
_a[ComponentSize.Small] = 2,
|
|
20114
20114
|
_a)[size];
|
|
20115
20115
|
}, [size]);
|
|
20116
|
-
return (jsxs$1(ProdCardContainer$2, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs$1(Container$
|
|
20116
|
+
return (jsxs$1(ProdCardContainer$2, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs$1(Container$i, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', className: "picContainer", onClick: onClick }, { children: [!!topTag || !!bottomTag ? (jsxs$1(ImageContainer$1, __assign$1({ width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height, "data-testid": "tags-image-container" }, { children: [jsx$1(Image$3, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, width: "100%", height: "100%" }, void 0), jsx$1(TopTagContainer$6, __assign$1({ style: { width: 'inherit' } }, { children: topTag }), void 0), jsx$1(BottomTagContainer$6, __assign$1({ style: { width: 'inherit' } }, { children: bottomTag }), void 0)] }), void 0)) : (jsx$1(Image$3, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)), imageHover ? (jsx$1(ImageHoverContainer$1, { className: "hover__image", src: imageHover.src, srcSet: getSrcSet(imageHover.src, 180, 360, 720, 960), loading: "lazy", alt: imageHover.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)) : null] }), void 0), jsxs$1(Container$i, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', onClick: onClick, className: "textContainer", style: { alignItems: "".concat(size === ComponentSize.Small ? 'start' : 'center') } }, { children: [jsx$1(Spacing, { size: space }, void 0), ratingPos !== 'bottom' && (jsx$1(RatingDisplay, { rating: rating, size: size, isRatingLoading: isRatingLoading }, void 0)), jsx$1(Spacing, { size: space }, void 0), jsx$1(Title$2, __assign$1({ theme: theme, align: alignName }, { children: title }), void 0), jsx$1(Spacing, { size: space }, void 0), priceLoading ? (jsx$1(SkeletonBox, { height: "20px", width: "140px" }, void 0)) : (jsx$1(PriceLabelDisplay, { price: price, discountTag: discountTag }, void 0)), jsx$1(Spacing, { size: space }, void 0), ratingPos === 'bottom' && (jsx$1(RatingDisplay, { rating: rating, size: size, isRatingLoading: isRatingLoading }, void 0))] }), void 0)] }), void 0));
|
|
20117
20117
|
};
|
|
20118
20118
|
var templateObject_1$k;
|
|
20119
20119
|
|
|
@@ -20127,7 +20127,7 @@ var ImageContainer = newStyled.div(function (_a) {
|
|
|
20127
20127
|
});
|
|
20128
20128
|
var DiscountLabel$1 = newStyled.div(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n background-color: #c64844;\n color: white;\n font-size: 10px;\n line-height: 14px;\n padding: 4px 6px 4px 6px;\n font-weight: bold;\n border-radius: 4px;\n margin-top: 2px;\n height: fit-content;\n"], ["\n background-color: #c64844;\n color: white;\n font-size: 10px;\n line-height: 14px;\n padding: 4px 6px 4px 6px;\n font-weight: bold;\n border-radius: 4px;\n margin-top: 2px;\n height: fit-content;\n"])));
|
|
20129
20129
|
var ImageHoverContainer = newStyled.img(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n opacity: 0;\n position: absolute;\n transition: all 0.4s ease-in-out;\n"], ["\n opacity: 0;\n position: absolute;\n transition: all 0.4s ease-in-out;\n"])));
|
|
20130
|
-
var Container$
|
|
20130
|
+
var Container$h = newStyled.a(templateObject_3$b || (templateObject_3$b = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n width: 100%;\n text-decoration: none;\n\n &:hover .hover__image {\n opacity: 1;\n }\n"], ["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n width: 100%;\n text-decoration: none;\n\n &:hover .hover__image {\n opacity: 1;\n }\n"])));
|
|
20131
20131
|
var ProdCardContainer$1 = newStyled.div(templateObject_4$8 || (templateObject_4$8 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: min-content;\n text-decoration: none;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: min-content;\n text-decoration: none;\n"])));
|
|
20132
20132
|
var Title$1 = newStyled.p(templateObject_5$7 || (templateObject_5$7 = __makeTemplateObject(["\n font-size: 0.83rem;\n font-weight: normal;\n line-height: 1.375rem;\n min-height: 2.75rem;\n color: ", ";\n margin: 0.25rem 0;\n text-align: ", ";\n"], ["\n font-size: 0.83rem;\n font-weight: normal;\n line-height: 1.375rem;\n min-height: 2.75rem;\n color: ", ";\n margin: 0.25rem 0;\n text-align: ", ";\n"])), function (props) { return props.theme.colors.pallete.secondary.color; }, function (props) { return props.align; });
|
|
20133
20133
|
var TopTagContainer$5 = newStyled.div(templateObject_6$7 || (templateObject_6$7 = __makeTemplateObject(["\n position: absolute;\n left: 0;\n top: 0;\n width: ", ";\n z-index: 1;\n"], ["\n position: absolute;\n left: 0;\n top: 0;\n width: ", ";\n z-index: 1;\n"])), function (_a) {
|
|
@@ -20207,7 +20207,7 @@ var ProductCardV2 = function (_a) {
|
|
|
20207
20207
|
return jsx$1(Fragment$2, {}, void 0);
|
|
20208
20208
|
return (jsx$1(Rating, { size: size === ComponentSize.Large ? ComponentSize.Small : ComponentSize.XSmall, rating: rating.rating, reviews: rating.reviews, reviewsText: "", wrapWithParenthesis: true }, void 0));
|
|
20209
20209
|
};
|
|
20210
|
-
return (jsxs$1(ProdCardContainer$1, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs$1(Container$
|
|
20210
|
+
return (jsxs$1(ProdCardContainer$1, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs$1(Container$h, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', className: "picContainer", onClick: onClick }, { children: [!!topTag || !!bottomTag ? (jsxs$1(ImageContainer, __assign$1({ width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height, "data-testid": "tags-image-container" }, { children: [jsx$1(Image$3, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, width: "100%", height: "100%" }, void 0), jsx$1(TopTagContainer$5, __assign$1({ style: { width: 'inherit' } }, { children: topTag }), void 0), jsx$1(BottomTagContainer$5, __assign$1({ "data-testid": "bottom-tag-container", style: { width: 'inherit' } }, { children: bottomTag }), void 0)] }), void 0)) : (jsx$1(Image$3, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)), imageHover ? (jsx$1(ImageHoverContainer, { className: "hover__image", src: imageHover.src, srcSet: getSrcSet(imageHover.src, 180, 360, 720, 960), loading: "lazy", alt: imageHover.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)) : null] }), void 0), jsxs$1(Container$h, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', onClick: onClick, className: "textContainer" }, { children: [jsx$1(Spacing, { size: space }, void 0), jsx$1(Spacing, { size: space }, void 0), jsx$1(Spacing, { size: space }, void 0), jsx$1(Text$7, __assign$1({ variant: "link", underline: true }, { children: colorsCopy }), void 0), jsx$1(Spacing, { size: space }, void 0), jsx$1(Spacing, { size: space }, void 0), jsx$1(RatingDisplay, {}, void 0), jsx$1(Spacing, { size: space }, void 0), jsx$1(Title$1, __assign$1({ theme: theme, align: alignName }, { children: title }), void 0), jsxs$1("div", __assign$1({ style: {
|
|
20211
20211
|
display: 'flex',
|
|
20212
20212
|
alignItems: 'flex-start',
|
|
20213
20213
|
gap: '5px',
|
|
@@ -20225,7 +20225,7 @@ newStyled.div(function (_a) {
|
|
|
20225
20225
|
});
|
|
20226
20226
|
var DiscountLabel = newStyled.div(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n background-color: #c64844;\n color: white;\n font-size: 10px;\n line-height: 14px;\n padding: 4px 6px 4px 6px;\n font-weight: bold;\n border-radius: 4px;\n margin-top: 2px;\n height: fit-content;\n"], ["\n background-color: #c64844;\n color: white;\n font-size: 10px;\n line-height: 14px;\n padding: 4px 6px 4px 6px;\n font-weight: bold;\n border-radius: 4px;\n margin-top: 2px;\n height: fit-content;\n"])));
|
|
20227
20227
|
newStyled.img(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n opacity: 0;\n position: absolute;\n transition: all 0.4s ease-in-out;\n"], ["\n opacity: 0;\n position: absolute;\n transition: all 0.4s ease-in-out;\n"])));
|
|
20228
|
-
var Container$
|
|
20228
|
+
var Container$g = newStyled.a(templateObject_3$a || (templateObject_3$a = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n width: 100%;\n text-decoration: none;\n\n &:hover .hover__image {\n opacity: 1;\n }\n"], ["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n width: 100%;\n text-decoration: none;\n\n &:hover .hover__image {\n opacity: 1;\n }\n"])));
|
|
20229
20229
|
var ProdCardContainer = newStyled.div(templateObject_4$7 || (templateObject_4$7 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: flex-start;\n width: fit-content;\n text-decoration: none;\n"], ["\n display: flex;\n flex-direction: row;\n align-items: flex-start;\n width: fit-content;\n text-decoration: none;\n"])));
|
|
20230
20230
|
var Title = newStyled.p(templateObject_5$6 || (templateObject_5$6 = __makeTemplateObject(["\n font-size: 0.83rem;\n font-weight: normal;\n line-height: 1.375rem;\n min-height: 2.75rem;\n color: ", ";\n margin: 0.25rem 0;\n text-align: ", ";\n"], ["\n font-size: 0.83rem;\n font-weight: normal;\n line-height: 1.375rem;\n min-height: 2.75rem;\n color: ", ";\n margin: 0.25rem 0;\n text-align: ", ";\n"])), function (props) { return props.theme.colors.pallete.secondary.color; }, function (props) { return props.align; });
|
|
20231
20231
|
newStyled.div(templateObject_6$6 || (templateObject_6$6 = __makeTemplateObject(["\n position: absolute;\n left: 0;\n top: 0;\n width: ", ";\n z-index: 1;\n"], ["\n position: absolute;\n left: 0;\n top: 0;\n width: ", ";\n z-index: 1;\n"])), function (_a) {
|
|
@@ -20294,7 +20294,7 @@ var ProductCardV3 = function (_a) {
|
|
|
20294
20294
|
return jsx$1(Fragment$2, {}, void 0);
|
|
20295
20295
|
return (jsx$1(Rating, { size: size === ComponentSize.Large ? ComponentSize.Small : ComponentSize.XSmall, rating: rating.rating, reviews: rating.reviews, reviewsText: "", wrapWithParenthesis: true }, void 0));
|
|
20296
20296
|
};
|
|
20297
|
-
return (jsxs$1(ProdCardContainer, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsx$1(Container$
|
|
20297
|
+
return (jsxs$1(ProdCardContainer, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsx$1(Container$g, __assign$1({ "data-testid": "first-image-div", as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', className: "picContainer", onClick: onClick, style: { marginRight: '-90px' } }, { children: jsx$1(Image$3, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0) }), void 0), jsxs$1(Container$g, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', onClick: onClick, className: "textContainer" }, { children: [jsxs$1("div", __assign$1({ style: { display: 'flex', justifyContent: 'space-between' } }, { children: [jsx$1(Title, __assign$1({ theme: theme, align: alignName, style: { fontSize: '14px' } }, { children: title }), void 0), jsx$1("button", __assign$1({ "data-testid": "quick-eye-button", style: {
|
|
20298
20298
|
margin: '5x 0 0 45px',
|
|
20299
20299
|
backgroundColor: 'transparent',
|
|
20300
20300
|
border: 'none',
|
|
@@ -20344,7 +20344,7 @@ function usePreventVerticalScroll(ref, dragThreshold) {
|
|
|
20344
20344
|
}, [preventTouch, ref, touchStart]);
|
|
20345
20345
|
}
|
|
20346
20346
|
|
|
20347
|
-
var Container$
|
|
20347
|
+
var Container$f = newStyled.div(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n ", "\n position: relative;\n max-height: 524px;\n overflow: hidden;\n & .slick-dots li.slick-active button:before {\n background-color: ", ";\n }\n"], ["\n ", "\n position: relative;\n max-height: 524px;\n overflow: hidden;\n & .slick-dots li.slick-active button:before {\n background-color: ", ";\n }\n"])), function (_a) {
|
|
20348
20348
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
20349
20349
|
return borderRadiusVariant &&
|
|
20350
20350
|
"\n border-radius: 40px;\n ";
|
|
@@ -20414,7 +20414,7 @@ var ImageProductSlide = function (_a) {
|
|
|
20414
20414
|
}
|
|
20415
20415
|
}
|
|
20416
20416
|
}, [contents, selectedValue]);
|
|
20417
|
-
return (jsxs$1(Fragment$2, { children: [customClick && (jsx$1("div", __assign$1({ style: { display: 'flex', marginBottom: '20px', gap: '10px' } }, { children: contents.map(function (_, i) { return (jsx$1(ButtonPrimary, { onClick: function () { return onButtonClick(i); }, text: String(i + 1), inline: true }, i)); }) }), void 0)), jsx$1(Container$
|
|
20417
|
+
return (jsxs$1(Fragment$2, { children: [customClick && (jsx$1("div", __assign$1({ style: { display: 'flex', marginBottom: '20px', gap: '10px' } }, { children: contents.map(function (_, i) { return (jsx$1(ButtonPrimary, { onClick: function () { return onButtonClick(i); }, text: String(i + 1), inline: true }, i)); }) }), void 0)), jsx$1(Container$f, __assign$1({ "data-testid": testId, borderRadiusVariant: borderRadiusVariant, ref: sliderWrapper }, { children: jsx$1(Slider$1, __assign$1({ afterChange: function (e) {
|
|
20418
20418
|
var _a;
|
|
20419
20419
|
var activeSlide = contents[e];
|
|
20420
20420
|
// If autoplay is true and iframe is the active slide, play the video
|
|
@@ -20436,12 +20436,12 @@ var ImageProductSlide = function (_a) {
|
|
|
20436
20436
|
};
|
|
20437
20437
|
var templateObject_1$h, templateObject_2$b, templateObject_3$9, templateObject_4$6, templateObject_5$5, templateObject_6$5;
|
|
20438
20438
|
|
|
20439
|
-
var Container$
|
|
20439
|
+
var Container$e = newStyled.div(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n height: fit-content;\n position: relative;\n max-width: 450px;\n"], ["\n display: flex;\n flex-direction: column;\n height: fit-content;\n position: relative;\n max-width: 450px;\n"])));
|
|
20440
20440
|
var ProductGalleryMobile = function (_a) {
|
|
20441
20441
|
var images = _a.images, customClick = _a.customClick, topTag = _a.topTag, topRightTag = _a.topRightTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, _b = _a.borderRadiusVariant, borderRadiusVariant = _b === void 0 ? false : _b, selectedValue = _a.selectedValue, _c = _a.hasToPreserveOrder, hasToPreserveOrder = _c === void 0 ? false : _c, _d = _a.itemsOnViewport, itemsOnViewport = _d === void 0 ? 1 : _d;
|
|
20442
20442
|
var _e = useState(0), activeIndex = _e[0], setActiveIndex = _e[1];
|
|
20443
20443
|
var selectedContent = hasToPreserveOrder ? images === null || images === void 0 ? void 0 : images[activeIndex] : selectedValue;
|
|
20444
|
-
return (jsx$1(Container$
|
|
20444
|
+
return (jsx$1(Container$e, __assign$1({ "data-testid": "product-gallery-mobile-v1" }, { children: jsx$1(ImageProductSlide, { contents: images, customClick: customClick, topTag: topTag, topRightTag: topRightTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant, selectedValue: selectedContent, onChange: function (index) { return setActiveIndex(index); }, itemsOnViewport: itemsOnViewport }, void 0) }), void 0));
|
|
20445
20445
|
};
|
|
20446
20446
|
var templateObject_1$g;
|
|
20447
20447
|
|
|
@@ -20717,12 +20717,12 @@ var ArrowButton = function (_a) {
|
|
|
20717
20717
|
};
|
|
20718
20718
|
var templateObject_1$f;
|
|
20719
20719
|
|
|
20720
|
-
var Container$
|
|
20720
|
+
var Container$d = newStyled.div(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n position: absolute;\n bottom: 15px;\n display: flex;\n justify-content: center;\n width: 100%;\n svg {\n padding: 0.125rem;\n margin-left: 0.25rem;\n }\n"], ["\n position: absolute;\n bottom: 15px;\n display: flex;\n justify-content: center;\n width: 100%;\n svg {\n padding: 0.125rem;\n margin-left: 0.25rem;\n }\n"])));
|
|
20721
20721
|
var range = function (limit) { return __spreadArray([], new Array(limit), true).map(function (_, index) { return index; }); };
|
|
20722
20722
|
var SlideDots = function (_a) {
|
|
20723
20723
|
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, containerDataTestId = _a.containerDataTestId;
|
|
20724
20724
|
var theme = useTheme();
|
|
20725
|
-
return (jsx$1(Container$
|
|
20725
|
+
return (jsx$1(Container$d, __assign$1({ "data-testid": containerDataTestId }, { children: range(quantity).map(function (index) { return (jsx$1(Icon$1, { name: "navigation/slide_dot".concat(index === selectedIndex ? '_solid' : ''), height: 0.75, width: 0.75, fill: index === selectedIndex
|
|
20726
20726
|
? theme.component.slideNavigation.slideDots.selectedDotColor
|
|
20727
20727
|
: theme.component.slideNavigation.slideDots.unselectedDotColor, opacity: theme.component.slideNavigation.slideDots.dotsOpacity, testId: "slide-dot-".concat(index) }, "Icon-".concat(index, "-navigation/slide_dot").concat(index === selectedIndex ? '_solid' : ''))); }) }), void 0));
|
|
20728
20728
|
};
|
|
@@ -20744,7 +20744,7 @@ var SlideNavigation = function (_a) {
|
|
|
20744
20744
|
};
|
|
20745
20745
|
var templateObject_1$d, templateObject_2$a, templateObject_3$8;
|
|
20746
20746
|
|
|
20747
|
-
var Container$
|
|
20747
|
+
var Container$c = newStyled.div(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n ", "\n position: relative;\n max-height: 31.875rem;\n overflow: hidden;\n"], ["\n ", "\n position: relative;\n max-height: 31.875rem;\n overflow: hidden;\n"])), function (_a) {
|
|
20748
20748
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
20749
20749
|
return borderRadiusVariant &&
|
|
20750
20750
|
"\n border-radius: 40px;\n ";
|
|
@@ -20754,11 +20754,11 @@ var BottomTagContainer$3 = newStyled.div(templateObject_3$7 || (templateObject_3
|
|
|
20754
20754
|
var ImageProductSlideV2 = forwardRef(function ImageProductWithTags(_a, ref) {
|
|
20755
20755
|
var _b, _c;
|
|
20756
20756
|
var image = _a.image, topTag = _a.topTag, bottomTag = _a.bottomTag, testId = _a.testId, borderRadiusVariant = _a.borderRadiusVariant;
|
|
20757
|
-
return (jsxs$1(Container$
|
|
20757
|
+
return (jsxs$1(Container$c, __assign$1({ "data-testid": testId, ref: ref, borderRadiusVariant: borderRadiusVariant }, { children: [!((_b = image === null || image === void 0 ? void 0 : image.alt) === null || _b === void 0 ? void 0 : _b.includes('-video')) && (jsxs$1(Fragment$2, { children: [jsx$1(InnerImageZoom, { src: image.url, zoomSrc: image.url, zoomType: "hover", imgAttributes: { alt: image.alt, width: '100%', height: '510px' }, height: 510, fullscreenOnMobile: true, className: "zoomWrapper" }, void 0), jsx$1(TopTagContainer$3, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsx$1(BottomTagContainer$3, { children: bottomTag }, void 0)] }, void 0)), ((_c = image === null || image === void 0 ? void 0 : image.alt) === null || _c === void 0 ? void 0 : _c.includes('-video')) && (jsx$1("iframe", { allowFullScreen: true, title: image.alt, width: "100%", height: 510, src: image === null || image === void 0 ? void 0 : image.url, allow: "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" }, void 0))] }), void 0));
|
|
20758
20758
|
});
|
|
20759
20759
|
var templateObject_1$c, templateObject_2$9, templateObject_3$7;
|
|
20760
20760
|
|
|
20761
|
-
var Container$
|
|
20761
|
+
var Container$b = newStyled.div(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n height: fit-content;\n position: relative;\n max-width: 450px;\n"], ["\n display: flex;\n flex-direction: column;\n height: fit-content;\n position: relative;\n max-width: 450px;\n"])));
|
|
20762
20762
|
var ProductGalleryMobileV2 = function (_a) {
|
|
20763
20763
|
var images = _a.images, selectedValue = _a.selectedValue, topTag = _a.topTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, slideDotsDataTestId = _a.slideDotsDataTestId, _b = _a.borderRadiusVariant, borderRadiusVariant = _b === void 0 ? false : _b;
|
|
20764
20764
|
var _c = useState(0), index = _c[0], setIndex = _c[1];
|
|
@@ -20780,11 +20780,11 @@ var ProductGalleryMobileV2 = function (_a) {
|
|
|
20780
20780
|
useEffect(function () {
|
|
20781
20781
|
setSelectedImage(images[index]);
|
|
20782
20782
|
}, [index, images]);
|
|
20783
|
-
return (jsxs$1(Container$
|
|
20783
|
+
return (jsxs$1(Container$b, __assign$1({ "data-testid": "product-gallery-mobile-v2" }, { children: [jsx$1(ImageProductSlideV2, __assign$1({}, handlers, { image: selectedImage, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant }), void 0), jsx$1(SlideNavigation, { quantity: images.length, selectedIndex: images.indexOf(selectedImage), onNavigate: setIndex, testId: slideDotsDataTestId }, void 0)] }), void 0));
|
|
20784
20784
|
};
|
|
20785
20785
|
var templateObject_1$b;
|
|
20786
20786
|
|
|
20787
|
-
var Container$
|
|
20787
|
+
var Container$a = newStyled.div(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n ", "\n position: relative;\n max-height: 524px;\n overflow: hidden;\n & .slick-dots li.slick-active button:before {\n background-color: ", ";\n }\n"], ["\n ", "\n position: relative;\n max-height: 524px;\n overflow: hidden;\n & .slick-dots li.slick-active button:before {\n background-color: ", ";\n }\n"])), function (_a) {
|
|
20788
20788
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
20789
20789
|
return borderRadiusVariant &&
|
|
20790
20790
|
"\n border-radius: 40px;\n ";
|
|
@@ -20845,7 +20845,7 @@ var ImageProductSlideV3 = function (_a) {
|
|
|
20845
20845
|
}
|
|
20846
20846
|
}
|
|
20847
20847
|
}, [images, selectedValue]);
|
|
20848
|
-
return (jsxs$1(Fragment$2, { children: [customClick && (jsx$1("div", __assign$1({ style: { display: 'flex', marginBottom: '20px', gap: '10px' } }, { children: images.map(function (_, i) { return (jsx$1(ButtonPrimary, { onClick: function () { return onButtonClick(i); }, text: String(i + 1), inline: true }, i)); }) }), void 0)), jsx$1(Container$
|
|
20848
|
+
return (jsxs$1(Fragment$2, { children: [customClick && (jsx$1("div", __assign$1({ style: { display: 'flex', marginBottom: '20px', gap: '10px' } }, { children: images.map(function (_, i) { return (jsx$1(ButtonPrimary, { onClick: function () { return onButtonClick(i); }, text: String(i + 1), inline: true }, i)); }) }), void 0)), jsx$1(Container$a, __assign$1({ "data-testid": testId, borderRadiusVariant: borderRadiusVariant, ref: sliderWrapper }, { children: jsx$1(Slider$1, __assign$1({ afterChange: function (e) {
|
|
20849
20849
|
var _a;
|
|
20850
20850
|
var activeSlide = images[e];
|
|
20851
20851
|
// If autoplay is true and iframe is the active slide, play the video
|
|
@@ -20860,10 +20860,10 @@ var ImageProductSlideV3 = function (_a) {
|
|
|
20860
20860
|
};
|
|
20861
20861
|
var templateObject_1$a, templateObject_2$8, templateObject_3$6, templateObject_4$5, templateObject_5$4, templateObject_6$4, templateObject_7$4, templateObject_8$4, templateObject_9$4;
|
|
20862
20862
|
|
|
20863
|
-
var Container$
|
|
20863
|
+
var Container$9 = newStyled.div(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n height: fit-content;\n position: relative;\n max-width: 450px;\n"], ["\n display: flex;\n flex-direction: column;\n height: fit-content;\n position: relative;\n max-width: 450px;\n"])));
|
|
20864
20864
|
var ProductGalleryMobileV3 = function (_a) {
|
|
20865
20865
|
var images = _a.images, customClick = _a.customClick, topTag = _a.topTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, _b = _a.borderRadiusVariant, borderRadiusVariant = _b === void 0 ? false : _b, selectedValue = _a.selectedValue;
|
|
20866
|
-
return (jsx$1(Container$
|
|
20866
|
+
return (jsx$1(Container$9, __assign$1({ "data-testid": "product-gallery-mobile-v3" }, { children: jsx$1(ImageProductSlideV3, { images: images, customClick: customClick, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant, selectedValue: selectedValue }, void 0) }), void 0));
|
|
20867
20867
|
};
|
|
20868
20868
|
var templateObject_1$9;
|
|
20869
20869
|
|
|
@@ -20899,7 +20899,7 @@ var afterChangeSlide = function (_a) {
|
|
|
20899
20899
|
var TopTagContainer$1 = newStyled.div(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n position: absolute;\n border-top-left-radius: 8px;\n border-end-end-radius: 16px;\n overflow: hidden;\n left: ", ";\n top: ", ";\n"], ["\n position: absolute;\n border-top-left-radius: 8px;\n border-end-end-radius: 16px;\n overflow: hidden;\n left: ", ";\n top: ", ";\n"])), function (props) { return (props.borderRadiusVariant ? '13px' : '0'); }, function (props) { return (props.borderRadiusVariant ? '11px' : '0'); });
|
|
20900
20900
|
var TopRightTagContainer = newStyled.div(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n position: absolute;\n border-top-right-radius: 8px;\n border-end-start-radius: 8px;\n overflow: hidden;\n right: 0;\n top: 0;\n"], ["\n position: absolute;\n border-top-right-radius: 8px;\n border-end-start-radius: 8px;\n overflow: hidden;\n right: 0;\n top: 0;\n"])));
|
|
20901
20901
|
var BottomTagContainer$1 = newStyled.div(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
20902
|
-
var Container$
|
|
20902
|
+
var Container$8 = newStyled.div(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject(["\n ", "\n position: relative;\n max-height: 524px;\n overflow: hidden;\n\n video {\n width: none;\n }\n \n & .slick-dots li.slick-active button:before {\n background-color: ", ";\n }\n\n .slick-slider {\n height: 100%;\n min-height: calc(414px + 50px);\n }\n\n .slick-active > div {\n position: absolute;\n }\n .slick-slide:nth-last-of-type(2):not(:last-of-type) > div {\n position: absolute;\n }\n\n .slider-mobile-gallery {\n zoom: 0.8;\n border-radius: 8px;\n overflow: hidden;\n }\n\n .slick-slide:not(.slick-current) .banner-concealable {\n display: none;\n }\n\n .slick-slide {\n position: relative;\n }\n\n .slick-arrow {\n cursor: pointer;\n display: none !important;\n position: absolute;\n top: 45%;\n z-index: 1;\n }\n\n .slick-arrow::before {\n content: '' !important;\n }\n\n @media only screen and (max-width: 480px) {\n .slick-arrow {\n display: block !important;\n }\n }\n\n .slick-arrow.slick-disabled {\n display: none !important;\n }\n\n .slick-prev {\n left: 0;\n }\n\n .slick-next {\n right: 0;\n }\n\n .slick-dots {\n list-style: none;\n margin: 0;\n padding: 0;\n position: absolute;\n text-align: center;\n width: 100%;\n }\n\n .slick-dots li {\n position: relative;\n display: inline-block;\n height: 20px;\n width: 20px;\n margin: 0;\n padding: 0;\n cursor: pointer;\n }\n\n .slick-dots li:before {\n background-color: var(--truekind-default-secondary);\n }\n .slick-dots li.slick-active {\n display: inline-block !important;\n }\n\n .slick-dots li:nth-child(n + 10) {\n display: none;\n }\n\n .slick-dots li button {\n background: transparent;\n border: 0;\n color: transparent;\n cursor: pointer;\n display: block;\n height: 20px;\n line-height: 0;\n outline: none;\n padding: 5px;\n width: 20px;\n }\n\n .slick-dots li button:focus:before,\n .slick-dots li button:hover:before {\n opacity: 0.5;\n }\n\n .slick-dots li button:before {\n background-color: var(--truekind-default-secondary, #292929);\n border-radius: 20px;\n content: ' ';\n display: block;\n height: 12px;\n left: 0;\n margin: 5px;\n position: absolute;\n top: 0;\n width: 12px;\n opacity: 1;\n }\n\n .slick-dots li.slick-active button:before {\n background-color: var(--colors-pallete-primary-color, #cc4125) !important;\n opacity: 1;\n width: 12px;\n height: 12px;\n top: 0;\n }\n\n .slick-dots li:not(.slick-active) button:before {\n border: none;\n }\n\n @media only screen and (max-width: 768px) {\n div[data-testid='product-gallery-mobile-v1'] .slick-list > .slick-track {\n height: auto;\n }\n\n div[data-testid='product-gallery-mobile-v1'] .zoomWrapper.iiz > div {\n height: auto;\n }\n }\n\n"], ["\n ", "\n position: relative;\n max-height: 524px;\n overflow: hidden;\n\n video {\n width: none;\n }\n \n & .slick-dots li.slick-active button:before {\n background-color: ", ";\n }\n\n .slick-slider {\n height: 100%;\n min-height: calc(414px + 50px);\n }\n\n .slick-active > div {\n position: absolute;\n }\n .slick-slide:nth-last-of-type(2):not(:last-of-type) > div {\n position: absolute;\n }\n\n .slider-mobile-gallery {\n zoom: 0.8;\n border-radius: 8px;\n overflow: hidden;\n }\n\n .slick-slide:not(.slick-current) .banner-concealable {\n display: none;\n }\n\n .slick-slide {\n position: relative;\n }\n\n .slick-arrow {\n cursor: pointer;\n display: none !important;\n position: absolute;\n top: 45%;\n z-index: 1;\n }\n\n .slick-arrow::before {\n content: '' !important;\n }\n\n @media only screen and (max-width: 480px) {\n .slick-arrow {\n display: block !important;\n }\n }\n\n .slick-arrow.slick-disabled {\n display: none !important;\n }\n\n .slick-prev {\n left: 0;\n }\n\n .slick-next {\n right: 0;\n }\n\n .slick-dots {\n list-style: none;\n margin: 0;\n padding: 0;\n position: absolute;\n text-align: center;\n width: 100%;\n }\n\n .slick-dots li {\n position: relative;\n display: inline-block;\n height: 20px;\n width: 20px;\n margin: 0;\n padding: 0;\n cursor: pointer;\n }\n\n .slick-dots li:before {\n background-color: var(--truekind-default-secondary);\n }\n .slick-dots li.slick-active {\n display: inline-block !important;\n }\n\n .slick-dots li:nth-child(n + 10) {\n display: none;\n }\n\n .slick-dots li button {\n background: transparent;\n border: 0;\n color: transparent;\n cursor: pointer;\n display: block;\n height: 20px;\n line-height: 0;\n outline: none;\n padding: 5px;\n width: 20px;\n }\n\n .slick-dots li button:focus:before,\n .slick-dots li button:hover:before {\n opacity: 0.5;\n }\n\n .slick-dots li button:before {\n background-color: var(--truekind-default-secondary, #292929);\n border-radius: 20px;\n content: ' ';\n display: block;\n height: 12px;\n left: 0;\n margin: 5px;\n position: absolute;\n top: 0;\n width: 12px;\n opacity: 1;\n }\n\n .slick-dots li.slick-active button:before {\n background-color: var(--colors-pallete-primary-color, #cc4125) !important;\n opacity: 1;\n width: 12px;\n height: 12px;\n top: 0;\n }\n\n .slick-dots li:not(.slick-active) button:before {\n border: none;\n }\n\n @media only screen and (max-width: 768px) {\n div[data-testid='product-gallery-mobile-v1'] .slick-list > .slick-track {\n height: auto;\n }\n\n div[data-testid='product-gallery-mobile-v1'] .zoomWrapper.iiz > div {\n height: auto;\n }\n }\n\n"])), function (_a) {
|
|
20903
20903
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
20904
20904
|
return borderRadiusVariant &&
|
|
20905
20905
|
"\n border-radius: 40px;\n ";
|
|
@@ -20918,10 +20918,9 @@ var settings$1 = {
|
|
|
20918
20918
|
};
|
|
20919
20919
|
var ContentGallery = function (_a) {
|
|
20920
20920
|
var _b;
|
|
20921
|
-
var contents = _a.contents, _c = _a.customClick, customClick = _c === void 0 ? false : _c, topTag = _a.topTag, topRightTag = _a.topRightTag, bottomTag = _a.bottomTag, testId = _a.testId, borderRadiusVariant = _a.borderRadiusVariant, onChange = _a.onChange, selectedImageIndex = _a.selectedImageIndex, setSelectedImageIndex = _a.setSelectedImageIndex, setGalleryOpened = _a.setGalleryOpened;
|
|
20921
|
+
var contents = _a.contents, containerRef = _a.containerRef, _c = _a.customClick, customClick = _c === void 0 ? false : _c, topTag = _a.topTag, topRightTag = _a.topRightTag, bottomTag = _a.bottomTag, testId = _a.testId, borderRadiusVariant = _a.borderRadiusVariant, onChange = _a.onChange, selectedImageIndex = _a.selectedImageIndex, setSelectedImageIndex = _a.setSelectedImageIndex, setGalleryOpened = _a.setGalleryOpened;
|
|
20922
20922
|
var slick = useRef(null);
|
|
20923
20923
|
var sliderWrapper = useRef(null);
|
|
20924
|
-
var windowDimensions = useWindowDimensions().windowDimensions;
|
|
20925
20924
|
usePreventVerticalScroll(sliderWrapper);
|
|
20926
20925
|
var onButtonClick = useCallback(function (i) {
|
|
20927
20926
|
var _a;
|
|
@@ -20937,20 +20936,20 @@ var ContentGallery = function (_a) {
|
|
|
20937
20936
|
(_a = slick.current) === null || _a === void 0 ? void 0 : _a.slickGoTo(selectedImageIndex, true);
|
|
20938
20937
|
}, [contents, selectedImageIndex]);
|
|
20939
20938
|
function calcSlidesToShow() {
|
|
20940
|
-
|
|
20941
|
-
|
|
20939
|
+
if (!(containerRef === null || containerRef === void 0 ? void 0 : containerRef.current)) {
|
|
20940
|
+
return 1.1;
|
|
20941
|
+
}
|
|
20942
|
+
var paddingWidth = 0;
|
|
20943
|
+
var width = containerRef.current.offsetWidth;
|
|
20942
20944
|
var cssZoom = 0.8;
|
|
20943
20945
|
var cssGap = 8;
|
|
20944
20946
|
var photoSize = 375.41 * cssZoom;
|
|
20945
20947
|
var photosPerScreen = width / photoSize;
|
|
20946
|
-
var totalGap = Math.floor(photosPerScreen) * cssGap;
|
|
20947
|
-
return (width
|
|
20948
|
-
+ width * 0.0001 * (width > 380 ? 10 : -10)
|
|
20949
|
-
- paddingWidth
|
|
20950
|
-
- totalGap) / photoSize;
|
|
20948
|
+
var totalGap = Math.floor(photosPerScreen) * cssGap * 2;
|
|
20949
|
+
return ((width + width * 0.0001 * (width > 380 ? 10 : -10) - paddingWidth - totalGap) / photoSize);
|
|
20951
20950
|
}
|
|
20952
20951
|
var slidesToShow = (_b = calcSlidesToShow()) !== null && _b !== void 0 ? _b : 1;
|
|
20953
|
-
return (jsxs$1(Fragment$2, { children: [customClick && (jsx$1("div", __assign$1({ style: { display: 'flex', marginBottom: '20px', gap: '10px' }, "data-testid": "mobile-gallery-content-gallery-custom-click" }, { children: contents.map(function (content, i) { return (jsx$1(ButtonPrimary, { onClick: function () { return onButtonClick(i); }, text: String(i + 1), inline: true }, content.key)); }) }), void 0)), jsx$1(Container$
|
|
20952
|
+
return (jsxs$1(Fragment$2, { children: [customClick && (jsx$1("div", __assign$1({ style: { display: 'flex', marginBottom: '20px', gap: '10px' }, "data-testid": "mobile-gallery-content-gallery-custom-click" }, { children: contents.map(function (content, i) { return (jsx$1(ButtonPrimary, { onClick: function () { return onButtonClick(i); }, text: String(i + 1), inline: true }, content.key)); }) }), void 0)), jsx$1(Container$8, __assign$1({ "data-testid": testId, borderRadiusVariant: borderRadiusVariant, ref: sliderWrapper }, { children: jsx$1(Slider$1, __assign$1({ afterChange: function (e) {
|
|
20954
20953
|
return afterChangeSlide({
|
|
20955
20954
|
slide: e,
|
|
20956
20955
|
contents: contents,
|
|
@@ -20968,7 +20967,7 @@ var ContentGallery = function (_a) {
|
|
|
20968
20967
|
|
|
20969
20968
|
var NavButtonContainer$1 = newStyled.div(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n height: 40px;\n width: 40px;\n"], ["\n height: 40px;\n width: 40px;\n"])));
|
|
20970
20969
|
var Button$1 = newStyled.button(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject(["\n background: transparent;\n border: none;\n padding: 0.188rem 0.625rem;\n z-index: 5;\n height: 40px !important;\n cursor: pointer;\n"], ["\n background: transparent;\n border: none;\n padding: 0.188rem 0.625rem;\n z-index: 5;\n height: 40px !important;\n cursor: pointer;\n"])));
|
|
20971
|
-
var Container$
|
|
20970
|
+
var Container$7 = newStyled.div(templateObject_3$4 || (templateObject_3$4 = __makeTemplateObject(["\n ", "\n position: relative;\n max-height: 524px;\n max-width: 440px;\n overflow: hidden;\n\n @media screen and (min-width: 480px) {\n margin: 0 auto;\n }\n\n & .slick-dots li.slick-active button:before {\n background-color: ", ";\n }\n\n .iiz {\n max-width: 100%;\n margin: 0;\n position: relative;\n overflow: hidden;\n display: inline-block;\n cursor: -webkit-zoom-in;\n cursor: zoom-in;\n }\n\n .zoomWrapper.iiz {\n max-height: 524px;\n vertical-align: top;\n }\n\n .iiz--drag .iiz__zoom-img--visible {\n cursor: -webkit-grab;\n cursor: grab;\n }\n\n .iiz__img {\n max-width: 100%;\n height: auto;\n display: block;\n pointer-events: none;\n visibility: visible;\n opacity: 1;\n }\n\n .iiz__img--hidden {\n visibility: hidden;\n opacity: 0;\n }\n\n .iiz__img--abs {\n width: 100%;\n height: 100%;\n position: absolute;\n top: 0;\n left: 0;\n display: block;\n }\n\n .iiz__zoom-img {\n width: auto !important;\n max-width: none !important;\n position: absolute;\n visibility: hidden;\n opacity: 0;\n pointer-events: none;\n display: block;\n }\n\n .iiz__zoom-img--visible {\n visibility: visible;\n opacity: 1;\n pointer-events: auto;\n cursor: -webkit-zoom-out;\n cursor: zoom-out;\n -ms-touch-action: none;\n touch-action: none;\n zoom: 1.2;\n }\n\n .iiz__zoom-portal {\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: 99999;\n }\n\n .iiz__btn {\n background: rgba(255, 255, 255, 0.8);\n max-width: 98px;\n min-width: fit-content;\n height: 32px;\n border: none;\n outline: none;\n padding: 0 8px;\n position: absolute;\n z-index: 5;\n text-decoration: none;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -moz-appearance: none;\n -webkit-appearance: none;\n appearance: none;\n }\n\n .iiz__btn:before {\n content: ' ';\n background-position: center;\n background-repeat: no-repeat;\n display: block;\n }\n\n .iiz__hint {\n bottom: 10%;\n right: 0;\n pointer-events: none;\n border-radius: 150px 0 0 150px;\n }\n\n .iiz__hint:before {\n content: '+';\n background-image: none;\n width: 17px;\n height: 17px;\n font-size: 19px;\n border-radius: 500px;\n border: 2px solid #292929;\n display: inline-block;\n position: relative;\n text-align: center;\n line-height: 17px;\n font-weight: 600;\n }\n\n .iiz__hint:after {\n content: 'Zoom in';\n font-size: 14px;\n font-weight: 600;\n display: inline-block;\n margin-left: 5px;\n }\n\n .iiz__close {\n border-radius: 150px;\n top: auto;\n right: 0;\n left: 0;\n margin: auto;\n bottom: 20px;\n visibility: hidden;\n opacity: 0;\n color: #292929;\n }\n\n .iiz__close--visible {\n visibility: visible;\n opacity: 1;\n cursor: pointer;\n }\n\n .iiz__close::before {\n content: ' ';\n width: 16px;\n height: 16px;\n background-image: -webkit-gradient(linear, left top, left bottom, from(#222), to(#222)),\n -webkit-gradient(linear, left top, left bottom, from(#222), to(#222));\n background-image: linear-gradient(#222, #222), linear-gradient(#222, #222);\n background-size: 65% 2px, 2px 65%;\n transform: rotate(45deg);\n border-radius: 500px;\n border: 2px solid #292929;\n }\n\n .iiz__close::after {\n content: 'Close';\n font-size: 14px;\n font-weight: 600;\n display: inline-block;\n margin-left: 5px;\n }\n"], ["\n ", "\n position: relative;\n max-height: 524px;\n max-width: 440px;\n overflow: hidden;\n\n @media screen and (min-width: 480px) {\n margin: 0 auto;\n }\n\n & .slick-dots li.slick-active button:before {\n background-color: ", ";\n }\n\n .iiz {\n max-width: 100%;\n margin: 0;\n position: relative;\n overflow: hidden;\n display: inline-block;\n cursor: -webkit-zoom-in;\n cursor: zoom-in;\n }\n\n .zoomWrapper.iiz {\n max-height: 524px;\n vertical-align: top;\n }\n\n .iiz--drag .iiz__zoom-img--visible {\n cursor: -webkit-grab;\n cursor: grab;\n }\n\n .iiz__img {\n max-width: 100%;\n height: auto;\n display: block;\n pointer-events: none;\n visibility: visible;\n opacity: 1;\n }\n\n .iiz__img--hidden {\n visibility: hidden;\n opacity: 0;\n }\n\n .iiz__img--abs {\n width: 100%;\n height: 100%;\n position: absolute;\n top: 0;\n left: 0;\n display: block;\n }\n\n .iiz__zoom-img {\n width: auto !important;\n max-width: none !important;\n position: absolute;\n visibility: hidden;\n opacity: 0;\n pointer-events: none;\n display: block;\n }\n\n .iiz__zoom-img--visible {\n visibility: visible;\n opacity: 1;\n pointer-events: auto;\n cursor: -webkit-zoom-out;\n cursor: zoom-out;\n -ms-touch-action: none;\n touch-action: none;\n zoom: 1.2;\n }\n\n .iiz__zoom-portal {\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: 99999;\n }\n\n .iiz__btn {\n background: rgba(255, 255, 255, 0.8);\n max-width: 98px;\n min-width: fit-content;\n height: 32px;\n border: none;\n outline: none;\n padding: 0 8px;\n position: absolute;\n z-index: 5;\n text-decoration: none;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -moz-appearance: none;\n -webkit-appearance: none;\n appearance: none;\n }\n\n .iiz__btn:before {\n content: ' ';\n background-position: center;\n background-repeat: no-repeat;\n display: block;\n }\n\n .iiz__hint {\n bottom: 10%;\n right: 0;\n pointer-events: none;\n border-radius: 150px 0 0 150px;\n }\n\n .iiz__hint:before {\n content: '+';\n background-image: none;\n width: 17px;\n height: 17px;\n font-size: 19px;\n border-radius: 500px;\n border: 2px solid #292929;\n display: inline-block;\n position: relative;\n text-align: center;\n line-height: 17px;\n font-weight: 600;\n }\n\n .iiz__hint:after {\n content: 'Zoom in';\n font-size: 14px;\n font-weight: 600;\n display: inline-block;\n margin-left: 5px;\n }\n\n .iiz__close {\n border-radius: 150px;\n top: auto;\n right: 0;\n left: 0;\n margin: auto;\n bottom: 20px;\n visibility: hidden;\n opacity: 0;\n color: #292929;\n }\n\n .iiz__close--visible {\n visibility: visible;\n opacity: 1;\n cursor: pointer;\n }\n\n .iiz__close::before {\n content: ' ';\n width: 16px;\n height: 16px;\n background-image: -webkit-gradient(linear, left top, left bottom, from(#222), to(#222)),\n -webkit-gradient(linear, left top, left bottom, from(#222), to(#222));\n background-image: linear-gradient(#222, #222), linear-gradient(#222, #222);\n background-size: 65% 2px, 2px 65%;\n transform: rotate(45deg);\n border-radius: 500px;\n border: 2px solid #292929;\n }\n\n .iiz__close::after {\n content: 'Close';\n font-size: 14px;\n font-weight: 600;\n display: inline-block;\n margin-left: 5px;\n }\n"])), function (_a) {
|
|
20972
20971
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
20973
20972
|
return borderRadiusVariant &&
|
|
20974
20973
|
"\n border-radius: 40px;\n ";
|
|
@@ -21017,7 +21016,7 @@ var MainContent = function (_a) {
|
|
|
21017
21016
|
useEffect(function () {
|
|
21018
21017
|
showArrows();
|
|
21019
21018
|
}, [selectedImageIndex]);
|
|
21020
|
-
return (jsx$1(Container$
|
|
21019
|
+
return (jsx$1(Container$7, __assign$1({ "data-testid": testId, borderRadiusVariant: borderRadiusVariant, ref: sliderWrapper }, { children: jsx$1(Slider$1, __assign$1({ afterChange: function (e) {
|
|
21021
21020
|
return afterChangeSlide({
|
|
21022
21021
|
slide: e,
|
|
21023
21022
|
contents: contents,
|
|
@@ -21039,7 +21038,7 @@ var MainContent = function (_a) {
|
|
|
21039
21038
|
}) }), void 0) }), void 0));
|
|
21040
21039
|
};
|
|
21041
21040
|
|
|
21042
|
-
var Container$
|
|
21041
|
+
var Container$6 = newStyled.div({
|
|
21043
21042
|
padding: '1rem',
|
|
21044
21043
|
paddingTop: '2rem',
|
|
21045
21044
|
gap: '0.5rem',
|
|
@@ -21095,16 +21094,18 @@ var Slider = function (_a) {
|
|
|
21095
21094
|
}
|
|
21096
21095
|
scrollElementSlider();
|
|
21097
21096
|
}, [selectedImageIndex, test, scrollElementSlider]);
|
|
21098
|
-
return (jsx$1(Container$
|
|
21097
|
+
return (jsx$1(Container$6, __assign$1({ ref: containerRef }, { children: images.map(function (img, i) { return (jsx$1(Thumbnail, __assign$1({ onClick: function () { return handleSelectImage(img.key); }, ref: function (el) { return (itemsRef.current[i] = el); } }, { children: jsx$1(Img, { src: img.url, alt: img.alt, style: {
|
|
21099
21098
|
border: isTheActiveImage(i) ? getBorderColor() : borderImageInactive,
|
|
21100
21099
|
} }, void 0) }), img.key)); }) }), void 0));
|
|
21101
21100
|
};
|
|
21102
21101
|
|
|
21103
|
-
var Container$
|
|
21102
|
+
var Container$5 = newStyled.div({
|
|
21104
21103
|
background: 'var(--truekind-default-secondary, #292929)',
|
|
21105
21104
|
minHeight: '100vh',
|
|
21105
|
+
height: '100%',
|
|
21106
21106
|
width: '100vw',
|
|
21107
|
-
position: '
|
|
21107
|
+
position: 'fixed',
|
|
21108
|
+
overflowY: 'scroll',
|
|
21108
21109
|
zIndex: '99999',
|
|
21109
21110
|
top: 0,
|
|
21110
21111
|
left: 0,
|
|
@@ -21114,9 +21115,20 @@ var Container$6 = newStyled.div({
|
|
|
21114
21115
|
});
|
|
21115
21116
|
var SubContainer = newStyled.div({
|
|
21116
21117
|
maxWidth: '480px',
|
|
21118
|
+
marginTop: '105px',
|
|
21117
21119
|
'@media screen and (min-width: 480px)': {
|
|
21118
21120
|
margin: '0 auto',
|
|
21119
|
-
}
|
|
21121
|
+
},
|
|
21122
|
+
'@media screen and (max-height: 640px)': {
|
|
21123
|
+
position: 'relative',
|
|
21124
|
+
},
|
|
21125
|
+
'@media screen and (max-height: 740px)': {
|
|
21126
|
+
marginTop: '0px',
|
|
21127
|
+
},
|
|
21128
|
+
'@media screen and (min-width: 380px) and (max-width: 400px) and (max-height: 860px) ': {
|
|
21129
|
+
position: 'relative',
|
|
21130
|
+
marginTop: '0px',
|
|
21131
|
+
},
|
|
21120
21132
|
});
|
|
21121
21133
|
var Header$1 = newStyled.div({
|
|
21122
21134
|
display: 'flex',
|
|
@@ -21124,15 +21136,9 @@ var Header$1 = newStyled.div({
|
|
|
21124
21136
|
alignItems: 'center',
|
|
21125
21137
|
color: 'white',
|
|
21126
21138
|
padding: '1.2rem',
|
|
21127
|
-
|
|
21139
|
+
zIndex: 4,
|
|
21128
21140
|
top: 0,
|
|
21129
21141
|
right: 0,
|
|
21130
|
-
'@media screen and (max-height: 640px)': {
|
|
21131
|
-
position: 'relative',
|
|
21132
|
-
},
|
|
21133
|
-
'@media screen and (min-width: 380px) and (max-width: 400px) and (max-height: 860px) ': {
|
|
21134
|
-
position: 'relative',
|
|
21135
|
-
}
|
|
21136
21142
|
});
|
|
21137
21143
|
var IconContainer = newStyled.div({
|
|
21138
21144
|
backgroundColor: '#E5E5E5',
|
|
@@ -21152,22 +21158,18 @@ var GalleryDetailed = function (_a) {
|
|
|
21152
21158
|
function closeGallery() {
|
|
21153
21159
|
setGalleryOpened(false);
|
|
21154
21160
|
}
|
|
21155
|
-
return (jsxs$1(Container$
|
|
21161
|
+
return (jsxs$1(Container$5, { children: [jsx$1(Header$1, { children: jsx$1(IconContainer, __assign$1({ onClick: closeGallery }, { children: jsx$1(Icon.Actions.Close, { height: 1.1, width: 1.1 }, void 0) }), void 0) }, void 0), jsxs$1(SubContainer, { children: [jsx$1(MainContent, { contents: images, selectedImageIndex: selectedImageIndex, setSelectedImageIndex: setSelectedImageIndex, topTag: topTag, topRightTag: topRightTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant, itemsOnViewport: itemsOnViewport }, void 0), jsx$1(Slider, { images: images, test: !!productImageDataTestId, selectedImageIndex: selectedImageIndex, setSelectedImageIndex: setSelectedImageIndex }, void 0)] }, void 0)] }, void 0));
|
|
21156
21162
|
};
|
|
21157
21163
|
|
|
21158
|
-
var Container$5 = newStyled.div({
|
|
21159
|
-
marginLeft: '15px',
|
|
21160
|
-
marginRight: '15px',
|
|
21161
|
-
});
|
|
21162
|
-
|
|
21163
21164
|
var ProductGalleryMobileV4 = function (_a) {
|
|
21164
21165
|
var images = _a.images, customClick = _a.customClick, topTag = _a.topTag, topRightTag = _a.topRightTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, _b = _a.borderRadiusVariant, borderRadiusVariant = _b === void 0 ? false : _b, _c = _a.selectedValue, selectedValue = _c === void 0 ? 0 : _c, _d = _a.itemsOnViewport, itemsOnViewport = _d === void 0 ? 1 : _d;
|
|
21166
|
+
var containerRef = useRef(null);
|
|
21165
21167
|
var _e = useState(selectedValue), selectedImageIndex = _e[0], setSelectedImageIndex = _e[1];
|
|
21166
21168
|
var _f = useState(false), galleryOpened = _f[0], setGalleryOpened = _f[1];
|
|
21167
21169
|
useEffect(function () {
|
|
21168
21170
|
setSelectedImageIndex(selectedValue);
|
|
21169
21171
|
}, [selectedValue]);
|
|
21170
|
-
return (jsx$1(
|
|
21172
|
+
return (jsx$1("div", __assign$1({ ref: containerRef }, { children: galleryOpened ? (jsx$1(GalleryDetailed, { images: images, topTag: topTag, topRightTag: topRightTag, bottomTag: bottomTag, productImageDataTestId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant, itemsOnViewport: itemsOnViewport, selectedImageIndex: selectedImageIndex, setSelectedImageIndex: setSelectedImageIndex, setGalleryOpened: setGalleryOpened }, void 0)) : (jsx$1(ContentGallery, { contents: images, containerRef: containerRef, customClick: customClick, topTag: topTag, topRightTag: topRightTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant, itemsOnViewport: itemsOnViewport, selectedImageIndex: selectedImageIndex, setSelectedImageIndex: setSelectedImageIndex, setGalleryOpened: setGalleryOpened }, void 0)) }), void 0));
|
|
21171
21173
|
};
|
|
21172
21174
|
|
|
21173
21175
|
var SETTINGS = {
|