@trafilea/afrodita-components 6.34.5 → 6.34.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/index.esm.js +118 -114
- package/build/index.esm.js.map +1 -1
- package/build/index.js +118 -114
- package/build/index.js.map +1 -1
- package/package.json +1 -1
package/build/index.js
CHANGED
|
@@ -3207,7 +3207,7 @@ var getStylesBySize$g = function (size) {
|
|
|
3207
3207
|
};
|
|
3208
3208
|
}
|
|
3209
3209
|
};
|
|
3210
|
-
var Container$
|
|
3210
|
+
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) {
|
|
3211
3211
|
var backgroundColor = _a.backgroundColor;
|
|
3212
3212
|
return backgroundColor;
|
|
3213
3213
|
}, function (_a) {
|
|
@@ -3244,7 +3244,7 @@ var H3$3 = newStyled.h3(templateObject_2$1D || (templateObject_2$1D = __makeTemp
|
|
|
3244
3244
|
var ClubOfferTag = function (_a) {
|
|
3245
3245
|
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 ? exports.ComponentSize.Medium : _e, style = _a.style;
|
|
3246
3246
|
var theme = useTheme();
|
|
3247
|
-
return (jsxRuntime.jsx(Container$
|
|
3247
|
+
return (jsxRuntime.jsx(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: jsxRuntime.jsx(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));
|
|
3248
3248
|
};
|
|
3249
3249
|
var templateObject_1$2h, templateObject_2$1D;
|
|
3250
3250
|
|
|
@@ -3277,7 +3277,7 @@ var getStylesBySize$f = function (size, bordersRounded, theme) {
|
|
|
3277
3277
|
};
|
|
3278
3278
|
}
|
|
3279
3279
|
};
|
|
3280
|
-
var Container$
|
|
3280
|
+
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) {
|
|
3281
3281
|
var backgroundColor = _a.backgroundColor;
|
|
3282
3282
|
return backgroundColor;
|
|
3283
3283
|
}, function (_a) {
|
|
@@ -3314,7 +3314,7 @@ var H3$2 = newStyled.h3(templateObject_2$1C || (templateObject_2$1C = __makeTemp
|
|
|
3314
3314
|
var DiscountTag$3 = function (_a) {
|
|
3315
3315
|
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 ? exports.ComponentSize.Medium : _f, style = _a.style, _g = _a.bordersRounded, bordersRounded = _g === void 0 ? false : _g;
|
|
3316
3316
|
var theme = useTheme();
|
|
3317
|
-
return (jsxRuntime.jsx(Container$
|
|
3317
|
+
return (jsxRuntime.jsx(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: jsxRuntime.jsxs(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));
|
|
3318
3318
|
};
|
|
3319
3319
|
var templateObject_1$2g, templateObject_2$1C;
|
|
3320
3320
|
|
|
@@ -3425,7 +3425,7 @@ var getFontSize = function (size, theme, finalPriceStyled, finalPriceStyledSmall
|
|
|
3425
3425
|
return (_c = getStylesBySize$e(size, theme)) === null || _c === void 0 ? void 0 : _c.fontSize;
|
|
3426
3426
|
}
|
|
3427
3427
|
};
|
|
3428
|
-
var Container$
|
|
3428
|
+
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"])));
|
|
3429
3429
|
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) {
|
|
3430
3430
|
var weight = _a.weight;
|
|
3431
3431
|
return (weight ? weight : '400');
|
|
@@ -3481,7 +3481,7 @@ var PriceLabel$1 = function (_a) {
|
|
|
3481
3481
|
: exports.ComponentSize.XSmall;
|
|
3482
3482
|
return (jsxRuntime.jsx(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));
|
|
3483
3483
|
};
|
|
3484
|
-
return (jsxRuntime.jsxs(Container$
|
|
3484
|
+
return (jsxRuntime.jsxs(Container$1k, __assign$1({}, rest, { id: "priceLabel" }, { children: [clubStyle ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [!!originalPrice && jsxRuntime.jsx(OriginalPrice, {}, void 0), jsxRuntime.jsx(Price, __assign$1({ margin: true, "data-testid": getTestId$1(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: finalPrice }), void 0)] }, void 0)) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Price, __assign$1({ margin: true, "data-testid": getTestId$1(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: finalPrice }), void 0), !!originalPrice && jsxRuntime.jsx(OriginalPrice, {}, void 0)] }, void 0)), discount && (jsxRuntime.jsx(TagContainer, __assign$1({ size: size }, { children: jsxRuntime.jsx(DiscountTag$3, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
|
|
3485
3485
|
};
|
|
3486
3486
|
var templateObject_1$2f, templateObject_2$1B, templateObject_3$1e;
|
|
3487
3487
|
|
|
@@ -3538,7 +3538,7 @@ var PriceLabelV2$1 = function (_a) {
|
|
|
3538
3538
|
var savetoString = saveto.toFixed(2);
|
|
3539
3539
|
var OriginalPrice = function () { return (jsxRuntime.jsx(Price, __assign$1({ size: originalPriceStyled ? size : exports.ComponentSize.Small, color: theme.component.pricing.priceLabel.price.originalPriceColor ||
|
|
3540
3540
|
theme.colors.shades['300'].color, margin: true, underlined: originalPriceUnderlined, "data-testid": getTestId$1(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
|
|
3541
|
-
return (jsxRuntime.jsxs(Container$
|
|
3541
|
+
return (jsxRuntime.jsxs(Container$1k, __assign$1({}, rest, { id: "priceLabelV2" }, { children: [isOriginalPrice && jsxRuntime.jsx(OriginalPrice, {}, void 0), jsxRuntime.jsxs(FinalPriceStyledContainer$3, __assign$1({ "data-testid": getTestId$1(testId, 'final-product-price') }, { children: [jsxRuntime.jsx(Price, __assign$1({ margin: true, finalPriceStyledSmall: true }, priceCommonProps, { size: size }, { children: currencySymbol }), void 0), jsxRuntime.jsx(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size }, { children: finalPriceArray[0]
|
|
3542
3542
|
? finalPriceArray[0]
|
|
3543
3543
|
: (_b = "".concat(productFinalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1] }), void 0), jsxRuntime.jsx(Price, __assign$1({ finalPriceStyledSmall: true, style: {
|
|
3544
3544
|
marginTop: '-6px',
|
|
@@ -3613,7 +3613,7 @@ var PriceLabelV3 = function (_a) {
|
|
|
3613
3613
|
return null;
|
|
3614
3614
|
return (jsxRuntime.jsxs(DiscountEachOneContainer, __assign$1({ "data-testid": getTestId$1(testId, 'each-one-price') }, { children: [jsxRuntime.jsxs(Price, __assign$1({}, priceCommonProps, { weight: 600 }, { children: ["(", packUnitPrice] }), void 0), jsxRuntime.jsx(Price, __assign$1({}, priceCommonProps, { weight: 400 }, { children: "/each" }), void 0), jsxRuntime.jsx(Price, __assign$1({}, priceCommonProps, { weight: 600 }, { children: ")" }), void 0)] }), void 0));
|
|
3615
3615
|
};
|
|
3616
|
-
return (jsxRuntime.jsxs(ContainerDirectionColumn, __assign$1({}, rest, { children: [jsxRuntime.jsx(Container$
|
|
3616
|
+
return (jsxRuntime.jsxs(ContainerDirectionColumn, __assign$1({}, rest, { children: [jsxRuntime.jsx(Container$1k, __assign$1({ style: { paddingBottom: '0.5rem' } }, { children: isOriginalPrice && jsxRuntime.jsx(OriginalPrice, {}, void 0) }), void 0), jsxRuntime.jsxs(Container$1k, { children: [jsxRuntime.jsxs(FinalPriceStyledContainer$2, __assign$1({ "data-testid": getTestId$1(testId, 'final-product-price') }, { children: [jsxRuntime.jsx(Price, __assign$1({ margin: true, finalPriceStyledSmall: true, style: {
|
|
3617
3617
|
marginTop: '-5px',
|
|
3618
3618
|
} }, priceCommonProps, { size: size }, { children: currencySymbol }), void 0), jsxRuntime.jsx(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), jsxRuntime.jsx(Price, __assign$1({ finalPriceStyledSmall: true, style: {
|
|
3619
3619
|
marginTop: '-6px',
|
|
@@ -3659,7 +3659,7 @@ var PriceLabel = function (_a) {
|
|
|
3659
3659
|
};
|
|
3660
3660
|
var OriginalPrice = function () { return (jsxRuntime.jsx(Price, __assign$1({ size: originalPriceStyled ? size : exports.ComponentSize.Small, color: theme.component.pricing.priceLabel.price.originalPriceColor ||
|
|
3661
3661
|
theme.colors.shades['300'].color, margin: true, underlined: originalPriceUnderlined, "data-testid": getTestId$1(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
|
|
3662
|
-
return (jsxRuntime.jsxs(Container$
|
|
3662
|
+
return (jsxRuntime.jsxs(Container$1k, __assign$1({}, rest, { children: [isOriginalPrice && !isClubOffer && jsxRuntime.jsx(OriginalPrice, {}, void 0), jsxRuntime.jsxs(FinalPriceStyledContainer$1, __assign$1({ "data-testid": getTestId$1(testId, 'final-product-price') }, { children: [jsxRuntime.jsx(Price, __assign$1({ margin: true, finalPriceStyledSmall: true, style: {
|
|
3663
3663
|
marginTop: '-5px',
|
|
3664
3664
|
} }, priceCommonProps, { size: size }, { children: currencySymbol }), void 0), jsxRuntime.jsx(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), jsxRuntime.jsx(Price, __assign$1({ finalPriceStyledSmall: true, style: {
|
|
3665
3665
|
marginTop: '-6px',
|
|
@@ -3698,7 +3698,7 @@ var PriceLabelV2 = function (_a) {
|
|
|
3698
3698
|
var finalPriceString = finalPriceArray[0]
|
|
3699
3699
|
? finalPriceArray[0]
|
|
3700
3700
|
: (_b = "".concat(finalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1];
|
|
3701
|
-
return (jsxRuntime.jsxs(Container$
|
|
3701
|
+
return (jsxRuntime.jsxs(Container$1k, __assign$1({}, rest, { children: [isOriginalPrice && !isClubOffer && jsxRuntime.jsx(OriginalPrice, {}, void 0), jsxRuntime.jsxs(FinalPriceStyledContainer, __assign$1({ "data-testid": getTestId$1(testId, 'final-product-price'), style: { marginLeft: '-3px' } }, { children: [jsxRuntime.jsxs(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size }, { children: [currencySymbol, finalPriceString] }), void 0), jsxRuntime.jsx(Price, __assign$1({ finalPriceStyledSmall: true }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }), void 0)] }), void 0));
|
|
3702
3702
|
};
|
|
3703
3703
|
var templateObject_1$2b;
|
|
3704
3704
|
|
|
@@ -3713,7 +3713,7 @@ function ClubPriceMemberLabel(_a) {
|
|
|
3713
3713
|
return (jsxRuntime.jsx("div", { children: isClub ? (jsxRuntime.jsxs(ContainerWrapper$2, __assign$1({ id: "priceMemberLabelWrapper" }, { children: [PriceComponent, jsxRuntime.jsx(ImgWrapper, __assign$1({ id: "priceMemberLabelImgWrapper" }, { children: icon }), void 0)] }), void 0)) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: PriceComponent }, void 0)) }, void 0));
|
|
3714
3714
|
}
|
|
3715
3715
|
|
|
3716
|
-
var Container$
|
|
3716
|
+
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) {
|
|
3717
3717
|
var height = _a.height;
|
|
3718
3718
|
return height !== null && height !== void 0 ? height : '1.5em';
|
|
3719
3719
|
}, function (_a) {
|
|
@@ -3738,7 +3738,7 @@ var Container$1k = newStyled.div(templateObject_1$29 || (templateObject_1$29 = _
|
|
|
3738
3738
|
var SkeletonBox = function (_a) {
|
|
3739
3739
|
var width = _a.width, height = _a.height;
|
|
3740
3740
|
var theme = useTheme();
|
|
3741
|
-
return jsxRuntime.jsx(Container$
|
|
3741
|
+
return jsxRuntime.jsx(Container$1j, { "data-testid": "skeleton-container", width: width, height: height, theme: theme }, void 0);
|
|
3742
3742
|
};
|
|
3743
3743
|
var templateObject_1$29;
|
|
3744
3744
|
|
|
@@ -4936,7 +4936,7 @@ var DEFAULTS = {
|
|
|
4936
4936
|
};
|
|
4937
4937
|
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;
|
|
4938
4938
|
|
|
4939
|
-
var Container$
|
|
4939
|
+
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"])));
|
|
4940
4940
|
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"])));
|
|
4941
4941
|
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"])));
|
|
4942
4942
|
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"])));
|
|
@@ -4944,7 +4944,7 @@ var Check$1 = newStyled.div(templateObject_5$I || (templateObject_5$I = __makeTe
|
|
|
4944
4944
|
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"])));
|
|
4945
4945
|
var PackSelectorV2 = function (_a) {
|
|
4946
4946
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange, currencyCode = _a.currencyCode;
|
|
4947
|
-
return (jsxRuntime.jsx(Container$
|
|
4947
|
+
return (jsxRuntime.jsx(Container$1i, __assign$1({ role: "radiogroup" }, { children: packs.map(function (pack) {
|
|
4948
4948
|
return (jsxRuntime.jsx(PackCard$1, { pack: pack, onChange: onChange, selected: selectedValue === pack, currencyCode: currencyCode }, pack.label));
|
|
4949
4949
|
}) }), void 0));
|
|
4950
4950
|
};
|
|
@@ -4968,23 +4968,23 @@ var PackCard$1 = function (_a) {
|
|
|
4968
4968
|
};
|
|
4969
4969
|
var templateObject_1$24, templateObject_2$1v, templateObject_3$1a, templateObject_4$X, templateObject_5$I, templateObject_6$D;
|
|
4970
4970
|
|
|
4971
|
-
var Container$
|
|
4971
|
+
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"])));
|
|
4972
4972
|
var DropContainer = newStyled.div(templateObject_2$1u || (templateObject_2$1u = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
4973
4973
|
var DropList = function (_a) {
|
|
4974
4974
|
var dropTotal = _a.dropTotal, drops = _a.drops;
|
|
4975
|
-
return (jsxRuntime.jsx(Container$
|
|
4975
|
+
return (jsxRuntime.jsx(Container$1h, { children: __spreadArray([], new Array(dropTotal), true).map(function (_, index) {
|
|
4976
4976
|
return (jsxRuntime.jsx(DropContainer, __assign$1({ "data-testid": "star-container" }, { children: index < Math.floor(drops) ? (jsxRuntime.jsx(Icon.PDP.Drop, { width: 0.875, height: 0.875 }, void 0)) : (jsxRuntime.jsx(Icon.PDP.DropEmpty, { width: 0.875, height: 0.875 }, void 0)) }), index));
|
|
4977
4977
|
}) }, void 0));
|
|
4978
4978
|
};
|
|
4979
4979
|
var templateObject_1$23, templateObject_2$1u;
|
|
4980
4980
|
|
|
4981
4981
|
var DROPS_TOTAL = 5;
|
|
4982
|
-
var Container$
|
|
4982
|
+
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"])));
|
|
4983
4983
|
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"])));
|
|
4984
4984
|
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"])));
|
|
4985
4985
|
var AbsorbencyLevel = function (_a) {
|
|
4986
4986
|
var dropTotal = _a.dropTotal, drops = _a.drops, absorbencyTitle = _a.absorbencyTitle, absorbencyDescription = _a.absorbencyDescription;
|
|
4987
|
-
return (jsxRuntime.jsxs(Container$
|
|
4987
|
+
return (jsxRuntime.jsxs(Container$1g, { children: [jsxRuntime.jsx(Title$b, { children: absorbencyTitle }, void 0), jsxRuntime.jsx(DropList, { dropTotal: dropTotal || DROPS_TOTAL, drops: drops }, void 0), jsxRuntime.jsx(Description$3, { children: absorbencyDescription }, void 0)] }, void 0));
|
|
4988
4988
|
};
|
|
4989
4989
|
var templateObject_1$22, templateObject_2$1t, templateObject_3$19;
|
|
4990
4990
|
|
|
@@ -5088,7 +5088,7 @@ var Accordion$1 = function (_a) {
|
|
|
5088
5088
|
};
|
|
5089
5089
|
var templateObject_1$21;
|
|
5090
5090
|
|
|
5091
|
-
var Container$
|
|
5091
|
+
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"])));
|
|
5092
5092
|
var AccordionOptions = function (_a) {
|
|
5093
5093
|
var titleColor = _a.titleColor, accordions = _a.accordions;
|
|
5094
5094
|
var _b = React$2.useState({
|
|
@@ -5101,7 +5101,7 @@ var AccordionOptions = function (_a) {
|
|
|
5101
5101
|
}
|
|
5102
5102
|
return false;
|
|
5103
5103
|
};
|
|
5104
|
-
return (jsxRuntime.jsx(Container$
|
|
5104
|
+
return (jsxRuntime.jsx(Container$1f, { children: accordions.map(function (accordion, index) {
|
|
5105
5105
|
var forceOpenValue = getForceOpen(index);
|
|
5106
5106
|
var accordionTitleColor = forceOpenValue && openAccordionIndex.open ? titleColor : undefined;
|
|
5107
5107
|
return (jsxRuntime.jsx(Accordion$1, __assign$1({ onClick: function () {
|
|
@@ -5252,7 +5252,7 @@ var Bold = newStyled.span(templateObject_1$1$ || (templateObject_1$1$ = __makeTe
|
|
|
5252
5252
|
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"])));
|
|
5253
5253
|
var templateObject_1$1$, templateObject_2$1s;
|
|
5254
5254
|
|
|
5255
|
-
var Container$
|
|
5255
|
+
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) {
|
|
5256
5256
|
var _b = _a.width, width = _b === void 0 ? '100%' : _b;
|
|
5257
5257
|
return width;
|
|
5258
5258
|
}, function (_a) {
|
|
@@ -5268,7 +5268,7 @@ var templateObject_1$1_, templateObject_2$1r, templateObject_3$18, templateObjec
|
|
|
5268
5268
|
var CouponCard = function (_a) {
|
|
5269
5269
|
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;
|
|
5270
5270
|
var _c = React$2.useState(false), showCoupon = _c[0], setShowCoupon = _c[1];
|
|
5271
|
-
return (jsxRuntime.jsxs(Container$
|
|
5271
|
+
return (jsxRuntime.jsxs(Container$1e, __assign$1({ height: height, width: width }, { children: [jsxRuntime.jsx(LeftSide, { children: jsxRuntime.jsx(Image$3, { objectFit: "cover", src: image.src, alt: image.alt, width: "100%", height: "100%", borderRadius: "8px 0 0 8px" }, void 0) }, void 0), jsxRuntime.jsxs(RightSide, { children: [jsxRuntime.jsxs(FlexStart, { children: [jsxRuntime.jsx(Text$7, __assign$1({ variant: "body", weight: "bold", size: "small" }, { children: title }), void 0), content] }, void 0), jsxRuntime.jsx(FlexCentered, { children: !showCoupon ? (jsxRuntime.jsx(ButtonPrimary, { type: "button", text: btnText, wide: true, size: exports.ComponentSize.Large, onClick: function () {
|
|
5272
5272
|
onClickRedeemOfferHandler && onClickRedeemOfferHandler();
|
|
5273
5273
|
setShowCoupon(function (prev) { return !prev; });
|
|
5274
5274
|
} }, void 0)) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ButtonSecondaryOutline, { "data-testid": "coupon-code-btn", testId: "coupon-code-btn", type: "button", text: couponCode !== null && couponCode !== void 0 ? couponCode : '', wide: true, size: exports.ComponentSize.Small, icon: {
|
|
@@ -5579,7 +5579,7 @@ var CustomCheckboxStyles = {
|
|
|
5579
5579
|
},
|
|
5580
5580
|
};
|
|
5581
5581
|
|
|
5582
|
-
var Container$
|
|
5582
|
+
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"])));
|
|
5583
5583
|
var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (props) { return [
|
|
5584
5584
|
CustomCheckboxStyles[props.size](props.theme),
|
|
5585
5585
|
CustomCheckboxStyles[props.variant](props.theme, props.isChecked, props.disabled),
|
|
@@ -5604,7 +5604,7 @@ var Checkbox = function (_a) {
|
|
|
5604
5604
|
}
|
|
5605
5605
|
onChange(e.target.checked);
|
|
5606
5606
|
};
|
|
5607
|
-
return (jsxRuntime.jsxs(Container$
|
|
5607
|
+
return (jsxRuntime.jsxs(Container$1d, { children: [jsxRuntime.jsx(Input$5, { type: "checkbox", checked: checked, disabled: disabled, onChange: handleChange, id: id }, void 0), jsxRuntime.jsx(CustomCheckbox, __assign$1({ theme: theme, size: size, disabled: disabled, isChecked: checked, "data-testid": "checkbox", variant: variant, backgroundColor: backgroundColor, text: text }, { children: checked && jsxRuntime.jsx(Icon.Actions.Check, { fill: "#fff" }, void 0) }), void 0), jsxRuntime.jsx(Label$6, __assign$1({ "data-testid": "checkbox-text", size: size, variant: checked ? 'demi' : 'regular', htmlFor: id, disabled: disabled }, { children: text }), void 0)] }, void 0));
|
|
5608
5608
|
};
|
|
5609
5609
|
var templateObject_1$1W, templateObject_2$1p;
|
|
5610
5610
|
|
|
@@ -5655,7 +5655,7 @@ var BaseDropdown$1 = Object.assign(BaseDropdown, {
|
|
|
5655
5655
|
Option: BaseDropdownOption,
|
|
5656
5656
|
});
|
|
5657
5657
|
|
|
5658
|
-
var Container$
|
|
5658
|
+
var Container$1c = newStyled.div(templateObject_1$1V || (templateObject_1$1V = __makeTemplateObject([""], [""])));
|
|
5659
5659
|
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"])));
|
|
5660
5660
|
var SelectedOption = newStyled.span(templateObject_3$17 || (templateObject_3$17 = __makeTemplateObject(["\n font-weight: ", ";\n"], ["\n font-weight: ", ";\n"])), function (_a) {
|
|
5661
5661
|
var fontWeight = _a.fontWeight;
|
|
@@ -5690,7 +5690,7 @@ function SimpleDropdown(_a) {
|
|
|
5690
5690
|
}
|
|
5691
5691
|
setSelectedValue(value);
|
|
5692
5692
|
}, [value, options, initialValue]);
|
|
5693
|
-
var DropdownContainer = showRequiredPlaceholder ? Container$
|
|
5693
|
+
var DropdownContainer = showRequiredPlaceholder ? Container$1c : React$2.Fragment;
|
|
5694
5694
|
return (jsxRuntime.jsxs(DropdownContainer, { children: [jsxRuntime.jsxs(BaseDropdown$1, __assign$1({ value: selectedValue, onChange: onChangeHandler, disabled: disabled, wide: wide }, { children: [jsxRuntime.jsxs(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) && (jsxRuntime.jsx("img", { src: selectedValue.imageURL, alt: selectedValue.label, style: { paddingRight: 8 } }, void 0)), selectedOptionWeight && disabled ? (jsxRuntime.jsx(SelectedOption, __assign$1({ fontWeight: selectedOptionWeight }, { children: selectedOptionLabel }), void 0)) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: selectedOptionLabel }, void 0))] }), void 0), jsxRuntime.jsx(BaseDropdown$1.Options, { children: options.map(function (item) { return (jsxRuntime.jsxs(BaseDropdown$1.Option, __assign$1({ value: item, disabled: item.disabled, hasImage: !!item.imageURL }, { children: [!!item.imageURL && (jsxRuntime.jsx("img", { src: item.imageURL, alt: item.label, style: { paddingRight: 8 } }, void 0)), item.label] }), item.key)); }) }, void 0)] }), void 0), !!required && jsxRuntime.jsx(Error$1, { error: required }, void 0)] }, void 0));
|
|
5695
5695
|
}
|
|
5696
5696
|
var templateObject_1$1V, templateObject_2$1o, templateObject_3$17;
|
|
@@ -5759,7 +5759,7 @@ var ContainerStyles$2 = {
|
|
|
5759
5759
|
};
|
|
5760
5760
|
|
|
5761
5761
|
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"])));
|
|
5762
|
-
var Container$
|
|
5762
|
+
var Container$1b = newStyled.div(__assign$1({}, ContainerStyles$2.baseStyles), function (props) { return [ContainerStyles$2[props.size](props.theme)]; });
|
|
5763
5763
|
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) {
|
|
5764
5764
|
var disabled = _a.disabled;
|
|
5765
5765
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
@@ -5792,7 +5792,7 @@ var RadioInput = function (_a) {
|
|
|
5792
5792
|
var value = event.currentTarget.value;
|
|
5793
5793
|
onChange({ value: value, label: label });
|
|
5794
5794
|
};
|
|
5795
|
-
return (jsxRuntime.jsxs(Wrapper$7, { children: [jsxRuntime.jsxs(Container$
|
|
5795
|
+
return (jsxRuntime.jsxs(Wrapper$7, { children: [jsxRuntime.jsxs(Container$1b, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsxRuntime.jsx(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), jsxRuntime.jsx(CustomRadio$2, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), useV2Style ? (jsxRuntime.jsxs(StyledLabelV2, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled, style: labelStyle }, { children: [icon, " ", label] }), void 0)) : (jsxRuntime.jsx(StyledLabel$3, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0))] }, void 0));
|
|
5796
5796
|
};
|
|
5797
5797
|
var templateObject_1$1U, templateObject_2$1n, templateObject_3$16, templateObject_4$V;
|
|
5798
5798
|
|
|
@@ -6032,7 +6032,7 @@ var StyledPrice$3 = newStyled(PriceLabelV2$1)(templateObject_12$4 || (templateOb
|
|
|
6032
6032
|
var selected = _a.selected, theme = _a.theme;
|
|
6033
6033
|
return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
|
|
6034
6034
|
});
|
|
6035
|
-
var Container$
|
|
6035
|
+
var Container$1a = newStyled.div(templateObject_13$4 || (templateObject_13$4 = __makeTemplateObject([""], [""])));
|
|
6036
6036
|
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;
|
|
6037
6037
|
|
|
6038
6038
|
var radioIds$2 = {
|
|
@@ -6083,7 +6083,7 @@ var Autoship = function (_a) {
|
|
|
6083
6083
|
onChange(__assign$1(__assign$1({}, dataObj), { subscriptionPeriod: value }));
|
|
6084
6084
|
};
|
|
6085
6085
|
var benefitsColor = benefitsColorMapper(theme);
|
|
6086
|
-
return (jsxRuntime.jsxs(Container$
|
|
6086
|
+
return (jsxRuntime.jsxs(Container$1a, __assign$1({ className: className }, { children: [jsxRuntime.jsxs(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: [jsxRuntime.jsx(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: exports.ComponentSize.Medium, onChange: function () { return handleChange(radioIds$2.oneTime, 'radio'); } }, void 0), jsxRuntime.jsx(StyledPrice$3, { testId: "single-purchase", finalPrice: "$".concat(decimalFormat(Number(discountedProdPrice))), selected: radioIds$2.oneTime.id === radioCheck.id, size: exports.ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(originalProdPrice))) }, void 0)] }), void 0), jsxRuntime.jsxs(SubscriptionContainer$3, __assign$1({ "data-testid": "subscription-purchase-block", selected: radioIds$2.autoship.id === radioCheck.id }, { children: [jsxRuntime.jsxs(SubscriptionHeader$3, __assign$1({ onClick: function () { return handleChange(radioIds$2.autoship, 'radio'); } }, { children: [jsxRuntime.jsx(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: exports.ComponentSize.Medium, onChange: function () { return handleChange(radioIds$2.autoship, 'radio'); } }, void 0), jsxRuntime.jsx(StyledPrice$3, { testId: "subscription", finalPrice: "$".concat(decimalFormat(Number(discountedAutoshipPrice))), selected: radioIds$2.autoship.id === radioCheck.id, size: exports.ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(originalProdPrice))) }, void 0)] }), void 0), jsxRuntime.jsx(BenefitsContainer$3, { children: autoshipBenefits.map(function (benefit) { return (jsxRuntime.jsxs(Benefit$3, { children: [jsxRuntime.jsx(Icon.Actions.Check, { width: 1.2, height: 1.2, fill: radioIds$2.autoship.id === radioCheck.id
|
|
6087
6087
|
? benefitsColor.selected
|
|
6088
6088
|
: benefitsColor.base }, void 0), jsxRuntime.jsx(BenefitText$3, __assign$1({ variant: "body" }, { children: benefit }), void 0)] }, benefit)); }) }, void 0), radioIds$2.autoship.id === radioCheck.id && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(FlexContainer$3, { children: [jsxRuntime.jsx(DeliveryFrequencyLabel$1, __assign$1({ variant: "body" }, { children: "Deliver every:" }), void 0), jsxRuntime.jsx(SimpleDropdown, { testId: "subscription-frecuency", initialValue: dropdownOptions[0], options: dropdownOptions, onChange: function (value) { return handleChange(value.value, 'dropdown'); }, placeHolder: "" }, void 0)] }, void 0), jsxRuntime.jsx(SubscriptionDetailsContainer, { children: jsxRuntime.jsx(Tooltip, __assign$1({ position: 0, content: tooltipContent, header: tooltipHeader, maxWidth: "300px", showCloseIcon: closeIcon }, { children: jsxRuntime.jsxs(FlexContainer$3, { children: [jsxRuntime.jsx(SubscriptionDetails, __assign$1({ variant: "body", weight: "demi" }, { children: "Subscription Details" }), void 0), jsxRuntime.jsx(Icon.Actions.CircleQuestion, { width: 1.2 }, void 0)] }, void 0) }), void 0) }, void 0)] }, void 0))] }), void 0)] }), void 0));
|
|
6089
6089
|
};
|
|
@@ -6141,7 +6141,7 @@ var StyledPrice$2 = newStyled(PriceLabelV2$1)(templateObject_11$6 || (templateOb
|
|
|
6141
6141
|
var selected = _a.selected, theme = _a.theme;
|
|
6142
6142
|
return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
|
|
6143
6143
|
});
|
|
6144
|
-
var Container$
|
|
6144
|
+
var Container$19 = newStyled.div(templateObject_12$3 || (templateObject_12$3 = __makeTemplateObject(["\n margin-top: 20px;\n"], ["\n margin-top: 20px;\n"])));
|
|
6145
6145
|
var TooltipWrapper$1 = newStyled.div(templateObject_13$3 || (templateObject_13$3 = __makeTemplateObject(["\n margin: ", ";\n"], ["\n margin: ", ";\n"])), function (_a) {
|
|
6146
6146
|
var theme = _a.theme;
|
|
6147
6147
|
return theme.component.autoship.tooltip.margin;
|
|
@@ -6206,7 +6206,7 @@ var AutoshipV2 = function (_a) {
|
|
|
6206
6206
|
onChange(__assign$1(__assign$1({}, dataObj), { subscriptionPeriod: value }));
|
|
6207
6207
|
};
|
|
6208
6208
|
var benefitsColor = benefitsColorMapper(theme);
|
|
6209
|
-
return (jsxRuntime.jsxs(Container$
|
|
6209
|
+
return (jsxRuntime.jsxs(Container$19, __assign$1({ className: className }, { children: [jsxRuntime.jsxs(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: [jsxRuntime.jsx(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), jsxRuntime.jsxs(SubscriptionHeader$2, { children: [jsxRuntime.jsxs(FlexContainer$2, { children: [jsxRuntime.jsx(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: exports.ComponentSize.Medium, style: { marginRight: '10px' }, useV2Style: true, onChange: function () { }, disabled: disabledInputs && disabledInputs.includes(radioIds$1.autoship.id) }, void 0), jsxRuntime.jsx(TooltipWrapper$1, { children: jsxRuntime.jsx(Tooltip, __assign$1({ position: 0, content: tooltipContent, header: tooltipHeader, maxWidth: "248px", showCloseIcon: closeIcon, closeBtnSize: 0.7 }, { children: jsxRuntime.jsx(Icon.Actions.CircleQuestion, { width: 1 }, void 0) }), void 0) }, void 0)] }, void 0), jsxRuntime.jsx(StyledPrice$2, { testId: "subscription", finalPrice: "".concat(currencySymbol).concat(decimalFormat(Number(autoshipFinalPrice))), selected: radioIds$1.autoship.id === radioCheck.id, size: exports.ComponentSize.Large, originalPrice: "".concat(currencySymbol).concat(decimalFormat(Number(listPrice))) }, void 0)] }, void 0), jsxRuntime.jsx(BenefitsContainer$2, { children: updatedAutoshipBenefits.map(function (benefit) { return (jsxRuntime.jsxs(Benefit$2, { children: [jsxRuntime.jsx(Icon.Actions.Check, { width: 1.2, height: 1.2, fill: radioIds$1.autoship.id === radioCheck.id
|
|
6210
6210
|
? benefitsColor.selected
|
|
6211
6211
|
: benefitsColor.base }, void 0), jsxRuntime.jsx(BenefitText$2, { variant: "body", dangerouslySetInnerHTML: { __html: benefit } }, void 0)] }, benefit)); }) }, void 0), jsxRuntime.jsx(jsxRuntime.Fragment, { children: dropdownOptions.length > 1 ? (jsxRuntime.jsxs(FlexContainer$2, __assign$1({ onClick: function (e) { return e.stopPropagation(); } }, { children: [jsxRuntime.jsx(DeliveryFrequencyLabel, __assign$1({ variant: "body" }, { children: "Deliver every:" }), void 0), jsxRuntime.jsx(SimpleDropdown, { testId: "subscription-frequency", initialValue: dropdownOptions[0], options: dropdownOptions, onChange: function (value) { return handleChange(value.value, 'dropdown'); }, placeHolder: "" }, void 0)] }), void 0)) : (jsxRuntime.jsxs(DeliveryFrequencyLabel, __assign$1({ variant: "body" }, { children: ["Deliver every ", dropdownOptions[0].label.toLowerCase()] }), void 0)) }, void 0)] }), void 0), jsxRuntime.jsxs(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: [jsxRuntime.jsx(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: exports.ComponentSize.Medium, onChange: function () { }, useV2Style: true, disabled: disabledInputs && disabledInputs.includes(radioIds$1.oneTime.id) }, void 0), jsxRuntime.jsx(StyledPrice$2, { testId: "single-purchase", finalPrice: "".concat(currencySymbol).concat(decimalFormat(Number(discountedPrice))), selected: radioIds$1.oneTime.id === radioCheck.id, size: exports.ComponentSize.Large, originalPrice: "".concat(currencySymbol).concat(decimalFormat(Number(listPrice))) }, void 0)] }), void 0)] }), void 0));
|
|
6212
6212
|
};
|
|
@@ -6248,7 +6248,7 @@ var ResultFeedback = function (_a) {
|
|
|
6248
6248
|
return (jsxRuntime.jsxs(CustomerDetails, { children: [jsxRuntime.jsx(NameWithStars, { name: name, size: size }, void 0), description && jsxRuntime.jsx(Description$2, { children: description }, void 0), reviewDays && jsxRuntime.jsx(ReviewDays, { children: reviewDays }, void 0)] }, void 0));
|
|
6249
6249
|
};
|
|
6250
6250
|
|
|
6251
|
-
var Container$
|
|
6251
|
+
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; });
|
|
6252
6252
|
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"])));
|
|
6253
6253
|
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; });
|
|
6254
6254
|
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) {
|
|
@@ -6336,7 +6336,7 @@ var BeforeAfterCard = function (_a) {
|
|
|
6336
6336
|
var stylesBySize = getStylesBySize$d(size, theme);
|
|
6337
6337
|
var infoText = buildInfoText(name, age, months);
|
|
6338
6338
|
var Component = componentByVariant[variant];
|
|
6339
|
-
return (jsxRuntime.jsxs(Container$
|
|
6339
|
+
return (jsxRuntime.jsxs(Container$18, __assign$1({ "data-testid": "Container", styles: stylesBySize }, { children: [jsxRuntime.jsxs(ImageContainer$7, __assign$1({ "data-testid": "ImageContainer" }, { children: [jsxRuntime.jsx(ImageCard, __assign$1({ "data-testid": "ImageCard", styles: stylesBySize }, { children: jsxRuntime.jsx(Image$3, { borderRadius: imageBorderRadius, src: beforeImage, alt: "before", height: "100%", width: "100%" }, void 0) }), void 0), jsxRuntime.jsx(ImageCard, __assign$1({ styles: stylesBySize }, { children: jsxRuntime.jsx(Image$3, { borderRadius: imageBorderRadius, src: afterImage, alt: "after", height: "100%", width: "100%" }, void 0) }), void 0)] }), void 0), jsxRuntime.jsx(Component, __assign$1({ name: name, size: size, alignCenter: alignCenter, text: infoText }, rest), void 0)] }), void 0));
|
|
6340
6340
|
};
|
|
6341
6341
|
|
|
6342
6342
|
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) {
|
|
@@ -6359,7 +6359,7 @@ var CardBody$1 = function (_a) {
|
|
|
6359
6359
|
};
|
|
6360
6360
|
var templateObject_1$1N;
|
|
6361
6361
|
|
|
6362
|
-
var Container$
|
|
6362
|
+
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) {
|
|
6363
6363
|
var flex = _a.flex;
|
|
6364
6364
|
return flex &&
|
|
6365
6365
|
"display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;";
|
|
@@ -6374,7 +6374,7 @@ var Container$18 = newStyled.div(templateObject_1$1M || (templateObject_1$1M = _
|
|
|
6374
6374
|
var Card$2 = function (_a) {
|
|
6375
6375
|
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;
|
|
6376
6376
|
var theme = useTheme();
|
|
6377
|
-
return (jsxRuntime.jsx(Container$
|
|
6377
|
+
return (jsxRuntime.jsx(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));
|
|
6378
6378
|
};
|
|
6379
6379
|
var Card$3 = Object.assign(Card$2, {
|
|
6380
6380
|
Header: CardHeader,
|
|
@@ -6398,14 +6398,14 @@ var Minimalistic = function (_a) {
|
|
|
6398
6398
|
return (jsxRuntime.jsx(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxRuntime.jsxs(StyledWrapper, { children: [jsxRuntime.jsxs(StyledContainer, __assign$1({ "data-testid": "".concat(testId, "-section") }, { children: [jsxRuntime.jsx(StyledContainer, { children: jsxRuntime.jsx(TextLabel, __assign$1({ variant: "body", weight: "demi", size: "small" }, { children: getMorePayLessText }), void 0) }, void 0), jsxRuntime.jsx(PriceLabel$1, { finalPrice: price, originalPrice: originalPrice, color: theme.colors.pallete.secondary.color, size: exports.ComponentSize.Small, testId: testId }, void 0)] }), void 0), jsxRuntime.jsxs(StyledContainer, __assign$1({ "data-testid": "".concat(testId, "-section-bottom") }, { children: [jsxRuntime.jsxs(TextLabel, __assign$1({ variant: "body", weight: "demi", size: "small", color: "var(--colors-pallete-red-color)" }, { children: [getQtyForText, " ", discount, "% ", offText.toLocaleUpperCase()] }), void 0), jsxRuntime.jsxs(YouAreSaving, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [youAreSavingText, ": ", savingPrice] }), void 0)] }), void 0)] }, void 0) }), void 0));
|
|
6399
6399
|
};
|
|
6400
6400
|
|
|
6401
|
-
var Container$
|
|
6401
|
+
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"])));
|
|
6402
6402
|
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; });
|
|
6403
6403
|
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; });
|
|
6404
6404
|
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"])));
|
|
6405
6405
|
var Simple = function (_a) {
|
|
6406
6406
|
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;
|
|
6407
6407
|
var theme = useTheme();
|
|
6408
|
-
return (jsxRuntime.jsx(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxRuntime.jsxs(Container$
|
|
6408
|
+
return (jsxRuntime.jsx(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxRuntime.jsxs(Container$16, { children: [jsxRuntime.jsx(Title$9, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Title" }, { children: title }), void 0), jsxRuntime.jsxs(Details$1, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Details" }, { children: [anyQtyForText, jsxRuntime.jsx(PriceContainer$2, __assign$1({ "data-testid": "Price" }, { children: jsxRuntime.jsx(PriceLabel$1, { finalPrice: price, color: "var(--colors-pallete-red-color)", size: exports.ComponentSize.Small }, void 0) }), void 0), "+ ", freeShippingText] }), void 0)] }, void 0) }), void 0));
|
|
6409
6409
|
};
|
|
6410
6410
|
var templateObject_1$1K, templateObject_2$1g, templateObject_3$$, templateObject_4$O;
|
|
6411
6411
|
|
|
@@ -6414,7 +6414,7 @@ var Bundle = {
|
|
|
6414
6414
|
Simple: Simple,
|
|
6415
6415
|
};
|
|
6416
6416
|
|
|
6417
|
-
var Container$
|
|
6417
|
+
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) {
|
|
6418
6418
|
var displayBNPL = _a.displayBNPL;
|
|
6419
6419
|
return (displayBNPL ? 'flex' : 'none');
|
|
6420
6420
|
});
|
|
@@ -6429,7 +6429,7 @@ var BuyNowPayLater = function (_a) {
|
|
|
6429
6429
|
console.error('Icon', iconName, 'not found');
|
|
6430
6430
|
return null;
|
|
6431
6431
|
}
|
|
6432
|
-
return (jsxRuntime.jsx(Container$
|
|
6432
|
+
return (jsxRuntime.jsx(Container$15, __assign$1({ displayBNPL: displayBNPL }, { children: jsxRuntime.jsxs(TextContainer$1, __assign$1({ style: { fontSize: fontSize }, "data-testid": "mainText" }, { children: ["Or ".concat(installments, " payments of "), jsxRuntime.jsx(Text$7, __assign$1({ variant: "heading6", style: { display: 'inline', fontSize: fontSize }, testId: "InstallmentPriceId" }, { children: installmentPrice }), void 0), showLogo ? ' with' : '', showLogo && (jsxRuntime.jsx(IconWrapper$1, { children: jsxRuntime.jsx(IconComponent, { width: 3.2, height: 2, fill: iconColor, style: { top: '-3px', position: 'relative' } }, void 0) }, void 0))] }), void 0) }), void 0));
|
|
6433
6433
|
};
|
|
6434
6434
|
var templateObject_1$1J, templateObject_2$1f, templateObject_3$_;
|
|
6435
6435
|
|
|
@@ -6457,11 +6457,11 @@ var Description$1 = function (_a) {
|
|
|
6457
6457
|
};
|
|
6458
6458
|
var templateObject_1$1G;
|
|
6459
6459
|
|
|
6460
|
-
var Container$
|
|
6460
|
+
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"); });
|
|
6461
6461
|
var CloseButton$1 = function (_a) {
|
|
6462
6462
|
var onClick = _a.onClick, size = _a.size;
|
|
6463
6463
|
var theme = useTheme();
|
|
6464
|
-
return (jsxRuntime.jsx(Container$
|
|
6464
|
+
return (jsxRuntime.jsx(Container$14, __assign$1({ backgroundColor: theme.colors.shades['700'].color, onClick: onClick, "data-testid": "CartProductItemCloseBtn", size: size }, { children: jsxRuntime.jsx(Icon.Actions.Close, { width: size - 1, height: size - 1, fill: "#fff" }, void 0) }), void 0));
|
|
6465
6465
|
};
|
|
6466
6466
|
var templateObject_1$1F;
|
|
6467
6467
|
|
|
@@ -6490,8 +6490,8 @@ var CartProductItem = {
|
|
|
6490
6490
|
CloseButton: CloseButton$1,
|
|
6491
6491
|
};
|
|
6492
6492
|
|
|
6493
|
-
var Container$
|
|
6494
|
-
var MobileContainer = newStyled(Container$
|
|
6493
|
+
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"])));
|
|
6494
|
+
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"])));
|
|
6495
6495
|
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"])));
|
|
6496
6496
|
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"])));
|
|
6497
6497
|
var MobileDollarPart = newStyled(DollarPart)(templateObject_5$C || (templateObject_5$C = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
@@ -6501,7 +6501,7 @@ var DesktopClubMembersText = newStyled(ClubMembersText)(templateObject_8$j || (t
|
|
|
6501
6501
|
var ClubPriceLabel = function (_a) {
|
|
6502
6502
|
var clubPrice = _a.clubPrice;
|
|
6503
6503
|
var isMobile = useWindowDimensions().isMobile;
|
|
6504
|
-
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: isMobile ? (jsxRuntime.jsxs(MobileContainer, { children: [jsxRuntime.jsx(MobileDollarPart, { children: clubPrice }, void 0), jsxRuntime.jsx(MobileClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) : (jsxRuntime.jsxs(Container$
|
|
6504
|
+
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: isMobile ? (jsxRuntime.jsxs(MobileContainer, { children: [jsxRuntime.jsx(MobileDollarPart, { children: clubPrice }, void 0), jsxRuntime.jsx(MobileClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) : (jsxRuntime.jsxs(Container$13, { children: [jsxRuntime.jsx(DesktopDollarPart, { children: clubPrice }, void 0), jsxRuntime.jsx(DesktopClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) }, void 0));
|
|
6505
6505
|
};
|
|
6506
6506
|
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;
|
|
6507
6507
|
|
|
@@ -6511,7 +6511,7 @@ var Spacing = function (_a) {
|
|
|
6511
6511
|
return jsxRuntime.jsx("div", __assign$1({ style: style }, { children: children }), void 0);
|
|
6512
6512
|
};
|
|
6513
6513
|
|
|
6514
|
-
var Container$
|
|
6514
|
+
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"])));
|
|
6515
6515
|
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"])));
|
|
6516
6516
|
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"])));
|
|
6517
6517
|
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) {
|
|
@@ -6523,7 +6523,7 @@ var Bar$2 = newStyled('div')(templateObject_4$M || (templateObject_4$M = __makeT
|
|
|
6523
6523
|
});
|
|
6524
6524
|
var StrengthBars = function (_a) {
|
|
6525
6525
|
var _b = _a.barsFilled, barsFilled = _b === void 0 ? 0 : _b, supportText = _a.supportText;
|
|
6526
|
-
return (jsxRuntime.jsxs(Container$
|
|
6526
|
+
return (jsxRuntime.jsxs(Container$12, __assign$1({ "data-testid": "strength-bar" }, { children: [jsxRuntime.jsx(BarContainer$1, { children: [1, 2, 3, 4, 5].map(function (bar, index) { return (jsxRuntime.jsx(Bar$2, { index: index, isFilled: bar <= barsFilled }, bar)); }) }, void 0), jsxRuntime.jsx(Content$2, { children: supportText }, void 0)] }), void 0));
|
|
6527
6527
|
};
|
|
6528
6528
|
var templateObject_1$1C, templateObject_2$1d, templateObject_3$Y, templateObject_4$M;
|
|
6529
6529
|
|
|
@@ -6580,7 +6580,7 @@ var PriceLabelV4 = function (_a) {
|
|
|
6580
6580
|
: exports.ComponentSize.XSmall;
|
|
6581
6581
|
return (jsxRuntime.jsx(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));
|
|
6582
6582
|
};
|
|
6583
|
-
return (jsxRuntime.jsxs(Container$
|
|
6583
|
+
return (jsxRuntime.jsxs(Container$1k, __assign$1({}, rest, { children: [clubStyle && !styledPrice ? (jsxRuntime.jsxs(PriceContainer$1, { children: [jsxRuntime.jsxs(PriceWithTagContainer, { children: [jsxRuntime.jsx(OriginalPrice, {}, void 0), jsxRuntime.jsx(RegularPriceTag, {}, void 0)] }, void 0), jsxRuntime.jsxs(PriceWithTagContainer, { children: [jsxRuntime.jsx(Price, __assign$1({ margin: true, "data-testid": getTestId(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: clubPrice }), void 0), jsxRuntime.jsx(ClubPriceTag, {}, void 0)] }, void 0)] }, void 0)) : (jsxRuntime.jsxs(PriceContainer$1, { children: [jsxRuntime.jsxs(PriceWithTagContainer, { children: [jsxRuntime.jsx(OriginalPrice, {}, void 0), jsxRuntime.jsx(RegularPriceTag, {}, void 0)] }, void 0), jsxRuntime.jsxs(PriceWithTagContainer, { children: [jsxRuntime.jsxs(PriceContainerV2, { children: [jsxRuntime.jsx(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), jsxRuntime.jsxs(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size, style: { color: '#c64844' } }, { children: [finalPriceArray[0]
|
|
6584
6584
|
? finalPriceArray[0]
|
|
6585
6585
|
: (_b = "".concat(productFinalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1], "."] }), void 0), jsxRuntime.jsx(Price, __assign$1({ finalPriceStyledSmall: true, style: { marginTop: '-6px', color: '#c64844' } }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }, void 0), jsxRuntime.jsx(ClubPriceTag, {}, void 0)] }, void 0)] }, void 0)), discount && (jsxRuntime.jsx(TagContainer, __assign$1({ size: size }, { children: jsxRuntime.jsx(DiscountTag$3, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
|
|
6586
6586
|
};
|
|
@@ -6588,7 +6588,7 @@ var templateObject_1$1B, templateObject_2$1c, templateObject_3$X, templateObject
|
|
|
6588
6588
|
|
|
6589
6589
|
var STARTS_NUMBER = 5;
|
|
6590
6590
|
|
|
6591
|
-
var Container$
|
|
6591
|
+
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"])));
|
|
6592
6592
|
var templateObject_1$1A;
|
|
6593
6593
|
|
|
6594
6594
|
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) {
|
|
@@ -6603,7 +6603,7 @@ var StarList = function (_a) {
|
|
|
6603
6603
|
width: theme.component.stars.element[size].width,
|
|
6604
6604
|
height: theme.component.stars.element[size].height,
|
|
6605
6605
|
};
|
|
6606
|
-
return (jsxRuntime.jsx(Container$
|
|
6606
|
+
return (jsxRuntime.jsx(Container$11, { children: __spreadArray([], new Array(starsNumber), true).map(function (_, index) {
|
|
6607
6607
|
return (jsxRuntime.jsx(StarContainer, __assign$1({ "data-testid": "star-container", marginRight: theme.component.stars.element[size].marginRight }, { children: index < Math.floor(rating) ? (jsxRuntime.jsx(Icon.PDP.Star, __assign$1({}, iconProps), void 0)) : index === Math.floor(rating) && rating % 1 != 0 ? (jsxRuntime.jsx(Icon.PDP.StarHalf, __assign$1({}, iconProps), void 0)) : (jsxRuntime.jsx(Icon.PDP.StarEmpty, __assign$1({}, iconProps), void 0)) }), "star-container-".concat(index)));
|
|
6608
6608
|
}) }, void 0));
|
|
6609
6609
|
};
|
|
@@ -6648,7 +6648,7 @@ var LabelStyles = {
|
|
|
6648
6648
|
});
|
|
6649
6649
|
},
|
|
6650
6650
|
};
|
|
6651
|
-
var Container$
|
|
6651
|
+
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"])));
|
|
6652
6652
|
var CustomLabel = newStyled.div(function (_a) {
|
|
6653
6653
|
var theme = _a.theme, size = _a.size, wrapWithParenthesis = _a.wrapWithParenthesis, underline = _a.underline;
|
|
6654
6654
|
return [
|
|
@@ -6689,7 +6689,7 @@ var Rating = function (_a) {
|
|
|
6689
6689
|
href: reviewsContainerId,
|
|
6690
6690
|
}
|
|
6691
6691
|
: {};
|
|
6692
|
-
return (jsxRuntime.jsxs(Container$
|
|
6692
|
+
return (jsxRuntime.jsxs(Container$10, __assign$1({ as: reviewsContainerId ? 'a' : 'div' }, containerAttributes, { "data-testid": "Container", onClick: handleAnchorClick }, { children: [showRatingText && (jsxRuntime.jsx(RatingLabel, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "RatingLabel" }, { children: rating }), void 0)), jsxRuntime.jsx(StarList, { rating: rating, size: size, starsNumber: STARTS_NUMBER, fill: theme.component.stars.element.color }, void 0), jsxRuntime.jsxs(CustomLabel, __assign$1({ theme: theme, size: size, wrapWithParenthesis: wrapWithParenthesis, underline: underline, "data-testid": "CustomLabel" }, { children: [reviews ? reviews : '', " ", reviewsText ? reviewsText : ''] }), void 0)] }), void 0));
|
|
6693
6693
|
};
|
|
6694
6694
|
|
|
6695
6695
|
var STYLES_BY_THEME = {
|
|
@@ -6764,7 +6764,7 @@ var ImageContainer$6 = newStyled.div(function (_a) {
|
|
|
6764
6764
|
});
|
|
6765
6765
|
});
|
|
6766
6766
|
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"])));
|
|
6767
|
-
var Container
|
|
6767
|
+
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"])));
|
|
6768
6768
|
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"])));
|
|
6769
6769
|
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) {
|
|
6770
6770
|
var theme = _a.theme;
|
|
@@ -6889,7 +6889,7 @@ var ProductItemMobile = function (_a) {
|
|
|
6889
6889
|
return jsx(Fragment, {}, void 0);
|
|
6890
6890
|
return (jsx(Rating, { size: size === exports.ComponentSize.Large ? exports.ComponentSize.Small : exports.ComponentSize.XSmall, rating: rating.rating, reviews: rating.reviews, reviewsText: "", wrapWithParenthesis: true }, void 0));
|
|
6891
6891
|
};
|
|
6892
|
-
return (jsxs(ProdCardContainer$4, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container
|
|
6892
|
+
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: exports.ComponentSize.Small }, { children: discountTag && (jsx(DiscountTag$3, __assign$1({}, discountTag, { size: exports.ComponentSize.Medium, style: {
|
|
6893
6893
|
letterSpacing: '-0.05rem',
|
|
6894
6894
|
} }), 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));
|
|
6895
6895
|
};
|
|
@@ -6903,7 +6903,7 @@ var ImageContainer$5 = newStyled.div(function (_a) {
|
|
|
6903
6903
|
});
|
|
6904
6904
|
});
|
|
6905
6905
|
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; });
|
|
6906
|
-
var Container
|
|
6906
|
+
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"])));
|
|
6907
6907
|
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"])));
|
|
6908
6908
|
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; });
|
|
6909
6909
|
var getStylesBySize$b = function (size) {
|
|
@@ -6984,7 +6984,7 @@ var ProductItemTK = function (_a) {
|
|
|
6984
6984
|
: undefined }, void 0));
|
|
6985
6985
|
};
|
|
6986
6986
|
var RatingDisplay = function () { return (jsx(Rating, { size: size === exports.ComponentSize.Large ? exports.ComponentSize.Small : exports.ComponentSize.XSmall, rating: rating.rating, reviews: rating.reviews, reviewsText: "", wrapWithParenthesis: true }, void 0)); };
|
|
6987
|
-
return (jsxs(ProdCardContainer$3, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container
|
|
6987
|
+
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 ? (
|
|
6988
6988
|
// @ts-ignore
|
|
6989
6989
|
jsx(Text$7, __assign$1({ variant: titleStyle.variant, weight: titleStyle.weight, size: titleStyle.size, style: {
|
|
6990
6990
|
textAlign: showClubPriceLabel ? 'left' : alignName,
|
|
@@ -6993,10 +6993,10 @@ var ProductItemTK = function (_a) {
|
|
|
6993
6993
|
};
|
|
6994
6994
|
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;
|
|
6995
6995
|
|
|
6996
|
-
var Container$
|
|
6996
|
+
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"])));
|
|
6997
6997
|
function withProductGrid(ProductItemComponent, data) {
|
|
6998
6998
|
function WithProductGrid(props) {
|
|
6999
|
-
return (jsxRuntime.jsx(Container$
|
|
6999
|
+
return (jsxRuntime.jsx(Container$Z, __assign$1({ "data-testid": "product-grid-container" }, { children: data.map(function (product, index) { return (jsxRuntime.jsx(ProductItemComponent, __assign$1({}, product, props), index)); }) }), void 0));
|
|
7000
7000
|
}
|
|
7001
7001
|
/* istanbul ignore next */
|
|
7002
7002
|
var wrappedComponentName = ProductItemComponent.displayName || ProductItemComponent.name || 'Component';
|
|
@@ -7074,7 +7074,7 @@ var OutOfStock = function (_a) {
|
|
|
7074
7074
|
return (jsxRuntime.jsxs("svg", __assign$1({ width: "32", height: "33", viewBox: "0 0 32 33", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsxRuntime.jsx("title", { children: title }, void 0), jsxRuntime.jsx("mask", __assign$1({ id: "path-1-inside-1", fill: "white" }, { children: jsxRuntime.jsx("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), jsxRuntime.jsx("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), jsxRuntime.jsx("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), jsxRuntime.jsx("circle", { cx: "16", cy: "16.5", r: "12", stroke: theme.colors.shades['300'].color, strokeWidth: "0.5" }, void 0)] }), void 0));
|
|
7075
7075
|
};
|
|
7076
7076
|
|
|
7077
|
-
var Container$
|
|
7077
|
+
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) {
|
|
7078
7078
|
var borderColor = _a.borderColor;
|
|
7079
7079
|
return borderColor;
|
|
7080
7080
|
}, function (_a) {
|
|
@@ -7086,7 +7086,7 @@ var PatternSelector = function (_a) {
|
|
|
7086
7086
|
var url = _a.url, selected = _a.selected, testId = _a.testId, noStock = _a.noStock;
|
|
7087
7087
|
var theme = useTheme();
|
|
7088
7088
|
var outerBorder = selected ? theme.colors.shades['550'].color : 'transparent';
|
|
7089
|
-
return (jsxRuntime.jsx(Container$
|
|
7089
|
+
return (jsxRuntime.jsx(Container$Y, __assign$1({ "data-testid": testId, borderColor: outerBorder, noStock: noStock }, { children: jsxRuntime.jsx(Image$2, { src: url, alt: "pattern" }, void 0) }), void 0));
|
|
7090
7090
|
};
|
|
7091
7091
|
var templateObject_1$1t, templateObject_2$17;
|
|
7092
7092
|
|
|
@@ -7311,14 +7311,14 @@ var ButtonSecondaryOutline = function (props) {
|
|
|
7311
7311
|
} }), void 0));
|
|
7312
7312
|
};
|
|
7313
7313
|
|
|
7314
|
-
var Container$
|
|
7314
|
+
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; });
|
|
7315
7315
|
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"])));
|
|
7316
7316
|
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; });
|
|
7317
7317
|
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; });
|
|
7318
7318
|
var Note = function (_a) {
|
|
7319
7319
|
var accentColor = _a.accentColor, color = _a.color, backgroundColor = _a.backgroundColor, importantNoteText = _a.importantNoteText, text = _a.text;
|
|
7320
7320
|
var theme = useTheme();
|
|
7321
|
-
return (jsxRuntime.jsxs(Container$
|
|
7321
|
+
return (jsxRuntime.jsxs(Container$X, __assign$1({ color: backgroundColor ? backgroundColor : theme.component.deliveryDetails.note.backgroundColor, "data-testid": "Container" }, { children: [jsxRuntime.jsx(IconContainer$5, { children: jsxRuntime.jsx(Icon.Actions.Warning, { fill: accentColor ? accentColor : theme.component.deliveryDetails.note.accentColor }, void 0) }, void 0), jsxRuntime.jsx("div", { children: jsxRuntime.jsxs(Text$3, __assign$1({ color: color ? color : theme.component.deliveryDetails.note.color }, { children: [importantNoteText && (jsxRuntime.jsxs(Details, __assign$1({ color: accentColor ? accentColor : theme.component.deliveryDetails.note.accentColor }, { children: [importantNoteText, ":"] }), void 0)), ' ', text] }), void 0) }, void 0)] }), void 0));
|
|
7322
7322
|
};
|
|
7323
7323
|
var templateObject_1$1p, templateObject_2$14, templateObject_3$S, templateObject_4$G;
|
|
7324
7324
|
|
|
@@ -7524,12 +7524,12 @@ function FilteringDropdown(_a) {
|
|
|
7524
7524
|
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; });
|
|
7525
7525
|
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; });
|
|
7526
7526
|
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"])));
|
|
7527
|
-
var Container$
|
|
7527
|
+
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'); });
|
|
7528
7528
|
var Accordion = function (_a) {
|
|
7529
7529
|
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;
|
|
7530
7530
|
var theme = useTheme();
|
|
7531
7531
|
var _d = React__default["default"].useState(isOpenByDefault), isOpen = _d[0], setIsOpen = _d[1];
|
|
7532
|
-
return (jsxRuntime.jsxs(Container$
|
|
7532
|
+
return (jsxRuntime.jsxs(Container$W, __assign$1({ "data-testid": "FiltersAccordion", showInMobile: showInMobile }, { children: [jsxRuntime.jsxs(Title$4, __assign$1({ onClick: function () { return setIsOpen(function (state) { return !state; }); }, borderColor: theme.colors.shades['100'].color, "data-testid": "accordion-title" }, { children: [jsxRuntime.jsx(H3, __assign$1({ color: theme.colors.shades['550'].color }, { children: title }), void 0), jsxRuntime.jsx(ArrowContainer, { children: isOpen ? (jsxRuntime.jsx(Icon.Arrows.ChevronUp, { fill: theme.colors.shades['700'].color }, void 0)) : (jsxRuntime.jsx(Icon.Arrows.ChevronDown, { fill: theme.colors.shades['700'].color }, void 0)) }, void 0)] }), void 0), jsxRuntime.jsx("div", __assign$1({ style: { display: isOpen ? 'block' : 'none' }, "data-testid": "accordion-children-container" }, { children: children }), void 0)] }), void 0));
|
|
7533
7533
|
};
|
|
7534
7534
|
var templateObject_1$1j, templateObject_2$_, templateObject_3$N, templateObject_4$B;
|
|
7535
7535
|
|
|
@@ -7755,7 +7755,7 @@ var FilterCheckboxColor = function (_a) {
|
|
|
7755
7755
|
};
|
|
7756
7756
|
|
|
7757
7757
|
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"])));
|
|
7758
|
-
var Container$
|
|
7758
|
+
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"])));
|
|
7759
7759
|
var FitGuarantee = function (_a) {
|
|
7760
7760
|
var _b;
|
|
7761
7761
|
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;
|
|
@@ -7766,7 +7766,7 @@ var FitGuarantee = function (_a) {
|
|
|
7766
7766
|
console.error('Icon', iconName, 'not found');
|
|
7767
7767
|
return null;
|
|
7768
7768
|
}
|
|
7769
|
-
return (jsxRuntime.jsx(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxRuntime.jsxs(Wrapper$4, { children: [jsxRuntime.jsx(Container$
|
|
7769
|
+
return (jsxRuntime.jsx(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxRuntime.jsxs(Wrapper$4, { children: [jsxRuntime.jsx(Container$V, __assign$1({ "data-testid": "".concat(testId, "-section"), style: { justifyContent: 'center' } }, { children: jsxRuntime.jsx(IconComponent, { width: iconWidth, height: iconHeight }, void 0) }), void 0), jsxRuntime.jsxs(Container$V, __assign$1({ "data-testid": "".concat(testId, "-section-bottom") }, { children: [jsxRuntime.jsx(Text$7, __assign$1({ variant: "body", weight: "demi", size: "small", style: {
|
|
7770
7770
|
margin: '0.1rem 0',
|
|
7771
7771
|
width: '100%',
|
|
7772
7772
|
fontSize: theme.component.text.fitGuarantee.titleFontSize,
|
|
@@ -7775,7 +7775,7 @@ var FitGuarantee = function (_a) {
|
|
|
7775
7775
|
};
|
|
7776
7776
|
var templateObject_1$1g, templateObject_2$X;
|
|
7777
7777
|
|
|
7778
|
-
var Container$
|
|
7778
|
+
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"])));
|
|
7779
7779
|
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; });
|
|
7780
7780
|
var textButtonStyles$1 = function (theme) { return ({
|
|
7781
7781
|
border: 'none',
|
|
@@ -7789,7 +7789,7 @@ var textButtonStyles$1 = function (theme) { return ({
|
|
|
7789
7789
|
var FitPredictor = function (_a) {
|
|
7790
7790
|
var onClick = _a.onClick;
|
|
7791
7791
|
var theme = useTheme();
|
|
7792
|
-
return (jsxs(Container$
|
|
7792
|
+
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));
|
|
7793
7793
|
};
|
|
7794
7794
|
var templateObject_1$1f, templateObject_2$W;
|
|
7795
7795
|
|
|
@@ -12129,7 +12129,7 @@ var ImageSmallPreview = function (_a) {
|
|
|
12129
12129
|
|
|
12130
12130
|
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"])));
|
|
12131
12131
|
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"])));
|
|
12132
|
-
var Container$
|
|
12132
|
+
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) {
|
|
12133
12133
|
var position = _a.position;
|
|
12134
12134
|
return (position == 'horizontal' ? horizontalStyles : verticalStyles);
|
|
12135
12135
|
}, function (_a) {
|
|
@@ -12170,7 +12170,7 @@ var ImagePreviewList = function (_a) {
|
|
|
12170
12170
|
var element = document.querySelector(".imageListContainer");
|
|
12171
12171
|
element.scrollBy(0, 200);
|
|
12172
12172
|
};
|
|
12173
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Container$
|
|
12173
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Container$T, __assign$1({ role: "list", "data-testid": dataTestId, position: position, className: hasOverflowArrows ? 'imageListContainer' : position, hasOverflowArrows: hasOverflowArrows }, { children: position == 'horizontal' ? (jsxRuntime.jsx("div", __assign$1({ style: { maxWidth: '360px' } }, { children: jsxRuntime.jsx(SliderNavigation, __assign$1({ speed: 200, infinite: false, arrows: {
|
|
12174
12174
|
arrowWidth: 0.75,
|
|
12175
12175
|
arrowHeight: 1.25,
|
|
12176
12176
|
arrowPadding: 1.625,
|
|
@@ -12188,7 +12188,7 @@ var ProgressBar$1 = function (_a) {
|
|
|
12188
12188
|
return (jsxRuntime.jsx(ProgressContainer, __assign$1({ "data-testid": "progress-bar", hide: hide }, { children: jsxRuntime.jsx(ProgressFiller, { progress: progress }, void 0) }), void 0));
|
|
12189
12189
|
};
|
|
12190
12190
|
|
|
12191
|
-
var Container$
|
|
12191
|
+
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"])));
|
|
12192
12192
|
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; });
|
|
12193
12193
|
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"])));
|
|
12194
12194
|
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"])));
|
|
@@ -12240,7 +12240,7 @@ var Video$1 = function (_a) {
|
|
|
12240
12240
|
setVideoProgress(videoRef.current.currentTime);
|
|
12241
12241
|
}
|
|
12242
12242
|
};
|
|
12243
|
-
return (jsxRuntime.jsxs(Container$
|
|
12243
|
+
return (jsxRuntime.jsxs(Container$S, __assign$1({ className: className }, { children: [!isLoading && withProgressBar && jsxRuntime.jsx(ProgressBar$1, { progress: progress, hide: hideProgressBar }, void 0), !isPlaying ? (jsxRuntime.jsx(PlayContainer, __assign$1({ "data-testid": "play", onClick: handlePlayClick }, { children: isStarted && jsxRuntime.jsx(PlayIcon, {}, void 0) }), void 0)) : (jsxRuntime.jsx(PauseContainer, { "data-testid": "pause", onClick: handlePauseClick }, void 0)), hasAudioControl && (jsxRuntime.jsxs(MuteButton, __assign$1({ onClick: handleMuteToggle }, { children: [isMuted && jsxRuntime.jsx(Icon$1, { name: "custom/sound_off" }, void 0), !isMuted && jsxRuntime.jsx(Icon$1, { name: "custom/sound_on" }, void 0)] }), void 0)), jsxRuntime.jsxs(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: [jsxRuntime.jsx("track", { kind: "captions" }, void 0), jsxRuntime.jsx("source", { src: source }, void 0)] }), void 0)] }), void 0));
|
|
12244
12244
|
};
|
|
12245
12245
|
|
|
12246
12246
|
var propTypes = {exports: {}};
|
|
@@ -13834,7 +13834,7 @@ InnerImageZoom.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
13834
13834
|
afterZoomOut: PropTypes.func
|
|
13835
13835
|
} : {};
|
|
13836
13836
|
|
|
13837
|
-
var Container$
|
|
13837
|
+
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) {
|
|
13838
13838
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
13839
13839
|
return borderRadiusVariant && "border-radius: 40px;";
|
|
13840
13840
|
});
|
|
@@ -13866,7 +13866,7 @@ var ImageProductSlide$1 = function (_a) {
|
|
|
13866
13866
|
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;
|
|
13867
13867
|
var source = content === null || content === void 0 ? void 0 : content.url;
|
|
13868
13868
|
var isVideo = (_b = content === null || content === void 0 ? void 0 : content.isVideo) !== null && _b !== void 0 ? _b : false;
|
|
13869
|
-
return (jsxRuntime.jsxs(Container$
|
|
13869
|
+
return (jsxRuntime.jsxs(Container$R, __assign$1({ "data-testid": testId, className: "stylefor".concat(position), borderRadiusVariant: borderRadiusVariant }, { children: [!isVideo && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [withZoom ? (jsxRuntime.jsx(InnerImageZoomStyled, { src: source, zoomSrc: source, zoomType: "hover", imgAttributes: {
|
|
13870
13870
|
alt: content.alt,
|
|
13871
13871
|
style: { objectFit: 'cover', objectPosition: 'center' },
|
|
13872
13872
|
loading: 'eager',
|
|
@@ -13874,7 +13874,7 @@ var ImageProductSlide$1 = function (_a) {
|
|
|
13874
13874
|
}, width: position == 'horizontal' ? 360 : 530, height: position == 'horizontal' ? 480 : 720, hideHint: true, isRatioSquare: isRatioSquare }, void 0)) : (jsxRuntime.jsx(ImageStyled, { width: position == 'horizontal' ? '360px' : '530px', height: "auto", src: source, alt: content.alt, objectFit: "cover", loading: "eager", decoding: "sync", isRatioSquare: isRatioSquare }, void 0)), jsxRuntime.jsx(TopTagContainer$6, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsxRuntime.jsx(BottomTagContainer$6, __assign$1({ isCTAHidden: hideCTA }, { children: bottomTag }), void 0), !!topRightTag && jsxRuntime.jsx(TopRightTagContainer$2, { children: topRightTag }, void 0)] }, void 0)), isVideo && jsxRuntime.jsx(Video$1, { source: source, thumbnail: content === null || content === void 0 ? void 0 : content.thumbnailUrl }, void 0), ctaText && ctaAction && (jsxRuntime.jsx("div", __assign$1({ style: { display: hideCTA ? 'none' : 'block' } }, { children: jsxRuntime.jsx(ButtonSecondaryOutlineWrapper, { wide: true, onClick: ctaAction, text: ctaText }, void 0) }), void 0))] }), void 0));
|
|
13875
13875
|
};
|
|
13876
13876
|
|
|
13877
|
-
var Container$
|
|
13877
|
+
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"])));
|
|
13878
13878
|
var templateObject_1$18;
|
|
13879
13879
|
|
|
13880
13880
|
var getInitialIndex = function (images, selectedValue) {
|
|
@@ -13901,7 +13901,7 @@ var ProductGallery = function (_a) {
|
|
|
13901
13901
|
setActiveIndex(index);
|
|
13902
13902
|
};
|
|
13903
13903
|
var selectedImage = images[activeIndex];
|
|
13904
|
-
return (jsxRuntime.jsxs(Container$
|
|
13904
|
+
return (jsxRuntime.jsxs(Container$Q, { children: [jsxRuntime.jsx(ImagePreviewList, { images: images, selectedImage: selectedImage, dataTestId: previewListDataTestId, onClick: onContentChange, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor, hasOverflowArrows: hasOverflowArrows, isRatioSquare: isRatioSquare, itemsOnViewport: itemsOnViewport }, void 0), jsxRuntime.jsx(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));
|
|
13905
13905
|
};
|
|
13906
13906
|
|
|
13907
13907
|
var getStylesBySize$8 = function (size) {
|
|
@@ -13923,7 +13923,7 @@ var getStylesBySize$8 = function (size) {
|
|
|
13923
13923
|
};
|
|
13924
13924
|
}
|
|
13925
13925
|
};
|
|
13926
|
-
var Container$
|
|
13926
|
+
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) {
|
|
13927
13927
|
var backgroundColor = _a.backgroundColor;
|
|
13928
13928
|
return backgroundColor;
|
|
13929
13929
|
}, function (_a) {
|
|
@@ -13951,7 +13951,7 @@ var Container$Q = newStyled.div(templateObject_1$17 || (templateObject_1$17 = __
|
|
|
13951
13951
|
var IconButton = function (_a) {
|
|
13952
13952
|
var children = _a.children, disabled = _a.disabled, _b = _a.size, size = _b === void 0 ? exports.ComponentSize.Medium : _b, onClick = _a.onClick;
|
|
13953
13953
|
var theme = useTheme();
|
|
13954
|
-
return (jsxRuntime.jsx(Container$
|
|
13954
|
+
return (jsxRuntime.jsx(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));
|
|
13955
13955
|
};
|
|
13956
13956
|
var templateObject_1$17;
|
|
13957
13957
|
|
|
@@ -13966,7 +13966,7 @@ var PaypalButton = function (_a) {
|
|
|
13966
13966
|
};
|
|
13967
13967
|
var templateObject_1$16;
|
|
13968
13968
|
|
|
13969
|
-
var Container$
|
|
13969
|
+
var Container$O = newStyled.div(function (props) { return ({
|
|
13970
13970
|
height: 'auto',
|
|
13971
13971
|
textAlign: 'center',
|
|
13972
13972
|
justifyContent: 'center',
|
|
@@ -14016,10 +14016,10 @@ var IconsWithTitle = function (_a) {
|
|
|
14016
14016
|
textAlign: 'center',
|
|
14017
14017
|
lineHeight: '18px',
|
|
14018
14018
|
};
|
|
14019
|
-
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(Container$
|
|
14019
|
+
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(Container$O, __assign$1({ textPosition: iconTitlePosition }, { children: [withWrapper ? (jsxRuntime.jsx(IconWrapper, __assign$1({ backgroundColor: backgroundColor, style: iconStyles, iconSize: isMobile ? iconSizeMobile : iconSizeDesktop }, { children: jsxRuntime.jsx(IconComponent, { width: isMobile ? iconSizeMobile : iconSizeDesktop, height: isMobile ? iconSizeMobile : iconSizeDesktop, fill: iconColor }, void 0) }), void 0)) : (jsxRuntime.jsx(IconComponent, { width: isMobile ? iconSizeMobile : iconSizeDesktop, height: isMobile ? iconSizeMobile : iconSizeDesktop, fill: iconColor }, void 0)), jsxRuntime.jsx(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));
|
|
14020
14020
|
};
|
|
14021
14021
|
|
|
14022
|
-
var Container$
|
|
14022
|
+
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'); });
|
|
14023
14023
|
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'); });
|
|
14024
14024
|
var StyledTitle = newStyled.div(templateObject_3$H || (templateObject_3$H = __makeTemplateObject(["\n display: flex;\n ", "\n"], ["\n display: flex;\n ", "\n"])), function (_a) {
|
|
14025
14025
|
var titlePosition = _a.titlePosition;
|
|
@@ -14029,7 +14029,7 @@ var StyledTitle = newStyled.div(templateObject_3$H || (templateObject_3$H = __ma
|
|
|
14029
14029
|
var ImageCardWithDescription = function (_a) {
|
|
14030
14030
|
var image = _a.image, title = _a.title, description = _a.description, _b = _a.titlePosition, titlePosition = _b === void 0 ? 'left' : _b;
|
|
14031
14031
|
var isMobile = useWindowDimensions().isMobile;
|
|
14032
|
-
return (jsxRuntime.jsxs(Container$
|
|
14032
|
+
return (jsxRuntime.jsxs(Container$N, __assign$1({ "data-testid": "Container", isMobile: isMobile }, { children: [jsxRuntime.jsx(ImageContainer$4, __assign$1({ "data-testid": "ImageContainer", isMobile: isMobile }, { children: jsxRuntime.jsx(Image$3, { src: image, borderRadius: "40px", alt: "before", height: "100%", width: "100%" }, void 0) }), void 0), jsxRuntime.jsx(StyledTitle, __assign$1({ titlePosition: titlePosition, "data-testid": "StyledTitle" }, { children: isMobile ? (jsxRuntime.jsx(Text$7, __assign$1({ variant: "link", weight: "demi" }, { children: title }), void 0)) : (jsxRuntime.jsx(Text$7, __assign$1({ variant: "heading6", weight: "demi" }, { children: title }), void 0)) }), void 0), jsxRuntime.jsx(Text$7, __assign$1({ variant: "link", weight: "regular" }, { children: description }), void 0)] }), void 0));
|
|
14033
14033
|
};
|
|
14034
14034
|
var templateObject_1$15, templateObject_2$R, templateObject_3$H;
|
|
14035
14035
|
|
|
@@ -14055,7 +14055,7 @@ var containerByStatus = function (theme, status) {
|
|
|
14055
14055
|
return theme.colors.semantic.urgent.color;
|
|
14056
14056
|
return '';
|
|
14057
14057
|
};
|
|
14058
|
-
var Container$
|
|
14058
|
+
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) {
|
|
14059
14059
|
var theme = _a.theme, status = _a.status, hasError = _a.hasError;
|
|
14060
14060
|
return hasError ? '' : containerByStatus(theme, status);
|
|
14061
14061
|
});
|
|
@@ -14156,7 +14156,7 @@ var BaseInput = function (_a) {
|
|
|
14156
14156
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
14157
14157
|
}, [status]);
|
|
14158
14158
|
var hasValue = Boolean(value);
|
|
14159
|
-
return (jsxRuntime.jsxs(Container$
|
|
14159
|
+
return (jsxRuntime.jsxs(Container$M, __assign$1({ status: status, hasError: hasError }, { children: [label && (jsxRuntime.jsx(InputLabel, { label: label, isDisabled: rest.disabled, isRequired: Boolean(required) }, void 0)), jsxRuntime.jsxs(InputWrapper, __assign$1({ className: "inputWrapper", size: size, inlinePlaceholder: inlinePlaceholder }, { children: [jsxRuntime.jsx(StyledInput, __assign$1({ id: requiredPlaceholder ? 'requiredPlaceholder' : undefined, hasValue: hasValue, inlinePlaceholder: inlinePlaceholder, hasError: hasError, ref: innerRef, "data-testid": "base-input", type: inputType, onChange: function (event) {
|
|
14160
14160
|
onChange(event.target.value, event);
|
|
14161
14161
|
}, onBlur: onBlur, required: Boolean(required), value: value, placeholder: inlinePlaceholder ? '' : placeholder }, rest), void 0), !!requiredPlaceholder && (jsxRuntime.jsx(StyledLabel$2, __assign$1({ htmlFor: "requiredPlaceholder" }, { children: requiredPlaceholder }), void 0)), inlinePlaceholder && (jsxRuntime.jsx(AnimatedPlaceholder, __assign$1({ "data-testid": "input-placeholder" }, { children: placeholder }), void 0)), children] }), void 0), !hideClear && !rest.disabled && inlinePlaceholder && hasValue && (jsxRuntime.jsx(ClearInput, __assign$1({ onClick: function () {
|
|
14162
14162
|
onChange('', { target: { value: '' } });
|
|
@@ -14177,7 +14177,7 @@ var Button$4 = function (_a) {
|
|
|
14177
14177
|
throw new Error("Invalid button variant ".concat(variant));
|
|
14178
14178
|
};
|
|
14179
14179
|
|
|
14180
|
-
var Container$
|
|
14180
|
+
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) {
|
|
14181
14181
|
var theme = _a.theme;
|
|
14182
14182
|
return theme.component.inputCustom.input.borderRadius;
|
|
14183
14183
|
});
|
|
@@ -14196,7 +14196,7 @@ var Custom = function (_a) {
|
|
|
14196
14196
|
text: text,
|
|
14197
14197
|
disabled: rest.disabled,
|
|
14198
14198
|
}); }, [variant, onClick, text, rest.disabled]);
|
|
14199
|
-
return (jsxRuntime.jsx(Container$
|
|
14199
|
+
return (jsxRuntime.jsx(Container$L, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(BaseInput, __assign$1({}, rest, { children: jsxRuntime.jsx(ButtonContainer$1, __assign$1({ theme: theme, defaultRounded: defaultRounded }, { children: jsxRuntime.jsx(Button$4, __assign$1({}, props), void 0) }), void 0) }), void 0) }), void 0));
|
|
14200
14200
|
};
|
|
14201
14201
|
var templateObject_1$12, templateObject_2$O;
|
|
14202
14202
|
|
|
@@ -14231,12 +14231,12 @@ var BasePlusButton = function (_a) {
|
|
|
14231
14231
|
};
|
|
14232
14232
|
var templateObject_1$10;
|
|
14233
14233
|
|
|
14234
|
-
var Container$
|
|
14234
|
+
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"])));
|
|
14235
14235
|
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"])));
|
|
14236
14236
|
var BasePlusIcon = function (_a) {
|
|
14237
14237
|
var Icon = _a.Icon, rest = __rest(_a, ["Icon"]);
|
|
14238
14238
|
var theme = useTheme();
|
|
14239
|
-
return (jsxRuntime.jsx(Container$
|
|
14239
|
+
return (jsxRuntime.jsx(Container$K, { children: jsxRuntime.jsx(BaseInput, __assign$1({}, rest, { children: jsxRuntime.jsx(IconContainer$3, { children: jsxRuntime.jsx(Icon, { testId: "IconWrapper", fill: theme.colors.shades['250'].color }, void 0) }, void 0) }), void 0) }, void 0));
|
|
14240
14240
|
};
|
|
14241
14241
|
var templateObject_1$$, templateObject_2$M;
|
|
14242
14242
|
|
|
@@ -14283,7 +14283,7 @@ function usePreventVerticalScroll(ref, dragThreshold) {
|
|
|
14283
14283
|
}, [preventTouch, ref, touchStart]);
|
|
14284
14284
|
}
|
|
14285
14285
|
|
|
14286
|
-
var Container$
|
|
14286
|
+
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) {
|
|
14287
14287
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
14288
14288
|
return borderRadiusVariant &&
|
|
14289
14289
|
"\n border-radius: 40px;\n ";
|
|
@@ -14353,7 +14353,7 @@ var ImageProductSlide = function (_a) {
|
|
|
14353
14353
|
}
|
|
14354
14354
|
}
|
|
14355
14355
|
}, [contents, selectedValue]);
|
|
14356
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [customClick && (jsxRuntime.jsx("div", __assign$1({ style: { display: 'flex', marginBottom: '20px', gap: '10px' } }, { children: contents.map(function (_, i) { return (jsxRuntime.jsx(ButtonPrimary, { onClick: function () { return onButtonClick(i); }, text: String(i + 1), inline: true }, i)); }) }), void 0)), jsxRuntime.jsx(Container$
|
|
14356
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [customClick && (jsxRuntime.jsx("div", __assign$1({ style: { display: 'flex', marginBottom: '20px', gap: '10px' } }, { children: contents.map(function (_, i) { return (jsxRuntime.jsx(ButtonPrimary, { onClick: function () { return onButtonClick(i); }, text: String(i + 1), inline: true }, i)); }) }), void 0)), jsxRuntime.jsx(Container$J, __assign$1({ "data-testid": testId, borderRadiusVariant: borderRadiusVariant, ref: sliderWrapper }, { children: jsxRuntime.jsx(Slider$1, __assign$1({ afterChange: function (e) {
|
|
14357
14357
|
var _a;
|
|
14358
14358
|
var activeSlide = contents[e];
|
|
14359
14359
|
// If autoplay is true and iframe is the active slide, play the video
|
|
@@ -14375,12 +14375,12 @@ var ImageProductSlide = function (_a) {
|
|
|
14375
14375
|
};
|
|
14376
14376
|
var templateObject_1$_, templateObject_2$L, templateObject_3$E, templateObject_4$v, templateObject_5$o, templateObject_6$m;
|
|
14377
14377
|
|
|
14378
|
-
var Container$
|
|
14378
|
+
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"])));
|
|
14379
14379
|
var ProductGalleryMobile = function (_a) {
|
|
14380
14380
|
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;
|
|
14381
14381
|
var _e = React$2.useState(0), activeIndex = _e[0], setActiveIndex = _e[1];
|
|
14382
14382
|
var selectedContent = hasToPreserveOrder ? images === null || images === void 0 ? void 0 : images[activeIndex] : selectedValue;
|
|
14383
|
-
return (jsxRuntime.jsx(Container$
|
|
14383
|
+
return (jsxRuntime.jsx(Container$I, __assign$1({ "data-testid": "product-gallery-mobile-v1" }, { children: jsxRuntime.jsx(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));
|
|
14384
14384
|
};
|
|
14385
14385
|
var templateObject_1$Z;
|
|
14386
14386
|
|
|
@@ -14656,12 +14656,12 @@ var ArrowButton = function (_a) {
|
|
|
14656
14656
|
};
|
|
14657
14657
|
var templateObject_1$Y;
|
|
14658
14658
|
|
|
14659
|
-
var Container$
|
|
14659
|
+
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"])));
|
|
14660
14660
|
var range = function (limit) { return __spreadArray([], new Array(limit), true).map(function (_, index) { return index; }); };
|
|
14661
14661
|
var SlideDots = function (_a) {
|
|
14662
14662
|
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, containerDataTestId = _a.containerDataTestId;
|
|
14663
14663
|
var theme = useTheme();
|
|
14664
|
-
return (jsxRuntime.jsx(Container$
|
|
14664
|
+
return (jsxRuntime.jsx(Container$H, __assign$1({ "data-testid": containerDataTestId }, { children: range(quantity).map(function (index) { return (jsxRuntime.jsx(Icon$1, { name: "navigation/slide_dot".concat(index === selectedIndex ? '_solid' : ''), height: 0.75, width: 0.75, fill: index === selectedIndex
|
|
14665
14665
|
? theme.component.slideNavigation.slideDots.selectedDotColor
|
|
14666
14666
|
: 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));
|
|
14667
14667
|
};
|
|
@@ -14683,7 +14683,7 @@ var SlideNavigation = function (_a) {
|
|
|
14683
14683
|
};
|
|
14684
14684
|
var templateObject_1$W, templateObject_2$K, templateObject_3$D;
|
|
14685
14685
|
|
|
14686
|
-
var Container$
|
|
14686
|
+
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) {
|
|
14687
14687
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
14688
14688
|
return borderRadiusVariant &&
|
|
14689
14689
|
"\n border-radius: 40px;\n ";
|
|
@@ -14693,11 +14693,11 @@ var BottomTagContainer$4 = newStyled.div(templateObject_3$C || (templateObject_3
|
|
|
14693
14693
|
var ImageProductSlideV2 = React$2.forwardRef(function ImageProductWithTags(_a, ref) {
|
|
14694
14694
|
var _b, _c;
|
|
14695
14695
|
var image = _a.image, topTag = _a.topTag, bottomTag = _a.bottomTag, testId = _a.testId, borderRadiusVariant = _a.borderRadiusVariant;
|
|
14696
|
-
return (jsxRuntime.jsxs(Container$
|
|
14696
|
+
return (jsxRuntime.jsxs(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')) && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(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), jsxRuntime.jsx(TopTagContainer$4, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsxRuntime.jsx(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')) && (jsxRuntime.jsx("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));
|
|
14697
14697
|
});
|
|
14698
14698
|
var templateObject_1$V, templateObject_2$J, templateObject_3$C;
|
|
14699
14699
|
|
|
14700
|
-
var Container$
|
|
14700
|
+
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"])));
|
|
14701
14701
|
var ProductGalleryMobileV2 = function (_a) {
|
|
14702
14702
|
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;
|
|
14703
14703
|
var _c = React$2.useState(0), index = _c[0], setIndex = _c[1];
|
|
@@ -14719,11 +14719,11 @@ var ProductGalleryMobileV2 = function (_a) {
|
|
|
14719
14719
|
React$2.useEffect(function () {
|
|
14720
14720
|
setSelectedImage(images[index]);
|
|
14721
14721
|
}, [index, images]);
|
|
14722
|
-
return (jsxRuntime.jsxs(Container$
|
|
14722
|
+
return (jsxRuntime.jsxs(Container$F, __assign$1({ "data-testid": "product-gallery-mobile-v2" }, { children: [jsxRuntime.jsx(ImageProductSlideV2, __assign$1({}, handlers, { image: selectedImage, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant }), void 0), jsxRuntime.jsx(SlideNavigation, { quantity: images.length, selectedIndex: images.indexOf(selectedImage), onNavigate: setIndex, testId: slideDotsDataTestId }, void 0)] }), void 0));
|
|
14723
14723
|
};
|
|
14724
14724
|
var templateObject_1$U;
|
|
14725
14725
|
|
|
14726
|
-
var Container$
|
|
14726
|
+
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) {
|
|
14727
14727
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
14728
14728
|
return borderRadiusVariant &&
|
|
14729
14729
|
"\n border-radius: 40px;\n ";
|
|
@@ -14784,7 +14784,7 @@ var ImageProductSlideV3 = function (_a) {
|
|
|
14784
14784
|
}
|
|
14785
14785
|
}
|
|
14786
14786
|
}, [images, selectedValue]);
|
|
14787
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [customClick && (jsxRuntime.jsx("div", __assign$1({ style: { display: 'flex', marginBottom: '20px', gap: '10px' } }, { children: images.map(function (_, i) { return (jsxRuntime.jsx(ButtonPrimary, { onClick: function () { return onButtonClick(i); }, text: String(i + 1), inline: true }, i)); }) }), void 0)), jsxRuntime.jsx(Container$
|
|
14787
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [customClick && (jsxRuntime.jsx("div", __assign$1({ style: { display: 'flex', marginBottom: '20px', gap: '10px' } }, { children: images.map(function (_, i) { return (jsxRuntime.jsx(ButtonPrimary, { onClick: function () { return onButtonClick(i); }, text: String(i + 1), inline: true }, i)); }) }), void 0)), jsxRuntime.jsx(Container$E, __assign$1({ "data-testid": testId, borderRadiusVariant: borderRadiusVariant, ref: sliderWrapper }, { children: jsxRuntime.jsx(Slider$1, __assign$1({ afterChange: function (e) {
|
|
14788
14788
|
var _a;
|
|
14789
14789
|
var activeSlide = images[e];
|
|
14790
14790
|
// If autoplay is true and iframe is the active slide, play the video
|
|
@@ -14799,10 +14799,10 @@ var ImageProductSlideV3 = function (_a) {
|
|
|
14799
14799
|
};
|
|
14800
14800
|
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;
|
|
14801
14801
|
|
|
14802
|
-
var Container$
|
|
14802
|
+
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"])));
|
|
14803
14803
|
var ProductGalleryMobileV3 = function (_a) {
|
|
14804
14804
|
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;
|
|
14805
|
-
return (jsxRuntime.jsx(Container$
|
|
14805
|
+
return (jsxRuntime.jsx(Container$D, __assign$1({ "data-testid": "product-gallery-mobile-v3" }, { children: jsxRuntime.jsx(ImageProductSlideV3, { images: images, customClick: customClick, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant, selectedValue: selectedValue }, void 0) }), void 0));
|
|
14806
14806
|
};
|
|
14807
14807
|
var templateObject_1$S;
|
|
14808
14808
|
|
|
@@ -14871,7 +14871,7 @@ var MainContent = function (_a) {
|
|
|
14871
14871
|
React$2.useEffect(function () {
|
|
14872
14872
|
showArrows();
|
|
14873
14873
|
}, [selectedImageIndex]);
|
|
14874
|
-
return (jsxRuntime.jsx(Container$
|
|
14874
|
+
return (jsxRuntime.jsx(Container$J, __assign$1({ "data-testid": testId, borderRadiusVariant: borderRadiusVariant, ref: sliderWrapper }, { children: jsxRuntime.jsx(Slider$1, __assign$1({ afterChange: function (e) { return afterChangeSlide({
|
|
14875
14875
|
slide: e,
|
|
14876
14876
|
contents: contents,
|
|
14877
14877
|
setSelectedImageIndex: setSelectedImageIndex,
|
|
@@ -14890,7 +14890,7 @@ var MainContent = function (_a) {
|
|
|
14890
14890
|
}) }), void 0) }), void 0));
|
|
14891
14891
|
};
|
|
14892
14892
|
|
|
14893
|
-
var Container$
|
|
14893
|
+
var Container$C = newStyled.div({
|
|
14894
14894
|
padding: '1rem',
|
|
14895
14895
|
paddingTop: '2rem',
|
|
14896
14896
|
gap: '0.5rem',
|
|
@@ -14942,16 +14942,17 @@ var Slider = function (_a) {
|
|
|
14942
14942
|
block: 'nearest',
|
|
14943
14943
|
});
|
|
14944
14944
|
}, [selectedImageIndex, test]);
|
|
14945
|
-
return (jsxRuntime.jsx(Container$
|
|
14945
|
+
return (jsxRuntime.jsx(Container$C, { children: images.map(function (img, i) { return (jsxRuntime.jsx(Thumbnail, __assign$1({ onClick: function () { return handleSelectImage(img.key); }, ref: function (el) { return (itemsRef.current[i] = el); } }, { children: jsxRuntime.jsx(Img, { src: img.url, alt: img.alt, style: {
|
|
14946
14946
|
border: isTheActiveImage(i) ? getBorderColor() : borderImageInactive,
|
|
14947
14947
|
} }, void 0) }), img.key)); }) }, void 0));
|
|
14948
14948
|
};
|
|
14949
14949
|
|
|
14950
|
-
var Container$
|
|
14950
|
+
var Container$B = newStyled.div({
|
|
14951
14951
|
background: 'var(--truekind-default-secondary, #292929)',
|
|
14952
14952
|
height: '100vh',
|
|
14953
14953
|
width: '100vw',
|
|
14954
14954
|
position: 'fixed',
|
|
14955
|
+
zIndex: '9999',
|
|
14955
14956
|
top: 0,
|
|
14956
14957
|
left: 0,
|
|
14957
14958
|
});
|
|
@@ -14960,13 +14961,19 @@ var Header$2 = newStyled.div({
|
|
|
14960
14961
|
justifyContent: 'end',
|
|
14961
14962
|
alignItems: 'center',
|
|
14962
14963
|
color: 'white',
|
|
14963
|
-
padding: '
|
|
14964
|
-
paddingBottom: '2rem',
|
|
14964
|
+
padding: '1.2rem',
|
|
14965
14965
|
});
|
|
14966
14966
|
var IconContainer$2 = newStyled.div({
|
|
14967
14967
|
backgroundColor: '#E5E5E5',
|
|
14968
14968
|
padding: '4px 7px 7px 6px',
|
|
14969
14969
|
borderRadius: '50%',
|
|
14970
|
+
});
|
|
14971
|
+
newStyled.div({
|
|
14972
|
+
display: 'flex',
|
|
14973
|
+
flexDirection: 'column',
|
|
14974
|
+
height: '100%',
|
|
14975
|
+
justifyContent: 'space-around',
|
|
14976
|
+
padding: '20px 0'
|
|
14970
14977
|
});
|
|
14971
14978
|
|
|
14972
14979
|
var GalleryDetailed = function (_a) {
|
|
@@ -14974,7 +14981,7 @@ var GalleryDetailed = function (_a) {
|
|
|
14974
14981
|
function closeGallery() {
|
|
14975
14982
|
setGalleryOpened(false);
|
|
14976
14983
|
}
|
|
14977
|
-
return (jsxRuntime.jsxs(Container$
|
|
14984
|
+
return (jsxRuntime.jsxs(Container$B, { children: [jsxRuntime.jsx(Header$2, { children: jsxRuntime.jsx(IconContainer$2, __assign$1({ onClick: closeGallery }, { children: jsxRuntime.jsx(Icon.Actions.Close, { height: 1.1, width: 1.1 }, void 0) }), void 0) }, void 0), jsxRuntime.jsx(MainContent, { contents: images, selectedImageIndex: selectedImageIndex, setSelectedImageIndex: setSelectedImageIndex, topTag: topTag, topRightTag: topRightTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant, itemsOnViewport: itemsOnViewport }, void 0), jsxRuntime.jsx(Slider, { images: images, test: !!productImageDataTestId, selectedImageIndex: selectedImageIndex, setSelectedImageIndex: setSelectedImageIndex }, void 0)] }, void 0));
|
|
14978
14985
|
};
|
|
14979
14986
|
|
|
14980
14987
|
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'); });
|
|
@@ -15006,7 +15013,7 @@ var ContentGallery = function (_a) {
|
|
|
15006
15013
|
var _a;
|
|
15007
15014
|
(_a = slick.current) === null || _a === void 0 ? void 0 : _a.slickGoTo(selectedImageIndex, true);
|
|
15008
15015
|
}, [contents, selectedImageIndex]);
|
|
15009
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [customClick && (jsxRuntime.jsx("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 (jsxRuntime.jsx(ButtonPrimary, { onClick: function () { return onButtonClick(i); }, text: String(i + 1), inline: true }, content.key)); }) }), void 0)), jsxRuntime.jsx(Container$
|
|
15016
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [customClick && (jsxRuntime.jsx("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 (jsxRuntime.jsx(ButtonPrimary, { onClick: function () { return onButtonClick(i); }, text: String(i + 1), inline: true }, content.key)); }) }), void 0)), jsxRuntime.jsx(Container$J, __assign$1({ "data-testid": testId, borderRadiusVariant: borderRadiusVariant, ref: sliderWrapper }, { children: jsxRuntime.jsx(Slider$1, __assign$1({ afterChange: function (e) { return afterChangeSlide({
|
|
15010
15017
|
slide: e,
|
|
15011
15018
|
contents: contents,
|
|
15012
15019
|
setSelectedImageIndex: setSelectedImageIndex,
|
|
@@ -15020,9 +15027,6 @@ var ContentGallery = function (_a) {
|
|
|
15020
15027
|
}) }), void 0) }), void 0)] }, void 0));
|
|
15021
15028
|
};
|
|
15022
15029
|
|
|
15023
|
-
var Container$B = newStyled.div({
|
|
15024
|
-
height: '100vh',
|
|
15025
|
-
});
|
|
15026
15030
|
var MobileGallery = function (_a) {
|
|
15027
15031
|
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;
|
|
15028
15032
|
var _e = React$2.useState(selectedValue), selectedImageIndex = _e[0], setSelectedImageIndex = _e[1];
|
|
@@ -15030,7 +15034,7 @@ var MobileGallery = function (_a) {
|
|
|
15030
15034
|
React$2.useEffect(function () {
|
|
15031
15035
|
setSelectedImageIndex(selectedValue);
|
|
15032
15036
|
}, [selectedValue]);
|
|
15033
|
-
return (jsxRuntime.jsx(
|
|
15037
|
+
return (jsxRuntime.jsx("div", { children: galleryOpened ? (jsxRuntime.jsx(GalleryDetailed, { images: images, topTag: topTag, topRightTag: topRightTag, bottomTag: bottomTag, productImageDataTestId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant, itemsOnViewport: itemsOnViewport, selectedImageIndex: selectedImageIndex, setSelectedImageIndex: setSelectedImageIndex, setGalleryOpened: setGalleryOpened }, void 0)) : (jsxRuntime.jsx(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));
|
|
15034
15038
|
};
|
|
15035
15039
|
|
|
15036
15040
|
var __defProp$1 = Object.defineProperty;
|