@trafilea/afrodita-components 6.28.0 → 6.28.2
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.d.ts +18 -5
- package/build/index.esm.js +212 -214
- package/build/index.esm.js.map +1 -1
- package/build/index.js +212 -214
- package/build/index.js.map +1 -1
- package/package.json +1 -1
package/build/index.js
CHANGED
|
@@ -3229,7 +3229,7 @@ var Container$1j = newStyled.div(templateObject_1$2b || (templateObject_1$2b = _
|
|
|
3229
3229
|
var size = _a.size;
|
|
3230
3230
|
return (_b = getStylesBySize$g(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
3231
3231
|
});
|
|
3232
|
-
var H3$3 = newStyled.h3(templateObject_2$
|
|
3232
|
+
var H3$3 = newStyled.h3(templateObject_2$1v || (templateObject_2$1v = __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) {
|
|
3233
3233
|
var textColor = _a.textColor;
|
|
3234
3234
|
return textColor;
|
|
3235
3235
|
}, function (_a) {
|
|
@@ -3246,7 +3246,7 @@ var ClubOfferTag = function (_a) {
|
|
|
3246
3246
|
var theme = useTheme();
|
|
3247
3247
|
return (jsxRuntime.jsx(Container$1j, __assign$1({ backgroundColor: disabled ? theme.colors.shades['50'].color : backgroundColor, borderColor: disabled ? theme.colors.shades['50'].color : borderColor, size: size, "data-testid": "cluboffer-container", style: style, className: className }, { children: jsxRuntime.jsx(H3$3, __assign$1({ textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size, style: { fontSize: '0.875rem', lineHeight: '18px' } }, { children: clubOfferText }), void 0) }), void 0));
|
|
3248
3248
|
};
|
|
3249
|
-
var templateObject_1$2b, templateObject_2$
|
|
3249
|
+
var templateObject_1$2b, templateObject_2$1v;
|
|
3250
3250
|
|
|
3251
3251
|
var getStylesBySize$f = function (size, bordersRounded, theme) {
|
|
3252
3252
|
var _a, _b, _c;
|
|
@@ -3299,7 +3299,7 @@ var Container$1i = newStyled.div(templateObject_1$2a || (templateObject_1$2a = _
|
|
|
3299
3299
|
var size = _a.size;
|
|
3300
3300
|
return (_b = getStylesBySize$f(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
3301
3301
|
});
|
|
3302
|
-
var H3$2 = newStyled.h3(templateObject_2$
|
|
3302
|
+
var H3$2 = newStyled.h3(templateObject_2$1u || (templateObject_2$1u = __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) {
|
|
3303
3303
|
var textColor = _a.textColor;
|
|
3304
3304
|
return textColor;
|
|
3305
3305
|
}, function (_a) {
|
|
@@ -3316,7 +3316,7 @@ var DiscountTag$2 = function (_a) {
|
|
|
3316
3316
|
var theme = useTheme();
|
|
3317
3317
|
return (jsxRuntime.jsx(Container$1i, __assign$1({ backgroundColor: disabled ? theme.colors.shades['50'].color : backgroundColor, borderColor: disabled ? theme.colors.shades['50'].color : borderColor, size: size, "data-testid": "discount-container", style: style, bordersRounded: bordersRounded }, { children: jsxRuntime.jsxs(H3$2, __assign$1({ textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size, style: style, theme: theme }, { children: [discount, "% ", offText, " ", showSavings && savings && "- ".concat(savings)] }), void 0) }), void 0));
|
|
3318
3318
|
};
|
|
3319
|
-
var templateObject_1$2a, templateObject_2$
|
|
3319
|
+
var templateObject_1$2a, templateObject_2$1u;
|
|
3320
3320
|
|
|
3321
3321
|
var Viewports = {
|
|
3322
3322
|
mobile: 'mobile',
|
|
@@ -3426,7 +3426,7 @@ var getFontSize = function (size, theme, finalPriceStyled, finalPriceStyledSmall
|
|
|
3426
3426
|
}
|
|
3427
3427
|
};
|
|
3428
3428
|
var Container$1h = newStyled.div(templateObject_1$29 || (templateObject_1$29 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
3429
|
-
var Price = newStyled.p(templateObject_2$
|
|
3429
|
+
var Price = newStyled.p(templateObject_2$1t || (templateObject_2$1t = __makeTemplateObject(["\n font-weight: ", ";\n font-size: ", ";\n line-height: ", ";\n color: ", ";\n text-decoration: ", ";\n margin: ", ";\n position: relative;\n margin-top: ", ";\n"], ["\n font-weight: ", ";\n font-size: ", ";\n line-height: ", ";\n color: ", ";\n text-decoration: ", ";\n margin: ", ";\n position: relative;\n margin-top: ", ";\n"])), function (_a) {
|
|
3430
3430
|
var weight = _a.weight;
|
|
3431
3431
|
return (weight ? weight : '400');
|
|
3432
3432
|
}, function (_a) {
|
|
@@ -3483,7 +3483,7 @@ var PriceLabel$1 = function (_a) {
|
|
|
3483
3483
|
};
|
|
3484
3484
|
return (jsxRuntime.jsxs(Container$1h, __assign$1({}, rest, { children: [clubStyle ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [!!originalPrice && jsxRuntime.jsx(OriginalPrice, {}, void 0), jsxRuntime.jsx(Price, __assign$1({ margin: true, "data-testid": getTestId$1(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: finalPrice }), void 0)] }, void 0)) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Price, __assign$1({ margin: true, "data-testid": getTestId$1(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: finalPrice }), void 0), !!originalPrice && jsxRuntime.jsx(OriginalPrice, {}, void 0)] }, void 0)), discount && (jsxRuntime.jsx(TagContainer, __assign$1({ size: size }, { children: jsxRuntime.jsx(DiscountTag$2, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
|
|
3485
3485
|
};
|
|
3486
|
-
var templateObject_1$29, templateObject_2$
|
|
3486
|
+
var templateObject_1$29, templateObject_2$1t, templateObject_3$19;
|
|
3487
3487
|
|
|
3488
3488
|
var FinalPriceStyledContainer$3 = newStyled.div(templateObject_1$28 || (templateObject_1$28 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
3489
3489
|
var PriceLabelV2$1 = function (_a) {
|
|
@@ -3559,7 +3559,7 @@ var PriceLabelV2$1 = function (_a) {
|
|
|
3559
3559
|
var templateObject_1$28;
|
|
3560
3560
|
|
|
3561
3561
|
var FinalPriceStyledContainer$2 = newStyled.div(templateObject_1$27 || (templateObject_1$27 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
3562
|
-
var ContainerDirectionColumn = newStyled.div(templateObject_2$
|
|
3562
|
+
var ContainerDirectionColumn = newStyled.div(templateObject_2$1s || (templateObject_2$1s = __makeTemplateObject(["\n display: column;\n align-items: center;\n"], ["\n display: column;\n align-items: center;\n"])));
|
|
3563
3563
|
var DiscountEachOneContainer = newStyled.div(templateObject_3$18 || (templateObject_3$18 = __makeTemplateObject(["\n display: flex;\n padding-left: 0.5rem;\n"], ["\n display: flex;\n padding-left: 0.5rem;\n"])));
|
|
3564
3564
|
var PriceLabelV3 = function (_a) {
|
|
3565
3565
|
var _b;
|
|
@@ -3631,12 +3631,12 @@ var PriceLabelV3 = function (_a) {
|
|
|
3631
3631
|
lineHeight: '22px',
|
|
3632
3632
|
} }), void 0)) }), void 0))] }, void 0)] }), void 0));
|
|
3633
3633
|
};
|
|
3634
|
-
var templateObject_1$27, templateObject_2$
|
|
3634
|
+
var templateObject_1$27, templateObject_2$1s, templateObject_3$18;
|
|
3635
3635
|
|
|
3636
3636
|
var FinalPriceStyledContainer$1 = newStyled.div(templateObject_1$26 || (templateObject_1$26 = __makeTemplateObject(["\n display: flex;\n margin-left: -5px;\n"], ["\n display: flex;\n margin-left: -5px;\n"])));
|
|
3637
3637
|
var PriceLabel = function (_a) {
|
|
3638
3638
|
var _b;
|
|
3639
|
-
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 ? exports.ComponentSize.Small : _e, rest = __rest(_a, ["finalPrice", "originalPrice", "color", "testId", "originalPriceStyled", "originalPriceUnderlined", "size"]);
|
|
3639
|
+
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 ? exports.ComponentSize.Small : _e, _f = _a.isClubOffer, isClubOffer = _f === void 0 ? false : _f, rest = __rest(_a, ["finalPrice", "originalPrice", "color", "testId", "originalPriceStyled", "originalPriceUnderlined", "size", "isClubOffer"]);
|
|
3640
3640
|
var theme = useTheme();
|
|
3641
3641
|
var isDiffFinalAndOriginalPrice = originalPrice !== finalPrice;
|
|
3642
3642
|
var isOriginalPrice = originalPrice && isDiffFinalAndOriginalPrice;
|
|
@@ -3661,7 +3661,7 @@ var PriceLabel = function (_a) {
|
|
|
3661
3661
|
};
|
|
3662
3662
|
var OriginalPrice = function () { return (jsxRuntime.jsx(Price, __assign$1({ size: originalPriceStyled ? size : exports.ComponentSize.Small, color: theme.component.pricing.priceLabel.price.originalPriceColor ||
|
|
3663
3663
|
theme.colors.shades['300'].color, margin: true, underlined: originalPriceUnderlined, "data-testid": getTestId$1(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
|
|
3664
|
-
return (jsxRuntime.jsxs(Container$1h, __assign$1({}, rest, { children: [isOriginalPrice && jsxRuntime.jsx(OriginalPrice, {}, void 0), jsxRuntime.jsxs(FinalPriceStyledContainer$1, __assign$1({ "data-testid": getTestId$1(testId, 'final-product-price') }, { children: [jsxRuntime.jsx(Price, __assign$1({ margin: true, finalPriceStyledSmall: true, style: {
|
|
3664
|
+
return (jsxRuntime.jsxs(Container$1h, __assign$1({}, rest, { children: [isOriginalPrice && !isClubOffer && jsxRuntime.jsx(OriginalPrice, {}, void 0), jsxRuntime.jsxs(FinalPriceStyledContainer$1, __assign$1({ "data-testid": getTestId$1(testId, 'final-product-price') }, { children: [jsxRuntime.jsx(Price, __assign$1({ margin: true, finalPriceStyledSmall: true, style: {
|
|
3665
3665
|
marginTop: '-5px',
|
|
3666
3666
|
} }, priceCommonProps, { size: size }, { children: currencySymbol }), void 0), jsxRuntime.jsx(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size, "data-testid": "test-price-final-product-price'" }, { children: finalPriceArray[0] ? finalPriceArray[0] : (_b = "".concat(finalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1] }), void 0), jsxRuntime.jsx(Price, __assign$1({ finalPriceStyledSmall: true, style: {
|
|
3667
3667
|
marginTop: '-6px',
|
|
@@ -3672,7 +3672,7 @@ var templateObject_1$26;
|
|
|
3672
3672
|
var FinalPriceStyledContainer = newStyled.div(templateObject_1$25 || (templateObject_1$25 = __makeTemplateObject(["\n display: flex;\n margin-left: -5px;\n"], ["\n display: flex;\n margin-left: -5px;\n"])));
|
|
3673
3673
|
var PriceLabelV2 = function (_a) {
|
|
3674
3674
|
var _b;
|
|
3675
|
-
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 ? exports.ComponentSize.Small : _e, rest = __rest(_a, ["finalPrice", "originalPrice", "color", "testId", "originalPriceStyled", "originalPriceUnderlined", "size"]);
|
|
3675
|
+
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 ? exports.ComponentSize.Small : _e, _f = _a.isClubOffer, isClubOffer = _f === void 0 ? false : _f, rest = __rest(_a, ["finalPrice", "originalPrice", "color", "testId", "originalPriceStyled", "originalPriceUnderlined", "size", "isClubOffer"]);
|
|
3676
3676
|
var theme = useTheme();
|
|
3677
3677
|
var isDiffFinalAndOriginalPrice = originalPrice !== finalPrice;
|
|
3678
3678
|
var isOriginalPrice = originalPrice && isDiffFinalAndOriginalPrice;
|
|
@@ -3700,14 +3700,21 @@ var PriceLabelV2 = function (_a) {
|
|
|
3700
3700
|
var finalPriceString = finalPriceArray[0]
|
|
3701
3701
|
? finalPriceArray[0]
|
|
3702
3702
|
: (_b = "".concat(finalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1];
|
|
3703
|
-
return (jsxRuntime.jsxs(Container$1h, __assign$1({}, rest, { children: [isOriginalPrice && jsxRuntime.jsx(OriginalPrice, {}, void 0), jsxRuntime.jsxs(FinalPriceStyledContainer, __assign$1({ "data-testid": getTestId$1(testId, 'final-product-price'), style: { marginLeft: '-3px' } }, { children: [jsxRuntime.jsxs(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size }, { children: [currencySymbol, finalPriceString] }), void 0), jsxRuntime.jsx(Price, __assign$1({ finalPriceStyledSmall: true }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }), void 0)] }), void 0));
|
|
3703
|
+
return (jsxRuntime.jsxs(Container$1h, __assign$1({}, rest, { children: [isOriginalPrice && !isClubOffer && jsxRuntime.jsx(OriginalPrice, {}, void 0), jsxRuntime.jsxs(FinalPriceStyledContainer, __assign$1({ "data-testid": getTestId$1(testId, 'final-product-price'), style: { marginLeft: '-3px' } }, { children: [jsxRuntime.jsxs(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size }, { children: [currencySymbol, finalPriceString] }), void 0), jsxRuntime.jsx(Price, __assign$1({ finalPriceStyledSmall: true }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }), void 0)] }), void 0));
|
|
3704
3704
|
};
|
|
3705
3705
|
var templateObject_1$25;
|
|
3706
3706
|
|
|
3707
3707
|
var ClubGradient$1 = "linear-gradient(90deg, #882a2b 0%, #f27c65 226.92%)";
|
|
3708
|
-
newStyled.div(templateObject_1$24 || (templateObject_1$24 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 5px;\n"], ["\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 5px;\n"])));
|
|
3709
|
-
newStyled.div(templateObject_2$
|
|
3710
|
-
var templateObject_1$24, templateObject_2$
|
|
3708
|
+
var ContainerWrapper$1 = newStyled.div(templateObject_1$24 || (templateObject_1$24 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 5px;\n"], ["\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 5px;\n"])));
|
|
3709
|
+
var ImgWrapper = newStyled.div(templateObject_2$1r || (templateObject_2$1r = __makeTemplateObject(["\n display: flex;\n gap: 5px;\n padding: 10px;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n width: 50px auto;\n height: 20px;\n border-radius: 6px;\n opacity: 0px;\n background: ", ";\n position: relative;\n"], ["\n display: flex;\n gap: 5px;\n padding: 10px;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n width: 50px auto;\n height: 20px;\n border-radius: 6px;\n opacity: 0px;\n background: ", ";\n position: relative;\n"])), ClubGradient$1);
|
|
3710
|
+
var templateObject_1$24, templateObject_2$1r;
|
|
3711
|
+
|
|
3712
|
+
function ClubPriceMemberLabel(_a) {
|
|
3713
|
+
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"]);
|
|
3714
|
+
var color = isClub ? '#882A2B' : '#292929';
|
|
3715
|
+
var PriceComponent = isPDP ? (jsxRuntime.jsx(PriceLabelV2, { originalPrice: rest.originalPrice, finalPrice: rest.finalPrice, color: color, isClubOffer: isCollections }, void 0)) : (jsxRuntime.jsx(PriceLabel, __assign$1({}, rest, { color: color, isClubOffer: isCollections }), void 0));
|
|
3716
|
+
return (jsxRuntime.jsx("div", { children: isClub ? (jsxRuntime.jsxs(ContainerWrapper$1, { children: [PriceComponent, jsxRuntime.jsx(ImgWrapper, { children: icon }, void 0)] }, void 0)) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: PriceComponent }, void 0)) }, void 0));
|
|
3717
|
+
}
|
|
3711
3718
|
|
|
3712
3719
|
var Container$1g = newStyled.div(templateObject_1$23 || (templateObject_1$23 = __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) {
|
|
3713
3720
|
var height = _a.height;
|
|
@@ -3754,7 +3761,7 @@ var StyledSvgWrapper = newStyled.svg(templateObject_1$22 || (templateObject_1$22
|
|
|
3754
3761
|
var opacity = _a.opacity;
|
|
3755
3762
|
return opacity && "opacity: ".concat(opacity, ";");
|
|
3756
3763
|
});
|
|
3757
|
-
var StyledImageWrapper = newStyled.img(templateObject_2$
|
|
3764
|
+
var StyledImageWrapper = newStyled.img(templateObject_2$1q || (templateObject_2$1q = __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) {
|
|
3758
3765
|
var width = _a.width;
|
|
3759
3766
|
return width;
|
|
3760
3767
|
}, function (_a) {
|
|
@@ -3767,7 +3774,7 @@ var StyledImageWrapper = newStyled.img(templateObject_2$1r || (templateObject_2$
|
|
|
3767
3774
|
var opacity = _a.opacity;
|
|
3768
3775
|
return opacity && "opacity: ".concat(opacity, ";");
|
|
3769
3776
|
});
|
|
3770
|
-
var templateObject_1$22, templateObject_2$
|
|
3777
|
+
var templateObject_1$22, templateObject_2$1q;
|
|
3771
3778
|
|
|
3772
3779
|
/* eslint-disable no-undef */
|
|
3773
3780
|
var cache = new Map();
|
|
@@ -3955,9 +3962,9 @@ var Image$3 = function (_a) {
|
|
|
3955
3962
|
var templateObject_1$21;
|
|
3956
3963
|
|
|
3957
3964
|
var LabelWrapper = newStyled.label(templateObject_1$20 || (templateObject_1$20 = __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"])));
|
|
3958
|
-
var SwitchWrapper = newStyled.div(templateObject_2$
|
|
3965
|
+
var SwitchWrapper = newStyled.div(templateObject_2$1p || (templateObject_2$1p = __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"])));
|
|
3959
3966
|
var InputWrapper$1 = newStyled.input(templateObject_3$17 || (templateObject_3$17 = __makeTemplateObject(["\n opacity: 0;\n position: absolute;\n\n &:checked + div {\n background: #882a2b;\n\n &:before {\n transform: translate(14.5px, -50%);\n }\n }\n"], ["\n opacity: 0;\n position: absolute;\n\n &:checked + div {\n background: #882a2b;\n\n &:before {\n transform: translate(14.5px, -50%);\n }\n }\n"])));
|
|
3960
|
-
var templateObject_1$20, templateObject_2$
|
|
3967
|
+
var templateObject_1$20, templateObject_2$1p, templateObject_3$17;
|
|
3961
3968
|
|
|
3962
3969
|
var ToggleComponent = function (_a) {
|
|
3963
3970
|
var onToggle = _a.onToggle, _b = _a.isChecked, isChecked = _b === void 0 ? false : _b;
|
|
@@ -4792,7 +4799,7 @@ function jsxs(type, props, key) {
|
|
|
4792
4799
|
// `variants` styles that are consistent through all themes.
|
|
4793
4800
|
var TAGS = {
|
|
4794
4801
|
hero1: newStyled.h1(templateObject_1$1$ || (templateObject_1$1$ = __makeTemplateObject([""], [""]))),
|
|
4795
|
-
hero2: newStyled.h2(templateObject_2$
|
|
4802
|
+
hero2: newStyled.h2(templateObject_2$1o || (templateObject_2$1o = __makeTemplateObject([""], [""]))),
|
|
4796
4803
|
hero3: newStyled.h3(templateObject_3$16 || (templateObject_3$16 = __makeTemplateObject([""], [""]))),
|
|
4797
4804
|
display1: newStyled.h1(templateObject_4$U || (templateObject_4$U = __makeTemplateObject([""], [""]))),
|
|
4798
4805
|
display2: newStyled.h2(templateObject_5$F || (templateObject_5$F = __makeTemplateObject([""], [""]))),
|
|
@@ -4927,10 +4934,10 @@ var DEFAULTS = {
|
|
|
4927
4934
|
size: 'regular',
|
|
4928
4935
|
},
|
|
4929
4936
|
};
|
|
4930
|
-
var templateObject_1$1$, templateObject_2$
|
|
4937
|
+
var templateObject_1$1$, templateObject_2$1o, templateObject_3$16, templateObject_4$U, templateObject_5$F, templateObject_6$A, templateObject_7$q, templateObject_8$k, templateObject_9$b, templateObject_10$a, templateObject_11$7, templateObject_12$4, templateObject_13$4, templateObject_14$2, templateObject_15$2, templateObject_16$2, templateObject_17$2, templateObject_18$2, templateObject_19$2, templateObject_20$1;
|
|
4931
4938
|
|
|
4932
4939
|
var Container$1f = newStyled.div(templateObject_1$1_ || (templateObject_1$1_ = __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"])));
|
|
4933
|
-
var Card$4 = newStyled.div(templateObject_2$
|
|
4940
|
+
var Card$4 = newStyled.div(templateObject_2$1n || (templateObject_2$1n = __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"])));
|
|
4934
4941
|
var Tag$2 = newStyled.div(templateObject_3$15 || (templateObject_3$15 = __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"])));
|
|
4935
4942
|
var Label$6 = newStyled.div(templateObject_4$T || (templateObject_4$T = __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"])));
|
|
4936
4943
|
var Check$1 = newStyled.div(templateObject_5$E || (templateObject_5$E = __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"])));
|
|
@@ -4959,27 +4966,27 @@ var PackCard$1 = function (_a) {
|
|
|
4959
4966
|
currency: currencyCode || 'USD',
|
|
4960
4967
|
}), ' ', "each", ')'] }), void 0)) : null] }, void 0)] }), void 0));
|
|
4961
4968
|
};
|
|
4962
|
-
var templateObject_1$1_, templateObject_2$
|
|
4969
|
+
var templateObject_1$1_, templateObject_2$1n, templateObject_3$15, templateObject_4$T, templateObject_5$E, templateObject_6$z;
|
|
4963
4970
|
|
|
4964
4971
|
var Container$1e = newStyled.div(templateObject_1$1Z || (templateObject_1$1Z = __makeTemplateObject(["\n height: 32px;\n display: flex;\n align-items: center;\n"], ["\n height: 32px;\n display: flex;\n align-items: center;\n"])));
|
|
4965
|
-
var DropContainer = newStyled.div(templateObject_2$
|
|
4972
|
+
var DropContainer = newStyled.div(templateObject_2$1m || (templateObject_2$1m = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
4966
4973
|
var DropList = function (_a) {
|
|
4967
4974
|
var dropTotal = _a.dropTotal, drops = _a.drops;
|
|
4968
4975
|
return (jsxRuntime.jsx(Container$1e, { children: __spreadArray([], new Array(dropTotal), true).map(function (_, index) {
|
|
4969
4976
|
return (jsxRuntime.jsx(DropContainer, __assign$1({ "data-testid": "star-container" }, { children: index < Math.floor(drops) ? (jsxRuntime.jsx(Icon.PDP.Drop, { width: 0.875, height: 0.875 }, void 0)) : (jsxRuntime.jsx(Icon.PDP.DropEmpty, { width: 0.875, height: 0.875 }, void 0)) }), index));
|
|
4970
4977
|
}) }, void 0));
|
|
4971
4978
|
};
|
|
4972
|
-
var templateObject_1$1Z, templateObject_2$
|
|
4979
|
+
var templateObject_1$1Z, templateObject_2$1m;
|
|
4973
4980
|
|
|
4974
4981
|
var DROPS_TOTAL = 5;
|
|
4975
4982
|
var Container$1d = newStyled.div(templateObject_1$1Y || (templateObject_1$1Y = __makeTemplateObject(["\n height: 32px;\n display: flex;\n"], ["\n height: 32px;\n display: flex;\n"])));
|
|
4976
|
-
var Title$b = newStyled.p(templateObject_2$
|
|
4983
|
+
var Title$b = newStyled.p(templateObject_2$1l || (templateObject_2$1l = __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"])));
|
|
4977
4984
|
var Description$3 = newStyled.p(templateObject_3$14 || (templateObject_3$14 = __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"])));
|
|
4978
4985
|
var AbsorbencyLevel = function (_a) {
|
|
4979
4986
|
var dropTotal = _a.dropTotal, drops = _a.drops, absorbencyTitle = _a.absorbencyTitle, absorbencyDescription = _a.absorbencyDescription;
|
|
4980
4987
|
return (jsxRuntime.jsxs(Container$1d, { children: [jsxRuntime.jsx(Title$b, { children: absorbencyTitle }, void 0), jsxRuntime.jsx(DropList, { dropTotal: dropTotal || DROPS_TOTAL, drops: drops }, void 0), jsxRuntime.jsx(Description$3, { children: absorbencyDescription }, void 0)] }, void 0));
|
|
4981
4988
|
};
|
|
4982
|
-
var templateObject_1$1Y, templateObject_2$
|
|
4989
|
+
var templateObject_1$1Y, templateObject_2$1l, templateObject_3$14;
|
|
4983
4990
|
|
|
4984
4991
|
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]=React$2.useState(k$1);return React$2.useEffect(()=>()=>e.dispose(),[e]),e}var x$1=typeof window!="undefined"?React$2.useLayoutEffect:React$2.useEffect;var yt={serverHandoffComplete:!1};function q$1(){let[e,t]=React$2.useState(yt.serverHandoffComplete);return React$2.useEffect(()=>{e!==!0&&t(!0);},[e]),React$2.useEffect(()=>{yt.serverHandoffComplete===!1&&(yt.serverHandoffComplete=!0);},[]),e}var or=0;function to(){return ++or}function A$1(){let e=q$1(),[t,r]=React$2.useState(e?to:null);return x$1(()=>{t===null&&r(to());},[t]),t!=null?""+t:void 0}function ke(e){let t=React$2.useRef(e);return React$2.useEffect(()=>{t.current=e;},[e]),t}function ee(e,t){let[r,o]=React$2.useState(e),n=ke(e);return x$1(()=>o(n.current),[n,o,...t]),r}function I(...e){let t=React$2.useRef(e);return React$2.useEffect(()=>{t.current=e;},[e]),React$2.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===React$2.Fragment&&Object.keys(l).length>0){if(!React$2.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(`
|
|
4985
4992
|
`),"","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(`
|
|
@@ -5242,8 +5249,8 @@ var isValidDate = function (value) {
|
|
|
5242
5249
|
};
|
|
5243
5250
|
|
|
5244
5251
|
var Bold = newStyled.span(templateObject_1$1V || (templateObject_1$1V = __makeTemplateObject(["\n font-weight: bold;\n"], ["\n font-weight: bold;\n"])));
|
|
5245
|
-
var FlexContainer$3 = newStyled.div(templateObject_2$
|
|
5246
|
-
var templateObject_1$1V, templateObject_2$
|
|
5252
|
+
var FlexContainer$3 = newStyled.div(templateObject_2$1k || (templateObject_2$1k = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n padding: 12px;\n background-color: white;\n border-radius: 8px;\n text-align: start;\n margin: 10px;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n padding: 12px;\n background-color: white;\n border-radius: 8px;\n text-align: start;\n margin: 10px;\n"])));
|
|
5253
|
+
var templateObject_1$1V, templateObject_2$1k;
|
|
5247
5254
|
|
|
5248
5255
|
var Container$1b = newStyled.div(templateObject_1$1U || (templateObject_1$1U = __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) {
|
|
5249
5256
|
var _b = _a.width, width = _b === void 0 ? '100%' : _b;
|
|
@@ -5252,11 +5259,11 @@ var Container$1b = newStyled.div(templateObject_1$1U || (templateObject_1$1U = _
|
|
|
5252
5259
|
var _b = _a.height, height = _b === void 0 ? '100%' : _b;
|
|
5253
5260
|
return height;
|
|
5254
5261
|
});
|
|
5255
|
-
var FlexCentered = newStyled.div(templateObject_2$
|
|
5262
|
+
var FlexCentered = newStyled.div(templateObject_2$1j || (templateObject_2$1j = __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"])));
|
|
5256
5263
|
var LeftSide = newStyled.div(templateObject_3$13 || (templateObject_3$13 = __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"])));
|
|
5257
5264
|
var RightSide = newStyled.div(templateObject_4$S || (templateObject_4$S = __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"])));
|
|
5258
5265
|
var FlexStart = newStyled.div(templateObject_5$D || (templateObject_5$D = __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"])));
|
|
5259
|
-
var templateObject_1$1U, templateObject_2$
|
|
5266
|
+
var templateObject_1$1U, templateObject_2$1j, templateObject_3$13, templateObject_4$S, templateObject_5$D;
|
|
5260
5267
|
|
|
5261
5268
|
var CouponCard = function (_a) {
|
|
5262
5269
|
var image = _a.image, title = _a.title, content = _a.content, couponCode = _a.couponCode, offerLink = _a.offerLink, width = _a.width, height = _a.height, _b = _a.btnText, btnText = _b === void 0 ? 'Redeem Offer' : _b, onClickRedeemOfferHandler = _a.onClickRedeemOfferHandler, onClickHandler = _a.onClickHandler;
|
|
@@ -5313,13 +5320,13 @@ var CancellationFlowAccordionContentPerPartner = {
|
|
|
5313
5320
|
};
|
|
5314
5321
|
|
|
5315
5322
|
var ErrorText = newStyled.h3(templateObject_1$1T || (templateObject_1$1T = __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; });
|
|
5316
|
-
var ErrorContainer = newStyled.div(templateObject_2$
|
|
5323
|
+
var ErrorContainer = newStyled.div(templateObject_2$1i || (templateObject_2$1i = __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"])));
|
|
5317
5324
|
var Error$1 = function (_a) {
|
|
5318
5325
|
var error = _a.error;
|
|
5319
5326
|
var theme = useTheme();
|
|
5320
5327
|
return (jsxRuntime.jsxs(ErrorContainer, { children: [jsxRuntime.jsx(Icon.Actions.LightExclamation, { fill: theme.colors.semantic.urgent.color, width: 0.875, height: 0.875 }, void 0), jsxRuntime.jsx(ErrorText, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: error }), void 0)] }, void 0));
|
|
5321
5328
|
};
|
|
5322
|
-
var templateObject_1$1T, templateObject_2$
|
|
5329
|
+
var templateObject_1$1T, templateObject_2$1i;
|
|
5323
5330
|
|
|
5324
5331
|
var BaseSelectButton = function (_a) {
|
|
5325
5332
|
var children = _a.children, as = _a.as;
|
|
@@ -5583,7 +5590,7 @@ var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (pr
|
|
|
5583
5590
|
? "\n svg {\n path {\n fill: var(--colors-shades-black-color);\n }\n }"
|
|
5584
5591
|
: '', "\n ").concat(props.text === 'White' ? "border: 0.27px var(--colors-shades-300-color) solid;" : ''),
|
|
5585
5592
|
]; });
|
|
5586
|
-
var Input$5 = newStyled.input(templateObject_2$
|
|
5593
|
+
var Input$5 = newStyled.input(templateObject_2$1h || (templateObject_2$1h = __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) {
|
|
5587
5594
|
var disabled = _a.disabled;
|
|
5588
5595
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
5589
5596
|
});
|
|
@@ -5599,7 +5606,7 @@ var Checkbox = function (_a) {
|
|
|
5599
5606
|
};
|
|
5600
5607
|
return (jsxRuntime.jsxs(Container$1a, { children: [jsxRuntime.jsx(Input$5, { type: "checkbox", checked: checked, disabled: disabled, onChange: handleChange, id: id }, void 0), jsxRuntime.jsx(CustomCheckbox, __assign$1({ theme: theme, size: size, disabled: disabled, isChecked: checked, "data-testid": "checkbox", variant: variant, backgroundColor: backgroundColor, text: text }, { children: checked && jsxRuntime.jsx(Icon.Actions.Check, { fill: "#fff" }, void 0) }), void 0), jsxRuntime.jsx(Label$5, __assign$1({ "data-testid": "checkbox-text", size: size, variant: checked ? 'demi' : 'regular', htmlFor: id, disabled: disabled }, { children: text }), void 0)] }, void 0));
|
|
5601
5608
|
};
|
|
5602
|
-
var templateObject_1$1Q, templateObject_2$
|
|
5609
|
+
var templateObject_1$1Q, templateObject_2$1h;
|
|
5603
5610
|
|
|
5604
5611
|
var CustomOption = newStyled.li(function (_a) {
|
|
5605
5612
|
var theme = _a.theme, selected = _a.selected, active = _a.active, hasImage = _a.hasImage;
|
|
@@ -5649,7 +5656,7 @@ var BaseDropdown$1 = Object.assign(BaseDropdown, {
|
|
|
5649
5656
|
});
|
|
5650
5657
|
|
|
5651
5658
|
var Container$19 = newStyled.div(templateObject_1$1P || (templateObject_1$1P = __makeTemplateObject([""], [""])));
|
|
5652
|
-
var RequiredPlaceholder = newStyled.p(templateObject_2$
|
|
5659
|
+
var RequiredPlaceholder = newStyled.p(templateObject_2$1g || (templateObject_2$1g = __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"])));
|
|
5653
5660
|
var SelectedOption = newStyled.span(templateObject_3$12 || (templateObject_3$12 = __makeTemplateObject(["\n font-weight: ", ";\n"], ["\n font-weight: ", ";\n"])), function (_a) {
|
|
5654
5661
|
var fontWeight = _a.fontWeight;
|
|
5655
5662
|
return fontWeight || '';
|
|
@@ -5685,7 +5692,7 @@ function SimpleDropdown(_a) {
|
|
|
5685
5692
|
var DropdownContainer = showRequiredPlaceholder ? Container$19 : React$2.Fragment;
|
|
5686
5693
|
return (jsxRuntime.jsxs(DropdownContainer, { children: [jsxRuntime.jsxs(BaseDropdown$1, __assign$1({ value: selectedValue, onChange: onChangeHandler, disabled: disabled, wide: wide }, { children: [jsxRuntime.jsxs(BaseDropdown$1.Button, __assign$1({ label: label, OpenIcon: Icon.Arrows.ChevronDown, CloseIcon: Icon.Arrows.ChevronUp, wide: wide, isSortOrFilter: sort, testId: testId }, { children: [!!(selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.imageURL) && (jsxRuntime.jsx("img", { src: selectedValue.imageURL, alt: selectedValue.label, style: { paddingRight: 8 } }, void 0)), selectedOptionWeight && disabled ? (jsxRuntime.jsx(SelectedOption, __assign$1({ fontWeight: selectedOptionWeight }, { children: selectedOptionLabel }), void 0)) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: selectedOptionLabel }, void 0))] }), void 0), jsxRuntime.jsx(BaseDropdown$1.Options, { children: options.map(function (item) { return (jsxRuntime.jsxs(BaseDropdown$1.Option, __assign$1({ value: item, disabled: item.disabled, hasImage: !!item.imageURL }, { children: [!!item.imageURL && (jsxRuntime.jsx("img", { src: item.imageURL, alt: item.label, style: { paddingRight: 8 } }, void 0)), item.label] }), item.key)); }) }, void 0)] }), void 0), !!required && jsxRuntime.jsx(Error$1, { error: required }, void 0)] }, void 0));
|
|
5687
5694
|
}
|
|
5688
|
-
var templateObject_1$1P, templateObject_2$
|
|
5695
|
+
var templateObject_1$1P, templateObject_2$1g, templateObject_3$12;
|
|
5689
5696
|
|
|
5690
5697
|
/* base styles & size variants */
|
|
5691
5698
|
var CustomRadioStyles$2 = {
|
|
@@ -5752,7 +5759,7 @@ var ContainerStyles$2 = {
|
|
|
5752
5759
|
|
|
5753
5760
|
var Wrapper$7 = newStyled.div(templateObject_1$1O || (templateObject_1$1O = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
5754
5761
|
var Container$18 = newStyled.div(__assign$1({}, ContainerStyles$2.baseStyles), function (props) { return [ContainerStyles$2[props.size](props.theme)]; });
|
|
5755
|
-
var Input$4 = newStyled.input(templateObject_2$
|
|
5762
|
+
var Input$4 = newStyled.input(templateObject_2$1f || (templateObject_2$1f = __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) {
|
|
5756
5763
|
var disabled = _a.disabled;
|
|
5757
5764
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
5758
5765
|
});
|
|
@@ -5783,7 +5790,7 @@ var RadioInput = function (_a) {
|
|
|
5783
5790
|
};
|
|
5784
5791
|
return (jsxRuntime.jsxs(Wrapper$7, { children: [jsxRuntime.jsxs(Container$18, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsxRuntime.jsx(Input$4, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled, style: style }, void 0), jsxRuntime.jsx(CustomRadio$2, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), useV2Style ? (jsxRuntime.jsx(StyledLabelV2, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled, style: labelStyle }, { children: label }), void 0)) : (jsxRuntime.jsx(StyledLabel$3, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0))] }, void 0));
|
|
5785
5792
|
};
|
|
5786
|
-
var templateObject_1$1O, templateObject_2$
|
|
5793
|
+
var templateObject_1$1O, templateObject_2$1f, templateObject_3$11, templateObject_4$R;
|
|
5787
5794
|
|
|
5788
5795
|
var useOnClickOutside = function (ref, handler) {
|
|
5789
5796
|
React$2.useEffect(function () {
|
|
@@ -5886,7 +5893,7 @@ var Wrapper$6 = newStyled.div(templateObject_1$1N || (templateObject_1$1N = __ma
|
|
|
5886
5893
|
var disableHover = _a.disableHover;
|
|
5887
5894
|
return (disableHover ? 0 : 1);
|
|
5888
5895
|
});
|
|
5889
|
-
var TooltipContainer = newStyled.div(templateObject_2$
|
|
5896
|
+
var TooltipContainer = newStyled.div(templateObject_2$1e || (templateObject_2$1e = __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) {
|
|
5890
5897
|
var position = _a.position;
|
|
5891
5898
|
return getContainerFlexDirection(position);
|
|
5892
5899
|
}, function (_a) {
|
|
@@ -5941,7 +5948,7 @@ var CloseToolTip = newStyled.button(templateObject_8$j || (templateObject_8$j =
|
|
|
5941
5948
|
var _b = _a.right, right = _b === void 0 ? '.3rem' : _b;
|
|
5942
5949
|
return right;
|
|
5943
5950
|
});
|
|
5944
|
-
var templateObject_1$1N, templateObject_2$
|
|
5951
|
+
var templateObject_1$1N, templateObject_2$1e, templateObject_3$10, templateObject_4$Q, templateObject_5$C, templateObject_6$y, templateObject_7$p, templateObject_8$j;
|
|
5945
5952
|
|
|
5946
5953
|
var Tooltip = function (_a) {
|
|
5947
5954
|
var _b;
|
|
@@ -5985,7 +5992,7 @@ var benefitsColorMapper = function (_a) {
|
|
|
5985
5992
|
};
|
|
5986
5993
|
|
|
5987
5994
|
var FlexContainer$2 = newStyled.div(templateObject_1$1M || (templateObject_1$1M = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5988
|
-
var ContainerBase$2 = newStyled.div(templateObject_2$
|
|
5995
|
+
var ContainerBase$2 = newStyled.div(templateObject_2$1d || (templateObject_2$1d = __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) {
|
|
5989
5996
|
var selected = _a.selected, theme = _a.theme;
|
|
5990
5997
|
return selected
|
|
5991
5998
|
? "2px solid ".concat(theme.colors.pallete.primary.color)
|
|
@@ -6022,7 +6029,7 @@ var StyledPrice$2 = newStyled(PriceLabelV2$1)(templateObject_12$3 || (templateOb
|
|
|
6022
6029
|
return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
|
|
6023
6030
|
});
|
|
6024
6031
|
var Container$17 = newStyled.div(templateObject_13$3 || (templateObject_13$3 = __makeTemplateObject([""], [""])));
|
|
6025
|
-
var templateObject_1$1M, templateObject_2$
|
|
6032
|
+
var templateObject_1$1M, templateObject_2$1d, templateObject_3$$, templateObject_4$P, templateObject_5$B, templateObject_6$x, templateObject_7$o, templateObject_8$i, templateObject_9$a, templateObject_10$9, templateObject_11$6, templateObject_12$3, templateObject_13$3;
|
|
6026
6033
|
|
|
6027
6034
|
var radioIds$2 = {
|
|
6028
6035
|
oneTime: {
|
|
@@ -6082,7 +6089,7 @@ var FlexContainer$1 = newStyled.div(templateObject_1$1L || (templateObject_1$1L
|
|
|
6082
6089
|
return theme.name === 'TheSpaDr' &&
|
|
6083
6090
|
"\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 ";
|
|
6084
6091
|
});
|
|
6085
|
-
var DiscountTag$1 = newStyled.div(templateObject_2$
|
|
6092
|
+
var DiscountTag$1 = newStyled.div(templateObject_2$1c || (templateObject_2$1c = __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) {
|
|
6086
6093
|
var theme = _a.theme, isSelected = _a.isSelected;
|
|
6087
6094
|
return isSelected
|
|
6088
6095
|
? theme.component.autoship.discountTag.backgroundColor
|
|
@@ -6135,7 +6142,7 @@ var TooltipWrapper = newStyled.div(templateObject_13$2 || (templateObject_13$2 =
|
|
|
6135
6142
|
var theme = _a.theme;
|
|
6136
6143
|
return theme.component.autoship.tooltip.margin;
|
|
6137
6144
|
});
|
|
6138
|
-
var templateObject_1$1L, templateObject_2$
|
|
6145
|
+
var templateObject_1$1L, templateObject_2$1c, templateObject_3$_, templateObject_4$O, templateObject_5$A, templateObject_6$w, templateObject_7$n, templateObject_8$h, templateObject_9$9, templateObject_10$8, templateObject_11$5, templateObject_12$2, templateObject_13$2;
|
|
6139
6146
|
|
|
6140
6147
|
var radioIds$1 = {
|
|
6141
6148
|
oneTime: {
|
|
@@ -6214,12 +6221,12 @@ var componentSizeMapper = (_a$2 = {},
|
|
|
6214
6221
|
_a$2);
|
|
6215
6222
|
|
|
6216
6223
|
var CustomerDetails = newStyled.div(templateObject_1$1K || (templateObject_1$1K = __makeTemplateObject([""], [""])));
|
|
6217
|
-
var CustomerInfo = newStyled.div(templateObject_2$
|
|
6224
|
+
var CustomerInfo = newStyled.div(templateObject_2$1b || (templateObject_2$1b = __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"])));
|
|
6218
6225
|
var Name = newStyled.h4(templateObject_3$Z || (templateObject_3$Z = __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"])));
|
|
6219
6226
|
var StarIconContainer = newStyled.div(templateObject_4$N || (templateObject_4$N = __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"])));
|
|
6220
6227
|
var Description$2 = newStyled.p(templateObject_5$z || (templateObject_5$z = __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"])));
|
|
6221
6228
|
var ReviewDays = newStyled.span(templateObject_6$v || (templateObject_6$v = __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"])));
|
|
6222
|
-
var templateObject_1$1K, templateObject_2$
|
|
6229
|
+
var templateObject_1$1K, templateObject_2$1b, templateObject_3$Z, templateObject_4$N, templateObject_5$z, templateObject_6$v;
|
|
6223
6230
|
|
|
6224
6231
|
var NameWithStars = function (_a) {
|
|
6225
6232
|
var name = _a.name, size = _a.size;
|
|
@@ -6238,7 +6245,7 @@ var ResultFeedback = function (_a) {
|
|
|
6238
6245
|
};
|
|
6239
6246
|
|
|
6240
6247
|
var Container$15 = newStyled.div(templateObject_1$1J || (templateObject_1$1J = __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; });
|
|
6241
|
-
var ImageContainer$7 = newStyled.div(templateObject_2$
|
|
6248
|
+
var ImageContainer$7 = newStyled.div(templateObject_2$1a || (templateObject_2$1a = __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"])));
|
|
6242
6249
|
var ImageCard = newStyled.div(templateObject_3$Y || (templateObject_3$Y = __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; });
|
|
6243
6250
|
var UserInfoText = newStyled.div(templateObject_4$M || (templateObject_4$M = __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) {
|
|
6244
6251
|
var theme = _a.theme;
|
|
@@ -6250,7 +6257,7 @@ var UserInfoText = newStyled.div(templateObject_4$M || (templateObject_4$M = __m
|
|
|
6250
6257
|
var theme = _a.theme, size = _a.size;
|
|
6251
6258
|
return theme.component.beforeAfter.size[componentSizeMapper[size]].userInfoText.mobile.fontSize;
|
|
6252
6259
|
});
|
|
6253
|
-
var templateObject_1$1J, templateObject_2$
|
|
6260
|
+
var templateObject_1$1J, templateObject_2$1a, templateObject_3$Y, templateObject_4$M;
|
|
6254
6261
|
|
|
6255
6262
|
/* base styles & size variants */
|
|
6256
6263
|
var getStylesBySize$d = function (size, theme) {
|
|
@@ -6373,13 +6380,13 @@ var Card$3 = Object.assign(Card$2, {
|
|
|
6373
6380
|
var templateObject_1$1G;
|
|
6374
6381
|
|
|
6375
6382
|
var StyledWrapper = newStyled.div(templateObject_1$1F || (templateObject_1$1F = __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"])));
|
|
6376
|
-
var StyledContainer = newStyled.div(templateObject_2$
|
|
6383
|
+
var StyledContainer = newStyled.div(templateObject_2$19 || (templateObject_2$19 = __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"])));
|
|
6377
6384
|
var TextLabel = newStyled(Text$7)(templateObject_3$X || (templateObject_3$X = __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) {
|
|
6378
6385
|
var color = _a.color;
|
|
6379
6386
|
return color;
|
|
6380
6387
|
});
|
|
6381
6388
|
var YouAreSaving = newStyled(Text$7)(templateObject_4$L || (templateObject_4$L = __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"])));
|
|
6382
|
-
var templateObject_1$1F, templateObject_2$
|
|
6389
|
+
var templateObject_1$1F, templateObject_2$19, templateObject_3$X, templateObject_4$L;
|
|
6383
6390
|
|
|
6384
6391
|
var Minimalistic = function (_a) {
|
|
6385
6392
|
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;
|
|
@@ -6388,7 +6395,7 @@ var Minimalistic = function (_a) {
|
|
|
6388
6395
|
};
|
|
6389
6396
|
|
|
6390
6397
|
var Container$13 = newStyled.div(templateObject_1$1E || (templateObject_1$1E = __makeTemplateObject(["\n padding: 0.625rem 1.5rem;\n"], ["\n padding: 0.625rem 1.5rem;\n"])));
|
|
6391
|
-
var Title$9 = newStyled.h1(templateObject_2$
|
|
6398
|
+
var Title$9 = newStyled.h1(templateObject_2$18 || (templateObject_2$18 = __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; });
|
|
6392
6399
|
var Details$1 = newStyled.span(templateObject_3$W || (templateObject_3$W = __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; });
|
|
6393
6400
|
var PriceContainer$2 = newStyled.span(templateObject_4$K || (templateObject_4$K = __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"])));
|
|
6394
6401
|
var Simple = function (_a) {
|
|
@@ -6396,7 +6403,7 @@ var Simple = function (_a) {
|
|
|
6396
6403
|
var theme = useTheme();
|
|
6397
6404
|
return (jsxRuntime.jsx(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxRuntime.jsxs(Container$13, { children: [jsxRuntime.jsx(Title$9, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Title" }, { children: title }), void 0), jsxRuntime.jsxs(Details$1, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Details" }, { children: [anyQtyForText, jsxRuntime.jsx(PriceContainer$2, __assign$1({ "data-testid": "Price" }, { children: jsxRuntime.jsx(PriceLabel$1, { finalPrice: price, color: "var(--colors-pallete-red-color)", size: exports.ComponentSize.Small }, void 0) }), void 0), "+ ", freeShippingText] }), void 0)] }, void 0) }), void 0));
|
|
6398
6405
|
};
|
|
6399
|
-
var templateObject_1$1E, templateObject_2$
|
|
6406
|
+
var templateObject_1$1E, templateObject_2$18, templateObject_3$W, templateObject_4$K;
|
|
6400
6407
|
|
|
6401
6408
|
var Bundle = {
|
|
6402
6409
|
Minimalistic: Minimalistic,
|
|
@@ -6407,7 +6414,7 @@ var Container$12 = newStyled.div(templateObject_1$1D || (templateObject_1$1D = _
|
|
|
6407
6414
|
var displayBNPL = _a.displayBNPL;
|
|
6408
6415
|
return (displayBNPL ? 'flex' : 'none');
|
|
6409
6416
|
});
|
|
6410
|
-
var TextContainer$1 = newStyled.div(templateObject_2$
|
|
6417
|
+
var TextContainer$1 = newStyled.div(templateObject_2$17 || (templateObject_2$17 = __makeTemplateObject(["\n font-size: 14px;\n margin: 0;\n line-height: 24px;\n font-weight: 400;\n color: #292929;\n"], ["\n font-size: 14px;\n margin: 0;\n line-height: 24px;\n font-weight: 400;\n color: #292929;\n"])));
|
|
6411
6418
|
var IconWrapper$1 = newStyled.div(templateObject_3$V || (templateObject_3$V = __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"])));
|
|
6412
6419
|
var BuyNowPayLater = function (_a) {
|
|
6413
6420
|
var _b;
|
|
@@ -6420,7 +6427,7 @@ var BuyNowPayLater = function (_a) {
|
|
|
6420
6427
|
}
|
|
6421
6428
|
return (jsxRuntime.jsx(Container$12, __assign$1({ displayBNPL: displayBNPL }, { children: jsxRuntime.jsxs(TextContainer$1, __assign$1({ style: { fontSize: fontSize }, "data-testid": "mainText" }, { children: ["Or ".concat(installments, " payments of "), jsxRuntime.jsx(Text$7, __assign$1({ variant: "heading6", style: { display: 'inline', fontSize: fontSize }, testId: "InstallmentPriceId" }, { children: installmentPrice }), void 0), showLogo ? ' with' : '', showLogo && (jsxRuntime.jsx(IconWrapper$1, { children: jsxRuntime.jsx(IconComponent, { width: 3.2, height: 2, fill: iconColor, style: { top: '-3px', position: 'relative' } }, void 0) }, void 0))] }), void 0) }), void 0));
|
|
6422
6429
|
};
|
|
6423
|
-
var templateObject_1$1D, templateObject_2$
|
|
6430
|
+
var templateObject_1$1D, templateObject_2$17, templateObject_3$V;
|
|
6424
6431
|
|
|
6425
6432
|
var Text$6 = newStyled.span(templateObject_1$1C || (templateObject_1$1C = __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; });
|
|
6426
6433
|
var Title$8 = function (_a) {
|
|
@@ -6480,7 +6487,7 @@ var CartProductItem = {
|
|
|
6480
6487
|
};
|
|
6481
6488
|
|
|
6482
6489
|
var Container$10 = newStyled.div(templateObject_1$1x || (templateObject_1$1x = __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"])));
|
|
6483
|
-
var MobileContainer = newStyled(Container$10)(templateObject_2$
|
|
6490
|
+
var MobileContainer = newStyled(Container$10)(templateObject_2$16 || (templateObject_2$16 = __makeTemplateObject(["\n padding: 2px 2px;\n gap: 3px;\n"], ["\n padding: 2px 2px;\n gap: 3px;\n"])));
|
|
6484
6491
|
var DollarPart = newStyled.span(templateObject_3$U || (templateObject_3$U = __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"])));
|
|
6485
6492
|
var ClubMembersText = newStyled.span(templateObject_4$J || (templateObject_4$J = __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"])));
|
|
6486
6493
|
var MobileDollarPart = newStyled(DollarPart)(templateObject_5$y || (templateObject_5$y = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
@@ -6492,7 +6499,7 @@ var ClubPriceLabel = function (_a) {
|
|
|
6492
6499
|
var isMobile = useWindowDimensions().isMobile;
|
|
6493
6500
|
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: isMobile ? (jsxRuntime.jsxs(MobileContainer, { children: [jsxRuntime.jsx(MobileDollarPart, { children: clubPrice }, void 0), jsxRuntime.jsx(MobileClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) : (jsxRuntime.jsxs(Container$10, { children: [jsxRuntime.jsx(DesktopDollarPart, { children: clubPrice }, void 0), jsxRuntime.jsx(DesktopClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) }, void 0));
|
|
6494
6501
|
};
|
|
6495
|
-
var templateObject_1$1x, templateObject_2$
|
|
6502
|
+
var templateObject_1$1x, templateObject_2$16, templateObject_3$U, templateObject_4$J, templateObject_5$y, templateObject_6$u, templateObject_7$m, templateObject_8$g;
|
|
6496
6503
|
|
|
6497
6504
|
var Spacing = function (_a) {
|
|
6498
6505
|
var size = _a.size, _b = _a.type, type = _b === void 0 ? 'block' : _b, children = _a.children, styleProp = _a.style;
|
|
@@ -6501,7 +6508,7 @@ var Spacing = function (_a) {
|
|
|
6501
6508
|
};
|
|
6502
6509
|
|
|
6503
6510
|
var Container$$ = newStyled('div')(templateObject_1$1w || (templateObject_1$1w = __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"])));
|
|
6504
|
-
var Content$2 = newStyled('div')(templateObject_2$
|
|
6511
|
+
var Content$2 = newStyled('div')(templateObject_2$15 || (templateObject_2$15 = __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"])));
|
|
6505
6512
|
var BarContainer$1 = newStyled('div')(templateObject_3$T || (templateObject_3$T = __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"])));
|
|
6506
6513
|
var Bar$2 = newStyled('div')(templateObject_4$I || (templateObject_4$I = __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) {
|
|
6507
6514
|
var index = _a.index;
|
|
@@ -6514,10 +6521,10 @@ var StrengthBars = function (_a) {
|
|
|
6514
6521
|
var _b = _a.barsFilled, barsFilled = _b === void 0 ? 0 : _b, supportText = _a.supportText;
|
|
6515
6522
|
return (jsxRuntime.jsxs(Container$$, __assign$1({ "data-testid": "strength-bar" }, { children: [jsxRuntime.jsx(BarContainer$1, { children: [1, 2, 3, 4, 5].map(function (bar, index) { return (jsxRuntime.jsx(Bar$2, { index: index, isFilled: bar <= barsFilled }, bar)); }) }, void 0), jsxRuntime.jsx(Content$2, { children: supportText }, void 0)] }), void 0));
|
|
6516
6523
|
};
|
|
6517
|
-
var templateObject_1$1w, templateObject_2$
|
|
6524
|
+
var templateObject_1$1w, templateObject_2$15, templateObject_3$T, templateObject_4$I;
|
|
6518
6525
|
|
|
6519
6526
|
var RegularPriceTagSpan = newStyled.span(templateObject_1$1v || (templateObject_1$1v = __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"])));
|
|
6520
|
-
var ClubPriceTagSpan = newStyled.span(templateObject_2$
|
|
6527
|
+
var ClubPriceTagSpan = newStyled.span(templateObject_2$14 || (templateObject_2$14 = __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"])));
|
|
6521
6528
|
var PriceContainer$1 = newStyled.span(templateObject_3$S || (templateObject_3$S = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
6522
6529
|
var PriceContainerV2 = newStyled.span(templateObject_4$H || (templateObject_4$H = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
6523
6530
|
var PriceWithTagContainer = newStyled.span(templateObject_5$x || (templateObject_5$x = __makeTemplateObject(["\n display: flex;\n gap: 8px;\n"], ["\n display: flex;\n gap: 8px;\n"])));
|
|
@@ -6573,7 +6580,7 @@ var PriceLabelV4 = function (_a) {
|
|
|
6573
6580
|
? finalPriceArray[0]
|
|
6574
6581
|
: (_b = "".concat(productFinalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1], "."] }), void 0), jsxRuntime.jsx(Price, __assign$1({ finalPriceStyledSmall: true, style: { marginTop: '-6px', color: '#c64844' } }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }, void 0), jsxRuntime.jsx(ClubPriceTag, {}, void 0)] }, void 0)] }, void 0)), discount && (jsxRuntime.jsx(TagContainer, __assign$1({ size: size }, { children: jsxRuntime.jsx(DiscountTag$2, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
|
|
6575
6582
|
};
|
|
6576
|
-
var templateObject_1$1v, templateObject_2$
|
|
6583
|
+
var templateObject_1$1v, templateObject_2$14, templateObject_3$S, templateObject_4$H, templateObject_5$x;
|
|
6577
6584
|
|
|
6578
6585
|
var Container$_ = newStyled.div(templateObject_1$1u || (templateObject_1$1u = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
6579
6586
|
var templateObject_1$1u;
|
|
@@ -6690,7 +6697,7 @@ var ImageContainer$6 = newStyled.div(function (_a) {
|
|
|
6690
6697
|
});
|
|
6691
6698
|
});
|
|
6692
6699
|
var ImageHoverContainer$3 = newStyled.img(templateObject_1$1q || (templateObject_1$1q = __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"])));
|
|
6693
|
-
var Container$Y = newStyled.a(templateObject_2$
|
|
6700
|
+
var Container$Y = newStyled.a(templateObject_2$13 || (templateObject_2$13 = __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"])));
|
|
6694
6701
|
var ProdCardContainer$4 = newStyled.div(templateObject_3$R || (templateObject_3$R = __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"])));
|
|
6695
6702
|
var Title$7 = newStyled.p(templateObject_4$G || (templateObject_4$G = __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; });
|
|
6696
6703
|
var getStylesBySize$c = function (size) {
|
|
@@ -6744,7 +6751,7 @@ var ProductItemMobile = function (_a) {
|
|
|
6744
6751
|
} : _f, _g = _a.hasStrength, hasStrength = _g === void 0 ? {
|
|
6745
6752
|
strength: -1,
|
|
6746
6753
|
description: '',
|
|
6747
|
-
} : _g, _h = _a.clubPrice, clubPrice = _h === void 0 ? '' : _h, _j = _a.showClubPriceLabel, showClubPriceLabel = _j === void 0 ? false : _j, isRatingLoading = _a.isRatingLoading, _k = _a.version, version = _k === void 0 ? 1 : _k, _l = _a.showDiscountPercentageTag, showDiscountPercentageTag = _l === void 0 ? false : _l, discountTagLoading = _a.discountTagLoading, discountTag = _a.discountTag, _m = _a.isOnViewport, isOnViewport = _m === void 0 ? false : _m;
|
|
6754
|
+
} : _g, _h = _a.clubPrice, clubPrice = _h === void 0 ? '' : _h, _j = _a.showClubPriceLabel, showClubPriceLabel = _j === void 0 ? false : _j, isRatingLoading = _a.isRatingLoading, _k = _a.version, version = _k === void 0 ? 1 : _k, _l = _a.showDiscountPercentageTag, showDiscountPercentageTag = _l === void 0 ? false : _l, discountTagLoading = _a.discountTagLoading, discountTag = _a.discountTag, _m = _a.isOnViewport, isOnViewport = _m === void 0 ? false : _m, clubOffer = _a.clubOffer;
|
|
6748
6755
|
var theme = useTheme();
|
|
6749
6756
|
var styles = getStylesBySize$c(size);
|
|
6750
6757
|
var isMobile = useWindowDimensions().isMobile;
|
|
@@ -6756,8 +6763,10 @@ var ProductItemMobile = function (_a) {
|
|
|
6756
6763
|
_a[exports.ComponentSize.Small] = 2,
|
|
6757
6764
|
_a)[size];
|
|
6758
6765
|
}, [size]);
|
|
6759
|
-
var PriceLabelDisplay = function () {
|
|
6760
|
-
|
|
6766
|
+
var PriceLabelDisplay = function (labelVersion) {
|
|
6767
|
+
var _a, _b;
|
|
6768
|
+
if (labelVersion === void 0) { labelVersion = version; }
|
|
6769
|
+
switch (labelVersion) {
|
|
6761
6770
|
case 4:
|
|
6762
6771
|
return priceDisplayType === 'styled' ? (jsx(PriceLabelV4, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, finalPriceStyled: false, color: price.color, size: exports.ComponentSize.Medium, testId: "volume-discount-v4", clubStyle: showClubPriceLabel, clubPrice: clubPrice, styledPrice: true, finalPriceStyle: showClubPriceLabel
|
|
6763
6772
|
? !isMobile
|
|
@@ -6768,6 +6777,8 @@ var ProductItemMobile = function (_a) {
|
|
|
6768
6777
|
? { fontSize: '16px', fontWeight: 700, color: '#C64844' }
|
|
6769
6778
|
: { fontSize: '12px', fontWeight: 700, color: '#C64844' }
|
|
6770
6779
|
: undefined }, void 0));
|
|
6780
|
+
case 5:
|
|
6781
|
+
return (jsx(ClubPriceMemberLabel, { isClub: true, isPDP: true, finalPrice: (_a = clubOffer === null || clubOffer === void 0 ? void 0 : clubOffer.price) === null || _a === void 0 ? void 0 : _a.finalPrice, originalPrice: (_b = clubOffer === null || clubOffer === void 0 ? void 0 : clubOffer.price) === null || _b === void 0 ? void 0 : _b.originalPrice, finalPriceStyled: false, color: price.color, size: exports.ComponentSize.Medium, testId: "volume-discount-v4", clubStyle: showClubPriceLabel, icon: clubOffer === null || clubOffer === void 0 ? void 0 : clubOffer.clubOfferIcon, isCollections: true }, void 0));
|
|
6771
6782
|
default:
|
|
6772
6783
|
return priceDisplayType === 'styled' ? (jsx(PriceLabelV2$1, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, finalPriceStyled: false, color: price.color, size: exports.ComponentSize.Large, testId: "volume-discount" }, void 0)) : (jsx(PriceLabel$1, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, finalPriceStyled: false, color: price.color, size: exports.ComponentSize.Medium, testId: "volume-discount", clubStyle: showClubPriceLabel, finalPriceStyle: showClubPriceLabel
|
|
6773
6784
|
? !isMobile
|
|
@@ -6783,11 +6794,11 @@ var ProductItemMobile = function (_a) {
|
|
|
6783
6794
|
return jsx(Fragment, {}, void 0);
|
|
6784
6795
|
return (jsx(Rating, { size: size === exports.ComponentSize.Large ? exports.ComponentSize.Small : exports.ComponentSize.XSmall, rating: rating.rating, reviews: rating.reviews, reviewsText: "", wrapWithParenthesis: true }, void 0));
|
|
6785
6796
|
};
|
|
6786
|
-
return (jsxs(ProdCardContainer$4, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$Y, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', className: "picContainer", onClick: onClick }, { children: [!!topTag || !!bottomTag ? (jsxs(ImageContainer$6, __assign$1({ width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height, "data-testid": "tags-image-container" }, { children: [jsx(Image$3, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, width: "100%", height: "100%", loading: isOnViewport ? 'eager' : 'lazy', decoding: isOnViewport ? 'sync' : 'async' }, void 0), jsx(TopTagContainer$8, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: topTag }), void 0), jsx(BottomTagContainer$8, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: bottomTag }), void 0)] }), void 0)) : (jsx(Image$3, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height, loading: isOnViewport ? 'eager' : 'lazy', decoding: isOnViewport ? 'sync' : 'async' }, void 0)), imageHover ? (jsx(ImageHoverContainer$3, { className: "hover__image", src: imageHover.src, srcSet: getSrcSet(imageHover.src, 180, 360, 720, 960), loading: "lazy", decoding: "async", alt: imageHover.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)) : null] }), void 0), colorPicker.display && colorPicker.position === 'top' && (jsxs(Fragment, { children: [jsx(Spacing, { size: space }, void 0), colorPicker.component] }, void 0)), jsxs(Container$Y, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', onClick: onClick, className: "textContainer", style: { alignItems: showClubPriceLabel ? 'flex-start' : 'center' } }, { children: [jsx(Spacing, { size: space }, void 0), jsx(Title$7, __assign$1({ theme: theme, align: showClubPriceLabel ? 'left' : alignName }, { children: title }), void 0), jsx(Spacing, { size: space }, void 0), hasStrength && hasStrength.strength !== -1 && (jsxs(Fragment, { children: [jsx(StrengthBars, { barsFilled: hasStrength.strength, supportText: hasStrength.description }, void 0), jsx(Spacing, { size: 10 }, void 0)] }, void 0)), priceAtBottom ? (jsxs(Fragment, { children: [jsx(RatingDisplay, {}, void 0), jsx(Spacing, { size: space }, void 0),
|
|
6797
|
+
return (jsxs(ProdCardContainer$4, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$Y, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', className: "picContainer", onClick: onClick }, { children: [!!topTag || !!bottomTag ? (jsxs(ImageContainer$6, __assign$1({ width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height, "data-testid": "tags-image-container" }, { children: [jsx(Image$3, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, width: "100%", height: "100%", loading: isOnViewport ? 'eager' : 'lazy', decoding: isOnViewport ? 'sync' : 'async' }, void 0), jsx(TopTagContainer$8, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: topTag }), void 0), jsx(BottomTagContainer$8, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: bottomTag }), void 0)] }), void 0)) : (jsx(Image$3, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height, loading: isOnViewport ? 'eager' : 'lazy', decoding: isOnViewport ? 'sync' : 'async' }, void 0)), imageHover ? (jsx(ImageHoverContainer$3, { className: "hover__image", src: imageHover.src, srcSet: getSrcSet(imageHover.src, 180, 360, 720, 960), loading: "lazy", decoding: "async", alt: imageHover.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)) : null] }), void 0), colorPicker.display && colorPicker.position === 'top' && (jsxs(Fragment, { children: [jsx(Spacing, { size: space }, void 0), colorPicker.component] }, void 0)), jsxs(Container$Y, __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), (clubOffer === null || clubOffer === void 0 ? void 0 : clubOffer.isClubOffer) && jsx(RatingDisplay, {}, void 0), jsx(Title$7, __assign$1({ theme: theme, align: showClubPriceLabel ? 'left' : alignName }, { children: title }), void 0), jsx(Spacing, { size: space }, void 0), hasStrength && hasStrength.strength !== -1 && (jsxs(Fragment, { children: [jsx(StrengthBars, { barsFilled: hasStrength.strength, supportText: hasStrength.description }, void 0), jsx(Spacing, { size: 10 }, void 0)] }, void 0)), priceAtBottom ? (jsxs(Fragment, { children: [(clubOffer === null || clubOffer === void 0 ? void 0 : clubOffer.isClubOffer) ? null : jsx(RatingDisplay, {}, void 0), (clubOffer === null || clubOffer === void 0 ? void 0 : clubOffer.isClubOffer) ? null : 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: [PriceLabelDisplay(), jsx(BuyNowPayLater, { displayBNPL: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.displayBNPL, installments: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.installments) || 0, installmentPrice: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.installmentPrice) || '', iconFolder: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconFolder, iconName: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconName) || '', showLogo: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.showLogo, iconColor: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconColor, fontSize: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.fontSize }, void 0)] }, void 0)), showClubPriceLabel && jsx(ClubPriceLabel, { clubPrice: clubPrice }, void 0), discountTagLoading ? (jsx(SkeletonBox, { height: "22px", width: "75px" }, void 0)) : (showDiscountPercentageTag && (jsx(TagContainer, __assign$1({ size: exports.ComponentSize.Small }, { children: discountTag && (jsx(DiscountTag$2, __assign$1({}, discountTag, { size: exports.ComponentSize.Medium, style: {
|
|
6787
6798
|
letterSpacing: '-0.05rem',
|
|
6788
6799
|
} }), void 0)) }), void 0))), jsx(Spacing, { size: space }, void 0), jsx(RatingDisplay, {}, void 0)] }, void 0))] }), void 0), colorPicker.display && colorPicker.position === 'bottom' && (jsxs(Fragment, { children: [jsx(Spacing, { size: space }, void 0), colorPicker.component] }, void 0))] }), void 0));
|
|
6789
6800
|
};
|
|
6790
|
-
var templateObject_1$1q, templateObject_2$
|
|
6801
|
+
var templateObject_1$1q, templateObject_2$13, templateObject_3$R, templateObject_4$G, templateObject_5$w, templateObject_6$t, templateObject_7$l;
|
|
6791
6802
|
|
|
6792
6803
|
var ImageContainer$5 = newStyled.div(function (_a) {
|
|
6793
6804
|
var width = _a.width, height = _a.height;
|
|
@@ -6798,7 +6809,7 @@ var ImageContainer$5 = newStyled.div(function (_a) {
|
|
|
6798
6809
|
});
|
|
6799
6810
|
});
|
|
6800
6811
|
var ImageHoverContainer$2 = newStyled.img(templateObject_1$1p || (templateObject_1$1p = __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; });
|
|
6801
|
-
var Container$X = newStyled.a(templateObject_2$
|
|
6812
|
+
var Container$X = newStyled.a(templateObject_2$12 || (templateObject_2$12 = __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"])));
|
|
6802
6813
|
var ProdCardContainer$3 = newStyled.div(templateObject_3$Q || (templateObject_3$Q = __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"])));
|
|
6803
6814
|
var Title$6 = newStyled.p(templateObject_4$F || (templateObject_4$F = __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; });
|
|
6804
6815
|
var getStylesBySize$b = function (size) {
|
|
@@ -6886,7 +6897,7 @@ var ProductItemTK = function (_a) {
|
|
|
6886
6897
|
marginTop: hasSpacing ? undefined : textContainerGap,
|
|
6887
6898
|
} }, { 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));
|
|
6888
6899
|
};
|
|
6889
|
-
var templateObject_1$1p, templateObject_2$
|
|
6900
|
+
var templateObject_1$1p, templateObject_2$12, templateObject_3$Q, templateObject_4$F, templateObject_5$v, templateObject_6$s, templateObject_7$k, templateObject_8$f;
|
|
6890
6901
|
|
|
6891
6902
|
var Container$W = newStyled.div(templateObject_1$1o || (templateObject_1$1o = __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"])));
|
|
6892
6903
|
function withProductGrid(ProductItemComponent, data) {
|
|
@@ -6946,7 +6957,7 @@ var OutOfStock = function (_a) {
|
|
|
6946
6957
|
};
|
|
6947
6958
|
|
|
6948
6959
|
var CustomRadioGroup = newStyled(lt)(templateObject_1$1n || (templateObject_1$1n = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
6949
|
-
newStyled(lt.Label)(templateObject_2$
|
|
6960
|
+
newStyled(lt.Label)(templateObject_2$11 || (templateObject_2$11 = __makeTemplateObject(["\n font-size: 0.88rem;\n"], ["\n font-size: 0.88rem;\n"])));
|
|
6950
6961
|
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$P || (templateObject_3$P = __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"])));
|
|
6951
6962
|
var Span = newStyled.span(templateObject_4$E || (templateObject_4$E = __makeTemplateObject(["\n font-weight: 600;\n"], ["\n font-weight: 600;\n"])));
|
|
6952
6963
|
var OptionsContainer = newStyled.div(templateObject_5$u || (templateObject_5$u = __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"])));
|
|
@@ -6967,7 +6978,7 @@ var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
|
|
|
6967
6978
|
Option: Option,
|
|
6968
6979
|
OptionsContainer: OptionsContainer,
|
|
6969
6980
|
});
|
|
6970
|
-
var templateObject_1$1n, templateObject_2$
|
|
6981
|
+
var templateObject_1$1n, templateObject_2$11, templateObject_3$P, templateObject_4$E, templateObject_5$u;
|
|
6971
6982
|
|
|
6972
6983
|
var Container$V = newStyled.div(templateObject_1$1m || (templateObject_1$1m = __makeTemplateObject(["\n width: 2rem;\n height: 2rem;\n border-radius: 50%;\n border: 0.081rem solid ", ";\n box-sizing: border-box;\n padding: 0.156rem;\n cursor: pointer;\n opacity: ", ";\n"], ["\n width: 2rem;\n height: 2rem;\n border-radius: 50%;\n border: 0.081rem solid ", ";\n box-sizing: border-box;\n padding: 0.156rem;\n cursor: pointer;\n opacity: ", ";\n"])), function (_a) {
|
|
6973
6984
|
var borderColor = _a.borderColor;
|
|
@@ -6976,14 +6987,14 @@ var Container$V = newStyled.div(templateObject_1$1m || (templateObject_1$1m = __
|
|
|
6976
6987
|
var noStock = _a.noStock;
|
|
6977
6988
|
return (noStock ? '0.4' : '1');
|
|
6978
6989
|
});
|
|
6979
|
-
var Image$2 = newStyled.img(templateObject_2$
|
|
6990
|
+
var Image$2 = newStyled.img(templateObject_2$10 || (templateObject_2$10 = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n"], ["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n"])));
|
|
6980
6991
|
var PatternSelector = function (_a) {
|
|
6981
6992
|
var url = _a.url, selected = _a.selected, testId = _a.testId, noStock = _a.noStock;
|
|
6982
6993
|
var theme = useTheme();
|
|
6983
6994
|
var outerBorder = selected ? theme.colors.shades['550'].color : 'transparent';
|
|
6984
6995
|
return (jsxRuntime.jsx(Container$V, __assign$1({ "data-testid": testId, borderColor: outerBorder, noStock: noStock }, { children: jsxRuntime.jsx(Image$2, { src: url, alt: "pattern" }, void 0) }), void 0));
|
|
6985
6996
|
};
|
|
6986
|
-
var templateObject_1$1m, templateObject_2$
|
|
6997
|
+
var templateObject_1$1m, templateObject_2$10;
|
|
6987
6998
|
|
|
6988
6999
|
var renderOptions$1 = function (selectedColor, options) {
|
|
6989
7000
|
if (options == null || options.length === 0) {
|
|
@@ -7043,7 +7054,7 @@ var SingleColorPicker = function (_a) {
|
|
|
7043
7054
|
};
|
|
7044
7055
|
|
|
7045
7056
|
var Wrapper$5 = newStyled.div(templateObject_1$1l || (templateObject_1$1l = __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'); });
|
|
7046
|
-
var Col$1 = newStyled.div(templateObject_2
|
|
7057
|
+
var Col$1 = newStyled.div(templateObject_2$$ || (templateObject_2$$ = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
7047
7058
|
var Row$2 = newStyled.div(templateObject_3$O || (templateObject_3$O = __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) {
|
|
7048
7059
|
return props.rightToLeft &&
|
|
7049
7060
|
"\n flex-direction: row-reverse;\n justify-content: space-between;\n ";
|
|
@@ -7056,7 +7067,7 @@ var CrossSellCheckbox = function (_a) {
|
|
|
7056
7067
|
var theme = useTheme();
|
|
7057
7068
|
return (jsxRuntime.jsxs(Wrapper$5, __assign$1({ backgroundColor: theme.colors.shades['10'].color, rightToLeft: Boolean(rightToLeft) }, { children: [jsxRuntime.jsx(Checkbox, { text: "", id: "checkbox", onChange: onChange, size: exports.ComponentSize.Small, variant: "secondary" }, void 0), jsxRuntime.jsxs(Row$2, __assign$1({ rightToLeft: Boolean(rightToLeft) }, { children: [jsxRuntime.jsx(Image$3, { src: imageURL, alt: "Cross sell image", borderRadius: "0.5rem" }, void 0), jsxRuntime.jsxs(Col$1, { children: [jsxRuntime.jsx(H5, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0), jsxRuntime.jsxs(H3$1, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: [description, jsxRuntime.jsxs(FreeShipping, __assign$1({ color: theme.colors.shades['700'].color }, { children: [' ', "+ ", freeShippingText] }), void 0)] }), void 0)] }, void 0)] }), void 0)] }), void 0));
|
|
7058
7069
|
};
|
|
7059
|
-
var templateObject_1$1l, templateObject_2
|
|
7070
|
+
var templateObject_1$1l, templateObject_2$$, templateObject_3$O, templateObject_4$D, templateObject_5$t, templateObject_6$r;
|
|
7060
7071
|
|
|
7061
7072
|
var index$1 = /*#__PURE__*/Object.freeze({
|
|
7062
7073
|
__proto__: null,
|
|
@@ -7106,11 +7117,11 @@ var StyledBaseButton = newStyled(BaseButton)(templateObject_1$1k || (templateObj
|
|
|
7106
7117
|
var theme = _a.theme;
|
|
7107
7118
|
return theme.colors.text.disabled;
|
|
7108
7119
|
});
|
|
7109
|
-
var StyledIcon = newStyled(Icon$1)(templateObject_2
|
|
7120
|
+
var StyledIcon = newStyled(Icon$1)(templateObject_2$_ || (templateObject_2$_ = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
7110
7121
|
var marginLeft = _a.marginLeft, marginRight = _a.marginRight;
|
|
7111
7122
|
return "\n margin-left: ".concat(marginLeft !== null && marginLeft !== void 0 ? marginLeft : '10px', ";\n margin-right: ").concat(marginRight !== null && marginRight !== void 0 ? marginRight : '10px', ";\n ");
|
|
7112
7123
|
});
|
|
7113
|
-
var templateObject_1$1k, templateObject_2
|
|
7124
|
+
var templateObject_1$1k, templateObject_2$_;
|
|
7114
7125
|
|
|
7115
7126
|
var BaseCTA = function (_a) {
|
|
7116
7127
|
var _b, _c, _d;
|
|
@@ -7198,7 +7209,7 @@ var ButtonSecondaryOutline = function (props) {
|
|
|
7198
7209
|
};
|
|
7199
7210
|
|
|
7200
7211
|
var Container$U = newStyled.div(templateObject_1$1j || (templateObject_1$1j = __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; });
|
|
7201
|
-
var IconContainer$4 = newStyled.div(templateObject_2$
|
|
7212
|
+
var IconContainer$4 = newStyled.div(templateObject_2$Z || (templateObject_2$Z = __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"])));
|
|
7202
7213
|
var Text$3 = newStyled.p(templateObject_3$N || (templateObject_3$N = __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; });
|
|
7203
7214
|
var Details = newStyled.span(templateObject_4$C || (templateObject_4$C = __makeTemplateObject(["\n color: ", ";\n font-weight: 700;\n"], ["\n color: ", ";\n font-weight: 700;\n"])), function (props) { return props.color; });
|
|
7204
7215
|
var Note = function (_a) {
|
|
@@ -7206,13 +7217,13 @@ var Note = function (_a) {
|
|
|
7206
7217
|
var theme = useTheme();
|
|
7207
7218
|
return (jsxRuntime.jsxs(Container$U, __assign$1({ color: backgroundColor ? backgroundColor : theme.component.deliveryDetails.note.backgroundColor, "data-testid": "Container" }, { children: [jsxRuntime.jsx(IconContainer$4, { children: jsxRuntime.jsx(Icon.Actions.Warning, { fill: accentColor ? accentColor : theme.component.deliveryDetails.note.accentColor }, void 0) }, void 0), jsxRuntime.jsx("div", { children: jsxRuntime.jsxs(Text$3, __assign$1({ color: color ? color : theme.component.deliveryDetails.note.color }, { children: [importantNoteText && (jsxRuntime.jsxs(Details, __assign$1({ color: accentColor ? accentColor : theme.component.deliveryDetails.note.accentColor }, { children: [importantNoteText, ":"] }), void 0)), ' ', text] }), void 0) }, void 0)] }), void 0));
|
|
7208
7219
|
};
|
|
7209
|
-
var templateObject_1$1j, templateObject_2$
|
|
7220
|
+
var templateObject_1$1j, templateObject_2$Z, templateObject_3$N, templateObject_4$C;
|
|
7210
7221
|
|
|
7211
7222
|
var Title$5 = newStyled.h1(templateObject_1$1i || (templateObject_1$1i = __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) {
|
|
7212
7223
|
var theme = _a.theme;
|
|
7213
7224
|
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 ");
|
|
7214
7225
|
});
|
|
7215
|
-
var Line = newStyled.div(templateObject_2$
|
|
7226
|
+
var Line = newStyled.div(templateObject_2$Y || (templateObject_2$Y = __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; });
|
|
7216
7227
|
var Row$1 = newStyled.div(templateObject_3$M || (templateObject_3$M = __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({
|
|
7217
7228
|
flexDirection: ['column', 'row'],
|
|
7218
7229
|
}));
|
|
@@ -7251,7 +7262,7 @@ var DeliveryDetails = function (_a) {
|
|
|
7251
7262
|
var theme = useTheme();
|
|
7252
7263
|
return (jsxRuntime.jsxs("div", __assign$1({ "data-testid": "DeliveryDetails" }, { children: [jsxRuntime.jsx(Title$5, __assign$1({ color: theme.colors.shades[700].color }, { children: deliveryDetailsText }), void 0), jsxRuntime.jsx(Line, { backgroundColor: theme.colors.shades['200'].color }, void 0), note && jsxRuntime.jsx(Note, __assign$1({}, note), void 0), jsxRuntime.jsxs(Row$1, __assign$1({ "data-testid": "DD-row", theme: theme }, { children: [jsxRuntime.jsxs(Col, __assign$1({ theme: theme }, { children: [jsxRuntime.jsxs(SectionTitle, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(IconContainer$3, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Icon.PDP.Clock, { width: 1.5 }, void 0) }), void 0), arrivingBy.title] }), void 0), jsxRuntime.jsx(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: arrivingBy.details }), void 0)] }), void 0), jsxRuntime.jsxs(Col, __assign$1({ theme: theme }, { children: [jsxRuntime.jsxs(SectionTitle, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(IconContainer$3, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Icon.Navigation.MapMarker, { width: 1.5 }, void 0) }), void 0), shippingTo.title] }), void 0), jsxRuntime.jsx(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: shippingTo.details }), void 0)] }), void 0), jsxRuntime.jsxs(Col, __assign$1({ theme: theme }, { children: [jsxRuntime.jsxs(SectionTitle, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(IconContainer$3, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Icon.Messaging.Messenger, { width: 1.5 }, void 0) }), void 0), instantOrderUpdate.title] }), void 0), jsxRuntime.jsx(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: instantOrderUpdate.details }), void 0), instantOrderUpdate.keepMeUpdated && (jsxRuntime.jsxs(KeepMeUpdated, __assign$1({ onClick: instantOrderUpdate.keepMeUpdated.onClick, borderColor: theme.colors.shades['150'].color }, { children: [jsxRuntime.jsx(Icon.Messaging.Messenger, { width: 1, height: 1, fill: "#0078FF" }, void 0), instantOrderUpdate.keepMeUpdated.title] }), void 0))] }), void 0)] }), void 0)] }), void 0));
|
|
7253
7264
|
};
|
|
7254
|
-
var templateObject_1$1i, templateObject_2$
|
|
7265
|
+
var templateObject_1$1i, templateObject_2$Y, templateObject_3$M, templateObject_4$B, templateObject_5$s, templateObject_6$q, templateObject_7$j, templateObject_8$e;
|
|
7255
7266
|
|
|
7256
7267
|
var Backdrop = newStyled.div(templateObject_1$1h || (templateObject_1$1h = __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) {
|
|
7257
7268
|
var top = _a.top;
|
|
@@ -7260,7 +7271,7 @@ var Backdrop = newStyled.div(templateObject_1$1h || (templateObject_1$1h = __mak
|
|
|
7260
7271
|
var isOpen = _a.isOpen, backgroundColor = _a.backgroundColor;
|
|
7261
7272
|
return isOpen ? "background-color: ".concat(backgroundColor, ";") : 'transparent';
|
|
7262
7273
|
});
|
|
7263
|
-
var Sidebar = newStyled.div(templateObject_2$
|
|
7274
|
+
var Sidebar = newStyled.div(templateObject_2$X || (templateObject_2$X = __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) {
|
|
7264
7275
|
var height = _a.height;
|
|
7265
7276
|
return height;
|
|
7266
7277
|
}, function (_a) {
|
|
@@ -7307,7 +7318,7 @@ var Drawer = function (_a) {
|
|
|
7307
7318
|
}, [isOpen, onClose, onOpen]);
|
|
7308
7319
|
return isMounted ? (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Backdrop, { backgroundColor: backdropColor, isOpen: isOpenState, top: top, "data-testid": "Drawer-Backdrop", onClick: onClickOutside && onClickOutside }, void 0), jsxRuntime.jsx(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;
|
|
7309
7320
|
};
|
|
7310
|
-
var templateObject_1$1h, templateObject_2$
|
|
7321
|
+
var templateObject_1$1h, templateObject_2$X;
|
|
7311
7322
|
|
|
7312
7323
|
var TooltipArrow = function (_a) {
|
|
7313
7324
|
var height = _a.height, width = _a.width, fill = _a.fill, stroke = _a.stroke;
|
|
@@ -7315,12 +7326,12 @@ var TooltipArrow = function (_a) {
|
|
|
7315
7326
|
};
|
|
7316
7327
|
|
|
7317
7328
|
var List = newStyled.ul(templateObject_1$1g || (templateObject_1$1g = __makeTemplateObject(["\n display: flex;\n margin: 0;\n padding: 0;\n"], ["\n display: flex;\n margin: 0;\n padding: 0;\n"])));
|
|
7318
|
-
var Item$2 = newStyled.li(templateObject_2$
|
|
7329
|
+
var Item$2 = newStyled.li(templateObject_2$W || (templateObject_2$W = __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"])));
|
|
7319
7330
|
var DropdownWrapper = newStyled.div(templateObject_3$L || (templateObject_3$L = __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"])));
|
|
7320
7331
|
var ArrowContainer$1 = newStyled.div(templateObject_4$A || (templateObject_4$A = __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"])));
|
|
7321
7332
|
var StyledDropdown = newStyled.ul(templateObject_5$r || (templateObject_5$r = __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; });
|
|
7322
7333
|
var DropdownItem = newStyled.li(templateObject_6$p || (templateObject_6$p = __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; });
|
|
7323
|
-
var templateObject_1$1g, templateObject_2$
|
|
7334
|
+
var templateObject_1$1g, templateObject_2$W, templateObject_3$L, templateObject_4$A, templateObject_5$r, templateObject_6$p;
|
|
7324
7335
|
|
|
7325
7336
|
var DropdownListIcons = function (_a) {
|
|
7326
7337
|
var items = _a.items;
|
|
@@ -7334,12 +7345,12 @@ var Dropdown = function (_a) {
|
|
|
7334
7345
|
};
|
|
7335
7346
|
|
|
7336
7347
|
var DropdownContainer = newStyled.div(templateObject_1$1f || (templateObject_1$1f = __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"])));
|
|
7337
|
-
var DropdownLabel = newStyled.div(templateObject_2$
|
|
7348
|
+
var DropdownLabel = newStyled.div(templateObject_2$V || (templateObject_2$V = __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"])));
|
|
7338
7349
|
var SizeLabel = newStyled.span(templateObject_3$K || (templateObject_3$K = __makeTemplateObject(["\n margin-right: 8px;\n"], ["\n margin-right: 8px;\n"])));
|
|
7339
7350
|
var DetailLabel = newStyled.span(templateObject_4$z || (templateObject_4$z = __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"])));
|
|
7340
7351
|
var DropdownOptions = newStyled.div(templateObject_5$q || (templateObject_5$q = __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"])));
|
|
7341
7352
|
var DropdownOption = newStyled.div(templateObject_6$o || (templateObject_6$o = __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"])));
|
|
7342
|
-
var templateObject_1$1f, templateObject_2$
|
|
7353
|
+
var templateObject_1$1f, templateObject_2$V, templateObject_3$K, templateObject_4$z, templateObject_5$q, templateObject_6$o;
|
|
7343
7354
|
|
|
7344
7355
|
var SizeDropdown = function (_a) {
|
|
7345
7356
|
var options = _a.options, defaultLabel = _a.defaultLabel, onOptionSelect = _a.onOptionSelect;
|
|
@@ -7363,7 +7374,7 @@ var SizeDropdown = function (_a) {
|
|
|
7363
7374
|
};
|
|
7364
7375
|
|
|
7365
7376
|
var DialogDropdownWrapper = newStyled.div(templateObject_1$1e || (templateObject_1$1e = __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; });
|
|
7366
|
-
var DialogDropdownListContainer = newStyled.ul(templateObject_2$
|
|
7377
|
+
var DialogDropdownListContainer = newStyled.ul(templateObject_2$U || (templateObject_2$U = __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: calc(", " + 15px);\n right: calc(", " - 23px);\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\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: calc(", " + 15px);\n right: calc(", " - 23px);\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\n overflow: hidden;\n"])), function (props) { return props.borderRadius; }, function (props) { return props.top; }, function (props) { return props.right; });
|
|
7367
7378
|
var DialogDropdownListItem = newStyled.li(templateObject_3$J || (templateObject_3$J = __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"])));
|
|
7368
7379
|
var DialogDropdownLink = newStyled.a(templateObject_4$y || (templateObject_4$y = __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"])));
|
|
7369
7380
|
var DropdownDialog = function (_a) {
|
|
@@ -7374,7 +7385,7 @@ var DropdownDialog = function (_a) {
|
|
|
7374
7385
|
return (jsxRuntime.jsx(DialogDropdownListItem, { children: jsxRuntime.jsx(DialogDropdownLink, __assign$1({ href: value }, { children: label }), void 0) }, idx));
|
|
7375
7386
|
}) }), void 0) }), void 0));
|
|
7376
7387
|
};
|
|
7377
|
-
var templateObject_1$1e, templateObject_2$
|
|
7388
|
+
var templateObject_1$1e, templateObject_2$U, templateObject_3$J, templateObject_4$y;
|
|
7378
7389
|
|
|
7379
7390
|
function FilteringDropdown(_a) {
|
|
7380
7391
|
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;
|
|
@@ -7408,7 +7419,7 @@ function FilteringDropdown(_a) {
|
|
|
7408
7419
|
}
|
|
7409
7420
|
|
|
7410
7421
|
var Title$4 = newStyled.div(templateObject_1$1d || (templateObject_1$1d = __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; });
|
|
7411
|
-
var H3 = newStyled.h3(templateObject_2$
|
|
7422
|
+
var H3 = newStyled.h3(templateObject_2$T || (templateObject_2$T = __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; });
|
|
7412
7423
|
var ArrowContainer = newStyled.div(templateObject_3$I || (templateObject_3$I = __makeTemplateObject(["\n width: 1rem;\n height: 1rem;\n"], ["\n width: 1rem;\n height: 1rem;\n"])));
|
|
7413
7424
|
var Container$T = newStyled.div(templateObject_4$x || (templateObject_4$x = __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'); });
|
|
7414
7425
|
var Accordion = function (_a) {
|
|
@@ -7417,10 +7428,10 @@ var Accordion = function (_a) {
|
|
|
7417
7428
|
var _d = React__default["default"].useState(isOpenByDefault), isOpen = _d[0], setIsOpen = _d[1];
|
|
7418
7429
|
return (jsxRuntime.jsxs(Container$T, __assign$1({ "data-testid": "FiltersAccordion", showInMobile: showInMobile }, { children: [jsxRuntime.jsxs(Title$4, __assign$1({ onClick: function () { return setIsOpen(function (state) { return !state; }); }, borderColor: theme.colors.shades['100'].color, "data-testid": "accordion-title" }, { children: [jsxRuntime.jsx(H3, __assign$1({ color: theme.colors.shades['550'].color }, { children: title }), void 0), jsxRuntime.jsx(ArrowContainer, { children: isOpen ? (jsxRuntime.jsx(Icon.Arrows.ChevronUp, { fill: theme.colors.shades['700'].color }, void 0)) : (jsxRuntime.jsx(Icon.Arrows.ChevronDown, { fill: theme.colors.shades['700'].color }, void 0)) }, void 0)] }), void 0), jsxRuntime.jsx("div", __assign$1({ style: { display: isOpen ? 'block' : 'none' }, "data-testid": "accordion-children-container" }, { children: children }), void 0)] }), void 0));
|
|
7419
7430
|
};
|
|
7420
|
-
var templateObject_1$1d, templateObject_2$
|
|
7431
|
+
var templateObject_1$1d, templateObject_2$T, templateObject_3$I, templateObject_4$x;
|
|
7421
7432
|
|
|
7422
7433
|
var SectionContent = newStyled.div(templateObject_1$1c || (templateObject_1$1c = __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; });
|
|
7423
|
-
var Header$1 = newStyled.div(templateObject_2$
|
|
7434
|
+
var Header$1 = newStyled.div(templateObject_2$S || (templateObject_2$S = __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"])));
|
|
7424
7435
|
var MobileHeader = newStyled.div(templateObject_3$H || (templateObject_3$H = __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"])));
|
|
7425
7436
|
var MobileIconsContainer = newStyled.div(templateObject_4$w || (templateObject_4$w = __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"])));
|
|
7426
7437
|
var H4 = newStyled.h4(templateObject_5$p || (templateObject_5$p = __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; });
|
|
@@ -7429,7 +7440,7 @@ var OptionContainer = newStyled.div(templateObject_7$i || (templateObject_7$i =
|
|
|
7429
7440
|
var ClearAll = newStyled.span(templateObject_8$d || (templateObject_8$d = __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; });
|
|
7430
7441
|
var MobileFooter = newStyled.div(templateObject_9$8 || (templateObject_9$8 = __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"])));
|
|
7431
7442
|
var MobileClearContainer = newStyled.div(templateObject_10$7 || (templateObject_10$7 = __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"])));
|
|
7432
|
-
var templateObject_1$1c, templateObject_2$
|
|
7443
|
+
var templateObject_1$1c, templateObject_2$S, templateObject_3$H, templateObject_4$w, templateObject_5$p, templateObject_6$n, templateObject_7$i, templateObject_8$d, templateObject_9$8, templateObject_10$7;
|
|
7433
7444
|
|
|
7434
7445
|
var getStylesBySize$a = function (size, theme) {
|
|
7435
7446
|
switch (size) {
|
|
@@ -7495,7 +7506,7 @@ var SelectorSecondary = function (_a) {
|
|
|
7495
7506
|
};
|
|
7496
7507
|
|
|
7497
7508
|
var UL = newStyled.ul(templateObject_1$1b || (templateObject_1$1b = __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"])));
|
|
7498
|
-
var LI = newStyled.li(templateObject_2$
|
|
7509
|
+
var LI = newStyled.li(templateObject_2$R || (templateObject_2$R = __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; });
|
|
7499
7510
|
var CloseIconContainer = newStyled.div(templateObject_3$G || (templateObject_3$G = __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"])));
|
|
7500
7511
|
var Tags = function (_a) {
|
|
7501
7512
|
var _b = _a.color, color = _b === void 0 ? '#fff6ef' : _b, items = _a.items, onCloseClick = _a.onCloseClick;
|
|
@@ -7504,7 +7515,7 @@ var Tags = function (_a) {
|
|
|
7504
7515
|
return (jsxRuntime.jsxs(LI, __assign$1({ color: theme.colors.shades['700'].color, backgroundColor: color }, { children: [item, jsxRuntime.jsx(CloseIconContainer, __assign$1({ "data-testid": "li-close-icon", onClick: function () { return onCloseClick(index); } }, { children: jsxRuntime.jsx(Icon.Actions.Close, { fill: theme.colors.shades['700'].color, width: "100%", height: "100%" }, void 0) }), void 0)] }), index));
|
|
7505
7516
|
}) }), void 0));
|
|
7506
7517
|
};
|
|
7507
|
-
var templateObject_1$1b, templateObject_2$
|
|
7518
|
+
var templateObject_1$1b, templateObject_2$R, templateObject_3$G;
|
|
7508
7519
|
|
|
7509
7520
|
var Filters = function (_a) {
|
|
7510
7521
|
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;
|
|
@@ -7641,7 +7652,7 @@ var FilterCheckboxColor = function (_a) {
|
|
|
7641
7652
|
};
|
|
7642
7653
|
|
|
7643
7654
|
var Wrapper$4 = newStyled.div(templateObject_1$1a || (templateObject_1$1a = __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"])));
|
|
7644
|
-
var Container$S = newStyled.div(templateObject_2$
|
|
7655
|
+
var Container$S = newStyled.div(templateObject_2$Q || (templateObject_2$Q = __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"])));
|
|
7645
7656
|
var FitGuarantee = function (_a) {
|
|
7646
7657
|
var _b;
|
|
7647
7658
|
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;
|
|
@@ -7659,10 +7670,10 @@ var FitGuarantee = function (_a) {
|
|
|
7659
7670
|
fontWeight: theme.component.text.fitGuarantee.titleFontWeight,
|
|
7660
7671
|
} }, { children: title }), void 0), jsxRuntime.jsx(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));
|
|
7661
7672
|
};
|
|
7662
|
-
var templateObject_1$1a, templateObject_2$
|
|
7673
|
+
var templateObject_1$1a, templateObject_2$Q;
|
|
7663
7674
|
|
|
7664
7675
|
var Container$R = newStyled.div(templateObject_1$19 || (templateObject_1$19 = __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"])));
|
|
7665
|
-
var P$2 = newStyled.p(templateObject_2$
|
|
7676
|
+
var P$2 = newStyled.p(templateObject_2$P || (templateObject_2$P = __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; });
|
|
7666
7677
|
var textButtonStyles$1 = function (theme) { return ({
|
|
7667
7678
|
border: 'none',
|
|
7668
7679
|
background: 'transparent',
|
|
@@ -7677,7 +7688,7 @@ var FitPredictor = function (_a) {
|
|
|
7677
7688
|
var theme = useTheme();
|
|
7678
7689
|
return (jsxs(Container$R, __assign$1({ theme: theme }, { children: [jsx(Container$R, { 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));
|
|
7679
7690
|
};
|
|
7680
|
-
var templateObject_1$19, templateObject_2$
|
|
7691
|
+
var templateObject_1$19, templateObject_2$P;
|
|
7681
7692
|
|
|
7682
7693
|
var Button$7 = newStyled.button(function () { return ({
|
|
7683
7694
|
background: 'transparent',
|
|
@@ -12014,7 +12025,7 @@ var ImageSmallPreview = function (_a) {
|
|
|
12014
12025
|
};
|
|
12015
12026
|
|
|
12016
12027
|
var horizontalStyles = css(templateObject_1$16 || (templateObject_1$16 = __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"])));
|
|
12017
|
-
var verticalStyles = css(templateObject_2$
|
|
12028
|
+
var verticalStyles = css(templateObject_2$O || (templateObject_2$O = __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"])));
|
|
12018
12029
|
var Container$Q = newStyled.div(templateObject_3$F || (templateObject_3$F = __makeTemplateObject(["\n display: grid;\n max-height: 45rem;\n height: min-content;\n align-items: flex-start;\n ", "\n\n ", "\n"], ["\n display: grid;\n max-height: 45rem;\n height: min-content;\n align-items: flex-start;\n ", "\n\n ", "\n"])), function (_a) {
|
|
12019
12030
|
var position = _a.position;
|
|
12020
12031
|
return (position == 'horizontal' ? horizontalStyles : verticalStyles);
|
|
@@ -12028,7 +12039,7 @@ var ArrowsContainer = newStyled.div(templateObject_5$o || (templateObject_5$o =
|
|
|
12028
12039
|
var ArrowBaseStyles = newStyled.div(templateObject_6$m || (templateObject_6$m = __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"])));
|
|
12029
12040
|
var ArrowPrev = newStyled(ArrowBaseStyles)(templateObject_7$h || (templateObject_7$h = __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"])));
|
|
12030
12041
|
var ArrowNext = newStyled(ArrowBaseStyles)(templateObject_8$c || (templateObject_8$c = __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"])));
|
|
12031
|
-
var templateObject_1$16, templateObject_2$
|
|
12042
|
+
var templateObject_1$16, templateObject_2$O, templateObject_3$F, templateObject_4$v, templateObject_5$o, templateObject_6$m, templateObject_7$h, templateObject_8$c;
|
|
12032
12043
|
|
|
12033
12044
|
var getLoadingProp = function (index, itemsOnViewport) {
|
|
12034
12045
|
var loading = 'eager';
|
|
@@ -12066,8 +12077,8 @@ var ImagePreviewList = function (_a) {
|
|
|
12066
12077
|
};
|
|
12067
12078
|
|
|
12068
12079
|
var ProgressContainer = newStyled.div(templateObject_1$15 || (templateObject_1$15 = __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); });
|
|
12069
|
-
var ProgressFiller = newStyled.div(templateObject_2$
|
|
12070
|
-
var templateObject_1$15, templateObject_2$
|
|
12080
|
+
var ProgressFiller = newStyled.div(templateObject_2$N || (templateObject_2$N = __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; });
|
|
12081
|
+
var templateObject_1$15, templateObject_2$N;
|
|
12071
12082
|
|
|
12072
12083
|
var ProgressBar$1 = function (_a) {
|
|
12073
12084
|
var progress = _a.progress, hide = _a.hide;
|
|
@@ -12075,12 +12086,12 @@ var ProgressBar$1 = function (_a) {
|
|
|
12075
12086
|
};
|
|
12076
12087
|
|
|
12077
12088
|
var Container$P = newStyled.div(templateObject_1$14 || (templateObject_1$14 = __makeTemplateObject(["\n max-width: 530px;\n position: relative;\n"], ["\n max-width: 530px;\n position: relative;\n"])));
|
|
12078
|
-
var HTMLVideo = newStyled.video(templateObject_2$
|
|
12089
|
+
var HTMLVideo = newStyled.video(templateObject_2$M || (templateObject_2$M = __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; });
|
|
12079
12090
|
var PlayIcon = newStyled(Icon.PDP.PlayVideo)(templateObject_3$E || (templateObject_3$E = __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"])));
|
|
12080
12091
|
var PlayContainer = newStyled.div(templateObject_4$u || (templateObject_4$u = __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"])));
|
|
12081
12092
|
var PauseContainer = newStyled.div(templateObject_5$n || (templateObject_5$n = __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"])));
|
|
12082
12093
|
var MuteButton = newStyled.button(templateObject_6$l || (templateObject_6$l = __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"])));
|
|
12083
|
-
var templateObject_1$14, templateObject_2$
|
|
12094
|
+
var templateObject_1$14, templateObject_2$M, templateObject_3$E, templateObject_4$u, templateObject_5$n, templateObject_6$l;
|
|
12084
12095
|
|
|
12085
12096
|
var Video$1 = function (_a) {
|
|
12086
12097
|
var _b, _c, _d, _e;
|
|
@@ -13724,7 +13735,7 @@ var Container$O = newStyled.div(templateObject_1$13 || (templateObject_1$13 = __
|
|
|
13724
13735
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
13725
13736
|
return borderRadiusVariant && "border-radius: 40px;";
|
|
13726
13737
|
});
|
|
13727
|
-
var TopTagContainer$6 = newStyled.div(templateObject_2$
|
|
13738
|
+
var TopTagContainer$6 = newStyled.div(templateObject_2$L || (templateObject_2$L = __makeTemplateObject(["\n position: absolute;\n left: ", ";\n top: ", ";\n"], ["\n position: absolute;\n left: ", ";\n top: ", ";\n"])), function (_a) {
|
|
13728
13739
|
var borderRadiusVariant = _a.borderRadiusVariant, theme = _a.theme;
|
|
13729
13740
|
return borderRadiusVariant ? '50px' : theme.component.gallery.tagPosition.left;
|
|
13730
13741
|
}, function (_a) {
|
|
@@ -13745,7 +13756,7 @@ var InnerImageZoomStyled = newStyled(InnerImageZoom)(templateObject_7$g || (temp
|
|
|
13745
13756
|
var theme = _a.theme, isRatioSquare = _a.isRatioSquare;
|
|
13746
13757
|
return isRatioSquare ? '1 / 1' : theme.component.gallery.aspectRatio;
|
|
13747
13758
|
});
|
|
13748
|
-
var templateObject_1$13, templateObject_2$
|
|
13759
|
+
var templateObject_1$13, templateObject_2$L, templateObject_3$D, templateObject_4$t, templateObject_5$m, templateObject_6$k, templateObject_7$g;
|
|
13749
13760
|
|
|
13750
13761
|
var ImageProductSlide$1 = function (_a) {
|
|
13751
13762
|
var _b;
|
|
@@ -13906,7 +13917,7 @@ var IconsWithTitle = function (_a) {
|
|
|
13906
13917
|
};
|
|
13907
13918
|
|
|
13908
13919
|
var Container$K = newStyled.div(templateObject_1$$ || (templateObject_1$$ = __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'); });
|
|
13909
|
-
var ImageContainer$4 = newStyled.div(templateObject_2$
|
|
13920
|
+
var ImageContainer$4 = newStyled.div(templateObject_2$K || (templateObject_2$K = __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'); });
|
|
13910
13921
|
var StyledTitle = newStyled.div(templateObject_3$C || (templateObject_3$C = __makeTemplateObject(["\n display: flex;\n ", "\n"], ["\n display: flex;\n ", "\n"])), function (_a) {
|
|
13911
13922
|
var titlePosition = _a.titlePosition;
|
|
13912
13923
|
return titlePosition == 'center' &&
|
|
@@ -13917,13 +13928,13 @@ var ImageCardWithDescription = function (_a) {
|
|
|
13917
13928
|
var isMobile = useWindowDimensions().isMobile;
|
|
13918
13929
|
return (jsxRuntime.jsxs(Container$K, __assign$1({ "data-testid": "Container", isMobile: isMobile }, { children: [jsxRuntime.jsx(ImageContainer$4, __assign$1({ "data-testid": "ImageContainer", isMobile: isMobile }, { children: jsxRuntime.jsx(Image$3, { src: image, borderRadius: "40px", alt: "before", height: "100%", width: "100%" }, void 0) }), void 0), jsxRuntime.jsx(StyledTitle, __assign$1({ titlePosition: titlePosition, "data-testid": "StyledTitle" }, { children: isMobile ? (jsxRuntime.jsx(Text$7, __assign$1({ variant: "link", weight: "demi" }, { children: title }), void 0)) : (jsxRuntime.jsx(Text$7, __assign$1({ variant: "heading6", weight: "demi" }, { children: title }), void 0)) }), void 0), jsxRuntime.jsx(Text$7, __assign$1({ variant: "link", weight: "regular" }, { children: description }), void 0)] }), void 0));
|
|
13919
13930
|
};
|
|
13920
|
-
var templateObject_1$$, templateObject_2$
|
|
13931
|
+
var templateObject_1$$, templateObject_2$K, templateObject_3$C;
|
|
13921
13932
|
|
|
13922
13933
|
var Label$3 = newStyled.span(templateObject_1$_ || (templateObject_1$_ = __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) {
|
|
13923
13934
|
var color = _a.color;
|
|
13924
13935
|
return color;
|
|
13925
13936
|
});
|
|
13926
|
-
var MandatoryIcon = newStyled.span(templateObject_2$
|
|
13937
|
+
var MandatoryIcon = newStyled.span(templateObject_2$J || (templateObject_2$J = __makeTemplateObject(["\n color: ", ";\n margin-left: 0.25rem;\n"], ["\n color: ", ";\n margin-left: 0.25rem;\n"])), function (_a) {
|
|
13927
13938
|
var color = _a.color;
|
|
13928
13939
|
return color;
|
|
13929
13940
|
});
|
|
@@ -13932,7 +13943,7 @@ var InputLabel = function (_a) {
|
|
|
13932
13943
|
var theme = useTheme();
|
|
13933
13944
|
return (jsxRuntime.jsxs(Label$3, __assign$1({ color: isDisabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, { children: [label, isRequired && jsxRuntime.jsx(MandatoryIcon, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: "*" }), void 0)] }), void 0));
|
|
13934
13945
|
};
|
|
13935
|
-
var templateObject_1$_, templateObject_2$
|
|
13946
|
+
var templateObject_1$_, templateObject_2$J;
|
|
13936
13947
|
|
|
13937
13948
|
var containerByStatus = function (theme, status) {
|
|
13938
13949
|
if (status === exports.InputValidationType.Valid)
|
|
@@ -13945,7 +13956,7 @@ var Container$J = newStyled.div(templateObject_1$Z || (templateObject_1$Z = __ma
|
|
|
13945
13956
|
var theme = _a.theme, status = _a.status, hasError = _a.hasError;
|
|
13946
13957
|
return hasError ? '' : containerByStatus(theme, status);
|
|
13947
13958
|
});
|
|
13948
|
-
var StyledLabel$2 = newStyled.label(templateObject_2$
|
|
13959
|
+
var StyledLabel$2 = newStyled.label(templateObject_2$I || (templateObject_2$I = __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"])));
|
|
13949
13960
|
var StyledInput = newStyled.input(templateObject_3$B || (templateObject_3$B = __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) {
|
|
13950
13961
|
var inlinePlaceholder = _a.inlinePlaceholder, theme = _a.theme;
|
|
13951
13962
|
return theme.component[inlinePlaceholder ? 'inputPlaceholder' : 'input'].padding;
|
|
@@ -14019,7 +14030,7 @@ var AnimatedPlaceholder = newStyled.span(templateObject_5$l || (templateObject_5
|
|
|
14019
14030
|
return theme.component.input.lineHeight;
|
|
14020
14031
|
});
|
|
14021
14032
|
var ClearInput = newStyled.div(templateObject_6$j || (templateObject_6$j = __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"])));
|
|
14022
|
-
var templateObject_1$Z, templateObject_2$
|
|
14033
|
+
var templateObject_1$Z, templateObject_2$I, templateObject_3$B, templateObject_4$s, templateObject_5$l, templateObject_6$j;
|
|
14023
14034
|
|
|
14024
14035
|
var BaseInput = function (_a) {
|
|
14025
14036
|
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, rest = __rest(_a, ["value", "onChange", "label", "children", "required", "onValidation", "size", "placeholder", "inlinePlaceholder", "hasError", "inputType", "hideClear", "innerRef", "requiredPlaceholder"]);
|
|
@@ -14067,7 +14078,7 @@ var Container$I = newStyled.div(templateObject_1$Y || (templateObject_1$Y = __ma
|
|
|
14067
14078
|
var theme = _a.theme;
|
|
14068
14079
|
return theme.component.inputCustom.input.borderRadius;
|
|
14069
14080
|
});
|
|
14070
|
-
var ButtonContainer$1 = newStyled.div(templateObject_2$
|
|
14081
|
+
var ButtonContainer$1 = newStyled.div(templateObject_2$H || (templateObject_2$H = __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) {
|
|
14071
14082
|
var theme = _a.theme, defaultRounded = _a.defaultRounded;
|
|
14072
14083
|
return defaultRounded
|
|
14073
14084
|
? theme.component.inputCustom.button.borderRadius
|
|
@@ -14084,19 +14095,19 @@ var Custom = function (_a) {
|
|
|
14084
14095
|
}); }, [variant, onClick, text, rest.disabled]);
|
|
14085
14096
|
return (jsxRuntime.jsx(Container$I, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(BaseInput, __assign$1({}, rest, { children: jsxRuntime.jsx(ButtonContainer$1, __assign$1({ theme: theme, defaultRounded: defaultRounded }, { children: jsxRuntime.jsx(Button$5, __assign$1({}, props), void 0) }), void 0) }), void 0) }), void 0));
|
|
14086
14097
|
};
|
|
14087
|
-
var templateObject_1$Y, templateObject_2$
|
|
14098
|
+
var templateObject_1$Y, templateObject_2$H;
|
|
14088
14099
|
|
|
14089
14100
|
var SuccessContainer = newStyled.div(templateObject_1$X || (templateObject_1$X = __makeTemplateObject(["\n height: ", ";\n display: flex;\n"], ["\n height: ", ";\n display: flex;\n"])), function (_a) {
|
|
14090
14101
|
var size = _a.size;
|
|
14091
14102
|
return (size === 'small' ? '36px' : '');
|
|
14092
14103
|
});
|
|
14093
|
-
var SuccessMessage = newStyled.div(templateObject_2$
|
|
14104
|
+
var SuccessMessage = newStyled.div(templateObject_2$G || (templateObject_2$G = __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"])));
|
|
14094
14105
|
var SuccessText = newStyled.span(templateObject_3$A || (templateObject_3$A = __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"])));
|
|
14095
14106
|
var Success = function (_a) {
|
|
14096
14107
|
var children = _a.children, successText = _a.successText, size = _a.size;
|
|
14097
14108
|
return (jsxRuntime.jsxs(SuccessContainer, __assign$1({ size: size }, { children: [jsxRuntime.jsxs(SuccessMessage, { children: [jsxRuntime.jsx(Icon.Actions.Check, { fill: "#5EAD63", width: 1.375, height: 1.063 }, void 0), jsxRuntime.jsx(SuccessText, { children: successText }, void 0)] }, void 0), children] }), void 0));
|
|
14098
14109
|
};
|
|
14099
|
-
var templateObject_1$X, templateObject_2$
|
|
14110
|
+
var templateObject_1$X, templateObject_2$G, templateObject_3$A;
|
|
14100
14111
|
|
|
14101
14112
|
var ButtonContainer = newStyled.div(templateObject_1$W || (templateObject_1$W = __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) {
|
|
14102
14113
|
var status = _a.status, type = _a.type, theme = _a.theme;
|
|
@@ -14118,13 +14129,13 @@ var BasePlusButton = function (_a) {
|
|
|
14118
14129
|
var templateObject_1$W;
|
|
14119
14130
|
|
|
14120
14131
|
var Container$H = newStyled.div(templateObject_1$V || (templateObject_1$V = __makeTemplateObject(["\n input {\n padding-right: 2.688rem;\n }\n"], ["\n input {\n padding-right: 2.688rem;\n }\n"])));
|
|
14121
|
-
var IconContainer$2 = newStyled.div(templateObject_2$
|
|
14132
|
+
var IconContainer$2 = newStyled.div(templateObject_2$F || (templateObject_2$F = __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"])));
|
|
14122
14133
|
var BasePlusIcon = function (_a) {
|
|
14123
14134
|
var Icon = _a.Icon, rest = __rest(_a, ["Icon"]);
|
|
14124
14135
|
var theme = useTheme();
|
|
14125
14136
|
return (jsxRuntime.jsx(Container$H, { children: jsxRuntime.jsx(BaseInput, __assign$1({}, rest, { children: jsxRuntime.jsx(IconContainer$2, { children: jsxRuntime.jsx(Icon, { testId: "IconWrapper", fill: theme.colors.shades['250'].color }, void 0) }, void 0) }), void 0) }, void 0));
|
|
14126
14137
|
};
|
|
14127
|
-
var templateObject_1$V, templateObject_2$
|
|
14138
|
+
var templateObject_1$V, templateObject_2$F;
|
|
14128
14139
|
|
|
14129
14140
|
var Input$3 = {
|
|
14130
14141
|
Simple: BaseInput,
|
|
@@ -14178,7 +14189,7 @@ var Container$G = newStyled.div(templateObject_1$U || (templateObject_1$U = __ma
|
|
|
14178
14189
|
return theme.component.slideNavigation.slideDots.selectedDotColor;
|
|
14179
14190
|
});
|
|
14180
14191
|
// max-height: 31.875rem;
|
|
14181
|
-
var TopTagContainer$5 = newStyled.div(templateObject_2$
|
|
14192
|
+
var TopTagContainer$5 = newStyled.div(templateObject_2$E || (templateObject_2$E = __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'); });
|
|
14182
14193
|
var TopRightTagContainer = newStyled.div(templateObject_3$z || (templateObject_3$z = __makeTemplateObject(["\n position: absolute;\n right: 0;\n top: 0;\n"], ["\n position: absolute;\n right: 0;\n top: 0;\n"])));
|
|
14183
14194
|
var BottomTagContainer$5 = newStyled.div(templateObject_4$r || (templateObject_4$r = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
14184
14195
|
var NavButtonContainer$2 = newStyled.div(templateObject_5$k || (templateObject_5$k = __makeTemplateObject(["\n height: 40px;\n width: 40px;\n"], ["\n height: 40px;\n width: 40px;\n"])));
|
|
@@ -14259,7 +14270,7 @@ var ImageProductSlide = function (_a) {
|
|
|
14259
14270
|
return (jsxRuntime.jsx("div", { children: !isVideo ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(InnerImageZoom, { src: source, zoomSrc: source, zoomType: "hover", imgAttributes: getImageAttributes(idx, itemsOnViewport, imgAttributes), height: 510, fullscreenOnMobile: true, className: "zoomWrapper" }, void 0), jsxRuntime.jsx(TopTagContainer$5, __assign$1({ borderRadiusVariant: borderRadiusVariant, "data-testid": "topTag" }, { children: topTag }), void 0), jsxRuntime.jsx(BottomTagContainer$5, __assign$1({ "data-testid": "bottomTag" }, { children: bottomTag }), void 0), !!topRightTag && jsxRuntime.jsx(TopRightTagContainer, { children: topRightTag }, void 0)] }, void 0)) : (jsxRuntime.jsx(Video$1, { source: source, thumbnail: content === null || content === void 0 ? void 0 : content.thumbnailUrl }, void 0)) }, content.key));
|
|
14260
14271
|
}) }), void 0) }), void 0)] }, void 0));
|
|
14261
14272
|
};
|
|
14262
|
-
var templateObject_1$U, templateObject_2$
|
|
14273
|
+
var templateObject_1$U, templateObject_2$E, templateObject_3$z, templateObject_4$r, templateObject_5$k, templateObject_6$i;
|
|
14263
14274
|
|
|
14264
14275
|
var Container$F = newStyled.div(templateObject_1$T || (templateObject_1$T = __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"])));
|
|
14265
14276
|
var ProductGalleryMobile = function (_a) {
|
|
@@ -14554,7 +14565,7 @@ var SlideDots = function (_a) {
|
|
|
14554
14565
|
var templateObject_1$R;
|
|
14555
14566
|
|
|
14556
14567
|
var NavigationButton = newStyled(ArrowButton)(templateObject_1$Q || (templateObject_1$Q = __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"])));
|
|
14557
|
-
var RightButton = newStyled(NavigationButton)(templateObject_2$
|
|
14568
|
+
var RightButton = newStyled(NavigationButton)(templateObject_2$D || (templateObject_2$D = __makeTemplateObject(["\n right: 0;\n"], ["\n right: 0;\n"])));
|
|
14558
14569
|
var LeftButton = newStyled(NavigationButton)(templateObject_3$y || (templateObject_3$y = __makeTemplateObject(["\n left: 0;\n"], ["\n left: 0;\n"])));
|
|
14559
14570
|
var SlideNavigation = function (_a) {
|
|
14560
14571
|
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, onNavigate = _a.onNavigate, testId = _a.testId;
|
|
@@ -14567,21 +14578,21 @@ var SlideNavigation = function (_a) {
|
|
|
14567
14578
|
onNavigate(selectedIndex + 1);
|
|
14568
14579
|
} }, void 0)), jsxRuntime.jsx(SlideDots, { quantity: quantity, selectedIndex: selectedIndex, containerDataTestId: testId }, void 0)] }, void 0));
|
|
14569
14580
|
};
|
|
14570
|
-
var templateObject_1$Q, templateObject_2$
|
|
14581
|
+
var templateObject_1$Q, templateObject_2$D, templateObject_3$y;
|
|
14571
14582
|
|
|
14572
14583
|
var Container$D = newStyled.div(templateObject_1$P || (templateObject_1$P = __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) {
|
|
14573
14584
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
14574
14585
|
return borderRadiusVariant &&
|
|
14575
14586
|
"\n border-radius: 40px;\n ";
|
|
14576
14587
|
});
|
|
14577
|
-
var TopTagContainer$4 = newStyled.div(templateObject_2$
|
|
14588
|
+
var TopTagContainer$4 = newStyled.div(templateObject_2$C || (templateObject_2$C = __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'); });
|
|
14578
14589
|
var BottomTagContainer$4 = newStyled.div(templateObject_3$x || (templateObject_3$x = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
14579
14590
|
var ImageProductSlideV2 = React$2.forwardRef(function ImageProductWithTags(_a, ref) {
|
|
14580
14591
|
var _b, _c;
|
|
14581
14592
|
var image = _a.image, topTag = _a.topTag, bottomTag = _a.bottomTag, testId = _a.testId, borderRadiusVariant = _a.borderRadiusVariant;
|
|
14582
14593
|
return (jsxRuntime.jsxs(Container$D, __assign$1({ "data-testid": testId, ref: ref, borderRadiusVariant: borderRadiusVariant }, { children: [!((_b = image === null || image === void 0 ? void 0 : image.alt) === null || _b === void 0 ? void 0 : _b.includes('-video')) && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(InnerImageZoom, { src: image.url, zoomSrc: image.url, zoomType: "hover", imgAttributes: { alt: image.alt, width: '100%', height: '510px' }, height: 510, fullscreenOnMobile: true, className: "zoomWrapper" }, void 0), jsxRuntime.jsx(TopTagContainer$4, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsxRuntime.jsx(BottomTagContainer$4, { children: bottomTag }, void 0)] }, void 0)), ((_c = image === null || image === void 0 ? void 0 : image.alt) === null || _c === void 0 ? void 0 : _c.includes('-video')) && (jsxRuntime.jsx("iframe", { allowFullScreen: true, title: image.alt, width: "100%", height: 510, src: image === null || image === void 0 ? void 0 : image.url, allow: "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" }, void 0))] }), void 0));
|
|
14583
14594
|
});
|
|
14584
|
-
var templateObject_1$P, templateObject_2$
|
|
14595
|
+
var templateObject_1$P, templateObject_2$C, templateObject_3$x;
|
|
14585
14596
|
|
|
14586
14597
|
var Container$C = newStyled.div(templateObject_1$O || (templateObject_1$O = __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"])));
|
|
14587
14598
|
var ProductGalleryMobileV2 = function (_a) {
|
|
@@ -14618,7 +14629,7 @@ var Container$B = newStyled.div(templateObject_1$N || (templateObject_1$N = __ma
|
|
|
14618
14629
|
return theme.component.slideNavigation.slideDots.selectedDotColor;
|
|
14619
14630
|
});
|
|
14620
14631
|
// max-height: 31.875rem;
|
|
14621
|
-
var TopTagContainer$3 = newStyled.div(templateObject_2$
|
|
14632
|
+
var TopTagContainer$3 = newStyled.div(templateObject_2$B || (templateObject_2$B = __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'); });
|
|
14622
14633
|
var BottomTagContainer$3 = newStyled.div(templateObject_3$w || (templateObject_3$w = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
14623
14634
|
var VideoOverlay$1 = newStyled.div(templateObject_4$q || (templateObject_4$q = __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"])));
|
|
14624
14635
|
var Video = newStyled.div(templateObject_5$j || (templateObject_5$j = __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"])));
|
|
@@ -14683,7 +14694,7 @@ var ImageProductSlideV3 = function (_a) {
|
|
|
14683
14694
|
} }, void 0), jsxRuntime.jsxs(VideoTag, { children: [jsxRuntime.jsx(Icon.PDP.PlayMini, { width: 1.5 }, void 0), jsxRuntime.jsx(Text$2, { children: "VIDEO" }, void 0)] }, void 0)] }, void 0))] }, image.key));
|
|
14684
14695
|
}) }), void 0) }), void 0)] }, void 0));
|
|
14685
14696
|
};
|
|
14686
|
-
var templateObject_1$N, templateObject_2$
|
|
14697
|
+
var templateObject_1$N, templateObject_2$B, templateObject_3$w, templateObject_4$q, templateObject_5$j, templateObject_6$h, templateObject_7$f, templateObject_8$b, templateObject_9$7;
|
|
14687
14698
|
|
|
14688
14699
|
var Container$A = newStyled.div(templateObject_1$M || (templateObject_1$M = __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"])));
|
|
14689
14700
|
var ProductGalleryMobileV3 = function (_a) {
|
|
@@ -14823,7 +14834,7 @@ var Portal = function (_a) {
|
|
|
14823
14834
|
var visibleStyle = function (_a) {
|
|
14824
14835
|
var opened = _a.opened;
|
|
14825
14836
|
return opened
|
|
14826
|
-
? css(templateObject_1$L || (templateObject_1$L = __makeTemplateObject(["\n opacity: 1;\n pointer-events: all;\n "], ["\n opacity: 1;\n pointer-events: all;\n "]))) : css(templateObject_2$
|
|
14837
|
+
? css(templateObject_1$L || (templateObject_1$L = __makeTemplateObject(["\n opacity: 1;\n pointer-events: all;\n "], ["\n opacity: 1;\n pointer-events: all;\n "]))) : css(templateObject_2$A || (templateObject_2$A = __makeTemplateObject(["\n opacity: 0;\n pointer-events: none;\n "], ["\n opacity: 0;\n pointer-events: none;\n "])));
|
|
14827
14838
|
};
|
|
14828
14839
|
var transformStyle = function (_a) {
|
|
14829
14840
|
var opened = _a.opened, maxFullScreen = _a.maxFullScreen;
|
|
@@ -14878,7 +14889,7 @@ var useModal = function (id) {
|
|
|
14878
14889
|
close: close,
|
|
14879
14890
|
}); }, [close, open, opened]);
|
|
14880
14891
|
};
|
|
14881
|
-
var templateObject_1$L, templateObject_2$
|
|
14892
|
+
var templateObject_1$L, templateObject_2$A, templateObject_3$v, templateObject_4$p, templateObject_5$i, templateObject_6$g, templateObject_7$e;
|
|
14882
14893
|
|
|
14883
14894
|
var Bar$1 = newStyled.div(templateObject_1$K || (templateObject_1$K = __makeTemplateObject(["\n @keyframes loading {\n 0% {\n transform: translateX(0);\n }\n to {\n transform: translateX(400%);\n }\n }\n\n height: ", ";\n background-color: ", ";\n width: ", ";\n border-radius: ", ";\n left: ", ";\n animation: ", ";\n"], ["\n @keyframes loading {\n 0% {\n transform: translateX(0);\n }\n to {\n transform: translateX(400%);\n }\n }\n\n height: ", ";\n background-color: ", ";\n width: ", ";\n border-radius: ", ";\n left: ", ";\n animation: ", ";\n"])), function (_a) {
|
|
14884
14895
|
var height = _a.height;
|
|
@@ -14958,13 +14969,13 @@ var Container$x = newStyled.div(templateObject_1$J || (templateObject_1$J = __ma
|
|
|
14958
14969
|
var theme = _a.theme;
|
|
14959
14970
|
return theme.component.orderBar.backgroundColor;
|
|
14960
14971
|
});
|
|
14961
|
-
var H1 = newStyled.h1(templateObject_2$
|
|
14972
|
+
var H1 = newStyled.h1(templateObject_2$z || (templateObject_2$z = __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; });
|
|
14962
14973
|
var OrderBar = function (_a) {
|
|
14963
14974
|
var message = _a.message, color = _a.color;
|
|
14964
14975
|
var theme = useTheme();
|
|
14965
14976
|
return (jsxRuntime.jsxs(Container$x, __assign$1({ color: color }, { children: [jsxRuntime.jsx(Icon.Actions.Check, { width: 1.25, height: 0.875, fill: "#2F806A" }, void 0), jsxRuntime.jsx(H1, __assign$1({ color: theme.component.orderBar.fontColor }, { children: message }), void 0)] }), void 0));
|
|
14966
14977
|
};
|
|
14967
|
-
var templateObject_1$J, templateObject_2$
|
|
14978
|
+
var templateObject_1$J, templateObject_2$z;
|
|
14968
14979
|
|
|
14969
14980
|
var StyledButton$1 = newStyled(Ye.Button)(function (props) { return ({
|
|
14970
14981
|
background: props.bgColor,
|
|
@@ -14995,8 +15006,8 @@ var StyledContent = newStyled.div(templateObject_1$I || (templateObject_1$I = __
|
|
|
14995
15006
|
var _b = _a.width, width = _b === void 0 ? '100%' : _b;
|
|
14996
15007
|
return width;
|
|
14997
15008
|
});
|
|
14998
|
-
var StyledController = newStyled.div(templateObject_2$
|
|
14999
|
-
var templateObject_1$I, templateObject_2$
|
|
15009
|
+
var StyledController = newStyled.div(templateObject_2$y || (templateObject_2$y = __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"])));
|
|
15010
|
+
var templateObject_1$I, templateObject_2$y;
|
|
15000
15011
|
|
|
15001
15012
|
var StyledDisclosure = newStyled(Ye)(function (_a) {
|
|
15002
15013
|
var background = _a.background, width = _a.width;
|
|
@@ -18817,7 +18828,7 @@ HTMLReactParser$1.attributesToProps;
|
|
|
18817
18828
|
HTMLReactParser$1.Element;
|
|
18818
18829
|
|
|
18819
18830
|
var Container$w = newStyled.div(templateObject_1$H || (templateObject_1$H = __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"])));
|
|
18820
|
-
var Card$1 = newStyled.div(templateObject_2$
|
|
18831
|
+
var Card$1 = newStyled.div(templateObject_2$x || (templateObject_2$x = __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"])));
|
|
18821
18832
|
var Tag$1 = newStyled.div(templateObject_3$u || (templateObject_3$u = __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"])));
|
|
18822
18833
|
var Label$2 = newStyled.div(templateObject_4$o || (templateObject_4$o = __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"])));
|
|
18823
18834
|
var Check = newStyled.div(templateObject_5$h || (templateObject_5$h = __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"])));
|
|
@@ -18853,10 +18864,10 @@ var PackCard = function (_a) {
|
|
|
18853
18864
|
currency: currencyCode || 'USD',
|
|
18854
18865
|
}), ' ', "each"] }), void 0)] }), void 0));
|
|
18855
18866
|
};
|
|
18856
|
-
var templateObject_1$H, templateObject_2$
|
|
18867
|
+
var templateObject_1$H, templateObject_2$x, templateObject_3$u, templateObject_4$o, templateObject_5$h, templateObject_6$f, templateObject_7$d, templateObject_8$a;
|
|
18857
18868
|
|
|
18858
18869
|
var Container$v = newStyled.div(templateObject_1$G || (templateObject_1$G = __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"])));
|
|
18859
|
-
var IconContainer = newStyled.div(templateObject_2$
|
|
18870
|
+
var IconContainer = newStyled.div(templateObject_2$w || (templateObject_2$w = __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"])));
|
|
18860
18871
|
var PageNumbersContainer = newStyled.div(templateObject_3$t || (templateObject_3$t = __makeTemplateObject(["\n display: flex;\n ", ";\n"], ["\n display: flex;\n ", ";\n"])), mediaQueries({
|
|
18861
18872
|
margin: ['0 0.75rem', '0 1.25rem'],
|
|
18862
18873
|
}));
|
|
@@ -18877,7 +18888,7 @@ var PageNumber = newStyled.span(templateObject_4$n || (templateObject_4$n = __ma
|
|
|
18877
18888
|
var background = _a.background;
|
|
18878
18889
|
return background || 'unset';
|
|
18879
18890
|
});
|
|
18880
|
-
var templateObject_1$G, templateObject_2$
|
|
18891
|
+
var templateObject_1$G, templateObject_2$w, templateObject_3$t, templateObject_4$n;
|
|
18881
18892
|
|
|
18882
18893
|
var Pagination = function (_a) {
|
|
18883
18894
|
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;
|
|
@@ -18964,7 +18975,7 @@ var templateObject_1$F;
|
|
|
18964
18975
|
|
|
18965
18976
|
var Container$t = newStyled.div(templateObject_1$E || (templateObject_1$E = __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"])));
|
|
18966
18977
|
var IMAGE_WIDTH = '63px';
|
|
18967
|
-
var ImageContainer$3 = newStyled.div(templateObject_2$
|
|
18978
|
+
var ImageContainer$3 = newStyled.div(templateObject_2$v || (templateObject_2$v = __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);
|
|
18968
18979
|
var DescriptionContainer$1 = newStyled.div(templateObject_3$s || (templateObject_3$s = __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({
|
|
18969
18980
|
paddingLeft: ['0.938rem', '1.875rem'],
|
|
18970
18981
|
}), IMAGE_WIDTH);
|
|
@@ -19005,7 +19016,7 @@ var SimpleOrderItem = function (_a) {
|
|
|
19005
19016
|
var theme = useTheme();
|
|
19006
19017
|
return (jsxRuntime.jsxs(Container$t, __assign$1({ className: className }, { children: [jsxRuntime.jsxs(ImageContainer$3, { children: [jsxRuntime.jsx(Image$3, { src: image.src, alt: image.alt, width: "4.063rem", height: "5.375rem", objectFit: "cover", objectPosition: "center" }, void 0), quantity ? (jsxRuntime.jsx(Quantity, __assign$1({ "data-testid": "order-item-quantity" }, { children: jsxRuntime.jsx(StyledSpan, { children: quantity }, void 0) }), void 0)) : null] }, void 0), jsxRuntime.jsxs(DescriptionContainer$1, __assign$1({ "data-testid": "order-item-description-container", theme: theme }, { children: [jsxRuntime.jsx(Title$3, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "product-title" }, { children: title }), void 0), jsxRuntime.jsx(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" }, { children: subtitle }), void 0), midElement, jsxRuntime.jsxs(PriceContainer, __assign$1({ "data-testid": "order-item-price-container", withTag: !!tag, theme: theme }, { children: [tag && (jsxRuntime.jsx(OfferBanner, { discountAppliedText: tag === null || tag === void 0 ? void 0 : tag.text, backgroundColor: tag === null || tag === void 0 ? void 0 : tag.backgroundColor }, void 0)), jsxRuntime.jsx(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));
|
|
19007
19018
|
};
|
|
19008
|
-
var templateObject_1$E, templateObject_2$
|
|
19019
|
+
var templateObject_1$E, templateObject_2$v, templateObject_3$s, templateObject_4$m, templateObject_5$g, templateObject_6$e;
|
|
19009
19020
|
|
|
19010
19021
|
var P$1 = newStyled.p(function (_a) {
|
|
19011
19022
|
var color = _a.color;
|
|
@@ -19067,7 +19078,7 @@ var ProgressBar = function (_a) {
|
|
|
19067
19078
|
var templateObject_1$D;
|
|
19068
19079
|
|
|
19069
19080
|
var Container$r = newStyled.div(templateObject_1$C || (templateObject_1$C = __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; });
|
|
19070
|
-
var Item$1 = newStyled.span(templateObject_2$
|
|
19081
|
+
var Item$1 = newStyled.span(templateObject_2$u || (templateObject_2$u = __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"])));
|
|
19071
19082
|
var Number$1 = newStyled(Item$1)(templateObject_3$r || (templateObject_3$r = __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"])));
|
|
19072
19083
|
var IncreaseDecrease = newStyled(Item$1)(templateObject_4$l || (templateObject_4$l = __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)'; });
|
|
19073
19084
|
var QuantityPicker = function (_a) {
|
|
@@ -19094,7 +19105,7 @@ var QuantityPicker = function (_a) {
|
|
|
19094
19105
|
}, [value, clamp]);
|
|
19095
19106
|
return (jsxRuntime.jsxs(Container$r, __assign$1({ borderColor: theme.colors.shades['200'].color, color: theme.colors.shades['700'].color, "data-testid": testId, borderRadius: theme.component.qtyPicker.borderRadius }, { children: [jsxRuntime.jsx(IncreaseDecrease, __assign$1({ "data-testid": "".concat(testId, "-minus"), onClick: function () { return setInternal(function (value) { return clamp(value - 1); }); } }, { children: "-" }), void 0), jsxRuntime.jsx(Number$1, { children: internal }, void 0), jsxRuntime.jsx(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));
|
|
19096
19107
|
};
|
|
19097
|
-
var templateObject_1$C, templateObject_2$
|
|
19108
|
+
var templateObject_1$C, templateObject_2$u, templateObject_3$r, templateObject_4$l;
|
|
19098
19109
|
|
|
19099
19110
|
/* base styles & size variants */
|
|
19100
19111
|
var CustomRadioStyles$1 = {
|
|
@@ -19165,7 +19176,7 @@ var ContainerStyles$1 = {
|
|
|
19165
19176
|
|
|
19166
19177
|
var Wrapper$3 = newStyled.div(templateObject_1$B || (templateObject_1$B = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
19167
19178
|
var Container$q = newStyled.div(__assign$1({}, ContainerStyles$1.baseStyles), function (props) { return [ContainerStyles$1[props.size](props.theme)]; });
|
|
19168
|
-
var Input$2 = newStyled.input(templateObject_2$
|
|
19179
|
+
var Input$2 = newStyled.input(templateObject_2$t || (templateObject_2$t = __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) {
|
|
19169
19180
|
var disabled = _a.disabled;
|
|
19170
19181
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
19171
19182
|
});
|
|
@@ -19183,7 +19194,7 @@ var RadioPrimary = function (_a) {
|
|
|
19183
19194
|
};
|
|
19184
19195
|
return (jsxRuntime.jsxs(Wrapper$3, { children: [jsxRuntime.jsxs(Container$q, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsxRuntime.jsx(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), jsxRuntime.jsx(CustomRadio$1, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), jsxRuntime.jsx(StyledLabel$1, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0)] }, void 0));
|
|
19185
19196
|
};
|
|
19186
|
-
var templateObject_1$B, templateObject_2$
|
|
19197
|
+
var templateObject_1$B, templateObject_2$t, templateObject_3$q;
|
|
19187
19198
|
|
|
19188
19199
|
var RadioGroupInput = function (_a) {
|
|
19189
19200
|
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 ? exports.ComponentSize.Medium : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d;
|
|
@@ -19264,7 +19275,7 @@ var ContainerStyles = {
|
|
|
19264
19275
|
|
|
19265
19276
|
var Wrapper$2 = newStyled.div(templateObject_1$A || (templateObject_1$A = __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"])));
|
|
19266
19277
|
var Container$p = newStyled.div(__assign$1({}, ContainerStyles.baseStyles), function (props) { return [ContainerStyles[props.size](props.theme)]; });
|
|
19267
|
-
var Input$1 = newStyled.input(templateObject_2$
|
|
19278
|
+
var Input$1 = newStyled.input(templateObject_2$s || (templateObject_2$s = __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) {
|
|
19268
19279
|
var disabled = _a.disabled;
|
|
19269
19280
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
19270
19281
|
});
|
|
@@ -19288,7 +19299,7 @@ var ClubRadioInput = function (_a) {
|
|
|
19288
19299
|
};
|
|
19289
19300
|
return (jsxRuntime.jsxs(Wrapper$2, { children: [jsxRuntime.jsxs(Container$p, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsxRuntime.jsx(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), jsxRuntime.jsx(CustomRadio, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), jsxRuntime.jsx(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));
|
|
19290
19301
|
};
|
|
19291
|
-
var templateObject_1$A, templateObject_2$
|
|
19302
|
+
var templateObject_1$A, templateObject_2$s, templateObject_3$p;
|
|
19292
19303
|
|
|
19293
19304
|
var ClubRadioGroupInput = function (_a) {
|
|
19294
19305
|
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 ? exports.ComponentSize.Medium : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d;
|
|
@@ -19317,7 +19328,7 @@ function formatDate(date, format) {
|
|
|
19317
19328
|
}
|
|
19318
19329
|
|
|
19319
19330
|
var Container$o = newStyled.div(templateObject_1$z || (templateObject_1$z = __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"])));
|
|
19320
|
-
var Content$1 = newStyled.div(templateObject_2$
|
|
19331
|
+
var Content$1 = newStyled.div(templateObject_2$r || (templateObject_2$r = __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"])));
|
|
19321
19332
|
var StarsContent = newStyled.div(templateObject_3$o || (templateObject_3$o = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n"], ["\n display: flex;\n justify-content: space-between;\n"])));
|
|
19322
19333
|
var ReviewContainer$1 = newStyled.div(templateObject_4$k || (templateObject_4$k = __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"])));
|
|
19323
19334
|
var DateText$1 = newStyled.span(templateObject_5$f || (templateObject_5$f = __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"])));
|
|
@@ -19357,12 +19368,12 @@ var Review$1 = function (_a) {
|
|
|
19357
19368
|
return (jsxRuntime.jsx(Modal, __assign$1({ id: modalId, maxFullScreen: maxFullScreen, padding: "0" }, { children: jsxRuntime.jsxs(Container$o, { children: [jsxRuntime.jsx(CloseButton, __assign$1({ onClick: close }, { children: "X" }), void 0), jsxRuntime.jsx(ImageContainer$2, { children: image &&
|
|
19358
19369
|
(!isVideo ? (jsxRuntime.jsx(ImageWrapper$2, { src: image.src, alt: image.alt }, void 0)) : (jsxRuntime.jsx(VideoWrapper, { ref: refVideo, src: image.src, width: "100%", controls: true }, void 0))) }, void 0), jsxRuntime.jsxs(DescriptionContainer, { children: [opened && (jsxRuntime.jsxs(ReviewerName$1, { children: [reviewerName, verified && jsxRuntime.jsx(VerifiedText, { children: "Verified Buyer" }, void 0)] }, void 0)), jsxRuntime.jsxs(Content$1, __assign$1({ "data-testid": "review-detail-content" }, { children: [jsxRuntime.jsxs(StarsContent, { children: [jsxRuntime.jsx(StarList, { starsNumber: 5, rating: rating, fill: stars.color, size: stars.size }, void 0), jsxRuntime.jsx(DateText$1, { children: formatDate(date) }, void 0)] }, void 0), jsxRuntime.jsxs(ReviewContainer$1, { children: [jsxRuntime.jsx(ReviewTitle$1, { children: title }, void 0), jsxRuntime.jsx(ReviewDescription, { dangerouslySetInnerHTML: { __html: description } }, void 0)] }, void 0), jsxRuntime.jsxs(HelpfulContainer, { children: [jsxRuntime.jsxs(HelpfulAction, __assign$1({ "data-testid": "helpful-action", onClick: function () { return (helpfulAction ? helpfulAction(reviewId) : undefined); } }, { children: [jsxRuntime.jsx(Icon.Custom.ThumbsUp, { width: 1, height: 1, fill: "#000" }, void 0), jsxRuntime.jsx(HelpfulCount, { children: helpfulCount }, void 0)] }), void 0), jsxRuntime.jsxs(NotHelpfulAction, __assign$1({ "data-testid": "not-helpful-action", onClick: function () { return (notHelpfulAction ? notHelpfulAction(reviewId) : undefined); } }, { children: [jsxRuntime.jsx(Icon.Custom.ThumbsDown, { width: 1, height: 1, fill: "#000" }, void 0), jsxRuntime.jsx(NotHelpfulCount, { children: notHelpfulCount }, void 0)] }), void 0)] }, void 0)] }), void 0), productImage && productLink && (jsxRuntime.jsxs(ProductContainer, __assign$1({ onClick: function () { return (window.location.href = productLink); } }, { children: [jsxRuntime.jsx(ProductImageWrapper, { children: jsxRuntime.jsx(ProductImage, { src: productImage, alt: "productImage" }, void 0) }, void 0), jsxRuntime.jsx(ProductTitle, { children: productTitle }, void 0)] }), void 0))] }, void 0)] }, void 0) }), void 0));
|
|
19359
19370
|
};
|
|
19360
|
-
var templateObject_1$z, templateObject_2$
|
|
19371
|
+
var templateObject_1$z, templateObject_2$r, templateObject_3$o, templateObject_4$k, templateObject_5$f, templateObject_6$d, templateObject_7$c, templateObject_8$9, templateObject_9$6, templateObject_10$6, templateObject_11$4, templateObject_12$1, templateObject_13$1, templateObject_14$1, templateObject_15$1, templateObject_16$1, templateObject_17$1, templateObject_18$1, templateObject_19$1, templateObject_20, templateObject_21, templateObject_22, templateObject_23;
|
|
19361
19372
|
|
|
19362
19373
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_DESKTOP = 500;
|
|
19363
19374
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_MOBILE = 168;
|
|
19364
19375
|
var Container$n = newStyled.div(templateObject_1$y || (templateObject_1$y = __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"])));
|
|
19365
|
-
var Heading = newStyled.div(templateObject_2$
|
|
19376
|
+
var Heading = newStyled.div(templateObject_2$q || (templateObject_2$q = __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"])));
|
|
19366
19377
|
var Content = newStyled.div(templateObject_3$n || (templateObject_3$n = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n"], ["\n display: flex;\n justify-content: space-between;\n"])));
|
|
19367
19378
|
var ReviewContainer = newStyled.div(templateObject_4$j || (templateObject_4$j = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
19368
19379
|
var DateText = newStyled.span(templateObject_5$e || (templateObject_5$e = __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"])));
|
|
@@ -19413,10 +19424,10 @@ var Review = function (_a) {
|
|
|
19413
19424
|
: description,
|
|
19414
19425
|
} }, void 0), jsxRuntime.jsxs(HelpfulContainerDesktop, __assign$1({ showMoreDesktop: description.length > REVIEWS_DESCRIPTION_MAX_LENGTH_DESKTOP }, { children: [helpfulActionText && helpfulAction && (jsxRuntime.jsx(ButtonSecondaryWrapper, { onClick: function () { return helpfulAction(reviewId); }, text: helpfulActionText, size: exports.ComponentSize.Small }, void 0)), (helpfulCount || (hasTextWhenHelpfulCount0 && helpfulCount === 0)) && (jsxRuntime.jsxs(HelpfulText, { children: [helpfulCount, " people found this helpful"] }, void 0))] }), void 0)] }, void 0), jsxRuntime.jsxs(ImagesContainer, { children: [jsxRuntime.jsxs(Images, { children: [images === null || images === void 0 ? void 0 : images.map(function (image) { return (jsxRuntime.jsx(ImageWrapper$1, __assign$1({ onClick: function () { return onClickImage && onClickImage(image.src); } }, { children: jsxRuntime.jsx(Image$3, { src: image.src, alt: image.alt, height: "10rem", width: "7.5rem" }, void 0) }), image.src)); }), !images || (images.length === 0 && jsxRuntime.jsx(ImageSpace, {}, void 0))] }, void 0), jsxRuntime.jsx(VariantText, { children: reviewVariant }, void 0)] }, void 0)] }), void 0), jsxRuntime.jsx(HelpfulTexti, {}, void 0), jsxRuntime.jsxs(HelpfulContainerMobile, { children: [helpfulActionText && helpfulAction && (jsxRuntime.jsx(ButtonSecondaryWrapper, { onClick: function () { return helpfulAction(reviewId); }, text: helpfulActionText, size: exports.ComponentSize.Small }, void 0)), (helpfulCount || (hasTextWhenHelpfulCount0 && helpfulCount === 0)) && (jsxRuntime.jsxs(HelpfulText, { children: [helpfulCount, " people found this helpful"] }, void 0))] }, void 0)] }, void 0));
|
|
19415
19426
|
};
|
|
19416
|
-
var templateObject_1$y, templateObject_2$
|
|
19427
|
+
var templateObject_1$y, templateObject_2$q, templateObject_3$n, templateObject_4$j, templateObject_5$e, templateObject_6$c, templateObject_7$b, templateObject_8$8, templateObject_9$5, templateObject_10$5, templateObject_11$3, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19;
|
|
19417
19428
|
|
|
19418
19429
|
var Container$m = newStyled.div(templateObject_1$x || (templateObject_1$x = __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"])));
|
|
19419
|
-
var ReviewsContainer = newStyled.div(templateObject_2$
|
|
19430
|
+
var ReviewsContainer = newStyled.div(templateObject_2$p || (templateObject_2$p = __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"])));
|
|
19420
19431
|
var ReviewsCount = newStyled.div(templateObject_3$m || (templateObject_3$m = __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"])));
|
|
19421
19432
|
var ReviewsStars = newStyled.div(templateObject_4$i || (templateObject_4$i = __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"])));
|
|
19422
19433
|
var ReviewsTextCount = newStyled(Text$7)(templateObject_5$d || (templateObject_5$d = __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"])));
|
|
@@ -19431,17 +19442,17 @@ var ReviewsHeader = function (_a) {
|
|
|
19431
19442
|
var theme = useTheme();
|
|
19432
19443
|
return (jsxRuntime.jsxs(Container$m, { children: [jsxRuntime.jsx(Text$7, __assign$1({ variant: "heading3", weight: "bold", style: { margin: '10px 0' } }, { children: title }), void 0), jsxRuntime.jsxs(ReviewsContainer, { children: [jsxRuntime.jsxs(ReviewsCount, { children: [jsxRuntime.jsxs(ReviewsStars, { children: [jsxRuntime.jsx(ReviewsTextCount, __assign$1({ variant: "heading3", weight: "bold" }, { children: rating }), void 0), jsxRuntime.jsx(StarList, { rating: rating, size: exports.ComponentSize.Medium, starsNumber: starsNumber, fill: theme.component.stars.element.color }, void 0)] }, void 0), jsxRuntime.jsxs(Text$7, __assign$1({ variant: "body", size: "small", weight: "regular", style: { marginBottom: '20px' } }, { children: [reviews, " ", reviewsText] }), void 0)] }, void 0), jsxRuntime.jsx(ReviewsImages, { children: reviewsSummary.map(function (summaryItem) { return (jsxRuntime.jsx(SummaryItem, { onClick: function () { return onClickReview(summaryItem); }, backgroundUrl: summaryItem, "data-testid": "summary-review-item" }, summaryItem)); }) }, void 0)] }, void 0)] }, void 0));
|
|
19433
19444
|
};
|
|
19434
|
-
var templateObject_1$x, templateObject_2$
|
|
19445
|
+
var templateObject_1$x, templateObject_2$p, templateObject_3$m, templateObject_4$i, templateObject_5$d, templateObject_6$b, templateObject_7$a;
|
|
19435
19446
|
|
|
19436
19447
|
var Container$l = newStyled.div(templateObject_1$w || (templateObject_1$w = __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"])));
|
|
19437
|
-
var Text = newStyled.p(templateObject_2$
|
|
19448
|
+
var Text = newStyled.p(templateObject_2$o || (templateObject_2$o = __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; });
|
|
19438
19449
|
var ScrollToTop = function (_a) {
|
|
19439
19450
|
var scrollToTopText = _a.scrollToTopText, onClick = _a.onClick, fill = _a.fill, _b = _a.Icon, Icon$1 = _b === void 0 ? Icon.Arrows.CircleChevronUp : _b;
|
|
19440
19451
|
var theme = useTheme();
|
|
19441
19452
|
var fillValue = fill || theme.colors.pallete.primary.color;
|
|
19442
19453
|
return (jsxRuntime.jsxs(Container$l, __assign$1({ onClick: onClick, "data-testid": "scrollTopContainer" }, { children: [jsxRuntime.jsx(Text, __assign$1({ color: theme.colors.shades['700'].color }, { children: scrollToTopText }), void 0), jsxRuntime.jsx(Icon$1, { width: 1.375, height: 1.375, fill: fillValue }, void 0)] }), void 0));
|
|
19443
19454
|
};
|
|
19444
|
-
var templateObject_1$w, templateObject_2$
|
|
19455
|
+
var templateObject_1$w, templateObject_2$o;
|
|
19445
19456
|
|
|
19446
19457
|
var Input = newStyled.input(function (props) { return ({
|
|
19447
19458
|
padding: props.theme.component.input.padding,
|
|
@@ -19519,7 +19530,7 @@ var Anchor = newStyled.a({
|
|
|
19519
19530
|
padding: 0,
|
|
19520
19531
|
textDecoration: 'none',
|
|
19521
19532
|
});
|
|
19522
|
-
var Container$i = newStyled.div(templateObject_2$
|
|
19533
|
+
var Container$i = newStyled.div(templateObject_2$n || (templateObject_2$n = __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({
|
|
19523
19534
|
border: ['none', '0.063rem solid var(--colors-pallete-secondary-color)'],
|
|
19524
19535
|
marginTop: ['1.25rem', '0.125rem'],
|
|
19525
19536
|
borderRadius: ['0', '0.5rem'],
|
|
@@ -19532,7 +19543,7 @@ var ResultsPanel = function (_a) {
|
|
|
19532
19543
|
var theme = useTheme();
|
|
19533
19544
|
return (jsxRuntime.jsxs(Container$i, __assign$1({ "data-testid": testId, theme: theme }, { children: [header && (jsxRuntime.jsx(Header, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Text$7, __assign$1({ variant: "heading6", weight: "demi" }, { children: header }), void 0) }), void 0)), jsxRuntime.jsx(Ul, { children: options.map(function (item, index) { return (jsxRuntime.jsx(Li, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Anchor, __assign$1({ href: item.optionUrl }, { children: jsxRuntime.jsx(ProductItem, { src: item.src, title: item.title, price: item.price }, void 0) }), void 0) }), index)); }) }, void 0), footer && jsxRuntime.jsx(Footer, { text: footer, onClick: onViewAll }, void 0)] }), void 0));
|
|
19534
19545
|
};
|
|
19535
|
-
var templateObject_1$u, templateObject_2$
|
|
19546
|
+
var templateObject_1$u, templateObject_2$n, templateObject_3$l;
|
|
19536
19547
|
|
|
19537
19548
|
var Button$1 = newStyled.button(templateObject_1$t || (templateObject_1$t = __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({
|
|
19538
19549
|
right: ['1rem', '7.75rem'],
|
|
@@ -19637,7 +19648,7 @@ var SearchBar = function (_a) {
|
|
|
19637
19648
|
};
|
|
19638
19649
|
|
|
19639
19650
|
var Container$g = newStyled.div(templateObject_1$r || (templateObject_1$r = __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"])));
|
|
19640
|
-
var BackArrow = newStyled.div(templateObject_2$
|
|
19651
|
+
var BackArrow = newStyled.div(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["\n transform: rotate(180deg);\n margin-right: 0.5rem;\n"], ["\n transform: rotate(180deg);\n margin-right: 0.5rem;\n"])));
|
|
19641
19652
|
var BoldSpan = newStyled.span(templateObject_3$k || (templateObject_3$k = __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"])));
|
|
19642
19653
|
var NormalSpan = newStyled.span(templateObject_4$h || (templateObject_4$h = __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"])));
|
|
19643
19654
|
var SearchNavigationParents = newStyled.div(templateObject_5$c || (templateObject_5$c = __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"])));
|
|
@@ -19647,7 +19658,7 @@ var SearchNavigation = function (_a) {
|
|
|
19647
19658
|
return index === steps.length - 1 ? (jsxRuntime.jsx(BoldSpan, { children: step }, step)) : (jsxRuntime.jsx(NormalSpan, { children: "".concat(step, " / ") }, step));
|
|
19648
19659
|
}) }, void 0)] }, void 0));
|
|
19649
19660
|
};
|
|
19650
|
-
var templateObject_1$r, templateObject_2$
|
|
19661
|
+
var templateObject_1$r, templateObject_2$m, templateObject_3$k, templateObject_4$h, templateObject_5$c;
|
|
19651
19662
|
|
|
19652
19663
|
var Container$f = newStyled.div(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n ", "\n display: flex;\n flex-direction: column;\n padding: 0px 0px 5px;\n width: ", ";\n background: ", ";\n color: ", ";\n border: ", ";\n"], ["\n ", "\n display: flex;\n flex-direction: column;\n padding: 0px 0px 5px;\n width: ", ";\n background: ", ";\n color: ", ";\n border: ", ";\n"])), function (_a) {
|
|
19653
19664
|
var alignCenter = _a.alignCenter;
|
|
@@ -19659,17 +19670,17 @@ var Container$f = newStyled.div(templateObject_1$q || (templateObject_1$q = __ma
|
|
|
19659
19670
|
}, function (props) { return props.backgroundColor; }, function (props) { return props.textColor; }, function (props) {
|
|
19660
19671
|
return props.border ? "".concat(props.border.borderWidth, " solid ").concat(props.border.borderColor) : 'none';
|
|
19661
19672
|
});
|
|
19662
|
-
var TitleText = newStyled.div(templateObject_2$
|
|
19673
|
+
var TitleText = newStyled.div(templateObject_2$l || (templateObject_2$l = __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"])));
|
|
19663
19674
|
var BannerText = newStyled.div(templateObject_3$j || (templateObject_3$j = __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"])));
|
|
19664
19675
|
var ShortBanner = function (_a) {
|
|
19665
19676
|
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;
|
|
19666
19677
|
var theme = useTheme();
|
|
19667
19678
|
return (jsxRuntime.jsxs(Container$f, __assign$1({ backgroundColor: backgroundColor, alignCenter: alignCenter, widthAuto: widthAuto, "data-testid": "BannerContainer", theme: theme, textColor: textColor }, { children: [jsxRuntime.jsx(TitleText, { children: title }, void 0), jsxRuntime.jsx(BannerText, { children: bannerText }, void 0)] }), void 0));
|
|
19668
19679
|
};
|
|
19669
|
-
var templateObject_1$q, templateObject_2$
|
|
19680
|
+
var templateObject_1$q, templateObject_2$l, templateObject_3$j;
|
|
19670
19681
|
|
|
19671
19682
|
var TableElement$2 = newStyled.table(templateObject_1$p || (templateObject_1$p = __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; });
|
|
19672
|
-
var TableCell$2 = newStyled.td(templateObject_2$
|
|
19683
|
+
var TableCell$2 = newStyled.td(templateObject_2$k || (templateObject_2$k = __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; });
|
|
19673
19684
|
var TableHead$2 = newStyled.th(templateObject_3$i || (templateObject_3$i = __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; });
|
|
19674
19685
|
var Label$1 = newStyled('div')(templateObject_4$g || (templateObject_4$g = __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"])));
|
|
19675
19686
|
var TopLabel$1 = newStyled(Label$1)(templateObject_5$b || (templateObject_5$b = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
@@ -19678,7 +19689,7 @@ var Container$e = newStyled('div')(templateObject_7$9 || (templateObject_7$9 = _
|
|
|
19678
19689
|
var LabelText$1 = newStyled('span')(templateObject_8$7 || (templateObject_8$7 = __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"])));
|
|
19679
19690
|
var Column$1 = newStyled('div')(templateObject_9$4 || (templateObject_9$4 = __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"])));
|
|
19680
19691
|
var TableRow$2 = newStyled.tr(templateObject_10$4 || (templateObject_10$4 = __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; });
|
|
19681
|
-
var templateObject_1$p, templateObject_2$
|
|
19692
|
+
var templateObject_1$p, templateObject_2$k, templateObject_3$i, templateObject_4$g, templateObject_5$b, templateObject_6$a, templateObject_7$9, templateObject_8$7, templateObject_9$4, templateObject_10$4;
|
|
19682
19693
|
|
|
19683
19694
|
var getIsOdd$1 = function (number) { return number % 2 !== 0; };
|
|
19684
19695
|
var getCellColor$1 = function (index, cell) {
|
|
@@ -19720,7 +19731,7 @@ var SizeChartTable = function (_a) {
|
|
|
19720
19731
|
};
|
|
19721
19732
|
|
|
19722
19733
|
var TableElement$1 = newStyled.table(templateObject_1$o || (templateObject_1$o = __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; });
|
|
19723
|
-
var TableCell$1 = newStyled.td(templateObject_2$
|
|
19734
|
+
var TableCell$1 = newStyled.td(templateObject_2$j || (templateObject_2$j = __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; });
|
|
19724
19735
|
var TableHead$1 = newStyled.th(templateObject_3$h || (templateObject_3$h = __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; });
|
|
19725
19736
|
var TableRow$1 = newStyled.tr(templateObject_4$f || (templateObject_4$f = __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; });
|
|
19726
19737
|
var SizeTable = function (_a) {
|
|
@@ -19728,7 +19739,7 @@ var SizeTable = function (_a) {
|
|
|
19728
19739
|
var theme = useTheme();
|
|
19729
19740
|
return (jsxRuntime.jsxs(TableElement$1, __assign$1({ color: theme.colors.shades['700'].color, borderColor: theme.colors.shades['100'].color, className: className }, { children: [jsxRuntime.jsx("thead", { children: jsxRuntime.jsx(TableRow$1, __assign$1({ backgroundColor: theme.colors.shades['10'].color }, { children: headers.map(function (header, index) { return (jsxRuntime.jsx(TableHead$1, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: header }), index)); }) }), void 0) }, void 0), jsxRuntime.jsx("tbody", { children: data.map(function (row, index) { return (jsxRuntime.jsx(TableRow$1, __assign$1({ className: index % 2 !== 0 ? '' : 'background', backgroundColor: theme.colors.shades['10'].color }, { children: row.map(function (cell, index) { return (jsxRuntime.jsx(TableCell$1, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }), index)); }) }, void 0)] }), void 0));
|
|
19730
19741
|
};
|
|
19731
|
-
var templateObject_1$o, templateObject_2$
|
|
19742
|
+
var templateObject_1$o, templateObject_2$j, templateObject_3$h, templateObject_4$f;
|
|
19732
19743
|
|
|
19733
19744
|
var getStylesBySize$7 = function (size) {
|
|
19734
19745
|
switch (size) {
|
|
@@ -19774,20 +19785,20 @@ var TextButton = function (_a) {
|
|
|
19774
19785
|
var templateObject_1$n;
|
|
19775
19786
|
|
|
19776
19787
|
var Container$d = newStyled.div(templateObject_1$m || (templateObject_1$m = __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"])));
|
|
19777
|
-
var P = newStyled.p(templateObject_2$
|
|
19788
|
+
var P = newStyled.p(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n margin: 0;\n"], ["\n margin: 0;\n"])));
|
|
19778
19789
|
var PercentageSpan = newStyled.span(templateObject_3$g || (templateObject_3$g = __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"])));
|
|
19779
19790
|
var SizeFitGuide = function (_a) {
|
|
19780
19791
|
var title = _a.title, fitPercentage = _a.fitPercentage, onClick = _a.onClick, onClickFitPercentage = _a.onClickFitPercentage, _b = _a.hideIcon, hideIcon = _b === void 0 ? false : _b;
|
|
19781
19792
|
return (jsxRuntime.jsxs(Container$d, { children: [jsxRuntime.jsx(TextButton, { LeadingIcon: hideIcon ? undefined : Icon.PDP.Rule, size: exports.ComponentSize.Small, text: title, onClick: onClick, uppercase: false }, void 0), !!fitPercentage && (jsxRuntime.jsxs(P, { children: ["Fit As Expected:", ' ', jsxRuntime.jsxs(PercentageSpan, __assign$1({ onClick: onClickFitPercentage, role: "button" }, { children: [fitPercentage, "%"] }), void 0)] }, void 0))] }, void 0));
|
|
19782
19793
|
};
|
|
19783
|
-
var templateObject_1$m, templateObject_2$
|
|
19794
|
+
var templateObject_1$m, templateObject_2$i, templateObject_3$g;
|
|
19784
19795
|
|
|
19785
19796
|
var ButtonsContainer = newStyled.div(templateObject_1$l || (templateObject_1$l = __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) {
|
|
19786
19797
|
var inline = _a.inline;
|
|
19787
19798
|
return (inline ? '0 0 0 10px' : '8px 0 0 0');
|
|
19788
19799
|
});
|
|
19789
|
-
var Row = newStyled.div(templateObject_2$
|
|
19790
|
-
var templateObject_1$l, templateObject_2$
|
|
19800
|
+
var Row = newStyled.div(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n gap: 5px;\n display: flex;\n margin: 5px 0 3px;\n flex-wrap: wrap;\n\n & button {\n font-weight: 600;\n }\n"], ["\n gap: 5px;\n display: flex;\n margin: 5px 0 3px;\n flex-wrap: wrap;\n\n & button {\n font-weight: 600;\n }\n"])));
|
|
19801
|
+
var templateObject_1$l, templateObject_2$h;
|
|
19791
19802
|
|
|
19792
19803
|
var SizeSelector = function (_a) {
|
|
19793
19804
|
var _b;
|
|
@@ -19829,7 +19840,7 @@ var Tab = function (_a) {
|
|
|
19829
19840
|
var templateObject_1$k;
|
|
19830
19841
|
|
|
19831
19842
|
var Container$c = newStyled.div(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
|
|
19832
|
-
var TabList = newStyled.div(templateObject_2$
|
|
19843
|
+
var TabList = newStyled.div(templateObject_2$g || (templateObject_2$g = __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) {
|
|
19833
19844
|
var backgroundColor = _a.backgroundColor;
|
|
19834
19845
|
return backgroundColor;
|
|
19835
19846
|
}, function (_a) {
|
|
@@ -19848,7 +19859,7 @@ var Tabs = function (_a) {
|
|
|
19848
19859
|
var selectedContent = (_b = tabs.find(function (tab) { return tab.title === selectedTab; })) === null || _b === void 0 ? void 0 : _b.content;
|
|
19849
19860
|
return (jsxRuntime.jsxs(Container$c, __assign$1({ "data-testid": "tabs-container" }, { children: [jsxRuntime.jsx(TabList, __assign$1({ backgroundColor: backgroundColor, borderColor: fixedBorderColor }, { children: tabs.map(function (tab, index) { return (jsxRuntime.jsxs(React__default["default"].Fragment, { children: [jsxRuntime.jsx(Tab, { title: tab.title, selected: selectedTab === tab.title, onClick: setSelectedTab, tabsMaxWidth: tabsMaxWidth, color: selectedBorderColor }, tab.title), index + 1 < tabs.length && jsxRuntime.jsx(TabSeparator, { children: "|" }, void 0)] }, tab.title)); }) }), void 0), jsxRuntime.jsx(TabContent, __assign$1({ "data-testid": "tab-content" }, { children: selectedContent }), void 0)] }), void 0));
|
|
19850
19861
|
};
|
|
19851
|
-
var templateObject_1$j, templateObject_2$
|
|
19862
|
+
var templateObject_1$j, templateObject_2$g, templateObject_3$f, templateObject_4$e;
|
|
19852
19863
|
|
|
19853
19864
|
var Container$b = newStyled.div(templateObject_1$i || (templateObject_1$i = __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"])));
|
|
19854
19865
|
var Tag = function (_a) {
|
|
@@ -19967,7 +19978,7 @@ var SeasonOfferRoundedTag = function (_a) {
|
|
|
19967
19978
|
};
|
|
19968
19979
|
|
|
19969
19980
|
var ImageWrapper = newStyled.div(templateObject_1$h || (templateObject_1$h = __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"])));
|
|
19970
|
-
var VideoOverlay = newStyled.div(templateObject_2$
|
|
19981
|
+
var VideoOverlay = newStyled.div(templateObject_2$f || (templateObject_2$f = __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"])));
|
|
19971
19982
|
var FullscreenVideo = newStyled.div(templateObject_3$e || (templateObject_3$e = __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"])));
|
|
19972
19983
|
var ImageVideo = function (_a) {
|
|
19973
19984
|
var imageLink = _a.imageLink, isVideo = _a.isVideo, isMobile = _a.isMobile;
|
|
@@ -19988,10 +19999,10 @@ var ImageVideo = function (_a) {
|
|
|
19988
19999
|
height: '100%',
|
|
19989
20000
|
} }, void 0)] }, void 0))] }, void 0));
|
|
19990
20001
|
};
|
|
19991
|
-
var templateObject_1$h, templateObject_2$
|
|
20002
|
+
var templateObject_1$h, templateObject_2$f, templateObject_3$e;
|
|
19992
20003
|
|
|
19993
20004
|
var ContainerDesktop = css(templateObject_1$g || (templateObject_1$g = __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"])));
|
|
19994
|
-
var ContainerMobile = css(templateObject_2$
|
|
20005
|
+
var ContainerMobile = css(templateObject_2$e || (templateObject_2$e = __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"])));
|
|
19995
20006
|
var Container$a = newStyled.div(templateObject_3$d || (templateObject_3$d = __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);
|
|
19996
20007
|
var TextContainer = newStyled.div(templateObject_4$d || (templateObject_4$d = __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"])));
|
|
19997
20008
|
var TextWithImage = function (_a) {
|
|
@@ -20023,13 +20034,13 @@ var TextWithImage = function (_a) {
|
|
|
20023
20034
|
},
|
|
20024
20035
|
} }, 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));
|
|
20025
20036
|
};
|
|
20026
|
-
var templateObject_1$g, templateObject_2$
|
|
20037
|
+
var templateObject_1$g, templateObject_2$e, templateObject_3$d, templateObject_4$d;
|
|
20027
20038
|
|
|
20028
20039
|
var TimerContainer$1 = newStyled.div(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
20029
20040
|
var timerColor = _a.timerColor;
|
|
20030
20041
|
return timerColor || '';
|
|
20031
20042
|
});
|
|
20032
|
-
var TimerContainerV2 = newStyled.div(templateObject_2$
|
|
20043
|
+
var TimerContainerV2 = newStyled.div(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n color: ", ";\n display: flex;\n align-items: center;\n justify-content: space-around;\n gap: 10px;\n"], ["\n color: ", ";\n display: flex;\n align-items: center;\n justify-content: space-around;\n gap: 10px;\n"])), function (_a) {
|
|
20033
20044
|
var timerColor = _a.timerColor;
|
|
20034
20045
|
return timerColor || '';
|
|
20035
20046
|
});
|
|
@@ -20041,7 +20052,7 @@ var UnitBlock = newStyled(Text$7)(templateObject_3$c || (templateObject_3$c = __
|
|
|
20041
20052
|
return theme.colors.shades.white.color;
|
|
20042
20053
|
});
|
|
20043
20054
|
var Unit = newStyled.p(templateObject_4$c || (templateObject_4$c = __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"])));
|
|
20044
|
-
var templateObject_1$f, templateObject_2$
|
|
20055
|
+
var templateObject_1$f, templateObject_2$d, templateObject_3$c, templateObject_4$c;
|
|
20045
20056
|
|
|
20046
20057
|
var HRS = 'HRS';
|
|
20047
20058
|
var MIN = 'MIN';
|
|
@@ -20083,7 +20094,7 @@ var Timer = function (_a) {
|
|
|
20083
20094
|
};
|
|
20084
20095
|
|
|
20085
20096
|
var Wrapper$1 = newStyled.div(templateObject_1$e || (templateObject_1$e = __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"])));
|
|
20086
|
-
var GrandTotal = newStyled.h1(templateObject_2$
|
|
20097
|
+
var GrandTotal = newStyled.h1(templateObject_2$c || (templateObject_2$c = __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; });
|
|
20087
20098
|
var Currency = newStyled.span(templateObject_3$b || (templateObject_3$b = __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) {
|
|
20088
20099
|
var theme = _a.theme;
|
|
20089
20100
|
return theme.component.total.basicTotal.currency.color;
|
|
@@ -20111,7 +20122,7 @@ var DiscountAmount = newStyled.h3(templateObject_7$8 || (templateObject_7$8 = __
|
|
|
20111
20122
|
return theme.component.total.basicTotal.savings.amountFontWeight;
|
|
20112
20123
|
});
|
|
20113
20124
|
var TotalLabel = newStyled(Text$7)(templateObject_8$6 || (templateObject_8$6 = __makeTemplateObject(["\n font-size: 20px;\n"], ["\n font-size: 20px;\n"])));
|
|
20114
|
-
var templateObject_1$e, templateObject_2$
|
|
20125
|
+
var templateObject_1$e, templateObject_2$c, templateObject_3$b, templateObject_4$b, templateObject_5$a, templateObject_6$9, templateObject_7$8, templateObject_8$6;
|
|
20115
20126
|
|
|
20116
20127
|
var Total = function (_a) {
|
|
20117
20128
|
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;
|
|
@@ -20123,7 +20134,7 @@ var Wrapper = newStyled.div(templateObject_1$d || (templateObject_1$d = __makeTe
|
|
|
20123
20134
|
var color = _a.color;
|
|
20124
20135
|
return color;
|
|
20125
20136
|
});
|
|
20126
|
-
var ItemContainer = newStyled.div(templateObject_2$
|
|
20137
|
+
var ItemContainer = newStyled.div(templateObject_2$b || (templateObject_2$b = __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"])));
|
|
20127
20138
|
var Item = newStyled.h4(templateObject_3$a || (templateObject_3$a = __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) {
|
|
20128
20139
|
var theme = _a.theme;
|
|
20129
20140
|
return theme.component.subTotal.basicSubTotal.lineHeight;
|
|
@@ -20144,7 +20155,7 @@ var Subtotal = function (_a) {
|
|
|
20144
20155
|
return (jsxRuntime.jsxs(ItemContainer, { children: [jsxRuntime.jsxs(CouponItem, __assign$1({ color: highlightColor, "data-testid": "discount-title" }, { children: [coupon.couponText, " ", code, " ", coupon.appliedText] }), void 0), jsxRuntime.jsx(CouponItem, __assign$1({ color: highlightColor, "data-testid": "discount-price" }, { children: amount }), void 0)] }, code));
|
|
20145
20156
|
})] }), void 0));
|
|
20146
20157
|
};
|
|
20147
|
-
var templateObject_1$d, templateObject_2$
|
|
20158
|
+
var templateObject_1$d, templateObject_2$b, templateObject_3$a, templateObject_4$a;
|
|
20148
20159
|
|
|
20149
20160
|
var Totals = {
|
|
20150
20161
|
Total: Total,
|
|
@@ -20157,7 +20168,7 @@ var slideInAnimation = function (distanceFromTop) {
|
|
|
20157
20168
|
};
|
|
20158
20169
|
var mobileSlideInAnimation = function (distanceFromTop) {
|
|
20159
20170
|
if (distanceFromTop === void 0) { distanceFromTop = '85px'; }
|
|
20160
|
-
return keyframes(templateObject_2$
|
|
20171
|
+
return keyframes(templateObject_2$a || (templateObject_2$a = __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);
|
|
20161
20172
|
};
|
|
20162
20173
|
var ToastContainer = newStyled.div(templateObject_3$9 || (templateObject_3$9 = __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"])));
|
|
20163
20174
|
var ToastContent = newStyled.div(templateObject_4$9 || (templateObject_4$9 = __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) {
|
|
@@ -20178,7 +20189,7 @@ var ToastText = newStyled.p(templateObject_5$9 || (templateObject_5$9 = __makeTe
|
|
|
20178
20189
|
return severity === 'error' ? '#C64844' : '#292929';
|
|
20179
20190
|
});
|
|
20180
20191
|
var CloseIcon = newStyled.div(templateObject_6$8 || (templateObject_6$8 = __makeTemplateObject(["\n margin-inline-start: auto;\n cursor: pointer;\n"], ["\n margin-inline-start: auto;\n cursor: pointer;\n"])));
|
|
20181
|
-
var templateObject_1$c, templateObject_2$
|
|
20192
|
+
var templateObject_1$c, templateObject_2$a, templateObject_3$9, templateObject_4$9, templateObject_5$9, templateObject_6$8;
|
|
20182
20193
|
|
|
20183
20194
|
var Toast = React__default["default"].forwardRef(function (_a, ref) {
|
|
20184
20195
|
var severity = _a.severity, summary = _a.summary, life = _a.life, _b = _a.withCloseIcon, withCloseIcon = _b === void 0 ? true : _b, distanceFromTop = _a.distanceFromTop;
|
|
@@ -20199,7 +20210,7 @@ var Toast = React__default["default"].forwardRef(function (_a, ref) {
|
|
|
20199
20210
|
Toast.displayName = 'Toast';
|
|
20200
20211
|
|
|
20201
20212
|
var Container$8 = newStyled.div(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
20202
|
-
var CheckpointContainer$1 = newStyled.div(templateObject_2$
|
|
20213
|
+
var CheckpointContainer$1 = newStyled.div(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
20203
20214
|
var CheckpointDate$1 = newStyled.div(templateObject_3$8 || (templateObject_3$8 = __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; });
|
|
20204
20215
|
var CheckpointDateLabel$1 = newStyled.p(templateObject_4$8 || (templateObject_4$8 = __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'); });
|
|
20205
20216
|
var CheckpointDateAndDayLabel = newStyled.span(templateObject_5$8 || (templateObject_5$8 = __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"])));
|
|
@@ -20250,10 +20261,10 @@ var TrackingProgressV2 = function (_a) {
|
|
|
20250
20261
|
return (jsxRuntime.jsxs(CheckpointContainer$1, __assign$1({ "data-testid": "empty-checkpoint-track" }, { children: [jsxRuntime.jsxs(CheckpointDate$1, __assign$1({ currentSpace: "90px" }, { children: [jsxRuntime.jsx(CheckpointDateLabel$1, { lastElement: index + 1 === emptySpaces.length }, void 0), jsxRuntime.jsx(CheckpointDateLabel$1, { lastElement: index + 1 === emptySpaces.length }, void 0)] }), void 0), index + 1 !== emptySpaces.length && (jsxRuntime.jsx(ActiveCheckpointTrack$1, __assign$1({ trackColor: theme.colors.shades['200'].color }, { children: jsxRuntime.jsx(ActiveCheckpointDot$1, { firstElement: false }, void 0) }), void 0)), index + 1 === emptySpaces.length && (jsxRuntime.jsx(LastActiveCheckpointDot, __assign$1({ trackColor: theme.colors.shades['200'].color }, { children: jsxRuntime.jsx(ActiveCheckpointDot$1, { firstElement: false }, void 0) }), void 0)), jsxRuntime.jsx(CheckpointStatus$1, __assign$1({ finishedTrack: false }, { children: statusMessage }), void 0)] }), index));
|
|
20251
20262
|
})] }), void 0));
|
|
20252
20263
|
};
|
|
20253
|
-
var templateObject_1$b, templateObject_2$
|
|
20264
|
+
var templateObject_1$b, templateObject_2$9, templateObject_3$8, templateObject_4$8, templateObject_5$8, templateObject_6$7, templateObject_7$7, templateObject_8$5, templateObject_9$3, templateObject_10$3, templateObject_11$2;
|
|
20254
20265
|
|
|
20255
20266
|
var Container$7 = newStyled.div(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
20256
|
-
var CheckpointContainer = newStyled.div(templateObject_2$
|
|
20267
|
+
var CheckpointContainer = newStyled.div(templateObject_2$8 || (templateObject_2$8 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
20257
20268
|
var CheckpointDate = newStyled.div(templateObject_3$7 || (templateObject_3$7 = __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; });
|
|
20258
20269
|
var CheckpointDateLabel = newStyled.p(templateObject_4$7 || (templateObject_4$7 = __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'); });
|
|
20259
20270
|
var CheckpointStatus = newStyled.p(templateObject_5$7 || (templateObject_5$7 = __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'); });
|
|
@@ -20290,7 +20301,7 @@ var TrackingProgress = function (_a) {
|
|
|
20290
20301
|
return (jsxRuntime.jsxs(CheckpointContainer, __assign$1({ "data-testid": "empty-checkpoint-track" }, { children: [jsxRuntime.jsxs(CheckpointDate, __assign$1({ currentSpace: getCurrentSpace(index) }, { children: [jsxRuntime.jsx(CheckpointDateLabel, { lastElement: index + 1 === emptySpaces.length }, void 0), jsxRuntime.jsx(CheckpointDateLabel, { lastElement: index + 1 === emptySpaces.length }, void 0)] }), void 0), index + 1 !== emptySpaces.length && (jsxRuntime.jsx(ActiveCheckpointTrack, { trackColor: theme.colors.shades['200'].color, firstElement: false, lastElement: index + 2 === emptySpaces.length }, void 0)), jsxRuntime.jsx(CheckpointStatus, { finishedTrack: false }, void 0)] }), index));
|
|
20291
20302
|
})] }), void 0));
|
|
20292
20303
|
};
|
|
20293
|
-
var templateObject_1$a, templateObject_2$
|
|
20304
|
+
var templateObject_1$a, templateObject_2$8, templateObject_3$7, templateObject_4$7, templateObject_5$7, templateObject_6$6, templateObject_7$6, templateObject_8$4;
|
|
20294
20305
|
|
|
20295
20306
|
var TimerContainer = newStyled.div(templateObject_1$9 || (templateObject_1$9 = __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) {
|
|
20296
20307
|
var textPosition = _a.textPosition;
|
|
@@ -20335,7 +20346,7 @@ var borderSize = {
|
|
|
20335
20346
|
large: '3px',
|
|
20336
20347
|
};
|
|
20337
20348
|
var DEFAULT_COLOR = '#5EAD9B';
|
|
20338
|
-
var StyledSpinner = newStyled.div(templateObject_2$
|
|
20349
|
+
var StyledSpinner = newStyled.div(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n position: relative;\n height: 100%;\n width: 100%;\n top: 50%;\n left: 50%;\n box-sizing: border-box;\n border: ", " solid\n ", ";\n border-top-color: ", ";\n border-radius: 100%;\n animation: rotation ", "s infinite linear;\n\n @keyframes rotation {\n from {\n transform: translateX(-50%) translateY(-50%) rotate(0deg);\n }\n to {\n transform: translateX(-50%) translateY(-50%) rotate(359deg);\n }\n }\n"], ["\n position: relative;\n height: 100%;\n width: 100%;\n top: 50%;\n left: 50%;\n box-sizing: border-box;\n border: ", " solid\n ", ";\n border-top-color: ", ";\n border-radius: 100%;\n animation: rotation ", "s infinite linear;\n\n @keyframes rotation {\n from {\n transform: translateX(-50%) translateY(-50%) rotate(0deg);\n }\n to {\n transform: translateX(-50%) translateY(-50%) rotate(359deg);\n }\n }\n"])), function (_a) {
|
|
20339
20350
|
var size = _a.size;
|
|
20340
20351
|
return borderSize[size];
|
|
20341
20352
|
}, function (_a) {
|
|
@@ -20348,7 +20359,7 @@ var StyledSpinner = newStyled.div(templateObject_2$8 || (templateObject_2$8 = __
|
|
|
20348
20359
|
var _b = _a.duration, duration = _b === void 0 ? 0.7 : _b;
|
|
20349
20360
|
return duration;
|
|
20350
20361
|
});
|
|
20351
|
-
var templateObject_1$8, templateObject_2$
|
|
20362
|
+
var templateObject_1$8, templateObject_2$7;
|
|
20352
20363
|
|
|
20353
20364
|
var Spinner = function (_a) {
|
|
20354
20365
|
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;
|
|
@@ -20370,7 +20381,7 @@ var Shades700Color = '#292929';
|
|
|
20370
20381
|
var PrimaryColor = '#f7a08b';
|
|
20371
20382
|
var ClubBorderColor = '#882a2b';
|
|
20372
20383
|
var FlexContainer = newStyled.div(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
20373
|
-
var DiscountTag = newStyled.div(templateObject_2$
|
|
20384
|
+
var DiscountTag = newStyled.div(templateObject_2$6 || (templateObject_2$6 = __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);
|
|
20374
20385
|
var ContainerBase = newStyled.div(templateObject_3$6 || (templateObject_3$6 = __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) {
|
|
20375
20386
|
var selected = _a.selected;
|
|
20376
20387
|
return selected ? "1.5px solid ".concat(ClubBorderColor) : "1px solid ".concat(Shades200Color);
|
|
@@ -20412,7 +20423,7 @@ var StyledPrice = newStyled(PriceLabelV2$1)(templateObject_10$2 || (templateObje
|
|
|
20412
20423
|
: Shades200Color;
|
|
20413
20424
|
});
|
|
20414
20425
|
var Container$5 = newStyled.div(templateObject_11$1 || (templateObject_11$1 = __makeTemplateObject(["\n margin-top: 20px;\n"], ["\n margin-top: 20px;\n"])));
|
|
20415
|
-
var templateObject_1$7, templateObject_2$
|
|
20426
|
+
var templateObject_1$7, templateObject_2$6, templateObject_3$6, templateObject_4$6, templateObject_5$6, templateObject_6$5, templateObject_7$5, templateObject_8$3, templateObject_9$2, templateObject_10$2, templateObject_11$1;
|
|
20416
20427
|
|
|
20417
20428
|
var ClubOfferSelector = function (_a) {
|
|
20418
20429
|
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;
|
|
@@ -20465,11 +20476,11 @@ var ContainerWrapper = newStyled.div(templateObject_1$6 || (templateObject_1$6 =
|
|
|
20465
20476
|
var $checked = _a.$checked;
|
|
20466
20477
|
return ($checked ? '#FFE1B8' : '#E5E5E5');
|
|
20467
20478
|
});
|
|
20468
|
-
var CardHeaderWrapper = newStyled.div(templateObject_2$
|
|
20479
|
+
var CardHeaderWrapper = newStyled.div(templateObject_2$5 || (templateObject_2$5 = __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"])));
|
|
20469
20480
|
var CardBody = newStyled.div(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n font-family: Avenir Next;\n font-size: 12px;\n font-weight: 400;\n line-height: 16px;\n text-align: left;\n color: #292929;\n a {\n color: #292929;\n text-decoration: underline;\n }\n"], ["\n display: flex;\n flex-direction: column;\n font-family: Avenir Next;\n font-size: 12px;\n font-weight: 400;\n line-height: 16px;\n text-align: left;\n color: #292929;\n a {\n color: #292929;\n text-decoration: underline;\n }\n"])));
|
|
20470
20481
|
var ClubCopyWrapper = newStyled.div(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n gap: 5px;\n"], ["\n display: flex;\n flex-direction: row;\n gap: 5px;\n"])));
|
|
20471
20482
|
var ClubCopyTextWrapper = newStyled.div(templateObject_5$5 || (templateObject_5$5 = __makeTemplateObject(["\n font-family: Avenir Next;\n font-size: 14px;\n font-weight: 600;\n line-height: 22px;\n"], ["\n font-family: Avenir Next;\n font-size: 14px;\n font-weight: 600;\n line-height: 22px;\n"])));
|
|
20472
|
-
var templateObject_1$6, templateObject_2$
|
|
20483
|
+
var templateObject_1$6, templateObject_2$5, templateObject_3$5, templateObject_4$5, templateObject_5$5;
|
|
20473
20484
|
|
|
20474
20485
|
function Card(_a) {
|
|
20475
20486
|
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;
|
|
@@ -20495,20 +20506,20 @@ var ImageContainer$1 = newStyled.div(function (_a) {
|
|
|
20495
20506
|
});
|
|
20496
20507
|
});
|
|
20497
20508
|
var ImageHoverContainer$1 = newStyled.img(templateObject_1$5 || (templateObject_1$5 = __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"])));
|
|
20498
|
-
var Container$4 = newStyled.a(templateObject_2$
|
|
20509
|
+
var Container$4 = newStyled.a(templateObject_2$4 || (templateObject_2$4 = __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"])));
|
|
20499
20510
|
var ProdCardContainer$2 = newStyled.div(templateObject_3$4 || (templateObject_3$4 = __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"])));
|
|
20500
20511
|
var Title$2 = newStyled.p(templateObject_4$4 || (templateObject_4$4 = __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; });
|
|
20501
20512
|
newStyled.div(templateObject_5$4 || (templateObject_5$4 = __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) {
|
|
20502
20513
|
var style = _a.style;
|
|
20503
20514
|
return style.width;
|
|
20504
20515
|
});
|
|
20505
|
-
newStyled.div(templateObject_6$4 || (templateObject_6$4 = __makeTemplateObject(["\n position: absolute;\n bottom:
|
|
20516
|
+
var BottomTagContainer$2 = newStyled.div(templateObject_6$4 || (templateObject_6$4 = __makeTemplateObject(["\n position: absolute;\n bottom: ", ";\n z-index: 1;\n"], ["\n position: absolute;\n bottom: ", ";\n z-index: 1;\n"])), function (_a) {
|
|
20506
20517
|
var style = _a.style;
|
|
20507
|
-
return style.
|
|
20518
|
+
return style.bottom || '6%';
|
|
20508
20519
|
});
|
|
20509
20520
|
newStyled.div(templateObject_7$4 || (templateObject_7$4 = __makeTemplateObject(["\n margin-top: 8px;\n"], ["\n margin-top: 8px;\n"])));
|
|
20510
|
-
var DiscountLabel$2 = newStyled.div(templateObject_8$2 || (templateObject_8$2 = __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"])));
|
|
20511
|
-
var templateObject_1$5, templateObject_2$
|
|
20521
|
+
var DiscountLabel$2 = newStyled.div(templateObject_8$2 || (templateObject_8$2 = __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"])));
|
|
20522
|
+
var templateObject_1$5, templateObject_2$4, templateObject_3$4, templateObject_4$4, templateObject_5$4, templateObject_6$4, templateObject_7$4, templateObject_8$2;
|
|
20512
20523
|
|
|
20513
20524
|
var getStylesBySize$2 = function (size) {
|
|
20514
20525
|
switch (size) {
|
|
@@ -20519,8 +20530,8 @@ var getStylesBySize$2 = function (size) {
|
|
|
20519
20530
|
};
|
|
20520
20531
|
case exports.ComponentSize.Small:
|
|
20521
20532
|
return {
|
|
20522
|
-
width: '
|
|
20523
|
-
height: '
|
|
20533
|
+
width: '167px',
|
|
20534
|
+
height: '223px',
|
|
20524
20535
|
};
|
|
20525
20536
|
case exports.ComponentSize.Large:
|
|
20526
20537
|
return {
|
|
@@ -20539,19 +20550,6 @@ var TopTagContainer$2 = newStyled.div(templateObject_1$4 || (templateObject_1$4
|
|
|
20539
20550
|
var style = _a.style;
|
|
20540
20551
|
return style.width;
|
|
20541
20552
|
});
|
|
20542
|
-
var BottomTagContainer$2 = newStyled.div(templateObject_2$4 || (templateObject_2$4 = __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) {
|
|
20543
|
-
var _b;
|
|
20544
|
-
var style = _a.style;
|
|
20545
|
-
return (_b = style.bottom) !== null && _b !== void 0 ? _b : '6%';
|
|
20546
|
-
}, function (_a) {
|
|
20547
|
-
var _b;
|
|
20548
|
-
var style = _a.style;
|
|
20549
|
-
return (_b = style.right) !== null && _b !== void 0 ? _b : 0;
|
|
20550
|
-
}, function (_a) {
|
|
20551
|
-
var _b;
|
|
20552
|
-
var style = _a.style;
|
|
20553
|
-
return (_b = style.width) !== null && _b !== void 0 ? _b : 'auto';
|
|
20554
|
-
});
|
|
20555
20553
|
var ProductCard = function (_a) {
|
|
20556
20554
|
var title = _a.title, image = _a.image, imageHover = _a.imageHover, price = _a.price, rating = _a.rating, size = _a.size, _b = _a.alignName, alignName = _b === void 0 ? 'center' : _b, url = _a.url, className = _a.className, topTag = _a.topTag, bottomTag = _a.bottomTag, onClick = _a.onClick, priceLoading = _a.priceLoading, _c = _a.noFollow, noFollow = _c === void 0 ? false : _c, isRatingLoading = _a.isRatingLoading, discountTag = _a.discountTag;
|
|
20557
20555
|
var theme = useTheme();
|
|
@@ -20565,7 +20563,7 @@ var ProductCard = function (_a) {
|
|
|
20565
20563
|
_a)[size];
|
|
20566
20564
|
}, [size]);
|
|
20567
20565
|
var PriceLabelDisplay = function () {
|
|
20568
|
-
return (jsxRuntime.jsxs("div", __assign$1({ style: { display: 'flex' } }, { children: [jsxRuntime.jsx(PriceLabel, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, finalPriceStyled: false, color: price.color, size: exports.ComponentSize.Large, testId: "volume-discount" }, void 0), jsxRuntime.jsx(DiscountLabel$2, __assign$1({ style: { marginLeft: '5px' } }, { children: discountTag }), void 0)] }), void 0));
|
|
20566
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", __assign$1({ style: { display: 'flex' } }, { children: [jsxRuntime.jsx(PriceLabel, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, finalPriceStyled: false, color: price.color, size: exports.ComponentSize.Large, testId: "volume-discount" }, void 0), (discountTag === null || discountTag === void 0 ? void 0 : discountTag.pos) === 'next to price' && (jsxRuntime.jsx(DiscountLabel$2, __assign$1({ style: { marginLeft: '5px' } }, { children: discountTag === null || discountTag === void 0 ? void 0 : discountTag.value }), void 0))] }), void 0), jsxRuntime.jsx("div", __assign$1({ style: { display: 'flex' } }, { children: (discountTag === null || discountTag === void 0 ? void 0 : discountTag.pos) === 'below price' && (jsxRuntime.jsx(DiscountLabel$2, __assign$1({ style: { marginLeft: '5px' } }, { children: discountTag === null || discountTag === void 0 ? void 0 : discountTag.value }), void 0)) }), void 0)] }, void 0));
|
|
20569
20567
|
};
|
|
20570
20568
|
var RatingDisplay = function () {
|
|
20571
20569
|
if (isRatingLoading)
|
|
@@ -20574,9 +20572,9 @@ var ProductCard = function (_a) {
|
|
|
20574
20572
|
return jsxRuntime.jsx(jsxRuntime.Fragment, {}, void 0);
|
|
20575
20573
|
return (jsxRuntime.jsx(Rating, { size: size === exports.ComponentSize.Large ? exports.ComponentSize.Small : exports.ComponentSize.XSmall, rating: rating.rating, reviews: rating.reviews, reviewsText: "", wrapWithParenthesis: true }, void 0));
|
|
20576
20574
|
};
|
|
20577
|
-
return (jsxRuntime.jsxs(ProdCardContainer$2, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxRuntime.jsxs(Container$4, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', className: "picContainer", onClick: onClick }, { children: [!!topTag || !!bottomTag ? (jsxRuntime.jsxs(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: [jsxRuntime.jsx(Image$3, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, width: "100%", height: "100%" }, void 0), jsxRuntime.jsx(TopTagContainer$2, __assign$1({ style: { width: 'inherit' } }, { children: topTag }), void 0), jsxRuntime.jsx(BottomTagContainer$2, __assign$1({ style: { width: 'inherit' } }, { children: bottomTag }), void 0)] }), void 0)) : (jsxRuntime.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 }, void 0)), imageHover ? (jsxRuntime.jsx(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), jsxRuntime.jsxs(Container$4, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', onClick: onClick, className: "textContainer", style: { alignItems: 'center' } }, { children: [jsxRuntime.jsx(Spacing, { size: space }, void 0), jsxRuntime.jsx(Title$2, __assign$1({ theme: theme, align: alignName }, { children: title }), void 0), jsxRuntime.jsx(Spacing, { size: space }, void 0), priceLoading ? jsxRuntime.jsx(SkeletonBox, { height: "20px", width: "140px" }, void 0) : PriceLabelDisplay(), jsxRuntime.jsx(Spacing, { size: space }, void 0)
|
|
20575
|
+
return (jsxRuntime.jsxs(ProdCardContainer$2, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxRuntime.jsxs(Container$4, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', className: "picContainer", onClick: onClick }, { children: [!!topTag || !!bottomTag ? (jsxRuntime.jsxs(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: [jsxRuntime.jsx(Image$3, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, width: "100%", height: "100%" }, void 0), jsxRuntime.jsx(TopTagContainer$2, __assign$1({ style: { width: 'inherit' } }, { children: topTag }), void 0), jsxRuntime.jsx(BottomTagContainer$2, __assign$1({ style: { width: 'inherit' } }, { children: bottomTag }), void 0)] }), void 0)) : (jsxRuntime.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 }, void 0)), imageHover ? (jsxRuntime.jsx(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), jsxRuntime.jsxs(Container$4, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', onClick: onClick, className: "textContainer", style: { alignItems: "".concat(size === exports.ComponentSize.Small ? 'start' : 'center') } }, { children: [jsxRuntime.jsx(Spacing, { size: space }, void 0), jsxRuntime.jsx(RatingDisplay, {}, void 0), jsxRuntime.jsx(Spacing, { size: space }, void 0), jsxRuntime.jsx(Title$2, __assign$1({ theme: theme, align: alignName }, { children: title }), void 0), jsxRuntime.jsx(Spacing, { size: space }, void 0), priceLoading ? jsxRuntime.jsx(SkeletonBox, { height: "20px", width: "140px" }, void 0) : PriceLabelDisplay(), jsxRuntime.jsx(Spacing, { size: space }, void 0)] }), void 0)] }), void 0));
|
|
20578
20576
|
};
|
|
20579
|
-
var templateObject_1$4
|
|
20577
|
+
var templateObject_1$4;
|
|
20580
20578
|
|
|
20581
20579
|
var ImageContainer = newStyled.div(function (_a) {
|
|
20582
20580
|
var width = _a.width, height = _a.height;
|