@trafilea/afrodita-components 6.43.14 → 6.44.1
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.css +2 -1
- package/build/index.d.ts +35 -32
- package/build/index.esm.css +2 -1
- package/build/index.esm.js +853 -807
- package/build/index.esm.js.map +1 -1
- package/build/index.js +853 -806
- package/build/index.js.map +1 -1
- package/package.json +1 -1
package/build/index.esm.js
CHANGED
|
@@ -3189,7 +3189,7 @@ var getStylesBySize$g = function (size) {
|
|
|
3189
3189
|
};
|
|
3190
3190
|
}
|
|
3191
3191
|
};
|
|
3192
|
-
var Container$1q = newStyled.div(templateObject_1$
|
|
3192
|
+
var Container$1q = newStyled.div(templateObject_1$2q || (templateObject_1$2q = __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) {
|
|
3193
3193
|
var backgroundColor = _a.backgroundColor;
|
|
3194
3194
|
return backgroundColor;
|
|
3195
3195
|
}, function (_a) {
|
|
@@ -3211,7 +3211,7 @@ var Container$1q = newStyled.div(templateObject_1$2o || (templateObject_1$2o = _
|
|
|
3211
3211
|
var size = _a.size;
|
|
3212
3212
|
return (_b = getStylesBySize$g(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
3213
3213
|
});
|
|
3214
|
-
var H3$2 = newStyled.h3(templateObject_2$
|
|
3214
|
+
var H3$2 = newStyled.h3(templateObject_2$1J || (templateObject_2$1J = __makeTemplateObject(["\n color: ", ";\n font-weight: bold;\n margin: 0;\n font-size: ", ";\n line-height: ", ";\n"], ["\n color: ", ";\n font-weight: bold;\n margin: 0;\n font-size: ", ";\n line-height: ", ";\n"])), function (_a) {
|
|
3215
3215
|
var textColor = _a.textColor;
|
|
3216
3216
|
return textColor;
|
|
3217
3217
|
}, function (_a) {
|
|
@@ -3228,7 +3228,7 @@ var ClubOfferTag = function (_a) {
|
|
|
3228
3228
|
var theme = useTheme();
|
|
3229
3229
|
return (jsx$1(Container$1q, __assign$1({ backgroundColor: disabled ? theme.colors.shades['50'].color : backgroundColor, borderColor: disabled ? theme.colors.shades['50'].color : borderColor, size: size, "data-testid": "cluboffer-container", style: style, className: className }, { children: jsx$1(H3$2, __assign$1({ textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size, style: { fontSize: '0.875rem', lineHeight: '18px' } }, { children: clubOfferText }), void 0) }), void 0));
|
|
3230
3230
|
};
|
|
3231
|
-
var templateObject_1$
|
|
3231
|
+
var templateObject_1$2q, templateObject_2$1J;
|
|
3232
3232
|
|
|
3233
3233
|
var getStylesBySize$f = function (size, bordersRounded, theme) {
|
|
3234
3234
|
var _a, _b, _c;
|
|
@@ -3259,7 +3259,7 @@ var getStylesBySize$f = function (size, bordersRounded, theme) {
|
|
|
3259
3259
|
};
|
|
3260
3260
|
}
|
|
3261
3261
|
};
|
|
3262
|
-
var Container$1p = newStyled.div(templateObject_1$
|
|
3262
|
+
var Container$1p = newStyled.div(templateObject_1$2p || (templateObject_1$2p = __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) {
|
|
3263
3263
|
var backgroundColor = _a.backgroundColor;
|
|
3264
3264
|
return backgroundColor;
|
|
3265
3265
|
}, function (_a) {
|
|
@@ -3281,7 +3281,7 @@ var Container$1p = newStyled.div(templateObject_1$2n || (templateObject_1$2n = _
|
|
|
3281
3281
|
var size = _a.size;
|
|
3282
3282
|
return (_b = getStylesBySize$f(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
3283
3283
|
});
|
|
3284
|
-
var H3$1 = newStyled.h3(templateObject_2$
|
|
3284
|
+
var H3$1 = newStyled.h3(templateObject_2$1I || (templateObject_2$1I = __makeTemplateObject(["\n color: ", ";\n font-weight: bold;\n margin: 0;\n font-size: ", ";\n line-height: ", ";\n"], ["\n color: ", ";\n font-weight: bold;\n margin: 0;\n font-size: ", ";\n line-height: ", ";\n"])), function (_a) {
|
|
3285
3285
|
var textColor = _a.textColor;
|
|
3286
3286
|
return textColor;
|
|
3287
3287
|
}, function (_a) {
|
|
@@ -3298,7 +3298,7 @@ var DiscountTag$3 = function (_a) {
|
|
|
3298
3298
|
var theme = useTheme();
|
|
3299
3299
|
return (jsx$1(Container$1p, __assign$1({ backgroundColor: disabled ? theme.colors.shades['50'].color : backgroundColor, borderColor: disabled ? theme.colors.shades['50'].color : borderColor, size: size, "data-testid": "discount-container", style: style, bordersRounded: bordersRounded }, { children: jsxs$1(H3$1, __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));
|
|
3300
3300
|
};
|
|
3301
|
-
var templateObject_1$
|
|
3301
|
+
var templateObject_1$2p, templateObject_2$1I;
|
|
3302
3302
|
|
|
3303
3303
|
var Viewports = {
|
|
3304
3304
|
mobile: 'mobile',
|
|
@@ -3407,8 +3407,8 @@ var getFontSize = function (size, theme, finalPriceStyled, finalPriceStyledSmall
|
|
|
3407
3407
|
return (_c = getStylesBySize$e(size, theme)) === null || _c === void 0 ? void 0 : _c.fontSize;
|
|
3408
3408
|
}
|
|
3409
3409
|
};
|
|
3410
|
-
var Container$1o = newStyled.div(templateObject_1$
|
|
3411
|
-
var Price = newStyled.p(templateObject_2$
|
|
3410
|
+
var Container$1o = newStyled.div(templateObject_1$2o || (templateObject_1$2o = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
3411
|
+
var Price = newStyled.p(templateObject_2$1H || (templateObject_2$1H = __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) {
|
|
3412
3412
|
var weight = _a.weight;
|
|
3413
3413
|
return (weight ? weight : '400');
|
|
3414
3414
|
}, function (_a) {
|
|
@@ -3432,7 +3432,7 @@ var Price = newStyled.p(templateObject_2$1F || (templateObject_2$1F = __makeTemp
|
|
|
3432
3432
|
var finalPriceStyledSmall = _a.finalPriceStyledSmall, size = _a.size;
|
|
3433
3433
|
return finalPriceStyledSmall ? (size === 'large' ? '-6px' : '-7px') : '0';
|
|
3434
3434
|
});
|
|
3435
|
-
var TagContainer = newStyled.div(templateObject_3$
|
|
3435
|
+
var TagContainer = newStyled.div(templateObject_3$1j || (templateObject_3$1j = __makeTemplateObject(["\n margin: ", ";\n display: flex;\n align-items: center;\n"], ["\n margin: ", ";\n display: flex;\n align-items: center;\n"])), function (_a) {
|
|
3436
3436
|
var _b;
|
|
3437
3437
|
var size = _a.size;
|
|
3438
3438
|
return (_b = getStylesBySize$e(size)) === null || _b === void 0 ? void 0 : _b.margin;
|
|
@@ -3465,9 +3465,9 @@ var PriceLabel$1 = function (_a) {
|
|
|
3465
3465
|
};
|
|
3466
3466
|
return (jsxs$1(Container$1o, __assign$1({}, rest, { id: "priceLabel" }, { children: [clubStyle ? (jsxs$1(Fragment$2, { children: [!!originalPrice && jsx$1(OriginalPrice, {}, void 0), jsx$1(Price, __assign$1({ margin: true, "data-testid": getTestId$1(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: finalPrice }), void 0)] }, void 0)) : (jsxs$1(Fragment$2, { children: [jsx$1(Price, __assign$1({ margin: true, "data-testid": getTestId$1(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: finalPrice }), void 0), !!originalPrice && jsx$1(OriginalPrice, {}, void 0)] }, void 0)), discount && (jsx$1(TagContainer, __assign$1({ size: size }, { children: jsx$1(DiscountTag$3, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
|
|
3467
3467
|
};
|
|
3468
|
-
var templateObject_1$
|
|
3468
|
+
var templateObject_1$2o, templateObject_2$1H, templateObject_3$1j;
|
|
3469
3469
|
|
|
3470
|
-
var FinalPriceStyledContainer$3 = newStyled.div(templateObject_1$
|
|
3470
|
+
var FinalPriceStyledContainer$3 = newStyled.div(templateObject_1$2n || (templateObject_1$2n = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
3471
3471
|
var PriceLabelV2$1 = function (_a) {
|
|
3472
3472
|
var _b;
|
|
3473
3473
|
var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, discount = _a.discount, clubOffer = _a.clubOffer, color = _a.color, testId = _a.testId, _c = _a.originalPriceStyled, originalPriceStyled = _c === void 0 ? false : _c, _d = _a.originalPriceUnderlined, originalPriceUnderlined = _d === void 0 ? true : _d, _e = _a.size, size = _e === void 0 ? ComponentSize.Small : _e, _f = _a.bordersRounded, bordersRounded = _f === void 0 ? false : _f, _g = _a.savingsDisplay, savingsDisplay = _g === void 0 ? true : _g, pricePerItem = _a.pricePerItem, _h = _a.hasRoundedSavings, hasRoundedSavings = _h === void 0 ? true : _h, rest = __rest(_a, ["finalPrice", "originalPrice", "discount", "clubOffer", "color", "testId", "originalPriceStyled", "originalPriceUnderlined", "size", "bordersRounded", "savingsDisplay", "pricePerItem", "hasRoundedSavings"]);
|
|
@@ -3536,11 +3536,11 @@ var PriceLabelV2$1 = function (_a) {
|
|
|
3536
3536
|
lineHeight: '22px',
|
|
3537
3537
|
} }), void 0)) }), void 0))] }), void 0));
|
|
3538
3538
|
};
|
|
3539
|
-
var templateObject_1$
|
|
3539
|
+
var templateObject_1$2n;
|
|
3540
3540
|
|
|
3541
|
-
var FinalPriceStyledContainer$2 = newStyled.div(templateObject_1$
|
|
3542
|
-
var ContainerDirectionColumn = newStyled.div(templateObject_2$
|
|
3543
|
-
var DiscountEachOneContainer = newStyled.div(templateObject_3$
|
|
3541
|
+
var FinalPriceStyledContainer$2 = newStyled.div(templateObject_1$2m || (templateObject_1$2m = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
3542
|
+
var ContainerDirectionColumn = newStyled.div(templateObject_2$1G || (templateObject_2$1G = __makeTemplateObject(["\n display: column;\n align-items: center;\n"], ["\n display: column;\n align-items: center;\n"])));
|
|
3543
|
+
var DiscountEachOneContainer = newStyled.div(templateObject_3$1i || (templateObject_3$1i = __makeTemplateObject(["\n display: flex;\n padding-left: 0.5rem;\n"], ["\n display: flex;\n padding-left: 0.5rem;\n"])));
|
|
3544
3544
|
var PriceLabelV3 = function (_a) {
|
|
3545
3545
|
var _b;
|
|
3546
3546
|
var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, discount = _a.discount, clubOffer = _a.clubOffer, color = _a.color, testId = _a.testId, _c = _a.originalPriceStyled, originalPriceStyled = _c === void 0 ? false : _c, _d = _a.originalPriceUnderlined, originalPriceUnderlined = _d === void 0 ? true : _d, _e = _a.size, size = _e === void 0 ? ComponentSize.Small : _e, _f = _a.bordersRounded, bordersRounded = _f === void 0 ? false : _f, _g = _a.savingsDisplay, savingsDisplay = _g === void 0 ? true : _g, itemsQuantity = _a.itemsQuantity, packUnitPrice = _a.packUnitPrice, rest = __rest(_a, ["finalPrice", "originalPrice", "discount", "clubOffer", "color", "testId", "originalPriceStyled", "originalPriceUnderlined", "size", "bordersRounded", "savingsDisplay", "itemsQuantity", "packUnitPrice"]);
|
|
@@ -3611,9 +3611,9 @@ var PriceLabelV3 = function (_a) {
|
|
|
3611
3611
|
lineHeight: '22px',
|
|
3612
3612
|
} }), void 0)) }), void 0))] }, void 0)] }), void 0));
|
|
3613
3613
|
};
|
|
3614
|
-
var templateObject_1$
|
|
3614
|
+
var templateObject_1$2m, templateObject_2$1G, templateObject_3$1i;
|
|
3615
3615
|
|
|
3616
|
-
var FinalPriceStyledContainer$1 = newStyled.div(templateObject_1$
|
|
3616
|
+
var FinalPriceStyledContainer$1 = newStyled.div(templateObject_1$2l || (templateObject_1$2l = __makeTemplateObject(["\n display: flex;\n margin-left: -5px;\n"], ["\n display: flex;\n margin-left: -5px;\n"])));
|
|
3617
3617
|
var PriceLabel = function (_a) {
|
|
3618
3618
|
var _b;
|
|
3619
3619
|
var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, color = _a.color, testId = _a.testId, _c = _a.originalPriceStyled, originalPriceStyled = _c === void 0 ? false : _c, _d = _a.originalPriceUnderlined, originalPriceUnderlined = _d === void 0 ? true : _d, _e = _a.size, size = _e === void 0 ? ComponentSize.Small : _e, _f = _a.isClubOffer, isClubOffer = _f === void 0 ? false : _f, rest = __rest(_a, ["finalPrice", "originalPrice", "color", "testId", "originalPriceStyled", "originalPriceUnderlined", "size", "isClubOffer"]);
|
|
@@ -3647,9 +3647,9 @@ var PriceLabel = function (_a) {
|
|
|
3647
3647
|
marginTop: '-6px',
|
|
3648
3648
|
} }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }), void 0)] }), void 0));
|
|
3649
3649
|
};
|
|
3650
|
-
var templateObject_1$
|
|
3650
|
+
var templateObject_1$2l;
|
|
3651
3651
|
|
|
3652
|
-
var FinalPriceStyledContainer = newStyled.div(templateObject_1$
|
|
3652
|
+
var FinalPriceStyledContainer = newStyled.div(templateObject_1$2k || (templateObject_1$2k = __makeTemplateObject(["\n display: flex;\n margin-left: -5px;\n"], ["\n display: flex;\n margin-left: -5px;\n"])));
|
|
3653
3653
|
var PriceLabelV2 = function (_a) {
|
|
3654
3654
|
var _b;
|
|
3655
3655
|
var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, color = _a.color, testId = _a.testId, _c = _a.originalPriceStyled, originalPriceStyled = _c === void 0 ? false : _c, _d = _a.originalPriceUnderlined, originalPriceUnderlined = _d === void 0 ? true : _d, _e = _a.size, size = _e === void 0 ? ComponentSize.Small : _e, _f = _a.isClubOffer, isClubOffer = _f === void 0 ? false : _f, rest = __rest(_a, ["finalPrice", "originalPrice", "color", "testId", "originalPriceStyled", "originalPriceUnderlined", "size", "isClubOffer"]);
|
|
@@ -3682,11 +3682,11 @@ var PriceLabelV2 = function (_a) {
|
|
|
3682
3682
|
: (_b = "".concat(finalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1];
|
|
3683
3683
|
return (jsxs$1(Container$1o, __assign$1({}, rest, { children: [isOriginalPrice && !isClubOffer && jsx$1(OriginalPrice, {}, void 0), jsxs$1(FinalPriceStyledContainer, __assign$1({ "data-testid": getTestId$1(testId, 'final-product-price'), style: { marginLeft: '-3px' } }, { children: [jsxs$1(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size }, { children: [currencySymbol, finalPriceString] }), void 0), jsx$1(Price, __assign$1({ finalPriceStyledSmall: true }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }), void 0)] }), void 0));
|
|
3684
3684
|
};
|
|
3685
|
-
var templateObject_1$
|
|
3685
|
+
var templateObject_1$2k;
|
|
3686
3686
|
|
|
3687
|
-
var ContainerWrapper$2 = newStyled.div(templateObject_1$
|
|
3688
|
-
var ImgWrapper = newStyled.div(templateObject_2$
|
|
3689
|
-
var templateObject_1$
|
|
3687
|
+
var ContainerWrapper$2 = newStyled.div(templateObject_1$2j || (templateObject_1$2j = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 2px;\n"], ["\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 2px;\n"])));
|
|
3688
|
+
var ImgWrapper = newStyled.div(templateObject_2$1F || (templateObject_2$1F = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n width: 50px auto;\n height: 20px;\n opacity: 0px;\n position: relative;\n"], ["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n width: 50px auto;\n height: 20px;\n opacity: 0px;\n position: relative;\n"])));
|
|
3689
|
+
var templateObject_1$2j, templateObject_2$1F;
|
|
3690
3690
|
|
|
3691
3691
|
var ClubPriceMemberLabel = function (_a) {
|
|
3692
3692
|
var isClub = _a.isClub, _b = _a.isPDP, isPDP = _b === void 0 ? false : _b, icon = _a.icon, _c = _a.isCollections, isCollections = _c === void 0 ? false : _c, rest = __rest(_a, ["isClub", "isPDP", "icon", "isCollections"]);
|
|
@@ -3695,13 +3695,13 @@ var ClubPriceMemberLabel = function (_a) {
|
|
|
3695
3695
|
return (jsx$1("div", { children: isClub ? (jsxs$1(ContainerWrapper$2, __assign$1({ id: "priceMemberLabelWrapper" }, { children: [PriceComponent, jsx$1(ImgWrapper, __assign$1({ id: "priceMemberLabelImgWrapper" }, { children: icon }), void 0)] }), void 0)) : (jsx$1(Fragment$2, { children: PriceComponent }, void 0)) }, void 0));
|
|
3696
3696
|
};
|
|
3697
3697
|
|
|
3698
|
-
var HorizontalDivider = newStyled.div(templateObject_1$
|
|
3698
|
+
var HorizontalDivider = newStyled.div(templateObject_1$2i || (templateObject_1$2i = __makeTemplateObject(["\n border: unset;\n outline: unset;\n background-color: var(--colors-shades-100-color);\n height: 1px;\n width: ", ";\n margin: 4% auto;\n"], ["\n border: unset;\n outline: unset;\n background-color: var(--colors-shades-100-color);\n height: 1px;\n width: ", ";\n margin: 4% auto;\n"])), function (_a) {
|
|
3699
3699
|
var width = _a.width;
|
|
3700
3700
|
return width !== null && width !== void 0 ? width : '100%';
|
|
3701
3701
|
});
|
|
3702
|
-
var templateObject_1$
|
|
3702
|
+
var templateObject_1$2i;
|
|
3703
3703
|
|
|
3704
|
-
var Container$1n = newStyled.div(templateObject_1$
|
|
3704
|
+
var Container$1n = newStyled.div(templateObject_1$2h || (templateObject_1$2h = __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) {
|
|
3705
3705
|
var height = _a.height;
|
|
3706
3706
|
return height !== null && height !== void 0 ? height : '1.5em';
|
|
3707
3707
|
}, function (_a) {
|
|
@@ -3728,9 +3728,9 @@ var SkeletonBox = function (_a) {
|
|
|
3728
3728
|
var theme = useTheme();
|
|
3729
3729
|
return jsx$1(Container$1n, { "data-testid": "skeleton-container", width: width, height: height, theme: theme }, void 0);
|
|
3730
3730
|
};
|
|
3731
|
-
var templateObject_1$
|
|
3731
|
+
var templateObject_1$2h;
|
|
3732
3732
|
|
|
3733
|
-
var StyledSvgWrapper = newStyled.svg(templateObject_1$
|
|
3733
|
+
var StyledSvgWrapper = newStyled.svg(templateObject_1$2g || (templateObject_1$2g = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n color: ", ";\n display: inline-block;\n vertical-align: middle;\n flex: none;\n ", "\n ", "\n"], ["\n width: ", ";\n height: ", ";\n color: ", ";\n display: inline-block;\n vertical-align: middle;\n flex: none;\n ", "\n ", "\n"])), function (_a) {
|
|
3734
3734
|
var width = _a.width;
|
|
3735
3735
|
return width;
|
|
3736
3736
|
}, function (_a) {
|
|
@@ -3746,7 +3746,7 @@ var StyledSvgWrapper = newStyled.svg(templateObject_1$2e || (templateObject_1$2e
|
|
|
3746
3746
|
var opacity = _a.opacity;
|
|
3747
3747
|
return opacity && "opacity: ".concat(opacity, ";");
|
|
3748
3748
|
});
|
|
3749
|
-
var StyledImageWrapper = newStyled.img(templateObject_2$
|
|
3749
|
+
var StyledImageWrapper = newStyled.img(templateObject_2$1E || (templateObject_2$1E = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n display: inline-block;\n vertical-align: middle;\n flex: none;\n ", "\n ", "\n"], ["\n width: ", ";\n height: ", ";\n display: inline-block;\n vertical-align: middle;\n flex: none;\n ", "\n ", "\n"])), function (_a) {
|
|
3750
3750
|
var width = _a.width;
|
|
3751
3751
|
return width;
|
|
3752
3752
|
}, function (_a) {
|
|
@@ -3759,7 +3759,7 @@ var StyledImageWrapper = newStyled.img(templateObject_2$1C || (templateObject_2$
|
|
|
3759
3759
|
var opacity = _a.opacity;
|
|
3760
3760
|
return opacity && "opacity: ".concat(opacity, ";");
|
|
3761
3761
|
});
|
|
3762
|
-
var templateObject_1$
|
|
3762
|
+
var templateObject_1$2g, templateObject_2$1E;
|
|
3763
3763
|
|
|
3764
3764
|
/* eslint-disable no-undef */
|
|
3765
3765
|
var cache = new Map();
|
|
@@ -3935,7 +3935,7 @@ var buildImageUrl = function (_a) {
|
|
|
3935
3935
|
}
|
|
3936
3936
|
};
|
|
3937
3937
|
|
|
3938
|
-
var Img$1 = newStyled.img(templateObject_1$
|
|
3938
|
+
var Img$1 = newStyled.img(templateObject_1$2f || (templateObject_1$2f = __makeTemplateObject(["\n height: ", ";\n width: ", ";\n border-radius: ", ";\n object-fit: ", ";\n object-position: ", ";\n"], ["\n height: ", ";\n width: ", ";\n border-radius: ", ";\n object-fit: ", ";\n object-position: ", ";\n"])), function (props) { return props.height; }, function (props) { return props.width; }, function (props) { return props.borderRadius; }, function (props) { return props.objectFit; }, function (props) { return props.objectPosition; });
|
|
3939
3939
|
var Image$3 = function (_a) {
|
|
3940
3940
|
var src = _a.src, srcSet = _a.srcSet, _b = _a.sizes, sizes = _b === void 0 ? '100vw' : _b, _c = _a.loading, loading = _c === void 0 ? 'lazy' : _c, _d = _a.decoding, decoding = _d === void 0 ? 'async' : _d, alt = _a.alt, height = _a.height, width = _a.width, borderRadius = _a.borderRadius, objectFit = _a.objectFit, objectPosition = _a.objectPosition, quality = _a.quality, rest = __rest(_a, ["src", "srcSet", "sizes", "loading", "decoding", "alt", "height", "width", "borderRadius", "objectFit", "objectPosition", "quality"]);
|
|
3941
3941
|
var config = useTheme().config;
|
|
@@ -3944,15 +3944,15 @@ var Image$3 = function (_a) {
|
|
|
3944
3944
|
: src;
|
|
3945
3945
|
return (jsx$1(Img$1, __assign$1({ src: source, srcSet: srcSet, sizes: sizes, loading: loading, decoding: decoding, alt: alt, height: height, width: width, borderRadius: borderRadius, objectFit: objectFit, objectPosition: objectPosition }, rest), void 0));
|
|
3946
3946
|
};
|
|
3947
|
-
var templateObject_1$
|
|
3947
|
+
var templateObject_1$2f;
|
|
3948
3948
|
|
|
3949
|
-
var LabelWrapper = newStyled.label(templateObject_1$
|
|
3950
|
-
var SwitchWrapper = newStyled.div(templateObject_2$
|
|
3951
|
-
var InputWrapper$1 = newStyled.input(templateObject_3$
|
|
3949
|
+
var LabelWrapper = newStyled.label(templateObject_1$2e || (templateObject_1$2e = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: 10px;\n cursor: pointer;\n"], ["\n display: flex;\n align-items: center;\n gap: 10px;\n cursor: pointer;\n"])));
|
|
3950
|
+
var SwitchWrapper = newStyled.div(templateObject_2$1D || (templateObject_2$1D = __makeTemplateObject(["\n position: relative;\n width: 36px;\n height: 20px;\n background: #949494;\n border-radius: 60px;\n padding: 4px;\n transition: 300ms all;\n\n &:before {\n transition: 300ms all;\n content: '';\n position: absolute;\n width: 16px;\n height: 16px;\n border-radius: 35px;\n top: 50%;\n left: 2.5px;\n background: white;\n transform: translate(0, -50%);\n }\n"], ["\n position: relative;\n width: 36px;\n height: 20px;\n background: #949494;\n border-radius: 60px;\n padding: 4px;\n transition: 300ms all;\n\n &:before {\n transition: 300ms all;\n content: '';\n position: absolute;\n width: 16px;\n height: 16px;\n border-radius: 35px;\n top: 50%;\n left: 2.5px;\n background: white;\n transform: translate(0, -50%);\n }\n"])));
|
|
3951
|
+
var InputWrapper$1 = newStyled.input(templateObject_3$1h || (templateObject_3$1h = __makeTemplateObject(["\n opacity: 0;\n position: absolute;\n\n &:checked + div {\n background: ", ";\n\n &:before {\n transform: translate(14.5px, -50%);\n }\n }\n"], ["\n opacity: 0;\n position: absolute;\n\n &:checked + div {\n background: ", ";\n\n &:before {\n transform: translate(14.5px, -50%);\n }\n }\n"])), function (_a) {
|
|
3952
3952
|
var $color = _a.$color;
|
|
3953
3953
|
return $color;
|
|
3954
3954
|
});
|
|
3955
|
-
var templateObject_1$
|
|
3955
|
+
var templateObject_1$2e, templateObject_2$1D, templateObject_3$1h;
|
|
3956
3956
|
|
|
3957
3957
|
var ToggleComponent = function (_a) {
|
|
3958
3958
|
var onToggle = _a.onToggle, _b = _a.isChecked, isChecked = _b === void 0 ? false : _b, _c = _a.color, color = _c === void 0 ? '#882a2b' : _c;
|
|
@@ -4807,14 +4807,14 @@ function jsxs(type, props, key) {
|
|
|
4807
4807
|
// This defines which HTML tag to render for each `variant`, it also defines
|
|
4808
4808
|
// `variants` styles that are consistent through all themes.
|
|
4809
4809
|
var TAGS = {
|
|
4810
|
-
hero1: newStyled.h1(templateObject_1$
|
|
4811
|
-
hero2: newStyled.h2(templateObject_2$
|
|
4812
|
-
hero3: newStyled.h3(templateObject_3$
|
|
4813
|
-
display1: newStyled.h1(templateObject_4
|
|
4810
|
+
hero1: newStyled.h1(templateObject_1$2d || (templateObject_1$2d = __makeTemplateObject([""], [""]))),
|
|
4811
|
+
hero2: newStyled.h2(templateObject_2$1C || (templateObject_2$1C = __makeTemplateObject([""], [""]))),
|
|
4812
|
+
hero3: newStyled.h3(templateObject_3$1g || (templateObject_3$1g = __makeTemplateObject([""], [""]))),
|
|
4813
|
+
display1: newStyled.h1(templateObject_4$10 || (templateObject_4$10 = __makeTemplateObject([""], [""]))),
|
|
4814
4814
|
display2: newStyled.h2(templateObject_5$M || (templateObject_5$M = __makeTemplateObject([""], [""]))),
|
|
4815
|
-
display3: newStyled.h3(templateObject_6$
|
|
4816
|
-
heading1: newStyled.h1(templateObject_7$
|
|
4817
|
-
heading2: newStyled.h2(templateObject_8$
|
|
4815
|
+
display3: newStyled.h3(templateObject_6$F || (templateObject_6$F = __makeTemplateObject([""], [""]))),
|
|
4816
|
+
heading1: newStyled.h1(templateObject_7$w || (templateObject_7$w = __makeTemplateObject([""], [""]))),
|
|
4817
|
+
heading2: newStyled.h2(templateObject_8$p || (templateObject_8$p = __makeTemplateObject([""], [""]))),
|
|
4818
4818
|
heading3: newStyled.h3(templateObject_9$d || (templateObject_9$d = __makeTemplateObject([""], [""]))),
|
|
4819
4819
|
heading4: newStyled.h4(templateObject_10$c || (templateObject_10$c = __makeTemplateObject([""], [""]))),
|
|
4820
4820
|
heading5: newStyled.h5(templateObject_11$8 || (templateObject_11$8 = __makeTemplateObject([""], [""]))),
|
|
@@ -4947,14 +4947,14 @@ var DEFAULTS = {
|
|
|
4947
4947
|
size: 'regular',
|
|
4948
4948
|
},
|
|
4949
4949
|
};
|
|
4950
|
-
var templateObject_1$
|
|
4950
|
+
var templateObject_1$2d, templateObject_2$1C, templateObject_3$1g, templateObject_4$10, templateObject_5$M, templateObject_6$F, templateObject_7$w, templateObject_8$p, 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;
|
|
4951
4951
|
|
|
4952
|
-
var Container$1m = newStyled.div(templateObject_1$
|
|
4953
|
-
var Card$4 = newStyled.div(templateObject_2$
|
|
4954
|
-
var Tag$2 = newStyled.div(templateObject_3$
|
|
4955
|
-
var Label$7 = newStyled.div(templateObject_4
|
|
4952
|
+
var Container$1m = newStyled.div(templateObject_1$2c || (templateObject_1$2c = __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"])));
|
|
4953
|
+
var Card$4 = newStyled.div(templateObject_2$1B || (templateObject_2$1B = __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"])));
|
|
4954
|
+
var Tag$2 = newStyled.div(templateObject_3$1f || (templateObject_3$1f = __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"])));
|
|
4955
|
+
var Label$7 = newStyled.div(templateObject_4$$ || (templateObject_4$$ = __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"])));
|
|
4956
4956
|
var Check$1 = newStyled.div(templateObject_5$L || (templateObject_5$L = __makeTemplateObject(["\n position: absolute;\n width: 20px;\n height: 20px;\n background-color: var(--color);\n border-radius: 50%;\n left: 100%;\n top: 50%;\n transform: translate(6px, -50%) scale(0.5);\n opacity: 0;\n transition: opacity 0.3s, transform 0.3s;\n\n &[data-visible='true'] {\n transform: translate(6px, -50%) scale(1);\n opacity: 1;\n }\n"], ["\n position: absolute;\n width: 20px;\n height: 20px;\n background-color: var(--color);\n border-radius: 50%;\n left: 100%;\n top: 50%;\n transform: translate(6px, -50%) scale(0.5);\n opacity: 0;\n transition: opacity 0.3s, transform 0.3s;\n\n &[data-visible='true'] {\n transform: translate(6px, -50%) scale(1);\n opacity: 1;\n }\n"])));
|
|
4957
|
-
var DiscountContainer$1 = newStyled.div(templateObject_6$
|
|
4957
|
+
var DiscountContainer$1 = newStyled.div(templateObject_6$E || (templateObject_6$E = __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"])));
|
|
4958
4958
|
var PackSelectorV2 = function (_a) {
|
|
4959
4959
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange, currencyCode = _a.currencyCode;
|
|
4960
4960
|
return (jsx$1(Container$1m, __assign$1({ role: "radiogroup" }, { children: packs.map(function (pack) {
|
|
@@ -4979,27 +4979,27 @@ var PackCard$1 = function (_a) {
|
|
|
4979
4979
|
currency: currencyCode || 'USD',
|
|
4980
4980
|
}), ' ', "each", ')'] }), void 0)) : null] }, void 0)] }), void 0));
|
|
4981
4981
|
};
|
|
4982
|
-
var templateObject_1$
|
|
4982
|
+
var templateObject_1$2c, templateObject_2$1B, templateObject_3$1f, templateObject_4$$, templateObject_5$L, templateObject_6$E;
|
|
4983
4983
|
|
|
4984
|
-
var Container$1l = newStyled.div(templateObject_1$
|
|
4985
|
-
var DropContainer = newStyled.div(templateObject_2$
|
|
4984
|
+
var Container$1l = newStyled.div(templateObject_1$2b || (templateObject_1$2b = __makeTemplateObject(["\n height: 32px;\n display: flex;\n align-items: center;\n"], ["\n height: 32px;\n display: flex;\n align-items: center;\n"])));
|
|
4985
|
+
var DropContainer = newStyled.div(templateObject_2$1A || (templateObject_2$1A = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
4986
4986
|
var DropList = function (_a) {
|
|
4987
4987
|
var dropTotal = _a.dropTotal, drops = _a.drops;
|
|
4988
4988
|
return (jsx$1(Container$1l, { children: __spreadArray([], new Array(dropTotal), true).map(function (_, index) {
|
|
4989
4989
|
return (jsx$1(DropContainer, __assign$1({ "data-testid": "star-container" }, { children: index < Math.floor(drops) ? (jsx$1(Icon.PDP.Drop, { width: 0.875, height: 0.875 }, void 0)) : (jsx$1(Icon.PDP.DropEmpty, { width: 0.875, height: 0.875 }, void 0)) }), index));
|
|
4990
4990
|
}) }, void 0));
|
|
4991
4991
|
};
|
|
4992
|
-
var templateObject_1$
|
|
4992
|
+
var templateObject_1$2b, templateObject_2$1A;
|
|
4993
4993
|
|
|
4994
4994
|
var DROPS_TOTAL = 5;
|
|
4995
|
-
var Container$1k = newStyled.div(templateObject_1$
|
|
4996
|
-
var Title$
|
|
4997
|
-
var Description$3 = newStyled.p(templateObject_3$
|
|
4995
|
+
var Container$1k = newStyled.div(templateObject_1$2a || (templateObject_1$2a = __makeTemplateObject(["\n height: 32px;\n display: flex;\n"], ["\n height: 32px;\n display: flex;\n"])));
|
|
4996
|
+
var Title$b = newStyled.p(templateObject_2$1z || (templateObject_2$1z = __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"])));
|
|
4997
|
+
var Description$3 = newStyled.p(templateObject_3$1e || (templateObject_3$1e = __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"])));
|
|
4998
4998
|
var AbsorbencyLevel = function (_a) {
|
|
4999
4999
|
var dropTotal = _a.dropTotal, drops = _a.drops, absorbencyTitle = _a.absorbencyTitle, absorbencyDescription = _a.absorbencyDescription;
|
|
5000
|
-
return (jsxs$1(Container$1k, { children: [jsx$1(Title$
|
|
5000
|
+
return (jsxs$1(Container$1k, { children: [jsx$1(Title$b, { children: absorbencyTitle }, void 0), jsx$1(DropList, { dropTotal: dropTotal || DROPS_TOTAL, drops: drops }, void 0), jsx$1(Description$3, { children: absorbencyDescription }, void 0)] }, void 0));
|
|
5001
5001
|
};
|
|
5002
|
-
var templateObject_1$
|
|
5002
|
+
var templateObject_1$2a, templateObject_2$1z, templateObject_3$1e;
|
|
5003
5003
|
|
|
5004
5004
|
function k$1(){let e=[],t=[],r={enqueue(o){t.push(o);},requestAnimationFrame(...o){let n=requestAnimationFrame(...o);r.add(()=>cancelAnimationFrame(n));},nextFrame(...o){r.requestAnimationFrame(()=>{r.requestAnimationFrame(...o);});},setTimeout(...o){let n=setTimeout(...o);r.add(()=>clearTimeout(n));},add(o){e.push(o);},dispose(){for(let o of e.splice(0))o();},async workQueue(){for(let o of t.splice(0))await o();}};return r}function Q(){let[e]=useState(k$1);return useEffect(()=>()=>e.dispose(),[e]),e}var x$1=typeof window!="undefined"?useLayoutEffect:useEffect;var yt={serverHandoffComplete:!1};function q$1(){let[e,t]=useState(yt.serverHandoffComplete);return useEffect(()=>{e!==!0&&t(!0);},[e]),useEffect(()=>{yt.serverHandoffComplete===!1&&(yt.serverHandoffComplete=!0);},[]),e}var or=0;function to(){return ++or}function A$1(){let e=q$1(),[t,r]=useState(e?to:null);return x$1(()=>{t===null&&r(to());},[t]),t!=null?""+t:void 0}function ke(e){let t=useRef(e);return useEffect(()=>{t.current=e;},[e]),t}function ee(e,t){let[r,o]=useState(e),n=ke(e);return x$1(()=>o(n.current),[n,o,...t]),r}function I(...e){let t=useRef(e);return useEffect(()=>{t.current=e;},[e]),useCallback(r=>{for(let o of t.current)o!=null&&(typeof o=="function"?o(r):o.current=r);},[t])}function S(e,t,...r){if(e in t){let n=t[e];return typeof n=="function"?n(...r):n}let o=new Error(`Tried to handle "${e}" but there is no handler defined. Only defined handlers are: ${Object.keys(t).map(n=>`"${n}"`).join(", ")}.`);throw Error.captureStackTrace&&Error.captureStackTrace(o,S),o}function E({props:e,slot:t,defaultTag:r,features:o,visible:n=!0,name:i}){if(n)return _e(e,t,r,i);let a=o!=null?o:0;if(a&2){let{static:l=!1,...s}=e;if(l)return _e(s,t,r,i)}if(a&1){let{unmount:l=!0,...s}=e;return S(l?0:1,{[0](){return null},[1](){return _e({...s,hidden:!0,style:{display:"none"}},t,r,i)}})}return _e(e,t,r,i)}function _e(e,t={},r,o){let{as:n=r,children:i,refName:a="ref",...l}=gt(e,["unmount","static"]),s=e.ref!==void 0?{[a]:e.ref}:{},u=typeof i=="function"?i(t):i;if(l.className&&typeof l.className=="function"&&(l.className=l.className(t)),n===Fragment$1&&Object.keys(l).length>0){if(!isValidElement(u)||Array.isArray(u)&&u.length>1)throw new Error(['Passing props on "Fragment"!',"",`The current component <${o} /> is rendering a "Fragment".`,"However we need to passthrough the following props:",Object.keys(l).map(c=>` - ${c}`).join(`
|
|
5005
5005
|
`),"","You can apply a few solutions:",['Add an `as="..."` prop, to ensure that we render an actual element instead of a "Fragment".',"Render a single element as the child so that we can forward the props onto that element."].map(c=>` - ${c}`).join(`
|
|
@@ -5075,7 +5075,7 @@ var StyledButton$4 = newStyled(Ye.Button)(AccordionSummaryStyles.baseStyles, fun
|
|
|
5075
5075
|
AccordionSummaryStyles[props.variant](props.theme, props.disabled, props.controlIconPos),
|
|
5076
5076
|
]; }, function (props) { return [AccordionSummaryStyles.title(props.titlecolor)]; });
|
|
5077
5077
|
var StyledPanel$1 = newStyled(Ye.Panel)(AccordionDetailsStyles.baseStyles, function (props) { return [AccordionDetailsStyles[props.variant](props.theme)]; });
|
|
5078
|
-
var StyledContent$1 = newStyled.button(templateObject_1$
|
|
5078
|
+
var StyledContent$1 = newStyled.button(templateObject_1$29 || (templateObject_1$29 = __makeTemplateObject(["\n appearance: none;\n padding: 0;\n margin: 0;\n border: none;\n background: none;\n font-size: inherit;\n line-height: inherit;\n color: inherit;\n cursor: auto;\n user-select: text;\n writing-mode: unset;\n font-family: inherit;\n"], ["\n appearance: none;\n padding: 0;\n margin: 0;\n border: none;\n background: none;\n font-size: inherit;\n line-height: inherit;\n color: inherit;\n cursor: auto;\n user-select: text;\n writing-mode: unset;\n font-family: inherit;\n"])));
|
|
5079
5079
|
var Accordion$1 = function (_a) {
|
|
5080
5080
|
var header = _a.header, headerOnOpen = _a.headerOnOpen, content = _a.content, defaultOpen = _a.defaultOpen, _b = _a.forceOpenHandler, forceOpenHandler = _b === void 0 ? false : _b, _c = _a.forceOpenValue, forceOpenValue = _c === void 0 ? false : _c, titleColor = _a.titleColor, variant = _a.variant, _d = _a.disabled, disabled = _d === void 0 ? false : _d, _e = _a.innerHTML, innerHTML = _e === void 0 ? false : _e, _f = _a.backgroundCover, backgroundCover = _f === void 0 ? { value: false, iconBgColor: 'inherit' } : _f, _g = _a.controlIconPos, controlIconPos = _g === void 0 ? 'right' : _g, openIcon = _a.openIcon, closeIcon = _a.closeIcon, onClick = _a.onClick, testId = _a.testId;
|
|
5081
5081
|
var theme = useTheme();
|
|
@@ -5099,9 +5099,9 @@ var Accordion$1 = function (_a) {
|
|
|
5099
5099
|
} }, { children: jsx$1(ControlIcon, { title: "close icon", height: theme.component.accordion.variant[variant].icon.height, width: theme.component.accordion.variant[variant].icon.width, fill: theme.component.accordion.variant[variant].icon.color }, void 0) }), void 0)] }, void 0))] }), void 0), controlIconPos === 'right' && showPanel && (jsx$1(StyledContent$1, __assign$1({ onClick: function (e) { return e.stopPropagation(); } }, { children: !innerHTML ? (jsx$1(StyledPanel$1, __assign$1({ static: true, variant: variant, theme: theme }, { children: content }), void 0)) : (jsx$1("div", { dangerouslySetInnerHTML: { __html: content } }, void 0)) }), void 0))] }, void 0));
|
|
5100
5100
|
} }), void 0));
|
|
5101
5101
|
};
|
|
5102
|
-
var templateObject_1$
|
|
5102
|
+
var templateObject_1$29;
|
|
5103
5103
|
|
|
5104
|
-
var Container$1j = newStyled.div(templateObject_1$
|
|
5104
|
+
var Container$1j = newStyled.div(templateObject_1$28 || (templateObject_1$28 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 16px;\n"], ["\n display: flex;\n flex-direction: column;\n gap: 16px;\n"])));
|
|
5105
5105
|
var AccordionOptions = function (_a) {
|
|
5106
5106
|
var titleColor = _a.titleColor, accordions = _a.accordions;
|
|
5107
5107
|
var _b = useState({
|
|
@@ -5125,7 +5125,7 @@ var AccordionOptions = function (_a) {
|
|
|
5125
5125
|
} }, accordion, { forceOpenHandler: true, forceOpenValue: getForceOpen(index), titleColor: accordionTitleColor }), "accordion-".concat(index)));
|
|
5126
5126
|
}) }, void 0));
|
|
5127
5127
|
};
|
|
5128
|
-
var templateObject_1$
|
|
5128
|
+
var templateObject_1$28;
|
|
5129
5129
|
|
|
5130
5130
|
/**
|
|
5131
5131
|
* @returns number formatted with "," and 2 decimals as string
|
|
@@ -5261,22 +5261,22 @@ var isValidDate = function (value) {
|
|
|
5261
5261
|
return /^\d{4}-\d{2}-\d{2}$/.test(value);
|
|
5262
5262
|
};
|
|
5263
5263
|
|
|
5264
|
-
var Bold = newStyled.span(templateObject_1$
|
|
5265
|
-
var FlexContainer$4 = newStyled.div(templateObject_2$
|
|
5266
|
-
var templateObject_1$
|
|
5264
|
+
var Bold = newStyled.span(templateObject_1$27 || (templateObject_1$27 = __makeTemplateObject(["\n font-weight: bold;\n"], ["\n font-weight: bold;\n"])));
|
|
5265
|
+
var FlexContainer$4 = newStyled.div(templateObject_2$1y || (templateObject_2$1y = __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"])));
|
|
5266
|
+
var templateObject_1$27, templateObject_2$1y;
|
|
5267
5267
|
|
|
5268
|
-
var Container$1i = newStyled.div(templateObject_1$
|
|
5268
|
+
var Container$1i = newStyled.div(templateObject_1$26 || (templateObject_1$26 = __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) {
|
|
5269
5269
|
var _b = _a.width, width = _b === void 0 ? '100%' : _b;
|
|
5270
5270
|
return width;
|
|
5271
5271
|
}, function (_a) {
|
|
5272
5272
|
var _b = _a.height, height = _b === void 0 ? '100%' : _b;
|
|
5273
5273
|
return height;
|
|
5274
5274
|
});
|
|
5275
|
-
var FlexCentered = newStyled.div(templateObject_2$
|
|
5276
|
-
var LeftSide = newStyled.div(templateObject_3$
|
|
5277
|
-
var RightSide = newStyled.div(templateObject_4$
|
|
5275
|
+
var FlexCentered = newStyled.div(templateObject_2$1x || (templateObject_2$1x = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 10px;\n width: 90%;\n height: 100%;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 10px;\n width: 90%;\n height: 100%;\n"])));
|
|
5276
|
+
var LeftSide = newStyled.div(templateObject_3$1d || (templateObject_3$1d = __makeTemplateObject(["\n width: 110px;\n height: 100%;\n flex-shrink: 0;\n resize: vertical;\n"], ["\n width: 110px;\n height: 100%;\n flex-shrink: 0;\n resize: vertical;\n"])));
|
|
5277
|
+
var RightSide = newStyled.div(templateObject_4$_ || (templateObject_4$_ = __makeTemplateObject(["\n display: flex;\n flex-grow: 1;\n flex-direction: column;\n align-items: center;\n height: 100%;\n"], ["\n display: flex;\n flex-grow: 1;\n flex-direction: column;\n align-items: center;\n height: 100%;\n"])));
|
|
5278
5278
|
var FlexStart = newStyled.div(templateObject_5$K || (templateObject_5$K = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: start;\n gap: 5px;\n width: 100%;\n padding: 12px;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: start;\n gap: 5px;\n width: 100%;\n padding: 12px;\n"])));
|
|
5279
|
-
var templateObject_1$
|
|
5279
|
+
var templateObject_1$26, templateObject_2$1x, templateObject_3$1d, templateObject_4$_, templateObject_5$K;
|
|
5280
5280
|
|
|
5281
5281
|
var CouponCard = function (_a) {
|
|
5282
5282
|
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;
|
|
@@ -5421,14 +5421,14 @@ var sizeOptions = [
|
|
|
5421
5421
|
},
|
|
5422
5422
|
];
|
|
5423
5423
|
|
|
5424
|
-
var ErrorText = newStyled.h3(templateObject_1$
|
|
5425
|
-
var ErrorContainer = newStyled.div(templateObject_2$
|
|
5424
|
+
var ErrorText = newStyled.h3(templateObject_1$25 || (templateObject_1$25 = __makeTemplateObject(["\n color: ", " !important;\n font-size: 0.75rem;\n font-weight: 600;\n margin: 0;\n font-height: 1rem;\n margin-left: 0.313rem;\n"], ["\n color: ", " !important;\n font-size: 0.75rem;\n font-weight: 600;\n margin: 0;\n font-height: 1rem;\n margin-left: 0.313rem;\n"])), function (props) { return props.color; });
|
|
5425
|
+
var ErrorContainer = newStyled.div(templateObject_2$1w || (templateObject_2$1w = __makeTemplateObject(["\n display: flex;\n align-items: center;\n margin-top: 12px;\n"], ["\n display: flex;\n align-items: center;\n margin-top: 12px;\n"])));
|
|
5426
5426
|
var Error$1 = function (_a) {
|
|
5427
5427
|
var error = _a.error;
|
|
5428
5428
|
var theme = useTheme();
|
|
5429
5429
|
return (jsxs$1(ErrorContainer, { children: [jsx$1(Icon.Actions.LightExclamation, { fill: theme.colors.semantic.urgent.color, width: 0.875, height: 0.875 }, void 0), jsx$1(ErrorText, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: error }), void 0)] }, void 0));
|
|
5430
5430
|
};
|
|
5431
|
-
var templateObject_1$
|
|
5431
|
+
var templateObject_1$25, templateObject_2$1w;
|
|
5432
5432
|
|
|
5433
5433
|
var BaseSelectButton = function (_a) {
|
|
5434
5434
|
var children = _a.children, as = _a.as;
|
|
@@ -5445,7 +5445,7 @@ function BaseSelectOption(_a) {
|
|
|
5445
5445
|
return (jsx$1(Ee.Option, __assign$1({ className: className, as: as, value: value, disabled: disabled }, { children: children }), void 0));
|
|
5446
5446
|
}
|
|
5447
5447
|
|
|
5448
|
-
var CustomListBox = newStyled(Ee)(templateObject_1$
|
|
5448
|
+
var CustomListBox = newStyled(Ee)(templateObject_1$24 || (templateObject_1$24 = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
5449
5449
|
function BaseSelect(_a) {
|
|
5450
5450
|
var value = _a.value, onChange = _a.onChange, disabled = _a.disabled, children = _a.children, className = _a.className;
|
|
5451
5451
|
return (jsx$1(CustomListBox, __assign$1({ disabled: disabled, as: "div", value: value, onChange: onChange, className: className }, { children: children }), void 0));
|
|
@@ -5455,7 +5455,7 @@ var BaseSelect$1 = Object.assign(BaseSelect, {
|
|
|
5455
5455
|
Options: BaseSelectOptions,
|
|
5456
5456
|
Option: BaseSelectOption,
|
|
5457
5457
|
});
|
|
5458
|
-
var templateObject_1$
|
|
5458
|
+
var templateObject_1$24;
|
|
5459
5459
|
|
|
5460
5460
|
var CustomButton = newStyled.button(function (_a) {
|
|
5461
5461
|
var theme = _a.theme, wide = _a.wide, isSortOrFilter = _a.isSortOrFilter;
|
|
@@ -5494,7 +5494,7 @@ var CustomButton = newStyled.button(function (_a) {
|
|
|
5494
5494
|
});
|
|
5495
5495
|
});
|
|
5496
5496
|
// TODO Remove this when we find the real solution
|
|
5497
|
-
var StyledIcon$1 = newStyled.span(templateObject_1$
|
|
5497
|
+
var StyledIcon$1 = newStyled.span(templateObject_1$23 || (templateObject_1$23 = __makeTemplateObject(["\n [data-testid='CloseIcon'] {\n display: none;\n }\n ", "\n"], ["\n [data-testid='CloseIcon'] {\n display: none;\n }\n ", "\n"])), function (_a) {
|
|
5498
5498
|
var open = _a.open;
|
|
5499
5499
|
return open &&
|
|
5500
5500
|
"\n [data-testid=\"CloseIcon\"] {\n display: block;\n }\n [data-testid=\"OpenIcon\"] {\n display: none;\n }\n";
|
|
@@ -5514,7 +5514,7 @@ var BaseDropdownButton = function (_a) {
|
|
|
5514
5514
|
} }), void 0));
|
|
5515
5515
|
};
|
|
5516
5516
|
var BaseDropdownButton$1 = React__default.memo(BaseDropdownButton);
|
|
5517
|
-
var templateObject_1$
|
|
5517
|
+
var templateObject_1$23;
|
|
5518
5518
|
|
|
5519
5519
|
var DropdownOptions$1 = newStyled(BaseSelect$1.Options)(function (_a) {
|
|
5520
5520
|
var theme = _a.theme;
|
|
@@ -5681,7 +5681,7 @@ var CustomCheckboxStyles = {
|
|
|
5681
5681
|
},
|
|
5682
5682
|
};
|
|
5683
5683
|
|
|
5684
|
-
var Container$1h = newStyled.div(templateObject_1$
|
|
5684
|
+
var Container$1h = newStyled.div(templateObject_1$22 || (templateObject_1$22 = __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"])));
|
|
5685
5685
|
var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (props) { return [
|
|
5686
5686
|
CustomCheckboxStyles[props.size](props.theme),
|
|
5687
5687
|
CustomCheckboxStyles[props.variant](props.theme, props.isChecked, props.disabled),
|
|
@@ -5692,7 +5692,7 @@ var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (pr
|
|
|
5692
5692
|
? "\n svg {\n path {\n fill: var(--colors-shades-black-color);\n }\n }"
|
|
5693
5693
|
: '', "\n ").concat(props.text === 'White' ? "border: 0.27px var(--colors-shades-300-color) solid;" : ''),
|
|
5694
5694
|
]; });
|
|
5695
|
-
var Input$5 = newStyled.input(templateObject_2$
|
|
5695
|
+
var Input$5 = newStyled.input(templateObject_2$1v || (templateObject_2$1v = __makeTemplateObject(["\n position: absolute;\n height: 100%;\n width: 100%;\n margin: 0;\n opacity: 0;\n cursor: ", ";\n"], ["\n position: absolute;\n height: 100%;\n width: 100%;\n margin: 0;\n opacity: 0;\n cursor: ", ";\n"])), function (_a) {
|
|
5696
5696
|
var disabled = _a.disabled;
|
|
5697
5697
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
5698
5698
|
});
|
|
@@ -5708,7 +5708,7 @@ var Checkbox = function (_a) {
|
|
|
5708
5708
|
};
|
|
5709
5709
|
return (jsxs$1(Container$1h, { children: [jsx$1(Input$5, { type: "checkbox", checked: checked, disabled: disabled, onChange: handleChange, id: id }, void 0), jsx$1(CustomCheckbox, __assign$1({ theme: theme, size: size, disabled: disabled, isChecked: checked, "data-testid": "checkbox", variant: variant, backgroundColor: backgroundColor, text: text }, { children: checked && jsx$1(Icon.Actions.Check, { fill: "#fff" }, void 0) }), void 0), jsx$1(Label$6, __assign$1({ "data-testid": "checkbox-text", size: sizeLabel, style: { color: colorLabel ? colorLabel : theme.colors.shades['700'].color }, variant: checked ? 'demi' : 'regular', htmlFor: id, disabled: disabled }, { children: text }), void 0)] }, void 0));
|
|
5710
5710
|
};
|
|
5711
|
-
var templateObject_1$
|
|
5711
|
+
var templateObject_1$22, templateObject_2$1v;
|
|
5712
5712
|
|
|
5713
5713
|
var CustomOption = newStyled.li(function (_a) {
|
|
5714
5714
|
var theme = _a.theme, selected = _a.selected, active = _a.active, hasImage = _a.hasImage;
|
|
@@ -5757,9 +5757,9 @@ var BaseDropdown$1 = Object.assign(BaseDropdown, {
|
|
|
5757
5757
|
Option: BaseDropdownOption,
|
|
5758
5758
|
});
|
|
5759
5759
|
|
|
5760
|
-
var Container$1g = newStyled.div(templateObject_1$
|
|
5761
|
-
var RequiredPlaceholder = newStyled.p(templateObject_2$
|
|
5762
|
-
var SelectedOption = newStyled.span(templateObject_3$
|
|
5760
|
+
var Container$1g = newStyled.div(templateObject_1$21 || (templateObject_1$21 = __makeTemplateObject([""], [""])));
|
|
5761
|
+
var RequiredPlaceholder = newStyled.p(templateObject_2$1u || (templateObject_2$1u = __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"])));
|
|
5762
|
+
var SelectedOption = newStyled.span(templateObject_3$1c || (templateObject_3$1c = __makeTemplateObject(["\n font-weight: ", ";\n"], ["\n font-weight: ", ";\n"])), function (_a) {
|
|
5763
5763
|
var fontWeight = _a.fontWeight;
|
|
5764
5764
|
return fontWeight || '';
|
|
5765
5765
|
});
|
|
@@ -5795,7 +5795,7 @@ function SimpleDropdown(_a) {
|
|
|
5795
5795
|
var DropdownContainer = showRequiredPlaceholder ? Container$1g : Fragment$1;
|
|
5796
5796
|
return (jsxs$1(DropdownContainer, { children: [jsxs$1(BaseDropdown$1, __assign$1({ value: selectedValue, onChange: onChangeHandler, disabled: disabled, wide: wide }, { children: [jsxs$1(BaseDropdown$1.Button, __assign$1({ label: label, OpenIcon: Icon.Arrows.ChevronDown, CloseIcon: Icon.Arrows.ChevronUp, wide: wide, isSortOrFilter: sort, testId: testId }, { children: [!!(selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.imageURL) && (jsx$1("img", { src: selectedValue.imageURL, alt: selectedValue.label, style: { paddingRight: 8 } }, void 0)), selectedOptionWeight && disabled ? (jsx$1(SelectedOption, __assign$1({ fontWeight: selectedOptionWeight }, { children: selectedOptionLabel }), void 0)) : (jsx$1(Fragment$2, { children: selectedOptionLabel }, void 0))] }), void 0), jsx$1(BaseDropdown$1.Options, { children: options.map(function (item) { return (jsxs$1(BaseDropdown$1.Option, __assign$1({ value: item, disabled: item.disabled, hasImage: !!item.imageURL }, { children: [!!item.imageURL && (jsx$1("img", { src: item.imageURL, alt: item.label, style: { paddingRight: 8 } }, void 0)), item.label] }), item.key)); }) }, void 0)] }), void 0), !!required && jsx$1(Error$1, { error: required }, void 0)] }, void 0));
|
|
5797
5797
|
}
|
|
5798
|
-
var templateObject_1$
|
|
5798
|
+
var templateObject_1$21, templateObject_2$1u, templateObject_3$1c;
|
|
5799
5799
|
|
|
5800
5800
|
/* base styles & size variants */
|
|
5801
5801
|
var CustomRadioStyles$2 = {
|
|
@@ -5860,9 +5860,9 @@ var ContainerStyles$2 = {
|
|
|
5860
5860
|
},
|
|
5861
5861
|
};
|
|
5862
5862
|
|
|
5863
|
-
var Wrapper$7 = newStyled.div(templateObject_1$
|
|
5863
|
+
var Wrapper$7 = newStyled.div(templateObject_1$20 || (templateObject_1$20 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
5864
5864
|
var Container$1f = newStyled.div(__assign$1({}, ContainerStyles$2.baseStyles), function (props) { return [ContainerStyles$2[props.size](props.theme)]; });
|
|
5865
|
-
var Input$4 = newStyled.input(templateObject_2$
|
|
5865
|
+
var Input$4 = newStyled.input(templateObject_2$1t || (templateObject_2$1t = __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) {
|
|
5866
5866
|
var disabled = _a.disabled;
|
|
5867
5867
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
5868
5868
|
});
|
|
@@ -5870,14 +5870,14 @@ var CustomRadio$2 = newStyled.div(function (props) { return [
|
|
|
5870
5870
|
CustomRadioStyles$2.baseStyles(props.theme, props.disabled),
|
|
5871
5871
|
CustomRadioStyles$2[props.size](props.theme, props.isChecked),
|
|
5872
5872
|
]; });
|
|
5873
|
-
var StyledLabel$3 = newStyled(Label$6)(templateObject_3$
|
|
5873
|
+
var StyledLabel$3 = newStyled(Label$6)(templateObject_3$1b || (templateObject_3$1b = __makeTemplateObject(["\n font-size: ", ";\n line-height: ", " !important;\n"], ["\n font-size: ", ";\n line-height: ", " !important;\n"])), function (_a) {
|
|
5874
5874
|
var theme = _a.theme;
|
|
5875
5875
|
return theme.component.radio.textSize;
|
|
5876
5876
|
}, function (_a) {
|
|
5877
5877
|
var theme = _a.theme;
|
|
5878
5878
|
return theme.component.radio.lineHeight;
|
|
5879
5879
|
});
|
|
5880
|
-
var StyledLabelV2 = newStyled(Label$6)(templateObject_4$
|
|
5880
|
+
var StyledLabelV2 = newStyled(Label$6)(templateObject_4$Z || (templateObject_4$Z = __makeTemplateObject(["\n font-size: ", ";\n font-weight: 600 !important;\n line-height: ", " !important;\n\n color: ", ";\n"], ["\n font-size: ", ";\n font-weight: 600 !important;\n line-height: ", " !important;\n\n color: ", ";\n"])), function (_a) {
|
|
5881
5881
|
var theme = _a.theme;
|
|
5882
5882
|
return theme.component.radio.textSize;
|
|
5883
5883
|
}, function (_a) {
|
|
@@ -5896,7 +5896,7 @@ var RadioInput = function (_a) {
|
|
|
5896
5896
|
};
|
|
5897
5897
|
return (jsxs$1(Wrapper$7, { children: [jsxs$1(Container$1f, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsx$1(Input$4, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled, style: style }, void 0), jsx$1(CustomRadio$2, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), useV2Style ? (jsxs$1(StyledLabelV2, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled, style: labelStyle }, { children: [icon, " ", label] }), void 0)) : (jsx$1(StyledLabel$3, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0))] }, void 0));
|
|
5898
5898
|
};
|
|
5899
|
-
var templateObject_1$
|
|
5899
|
+
var templateObject_1$20, templateObject_2$1t, templateObject_3$1b, templateObject_4$Z;
|
|
5900
5900
|
|
|
5901
5901
|
var useOnClickOutside = function (ref, handler) {
|
|
5902
5902
|
useEffect(function () {
|
|
@@ -5989,7 +5989,7 @@ var getTooltipAlignItems = function (position, align) {
|
|
|
5989
5989
|
}
|
|
5990
5990
|
};
|
|
5991
5991
|
|
|
5992
|
-
var Wrapper$6 = newStyled.div(templateObject_1$
|
|
5992
|
+
var Wrapper$6 = newStyled.div(templateObject_1$1$ || (templateObject_1$1$ = __makeTemplateObject(["\n display: flex;\n flex-direction: ", ";\n align-items: center;\n cursor: pointer;\n\n &:hover {\n .tooltip-container {\n visibility: ", ";\n opacity: ", ";\n cursor: text;\n }\n }\n"], ["\n display: flex;\n flex-direction: ", ";\n align-items: center;\n cursor: pointer;\n\n &:hover {\n .tooltip-container {\n visibility: ", ";\n opacity: ", ";\n cursor: text;\n }\n }\n"])), function (_a) {
|
|
5993
5993
|
var position = _a.position;
|
|
5994
5994
|
return getWrapperFlexDirection(position);
|
|
5995
5995
|
}, function (_a) {
|
|
@@ -5999,7 +5999,7 @@ var Wrapper$6 = newStyled.div(templateObject_1$1Z || (templateObject_1$1Z = __ma
|
|
|
5999
5999
|
var disableHover = _a.disableHover;
|
|
6000
6000
|
return (disableHover ? 0 : 1);
|
|
6001
6001
|
});
|
|
6002
|
-
var TooltipContainer = newStyled.div(templateObject_2$
|
|
6002
|
+
var TooltipContainer = newStyled.div(templateObject_2$1s || (templateObject_2$1s = __makeTemplateObject(["\n position: absolute;\n display: flex;\n flex-direction: ", ";\n align-items: ", ";\n margin-left: ", ";\n margin-right: ", ";\n margin-top: ", ";\n margin-bottom: ", ";\n max-width: ", ";\n transition: opacity 0.2s ease;\n userselect: none;\n opacity: 0;\n visibility: hidden;\n\n ", "\n"], ["\n position: absolute;\n display: flex;\n flex-direction: ", ";\n align-items: ", ";\n margin-left: ", ";\n margin-right: ", ";\n margin-top: ", ";\n margin-bottom: ", ";\n max-width: ", ";\n transition: opacity 0.2s ease;\n userselect: none;\n opacity: 0;\n visibility: hidden;\n\n ", "\n"])), function (_a) {
|
|
6003
6003
|
var position = _a.position;
|
|
6004
6004
|
return getContainerFlexDirection(position);
|
|
6005
6005
|
}, function (_a) {
|
|
@@ -6027,14 +6027,14 @@ var TooltipContainer = newStyled.div(templateObject_2$1q || (templateObject_2$1q
|
|
|
6027
6027
|
var getTooltipMargin = function (actual, expected, margin) {
|
|
6028
6028
|
return actual === expected ? margin : '0';
|
|
6029
6029
|
};
|
|
6030
|
-
var ContentWrapper = newStyled.div(templateObject_3$
|
|
6030
|
+
var ContentWrapper = newStyled.div(templateObject_3$1a || (templateObject_3$1a = __makeTemplateObject(["\n border: 0.063rem solid ", ";\n padding: 0.563rem 0.75rem;\n border-radius: 0.5rem;\n background-color: ", ";\n z-index: 999;\n position: relative;\n box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);\n z-index: 1;\n"], ["\n border: 0.063rem solid ", ";\n padding: 0.563rem 0.75rem;\n border-radius: 0.5rem;\n background-color: ", ";\n z-index: 999;\n position: relative;\n box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);\n z-index: 1;\n"])), function (_a) {
|
|
6031
6031
|
var borderColor = _a.borderColor;
|
|
6032
6032
|
return borderColor;
|
|
6033
6033
|
}, function (_a) {
|
|
6034
6034
|
var backgroundColor = _a.backgroundColor;
|
|
6035
6035
|
return backgroundColor;
|
|
6036
6036
|
});
|
|
6037
|
-
var TooltipText = newStyled.div(templateObject_4$
|
|
6037
|
+
var TooltipText = newStyled.div(templateObject_4$Y || (templateObject_4$Y = __makeTemplateObject(["\n font-style: normal;\n font-weight: normal;\n font-size: 0.875rem;\n line-height: 1.125rem;\n margin: 0;\n text-align: ", ";\n max-width: ", ";\n color: ", ";\n"], ["\n font-style: normal;\n font-weight: normal;\n font-size: 0.875rem;\n line-height: 1.125rem;\n margin: 0;\n text-align: ", ";\n max-width: ", ";\n color: ", ";\n"])), function (_a) {
|
|
6038
6038
|
var theme = _a.theme;
|
|
6039
6039
|
return theme.component.autoship.tooltip.text.alignment;
|
|
6040
6040
|
}, function (_a) {
|
|
@@ -6045,16 +6045,16 @@ var TooltipText = newStyled.div(templateObject_4$X || (templateObject_4$X = __ma
|
|
|
6045
6045
|
return color;
|
|
6046
6046
|
});
|
|
6047
6047
|
var TopSection = newStyled.div(templateObject_5$J || (templateObject_5$J = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: 0.688rem;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: 0.688rem;\n"])));
|
|
6048
|
-
var Title$
|
|
6048
|
+
var Title$a = newStyled.h1(templateObject_6$D || (templateObject_6$D = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n"])), function (_a) {
|
|
6049
6049
|
var color = _a.color;
|
|
6050
6050
|
return color;
|
|
6051
6051
|
});
|
|
6052
|
-
var IconContainer$6 = newStyled.div(templateObject_7$
|
|
6053
|
-
var CloseToolTip = newStyled.button(templateObject_8$
|
|
6052
|
+
var IconContainer$6 = newStyled.div(templateObject_7$v || (templateObject_7$v = __makeTemplateObject(["\n width: 1.375rem;\n height: 1.125rem;\n margin-right: 0.563rem;\n"], ["\n width: 1.375rem;\n height: 1.125rem;\n margin-right: 0.563rem;\n"])));
|
|
6053
|
+
var CloseToolTip = newStyled.button(templateObject_8$o || (templateObject_8$o = __makeTemplateObject(["\n position: absolute;\n background: none;\n border: none;\n cursor: pointer;\n right: ", ";\n top: 0.25rem;\n padding: 0px;\n z-index: 2;\n"], ["\n position: absolute;\n background: none;\n border: none;\n cursor: pointer;\n right: ", ";\n top: 0.25rem;\n padding: 0px;\n z-index: 2;\n"])), function (_a) {
|
|
6054
6054
|
var _b = _a.right, right = _b === void 0 ? '.3rem' : _b;
|
|
6055
6055
|
return right;
|
|
6056
6056
|
});
|
|
6057
|
-
var templateObject_1$
|
|
6057
|
+
var templateObject_1$1$, templateObject_2$1s, templateObject_3$1a, templateObject_4$Y, templateObject_5$J, templateObject_6$D, templateObject_7$v, templateObject_8$o;
|
|
6058
6058
|
|
|
6059
6059
|
var Tooltip = function (_a) {
|
|
6060
6060
|
var _b;
|
|
@@ -6079,7 +6079,7 @@ var Tooltip = function (_a) {
|
|
|
6079
6079
|
fill: (header === null || header === void 0 ? void 0 : header.iconFill)
|
|
6080
6080
|
? header === null || header === void 0 ? void 0 : header.iconFill
|
|
6081
6081
|
: theme.colors.pallete.secondary.color,
|
|
6082
|
-
}) }, void 0)), jsx$1(Title$
|
|
6082
|
+
}) }, void 0)), jsx$1(Title$a, __assign$1({ color: (header === null || header === void 0 ? void 0 : header.titleColor) ? header === null || header === void 0 ? void 0 : header.titleColor : theme.colors.pallete.secondary.color }, { children: header.title }), void 0)] }), void 0)), content && (content === null || content === void 0 ? void 0 : content.text) ? (jsx$1(TooltipText, { color: (content === null || content === void 0 ? void 0 : content.color) ? content === null || content === void 0 ? void 0 : content.color : theme.colors.pallete.secondary.color, "data-testid": "TooltipText", dangerouslySetInnerHTML: { __html: content.text } }, void 0)) : (elementContent)] }), void 0)] }), void 0)] }), void 0));
|
|
6083
6083
|
};
|
|
6084
6084
|
|
|
6085
6085
|
var colorsMapper = function (colors) { return ({
|
|
@@ -6097,8 +6097,8 @@ var benefitsColorMapper = function (_a) {
|
|
|
6097
6097
|
};
|
|
6098
6098
|
};
|
|
6099
6099
|
|
|
6100
|
-
var FlexContainer$3 = newStyled.div(templateObject_1$
|
|
6101
|
-
var ContainerBase$3 = newStyled.div(templateObject_2$
|
|
6100
|
+
var FlexContainer$3 = newStyled.div(templateObject_1$1_ || (templateObject_1$1_ = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
6101
|
+
var ContainerBase$3 = newStyled.div(templateObject_2$1r || (templateObject_2$1r = __makeTemplateObject(["\n border-radius: 8px;\n\n border: ", ";\n\n ", "\n\n & input:checked + div {\n border-color: ", ";\n }\n\n & label {\n cursor: pointer;\n }\n"], ["\n border-radius: 8px;\n\n border: ", ";\n\n ", "\n\n & input:checked + div {\n border-color: ", ";\n }\n\n & label {\n cursor: pointer;\n }\n"])), function (_a) {
|
|
6102
6102
|
var selected = _a.selected, theme = _a.theme;
|
|
6103
6103
|
return selected
|
|
6104
6104
|
? "2px solid ".concat(theme.colors.pallete.primary.color)
|
|
@@ -6112,11 +6112,11 @@ var ContainerBase$3 = newStyled.div(templateObject_2$1p || (templateObject_2$1p
|
|
|
6112
6112
|
var theme = _a.theme;
|
|
6113
6113
|
return theme.colors.pallete.primary.color;
|
|
6114
6114
|
});
|
|
6115
|
-
var SinglePurchaseContainer$3 = newStyled(ContainerBase$3)(templateObject_3$
|
|
6115
|
+
var SinglePurchaseContainer$3 = newStyled(ContainerBase$3)(templateObject_3$19 || (templateObject_3$19 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n padding: 16px;\n margin-bottom: 8px;\n\n ", "\n"], ["\n display: flex;\n justify-content: space-between;\n padding: 16px;\n margin-bottom: 8px;\n\n ", "\n"])), function (_a) {
|
|
6116
6116
|
var onClick = _a.onClick;
|
|
6117
6117
|
return (onClick ? 'cursor: pointer;' : '');
|
|
6118
6118
|
});
|
|
6119
|
-
var SubscriptionContainer$3 = newStyled(ContainerBase$3)(templateObject_4$
|
|
6119
|
+
var SubscriptionContainer$3 = newStyled(ContainerBase$3)(templateObject_4$X || (templateObject_4$X = __makeTemplateObject(["\n padding: 16px;\n"], ["\n padding: 16px;\n"])));
|
|
6120
6120
|
var SubscriptionHeader$3 = newStyled.div(templateObject_5$I || (templateObject_5$I = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n border-bottom: 1px solid ", ";\n padding-bottom: 10px;\n margin-bottom: 8px;\n cursor: pointer;\n\n & input:checked + div {\n border-color: ", ";\n }\n"], ["\n display: flex;\n justify-content: space-between;\n border-bottom: 1px solid ", ";\n padding-bottom: 10px;\n margin-bottom: 8px;\n cursor: pointer;\n\n & input:checked + div {\n border-color: ", ";\n }\n"])), function (_a) {
|
|
6121
6121
|
var theme = _a.theme;
|
|
6122
6122
|
return theme.colors.shades[200].color;
|
|
@@ -6124,9 +6124,9 @@ var SubscriptionHeader$3 = newStyled.div(templateObject_5$I || (templateObject_5
|
|
|
6124
6124
|
var theme = _a.theme;
|
|
6125
6125
|
return theme.colors.pallete.primary.color;
|
|
6126
6126
|
});
|
|
6127
|
-
var BenefitsContainer$3 = newStyled.div(templateObject_6$
|
|
6128
|
-
var Benefit$4 = newStyled.div(templateObject_7$
|
|
6129
|
-
var BenefitText$3 = newStyled(Text$7)(templateObject_8$
|
|
6127
|
+
var BenefitsContainer$3 = newStyled.div(templateObject_6$C || (templateObject_6$C = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
6128
|
+
var Benefit$4 = newStyled.div(templateObject_7$u || (templateObject_7$u = __makeTemplateObject(["\n display: flex;\n padding: 8px 0px;\n svg {\n overflow: visible;\n }\n"], ["\n display: flex;\n padding: 8px 0px;\n svg {\n overflow: visible;\n }\n"])));
|
|
6129
|
+
var BenefitText$3 = newStyled(Text$7)(templateObject_8$n || (templateObject_8$n = __makeTemplateObject(["\n line-height: 20px;\n margin-left: 9px;\n"], ["\n line-height: 20px;\n margin-left: 9px;\n"])));
|
|
6130
6130
|
var SubscriptionDetails = newStyled(Text$7)(templateObject_9$c || (templateObject_9$c = __makeTemplateObject(["\n font-size: 16px;\n margin-right: 7px;\n"], ["\n font-size: 16px;\n margin-right: 7px;\n"])));
|
|
6131
6131
|
var SubscriptionDetailsContainer = newStyled.div(templateObject_10$b || (templateObject_10$b = __makeTemplateObject(["\n margin-top: 18px;\n display: flex;\n"], ["\n margin-top: 18px;\n display: flex;\n"])));
|
|
6132
6132
|
var DeliveryFrequencyLabel$1 = newStyled(Text$7)(templateObject_11$7 || (templateObject_11$7 = __makeTemplateObject(["\n line-height: 35px;\n margin-right: 8px;\n align-self: center;\n"], ["\n line-height: 35px;\n margin-right: 8px;\n align-self: center;\n"])));
|
|
@@ -6135,7 +6135,7 @@ var StyledPrice$3 = newStyled(PriceLabelV2$1)(templateObject_12$4 || (templateOb
|
|
|
6135
6135
|
return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
|
|
6136
6136
|
});
|
|
6137
6137
|
var Container$1e = newStyled.div(templateObject_13$4 || (templateObject_13$4 = __makeTemplateObject([""], [""])));
|
|
6138
|
-
var templateObject_1$
|
|
6138
|
+
var templateObject_1$1_, templateObject_2$1r, templateObject_3$19, templateObject_4$X, templateObject_5$I, templateObject_6$C, templateObject_7$u, templateObject_8$n, templateObject_9$c, templateObject_10$b, templateObject_11$7, templateObject_12$4, templateObject_13$4;
|
|
6139
6139
|
|
|
6140
6140
|
var radioIds$2 = {
|
|
6141
6141
|
oneTime: {
|
|
@@ -6190,12 +6190,12 @@ var Autoship = function (_a) {
|
|
|
6190
6190
|
: benefitsColor.base }, void 0), jsx$1(BenefitText$3, __assign$1({ variant: "body" }, { children: benefit }), void 0)] }, benefit)); }) }, void 0), radioIds$2.autoship.id === radioCheck.id && (jsxs$1(Fragment$2, { children: [jsxs$1(FlexContainer$3, { children: [jsx$1(DeliveryFrequencyLabel$1, __assign$1({ variant: "body" }, { children: "Delivery Every:" }), void 0), jsx$1(SimpleDropdown, { testId: "subscription-frecuency", initialValue: dropdownOptions[0], options: dropdownOptions, onChange: function (value) { return handleChange(value.value, 'dropdown'); }, placeHolder: "" }, void 0)] }, void 0), jsx$1(SubscriptionDetailsContainer, { children: jsx$1(Tooltip, __assign$1({ position: 0, content: tooltipContent, header: tooltipHeader, maxWidth: "300px", showCloseIcon: closeIcon }, { children: jsxs$1(FlexContainer$3, { children: [jsx$1(SubscriptionDetails, __assign$1({ variant: "body", weight: "demi" }, { children: "Subscription Details" }), void 0), jsx$1(Icon.Actions.CircleQuestion, { width: 1.2 }, void 0)] }, void 0) }), void 0) }, void 0)] }, void 0))] }), void 0)] }), void 0));
|
|
6191
6191
|
};
|
|
6192
6192
|
|
|
6193
|
-
var FlexContainer$2 = newStyled.div(templateObject_1$
|
|
6193
|
+
var FlexContainer$2 = newStyled.div(templateObject_1$1Z || (templateObject_1$1Z = __makeTemplateObject(["\n display: flex;\n\n ", "\n"], ["\n display: flex;\n\n ", "\n"])), function (_a) {
|
|
6194
6194
|
var theme = _a.theme;
|
|
6195
6195
|
return theme.name === 'TheSpaDr' &&
|
|
6196
6196
|
"\n [data-testid='subscription-frequency'] {\n border: 0;\n padding-left: 0 !important;\n padding-right: 32px !important;\n }\n\n [role='listbox']{\n margin-left: -20px;\n }\n ";
|
|
6197
6197
|
});
|
|
6198
|
-
var DiscountTag$2 = newStyled.div(templateObject_2$
|
|
6198
|
+
var DiscountTag$2 = newStyled.div(templateObject_2$1q || (templateObject_2$1q = __makeTemplateObject(["\n position: absolute;\n top: -24px;\n right: 18px;\n background-color: ", ";\n color: white;\n padding: 5px 10px;\n font-size: 12px;\n font-weight: bold;\n line-height: 14px;\n border-radius: ", ";\n"], ["\n position: absolute;\n top: -24px;\n right: 18px;\n background-color: ", ";\n color: white;\n padding: 5px 10px;\n font-size: 12px;\n font-weight: bold;\n line-height: 14px;\n border-radius: ", ";\n"])), function (_a) {
|
|
6199
6199
|
var theme = _a.theme, isSelected = _a.isSelected;
|
|
6200
6200
|
return isSelected
|
|
6201
6201
|
? theme.component.autoship.discountTag.backgroundColor
|
|
@@ -6211,7 +6211,7 @@ var getSelectedBorder$1 = function (_a) {
|
|
|
6211
6211
|
}
|
|
6212
6212
|
return "1.5px solid ".concat(colors.shades['700'].color);
|
|
6213
6213
|
};
|
|
6214
|
-
var ContainerBase$2 = newStyled.div(templateObject_3$
|
|
6214
|
+
var ContainerBase$2 = newStyled.div(templateObject_3$18 || (templateObject_3$18 = __makeTemplateObject(["\n border-radius: 8px;\n\n border: ", ";\n\n ", "\n\n & input:checked + div {\n border-color: ", ";\n }\n\n & label {\n cursor: pointer;\n }\n"], ["\n border-radius: 8px;\n\n border: ", ";\n\n ", "\n\n & input:checked + div {\n border-color: ", ";\n }\n\n & label {\n cursor: pointer;\n }\n"])), function (_a) {
|
|
6215
6215
|
var selected = _a.selected, theme = _a.theme;
|
|
6216
6216
|
return selected ? getSelectedBorder$1(theme) : "1px solid ".concat(theme.colors.shades[200].color);
|
|
6217
6217
|
}, function (_a) {
|
|
@@ -6223,20 +6223,20 @@ var ContainerBase$2 = newStyled.div(templateObject_3$16 || (templateObject_3$16
|
|
|
6223
6223
|
var theme = _a.theme;
|
|
6224
6224
|
return theme.colors.pallete.primary.color;
|
|
6225
6225
|
});
|
|
6226
|
-
var SinglePurchaseContainer$2 = newStyled(ContainerBase$2)(templateObject_4$
|
|
6226
|
+
var SinglePurchaseContainer$2 = newStyled(ContainerBase$2)(templateObject_4$W || (templateObject_4$W = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n padding: 16px;\n\n ", "\n"], ["\n display: flex;\n justify-content: space-between;\n padding: 16px;\n\n ", "\n"])), function (_a) {
|
|
6227
6227
|
var onClick = _a.onClick;
|
|
6228
6228
|
return (onClick ? 'cursor: pointer;' : '');
|
|
6229
6229
|
});
|
|
6230
6230
|
var SubscriptionContainer$2 = newStyled(ContainerBase$2)(templateObject_5$H || (templateObject_5$H = __makeTemplateObject(["\n padding: 16px;\n margin-bottom: 8px;\n position: relative;\n"], ["\n padding: 16px;\n margin-bottom: 8px;\n position: relative;\n"])));
|
|
6231
|
-
var SubscriptionHeader$2 = newStyled.div(templateObject_6$
|
|
6231
|
+
var SubscriptionHeader$2 = newStyled.div(templateObject_6$B || (templateObject_6$B = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n border-bottom: 1px solid ", ";\n padding-bottom: 10px;\n margin-bottom: 8px;\n cursor: pointer;\n\n & input:checked + div {\n border-color: ", ";\n }\n"], ["\n display: flex;\n justify-content: space-between;\n border-bottom: 1px solid ", ";\n padding-bottom: 10px;\n margin-bottom: 8px;\n cursor: pointer;\n\n & input:checked + div {\n border-color: ", ";\n }\n"])), function (_a) {
|
|
6232
6232
|
var theme = _a.theme;
|
|
6233
6233
|
return theme.colors.shades[200].color;
|
|
6234
6234
|
}, function (_a) {
|
|
6235
6235
|
var theme = _a.theme;
|
|
6236
6236
|
return theme.colors.pallete.primary.color;
|
|
6237
6237
|
});
|
|
6238
|
-
var BenefitsContainer$2 = newStyled.div(templateObject_7$
|
|
6239
|
-
var Benefit$3 = newStyled.div(templateObject_8$
|
|
6238
|
+
var BenefitsContainer$2 = newStyled.div(templateObject_7$t || (templateObject_7$t = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
6239
|
+
var Benefit$3 = newStyled.div(templateObject_8$m || (templateObject_8$m = __makeTemplateObject(["\n display: flex;\n padding: 8px 0;\n svg {\n overflow: visible;\n }\n"], ["\n display: flex;\n padding: 8px 0;\n svg {\n overflow: visible;\n }\n"])));
|
|
6240
6240
|
var BenefitText$2 = newStyled(Text$7)(templateObject_9$b || (templateObject_9$b = __makeTemplateObject(["\n line-height: 20px;\n margin-left: 9px;\n"], ["\n line-height: 20px;\n margin-left: 9px;\n"])));
|
|
6241
6241
|
var DeliveryFrequencyLabel = newStyled(Text$7)(templateObject_10$a || (templateObject_10$a = __makeTemplateObject(["\n line-height: 35px;\n margin-right: 8px;\n align-self: center;\n"], ["\n line-height: 35px;\n margin-right: 8px;\n align-self: center;\n"])));
|
|
6242
6242
|
var StyledPrice$2 = newStyled(PriceLabelV2$1)(templateObject_11$6 || (templateObject_11$6 = __makeTemplateObject(["\n div p {\n color: ", ";\n }\n"], ["\n div p {\n color: ", ";\n }\n"])), function (_a) {
|
|
@@ -6248,7 +6248,7 @@ var TooltipWrapper$1 = newStyled.div(templateObject_13$3 || (templateObject_13$3
|
|
|
6248
6248
|
var theme = _a.theme;
|
|
6249
6249
|
return theme.component.autoship.tooltip.margin;
|
|
6250
6250
|
});
|
|
6251
|
-
var templateObject_1$
|
|
6251
|
+
var templateObject_1$1Z, templateObject_2$1q, templateObject_3$18, templateObject_4$W, templateObject_5$H, templateObject_6$B, templateObject_7$t, templateObject_8$m, templateObject_9$b, templateObject_10$a, templateObject_11$6, templateObject_12$3, templateObject_13$3;
|
|
6252
6252
|
|
|
6253
6253
|
var radioIds$1 = {
|
|
6254
6254
|
oneTime: {
|
|
@@ -6327,13 +6327,13 @@ var componentSizeMapper = (_a$2 = {},
|
|
|
6327
6327
|
_a$2[ComponentSize.Large] = ComponentSize.Medium,
|
|
6328
6328
|
_a$2);
|
|
6329
6329
|
|
|
6330
|
-
var CustomerDetails = newStyled.div(templateObject_1$
|
|
6331
|
-
var CustomerInfo = newStyled.div(templateObject_2$
|
|
6332
|
-
var Name = newStyled.h4(templateObject_3$
|
|
6333
|
-
var StarIconContainer = newStyled.div(templateObject_4$
|
|
6330
|
+
var CustomerDetails = newStyled.div(templateObject_1$1Y || (templateObject_1$1Y = __makeTemplateObject([""], [""])));
|
|
6331
|
+
var CustomerInfo = newStyled.div(templateObject_2$1p || (templateObject_2$1p = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n"], ["\n display: flex;\n justify-content: space-between;\n align-items: center;\n"])));
|
|
6332
|
+
var Name = newStyled.h4(templateObject_3$17 || (templateObject_3$17 = __makeTemplateObject(["\n font-size: 22px;\n line-height: 20px;\n font-weight: 400;\n margin: 0;\n"], ["\n font-size: 22px;\n line-height: 20px;\n font-weight: 400;\n margin: 0;\n"])));
|
|
6333
|
+
var StarIconContainer = newStyled.div(templateObject_4$V || (templateObject_4$V = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 5px;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 5px;\n"])));
|
|
6334
6334
|
var Description$2 = newStyled.p(templateObject_5$G || (templateObject_5$G = __makeTemplateObject(["\n font-size: 16px;\n font-weight: 300;\n line-height: normal;\n"], ["\n font-size: 16px;\n font-weight: 300;\n line-height: normal;\n"])));
|
|
6335
|
-
var ReviewDays = newStyled.span(templateObject_6$
|
|
6336
|
-
var templateObject_1$
|
|
6335
|
+
var ReviewDays = newStyled.span(templateObject_6$A || (templateObject_6$A = __makeTemplateObject(["\n display: block;\n font-size: 14px;\n font-style: italic;\n font-weight: 300;\n"], ["\n display: block;\n font-size: 14px;\n font-style: italic;\n font-weight: 300;\n"])));
|
|
6336
|
+
var templateObject_1$1Y, templateObject_2$1p, templateObject_3$17, templateObject_4$V, templateObject_5$G, templateObject_6$A;
|
|
6337
6337
|
|
|
6338
6338
|
var NameWithStars = function (_a) {
|
|
6339
6339
|
var name = _a.name, size = _a.size;
|
|
@@ -6351,10 +6351,10 @@ var ResultFeedback = function (_a) {
|
|
|
6351
6351
|
return (jsxs$1(CustomerDetails, { children: [jsx$1(NameWithStars, { name: name, size: size }, void 0), description && jsx$1(Description$2, { children: description }, void 0), reviewDays && jsx$1(ReviewDays, { children: reviewDays }, void 0)] }, void 0));
|
|
6352
6352
|
};
|
|
6353
6353
|
|
|
6354
|
-
var Container$1c = newStyled.div(templateObject_1$
|
|
6355
|
-
var ImageContainer$7 = newStyled.div(templateObject_2$
|
|
6356
|
-
var ImageCard = newStyled.div(templateObject_3$
|
|
6357
|
-
var UserInfoText = newStyled.div(templateObject_4$
|
|
6354
|
+
var Container$1c = newStyled.div(templateObject_1$1X || (templateObject_1$1X = __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; });
|
|
6355
|
+
var ImageContainer$7 = newStyled.div(templateObject_2$1o || (templateObject_2$1o = __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"])));
|
|
6356
|
+
var ImageCard = newStyled.div(templateObject_3$16 || (templateObject_3$16 = __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; });
|
|
6357
|
+
var UserInfoText = newStyled.div(templateObject_4$U || (templateObject_4$U = __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) {
|
|
6358
6358
|
var theme = _a.theme;
|
|
6359
6359
|
return theme.colors.pallete.secondary.color;
|
|
6360
6360
|
}, function (_a) {
|
|
@@ -6364,7 +6364,7 @@ var UserInfoText = newStyled.div(templateObject_4$T || (templateObject_4$T = __m
|
|
|
6364
6364
|
var theme = _a.theme, size = _a.size;
|
|
6365
6365
|
return theme.component.beforeAfter.size[componentSizeMapper[size]].userInfoText.mobile.fontSize;
|
|
6366
6366
|
});
|
|
6367
|
-
var templateObject_1$
|
|
6367
|
+
var templateObject_1$1X, templateObject_2$1o, templateObject_3$16, templateObject_4$U;
|
|
6368
6368
|
|
|
6369
6369
|
/* base styles & size variants */
|
|
6370
6370
|
var getStylesBySize$d = function (size, theme) {
|
|
@@ -6442,7 +6442,7 @@ var BeforeAfterCard = function (_a) {
|
|
|
6442
6442
|
return (jsxs$1(Container$1c, __assign$1({ "data-testid": "Container", styles: stylesBySize }, { children: [jsxs$1(ImageContainer$7, __assign$1({ "data-testid": "ImageContainer" }, { children: [jsx$1(ImageCard, __assign$1({ "data-testid": "ImageCard", styles: stylesBySize }, { children: jsx$1(Image$3, { borderRadius: imageBorderRadius, src: beforeImage, alt: "before", height: "100%", width: "100%" }, void 0) }), void 0), jsx$1(ImageCard, __assign$1({ styles: stylesBySize }, { children: jsx$1(Image$3, { borderRadius: imageBorderRadius, src: afterImage, alt: "after", height: "100%", width: "100%" }, void 0) }), void 0)] }), void 0), jsx$1(Component, __assign$1({ name: name, size: size, alignCenter: alignCenter, text: infoText }, rest), void 0)] }), void 0));
|
|
6443
6443
|
};
|
|
6444
6444
|
|
|
6445
|
-
var Section = newStyled.div(templateObject_1$
|
|
6445
|
+
var Section = newStyled.div(templateObject_1$1W || (templateObject_1$1W = __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) {
|
|
6446
6446
|
return props.type === CardSectionType.Header ? '1.5rem 1.5rem 0' : '0 1.5rem 1.5rem';
|
|
6447
6447
|
});
|
|
6448
6448
|
var CardHeader = function (_a) {
|
|
@@ -6453,16 +6453,16 @@ var CardFooter = function (_a) {
|
|
|
6453
6453
|
var children = _a.children;
|
|
6454
6454
|
return (jsx$1(Section, __assign$1({ type: CardSectionType.Footer }, { children: children }), void 0));
|
|
6455
6455
|
};
|
|
6456
|
-
var templateObject_1$
|
|
6456
|
+
var templateObject_1$1W;
|
|
6457
6457
|
|
|
6458
|
-
var Body$1 = newStyled.div(templateObject_1$
|
|
6458
|
+
var Body$1 = newStyled.div(templateObject_1$1V || (templateObject_1$1V = __makeTemplateObject(["\n display: flex;\n align-items: center;\n padding: 0.5rem 1.5rem;\n align-self: flex-start;\n"], ["\n display: flex;\n align-items: center;\n padding: 0.5rem 1.5rem;\n align-self: flex-start;\n"])));
|
|
6459
6459
|
var CardBody$1 = function (_a) {
|
|
6460
6460
|
var children = _a.children;
|
|
6461
6461
|
return jsx$1(Body$1, { children: children }, void 0);
|
|
6462
6462
|
};
|
|
6463
|
-
var templateObject_1$
|
|
6463
|
+
var templateObject_1$1V;
|
|
6464
6464
|
|
|
6465
|
-
var Container$1b = newStyled.div(templateObject_1$
|
|
6465
|
+
var Container$1b = newStyled.div(templateObject_1$1U || (templateObject_1$1U = __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) {
|
|
6466
6466
|
var flex = _a.flex;
|
|
6467
6467
|
return flex &&
|
|
6468
6468
|
"display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;";
|
|
@@ -6484,16 +6484,16 @@ var Card$3 = Object.assign(Card$2, {
|
|
|
6484
6484
|
Footer: CardFooter,
|
|
6485
6485
|
Body: CardBody$1,
|
|
6486
6486
|
});
|
|
6487
|
-
var templateObject_1$
|
|
6487
|
+
var templateObject_1$1U;
|
|
6488
6488
|
|
|
6489
|
-
var StyledWrapper = newStyled.div(templateObject_1$
|
|
6490
|
-
var StyledContainer = newStyled.div(templateObject_2$
|
|
6491
|
-
var TextLabel = newStyled(Text$7)(templateObject_3$
|
|
6489
|
+
var StyledWrapper = newStyled.div(templateObject_1$1T || (templateObject_1$1T = __makeTemplateObject(["\n padding: 12px 58px;\n @media (max-width: 992px) {\n padding: 0.625rem 1.5rem;\n }\n"], ["\n padding: 12px 58px;\n @media (max-width: 992px) {\n padding: 0.625rem 1.5rem;\n }\n"])));
|
|
6490
|
+
var StyledContainer = newStyled.div(templateObject_2$1n || (templateObject_2$1n = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n"], ["\n display: flex;\n justify-content: space-between;\n align-items: center;\n"])));
|
|
6491
|
+
var TextLabel = newStyled(Text$7)(templateObject_3$15 || (templateObject_3$15 = __makeTemplateObject(["\n margin: 0.1rem 0;\n min-width: 4.5rem;\n color: ", ";\n"], ["\n margin: 0.1rem 0;\n min-width: 4.5rem;\n color: ", ";\n"])), function (_a) {
|
|
6492
6492
|
var color = _a.color;
|
|
6493
6493
|
return color;
|
|
6494
6494
|
});
|
|
6495
|
-
var YouAreSaving = newStyled(Text$7)(templateObject_4$
|
|
6496
|
-
var templateObject_1$
|
|
6495
|
+
var YouAreSaving = newStyled(Text$7)(templateObject_4$T || (templateObject_4$T = __makeTemplateObject(["\n text-align: right;\n margin: 0 0 0 0.5rem;\n"], ["\n text-align: right;\n margin: 0 0 0 0.5rem;\n"])));
|
|
6496
|
+
var templateObject_1$1T, templateObject_2$1n, templateObject_3$15, templateObject_4$T;
|
|
6497
6497
|
|
|
6498
6498
|
var Minimalistic = function (_a) {
|
|
6499
6499
|
var _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#FFF6EF' : _b, _c = _a.borderColor, borderColor = _c === void 0 ? '#E7C9B2' : _c, originalPrice = _a.originalPrice, price = _a.price, savingPrice = _a.savingPrice, getMorePayLessText = _a.getMorePayLessText, youAreSavingText = _a.youAreSavingText, getQtyForText = _a.getQtyForText, discount = _a.discount, offText = _a.offText, _d = _a.widthAuto, widthAuto = _d === void 0 ? false : _d, _e = _a.testId, testId = _e === void 0 ? 'minimalistic' : _e;
|
|
@@ -6501,28 +6501,28 @@ var Minimalistic = function (_a) {
|
|
|
6501
6501
|
return (jsx$1(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxs$1(StyledWrapper, { children: [jsxs$1(StyledContainer, __assign$1({ "data-testid": "".concat(testId, "-section") }, { children: [jsx$1(StyledContainer, { children: jsx$1(TextLabel, __assign$1({ variant: "body", weight: "demi", size: "small" }, { children: getMorePayLessText }), void 0) }, void 0), jsx$1(PriceLabel$1, { finalPrice: price, originalPrice: originalPrice, color: theme.colors.pallete.secondary.color, size: ComponentSize.Small, testId: testId }, void 0)] }), void 0), jsxs$1(StyledContainer, __assign$1({ "data-testid": "".concat(testId, "-section-bottom") }, { children: [jsxs$1(TextLabel, __assign$1({ variant: "body", weight: "demi", size: "small", color: "var(--colors-pallete-red-color)" }, { children: [getQtyForText, " ", discount, "% ", offText.toLocaleUpperCase()] }), void 0), jsxs$1(YouAreSaving, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [youAreSavingText, ": ", savingPrice] }), void 0)] }), void 0)] }, void 0) }), void 0));
|
|
6502
6502
|
};
|
|
6503
6503
|
|
|
6504
|
-
var Container$1a = newStyled.div(templateObject_1$
|
|
6505
|
-
var Title$
|
|
6506
|
-
var Details$1 = newStyled.span(templateObject_3$
|
|
6507
|
-
var PriceContainer$2 = newStyled.span(templateObject_4$
|
|
6504
|
+
var Container$1a = newStyled.div(templateObject_1$1S || (templateObject_1$1S = __makeTemplateObject(["\n padding: 0.625rem 1.5rem;\n"], ["\n padding: 0.625rem 1.5rem;\n"])));
|
|
6505
|
+
var Title$9 = newStyled.h1(templateObject_2$1m || (templateObject_2$1m = __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; });
|
|
6506
|
+
var Details$1 = newStyled.span(templateObject_3$14 || (templateObject_3$14 = __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; });
|
|
6507
|
+
var PriceContainer$2 = newStyled.span(templateObject_4$S || (templateObject_4$S = __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"])));
|
|
6508
6508
|
var Simple = function (_a) {
|
|
6509
6509
|
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;
|
|
6510
6510
|
var theme = useTheme();
|
|
6511
|
-
return (jsx$1(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxs$1(Container$1a, { children: [jsx$1(Title$
|
|
6511
|
+
return (jsx$1(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxs$1(Container$1a, { children: [jsx$1(Title$9, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Title" }, { children: title }), void 0), jsxs$1(Details$1, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Details" }, { children: [anyQtyForText, jsx$1(PriceContainer$2, __assign$1({ "data-testid": "Price" }, { children: jsx$1(PriceLabel$1, { finalPrice: price, color: "var(--colors-pallete-red-color)", size: ComponentSize.Small }, void 0) }), void 0), "+ ", freeShippingText] }), void 0)] }, void 0) }), void 0));
|
|
6512
6512
|
};
|
|
6513
|
-
var templateObject_1$
|
|
6513
|
+
var templateObject_1$1S, templateObject_2$1m, templateObject_3$14, templateObject_4$S;
|
|
6514
6514
|
|
|
6515
6515
|
var Bundle = {
|
|
6516
6516
|
Minimalistic: Minimalistic,
|
|
6517
6517
|
Simple: Simple,
|
|
6518
6518
|
};
|
|
6519
6519
|
|
|
6520
|
-
var Container$19 = newStyled.div(templateObject_1$
|
|
6520
|
+
var Container$19 = newStyled.div(templateObject_1$1R || (templateObject_1$1R = __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) {
|
|
6521
6521
|
var displayBNPL = _a.displayBNPL;
|
|
6522
6522
|
return (displayBNPL ? 'flex' : 'none');
|
|
6523
6523
|
});
|
|
6524
|
-
var TextContainer$1 = newStyled.div(templateObject_2$
|
|
6525
|
-
var IconWrapper$1 = newStyled.div(templateObject_3$
|
|
6524
|
+
var TextContainer$1 = newStyled.div(templateObject_2$1l || (templateObject_2$1l = __makeTemplateObject(["\n font-size: 14px;\n margin: 0;\n line-height: 24px;\n font-weight: 400;\n color: #292929;\n display: flex;\n align-items: center;\n align-self: stretch;\n"], ["\n font-size: 14px;\n margin: 0;\n line-height: 24px;\n font-weight: 400;\n color: #292929;\n display: flex;\n align-items: center;\n align-self: stretch;\n"])));
|
|
6525
|
+
var IconWrapper$1 = newStyled.div(templateObject_3$13 || (templateObject_3$13 = __makeTemplateObject(["\n display: inline;\n top: -1px;\n position: relative;\n\n svg {\n vertical-align: -webkit-baseline-middle;\n }\n"], ["\n display: inline;\n top: -1px;\n position: relative;\n\n svg {\n vertical-align: -webkit-baseline-middle;\n }\n"])));
|
|
6526
6526
|
var BuyNowPayLater = function (_a) {
|
|
6527
6527
|
var _b;
|
|
6528
6528
|
var displayBNPL = _a.displayBNPL, installments = _a.installments, installmentPrice = _a.installmentPrice, _c = _a.iconFolder, iconFolder = _c === void 0 ? 'PDP' : _c, iconName = _a.iconName, _d = _a.showLogo, showLogo = _d === void 0 ? true : _d, _e = _a.iconColor, iconColor = _e === void 0 ? '#292929' : _e, fontSize = _a.fontSize, _f = _a.bnplWithAfterPay, bnplWithAfterPay = _f === void 0 ? false : _f, textTemplate = _a.textTemplate;
|
|
@@ -6549,41 +6549,41 @@ var BuyNowPayLater = function (_a) {
|
|
|
6549
6549
|
paddingRight: '0.25rem',
|
|
6550
6550
|
}, testId: "InstallmentPriceId" }, { children: installmentPrice }), void 0), showLogo ? ' with' : ''] }, void 0), showLogo && (jsx$1(IconWrapper$1, __assign$1({ style: { display: 'flex' } }, { children: jsx$1(IconComponent, { width: !bnplWithAfterPay ? 3.2 : 5.3, height: 2, fill: iconColor, style: { position: 'relative', left: bnplWithAfterPay ? '1rem' : '0' } }, void 0) }), void 0))] }), void 0) }), void 0));
|
|
6551
6551
|
};
|
|
6552
|
-
var templateObject_1$
|
|
6552
|
+
var templateObject_1$1R, templateObject_2$1l, templateObject_3$13;
|
|
6553
6553
|
|
|
6554
|
-
var Text$6 = newStyled.span(templateObject_1$
|
|
6555
|
-
var Title$
|
|
6554
|
+
var Text$6 = newStyled.span(templateObject_1$1Q || (templateObject_1$1Q = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"], ["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"])), function (props) { return props.color; });
|
|
6555
|
+
var Title$8 = function (_a) {
|
|
6556
6556
|
var title = _a.title;
|
|
6557
6557
|
var theme = useTheme();
|
|
6558
6558
|
return jsx$1(Text$6, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0);
|
|
6559
6559
|
};
|
|
6560
|
-
var templateObject_1$
|
|
6560
|
+
var templateObject_1$1Q;
|
|
6561
6561
|
|
|
6562
|
-
var P$4 = newStyled.p(templateObject_1$
|
|
6562
|
+
var P$4 = newStyled.p(templateObject_1$1P || (templateObject_1$1P = __makeTemplateObject(["\n font-size: 0.75rem;\n font-weight: 400;\n line-height: 1.125rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"], ["\n font-size: 0.75rem;\n font-weight: 400;\n line-height: 1.125rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"])), function (props) { return props.color; });
|
|
6563
6563
|
var Promo = function (_a) {
|
|
6564
6564
|
var text = _a.text;
|
|
6565
6565
|
var theme = useTheme();
|
|
6566
6566
|
return (jsx$1(P$4, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "CartProductItemPromo" }, { children: text }), void 0));
|
|
6567
6567
|
};
|
|
6568
|
-
var templateObject_1$
|
|
6568
|
+
var templateObject_1$1P;
|
|
6569
6569
|
|
|
6570
|
-
var Text$5 = newStyled.span(templateObject_1$
|
|
6570
|
+
var Text$5 = newStyled.span(templateObject_1$1O || (templateObject_1$1O = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 1.125rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"], ["\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 1.125rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"])), function (props) { return props.color; });
|
|
6571
6571
|
var Description$1 = function (_a) {
|
|
6572
6572
|
var text = _a.text;
|
|
6573
6573
|
var theme = useTheme();
|
|
6574
6574
|
return jsx$1(Text$5, __assign$1({ color: theme.colors.shades['400'].color }, { children: text }), void 0);
|
|
6575
6575
|
};
|
|
6576
|
-
var templateObject_1$
|
|
6576
|
+
var templateObject_1$1O;
|
|
6577
6577
|
|
|
6578
|
-
var Container$18 = newStyled.div(templateObject_1$
|
|
6578
|
+
var Container$18 = newStyled.div(templateObject_1$1N || (templateObject_1$1N = __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"); });
|
|
6579
6579
|
var CloseButton$1 = function (_a) {
|
|
6580
6580
|
var onClick = _a.onClick, size = _a.size;
|
|
6581
6581
|
var theme = useTheme();
|
|
6582
6582
|
return (jsx$1(Container$18, __assign$1({ backgroundColor: theme.colors.shades['700'].color, onClick: onClick, "data-testid": "CartProductItemCloseBtn", size: size }, { children: jsx$1(Icon.Actions.Close, { width: size - 1, height: size - 1, fill: "#fff" }, void 0) }), void 0));
|
|
6583
6583
|
};
|
|
6584
|
-
var templateObject_1$
|
|
6584
|
+
var templateObject_1$1N;
|
|
6585
6585
|
|
|
6586
|
-
var Text$4 = newStyled.h3(templateObject_1$
|
|
6586
|
+
var Text$4 = newStyled.h3(templateObject_1$1M || (templateObject_1$1M = __makeTemplateObject(["\n background-color: ", ";\n margin: 0;\n padding: 0.25rem 0.5rem;\n font-size: 0.625rem;\n font-weight: 700;\n line-height: 0.875rem;\n border-radius: ", ";\n display: initial;\n color: ", ";\n"], ["\n background-color: ", ";\n margin: 0;\n padding: 0.25rem 0.5rem;\n font-size: 0.625rem;\n font-weight: 700;\n line-height: 0.875rem;\n border-radius: ", ";\n display: initial;\n color: ", ";\n"])), function (_a) {
|
|
6587
6587
|
var backgroundColor = _a.backgroundColor;
|
|
6588
6588
|
return backgroundColor;
|
|
6589
6589
|
}, function (_a) {
|
|
@@ -6598,30 +6598,30 @@ var OfferBanner = function (_a) {
|
|
|
6598
6598
|
var theme = useTheme();
|
|
6599
6599
|
return (jsx$1(Text$4, __assign$1({ backgroundColor: backgroundColor, color: theme.colors.shades['700'].color, borderRadius: theme.component.text.offerBanner.borderRadius, "data-testid": "OfferBanner" }, { children: discountAppliedText }), void 0));
|
|
6600
6600
|
};
|
|
6601
|
-
var templateObject_1$
|
|
6601
|
+
var templateObject_1$1M;
|
|
6602
6602
|
|
|
6603
6603
|
var CartProductItem = {
|
|
6604
|
-
Title: Title$
|
|
6604
|
+
Title: Title$8,
|
|
6605
6605
|
Tag: OfferBanner,
|
|
6606
6606
|
Promo: Promo,
|
|
6607
6607
|
Description: Description$1,
|
|
6608
6608
|
CloseButton: CloseButton$1,
|
|
6609
6609
|
};
|
|
6610
6610
|
|
|
6611
|
-
var Container$17 = newStyled.div(templateObject_1$
|
|
6612
|
-
var MobileContainer = newStyled(Container$17)(templateObject_2$
|
|
6613
|
-
var DollarPart = newStyled.span(templateObject_3$
|
|
6614
|
-
var ClubMembersText = newStyled.span(templateObject_4$
|
|
6611
|
+
var Container$17 = newStyled.div(templateObject_1$1L || (templateObject_1$1L = __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"])));
|
|
6612
|
+
var MobileContainer = newStyled(Container$17)(templateObject_2$1k || (templateObject_2$1k = __makeTemplateObject(["\n padding: 2px 2px;\n gap: 3px;\n"], ["\n padding: 2px 2px;\n gap: 3px;\n"])));
|
|
6613
|
+
var DollarPart = newStyled.span(templateObject_3$12 || (templateObject_3$12 = __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"])));
|
|
6614
|
+
var ClubMembersText = newStyled.span(templateObject_4$R || (templateObject_4$R = __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"])));
|
|
6615
6615
|
var MobileDollarPart = newStyled(DollarPart)(templateObject_5$F || (templateObject_5$F = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
6616
|
-
var MobileClubMembersText = newStyled(ClubMembersText)(templateObject_6$
|
|
6617
|
-
var DesktopDollarPart = newStyled(DollarPart)(templateObject_7$
|
|
6618
|
-
var DesktopClubMembersText = newStyled(ClubMembersText)(templateObject_8$
|
|
6616
|
+
var MobileClubMembersText = newStyled(ClubMembersText)(templateObject_6$z || (templateObject_6$z = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
6617
|
+
var DesktopDollarPart = newStyled(DollarPart)(templateObject_7$s || (templateObject_7$s = __makeTemplateObject(["\n font-size: 13px;\n"], ["\n font-size: 13px;\n"])));
|
|
6618
|
+
var DesktopClubMembersText = newStyled(ClubMembersText)(templateObject_8$l || (templateObject_8$l = __makeTemplateObject(["\n font-size: 13px;\n"], ["\n font-size: 13px;\n"])));
|
|
6619
6619
|
var ClubPriceLabel = function (_a) {
|
|
6620
6620
|
var clubPrice = _a.clubPrice;
|
|
6621
6621
|
var isMobile = useWindowDimensions().isMobile;
|
|
6622
6622
|
return (jsx$1(Fragment$2, { children: isMobile ? (jsxs$1(MobileContainer, { children: [jsx$1(MobileDollarPart, { children: clubPrice }, void 0), jsx$1(MobileClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) : (jsxs$1(Container$17, { children: [jsx$1(DesktopDollarPart, { children: clubPrice }, void 0), jsx$1(DesktopClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) }, void 0));
|
|
6623
6623
|
};
|
|
6624
|
-
var templateObject_1$
|
|
6624
|
+
var templateObject_1$1L, templateObject_2$1k, templateObject_3$12, templateObject_4$R, templateObject_5$F, templateObject_6$z, templateObject_7$s, templateObject_8$l;
|
|
6625
6625
|
|
|
6626
6626
|
var Spacing = function (_a) {
|
|
6627
6627
|
var size = _a.size, _b = _a.type, type = _b === void 0 ? 'block' : _b, children = _a.children, styleProp = _a.style;
|
|
@@ -6629,10 +6629,10 @@ var Spacing = function (_a) {
|
|
|
6629
6629
|
return jsx$1("div", __assign$1({ style: style }, { children: children }), void 0);
|
|
6630
6630
|
};
|
|
6631
6631
|
|
|
6632
|
-
var Container$16 = newStyled('div')(templateObject_1$
|
|
6633
|
-
var Content$2 = newStyled('div')(templateObject_2$
|
|
6634
|
-
var BarContainer$1 = newStyled('div')(templateObject_3
|
|
6635
|
-
var Bar$2 = newStyled('div')(templateObject_4$
|
|
6632
|
+
var Container$16 = newStyled('div')(templateObject_1$1K || (templateObject_1$1K = __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"])));
|
|
6633
|
+
var Content$2 = newStyled('div')(templateObject_2$1j || (templateObject_2$1j = __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"])));
|
|
6634
|
+
var BarContainer$1 = newStyled('div')(templateObject_3$11 || (templateObject_3$11 = __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"])));
|
|
6635
|
+
var Bar$2 = newStyled('div')(templateObject_4$Q || (templateObject_4$Q = __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) {
|
|
6636
6636
|
var index = _a.index;
|
|
6637
6637
|
return "".concat(6 + 3 * index, "px");
|
|
6638
6638
|
}, function (_a) {
|
|
@@ -6643,7 +6643,168 @@ var StrengthBars = function (_a) {
|
|
|
6643
6643
|
var _b = _a.barsFilled, barsFilled = _b === void 0 ? 0 : _b, supportText = _a.supportText;
|
|
6644
6644
|
return (jsxs$1(Container$16, __assign$1({ "data-testid": "strength-bar" }, { children: [jsx$1(BarContainer$1, { children: [1, 2, 3, 4, 5].map(function (bar, index) { return (jsx$1(Bar$2, { index: index, isFilled: bar <= barsFilled }, bar)); }) }, void 0), jsx$1(Content$2, { children: supportText }, void 0)] }), void 0));
|
|
6645
6645
|
};
|
|
6646
|
-
var templateObject_1$
|
|
6646
|
+
var templateObject_1$1K, templateObject_2$1j, templateObject_3$11, templateObject_4$Q;
|
|
6647
|
+
|
|
6648
|
+
var Benefit$2 = newStyled.div(templateObject_1$1J || (templateObject_1$1J = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: 8px;\n"], ["\n display: flex;\n align-items: center;\n gap: 8px;\n"])));
|
|
6649
|
+
var templateObject_1$1J;
|
|
6650
|
+
|
|
6651
|
+
var style = ".benefit{font-size:14px;line-height:22px;display:inline-block;margin:0;@media screen and (max-width:768px){font-size:12px;line-height:16px;}}";
|
|
6652
|
+
|
|
6653
|
+
var renderBenefit = function (text, className) {
|
|
6654
|
+
if (className === void 0) { className = style.benefit; }
|
|
6655
|
+
if (typeof text === 'string') {
|
|
6656
|
+
return jsx$1("span", { className: className, dangerouslySetInnerHTML: { __html: text } }, void 0);
|
|
6657
|
+
}
|
|
6658
|
+
return text;
|
|
6659
|
+
};
|
|
6660
|
+
var OfferAtCartBenefits = function (_a) {
|
|
6661
|
+
var benefits = _a.benefits;
|
|
6662
|
+
return (jsx$1(Fragment$2, { children: benefits.map(function (_a) {
|
|
6663
|
+
var _b;
|
|
6664
|
+
var icon = _a.icon, text = _a.text, className = _a.className;
|
|
6665
|
+
return (jsxs$1(Benefit$2, { children: [(icon === null || icon === void 0 ? void 0 : icon.name) && (jsx$1(Icon$1, { name: icon.name, fill: icon.fill, width: icon.width, height: icon.height }, void 0)), renderBenefit(text, className)] }, (_b = icon === null || icon === void 0 ? void 0 : icon.name) !== null && _b !== void 0 ? _b : text.toString()));
|
|
6666
|
+
}) }, void 0));
|
|
6667
|
+
};
|
|
6668
|
+
|
|
6669
|
+
var STARTS_NUMBER = 5;
|
|
6670
|
+
|
|
6671
|
+
var Container$15 = newStyled.div(templateObject_1$1I || (templateObject_1$1I = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
6672
|
+
var templateObject_1$1I;
|
|
6673
|
+
|
|
6674
|
+
var StarContainer = newStyled.div(templateObject_1$1H || (templateObject_1$1H = __makeTemplateObject(["\n display: flex;\n margin-right: ", ";\n"], ["\n display: flex;\n margin-right: ", ";\n"])), function (_a) {
|
|
6675
|
+
var marginRight = _a.marginRight;
|
|
6676
|
+
return marginRight;
|
|
6677
|
+
});
|
|
6678
|
+
var StarList = function (_a) {
|
|
6679
|
+
var rating = _a.rating, starsNumber = _a.starsNumber, fill = _a.fill, _b = _a.size, size = _b === void 0 ? ComponentSize.Medium : _b;
|
|
6680
|
+
var theme = useTheme();
|
|
6681
|
+
var iconProps = {
|
|
6682
|
+
fill: fill,
|
|
6683
|
+
width: theme.component.stars.element[size].width,
|
|
6684
|
+
height: theme.component.stars.element[size].height,
|
|
6685
|
+
};
|
|
6686
|
+
return (jsx$1(Container$15, { children: __spreadArray([], new Array(starsNumber), true).map(function (_, index) {
|
|
6687
|
+
return (jsx$1(StarContainer, __assign$1({ "data-testid": "star-container", marginRight: theme.component.stars.element[size].marginRight }, { children: index < Math.floor(rating) ? (jsx$1(Icon.PDP.Star, __assign$1({}, iconProps), void 0)) : index === Math.floor(rating) && rating % 1 != 0 ? (jsx$1(Icon.PDP.StarHalf, __assign$1({}, iconProps), void 0)) : (jsx$1(Icon.PDP.StarEmpty, __assign$1({}, iconProps), void 0)) }), "star-container-".concat(index)));
|
|
6688
|
+
}) }, void 0));
|
|
6689
|
+
};
|
|
6690
|
+
var templateObject_1$1H;
|
|
6691
|
+
|
|
6692
|
+
/* base styles & size variants */
|
|
6693
|
+
var LabelStyles = {
|
|
6694
|
+
baseStyles: function (theme) {
|
|
6695
|
+
return css({
|
|
6696
|
+
margin: '0',
|
|
6697
|
+
display: 'flex',
|
|
6698
|
+
color: theme.colors.pallete.secondary.color,
|
|
6699
|
+
fontWeight: theme.component.rating.fontWeight,
|
|
6700
|
+
});
|
|
6701
|
+
},
|
|
6702
|
+
xxsmall: function (theme) {
|
|
6703
|
+
return css({
|
|
6704
|
+
fontSize: theme.component.rating.size.xxsmall.fontSize,
|
|
6705
|
+
lineHeight: theme.component.rating.size.xxsmall.lineHeight,
|
|
6706
|
+
marginLeft: '0.1rem',
|
|
6707
|
+
});
|
|
6708
|
+
},
|
|
6709
|
+
xsmall: function (theme) {
|
|
6710
|
+
return css({
|
|
6711
|
+
fontSize: theme.component.rating.size.xsmall.fontSize,
|
|
6712
|
+
lineHeight: theme.component.rating.size.xsmall.lineHeight,
|
|
6713
|
+
marginLeft: '0.172rem',
|
|
6714
|
+
});
|
|
6715
|
+
},
|
|
6716
|
+
small: function (theme) {
|
|
6717
|
+
return css({
|
|
6718
|
+
fontSize: theme.component.rating.size.small.fontSize,
|
|
6719
|
+
lineHeight: theme.component.rating.size.small.lineHeight,
|
|
6720
|
+
marginLeft: '0.313rem',
|
|
6721
|
+
});
|
|
6722
|
+
},
|
|
6723
|
+
medium: function (theme) {
|
|
6724
|
+
return css({
|
|
6725
|
+
fontSize: theme.component.rating.size.medium.fontSize,
|
|
6726
|
+
lineHeight: theme.component.rating.size.medium.lineHeight,
|
|
6727
|
+
marginLeft: '0.438rem',
|
|
6728
|
+
});
|
|
6729
|
+
},
|
|
6730
|
+
large: function (theme) {
|
|
6731
|
+
return css({
|
|
6732
|
+
fontSize: theme.component.rating.size.large.fontSize,
|
|
6733
|
+
lineHeight: theme.component.rating.size.large.lineHeight,
|
|
6734
|
+
marginLeft: '0.563rem',
|
|
6735
|
+
});
|
|
6736
|
+
},
|
|
6737
|
+
};
|
|
6738
|
+
var Container$14 = newStyled.a(templateObject_1$1G || (templateObject_1$1G = __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"])));
|
|
6739
|
+
var CustomLabel = newStyled.div(function (_a) {
|
|
6740
|
+
var theme = _a.theme, size = _a.size, wrapWithParenthesis = _a.wrapWithParenthesis, underline = _a.underline;
|
|
6741
|
+
return [
|
|
6742
|
+
LabelStyles.baseStyles(theme),
|
|
6743
|
+
LabelStyles[size](theme),
|
|
6744
|
+
{
|
|
6745
|
+
':before': {
|
|
6746
|
+
content: wrapWithParenthesis ? '"("' : '""',
|
|
6747
|
+
},
|
|
6748
|
+
':after': {
|
|
6749
|
+
content: wrapWithParenthesis ? '")"' : '""',
|
|
6750
|
+
},
|
|
6751
|
+
},
|
|
6752
|
+
css({
|
|
6753
|
+
textDecoration: underline ? 'underline' : 'none',
|
|
6754
|
+
}),
|
|
6755
|
+
];
|
|
6756
|
+
});
|
|
6757
|
+
var RatingLabel = newStyled.span(templateObject_2$1i || (templateObject_2$1i = __makeTemplateObject(["\n font-size: 16px;\n font-weight: 600;\n color: ", ";\n padding-right: 6px;\n text-decoration: none;\n"], ["\n font-size: 16px;\n font-weight: 600;\n color: ", ";\n padding-right: 6px;\n text-decoration: none;\n"])), function (props) { return props.color; });
|
|
6758
|
+
var templateObject_1$1G, templateObject_2$1i;
|
|
6759
|
+
|
|
6760
|
+
var Rating = function (_a) {
|
|
6761
|
+
var _b = _a.size, size = _b === void 0 ? ComponentSize.Medium : _b, reviews = _a.reviews, reviewsText = _a.reviewsText, rating = _a.rating, _c = _a.showRatingText, showRatingText = _c === void 0 ? false : _c, _d = _a.wrapWithParenthesis, wrapWithParenthesis = _d === void 0 ? false : _d, _e = _a.underline, underline = _e === void 0 ? false : _e, reviewsContainerId = _a.reviewsContainerId;
|
|
6762
|
+
function handleAnchorClick(e) {
|
|
6763
|
+
var _a;
|
|
6764
|
+
if (e.cancelable) {
|
|
6765
|
+
e.preventDefault();
|
|
6766
|
+
}
|
|
6767
|
+
if (reviewsContainerId) {
|
|
6768
|
+
(_a = document.querySelector(reviewsContainerId)) === null || _a === void 0 ? void 0 : _a.scrollIntoView({
|
|
6769
|
+
behavior: 'smooth',
|
|
6770
|
+
});
|
|
6771
|
+
}
|
|
6772
|
+
}
|
|
6773
|
+
var theme = useTheme();
|
|
6774
|
+
var containerAttributes = reviewsContainerId
|
|
6775
|
+
? {
|
|
6776
|
+
href: reviewsContainerId,
|
|
6777
|
+
}
|
|
6778
|
+
: {};
|
|
6779
|
+
return (jsxs$1(Container$14, __assign$1({ as: reviewsContainerId ? 'a' : 'div' }, containerAttributes, { "data-testid": "Container", onClick: handleAnchorClick }, { children: [showRatingText && (jsx$1(RatingLabel, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "RatingLabel" }, { children: rating }), void 0)), jsx$1(StarList, { rating: rating, size: size, starsNumber: STARTS_NUMBER, fill: theme.component.stars.element.color }, void 0), jsxs$1(CustomLabel, __assign$1({ theme: theme, size: size, wrapWithParenthesis: wrapWithParenthesis, underline: underline, "data-testid": "CustomLabel" }, { children: [reviews ? reviews : '', " ", reviewsText ? reviewsText : ''] }), void 0)] }), void 0));
|
|
6780
|
+
};
|
|
6781
|
+
|
|
6782
|
+
var ImageWrapper$4 = newStyled.div(templateObject_1$1F || (templateObject_1$1F = __makeTemplateObject(["\n position: relative;\n display: flex;\n width: ", ";\n justify-content: center;\n align-items: center;\n border-radius: 8px;\n"], ["\n position: relative;\n display: flex;\n width: ", ";\n justify-content: center;\n align-items: center;\n border-radius: 8px;\n"])), function (_a) {
|
|
6783
|
+
var width = _a.width;
|
|
6784
|
+
return width;
|
|
6785
|
+
});
|
|
6786
|
+
var RatingWrapper = newStyled.div(templateObject_2$1h || (templateObject_2$1h = __makeTemplateObject(["\n position: absolute;\n bottom: 5px;\n left: 50%;\n transform: translateX(-50%);\n display: flex;\n justify-content: center;\n align-items: center;\n background-color: white;\n border-radius: 8px;\n padding: 4px 8px;\n width: 95%;\n"], ["\n position: absolute;\n bottom: 5px;\n left: 50%;\n transform: translateX(-50%);\n display: flex;\n justify-content: center;\n align-items: center;\n background-color: white;\n border-radius: 8px;\n padding: 4px 8px;\n width: 95%;\n"])));
|
|
6787
|
+
var RatingText = newStyled.span(templateObject_3$10 || (templateObject_3$10 = __makeTemplateObject(["\n font-size: ", ";\n font-weight: 600;\n margin-bottom: -3%;\n color: #292929;\n"], ["\n font-size: ", ";\n font-weight: 600;\n margin-bottom: -3%;\n color: #292929;\n"])), function (_a) {
|
|
6788
|
+
var fontSize = _a.fontSize;
|
|
6789
|
+
return fontSize;
|
|
6790
|
+
});
|
|
6791
|
+
var templateObject_1$1F, templateObject_2$1h, templateObject_3$10;
|
|
6792
|
+
|
|
6793
|
+
var OfferAtCartImage = function (_a) {
|
|
6794
|
+
var isMobile = _a.isMobile, src = _a.src, alt = _a.alt, rating = _a.rating;
|
|
6795
|
+
return (jsxs$1(ImageWrapper$4, __assign$1({ width: isMobile ? '130px' : '122px' }, { children: [!!rating && (jsxs$1(RatingWrapper, { children: [jsx$1(Rating, { rating: rating, size: isMobile ? ComponentSize.XXSmall : ComponentSize.XSmall }, void 0), jsxs$1(RatingText, __assign$1({ fontSize: isMobile ? '9px' : '13px' }, { children: [rating, "/5"] }), void 0)] }, void 0)), jsx$1(Image$3, { src: src, alt: alt, width: "100%", height: "100%", objectFit: "cover", borderRadius: "8px" }, void 0)] }), void 0));
|
|
6796
|
+
};
|
|
6797
|
+
|
|
6798
|
+
var OfferAtCartTitle = function (_a) {
|
|
6799
|
+
var content = _a.content, bold = _a.bold, dangerouslySetInnerHTML = _a.dangerouslySetInnerHTML;
|
|
6800
|
+
if (dangerouslySetInnerHTML) {
|
|
6801
|
+
return jsx$1("div", { dangerouslySetInnerHTML: dangerouslySetInnerHTML }, void 0);
|
|
6802
|
+
}
|
|
6803
|
+
if (typeof content === 'string') {
|
|
6804
|
+
return (jsx$1(Text$7, __assign$1({ variant: "body", size: "small", weight: bold ? 'bold' : 'regular' }, { children: content }), void 0));
|
|
6805
|
+
}
|
|
6806
|
+
return jsx$1(Fragment$2, { children: content }, void 0);
|
|
6807
|
+
};
|
|
6647
6808
|
|
|
6648
6809
|
var AutoshipFrequencyDropdown = function (_a) {
|
|
6649
6810
|
var frequency = _a.frequency, onChange = _a.onChange;
|
|
@@ -6674,20 +6835,20 @@ var getDropdownOptions = function (frequency) {
|
|
|
6674
6835
|
}); });
|
|
6675
6836
|
};
|
|
6676
6837
|
|
|
6677
|
-
var Benefit$
|
|
6838
|
+
var Benefit$1 = newStyled.div(templateObject_1$1E || (templateObject_1$1E = __makeTemplateObject(["\n display: flex;\n padding: 8px 0;\n svg {\n overflow: visible;\n }\n"], ["\n display: flex;\n padding: 8px 0;\n svg {\n overflow: visible;\n }\n"])));
|
|
6678
6839
|
var BenefitText$1 = newStyled(Text$7)(templateObject_2$1g || (templateObject_2$1g = __makeTemplateObject(["\n line-height: 20px;\n margin-left: 9px;\n"], ["\n line-height: 20px;\n margin-left: 9px;\n"])));
|
|
6679
|
-
var templateObject_1$
|
|
6840
|
+
var templateObject_1$1E, templateObject_2$1g;
|
|
6680
6841
|
|
|
6681
6842
|
var BenefitsList = function (_a) {
|
|
6682
6843
|
var benefits = _a.benefits, disabled = _a.disabled, className = _a.className;
|
|
6683
6844
|
var colors = useTheme().colors;
|
|
6684
6845
|
return (jsx$1(Fragment$2, { children: benefits.map(function (benefit) {
|
|
6685
6846
|
var _a;
|
|
6686
|
-
return (jsxs$1(Benefit$
|
|
6847
|
+
return (jsxs$1(Benefit$1, __assign$1({ className: className }, { children: [jsx$1(Icon$1, { name: benefit.iconName, fill: disabled ? colors.shades['250'].color : (_a = benefit.fill) !== null && _a !== void 0 ? _a : colors.shades['700'].color, width: "24px", height: "24px" }, void 0), jsx$1(BenefitText$1, { variant: "body", dangerouslySetInnerHTML: { __html: benefit.htmlText } }, void 0)] }), benefit.iconName));
|
|
6687
6848
|
}) }, void 0));
|
|
6688
6849
|
};
|
|
6689
6850
|
|
|
6690
|
-
var TimerContainer$1 = newStyled.div(templateObject_1$
|
|
6851
|
+
var TimerContainer$1 = newStyled.div(templateObject_1$1D || (templateObject_1$1D = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
6691
6852
|
var timerColor = _a.timerColor;
|
|
6692
6853
|
return timerColor || '';
|
|
6693
6854
|
});
|
|
@@ -6695,15 +6856,15 @@ var TimerContainerV2 = newStyled.div(templateObject_2$1f || (templateObject_2$1f
|
|
|
6695
6856
|
var timerColor = _a.timerColor;
|
|
6696
6857
|
return timerColor || '';
|
|
6697
6858
|
});
|
|
6698
|
-
var UnitBlock = newStyled(Text$7)(templateObject_3
|
|
6859
|
+
var UnitBlock = newStyled(Text$7)(templateObject_3$$ || (templateObject_3$$ = __makeTemplateObject(["\n background-color: ", ";\n width: 32px;\n height: 32px;\n border-radius: 2px;\n padding: 0 6px;\n line-height: 22px;\n text-align: center;\n position: relative;\n & + & {\n &:before {\n position: absolute;\n content: ':';\n display: block;\n left: -7px;\n top: 5px;\n color: ", ";\n }\n }\n"], ["\n background-color: ", ";\n width: 32px;\n height: 32px;\n border-radius: 2px;\n padding: 0 6px;\n line-height: 22px;\n text-align: center;\n position: relative;\n & + & {\n &:before {\n position: absolute;\n content: ':';\n display: block;\n left: -7px;\n top: 5px;\n color: ", ";\n }\n }\n"])), function (_a) {
|
|
6699
6860
|
var theme = _a.theme;
|
|
6700
6861
|
return theme.colors.shades.white.color;
|
|
6701
6862
|
}, function (_a) {
|
|
6702
6863
|
var theme = _a.theme;
|
|
6703
6864
|
return theme.colors.shades.white.color;
|
|
6704
6865
|
});
|
|
6705
|
-
var Unit = newStyled.p(templateObject_4$
|
|
6706
|
-
var templateObject_1$
|
|
6866
|
+
var Unit = newStyled.p(templateObject_4$P || (templateObject_4$P = __makeTemplateObject(["\n font-size: 8px;\n font-weight: 400;\n line-height: 8px;\n margin: 0;\n"], ["\n font-size: 8px;\n font-weight: 400;\n line-height: 8px;\n margin: 0;\n"])));
|
|
6867
|
+
var templateObject_1$1D, templateObject_2$1f, templateObject_3$$, templateObject_4$P;
|
|
6707
6868
|
|
|
6708
6869
|
var HRS = 'HRS';
|
|
6709
6870
|
var MIN = 'MIN';
|
|
@@ -6744,7 +6905,7 @@ var Timer = function (_a) {
|
|
|
6744
6905
|
return (jsxs$1(TimerContainer$1, __assign$1({ "data-testid": "Time", timerColor: timerColor }, { children: [showHours && (hours || displayZeroValues) && "".concat(hours, "h "), (minutes || displayZeroValues) && "".concat(minutes, "m "), showSeconds && "".concat(seconds, "s")] }), void 0));
|
|
6745
6906
|
};
|
|
6746
6907
|
|
|
6747
|
-
var TimerContainer = newStyled.div(templateObject_1$
|
|
6908
|
+
var TimerContainer = newStyled.div(templateObject_1$1C || (templateObject_1$1C = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n justify-content: ", ";\n align-items: center;\n background-color: ", ";\n width: 100%;\n padding: 5px 24px;\n height: 40px;\n line-height: 14px;\n border-radius: ", ";\n\n & [data-testid='HurryUpText'] {\n font-size: 12px !important;\n line-height: 12px !important;\n }\n\n & [data-testid='Time'] {\n font-size: 14px !important;\n line-height: 14px !important;\n }\n\n @media (min-width: 330px) {\n & [data-testid='HurryUpText'] {\n font-size: 14px !important;\n line-height: 14px !important;\n }\n\n & [data-testid='Time'] {\n font-size: 16px !important;\n line-height: 16px !important;\n }\n }\n\n @media (min-width: 767px) {\n border-radius: ", ";\n padding: 5px 2px;\n }\n"], ["\n display: flex;\n flex-direction: row;\n justify-content: ", ";\n align-items: center;\n background-color: ", ";\n width: 100%;\n padding: 5px 24px;\n height: 40px;\n line-height: 14px;\n border-radius: ", ";\n\n & [data-testid='HurryUpText'] {\n font-size: 12px !important;\n line-height: 12px !important;\n }\n\n & [data-testid='Time'] {\n font-size: 14px !important;\n line-height: 14px !important;\n }\n\n @media (min-width: 330px) {\n & [data-testid='HurryUpText'] {\n font-size: 14px !important;\n line-height: 14px !important;\n }\n\n & [data-testid='Time'] {\n font-size: 16px !important;\n line-height: 16px !important;\n }\n }\n\n @media (min-width: 767px) {\n border-radius: ", ";\n padding: 5px 2px;\n }\n"])), function (_a) {
|
|
6748
6909
|
var textPosition = _a.textPosition;
|
|
6749
6910
|
return textPosition;
|
|
6750
6911
|
}, function (_a) {
|
|
@@ -6757,7 +6918,7 @@ var TimerContainer = newStyled.div(templateObject_1$1F || (templateObject_1$1F =
|
|
|
6757
6918
|
var borderRadius = _a.borderRadius;
|
|
6758
6919
|
return borderRadius || '8px';
|
|
6759
6920
|
});
|
|
6760
|
-
var templateObject_1$
|
|
6921
|
+
var templateObject_1$1C;
|
|
6761
6922
|
|
|
6762
6923
|
var getDefaultCountdown = function () {
|
|
6763
6924
|
var tomorrowDate = new Date();
|
|
@@ -6773,7 +6934,7 @@ var HurryUp = function (_a) {
|
|
|
6773
6934
|
return (jsxs$1(TimerContainer, __assign$1({ backgroundColor: backgroundColor || theme.component.card.backgroundColor, textPosition: textPosition, borderRadius: (!isFullVersion && theme.component.hurryUp.borderRadius) || '0', "data-testid": "HurryUp" }, { children: [clockPosition === 'left' && (jsxs$1(Fragment$2, { children: [jsx$1(Icon.PDP.Stopwatch, { width: iconSize, height: iconSize, fill: theme.colors.pallete.secondary.color }, void 0), "\u00A0"] }, void 0)), jsx$1(Text$7, __assign$1({ testId: "HurryUpText", variant: "body", size: "small", weight: "demi", color: hurryUpTextColor }, { children: hurryUpText }), void 0), "\u00A0", clockPosition === 'right' && (jsxs$1(Fragment$2, { children: [jsx$1(Icon.PDP.Stopwatch, { width: iconSize, height: iconSize, fill: theme.colors.pallete.secondary.color }, void 0), "\u00A0"] }, void 0)), showTimer && (jsx$1(Timer, __assign$1({ countdown: countdown, onTimeUp: function () { } }, timerProps, { isCardsVersion: isFullVersion }), void 0))] }), void 0));
|
|
6774
6935
|
};
|
|
6775
6936
|
|
|
6776
|
-
var Container$
|
|
6937
|
+
var Container$13 = newStyled.div(templateObject_1$1B || (templateObject_1$1B = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n svg {\n vertical-align: unset;\n }\n"], ["\n width: ", ";\n height: ", ";\n svg {\n vertical-align: unset;\n }\n"])), function (_a) {
|
|
6777
6938
|
var size = _a.size;
|
|
6778
6939
|
return (size ? size : '100%');
|
|
6779
6940
|
}, function (_a) {
|
|
@@ -6801,29 +6962,29 @@ var StyledSpinner = newStyled.div(templateObject_2$1e || (templateObject_2$1e =
|
|
|
6801
6962
|
var _b = _a.duration, duration = _b === void 0 ? 0.7 : _b;
|
|
6802
6963
|
return duration;
|
|
6803
6964
|
});
|
|
6804
|
-
var templateObject_1$
|
|
6965
|
+
var templateObject_1$1B, templateObject_2$1e;
|
|
6805
6966
|
|
|
6806
6967
|
var Spinner = function (_a) {
|
|
6807
6968
|
var fill = _a.fill, background = _a.background, _b = _a.animationDuration, animationDuration = _b === void 0 ? 1 : _b, borderSize = _a.borderSize, _c = _a.complete, complete = _c === void 0 ? false : _c, completeIconStroke = _a.completeIconStroke, size = _a.size;
|
|
6808
|
-
return (jsx$1(Container$
|
|
6969
|
+
return (jsx$1(Container$13, __assign$1({ size: size, "data-testid": "Container" }, { children: complete ? (jsx$1(Icon.Actions.LightCheck, { fill: fill, svgProps: { strokeWidth: completeIconStroke } }, void 0)) : (jsx$1(StyledSpinner, { duration: animationDuration, "data-testid": "Loading", color: fill, background: background, size: borderSize !== null && borderSize !== void 0 ? borderSize : ComponentSize.Small }, void 0)) }), void 0));
|
|
6809
6970
|
};
|
|
6810
6971
|
|
|
6811
|
-
var ProgressContainer = newStyled.div(templateObject_1$
|
|
6972
|
+
var ProgressContainer = newStyled.div(templateObject_1$1A || (templateObject_1$1A = __makeTemplateObject(["\n top: 20px;\n left: 10px;\n border-radius: 10px;\n position: absolute;\n height: 5px;\n width: 95%;\n background: rgba(0, 0, 0, 0.3);\n transition: opacity 0.3s ease-in-out;\n opacity: ", ";\n"], ["\n top: 20px;\n left: 10px;\n border-radius: 10px;\n position: absolute;\n height: 5px;\n width: 95%;\n background: rgba(0, 0, 0, 0.3);\n transition: opacity 0.3s ease-in-out;\n opacity: ", ";\n"])), function (props) { return (props.hide ? 0 : 1); });
|
|
6812
6973
|
var ProgressFiller = newStyled.div(templateObject_2$1d || (templateObject_2$1d = __makeTemplateObject(["\n height: 100%;\n width: ", "%;\n background-color: white;\n border-radius: 10px;\n transition: width 0.3s ease-in-out;\n"], ["\n height: 100%;\n width: ", "%;\n background-color: white;\n border-radius: 10px;\n transition: width 0.3s ease-in-out;\n"])), function (props) { return props.progress * 100; });
|
|
6813
|
-
var templateObject_1$
|
|
6974
|
+
var templateObject_1$1A, templateObject_2$1d;
|
|
6814
6975
|
|
|
6815
6976
|
var ProgressBar$1 = function (_a) {
|
|
6816
6977
|
var progress = _a.progress, hide = _a.hide;
|
|
6817
6978
|
return (jsx$1(ProgressContainer, __assign$1({ "data-testid": "progress-bar", hide: hide }, { children: jsx$1(ProgressFiller, { progress: progress }, void 0) }), void 0));
|
|
6818
6979
|
};
|
|
6819
6980
|
|
|
6820
|
-
var Container$
|
|
6981
|
+
var Container$12 = newStyled.div(templateObject_1$1z || (templateObject_1$1z = __makeTemplateObject(["\n max-width: 530px;\n position: relative;\n"], ["\n max-width: 530px;\n position: relative;\n"])));
|
|
6821
6982
|
var HTMLVideo = newStyled.video(templateObject_2$1c || (templateObject_2$1c = __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; });
|
|
6822
|
-
var PlayIcon = newStyled(Icon.PDP.PlayVideo)(templateObject_3$
|
|
6823
|
-
var PlayContainer = newStyled.div(templateObject_4$
|
|
6983
|
+
var PlayIcon = newStyled(Icon.PDP.PlayVideo)(templateObject_3$_ || (templateObject_3$_ = __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"])));
|
|
6984
|
+
var PlayContainer = newStyled.div(templateObject_4$O || (templateObject_4$O = __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"])));
|
|
6824
6985
|
var PauseContainer = newStyled.div(templateObject_5$E || (templateObject_5$E = __makeTemplateObject(["\n z-index: 1;\n width: 100%;\n height: 100%;\n position: absolute;\n"], ["\n z-index: 1;\n width: 100%;\n height: 100%;\n position: absolute;\n"])));
|
|
6825
|
-
var MuteButton = newStyled.button(templateObject_6$
|
|
6826
|
-
var templateObject_1$
|
|
6986
|
+
var MuteButton = newStyled.button(templateObject_6$y || (templateObject_6$y = __makeTemplateObject(["\n position: absolute;\n background: transparent;\n border: none;\n bottom: 21px;\n right: 23px;\n z-index: 2;\n cursor: pointer;\n"], ["\n position: absolute;\n background: transparent;\n border: none;\n bottom: 21px;\n right: 23px;\n z-index: 2;\n cursor: pointer;\n"])));
|
|
6987
|
+
var templateObject_1$1z, templateObject_2$1c, templateObject_3$_, templateObject_4$O, templateObject_5$E, templateObject_6$y;
|
|
6827
6988
|
|
|
6828
6989
|
var Video$1 = function (_a) {
|
|
6829
6990
|
var _b, _c, _d, _e;
|
|
@@ -6873,10 +7034,10 @@ var Video$1 = function (_a) {
|
|
|
6873
7034
|
setVideoProgress(videoRef.current.currentTime);
|
|
6874
7035
|
}
|
|
6875
7036
|
};
|
|
6876
|
-
return (jsxs$1(Container$
|
|
7037
|
+
return (jsxs$1(Container$12, __assign$1({ className: className }, { children: [!isLoading && withProgressBar && jsx$1(ProgressBar$1, { progress: progress, hide: hideProgressBar }, void 0), !isPlaying ? (jsx$1(PlayContainer, __assign$1({ "data-testid": "play", onClick: handlePlayClick }, { children: isStarted && jsx$1(PlayIcon, {}, void 0) }), void 0)) : (jsx$1(PauseContainer, { "data-testid": "pause", onClick: handlePauseClick }, void 0)), hasAudioControl && (jsxs$1(MuteButton, __assign$1({ onClick: handleMuteToggle }, { children: [isMuted && jsx$1(Icon$1, { name: "custom/sound_off" }, void 0), !isMuted && jsx$1(Icon$1, { name: "custom/sound_on" }, void 0)] }), void 0)), jsxs$1(HTMLVideo, __assign$1({}, rest, { muted: isMuted, "data-testid": "video", poster: thumbnail, playsInline: true, ref: videoRef, onTimeUpdate: onTimeUpdate, onCanPlay: function () { return setIsLoading(false); }, onLoadedData: function () { return setIsLoading(false); }, onPause: function () { return setIsPlaying(false); }, onPlaying: function () { return setIsPlaying(true); }, height: height || 'auto' }, { children: [jsx$1("track", { kind: "captions" }, void 0), jsx$1("source", { src: source }, void 0)] }), void 0)] }), void 0));
|
|
6877
7038
|
};
|
|
6878
7039
|
|
|
6879
|
-
var LikeCount = newStyled.span(templateObject_1$
|
|
7040
|
+
var LikeCount = newStyled.span(templateObject_1$1y || (templateObject_1$1y = __makeTemplateObject(["\n font-size: 14px;\n line-height: 22px;\n color: ", ";\n font-weight: 600;\n\n &.like-count {\n transition: color 0.2s ease;\n }\n"], ["\n font-size: 14px;\n line-height: 22px;\n color: ", ";\n font-weight: 600;\n\n &.like-count {\n transition: color 0.2s ease;\n }\n"])), function (_a) {
|
|
6880
7041
|
var theme = _a.theme;
|
|
6881
7042
|
return theme.colors.shades.black.color;
|
|
6882
7043
|
});
|
|
@@ -6899,7 +7060,7 @@ var LikeBtnContainer = newStyled.button(templateObject_2$1b || (templateObject_2
|
|
|
6899
7060
|
var _b = _a.boxSizing, boxSizing = _b === void 0 ? 'border-box' : _b;
|
|
6900
7061
|
return boxSizing;
|
|
6901
7062
|
});
|
|
6902
|
-
var templateObject_1$
|
|
7063
|
+
var templateObject_1$1y, templateObject_2$1b;
|
|
6903
7064
|
|
|
6904
7065
|
var getStylesBySize$c = function (size) {
|
|
6905
7066
|
switch (size) {
|
|
@@ -6920,7 +7081,7 @@ var getStylesBySize$c = function (size) {
|
|
|
6920
7081
|
};
|
|
6921
7082
|
}
|
|
6922
7083
|
};
|
|
6923
|
-
var Container$
|
|
7084
|
+
var Container$11 = newStyled.div(templateObject_1$1x || (templateObject_1$1x = __makeTemplateObject(["\n background-color: ", ";\n width: ", ";\n height: ", ";\n border: ", ";\n border-radius: ", ";\n display: flex;\n justify-content: center;\n align-items: center;\n transition: background-color 0.1s ease;\n box-shadow: ", ";\n\n padding: ", ";\n gap: ", ";\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: ", ";\n border-radius: ", ";\n display: flex;\n justify-content: center;\n align-items: center;\n transition: background-color 0.1s ease;\n box-shadow: ", ";\n\n padding: ", ";\n gap: ", ";\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) {
|
|
6924
7085
|
var backgroundColor = _a.backgroundColor;
|
|
6925
7086
|
return backgroundColor;
|
|
6926
7087
|
}, function (_a) {
|
|
@@ -6961,9 +7122,9 @@ var IconButton = function (_a) {
|
|
|
6961
7122
|
var _b, _c;
|
|
6962
7123
|
var children = _a.children, disabled = _a.disabled, _d = _a.size, size = _d === void 0 ? ComponentSize.Medium : _d, onClick = _a.onClick, backgroundColor = _a.backgroundColor, _e = _a.dataTestId, dataTestId = _e === void 0 ? 'Container' : _e, _f = _a.hasText, hasText = _f === void 0 ? false : _f, boxShadow = _a.boxShadow, _g = _a.rounded, rounded = _g === void 0 ? true : _g, width = _a.width, border = _a.border;
|
|
6963
7124
|
var theme = useTheme();
|
|
6964
|
-
return (jsx$1(Container$
|
|
7125
|
+
return (jsx$1(Container$11, __assign$1({ border: border, width: width, className: disabled ? 'disabled' : '', backgroundColor: (_b = backgroundColor === null || backgroundColor === void 0 ? void 0 : backgroundColor.active) !== null && _b !== void 0 ? _b : theme.component.button.primary.active.backgroundColor, hoverBackgroundColor: (_c = backgroundColor === null || backgroundColor === void 0 ? void 0 : backgroundColor.hover) !== null && _c !== void 0 ? _c : theme.component.button.secondary.active.backgroundColor, disabledColor: theme.colors.shades['50'].color, disabledIconColor: theme.colors.shades['200'].color, size: size, "data-testid": dataTestId, onClick: disabled ? function () { } : onClick, hasText: hasText, boxShadow: boxShadow, rounded: rounded }, { children: children }), void 0));
|
|
6965
7126
|
};
|
|
6966
|
-
var templateObject_1$
|
|
7127
|
+
var templateObject_1$1x;
|
|
6967
7128
|
|
|
6968
7129
|
var LikeButton = function (_a) {
|
|
6969
7130
|
var _b;
|
|
@@ -6976,10 +7137,10 @@ var LikeButton = function (_a) {
|
|
|
6976
7137
|
return (jsx$1(LikeBtnContainer, __assign$1({ className: className }, containerProps, { children: jsxs$1(IconButton, __assign$1({ onClick: onClick, backgroundColor: background, hasText: !!likes, boxShadow: "0 6px 16px rgba(0, 0, 0, 0.12)" }, { children: [jsx$1(Icon$1, { name: isLiked ? 'actions/like_solid' : 'actions/like', fill: isLiked ? iconFill.solid : (_b = iconFill.regular) !== null && _b !== void 0 ? _b : iconFill.solid, width: "24px", height: "24px" }, void 0), !!likes && jsx$1(LikeCount, __assign$1({ className: "like-count" }, { children: likes }), void 0)] }), isLiked.toString()) }), void 0));
|
|
6977
7138
|
};
|
|
6978
7139
|
|
|
6979
|
-
var RegularPriceTagSpan = newStyled.span(templateObject_1$
|
|
7140
|
+
var RegularPriceTagSpan = newStyled.span(templateObject_1$1w || (templateObject_1$1w = __makeTemplateObject(["\n background-color: #e5e5e5;\n padding: 3px 4px;\n border-radius: 4px;\n gap: 10px;\n align-items: center;\n justify-content: center;\n color: #5a5a5a;\n font-weight: 600;\n font-size: 0.6rem;\n line-height: 1rem;\n text-align: center;\n margin-bottom: 0.5rem;\n"], ["\n background-color: #e5e5e5;\n padding: 3px 4px;\n border-radius: 4px;\n gap: 10px;\n align-items: center;\n justify-content: center;\n color: #5a5a5a;\n font-weight: 600;\n font-size: 0.6rem;\n line-height: 1rem;\n text-align: center;\n margin-bottom: 0.5rem;\n"])));
|
|
6980
7141
|
var ClubPriceTagSpan = newStyled.span(templateObject_2$1a || (templateObject_2$1a = __makeTemplateObject(["\n background-color: #c64844;\n padding: 3px 4px;\n border-radius: 4px;\n gap: 10px;\n align-items: center;\n justify-content: center;\n color: white;\n font-weight: 600;\n font-size: 0.6rem;\n line-height: 1rem;\n text-align: center;\n margin-bottom: 0.5rem;\n"], ["\n background-color: #c64844;\n padding: 3px 4px;\n border-radius: 4px;\n gap: 10px;\n align-items: center;\n justify-content: center;\n color: white;\n font-weight: 600;\n font-size: 0.6rem;\n line-height: 1rem;\n text-align: center;\n margin-bottom: 0.5rem;\n"])));
|
|
6981
|
-
var PriceContainer$1 = newStyled.span(templateObject_3$
|
|
6982
|
-
var PriceContainerV2 = newStyled.span(templateObject_4$
|
|
7142
|
+
var PriceContainer$1 = newStyled.span(templateObject_3$Z || (templateObject_3$Z = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
7143
|
+
var PriceContainerV2 = newStyled.span(templateObject_4$N || (templateObject_4$N = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
6983
7144
|
var PriceWithTagContainer = newStyled.span(templateObject_5$D || (templateObject_5$D = __makeTemplateObject(["\n display: flex;\n gap: 8px;\n"], ["\n display: flex;\n gap: 8px;\n"])));
|
|
6984
7145
|
var RegularPriceTag = function () {
|
|
6985
7146
|
return jsx$1(RegularPriceTagSpan, { children: "REGULAR PRICE" }, void 0);
|
|
@@ -7034,120 +7195,7 @@ var PriceLabelV4 = function (_a) {
|
|
|
7034
7195
|
? finalPriceArray[0]
|
|
7035
7196
|
: (_b = "".concat(productFinalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1], "."] }), void 0), jsx$1(Price, __assign$1({ finalPriceStyledSmall: true, style: { marginTop: '-6px', color: '#c64844' } }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }, void 0), jsx$1(ClubPriceTag, { label: theme.label.member }, void 0)] }, void 0)] }, void 0)), discount && (jsx$1(TagContainer, __assign$1({ size: size }, { children: jsx$1(DiscountTag$3, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
|
|
7036
7197
|
};
|
|
7037
|
-
var templateObject_1$
|
|
7038
|
-
|
|
7039
|
-
var STARTS_NUMBER = 5;
|
|
7040
|
-
|
|
7041
|
-
var Container$12 = newStyled.div(templateObject_1$1y || (templateObject_1$1y = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
7042
|
-
var templateObject_1$1y;
|
|
7043
|
-
|
|
7044
|
-
var StarContainer = newStyled.div(templateObject_1$1x || (templateObject_1$1x = __makeTemplateObject(["\n display: flex;\n margin-right: ", ";\n"], ["\n display: flex;\n margin-right: ", ";\n"])), function (_a) {
|
|
7045
|
-
var marginRight = _a.marginRight;
|
|
7046
|
-
return marginRight;
|
|
7047
|
-
});
|
|
7048
|
-
var StarList = function (_a) {
|
|
7049
|
-
var rating = _a.rating, starsNumber = _a.starsNumber, fill = _a.fill, _b = _a.size, size = _b === void 0 ? ComponentSize.Medium : _b;
|
|
7050
|
-
var theme = useTheme();
|
|
7051
|
-
var iconProps = {
|
|
7052
|
-
fill: fill,
|
|
7053
|
-
width: theme.component.stars.element[size].width,
|
|
7054
|
-
height: theme.component.stars.element[size].height,
|
|
7055
|
-
};
|
|
7056
|
-
return (jsx$1(Container$12, { children: __spreadArray([], new Array(starsNumber), true).map(function (_, index) {
|
|
7057
|
-
return (jsx$1(StarContainer, __assign$1({ "data-testid": "star-container", marginRight: theme.component.stars.element[size].marginRight }, { children: index < Math.floor(rating) ? (jsx$1(Icon.PDP.Star, __assign$1({}, iconProps), void 0)) : index === Math.floor(rating) && rating % 1 != 0 ? (jsx$1(Icon.PDP.StarHalf, __assign$1({}, iconProps), void 0)) : (jsx$1(Icon.PDP.StarEmpty, __assign$1({}, iconProps), void 0)) }), "star-container-".concat(index)));
|
|
7058
|
-
}) }, void 0));
|
|
7059
|
-
};
|
|
7060
|
-
var templateObject_1$1x;
|
|
7061
|
-
|
|
7062
|
-
/* base styles & size variants */
|
|
7063
|
-
var LabelStyles = {
|
|
7064
|
-
baseStyles: function (theme) {
|
|
7065
|
-
return css({
|
|
7066
|
-
margin: '0',
|
|
7067
|
-
display: 'flex',
|
|
7068
|
-
color: theme.colors.pallete.secondary.color,
|
|
7069
|
-
fontWeight: theme.component.rating.fontWeight,
|
|
7070
|
-
});
|
|
7071
|
-
},
|
|
7072
|
-
xxsmall: function (theme) {
|
|
7073
|
-
return css({
|
|
7074
|
-
fontSize: theme.component.rating.size.xxsmall.fontSize,
|
|
7075
|
-
lineHeight: theme.component.rating.size.xxsmall.lineHeight,
|
|
7076
|
-
marginLeft: '0.1rem',
|
|
7077
|
-
});
|
|
7078
|
-
},
|
|
7079
|
-
xsmall: function (theme) {
|
|
7080
|
-
return css({
|
|
7081
|
-
fontSize: theme.component.rating.size.xsmall.fontSize,
|
|
7082
|
-
lineHeight: theme.component.rating.size.xsmall.lineHeight,
|
|
7083
|
-
marginLeft: '0.172rem',
|
|
7084
|
-
});
|
|
7085
|
-
},
|
|
7086
|
-
small: function (theme) {
|
|
7087
|
-
return css({
|
|
7088
|
-
fontSize: theme.component.rating.size.small.fontSize,
|
|
7089
|
-
lineHeight: theme.component.rating.size.small.lineHeight,
|
|
7090
|
-
marginLeft: '0.313rem',
|
|
7091
|
-
});
|
|
7092
|
-
},
|
|
7093
|
-
medium: function (theme) {
|
|
7094
|
-
return css({
|
|
7095
|
-
fontSize: theme.component.rating.size.medium.fontSize,
|
|
7096
|
-
lineHeight: theme.component.rating.size.medium.lineHeight,
|
|
7097
|
-
marginLeft: '0.438rem',
|
|
7098
|
-
});
|
|
7099
|
-
},
|
|
7100
|
-
large: function (theme) {
|
|
7101
|
-
return css({
|
|
7102
|
-
fontSize: theme.component.rating.size.large.fontSize,
|
|
7103
|
-
lineHeight: theme.component.rating.size.large.lineHeight,
|
|
7104
|
-
marginLeft: '0.563rem',
|
|
7105
|
-
});
|
|
7106
|
-
},
|
|
7107
|
-
};
|
|
7108
|
-
var Container$11 = newStyled.a(templateObject_1$1w || (templateObject_1$1w = __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"])));
|
|
7109
|
-
var CustomLabel = newStyled.div(function (_a) {
|
|
7110
|
-
var theme = _a.theme, size = _a.size, wrapWithParenthesis = _a.wrapWithParenthesis, underline = _a.underline;
|
|
7111
|
-
return [
|
|
7112
|
-
LabelStyles.baseStyles(theme),
|
|
7113
|
-
LabelStyles[size](theme),
|
|
7114
|
-
{
|
|
7115
|
-
':before': {
|
|
7116
|
-
content: wrapWithParenthesis ? '"("' : '""',
|
|
7117
|
-
},
|
|
7118
|
-
':after': {
|
|
7119
|
-
content: wrapWithParenthesis ? '")"' : '""',
|
|
7120
|
-
},
|
|
7121
|
-
},
|
|
7122
|
-
css({
|
|
7123
|
-
textDecoration: underline ? 'underline' : 'none',
|
|
7124
|
-
}),
|
|
7125
|
-
];
|
|
7126
|
-
});
|
|
7127
|
-
var RatingLabel = newStyled.span(templateObject_2$19 || (templateObject_2$19 = __makeTemplateObject(["\n font-size: 16px;\n font-weight: 600;\n color: ", ";\n padding-right: 6px;\n text-decoration: none;\n"], ["\n font-size: 16px;\n font-weight: 600;\n color: ", ";\n padding-right: 6px;\n text-decoration: none;\n"])), function (props) { return props.color; });
|
|
7128
|
-
var templateObject_1$1w, templateObject_2$19;
|
|
7129
|
-
|
|
7130
|
-
var Rating = function (_a) {
|
|
7131
|
-
var _b = _a.size, size = _b === void 0 ? ComponentSize.Medium : _b, reviews = _a.reviews, reviewsText = _a.reviewsText, rating = _a.rating, _c = _a.showRatingText, showRatingText = _c === void 0 ? false : _c, _d = _a.wrapWithParenthesis, wrapWithParenthesis = _d === void 0 ? false : _d, _e = _a.underline, underline = _e === void 0 ? false : _e, reviewsContainerId = _a.reviewsContainerId;
|
|
7132
|
-
function handleAnchorClick(e) {
|
|
7133
|
-
var _a;
|
|
7134
|
-
if (e.cancelable) {
|
|
7135
|
-
e.preventDefault();
|
|
7136
|
-
}
|
|
7137
|
-
if (reviewsContainerId) {
|
|
7138
|
-
(_a = document.querySelector(reviewsContainerId)) === null || _a === void 0 ? void 0 : _a.scrollIntoView({
|
|
7139
|
-
behavior: 'smooth',
|
|
7140
|
-
});
|
|
7141
|
-
}
|
|
7142
|
-
}
|
|
7143
|
-
var theme = useTheme();
|
|
7144
|
-
var containerAttributes = reviewsContainerId
|
|
7145
|
-
? {
|
|
7146
|
-
href: reviewsContainerId,
|
|
7147
|
-
}
|
|
7148
|
-
: {};
|
|
7149
|
-
return (jsxs$1(Container$11, __assign$1({ as: reviewsContainerId ? 'a' : 'div' }, containerAttributes, { "data-testid": "Container", onClick: handleAnchorClick }, { children: [showRatingText && (jsx$1(RatingLabel, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "RatingLabel" }, { children: rating }), void 0)), jsx$1(StarList, { rating: rating, size: size, starsNumber: STARTS_NUMBER, fill: theme.component.stars.element.color }, void 0), jsxs$1(CustomLabel, __assign$1({ theme: theme, size: size, wrapWithParenthesis: wrapWithParenthesis, underline: underline, "data-testid": "CustomLabel" }, { children: [reviews ? reviews : '', " ", reviewsText ? reviewsText : ''] }), void 0)] }), void 0));
|
|
7150
|
-
};
|
|
7198
|
+
var templateObject_1$1w, templateObject_2$1a, templateObject_3$Z, templateObject_4$N, templateObject_5$D;
|
|
7151
7199
|
|
|
7152
7200
|
var STYLES_BY_THEME = {
|
|
7153
7201
|
TheSpaDr: {
|
|
@@ -7221,9 +7269,9 @@ var ImageContainer$6 = newStyled.div(function (_a) {
|
|
|
7221
7269
|
});
|
|
7222
7270
|
});
|
|
7223
7271
|
var ImageHoverContainer$3 = newStyled.img(templateObject_1$1v || (templateObject_1$1v = __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"])));
|
|
7224
|
-
var Container$10 = newStyled.a(templateObject_2$
|
|
7225
|
-
var ProdCardContainer$4 = newStyled.div(templateObject_3$
|
|
7226
|
-
var Title$
|
|
7272
|
+
var Container$10 = 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 &:hover .like-btn-container:hover + .hover__image {\n opacity: 0;\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\n &:hover .like-btn-container:hover + .hover__image {\n opacity: 0;\n }\n"])));
|
|
7273
|
+
var ProdCardContainer$4 = newStyled.div(templateObject_3$Y || (templateObject_3$Y = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: min-content;\n text-decoration: none;\n position: relative;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: min-content;\n text-decoration: none;\n position: relative;\n"])));
|
|
7274
|
+
var Title$7 = newStyled.h2(templateObject_4$M || (templateObject_4$M = __makeTemplateObject(["\n font-size: ", ";\n font-weight: ", ";\n line-height: 1.375rem;\n min-height: 2.75rem;\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 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) {
|
|
7227
7275
|
var theme = _a.theme;
|
|
7228
7276
|
return STYLES_BY_THEME[theme.name].title.fontSize;
|
|
7229
7277
|
}, function (_a) {
|
|
@@ -7278,13 +7326,13 @@ var TopTagContainer$9 = newStyled.div(templateObject_5$C || (templateObject_5$C
|
|
|
7278
7326
|
var style = _a.style;
|
|
7279
7327
|
return style.width;
|
|
7280
7328
|
});
|
|
7281
|
-
var BottomTagContainer$9 = newStyled.div(templateObject_6$
|
|
7329
|
+
var BottomTagContainer$9 = newStyled.div(templateObject_6$x || (templateObject_6$x = __makeTemplateObject(["\n position: absolute;\n bottom: 10%;\n left: 0;\n width: ", ";\n z-index: 1;\n"], ["\n position: absolute;\n bottom: 10%;\n left: 0;\n width: ", ";\n z-index: 1;\n"])), function (_a) {
|
|
7282
7330
|
var style = _a.style;
|
|
7283
7331
|
return style.width;
|
|
7284
7332
|
});
|
|
7285
|
-
var MarginTopContainer$1 = newStyled.div(templateObject_7$
|
|
7286
|
-
var ClubOfferPriceLabelWrapper = newStyled.div(templateObject_8$
|
|
7287
|
-
var templateObject_1$1v, templateObject_2$
|
|
7333
|
+
var MarginTopContainer$1 = newStyled.div(templateObject_7$r || (templateObject_7$r = __makeTemplateObject(["\n margin-top: 8px;\n"], ["\n margin-top: 8px;\n"])));
|
|
7334
|
+
var ClubOfferPriceLabelWrapper = newStyled.div(templateObject_8$k || (templateObject_8$k = __makeTemplateObject(["\n margin-top: 2px;\n margin-bottom: 2px;\n"], ["\n margin-top: 2px;\n margin-bottom: 2px;\n"])));
|
|
7335
|
+
var templateObject_1$1v, templateObject_2$19, templateObject_3$Y, templateObject_4$M, templateObject_5$C, templateObject_6$x, templateObject_7$r, templateObject_8$k;
|
|
7288
7336
|
|
|
7289
7337
|
var ProductItemMobile = function (_a) {
|
|
7290
7338
|
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
|
|
@@ -7381,7 +7429,7 @@ var ProductItemMobile = function (_a) {
|
|
|
7381
7429
|
active: (_f = (_e = (_d = likeBtn.colors) === null || _d === void 0 ? void 0 : _d.background) === null || _e === void 0 ? void 0 : _e.active) !== null && _f !== void 0 ? _f : theme.colors.shades.white.color,
|
|
7382
7430
|
hover: (_m = (_j = (_h = (_g = likeBtn.colors) === null || _g === void 0 ? void 0 : _g.background) === null || _h === void 0 ? void 0 : _h.hover) !== null && _j !== void 0 ? _j : (_l = (_k = likeBtn.colors) === null || _k === void 0 ? void 0 : _k.background) === null || _l === void 0 ? void 0 : _l.active) !== null && _m !== void 0 ? _m : theme.colors.shades.white.color,
|
|
7383
7431
|
},
|
|
7384
|
-
} }, void 0)), !!topTag || !!bottomTag ? (jsxs(ImageContainer$6, __assign$1({ width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height, "data-testid": "tags-image-container" }, { children: [jsx(Image$3, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, width: hasDefaultSize ? styles === null || styles === void 0 ? void 0 : styles.width : '100%', height: hasDefaultSize ? styles === null || styles === void 0 ? void 0 : styles.height : '100%', loading: isOnViewport ? 'eager' : 'lazy', decoding: isOnViewport ? 'sync' : 'async', borderRadius: STYLES_BY_THEME[theme.name].image.borderRadius }, void 0), jsx(TopTagContainer$9, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: topTag }), void 0), jsx(BottomTagContainer$9, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: bottomTag }), void 0)] }), void 0)) : (jsx(Image$3, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height, loading: isOnViewport ? 'eager' : 'lazy', decoding: isOnViewport ? 'sync' : 'async', borderRadius: STYLES_BY_THEME[theme.name].image.borderRadius }, void 0)), imageHover ? (jsx(ImageHoverContainer$3, { className: "hover__image", src: imageHover.src, srcSet: getSrcSet(imageHover.src, 180, 360, 720, 960), loading: "lazy", decoding: "async", alt: imageHover.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)) : null] }), void 0), colorPicker.display && colorPicker.position === 'top' && (jsxs(Fragment, { children: [jsx(Spacing, { size: space }, void 0), colorPicker.component] }, void 0)), ratingOnTop && (jsxs(Fragment, { children: [jsx(Spacing, { size: space }, void 0), jsx(Spacing, { size: space }, void 0), jsx(RatingDisplay, {}, void 0)] }, void 0)), jsxs(Container$10, __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$
|
|
7432
|
+
} }, void 0)), !!topTag || !!bottomTag ? (jsxs(ImageContainer$6, __assign$1({ width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height, "data-testid": "tags-image-container" }, { children: [jsx(Image$3, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, width: hasDefaultSize ? styles === null || styles === void 0 ? void 0 : styles.width : '100%', height: hasDefaultSize ? styles === null || styles === void 0 ? void 0 : styles.height : '100%', loading: isOnViewport ? 'eager' : 'lazy', decoding: isOnViewport ? 'sync' : 'async', borderRadius: STYLES_BY_THEME[theme.name].image.borderRadius }, void 0), jsx(TopTagContainer$9, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: topTag }), void 0), jsx(BottomTagContainer$9, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: bottomTag }), void 0)] }), void 0)) : (jsx(Image$3, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height, loading: isOnViewport ? 'eager' : 'lazy', decoding: isOnViewport ? 'sync' : 'async', borderRadius: STYLES_BY_THEME[theme.name].image.borderRadius }, void 0)), imageHover ? (jsx(ImageHoverContainer$3, { className: "hover__image", src: imageHover.src, srcSet: getSrcSet(imageHover.src, 180, 360, 720, 960), loading: "lazy", decoding: "async", alt: imageHover.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)) : null] }), void 0), colorPicker.display && colorPicker.position === 'top' && (jsxs(Fragment, { children: [jsx(Spacing, { size: space }, void 0), colorPicker.component] }, void 0)), ratingOnTop && (jsxs(Fragment, { children: [jsx(Spacing, { size: space }, void 0), jsx(Spacing, { size: space }, void 0), jsx(RatingDisplay, {}, void 0)] }, void 0)), jsxs(Container$10, __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, "data-testid": "product-card-title" }, { 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 && !ratingOnTop ? (jsxs(Fragment, { children: [jsx(RatingDisplay, {}, void 0), jsx(Spacing, { size: space }, void 0), jsxs(MarginTopContainer$1, __assign$1({ style: { marginTop: (clubOffer === null || clubOffer === void 0 ? void 0 : clubOffer.isClubOffer) ? 0 : 8 } }, { children: [priceLoading ? jsx(SkeletonBox, { height: "20px", width: "140px" }, void 0) : PriceLabelDisplay(), (clubOffer === null || clubOffer === void 0 ? void 0 : clubOffer.isClubOffer) && PriceLabelDisplay(5)] }), void 0)] }, void 0)) : (jsxs(Fragment, { children: [priceLoading ? (jsx(SkeletonBox, { height: "20px", width: "140px" }, void 0)) : (jsxs(Fragment, { children: [!(clubOffer === null || clubOffer === void 0 ? void 0 : clubOffer.isClubMember) && PriceLabelDisplay(), (clubOffer === null || clubOffer === void 0 ? void 0 : clubOffer.isClubOffer) && PriceLabelDisplay(5), jsx(BuyNowPayLater, { displayBNPL: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.displayBNPL, installments: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.installments) || 0, installmentPrice: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.installmentPrice) || '', iconFolder: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconFolder, iconName: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconName) || '', showLogo: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.showLogo, iconColor: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconColor, fontSize: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.fontSize }, void 0)] }, void 0)), showClubPriceLabel && jsx(ClubPriceLabel, { clubPrice: clubPrice }, void 0), discountTagLoading ? (jsx(SkeletonBox, { height: "22px", width: "75px" }, void 0)) : (showDiscountPercentageTag && (jsx(TagContainer, __assign$1({ size: ComponentSize.Small }, { children: discountTag && (jsx(DiscountTag$3, __assign$1({}, discountTag, { size: ComponentSize.Medium, style: {
|
|
7385
7433
|
letterSpacing: '-0.05rem',
|
|
7386
7434
|
} }), void 0)) }), void 0))), jsx(Spacing, { size: space }, void 0), !ratingOnTop && jsx(RatingDisplay, {}, void 0)] }, void 0)), !!onClickBottomButton && (jsxs(Fragment, { children: [jsx(Spacing, { size: space }, void 0), jsx(Spacing, { size: space }, void 0), jsxs(IconButton, __assign$1({ size: ComponentSize.Small, width: "100%", onClick: function (e) {
|
|
7387
7435
|
e.preventDefault();
|
|
@@ -7402,9 +7450,9 @@ var ImageContainer$5 = newStyled.div(function (_a) {
|
|
|
7402
7450
|
});
|
|
7403
7451
|
});
|
|
7404
7452
|
var ImageHoverContainer$2 = newStyled.img(templateObject_1$1u || (templateObject_1$1u = __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; });
|
|
7405
|
-
var Container$$ = newStyled.a(templateObject_2$
|
|
7406
|
-
var ProdCardContainer$3 = newStyled.div(templateObject_3$
|
|
7407
|
-
var Title$
|
|
7453
|
+
var Container$$ = newStyled.a(templateObject_2$18 || (templateObject_2$18 = __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"])));
|
|
7454
|
+
var ProdCardContainer$3 = newStyled.div(templateObject_3$X || (templateObject_3$X = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: min-content;\n text-decoration: none;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: min-content;\n text-decoration: none;\n"])));
|
|
7455
|
+
var Title$6 = newStyled.p(templateObject_4$L || (templateObject_4$L = __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; });
|
|
7408
7456
|
var getStylesBySize$a = function (size) {
|
|
7409
7457
|
switch (size) {
|
|
7410
7458
|
case ComponentSize.Medium:
|
|
@@ -7434,12 +7482,12 @@ var TopTagContainer$8 = newStyled.div(templateObject_5$B || (templateObject_5$B
|
|
|
7434
7482
|
var style = _a.style;
|
|
7435
7483
|
return style.width;
|
|
7436
7484
|
});
|
|
7437
|
-
var TopRightTagContainer$3 = newStyled.div(templateObject_6$
|
|
7438
|
-
var BottomTagContainer$8 = newStyled.div(templateObject_7$
|
|
7485
|
+
var TopRightTagContainer$3 = newStyled.div(templateObject_6$w || (templateObject_6$w = __makeTemplateObject(["\n position: absolute;\n right: 0;\n top: 0;\n z-index: 1;\n"], ["\n position: absolute;\n right: 0;\n top: 0;\n z-index: 1;\n"])));
|
|
7486
|
+
var BottomTagContainer$8 = newStyled.div(templateObject_7$q || (templateObject_7$q = __makeTemplateObject(["\n position: absolute;\n bottom: 10%;\n left: 0;\n width: ", ";\n z-index: 1;\n"], ["\n position: absolute;\n bottom: 10%;\n left: 0;\n width: ", ";\n z-index: 1;\n"])), function (_a) {
|
|
7439
7487
|
var style = _a.style;
|
|
7440
7488
|
return style.width;
|
|
7441
7489
|
});
|
|
7442
|
-
var MarginTopContainer = newStyled.div(templateObject_8$
|
|
7490
|
+
var MarginTopContainer = newStyled.div(templateObject_8$j || (templateObject_8$j = __makeTemplateObject(["\n margin-top: 8px;\n"], ["\n margin-top: 8px;\n"])));
|
|
7443
7491
|
var ProductItemTK = function (_a) {
|
|
7444
7492
|
var title = _a.title, titleStyle = _a.titleStyle, _b = _a.hasSpacing, hasSpacing = _b === void 0 ? true : _b, textContainerGap = _a.textContainerGap, customSizeRating = _a.customSizeRating, image = _a.image, ImageBorderRadius = _a.ImageBorderRadius, imageHover = _a.imageHover, price = _a.price, rating = _a.rating, size = _a.size, _c = _a.alignName, alignName = _c === void 0 ? 'center' : _c, url = _a.url, className = _a.className, topTag = _a.topTag, topRightTag = _a.topRightTag, bottomTag = _a.bottomTag, onClick = _a.onClick, _d = _a.priceDisplayType, priceDisplayType = _d === void 0 ? 'default' : _d, originalPriceStyled = _a.originalPriceStyled, priceAtBottom = _a.priceAtBottom, priceLoading = _a.priceLoading, _e = _a.noFollow, noFollow = _e === void 0 ? false : _e, _f = _a.colorPicker, colorPicker = _f === void 0 ? {
|
|
7445
7493
|
display: false,
|
|
@@ -7488,9 +7536,9 @@ var ProductItemTK = function (_a) {
|
|
|
7488
7536
|
jsx(Text$7, __assign$1({ variant: titleStyle.variant, weight: titleStyle.weight, size: titleStyle.size, style: {
|
|
7489
7537
|
textAlign: showClubPriceLabel ? 'left' : alignName,
|
|
7490
7538
|
marginTop: hasSpacing ? undefined : textContainerGap,
|
|
7491
|
-
} }, { children: title }), void 0)) : (jsx(Title$
|
|
7539
|
+
} }, { children: title }), void 0)) : (jsx(Title$6, __assign$1({ theme: theme, align: showClubPriceLabel ? 'left' : alignName }, { children: title }), void 0)), hasSpacing && jsx(Spacing, { size: space }, void 0), colorPicker.display && colorPicker.position === 'middle' && jsx(Fragment, { children: colorPicker.component }, void 0), (hasStrength === null || hasStrength === void 0 ? void 0 : 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: [customSizeRating ? (jsx(Rating, { size: customSizeRating, rating: rating.rating, reviews: rating.reviews, reviewsText: "", wrapWithParenthesis: true }, void 0)) : (jsx(RatingDisplay, {}, void 0)), hasSpacing && jsx(Spacing, { size: space }, void 0), jsx(MarginTopContainer, { children: priceLoading ? jsx(SkeletonBox, { height: "20px", width: "140px" }, void 0) : jsx(PriceLabelDisplay, {}, void 0) }, void 0)] }, void 0)) : (jsxs(Fragment, { children: [priceLoading ? (jsx(SkeletonBox, { height: "20px", width: "140px" }, void 0)) : (jsxs(Fragment, { children: [jsx(PriceLabelDisplay, {}, void 0), 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), hasSpacing && jsx(Spacing, { size: space }, void 0), jsx(RatingDisplay, {}, void 0)] }, void 0))] }), void 0), colorPicker.display && colorPicker.position === 'bottom' && (jsxs(Fragment, { children: [hasSpacing && jsx(Spacing, { size: space }, void 0), colorPicker.component] }, void 0))] }), void 0));
|
|
7492
7540
|
};
|
|
7493
|
-
var templateObject_1$1u, templateObject_2$
|
|
7541
|
+
var templateObject_1$1u, templateObject_2$18, templateObject_3$X, templateObject_4$L, templateObject_5$B, templateObject_6$w, templateObject_7$q, templateObject_8$j;
|
|
7494
7542
|
|
|
7495
7543
|
var Container$_ = newStyled.div(templateObject_1$1t || (templateObject_1$1t = __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"])));
|
|
7496
7544
|
function withProductGrid(ProductItemComponent, data) {
|
|
@@ -7511,9 +7559,9 @@ var Collection = {
|
|
|
7511
7559
|
};
|
|
7512
7560
|
|
|
7513
7561
|
var CustomRadioGroup = newStyled(lt)(templateObject_1$1s || (templateObject_1$1s = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
7514
|
-
newStyled(lt.Label)(templateObject_2$
|
|
7515
|
-
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$
|
|
7516
|
-
var Span = newStyled.span(templateObject_4$
|
|
7562
|
+
newStyled(lt.Label)(templateObject_2$17 || (templateObject_2$17 = __makeTemplateObject(["\n font-size: 0.88rem;\n"], ["\n font-size: 0.88rem;\n"])));
|
|
7563
|
+
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$W || (templateObject_3$W = __makeTemplateObject(["\n margin-right: 8px;\n\n svg {\n cursor: pointer;\n }\n"], ["\n margin-right: 8px;\n\n svg {\n cursor: pointer;\n }\n"])));
|
|
7564
|
+
var Span = newStyled.span(templateObject_4$K || (templateObject_4$K = __makeTemplateObject(["\n font-weight: 600;\n"], ["\n font-weight: 600;\n"])));
|
|
7517
7565
|
var OptionsContainer = newStyled.div(templateObject_5$A || (templateObject_5$A = __makeTemplateObject(["\n display: flex;\n margin-top: 0.63rem;\n flex-wrap: wrap;\n"], ["\n display: flex;\n margin-top: 0.63rem;\n flex-wrap: wrap;\n"])));
|
|
7518
7566
|
var Label$5 = function (_a) {
|
|
7519
7567
|
var label = _a.label, values = _a.values;
|
|
@@ -7532,7 +7580,7 @@ var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
|
|
|
7532
7580
|
Option: Option,
|
|
7533
7581
|
OptionsContainer: OptionsContainer,
|
|
7534
7582
|
});
|
|
7535
|
-
var templateObject_1$1s, templateObject_2$
|
|
7583
|
+
var templateObject_1$1s, templateObject_2$17, templateObject_3$W, templateObject_4$K, templateObject_5$A;
|
|
7536
7584
|
|
|
7537
7585
|
var OneColorSelector = function (_a) {
|
|
7538
7586
|
var color = _a.color, selected = _a.selected, testId = _a.testId, noStock = _a.noStock, _b = _a.showCross, showCross = _b === void 0 ? false : _b;
|
|
@@ -7580,14 +7628,14 @@ var Container$Z = newStyled.div(templateObject_1$1r || (templateObject_1$1r = __
|
|
|
7580
7628
|
var noStock = _a.noStock;
|
|
7581
7629
|
return (noStock ? '0.4' : '1');
|
|
7582
7630
|
});
|
|
7583
|
-
var Image$2 = newStyled.img(templateObject_2$
|
|
7631
|
+
var Image$2 = newStyled.img(templateObject_2$16 || (templateObject_2$16 = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n"], ["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n"])));
|
|
7584
7632
|
var PatternSelector = function (_a) {
|
|
7585
7633
|
var url = _a.url, selected = _a.selected, testId = _a.testId, noStock = _a.noStock;
|
|
7586
7634
|
var theme = useTheme();
|
|
7587
7635
|
var outerBorder = selected ? theme.colors.shades['550'].color : 'transparent';
|
|
7588
7636
|
return (jsx$1(Container$Z, __assign$1({ "data-testid": testId, borderColor: outerBorder, noStock: noStock }, { children: jsx$1(Image$2, { src: url, alt: "pattern" }, void 0) }), void 0));
|
|
7589
7637
|
};
|
|
7590
|
-
var templateObject_1$1r, templateObject_2$
|
|
7638
|
+
var templateObject_1$1r, templateObject_2$16;
|
|
7591
7639
|
|
|
7592
7640
|
var renderOptions$1 = function (options, showCross) {
|
|
7593
7641
|
if (showCross === void 0) { showCross = false; }
|
|
@@ -7657,20 +7705,20 @@ var MultiColorPicker = function (_a) {
|
|
|
7657
7705
|
};
|
|
7658
7706
|
|
|
7659
7707
|
var Wrapper$5 = newStyled.div(templateObject_1$1p || (templateObject_1$1p = __makeTemplateObject(["\n display: flex;\n align-items: center;\n padding: 0.625rem 1.25rem;\n background-color: ", ";\n width: 36.875rem;\n max-width: 100%;\n border-radius: 0.5rem;\n\n img {\n margin-right: ", ";\n }\n"], ["\n display: flex;\n align-items: center;\n padding: 0.625rem 1.25rem;\n background-color: ", ";\n width: 36.875rem;\n max-width: 100%;\n border-radius: 0.5rem;\n\n img {\n margin-right: ", ";\n }\n"])), function (props) { return props.backgroundColor; }, function (props) { return (props.rightToLeft ? '0' : '1.25rem'); });
|
|
7660
|
-
var Col$1 = newStyled.div(templateObject_2$
|
|
7661
|
-
var Row$2 = newStyled.div(templateObject_3$
|
|
7708
|
+
var Col$1 = newStyled.div(templateObject_2$15 || (templateObject_2$15 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
7709
|
+
var Row$2 = newStyled.div(templateObject_3$V || (templateObject_3$V = __makeTemplateObject(["\n display: flex;\n align-items: center;\n width: 100%;\n margin-left: 10px;\n\n ", ";\n"], ["\n display: flex;\n align-items: center;\n width: 100%;\n margin-left: 10px;\n\n ", ";\n"])), function (props) {
|
|
7662
7710
|
return props.rightToLeft &&
|
|
7663
7711
|
"\n flex-direction: row-reverse;\n justify-content: space-between;\n ";
|
|
7664
7712
|
});
|
|
7665
|
-
var H5 = newStyled.h5(templateObject_4$
|
|
7713
|
+
var H5 = newStyled.h5(templateObject_4$J || (templateObject_4$J = __makeTemplateObject(["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 500;\n margin-bottom: 0.125rem;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 500;\n margin-bottom: 0.125rem;\n margin: 0;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
7666
7714
|
var H3 = newStyled.h3(templateObject_5$z || (templateObject_5$z = __makeTemplateObject(["\n font-size: 1.125rem;\n line-height: 1.75rem;\n font-weight: 700;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 1.125rem;\n line-height: 1.75rem;\n font-weight: 700;\n margin: 0;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
7667
|
-
var FreeShipping = newStyled.span(templateObject_6$
|
|
7715
|
+
var FreeShipping = newStyled.span(templateObject_6$v || (templateObject_6$v = __makeTemplateObject(["\n font-weight: 600;\n color: ", ";\n"], ["\n font-weight: 600;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
7668
7716
|
var CrossSellCheckbox = function (_a) {
|
|
7669
7717
|
var imageURL = _a.imageURL, title = _a.title, description = _a.description, freeShippingText = _a.freeShippingText, rightToLeft = _a.rightToLeft, onChange = _a.onChange;
|
|
7670
7718
|
var theme = useTheme();
|
|
7671
7719
|
return (jsxs$1(Wrapper$5, __assign$1({ backgroundColor: theme.colors.shades['10'].color, rightToLeft: Boolean(rightToLeft) }, { children: [jsx$1(Checkbox, { text: "", id: "checkbox", onChange: onChange, size: ComponentSize.Small, variant: "secondary" }, void 0), jsxs$1(Row$2, __assign$1({ rightToLeft: Boolean(rightToLeft) }, { children: [jsx$1(Image$3, { src: imageURL, alt: "Cross sell image", borderRadius: "0.5rem" }, void 0), jsxs$1(Col$1, { children: [jsx$1(H5, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0), jsxs$1(H3, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: [description, jsxs$1(FreeShipping, __assign$1({ color: theme.colors.shades['700'].color }, { children: [' ', "+ ", freeShippingText] }), void 0)] }), void 0)] }, void 0)] }), void 0)] }), void 0));
|
|
7672
7720
|
};
|
|
7673
|
-
var templateObject_1$1p, templateObject_2$
|
|
7721
|
+
var templateObject_1$1p, templateObject_2$15, templateObject_3$V, templateObject_4$J, templateObject_5$z, templateObject_6$v;
|
|
7674
7722
|
|
|
7675
7723
|
var index$1 = /*#__PURE__*/Object.freeze({
|
|
7676
7724
|
__proto__: null,
|
|
@@ -7721,11 +7769,11 @@ var StyledBaseButton = newStyled(BaseButton)(templateObject_1$1o || (templateObj
|
|
|
7721
7769
|
var theme = _a.theme;
|
|
7722
7770
|
return theme.colors.text.disabled;
|
|
7723
7771
|
});
|
|
7724
|
-
var StyledIcon = newStyled(Icon$1)(templateObject_2$
|
|
7772
|
+
var StyledIcon = newStyled(Icon$1)(templateObject_2$14 || (templateObject_2$14 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
7725
7773
|
var marginLeft = _a.marginLeft, marginRight = _a.marginRight;
|
|
7726
7774
|
return "\n margin-left: ".concat(marginLeft !== null && marginLeft !== void 0 ? marginLeft : '10px', ";\n margin-right: ").concat(marginRight !== null && marginRight !== void 0 ? marginRight : '10px', ";\n ");
|
|
7727
7775
|
});
|
|
7728
|
-
var templateObject_1$1o, templateObject_2$
|
|
7776
|
+
var templateObject_1$1o, templateObject_2$14;
|
|
7729
7777
|
|
|
7730
7778
|
var BaseCTA = function (_a) {
|
|
7731
7779
|
var _b, _c, _d;
|
|
@@ -7817,25 +7865,25 @@ var ButtonSecondaryOutline = function (props) {
|
|
|
7817
7865
|
};
|
|
7818
7866
|
|
|
7819
7867
|
var Container$Y = newStyled.div(templateObject_1$1n || (templateObject_1$1n = __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; });
|
|
7820
|
-
var IconContainer$5 = newStyled.div(templateObject_2$
|
|
7821
|
-
var Text$3 = newStyled.p(templateObject_3$
|
|
7822
|
-
var Details = newStyled.span(templateObject_4$
|
|
7868
|
+
var IconContainer$5 = newStyled.div(templateObject_2$13 || (templateObject_2$13 = __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"])));
|
|
7869
|
+
var Text$3 = newStyled.p(templateObject_3$U || (templateObject_3$U = __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; });
|
|
7870
|
+
var Details = newStyled.span(templateObject_4$I || (templateObject_4$I = __makeTemplateObject(["\n color: ", ";\n font-weight: 700;\n"], ["\n color: ", ";\n font-weight: 700;\n"])), function (props) { return props.color; });
|
|
7823
7871
|
var Note = function (_a) {
|
|
7824
7872
|
var accentColor = _a.accentColor, color = _a.color, backgroundColor = _a.backgroundColor, importantNoteText = _a.importantNoteText, text = _a.text;
|
|
7825
7873
|
var theme = useTheme();
|
|
7826
7874
|
return (jsxs$1(Container$Y, __assign$1({ color: backgroundColor ? backgroundColor : theme.component.deliveryDetails.note.backgroundColor, "data-testid": "Container" }, { children: [jsx$1(IconContainer$5, { children: jsx$1(Icon.Actions.Warning, { fill: accentColor ? accentColor : theme.component.deliveryDetails.note.accentColor }, void 0) }, void 0), jsx$1("div", { children: jsxs$1(Text$3, __assign$1({ color: color ? color : theme.component.deliveryDetails.note.color }, { children: [importantNoteText && (jsxs$1(Details, __assign$1({ color: accentColor ? accentColor : theme.component.deliveryDetails.note.accentColor }, { children: [importantNoteText, ":"] }), void 0)), ' ', text] }), void 0) }, void 0)] }), void 0));
|
|
7827
7875
|
};
|
|
7828
|
-
var templateObject_1$1n, templateObject_2$
|
|
7876
|
+
var templateObject_1$1n, templateObject_2$13, templateObject_3$U, templateObject_4$I;
|
|
7829
7877
|
|
|
7830
|
-
var Title$
|
|
7878
|
+
var Title$5 = newStyled.h1(templateObject_1$1m || (templateObject_1$1m = __makeTemplateObject(["\n color: ", ";\n ", "\n margin: 0;\n text-align: center;\n"], ["\n color: ", ";\n ", "\n margin: 0;\n text-align: center;\n"])), function (props) { return props.color; }, function (_a) {
|
|
7831
7879
|
var theme = _a.theme;
|
|
7832
7880
|
return "\n font-size: ".concat(theme.component.deliveryDetails.title.fontSize, ";\n line-height: ").concat(theme.component.deliveryDetails.title.lineHeight, ";\n font-weight: ").concat(theme.component.deliveryDetails.title.fontWeight, ";\n ");
|
|
7833
7881
|
});
|
|
7834
|
-
var Line = newStyled.div(templateObject_2$
|
|
7835
|
-
var Row$1 = newStyled.div(templateObject_3$
|
|
7882
|
+
var Line = newStyled.div(templateObject_2$12 || (templateObject_2$12 = __makeTemplateObject(["\n width: 100%;\n height: 0.063rem;\n background-color: ", ";\n margin: 1.25rem 0;\n"], ["\n width: 100%;\n height: 0.063rem;\n background-color: ", ";\n margin: 1.25rem 0;\n"])), function (props) { return props.backgroundColor; });
|
|
7883
|
+
var Row$1 = newStyled.div(templateObject_3$T || (templateObject_3$T = __makeTemplateObject(["\n display: flex;\n ", "\n justify-content: space-between;\n align-items: flex-start;\n"], ["\n display: flex;\n ", "\n justify-content: space-between;\n align-items: flex-start;\n"])), mediaQueries({
|
|
7836
7884
|
flexDirection: ['column', 'row'],
|
|
7837
7885
|
}));
|
|
7838
|
-
var Col = newStyled.div(templateObject_4$
|
|
7886
|
+
var Col = newStyled.div(templateObject_4$H || (templateObject_4$H = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n justify-content: center;\n flex: 1;\n ", "\n"], ["\n display: flex;\n flex-direction: column;\n justify-content: center;\n flex: 1;\n ", "\n"])), mediaQueries({
|
|
7839
7887
|
margin: ['0', '0 1.25rem'],
|
|
7840
7888
|
marginBottom: ['1.875rem', '0'],
|
|
7841
7889
|
alignItems: ['center', 'flex-start'],
|
|
@@ -7847,13 +7895,13 @@ var IconContainer$4 = newStyled.div(templateObject_5$y || (templateObject_5$y =
|
|
|
7847
7895
|
marginBottom: ['10px', '0'],
|
|
7848
7896
|
width: ['auto', '1.5rem'],
|
|
7849
7897
|
}));
|
|
7850
|
-
var SectionTitle = newStyled.h1(templateObject_6$
|
|
7898
|
+
var SectionTitle = newStyled.h1(templateObject_6$u || (templateObject_6$u = __makeTemplateObject(["\n ", "\n ", "\n margin: 0;\n text-transform: uppercase;\n"], ["\n ", "\n ", "\n margin: 0;\n text-transform: uppercase;\n"])), mediaQueries({
|
|
7851
7899
|
display: ['block', 'flex'],
|
|
7852
7900
|
}), function (_a) {
|
|
7853
7901
|
var theme = _a.theme;
|
|
7854
7902
|
return "\n color: ".concat(theme.colors.shades['700'].color, ";\n font-size: ").concat(theme.component.deliveryDetails.sectionTitle.fontSize, ";\n line-height: ").concat(theme.component.deliveryDetails.sectionTitle.lineHeight, ";\n font-weight: ").concat(theme.component.deliveryDetails.sectionTitle.fontWeight, ";\n ");
|
|
7855
7903
|
});
|
|
7856
|
-
var SectionDetails = newStyled.p(templateObject_7$
|
|
7904
|
+
var SectionDetails = newStyled.p(templateObject_7$p || (templateObject_7$p = __makeTemplateObject(["\n color: ", ";\n ", "\n margin: 0;\n margin-top: 0.625rem;\n ", ";\n"], ["\n color: ", ";\n ", "\n margin: 0;\n margin-top: 0.625rem;\n ", ";\n"])), function (props) { return props.color; }, function (_a) {
|
|
7857
7905
|
var theme = _a.theme;
|
|
7858
7906
|
return "\n font-size: ".concat(theme.component.deliveryDetails.sectionDetails.fontSize, ";\n line-height: ").concat(theme.component.deliveryDetails.sectionDetails.lineHeight, ";\n font-weight: ").concat(theme.component.deliveryDetails.sectionDetails.fontWeight, ";\n ");
|
|
7859
7907
|
}, function (_a) {
|
|
@@ -7864,13 +7912,13 @@ var SectionDetails = newStyled.p(templateObject_7$q || (templateObject_7$q = __m
|
|
|
7864
7912
|
})
|
|
7865
7913
|
: '';
|
|
7866
7914
|
});
|
|
7867
|
-
var KeepMeUpdated = newStyled.h1(templateObject_8$
|
|
7915
|
+
var KeepMeUpdated = newStyled.h1(templateObject_8$i || (templateObject_8$i = __makeTemplateObject(["\n border: 0.063rem solid ", ";\n color: #0078ff;\n border-radius: 0.313rem;\n padding: 0.45rem;\n font-size: 0.875rem;\n line-height: 1.125rem;\n font-weight: 600;\n margin: 0;\n margin-top: 0.625rem;\n display: flex;\n align-items: center;\n background-color: #fff;\n user-select: none;\n\n svg {\n margin-right: 0.375rem;\n }\n\n &:hover {\n cursor: pointer;\n }\n"], ["\n border: 0.063rem solid ", ";\n color: #0078ff;\n border-radius: 0.313rem;\n padding: 0.45rem;\n font-size: 0.875rem;\n line-height: 1.125rem;\n font-weight: 600;\n margin: 0;\n margin-top: 0.625rem;\n display: flex;\n align-items: center;\n background-color: #fff;\n user-select: none;\n\n svg {\n margin-right: 0.375rem;\n }\n\n &:hover {\n cursor: pointer;\n }\n"])), function (props) { return props.borderColor; });
|
|
7868
7916
|
var DeliveryDetails = function (_a) {
|
|
7869
7917
|
var deliveryDetailsText = _a.deliveryDetailsText, arrivingBy = _a.arrivingBy, shippingTo = _a.shippingTo, instantOrderUpdate = _a.instantOrderUpdate, note = _a.note;
|
|
7870
7918
|
var theme = useTheme();
|
|
7871
|
-
return (jsxs$1("div", __assign$1({ "data-testid": "DeliveryDetails" }, { children: [jsx$1(Title$
|
|
7919
|
+
return (jsxs$1("div", __assign$1({ "data-testid": "DeliveryDetails" }, { children: [jsx$1(Title$5, __assign$1({ color: theme.colors.shades[700].color }, { children: deliveryDetailsText }), void 0), jsx$1(Line, { backgroundColor: theme.colors.shades['200'].color }, void 0), note && jsx$1(Note, __assign$1({}, note), void 0), jsxs$1(Row$1, __assign$1({ "data-testid": "DD-row", theme: theme }, { children: [jsxs$1(Col, __assign$1({ theme: theme }, { children: [jsxs$1(SectionTitle, __assign$1({ theme: theme }, { children: [jsx$1(IconContainer$4, __assign$1({ theme: theme }, { children: jsx$1(Icon.PDP.Clock, { width: 1.5 }, void 0) }), void 0), arrivingBy.title] }), void 0), jsx$1(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: arrivingBy.details }), void 0)] }), void 0), jsxs$1(Col, __assign$1({ theme: theme }, { children: [jsxs$1(SectionTitle, __assign$1({ theme: theme }, { children: [jsx$1(IconContainer$4, __assign$1({ theme: theme }, { children: jsx$1(Icon.Navigation.MapMarker, { width: 1.5 }, void 0) }), void 0), shippingTo.title] }), void 0), jsx$1(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: shippingTo.details }), void 0)] }), void 0), jsxs$1(Col, __assign$1({ theme: theme }, { children: [jsxs$1(SectionTitle, __assign$1({ theme: theme }, { children: [jsx$1(IconContainer$4, __assign$1({ theme: theme }, { children: jsx$1(Icon.Messaging.Messenger, { width: 1.5 }, void 0) }), void 0), instantOrderUpdate.title] }), void 0), jsx$1(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: instantOrderUpdate.details }), void 0), instantOrderUpdate.keepMeUpdated && (jsxs$1(KeepMeUpdated, __assign$1({ onClick: instantOrderUpdate.keepMeUpdated.onClick, borderColor: theme.colors.shades['150'].color }, { children: [jsx$1(Icon.Messaging.Messenger, { width: 1, height: 1, fill: "#0078FF" }, void 0), instantOrderUpdate.keepMeUpdated.title] }), void 0))] }), void 0)] }), void 0)] }), void 0));
|
|
7872
7920
|
};
|
|
7873
|
-
var templateObject_1$1m, templateObject_2$
|
|
7921
|
+
var templateObject_1$1m, templateObject_2$12, templateObject_3$T, templateObject_4$H, templateObject_5$y, templateObject_6$u, templateObject_7$p, templateObject_8$i;
|
|
7874
7922
|
|
|
7875
7923
|
var Backdrop = newStyled.div(templateObject_1$1l || (templateObject_1$1l = __makeTemplateObject(["\n position: fixed;\n z-index: 2;\n left: 0;\n top: ", ";\n width: 100%;\n height: 100%;\n overflow: auto;\n transition: background-color 0.3s ease-out;\n\n ", "\n"], ["\n position: fixed;\n z-index: 2;\n left: 0;\n top: ", ";\n width: 100%;\n height: 100%;\n overflow: auto;\n transition: background-color 0.3s ease-out;\n\n ", "\n"])), function (_a) {
|
|
7876
7924
|
var top = _a.top;
|
|
@@ -7879,7 +7927,7 @@ var Backdrop = newStyled.div(templateObject_1$1l || (templateObject_1$1l = __mak
|
|
|
7879
7927
|
var isOpen = _a.isOpen, backgroundColor = _a.backgroundColor;
|
|
7880
7928
|
return isOpen ? "background-color: ".concat(backgroundColor, ";") : 'transparent';
|
|
7881
7929
|
});
|
|
7882
|
-
var Sidebar = newStyled.div(templateObject_2$
|
|
7930
|
+
var Sidebar = newStyled.div(templateObject_2$11 || (templateObject_2$11 = __makeTemplateObject(["\n height: ", ";\n width: ", ";\n position: fixed;\n z-index: 30;\n ", ": 0;\n top: ", ";\n background-color: ", ";\n overflow-x: hidden;\n transition: transform 0.3s ease-in-out;\n\n ", "\n"], ["\n height: ", ";\n width: ", ";\n position: fixed;\n z-index: 30;\n ", ": 0;\n top: ", ";\n background-color: ", ";\n overflow-x: hidden;\n transition: transform 0.3s ease-in-out;\n\n ", "\n"])), function (_a) {
|
|
7883
7931
|
var height = _a.height;
|
|
7884
7932
|
return height;
|
|
7885
7933
|
}, function (_a) {
|
|
@@ -7926,7 +7974,7 @@ var Drawer = function (_a) {
|
|
|
7926
7974
|
}, [isOpen, onClose, onOpen]);
|
|
7927
7975
|
return isMounted ? (jsxs$1("div", { children: [jsx$1(Backdrop, { backgroundColor: backdropColor, isOpen: isOpenState, top: top, "data-testid": "Drawer-Backdrop", onClick: onClickOutside && onClickOutside }, void 0), jsx$1(Sidebar, __assign$1({ position: position, width: width, height: height, top: top, backgroundColor: backgroundColor, isOpen: isOpenState, "data-testid": "Drawer-Sidebar" }, { children: children }), void 0)] }, void 0)) : null;
|
|
7928
7976
|
};
|
|
7929
|
-
var templateObject_1$1l, templateObject_2$
|
|
7977
|
+
var templateObject_1$1l, templateObject_2$11;
|
|
7930
7978
|
|
|
7931
7979
|
var TooltipArrow = function (_a) {
|
|
7932
7980
|
var height = _a.height, width = _a.width, fill = _a.fill, stroke = _a.stroke;
|
|
@@ -7934,12 +7982,12 @@ var TooltipArrow = function (_a) {
|
|
|
7934
7982
|
};
|
|
7935
7983
|
|
|
7936
7984
|
var List = newStyled.ul(templateObject_1$1k || (templateObject_1$1k = __makeTemplateObject(["\n display: flex;\n margin: 0;\n padding: 0;\n"], ["\n display: flex;\n margin: 0;\n padding: 0;\n"])));
|
|
7937
|
-
var Item$2 = newStyled.li(templateObject_2
|
|
7938
|
-
var DropdownWrapper = newStyled.div(templateObject_3$
|
|
7939
|
-
var ArrowContainer$1 = newStyled.div(templateObject_4$
|
|
7985
|
+
var Item$2 = newStyled.li(templateObject_2$10 || (templateObject_2$10 = __makeTemplateObject(["\n width: 1.25rem;\n list-style: none;\n margin-right: 1.5rem;\n position: relative;\n line-height: 0;\n\n &:last-child {\n margin-right: 0;\n }\n\n &:hover {\n .dropdownWrapper {\n visibility: visible;\n }\n }\n"], ["\n width: 1.25rem;\n list-style: none;\n margin-right: 1.5rem;\n position: relative;\n line-height: 0;\n\n &:last-child {\n margin-right: 0;\n }\n\n &:hover {\n .dropdownWrapper {\n visibility: visible;\n }\n }\n"])));
|
|
7986
|
+
var DropdownWrapper = newStyled.div(templateObject_3$S || (templateObject_3$S = __makeTemplateObject(["\n right: -0.938rem;\n min-width: 9.375rem;\n position: absolute;\n padding-top: 0.625rem;\n margin-top: -0.188rem;\n width: max-content;\n visibility: hidden;\n"], ["\n right: -0.938rem;\n min-width: 9.375rem;\n position: absolute;\n padding-top: 0.625rem;\n margin-top: -0.188rem;\n width: max-content;\n visibility: hidden;\n"])));
|
|
7987
|
+
var ArrowContainer$1 = newStyled.div(templateObject_4$G || (templateObject_4$G = __makeTemplateObject(["\n transform: rotate(180deg);\n display: flex;\n justify-content: flex-start;\n margin-bottom: -0.063rem;\n padding-left: 0.938rem;\n"], ["\n transform: rotate(180deg);\n display: flex;\n justify-content: flex-start;\n margin-bottom: -0.063rem;\n padding-left: 0.938rem;\n"])));
|
|
7940
7988
|
var StyledDropdown = newStyled.ul(templateObject_5$x || (templateObject_5$x = __makeTemplateObject(["\n margin: 0;\n padding: 0;\n border: 0.063rem solid ", ";\n border-radius: 0.5rem;\n display: flex;\n flex-direction: column;\n background-color: #ffffff;\n"], ["\n margin: 0;\n padding: 0;\n border: 0.063rem solid ", ";\n border-radius: 0.5rem;\n display: flex;\n flex-direction: column;\n background-color: #ffffff;\n"])), function (props) { return props.borderColor; });
|
|
7941
|
-
var DropdownItem = newStyled.li(templateObject_6$
|
|
7942
|
-
var templateObject_1$1k, templateObject_2
|
|
7989
|
+
var DropdownItem = newStyled.li(templateObject_6$t || (templateObject_6$t = __makeTemplateObject(["\n list-style: none;\n padding: 0.813rem;\n border-bottom: 0.063rem solid ", ";\n font-size: 0.875rem;\n line-height: 1.125rem;\n font-weight: 400;\n color: ", ";\n cursor: pointer;\n user-select: none;\n\n &:hover {\n background-color: ", ";\n }\n\n &:last-child {\n border-bottom: none;\n border-radius: 0 0 0.5rem 0.5rem;\n }\n\n &:first-of-type {\n border-radius: 0.5rem 0.5rem 0 0;\n }\n\n &:only-child {\n border-radius: 0.5rem;\n }\n"], ["\n list-style: none;\n padding: 0.813rem;\n border-bottom: 0.063rem solid ", ";\n font-size: 0.875rem;\n line-height: 1.125rem;\n font-weight: 400;\n color: ", ";\n cursor: pointer;\n user-select: none;\n\n &:hover {\n background-color: ", ";\n }\n\n &:last-child {\n border-bottom: none;\n border-radius: 0 0 0.5rem 0.5rem;\n }\n\n &:first-of-type {\n border-radius: 0.5rem 0.5rem 0 0;\n }\n\n &:only-child {\n border-radius: 0.5rem;\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.color; }, function (props) { return props.hoverColor; });
|
|
7990
|
+
var templateObject_1$1k, templateObject_2$10, templateObject_3$S, templateObject_4$G, templateObject_5$x, templateObject_6$t;
|
|
7943
7991
|
|
|
7944
7992
|
var DropdownListIcons = function (_a) {
|
|
7945
7993
|
var items = _a.items;
|
|
@@ -7953,12 +8001,12 @@ var Dropdown = function (_a) {
|
|
|
7953
8001
|
};
|
|
7954
8002
|
|
|
7955
8003
|
var DropdownContainer = newStyled.div(templateObject_1$1j || (templateObject_1$1j = __makeTemplateObject(["\n position: relative;\n font-size: 14px;\n line-height: 18px;\n"], ["\n position: relative;\n font-size: 14px;\n line-height: 18px;\n"])));
|
|
7956
|
-
var DropdownLabel = newStyled.div(templateObject_2
|
|
7957
|
-
var SizeLabel = newStyled.span(templateObject_3$
|
|
7958
|
-
var DetailLabel = newStyled.span(templateObject_4$
|
|
8004
|
+
var DropdownLabel = newStyled.div(templateObject_2$$ || (templateObject_2$$ = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n background: #fff;\n border: 1px solid #bbb;\n border-radius: 8px;\n padding: 8px 12px 8px 16px;\n cursor: pointer;\n gap: 16px;\n font-weight: 600;\n color: var(--colors-pallete-secondary-color);\n max-width: 337px;\n height: 36px;\n\n @media (max-width: 767px) {\n max-width: 100%;\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n background: #fff;\n border: 1px solid #bbb;\n border-radius: 8px;\n padding: 8px 12px 8px 16px;\n cursor: pointer;\n gap: 16px;\n font-weight: 600;\n color: var(--colors-pallete-secondary-color);\n max-width: 337px;\n height: 36px;\n\n @media (max-width: 767px) {\n max-width: 100%;\n }\n"])));
|
|
8005
|
+
var SizeLabel = newStyled.span(templateObject_3$R || (templateObject_3$R = __makeTemplateObject(["\n margin-right: 8px;\n"], ["\n margin-right: 8px;\n"])));
|
|
8006
|
+
var DetailLabel = newStyled.span(templateObject_4$F || (templateObject_4$F = __makeTemplateObject(["\n text-align: center;\n flex-grow: 1;\n font-weight: 400;\n color: var(--colors-shades-400-color);\n"], ["\n text-align: center;\n flex-grow: 1;\n font-weight: 400;\n color: var(--colors-shades-400-color);\n"])));
|
|
7959
8007
|
var DropdownOptions = newStyled.div(templateObject_5$w || (templateObject_5$w = __makeTemplateObject(["\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n z-index: 1;\n padding: 0;\n max-width: 337px;\n border: 1px solid var(--colors-pallete-secondary-color);\n border-radius: 8px;\n overflow: hidden;\n\n @media (max-width: 767px) {\n width: 100%;\n max-width: none;\n }\n"], ["\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n z-index: 1;\n padding: 0;\n max-width: 337px;\n border: 1px solid var(--colors-pallete-secondary-color);\n border-radius: 8px;\n overflow: hidden;\n\n @media (max-width: 767px) {\n width: 100%;\n max-width: none;\n }\n"])));
|
|
7960
|
-
var DropdownOption = newStyled.div(templateObject_6$
|
|
7961
|
-
var templateObject_1$1j, templateObject_2
|
|
8008
|
+
var DropdownOption = newStyled.div(templateObject_6$s || (templateObject_6$s = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 12px 16px 10px;\n height: 40px;\n cursor: pointer;\n\n &:hover {\n background-color: rgb(247, 247, 247);\n border-radius: 8px;\n }\n\n &[aria-selected='true'] {\n background-color: rgb(247, 247, 247);\n border-radius: 8px;\n }\n\n & > span:first-of-type {\n margin-right: auto;\n font-weight: 600;\n }\n\n & > span:last-of-type {\n text-align: center;\n flex-grow: 1;\n font-weight: 400;\n color: var(--colors-shades-400-color);\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 12px 16px 10px;\n height: 40px;\n cursor: pointer;\n\n &:hover {\n background-color: rgb(247, 247, 247);\n border-radius: 8px;\n }\n\n &[aria-selected='true'] {\n background-color: rgb(247, 247, 247);\n border-radius: 8px;\n }\n\n & > span:first-of-type {\n margin-right: auto;\n font-weight: 600;\n }\n\n & > span:last-of-type {\n text-align: center;\n flex-grow: 1;\n font-weight: 400;\n color: var(--colors-shades-400-color);\n }\n"])));
|
|
8009
|
+
var templateObject_1$1j, templateObject_2$$, templateObject_3$R, templateObject_4$F, templateObject_5$w, templateObject_6$s;
|
|
7962
8010
|
|
|
7963
8011
|
var SizeDropdown = function (_a) {
|
|
7964
8012
|
var options = _a.options, defaultLabel = _a.defaultLabel, onOptionSelect = _a.onOptionSelect;
|
|
@@ -7982,13 +8030,13 @@ var SizeDropdown = function (_a) {
|
|
|
7982
8030
|
};
|
|
7983
8031
|
|
|
7984
8032
|
var DialogDropdownWrapper = newStyled.div(templateObject_1$1i || (templateObject_1$1i = __makeTemplateObject(["\n position: relative;\n display: none;\n ::before,\n ::after {\n content: '';\n position: absolute;\n border: 11px solid transparent;\n margin-left: -10px;\n border-bottom-color: #e9e9e9;\n top: calc(", " - 5px);\n right: calc(", " + 21px);\n z-index: 50 !important;\n }\n ::after {\n border-bottom-color: #fff;\n top: calc(", " - 4px);\n right: calc(", " + 21px);\n z-index: 50 !important;\n }\n"], ["\n position: relative;\n display: none;\n ::before,\n ::after {\n content: '';\n position: absolute;\n border: 11px solid transparent;\n margin-left: -10px;\n border-bottom-color: #e9e9e9;\n top: calc(", " - 5px);\n right: calc(", " + 21px);\n z-index: 50 !important;\n }\n ::after {\n border-bottom-color: #fff;\n top: calc(", " - 4px);\n right: calc(", " + 21px);\n z-index: 50 !important;\n }\n"])), function (props) { return props.top; }, function (props) { return props.right; }, function (props) { return props.top; }, function (props) { return props.right; });
|
|
7985
|
-
var DialogDropdownWrapper2 = newStyled.div(templateObject_2$
|
|
7986
|
-
var DialogDropdownListContainer = newStyled.ul(templateObject_3$
|
|
8033
|
+
var DialogDropdownWrapper2 = newStyled.div(templateObject_2$_ || (templateObject_2$_ = __makeTemplateObject(["\n position: relative;\n display: none;\n ::before,\n ::after {\n content: '';\n position: absolute;\n border: 11px solid transparent;\n margin-left: -10px;\n border-bottom-color: #292929;\n top: calc(", " - 5px);\n right: calc(", " + 21px);\n z-index: 50 !important;\n }\n ::after {\n border-bottom-color: '#292929';\n top: calc(", " - 4px);\n right: calc(", " + 21px);\n z-index: 50 !important;\n }\n"], ["\n position: relative;\n display: none;\n ::before,\n ::after {\n content: '';\n position: absolute;\n border: 11px solid transparent;\n margin-left: -10px;\n border-bottom-color: #292929;\n top: calc(", " - 5px);\n right: calc(", " + 21px);\n z-index: 50 !important;\n }\n ::after {\n border-bottom-color: '#292929';\n top: calc(", " - 4px);\n right: calc(", " + 21px);\n z-index: 50 !important;\n }\n"])), function (props) { return props.top; }, function (props) { return props.right; }, function (props) { return props.top; }, function (props) { return props.right; });
|
|
8034
|
+
var DialogDropdownListContainer = newStyled.ul(templateObject_3$Q || (templateObject_3$Q = __makeTemplateObject(["\n position: absolute;\n list-style: none;\n width: max-content;\n min-width: 100px;\n background: #fff;\n border: 1px solid #e9e9e9;\n border-radius: ", ";\n top: ", ";\n right: ", ";\n z-index: 50 !important;\n margin-bottom: 1rem;\n\n font-family: inherit;\n font-size: 100%;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n margin: 0;\n padding: 0;\n vertical-align: inherit;\n overflow: hidden;\n"], ["\n position: absolute;\n list-style: none;\n width: max-content;\n min-width: 100px;\n background: #fff;\n border: 1px solid #e9e9e9;\n border-radius: ", ";\n top: ", ";\n right: ", ";\n z-index: 50 !important;\n margin-bottom: 1rem;\n\n font-family: inherit;\n font-size: 100%;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n margin: 0;\n padding: 0;\n vertical-align: inherit;\n overflow: hidden;\n"])), function (props) { return props.borderRadius; }, function (props) {
|
|
7987
8035
|
return props.containerPosTop ? "calc(".concat(props.containerPosTop, ")") : "calc(".concat(props.top, " + 15px)");
|
|
7988
8036
|
}, function (props) {
|
|
7989
8037
|
return props.containerPosRight ? "calc(".concat(props.containerPosRight, ")") : "calc(".concat(props.right, " - 23px)");
|
|
7990
8038
|
});
|
|
7991
|
-
var DialogDropdownListItem = newStyled.li(templateObject_4$
|
|
8039
|
+
var DialogDropdownListItem = newStyled.li(templateObject_4$E || (templateObject_4$E = __makeTemplateObject(["\n border-bottom: 1px solid #e9e9e9;\n margin: 0;\n padding: 0;\n font-style: normal;\n font-weight: 400;\n font-size: 14px;\n line-height: 17px;\n color: var(--colors-shades-550-color);\n vertical-align: inherit;\n"], ["\n border-bottom: 1px solid #e9e9e9;\n margin: 0;\n padding: 0;\n font-style: normal;\n font-weight: 400;\n font-size: 14px;\n line-height: 17px;\n color: var(--colors-shades-550-color);\n vertical-align: inherit;\n"])));
|
|
7992
8040
|
var DialogDropdownLink = newStyled.a(templateObject_5$v || (templateObject_5$v = __makeTemplateObject(["\n display: inline-block;\n text-decoration: none;\n width: 100%;\n background-color: transparent;\n border: 0;\n margin: 0;\n padding: 12px;\n cursor: pointer;\n transition: all 0.2s;\n color: var(--colors-shades-700-color);\n font-size: 1.125rem;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n vertical-align: inherit;\n"], ["\n display: inline-block;\n text-decoration: none;\n width: 100%;\n background-color: transparent;\n border: 0;\n margin: 0;\n padding: 12px;\n cursor: pointer;\n transition: all 0.2s;\n color: var(--colors-shades-700-color);\n font-size: 1.125rem;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n vertical-align: inherit;\n"])));
|
|
7993
8041
|
var DropdownDialog = function (_a) {
|
|
7994
8042
|
var options = _a.options, _b = _a.position, top = _b.top, right = _b.right, containerPosRight = _b.containerPosRight, containerPosTop = _b.containerPosTop, style = _a.style, dialogDropdownContainerStyle = _a.dialogDropdownContainerStyle, dialogDropdownListItemStyle = _a.dialogDropdownListItemStyle, dialogContainerText = _a.dialogContainerText, className = _a.className;
|
|
@@ -7998,7 +8046,7 @@ var DropdownDialog = function (_a) {
|
|
|
7998
8046
|
return (jsx$1(DialogDropdownListItem, { children: jsx$1(DialogDropdownLink, __assign$1({ href: value }, { children: label }), void 0) }, idx));
|
|
7999
8047
|
}) }), void 0) }), void 0));
|
|
8000
8048
|
};
|
|
8001
|
-
var templateObject_1$1i, templateObject_2$
|
|
8049
|
+
var templateObject_1$1i, templateObject_2$_, templateObject_3$Q, templateObject_4$E, templateObject_5$v;
|
|
8002
8050
|
|
|
8003
8051
|
function FilteringDropdown(_a) {
|
|
8004
8052
|
var options = _a.options, _b = _a.disabled, disabled = _b === void 0 ? false : _b, placeHolder = _a.placeHolder, _c = _a.wide, wide = _c === void 0 ? false : _c, _d = _a.sliceAfter, sliceAfter = _d === void 0 ? 100 : _d, _e = _a.filter, filter = _e === void 0 ? false : _e, onChange = _a.onChange;
|
|
@@ -8031,29 +8079,29 @@ function FilteringDropdown(_a) {
|
|
|
8031
8079
|
}) }, void 0)] }), void 0));
|
|
8032
8080
|
}
|
|
8033
8081
|
|
|
8034
|
-
var Title$
|
|
8035
|
-
var P$3 = newStyled.p(templateObject_2$
|
|
8036
|
-
var ArrowContainer = newStyled.div(templateObject_3$
|
|
8037
|
-
var Container$X = newStyled.div(templateObject_4$
|
|
8082
|
+
var Title$4 = newStyled.div(templateObject_1$1h || (templateObject_1$1h = __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; });
|
|
8083
|
+
var P$3 = newStyled.p(templateObject_2$Z || (templateObject_2$Z = __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; });
|
|
8084
|
+
var ArrowContainer = newStyled.div(templateObject_3$P || (templateObject_3$P = __makeTemplateObject(["\n width: 1rem;\n height: 1rem;\n"], ["\n width: 1rem;\n height: 1rem;\n"])));
|
|
8085
|
+
var Container$X = newStyled.div(templateObject_4$D || (templateObject_4$D = __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'); });
|
|
8038
8086
|
var Accordion = function (_a) {
|
|
8039
8087
|
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;
|
|
8040
8088
|
var theme = useTheme();
|
|
8041
8089
|
var _d = React__default.useState(isOpenByDefault), isOpen = _d[0], setIsOpen = _d[1];
|
|
8042
|
-
return (jsxs$1(Container$X, __assign$1({ "data-testid": "FiltersAccordion", showInMobile: showInMobile }, { children: [jsxs$1(Title$
|
|
8090
|
+
return (jsxs$1(Container$X, __assign$1({ "data-testid": "FiltersAccordion", showInMobile: showInMobile }, { children: [jsxs$1(Title$4, __assign$1({ onClick: function () { return setIsOpen(function (state) { return !state; }); }, borderColor: theme.colors.shades['100'].color, "data-testid": "accordion-title" }, { children: [jsx$1(P$3, __assign$1({ color: theme.colors.shades['550'].color }, { children: title }), void 0), jsx$1(ArrowContainer, { children: isOpen ? (jsx$1(Icon.Arrows.ChevronUp, { fill: theme.colors.shades['700'].color }, void 0)) : (jsx$1(Icon.Arrows.ChevronDown, { fill: theme.colors.shades['700'].color }, void 0)) }, void 0)] }), void 0), jsx$1("div", __assign$1({ style: { display: isOpen ? 'block' : 'none' }, "data-testid": "accordion-children-container" }, { children: children }), void 0)] }), void 0));
|
|
8043
8091
|
};
|
|
8044
|
-
var templateObject_1$1h, templateObject_2$
|
|
8092
|
+
var templateObject_1$1h, templateObject_2$Z, templateObject_3$P, templateObject_4$D;
|
|
8045
8093
|
|
|
8046
8094
|
var SectionContent = newStyled.div(templateObject_1$1g || (templateObject_1$1g = __makeTemplateObject(["\n display: grid;\n grid-template-columns: repeat(", ", 1fr);\n grid-gap: 10px;\n margin: 1.25rem 0;\n"], ["\n display: grid;\n grid-template-columns: repeat(", ", 1fr);\n grid-gap: 10px;\n margin: 1.25rem 0;\n"])), function (props) { return props.cols; });
|
|
8047
|
-
var Header$3 = newStyled.div(templateObject_2$
|
|
8048
|
-
var MobileHeader = newStyled.div(templateObject_3$
|
|
8049
|
-
var MobileIconsContainer = newStyled.div(templateObject_4$
|
|
8095
|
+
var Header$3 = newStyled.div(templateObject_2$Y || (templateObject_2$Y = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 1.063rem;\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 1.063rem;\n"])));
|
|
8096
|
+
var MobileHeader = newStyled.div(templateObject_3$O || (templateObject_3$O = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 2.25rem;\n margin-top: 1.063rem;\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 2.25rem;\n margin-top: 1.063rem;\n"])));
|
|
8097
|
+
var MobileIconsContainer = newStyled.div(templateObject_4$C || (templateObject_4$C = __makeTemplateObject(["\n width: 1.5rem;\n height: 1.5rem;\n cursor: pointer;\n"], ["\n width: 1.5rem;\n height: 1.5rem;\n cursor: pointer;\n"])));
|
|
8050
8098
|
var H4 = newStyled.h4(templateObject_5$u || (templateObject_5$u = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
8051
|
-
var FilterLink = newStyled.a(templateObject_6$
|
|
8052
|
-
var OptionContainer = newStyled.div(templateObject_7$
|
|
8053
|
-
var ClearAll = newStyled.span(templateObject_8$
|
|
8099
|
+
var FilterLink = newStyled.a(templateObject_6$r || (templateObject_6$r = __makeTemplateObject(["\n font-size: 1rem;\n font-weight: 700;\n line-height: 1.5rem;\n color: ", ";\n text-decoration: none;\n"], ["\n font-size: 1rem;\n font-weight: 700;\n line-height: 1.5rem;\n color: ", ";\n text-decoration: none;\n"])), function (props) { return props.color; });
|
|
8100
|
+
var OptionContainer = newStyled.div(templateObject_7$o || (templateObject_7$o = __makeTemplateObject(["\n margin-bottom: 1.25rem;\n &:last-child {\n margin-bottom: 0;\n }\n @media (max-width: 768px) {\n display: ", ";\n }\n @media (min-width: 768px) and (max-width: 992px) {\n display: ", ";\n }\n"], ["\n margin-bottom: 1.25rem;\n &:last-child {\n margin-bottom: 0;\n }\n @media (max-width: 768px) {\n display: ", ";\n }\n @media (min-width: 768px) and (max-width: 992px) {\n display: ", ";\n }\n"])), function (props) { return (props.showInMobile ? 'block' : 'none'); }, function (props) { return (props.showInTablet ? 'block' : 'none'); });
|
|
8101
|
+
var ClearAll = newStyled.span(templateObject_8$h || (templateObject_8$h = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n text-decoration: underline;\n cursor: pointer;\n"], ["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n text-decoration: underline;\n cursor: pointer;\n"])), function (props) { return props.color; });
|
|
8054
8102
|
var MobileFooter = newStyled.div(templateObject_9$a || (templateObject_9$a = __makeTemplateObject(["\n background-color: #fff;\n padding: 0.75rem 0.938rem;\n position: sticky;\n bottom: 0;\n z-index: 1;\n margin-top: 5.625rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n"], ["\n background-color: #fff;\n padding: 0.75rem 0.938rem;\n position: sticky;\n bottom: 0;\n z-index: 1;\n margin-top: 5.625rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n"])));
|
|
8055
8103
|
var MobileClearContainer = newStyled.div(templateObject_10$9 || (templateObject_10$9 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n cursor: pointer;\n\n span {\n margin-left: 0.5rem;\n user-select: none;\n }\n"], ["\n display: flex;\n align-items: center;\n cursor: pointer;\n\n span {\n margin-left: 0.5rem;\n user-select: none;\n }\n"])));
|
|
8056
|
-
var templateObject_1$1g, templateObject_2$
|
|
8104
|
+
var templateObject_1$1g, templateObject_2$Y, templateObject_3$O, templateObject_4$C, templateObject_5$u, templateObject_6$r, templateObject_7$o, templateObject_8$h, templateObject_9$a, templateObject_10$9;
|
|
8057
8105
|
|
|
8058
8106
|
var getStylesBySize$9 = function (size, theme) {
|
|
8059
8107
|
switch (size) {
|
|
@@ -8119,8 +8167,8 @@ var SelectorSecondary = function (_a) {
|
|
|
8119
8167
|
};
|
|
8120
8168
|
|
|
8121
8169
|
var UL = newStyled.ul(templateObject_1$1f || (templateObject_1$1f = __makeTemplateObject(["\n margin: 0;\n padding: 0;\n flex-wrap: wrap;\n display: flex;\n max-width: 100%;\n"], ["\n margin: 0;\n padding: 0;\n flex-wrap: wrap;\n display: flex;\n max-width: 100%;\n"])));
|
|
8122
|
-
var LI = newStyled.li(templateObject_2$
|
|
8123
|
-
var CloseIconContainer = newStyled.div(templateObject_3$
|
|
8170
|
+
var LI = newStyled.li(templateObject_2$X || (templateObject_2$X = __makeTemplateObject(["\n list-style: none;\n background-color: ", ";\n padding: 0.375rem 0.625rem;\n border-radius: 0.5rem;\n font-size: 0.875rem;\n line-height: 1.125rem;\n color: ", ";\n font-weight: 400;\n margin-right: 0.5rem;\n margin-bottom: 0.5rem;\n display: flex;\n align-items: center;\n"], ["\n list-style: none;\n background-color: ", ";\n padding: 0.375rem 0.625rem;\n border-radius: 0.5rem;\n font-size: 0.875rem;\n line-height: 1.125rem;\n color: ", ";\n font-weight: 400;\n margin-right: 0.5rem;\n margin-bottom: 0.5rem;\n display: flex;\n align-items: center;\n"])), function (props) { return props.backgroundColor; }, function (props) { return props.color; });
|
|
8171
|
+
var CloseIconContainer = newStyled.div(templateObject_3$N || (templateObject_3$N = __makeTemplateObject(["\n width: 0.656rem;\n height: 0.656rem;\n display: flex;\n align-items: center;\n margin-left: 0.5rem;\n cursor: pointer;\n"], ["\n width: 0.656rem;\n height: 0.656rem;\n display: flex;\n align-items: center;\n margin-left: 0.5rem;\n cursor: pointer;\n"])));
|
|
8124
8172
|
var Tags = function (_a) {
|
|
8125
8173
|
var _b = _a.color, color = _b === void 0 ? '#fff6ef' : _b, items = _a.items, onCloseClick = _a.onCloseClick;
|
|
8126
8174
|
var theme = useTheme();
|
|
@@ -8128,7 +8176,7 @@ var Tags = function (_a) {
|
|
|
8128
8176
|
return (jsxs$1(LI, __assign$1({ color: theme.colors.shades['700'].color, backgroundColor: color }, { children: [item, jsx$1(CloseIconContainer, __assign$1({ "data-testid": "li-close-icon", onClick: function () { return onCloseClick(index); } }, { children: jsx$1(Icon.Actions.Close, { fill: theme.colors.shades['700'].color, width: "100%", height: "100%" }, void 0) }), void 0)] }), index));
|
|
8129
8177
|
}) }), void 0));
|
|
8130
8178
|
};
|
|
8131
|
-
var templateObject_1$1f, templateObject_2$
|
|
8179
|
+
var templateObject_1$1f, templateObject_2$X, templateObject_3$N;
|
|
8132
8180
|
|
|
8133
8181
|
var Filters = function (_a) {
|
|
8134
8182
|
var values = _a.values, onChange = _a.onChange, _b = _a.tagsColor, tagsColor = _b === void 0 ? '#fff6ef' : _b, filterByText = _a.filterByText, clearAllText = _a.clearAllText, isMobile = _a.isMobile, filtersSelectText = _a.filtersSelectText, _c = _a.showSelectedNumberInSection, showSelectedNumberInSection = _c === void 0 ? false : _c, applyText = _a.applyText, mobileApplyButtonClick = _a.mobileApplyButtonClick, mobileBackArrowClick = _a.mobileBackArrowClick, onResetValues = _a.onResetValues;
|
|
@@ -8265,7 +8313,7 @@ var FilterCheckboxColor = function (_a) {
|
|
|
8265
8313
|
};
|
|
8266
8314
|
|
|
8267
8315
|
var Wrapper$4 = newStyled.div(templateObject_1$1e || (templateObject_1$1e = __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"])));
|
|
8268
|
-
var Container$W = newStyled.div(templateObject_2$
|
|
8316
|
+
var Container$W = newStyled.div(templateObject_2$W || (templateObject_2$W = __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"])));
|
|
8269
8317
|
var FitGuarantee = function (_a) {
|
|
8270
8318
|
var _b;
|
|
8271
8319
|
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;
|
|
@@ -8283,10 +8331,10 @@ var FitGuarantee = function (_a) {
|
|
|
8283
8331
|
fontWeight: theme.component.text.fitGuarantee.titleFontWeight,
|
|
8284
8332
|
} }, { children: title }), void 0), jsx$1(Text$7, __assign$1({ variant: "body", weight: "regular", size: "small", style: { fontWeight: theme.component.text.fitGuarantee.fontWeight } }, { children: description }), void 0)] }), void 0)] }, void 0) }), void 0));
|
|
8285
8333
|
};
|
|
8286
|
-
var templateObject_1$1e, templateObject_2$
|
|
8334
|
+
var templateObject_1$1e, templateObject_2$W;
|
|
8287
8335
|
|
|
8288
8336
|
var Container$V = newStyled.div(templateObject_1$1d || (templateObject_1$1d = __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"])));
|
|
8289
|
-
var P$2 = newStyled.p(templateObject_2$
|
|
8337
|
+
var P$2 = newStyled.p(templateObject_2$V || (templateObject_2$V = __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; });
|
|
8290
8338
|
var textButtonStyles$1 = function (theme) { return ({
|
|
8291
8339
|
border: 'none',
|
|
8292
8340
|
background: 'transparent',
|
|
@@ -8301,7 +8349,7 @@ var FitPredictor = function (_a) {
|
|
|
8301
8349
|
var theme = useTheme();
|
|
8302
8350
|
return (jsxs(Container$V, __assign$1({ theme: theme }, { children: [jsx(Container$V, { 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));
|
|
8303
8351
|
};
|
|
8304
|
-
var templateObject_1$1d, templateObject_2$
|
|
8352
|
+
var templateObject_1$1d, templateObject_2$V;
|
|
8305
8353
|
|
|
8306
8354
|
var Button$8 = newStyled.button(function () { return ({
|
|
8307
8355
|
background: 'transparent',
|
|
@@ -12638,8 +12686,8 @@ var ImageSmallPreview = function (_a) {
|
|
|
12638
12686
|
};
|
|
12639
12687
|
|
|
12640
12688
|
var horizontalStyles = css(templateObject_1$1a || (templateObject_1$1a = __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"])));
|
|
12641
|
-
var verticalStyles = css(templateObject_2$
|
|
12642
|
-
var Container$U = newStyled.div(templateObject_3$
|
|
12689
|
+
var verticalStyles = css(templateObject_2$U || (templateObject_2$U = __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"])));
|
|
12690
|
+
var Container$U = newStyled.div(templateObject_3$M || (templateObject_3$M = __makeTemplateObject(["\n display: grid;\n max-height: ", ";\n height: min-content;\n align-items: flex-start;\n ", "\n\n ", "\n"], ["\n display: grid;\n max-height: ", ";\n height: min-content;\n align-items: flex-start;\n ", "\n\n ", "\n"])), function (_a) {
|
|
12643
12691
|
var isRatioSquare = _a.isRatioSquare, theme = _a.theme;
|
|
12644
12692
|
return isRatioSquare ? '530px' : "calc(530px / (".concat(theme.component.gallery.aspectRatio, "))");
|
|
12645
12693
|
}, function (_a) {
|
|
@@ -12650,12 +12698,12 @@ var Container$U = newStyled.div(templateObject_3$L || (templateObject_3$L = __ma
|
|
|
12650
12698
|
return hasOverflowArrows &&
|
|
12651
12699
|
"\n scroll-behavior: smooth;\n &::-webkit-scrollbar {\n visibility: hidden;\n }\n ";
|
|
12652
12700
|
});
|
|
12653
|
-
var Button$7 = newStyled.button(templateObject_4$
|
|
12701
|
+
var Button$7 = newStyled.button(templateObject_4$B || (templateObject_4$B = __makeTemplateObject(["\n padding: 0;\n border: none;\n text-decoration: none;\n background: transparent;\n outline: none;\n"], ["\n padding: 0;\n border: none;\n text-decoration: none;\n background: transparent;\n outline: none;\n"])));
|
|
12654
12702
|
var ArrowsContainer = newStyled.div(templateObject_5$t || (templateObject_5$t = __makeTemplateObject(["\n display: flex;\n width: 65px;\n position: relative;\n left: 6px;\n"], ["\n display: flex;\n width: 65px;\n position: relative;\n left: 6px;\n"])));
|
|
12655
|
-
var ArrowBaseStyles = newStyled.div(templateObject_6$
|
|
12656
|
-
var ArrowPrev = newStyled(ArrowBaseStyles)(templateObject_7$
|
|
12657
|
-
var ArrowNext = newStyled(ArrowBaseStyles)(templateObject_8$
|
|
12658
|
-
var templateObject_1$1a, templateObject_2$
|
|
12703
|
+
var ArrowBaseStyles = newStyled.div(templateObject_6$q || (templateObject_6$q = __makeTemplateObject(["\n -webkit-text-size-adjust: 100%;\n -webkit-font-smoothing: antialiased;\n color: #2a2a2a;\n border: 0;\n font-family: inherit;\n font-size: 100%;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n margin: 0;\n padding: 0;\n vertical-align: inherit;\n background-color: #ececea;\n box-sizing: border-box;\n cursor: pointer;\n float: left;\n height: 20px;\n position: relative;\n width: 50%;\n background-position: 50%;\n background-repeat: no-repeat;\n background-size: 11px;\n display: block;\n"], ["\n -webkit-text-size-adjust: 100%;\n -webkit-font-smoothing: antialiased;\n color: #2a2a2a;\n border: 0;\n font-family: inherit;\n font-size: 100%;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n margin: 0;\n padding: 0;\n vertical-align: inherit;\n background-color: #ececea;\n box-sizing: border-box;\n cursor: pointer;\n float: left;\n height: 20px;\n position: relative;\n width: 50%;\n background-position: 50%;\n background-repeat: no-repeat;\n background-size: 11px;\n display: block;\n"])));
|
|
12704
|
+
var ArrowPrev = newStyled(ArrowBaseStyles)(templateObject_7$n || (templateObject_7$n = __makeTemplateObject(["\n background-image: url(https://truekind.com/cdn/shop/t/340/assets/up-arrow.svg?v=48788596234827096911690908673);\n border-radius: 0 0 0 4px;\n"], ["\n background-image: url(https://truekind.com/cdn/shop/t/340/assets/up-arrow.svg?v=48788596234827096911690908673);\n border-radius: 0 0 0 4px;\n"])));
|
|
12705
|
+
var ArrowNext = newStyled(ArrowBaseStyles)(templateObject_8$g || (templateObject_8$g = __makeTemplateObject(["\n grid-column: 1;\n background-image: url(https://truekind.com/cdn/shop/t/340/assets/down-arrow.svg?v=48788596234827096911690908673);\n border-radius: 0 0 4px 0;\n border-left: 1px solid rgba(42, 42, 42, 0.1);\n"], ["\n grid-column: 1;\n background-image: url(https://truekind.com/cdn/shop/t/340/assets/down-arrow.svg?v=48788596234827096911690908673);\n border-radius: 0 0 4px 0;\n border-left: 1px solid rgba(42, 42, 42, 0.1);\n"])));
|
|
12706
|
+
var templateObject_1$1a, templateObject_2$U, templateObject_3$M, templateObject_4$B, templateObject_5$t, templateObject_6$q, templateObject_7$n, templateObject_8$g;
|
|
12659
12707
|
|
|
12660
12708
|
var getLoadingProp = function (index, itemsOnViewport) {
|
|
12661
12709
|
var loading = 'eager';
|
|
@@ -14287,29 +14335,29 @@ var Container$T = newStyled.div(templateObject_1$19 || (templateObject_1$19 = __
|
|
|
14287
14335
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
14288
14336
|
return borderRadiusVariant && "border-radius: 40px;";
|
|
14289
14337
|
});
|
|
14290
|
-
var TopTagContainer$7 = newStyled.div(templateObject_2$
|
|
14338
|
+
var TopTagContainer$7 = newStyled.div(templateObject_2$T || (templateObject_2$T = __makeTemplateObject(["\n position: absolute;\n left: ", ";\n top: ", ";\n"], ["\n position: absolute;\n left: ", ";\n top: ", ";\n"])), function (_a) {
|
|
14291
14339
|
var borderRadiusVariant = _a.borderRadiusVariant, theme = _a.theme;
|
|
14292
14340
|
return borderRadiusVariant ? '50px' : theme.component.gallery.tagPosition.left;
|
|
14293
14341
|
}, function (_a) {
|
|
14294
14342
|
var borderRadiusVariant = _a.borderRadiusVariant, theme = _a.theme;
|
|
14295
14343
|
return borderRadiusVariant ? '10px' : theme.component.gallery.tagPosition.top;
|
|
14296
14344
|
});
|
|
14297
|
-
var BottomTagContainer$7 = newStyled.div(templateObject_3$
|
|
14345
|
+
var BottomTagContainer$7 = newStyled.div(templateObject_3$L || (templateObject_3$L = __makeTemplateObject(["\n position: absolute;\n bottom: ", ";\n left: 0;\n"], ["\n position: absolute;\n bottom: ", ";\n left: 0;\n"])), function (_a) {
|
|
14298
14346
|
var isCTAHidden = _a.isCTAHidden;
|
|
14299
14347
|
return (isCTAHidden ? '60px' : '120px');
|
|
14300
14348
|
});
|
|
14301
|
-
var TopRightTagWrapper = newStyled.div(templateObject_4$
|
|
14349
|
+
var TopRightTagWrapper = newStyled.div(templateObject_4$A || (templateObject_4$A = __makeTemplateObject(["\n position: absolute;\n right: 0;\n top: 0;\n"], ["\n position: absolute;\n right: 0;\n top: 0;\n"])));
|
|
14302
14350
|
var TopRightTagContainer$2 = newStyled.div(templateObject_5$s || (templateObject_5$s = __makeTemplateObject(["\n white-space: pre-wrap;\n"], ["\n white-space: pre-wrap;\n"])));
|
|
14303
|
-
var ButtonSecondaryOutlineWrapper = newStyled(ButtonSecondaryOutline)(templateObject_6$
|
|
14304
|
-
var ImageStyled = newStyled(Image$3)(templateObject_7$
|
|
14351
|
+
var ButtonSecondaryOutlineWrapper = newStyled(ButtonSecondaryOutline)(templateObject_6$p || (templateObject_6$p = __makeTemplateObject(["\n text-transform: capitalize;\n margin-top: 12px;\n\n @media (max-width: 992px) {\n margin-top: 4px;\n }\n"], ["\n text-transform: capitalize;\n margin-top: 12px;\n\n @media (max-width: 992px) {\n margin-top: 4px;\n }\n"])));
|
|
14352
|
+
var ImageStyled = newStyled(Image$3)(templateObject_7$m || (templateObject_7$m = __makeTemplateObject(["\n aspect-ratio: ", ";\n"], ["\n aspect-ratio: ", ";\n"])), function (_a) {
|
|
14305
14353
|
var theme = _a.theme, isRatioSquare = _a.isRatioSquare;
|
|
14306
14354
|
return isRatioSquare ? '1 / 1' : theme.component.gallery.aspectRatio;
|
|
14307
14355
|
});
|
|
14308
|
-
var InnerImageZoomStyled = newStyled(InnerImageZoom)(templateObject_8$
|
|
14356
|
+
var InnerImageZoomStyled = newStyled(InnerImageZoom)(templateObject_8$f || (templateObject_8$f = __makeTemplateObject(["\n aspect-ratio: ", ";\n"], ["\n aspect-ratio: ", ";\n"])), function (_a) {
|
|
14309
14357
|
var theme = _a.theme, isRatioSquare = _a.isRatioSquare;
|
|
14310
14358
|
return isRatioSquare ? '1 / 1' : theme.component.gallery.aspectRatio;
|
|
14311
14359
|
});
|
|
14312
|
-
var templateObject_1$19, templateObject_2$
|
|
14360
|
+
var templateObject_1$19, templateObject_2$T, templateObject_3$L, templateObject_4$A, templateObject_5$s, templateObject_6$p, templateObject_7$m, templateObject_8$f;
|
|
14313
14361
|
|
|
14314
14362
|
var ImageProductSlide$1 = function (_a) {
|
|
14315
14363
|
var _b;
|
|
@@ -14419,8 +14467,8 @@ var IconsWithTitle = function (_a) {
|
|
|
14419
14467
|
};
|
|
14420
14468
|
|
|
14421
14469
|
var Container$Q = newStyled.div(templateObject_1$16 || (templateObject_1$16 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n border-radius: 10px;\n max-width: ", ";\n width: 100%;\n height: 100%;\n flex-wrap: wrap;\n row-gap: 15px;\n"], ["\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n border-radius: 10px;\n max-width: ", ";\n width: 100%;\n height: 100%;\n flex-wrap: wrap;\n row-gap: 15px;\n"])), function (props) { return (props.isMobile ? '200px' : '207px'); });
|
|
14422
|
-
var ImageContainer$4 = newStyled.div(templateObject_2$
|
|
14423
|
-
var StyledTitle = newStyled.div(templateObject_3$
|
|
14470
|
+
var ImageContainer$4 = newStyled.div(templateObject_2$S || (templateObject_2$S = __makeTemplateObject(["\n display: flex;\n max-width: ", ";\n height: ", ";\n"], ["\n display: flex;\n max-width: ", ";\n height: ", ";\n"])), function (props) { return (props.isMobile ? '200px' : '207px'); }, function (props) { return (props.isMobile ? '200px' : '207px'); });
|
|
14471
|
+
var StyledTitle = newStyled.div(templateObject_3$K || (templateObject_3$K = __makeTemplateObject(["\n display: flex;\n ", "\n"], ["\n display: flex;\n ", "\n"])), function (_a) {
|
|
14424
14472
|
var titlePosition = _a.titlePosition;
|
|
14425
14473
|
return titlePosition == 'center' &&
|
|
14426
14474
|
"\nalign-items:center;\njustify-content:center;\n";
|
|
@@ -14430,13 +14478,13 @@ var ImageCardWithDescription = function (_a) {
|
|
|
14430
14478
|
var isMobile = useWindowDimensions().isMobile;
|
|
14431
14479
|
return (jsxs$1(Container$Q, __assign$1({ "data-testid": "Container", isMobile: isMobile }, { children: [jsx$1(ImageContainer$4, __assign$1({ "data-testid": "ImageContainer", isMobile: isMobile }, { children: jsx$1(Image$3, { src: image, borderRadius: "40px", alt: "before", height: "100%", width: "100%" }, void 0) }), void 0), jsx$1(StyledTitle, __assign$1({ titlePosition: titlePosition, "data-testid": "StyledTitle" }, { children: isMobile ? (jsx$1(Text$7, __assign$1({ variant: "link", weight: "demi" }, { children: title }), void 0)) : (jsx$1(Text$7, __assign$1({ variant: "heading6", weight: "demi" }, { children: title }), void 0)) }), void 0), jsx$1(Text$7, __assign$1({ variant: "link", weight: "regular" }, { children: description }), void 0)] }), void 0));
|
|
14432
14480
|
};
|
|
14433
|
-
var templateObject_1$16, templateObject_2$
|
|
14481
|
+
var templateObject_1$16, templateObject_2$S, templateObject_3$K;
|
|
14434
14482
|
|
|
14435
14483
|
var Label$4 = newStyled.span(templateObject_1$15 || (templateObject_1$15 = __makeTemplateObject(["\n font-weight: 600;\n color: ", ";\n font-size: 1.125rem;\n line-height: 1.75rem;\n"], ["\n font-weight: 600;\n color: ", ";\n font-size: 1.125rem;\n line-height: 1.75rem;\n"])), function (_a) {
|
|
14436
14484
|
var color = _a.color;
|
|
14437
14485
|
return color;
|
|
14438
14486
|
});
|
|
14439
|
-
var MandatoryIcon = newStyled.span(templateObject_2$
|
|
14487
|
+
var MandatoryIcon = newStyled.span(templateObject_2$R || (templateObject_2$R = __makeTemplateObject(["\n color: ", ";\n margin-left: 0.25rem;\n"], ["\n color: ", ";\n margin-left: 0.25rem;\n"])), function (_a) {
|
|
14440
14488
|
var color = _a.color;
|
|
14441
14489
|
return color;
|
|
14442
14490
|
});
|
|
@@ -14445,7 +14493,7 @@ var InputLabel = function (_a) {
|
|
|
14445
14493
|
var theme = useTheme();
|
|
14446
14494
|
return (jsxs$1(Label$4, __assign$1({ color: isDisabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, { children: [label, isRequired && jsx$1(MandatoryIcon, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: "*" }), void 0)] }), void 0));
|
|
14447
14495
|
};
|
|
14448
|
-
var templateObject_1$15, templateObject_2$
|
|
14496
|
+
var templateObject_1$15, templateObject_2$R;
|
|
14449
14497
|
|
|
14450
14498
|
var containerByStatus = function (theme, status) {
|
|
14451
14499
|
if (status === InputValidationType.Valid)
|
|
@@ -14458,8 +14506,8 @@ var Container$P = newStyled.div(templateObject_1$14 || (templateObject_1$14 = __
|
|
|
14458
14506
|
var theme = _a.theme, status = _a.status, hasError = _a.hasError;
|
|
14459
14507
|
return hasError ? '' : containerByStatus(theme, status);
|
|
14460
14508
|
});
|
|
14461
|
-
var StyledLabel$2 = newStyled.label(templateObject_2$
|
|
14462
|
-
var StyledInput = newStyled.input(templateObject_3$
|
|
14509
|
+
var StyledLabel$2 = newStyled.label(templateObject_2$Q || (templateObject_2$Q = __makeTemplateObject(["\n position: absolute;\n top: 10px;\n left: 16px;\n z-index: 15;\n &::after {\n content: '*';\n color: var(--colors-semantic-urgent-color);\n }\n"], ["\n position: absolute;\n top: 10px;\n left: 16px;\n z-index: 15;\n &::after {\n content: '*';\n color: var(--colors-semantic-urgent-color);\n }\n"])));
|
|
14510
|
+
var StyledInput = newStyled.input(templateObject_3$J || (templateObject_3$J = __makeTemplateObject(["\n padding: ", ";\n font-size: ", ";\n border-radius: ", ";\n border: ", ";\n line-height: ", ";\n color: ", ";\n font-weight: ", ";\n flex: 1 1 50%;\n height: 100%;\n width: 100%;\n box-sizing: border-box;\n\n &::placeholder {\n color: ", ";\n }\n\n &:focus {\n outline: none;\n border-color: ", ";\n ", ";\n box-shadow: ", ";\n\n ", ";\n }\n\n &:focus + label,\n &:not(:invalid) + label {\n display: none;\n }\n\n &:disabled {\n background-color: ", ";\n border: 0.063rem solid ", ";\n color: ", ";\n\n &::placeholder {\n color: ", ";\n }\n }\n\n ", ";\n"], ["\n padding: ", ";\n font-size: ", ";\n border-radius: ", ";\n border: ", ";\n line-height: ", ";\n color: ", ";\n font-weight: ", ";\n flex: 1 1 50%;\n height: 100%;\n width: 100%;\n box-sizing: border-box;\n\n &::placeholder {\n color: ", ";\n }\n\n &:focus {\n outline: none;\n border-color: ", ";\n ", ";\n box-shadow: ", ";\n\n ", ";\n }\n\n &:focus + label,\n &:not(:invalid) + label {\n display: none;\n }\n\n &:disabled {\n background-color: ", ";\n border: 0.063rem solid ", ";\n color: ", ";\n\n &::placeholder {\n color: ", ";\n }\n }\n\n ", ";\n"])), function (_a) {
|
|
14463
14511
|
var inlinePlaceholder = _a.inlinePlaceholder, theme = _a.theme;
|
|
14464
14512
|
return theme.component[inlinePlaceholder ? 'inputPlaceholder' : 'input'].padding;
|
|
14465
14513
|
}, function (_a) {
|
|
@@ -14514,7 +14562,7 @@ var StyledInput = newStyled.input(templateObject_3$I || (templateObject_3$I = __
|
|
|
14514
14562
|
return hasValue &&
|
|
14515
14563
|
"& ~ span {\n bottom: 1.625rem;\n font-size: 0.75rem;\n opacity: 1;\n }";
|
|
14516
14564
|
});
|
|
14517
|
-
var InputWrapper = newStyled.div(templateObject_4$
|
|
14565
|
+
var InputWrapper = newStyled.div(templateObject_4$z || (templateObject_4$z = __makeTemplateObject(["\n position: relative;\n display: flex;\n height: ", ";\n"], ["\n position: relative;\n display: flex;\n height: ", ";\n"])), function (_a) {
|
|
14518
14566
|
var size = _a.size, inlinePlaceholder = _a.inlinePlaceholder;
|
|
14519
14567
|
return !inlinePlaceholder ? (size === 'small' ? '36px' : '40px') : '48px';
|
|
14520
14568
|
});
|
|
@@ -14531,8 +14579,8 @@ var AnimatedPlaceholder = newStyled.span(templateObject_5$r || (templateObject_5
|
|
|
14531
14579
|
var theme = _a.theme;
|
|
14532
14580
|
return theme.component.input.lineHeight;
|
|
14533
14581
|
});
|
|
14534
|
-
var ClearInput = newStyled.div(templateObject_6$
|
|
14535
|
-
var templateObject_1$14, templateObject_2$
|
|
14582
|
+
var ClearInput = newStyled.div(templateObject_6$o || (templateObject_6$o = __makeTemplateObject(["\n right: 0.75rem;\n top: 1rem;\n position: absolute;\n cursor: pointer;\n"], ["\n right: 0.75rem;\n top: 1rem;\n position: absolute;\n cursor: pointer;\n"])));
|
|
14583
|
+
var templateObject_1$14, templateObject_2$Q, templateObject_3$J, templateObject_4$z, templateObject_5$r, templateObject_6$o;
|
|
14536
14584
|
|
|
14537
14585
|
var BaseInput = function (_a) {
|
|
14538
14586
|
var value = _a.value, _b = _a.onChange, onChange = _b === void 0 ? function () { } : _b, label = _a.label, children = _a.children, required = _a.required, onValidation = _a.onValidation, size = _a.size, placeholder = _a.placeholder, inlinePlaceholder = _a.inlinePlaceholder, hasError = _a.hasError, _c = _a.inputType, inputType = _c === void 0 ? 'text' : _c, hideClear = _a.hideClear, innerRef = _a.innerRef, requiredPlaceholder = _a.requiredPlaceholder, customErrorMessage = _a.customErrorMessage, rest = __rest(_a, ["value", "onChange", "label", "children", "required", "onValidation", "size", "placeholder", "inlinePlaceholder", "hasError", "inputType", "hideClear", "innerRef", "requiredPlaceholder", "customErrorMessage"]);
|
|
@@ -14581,7 +14629,7 @@ var Container$O = newStyled.div(templateObject_1$13 || (templateObject_1$13 = __
|
|
|
14581
14629
|
var theme = _a.theme;
|
|
14582
14630
|
return theme.component.inputCustom.input.borderRadius;
|
|
14583
14631
|
});
|
|
14584
|
-
var ButtonContainer$1 = newStyled.div(templateObject_2$
|
|
14632
|
+
var ButtonContainer$1 = newStyled.div(templateObject_2$P || (templateObject_2$P = __makeTemplateObject(["\n max-width: 50%;\n margin-left: -6px;\n\n button {\n width: 100%;\n height: 100%;\n border-radius: ", "\n"], ["\n max-width: 50%;\n margin-left: -6px;\n\n button {\n width: 100%;\n height: 100%;\n border-radius: ", "\n"])), function (_a) {
|
|
14585
14633
|
var theme = _a.theme, defaultRounded = _a.defaultRounded;
|
|
14586
14634
|
return defaultRounded
|
|
14587
14635
|
? theme.component.inputCustom.button.borderRadius
|
|
@@ -14598,19 +14646,19 @@ var Custom = function (_a) {
|
|
|
14598
14646
|
}); }, [variant, onClick, text, rest.disabled]);
|
|
14599
14647
|
return (jsx$1(Container$O, __assign$1({ theme: theme }, { children: jsx$1(BaseInput, __assign$1({}, rest, { children: jsx$1(ButtonContainer$1, __assign$1({ theme: theme, defaultRounded: defaultRounded }, { children: jsx$1(Button$6, __assign$1({}, props), void 0) }), void 0) }), void 0) }), void 0));
|
|
14600
14648
|
};
|
|
14601
|
-
var templateObject_1$13, templateObject_2$
|
|
14649
|
+
var templateObject_1$13, templateObject_2$P;
|
|
14602
14650
|
|
|
14603
14651
|
var SuccessContainer = newStyled.div(templateObject_1$12 || (templateObject_1$12 = __makeTemplateObject(["\n height: ", ";\n display: flex;\n"], ["\n height: ", ";\n display: flex;\n"])), function (_a) {
|
|
14604
14652
|
var size = _a.size;
|
|
14605
14653
|
return (size === 'small' ? '36px' : '');
|
|
14606
14654
|
});
|
|
14607
|
-
var SuccessMessage = newStyled.div(templateObject_2$
|
|
14608
|
-
var SuccessText = newStyled.span(templateObject_3$
|
|
14655
|
+
var SuccessMessage = newStyled.div(templateObject_2$O || (templateObject_2$O = __makeTemplateObject(["\n background-color: #dfefe0;\n border: 0.063rem solid #5ead63;\n border-radius: 0.5rem;\n width: 100%;\n flex: 1;\n display: flex;\n align-items: center;\n padding: 0 1rem;\n box-sizing: border-box;\n"], ["\n background-color: #dfefe0;\n border: 0.063rem solid #5ead63;\n border-radius: 0.5rem;\n width: 100%;\n flex: 1;\n display: flex;\n align-items: center;\n padding: 0 1rem;\n box-sizing: border-box;\n"])));
|
|
14656
|
+
var SuccessText = newStyled.span(templateObject_3$I || (templateObject_3$I = __makeTemplateObject(["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 600;\n margin-left: 0.313rem;\n"], ["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 600;\n margin-left: 0.313rem;\n"])));
|
|
14609
14657
|
var Success = function (_a) {
|
|
14610
14658
|
var children = _a.children, successText = _a.successText, size = _a.size;
|
|
14611
14659
|
return (jsxs$1(SuccessContainer, __assign$1({ size: size }, { children: [jsxs$1(SuccessMessage, { children: [jsx$1(Icon.Actions.Check, { fill: "#5EAD63", width: 1.375, height: 1.063 }, void 0), jsx$1(SuccessText, { children: successText }, void 0)] }, void 0), children] }), void 0));
|
|
14612
14660
|
};
|
|
14613
|
-
var templateObject_1$12, templateObject_2$
|
|
14661
|
+
var templateObject_1$12, templateObject_2$O, templateObject_3$I;
|
|
14614
14662
|
|
|
14615
14663
|
var ButtonContainer = newStyled.div(templateObject_1$11 || (templateObject_1$11 = __makeTemplateObject(["\n margin-left: 0.625rem;\n\n button {\n width: 100%;\n height: 100%;\n background-color: ", ";\n }\n"], ["\n margin-left: 0.625rem;\n\n button {\n width: 100%;\n height: 100%;\n background-color: ", ";\n }\n"])), function (_a) {
|
|
14616
14664
|
var status = _a.status, type = _a.type, theme = _a.theme;
|
|
@@ -14632,13 +14680,13 @@ var BasePlusButton = function (_a) {
|
|
|
14632
14680
|
var templateObject_1$11;
|
|
14633
14681
|
|
|
14634
14682
|
var Container$N = newStyled.div(templateObject_1$10 || (templateObject_1$10 = __makeTemplateObject(["\n input {\n padding-right: 2.688rem;\n }\n"], ["\n input {\n padding-right: 2.688rem;\n }\n"])));
|
|
14635
|
-
var IconContainer$3 = newStyled.div(templateObject_2$
|
|
14683
|
+
var IconContainer$3 = newStyled.div(templateObject_2$N || (templateObject_2$N = __makeTemplateObject(["\n position: absolute;\n right: 0.875rem;\n width: 1.125rem;\n height: 100%;\n display: flex;\n align-items: center;\n"], ["\n position: absolute;\n right: 0.875rem;\n width: 1.125rem;\n height: 100%;\n display: flex;\n align-items: center;\n"])));
|
|
14636
14684
|
var BasePlusIcon = function (_a) {
|
|
14637
14685
|
var Icon = _a.Icon, rest = __rest(_a, ["Icon"]);
|
|
14638
14686
|
var theme = useTheme();
|
|
14639
14687
|
return (jsx$1(Container$N, { children: jsx$1(BaseInput, __assign$1({}, rest, { children: jsx$1(IconContainer$3, { children: jsx$1(Icon, { testId: "IconWrapper", fill: theme.colors.shades['250'].color }, void 0) }, void 0) }), void 0) }, void 0));
|
|
14640
14688
|
};
|
|
14641
|
-
var templateObject_1$10, templateObject_2$
|
|
14689
|
+
var templateObject_1$10, templateObject_2$N;
|
|
14642
14690
|
|
|
14643
14691
|
var Input$3 = {
|
|
14644
14692
|
Simple: BaseInput,
|
|
@@ -14778,21 +14826,21 @@ var Portal = function (_a) {
|
|
|
14778
14826
|
var visibleStyle = function (_a) {
|
|
14779
14827
|
var opened = _a.opened;
|
|
14780
14828
|
return opened
|
|
14781
|
-
? css(templateObject_1$$ || (templateObject_1$$ = __makeTemplateObject(["\n opacity: 1;\n pointer-events: all;\n "], ["\n opacity: 1;\n pointer-events: all;\n "]))) : css(templateObject_2$
|
|
14829
|
+
? css(templateObject_1$$ || (templateObject_1$$ = __makeTemplateObject(["\n opacity: 1;\n pointer-events: all;\n "], ["\n opacity: 1;\n pointer-events: all;\n "]))) : css(templateObject_2$M || (templateObject_2$M = __makeTemplateObject(["\n opacity: 0;\n pointer-events: none;\n "], ["\n opacity: 0;\n pointer-events: none;\n "])));
|
|
14782
14830
|
};
|
|
14783
14831
|
var transformStyle = function (_a) {
|
|
14784
14832
|
var opened = _a.opened, maxFullScreen = _a.maxFullScreen, initialTop = _a.initialTop;
|
|
14785
14833
|
return opened
|
|
14786
|
-
? css(templateObject_3$
|
|
14834
|
+
? css(templateObject_3$H || (templateObject_3$H = __makeTemplateObject(["\n transform: ", ";\n top: ", ";\n "], ["\n transform: ", ";\n top: ", ";\n "])), maxFullScreen ? 'translateY(0)' : 'translate(-50%, -50%)', maxFullScreen ? '0' : initialTop ? initialTop : '50%') : css(templateObject_4$y || (templateObject_4$y = __makeTemplateObject(["\n transform: ", ";\n top: ", ";\n "], ["\n transform: ", ";\n top: ", ";\n "])), maxFullScreen ? 'translateY(10%)' : 'translate(-50%, -40%)', maxFullScreen ? '0' : initialTop ? initialTop : '50%');
|
|
14787
14835
|
};
|
|
14788
|
-
var Container$M = newStyled.div(templateObject_6$
|
|
14836
|
+
var Container$M = newStyled.div(templateObject_6$n || (templateObject_6$n = __makeTemplateObject(["\n border: 1px solid var(--colors-pallete-primary-color);\n border-radius: ", ";\n padding: ", ";\n position: fixed;\n left: ", ";\n top: ", ";\n z-index: var(--zIndex-modal);\n background-color: var(--colors-background-color);\n transition: transform 0.3s, opacity 0.3s;\n overflow-y: auto;\n max-width: ", ";\n max-height: ", ";\n width: ", ";\n height: ", ";\n ", "\n ", "\n ", "\n"], ["\n border: 1px solid var(--colors-pallete-primary-color);\n border-radius: ", ";\n padding: ", ";\n position: fixed;\n left: ", ";\n top: ", ";\n z-index: var(--zIndex-modal);\n background-color: var(--colors-background-color);\n transition: transform 0.3s, opacity 0.3s;\n overflow-y: auto;\n max-width: ", ";\n max-height: ", ";\n width: ", ";\n height: ", ";\n ", "\n ", "\n ", "\n"])), function (props) { return "".concat(props.maxFullScreen ? '0' : 'var(--radius-regular)'); }, function (props) { return "".concat(props.padding ? props.padding : '20px 10px'); }, function (props) { return "".concat(props.maxFullScreen ? '0' : '50%'); }, function (props) { return (props.maxFullScreen ? '0' : props.initialTop ? props.initialTop : '50%'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : '90vw'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : '90vh'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : 'auto'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : 'inherit'); }, function (_a) {
|
|
14789
14837
|
var width = _a.width;
|
|
14790
14838
|
return width
|
|
14791
14839
|
? css(templateObject_5$q || (templateObject_5$q = __makeTemplateObject(["\n width: ", ";\n "], ["\n width: ", ";\n "])), width) : mediaQueries({
|
|
14792
14840
|
minWidth: ['90%', 'var(--component-modal-minWidth)'],
|
|
14793
14841
|
});
|
|
14794
14842
|
}, visibleStyle, transformStyle);
|
|
14795
|
-
var Overlay = newStyled.div(templateObject_7$
|
|
14843
|
+
var Overlay = newStyled.div(templateObject_7$l || (templateObject_7$l = __makeTemplateObject(["\n position: fixed;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.75);\n z-index: var(--zIndex-overlay);\n transition: opacity 0.3s;\n ", "\n"], ["\n position: fixed;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.75);\n z-index: var(--zIndex-overlay);\n transition: opacity 0.3s;\n ", "\n"])), visibleStyle);
|
|
14796
14844
|
var Modal = function (_a) {
|
|
14797
14845
|
var id = _a.id, children = _a.children, _b = _a.dismissable, dismissable = _b === void 0 ? true : _b, _c = _a.maxFullScreen, maxFullScreen = _c === void 0 ? false : _c, padding = _a.padding, onClickOverlayHandler = _a.onClickOverlayHandler, width = _a.width, _d = _a.initialTop, initialTop = _d === void 0 ? '50%' : _d;
|
|
14798
14846
|
var _e = useModal(id), opened = _e.opened, close = _e.close;
|
|
@@ -14833,7 +14881,7 @@ var useModal = function (id) {
|
|
|
14833
14881
|
close: close,
|
|
14834
14882
|
}); }, [close, open, opened]);
|
|
14835
14883
|
};
|
|
14836
|
-
var templateObject_1$$, templateObject_2$
|
|
14884
|
+
var templateObject_1$$, templateObject_2$M, templateObject_3$H, templateObject_4$y, templateObject_5$q, templateObject_6$n, templateObject_7$l;
|
|
14837
14885
|
|
|
14838
14886
|
var htmlReactParser = {exports: {}};
|
|
14839
14887
|
|
|
@@ -18666,7 +18714,7 @@ var Container$L = newStyled.div(function (_a) {
|
|
|
18666
18714
|
background: backgroundColor,
|
|
18667
18715
|
});
|
|
18668
18716
|
});
|
|
18669
|
-
var MessageContainer = newStyled.div(templateObject_2$
|
|
18717
|
+
var MessageContainer = newStyled.div(templateObject_2$L || (templateObject_2$L = __makeTemplateObject(["\n padding: 0 1rem;\n text-align: center;\n"], ["\n padding: 0 1rem;\n text-align: center;\n"])));
|
|
18670
18718
|
var getBarWithBasedOnPercent$1 = function (percent) {
|
|
18671
18719
|
return percent <= 100 && percent >= 0 ? "".concat(percent, "%") : '0%';
|
|
18672
18720
|
};
|
|
@@ -18697,28 +18745,28 @@ var MotivatorProgressBar = function (_a) {
|
|
|
18697
18745
|
};
|
|
18698
18746
|
return (jsxs$1(Container$L, __assign$1({ backgroundColor: backgroundColor }, { children: [jsxs$1(BarContainer, __assign$1({ "data-testid": "MPBContainer" }, { children: [jsxs$1(Value, { children: [currencyCode, currentAmount] }, void 0), jsx$1(Background$1, __assign$1({ backgroundColor: unfilledColor || theme.colors.shades['100'].color, "data-testid": "MPBBackground" }, { children: jsx$1(Bar$1, { "data-testid": "MPBBar", backgroundColor: fillColor, percent: progress }, void 0) }), void 0), jsxs$1(Value, __assign$1({ isBold: true }, { children: [currencyCode, endingValue] }), void 0)] }), void 0), isRewardUnlocked ? (jsx$1(MessageContainer, { dangerouslySetInnerHTML: { __html: rewardUnlockedMessage } }, void 0)) : (getRemainingAmountMessage())] }), void 0));
|
|
18699
18747
|
};
|
|
18700
|
-
var templateObject_1$_, templateObject_2$
|
|
18748
|
+
var templateObject_1$_, templateObject_2$L;
|
|
18701
18749
|
|
|
18702
18750
|
var Container$K = newStyled.div(templateObject_1$Z || (templateObject_1$Z = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: ", ";\n padding: 0.75rem 0;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: ", ";\n padding: 0.75rem 0;\n"])), function (_a) {
|
|
18703
18751
|
var theme = _a.theme;
|
|
18704
18752
|
return theme.component.orderBar.backgroundColor;
|
|
18705
18753
|
});
|
|
18706
|
-
var H1 = newStyled.h1(templateObject_2$
|
|
18754
|
+
var H1 = newStyled.h1(templateObject_2$K || (templateObject_2$K = __makeTemplateObject(["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 600;\n color: ", ";\n margin-left: 0.625rem;\n"], ["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 600;\n color: ", ";\n margin-left: 0.625rem;\n"])), function (props) { return props.color; });
|
|
18707
18755
|
var OrderBar = function (_a) {
|
|
18708
18756
|
var message = _a.message, color = _a.color;
|
|
18709
18757
|
var theme = useTheme();
|
|
18710
18758
|
return (jsxs$1(Container$K, __assign$1({ color: color }, { children: [jsx$1(Icon.Actions.Check, { width: 1.25, height: 0.875, fill: "#2F806A" }, void 0), jsx$1(H1, __assign$1({ color: theme.component.orderBar.fontColor }, { children: message }), void 0)] }), void 0));
|
|
18711
18759
|
};
|
|
18712
|
-
var templateObject_1$Z, templateObject_2$
|
|
18760
|
+
var templateObject_1$Z, templateObject_2$K;
|
|
18713
18761
|
|
|
18714
18762
|
var Container$J = newStyled.div(templateObject_1$Y || (templateObject_1$Y = __makeTemplateObject(["\n position: relative;\n display: flex;\n border-radius: 6px;\n gap: 6px;\n"], ["\n position: relative;\n display: flex;\n border-radius: 6px;\n gap: 6px;\n"])));
|
|
18715
|
-
var Card$1 = newStyled.div(templateObject_2$
|
|
18716
|
-
var Tag$1 = newStyled.div(templateObject_3$
|
|
18717
|
-
var Label$3 = newStyled.div(templateObject_4$
|
|
18763
|
+
var Card$1 = newStyled.div(templateObject_2$J || (templateObject_2$J = __makeTemplateObject(["\n --background: var(--colors-background-color);\n\n flex: 1;\n position: relative;\n overflow: hidden;\n cursor: pointer;\n border: 2px solid var(--component-packSelector-borderColor);\n padding: 20px 7px 7px;\n text-align: center;\n background-color: var(--background);\n border-radius: var(--component-packSelector-borderRadius);\n\n &[aria-checked='true'] {\n --color: var(--component-packSelector-selectedColor);\n\n border-color: var(--color);\n\n & * {\n p {\n color: var(--color);\n }\n }\n }\n"], ["\n --background: var(--colors-background-color);\n\n flex: 1;\n position: relative;\n overflow: hidden;\n cursor: pointer;\n border: 2px solid var(--component-packSelector-borderColor);\n padding: 20px 7px 7px;\n text-align: center;\n background-color: var(--background);\n border-radius: var(--component-packSelector-borderRadius);\n\n &[aria-checked='true'] {\n --color: var(--component-packSelector-selectedColor);\n\n border-color: var(--color);\n\n & * {\n p {\n color: var(--color);\n }\n }\n }\n"])));
|
|
18764
|
+
var Tag$1 = newStyled.div(templateObject_3$G || (templateObject_3$G = __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"])));
|
|
18765
|
+
var Label$3 = 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"])));
|
|
18718
18766
|
var Check = newStyled.div(templateObject_5$p || (templateObject_5$p = __makeTemplateObject(["\n position: absolute;\n width: 20px;\n height: 20px;\n background-color: var(--color);\n border-radius: 50%;\n left: 100%;\n top: 50%;\n transform: translate(6px, -50%) scale(0.5);\n opacity: 0;\n transition: opacity 0.3s, transform 0.3s;\n\n &[data-visible='true'] {\n transform: translate(6px, -50%) scale(1);\n opacity: 1;\n }\n"], ["\n position: absolute;\n width: 20px;\n height: 20px;\n background-color: var(--color);\n border-radius: 50%;\n left: 100%;\n top: 50%;\n transform: translate(6px, -50%) scale(0.5);\n opacity: 0;\n transition: opacity 0.3s, transform 0.3s;\n\n &[data-visible='true'] {\n transform: translate(6px, -50%) scale(1);\n opacity: 1;\n }\n"])));
|
|
18719
|
-
var IconContainer$2 = newStyled.div(templateObject_6$
|
|
18720
|
-
var IconPlaceholder = newStyled.div(templateObject_7$
|
|
18721
|
-
var DiscountContainer = newStyled.div(templateObject_8$
|
|
18767
|
+
var IconContainer$2 = newStyled.div(templateObject_6$m || (templateObject_6$m = __makeTemplateObject(["\n height: 56px;\n display: flex;\n align-items: center;\n justify-content: center;\n\n [aria-checked='true'] & * {\n fill: var(--color);\n }\n"], ["\n height: 56px;\n display: flex;\n align-items: center;\n justify-content: center;\n\n [aria-checked='true'] & * {\n fill: var(--color);\n }\n"])));
|
|
18768
|
+
var IconPlaceholder = newStyled.div(templateObject_7$k || (templateObject_7$k = __makeTemplateObject(["\n height: 100%;\n width: 100%;\n background-color: var(--colors-shades-100-color);\n"], ["\n height: 100%;\n width: 100%;\n background-color: var(--colors-shades-100-color);\n"])));
|
|
18769
|
+
var DiscountContainer = newStyled.div(templateObject_8$e || (templateObject_8$e = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n"], ["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n"])));
|
|
18722
18770
|
var PackSelector = function (_a) {
|
|
18723
18771
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange, currencyCode = _a.currencyCode;
|
|
18724
18772
|
return (jsx$1(Container$J, __assign$1({ role: "radiogroup" }, { children: packs.map(function (pack) {
|
|
@@ -18748,14 +18796,14 @@ var PackCard = function (_a) {
|
|
|
18748
18796
|
currency: currencyCode || 'USD',
|
|
18749
18797
|
}), ' ', "each"] }), void 0)] }), void 0));
|
|
18750
18798
|
};
|
|
18751
|
-
var templateObject_1$Y, templateObject_2$
|
|
18799
|
+
var templateObject_1$Y, templateObject_2$J, templateObject_3$G, templateObject_4$x, templateObject_5$p, templateObject_6$m, templateObject_7$k, templateObject_8$e;
|
|
18752
18800
|
|
|
18753
18801
|
var Container$I = newStyled.div(templateObject_1$X || (templateObject_1$X = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n user-select: none;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n user-select: none;\n"])));
|
|
18754
|
-
var IconContainer$1 = newStyled.div(templateObject_2$
|
|
18755
|
-
var PageNumbersContainer = newStyled.div(templateObject_3$
|
|
18802
|
+
var IconContainer$1 = newStyled.div(templateObject_2$I || (templateObject_2$I = __makeTemplateObject(["\n width: 0.531rem;\n height: 0.875rem;\n display: flex;\n align-items: center;\n cursor: pointer;\n"], ["\n width: 0.531rem;\n height: 0.875rem;\n display: flex;\n align-items: center;\n cursor: pointer;\n"])));
|
|
18803
|
+
var PageNumbersContainer = newStyled.div(templateObject_3$F || (templateObject_3$F = __makeTemplateObject(["\n display: flex;\n ", ";\n"], ["\n display: flex;\n ", ";\n"])), mediaQueries({
|
|
18756
18804
|
margin: ['0 0.75rem', '0 1.25rem'],
|
|
18757
18805
|
}));
|
|
18758
|
-
var PageNumber = newStyled.span(templateObject_4$
|
|
18806
|
+
var PageNumber = newStyled.span(templateObject_4$w || (templateObject_4$w = __makeTemplateObject(["\n font-weight: ", ";\n color: ", ";\n text-align: center;\n cursor: pointer;\n margin: 0 2px;\n border-bottom: ", ";\n ", ";\n background: ", ";\n"], ["\n font-weight: ", ";\n color: ", ";\n text-align: center;\n cursor: pointer;\n margin: 0 2px;\n border-bottom: ", ";\n ", ";\n background: ", ";\n"])), function (_a) {
|
|
18759
18807
|
var bold = _a.bold;
|
|
18760
18808
|
return (bold ? '700' : '500');
|
|
18761
18809
|
}, function (_a) {
|
|
@@ -18772,7 +18820,7 @@ var PageNumber = newStyled.span(templateObject_4$v || (templateObject_4$v = __ma
|
|
|
18772
18820
|
var background = _a.background;
|
|
18773
18821
|
return background || 'unset';
|
|
18774
18822
|
});
|
|
18775
|
-
var templateObject_1$X, templateObject_2$
|
|
18823
|
+
var templateObject_1$X, templateObject_2$I, templateObject_3$F, templateObject_4$w;
|
|
18776
18824
|
|
|
18777
18825
|
var Pagination = function (_a) {
|
|
18778
18826
|
var from = _a.from, to = _a.to, _b = _a.currentPage, currentPage = _b === void 0 ? from : _b, onChange = _a.onChange, _c = _a.underlineActive, underlineActive = _c === void 0 ? true : _c, _d = _a.boldActive, boldActive = _d === void 0 ? true : _d, _e = _a.disabled, disabled = _e === void 0 ? false : _e, _f = _a.showReducedPages, showReducedPages = _f === void 0 ? false : _f;
|
|
@@ -18859,11 +18907,11 @@ var templateObject_1$W;
|
|
|
18859
18907
|
|
|
18860
18908
|
var Container$G = newStyled.div(templateObject_1$V || (templateObject_1$V = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n width: auto;\n padding: 10px 0;\n"], ["\n display: flex;\n flex-direction: row;\n width: auto;\n padding: 10px 0;\n"])));
|
|
18861
18909
|
var IMAGE_WIDTH = '63px';
|
|
18862
|
-
var ImageContainer$3 = newStyled.div(templateObject_2$
|
|
18863
|
-
var DescriptionContainer$1 = newStyled.div(templateObject_3$
|
|
18910
|
+
var ImageContainer$3 = newStyled.div(templateObject_2$H || (templateObject_2$H = __makeTemplateObject(["\n position: relative;\n width: ", ";\n img {\n display: block;\n }\n"], ["\n position: relative;\n width: ", ";\n img {\n display: block;\n }\n"])), IMAGE_WIDTH);
|
|
18911
|
+
var DescriptionContainer$1 = newStyled.div(templateObject_3$E || (templateObject_3$E = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n ", ";\n width: calc(100% - ", ");\n"], ["\n display: flex;\n flex-direction: column;\n ", ";\n width: calc(100% - ", ");\n"])), mediaQueries({
|
|
18864
18912
|
paddingLeft: ['0.938rem', '1.875rem'],
|
|
18865
18913
|
}), IMAGE_WIDTH);
|
|
18866
|
-
var Title$
|
|
18914
|
+
var Title$3 = newStyled.h2(function (_a) {
|
|
18867
18915
|
var color = _a.color;
|
|
18868
18916
|
return ({
|
|
18869
18917
|
fontWeight: 600,
|
|
@@ -18883,7 +18931,7 @@ var Subtitle = newStyled.h3(function (_a) {
|
|
|
18883
18931
|
margin: margin,
|
|
18884
18932
|
});
|
|
18885
18933
|
});
|
|
18886
|
-
var PriceContainer = newStyled.div(templateObject_4$
|
|
18934
|
+
var PriceContainer = newStyled.div(templateObject_4$v || (templateObject_4$v = __makeTemplateObject(["\n display: flex;\n ", ";\n height: 100%;\n align-items: end;\n margin-top: 0.219rem;\n"], ["\n display: flex;\n ", ";\n height: 100%;\n align-items: end;\n margin-top: 0.219rem;\n"])), function (_a) {
|
|
18887
18935
|
var withTag = _a.withTag; _a.theme;
|
|
18888
18936
|
return withTag
|
|
18889
18937
|
? mediaQueries({
|
|
@@ -18893,8 +18941,8 @@ var PriceContainer = newStyled.div(templateObject_4$u || (templateObject_4$u = _
|
|
|
18893
18941
|
: 'justify-content: end';
|
|
18894
18942
|
});
|
|
18895
18943
|
var Quantity = newStyled.div(templateObject_5$o || (templateObject_5$o = __makeTemplateObject(["\n position: absolute;\n right: 0;\n top: 0;\n transform: translate(30%, -30%);\n border-radius: 50%;\n width: 1rem;\n height: 1rem;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: var(--colors-shades-300-color);\n color: var(--colors-shades-white-color);\n font-size: 0.75rem;\n font-weight: 600;\n line-height: 24px;\n"], ["\n position: absolute;\n right: 0;\n top: 0;\n transform: translate(30%, -30%);\n border-radius: 50%;\n width: 1rem;\n height: 1rem;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: var(--colors-shades-300-color);\n color: var(--colors-shades-white-color);\n font-size: 0.75rem;\n font-weight: 600;\n line-height: 24px;\n"])));
|
|
18896
|
-
var StyledSpan = newStyled.span(templateObject_6$
|
|
18897
|
-
var Gift = newStyled.span(templateObject_7$
|
|
18944
|
+
var StyledSpan = newStyled.span(templateObject_6$l || (templateObject_6$l = __makeTemplateObject(["\n display: block;\n transform: translateY(1px);\n"], ["\n display: block;\n transform: translateY(1px);\n"])));
|
|
18945
|
+
var Gift = newStyled.span(templateObject_7$j || (templateObject_7$j = __makeTemplateObject(["\n color: ", ";\n font-weight: 600;\n font-size: 14px;\n line-height: 22px;\n"], ["\n color: ", ";\n font-weight: 600;\n font-size: 14px;\n line-height: 22px;\n"])), function (_a) {
|
|
18898
18946
|
var theme = _a.theme;
|
|
18899
18947
|
return theme.colors.semantic.urgent.color;
|
|
18900
18948
|
});
|
|
@@ -18902,9 +18950,9 @@ var SimpleOrderItem = function (_a) {
|
|
|
18902
18950
|
var _b, _c, _d, _e, _f, _g, _h, _j;
|
|
18903
18951
|
var title = _a.title, className = _a.className, subtitle = _a.subtitle, midElement = _a.midElement, image = _a.image, price = _a.price, tag = _a.tag, quantity = _a.quantity, finalPriceStyle = _a.finalPriceStyle, isGift = _a.isGift;
|
|
18904
18952
|
var theme = useTheme();
|
|
18905
|
-
return (jsxs$1(Container$G, __assign$1({ className: className }, { children: [jsxs$1(ImageContainer$3, { children: [jsx$1(Image$3, { src: image.src, alt: image.alt, width: "4.063rem", height: "5.375rem", objectFit: "cover", objectPosition: "center" }, void 0), quantity ? (jsx$1(Quantity, __assign$1({ "data-testid": "order-item-quantity" }, { children: jsx$1(StyledSpan, { children: quantity }, void 0) }), void 0)) : null] }, void 0), jsxs$1(DescriptionContainer$1, __assign$1({ "data-testid": "order-item-description-container", theme: theme }, { children: [jsx$1(Title$
|
|
18953
|
+
return (jsxs$1(Container$G, __assign$1({ className: className }, { children: [jsxs$1(ImageContainer$3, { children: [jsx$1(Image$3, { src: image.src, alt: image.alt, width: "4.063rem", height: "5.375rem", objectFit: "cover", objectPosition: "center" }, void 0), quantity ? (jsx$1(Quantity, __assign$1({ "data-testid": "order-item-quantity" }, { children: jsx$1(StyledSpan, { children: quantity }, void 0) }), void 0)) : null] }, void 0), jsxs$1(DescriptionContainer$1, __assign$1({ "data-testid": "order-item-description-container", theme: theme }, { children: [jsx$1(Title$3, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "product-title" }, { children: title }), void 0), subtitle && (jsx$1(Subtitle, __assign$1({ color: ((_c = (_b = theme.component.pricing) === null || _b === void 0 ? void 0 : _b.subtitle) === null || _c === void 0 ? void 0 : _c.color) || theme.colors.shades['700'].color, fontSize: ((_e = (_d = theme.component.pricing) === null || _d === void 0 ? void 0 : _d.subtitle) === null || _e === void 0 ? void 0 : _e.fontSize) || '0.75rem', lineHeight: ((_g = (_f = theme.component.pricing) === null || _f === void 0 ? void 0 : _f.subtitle) === null || _g === void 0 ? void 0 : _g.lineHeight) || '1rem', fontWeight: ((_j = (_h = theme.component.pricing) === null || _h === void 0 ? void 0 : _h.subtitle) === null || _j === void 0 ? void 0 : _j.fontWeight) || 'normal', "data-testid": "product-variant-title", margin: "0.5rem 0 0 0" }, { children: subtitle }), void 0)), midElement, isGift && jsx$1(Gift, { children: "Limited Time Only" }, void 0), jsxs$1(PriceContainer, __assign$1({ "data-testid": "order-item-price-container", withTag: !!tag, theme: theme }, { children: [tag && (jsx$1(OfferBanner, { discountAppliedText: tag === null || tag === void 0 ? void 0 : tag.text, backgroundColor: tag === null || tag === void 0 ? void 0 : tag.backgroundColor }, void 0)), isGift ? (jsx$1(Gift, { children: "GIFT" }, void 0)) : (jsx$1(PriceLabel$1, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, color: price.color || theme.colors.shades['700'].color, size: theme.component.pricing.priceLabel.price.size, finalPriceStyle: finalPriceStyle, originalPriceStyled: true }, void 0))] }), void 0)] }), void 0)] }), void 0));
|
|
18906
18954
|
};
|
|
18907
|
-
var templateObject_1$V, templateObject_2$
|
|
18955
|
+
var templateObject_1$V, templateObject_2$H, templateObject_3$E, templateObject_4$v, templateObject_5$o, templateObject_6$l, templateObject_7$j;
|
|
18908
18956
|
|
|
18909
18957
|
var P$1 = newStyled.p(function (_a) {
|
|
18910
18958
|
var color = _a.color;
|
|
@@ -18966,9 +19014,9 @@ var ProgressBar = function (_a) {
|
|
|
18966
19014
|
var templateObject_1$U;
|
|
18967
19015
|
|
|
18968
19016
|
var Container$E = newStyled.div(templateObject_1$T || (templateObject_1$T = __makeTemplateObject(["\n padding: 0.625rem 0;\n border: 0.063rem solid ", ";\n border-radius: ", ";\n display: inline-flex;\n align-items: center;\n justify-content: space-around;\n width: 100%;\n max-width: 3.75rem;\n\n * {\n color: ", ";\n }\n"], ["\n padding: 0.625rem 0;\n border: 0.063rem solid ", ";\n border-radius: ", ";\n display: inline-flex;\n align-items: center;\n justify-content: space-around;\n width: 100%;\n max-width: 3.75rem;\n\n * {\n color: ", ";\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.borderRadius; }, function (props) { return props.color; });
|
|
18969
|
-
var Item$1 = newStyled.span(templateObject_2$
|
|
18970
|
-
var Number$1 = newStyled(Item$1)(templateObject_3$
|
|
18971
|
-
var IncreaseDecrease = newStyled(Item$1)(templateObject_4$
|
|
19017
|
+
var Item$1 = newStyled.span(templateObject_2$G || (templateObject_2$G = __makeTemplateObject(["\n font-size: 0.875rem;\n line-height: 1.125rem;\n margin: 0;\n padding: 0;\n"], ["\n font-size: 0.875rem;\n line-height: 1.125rem;\n margin: 0;\n padding: 0;\n"])));
|
|
19018
|
+
var Number$1 = newStyled(Item$1)(templateObject_3$D || (templateObject_3$D = __makeTemplateObject(["\n width: 1.25rem;\n text-align: center;\n font-weight: 600;\n"], ["\n width: 1.25rem;\n text-align: center;\n font-weight: 600;\n"])));
|
|
19019
|
+
var IncreaseDecrease = newStyled(Item$1)(templateObject_4$u || (templateObject_4$u = __makeTemplateObject(["\n cursor: pointer;\n user-select: none;\n padding: 0 0.313rem;\n font-weight: 400;\n color: ", ";\n"], ["\n cursor: pointer;\n user-select: none;\n padding: 0 0.313rem;\n font-weight: 400;\n color: ", ";\n"])), function (props) { return props.isMaxSelected && 'var(--colors-shades-175-color)'; });
|
|
18972
19020
|
var QuantityPicker = function (_a) {
|
|
18973
19021
|
var _b = _a.initialValue, initialValue = _b === void 0 ? 0 : _b, _c = _a.maxValue, maxValue = _c === void 0 ? 99 : _c, value = _a.value, _d = _a.testId, testId = _d === void 0 ? 'quantity-picker' : _d, onChange = _a.onChange;
|
|
18974
19022
|
var theme = useTheme();
|
|
@@ -18993,7 +19041,7 @@ var QuantityPicker = function (_a) {
|
|
|
18993
19041
|
}, [value, clamp]);
|
|
18994
19042
|
return (jsxs$1(Container$E, __assign$1({ borderColor: theme.colors.shades['200'].color, color: theme.colors.shades['700'].color, "data-testid": testId, borderRadius: theme.component.qtyPicker.borderRadius }, { children: [jsx$1(IncreaseDecrease, __assign$1({ "data-testid": "".concat(testId, "-minus"), onClick: function () { return setInternal(function (value) { return clamp(value - 1); }); } }, { children: "-" }), void 0), jsx$1(Number$1, { children: internal }, void 0), jsx$1(IncreaseDecrease, __assign$1({ isMaxSelected: value === maxValue, "data-testid": "".concat(testId, "-plus"), onClick: function () { return setInternal(function (value) { return clamp(value + 1); }); } }, { children: "+" }), void 0)] }), void 0));
|
|
18995
19043
|
};
|
|
18996
|
-
var templateObject_1$T, templateObject_2$
|
|
19044
|
+
var templateObject_1$T, templateObject_2$G, templateObject_3$D, templateObject_4$u;
|
|
18997
19045
|
|
|
18998
19046
|
/* base styles & size variants */
|
|
18999
19047
|
var CustomRadioStyles$1 = {
|
|
@@ -19064,7 +19112,7 @@ var ContainerStyles$1 = {
|
|
|
19064
19112
|
|
|
19065
19113
|
var Wrapper$3 = newStyled.div(templateObject_1$S || (templateObject_1$S = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
19066
19114
|
var Container$D = newStyled.div(__assign$1({}, ContainerStyles$1.baseStyles), function (props) { return [ContainerStyles$1[props.size](props.theme)]; });
|
|
19067
|
-
var Input$2 = newStyled.input(templateObject_2$
|
|
19115
|
+
var Input$2 = newStyled.input(templateObject_2$F || (templateObject_2$F = __makeTemplateObject(["\n position: absolute;\n opacity: 0;\n cursor: ", ";\n height: 100%;\n width: 100%;\n margin: 0;\n"], ["\n position: absolute;\n opacity: 0;\n cursor: ", ";\n height: 100%;\n width: 100%;\n margin: 0;\n"])), function (_a) {
|
|
19068
19116
|
var disabled = _a.disabled;
|
|
19069
19117
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
19070
19118
|
});
|
|
@@ -19072,7 +19120,7 @@ var CustomRadio$1 = newStyled.div(function (props) { return [
|
|
|
19072
19120
|
CustomRadioStyles$1.baseStyles(props.theme, props.disabled, props.isChecked),
|
|
19073
19121
|
CustomRadioStyles$1[props.size](props.theme, props.isChecked),
|
|
19074
19122
|
]; });
|
|
19075
|
-
var StyledLabel$1 = newStyled(Label$6)(templateObject_3$
|
|
19123
|
+
var StyledLabel$1 = newStyled(Label$6)(templateObject_3$C || (templateObject_3$C = __makeTemplateObject(["\n font-size: 14px;\n font-weight: 400;\n line-height: 22px;\n"], ["\n font-size: 14px;\n font-weight: 400;\n line-height: 22px;\n"])));
|
|
19076
19124
|
var RadioPrimary = function (_a) {
|
|
19077
19125
|
var style = _a.style, name = _a.name, value = _a.value, id = _a.id, label = _a.label, _b = _a.checked, checked = _b === void 0 ? false : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, onChange = _a.onChange, _d = _a.size, size = _d === void 0 ? ComponentSize.Medium : _d;
|
|
19078
19126
|
var theme = useTheme();
|
|
@@ -19082,7 +19130,7 @@ var RadioPrimary = function (_a) {
|
|
|
19082
19130
|
};
|
|
19083
19131
|
return (jsxs$1(Wrapper$3, { children: [jsxs$1(Container$D, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsx$1(Input$2, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled, style: style }, void 0), jsx$1(CustomRadio$1, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), jsx$1(StyledLabel$1, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0)] }, void 0));
|
|
19084
19132
|
};
|
|
19085
|
-
var templateObject_1$S, templateObject_2$
|
|
19133
|
+
var templateObject_1$S, templateObject_2$F, templateObject_3$C;
|
|
19086
19134
|
|
|
19087
19135
|
var RadioGroupInput = function (_a) {
|
|
19088
19136
|
var style = _a.style, name = _a.name, _b = _a.options, options = _b === void 0 ? [] : _b, value = _a.value, onChange = _a.onChange, _c = _a.size, size = _c === void 0 ? ComponentSize.Medium : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d;
|
|
@@ -19163,7 +19211,7 @@ var ContainerStyles = {
|
|
|
19163
19211
|
|
|
19164
19212
|
var Wrapper$2 = newStyled.div(templateObject_1$R || (templateObject_1$R = __makeTemplateObject(["\n display: flex;\n align-items: center;\n padding-bottom: 10px;\n"], ["\n display: flex;\n align-items: center;\n padding-bottom: 10px;\n"])));
|
|
19165
19213
|
var Container$C = newStyled.div(__assign$1({}, ContainerStyles.baseStyles), function (props) { return [ContainerStyles[props.size](props.theme)]; });
|
|
19166
|
-
var Input$1 = newStyled.input(templateObject_2$
|
|
19214
|
+
var Input$1 = newStyled.input(templateObject_2$E || (templateObject_2$E = __makeTemplateObject(["\n position: absolute;\n opacity: 0;\n cursor: ", ";\n height: 100%;\n width: 100%;\n margin: 0;\n"], ["\n position: absolute;\n opacity: 0;\n cursor: ", ";\n height: 100%;\n width: 100%;\n margin: 0;\n"])), function (_a) {
|
|
19167
19215
|
var disabled = _a.disabled;
|
|
19168
19216
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
19169
19217
|
});
|
|
@@ -19171,7 +19219,7 @@ var CustomRadio = newStyled.div(function (props) { return [
|
|
|
19171
19219
|
CustomRadioStyles.baseStyles(props.theme, props.disabled, props.isChecked),
|
|
19172
19220
|
CustomRadioStyles[props.size](props.theme, props.isChecked),
|
|
19173
19221
|
]; });
|
|
19174
|
-
var StyledLabel = newStyled(Label$6)(templateObject_3$
|
|
19222
|
+
var StyledLabel = newStyled(Label$6)(templateObject_3$B || (templateObject_3$B = __makeTemplateObject(["\n font-size: ", ";\n line-height: ", " !important;\n"], ["\n font-size: ", ";\n line-height: ", " !important;\n"])), function (_a) {
|
|
19175
19223
|
var theme = _a.theme;
|
|
19176
19224
|
return theme.component.radio.textSize;
|
|
19177
19225
|
}, function (_a) {
|
|
@@ -19187,7 +19235,7 @@ var ClubRadioInput = function (_a) {
|
|
|
19187
19235
|
};
|
|
19188
19236
|
return (jsxs$1(Wrapper$2, { children: [jsxs$1(Container$C, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsx$1(Input$1, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled, style: style }, void 0), jsx$1(CustomRadio, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), jsx$1(StyledLabel, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled, "aria-checked": checked }, { children: label }), void 0)] }, void 0));
|
|
19189
19237
|
};
|
|
19190
|
-
var templateObject_1$R, templateObject_2$
|
|
19238
|
+
var templateObject_1$R, templateObject_2$E, templateObject_3$B;
|
|
19191
19239
|
|
|
19192
19240
|
var ClubRadioGroupInput = function (_a) {
|
|
19193
19241
|
var style = _a.style, name = _a.name, _b = _a.options, options = _b === void 0 ? [] : _b, value = _a.value, onChange = _a.onChange, _c = _a.size, size = _c === void 0 ? ComponentSize.Medium : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d;
|
|
@@ -19216,16 +19264,16 @@ function formatDate(date, format) {
|
|
|
19216
19264
|
}
|
|
19217
19265
|
|
|
19218
19266
|
var Container$B = newStyled.div(templateObject_1$Q || (templateObject_1$Q = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n\n @media (min-width: 768px) {\n flex-direction: row;\n }\n"], ["\n display: flex;\n flex-direction: column;\n\n @media (min-width: 768px) {\n flex-direction: row;\n }\n"])));
|
|
19219
|
-
var Content$1 = newStyled.div(templateObject_2$
|
|
19220
|
-
var StarsContent = newStyled.div(templateObject_3$
|
|
19221
|
-
var ReviewContainer$1 = newStyled.div(templateObject_4$
|
|
19267
|
+
var Content$1 = newStyled.div(templateObject_2$D || (templateObject_2$D = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n padding: 20px;\n padding-top: 0;\n"], ["\n display: flex;\n flex-direction: column;\n padding: 20px;\n padding-top: 0;\n"])));
|
|
19268
|
+
var StarsContent = newStyled.div(templateObject_3$A || (templateObject_3$A = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n"], ["\n display: flex;\n justify-content: space-between;\n"])));
|
|
19269
|
+
var ReviewContainer$1 = newStyled.div(templateObject_4$t || (templateObject_4$t = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n margin-top: 15px;\n margin-bottom: 5px;\n\n @media (min-width: 768px) {\n margin-top: 10px;\n }\n"], ["\n display: flex;\n flex-direction: column;\n margin-top: 15px;\n margin-bottom: 5px;\n\n @media (min-width: 768px) {\n margin-top: 10px;\n }\n"])));
|
|
19222
19270
|
var DateText$1 = newStyled.span(templateObject_5$n || (templateObject_5$n = __makeTemplateObject(["\n font-weight: 400;\n font-size: 14px;\n line-height: 22px;\n"], ["\n font-weight: 400;\n font-size: 14px;\n line-height: 22px;\n"])));
|
|
19223
|
-
var ReviewerName$1 = newStyled.h1(templateObject_6$
|
|
19224
|
-
var VerifiedText = newStyled.h1(templateObject_7$
|
|
19225
|
-
var ReviewTitle$1 = newStyled.h2(templateObject_8$
|
|
19271
|
+
var ReviewerName$1 = newStyled.h1(templateObject_6$k || (templateObject_6$k = __makeTemplateObject(["\n font-weight: 600;\n margin: 0;\n font-size: 18px;\n padding: 20px;\n display: flex;\n"], ["\n font-weight: 600;\n margin: 0;\n font-size: 18px;\n padding: 20px;\n display: flex;\n"])));
|
|
19272
|
+
var VerifiedText = newStyled.h1(templateObject_7$i || (templateObject_7$i = __makeTemplateObject(["\n font-weight: 600;\n margin: 0;\n font-size: 18px;\n color: #1cc286;\n margin-left: 6px;\n\n @media (min-width: 768px) {\n font-size: 18px;\n }\n"], ["\n font-weight: 600;\n margin: 0;\n font-size: 18px;\n color: #1cc286;\n margin-left: 6px;\n\n @media (min-width: 768px) {\n font-size: 18px;\n }\n"])));
|
|
19273
|
+
var ReviewTitle$1 = newStyled.h2(templateObject_8$d || (templateObject_8$d = __makeTemplateObject(["\n font-size: 18px;\n line-height: 20px;\n font-weight: 600;\n margin: 0;\n"], ["\n font-size: 18px;\n line-height: 20px;\n font-weight: 600;\n margin: 0;\n"])));
|
|
19226
19274
|
var ReviewDescription = newStyled.div(templateObject_9$9 || (templateObject_9$9 = __makeTemplateObject(["\n font-weight: normal;\n font-size: 16px;\n margin: 0;\n line-height: 25px;\n word-break: break-word;\n margin-top: 5px;\n white-space: pre-wrap;\n"], ["\n font-weight: normal;\n font-size: 16px;\n margin: 0;\n line-height: 25px;\n word-break: break-word;\n margin-top: 5px;\n white-space: pre-wrap;\n"])));
|
|
19227
19275
|
var ImageContainer$2 = newStyled.div(templateObject_10$8 || (templateObject_10$8 = __makeTemplateObject(["\n width: 100% !important;\n min-width: 100%;\n height: initial !important;\n min-height: 250px;\n background-size: contain !important;\n margin: 0 !important;\n line-height: 0;\n\n @media (min-width: 768px) {\n width: unset;\n min-width: 50%;\n max-width: 100%;\n background-color: #fff;\n display: inline-block;\n vertical-align: middle;\n max-height: calc(100vh - 100px);\n padding: 20px;\n }\n"], ["\n width: 100% !important;\n min-width: 100%;\n height: initial !important;\n min-height: 250px;\n background-size: contain !important;\n margin: 0 !important;\n line-height: 0;\n\n @media (min-width: 768px) {\n width: unset;\n min-width: 50%;\n max-width: 100%;\n background-color: #fff;\n display: inline-block;\n vertical-align: middle;\n max-height: calc(100vh - 100px);\n padding: 20px;\n }\n"])));
|
|
19228
|
-
var ImageWrapper$
|
|
19276
|
+
var ImageWrapper$3 = newStyled(Image$3)(templateObject_11$5 || (templateObject_11$5 = __makeTemplateObject(["\n width: 100%;\n min-width: 50%;\n max-width: 100%;\n background-color: #fff;\n display: inline-block;\n vertical-align: middle;\n max-height: calc(100vh - 100px);\n"], ["\n width: 100%;\n min-width: 50%;\n max-width: 100%;\n background-color: #fff;\n display: inline-block;\n vertical-align: middle;\n max-height: calc(100vh - 100px);\n"])));
|
|
19229
19277
|
var VideoWrapper = newStyled.video(templateObject_12$2 || (templateObject_12$2 = __makeTemplateObject(["\n width: 100%;\n min-width: 50%;\n max-width: 100%;\n background-color: #fff;\n display: inline-block;\n vertical-align: middle;\n max-height: calc(100vh - 100px);\n"], ["\n width: 100%;\n min-width: 50%;\n max-width: 100%;\n background-color: #fff;\n display: inline-block;\n vertical-align: middle;\n max-height: calc(100vh - 100px);\n"])));
|
|
19230
19278
|
var ProductContainer = newStyled.div(templateObject_13$2 || (templateObject_13$2 = __makeTemplateObject(["\n padding: 20px;\n border-top: 1px solid #eee;\n cursor: pointer;\n"], ["\n padding: 20px;\n border-top: 1px solid #eee;\n cursor: pointer;\n"])));
|
|
19231
19279
|
var ProductTitle = newStyled.div(templateObject_14$2 || (templateObject_14$2 = __makeTemplateObject(["\n align-items: center;\n margin-top: 10px;\n margin-bottom: 15px;\n font-size: 12px;\n line-height: 16px;\n text-align: center;\n max-width: 192px;\n"], ["\n align-items: center;\n margin-top: 10px;\n margin-bottom: 15px;\n font-size: 12px;\n line-height: 16px;\n text-align: center;\n max-width: 192px;\n"])));
|
|
@@ -19254,26 +19302,26 @@ var Review$1 = function (_a) {
|
|
|
19254
19302
|
}
|
|
19255
19303
|
}, [opened]);
|
|
19256
19304
|
return (jsx$1(Modal, __assign$1({ id: modalId, maxFullScreen: maxFullScreen, padding: "0" }, { children: jsxs$1(Container$B, { children: [jsx$1(CloseButton, __assign$1({ onClick: close }, { children: "X" }), void 0), jsx$1(ImageContainer$2, { children: image &&
|
|
19257
|
-
(!isVideo ? (jsx$1(ImageWrapper$
|
|
19305
|
+
(!isVideo ? (jsx$1(ImageWrapper$3, { src: image.src, alt: image.alt }, void 0)) : (jsx$1(VideoWrapper, { ref: refVideo, src: image.src, width: "100%", controls: true }, void 0))) }, void 0), jsxs$1(DescriptionContainer, { children: [opened && (jsxs$1(ReviewerName$1, { children: [reviewerName, verified && jsx$1(VerifiedText, { children: "Verified Buyer" }, void 0)] }, void 0)), jsxs$1(Content$1, __assign$1({ "data-testid": "review-detail-content" }, { children: [jsxs$1(StarsContent, { children: [jsx$1(StarList, { starsNumber: 5, rating: rating, fill: stars.color, size: stars.size }, void 0), jsx$1(DateText$1, { children: formatDate(date) }, void 0)] }, void 0), jsxs$1(ReviewContainer$1, { children: [jsx$1(ReviewTitle$1, { children: title }, void 0), jsx$1(ReviewDescription, { dangerouslySetInnerHTML: { __html: description } }, void 0)] }, void 0), jsxs$1(HelpfulContainer, { children: [jsxs$1(HelpfulAction, __assign$1({ "data-testid": "helpful-action", onClick: function () { return (helpfulAction ? helpfulAction(reviewId) : undefined); } }, { children: [jsx$1(Icon.Custom.ThumbsUp, { width: 1, height: 1, fill: "#000" }, void 0), jsx$1(HelpfulCount, { children: helpfulCount }, void 0)] }), void 0), jsxs$1(NotHelpfulAction, __assign$1({ "data-testid": "not-helpful-action", onClick: function () { return (notHelpfulAction ? notHelpfulAction(reviewId) : undefined); } }, { children: [jsx$1(Icon.Custom.ThumbsDown, { width: 1, height: 1, fill: "#000" }, void 0), jsx$1(NotHelpfulCount, { children: notHelpfulCount }, void 0)] }), void 0)] }, void 0)] }), void 0), productImage && productLink && (jsxs$1(ProductContainer, __assign$1({ onClick: function () { return (window.location.href = productLink); } }, { children: [jsx$1(ProductImageWrapper, { children: jsx$1(ProductImage, { src: productImage, alt: "productImage" }, void 0) }, void 0), jsx$1(ProductTitle, { children: productTitle }, void 0)] }), void 0))] }, void 0)] }, void 0) }), void 0));
|
|
19258
19306
|
};
|
|
19259
|
-
var templateObject_1$Q, templateObject_2$
|
|
19307
|
+
var templateObject_1$Q, templateObject_2$D, templateObject_3$A, templateObject_4$t, templateObject_5$n, templateObject_6$k, templateObject_7$i, templateObject_8$d, templateObject_9$9, templateObject_10$8, templateObject_11$5, templateObject_12$2, templateObject_13$2, templateObject_14$2, templateObject_15$1, templateObject_16$1, templateObject_17$1, templateObject_18$1, templateObject_19$1, templateObject_20, templateObject_21, templateObject_22, templateObject_23;
|
|
19260
19308
|
|
|
19261
19309
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_DESKTOP = 500;
|
|
19262
19310
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_MOBILE = 168;
|
|
19263
19311
|
var Container$A = newStyled.div(templateObject_1$P || (templateObject_1$P = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n width: auto;\n color: #292929;\n"], ["\n display: flex;\n flex-direction: column;\n width: auto;\n color: #292929;\n"])));
|
|
19264
|
-
var Heading = newStyled.div(templateObject_2$
|
|
19265
|
-
var Content = newStyled.div(templateObject_3$
|
|
19266
|
-
var ReviewContainer = newStyled.div(templateObject_4$
|
|
19312
|
+
var Heading = newStyled.div(templateObject_2$C || (templateObject_2$C = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n width: 100%;\n font-size: 14px;\n line-height: 22px;\n text-align: right;\n margin-bottom: 10px;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"], ["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n width: 100%;\n font-size: 14px;\n line-height: 22px;\n text-align: right;\n margin-bottom: 10px;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"])));
|
|
19313
|
+
var Content = newStyled.div(templateObject_3$z || (templateObject_3$z = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n"], ["\n display: flex;\n justify-content: space-between;\n"])));
|
|
19314
|
+
var ReviewContainer = newStyled.div(templateObject_4$s || (templateObject_4$s = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
19267
19315
|
var DateText = newStyled.span(templateObject_5$m || (templateObject_5$m = __makeTemplateObject(["\n font-weight: 400;\n font-size: 12px;\n line-height: 16px;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"], ["\n font-weight: 400;\n font-size: 12px;\n line-height: 16px;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"])));
|
|
19268
|
-
var VariantText = newStyled.div(templateObject_6$
|
|
19269
|
-
var ReviewerName = newStyled.h2(templateObject_7$
|
|
19270
|
-
var ReviewTitle = newStyled.h3(templateObject_8$
|
|
19316
|
+
var VariantText = newStyled.div(templateObject_6$j || (templateObject_6$j = __makeTemplateObject(["\n font-weight: 400;\n font-size: 14px;\n line-height: 22px;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"], ["\n font-weight: 400;\n font-size: 14px;\n line-height: 22px;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"])));
|
|
19317
|
+
var ReviewerName = newStyled.h2(templateObject_7$h || (templateObject_7$h = __makeTemplateObject(["\n font-weight: 600;\n margin: 0;\n font-size: 14px;\n line-height: 22px;\n\n @media (min-width: 768px) {\n font-size: 18px;\n line-height: 28px;\n }\n"], ["\n font-weight: 600;\n margin: 0;\n font-size: 14px;\n line-height: 22px;\n\n @media (min-width: 768px) {\n font-size: 18px;\n line-height: 28px;\n }\n"])));
|
|
19318
|
+
var ReviewTitle = newStyled.h3(templateObject_8$c || (templateObject_8$c = __makeTemplateObject(["\n font-size: 14px;\n line-height: 22px;\n margin: 10px 0 8px;\n font-weight: 600;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"], ["\n font-size: 14px;\n line-height: 22px;\n margin: 10px 0 8px;\n font-weight: 600;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"])));
|
|
19271
19319
|
var ReviewDescriptionDesktop = newStyled.div(templateObject_9$8 || (templateObject_9$8 = __makeTemplateObject(["\n display: none;\n\n @media (min-width: 768px) {\n display: block;\n font-weight: normal;\n font-size: 16px;\n line-height: 24px;\n margin: 0;\n white-space: pre-wrap;\n\n a.see-more {\n color: var(--colors-semantic-informative-color);\n text-decoration: underline;\n cursor: pointer;\n font-weight: 600;\n white-space: nowrap;\n }\n }\n"], ["\n display: none;\n\n @media (min-width: 768px) {\n display: block;\n font-weight: normal;\n font-size: 16px;\n line-height: 24px;\n margin: 0;\n white-space: pre-wrap;\n\n a.see-more {\n color: var(--colors-semantic-informative-color);\n text-decoration: underline;\n cursor: pointer;\n font-weight: 600;\n white-space: nowrap;\n }\n }\n"])));
|
|
19272
19320
|
var ReviewDescriptionMobile = newStyled.div(templateObject_10$7 || (templateObject_10$7 = __makeTemplateObject(["\n font-weight: normal;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n\n a.see-more {\n color: var(--colors-semantic-informative-color);\n text-decoration: underline;\n cursor: pointer;\n font-weight: 600;\n white-space: nowrap;\n }\n\n @media (min-width: 768px) {\n display: none;\n }\n"], ["\n font-weight: normal;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n\n a.see-more {\n color: var(--colors-semantic-informative-color);\n text-decoration: underline;\n cursor: pointer;\n font-weight: 600;\n white-space: nowrap;\n }\n\n @media (min-width: 768px) {\n display: none;\n }\n"])));
|
|
19273
19321
|
var ImagesContainer = newStyled.div(templateObject_11$4 || (templateObject_11$4 = __makeTemplateObject(["\n margin-left: 10px;\n text-align: right;\n"], ["\n margin-left: 10px;\n text-align: right;\n"])));
|
|
19274
19322
|
var Images = newStyled.div(templateObject_12$1 || (templateObject_12$1 = __makeTemplateObject(["\n display: flex;\n justify-content: end;\n"], ["\n display: flex;\n justify-content: end;\n"])));
|
|
19275
19323
|
var ImageSpace = newStyled.div(templateObject_13$1 || (templateObject_13$1 = __makeTemplateObject(["\n width: 7.5rem;\n height: 4.125rem;\n"], ["\n width: 7.5rem;\n height: 4.125rem;\n"])));
|
|
19276
|
-
var ImageWrapper$
|
|
19324
|
+
var ImageWrapper$2 = newStyled.div(templateObject_14$1 || (templateObject_14$1 = __makeTemplateObject(["\n cursor: zoom-in;\n display: none;\n margin-right: 4px;\n\n &:first-child {\n display: inline-block;\n }\n\n & img {\n object-fit: cover;\n }\n\n @media (min-width: 1024px) {\n display: inline-block;\n }\n"], ["\n cursor: zoom-in;\n display: none;\n margin-right: 4px;\n\n &:first-child {\n display: inline-block;\n }\n\n & img {\n object-fit: cover;\n }\n\n @media (min-width: 1024px) {\n display: inline-block;\n }\n"])));
|
|
19277
19325
|
var HelpfulContainerDesktop = newStyled.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n display: flex;\n margin-top: ", ";\n\n @media (max-width: 768px) {\n display: none;\n }\n"], ["\n display: flex;\n margin-top: ", ";\n\n @media (max-width: 768px) {\n display: none;\n }\n"])), function (_a) {
|
|
19278
19326
|
var showMoreDesktop = _a.showMoreDesktop;
|
|
19279
19327
|
return (showMoreDesktop ? '12px' : '50px');
|
|
@@ -19310,17 +19358,17 @@ var Review = function (_a) {
|
|
|
19310
19358
|
__html: showMoreDesktop
|
|
19311
19359
|
? "".concat(description.slice(0, REVIEWS_DESCRIPTION_MAX_LENGTH_DESKTOP), "... <a id=\"see-more-").concat(randomId, "\" class=\"see-more\">See more</a>")
|
|
19312
19360
|
: description,
|
|
19313
|
-
} }, void 0), jsxs$1(HelpfulContainerDesktop, __assign$1({ showMoreDesktop: description.length > REVIEWS_DESCRIPTION_MAX_LENGTH_DESKTOP }, { children: [helpfulActionText && helpfulAction && (jsx$1(ButtonSecondaryWrapper, { onClick: function () { return helpfulAction(reviewId); }, text: helpfulActionText, size: ComponentSize.Small }, void 0)), (helpfulCount || (hasTextWhenHelpfulCount0 && helpfulCount === 0)) && (jsxs$1(HelpfulText, { children: [helpfulCount, " people found this helpful"] }, void 0))] }), void 0)] }, void 0), jsxs$1(ImagesContainer, { children: [jsxs$1(Images, { children: [images === null || images === void 0 ? void 0 : images.map(function (image) { return (jsx$1(ImageWrapper$
|
|
19361
|
+
} }, void 0), jsxs$1(HelpfulContainerDesktop, __assign$1({ showMoreDesktop: description.length > REVIEWS_DESCRIPTION_MAX_LENGTH_DESKTOP }, { children: [helpfulActionText && helpfulAction && (jsx$1(ButtonSecondaryWrapper, { onClick: function () { return helpfulAction(reviewId); }, text: helpfulActionText, size: ComponentSize.Small }, void 0)), (helpfulCount || (hasTextWhenHelpfulCount0 && helpfulCount === 0)) && (jsxs$1(HelpfulText, { children: [helpfulCount, " people found this helpful"] }, void 0))] }), void 0)] }, void 0), jsxs$1(ImagesContainer, { children: [jsxs$1(Images, { children: [images === null || images === void 0 ? void 0 : images.map(function (image) { return (jsx$1(ImageWrapper$2, __assign$1({ onClick: function () { return onClickImage && onClickImage(image.src); } }, { children: jsx$1(Image$3, { src: image.src, alt: image.alt, height: "10rem", width: "7.5rem" }, void 0) }), image.src)); }), !images || (images.length === 0 && jsx$1(ImageSpace, {}, void 0))] }, void 0), jsx$1(VariantText, { children: reviewVariant }, void 0)] }, void 0)] }), void 0), jsx$1(HelpfulTexti, {}, void 0), jsxs$1(HelpfulContainerMobile, { children: [helpfulActionText && helpfulAction && (jsx$1(ButtonSecondaryWrapper, { onClick: function () { return helpfulAction(reviewId); }, text: helpfulActionText, size: ComponentSize.Small }, void 0)), (helpfulCount || (hasTextWhenHelpfulCount0 && helpfulCount === 0)) && (jsxs$1(HelpfulText, { children: [helpfulCount, " people found this helpful"] }, void 0))] }, void 0)] }, void 0));
|
|
19314
19362
|
};
|
|
19315
|
-
var templateObject_1$P, templateObject_2$
|
|
19363
|
+
var templateObject_1$P, templateObject_2$C, templateObject_3$z, templateObject_4$s, templateObject_5$m, templateObject_6$j, templateObject_7$h, templateObject_8$c, templateObject_9$8, templateObject_10$7, templateObject_11$4, templateObject_12$1, templateObject_13$1, templateObject_14$1, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19;
|
|
19316
19364
|
|
|
19317
19365
|
var Container$z = newStyled.div(templateObject_1$O || (templateObject_1$O = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: auto;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: auto;\n"])));
|
|
19318
|
-
var ReviewsContainer = newStyled.div(templateObject_2$
|
|
19319
|
-
var ReviewsCount = newStyled.div(templateObject_3$
|
|
19320
|
-
var ReviewsStars = newStyled.div(templateObject_4$
|
|
19366
|
+
var ReviewsContainer = newStyled.div(templateObject_2$B || (templateObject_2$B = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n text-align: center;\n align-items: center;\n\n @media (min-width: 768px) {\n flex-direction: row;\n gap: 30px;\n }\n"], ["\n display: flex;\n flex-direction: column;\n text-align: center;\n align-items: center;\n\n @media (min-width: 768px) {\n flex-direction: row;\n gap: 30px;\n }\n"])));
|
|
19367
|
+
var ReviewsCount = newStyled.div(templateObject_3$y || (templateObject_3$y = __makeTemplateObject(["\n display: block;\n\n @media (min-width: 768px) {\n display: flex;\n flex-direction: column;\n }\n"], ["\n display: block;\n\n @media (min-width: 768px) {\n display: flex;\n flex-direction: column;\n }\n"])));
|
|
19368
|
+
var ReviewsStars = newStyled.div(templateObject_4$r || (templateObject_4$r = __makeTemplateObject(["\n display: flex;\n margin-bottom: 10px;\n\n @media (min-width: 768px) {\n margin-bottom: 0;\n }\n"], ["\n display: flex;\n margin-bottom: 10px;\n\n @media (min-width: 768px) {\n margin-bottom: 0;\n }\n"])));
|
|
19321
19369
|
var ReviewsTextCount = newStyled(Text$7)(templateObject_5$l || (templateObject_5$l = __makeTemplateObject(["\n margin-right: 5px;\n padding-top: 6px;\n line-height: 32px;\n\n @media (min-width: 768px) {\n font-size: 42px;\n line-height: 46px;\n }\n"], ["\n margin-right: 5px;\n padding-top: 6px;\n line-height: 32px;\n\n @media (min-width: 768px) {\n font-size: 42px;\n line-height: 46px;\n }\n"])));
|
|
19322
|
-
var ReviewsImages = newStyled.div(templateObject_6$
|
|
19323
|
-
var SummaryItem = newStyled.div(templateObject_7$
|
|
19370
|
+
var ReviewsImages = newStyled.div(templateObject_6$i || (templateObject_6$i = __makeTemplateObject(["\n display: flex;\n flex-wrap: wrap;\n max-width: 348px;\n gap: 4px;\n justify-content: center;\n\n @media (min-width: 768px) {\n gap: 8px;\n max-width: 360px;\n }\n"], ["\n display: flex;\n flex-wrap: wrap;\n max-width: 348px;\n gap: 4px;\n justify-content: center;\n\n @media (min-width: 768px) {\n gap: 8px;\n max-width: 360px;\n }\n"])));
|
|
19371
|
+
var SummaryItem = newStyled.div(templateObject_7$g || (templateObject_7$g = __makeTemplateObject(["\n width: 84px;\n height: 68px;\n background: ", ";\n background-repeat: no-repeat;\n background-size: cover;\n background-position: center;\n cursor: zoom-in;\n"], ["\n width: 84px;\n height: 68px;\n background: ", ";\n background-repeat: no-repeat;\n background-size: cover;\n background-position: center;\n cursor: zoom-in;\n"])), function (_a) {
|
|
19324
19372
|
var backgroundUrl = _a.backgroundUrl;
|
|
19325
19373
|
return "url(".concat(backgroundUrl, ")");
|
|
19326
19374
|
});
|
|
@@ -19330,17 +19378,17 @@ var ReviewsHeader = function (_a) {
|
|
|
19330
19378
|
var theme = useTheme();
|
|
19331
19379
|
return (jsxs$1(Container$z, { children: [jsx$1(Text$7, __assign$1({ variant: "heading3", weight: "bold", style: { margin: '10px 0' } }, { children: title }), void 0), jsxs$1(ReviewsContainer, { children: [jsxs$1(ReviewsCount, { children: [jsxs$1(ReviewsStars, { children: [jsx$1(ReviewsTextCount, __assign$1({ variant: "heading3", weight: "bold" }, { children: rating }), void 0), jsx$1(StarList, { rating: rating, size: ComponentSize.Medium, starsNumber: starsNumber, fill: theme.component.stars.element.color }, void 0)] }, void 0), jsxs$1(Text$7, __assign$1({ variant: "body", size: "small", weight: "regular", style: { marginBottom: '20px' } }, { children: [reviews, " ", reviewsText] }), void 0)] }, void 0), jsx$1(ReviewsImages, { children: reviewsSummary.map(function (summaryItem) { return (jsx$1(SummaryItem, { onClick: function () { return onClickReview(summaryItem); }, backgroundUrl: summaryItem, "data-testid": "summary-review-item" }, summaryItem)); }) }, void 0)] }, void 0)] }, void 0));
|
|
19332
19380
|
};
|
|
19333
|
-
var templateObject_1$O, templateObject_2$
|
|
19381
|
+
var templateObject_1$O, templateObject_2$B, templateObject_3$y, templateObject_4$r, templateObject_5$l, templateObject_6$i, templateObject_7$g;
|
|
19334
19382
|
|
|
19335
19383
|
var Container$y = newStyled.div(templateObject_1$N || (templateObject_1$N = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n cursor: pointer;\n user-select: none;\n"], ["\n display: inline-flex;\n align-items: center;\n cursor: pointer;\n user-select: none;\n"])));
|
|
19336
|
-
var Text$1 = newStyled.p(templateObject_2$
|
|
19384
|
+
var Text$1 = newStyled.p(templateObject_2$A || (templateObject_2$A = __makeTemplateObject(["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 700;\n color: ", ";\n margin-right: 0.313rem;\n"], ["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 700;\n color: ", ";\n margin-right: 0.313rem;\n"])), function (props) { return props.color; });
|
|
19337
19385
|
var ScrollToTop = function (_a) {
|
|
19338
19386
|
var scrollToTopText = _a.scrollToTopText, onClick = _a.onClick, fill = _a.fill, _b = _a.Icon, Icon$1 = _b === void 0 ? Icon.Arrows.CircleChevronUp : _b;
|
|
19339
19387
|
var theme = useTheme();
|
|
19340
19388
|
var fillValue = fill || theme.colors.pallete.primary.color;
|
|
19341
19389
|
return (jsxs$1(Container$y, __assign$1({ onClick: onClick, "data-testid": "scrollTopContainer" }, { children: [jsx$1(Text$1, __assign$1({ color: theme.colors.shades['700'].color }, { children: scrollToTopText }), void 0), jsx$1(Icon$1, { width: 1.375, height: 1.375, fill: fillValue }, void 0)] }), void 0));
|
|
19342
19390
|
};
|
|
19343
|
-
var templateObject_1$N, templateObject_2$
|
|
19391
|
+
var templateObject_1$N, templateObject_2$A;
|
|
19344
19392
|
|
|
19345
19393
|
var Button$5 = newStyled.button(templateObject_1$M || (templateObject_1$M = __makeTemplateObject(["\n position: absolute;\n right: 1rem;\n background: white;\n border: none;\n align-self: center;\n padding: 0;\n ", "\n"], ["\n position: absolute;\n right: 1rem;\n background: white;\n border: none;\n align-self: center;\n padding: 0;\n ", "\n"])), mediaQueries({
|
|
19346
19394
|
right: ['1rem', '7.75rem'],
|
|
@@ -19404,15 +19452,15 @@ var Anchor = newStyled.a({
|
|
|
19404
19452
|
padding: 0,
|
|
19405
19453
|
textDecoration: 'none',
|
|
19406
19454
|
});
|
|
19407
|
-
var Container$v = newStyled.div(templateObject_2$
|
|
19455
|
+
var Container$v = newStyled.div(templateObject_2$z || (templateObject_2$z = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n margin: 0rem;\n padding: 0rem;\n position: absolute;\n width: 100%;\n background-color: white;\n box-sizing: border-box;\n z-index: 2;\n ", "\n"], ["\n display: flex;\n flex-direction: column;\n margin: 0rem;\n padding: 0rem;\n position: absolute;\n width: 100%;\n background-color: white;\n box-sizing: border-box;\n z-index: 2;\n ", "\n"])), mediaQueries({
|
|
19408
19456
|
border: ['none', '0.063rem solid var(--colors-pallete-secondary-color)'],
|
|
19409
19457
|
marginTop: ['1.25rem', '0.125rem'],
|
|
19410
19458
|
borderRadius: ['0', '0.5rem'],
|
|
19411
19459
|
}));
|
|
19412
|
-
var Header$2 = newStyled.div(templateObject_3$
|
|
19460
|
+
var Header$2 = newStyled.div(templateObject_3$x || (templateObject_3$x = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), mediaQueries({
|
|
19413
19461
|
margin: ['0rem 0rem 1rem 0rem', '1rem'],
|
|
19414
19462
|
}));
|
|
19415
|
-
var templateObject_1$K, templateObject_2$
|
|
19463
|
+
var templateObject_1$K, templateObject_2$z, templateObject_3$x;
|
|
19416
19464
|
|
|
19417
19465
|
var ResultsPanel = function (_a) {
|
|
19418
19466
|
var options = _a.options, header = _a.header, footer = _a.footer, onViewAll = _a.onViewAll, testId = _a.testId;
|
|
@@ -19545,11 +19593,11 @@ var SearchBar = function (_a) {
|
|
|
19545
19593
|
};
|
|
19546
19594
|
|
|
19547
19595
|
var Container$t = newStyled.div(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["\n display: flex;\n flex-wrap: wrap;\n padding: 0 1rem 1rem;\n"], ["\n display: flex;\n flex-wrap: wrap;\n padding: 0 1rem 1rem;\n"])));
|
|
19548
|
-
var BackArrow = newStyled.div(templateObject_2$
|
|
19549
|
-
var BoldSpan = newStyled.span(templateObject_3$
|
|
19550
|
-
var NormalSpan = newStyled.span(templateObject_4$
|
|
19596
|
+
var BackArrow = newStyled.div(templateObject_2$y || (templateObject_2$y = __makeTemplateObject(["\n transform: rotate(180deg);\n margin-right: 0.5rem;\n"], ["\n transform: rotate(180deg);\n margin-right: 0.5rem;\n"])));
|
|
19597
|
+
var BoldSpan = newStyled.span(templateObject_3$w || (templateObject_3$w = __makeTemplateObject(["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 600;\n"], ["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 600;\n"])));
|
|
19598
|
+
var NormalSpan = newStyled.span(templateObject_4$q || (templateObject_4$q = __makeTemplateObject(["\n font-size: 0.875rem;\n line-height: 1.375rem;\n white-space: pre;\n"], ["\n font-size: 0.875rem;\n line-height: 1.375rem;\n white-space: pre;\n"])));
|
|
19551
19599
|
var SearchNavigationParents = newStyled.div(templateObject_5$k || (templateObject_5$k = __makeTemplateObject(["\n display: flex;\n flex-wrap: wrap;\n padding-left: 1.25rem;\n padding-right: 1rem;\n"], ["\n display: flex;\n flex-wrap: wrap;\n padding-left: 1.25rem;\n padding-right: 1rem;\n"])));
|
|
19552
|
-
var templateObject_1$I, templateObject_2$
|
|
19600
|
+
var templateObject_1$I, templateObject_2$y, templateObject_3$w, templateObject_4$q, templateObject_5$k;
|
|
19553
19601
|
|
|
19554
19602
|
var SearchNavigation = function (_a) {
|
|
19555
19603
|
var returnText = _a.returnText, returnUrl = _a.returnUrl, _b = _a.steps, steps = _b === void 0 ? [] : _b, returnAction = _a.returnAction;
|
|
@@ -19568,26 +19616,26 @@ var Container$s = newStyled.div(templateObject_1$H || (templateObject_1$H = __ma
|
|
|
19568
19616
|
}, function (props) { return props.backgroundColor; }, function (props) { return props.textColor; }, function (props) {
|
|
19569
19617
|
return props.border ? "".concat(props.border.borderWidth, " solid ").concat(props.border.borderColor) : 'none';
|
|
19570
19618
|
});
|
|
19571
|
-
var TitleText = newStyled.div(templateObject_2$
|
|
19572
|
-
var BannerText = newStyled.div(templateObject_3$
|
|
19619
|
+
var TitleText = newStyled.div(templateObject_2$x || (templateObject_2$x = __makeTemplateObject(["\n font-style: normal;\n font-weight: 700;\n line-height: 267%;\n margin: 0px 20px 0px;\n font-size: 30px;\n @media (max-width: 768px) {\n font-size: 24px;\n }\n"], ["\n font-style: normal;\n font-weight: 700;\n line-height: 267%;\n margin: 0px 20px 0px;\n font-size: 30px;\n @media (max-width: 768px) {\n font-size: 24px;\n }\n"])));
|
|
19620
|
+
var BannerText = newStyled.div(templateObject_3$v || (templateObject_3$v = __makeTemplateObject(["\n font-style: normal;\n font-weight: 400;\n line-height: 120%;\n font-size: 20px;\n letter-spacing: -0.02em;\n margin: 0px 20px 20px;\n width: 70%;\n @media (max-width: 768px) {\n font-size: 16px;\n width: 80%;\n }\n"], ["\n font-style: normal;\n font-weight: 400;\n line-height: 120%;\n font-size: 20px;\n letter-spacing: -0.02em;\n margin: 0px 20px 20px;\n width: 70%;\n @media (max-width: 768px) {\n font-size: 16px;\n width: 80%;\n }\n"])));
|
|
19573
19621
|
var ShortBanner = function (_a) {
|
|
19574
19622
|
var textColor = _a.textColor, title = _a.title, bannerText = _a.bannerText, backgroundColor = _a.backgroundColor, _b = _a.alignCenter, alignCenter = _b === void 0 ? false : _b, _c = _a.widthAuto, widthAuto = _c === void 0 ? true : _c;
|
|
19575
19623
|
var theme = useTheme();
|
|
19576
19624
|
return (jsxs$1(Container$s, __assign$1({ backgroundColor: backgroundColor, alignCenter: alignCenter, widthAuto: widthAuto, "data-testid": "BannerContainer", theme: theme, textColor: textColor }, { children: [jsx$1(TitleText, { children: title }, void 0), jsx$1(BannerText, { children: bannerText }, void 0)] }), void 0));
|
|
19577
19625
|
};
|
|
19578
|
-
var templateObject_1$H, templateObject_2$
|
|
19626
|
+
var templateObject_1$H, templateObject_2$x, templateObject_3$v;
|
|
19579
19627
|
|
|
19580
19628
|
var TableElement$3 = newStyled.table(templateObject_1$G || (templateObject_1$G = __makeTemplateObject(["\n position: relative;\n box-sizing: border-box;\n border-radius: 0.5rem;\n border: 0.063rem solid ", ";\n border-spacing: 0;\n font-size: 0.875rem;\n line-height: 3.125rem;\n width: 100%;\n color: ", ";\n"], ["\n position: relative;\n box-sizing: border-box;\n border-radius: 0.5rem;\n border: 0.063rem solid ", ";\n border-spacing: 0;\n font-size: 0.875rem;\n line-height: 3.125rem;\n width: 100%;\n color: ", ";\n"])), function (props) { return props.borderColor; }, function (props) { return props.color; });
|
|
19581
|
-
var TableCell$3 = newStyled.td(templateObject_2$
|
|
19582
|
-
var TableHead$3 = newStyled.th(templateObject_3$
|
|
19583
|
-
var Label$2 = newStyled('div')(templateObject_4$
|
|
19629
|
+
var TableCell$3 = newStyled.td(templateObject_2$w || (templateObject_2$w = __makeTemplateObject(["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n line-height: normal;\n padding: 1rem;\n text-align: start;\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n font-weight: 700;\n text-align: center;\n }\n"], ["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n line-height: normal;\n padding: 1rem;\n text-align: start;\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n font-weight: 700;\n text-align: center;\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.borderColor; });
|
|
19630
|
+
var TableHead$3 = newStyled.th(templateObject_3$u || (templateObject_3$u = __makeTemplateObject(["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n font-weight: 700;\n line-height: normal;\n padding: 1rem;\n text-align: start;\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n text-align: center;\n }\n"], ["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n font-weight: 700;\n line-height: normal;\n padding: 1rem;\n text-align: start;\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n text-align: center;\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.borderColor; });
|
|
19631
|
+
var Label$2 = newStyled('div')(templateObject_4$p || (templateObject_4$p = __makeTemplateObject(["\n gap: 15px;\n width: 100%;\n display: flex;\n font-size: 14px;\n font-weight: 600;\n align-items: center;\n justify-content: center;\n"], ["\n gap: 15px;\n width: 100%;\n display: flex;\n font-size: 14px;\n font-weight: 600;\n align-items: center;\n justify-content: center;\n"])));
|
|
19584
19632
|
var TopLabel$1 = newStyled(Label$2)(templateObject_5$j || (templateObject_5$j = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
19585
|
-
var LeftLabel$1 = newStyled(Label$2)(templateObject_6$
|
|
19586
|
-
var Container$r = newStyled('div')(templateObject_7$
|
|
19587
|
-
var LabelText$1 = newStyled('span')(templateObject_8$
|
|
19633
|
+
var LeftLabel$1 = newStyled(Label$2)(templateObject_6$h || (templateObject_6$h = __makeTemplateObject(["\n width: 20px;\n transform: rotate(270deg);\n"], ["\n width: 20px;\n transform: rotate(270deg);\n"])));
|
|
19634
|
+
var Container$r = newStyled('div')(templateObject_7$f || (templateObject_7$f = __makeTemplateObject(["\n gap: 5px;\n display: flex;\n width: fit-content;\n align-items: center;\n"], ["\n gap: 5px;\n display: flex;\n width: fit-content;\n align-items: center;\n"])));
|
|
19635
|
+
var LabelText$1 = newStyled('span')(templateObject_8$b || (templateObject_8$b = __makeTemplateObject(["\n display: flex;\n min-width: 70px;\n justify-content: center;\n"], ["\n display: flex;\n min-width: 70px;\n justify-content: center;\n"])));
|
|
19588
19636
|
var Column$2 = newStyled('div')(templateObject_9$7 || (templateObject_9$7 = __makeTemplateObject(["\n display: flex;\n min-width: 675px;\n align-items: center;\n flex-direction: column;\n\n @media (max-width: 768px) {\n min-width: 100%;\n }\n"], ["\n display: flex;\n min-width: 675px;\n align-items: center;\n flex-direction: column;\n\n @media (max-width: 768px) {\n min-width: 100%;\n }\n"])));
|
|
19589
19637
|
var TableRow$3 = newStyled.tr(templateObject_10$6 || (templateObject_10$6 = __makeTemplateObject(["\n &:last-child {\n td {\n border-bottom: none;\n }\n }\n\n &.background {\n background-color: ", ";\n }\n"], ["\n &:last-child {\n td {\n border-bottom: none;\n }\n }\n\n &.background {\n background-color: ", ";\n }\n"])), function (props) { return props.backgroundColor; });
|
|
19590
|
-
var templateObject_1$G, templateObject_2$
|
|
19638
|
+
var templateObject_1$G, templateObject_2$w, templateObject_3$u, templateObject_4$p, templateObject_5$j, templateObject_6$h, templateObject_7$f, templateObject_8$b, templateObject_9$7, templateObject_10$6;
|
|
19591
19639
|
|
|
19592
19640
|
var getIsOdd$2 = function (number) { return number % 2 !== 0; };
|
|
19593
19641
|
var getCellColor$2 = function (index, cell) {
|
|
@@ -19629,15 +19677,15 @@ var SizeChartTable = function (_a) {
|
|
|
19629
19677
|
};
|
|
19630
19678
|
|
|
19631
19679
|
var TableElement$2 = newStyled.table(templateObject_1$F || (templateObject_1$F = __makeTemplateObject(["\n box-sizing: border-box;\n border-radius: 0.5rem;\n border: 0.063rem solid ", ";\n border-spacing: 0;\n font-size: 0.875rem;\n line-height: 3.125rem;\n width: 100%;\n color: ", ";\n"], ["\n box-sizing: border-box;\n border-radius: 0.5rem;\n border: 0.063rem solid ", ";\n border-spacing: 0;\n font-size: 0.875rem;\n line-height: 3.125rem;\n width: 100%;\n color: ", ";\n"])), function (props) { return props.borderColor; }, function (props) { return props.color; });
|
|
19632
|
-
var TableCell$2 = newStyled.td(templateObject_2$
|
|
19633
|
-
var TableHead$2 = newStyled.th(templateObject_3$
|
|
19634
|
-
var TableRow$2 = newStyled.tr(templateObject_4$
|
|
19680
|
+
var TableCell$2 = newStyled.td(templateObject_2$v || (templateObject_2$v = __makeTemplateObject(["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n padding: 8px;\n text-align: center;\n line-height: 20px;\n height: 52px;\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n font-weight: 700;\n }\n"], ["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n padding: 8px;\n text-align: center;\n line-height: 20px;\n height: 52px;\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n font-weight: 700;\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.borderColor; });
|
|
19681
|
+
var TableHead$2 = newStyled.th(templateObject_3$t || (templateObject_3$t = __makeTemplateObject(["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n font-weight: 700;\n\n &:last-child {\n border-right: none;\n }\n"], ["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n font-weight: 700;\n\n &:last-child {\n border-right: none;\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.borderColor; });
|
|
19682
|
+
var TableRow$2 = newStyled.tr(templateObject_4$o || (templateObject_4$o = __makeTemplateObject(["\n &:last-child {\n td {\n border-bottom: none;\n }\n }\n\n &.background {\n background-color: ", ";\n }\n"], ["\n &:last-child {\n td {\n border-bottom: none;\n }\n }\n\n &.background {\n background-color: ", ";\n }\n"])), function (props) { return props.backgroundColor; });
|
|
19635
19683
|
var SizeTable = function (_a) {
|
|
19636
19684
|
var headers = _a.headers, data = _a.data, className = _a.className;
|
|
19637
19685
|
var theme = useTheme();
|
|
19638
19686
|
return (jsxs$1(TableElement$2, __assign$1({ color: theme.colors.shades['700'].color, borderColor: theme.colors.shades['100'].color, className: className }, { children: [jsx$1("thead", { children: jsx$1(TableRow$2, __assign$1({ backgroundColor: theme.colors.shades['10'].color }, { children: headers.map(function (header, index) { return (jsx$1(TableHead$2, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: header }), index)); }) }), void 0) }, void 0), jsx$1("tbody", { children: data.map(function (row, index) { return (jsx$1(TableRow$2, __assign$1({ className: index % 2 !== 0 ? '' : 'background', backgroundColor: theme.colors.shades['10'].color }, { children: row.map(function (cell, index) { return (jsx$1(TableCell$2, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }), index)); }) }, void 0)] }), void 0));
|
|
19639
19687
|
};
|
|
19640
|
-
var templateObject_1$F, templateObject_2$
|
|
19688
|
+
var templateObject_1$F, templateObject_2$v, templateObject_3$t, templateObject_4$o;
|
|
19641
19689
|
|
|
19642
19690
|
var getStylesBySize$7 = function (size) {
|
|
19643
19691
|
switch (size) {
|
|
@@ -19683,20 +19731,20 @@ var TextButton = function (_a) {
|
|
|
19683
19731
|
var templateObject_1$E;
|
|
19684
19732
|
|
|
19685
19733
|
var Container$q = newStyled.div(templateObject_1$D || (templateObject_1$D = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n font-size: 0.88rem;\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n font-size: 0.88rem;\n"])));
|
|
19686
|
-
var P = newStyled.p(templateObject_2$
|
|
19687
|
-
var PercentageSpan = newStyled.span(templateObject_3$
|
|
19734
|
+
var P = newStyled.p(templateObject_2$u || (templateObject_2$u = __makeTemplateObject(["\n margin: 0 0 0 10px;\n"], ["\n margin: 0 0 0 10px;\n"])));
|
|
19735
|
+
var PercentageSpan = newStyled.span(templateObject_3$s || (templateObject_3$s = __makeTemplateObject(["\n font-weight: 700;\n text-decoration-line: underline;\n cursor: pointer;\n"], ["\n font-weight: 700;\n text-decoration-line: underline;\n cursor: pointer;\n"])));
|
|
19688
19736
|
var SizeFitGuide = function (_a) {
|
|
19689
19737
|
var title = _a.title, fitPercentage = _a.fitPercentage, onClick = _a.onClick, onClickFitPercentage = _a.onClickFitPercentage, _b = _a.hideIcon, hideIcon = _b === void 0 ? false : _b;
|
|
19690
19738
|
return (jsxs$1(Container$q, { children: [jsx$1(TextButton, { LeadingIcon: hideIcon ? undefined : Icon.PDP.Rule, size: ComponentSize.Small, text: title, onClick: onClick, uppercase: false }, void 0), !!fitPercentage && (jsxs$1(P, { children: ["Fit As Expected:", ' ', jsxs$1(PercentageSpan, __assign$1({ onClick: onClickFitPercentage, role: "button" }, { children: [fitPercentage, "%"] }), void 0)] }, void 0))] }, void 0));
|
|
19691
19739
|
};
|
|
19692
|
-
var templateObject_1$D, templateObject_2$
|
|
19740
|
+
var templateObject_1$D, templateObject_2$u, templateObject_3$s;
|
|
19693
19741
|
|
|
19694
19742
|
var ButtonsContainer = newStyled.div(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n margin: ", ";\n"], ["\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n margin: ", ";\n"])), function (_a) {
|
|
19695
19743
|
var inline = _a.inline;
|
|
19696
19744
|
return (inline ? '0 0 0 10px' : '8px 0 0 0');
|
|
19697
19745
|
});
|
|
19698
|
-
var Row = newStyled.div(templateObject_2$
|
|
19699
|
-
var templateObject_1$C, templateObject_2$
|
|
19746
|
+
var Row = newStyled.div(templateObject_2$t || (templateObject_2$t = __makeTemplateObject(["\n gap: 5px;\n display: flex;\n margin: 8px 0 0;\n flex-wrap: wrap;\n\n & button {\n font-weight: 600;\n }\n"], ["\n gap: 5px;\n display: flex;\n margin: 8px 0 0;\n flex-wrap: wrap;\n\n & button {\n font-weight: 600;\n }\n"])));
|
|
19747
|
+
var templateObject_1$C, templateObject_2$t;
|
|
19700
19748
|
|
|
19701
19749
|
var SizeSelector = function (_a) {
|
|
19702
19750
|
var _b;
|
|
@@ -19738,15 +19786,15 @@ var Tab = function (_a) {
|
|
|
19738
19786
|
var templateObject_1$B;
|
|
19739
19787
|
|
|
19740
19788
|
var Container$p = newStyled.div(templateObject_1$A || (templateObject_1$A = __makeTemplateObject(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
|
|
19741
|
-
var TabList = newStyled.div(templateObject_2$
|
|
19789
|
+
var TabList = newStyled.div(templateObject_2$s || (templateObject_2$s = __makeTemplateObject(["\n background-color: ", ";\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n padding: 0 25px;\n ", ";\n"], ["\n background-color: ", ";\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n padding: 0 25px;\n ", ";\n"])), function (_a) {
|
|
19742
19790
|
var backgroundColor = _a.backgroundColor;
|
|
19743
19791
|
return backgroundColor;
|
|
19744
19792
|
}, function (_a) {
|
|
19745
19793
|
var borderColor = _a.borderColor;
|
|
19746
19794
|
return (borderColor ? "border-bottom: 1px solid ".concat(borderColor) : '');
|
|
19747
19795
|
});
|
|
19748
|
-
var TabContent = newStyled.div(templateObject_3$
|
|
19749
|
-
var TabSeparator = newStyled.div(templateObject_4$
|
|
19796
|
+
var TabContent = newStyled.div(templateObject_3$r || (templateObject_3$r = __makeTemplateObject(["\n display: block;\n"], ["\n display: block;\n"])));
|
|
19797
|
+
var TabSeparator = newStyled.div(templateObject_4$n || (templateObject_4$n = __makeTemplateObject(["\n color: var(--colors-shades-white-color);\n font-family: initial;\n font-size: 40px;\n line-height: 69px;\n padding: 0 25px;\n"], ["\n color: var(--colors-shades-white-color);\n font-family: initial;\n font-size: 40px;\n line-height: 69px;\n padding: 0 25px;\n"])));
|
|
19750
19798
|
var Tabs = function (_a) {
|
|
19751
19799
|
var _b;
|
|
19752
19800
|
var _c = _a.backgroundColor, backgroundColor = _c === void 0 ? 'var(--colors-pallete-primary-color)' : _c, _d = _a.selectedBorderColor, selectedBorderColor = _d === void 0 ? 'var(--colors-pallete-primary-color)' : _d, _e = _a.fixedBorderColor, fixedBorderColor = _e === void 0 ? '' : _e, tabs = _a.tabs, initialSelected = _a.initialSelected, tabsMaxWidth = _a.tabsMaxWidth;
|
|
@@ -19757,7 +19805,7 @@ var Tabs = function (_a) {
|
|
|
19757
19805
|
var selectedContent = (_b = tabs.find(function (tab) { return tab.title === selectedTab; })) === null || _b === void 0 ? void 0 : _b.content;
|
|
19758
19806
|
return (jsxs$1(Container$p, __assign$1({ "data-testid": "tabs-container" }, { children: [jsx$1(TabList, __assign$1({ backgroundColor: backgroundColor, borderColor: fixedBorderColor }, { children: tabs.map(function (tab, index) { return (jsxs$1(React__default.Fragment, { children: [jsx$1(Tab, { title: tab.title, selected: selectedTab === tab.title, onClick: setSelectedTab, tabsMaxWidth: tabsMaxWidth, color: selectedBorderColor }, tab.title), index + 1 < tabs.length && jsx$1(TabSeparator, { children: "|" }, void 0)] }, tab.title)); }) }), void 0), jsx$1(TabContent, __assign$1({ "data-testid": "tab-content" }, { children: selectedContent }), void 0)] }), void 0));
|
|
19759
19807
|
};
|
|
19760
|
-
var templateObject_1$A, templateObject_2$
|
|
19808
|
+
var templateObject_1$A, templateObject_2$s, templateObject_3$r, templateObject_4$n;
|
|
19761
19809
|
|
|
19762
19810
|
var Container$o = newStyled.div(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n width: fit-content;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n width: fit-content;\n"])));
|
|
19763
19811
|
var Tag = function (_a) {
|
|
@@ -19877,9 +19925,9 @@ var SeasonOfferRoundedTag = function (_a) {
|
|
|
19877
19925
|
return (jsx(Tag, { css: __assign$1({ backgroundColor: backgroundColor, fontWeight: 700, color: '#FFFFFF', textAlign: 'center', borderRadius: '50%' }, stylesBySize), text: text, className: className }, void 0));
|
|
19878
19926
|
};
|
|
19879
19927
|
|
|
19880
|
-
var ImageWrapper$
|
|
19881
|
-
var VideoOverlay$1 = newStyled.div(templateObject_2$
|
|
19882
|
-
var FullscreenVideo = newStyled.div(templateObject_3$
|
|
19928
|
+
var ImageWrapper$1 = newStyled.div(templateObject_1$y || (templateObject_1$y = __makeTemplateObject(["\n position: relative;\n display: flex;\n max-height: fit-content;\n"], ["\n position: relative;\n display: flex;\n max-height: fit-content;\n"])));
|
|
19929
|
+
var VideoOverlay$1 = newStyled.div(templateObject_2$r || (templateObject_2$r = __makeTemplateObject(["\n position: absolute;\n width: 100%;\n height: 100%;\n background-color: rgba(247, 160, 139, 0.1);\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n top: 0;\n left: 0;\n border-radius: 25px;\n color: #ffffff;\n gap: 15px;\n cursor: pointer;\n text-align: center;\n @media (max-width: 768px) {\n justify-content: end;\n gap: 10px;\n padding-bottom: 20px;\n text-align: center;\n }\n"], ["\n position: absolute;\n width: 100%;\n height: 100%;\n background-color: rgba(247, 160, 139, 0.1);\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n top: 0;\n left: 0;\n border-radius: 25px;\n color: #ffffff;\n gap: 15px;\n cursor: pointer;\n text-align: center;\n @media (max-width: 768px) {\n justify-content: end;\n gap: 10px;\n padding-bottom: 20px;\n text-align: center;\n }\n"])));
|
|
19930
|
+
var FullscreenVideo = newStyled.div(templateObject_3$q || (templateObject_3$q = __makeTemplateObject(["\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.7);\n z-index: 9999;\n"], ["\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.7);\n z-index: 9999;\n"])));
|
|
19883
19931
|
var ImageVideo = function (_a) {
|
|
19884
19932
|
var imageLink = _a.imageLink, isVideo = _a.isVideo, isMobile = _a.isMobile;
|
|
19885
19933
|
var video = useRef(null);
|
|
@@ -19887,7 +19935,7 @@ var ImageVideo = function (_a) {
|
|
|
19887
19935
|
var handleOnClick = function () {
|
|
19888
19936
|
setOpened(true);
|
|
19889
19937
|
};
|
|
19890
|
-
return (jsxs$1(Fragment$2, { children: [jsxs$1(ImageWrapper$
|
|
19938
|
+
return (jsxs$1(Fragment$2, { children: [jsxs$1(ImageWrapper$1, { children: [jsx$1(Image$3, { src: imageLink, alt: "#", width: "100%", height: isMobile ? '400px' : '100%', borderRadius: "16px", objectFit: "cover" }, void 0), isVideo && (jsx$1(Text$7, __assign$1({ variant: "link", onClick: handleOnClick }, { children: jsxs$1(VideoOverlay$1, { children: [jsx$1(Text$7, __assign$1({ variant: "heading3", style: { color: isVideo.textColor, fontSize: isMobile ? '42px' : '56px' } }, { children: isVideo.videoTitle }), void 0), jsx$1(Text$7, __assign$1({ variant: "body", weight: "demi", style: { color: isVideo.textColor } }, { children: isVideo.videoSubtitle }), void 0), jsx$1(Icon.Other.Play, { fill: "#ffffff", width: 6.125, height: 6.125 }, void 0)] }, void 0) }), void 0))] }, void 0), opened && (jsxs$1(FullscreenVideo, { children: [jsx$1(Text$7, __assign$1({ variant: "link", style: {
|
|
19891
19939
|
position: 'absolute',
|
|
19892
19940
|
top: '10px',
|
|
19893
19941
|
right: '10px',
|
|
@@ -19899,12 +19947,12 @@ var ImageVideo = function (_a) {
|
|
|
19899
19947
|
height: '100%',
|
|
19900
19948
|
} }, void 0)] }, void 0))] }, void 0));
|
|
19901
19949
|
};
|
|
19902
|
-
var templateObject_1$y, templateObject_2$
|
|
19950
|
+
var templateObject_1$y, templateObject_2$r, templateObject_3$q;
|
|
19903
19951
|
|
|
19904
19952
|
var ContainerDesktop = css(templateObject_1$x || (templateObject_1$x = __makeTemplateObject(["\n flex: 0 0 50%;\n justify-content: space-around;\n height: 574px;\n"], ["\n flex: 0 0 50%;\n justify-content: space-around;\n height: 574px;\n"])));
|
|
19905
|
-
var ContainerMobile = css(templateObject_2$
|
|
19906
|
-
var Container$n = newStyled.div(templateObject_3$
|
|
19907
|
-
var TextContainer = newStyled.div(templateObject_4$
|
|
19953
|
+
var ContainerMobile = css(templateObject_2$q || (templateObject_2$q = __makeTemplateObject(["\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 16px;\n height: auto;\n @media (max-width: 768px) {\n max-height: fit-content;\n padding: 50px 15px;\n }\n"], ["\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 16px;\n height: auto;\n @media (max-width: 768px) {\n max-height: fit-content;\n padding: 50px 15px;\n }\n"])));
|
|
19954
|
+
var Container$n = newStyled.div(templateObject_3$p || (templateObject_3$p = __makeTemplateObject(["\n padding: 60px 34px 40px 34px;\n display: flex;\n @media (min-width: 769px) {\n ", "\n }\n @media (max-width: 768px) {\n ", "\n }\n"], ["\n padding: 60px 34px 40px 34px;\n display: flex;\n @media (min-width: 769px) {\n ", "\n }\n @media (max-width: 768px) {\n ", "\n }\n"])), ContainerDesktop, ContainerMobile);
|
|
19955
|
+
var TextContainer = newStyled.div(templateObject_4$m || (templateObject_4$m = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 0 15px;\n gap: 24px;\n text-align: center;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 0 15px;\n gap: 24px;\n text-align: center;\n"])));
|
|
19908
19956
|
var TextWithImage = function (_a) {
|
|
19909
19957
|
var _b, _c, _d, _e;
|
|
19910
19958
|
var title = _a.title, text = _a.text, children = _a.children, buttomText = _a.buttomText, backgroundColor = _a.backgroundColor, imageLeftSide = _a.imageLeftSide, titleStyle = _a.titleStyle, textStyle = _a.textStyle, _f = _a.buttonWideOnMobile, buttonWideOnMobile = _f === void 0 ? false : _f, props = __rest(_a, ["title", "text", "children", "buttomText", "backgroundColor", "imageLeftSide", "titleStyle", "textStyle", "buttonWideOnMobile"]);
|
|
@@ -19934,7 +19982,7 @@ var TextWithImage = function (_a) {
|
|
|
19934
19982
|
},
|
|
19935
19983
|
} }, void 0), jsx("div", { children: props.contentAfterButton }, void 0)] }, void 0), !imageLeftSide && !isMobile && (jsx(ImageVideo, { imageLink: (_d = props.imgVideo) === null || _d === void 0 ? void 0 : _d.imageLink, isMobile: isMobile, isVideo: (_e = props.imgVideo) === null || _e === void 0 ? void 0 : _e.isVideo }, void 0))] }), void 0));
|
|
19936
19984
|
};
|
|
19937
|
-
var templateObject_1$x, templateObject_2$
|
|
19985
|
+
var templateObject_1$x, templateObject_2$q, templateObject_3$p, templateObject_4$m;
|
|
19938
19986
|
|
|
19939
19987
|
var slideInAnimation = function (distanceFromTop) {
|
|
19940
19988
|
if (distanceFromTop === void 0) { distanceFromTop = '124px'; }
|
|
@@ -19942,10 +19990,10 @@ var slideInAnimation = function (distanceFromTop) {
|
|
|
19942
19990
|
};
|
|
19943
19991
|
var mobileSlideInAnimation = function (distanceFromTop) {
|
|
19944
19992
|
if (distanceFromTop === void 0) { distanceFromTop = '85px'; }
|
|
19945
|
-
return keyframes(templateObject_2$
|
|
19993
|
+
return keyframes(templateObject_2$p || (templateObject_2$p = __makeTemplateObject(["\n from {\n top: 0;\n }\n to {\n top: ", ";\n }\n"], ["\n from {\n top: 0;\n }\n to {\n top: ", ";\n }\n"])), distanceFromTop);
|
|
19946
19994
|
};
|
|
19947
|
-
var ToastContainer = newStyled.div(templateObject_3$
|
|
19948
|
-
var ToastContent = newStyled.div(templateObject_4$
|
|
19995
|
+
var ToastContainer = newStyled.div(templateObject_3$o || (templateObject_3$o = __makeTemplateObject(["\n width: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n z-index: 1000;\n"], ["\n width: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n z-index: 1000;\n"])));
|
|
19996
|
+
var ToastContent = newStyled.div(templateObject_4$l || (templateObject_4$l = __makeTemplateObject(["\n position: fixed;\n top: ", ";\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 12px;\n border-radius: 8px;\n background: #fff;\n box-shadow: 0 6px 24px -6px rgba(0, 0, 0, 0.2);\n width: 730px;\n animation: ", " 0.5s ease;\n\n @media (max-width: 768px) {\n width: calc(100vw - 32px);\n top: ", ";\n min-width: auto;\n animation: ", " 0.5s ease;\n }\n"], ["\n position: fixed;\n top: ", ";\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 12px;\n border-radius: 8px;\n background: #fff;\n box-shadow: 0 6px 24px -6px rgba(0, 0, 0, 0.2);\n width: 730px;\n animation: ", " 0.5s ease;\n\n @media (max-width: 768px) {\n width: calc(100vw - 32px);\n top: ", ";\n min-width: auto;\n animation: ", " 0.5s ease;\n }\n"])), function (_a) {
|
|
19949
19997
|
var distanceFromTop = _a.distanceFromTop;
|
|
19950
19998
|
return distanceFromTop || '124px';
|
|
19951
19999
|
}, function (_a) {
|
|
@@ -19962,8 +20010,8 @@ var ToastText = newStyled.p(templateObject_5$i || (templateObject_5$i = __makeTe
|
|
|
19962
20010
|
var severity = _a.severity;
|
|
19963
20011
|
return (severity === 'error' ? '#C64844' : '#292929');
|
|
19964
20012
|
});
|
|
19965
|
-
var CloseIcon = newStyled.div(templateObject_6$
|
|
19966
|
-
var templateObject_1$w, templateObject_2$
|
|
20013
|
+
var CloseIcon = newStyled.div(templateObject_6$g || (templateObject_6$g = __makeTemplateObject(["\n margin-inline-start: auto;\n cursor: pointer;\n"], ["\n margin-inline-start: auto;\n cursor: pointer;\n"])));
|
|
20014
|
+
var templateObject_1$w, templateObject_2$p, templateObject_3$o, templateObject_4$l, templateObject_5$i, templateObject_6$g;
|
|
19967
20015
|
|
|
19968
20016
|
var Toast = React__default.forwardRef(function (_a, ref) {
|
|
19969
20017
|
var _b;
|
|
@@ -19986,8 +20034,8 @@ var Toast = React__default.forwardRef(function (_a, ref) {
|
|
|
19986
20034
|
Toast.displayName = 'Toast';
|
|
19987
20035
|
|
|
19988
20036
|
var Wrapper$1 = newStyled.div(templateObject_1$v || (templateObject_1$v = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n"])));
|
|
19989
|
-
var GrandTotal = newStyled.h1(templateObject_2$
|
|
19990
|
-
var Currency = newStyled.span(templateObject_3$
|
|
20037
|
+
var GrandTotal = newStyled.h1(templateObject_2$o || (templateObject_2$o = __makeTemplateObject(["\n margin: 0;\n font-size: 1.5rem;\n line-height: 2rem;\n font-weight: 700;\n color: ", ";\n display: block;\n align-items: center;\n"], ["\n margin: 0;\n font-size: 1.5rem;\n line-height: 2rem;\n font-weight: 700;\n color: ", ";\n display: block;\n align-items: center;\n"])), function (props) { return props.color; });
|
|
20038
|
+
var Currency = newStyled.span(templateObject_3$n || (templateObject_3$n = __makeTemplateObject(["\n margin: 0;\n margin-right: 0.625rem;\n font-weight: 600;\n color: ", ";\n font-size: ", ";\n line-height: ", ";\n align-self: ", ";\n"], ["\n margin: 0;\n margin-right: 0.625rem;\n font-weight: 600;\n color: ", ";\n font-size: ", ";\n line-height: ", ";\n align-self: ", ";\n"])), function (_a) {
|
|
19991
20039
|
var theme = _a.theme;
|
|
19992
20040
|
return theme.component.total.basicTotal.currency.color;
|
|
19993
20041
|
}, function (_a) {
|
|
@@ -20000,7 +20048,7 @@ var Currency = newStyled.span(templateObject_3$m || (templateObject_3$m = __make
|
|
|
20000
20048
|
var theme = _a.theme;
|
|
20001
20049
|
return theme.component.total.basicTotal.currency.alignSelf;
|
|
20002
20050
|
});
|
|
20003
|
-
var Container$m = newStyled.div(templateObject_4$
|
|
20051
|
+
var Container$m = newStyled.div(templateObject_4$k || (templateObject_4$k = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n width: 100%;\n margin-top: 0.625rem;\n color: ", ";\n align-items: center;\n"], ["\n display: flex;\n justify-content: space-between;\n width: 100%;\n margin-top: 0.625rem;\n color: ", ";\n align-items: center;\n"])), function (_a) {
|
|
20004
20052
|
var highlightColor = _a.highlightColor;
|
|
20005
20053
|
return highlightColor;
|
|
20006
20054
|
});
|
|
@@ -20008,13 +20056,13 @@ var TotalContainer = newStyled(Container$m)(templateObject_5$h || (templateObjec
|
|
|
20008
20056
|
var showTotalLabel = _a.showTotalLabel;
|
|
20009
20057
|
return (showTotalLabel ? 'space-between' : 'flex-end');
|
|
20010
20058
|
});
|
|
20011
|
-
var DiscountText = newStyled.h3(templateObject_6$
|
|
20012
|
-
var DiscountAmount = newStyled.h3(templateObject_7$
|
|
20059
|
+
var DiscountText = newStyled.h3(templateObject_6$f || (templateObject_6$f = __makeTemplateObject(["\n margin: 0;\n font-size: 14px;\n line-height: 22px;\n font-weight: 600;\n"], ["\n margin: 0;\n font-size: 14px;\n line-height: 22px;\n font-weight: 600;\n"])));
|
|
20060
|
+
var DiscountAmount = newStyled.h3(templateObject_7$e || (templateObject_7$e = __makeTemplateObject(["\n margin: 0;\n font-size: 18px;\n line-height: 28px;\n font-weight: ", ";\n"], ["\n margin: 0;\n font-size: 18px;\n line-height: 28px;\n font-weight: ", ";\n"])), function (_a) {
|
|
20013
20061
|
var theme = _a.theme;
|
|
20014
20062
|
return theme.component.total.basicTotal.savings.amountFontWeight;
|
|
20015
20063
|
});
|
|
20016
|
-
var TotalLabel = newStyled(Text$7)(templateObject_8$
|
|
20017
|
-
var templateObject_1$v, templateObject_2$
|
|
20064
|
+
var TotalLabel = newStyled(Text$7)(templateObject_8$a || (templateObject_8$a = __makeTemplateObject(["\n font-size: 20px;\n"], ["\n font-size: 20px;\n"])));
|
|
20065
|
+
var templateObject_1$v, templateObject_2$o, templateObject_3$n, templateObject_4$k, templateObject_5$h, templateObject_6$f, templateObject_7$e, templateObject_8$a;
|
|
20018
20066
|
|
|
20019
20067
|
var Total = function (_a) {
|
|
20020
20068
|
var total = _a.total, currency = _a.currency, saving = _a.saving, _b = _a.highlightColor, highlightColor = _b === void 0 ? '#2f806a' : _b, _c = _a.showTotalLabel, showTotalLabel = _c === void 0 ? false : _c;
|
|
@@ -20026,15 +20074,15 @@ var Wrapper = newStyled.div(templateObject_1$u || (templateObject_1$u = __makeTe
|
|
|
20026
20074
|
var color = _a.color;
|
|
20027
20075
|
return color;
|
|
20028
20076
|
});
|
|
20029
|
-
var ItemContainer = newStyled.div(templateObject_2$
|
|
20030
|
-
var Item = newStyled.h4(templateObject_3$
|
|
20077
|
+
var ItemContainer = newStyled.div(templateObject_2$n || (templateObject_2$n = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n margin-bottom: 0.625rem;\n\n &:last-child {\n margin-bottom: 0;\n }\n"], ["\n display: flex;\n justify-content: space-between;\n margin-bottom: 0.625rem;\n\n &:last-child {\n margin-bottom: 0;\n }\n"])));
|
|
20078
|
+
var Item = newStyled.h4(templateObject_3$m || (templateObject_3$m = __makeTemplateObject(["\n margin: 0;\n font-size: 0.875rem;\n line-height: ", ";\n font-weight: ", ";\n"], ["\n margin: 0;\n font-size: 0.875rem;\n line-height: ", ";\n font-weight: ", ";\n"])), function (_a) {
|
|
20031
20079
|
var theme = _a.theme;
|
|
20032
20080
|
return theme.component.subTotal.basicSubTotal.lineHeight;
|
|
20033
20081
|
}, function (_a) {
|
|
20034
20082
|
var theme = _a.theme;
|
|
20035
20083
|
return theme.component.subTotal.basicSubTotal.weight;
|
|
20036
20084
|
});
|
|
20037
|
-
var CouponItem = newStyled(Item)(templateObject_4$
|
|
20085
|
+
var CouponItem = newStyled(Item)(templateObject_4$j || (templateObject_4$j = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
20038
20086
|
var color = _a.color;
|
|
20039
20087
|
return color;
|
|
20040
20088
|
});
|
|
@@ -20047,7 +20095,7 @@ var Subtotal = function (_a) {
|
|
|
20047
20095
|
return (jsxs$1(ItemContainer, { children: [jsxs$1(CouponItem, __assign$1({ color: highlightColor, "data-testid": "discount-title" }, { children: [coupon.couponText, " ", code, " ", coupon.appliedText] }), void 0), jsx$1(CouponItem, __assign$1({ color: highlightColor, "data-testid": "discount-price" }, { children: amount }), void 0)] }, code));
|
|
20048
20096
|
})] }), void 0));
|
|
20049
20097
|
};
|
|
20050
|
-
var templateObject_1$u, templateObject_2$
|
|
20098
|
+
var templateObject_1$u, templateObject_2$n, templateObject_3$m, templateObject_4$j;
|
|
20051
20099
|
|
|
20052
20100
|
var Totals = {
|
|
20053
20101
|
Total: Total,
|
|
@@ -20055,19 +20103,19 @@ var Totals = {
|
|
|
20055
20103
|
};
|
|
20056
20104
|
|
|
20057
20105
|
var Container$l = newStyled.div(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
20058
|
-
var CheckpointContainer$1 = newStyled.div(templateObject_2$
|
|
20059
|
-
var CheckpointDate$1 = newStyled.div(templateObject_3$
|
|
20060
|
-
var CheckpointDateLabel$1 = newStyled.p(templateObject_4$
|
|
20106
|
+
var CheckpointContainer$1 = newStyled.div(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
20107
|
+
var CheckpointDate$1 = newStyled.div(templateObject_3$l || (templateObject_3$l = __makeTemplateObject(["\n display: flex;\n justify-content: flex-start;\n flex-direction: column;\n padding-bottom: ", ";\n width: 60px;\n min-width: 60px;\n margin-right: 10px;\n"], ["\n display: flex;\n justify-content: flex-start;\n flex-direction: column;\n padding-bottom: ", ";\n width: 60px;\n min-width: 60px;\n margin-right: 10px;\n"])), function (props) { return props.currentSpace; });
|
|
20108
|
+
var CheckpointDateLabel$1 = newStyled.p(templateObject_4$i || (templateObject_4$i = __makeTemplateObject(["\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n font-weight: ", ";\n"], ["\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n font-weight: ", ";\n"])), function (props) { return (props.lastElement ? '600' : '400'); });
|
|
20061
20109
|
var CheckpointDateAndDayLabel = newStyled.span(templateObject_5$g || (templateObject_5$g = __makeTemplateObject(["\n font-size: 14px;\n weight: 400;\n color: #949494;\n text-align: start;\n margin-bottom: 42px;\n"], ["\n font-size: 14px;\n weight: 400;\n color: #949494;\n text-align: start;\n margin-bottom: 42px;\n"])));
|
|
20062
|
-
var CheckpointStatus$1 = newStyled.p(templateObject_6$
|
|
20110
|
+
var CheckpointStatus$1 = newStyled.p(templateObject_6$e || (templateObject_6$e = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n transform: translate(0, 22px);\n margin: 0;\n margin-left: 9px;\n color: ", ";\n font-weight: ", ";\n"], ["\n display: flex;\n flex-direction: column;\n transform: translate(0, 22px);\n margin: 0;\n margin-left: 9px;\n color: ", ";\n font-weight: ", ";\n"])), function (props) {
|
|
20063
20111
|
return props.finishedTrack
|
|
20064
20112
|
? props.finishedTrackColor
|
|
20065
20113
|
: props.activeTrack
|
|
20066
20114
|
? props.activeTrackColor
|
|
20067
20115
|
: '';
|
|
20068
20116
|
}, function (props) { return (props.finishedTrack || props.activeTrack ? '600' : '400'); });
|
|
20069
|
-
var CheckpointStatusMessage = newStyled.span(templateObject_7$
|
|
20070
|
-
var ActiveCheckpointTrack$1 = newStyled.div(templateObject_8$
|
|
20117
|
+
var CheckpointStatusMessage = newStyled.span(templateObject_7$d || (templateObject_7$d = __makeTemplateObject(["\n display: flex;\n gap: 4px;\n font-size: 14px;\n line-height: 22px;\n text-align: left;\n"], ["\n display: flex;\n gap: 4px;\n font-size: 14px;\n line-height: 22px;\n text-align: left;\n"])));
|
|
20118
|
+
var ActiveCheckpointTrack$1 = newStyled.div(templateObject_8$9 || (templateObject_8$9 = __makeTemplateObject(["\n width: 13px;\n min-width: 13px;\n background-color: ", ";\n transform: ", ";\n position: relative;\n border-radius: ", ";\n margin-top: -1px;\n padding-bottom: ", ";\n margin-bottom: ", ";\n"], ["\n width: 13px;\n min-width: 13px;\n background-color: ", ";\n transform: ", ";\n position: relative;\n border-radius: ", ";\n margin-top: -1px;\n padding-bottom: ", ";\n margin-bottom: ", ";\n"])), function (props) { return props.trackColor; }, function (props) { return (props.firstElement ? 'translate(0, 22px)' : 'translate(0, 33px)'); }, function (props) {
|
|
20071
20119
|
return props.firstElement ? '8px 8px 0 0' : props.lastElement ? '0 0 8px 8px' : '';
|
|
20072
20120
|
}, function (props) { return (props.firstElement ? '20px' : '0'); }, function (props) { return (props.firstElement ? '-20px' : '0'); });
|
|
20073
20121
|
var ActiveCheckpointDot$1 = newStyled.div(templateObject_9$6 || (templateObject_9$6 = __makeTemplateObject(["\n &:after {\n content: ' ';\n position: absolute;\n width: 13px;\n height: 13px;\n background-color: #e5e5e5;\n z-index: 2;\n border-radius: 50%;\n transform: ", ";\n left: 0;\n }\n"], ["\n &:after {\n content: ' ';\n position: absolute;\n width: 13px;\n height: 13px;\n background-color: #e5e5e5;\n z-index: 2;\n border-radius: 50%;\n transform: ", ";\n left: 0;\n }\n"])), function (props) { return (props.firstElement ? 'translate(0, -0.5px)' : 'translate(0, -6.5px)'); });
|
|
@@ -20106,18 +20154,18 @@ var TrackingProgressV2 = function (_a) {
|
|
|
20106
20154
|
return (jsxs$1(CheckpointContainer$1, __assign$1({ "data-testid": "empty-checkpoint-track" }, { children: [jsxs$1(CheckpointDate$1, __assign$1({ currentSpace: "90px" }, { children: [jsx$1(CheckpointDateLabel$1, { lastElement: index + 1 === emptySpaces.length }, void 0), jsx$1(CheckpointDateLabel$1, { lastElement: index + 1 === emptySpaces.length }, void 0)] }), void 0), index + 1 !== emptySpaces.length && (jsx$1(ActiveCheckpointTrack$1, __assign$1({ trackColor: theme.colors.shades['200'].color }, { children: jsx$1(ActiveCheckpointDot$1, { firstElement: false }, void 0) }), void 0)), index + 1 === emptySpaces.length && (jsx$1(LastActiveCheckpointDot, __assign$1({ trackColor: theme.colors.shades['200'].color }, { children: jsx$1(ActiveCheckpointDot$1, { firstElement: false }, void 0) }), void 0)), jsx$1(CheckpointStatus$1, __assign$1({ finishedTrack: false }, { children: statusMessage }), void 0)] }), index));
|
|
20107
20155
|
})] }), void 0));
|
|
20108
20156
|
};
|
|
20109
|
-
var templateObject_1$t, templateObject_2$
|
|
20157
|
+
var templateObject_1$t, templateObject_2$m, templateObject_3$l, templateObject_4$i, templateObject_5$g, templateObject_6$e, templateObject_7$d, templateObject_8$9, templateObject_9$6, templateObject_10$5, templateObject_11$3;
|
|
20110
20158
|
|
|
20111
20159
|
var Container$k = newStyled.div(templateObject_1$s || (templateObject_1$s = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
20112
|
-
var CheckpointContainer = newStyled.div(templateObject_2$
|
|
20113
|
-
var CheckpointDate = newStyled.div(templateObject_3$
|
|
20114
|
-
var CheckpointDateLabel = newStyled.p(templateObject_4$
|
|
20160
|
+
var CheckpointContainer = newStyled.div(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
20161
|
+
var CheckpointDate = newStyled.div(templateObject_3$k || (templateObject_3$k = __makeTemplateObject(["\n display: flex;\n justify-content: flex-start;\n flex-direction: column;\n padding-bottom: ", ";\n width: 60px;\n min-width: 60px;\n margin-right: 10px;\n"], ["\n display: flex;\n justify-content: flex-start;\n flex-direction: column;\n padding-bottom: ", ";\n width: 60px;\n min-width: 60px;\n margin-right: 10px;\n"])), function (props) { return props.currentSpace; });
|
|
20162
|
+
var CheckpointDateLabel = newStyled.p(templateObject_4$h || (templateObject_4$h = __makeTemplateObject(["\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n font-weight: ", ";\n"], ["\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n font-weight: ", ";\n"])), function (props) { return (props.lastElement ? '600' : '400'); });
|
|
20115
20163
|
var CheckpointStatus = newStyled.p(templateObject_5$f || (templateObject_5$f = __makeTemplateObject(["\n font-size: 14px;\n line-height: 22px;\n transform: translate(0, 22px);\n margin: 0;\n margin-left: 9px;\n color: ", ";\n font-weight: ", ";\n text-align: left;\n"], ["\n font-size: 14px;\n line-height: 22px;\n transform: translate(0, 22px);\n margin: 0;\n margin-left: 9px;\n color: ", ";\n font-weight: ", ";\n text-align: left;\n"])), function (props) { return (props.finishedTrack ? props.finishedTrackColor : ''); }, function (props) { return (props.finishedTrack ? '600' : '400'); });
|
|
20116
|
-
var ActiveCheckpointTrack = newStyled.div(templateObject_6$
|
|
20164
|
+
var ActiveCheckpointTrack = newStyled.div(templateObject_6$d || (templateObject_6$d = __makeTemplateObject(["\n width: 13px;\n min-width: 13px;\n background-color: ", ";\n transform: ", ";\n position: relative;\n border-radius: ", ";\n margin-top: -1px;\n padding-bottom: ", ";\n margin-bottom: ", ";\n"], ["\n width: 13px;\n min-width: 13px;\n background-color: ", ";\n transform: ", ";\n position: relative;\n border-radius: ", ";\n margin-top: -1px;\n padding-bottom: ", ";\n margin-bottom: ", ";\n"])), function (props) { return props.trackColor; }, function (props) { return (props.firstElement ? 'translate(0, 22px)' : 'translate(0, 33px)'); }, function (props) {
|
|
20117
20165
|
return props.firstElement ? '8px 8px 0 0' : props.lastElement ? '0 0 8px 8px' : '';
|
|
20118
20166
|
}, function (props) { return (props.firstElement ? '20px' : '0'); }, function (props) { return (props.firstElement ? '-20px' : '0'); });
|
|
20119
|
-
var ActiveCheckpointDot = newStyled.div(templateObject_7$
|
|
20120
|
-
var LastCheckpointTrack = newStyled.div(templateObject_8$
|
|
20167
|
+
var ActiveCheckpointDot = newStyled.div(templateObject_7$c || (templateObject_7$c = __makeTemplateObject(["\n &:after {\n content: ' ';\n position: absolute;\n width: 13px;\n height: 13px;\n background-color: #e5e5e5;\n z-index: 2;\n border-radius: 50%;\n transform: ", ";\n left: 0;\n }\n"], ["\n &:after {\n content: ' ';\n position: absolute;\n width: 13px;\n height: 13px;\n background-color: #e5e5e5;\n z-index: 2;\n border-radius: 50%;\n transform: ", ";\n left: 0;\n }\n"])), function (props) { return (props.firstElement ? 'translate(0, -0.5px)' : 'translate(0, -6.5px)'); });
|
|
20168
|
+
var LastCheckpointTrack = newStyled.div(templateObject_8$8 || (templateObject_8$8 = __makeTemplateObject(["\n width: 13px;\n min-width: 13px;\n background-color: ", ";\n position: relative;\n border-radius: 0 0 8px 8px;\n margin-top: -1px;\n"], ["\n width: 13px;\n min-width: 13px;\n background-color: ", ";\n position: relative;\n border-radius: 0 0 8px 8px;\n margin-top: -1px;\n"])), function (props) { return props.backgroundColor; });
|
|
20121
20169
|
var TrackingProgress = function (_a) {
|
|
20122
20170
|
var checkPoints = _a.checkPoints, amountOfCheckPoints = _a.amountOfCheckPoints;
|
|
20123
20171
|
var theme = useTheme();
|
|
@@ -20146,19 +20194,19 @@ var TrackingProgress = function (_a) {
|
|
|
20146
20194
|
return (jsxs$1(CheckpointContainer, __assign$1({ "data-testid": "empty-checkpoint-track" }, { children: [jsxs$1(CheckpointDate, __assign$1({ currentSpace: getCurrentSpace(index) }, { children: [jsx$1(CheckpointDateLabel, { lastElement: index + 1 === emptySpaces.length }, void 0), jsx$1(CheckpointDateLabel, { lastElement: index + 1 === emptySpaces.length }, void 0)] }), void 0), index + 1 !== emptySpaces.length && (jsx$1(ActiveCheckpointTrack, { trackColor: theme.colors.shades['200'].color, firstElement: false, lastElement: index + 2 === emptySpaces.length }, void 0)), jsx$1(CheckpointStatus, { finishedTrack: false }, void 0)] }), index));
|
|
20147
20195
|
})] }), void 0));
|
|
20148
20196
|
};
|
|
20149
|
-
var templateObject_1$s, templateObject_2$
|
|
20197
|
+
var templateObject_1$s, templateObject_2$l, templateObject_3$k, templateObject_4$h, templateObject_5$f, templateObject_6$d, templateObject_7$c, templateObject_8$8;
|
|
20150
20198
|
|
|
20151
20199
|
var AutoShipCardContainerWrapper$1 = newStyled.div(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 1rem;\n border: ", "\n border-radius: 8px;\n padding: 10px;\n"], ["\n display: flex;\n flex-direction: column;\n gap: 1rem;\n border: ", "\n border-radius: 8px;\n padding: 10px;\n"])), function (_a) {
|
|
20152
20200
|
var checked = _a.checked;
|
|
20153
20201
|
return (checked ? 'none' : '1px solid #e5e5e5;');
|
|
20154
20202
|
});
|
|
20155
|
-
var AutoShipHeaderBarWrapper$1 = newStyled.div(templateObject_2$
|
|
20156
|
-
var AutoShipBodyWrapper$1 = newStyled.div(templateObject_3$
|
|
20157
|
-
var AutoShipBodyTitle$1 = newStyled.div(templateObject_4$
|
|
20203
|
+
var AutoShipHeaderBarWrapper$1 = newStyled.div(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n gap: 10px;\n align-items: center;\n"], ["\n display: flex;\n flex-direction: row;\n gap: 10px;\n align-items: center;\n"])));
|
|
20204
|
+
var AutoShipBodyWrapper$1 = newStyled.div(templateObject_3$j || (templateObject_3$j = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n border-radius: 8px;\n background-color: #f7f7f7;\n"], ["\n display: flex;\n flex-direction: column;\n border-radius: 8px;\n background-color: #f7f7f7;\n"])));
|
|
20205
|
+
var AutoShipBodyTitle$1 = newStyled.div(templateObject_4$g || (templateObject_4$g = __makeTemplateObject(["\n font-size: 14px;\n font-weight: 600;\n line-height: 22px;\n text-align: left;\n width: Fill (311px) px;\n height: Hug (34px) px;\n padding: 6px 10px 6px 10px;\n gap: 4px;\n opacity: 0px;\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n"], ["\n font-size: 14px;\n font-weight: 600;\n line-height: 22px;\n text-align: left;\n width: Fill (311px) px;\n height: Hug (34px) px;\n padding: 6px 10px 6px 10px;\n gap: 4px;\n opacity: 0px;\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n"])));
|
|
20158
20206
|
var AutoShipBodyListItem$1 = newStyled.div(templateObject_5$e || (templateObject_5$e = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n gap: 10px;\n"], ["\n display: flex;\n flex-direction: row;\n gap: 10px;\n"])));
|
|
20159
|
-
var AutoShipBodyListWrapper$1 = newStyled.div(templateObject_6$
|
|
20160
|
-
var CheckboxInput = newStyled.input(templateObject_7$
|
|
20161
|
-
var templateObject_1$r, templateObject_2$
|
|
20207
|
+
var AutoShipBodyListWrapper$1 = newStyled.div(templateObject_6$c || (templateObject_6$c = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 10px;\n padding: 10px 10px 10px 10px;\n"], ["\n display: flex;\n flex-direction: column;\n gap: 10px;\n padding: 10px 10px 10px 10px;\n"])));
|
|
20208
|
+
var CheckboxInput = newStyled.input(templateObject_7$b || (templateObject_7$b = __makeTemplateObject(["\n width: 22px;\n height: 22px;\n gap: 0px;\n border-radius: 4px;\n border: 1px 0px 0px 0px;\n opacity: 0px;\n :checked {\n accent-color: #292929;\n }\n"], ["\n width: 22px;\n height: 22px;\n gap: 0px;\n border-radius: 4px;\n border: 1px 0px 0px 0px;\n opacity: 0px;\n :checked {\n accent-color: #292929;\n }\n"])));
|
|
20209
|
+
var templateObject_1$r, templateObject_2$k, templateObject_3$j, templateObject_4$g, templateObject_5$e, templateObject_6$c, templateObject_7$b;
|
|
20162
20210
|
|
|
20163
20211
|
function AutoshipOfferCard(_a) {
|
|
20164
20212
|
var showMore = _a.showMore, copyList = _a.copyList, copy = _a.copy, handleCheckBoxChange = _a.handleCheckBoxChange, _b = _a.isChecked, isChecked = _b === void 0 ? false : _b;
|
|
@@ -20186,14 +20234,14 @@ var AutoShipCardContainerWrapper = newStyled.div(templateObject_1$q || (template
|
|
|
20186
20234
|
var checked = _a.checked;
|
|
20187
20235
|
return (checked ? 'none' : '1px solid #e5e5e5;');
|
|
20188
20236
|
});
|
|
20189
|
-
var AutoShipHeaderBarWrapper = newStyled.div(templateObject_2$
|
|
20190
|
-
var AutoShipBodyWrapper = newStyled.div(templateObject_3$
|
|
20191
|
-
var AutoShipBodyTitle = newStyled.div(templateObject_4$
|
|
20237
|
+
var AutoShipHeaderBarWrapper = newStyled.div(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n gap: 10px;\n align-items: center;\n justify-content: space-between;\n"], ["\n display: flex;\n flex-direction: row;\n gap: 10px;\n align-items: center;\n justify-content: space-between;\n"])));
|
|
20238
|
+
var AutoShipBodyWrapper = newStyled.div(templateObject_3$i || (templateObject_3$i = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n border-radius: 8px;\n background-color: #f7f7f7;\n"], ["\n display: flex;\n flex-direction: column;\n border-radius: 8px;\n background-color: #f7f7f7;\n"])));
|
|
20239
|
+
var AutoShipBodyTitle = newStyled.div(templateObject_4$f || (templateObject_4$f = __makeTemplateObject(["\n font-size: 14px;\n font-weight: 600;\n line-height: 22px;\n text-align: left;\n width: Fill (311px) px;\n height: Hug (34px) px;\n padding: 6px 10px 6px 10px;\n gap: 4px;\n opacity: 0px;\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n"], ["\n font-size: 14px;\n font-weight: 600;\n line-height: 22px;\n text-align: left;\n width: Fill (311px) px;\n height: Hug (34px) px;\n padding: 6px 10px 6px 10px;\n gap: 4px;\n opacity: 0px;\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n"])));
|
|
20192
20240
|
var AutoShipBodyListItem = newStyled.div(templateObject_5$d || (templateObject_5$d = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n gap: 10px;\n"], ["\n display: flex;\n flex-direction: row;\n gap: 10px;\n"])));
|
|
20193
|
-
var AutoShipBodyListWrapper = newStyled.div(templateObject_6$
|
|
20194
|
-
newStyled.input(templateObject_7$
|
|
20195
|
-
var ButtonRemoveWrapper = newStyled.div(templateObject_8$
|
|
20196
|
-
var templateObject_1$q, templateObject_2$
|
|
20241
|
+
var AutoShipBodyListWrapper = newStyled.div(templateObject_6$b || (templateObject_6$b = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 10px;\n padding: 10px 10px 10px 10px;\n"], ["\n display: flex;\n flex-direction: column;\n gap: 10px;\n padding: 10px 10px 10px 10px;\n"])));
|
|
20242
|
+
newStyled.input(templateObject_7$a || (templateObject_7$a = __makeTemplateObject(["\n width: 22px;\n height: 22px;\n gap: 0px;\n border-radius: 4px;\n border: 1px 0px 0px 0px;\n opacity: 0px;\n :checked {\n accent-color: #292929;\n }\n"], ["\n width: 22px;\n height: 22px;\n gap: 0px;\n border-radius: 4px;\n border: 1px 0px 0px 0px;\n opacity: 0px;\n :checked {\n accent-color: #292929;\n }\n"])));
|
|
20243
|
+
var ButtonRemoveWrapper = newStyled.div(templateObject_8$7 || (templateObject_8$7 = __makeTemplateObject(["\n color: #292929;\n font-size: 14px;\n font-weight: 400;\n line-height: 22px;\n text-align: left;\n text-decoration: underline;\n :hover {\n cursor: pointer;\n }\n"], ["\n color: #292929;\n font-size: 14px;\n font-weight: 400;\n line-height: 22px;\n text-align: left;\n text-decoration: underline;\n :hover {\n cursor: pointer;\n }\n"])));
|
|
20244
|
+
var templateObject_1$q, templateObject_2$j, templateObject_3$i, templateObject_4$f, templateObject_5$d, templateObject_6$b, templateObject_7$a, templateObject_8$7;
|
|
20197
20245
|
|
|
20198
20246
|
function AutoshipOfferCardCta(_a) {
|
|
20199
20247
|
var showMore = _a.showMore, copyList = _a.copyList, copy = _a.copy, handleCheckBoxChange = _a.handleCheckBoxChange, _b = _a.isChecked, isChecked = _b === void 0 ? false : _b, buttonCopy = _a.buttonCopy;
|
|
@@ -20240,8 +20288,8 @@ var StyledContent = newStyled.div(templateObject_1$p || (templateObject_1$p = __
|
|
|
20240
20288
|
var _b = _a.width, width = _b === void 0 ? '100%' : _b;
|
|
20241
20289
|
return width;
|
|
20242
20290
|
});
|
|
20243
|
-
var StyledController = newStyled.div(templateObject_2$
|
|
20244
|
-
var templateObject_1$p, templateObject_2$
|
|
20291
|
+
var StyledController = newStyled.div(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n display: flex;\n align-items: flex-start;\n justify-content: flex-start;\n min-width: fit-content;\n appearance: none;\n padding: 0;\n margin: 0;\n border: none;\n background: none;\n font-size: inherit;\n line-height: inherit;\n color: inherit;\n user-select: text;\n writing-mode: unset;\n font-family: inherit;\n cursor: pointer;\n gap: 5px;\n"], ["\n display: flex;\n align-items: flex-start;\n justify-content: flex-start;\n min-width: fit-content;\n appearance: none;\n padding: 0;\n margin: 0;\n border: none;\n background: none;\n font-size: inherit;\n line-height: inherit;\n color: inherit;\n user-select: text;\n writing-mode: unset;\n font-family: inherit;\n cursor: pointer;\n gap: 5px;\n"])));
|
|
20292
|
+
var templateObject_1$p, templateObject_2$i;
|
|
20245
20293
|
|
|
20246
20294
|
var StyledDisclosure = newStyled(Ye)(function (_a) {
|
|
20247
20295
|
var background = _a.background, width = _a.width;
|
|
@@ -20283,13 +20331,13 @@ var BasicAccordion = function (_a) {
|
|
|
20283
20331
|
};
|
|
20284
20332
|
|
|
20285
20333
|
var ContainerWrapper$1 = newStyled.div(templateObject_1$o || (templateObject_1$o = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n max-height: 180px;\n width: auto;\n max-width: 450px;\n gap: 5px;\n @media (max-width: 480px) {\n gap: 0px;\n font-size: 12px !important;\n }\n"], ["\n display: flex;\n flex-direction: row;\n max-height: 180px;\n width: auto;\n max-width: 450px;\n gap: 5px;\n @media (max-width: 480px) {\n gap: 0px;\n font-size: 12px !important;\n }\n"])));
|
|
20286
|
-
var ImageWrapper
|
|
20287
|
-
var ImageComponent = newStyled(Image$3)(templateObject_3$
|
|
20288
|
-
var RightComponentWrapper = newStyled.div(templateObject_4$
|
|
20334
|
+
var ImageWrapper = newStyled.div(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n max-width: 132px;\n max-height: 160px;\n border-radius: 6px;\n @media (max-width: 480px) {\n width: 102px;\n height: 123px;\n }\n"], ["\n max-width: 132px;\n max-height: 160px;\n border-radius: 6px;\n @media (max-width: 480px) {\n width: 102px;\n height: 123px;\n }\n"])));
|
|
20335
|
+
var ImageComponent = newStyled(Image$3)(templateObject_3$h || (templateObject_3$h = __makeTemplateObject(["\n max-width: 132px;\n max-height: 160px;\n border-radius: 6px;\n position: relative;\n @media (max-width: 480px) {\n max-width: 102px;\n max-height: 123px;\n }\n"], ["\n max-width: 132px;\n max-height: 160px;\n border-radius: 6px;\n position: relative;\n @media (max-width: 480px) {\n max-width: 102px;\n max-height: 123px;\n }\n"])));
|
|
20336
|
+
var RightComponentWrapper = newStyled.div(templateObject_4$e || (templateObject_4$e = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n gap: 4px;\n padding: 5px;\n @media (max-width: 401px) {\n gap: 0px;\n padding: 0px;\n }\n"], ["\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n gap: 4px;\n padding: 5px;\n @media (max-width: 401px) {\n gap: 0px;\n padding: 0px;\n }\n"])));
|
|
20289
20337
|
var TitleWrapper = newStyled.div(templateObject_5$c || (templateObject_5$c = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n"], ["\n display: flex;\n flex-direction: row;\n"])));
|
|
20290
|
-
var SubTitleWrapper = newStyled.div(templateObject_6$
|
|
20291
|
-
var ButtonsWrapper = newStyled.div(templateObject_7$
|
|
20292
|
-
var templateObject_1$o, templateObject_2$
|
|
20338
|
+
var SubTitleWrapper = newStyled.div(templateObject_6$a || (templateObject_6$a = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n"], ["\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n"])));
|
|
20339
|
+
var ButtonsWrapper = newStyled.div(templateObject_7$9 || (templateObject_7$9 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n"], ["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n"])));
|
|
20340
|
+
var templateObject_1$o, templateObject_2$h, templateObject_3$h, templateObject_4$e, templateObject_5$c, templateObject_6$a, templateObject_7$9;
|
|
20293
20341
|
|
|
20294
20342
|
function CartItemCard(_a) {
|
|
20295
20343
|
var style = _a.style, className = _a.className, children = _a.children;
|
|
@@ -20297,7 +20345,7 @@ function CartItemCard(_a) {
|
|
|
20297
20345
|
}
|
|
20298
20346
|
var CartItemImage = function (_a) {
|
|
20299
20347
|
var alt = _a.alt, src = _a.src, className = _a.className, sizes = _a.sizes;
|
|
20300
|
-
return (jsx$1(ImageWrapper
|
|
20348
|
+
return (jsx$1(ImageWrapper, { children: jsx$1(ImageComponent, { alt: alt, src: src, className: className, sizes: sizes }, void 0) }, void 0));
|
|
20301
20349
|
};
|
|
20302
20350
|
var BodyContent = function (_a) {
|
|
20303
20351
|
var children = _a.children, className = _a.className, style = _a.style;
|
|
@@ -20336,8 +20384,8 @@ var Shades700Color = '#292929';
|
|
|
20336
20384
|
var PrimaryColor = '#f7a08b';
|
|
20337
20385
|
var ClubBorderColor = '#882a2b';
|
|
20338
20386
|
var FlexContainer$1 = newStyled.div(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
20339
|
-
var DiscountTag$1 = newStyled.div(templateObject_2$
|
|
20340
|
-
var ContainerBase$1 = newStyled.div(templateObject_3$
|
|
20387
|
+
var DiscountTag$1 = newStyled.div(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n position: absolute;\n top: -24px;\n right: 18px;\n background: ", ";\n color: white;\n padding: 5px 10px;\n font-size: 12px;\n font-weight: bold;\n line-height: 14px;\n border-radius: 6px 6px 0 0;\n"], ["\n position: absolute;\n top: -24px;\n right: 18px;\n background: ", ";\n color: white;\n padding: 5px 10px;\n font-size: 12px;\n font-weight: bold;\n line-height: 14px;\n border-radius: 6px 6px 0 0;\n"])), ClubGradient);
|
|
20388
|
+
var ContainerBase$1 = newStyled.div(templateObject_3$g || (templateObject_3$g = __makeTemplateObject(["\n border-radius: 8px;\n\n border: ", ";\n\n ", "\n\n & input:checked + div {\n border-color: ", ";\n }\n\n & label {\n cursor: pointer;\n }\n"], ["\n border-radius: 8px;\n\n border: ", ";\n\n ", "\n\n & input:checked + div {\n border-color: ", ";\n }\n\n & label {\n cursor: pointer;\n }\n"])), function (_a) {
|
|
20341
20389
|
var selected = _a.selected;
|
|
20342
20390
|
return selected ? "1.5px solid ".concat(ClubBorderColor) : "1px solid ".concat(Shades200Color);
|
|
20343
20391
|
}, function (_a) {
|
|
@@ -20346,7 +20394,7 @@ var ContainerBase$1 = newStyled.div(templateObject_3$f || (templateObject_3$f =
|
|
|
20346
20394
|
? "& label {\n font-weight: 700;\n }"
|
|
20347
20395
|
: '';
|
|
20348
20396
|
}, PrimaryColor);
|
|
20349
|
-
var SinglePurchaseContainer$1 = newStyled(ContainerBase$1)(templateObject_4$
|
|
20397
|
+
var SinglePurchaseContainer$1 = newStyled(ContainerBase$1)(templateObject_4$d || (templateObject_4$d = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n padding: 16px;\n border-color: ", ";\n ", "\n"], ["\n display: flex;\n justify-content: space-between;\n padding: 16px;\n border-color: ", ";\n ", "\n"])), function (_a) {
|
|
20350
20398
|
var isNoMember = _a.isNoMember, selected = _a.selected;
|
|
20351
20399
|
return (isNoMember && selected ? Shades700Color : '');
|
|
20352
20400
|
}, function (_a) {
|
|
@@ -20354,7 +20402,7 @@ var SinglePurchaseContainer$1 = newStyled(ContainerBase$1)(templateObject_4$c ||
|
|
|
20354
20402
|
return (onClick ? 'cursor: pointer;' : '');
|
|
20355
20403
|
});
|
|
20356
20404
|
var SubscriptionContainer$1 = newStyled(ContainerBase$1)(templateObject_5$b || (templateObject_5$b = __makeTemplateObject(["\n padding: 16px;\n margin-bottom: 8px;\n position: relative;\n"], ["\n padding: 16px;\n margin-bottom: 8px;\n position: relative;\n"])));
|
|
20357
|
-
var SubscriptionHeader$1 = newStyled.div(templateObject_6$
|
|
20405
|
+
var SubscriptionHeader$1 = newStyled.div(templateObject_6$9 || (templateObject_6$9 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n border-bottom: ", ";\n padding-bottom: ", ";\n margin-bottom: ", ";\n cursor: pointer;\n\n & input:checked + div {\n border-color: ", ";\n }\n"], ["\n display: flex;\n justify-content: space-between;\n border-bottom: ", ";\n padding-bottom: ", ";\n margin-bottom: ", ";\n cursor: pointer;\n\n & input:checked + div {\n border-color: ", ";\n }\n"])), function (_a) {
|
|
20358
20406
|
var isSelected = _a.isSelected;
|
|
20359
20407
|
return (isSelected ? "1px solid ".concat(Shades200Color) : "none");
|
|
20360
20408
|
}, function (_a) {
|
|
@@ -20364,8 +20412,8 @@ var SubscriptionHeader$1 = newStyled.div(templateObject_6$a || (templateObject_6
|
|
|
20364
20412
|
var isSelected = _a.isSelected;
|
|
20365
20413
|
return (isSelected ? '8px' : '0px');
|
|
20366
20414
|
}, PrimaryColor);
|
|
20367
|
-
var BenefitsContainer$1 = newStyled.div(templateObject_7$
|
|
20368
|
-
var Benefit
|
|
20415
|
+
var BenefitsContainer$1 = newStyled.div(templateObject_7$8 || (templateObject_7$8 = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
20416
|
+
var Benefit = newStyled.div(templateObject_8$6 || (templateObject_8$6 = __makeTemplateObject(["\n display: flex;\n padding: 8px 0;\n svg {\n overflow: visible;\n }\n a {\n text-decoration: underline;\n color: ", ";\n }\n"], ["\n display: flex;\n padding: 8px 0;\n svg {\n overflow: visible;\n }\n a {\n text-decoration: underline;\n color: ", ";\n }\n"])), Shades700Color);
|
|
20369
20417
|
var BenefitText = newStyled(Text$7)(templateObject_9$5 || (templateObject_9$5 = __makeTemplateObject(["\n line-height: 20px;\n margin-left: 9px;\n"], ["\n line-height: 20px;\n margin-left: 9px;\n"])));
|
|
20370
20418
|
var StyledPrice$1 = newStyled(PriceLabelV2$1)(templateObject_10$4 || (templateObject_10$4 = __makeTemplateObject(["\n div p {\n color: ", ";\n }\n"], ["\n div p {\n color: ", ";\n }\n"])), function (_a) {
|
|
20371
20419
|
var selected = _a.selected, isNoMember = _a.isNoMember;
|
|
@@ -20378,7 +20426,7 @@ var StyledPrice$1 = newStyled(PriceLabelV2$1)(templateObject_10$4 || (templateOb
|
|
|
20378
20426
|
: Shades200Color;
|
|
20379
20427
|
});
|
|
20380
20428
|
var Container$j = newStyled.div(templateObject_11$2 || (templateObject_11$2 = __makeTemplateObject(["\n margin-top: 20px;\n"], ["\n margin-top: 20px;\n"])));
|
|
20381
|
-
var templateObject_1$n, templateObject_2$
|
|
20429
|
+
var templateObject_1$n, templateObject_2$g, templateObject_3$g, templateObject_4$d, templateObject_5$b, templateObject_6$9, templateObject_7$8, templateObject_8$6, templateObject_9$5, templateObject_10$4, templateObject_11$2;
|
|
20382
20430
|
|
|
20383
20431
|
var ClubOfferSelector = function (_a) {
|
|
20384
20432
|
var pricing = _a.pricing, clubOfferBenefits = _a.clubOfferBenefits, benefits = _a.benefits, onChange = _a.onChange, singlePurchaseLabel = _a.singlePurchaseLabel, subscriptionLabel = _a.subscriptionLabel, className = _a.className, _b = _a.currencySymbol, currencySymbol = _b === void 0 ? '$' : _b, discountLabel = _a.discountLabel, disabledInputs = _a.disabledInputs;
|
|
@@ -20421,7 +20469,7 @@ var ClubOfferSelector = function (_a) {
|
|
|
20421
20469
|
marginRight: '10px',
|
|
20422
20470
|
}, labelStyle: {
|
|
20423
20471
|
color: ClubBorderColor,
|
|
20424
|
-
}, useV2Style: true, onChange: function () { }, disabled: disabledInputs && disabledInputs.includes(radioIds.clubOfferSelector.id) }, void 0) }, void 0), jsx$1(StyledPrice$1, { testId: "subscription", finalPrice: "".concat(currencySymbol).concat(decimalFormat(Number(clubOfferFinalPrice))), selected: isSelected, size: ComponentSize.Large, originalPrice: "".concat(currencySymbol).concat(decimalFormat(Number(listPrice))) }, void 0)] }), void 0), isSelected && (jsx$1(BenefitsContainer$1, { children: updatedClubOfferBenefits.map(function (benefit) { return (jsx$1(Benefit
|
|
20472
|
+
}, useV2Style: true, onChange: function () { }, disabled: disabledInputs && disabledInputs.includes(radioIds.clubOfferSelector.id) }, void 0) }, void 0), jsx$1(StyledPrice$1, { testId: "subscription", finalPrice: "".concat(currencySymbol).concat(decimalFormat(Number(clubOfferFinalPrice))), selected: isSelected, size: ComponentSize.Large, originalPrice: "".concat(currencySymbol).concat(decimalFormat(Number(listPrice))) }, void 0)] }), void 0), isSelected && (jsx$1(BenefitsContainer$1, { children: updatedClubOfferBenefits.map(function (benefit) { return (jsx$1(Benefit, { children: jsx$1(BenefitText, { variant: "body", dangerouslySetInnerHTML: { __html: benefit } }, void 0) }, benefit)); }) }, void 0))] }), void 0), jsxs$1(SinglePurchaseContainer$1, __assign$1({ isNoMember: true, "data-testid": "single-purchase-block", selected: radioIds.oneTime.id === radioCheck.id, onClick: function () { return handleChange(radioIds.oneTime, 'radio'); } }, { children: [jsx$1(RadioInput, { label: singlePurchaseLabel, name: radioIds.oneTime.id, id: radioIds.oneTime.id, value: radioIds.oneTime.id, checked: radioIds.oneTime.id === radioCheck.id, size: ComponentSize.Medium, onChange: function () { }, useV2Style: true, disabled: disabledInputs && disabledInputs.includes(radioIds.oneTime.id) }, void 0), jsx$1(StyledPrice$1, { isNoMember: true, testId: "single-purchase", finalPrice: "".concat(currencySymbol).concat(decimalFormat(Number(discountedPrice))), selected: radioIds.oneTime.id === radioCheck.id, size: ComponentSize.Large, originalPrice: "".concat(currencySymbol).concat(decimalFormat(Number(listPrice))) }, void 0)] }), void 0)] }), void 0));
|
|
20425
20473
|
};
|
|
20426
20474
|
|
|
20427
20475
|
var ContainerWrapper = newStyled.div(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n width: 100%;\n height: 100%;\n padding: 8px 10px 8px 15px;\n background: white;\n gap: 10px;\n border-radius: 6px;\n background: ", ";\n border: 1px solid ", ";\n"], ["\n display: flex;\n flex-direction: column;\n width: 100%;\n height: 100%;\n padding: 8px 10px 8px 15px;\n background: white;\n gap: 10px;\n border-radius: 6px;\n background: ", ";\n border: 1px solid ", ";\n"])), function (_a) {
|
|
@@ -20431,11 +20479,11 @@ var ContainerWrapper = newStyled.div(templateObject_1$m || (templateObject_1$m =
|
|
|
20431
20479
|
var $checked = _a.$checked;
|
|
20432
20480
|
return ($checked ? '#FFE1B8' : '#E5E5E5');
|
|
20433
20481
|
});
|
|
20434
|
-
var CardHeaderWrapper = newStyled.div(templateObject_2$
|
|
20435
|
-
var CardBody = newStyled.div(templateObject_3$
|
|
20436
|
-
var ClubCopyWrapper = newStyled.div(templateObject_4$
|
|
20482
|
+
var CardHeaderWrapper = newStyled.div(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n"], ["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n"])));
|
|
20483
|
+
var CardBody = newStyled.div(templateObject_3$f || (templateObject_3$f = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n font-size: 12px;\n font-weight: 400;\n line-height: 16px;\n text-align: left;\n color: #292929;\n gap: 4px;\n a {\n color: #292929;\n text-decoration: underline;\n }\n"], ["\n display: flex;\n flex-direction: row;\n font-size: 12px;\n font-weight: 400;\n line-height: 16px;\n text-align: left;\n color: #292929;\n gap: 4px;\n a {\n color: #292929;\n text-decoration: underline;\n }\n"])));
|
|
20484
|
+
var ClubCopyWrapper = newStyled.div(templateObject_4$c || (templateObject_4$c = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n gap: 5px;\n"], ["\n display: flex;\n flex-direction: row;\n gap: 5px;\n"])));
|
|
20437
20485
|
var ClubCopyTextWrapper = newStyled.div(templateObject_5$a || (templateObject_5$a = __makeTemplateObject(["\n font-size: 14px;\n font-weight: 600;\n line-height: 22px;\n"], ["\n font-size: 14px;\n font-weight: 600;\n line-height: 22px;\n"])));
|
|
20438
|
-
var templateObject_1$m, templateObject_2$
|
|
20486
|
+
var templateObject_1$m, templateObject_2$f, templateObject_3$f, templateObject_4$c, templateObject_5$a;
|
|
20439
20487
|
|
|
20440
20488
|
function Card(_a) {
|
|
20441
20489
|
var children = _a.children, link = _a.link, icon = _a.icon, _b = _a.isChecked, isChecked = _b === void 0 ? false : _b, bodyCopy = _a.bodyCopy, titleCopy = _a.titleCopy, style = _a.style, _c = _a.termsText, termsText = _c === void 0 ? 'Terms here.' : _c;
|
|
@@ -20457,6 +20505,94 @@ var JoinClubCard = function (_a) {
|
|
|
20457
20505
|
};
|
|
20458
20506
|
var templateObject_1$l;
|
|
20459
20507
|
|
|
20508
|
+
var Container$i = newStyled.div(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n width: 100%;\n padding: 12px;\n border: 1px solid #e5e5e5;\n border-radius: 8px;\n gap: 14px;\n margin: auto;\n"], ["\n display: flex;\n flex-direction: column;\n width: 100%;\n padding: 12px;\n border: 1px solid #e5e5e5;\n border-radius: 8px;\n gap: 14px;\n margin: auto;\n"])));
|
|
20509
|
+
var Body = newStyled.div(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n display: flex;\n gap: 8px;\n width: 100%;\n height: ", ";\n"], ["\n display: flex;\n gap: 8px;\n width: 100%;\n height: ", ";\n"])), function (_a) {
|
|
20510
|
+
var height = _a.height;
|
|
20511
|
+
return height;
|
|
20512
|
+
});
|
|
20513
|
+
var RightContent = newStyled.div(templateObject_3$e || (templateObject_3$e = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n gap: 8px;\n height: 100%;\n"], ["\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n gap: 8px;\n height: 100%;\n"])));
|
|
20514
|
+
var Benefits = newStyled.div(templateObject_4$b || (templateObject_4$b = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 8px;\n height: ", ";\n padding: 6px 10px;\n border-radius: 8px;\n background-color: ", ";\n"], ["\n display: flex;\n flex-direction: column;\n gap: 8px;\n height: ", ";\n padding: 6px 10px;\n border-radius: 8px;\n background-color: ", ";\n"])), function (_a) {
|
|
20515
|
+
var height = _a.height;
|
|
20516
|
+
return height;
|
|
20517
|
+
}, function (_a) {
|
|
20518
|
+
var theme = _a.theme;
|
|
20519
|
+
return theme.colors.shades['10'].color;
|
|
20520
|
+
});
|
|
20521
|
+
var Actions = newStyled.div(templateObject_5$9 || (templateObject_5$9 = __makeTemplateObject(["\n display: flex;\n width: 100%;\n gap: 8px;\n"], ["\n display: flex;\n width: 100%;\n gap: 8px;\n"])));
|
|
20522
|
+
var templateObject_1$k, templateObject_2$e, templateObject_3$e, templateObject_4$b, templateObject_5$9;
|
|
20523
|
+
|
|
20524
|
+
var getTitleProps = function (_a) {
|
|
20525
|
+
var titleContent = _a.content, bold = _a.bold;
|
|
20526
|
+
if (typeof titleContent === 'string') {
|
|
20527
|
+
return { content: titleContent, bold: bold };
|
|
20528
|
+
}
|
|
20529
|
+
else if (isDangerouslySetInnerHTML(titleContent)) {
|
|
20530
|
+
return { dangerouslySetInnerHTML: titleContent };
|
|
20531
|
+
}
|
|
20532
|
+
else {
|
|
20533
|
+
return { content: titleContent };
|
|
20534
|
+
}
|
|
20535
|
+
};
|
|
20536
|
+
var OfferAtCart = function (_a) {
|
|
20537
|
+
var className = _a.className, _b = _a.title, titleContent = _b.content, bold = _b.bold, _c = _a.image, src = _c.src, alt = _c.alt, benefits = _a.benefits, _d = _a.ctaText, ctaText = _d === void 0 ? 'Yes, I want this offer' : _d, sizeOptions = _a.sizeOptions, rating = _a.rating, onAddToCart = _a.onAddToCart;
|
|
20538
|
+
var theme = useTheme();
|
|
20539
|
+
var isMobile = useDeviceType() === 'mobile';
|
|
20540
|
+
var _e = useState(), selectedSize = _e[0], setSelectedSize = _e[1];
|
|
20541
|
+
var _f = useState(false), showErrorMessage = _f[0], setShowErrorMessage = _f[1];
|
|
20542
|
+
var ActionsSection = (jsxs$1(Actions, { children: [jsx$1(SimpleDropdown, { placeHolder: "Size", options: sizeOptions, onChange: function (sizeOption) {
|
|
20543
|
+
setShowErrorMessage(false);
|
|
20544
|
+
setSelectedSize(sizeOption);
|
|
20545
|
+
} }, void 0), jsx$1(ButtonSecondary, { wide: true, text: ctaText, size: ComponentSize.Small, onClick: function () {
|
|
20546
|
+
if (selectedSize) {
|
|
20547
|
+
setShowErrorMessage(false);
|
|
20548
|
+
onAddToCart(selectedSize.key);
|
|
20549
|
+
}
|
|
20550
|
+
else {
|
|
20551
|
+
setShowErrorMessage(true);
|
|
20552
|
+
}
|
|
20553
|
+
} }, void 0)] }, void 0));
|
|
20554
|
+
var ErrorMessage = showErrorMessage ? (jsx$1(Text$7, __assign$1({ variant: "body", weight: "demi", size: "small", color: theme.colors.semantic.urgent.color }, { children: "Please select a size first" }), void 0)) : null;
|
|
20555
|
+
return (jsxs$1(Container$i, __assign$1({ className: className }, { children: [jsx$1(OfferAtCartTitle, __assign$1({}, getTitleProps({ content: titleContent, bold: bold })), void 0), jsxs$1(Body, __assign$1({ height: isMobile ? '120px' : '162px' }, { children: [jsx$1(OfferAtCartImage, { isMobile: isMobile, src: src, alt: alt, rating: rating }, void 0), jsxs$1(RightContent, { children: [jsx$1(Benefits, __assign$1({ height: isMobile ? '100%' : '65%' }, { children: jsx$1(OfferAtCartBenefits, { benefits: benefits }, void 0) }), void 0), !isMobile && ActionsSection, !isMobile && ErrorMessage] }, void 0)] }), void 0), isMobile && ActionsSection, isMobile && ErrorMessage] }), void 0));
|
|
20556
|
+
};
|
|
20557
|
+
|
|
20558
|
+
var renderBottomCopy = function (text) {
|
|
20559
|
+
if (typeof text === 'string') {
|
|
20560
|
+
return jsx$1("span", { dangerouslySetInnerHTML: { __html: text } }, void 0);
|
|
20561
|
+
}
|
|
20562
|
+
return text;
|
|
20563
|
+
};
|
|
20564
|
+
|
|
20565
|
+
var VariantType;
|
|
20566
|
+
(function (VariantType) {
|
|
20567
|
+
VariantType["V1"] = "v1";
|
|
20568
|
+
VariantType["V2"] = "v2";
|
|
20569
|
+
})(VariantType || (VariantType = {}));
|
|
20570
|
+
var ContainerV2 = newStyled.div(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n width: 100%;\n padding: 12px;\n border: 1px solid #e5e5e5;\n border-radius: 8px;\n gap: 14px;\n margin: auto;\n background-color: ", ";\n"], ["\n display: flex;\n flex-direction: column;\n width: 100%;\n padding: 12px;\n border: 1px solid #e5e5e5;\n border-radius: 8px;\n gap: 14px;\n margin: auto;\n background-color: ", ";\n"])), function (_a) {
|
|
20571
|
+
var variant = _a.variant;
|
|
20572
|
+
return (variant === VariantType.V2 ? '#F7F7F7' : 'white');
|
|
20573
|
+
});
|
|
20574
|
+
var ActionsV2 = newStyled.div(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n display: flex;\n width: 100%;\n gap: 8px;\n flex-direction: column;\n"], ["\n display: flex;\n width: 100%;\n gap: 8px;\n flex-direction: column;\n"])));
|
|
20575
|
+
var SizeCardItem = newStyled.div(templateObject_3$d || (templateObject_3$d = __makeTemplateObject(["\n width: 59px;\n height: 36px;\n border-radius: 8px;\n border: 1px 0px 0px 0px;\n border-color: #bbbbbb;\n border-style: solid;\n border-width: 1px;\n font-size: 12px;\n font-weight: 600;\n line-height: 16px;\n text-align: center;\n display: flex;\n justify-content: center;\n align-items: center;\n cursor: pointer;\n"], ["\n width: 59px;\n height: 36px;\n border-radius: 8px;\n border: 1px 0px 0px 0px;\n border-color: #bbbbbb;\n border-style: solid;\n border-width: 1px;\n font-size: 12px;\n font-weight: 600;\n line-height: 16px;\n text-align: center;\n display: flex;\n justify-content: center;\n align-items: center;\n cursor: pointer;\n"])));
|
|
20576
|
+
var SizeCardWrapper = newStyled.div(templateObject_4$a || (templateObject_4$a = __makeTemplateObject(["\n display: grid;\n gap: 4px;\n grid-template-columns: repeat(5, 1fr);\n\n @media only screen and (max-width: 375px) {\n grid-template-columns: repeat(3, 1fr);\n }\n"], ["\n display: grid;\n gap: 4px;\n grid-template-columns: repeat(5, 1fr);\n\n @media only screen and (max-width: 375px) {\n grid-template-columns: repeat(3, 1fr);\n }\n"])));
|
|
20577
|
+
var templateObject_1$j, templateObject_2$d, templateObject_3$d, templateObject_4$a;
|
|
20578
|
+
|
|
20579
|
+
var SizeOptions = function (_a) {
|
|
20580
|
+
var onAddToCart = _a.onAddToCart, sizeOptions = _a.sizeOptions;
|
|
20581
|
+
return (jsx$1(SizeCardWrapper, __assign$1({ "data-testid": "sizeCardWrapper" }, { children: sizeOptions.map(function (sizeOption) { return (jsx$1(SizeCardItem, __assign$1({ onClick: function () {
|
|
20582
|
+
onAddToCart(sizeOption.key);
|
|
20583
|
+
} }, { children: sizeOption.label }), sizeOption.key)); }) }), void 0));
|
|
20584
|
+
};
|
|
20585
|
+
|
|
20586
|
+
var OfferAtCartV2 = function (_a) {
|
|
20587
|
+
var className = _a.className, _b = _a.title, titleContent = _b.content, bold = _b.bold, _c = _a.image, src = _c.src, alt = _c.alt, benefits = _a.benefits, _d = _a.ctaText, ctaText = _d === void 0 ? 'Yes, I want this offer' : _d, sizeOptions = _a.sizeOptions, rating = _a.rating, onAddToCart = _a.onAddToCart, bottomCopy = _a.bottomCopy;
|
|
20588
|
+
var isMobile = useDeviceType() === 'mobile';
|
|
20589
|
+
var _e = useState(true), showButton = _e[0], setShowButton = _e[1];
|
|
20590
|
+
var ActionsSection = (jsx$1(ActionsV2, { children: showButton ? (jsx$1(ButtonSecondary, { wide: true, text: ctaText, size: ComponentSize.Small, onClick: function () {
|
|
20591
|
+
setShowButton(false);
|
|
20592
|
+
} }, void 0)) : (jsx$1(SizeOptions, { sizeOptions: sizeOptions, onAddToCart: onAddToCart }, void 0)) }, void 0));
|
|
20593
|
+
return (jsxs$1(ContainerV2, __assign$1({ className: className, variant: bottomCopy ? VariantType.V2 : VariantType.V1 }, { children: [jsx$1(OfferAtCartTitle, __assign$1({}, getTitleProps({ content: titleContent, bold: bold })), void 0), jsxs$1(Body, __assign$1({ height: isMobile ? '120px' : '162px' }, { children: [jsx$1(OfferAtCartImage, { isMobile: isMobile, src: src, alt: alt, rating: rating }, void 0), jsx$1(RightContent, { children: jsx$1(Benefits, __assign$1({ height: isMobile ? '100%' : '65%' }, { children: jsx$1(OfferAtCartBenefits, { benefits: benefits }, void 0) }), void 0) }, void 0)] }), void 0), jsx$1("div", { children: !isMobile && ActionsSection }, void 0), isMobile && ActionsSection, bottomCopy && renderBottomCopy(bottomCopy)] }), void 0));
|
|
20594
|
+
};
|
|
20595
|
+
|
|
20460
20596
|
var ImageContainer$1 = newStyled.div(function (_a) {
|
|
20461
20597
|
var width = _a.width, height = _a.height;
|
|
20462
20598
|
return ({
|
|
@@ -20465,21 +20601,21 @@ var ImageContainer$1 = newStyled.div(function (_a) {
|
|
|
20465
20601
|
height: height,
|
|
20466
20602
|
});
|
|
20467
20603
|
});
|
|
20468
|
-
var ImageHoverContainer$1 = newStyled.img(templateObject_1$
|
|
20469
|
-
var Container$
|
|
20470
|
-
var ProdCardContainer$2 = newStyled.div(templateObject_3$
|
|
20471
|
-
var Title$
|
|
20472
|
-
newStyled.div(templateObject_5$
|
|
20604
|
+
var ImageHoverContainer$1 = newStyled.img(templateObject_1$i || (templateObject_1$i = __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"])));
|
|
20605
|
+
var Container$h = newStyled.a(templateObject_2$c || (templateObject_2$c = __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"])));
|
|
20606
|
+
var ProdCardContainer$2 = newStyled.div(templateObject_3$c || (templateObject_3$c = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: min-content;\n text-decoration: none;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: min-content;\n text-decoration: none;\n"])));
|
|
20607
|
+
var Title$2 = newStyled.h2(templateObject_4$9 || (templateObject_4$9 = __makeTemplateObject(["\n font-size: 0.83rem;\n font-weight: normal;\n line-height: 1.375rem;\n min-height: 2.75rem;\n color: ", ";\n margin: 0.25rem 0;\n text-align: ", ";\n"], ["\n font-size: 0.83rem;\n font-weight: normal;\n line-height: 1.375rem;\n min-height: 2.75rem;\n color: ", ";\n margin: 0.25rem 0;\n text-align: ", ";\n"])), function (props) { return props.theme.colors.pallete.secondary.color; }, function (props) { return props.align; });
|
|
20608
|
+
newStyled.div(templateObject_5$8 || (templateObject_5$8 = __makeTemplateObject(["\n position: absolute;\n left: 0;\n top: 0;\n width: ", ";\n z-index: 1;\n"], ["\n position: absolute;\n left: 0;\n top: 0;\n width: ", ";\n z-index: 1;\n"])), function (_a) {
|
|
20473
20609
|
var style = _a.style;
|
|
20474
20610
|
return style.width;
|
|
20475
20611
|
});
|
|
20476
|
-
var BottomTagContainer$6 = newStyled.div(templateObject_6$
|
|
20612
|
+
var BottomTagContainer$6 = newStyled.div(templateObject_6$8 || (templateObject_6$8 = __makeTemplateObject(["\n position: absolute;\n bottom: ", ";\n z-index: 1;\n"], ["\n position: absolute;\n bottom: ", ";\n z-index: 1;\n"])), function (_a) {
|
|
20477
20613
|
var style = _a.style;
|
|
20478
20614
|
return style.bottom || '6%';
|
|
20479
20615
|
});
|
|
20480
|
-
newStyled.div(templateObject_7$
|
|
20481
|
-
var DiscountLabel$2 = newStyled.div(templateObject_8$
|
|
20482
|
-
var templateObject_1$
|
|
20616
|
+
newStyled.div(templateObject_7$7 || (templateObject_7$7 = __makeTemplateObject(["\n margin-top: 8px;\n"], ["\n margin-top: 8px;\n"])));
|
|
20617
|
+
var DiscountLabel$2 = newStyled.div(templateObject_8$5 || (templateObject_8$5 = __makeTemplateObject(["\n background-color: #c64844;\n color: white;\n font-size: 10px;\n line-height: 14px;\n padding: 4px 6px 4px 6px;\n font-weight: bold;\n border-radius: 4px;\n margin-top: 2px;\n height: fit-content;\n &:empty {\n display: none;\n }\n"], ["\n background-color: #c64844;\n color: white;\n font-size: 10px;\n line-height: 14px;\n padding: 4px 6px 4px 6px;\n font-weight: bold;\n border-radius: 4px;\n margin-top: 2px;\n height: fit-content;\n &:empty {\n display: none;\n }\n"])));
|
|
20618
|
+
var templateObject_1$i, templateObject_2$c, templateObject_3$c, templateObject_4$9, templateObject_5$8, templateObject_6$8, templateObject_7$7, templateObject_8$5;
|
|
20483
20619
|
|
|
20484
20620
|
var PriceLabelDisplay = function (_a) {
|
|
20485
20621
|
var price = _a.price, discountTag = _a.discountTag;
|
|
@@ -20516,7 +20652,7 @@ var getStylesBySize$2 = function (size) {
|
|
|
20516
20652
|
};
|
|
20517
20653
|
}
|
|
20518
20654
|
};
|
|
20519
|
-
var TopTagContainer$6 = newStyled.div(templateObject_1$
|
|
20655
|
+
var TopTagContainer$6 = newStyled.div(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n position: absolute;\n left: 0;\n top: 0;\n width: ", ";\n z-index: 1;\n"], ["\n position: absolute;\n left: 0;\n top: 0;\n width: ", ";\n z-index: 1;\n"])), function (_a) {
|
|
20520
20656
|
var style = _a.style;
|
|
20521
20657
|
return style.width;
|
|
20522
20658
|
});
|
|
@@ -20532,9 +20668,9 @@ var ProductCard = function (_a) {
|
|
|
20532
20668
|
_a[ComponentSize.Small] = 2,
|
|
20533
20669
|
_a)[size];
|
|
20534
20670
|
}, [size]);
|
|
20535
|
-
return (jsxs$1(ProdCardContainer$2, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs$1(Container$
|
|
20671
|
+
return (jsxs$1(ProdCardContainer$2, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs$1(Container$h, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', className: "picContainer", onClick: onClick }, { children: [!!topTag || !!bottomTag ? (jsxs$1(ImageContainer$1, __assign$1({ width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height, "data-testid": "tags-image-container" }, { children: [jsx$1(Image$3, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, width: "100%", height: "100%" }, void 0), jsx$1(TopTagContainer$6, __assign$1({ style: { width: 'inherit' } }, { children: topTag }), void 0), jsx$1(BottomTagContainer$6, __assign$1({ style: { width: 'inherit' } }, { children: bottomTag }), void 0)] }), void 0)) : (jsx$1(Image$3, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)), imageHover ? (jsx$1(ImageHoverContainer$1, { className: "hover__image", src: imageHover.src, srcSet: getSrcSet(imageHover.src, 180, 360, 720, 960), loading: "lazy", alt: imageHover.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)) : null] }), void 0), jsxs$1(Container$h, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', onClick: onClick, className: "textContainer", style: { alignItems: "".concat(size === ComponentSize.Small ? 'start' : 'center') } }, { children: [jsx$1(Spacing, { size: space }, void 0), ratingPos !== 'bottom' && (jsx$1(RatingDisplay, { rating: rating, size: size, isRatingLoading: isRatingLoading }, void 0)), jsx$1(Spacing, { size: space }, void 0), jsx$1(Title$2, __assign$1({ theme: theme, align: alignName }, { children: title }), void 0), jsx$1(Spacing, { size: space }, void 0), priceLoading ? (jsx$1(SkeletonBox, { height: "20px", width: "140px" }, void 0)) : (jsx$1(PriceLabelDisplay, { price: price, discountTag: discountTag }, void 0)), jsx$1(Spacing, { size: space }, void 0), ratingPos === 'bottom' && (jsx$1(RatingDisplay, { rating: rating, size: size, isRatingLoading: isRatingLoading }, void 0))] }), void 0)] }), void 0));
|
|
20536
20672
|
};
|
|
20537
|
-
var templateObject_1$
|
|
20673
|
+
var templateObject_1$h;
|
|
20538
20674
|
|
|
20539
20675
|
var ImageContainer = newStyled.div(function (_a) {
|
|
20540
20676
|
var width = _a.width, height = _a.height;
|
|
@@ -20544,16 +20680,16 @@ var ImageContainer = newStyled.div(function (_a) {
|
|
|
20544
20680
|
height: height,
|
|
20545
20681
|
});
|
|
20546
20682
|
});
|
|
20547
|
-
var DiscountLabel$1 = newStyled.div(templateObject_1$
|
|
20548
|
-
var ImageHoverContainer = newStyled.img(templateObject_2$
|
|
20549
|
-
var Container$
|
|
20550
|
-
var ProdCardContainer$1 = newStyled.div(templateObject_4$
|
|
20551
|
-
var Title$
|
|
20552
|
-
var TopTagContainer$5 = newStyled.div(templateObject_6$
|
|
20683
|
+
var DiscountLabel$1 = newStyled.div(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n background-color: #c64844;\n color: white;\n font-size: 10px;\n line-height: 14px;\n padding: 4px 6px 4px 6px;\n font-weight: bold;\n border-radius: 4px;\n margin-top: 2px;\n height: fit-content;\n"], ["\n background-color: #c64844;\n color: white;\n font-size: 10px;\n line-height: 14px;\n padding: 4px 6px 4px 6px;\n font-weight: bold;\n border-radius: 4px;\n margin-top: 2px;\n height: fit-content;\n"])));
|
|
20684
|
+
var ImageHoverContainer = newStyled.img(templateObject_2$b || (templateObject_2$b = __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"])));
|
|
20685
|
+
var Container$g = newStyled.a(templateObject_3$b || (templateObject_3$b = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n width: 100%;\n text-decoration: none;\n\n &:hover .hover__image {\n opacity: 1;\n }\n"], ["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n width: 100%;\n text-decoration: none;\n\n &:hover .hover__image {\n opacity: 1;\n }\n"])));
|
|
20686
|
+
var ProdCardContainer$1 = newStyled.div(templateObject_4$8 || (templateObject_4$8 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: min-content;\n text-decoration: none;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: min-content;\n text-decoration: none;\n"])));
|
|
20687
|
+
var Title$1 = newStyled.h2(templateObject_5$7 || (templateObject_5$7 = __makeTemplateObject(["\n font-size: 0.83rem;\n font-weight: normal;\n line-height: 1.375rem;\n min-height: 2.75rem;\n color: ", ";\n margin: 0.25rem 0;\n text-align: ", ";\n"], ["\n font-size: 0.83rem;\n font-weight: normal;\n line-height: 1.375rem;\n min-height: 2.75rem;\n color: ", ";\n margin: 0.25rem 0;\n text-align: ", ";\n"])), function (props) { return props.theme.colors.pallete.secondary.color; }, function (props) { return props.align; });
|
|
20688
|
+
var TopTagContainer$5 = newStyled.div(templateObject_6$7 || (templateObject_6$7 = __makeTemplateObject(["\n position: absolute;\n left: 0;\n top: 0;\n width: ", ";\n z-index: 1;\n"], ["\n position: absolute;\n left: 0;\n top: 0;\n width: ", ";\n z-index: 1;\n"])), function (_a) {
|
|
20553
20689
|
var style = _a.style;
|
|
20554
20690
|
return style.width;
|
|
20555
20691
|
});
|
|
20556
|
-
var BottomTagContainer$5 = newStyled.div(templateObject_7$
|
|
20692
|
+
var BottomTagContainer$5 = newStyled.div(templateObject_7$6 || (templateObject_7$6 = __makeTemplateObject(["\n position: absolute;\n display: flex;\n justify-content: flex-end;\n bottom: ", ";\n right: ", ";\n width: ", ";\n z-index: 1;\n"], ["\n position: absolute;\n display: flex;\n justify-content: flex-end;\n bottom: ", ";\n right: ", ";\n width: ", ";\n z-index: 1;\n"])), function (_a) {
|
|
20557
20693
|
var _b;
|
|
20558
20694
|
var style = _a.style;
|
|
20559
20695
|
return (_b = style.bottom) !== null && _b !== void 0 ? _b : '6%';
|
|
@@ -20566,7 +20702,7 @@ var BottomTagContainer$5 = newStyled.div(templateObject_7$7 || (templateObject_7
|
|
|
20566
20702
|
var style = _a.style;
|
|
20567
20703
|
return (_b = style.width) !== null && _b !== void 0 ? _b : 'auto';
|
|
20568
20704
|
});
|
|
20569
|
-
var templateObject_1$
|
|
20705
|
+
var templateObject_1$g, templateObject_2$b, templateObject_3$b, templateObject_4$8, templateObject_5$7, templateObject_6$7, templateObject_7$6;
|
|
20570
20706
|
|
|
20571
20707
|
var getStylesBySize$1 = function (size) {
|
|
20572
20708
|
switch (size) {
|
|
@@ -20626,7 +20762,7 @@ var ProductCardV2 = function (_a) {
|
|
|
20626
20762
|
return jsx$1(Fragment$2, {}, void 0);
|
|
20627
20763
|
return (jsx$1(Rating, { size: size === ComponentSize.Large ? ComponentSize.Small : ComponentSize.XSmall, rating: rating.rating, reviews: rating.reviews, reviewsText: "", wrapWithParenthesis: true }, void 0));
|
|
20628
20764
|
};
|
|
20629
|
-
return (jsxs$1(ProdCardContainer$1, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs$1(Container$
|
|
20765
|
+
return (jsxs$1(ProdCardContainer$1, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs$1(Container$g, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', className: "picContainer", onClick: onClick }, { children: [!!topTag || !!bottomTag ? (jsxs$1(ImageContainer, __assign$1({ width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height, "data-testid": "tags-image-container" }, { children: [jsx$1(Image$3, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, width: "100%", height: "100%" }, void 0), jsx$1(TopTagContainer$5, __assign$1({ style: { width: 'inherit' } }, { children: topTag }), void 0), jsx$1(BottomTagContainer$5, __assign$1({ "data-testid": "bottom-tag-container", style: { width: 'inherit' } }, { children: bottomTag }), void 0)] }), void 0)) : (jsx$1(Image$3, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)), imageHover ? (jsx$1(ImageHoverContainer, { className: "hover__image", src: imageHover.src, srcSet: getSrcSet(imageHover.src, 180, 360, 720, 960), loading: "lazy", alt: imageHover.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)) : null] }), void 0), jsxs$1(Container$g, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', onClick: onClick, className: "textContainer" }, { children: [jsx$1(Spacing, { size: space }, void 0), jsx$1(Spacing, { size: space }, void 0), jsx$1(Spacing, { size: space }, void 0), jsx$1(Text$7, __assign$1({ variant: "link", underline: true }, { children: colorsCopy }), void 0), jsx$1(Spacing, { size: space }, void 0), jsx$1(Spacing, { size: space }, void 0), jsx$1(RatingDisplay, {}, void 0), jsx$1(Spacing, { size: space }, void 0), jsx$1(Title$1, __assign$1({ theme: theme, align: alignName }, { children: title }), void 0), jsxs$1("div", __assign$1({ style: {
|
|
20630
20766
|
display: 'flex',
|
|
20631
20767
|
alignItems: 'flex-start',
|
|
20632
20768
|
gap: '5px',
|
|
@@ -20642,16 +20778,16 @@ newStyled.div(function (_a) {
|
|
|
20642
20778
|
height: height,
|
|
20643
20779
|
});
|
|
20644
20780
|
});
|
|
20645
|
-
var DiscountLabel = newStyled.div(templateObject_1$
|
|
20646
|
-
newStyled.img(templateObject_2$
|
|
20647
|
-
var Container$
|
|
20648
|
-
var ProdCardContainer = newStyled.div(templateObject_4$
|
|
20649
|
-
var Title
|
|
20650
|
-
newStyled.div(templateObject_6$
|
|
20781
|
+
var DiscountLabel = newStyled.div(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n background-color: #c64844;\n color: white;\n font-size: 10px;\n line-height: 14px;\n padding: 4px 6px 4px 6px;\n font-weight: bold;\n border-radius: 4px;\n margin-top: 2px;\n height: fit-content;\n"], ["\n background-color: #c64844;\n color: white;\n font-size: 10px;\n line-height: 14px;\n padding: 4px 6px 4px 6px;\n font-weight: bold;\n border-radius: 4px;\n margin-top: 2px;\n height: fit-content;\n"])));
|
|
20782
|
+
newStyled.img(templateObject_2$a || (templateObject_2$a = __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"])));
|
|
20783
|
+
var Container$f = newStyled.a(templateObject_3$a || (templateObject_3$a = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n width: 100%;\n text-decoration: none;\n\n &:hover .hover__image {\n opacity: 1;\n }\n"], ["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n width: 100%;\n text-decoration: none;\n\n &:hover .hover__image {\n opacity: 1;\n }\n"])));
|
|
20784
|
+
var ProdCardContainer = newStyled.div(templateObject_4$7 || (templateObject_4$7 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: flex-start;\n width: fit-content;\n text-decoration: none;\n"], ["\n display: flex;\n flex-direction: row;\n align-items: flex-start;\n width: fit-content;\n text-decoration: none;\n"])));
|
|
20785
|
+
var Title = newStyled.h2(templateObject_5$6 || (templateObject_5$6 = __makeTemplateObject(["\n font-size: 0.83rem;\n font-weight: normal;\n line-height: 1.375rem;\n min-height: 2.75rem;\n color: ", ";\n margin: 0.25rem 0;\n text-align: ", ";\n"], ["\n font-size: 0.83rem;\n font-weight: normal;\n line-height: 1.375rem;\n min-height: 2.75rem;\n color: ", ";\n margin: 0.25rem 0;\n text-align: ", ";\n"])), function (props) { return props.theme.colors.pallete.secondary.color; }, function (props) { return props.align; });
|
|
20786
|
+
newStyled.div(templateObject_6$6 || (templateObject_6$6 = __makeTemplateObject(["\n position: absolute;\n left: 0;\n top: 0;\n width: ", ";\n z-index: 1;\n"], ["\n position: absolute;\n left: 0;\n top: 0;\n width: ", ";\n z-index: 1;\n"])), function (_a) {
|
|
20651
20787
|
var style = _a.style;
|
|
20652
20788
|
return style.width;
|
|
20653
20789
|
});
|
|
20654
|
-
newStyled.div(templateObject_7$
|
|
20790
|
+
newStyled.div(templateObject_7$5 || (templateObject_7$5 = __makeTemplateObject(["\n position: absolute;\n display: flex;\n justify-content: flex-end;\n bottom: ", ";\n right: ", ";\n width: ", ";\n z-index: 1;\n"], ["\n position: absolute;\n display: flex;\n justify-content: flex-end;\n bottom: ", ";\n right: ", ";\n width: ", ";\n z-index: 1;\n"])), function (_a) {
|
|
20655
20791
|
var _b;
|
|
20656
20792
|
var style = _a.style;
|
|
20657
20793
|
return (_b = style.bottom) !== null && _b !== void 0 ? _b : '6%';
|
|
@@ -20664,7 +20800,7 @@ newStyled.div(templateObject_7$6 || (templateObject_7$6 = __makeTemplateObject([
|
|
|
20664
20800
|
var style = _a.style;
|
|
20665
20801
|
return (_b = style.width) !== null && _b !== void 0 ? _b : 'auto';
|
|
20666
20802
|
});
|
|
20667
|
-
var templateObject_1$
|
|
20803
|
+
var templateObject_1$f, templateObject_2$a, templateObject_3$a, templateObject_4$7, templateObject_5$6, templateObject_6$6, templateObject_7$5;
|
|
20668
20804
|
|
|
20669
20805
|
var getStylesBySize = function (size) {
|
|
20670
20806
|
switch (size) {
|
|
@@ -20713,7 +20849,7 @@ var ProductCardV3 = function (_a) {
|
|
|
20713
20849
|
return jsx$1(Fragment$2, {}, void 0);
|
|
20714
20850
|
return (jsx$1(Rating, { size: size === ComponentSize.Large ? ComponentSize.Small : ComponentSize.XSmall, rating: rating.rating, reviews: rating.reviews, reviewsText: "", wrapWithParenthesis: true }, void 0));
|
|
20715
20851
|
};
|
|
20716
|
-
return (jsxs$1(ProdCardContainer, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsx$1(Container$
|
|
20852
|
+
return (jsxs$1(ProdCardContainer, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsx$1(Container$f, __assign$1({ "data-testid": "first-image-div", as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', className: "picContainer", onClick: onClick, style: { marginRight: '-90px' } }, { children: jsx$1(Image$3, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0) }), void 0), jsxs$1(Container$f, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', onClick: onClick, className: "textContainer" }, { children: [jsxs$1("div", __assign$1({ style: { display: 'flex', justifyContent: 'space-between' } }, { children: [jsx$1(Title, __assign$1({ theme: theme, align: alignName, style: { fontSize: '14px' } }, { children: title }), void 0), jsx$1("button", __assign$1({ "data-testid": "quick-eye-button", style: {
|
|
20717
20853
|
margin: '5x 0 0 45px',
|
|
20718
20854
|
backgroundColor: 'transparent',
|
|
20719
20855
|
border: 'none',
|
|
@@ -20785,7 +20921,7 @@ var playVideoCommand = function () {
|
|
|
20785
20921
|
sendCommandToIframe('playVideo');
|
|
20786
20922
|
};
|
|
20787
20923
|
|
|
20788
|
-
var Container$
|
|
20924
|
+
var Container$e = newStyled.div(templateObject_1$e || (templateObject_1$e = __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) {
|
|
20789
20925
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
20790
20926
|
return borderRadiusVariant &&
|
|
20791
20927
|
"\n border-radius: 40px;\n ";
|
|
@@ -20793,11 +20929,11 @@ var Container$f = newStyled.div(templateObject_1$g || (templateObject_1$g = __ma
|
|
|
20793
20929
|
var theme = _a.theme;
|
|
20794
20930
|
return theme.component.slideNavigation.slideDots.selectedDotColor;
|
|
20795
20931
|
});
|
|
20796
|
-
var TopTagContainer$4 = newStyled.div(templateObject_2$
|
|
20797
|
-
var TopRightTagContainer$1 = newStyled.div(templateObject_3$
|
|
20798
|
-
var BottomTagContainer$4 = newStyled.div(templateObject_4$
|
|
20799
|
-
var NavButtonContainer$3 = newStyled.div(templateObject_5$
|
|
20800
|
-
var Button$4 = newStyled.button(templateObject_6$
|
|
20932
|
+
var TopTagContainer$4 = newStyled.div(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["\n position: absolute;\n left: ", ";\n top: ", ";\n"], ["\n position: absolute;\n left: ", ";\n top: ", ";\n"])), function (props) { return (props.borderRadiusVariant ? '13px' : '0'); }, function (props) { return (props.borderRadiusVariant ? '11px' : '0'); });
|
|
20933
|
+
var TopRightTagContainer$1 = newStyled.div(templateObject_3$9 || (templateObject_3$9 = __makeTemplateObject(["\n position: absolute;\n right: 0;\n top: 0;\n"], ["\n position: absolute;\n right: 0;\n top: 0;\n"])));
|
|
20934
|
+
var BottomTagContainer$4 = newStyled.div(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
20935
|
+
var NavButtonContainer$3 = newStyled.div(templateObject_5$5 || (templateObject_5$5 = __makeTemplateObject(["\n height: 40px;\n width: 40px;\n"], ["\n height: 40px;\n width: 40px;\n"])));
|
|
20936
|
+
var Button$4 = newStyled.button(templateObject_6$5 || (templateObject_6$5 = __makeTemplateObject(["\n background: transparent;\n border: none;\n padding: 0.188rem 0.625rem;\n z-index: 5;\n height: 40px !important;\n cursor: pointer;\n"], ["\n background: transparent;\n border: none;\n padding: 0.188rem 0.625rem;\n z-index: 5;\n height: 40px !important;\n cursor: pointer;\n"])));
|
|
20801
20937
|
var settings$3 = {
|
|
20802
20938
|
dots: true,
|
|
20803
20939
|
infinite: false,
|
|
@@ -20855,7 +20991,7 @@ var ImageProductSlide = function (_a) {
|
|
|
20855
20991
|
}
|
|
20856
20992
|
}
|
|
20857
20993
|
}, [contents, selectedValue]);
|
|
20858
|
-
return (jsxs$1(Fragment$2, { children: [customClick && (jsx$1("div", __assign$1({ style: { display: 'flex', marginBottom: '20px', gap: '10px' } }, { children: contents.map(function (_, i) { return (jsx$1(ButtonPrimary, { onClick: function () { return onButtonClick(i); }, text: String(i + 1), inline: true }, i)); }) }), void 0)), jsx$1(Container$
|
|
20994
|
+
return (jsxs$1(Fragment$2, { children: [customClick && (jsx$1("div", __assign$1({ style: { display: 'flex', marginBottom: '20px', gap: '10px' } }, { children: contents.map(function (_, i) { return (jsx$1(ButtonPrimary, { onClick: function () { return onButtonClick(i); }, text: String(i + 1), inline: true }, i)); }) }), void 0)), jsx$1(Container$e, __assign$1({ "data-testid": testId, borderRadiusVariant: borderRadiusVariant, ref: sliderWrapper }, { children: jsx$1(Slider$1, __assign$1({ afterChange: function (e) {
|
|
20859
20995
|
var _a;
|
|
20860
20996
|
var activeSlide = contents[e];
|
|
20861
20997
|
// If autoplay is true and iframe is the active slide, play the video
|
|
@@ -20875,16 +21011,16 @@ var ImageProductSlide = function (_a) {
|
|
|
20875
21011
|
return (jsx$1("div", { children: !isVideo ? (jsxs$1(Fragment$2, { children: [jsx$1(InnerImageZoom, { src: source, zoomSrc: source, zoomType: "hover", imgAttributes: getImageAttributes$1(idx, itemsOnViewport, imgAttributes), height: 510, fullscreenOnMobile: true, className: "zoomWrapper" }, void 0), jsx$1(TopTagContainer$4, __assign$1({ borderRadiusVariant: borderRadiusVariant, "data-testid": "topTag" }, { children: topTag }), void 0), jsx$1(BottomTagContainer$4, __assign$1({ "data-testid": "bottomTag" }, { children: bottomTag }), void 0), !!topRightTag && jsx$1(TopRightTagContainer$1, { children: topRightTag }, void 0)] }, void 0)) : (jsx$1(Video$1, { source: source, thumbnail: content === null || content === void 0 ? void 0 : content.thumbnailUrl }, void 0)) }, content.key));
|
|
20876
21012
|
}) }), void 0) }), void 0)] }, void 0));
|
|
20877
21013
|
};
|
|
20878
|
-
var templateObject_1$
|
|
21014
|
+
var templateObject_1$e, templateObject_2$9, templateObject_3$9, templateObject_4$6, templateObject_5$5, templateObject_6$5;
|
|
20879
21015
|
|
|
20880
|
-
var Container$
|
|
21016
|
+
var Container$d = newStyled.div(templateObject_1$d || (templateObject_1$d = __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"])));
|
|
20881
21017
|
var ProductGalleryMobile = function (_a) {
|
|
20882
21018
|
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;
|
|
20883
21019
|
var _e = useState(0), activeIndex = _e[0], setActiveIndex = _e[1];
|
|
20884
21020
|
var selectedContent = hasToPreserveOrder ? images === null || images === void 0 ? void 0 : images[activeIndex] : selectedValue;
|
|
20885
|
-
return (jsx$1(Container$
|
|
21021
|
+
return (jsx$1(Container$d, __assign$1({ "data-testid": "product-gallery-mobile-v1" }, { children: jsx$1(ImageProductSlide, { contents: images, customClick: customClick, topTag: topTag, topRightTag: topRightTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant, selectedValue: selectedContent, onChange: function (index) { return setActiveIndex(index); }, itemsOnViewport: itemsOnViewport }, void 0) }), void 0));
|
|
20886
21022
|
};
|
|
20887
|
-
var templateObject_1$
|
|
21023
|
+
var templateObject_1$d;
|
|
20888
21024
|
|
|
20889
21025
|
function _extends() {
|
|
20890
21026
|
_extends = Object.assign || function (target) {
|
|
@@ -21151,27 +21287,27 @@ function useSwipeable(options) {
|
|
|
21151
21287
|
return handlers;
|
|
21152
21288
|
}
|
|
21153
21289
|
|
|
21154
|
-
var Button$3 = newStyled.button(templateObject_1$
|
|
21290
|
+
var Button$3 = newStyled.button(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n background: transparent;\n border: none;\n padding: 0.188rem 0.625rem;\n z-index: 5;\n top: calc(50% - 40px);\n height: 40px !important;\n"], ["\n background: transparent;\n border: none;\n padding: 0.188rem 0.625rem;\n z-index: 5;\n top: calc(50% - 40px);\n height: 40px !important;\n"])));
|
|
21155
21291
|
var ArrowButton = function (_a) {
|
|
21156
21292
|
var Icon = _a.Icon, onClick = _a.onClick, className = _a.className;
|
|
21157
21293
|
return (jsx$1(Button$3, __assign$1({ className: className, type: "button", onClick: onClick }, { children: Icon }), void 0));
|
|
21158
21294
|
};
|
|
21159
|
-
var templateObject_1$
|
|
21295
|
+
var templateObject_1$c;
|
|
21160
21296
|
|
|
21161
|
-
var Container$
|
|
21297
|
+
var Container$c = newStyled.div(templateObject_1$b || (templateObject_1$b = __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"])));
|
|
21162
21298
|
var range = function (limit) { return __spreadArray([], new Array(limit), true).map(function (_, index) { return index; }); };
|
|
21163
21299
|
var SlideDots = function (_a) {
|
|
21164
21300
|
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, containerDataTestId = _a.containerDataTestId;
|
|
21165
21301
|
var theme = useTheme();
|
|
21166
|
-
return (jsx$1(Container$
|
|
21302
|
+
return (jsx$1(Container$c, __assign$1({ "data-testid": containerDataTestId }, { children: range(quantity).map(function (index) { return (jsx$1(Icon$1, { name: "navigation/slide_dot".concat(index === selectedIndex ? '_solid' : ''), height: 0.75, width: 0.75, fill: index === selectedIndex
|
|
21167
21303
|
? theme.component.slideNavigation.slideDots.selectedDotColor
|
|
21168
21304
|
: 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));
|
|
21169
21305
|
};
|
|
21170
|
-
var templateObject_1$
|
|
21306
|
+
var templateObject_1$b;
|
|
21171
21307
|
|
|
21172
|
-
var NavigationButton = newStyled(ArrowButton)(templateObject_1$
|
|
21173
|
-
var RightButton = newStyled(NavigationButton)(templateObject_2$
|
|
21174
|
-
var LeftButton = newStyled(NavigationButton)(templateObject_3$
|
|
21308
|
+
var NavigationButton = newStyled(ArrowButton)(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n position: absolute;\n height: 100%;\n display: flex;\n align-items: center;\n cursor: pointer;\n"], ["\n position: absolute;\n height: 100%;\n display: flex;\n align-items: center;\n cursor: pointer;\n"])));
|
|
21309
|
+
var RightButton = newStyled(NavigationButton)(templateObject_2$8 || (templateObject_2$8 = __makeTemplateObject(["\n right: 0;\n"], ["\n right: 0;\n"])));
|
|
21310
|
+
var LeftButton = newStyled(NavigationButton)(templateObject_3$8 || (templateObject_3$8 = __makeTemplateObject(["\n left: 0;\n"], ["\n left: 0;\n"])));
|
|
21175
21311
|
var SlideNavigation = function (_a) {
|
|
21176
21312
|
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, onNavigate = _a.onNavigate, testId = _a.testId;
|
|
21177
21313
|
var theme = useTheme();
|
|
@@ -21183,23 +21319,23 @@ var SlideNavigation = function (_a) {
|
|
|
21183
21319
|
onNavigate(selectedIndex + 1);
|
|
21184
21320
|
} }, void 0)), jsx$1(SlideDots, { quantity: quantity, selectedIndex: selectedIndex, containerDataTestId: testId }, void 0)] }, void 0));
|
|
21185
21321
|
};
|
|
21186
|
-
var templateObject_1$
|
|
21322
|
+
var templateObject_1$a, templateObject_2$8, templateObject_3$8;
|
|
21187
21323
|
|
|
21188
|
-
var Container$
|
|
21324
|
+
var Container$b = newStyled.div(templateObject_1$9 || (templateObject_1$9 = __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) {
|
|
21189
21325
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
21190
21326
|
return borderRadiusVariant &&
|
|
21191
21327
|
"\n border-radius: 40px;\n ";
|
|
21192
21328
|
});
|
|
21193
|
-
var TopTagContainer$3 = newStyled.div(templateObject_2$
|
|
21194
|
-
var BottomTagContainer$3 = newStyled.div(templateObject_3$
|
|
21329
|
+
var TopTagContainer$3 = newStyled.div(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n position: absolute;\n left: ", ";\n top: ", ";\n"], ["\n position: absolute;\n left: ", ";\n top: ", ";\n"])), function (props) { return (props.borderRadiusVariant ? '13px' : '0'); }, function (props) { return (props.borderRadiusVariant ? '11px' : '0'); });
|
|
21330
|
+
var BottomTagContainer$3 = newStyled.div(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
21195
21331
|
var ImageProductSlideV2 = forwardRef(function ImageProductWithTags(_a, ref) {
|
|
21196
21332
|
var _b, _c;
|
|
21197
21333
|
var image = _a.image, topTag = _a.topTag, bottomTag = _a.bottomTag, testId = _a.testId, borderRadiusVariant = _a.borderRadiusVariant;
|
|
21198
|
-
return (jsxs$1(Container$
|
|
21334
|
+
return (jsxs$1(Container$b, __assign$1({ "data-testid": testId, ref: ref, borderRadiusVariant: borderRadiusVariant }, { children: [!((_b = image === null || image === void 0 ? void 0 : image.alt) === null || _b === void 0 ? void 0 : _b.includes('-video')) && (jsxs$1(Fragment$2, { children: [jsx$1(InnerImageZoom, { src: image.url, zoomSrc: image.url, zoomType: "hover", imgAttributes: { alt: image.alt, width: '100%', height: '510px' }, height: 510, fullscreenOnMobile: true, className: "zoomWrapper" }, void 0), jsx$1(TopTagContainer$3, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsx$1(BottomTagContainer$3, { children: bottomTag }, void 0)] }, void 0)), ((_c = image === null || image === void 0 ? void 0 : image.alt) === null || _c === void 0 ? void 0 : _c.includes('-video')) && (jsx$1("iframe", { allowFullScreen: true, title: image.alt, width: "100%", height: 510, src: image === null || image === void 0 ? void 0 : image.url, allow: "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" }, void 0))] }), void 0));
|
|
21199
21335
|
});
|
|
21200
|
-
var templateObject_1$
|
|
21336
|
+
var templateObject_1$9, templateObject_2$7, templateObject_3$7;
|
|
21201
21337
|
|
|
21202
|
-
var Container$
|
|
21338
|
+
var Container$a = newStyled.div(templateObject_1$8 || (templateObject_1$8 = __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"])));
|
|
21203
21339
|
var ProductGalleryMobileV2 = function (_a) {
|
|
21204
21340
|
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;
|
|
21205
21341
|
var _c = useState(0), index = _c[0], setIndex = _c[1];
|
|
@@ -21221,11 +21357,11 @@ var ProductGalleryMobileV2 = function (_a) {
|
|
|
21221
21357
|
useEffect(function () {
|
|
21222
21358
|
setSelectedImage(images[index]);
|
|
21223
21359
|
}, [index, images]);
|
|
21224
|
-
return (jsxs$1(Container$
|
|
21360
|
+
return (jsxs$1(Container$a, __assign$1({ "data-testid": "product-gallery-mobile-v2" }, { children: [jsx$1(ImageProductSlideV2, __assign$1({}, handlers, { image: selectedImage, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant }), void 0), jsx$1(SlideNavigation, { quantity: images.length, selectedIndex: images.indexOf(selectedImage), onNavigate: setIndex, testId: slideDotsDataTestId }, void 0)] }), void 0));
|
|
21225
21361
|
};
|
|
21226
|
-
var templateObject_1$
|
|
21362
|
+
var templateObject_1$8;
|
|
21227
21363
|
|
|
21228
|
-
var Container$
|
|
21364
|
+
var Container$9 = newStyled.div(templateObject_1$7 || (templateObject_1$7 = __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) {
|
|
21229
21365
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
21230
21366
|
return borderRadiusVariant &&
|
|
21231
21367
|
"\n border-radius: 40px;\n ";
|
|
@@ -21233,13 +21369,13 @@ var Container$a = newStyled.div(templateObject_1$9 || (templateObject_1$9 = __ma
|
|
|
21233
21369
|
var theme = _a.theme;
|
|
21234
21370
|
return theme.component.slideNavigation.slideDots.selectedDotColor;
|
|
21235
21371
|
});
|
|
21236
|
-
var TopTagContainer$2 = newStyled.div(templateObject_2$
|
|
21237
|
-
var BottomTagContainer$2 = newStyled.div(templateObject_3$
|
|
21238
|
-
var VideoOverlay = newStyled.div(templateObject_4$
|
|
21239
|
-
var Video = newStyled.div(templateObject_5$
|
|
21240
|
-
var VideoTag = newStyled.div(templateObject_6$
|
|
21241
|
-
var Text = newStyled.div(templateObject_7$
|
|
21242
|
-
var NavButtonContainer$2 = newStyled.div(templateObject_8$
|
|
21372
|
+
var TopTagContainer$2 = newStyled.div(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject(["\n position: absolute;\n left: ", ";\n top: ", ";\n"], ["\n position: absolute;\n left: ", ";\n top: ", ";\n"])), function (props) { return (props.borderRadiusVariant ? '13px' : '0'); }, function (props) { return (props.borderRadiusVariant ? '11px' : '0'); });
|
|
21373
|
+
var BottomTagContainer$2 = newStyled.div(templateObject_3$6 || (templateObject_3$6 = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
21374
|
+
var VideoOverlay = newStyled.div(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject(["\n content: '';\n background: transparent;\n width: 100%;\n height: 100%;\n min-height: 1px;\n position: absolute;\n top: 0;\n"], ["\n content: '';\n background: transparent;\n width: 100%;\n height: 100%;\n min-height: 1px;\n position: absolute;\n top: 0;\n"])));
|
|
21375
|
+
var Video = newStyled.div(templateObject_5$4 || (templateObject_5$4 = __makeTemplateObject(["\n position: relative;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n height: 510px;\n background: #efefef;\n\n & > iframe {\n border: none;\n }\n"], ["\n position: relative;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n height: 510px;\n background: #efefef;\n\n & > iframe {\n border: none;\n }\n"])));
|
|
21376
|
+
var VideoTag = newStyled.div(templateObject_6$4 || (templateObject_6$4 = __makeTemplateObject(["\n gap: 8px;\n position: absolute;\n width: 100%;\n bottom: 50px;\n display: flex;\n padding: 8.6px 0;\n font-weight: 600;\n align-items: center;\n background: #f7f7f7;\n justify-content: center;\n"], ["\n gap: 8px;\n position: absolute;\n width: 100%;\n bottom: 50px;\n display: flex;\n padding: 8.6px 0;\n font-weight: 600;\n align-items: center;\n background: #f7f7f7;\n justify-content: center;\n"])));
|
|
21377
|
+
var Text = newStyled.div(templateObject_7$4 || (templateObject_7$4 = __makeTemplateObject(["\n padding-top: 3px;\n"], ["\n padding-top: 3px;\n"])));
|
|
21378
|
+
var NavButtonContainer$2 = newStyled.div(templateObject_8$4 || (templateObject_8$4 = __makeTemplateObject(["\n height: 40px;\n width: 40px;\n"], ["\n height: 40px;\n width: 40px;\n"])));
|
|
21243
21379
|
var Button$2 = newStyled.button(templateObject_9$4 || (templateObject_9$4 = __makeTemplateObject(["\n background: transparent;\n border: none;\n padding: 0.188rem 0.625rem;\n z-index: 5;\n height: 40px !important;\n cursor: pointer;\n"], ["\n background: transparent;\n border: none;\n padding: 0.188rem 0.625rem;\n z-index: 5;\n height: 40px !important;\n cursor: pointer;\n"])));
|
|
21244
21380
|
var settings$2 = {
|
|
21245
21381
|
dots: true,
|
|
@@ -21287,7 +21423,7 @@ var ImageProductSlideV3 = function (_a) {
|
|
|
21287
21423
|
}
|
|
21288
21424
|
}
|
|
21289
21425
|
}, [images, selectedValue]);
|
|
21290
|
-
return (jsxs$1(Fragment$2, { children: [customClick && (jsx$1("div", __assign$1({ style: { display: 'flex', marginBottom: '20px', gap: '10px' } }, { children: images.map(function (_, i) { return (jsx$1(ButtonPrimary, { onClick: function () { return onButtonClick(i); }, text: String(i + 1), inline: true }, i)); }) }), void 0)), jsx$1(Container$
|
|
21426
|
+
return (jsxs$1(Fragment$2, { children: [customClick && (jsx$1("div", __assign$1({ style: { display: 'flex', marginBottom: '20px', gap: '10px' } }, { children: images.map(function (_, i) { return (jsx$1(ButtonPrimary, { onClick: function () { return onButtonClick(i); }, text: String(i + 1), inline: true }, i)); }) }), void 0)), jsx$1(Container$9, __assign$1({ "data-testid": testId, borderRadiusVariant: borderRadiusVariant, ref: sliderWrapper }, { children: jsx$1(Slider$1, __assign$1({ afterChange: function (e) {
|
|
21291
21427
|
var _a;
|
|
21292
21428
|
var activeSlide = images[e];
|
|
21293
21429
|
// If autoplay is true and iframe is the active slide, play the video
|
|
@@ -21300,14 +21436,14 @@ var ImageProductSlideV3 = function (_a) {
|
|
|
21300
21436
|
} }, void 0), jsxs$1(VideoTag, { children: [jsx$1(Icon.PDP.PlayMini, { width: 1.5 }, void 0), jsx$1(Text, { children: "VIDEO" }, void 0)] }, void 0)] }, void 0))] }, image.key));
|
|
21301
21437
|
}) }), void 0) }), void 0)] }, void 0));
|
|
21302
21438
|
};
|
|
21303
|
-
var templateObject_1$
|
|
21439
|
+
var templateObject_1$7, templateObject_2$6, templateObject_3$6, templateObject_4$5, templateObject_5$4, templateObject_6$4, templateObject_7$4, templateObject_8$4, templateObject_9$4;
|
|
21304
21440
|
|
|
21305
|
-
var Container$
|
|
21441
|
+
var Container$8 = newStyled.div(templateObject_1$6 || (templateObject_1$6 = __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"])));
|
|
21306
21442
|
var ProductGalleryMobileV3 = function (_a) {
|
|
21307
21443
|
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;
|
|
21308
|
-
return (jsx$1(Container$
|
|
21444
|
+
return (jsx$1(Container$8, __assign$1({ "data-testid": "product-gallery-mobile-v3" }, { children: jsx$1(ImageProductSlideV3, { images: images, customClick: customClick, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant, selectedValue: selectedValue }, void 0) }), void 0));
|
|
21309
21445
|
};
|
|
21310
|
-
var templateObject_1$
|
|
21446
|
+
var templateObject_1$6;
|
|
21311
21447
|
|
|
21312
21448
|
function closeZoom() {
|
|
21313
21449
|
var closeButton = document.querySelectorAll('.iiz__btn.iiz__close.iiz__close--visible')[0];
|
|
@@ -21328,10 +21464,10 @@ var afterChangeSlide = function (_a) {
|
|
|
21328
21464
|
closeZoom();
|
|
21329
21465
|
};
|
|
21330
21466
|
|
|
21331
|
-
var TopTagContainer$1 = newStyled.div(templateObject_1$
|
|
21332
|
-
var TopRightTagContainer = newStyled.div(templateObject_2$
|
|
21333
|
-
var BottomTagContainer$1 = newStyled.div(templateObject_3$
|
|
21334
|
-
var Container$
|
|
21467
|
+
var TopTagContainer$1 = newStyled.div(templateObject_1$5 || (templateObject_1$5 = __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'); });
|
|
21468
|
+
var TopRightTagContainer = newStyled.div(templateObject_2$5 || (templateObject_2$5 = __makeTemplateObject(["\n position: absolute;\n border-top-right-radius: 8px;\n border-end-start-radius: 8px;\n overflow: hidden;\n right: 0;\n top: 0;\n"], ["\n position: absolute;\n border-top-right-radius: 8px;\n border-end-start-radius: 8px;\n overflow: hidden;\n right: 0;\n top: 0;\n"])));
|
|
21469
|
+
var BottomTagContainer$1 = newStyled.div(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
21470
|
+
var Container$7 = newStyled.div(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject(["\n ", "\n\n padding-left: 15px;\n position: relative;\n max-height: 524px;\n overflow: hidden;\n\n video {\n width: none;\n }\n\n & .slick-dots li.slick-active button:before {\n background-color: ", ";\n }\n\n .slick-slider {\n height: 100%;\n min-height: calc(414px + 50px);\n }\n\n .slick-active > div {\n position: absolute;\n }\n .slick-slide:nth-last-of-type(2):not(:last-of-type) > div {\n position: absolute;\n }\n\n .slider-mobile-gallery {\n zoom: 0.8;\n border-radius: 8px;\n overflow: hidden;\n }\n\n .slick-slide:not(.slick-current) .banner-concealable {\n display: none;\n }\n\n .slick-slide {\n position: relative;\n }\n\n .slick-arrow {\n cursor: pointer;\n display: none !important;\n position: absolute;\n top: 45%;\n z-index: 1;\n }\n\n .slick-arrow::before {\n content: '' !important;\n }\n\n @media only screen and (max-width: 480px) {\n .slick-arrow {\n display: block !important;\n }\n }\n\n .slick-arrow.slick-disabled {\n display: none !important;\n }\n\n .slick-prev {\n left: 0;\n }\n\n .slick-next {\n right: 0;\n }\n\n .slick-dots {\n list-style: none;\n margin: 0;\n padding: 0;\n position: absolute;\n text-align: center;\n width: 100%;\n margin-left: -7px;\n }\n\n .slick-dots li {\n position: relative;\n display: inline-block;\n height: 20px;\n width: 20px;\n margin: 0;\n padding: 0;\n cursor: pointer;\n }\n\n .slick-dots li:before {\n background-color: var(--truekind-default-secondary);\n }\n .slick-dots li.slick-active {\n display: inline-block !important;\n }\n\n .slick-dots li:nth-child(n + 10) {\n display: none;\n }\n\n .slick-dots li button {\n background: transparent;\n border: 0;\n color: transparent;\n cursor: pointer;\n display: block;\n height: 20px;\n line-height: 0;\n outline: none;\n padding: 5px;\n width: 20px;\n }\n\n .slick-dots li button:focus:before,\n .slick-dots li button:hover:before {\n opacity: 0.5;\n }\n\n .slick-dots li button:before {\n background-color: var(--truekind-default-secondary, #292929);\n border-radius: 20px;\n content: ' ';\n display: block;\n height: 12px;\n left: 0;\n margin: 5px;\n position: absolute;\n top: 0;\n width: 12px;\n opacity: 1;\n }\n\n .slick-dots li:last-child button:before {\n ", "\n }\n\n .slick-dots li.slick-active button:before {\n background-color: var(--colors-pallete-primary-color, #cc4125) !important;\n opacity: 1;\n width: 12px;\n height: 12px;\n top: 0;\n }\n\n .slick-dots li:not(.slick-active) button:before {\n border: none;\n }\n\n @media only screen and (max-width: 768px) {\n div[data-testid='product-gallery-mobile-v1'] .slick-list > .slick-track {\n height: auto;\n }\n\n div[data-testid='product-gallery-mobile-v1'] .zoomWrapper.iiz > div {\n height: auto;\n }\n }\n"], ["\n ", "\n\n padding-left: 15px;\n position: relative;\n max-height: 524px;\n overflow: hidden;\n\n video {\n width: none;\n }\n\n & .slick-dots li.slick-active button:before {\n background-color: ", ";\n }\n\n .slick-slider {\n height: 100%;\n min-height: calc(414px + 50px);\n }\n\n .slick-active > div {\n position: absolute;\n }\n .slick-slide:nth-last-of-type(2):not(:last-of-type) > div {\n position: absolute;\n }\n\n .slider-mobile-gallery {\n zoom: 0.8;\n border-radius: 8px;\n overflow: hidden;\n }\n\n .slick-slide:not(.slick-current) .banner-concealable {\n display: none;\n }\n\n .slick-slide {\n position: relative;\n }\n\n .slick-arrow {\n cursor: pointer;\n display: none !important;\n position: absolute;\n top: 45%;\n z-index: 1;\n }\n\n .slick-arrow::before {\n content: '' !important;\n }\n\n @media only screen and (max-width: 480px) {\n .slick-arrow {\n display: block !important;\n }\n }\n\n .slick-arrow.slick-disabled {\n display: none !important;\n }\n\n .slick-prev {\n left: 0;\n }\n\n .slick-next {\n right: 0;\n }\n\n .slick-dots {\n list-style: none;\n margin: 0;\n padding: 0;\n position: absolute;\n text-align: center;\n width: 100%;\n margin-left: -7px;\n }\n\n .slick-dots li {\n position: relative;\n display: inline-block;\n height: 20px;\n width: 20px;\n margin: 0;\n padding: 0;\n cursor: pointer;\n }\n\n .slick-dots li:before {\n background-color: var(--truekind-default-secondary);\n }\n .slick-dots li.slick-active {\n display: inline-block !important;\n }\n\n .slick-dots li:nth-child(n + 10) {\n display: none;\n }\n\n .slick-dots li button {\n background: transparent;\n border: 0;\n color: transparent;\n cursor: pointer;\n display: block;\n height: 20px;\n line-height: 0;\n outline: none;\n padding: 5px;\n width: 20px;\n }\n\n .slick-dots li button:focus:before,\n .slick-dots li button:hover:before {\n opacity: 0.5;\n }\n\n .slick-dots li button:before {\n background-color: var(--truekind-default-secondary, #292929);\n border-radius: 20px;\n content: ' ';\n display: block;\n height: 12px;\n left: 0;\n margin: 5px;\n position: absolute;\n top: 0;\n width: 12px;\n opacity: 1;\n }\n\n .slick-dots li:last-child button:before {\n ", "\n }\n\n .slick-dots li.slick-active button:before {\n background-color: var(--colors-pallete-primary-color, #cc4125) !important;\n opacity: 1;\n width: 12px;\n height: 12px;\n top: 0;\n }\n\n .slick-dots li:not(.slick-active) button:before {\n border: none;\n }\n\n @media only screen and (max-width: 768px) {\n div[data-testid='product-gallery-mobile-v1'] .slick-list > .slick-track {\n height: auto;\n }\n\n div[data-testid='product-gallery-mobile-v1'] .zoomWrapper.iiz > div {\n height: auto;\n }\n }\n"])), function (_a) {
|
|
21335
21471
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
21336
21472
|
return borderRadiusVariant &&
|
|
21337
21473
|
"\n border-radius: 40px;\n ";
|
|
@@ -21343,7 +21479,7 @@ var Container$8 = newStyled.div(templateObject_4$5 || (templateObject_4$5 = __ma
|
|
|
21343
21479
|
return lastImage &&
|
|
21344
21480
|
"\n background-color: var(--colors-pallete-primary-color, #cc4125) !important;\n opacity: 1;\n width: 12px;\n height: 12px;\n top: 0;\n ";
|
|
21345
21481
|
});
|
|
21346
|
-
var templateObject_1$
|
|
21482
|
+
var templateObject_1$5, templateObject_2$5, templateObject_3$5, templateObject_4$4;
|
|
21347
21483
|
|
|
21348
21484
|
var settings$1 = {
|
|
21349
21485
|
dots: true,
|
|
@@ -21386,7 +21522,7 @@ var ContentGallery = function (_a) {
|
|
|
21386
21522
|
return ((width + width * 0.0001 * (width > 380 ? 10 : -10) - paddingWidth - totalGap) / photoSize);
|
|
21387
21523
|
}
|
|
21388
21524
|
var slidesToShow = (_b = calcSlidesToShow()) !== null && _b !== void 0 ? _b : 1;
|
|
21389
|
-
return (jsxs$1(Fragment$2, { children: [customClick && (jsx$1("div", __assign$1({ style: { display: 'flex', marginBottom: '20px', gap: '10px' }, "data-testid": "mobile-gallery-content-gallery-custom-click" }, { children: contents.map(function (content, i) { return (jsx$1(ButtonPrimary, { onClick: function () { return onButtonClick(i); }, text: String(i + 1), inline: true }, content.key)); }) }), void 0)), jsx$1(Container$
|
|
21525
|
+
return (jsxs$1(Fragment$2, { children: [customClick && (jsx$1("div", __assign$1({ style: { display: 'flex', marginBottom: '20px', gap: '10px' }, "data-testid": "mobile-gallery-content-gallery-custom-click" }, { children: contents.map(function (content, i) { return (jsx$1(ButtonPrimary, { onClick: function () { return onButtonClick(i); }, text: String(i + 1), inline: true }, content.key)); }) }), void 0)), jsx$1(Container$7, __assign$1({ "data-testid": testId, borderRadiusVariant: borderRadiusVariant, lastImage: selectedImageIndex === contents.length - 1, ref: sliderWrapper }, { children: jsx$1(Slider$1, __assign$1({ afterChange: function (e) {
|
|
21390
21526
|
return afterChangeSlide({
|
|
21391
21527
|
slide: e,
|
|
21392
21528
|
contents: contents,
|
|
@@ -21402,9 +21538,9 @@ var ContentGallery = function (_a) {
|
|
|
21402
21538
|
}) }), void 0) }), void 0)] }, void 0));
|
|
21403
21539
|
};
|
|
21404
21540
|
|
|
21405
|
-
var NavButtonContainer$1 = newStyled.div(templateObject_1$
|
|
21406
|
-
var Button$1 = newStyled.button(templateObject_2$
|
|
21407
|
-
var Container$
|
|
21541
|
+
var NavButtonContainer$1 = newStyled.div(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n height: 40px;\n width: 40px;\n"], ["\n height: 40px;\n width: 40px;\n"])));
|
|
21542
|
+
var Button$1 = newStyled.button(templateObject_2$4 || (templateObject_2$4 = __makeTemplateObject(["\n background: transparent;\n border: none;\n padding: 0.188rem 0.625rem;\n z-index: 5;\n height: 40px !important;\n cursor: pointer;\n"], ["\n background: transparent;\n border: none;\n padding: 0.188rem 0.625rem;\n z-index: 5;\n height: 40px !important;\n cursor: pointer;\n"])));
|
|
21543
|
+
var Container$6 = newStyled.div(templateObject_3$4 || (templateObject_3$4 = __makeTemplateObject(["\n ", "\n position: relative;\n max-height: 524px;\n max-width: 440px;\n overflow: hidden;\n\n @media screen and (min-width: 480px) {\n margin: 0 auto;\n }\n\n & .slick-dots li.slick-active button:before {\n background-color: ", ";\n }\n\n .iiz {\n max-width: 100%;\n margin: 0;\n position: relative;\n overflow: hidden;\n display: inline-block;\n cursor: -webkit-zoom-in;\n cursor: zoom-in;\n }\n\n .zoomWrapper.iiz {\n max-height: 524px;\n vertical-align: top;\n }\n\n .iiz--drag .iiz__zoom-img--visible {\n cursor: -webkit-grab;\n cursor: grab;\n }\n\n .iiz__img {\n max-width: 100%;\n height: auto;\n display: block;\n pointer-events: none;\n visibility: visible;\n opacity: 1;\n }\n\n .iiz__img--hidden {\n visibility: hidden;\n opacity: 0;\n }\n\n .iiz__img--abs {\n width: 100%;\n height: 100%;\n position: absolute;\n top: 0;\n left: 0;\n display: block;\n }\n\n .iiz__zoom-img {\n width: auto !important;\n max-width: none !important;\n position: absolute;\n visibility: hidden;\n opacity: 0;\n pointer-events: none;\n display: block;\n }\n\n .iiz__zoom-img--visible {\n visibility: visible;\n opacity: 1;\n pointer-events: auto;\n cursor: -webkit-zoom-out;\n cursor: zoom-out;\n -ms-touch-action: none;\n touch-action: none;\n zoom: 1.2;\n }\n\n .iiz__zoom-portal {\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: 99999;\n }\n\n .iiz__btn {\n background: rgba(255, 255, 255, 0.8);\n max-width: 98px;\n min-width: fit-content;\n height: 32px;\n border: none;\n outline: none;\n padding: 0 8px;\n position: absolute;\n z-index: 5;\n text-decoration: none;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -moz-appearance: none;\n -webkit-appearance: none;\n appearance: none;\n }\n\n .iiz__btn:before {\n content: ' ';\n background-position: center;\n background-repeat: no-repeat;\n display: block;\n }\n\n .iiz__hint {\n bottom: 10%;\n right: 0;\n pointer-events: none;\n border-radius: 150px 0 0 150px;\n }\n\n .iiz__hint:before {\n content: '+';\n background-image: none;\n width: 17px;\n height: 17px;\n font-size: 19px;\n border-radius: 500px;\n border: 2px solid #292929;\n display: inline-block;\n position: relative;\n text-align: center;\n line-height: 17px;\n font-weight: 600;\n }\n\n .iiz__hint:after {\n content: 'Zoom in';\n font-size: 14px;\n font-weight: 600;\n display: inline-block;\n margin-left: 5px;\n }\n\n .iiz__close {\n border-radius: 150px;\n top: auto;\n right: 0;\n left: 0;\n margin: auto;\n bottom: 20px;\n visibility: hidden;\n opacity: 0;\n color: #292929;\n }\n\n .iiz__close--visible {\n visibility: visible;\n opacity: 1;\n cursor: pointer;\n }\n\n .iiz__close::before {\n content: ' ';\n width: 16px;\n height: 16px;\n background-image: -webkit-gradient(linear, left top, left bottom, from(#222), to(#222)),\n -webkit-gradient(linear, left top, left bottom, from(#222), to(#222));\n background-image: linear-gradient(#222, #222), linear-gradient(#222, #222);\n background-size: 65% 2px, 2px 65%;\n transform: rotate(45deg);\n border-radius: 500px;\n border: 2px solid #292929;\n }\n\n .iiz__close::after {\n content: 'Close';\n font-size: 14px;\n font-weight: 600;\n display: inline-block;\n margin-left: 5px;\n }\n"], ["\n ", "\n position: relative;\n max-height: 524px;\n max-width: 440px;\n overflow: hidden;\n\n @media screen and (min-width: 480px) {\n margin: 0 auto;\n }\n\n & .slick-dots li.slick-active button:before {\n background-color: ", ";\n }\n\n .iiz {\n max-width: 100%;\n margin: 0;\n position: relative;\n overflow: hidden;\n display: inline-block;\n cursor: -webkit-zoom-in;\n cursor: zoom-in;\n }\n\n .zoomWrapper.iiz {\n max-height: 524px;\n vertical-align: top;\n }\n\n .iiz--drag .iiz__zoom-img--visible {\n cursor: -webkit-grab;\n cursor: grab;\n }\n\n .iiz__img {\n max-width: 100%;\n height: auto;\n display: block;\n pointer-events: none;\n visibility: visible;\n opacity: 1;\n }\n\n .iiz__img--hidden {\n visibility: hidden;\n opacity: 0;\n }\n\n .iiz__img--abs {\n width: 100%;\n height: 100%;\n position: absolute;\n top: 0;\n left: 0;\n display: block;\n }\n\n .iiz__zoom-img {\n width: auto !important;\n max-width: none !important;\n position: absolute;\n visibility: hidden;\n opacity: 0;\n pointer-events: none;\n display: block;\n }\n\n .iiz__zoom-img--visible {\n visibility: visible;\n opacity: 1;\n pointer-events: auto;\n cursor: -webkit-zoom-out;\n cursor: zoom-out;\n -ms-touch-action: none;\n touch-action: none;\n zoom: 1.2;\n }\n\n .iiz__zoom-portal {\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: 99999;\n }\n\n .iiz__btn {\n background: rgba(255, 255, 255, 0.8);\n max-width: 98px;\n min-width: fit-content;\n height: 32px;\n border: none;\n outline: none;\n padding: 0 8px;\n position: absolute;\n z-index: 5;\n text-decoration: none;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -moz-appearance: none;\n -webkit-appearance: none;\n appearance: none;\n }\n\n .iiz__btn:before {\n content: ' ';\n background-position: center;\n background-repeat: no-repeat;\n display: block;\n }\n\n .iiz__hint {\n bottom: 10%;\n right: 0;\n pointer-events: none;\n border-radius: 150px 0 0 150px;\n }\n\n .iiz__hint:before {\n content: '+';\n background-image: none;\n width: 17px;\n height: 17px;\n font-size: 19px;\n border-radius: 500px;\n border: 2px solid #292929;\n display: inline-block;\n position: relative;\n text-align: center;\n line-height: 17px;\n font-weight: 600;\n }\n\n .iiz__hint:after {\n content: 'Zoom in';\n font-size: 14px;\n font-weight: 600;\n display: inline-block;\n margin-left: 5px;\n }\n\n .iiz__close {\n border-radius: 150px;\n top: auto;\n right: 0;\n left: 0;\n margin: auto;\n bottom: 20px;\n visibility: hidden;\n opacity: 0;\n color: #292929;\n }\n\n .iiz__close--visible {\n visibility: visible;\n opacity: 1;\n cursor: pointer;\n }\n\n .iiz__close::before {\n content: ' ';\n width: 16px;\n height: 16px;\n background-image: -webkit-gradient(linear, left top, left bottom, from(#222), to(#222)),\n -webkit-gradient(linear, left top, left bottom, from(#222), to(#222));\n background-image: linear-gradient(#222, #222), linear-gradient(#222, #222);\n background-size: 65% 2px, 2px 65%;\n transform: rotate(45deg);\n border-radius: 500px;\n border: 2px solid #292929;\n }\n\n .iiz__close::after {\n content: 'Close';\n font-size: 14px;\n font-weight: 600;\n display: inline-block;\n margin-left: 5px;\n }\n"])), function (_a) {
|
|
21408
21544
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
21409
21545
|
return borderRadiusVariant &&
|
|
21410
21546
|
"\n border-radius: 40px;\n ";
|
|
@@ -21412,7 +21548,7 @@ var Container$7 = newStyled.div(templateObject_3$5 || (templateObject_3$5 = __ma
|
|
|
21412
21548
|
var theme = _a.theme;
|
|
21413
21549
|
return theme.component.slideNavigation.slideDots.selectedDotColor;
|
|
21414
21550
|
});
|
|
21415
|
-
var templateObject_1$
|
|
21551
|
+
var templateObject_1$4, templateObject_2$4, templateObject_3$4;
|
|
21416
21552
|
|
|
21417
21553
|
var settings = {
|
|
21418
21554
|
dots: false,
|
|
@@ -21453,7 +21589,7 @@ var MainContent = function (_a) {
|
|
|
21453
21589
|
useEffect(function () {
|
|
21454
21590
|
showArrows();
|
|
21455
21591
|
}, [selectedImageIndex]);
|
|
21456
|
-
return (jsx$1(Container$
|
|
21592
|
+
return (jsx$1(Container$6, __assign$1({ "data-testid": testId, borderRadiusVariant: borderRadiusVariant, ref: sliderWrapper }, { children: jsx$1(Slider$1, __assign$1({ afterChange: function (e) {
|
|
21457
21593
|
return afterChangeSlide({
|
|
21458
21594
|
slide: e,
|
|
21459
21595
|
contents: contents,
|
|
@@ -21474,7 +21610,7 @@ var MainContent = function (_a) {
|
|
|
21474
21610
|
}) }), void 0) }), void 0));
|
|
21475
21611
|
};
|
|
21476
21612
|
|
|
21477
|
-
var Container$
|
|
21613
|
+
var Container$5 = newStyled.div({
|
|
21478
21614
|
padding: '1rem',
|
|
21479
21615
|
paddingTop: '2rem',
|
|
21480
21616
|
gap: '0.5rem',
|
|
@@ -21530,12 +21666,12 @@ var Slider = function (_a) {
|
|
|
21530
21666
|
}
|
|
21531
21667
|
scrollElementSlider();
|
|
21532
21668
|
}, [selectedImageIndex, test, scrollElementSlider]);
|
|
21533
|
-
return (jsx$1(Container$
|
|
21669
|
+
return (jsx$1(Container$5, __assign$1({ ref: containerRef }, { children: images.map(function (img, i) { return (jsx$1(Thumbnail, __assign$1({ onClick: function () { return handleSelectImage(img.key); }, ref: function (el) { return (itemsRef.current[i] = el); } }, { children: jsx$1(Img, { src: img.url, alt: img.alt, style: {
|
|
21534
21670
|
border: isTheActiveImage(i) ? getBorderColor() : borderImageInactive,
|
|
21535
21671
|
} }, void 0) }), img.key)); }) }), void 0));
|
|
21536
21672
|
};
|
|
21537
21673
|
|
|
21538
|
-
var Container$
|
|
21674
|
+
var Container$4 = newStyled.div({
|
|
21539
21675
|
background: 'var(--truekind-default-secondary, #292929)',
|
|
21540
21676
|
minHeight: '100svh',
|
|
21541
21677
|
width: '100vw',
|
|
@@ -21608,7 +21744,7 @@ var GalleryDetailed = function (_a) {
|
|
|
21608
21744
|
function closeGallery() {
|
|
21609
21745
|
setGalleryOpened(false);
|
|
21610
21746
|
}
|
|
21611
|
-
return (jsxs$1(Container$
|
|
21747
|
+
return (jsxs$1(Container$4, { children: [jsx$1(Header$1, { children: jsx$1(IconContainer, __assign$1({ onClick: closeGallery }, { children: jsx$1(Icon.Actions.Close, { height: 1.1, width: 1.1 }, void 0) }), void 0) }, void 0), jsxs$1(SubContainer, { children: [jsx$1(MainContent, { contents: images, selectedImageIndex: selectedImageIndex, setSelectedImageIndex: setSelectedImageIndex, topTag: topTag, topRightTag: topRightTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant, itemsOnViewport: itemsOnViewport }, void 0), jsx$1(Slider, { images: images, test: !!productImageDataTestId, selectedImageIndex: selectedImageIndex, setSelectedImageIndex: setSelectedImageIndex }, void 0)] }, void 0)] }, void 0));
|
|
21612
21748
|
};
|
|
21613
21749
|
|
|
21614
21750
|
var ProductGalleryMobileV4 = function (_a) {
|
|
@@ -21680,8 +21816,8 @@ var THUMBNAIL_SETTINGS = {
|
|
|
21680
21816
|
],
|
|
21681
21817
|
};
|
|
21682
21818
|
|
|
21683
|
-
var Container$
|
|
21684
|
-
var SliderContainer = newStyled.div(templateObject_2$
|
|
21819
|
+
var Container$3 = newStyled.div(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n position: relative;\n"], ["\n display: flex;\n flex-direction: column;\n position: relative;\n"])));
|
|
21820
|
+
var SliderContainer = newStyled.div(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject(["\n ", "\n position: relative;\n overflow: hidden;\n & .slick-dots li.slick-active button:before {\n background-color: ", ";\n }\n\n .slick-slide {\n position: relative;\n }\n\n .slick-arrow {\n cursor: pointer;\n position: absolute;\n top: 45%;\n z-index: 1;\n display: block !important;\n }\n\n .slick-arrow::before {\n content: '' !important;\n }\n\n @media only screen and (max-width: 480px) {\n .slick-arrow {\n display: block !important;\n }\n }\n\n .slick-arrow.slick-disabled {\n display: none !important;\n }\n\n .slick-prev {\n left: 5px;\n }\n\n .slick-next {\n right: 5px;\n }\n\n .slick-dots {\n bottom: 15px;\n list-style: none;\n margin: 0;\n padding: 0;\n position: absolute;\n text-align: center;\n width: 100%;\n }\n\n .slick-dots li {\n position: relative;\n display: inline-block;\n height: 20px;\n width: 20px;\n margin: 0;\n padding: 0;\n cursor: pointer;\n }\n\n .slick-dots li.slick-active {\n display: inline-block !important;\n }\n\n .slick-dots li:nth-child(n + 10) {\n display: none;\n }\n\n .slick-dots li button {\n background: transparent;\n border: 0;\n color: transparent;\n cursor: pointer;\n display: block;\n height: 20px;\n line-height: 0;\n outline: none;\n padding: 5px;\n width: 20px;\n }\n\n .slick-dots li button:focus:before,\n .slick-dots li button:hover:before {\n opacity: 0.5;\n }\n\n .slick-dots li button:before {\n background: rgba(27, 25, 25, 0.5);\n border-radius: 20px;\n content: ' ';\n display: block;\n height: 8px;\n left: 0;\n margin: 5px;\n position: absolute;\n top: 0;\n width: 8px;\n opacity: 1;\n }\n\n .slick-dots li.slick-active button:before {\n background-color: #fff;\n opacity: 1;\n width: 12px;\n height: 12px;\n top: -1px;\n }\n\n .slick-dots li:not(.slick-active) button:before {\n border: 1px solid hsla(0, 0%, 100%, 0.6);\n }\n"], ["\n ", "\n position: relative;\n overflow: hidden;\n & .slick-dots li.slick-active button:before {\n background-color: ", ";\n }\n\n .slick-slide {\n position: relative;\n }\n\n .slick-arrow {\n cursor: pointer;\n position: absolute;\n top: 45%;\n z-index: 1;\n display: block !important;\n }\n\n .slick-arrow::before {\n content: '' !important;\n }\n\n @media only screen and (max-width: 480px) {\n .slick-arrow {\n display: block !important;\n }\n }\n\n .slick-arrow.slick-disabled {\n display: none !important;\n }\n\n .slick-prev {\n left: 5px;\n }\n\n .slick-next {\n right: 5px;\n }\n\n .slick-dots {\n bottom: 15px;\n list-style: none;\n margin: 0;\n padding: 0;\n position: absolute;\n text-align: center;\n width: 100%;\n }\n\n .slick-dots li {\n position: relative;\n display: inline-block;\n height: 20px;\n width: 20px;\n margin: 0;\n padding: 0;\n cursor: pointer;\n }\n\n .slick-dots li.slick-active {\n display: inline-block !important;\n }\n\n .slick-dots li:nth-child(n + 10) {\n display: none;\n }\n\n .slick-dots li button {\n background: transparent;\n border: 0;\n color: transparent;\n cursor: pointer;\n display: block;\n height: 20px;\n line-height: 0;\n outline: none;\n padding: 5px;\n width: 20px;\n }\n\n .slick-dots li button:focus:before,\n .slick-dots li button:hover:before {\n opacity: 0.5;\n }\n\n .slick-dots li button:before {\n background: rgba(27, 25, 25, 0.5);\n border-radius: 20px;\n content: ' ';\n display: block;\n height: 8px;\n left: 0;\n margin: 5px;\n position: absolute;\n top: 0;\n width: 8px;\n opacity: 1;\n }\n\n .slick-dots li.slick-active button:before {\n background-color: #fff;\n opacity: 1;\n width: 12px;\n height: 12px;\n top: -1px;\n }\n\n .slick-dots li:not(.slick-active) button:before {\n border: 1px solid hsla(0, 0%, 100%, 0.6);\n }\n"])), function (_a) {
|
|
21685
21821
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
21686
21822
|
return borderRadiusVariant &&
|
|
21687
21823
|
"\n border-radius: 40px;\n ";
|
|
@@ -21689,18 +21825,18 @@ var SliderContainer = newStyled.div(templateObject_2$4 || (templateObject_2$4 =
|
|
|
21689
21825
|
var theme = _a.theme;
|
|
21690
21826
|
return theme.component.slideNavigation.slideDots.selectedDotColor;
|
|
21691
21827
|
});
|
|
21692
|
-
var TopTagContainer = newStyled.div(templateObject_3$
|
|
21693
|
-
var BottomTagContainer = newStyled.div(templateObject_4$
|
|
21694
|
-
var NavButtonContainer = newStyled.div(templateObject_5$
|
|
21828
|
+
var TopTagContainer = newStyled.div(templateObject_3$3 || (templateObject_3$3 = __makeTemplateObject(["\n position: absolute;\n left: 0px;\n top: 21px;\n"], ["\n position: absolute;\n left: 0px;\n top: 21px;\n"])));
|
|
21829
|
+
var BottomTagContainer = newStyled.div(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
21830
|
+
var NavButtonContainer = newStyled.div(templateObject_5$3 || (templateObject_5$3 = __makeTemplateObject(["\n height: 36px;\n width: 36px;\n background-color: ", " !important;\n border-radius: 500px;\n"], ["\n height: 36px;\n width: 36px;\n background-color: ", " !important;\n border-radius: 500px;\n"])), function (_a) {
|
|
21695
21831
|
var theme = _a.theme;
|
|
21696
21832
|
return theme.colors.shades.white.color;
|
|
21697
21833
|
});
|
|
21698
|
-
var Button = newStyled.button(templateObject_6$
|
|
21699
|
-
var SliderThumbnail = newStyled(Slider$1)(templateObject_7$
|
|
21834
|
+
var Button = newStyled.button(templateObject_6$3 || (templateObject_6$3 = __makeTemplateObject(["\n background: transparent;\n border: none;\n padding: 3px 8px;\n z-index: 5;\n height: 36px !important;\n cursor: pointer;\n"], ["\n background: transparent;\n border: none;\n padding: 3px 8px;\n z-index: 5;\n height: 36px !important;\n cursor: pointer;\n"])));
|
|
21835
|
+
var SliderThumbnail = newStyled(Slider$1)(templateObject_7$3 || (templateObject_7$3 = __makeTemplateObject(["\n margin-top: 16px;\n padding-left: 16px;\n & .slick-slide {\n img {\n overflow: hidden;\n }\n }\n & .slick-current {\n img {\n border: 2px solid ", ";\n }\n }\n\n .slick-track {\n display: flex;\n }\n"], ["\n margin-top: 16px;\n padding-left: 16px;\n & .slick-slide {\n img {\n overflow: hidden;\n }\n }\n & .slick-current {\n img {\n border: 2px solid ", ";\n }\n }\n\n .slick-track {\n display: flex;\n }\n"])), function (_a) {
|
|
21700
21836
|
var theme = _a.theme;
|
|
21701
21837
|
return theme.colors.pallete.primary.color;
|
|
21702
21838
|
});
|
|
21703
|
-
var StyledImage = newStyled(Image$3)(templateObject_8$
|
|
21839
|
+
var StyledImage = newStyled(Image$3)(templateObject_8$3 || (templateObject_8$3 = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n aspect-ratio: ", ";\n"], ["\n width: 100%;\n height: 100%;\n aspect-ratio: ", ";\n"])), function (_a) {
|
|
21704
21840
|
var theme = _a.theme, isRatioSquare = _a.isRatioSquare;
|
|
21705
21841
|
return isRatioSquare ? '1/1' : theme.component.gallery.aspectRatio;
|
|
21706
21842
|
});
|
|
@@ -21718,7 +21854,7 @@ var ThumbnailImage = newStyled(Image$3)(templateObject_10$3 || (templateObject_1
|
|
|
21718
21854
|
var borderRadius = _a.borderRadius;
|
|
21719
21855
|
return borderRadius || '0px';
|
|
21720
21856
|
});
|
|
21721
|
-
var templateObject_1$
|
|
21857
|
+
var templateObject_1$3, templateObject_2$3, templateObject_3$3, templateObject_4$3, templateObject_5$3, templateObject_6$3, templateObject_7$3, templateObject_8$3, templateObject_9$3, templateObject_10$3;
|
|
21722
21858
|
|
|
21723
21859
|
var ProductGalleryMobileV5 = function (_a) {
|
|
21724
21860
|
var images = _a.images, topTag = _a.topTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, imagesSliderConfig = _a.imagesSliderConfig, thumbnailSettings = _a.thumbnailSettings, _b = _a.isRatioSquare, isRatioSquare = _b === void 0 ? false : _b;
|
|
@@ -21736,7 +21872,7 @@ var ProductGalleryMobileV5 = function (_a) {
|
|
|
21736
21872
|
if (thumbnailRef.current)
|
|
21737
21873
|
setNav2(thumbnailRef.current);
|
|
21738
21874
|
}, []);
|
|
21739
|
-
return (jsx$1(Container$
|
|
21875
|
+
return (jsx$1(Container$3, __assign$1({ "data-testid": "product-gallery-mobile" }, { children: jsxs$1(SliderContainer, __assign$1({ "data-testid": productImageDataTestId, ref: sliderWrapper }, { children: [jsx$1(Slider$1, __assign$1({}, SETTINGS, { lazyLoad: "progressive", nextArrow: jsx$1(NavButtonContainer, { children: jsx$1(Button, { children: jsx$1(Icon.Arrows.ChevronRight, { height: "21px", width: "21px", fill: colors.shades[700].color }, void 0) }, void 0) }, void 0), prevArrow: jsx$1(NavButtonContainer, { children: jsx$1(Button, { children: jsx$1(Icon.Arrows.ChevronLeft, { height: "21px", width: "21px", fill: colors.shades[700].color }, void 0) }, void 0) }, void 0), asNavFor: nav2, ref: function (slider) { return (slick.current = slider); } }, { children: images.map(function (_a) {
|
|
21740
21876
|
var url = _a.url, key = _a.key, alt = _a.alt;
|
|
21741
21877
|
return (jsxs$1("div", { children: [jsx$1(StyledImage, { alt: alt, src: url, objectFit: "cover", width: theme.component.gallery.mainImgWidth, height: theme.component.gallery.mainImgHeight, loading: "eager", isRatioSquare: isRatioSquare }, void 0), jsx$1(TopTagContainer, __assign$1({ "data-testid": "topTag" }, { children: topTag }), void 0), jsx$1(BottomTagContainer, __assign$1({ "data-testid": "bottomTag" }, { children: bottomTag }), void 0)] }, key));
|
|
21742
21878
|
}) }), void 0), jsx$1(SliderThumbnail, __assign$1({ asNavFor: nav1, ref: function (slider) { return (thumbnailRef.current = slider); } }, (thumbnailSettings || THUMBNAIL_SETTINGS), { lazyLoad: "progressive" }, { children: images.map(function (_a) {
|
|
@@ -21745,18 +21881,18 @@ var ProductGalleryMobileV5 = function (_a) {
|
|
|
21745
21881
|
}) }), void 0)] }), void 0) }), void 0));
|
|
21746
21882
|
};
|
|
21747
21883
|
|
|
21748
|
-
var ScrollContainer = newStyled.div(templateObject_1$
|
|
21749
|
-
var TableElement$1 = newStyled.table(templateObject_2$
|
|
21750
|
-
var TableCell$1 = newStyled.td(templateObject_3$
|
|
21751
|
-
var TableHead$1 = newStyled.th(templateObject_4$
|
|
21752
|
-
var Label$1 = newStyled('div')(templateObject_5$
|
|
21753
|
-
var TopLabel = newStyled(Label$1)(templateObject_6$
|
|
21754
|
-
var LeftLabel = newStyled(Label$1)(templateObject_7$
|
|
21755
|
-
var Container$
|
|
21884
|
+
var ScrollContainer = newStyled.div(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n overflow-x: auto;\n width: 100%;\n @media (max-width: 768px) {\n width: 80vw;\n overflow-x: auto;\n }\n"], ["\n overflow-x: auto;\n width: 100%;\n @media (max-width: 768px) {\n width: 80vw;\n overflow-x: auto;\n }\n"])));
|
|
21885
|
+
var TableElement$1 = newStyled.table(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n position: relative;\n box-sizing: border-box;\n border-radius: 0.5rem;\n border: 0.063rem solid ", ";\n border-spacing: 0;\n font-size: 0.875rem;\n line-height: 3.125rem;\n width: 100%;\n color: ", ";\n"], ["\n position: relative;\n box-sizing: border-box;\n border-radius: 0.5rem;\n border: 0.063rem solid ", ";\n border-spacing: 0;\n font-size: 0.875rem;\n line-height: 3.125rem;\n width: 100%;\n color: ", ";\n"])), function (props) { return props.borderColor; }, function (props) { return props.color; });
|
|
21886
|
+
var TableCell$1 = newStyled.td(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject(["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n line-height: normal;\n padding: 1rem;\n text-align: start;\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n font-weight: 700;\n text-align: center;\n }\n"], ["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n line-height: normal;\n padding: 1rem;\n text-align: start;\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n font-weight: 700;\n text-align: center;\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.borderColor; });
|
|
21887
|
+
var TableHead$1 = newStyled.th(templateObject_4$2 || (templateObject_4$2 = __makeTemplateObject(["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n font-weight: 700;\n line-height: normal;\n padding: 1rem;\n text-align: start;\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n text-align: center;\n }\n"], ["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n font-weight: 700;\n line-height: normal;\n padding: 1rem;\n text-align: start;\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n text-align: center;\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.borderColor; });
|
|
21888
|
+
var Label$1 = newStyled('div')(templateObject_5$2 || (templateObject_5$2 = __makeTemplateObject(["\n gap: 15px;\n width: 100%;\n display: flex;\n font-size: 14px;\n font-weight: 600;\n align-items: center;\n justify-content: center;\n"], ["\n gap: 15px;\n width: 100%;\n display: flex;\n font-size: 14px;\n font-weight: 600;\n align-items: center;\n justify-content: center;\n"])));
|
|
21889
|
+
var TopLabel = newStyled(Label$1)(templateObject_6$2 || (templateObject_6$2 = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
21890
|
+
var LeftLabel = newStyled(Label$1)(templateObject_7$2 || (templateObject_7$2 = __makeTemplateObject(["\n width: 20px;\n transform: rotate(270deg);\n"], ["\n width: 20px;\n transform: rotate(270deg);\n"])));
|
|
21891
|
+
var Container$2 = newStyled('div')(templateObject_8$2 || (templateObject_8$2 = __makeTemplateObject(["\n gap: 5px;\n display: flex;\n width: fit-content;\n align-items: center;\n"], ["\n gap: 5px;\n display: flex;\n width: fit-content;\n align-items: center;\n"])));
|
|
21756
21892
|
var LabelText = newStyled('span')(templateObject_9$2 || (templateObject_9$2 = __makeTemplateObject(["\n display: flex;\n min-width: 70px;\n justify-content: center;\n"], ["\n display: flex;\n min-width: 70px;\n justify-content: center;\n"])));
|
|
21757
21893
|
var Column$1 = newStyled('div')(templateObject_10$2 || (templateObject_10$2 = __makeTemplateObject(["\n display: flex;\n min-width: 675px;\n align-items: center;\n flex-direction: column;\n\n @media (max-width: 768px) {\n min-width: 100%;\n }\n"], ["\n display: flex;\n min-width: 675px;\n align-items: center;\n flex-direction: column;\n\n @media (max-width: 768px) {\n min-width: 100%;\n }\n"])));
|
|
21758
21894
|
var TableRow$1 = newStyled.tr(templateObject_11$1 || (templateObject_11$1 = __makeTemplateObject(["\n &:last-child {\n td {\n border-bottom: none;\n }\n }\n\n &.background {\n background-color: ", ";\n }\n"], ["\n &:last-child {\n td {\n border-bottom: none;\n }\n }\n\n &.background {\n background-color: ", ";\n }\n"])), function (props) { return props.backgroundColor; });
|
|
21759
|
-
var templateObject_1$
|
|
21895
|
+
var templateObject_1$2, templateObject_2$2, templateObject_3$2, templateObject_4$2, templateObject_5$2, templateObject_6$2, templateObject_7$2, templateObject_8$2, templateObject_9$2, templateObject_10$2, templateObject_11$1;
|
|
21760
21896
|
|
|
21761
21897
|
var getIsOdd$1 = function (number) { return number % 2 !== 0; };
|
|
21762
21898
|
var getCellColor$1 = function (index, cell) {
|
|
@@ -21791,19 +21927,19 @@ var SizeChartTableV2 = function (_a) {
|
|
|
21791
21927
|
var theme = useTheme();
|
|
21792
21928
|
var _d = (_c = (_b = headers === null || headers === void 0 ? void 0 : headers[0]) === null || _b === void 0 ? void 0 : _b.split('/')) !== null && _c !== void 0 ? _c : [], xLabel = _d[0], yLabel = _d[1];
|
|
21793
21929
|
var isMultilabel = xLabel && yLabel;
|
|
21794
|
-
return (jsxs$1(Container$
|
|
21930
|
+
return (jsxs$1(Container$2, { children: [isMultilabel && (jsxs$1(LeftLabel, { children: [jsx$1(Icon.Arrows.ChevronLeftVariant, {}, void 0), jsx$1(LabelText, { children: xLabel }, void 0), jsx$1(Icon.Arrows.ChevronRightVariant, {}, void 0)] }, void 0)), jsxs$1(Column$1, { children: [isMultilabel && (jsxs$1(TopLabel, { children: [jsx$1(Icon.Arrows.ChevronLeftVariant, {}, void 0), jsx$1(LabelText, { children: yLabel }, void 0), jsx$1(Icon.Arrows.ChevronRightVariant, {}, void 0)] }, void 0)), jsx$1(ScrollContainer, { children: jsxs$1(TableElement$1, __assign$1({ color: theme.colors.shades['700'].color, borderColor: theme.colors.shades['100'].color }, { children: [jsx$1("thead", __assign$1({ style: { backgroundColor: newSizeTableCss ? '#f6f0e7' : '' } }, { children: jsx$1(TableRow$1, __assign$1({ backgroundColor: theme.colors.shades['10'].color }, { children: headers === null || headers === void 0 ? void 0 : headers.map(function (header, index) { return (jsx$1(TableHead$1, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: !(index === 0 && isMultilabel) && header }), index)); }) }), void 0) }), void 0), newSizeTableCss ? (jsx$1("tbody", { children: tableContent === null || tableContent === void 0 ? void 0 : tableContent.map(function (row, index) { return (jsx$1("tr", { children: row === null || row === void 0 ? void 0 : row.map(function (cell, index) { return (jsx$1(TableCell$1, __assign$1({ style: {
|
|
21795
21931
|
backgroundColor: getCellColor$1(index, cell),
|
|
21796
21932
|
}, borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }, index)); }) }, void 0)) : (jsx$1("tbody", { children: tableContent === null || tableContent === void 0 ? void 0 : tableContent.map(function (row, index) { return (jsx$1(TableRow$1, __assign$1({ className: getIsOdd$1(index) ? 'background' : '', backgroundColor: theme.colors.shades['10'].color }, { children: row === null || row === void 0 ? void 0 : row.map(function (cell, index) { return (jsx$1(TableCell$1, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }), index)); }) }, void 0))] }), void 0) }, void 0)] }, void 0)] }, void 0));
|
|
21797
21933
|
};
|
|
21798
21934
|
|
|
21799
|
-
var TableElement = newStyled.table(templateObject_1$
|
|
21800
|
-
var TableCell = newStyled.td(templateObject_2$
|
|
21801
|
-
var TableHead = newStyled.th(templateObject_3$
|
|
21802
|
-
var Label = newStyled('div')(templateObject_4$
|
|
21803
|
-
newStyled(Label)(templateObject_5$
|
|
21804
|
-
newStyled(Label)(templateObject_6$
|
|
21805
|
-
var Container$
|
|
21806
|
-
newStyled('span')(templateObject_8$
|
|
21935
|
+
var TableElement = newStyled.table(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n box-sizing: border-box;\n border-radius: ", ";\n border-bottom-left-radius: ", ";\n border-bottom-right-radius: ", ";\n border: 0.063rem solid var(--colors-shades-100-color);\n border-spacing: 0;\n font-size: 0.875rem;\n line-height: 3.125rem;\n width: 100%;\n color: var(--colors-shades-700-color);\n"], ["\n box-sizing: border-box;\n border-radius: ", ";\n border-bottom-left-radius: ", ";\n border-bottom-right-radius: ", ";\n border: 0.063rem solid var(--colors-shades-100-color);\n border-spacing: 0;\n font-size: 0.875rem;\n line-height: 3.125rem;\n width: 100%;\n color: var(--colors-shades-700-color);\n"])), function (props) { return (props.isSticky ? '0' : '0.5rem'); }, function (props) { return (props.isSticky ? '0.5rem' : '0'); }, function (props) { return (props.isSticky ? '0.5rem' : '0'); });
|
|
21936
|
+
var TableCell = newStyled.td(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n border-bottom: 0.063rem solid var(--colors-shades-100-color);\n border-right: 0.063rem solid var(--colors-shades-100-color);\n line-height: normal;\n padding: 1rem 0;\n text-align: center;\n position: ", ";\n left: 0;\n z-index: ", ";\n border-bottom-left-radius: ", ";\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n font-weight: 600;\n text-align: center;\n }\n"], ["\n border-bottom: 0.063rem solid var(--colors-shades-100-color);\n border-right: 0.063rem solid var(--colors-shades-100-color);\n line-height: normal;\n padding: 1rem 0;\n text-align: center;\n position: ", ";\n left: 0;\n z-index: ", ";\n border-bottom-left-radius: ", ";\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n font-weight: 600;\n text-align: center;\n }\n"])), function (props) { return (props.isSticky ? 'sticky' : 'unset'); }, function (props) { return (props.isSticky ? 1 : 0); }, function (props) { return (props.isLast ? '0.5rem' : '0'); });
|
|
21937
|
+
var TableHead = newStyled.th(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n border-bottom: 0.063rem solid var(--colors-shades-100-color);\n border-right: 0.063rem solid var(--colors-shades-100-color);\n font-weight: 600;\n line-height: normal;\n padding: 1rem;\n text-align: start;\n position: ", ";\n left: 0;\n z-index: ", ";\n background-color: ", ";\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n text-align: center;\n }\n"], ["\n border-bottom: 0.063rem solid var(--colors-shades-100-color);\n border-right: 0.063rem solid var(--colors-shades-100-color);\n font-weight: 600;\n line-height: normal;\n padding: 1rem;\n text-align: start;\n position: ", ";\n left: 0;\n z-index: ", ";\n background-color: ", ";\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n text-align: center;\n }\n"])), function (props) { return (props.isSticky ? 'sticky' : 'unset'); }, function (props) { return (props.isSticky ? 1 : 0); }, function (props) { return (props.isSticky ? '#fff6ef' : 'unset'); });
|
|
21938
|
+
var Label = newStyled('div')(templateObject_4$1 || (templateObject_4$1 = __makeTemplateObject(["\n gap: 15px;\n width: 100%;\n display: flex;\n font-size: 14px;\n font-weight: 600;\n align-items: center;\n justify-content: center;\n"], ["\n gap: 15px;\n width: 100%;\n display: flex;\n font-size: 14px;\n font-weight: 600;\n align-items: center;\n justify-content: center;\n"])));
|
|
21939
|
+
newStyled(Label)(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
21940
|
+
newStyled(Label)(templateObject_6$1 || (templateObject_6$1 = __makeTemplateObject(["\n width: 20px;\n transform: rotate(270deg);\n"], ["\n width: 20px;\n transform: rotate(270deg);\n"])));
|
|
21941
|
+
var Container$1 = newStyled('div')(templateObject_7$1 || (templateObject_7$1 = __makeTemplateObject(["\n gap: 5px;\n display: flex;\n width: fit-content;\n align-items: center;\n"], ["\n gap: 5px;\n display: flex;\n width: fit-content;\n align-items: center;\n"])));
|
|
21942
|
+
newStyled('span')(templateObject_8$1 || (templateObject_8$1 = __makeTemplateObject(["\n display: flex;\n min-width: 70px;\n justify-content: center;\n"], ["\n display: flex;\n min-width: 70px;\n justify-content: center;\n"])));
|
|
21807
21943
|
var Column = newStyled('div')(templateObject_9$1 || (templateObject_9$1 = __makeTemplateObject(["\n display: flex;\n min-width: 675px;\n align-items: flex-start;\n flex-direction: column;\n\n @media (max-width: 768px) {\n min-width: 100%;\n }\n"], ["\n display: flex;\n min-width: 675px;\n align-items: flex-start;\n flex-direction: column;\n\n @media (max-width: 768px) {\n min-width: 100%;\n }\n"])));
|
|
21808
21944
|
var TableRow = newStyled.tr(templateObject_10$1 || (templateObject_10$1 = __makeTemplateObject(["\n &:last-child {\n td {\n border-bottom: none;\n }\n }\n\n &.background {\n background-color: var(--colors-shades-10-color);\n }\n"], ["\n &:last-child {\n td {\n border-bottom: none;\n }\n }\n\n &.background {\n background-color: var(--colors-shades-10-color);\n }\n"])));
|
|
21809
21945
|
var Header = newStyled('div')(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n gap: 15px;\n display: flex;\n left: 0;\n border: 1px solid #e5e5e5;\n width: 100%;\n max-width: 92vw;\n position: sticky;\n padding: 14px 18px;\n border-top-left-radius: 12px;\n border-top-right-radius: 12px;\n border-bottom: none;\n background-color: #fff6ef;\n font-size: 0.875rem;\n font-weight: 600;\n\n @media (min-width: 400px) {\n max-width: 92.5vw;\n }\n"], ["\n gap: 15px;\n display: flex;\n left: 0;\n border: 1px solid #e5e5e5;\n width: 100%;\n max-width: 92vw;\n position: sticky;\n padding: 14px 18px;\n border-top-left-radius: 12px;\n border-top-right-radius: 12px;\n border-bottom: none;\n background-color: #fff6ef;\n font-size: 0.875rem;\n font-weight: 600;\n\n @media (min-width: 400px) {\n max-width: 92.5vw;\n }\n"])));
|
|
@@ -21812,7 +21948,7 @@ var Arrow = newStyled('div')(templateObject_13 || (templateObject_13 = __makeTem
|
|
|
21812
21948
|
var TableHeader = newStyled('thead')(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n background-color: ", ";\n"], ["\n background-color: ", ";\n"])), function (props) {
|
|
21813
21949
|
return props.isColored ? 'var(--colors-pallete-primary-80-color)' : 'unset';
|
|
21814
21950
|
});
|
|
21815
|
-
var templateObject_1$
|
|
21951
|
+
var templateObject_1$1, templateObject_2$1, templateObject_3$1, templateObject_4$1, templateObject_5$1, templateObject_6$1, templateObject_7$1, templateObject_8$1, templateObject_9$1, templateObject_10$1, templateObject_11, templateObject_12, templateObject_13, templateObject_14;
|
|
21816
21952
|
|
|
21817
21953
|
var getIsOdd = function (number) { return number % 2 !== 0; };
|
|
21818
21954
|
// TODO: Refactor this color logic
|
|
@@ -21879,7 +22015,7 @@ var SizeChartTableV3 = function (_a) {
|
|
|
21879
22015
|
value: cell,
|
|
21880
22016
|
}); });
|
|
21881
22017
|
});
|
|
21882
|
-
return (jsxs$1(Fragment$2, { children: [jsx$1(Parent, __assign$1({ ref: containerRef }, { children: jsx$1(Container$
|
|
22018
|
+
return (jsxs$1(Fragment$2, { children: [jsx$1(Parent, __assign$1({ ref: containerRef }, { children: jsx$1(Container$1, { children: jsxs$1(Column, { children: [isMultilabel && (jsxs$1(Header, { children: [jsx$1("div", { children: trimmedYLabel }, void 0), jsx$1(Icon.Arrows.ChevronRightVariant, {}, void 0)] }, void 0)), jsxs$1(TableElement, __assign$1({ isSticky: !!newSizeTableCss }, { children: [jsx$1(TableHeader, __assign$1({ isColored: newSizeTableCss }, { children: jsx$1(TableRow, { children: headers === null || headers === void 0 ? void 0 : headers.map(function (header, index) { return (jsx$1(TableHead, __assign$1({ isSticky: !!newSizeTableCss && index === 0 }, { children: index === 0 && isMultilabel ? (jsxs$1("div", __assign$1({ style: { display: 'flex', alignItems: 'center', gap: '15px' } }, { children: [jsx$1("div", { children: trimmedXLabel }, void 0), jsx$1(Icon.Arrows.ChevronDownVariant, {}, void 0)] }), void 0)) : (header) }), header)); }) }, void 0) }), void 0), newSizeTableCss ? (jsx$1("tbody", { children: tableContentWithIds === null || tableContentWithIds === void 0 ? void 0 : tableContentWithIds.map(function (row, parentIndex) { return (jsx$1("tr", { children: row === null || row === void 0 ? void 0 : row.map(function (cell, index) { return (jsx$1(TableCell, __assign$1({ isSticky: index === 0, isLast: index === 0 && parentIndex === tableContent.length - 1, style: {
|
|
21883
22019
|
backgroundColor: getCellColor(index, cell.value, true),
|
|
21884
22020
|
} }, { children: cell.value }), cell.id)); }) }, row[0].id)); }) }, void 0)) : (jsx$1("tbody", { children: tableContentWithIds === null || tableContentWithIds === void 0 ? void 0 : tableContentWithIds.map(function (row, parentIndex) { return (jsx$1(TableRow, __assign$1({ className: getIsOdd(parentIndex) ? 'background' : '' }, { children: row === null || row === void 0 ? void 0 : row.map(function (cell) { return (jsx$1(TableCell, __assign$1({ isSticky: false }, { children: cell.value }), cell.id)); }) }), row[0].id)); }) }, void 0))] }), void 0)] }, void 0) }, void 0) }), void 0), newSizeTableCss && isMobile && jsx$1(ArrowTip, { isRight: !isAtScrollEnd }, void 0)] }, void 0));
|
|
21885
22021
|
};
|
|
@@ -21891,12 +22027,12 @@ var ArrowTip = function (_a) {
|
|
|
21891
22027
|
};
|
|
21892
22028
|
var trimLabel = function (label) { var _a, _b; return (_b = (_a = label === null || label === void 0 ? void 0 : label.trim()) === null || _a === void 0 ? void 0 : _a.split(' ')) === null || _b === void 0 ? void 0 : _b[0]; };
|
|
21893
22029
|
|
|
21894
|
-
var FlexContainer = newStyled.div(templateObject_1
|
|
22030
|
+
var FlexContainer = newStyled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n\n ", "\n"], ["\n display: flex;\n\n ", "\n"])), function (_a) {
|
|
21895
22031
|
var theme = _a.theme;
|
|
21896
22032
|
return theme.name === 'TheSpaDr' &&
|
|
21897
22033
|
"\n [data-testid='subscription-frequency'] {\n border: 0;\n padding-left: 0 !important;\n padding-right: 32px !important;\n }\n\n [role='listbox']{\n margin-left: -20px;\n }\n ";
|
|
21898
22034
|
});
|
|
21899
|
-
var DiscountTag = newStyled.div(templateObject_2
|
|
22035
|
+
var DiscountTag = newStyled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position: absolute;\n top: -24px;\n right: 18px;\n background-color: ", ";\n color: white;\n padding: 5px 10px;\n font-size: 12px;\n font-weight: bold;\n line-height: 14px;\n border-radius: ", ";\n"], ["\n position: absolute;\n top: -24px;\n right: 18px;\n background-color: ", ";\n color: white;\n padding: 5px 10px;\n font-size: 12px;\n font-weight: bold;\n line-height: 14px;\n border-radius: ", ";\n"])), function (_a) {
|
|
21900
22036
|
var theme = _a.theme, selected = _a.selected;
|
|
21901
22037
|
return selected
|
|
21902
22038
|
? theme.component.autoship.discountTag.backgroundColor
|
|
@@ -21912,7 +22048,7 @@ var getSelectedBorder = function (_a) {
|
|
|
21912
22048
|
}
|
|
21913
22049
|
return "1.5px solid ".concat(colors.shades['700'].color);
|
|
21914
22050
|
};
|
|
21915
|
-
var ContainerBase = newStyled.div(templateObject_3
|
|
22051
|
+
var ContainerBase = newStyled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n border-radius: 8px;\n\n border: ", ";\n\n ", "\n\n & input:checked + div {\n border-color: ", ";\n }\n\n & label {\n cursor: pointer;\n }\n"], ["\n border-radius: 8px;\n\n border: ", ";\n\n ", "\n\n & input:checked + div {\n border-color: ", ";\n }\n\n & label {\n cursor: pointer;\n }\n"])), function (_a) {
|
|
21916
22052
|
var disabled = _a.disabled, highlighted = _a.highlighted, theme = _a.theme;
|
|
21917
22053
|
return disabled
|
|
21918
22054
|
? "1px solid ".concat(theme.colors.shades[200].color)
|
|
@@ -21928,12 +22064,12 @@ var ContainerBase = newStyled.div(templateObject_3$1 || (templateObject_3$1 = __
|
|
|
21928
22064
|
var theme = _a.theme;
|
|
21929
22065
|
return theme.colors.pallete.primary.color;
|
|
21930
22066
|
});
|
|
21931
|
-
var SinglePurchaseContainer = newStyled(ContainerBase)(templateObject_4
|
|
22067
|
+
var SinglePurchaseContainer = newStyled(ContainerBase)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n padding: 16px;\n\n ", "\n"], ["\n display: flex;\n justify-content: space-between;\n padding: 16px;\n\n ", "\n"])), function (_a) {
|
|
21932
22068
|
var onClick = _a.onClick;
|
|
21933
22069
|
return (onClick ? 'cursor: pointer;' : '');
|
|
21934
22070
|
});
|
|
21935
|
-
var SubscriptionContainer = newStyled(ContainerBase)(templateObject_5
|
|
21936
|
-
var SubscriptionHeader = newStyled.div(templateObject_6
|
|
22071
|
+
var SubscriptionContainer = newStyled(ContainerBase)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n padding: 16px;\n margin-bottom: 8px;\n position: relative;\n"], ["\n padding: 16px;\n margin-bottom: 8px;\n position: relative;\n"])));
|
|
22072
|
+
var SubscriptionHeader = newStyled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n padding-bottom: ", ";\n margin-bottom: ", ";\n cursor: pointer;\n border-bottom: ", ";\n\n & input:checked + div {\n border-color: ", ";\n }\n"], ["\n display: flex;\n justify-content: space-between;\n padding-bottom: ", ";\n margin-bottom: ", ";\n cursor: pointer;\n border-bottom: ", ";\n\n & input:checked + div {\n border-color: ", ";\n }\n"])), function (_a) {
|
|
21937
22073
|
var _b = _a.showBorder, showBorder = _b === void 0 ? true : _b;
|
|
21938
22074
|
return (showBorder ? '10px' : '');
|
|
21939
22075
|
}, function (_a) {
|
|
@@ -21946,11 +22082,11 @@ var SubscriptionHeader = newStyled.div(templateObject_6$1 || (templateObject_6$1
|
|
|
21946
22082
|
var theme = _a.theme;
|
|
21947
22083
|
return theme.colors.pallete.primary.color;
|
|
21948
22084
|
});
|
|
21949
|
-
var BenefitsContainer = newStyled.div(templateObject_7
|
|
22085
|
+
var BenefitsContainer = newStyled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n margin-bottom: 5px;\n\n p {\n color: ", ";\n }\n"], ["\n margin-bottom: 5px;\n\n p {\n color: ", ";\n }\n"])), function (_a) {
|
|
21950
22086
|
var disabled = _a.disabled;
|
|
21951
22087
|
return (disabled ? 'var(--colors-shades-250-color)' : 'inherit');
|
|
21952
22088
|
});
|
|
21953
|
-
var StyledPrice = newStyled(PriceLabelV2$1)(templateObject_8
|
|
22089
|
+
var StyledPrice = newStyled(PriceLabelV2$1)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n div p {\n color: ", ";\n }\n"], ["\n div p {\n color: ", ";\n }\n"])), function (_a) {
|
|
21954
22090
|
var disabled = _a.disabled, highlighted = _a.highlighted, theme = _a.theme;
|
|
21955
22091
|
var _b = theme.colors, shades = _b.shades, semantic = _b.semantic;
|
|
21956
22092
|
if (disabled) {
|
|
@@ -21961,12 +22097,12 @@ var StyledPrice = newStyled(PriceLabelV2$1)(templateObject_8$1 || (templateObjec
|
|
|
21961
22097
|
}
|
|
21962
22098
|
return shades[700].color;
|
|
21963
22099
|
});
|
|
21964
|
-
var Container
|
|
22100
|
+
var Container = newStyled.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n margin-top: 20px;\n"], ["\n margin-top: 20px;\n"])));
|
|
21965
22101
|
var TooltipWrapper = newStyled.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n margin: ", ";\n"], ["\n margin: ", ";\n"])), function (_a) {
|
|
21966
22102
|
var theme = _a.theme;
|
|
21967
22103
|
return theme.component.autoship.tooltip.margin;
|
|
21968
22104
|
});
|
|
21969
|
-
var templateObject_1
|
|
22105
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10;
|
|
21970
22106
|
|
|
21971
22107
|
var SubscriptionPlanSelector = function (_a) {
|
|
21972
22108
|
var children = _a.children, benefits = _a.benefits, tooltip = _a.tooltip, pricing = _a.pricing, frequency = _a.frequency, onChange = _a.onChange, className = _a.className, discountTagClassName = _a.discountTagClassName, closeIcon = _a.closeIcon, currencySymbol = _a.currencySymbol, discountLabel = _a.discountLabel, radios = _a.radios, termsAndConditions = _a.termsAndConditions;
|
|
@@ -22035,7 +22171,7 @@ var SubscriptionPlanSelector = function (_a) {
|
|
|
22035
22171
|
}
|
|
22036
22172
|
return null;
|
|
22037
22173
|
};
|
|
22038
|
-
return (jsxs$1(Container
|
|
22174
|
+
return (jsxs$1(Container, __assign$1({ className: className }, { children: [jsxs$1(SubscriptionContainer, __assign$1({ highlighted: radiosStatuses.subscription.checked, onClick: function () { return handleRadioClicked('subscription'); }, "data-testid": "subscription-purchase-block", disabled: radiosStatuses.subscription.disabled }, { children: [jsx$1(DiscountTag, __assign$1({ className: discountTagClassName, selected: radiosStatuses.subscription.checked }, { children: discountLabel !== null && discountLabel !== void 0 ? discountLabel : "".concat(subscriptionPctOverListPriceRounded, "% OFF - SAVE ").concat(currencySymbol).concat(subscriptionSaving.toFixed(2)) }), void 0), jsxs$1(SubscriptionHeader, __assign$1({ showBorder: radiosStatuses.subscription.checked }, { children: [jsxs$1(FlexContainer, __assign$1({ "data-testid": "subscription-block", onClick: function () { return handleRadioClicked('subscription'); } }, { children: [jsx$1(RadioInput, { label: radios.subscription.label, icon: radios.subscription.icon, name: "subscription", id: "subscription", value: "subscription", size: ComponentSize.Medium, style: { marginRight: '10px' }, useV2Style: true, onChange: function () {
|
|
22039
22175
|
setRadiosStatuses(function (prev) { return ({
|
|
22040
22176
|
subscription: __assign$1(__assign$1({}, prev.subscription), { checked: true }),
|
|
22041
22177
|
oneTime: __assign$1(__assign$1({}, prev.oneTime), { checked: false }),
|
|
@@ -22048,95 +22184,5 @@ var SubscriptionPlanSelector = function (_a) {
|
|
|
22048
22184
|
}, useV2Style: true, checked: !radiosStatuses.oneTime.disabled && radiosStatuses.oneTime.checked, disabled: radiosStatuses.oneTime.disabled }, void 0), jsx$1(StyledPrice, { testId: "single-purchase", finalPrice: "$".concat(decimalFormat(Number(discountedPrice))), disabled: radiosStatuses.oneTime.disabled, highlighted: !radiosStatuses.oneTime.disabled && radiosStatuses.oneTime.highlighted, size: ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(listPrice))) }, void 0)] }), void 0)] }), void 0));
|
|
22049
22185
|
};
|
|
22050
22186
|
|
|
22051
|
-
|
|
22052
|
-
var Body = newStyled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n gap: 8px;\n width: 100%;\n height: ", ";\n"], ["\n display: flex;\n gap: 8px;\n width: 100%;\n height: ", ";\n"])), function (_a) {
|
|
22053
|
-
var height = _a.height;
|
|
22054
|
-
return height;
|
|
22055
|
-
});
|
|
22056
|
-
var RightContent = newStyled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n gap: 8px;\n height: 100%;\n"], ["\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n gap: 8px;\n height: 100%;\n"])));
|
|
22057
|
-
var Benefits = newStyled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 8px;\n height: ", ";\n padding: 6px 10px;\n border-radius: 8px;\n background-color: ", ";\n"], ["\n display: flex;\n flex-direction: column;\n gap: 8px;\n height: ", ";\n padding: 6px 10px;\n border-radius: 8px;\n background-color: ", ";\n"])), function (_a) {
|
|
22058
|
-
var height = _a.height;
|
|
22059
|
-
return height;
|
|
22060
|
-
}, function (_a) {
|
|
22061
|
-
var theme = _a.theme;
|
|
22062
|
-
return theme.colors.shades['10'].color;
|
|
22063
|
-
});
|
|
22064
|
-
var Actions = newStyled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n display: flex;\n width: 100%;\n gap: 8px;\n"], ["\n display: flex;\n width: 100%;\n gap: 8px;\n"])));
|
|
22065
|
-
var ImageWrapper = newStyled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n position: relative;\n display: flex;\n width: ", ";\n justify-content: center;\n align-items: center;\n border-radius: 8px;\n"], ["\n position: relative;\n display: flex;\n width: ", ";\n justify-content: center;\n align-items: center;\n border-radius: 8px;\n"])), function (_a) {
|
|
22066
|
-
var width = _a.width;
|
|
22067
|
-
return width;
|
|
22068
|
-
});
|
|
22069
|
-
var RatingWrapper = newStyled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n position: absolute;\n bottom: 5px;\n left: 50%;\n transform: translateX(-50%);\n display: flex;\n justify-content: center;\n align-items: center;\n background-color: white;\n border-radius: 8px;\n padding: 4px 8px;\n width: 95%;\n"], ["\n position: absolute;\n bottom: 5px;\n left: 50%;\n transform: translateX(-50%);\n display: flex;\n justify-content: center;\n align-items: center;\n background-color: white;\n border-radius: 8px;\n padding: 4px 8px;\n width: 95%;\n"])));
|
|
22070
|
-
var RatingText = newStyled.span(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n font-size: ", ";\n font-weight: 600;\n margin-bottom: -3%;\n color: #292929;\n"], ["\n font-size: ", ";\n font-weight: 600;\n margin-bottom: -3%;\n color: #292929;\n"])), function (_a) {
|
|
22071
|
-
var fontSize = _a.fontSize;
|
|
22072
|
-
return fontSize;
|
|
22073
|
-
});
|
|
22074
|
-
var templateObject_1$1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
|
|
22075
|
-
|
|
22076
|
-
var Title = function (_a) {
|
|
22077
|
-
var content = _a.content, bold = _a.bold, dangerouslySetInnerHTML = _a.dangerouslySetInnerHTML;
|
|
22078
|
-
if (dangerouslySetInnerHTML) {
|
|
22079
|
-
return jsx$1("div", { dangerouslySetInnerHTML: dangerouslySetInnerHTML }, void 0);
|
|
22080
|
-
}
|
|
22081
|
-
if (typeof content === 'string') {
|
|
22082
|
-
return (jsx$1(Text$7, __assign$1({ variant: "body", size: "small", weight: bold ? 'bold' : 'regular' }, { children: content }), void 0));
|
|
22083
|
-
}
|
|
22084
|
-
return jsx$1(Fragment$2, { children: content }, void 0);
|
|
22085
|
-
};
|
|
22086
|
-
|
|
22087
|
-
var style = ".benefit{font-size:14px;line-height:22px;display:inline-block;margin:0;@media screen and (max-width:768px){font-size:12px;line-height:16px;}}";
|
|
22088
|
-
|
|
22089
|
-
var Benefit = newStyled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: 8px;\n"], ["\n display: flex;\n align-items: center;\n gap: 8px;\n"])));
|
|
22090
|
-
var templateObject_1;
|
|
22091
|
-
|
|
22092
|
-
var renderBenefit = function (text, className) {
|
|
22093
|
-
if (className === void 0) { className = style.benefit; }
|
|
22094
|
-
if (typeof text === 'string') {
|
|
22095
|
-
return jsx$1("span", { className: className, dangerouslySetInnerHTML: { __html: text } }, void 0);
|
|
22096
|
-
}
|
|
22097
|
-
return text;
|
|
22098
|
-
};
|
|
22099
|
-
var OfferAtCartBenefits = function (_a) {
|
|
22100
|
-
var benefits = _a.benefits;
|
|
22101
|
-
return (jsx$1(Fragment$2, { children: benefits.map(function (_a) {
|
|
22102
|
-
var _b;
|
|
22103
|
-
var icon = _a.icon, text = _a.text, className = _a.className;
|
|
22104
|
-
return (jsxs$1(Benefit, { children: [(icon === null || icon === void 0 ? void 0 : icon.name) && (jsx$1(Icon$1, { name: icon.name, fill: icon.fill, width: icon.width, height: icon.height }, void 0)), renderBenefit(text, className)] }, (_b = icon === null || icon === void 0 ? void 0 : icon.name) !== null && _b !== void 0 ? _b : text.toString()));
|
|
22105
|
-
}) }, void 0));
|
|
22106
|
-
};
|
|
22107
|
-
|
|
22108
|
-
var OfferAtCart = function (_a) {
|
|
22109
|
-
var className = _a.className, _b = _a.title, titleContent = _b.content, bold = _b.bold, _c = _a.image, src = _c.src, alt = _c.alt, benefits = _a.benefits, _d = _a.ctaText, ctaText = _d === void 0 ? 'Yes, I want this offer' : _d, sizeOptions = _a.sizeOptions, rating = _a.rating, onAddToCart = _a.onAddToCart;
|
|
22110
|
-
var theme = useTheme();
|
|
22111
|
-
var isMobile = useDeviceType() === 'mobile';
|
|
22112
|
-
var _e = useState(), selectedSize = _e[0], setSelectedSize = _e[1];
|
|
22113
|
-
var _f = useState(false), showErrorMessage = _f[0], setShowErrorMessage = _f[1];
|
|
22114
|
-
var getTitleProps = function () {
|
|
22115
|
-
if (typeof titleContent === 'string') {
|
|
22116
|
-
return { content: titleContent, bold: bold };
|
|
22117
|
-
}
|
|
22118
|
-
else if (isDangerouslySetInnerHTML(titleContent)) {
|
|
22119
|
-
return { dangerouslySetInnerHTML: titleContent };
|
|
22120
|
-
}
|
|
22121
|
-
else {
|
|
22122
|
-
return { content: titleContent };
|
|
22123
|
-
}
|
|
22124
|
-
};
|
|
22125
|
-
var ActionsSection = (jsxs$1(Actions, { children: [jsx$1(SimpleDropdown, { placeHolder: "Size", options: sizeOptions, onChange: function (sizeOption) {
|
|
22126
|
-
setShowErrorMessage(false);
|
|
22127
|
-
setSelectedSize(sizeOption);
|
|
22128
|
-
} }, void 0), jsx$1(ButtonSecondary, { wide: true, text: ctaText, size: ComponentSize.Small, onClick: function () {
|
|
22129
|
-
if (selectedSize) {
|
|
22130
|
-
setShowErrorMessage(false);
|
|
22131
|
-
onAddToCart(selectedSize.key);
|
|
22132
|
-
}
|
|
22133
|
-
else {
|
|
22134
|
-
setShowErrorMessage(true);
|
|
22135
|
-
}
|
|
22136
|
-
} }, void 0)] }, void 0));
|
|
22137
|
-
var ErrorMessage = showErrorMessage ? (jsx$1(Text$7, __assign$1({ variant: "body", weight: "demi", size: "small", color: theme.colors.semantic.urgent.color }, { children: "Please select a size first" }), void 0)) : null;
|
|
22138
|
-
return (jsxs$1(Container, __assign$1({ className: className }, { children: [jsx$1(Title, __assign$1({}, getTitleProps()), void 0), jsxs$1(Body, __assign$1({ height: isMobile ? '120px' : '162px' }, { children: [jsxs$1(ImageWrapper, __assign$1({ width: isMobile ? '130px' : '122px' }, { children: [!!rating && (jsxs$1(RatingWrapper, { children: [jsx$1(Rating, { rating: rating, size: isMobile ? ComponentSize.XXSmall : ComponentSize.XSmall }, void 0), jsxs$1(RatingText, __assign$1({ fontSize: isMobile ? '9px' : '13px' }, { children: [rating, "/5"] }), void 0)] }, void 0)), jsx$1(Image$3, { src: src, alt: alt, width: "100%", height: "100%", objectFit: "cover", borderRadius: "8px" }, void 0)] }), void 0), jsxs$1(RightContent, { children: [jsx$1(Benefits, __assign$1({ height: isMobile ? '100%' : '65%' }, { children: jsx$1(OfferAtCartBenefits, { benefits: benefits }, void 0) }), void 0), !isMobile && ActionsSection, !isMobile && ErrorMessage] }, void 0)] }), void 0), isMobile && ActionsSection, isMobile && ErrorMessage] }), void 0));
|
|
22139
|
-
};
|
|
22140
|
-
|
|
22141
|
-
export { AbsorbencyLevel, Accordion$1 as Accordion, AccordionOptions, AmazonButton, AssetsProvider, Autoship, AutoshipFrequencyDropdown, AutoshipOfferCard, AutoshipOfferCardCta, AutoshipV2, BasicAccordion, BeforeAfterCard, BeforeAfterVariant, BenefitsList, Bundle, ButtonPrimary, ButtonSecondary, ButtonSecondaryOutline, BuyNowPayLater, CacheProvider, CancellationFlowAccordionContentPerPartner, Card$3 as Card, CardSectionType, CartItemCard, CartProductItem, CategorySquareTag, CategoryTag, Checkbox, ClubOfferSelector, ClubOfferTag, ClubPriceMemberLabel, ClubRadioGroupInput, Collection, ColorPickerWithTooltip, ComponentPosition, ComponentSize, CouponCard, index$1 as CrossSell, DeliveryDetails, DiscountTag$3 as DiscountTag, Drawer, DropdownDialog, DropdownListIcons, FilteringDropdown, Tags as FilteringTags, Filters, FitGuarantee, FitPredictor, Global, HorizontalDivider, HurryUp, Icon, IconButton, IconsWithTitle, Image$3 as Image, ImageCardWithDescription, Input$3 as Input, InputValidationType, JoinClubCard, Icon$1 as LibIcon, LikeButton, Modal, MotivatorProgressBar, MultiColorPicker, Note, OfferAtCart, OfferBanner, OrderBar, Overlay, PackSelector, PackSelectorV2, Pagination, PaginatorBlog, PaymentMethod, PaypalButton, Portal, PriceLabel$1 as PriceLabel, PriceLabelV2$1 as PriceLabelV2, PriceLabelV3, ProductCard, ProductCardV2, ProductCardV3, ProductGallery, ProductGalleryMobile, ProductGalleryMobileV2, ProductGalleryMobileV3, ProductGalleryMobileV4, ProductGalleryMobileV5, ProgressBar, QuantityPicker, RadioGroupInput, RadioInput, RadioPrimary, Rating, Review, Review$1 as ReviewDetail, ReviewsHeader, ScrollToTop, SearchBar, SearchNavigation, SeasonOfferTag, ShortBanner, SimpleDropdown, SimpleOrderItem, SingleColorPicker, SizeChartTable, SizeChartTableV2, SizeChartTableV3, SizeDropdown, SizeFitGuide, SizeSelector, SizeTable, SliderNavigation, Spacing, Spinner, StarList, StrengthBars, SubscriptionPlanSelector, Tab, Tabs, Text$7 as Text, TextButton, TextWithImage, ThemeProvider, ThemeVariables, Timer, Toast, ToggleComponent, Tooltip, Totals, TrackingProgress, TrackingProgressV2, Video$1 as Video, benefits, benefitsRawHtml, buildImageUrl, componentSizeMapper, createCache, css, decimalFormat, formatPrice, getSrcSet, isDangerouslySetInnerHTML, isEmail, isEmpty, isNumber$1 as isNumber, isPhoneNumber, isValidDate, mediaQueries, modalEvent, SeasonOfferRoundedTag as seasonOfferRoundedTag, simulateMouseClick, sizeOptions, sliceString, newStyled as styled, title, useDeviceType, useModal, useModalEvent, useOnClickOutside, useTheme, useThemeAssets, useWindowDimensions };
|
|
22187
|
+
export { AbsorbencyLevel, Accordion$1 as Accordion, AccordionOptions, AmazonButton, AssetsProvider, Autoship, AutoshipFrequencyDropdown, AutoshipOfferCard, AutoshipOfferCardCta, AutoshipV2, BasicAccordion, BeforeAfterCard, BeforeAfterVariant, BenefitsList, Bundle, ButtonPrimary, ButtonSecondary, ButtonSecondaryOutline, BuyNowPayLater, CacheProvider, CancellationFlowAccordionContentPerPartner, Card$3 as Card, CardSectionType, CartItemCard, CartProductItem, CategorySquareTag, CategoryTag, Checkbox, ClubOfferSelector, ClubOfferTag, ClubPriceMemberLabel, ClubRadioGroupInput, Collection, ColorPickerWithTooltip, ComponentPosition, ComponentSize, CouponCard, index$1 as CrossSell, DeliveryDetails, DiscountTag$3 as DiscountTag, Drawer, DropdownDialog, DropdownListIcons, FilteringDropdown, Tags as FilteringTags, Filters, FitGuarantee, FitPredictor, Global, HorizontalDivider, HurryUp, Icon, IconButton, IconsWithTitle, Image$3 as Image, ImageCardWithDescription, Input$3 as Input, InputValidationType, JoinClubCard, Icon$1 as LibIcon, LikeButton, Modal, MotivatorProgressBar, MultiColorPicker, Note, OfferAtCart, OfferAtCartV2, OfferBanner, OrderBar, Overlay, PackSelector, PackSelectorV2, Pagination, PaginatorBlog, PaymentMethod, PaypalButton, Portal, PriceLabel$1 as PriceLabel, PriceLabelV2$1 as PriceLabelV2, PriceLabelV3, ProductCard, ProductCardV2, ProductCardV3, ProductGallery, ProductGalleryMobile, ProductGalleryMobileV2, ProductGalleryMobileV3, ProductGalleryMobileV4, ProductGalleryMobileV5, ProgressBar, QuantityPicker, RadioGroupInput, RadioInput, RadioPrimary, Rating, Review, Review$1 as ReviewDetail, ReviewsHeader, ScrollToTop, SearchBar, SearchNavigation, SeasonOfferTag, ShortBanner, SimpleDropdown, SimpleOrderItem, SingleColorPicker, SizeChartTable, SizeChartTableV2, SizeChartTableV3, SizeDropdown, SizeFitGuide, SizeSelector, SizeTable, SliderNavigation, Spacing, Spinner, StarList, StrengthBars, SubscriptionPlanSelector, Tab, Tabs, Text$7 as Text, TextButton, TextWithImage, ThemeProvider, ThemeVariables, Timer, Toast, ToggleComponent, Tooltip, Totals, TrackingProgress, TrackingProgressV2, Video$1 as Video, benefits, benefitsRawHtml, buildImageUrl, componentSizeMapper, createCache, css, decimalFormat, formatPrice, getSrcSet, isDangerouslySetInnerHTML, isEmail, isEmpty, isNumber$1 as isNumber, isPhoneNumber, isValidDate, mediaQueries, modalEvent, SeasonOfferRoundedTag as seasonOfferRoundedTag, simulateMouseClick, sizeOptions, sliceString, newStyled as styled, title, useDeviceType, useModal, useModalEvent, useOnClickOutside, useTheme, useThemeAssets, useWindowDimensions };
|
|
22142
22188
|
//# sourceMappingURL=index.esm.js.map
|