@trafilea/afrodita-components 6.34.5 → 6.34.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 +123 -114
- package/build/index.esm.js.map +1 -1
- package/build/index.js +123 -114
- 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$1m = 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) {
|
|
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$1D || (templateObject_2$1D = __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$1m, __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$2h, templateObject_2$1D;
|
|
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$1l = newStyled.div(templateObject_1$2g || (templateObject_1$2g = __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$1C || (templateObject_2$1C = __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$1l, __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$2g, templateObject_2$1C;
|
|
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$1k = newStyled.div(templateObject_1$2f || (templateObject_1$2f = __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$1B || (templateObject_2$1B = __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$1k, __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$2f, templateObject_2$1B, templateObject_3$1e;
|
|
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$1k, __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$1k, __assign$1({ style: { paddingBottom: '0.5rem' } }, { children: isOriginalPrice && jsx$1(OriginalPrice, {}, void 0) }), void 0), jsxs$1(Container$1k, { 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$1k, __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$1k, __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$2b;
|
|
3678
3678
|
|
|
@@ -3687,7 +3687,7 @@ function ClubPriceMemberLabel(_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$1j = newStyled.div(templateObject_1$29 || (templateObject_1$29 = __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$1k = newStyled.div(templateObject_1$29 || (templateObject_1$29 = _
|
|
|
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$1j, { "data-testid": "skeleton-container", width: width, height: height, theme: theme }, void 0);
|
|
3716
3716
|
};
|
|
3717
3717
|
var templateObject_1$29;
|
|
3718
3718
|
|
|
@@ -4910,7 +4910,7 @@ var DEFAULTS = {
|
|
|
4910
4910
|
};
|
|
4911
4911
|
var templateObject_1$25, templateObject_2$1w, templateObject_3$1b, templateObject_4$Y, templateObject_5$J, templateObject_6$E, templateObject_7$u, 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$1i = newStyled.div(templateObject_1$24 || (templateObject_1$24 = __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$1v || (templateObject_2$1v = __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$1a || (templateObject_3$1a = __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$X || (templateObject_4$X = __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$1i, __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$24, templateObject_2$1v, templateObject_3$1a, templateObject_4$X, templateObject_5$I, templateObject_6$D;
|
|
4944
4944
|
|
|
4945
|
-
var Container$
|
|
4945
|
+
var Container$1h = newStyled.div(templateObject_1$23 || (templateObject_1$23 = __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$1u || (templateObject_2$1u = __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$1h, { 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$23, templateObject_2$1u;
|
|
4954
4954
|
|
|
4955
4955
|
var DROPS_TOTAL = 5;
|
|
4956
|
-
var Container$
|
|
4956
|
+
var Container$1g = newStyled.div(templateObject_1$22 || (templateObject_1$22 = __makeTemplateObject(["\n height: 32px;\n display: flex;\n"], ["\n height: 32px;\n display: flex;\n"])));
|
|
4957
4957
|
var Title$b = newStyled.p(templateObject_2$1t || (templateObject_2$1t = __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$19 || (templateObject_3$19 = __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$1g, { 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$22, templateObject_2$1t, templateObject_3$19;
|
|
4964
4964
|
|
|
@@ -5062,7 +5062,7 @@ var Accordion$1 = function (_a) {
|
|
|
5062
5062
|
};
|
|
5063
5063
|
var templateObject_1$21;
|
|
5064
5064
|
|
|
5065
|
-
var Container$
|
|
5065
|
+
var Container$1f = newStyled.div(templateObject_1$20 || (templateObject_1$20 = __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$1f, { 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$1$ || (templateObject_1$1$ = __makeTe
|
|
|
5226
5226
|
var FlexContainer$4 = newStyled.div(templateObject_2$1s || (templateObject_2$1s = __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$1$, templateObject_2$1s;
|
|
5228
5228
|
|
|
5229
|
-
var Container$
|
|
5229
|
+
var Container$1e = 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$1r, templateObject_3$18, 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$1e, __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$1d = newStyled.div(templateObject_1$1W || (templateObject_1$1W = __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$1d, { 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$1W, templateObject_2$1p;
|
|
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$1c = newStyled.div(templateObject_1$1V || (templateObject_1$1V = __makeTemplateObject([""], [""])));
|
|
5633
5633
|
var RequiredPlaceholder = newStyled.p(templateObject_2$1o || (templateObject_2$1o = __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$17 || (templateObject_3$17 = __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$1c : 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$1V, templateObject_2$1o, templateObject_3$17;
|
|
@@ -5733,7 +5733,7 @@ var ContainerStyles$2 = {
|
|
|
5733
5733
|
};
|
|
5734
5734
|
|
|
5735
5735
|
var Wrapper$7 = newStyled.div(templateObject_1$1U || (templateObject_1$1U = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
5736
|
-
var Container$
|
|
5736
|
+
var Container$1b = 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$1n || (templateObject_2$1n = __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$1b, __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$1U, templateObject_2$1n, templateObject_3$16, templateObject_4$V;
|
|
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$1a = newStyled.div(templateObject_13$4 || (templateObject_13$4 = __makeTemplateObject([""], [""])));
|
|
6010
6010
|
var templateObject_1$1S, templateObject_2$1l, templateObject_3$14, templateObject_4$T, templateObject_5$F, templateObject_6$B, templateObject_7$s, 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$1a, __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$19 = 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$19, __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$18 = newStyled.div(templateObject_1$1P || (templateObject_1$1P = __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$1i || (templateObject_2$1i = __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$11 || (templateObject_3$11 = __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$Q || (templateObject_4$Q = __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$18, __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$1O || (templateObject_1$1O = __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$1N;
|
|
6335
6335
|
|
|
6336
|
-
var Container$
|
|
6336
|
+
var Container$17 = newStyled.div(templateObject_1$1M || (templateObject_1$1M = __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$18 = newStyled.div(templateObject_1$1M || (templateObject_1$1M = _
|
|
|
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$17, __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$16 = newStyled.div(templateObject_1$1K || (templateObject_1$1K = __makeTemplateObject(["\n padding: 0.625rem 1.5rem;\n"], ["\n padding: 0.625rem 1.5rem;\n"])));
|
|
6376
6376
|
var Title$9 = newStyled.h1(templateObject_2$1g || (templateObject_2$1g = __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$$ || (templateObject_3$$ = __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$O || (templateObject_4$O = __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$16, { 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$1K, templateObject_2$1g, templateObject_3$$, templateObject_4$O;
|
|
6385
6385
|
|
|
@@ -6388,7 +6388,7 @@ var Bundle = {
|
|
|
6388
6388
|
Simple: Simple,
|
|
6389
6389
|
};
|
|
6390
6390
|
|
|
6391
|
-
var Container$
|
|
6391
|
+
var Container$15 = newStyled.div(templateObject_1$1J || (templateObject_1$1J = __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$15, __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$1J, templateObject_2$1f, templateObject_3$_;
|
|
6409
6409
|
|
|
@@ -6431,11 +6431,11 @@ var Description$1 = function (_a) {
|
|
|
6431
6431
|
};
|
|
6432
6432
|
var templateObject_1$1G;
|
|
6433
6433
|
|
|
6434
|
-
var Container$
|
|
6434
|
+
var Container$14 = newStyled.div(templateObject_1$1F || (templateObject_1$1F = __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$14, __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$1F;
|
|
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$13 = newStyled.div(templateObject_1$1D || (templateObject_1$1D = __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$13)(templateObject_2$1e || (templateObject_2$1e = __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$Z || (templateObject_3$Z = __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$N || (templateObject_4$N = __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$13, { 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$1D, templateObject_2$1e, templateObject_3$Z, templateObject_4$N, templateObject_5$C, templateObject_6$y, templateObject_7$q, 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$12 = newStyled('div')(templateObject_1$1C || (templateObject_1$1C = __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$1d || (templateObject_2$1d = __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$Y || (templateObject_3$Y = __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$M || (templateObject_4$M = __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$M || (templateObject_4$M = __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$12, __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$1C, templateObject_2$1d, templateObject_3$Y, templateObject_4$M;
|
|
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$1k, __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$1B, templateObject_2$1c, templateObject_3$X, templateObject
|
|
|
6562
6562
|
|
|
6563
6563
|
var STARTS_NUMBER = 5;
|
|
6564
6564
|
|
|
6565
|
-
var Container$
|
|
6565
|
+
var Container$11 = newStyled.div(templateObject_1$1A || (templateObject_1$1A = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
6566
6566
|
var templateObject_1$1A;
|
|
6567
6567
|
|
|
6568
6568
|
var StarContainer = newStyled.div(templateObject_1$1z || (templateObject_1$1z = __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$11, { 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$10 = newStyled.a(templateObject_1$1y || (templateObject_1$1y = __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$10, __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$1x || (templateObject_1$1x = __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$$ = 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"])));
|
|
6742
6742
|
var ProdCardContainer$4 = 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"])));
|
|
6743
6743
|
var Title$7 = newStyled.p(templateObject_4$K || (templateObject_4$K = __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$$, __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$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)] }), 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$$, __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$1w || (templateObject_1$1w = __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$_ = newStyled.a(templateObject_2$19 || (templateObject_2$19 = __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$V || (templateObject_3$V = __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$J || (templateObject_4$J = __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$_, __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$7, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: topTag }), void 0), jsx(BottomTagContainer$7, __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$_, __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$1w, templateObject_2$19, templateObject_3$V, templateObject_4$J, templateObject_5$z, templateObject_6$w, templateObject_7$o, templateObject_8$h;
|
|
6969
6969
|
|
|
6970
|
-
var Container$
|
|
6970
|
+
var Container$Z = newStyled.div(templateObject_1$1v || (templateObject_1$1v = __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$Z, __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$Y = newStyled.div(templateObject_1$1t || (templateObject_1$1t = __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$Y, __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$1t, templateObject_2$17;
|
|
7066
7066
|
|
|
@@ -7285,14 +7285,14 @@ var ButtonSecondaryOutline = function (props) {
|
|
|
7285
7285
|
} }), void 0));
|
|
7286
7286
|
};
|
|
7287
7287
|
|
|
7288
|
-
var Container$
|
|
7288
|
+
var Container$X = newStyled.div(templateObject_1$1p || (templateObject_1$1p = __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$14 || (templateObject_2$14 = __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$S || (templateObject_3$S = __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$G || (templateObject_4$G = __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$X, __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$1p, templateObject_2$14, templateObject_3$S, templateObject_4$G;
|
|
7298
7298
|
|
|
@@ -7498,12 +7498,12 @@ function FilteringDropdown(_a) {
|
|
|
7498
7498
|
var Title$4 = newStyled.div(templateObject_1$1j || (templateObject_1$1j = __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$N || (templateObject_3$N = __makeTemplateObject(["\n width: 1rem;\n height: 1rem;\n"], ["\n width: 1rem;\n height: 1rem;\n"])));
|
|
7501
|
-
var Container$
|
|
7501
|
+
var Container$W = newStyled.div(templateObject_4$B || (templateObject_4$B = __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$W, __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$1j, templateObject_2$_, templateObject_3$N, templateObject_4$B;
|
|
7509
7509
|
|
|
@@ -7729,7 +7729,7 @@ var FilterCheckboxColor = function (_a) {
|
|
|
7729
7729
|
};
|
|
7730
7730
|
|
|
7731
7731
|
var Wrapper$4 = newStyled.div(templateObject_1$1g || (templateObject_1$1g = __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$V = newStyled.div(templateObject_2$X || (templateObject_2$X = __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$V, __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$V, __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$1g, templateObject_2$X;
|
|
7751
7751
|
|
|
7752
|
-
var Container$
|
|
7752
|
+
var Container$U = newStyled.div(templateObject_1$1f || (templateObject_1$1f = __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$W || (templateObject_2$W = __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$U, __assign$1({ theme: theme }, { children: [jsx(Container$U, { 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$1f, templateObject_2$W;
|
|
7769
7769
|
|
|
@@ -12103,7 +12103,7 @@ var ImageSmallPreview = function (_a) {
|
|
|
12103
12103
|
|
|
12104
12104
|
var horizontalStyles = css(templateObject_1$1c || (templateObject_1$1c = __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$V || (templateObject_2$V = __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$T = newStyled.div(templateObject_3$K || (templateObject_3$K = __makeTemplateObject(["\n display: grid;\n max-height: 45rem;\n height: min-content;\n align-items: flex-start;\n ", "\n\n ", "\n"], ["\n display: grid;\n max-height: 45rem;\n height: min-content;\n align-items: flex-start;\n ", "\n\n ", "\n"])), function (_a) {
|
|
12107
12107
|
var position = _a.position;
|
|
12108
12108
|
return (position == 'horizontal' ? horizontalStyles : verticalStyles);
|
|
12109
12109
|
}, function (_a) {
|
|
@@ -12144,7 +12144,7 @@ var ImagePreviewList = function (_a) {
|
|
|
12144
12144
|
var element = document.querySelector(".imageListContainer");
|
|
12145
12145
|
element.scrollBy(0, 200);
|
|
12146
12146
|
};
|
|
12147
|
-
return (jsxs$1(Fragment$2, { children: [jsx$1(Container$
|
|
12147
|
+
return (jsxs$1(Fragment$2, { children: [jsx$1(Container$T, __assign$1({ role: "list", "data-testid": dataTestId, position: position, className: hasOverflowArrows ? 'imageListContainer' : position, hasOverflowArrows: hasOverflowArrows }, { children: position == 'horizontal' ? (jsx$1("div", __assign$1({ style: { maxWidth: '360px' } }, { children: jsx$1(SliderNavigation, __assign$1({ speed: 200, infinite: false, arrows: {
|
|
12148
12148
|
arrowWidth: 0.75,
|
|
12149
12149
|
arrowHeight: 1.25,
|
|
12150
12150
|
arrowPadding: 1.625,
|
|
@@ -12162,7 +12162,7 @@ var ProgressBar$1 = function (_a) {
|
|
|
12162
12162
|
return (jsx$1(ProgressContainer, __assign$1({ "data-testid": "progress-bar", hide: hide }, { children: jsx$1(ProgressFiller, { progress: progress }, void 0) }), void 0));
|
|
12163
12163
|
};
|
|
12164
12164
|
|
|
12165
|
-
var Container$
|
|
12165
|
+
var Container$S = newStyled.div(templateObject_1$1a || (templateObject_1$1a = __makeTemplateObject(["\n max-width: 530px;\n position: relative;\n"], ["\n max-width: 530px;\n position: relative;\n"])));
|
|
12166
12166
|
var HTMLVideo = newStyled.video(templateObject_2$T || (templateObject_2$T = __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; });
|
|
12167
12167
|
var PlayIcon = newStyled(Icon.PDP.PlayVideo)(templateObject_3$J || (templateObject_3$J = __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"])));
|
|
12168
12168
|
var PlayContainer = newStyled.div(templateObject_4$y || (templateObject_4$y = __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"])));
|
|
@@ -12182,6 +12182,11 @@ var Video$1 = function (_a) {
|
|
|
12182
12182
|
var isStarted = videoProgress > 0;
|
|
12183
12183
|
var progress = videoProgress / ((_c = (_b = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _b === void 0 ? void 0 : _b.duration) !== null && _c !== void 0 ? _c : 0);
|
|
12184
12184
|
var hideProgressBar = videoProgress === ((_e = (_d = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _d === void 0 ? void 0 : _d.duration) !== null && _e !== void 0 ? _e : 0) || videoProgress === 0;
|
|
12185
|
+
useEffect(function () {
|
|
12186
|
+
if (videoRef.current) {
|
|
12187
|
+
videoRef.current.muted = Boolean(muted);
|
|
12188
|
+
}
|
|
12189
|
+
}, [muted]);
|
|
12185
12190
|
var handlePlayClick = function () {
|
|
12186
12191
|
if (videoRef.current && !debouncePlay) {
|
|
12187
12192
|
setDebouncePlay(true);
|
|
@@ -12214,7 +12219,7 @@ var Video$1 = function (_a) {
|
|
|
12214
12219
|
setVideoProgress(videoRef.current.currentTime);
|
|
12215
12220
|
}
|
|
12216
12221
|
};
|
|
12217
|
-
return (jsxs$1(Container$
|
|
12222
|
+
return (jsxs$1(Container$S, __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: true, "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));
|
|
12218
12223
|
};
|
|
12219
12224
|
|
|
12220
12225
|
var propTypes = {exports: {}};
|
|
@@ -13808,7 +13813,7 @@ InnerImageZoom.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
13808
13813
|
afterZoomOut: PropTypes.func
|
|
13809
13814
|
} : {};
|
|
13810
13815
|
|
|
13811
|
-
var Container$
|
|
13816
|
+
var Container$R = newStyled.div(templateObject_1$19 || (templateObject_1$19 = __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) {
|
|
13812
13817
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
13813
13818
|
return borderRadiusVariant && "border-radius: 40px;";
|
|
13814
13819
|
});
|
|
@@ -13840,7 +13845,7 @@ var ImageProductSlide$1 = function (_a) {
|
|
|
13840
13845
|
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;
|
|
13841
13846
|
var source = content === null || content === void 0 ? void 0 : content.url;
|
|
13842
13847
|
var isVideo = (_b = content === null || content === void 0 ? void 0 : content.isVideo) !== null && _b !== void 0 ? _b : false;
|
|
13843
|
-
return (jsxs$1(Container$
|
|
13848
|
+
return (jsxs$1(Container$R, __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: {
|
|
13844
13849
|
alt: content.alt,
|
|
13845
13850
|
style: { objectFit: 'cover', objectPosition: 'center' },
|
|
13846
13851
|
loading: 'eager',
|
|
@@ -13848,7 +13853,7 @@ var ImageProductSlide$1 = function (_a) {
|
|
|
13848
13853
|
}, 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$6, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsx$1(BottomTagContainer$6, __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));
|
|
13849
13854
|
};
|
|
13850
13855
|
|
|
13851
|
-
var Container$
|
|
13856
|
+
var Container$Q = newStyled.div(templateObject_1$18 || (templateObject_1$18 = __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"])));
|
|
13852
13857
|
var templateObject_1$18;
|
|
13853
13858
|
|
|
13854
13859
|
var getInitialIndex = function (images, selectedValue) {
|
|
@@ -13875,7 +13880,7 @@ var ProductGallery = function (_a) {
|
|
|
13875
13880
|
setActiveIndex(index);
|
|
13876
13881
|
};
|
|
13877
13882
|
var selectedImage = images[activeIndex];
|
|
13878
|
-
return (jsxs$1(Container$
|
|
13883
|
+
return (jsxs$1(Container$Q, { 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));
|
|
13879
13884
|
};
|
|
13880
13885
|
|
|
13881
13886
|
var getStylesBySize$8 = function (size) {
|
|
@@ -13897,7 +13902,7 @@ var getStylesBySize$8 = function (size) {
|
|
|
13897
13902
|
};
|
|
13898
13903
|
}
|
|
13899
13904
|
};
|
|
13900
|
-
var Container$
|
|
13905
|
+
var Container$P = newStyled.div(templateObject_1$17 || (templateObject_1$17 = __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) {
|
|
13901
13906
|
var backgroundColor = _a.backgroundColor;
|
|
13902
13907
|
return backgroundColor;
|
|
13903
13908
|
}, function (_a) {
|
|
@@ -13925,7 +13930,7 @@ var Container$Q = newStyled.div(templateObject_1$17 || (templateObject_1$17 = __
|
|
|
13925
13930
|
var IconButton = function (_a) {
|
|
13926
13931
|
var children = _a.children, disabled = _a.disabled, _b = _a.size, size = _b === void 0 ? ComponentSize.Medium : _b, onClick = _a.onClick;
|
|
13927
13932
|
var theme = useTheme();
|
|
13928
|
-
return (jsx$1(Container$
|
|
13933
|
+
return (jsx$1(Container$P, __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));
|
|
13929
13934
|
};
|
|
13930
13935
|
var templateObject_1$17;
|
|
13931
13936
|
|
|
@@ -13940,7 +13945,7 @@ var PaypalButton = function (_a) {
|
|
|
13940
13945
|
};
|
|
13941
13946
|
var templateObject_1$16;
|
|
13942
13947
|
|
|
13943
|
-
var Container$
|
|
13948
|
+
var Container$O = newStyled.div(function (props) { return ({
|
|
13944
13949
|
height: 'auto',
|
|
13945
13950
|
textAlign: 'center',
|
|
13946
13951
|
justifyContent: 'center',
|
|
@@ -13990,10 +13995,10 @@ var IconsWithTitle = function (_a) {
|
|
|
13990
13995
|
textAlign: 'center',
|
|
13991
13996
|
lineHeight: '18px',
|
|
13992
13997
|
};
|
|
13993
|
-
return (jsx$1(Fragment$2, { children: jsxs$1(Container$
|
|
13998
|
+
return (jsx$1(Fragment$2, { children: jsxs$1(Container$O, __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));
|
|
13994
13999
|
};
|
|
13995
14000
|
|
|
13996
|
-
var Container$
|
|
14001
|
+
var Container$N = newStyled.div(templateObject_1$15 || (templateObject_1$15 = __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'); });
|
|
13997
14002
|
var ImageContainer$4 = newStyled.div(templateObject_2$R || (templateObject_2$R = __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'); });
|
|
13998
14003
|
var StyledTitle = newStyled.div(templateObject_3$H || (templateObject_3$H = __makeTemplateObject(["\n display: flex;\n ", "\n"], ["\n display: flex;\n ", "\n"])), function (_a) {
|
|
13999
14004
|
var titlePosition = _a.titlePosition;
|
|
@@ -14003,7 +14008,7 @@ var StyledTitle = newStyled.div(templateObject_3$H || (templateObject_3$H = __ma
|
|
|
14003
14008
|
var ImageCardWithDescription = function (_a) {
|
|
14004
14009
|
var image = _a.image, title = _a.title, description = _a.description, _b = _a.titlePosition, titlePosition = _b === void 0 ? 'left' : _b;
|
|
14005
14010
|
var isMobile = useWindowDimensions().isMobile;
|
|
14006
|
-
return (jsxs$1(Container$
|
|
14011
|
+
return (jsxs$1(Container$N, __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));
|
|
14007
14012
|
};
|
|
14008
14013
|
var templateObject_1$15, templateObject_2$R, templateObject_3$H;
|
|
14009
14014
|
|
|
@@ -14029,7 +14034,7 @@ var containerByStatus = function (theme, status) {
|
|
|
14029
14034
|
return theme.colors.semantic.urgent.color;
|
|
14030
14035
|
return '';
|
|
14031
14036
|
};
|
|
14032
|
-
var Container$
|
|
14037
|
+
var Container$M = newStyled.div(templateObject_1$13 || (templateObject_1$13 = __makeTemplateObject(["\n position: relative;\n input {\n border-color: ", ";\n }\n"], ["\n position: relative;\n input {\n border-color: ", ";\n }\n"])), function (_a) {
|
|
14033
14038
|
var theme = _a.theme, status = _a.status, hasError = _a.hasError;
|
|
14034
14039
|
return hasError ? '' : containerByStatus(theme, status);
|
|
14035
14040
|
});
|
|
@@ -14130,7 +14135,7 @@ var BaseInput = function (_a) {
|
|
|
14130
14135
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
14131
14136
|
}, [status]);
|
|
14132
14137
|
var hasValue = Boolean(value);
|
|
14133
|
-
return (jsxs$1(Container$
|
|
14138
|
+
return (jsxs$1(Container$M, __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) {
|
|
14134
14139
|
onChange(event.target.value, event);
|
|
14135
14140
|
}, 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 () {
|
|
14136
14141
|
onChange('', { target: { value: '' } });
|
|
@@ -14151,7 +14156,7 @@ var Button$4 = function (_a) {
|
|
|
14151
14156
|
throw new Error("Invalid button variant ".concat(variant));
|
|
14152
14157
|
};
|
|
14153
14158
|
|
|
14154
|
-
var Container$
|
|
14159
|
+
var Container$L = newStyled.div(templateObject_1$12 || (templateObject_1$12 = __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) {
|
|
14155
14160
|
var theme = _a.theme;
|
|
14156
14161
|
return theme.component.inputCustom.input.borderRadius;
|
|
14157
14162
|
});
|
|
@@ -14170,7 +14175,7 @@ var Custom = function (_a) {
|
|
|
14170
14175
|
text: text,
|
|
14171
14176
|
disabled: rest.disabled,
|
|
14172
14177
|
}); }, [variant, onClick, text, rest.disabled]);
|
|
14173
|
-
return (jsx$1(Container$
|
|
14178
|
+
return (jsx$1(Container$L, __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$4, __assign$1({}, props), void 0) }), void 0) }), void 0) }), void 0));
|
|
14174
14179
|
};
|
|
14175
14180
|
var templateObject_1$12, templateObject_2$O;
|
|
14176
14181
|
|
|
@@ -14205,12 +14210,12 @@ var BasePlusButton = function (_a) {
|
|
|
14205
14210
|
};
|
|
14206
14211
|
var templateObject_1$10;
|
|
14207
14212
|
|
|
14208
|
-
var Container$
|
|
14213
|
+
var Container$K = newStyled.div(templateObject_1$$ || (templateObject_1$$ = __makeTemplateObject(["\n input {\n padding-right: 2.688rem;\n }\n"], ["\n input {\n padding-right: 2.688rem;\n }\n"])));
|
|
14209
14214
|
var IconContainer$3 = newStyled.div(templateObject_2$M || (templateObject_2$M = __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"])));
|
|
14210
14215
|
var BasePlusIcon = function (_a) {
|
|
14211
14216
|
var Icon = _a.Icon, rest = __rest(_a, ["Icon"]);
|
|
14212
14217
|
var theme = useTheme();
|
|
14213
|
-
return (jsx$1(Container$
|
|
14218
|
+
return (jsx$1(Container$K, { 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));
|
|
14214
14219
|
};
|
|
14215
14220
|
var templateObject_1$$, templateObject_2$M;
|
|
14216
14221
|
|
|
@@ -14257,7 +14262,7 @@ function usePreventVerticalScroll(ref, dragThreshold) {
|
|
|
14257
14262
|
}, [preventTouch, ref, touchStart]);
|
|
14258
14263
|
}
|
|
14259
14264
|
|
|
14260
|
-
var Container$
|
|
14265
|
+
var Container$J = newStyled.div(templateObject_1$_ || (templateObject_1$_ = __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) {
|
|
14261
14266
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
14262
14267
|
return borderRadiusVariant &&
|
|
14263
14268
|
"\n border-radius: 40px;\n ";
|
|
@@ -14327,7 +14332,7 @@ var ImageProductSlide = function (_a) {
|
|
|
14327
14332
|
}
|
|
14328
14333
|
}
|
|
14329
14334
|
}, [contents, selectedValue]);
|
|
14330
|
-
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$
|
|
14335
|
+
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$J, __assign$1({ "data-testid": testId, borderRadiusVariant: borderRadiusVariant, ref: sliderWrapper }, { children: jsx$1(Slider$1, __assign$1({ afterChange: function (e) {
|
|
14331
14336
|
var _a;
|
|
14332
14337
|
var activeSlide = contents[e];
|
|
14333
14338
|
// If autoplay is true and iframe is the active slide, play the video
|
|
@@ -14349,12 +14354,12 @@ var ImageProductSlide = function (_a) {
|
|
|
14349
14354
|
};
|
|
14350
14355
|
var templateObject_1$_, templateObject_2$L, templateObject_3$E, templateObject_4$v, templateObject_5$o, templateObject_6$m;
|
|
14351
14356
|
|
|
14352
|
-
var Container$
|
|
14357
|
+
var Container$I = newStyled.div(templateObject_1$Z || (templateObject_1$Z = __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"])));
|
|
14353
14358
|
var ProductGalleryMobile = function (_a) {
|
|
14354
14359
|
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;
|
|
14355
14360
|
var _e = useState(0), activeIndex = _e[0], setActiveIndex = _e[1];
|
|
14356
14361
|
var selectedContent = hasToPreserveOrder ? images === null || images === void 0 ? void 0 : images[activeIndex] : selectedValue;
|
|
14357
|
-
return (jsx$1(Container$
|
|
14362
|
+
return (jsx$1(Container$I, __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));
|
|
14358
14363
|
};
|
|
14359
14364
|
var templateObject_1$Z;
|
|
14360
14365
|
|
|
@@ -14630,12 +14635,12 @@ var ArrowButton = function (_a) {
|
|
|
14630
14635
|
};
|
|
14631
14636
|
var templateObject_1$Y;
|
|
14632
14637
|
|
|
14633
|
-
var Container$
|
|
14638
|
+
var Container$H = newStyled.div(templateObject_1$X || (templateObject_1$X = __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"])));
|
|
14634
14639
|
var range = function (limit) { return __spreadArray([], new Array(limit), true).map(function (_, index) { return index; }); };
|
|
14635
14640
|
var SlideDots = function (_a) {
|
|
14636
14641
|
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, containerDataTestId = _a.containerDataTestId;
|
|
14637
14642
|
var theme = useTheme();
|
|
14638
|
-
return (jsx$1(Container$
|
|
14643
|
+
return (jsx$1(Container$H, __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
|
|
14639
14644
|
? theme.component.slideNavigation.slideDots.selectedDotColor
|
|
14640
14645
|
: 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));
|
|
14641
14646
|
};
|
|
@@ -14657,7 +14662,7 @@ var SlideNavigation = function (_a) {
|
|
|
14657
14662
|
};
|
|
14658
14663
|
var templateObject_1$W, templateObject_2$K, templateObject_3$D;
|
|
14659
14664
|
|
|
14660
|
-
var Container$
|
|
14665
|
+
var Container$G = newStyled.div(templateObject_1$V || (templateObject_1$V = __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) {
|
|
14661
14666
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
14662
14667
|
return borderRadiusVariant &&
|
|
14663
14668
|
"\n border-radius: 40px;\n ";
|
|
@@ -14667,11 +14672,11 @@ var BottomTagContainer$4 = newStyled.div(templateObject_3$C || (templateObject_3
|
|
|
14667
14672
|
var ImageProductSlideV2 = forwardRef(function ImageProductWithTags(_a, ref) {
|
|
14668
14673
|
var _b, _c;
|
|
14669
14674
|
var image = _a.image, topTag = _a.topTag, bottomTag = _a.bottomTag, testId = _a.testId, borderRadiusVariant = _a.borderRadiusVariant;
|
|
14670
|
-
return (jsxs$1(Container$
|
|
14675
|
+
return (jsxs$1(Container$G, __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$4, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsx$1(BottomTagContainer$4, { 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));
|
|
14671
14676
|
});
|
|
14672
14677
|
var templateObject_1$V, templateObject_2$J, templateObject_3$C;
|
|
14673
14678
|
|
|
14674
|
-
var Container$
|
|
14679
|
+
var Container$F = newStyled.div(templateObject_1$U || (templateObject_1$U = __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"])));
|
|
14675
14680
|
var ProductGalleryMobileV2 = function (_a) {
|
|
14676
14681
|
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;
|
|
14677
14682
|
var _c = useState(0), index = _c[0], setIndex = _c[1];
|
|
@@ -14693,11 +14698,11 @@ var ProductGalleryMobileV2 = function (_a) {
|
|
|
14693
14698
|
useEffect(function () {
|
|
14694
14699
|
setSelectedImage(images[index]);
|
|
14695
14700
|
}, [index, images]);
|
|
14696
|
-
return (jsxs$1(Container$
|
|
14701
|
+
return (jsxs$1(Container$F, __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));
|
|
14697
14702
|
};
|
|
14698
14703
|
var templateObject_1$U;
|
|
14699
14704
|
|
|
14700
|
-
var Container$
|
|
14705
|
+
var Container$E = newStyled.div(templateObject_1$T || (templateObject_1$T = __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) {
|
|
14701
14706
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
14702
14707
|
return borderRadiusVariant &&
|
|
14703
14708
|
"\n border-radius: 40px;\n ";
|
|
@@ -14758,7 +14763,7 @@ var ImageProductSlideV3 = function (_a) {
|
|
|
14758
14763
|
}
|
|
14759
14764
|
}
|
|
14760
14765
|
}, [images, selectedValue]);
|
|
14761
|
-
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$
|
|
14766
|
+
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$E, __assign$1({ "data-testid": testId, borderRadiusVariant: borderRadiusVariant, ref: sliderWrapper }, { children: jsx$1(Slider$1, __assign$1({ afterChange: function (e) {
|
|
14762
14767
|
var _a;
|
|
14763
14768
|
var activeSlide = images[e];
|
|
14764
14769
|
// If autoplay is true and iframe is the active slide, play the video
|
|
@@ -14773,10 +14778,10 @@ var ImageProductSlideV3 = function (_a) {
|
|
|
14773
14778
|
};
|
|
14774
14779
|
var templateObject_1$T, templateObject_2$I, templateObject_3$B, templateObject_4$u, templateObject_5$n, templateObject_6$l, templateObject_7$j, templateObject_8$d, templateObject_9$9;
|
|
14775
14780
|
|
|
14776
|
-
var Container$
|
|
14781
|
+
var Container$D = newStyled.div(templateObject_1$S || (templateObject_1$S = __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"])));
|
|
14777
14782
|
var ProductGalleryMobileV3 = function (_a) {
|
|
14778
14783
|
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;
|
|
14779
|
-
return (jsx$1(Container$
|
|
14784
|
+
return (jsx$1(Container$D, __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));
|
|
14780
14785
|
};
|
|
14781
14786
|
var templateObject_1$S;
|
|
14782
14787
|
|
|
@@ -14845,7 +14850,7 @@ var MainContent = function (_a) {
|
|
|
14845
14850
|
useEffect(function () {
|
|
14846
14851
|
showArrows();
|
|
14847
14852
|
}, [selectedImageIndex]);
|
|
14848
|
-
return (jsx$1(Container$
|
|
14853
|
+
return (jsx$1(Container$J, __assign$1({ "data-testid": testId, borderRadiusVariant: borderRadiusVariant, ref: sliderWrapper }, { children: jsx$1(Slider$1, __assign$1({ afterChange: function (e) { return afterChangeSlide({
|
|
14849
14854
|
slide: e,
|
|
14850
14855
|
contents: contents,
|
|
14851
14856
|
setSelectedImageIndex: setSelectedImageIndex,
|
|
@@ -14864,7 +14869,7 @@ var MainContent = function (_a) {
|
|
|
14864
14869
|
}) }), void 0) }), void 0));
|
|
14865
14870
|
};
|
|
14866
14871
|
|
|
14867
|
-
var Container$
|
|
14872
|
+
var Container$C = newStyled.div({
|
|
14868
14873
|
padding: '1rem',
|
|
14869
14874
|
paddingTop: '2rem',
|
|
14870
14875
|
gap: '0.5rem',
|
|
@@ -14916,16 +14921,17 @@ var Slider = function (_a) {
|
|
|
14916
14921
|
block: 'nearest',
|
|
14917
14922
|
});
|
|
14918
14923
|
}, [selectedImageIndex, test]);
|
|
14919
|
-
return (jsx$1(Container$
|
|
14924
|
+
return (jsx$1(Container$C, { 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: {
|
|
14920
14925
|
border: isTheActiveImage(i) ? getBorderColor() : borderImageInactive,
|
|
14921
14926
|
} }, void 0) }), img.key)); }) }, void 0));
|
|
14922
14927
|
};
|
|
14923
14928
|
|
|
14924
|
-
var Container$
|
|
14929
|
+
var Container$B = newStyled.div({
|
|
14925
14930
|
background: 'var(--truekind-default-secondary, #292929)',
|
|
14926
14931
|
height: '100vh',
|
|
14927
14932
|
width: '100vw',
|
|
14928
14933
|
position: 'fixed',
|
|
14934
|
+
zIndex: '9999',
|
|
14929
14935
|
top: 0,
|
|
14930
14936
|
left: 0,
|
|
14931
14937
|
});
|
|
@@ -14934,13 +14940,19 @@ var Header$2 = newStyled.div({
|
|
|
14934
14940
|
justifyContent: 'end',
|
|
14935
14941
|
alignItems: 'center',
|
|
14936
14942
|
color: 'white',
|
|
14937
|
-
padding: '
|
|
14938
|
-
paddingBottom: '2rem',
|
|
14943
|
+
padding: '1.2rem',
|
|
14939
14944
|
});
|
|
14940
14945
|
var IconContainer$2 = newStyled.div({
|
|
14941
14946
|
backgroundColor: '#E5E5E5',
|
|
14942
14947
|
padding: '4px 7px 7px 6px',
|
|
14943
14948
|
borderRadius: '50%',
|
|
14949
|
+
});
|
|
14950
|
+
newStyled.div({
|
|
14951
|
+
display: 'flex',
|
|
14952
|
+
flexDirection: 'column',
|
|
14953
|
+
height: '100%',
|
|
14954
|
+
justifyContent: 'space-around',
|
|
14955
|
+
padding: '20px 0'
|
|
14944
14956
|
});
|
|
14945
14957
|
|
|
14946
14958
|
var GalleryDetailed = function (_a) {
|
|
@@ -14948,7 +14960,7 @@ var GalleryDetailed = function (_a) {
|
|
|
14948
14960
|
function closeGallery() {
|
|
14949
14961
|
setGalleryOpened(false);
|
|
14950
14962
|
}
|
|
14951
|
-
return (jsxs$1(Container$
|
|
14963
|
+
return (jsxs$1(Container$B, { children: [jsx$1(Header$2, { children: jsx$1(IconContainer$2, __assign$1({ onClick: closeGallery }, { children: jsx$1(Icon.Actions.Close, { height: 1.1, width: 1.1 }, void 0) }), void 0) }, void 0), 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));
|
|
14952
14964
|
};
|
|
14953
14965
|
|
|
14954
14966
|
var TopTagContainer$2 = newStyled.div(templateObject_1$R || (templateObject_1$R = __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'); });
|
|
@@ -14980,7 +14992,7 @@ var ContentGallery = function (_a) {
|
|
|
14980
14992
|
var _a;
|
|
14981
14993
|
(_a = slick.current) === null || _a === void 0 ? void 0 : _a.slickGoTo(selectedImageIndex, true);
|
|
14982
14994
|
}, [contents, selectedImageIndex]);
|
|
14983
|
-
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$
|
|
14995
|
+
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$J, __assign$1({ "data-testid": testId, borderRadiusVariant: borderRadiusVariant, ref: sliderWrapper }, { children: jsx$1(Slider$1, __assign$1({ afterChange: function (e) { return afterChangeSlide({
|
|
14984
14996
|
slide: e,
|
|
14985
14997
|
contents: contents,
|
|
14986
14998
|
setSelectedImageIndex: setSelectedImageIndex,
|
|
@@ -14994,9 +15006,6 @@ var ContentGallery = function (_a) {
|
|
|
14994
15006
|
}) }), void 0) }), void 0)] }, void 0));
|
|
14995
15007
|
};
|
|
14996
15008
|
|
|
14997
|
-
var Container$B = newStyled.div({
|
|
14998
|
-
height: '100vh',
|
|
14999
|
-
});
|
|
15000
15009
|
var MobileGallery = function (_a) {
|
|
15001
15010
|
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;
|
|
15002
15011
|
var _e = useState(selectedValue), selectedImageIndex = _e[0], setSelectedImageIndex = _e[1];
|
|
@@ -15004,7 +15013,7 @@ var MobileGallery = function (_a) {
|
|
|
15004
15013
|
useEffect(function () {
|
|
15005
15014
|
setSelectedImageIndex(selectedValue);
|
|
15006
15015
|
}, [selectedValue]);
|
|
15007
|
-
return (jsx$1(
|
|
15016
|
+
return (jsx$1("div", { 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, customClick: customClick, topTag: topTag, topRightTag: topRightTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant, itemsOnViewport: itemsOnViewport, selectedImageIndex: selectedImageIndex, setSelectedImageIndex: setSelectedImageIndex, setGalleryOpened: setGalleryOpened }, void 0)) }, void 0));
|
|
15008
15017
|
};
|
|
15009
15018
|
|
|
15010
15019
|
var __defProp$1 = Object.defineProperty;
|