@trafilea/afrodita-components 6.33.4 → 6.34.0
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 +19 -3
- package/build/index.esm.js +601 -576
- package/build/index.esm.js.map +1 -1
- package/build/index.js +601 -575
- package/build/index.js.map +1 -1
- package/package.json +3 -18
package/build/index.js
CHANGED
|
@@ -3207,7 +3207,7 @@ var getStylesBySize$g = function (size) {
|
|
|
3207
3207
|
};
|
|
3208
3208
|
}
|
|
3209
3209
|
};
|
|
3210
|
-
var Container$1l = newStyled.div(templateObject_1$
|
|
3210
|
+
var Container$1l = newStyled.div(templateObject_1$2g || (templateObject_1$2g = __makeTemplateObject(["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n padding: ", ";\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: ", ";\n text-align: center;\n cursor: default;\n"], ["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n padding: ", ";\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: ", ";\n text-align: center;\n cursor: default;\n"])), function (_a) {
|
|
3211
3211
|
var backgroundColor = _a.backgroundColor;
|
|
3212
3212
|
return backgroundColor;
|
|
3213
3213
|
}, function (_a) {
|
|
@@ -3229,7 +3229,7 @@ var Container$1l = newStyled.div(templateObject_1$2f || (templateObject_1$2f = _
|
|
|
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$1C || (templateObject_2$1C = __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$1l, __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$
|
|
3249
|
+
var templateObject_1$2g, templateObject_2$1C;
|
|
3250
3250
|
|
|
3251
3251
|
var getStylesBySize$f = function (size, bordersRounded, theme) {
|
|
3252
3252
|
var _a, _b, _c;
|
|
@@ -3277,7 +3277,7 @@ var getStylesBySize$f = function (size, bordersRounded, theme) {
|
|
|
3277
3277
|
};
|
|
3278
3278
|
}
|
|
3279
3279
|
};
|
|
3280
|
-
var Container$1k = newStyled.div(templateObject_1$
|
|
3280
|
+
var Container$1k = newStyled.div(templateObject_1$2f || (templateObject_1$2f = __makeTemplateObject(["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n padding: ", ";\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: ", ";\n text-align: center;\n cursor: default;\n"], ["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n padding: ", ";\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: ", ";\n text-align: center;\n cursor: default;\n"])), function (_a) {
|
|
3281
3281
|
var backgroundColor = _a.backgroundColor;
|
|
3282
3282
|
return backgroundColor;
|
|
3283
3283
|
}, function (_a) {
|
|
@@ -3299,7 +3299,7 @@ var Container$1k = newStyled.div(templateObject_1$2e || (templateObject_1$2e = _
|
|
|
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$1B || (templateObject_2$1B = __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$3 = function (_a) {
|
|
|
3316
3316
|
var theme = useTheme();
|
|
3317
3317
|
return (jsxRuntime.jsx(Container$1k, __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$
|
|
3319
|
+
var templateObject_1$2f, templateObject_2$1B;
|
|
3320
3320
|
|
|
3321
3321
|
var Viewports = {
|
|
3322
3322
|
mobile: 'mobile',
|
|
@@ -3425,8 +3425,8 @@ var getFontSize = function (size, theme, finalPriceStyled, finalPriceStyledSmall
|
|
|
3425
3425
|
return (_c = getStylesBySize$e(size, theme)) === null || _c === void 0 ? void 0 : _c.fontSize;
|
|
3426
3426
|
}
|
|
3427
3427
|
};
|
|
3428
|
-
var Container$1j = newStyled.div(templateObject_1$
|
|
3429
|
-
var Price = newStyled.p(templateObject_2$
|
|
3428
|
+
var Container$1j = newStyled.div(templateObject_1$2e || (templateObject_1$2e = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
3429
|
+
var Price = newStyled.p(templateObject_2$1A || (templateObject_2$1A = __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) {
|
|
@@ -3450,7 +3450,7 @@ var Price = newStyled.p(templateObject_2$1z || (templateObject_2$1z = __makeTemp
|
|
|
3450
3450
|
var finalPriceStyledSmall = _a.finalPriceStyledSmall, size = _a.size;
|
|
3451
3451
|
return finalPriceStyledSmall ? (size === 'large' ? '-6px' : '-7px') : '0';
|
|
3452
3452
|
});
|
|
3453
|
-
var TagContainer = newStyled.div(templateObject_3$
|
|
3453
|
+
var TagContainer = newStyled.div(templateObject_3$1d || (templateObject_3$1d = __makeTemplateObject(["\n margin: ", ";\n display: flex;\n align-items: center;\n"], ["\n margin: ", ";\n display: flex;\n align-items: center;\n"])), function (_a) {
|
|
3454
3454
|
var _b;
|
|
3455
3455
|
var size = _a.size;
|
|
3456
3456
|
return (_b = getStylesBySize$e(size)) === null || _b === void 0 ? void 0 : _b.margin;
|
|
@@ -3483,9 +3483,9 @@ var PriceLabel$1 = function (_a) {
|
|
|
3483
3483
|
};
|
|
3484
3484
|
return (jsxRuntime.jsxs(Container$1j, __assign$1({}, rest, { id: "priceLabel" }, { children: [clubStyle ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [!!originalPrice && jsxRuntime.jsx(OriginalPrice, {}, void 0), jsxRuntime.jsx(Price, __assign$1({ margin: true, "data-testid": getTestId$1(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: finalPrice }), void 0)] }, void 0)) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Price, __assign$1({ margin: true, "data-testid": getTestId$1(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: finalPrice }), void 0), !!originalPrice && jsxRuntime.jsx(OriginalPrice, {}, void 0)] }, void 0)), discount && (jsxRuntime.jsx(TagContainer, __assign$1({ size: size }, { children: jsxRuntime.jsx(DiscountTag$3, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
|
|
3485
3485
|
};
|
|
3486
|
-
var templateObject_1$
|
|
3486
|
+
var templateObject_1$2e, templateObject_2$1A, templateObject_3$1d;
|
|
3487
3487
|
|
|
3488
|
-
var FinalPriceStyledContainer$3 = newStyled.div(templateObject_1$
|
|
3488
|
+
var FinalPriceStyledContainer$3 = newStyled.div(templateObject_1$2d || (templateObject_1$2d = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
3489
3489
|
var PriceLabelV2$1 = function (_a) {
|
|
3490
3490
|
var _b;
|
|
3491
3491
|
var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, discount = _a.discount, clubOffer = _a.clubOffer, color = _a.color, testId = _a.testId, _c = _a.originalPriceStyled, originalPriceStyled = _c === void 0 ? false : _c, _d = _a.originalPriceUnderlined, originalPriceUnderlined = _d === void 0 ? true : _d, _e = _a.size, size = _e === void 0 ? exports.ComponentSize.Small : _e, _f = _a.bordersRounded, bordersRounded = _f === void 0 ? false : _f, _g = _a.savingsDisplay, savingsDisplay = _g === void 0 ? true : _g, pricePerItem = _a.pricePerItem, _h = _a.hasRoundedSavings, hasRoundedSavings = _h === void 0 ? true : _h, rest = __rest(_a, ["finalPrice", "originalPrice", "discount", "clubOffer", "color", "testId", "originalPriceStyled", "originalPriceUnderlined", "size", "bordersRounded", "savingsDisplay", "pricePerItem", "hasRoundedSavings"]);
|
|
@@ -3554,11 +3554,11 @@ var PriceLabelV2$1 = function (_a) {
|
|
|
3554
3554
|
lineHeight: '22px',
|
|
3555
3555
|
} }), void 0)) }), void 0))] }), void 0));
|
|
3556
3556
|
};
|
|
3557
|
-
var templateObject_1$
|
|
3557
|
+
var templateObject_1$2d;
|
|
3558
3558
|
|
|
3559
|
-
var FinalPriceStyledContainer$2 = newStyled.div(templateObject_1$
|
|
3560
|
-
var ContainerDirectionColumn = newStyled.div(templateObject_2$
|
|
3561
|
-
var DiscountEachOneContainer = newStyled.div(templateObject_3$
|
|
3559
|
+
var FinalPriceStyledContainer$2 = newStyled.div(templateObject_1$2c || (templateObject_1$2c = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
3560
|
+
var ContainerDirectionColumn = newStyled.div(templateObject_2$1z || (templateObject_2$1z = __makeTemplateObject(["\n display: column;\n align-items: center;\n"], ["\n display: column;\n align-items: center;\n"])));
|
|
3561
|
+
var DiscountEachOneContainer = newStyled.div(templateObject_3$1c || (templateObject_3$1c = __makeTemplateObject(["\n display: flex;\n padding-left: 0.5rem;\n"], ["\n display: flex;\n padding-left: 0.5rem;\n"])));
|
|
3562
3562
|
var PriceLabelV3 = function (_a) {
|
|
3563
3563
|
var _b;
|
|
3564
3564
|
var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, discount = _a.discount, clubOffer = _a.clubOffer, color = _a.color, testId = _a.testId, _c = _a.originalPriceStyled, originalPriceStyled = _c === void 0 ? false : _c, _d = _a.originalPriceUnderlined, originalPriceUnderlined = _d === void 0 ? true : _d, _e = _a.size, size = _e === void 0 ? exports.ComponentSize.Small : _e, _f = _a.bordersRounded, bordersRounded = _f === void 0 ? false : _f, _g = _a.savingsDisplay, savingsDisplay = _g === void 0 ? true : _g, itemsQuantity = _a.itemsQuantity, packUnitPrice = _a.packUnitPrice, rest = __rest(_a, ["finalPrice", "originalPrice", "discount", "clubOffer", "color", "testId", "originalPriceStyled", "originalPriceUnderlined", "size", "bordersRounded", "savingsDisplay", "itemsQuantity", "packUnitPrice"]);
|
|
@@ -3629,9 +3629,9 @@ var PriceLabelV3 = function (_a) {
|
|
|
3629
3629
|
lineHeight: '22px',
|
|
3630
3630
|
} }), void 0)) }), void 0))] }, void 0)] }), void 0));
|
|
3631
3631
|
};
|
|
3632
|
-
var templateObject_1$
|
|
3632
|
+
var templateObject_1$2c, templateObject_2$1z, templateObject_3$1c;
|
|
3633
3633
|
|
|
3634
|
-
var FinalPriceStyledContainer$1 = newStyled.div(templateObject_1$
|
|
3634
|
+
var FinalPriceStyledContainer$1 = newStyled.div(templateObject_1$2b || (templateObject_1$2b = __makeTemplateObject(["\n display: flex;\n margin-left: -5px;\n"], ["\n display: flex;\n margin-left: -5px;\n"])));
|
|
3635
3635
|
var PriceLabel = function (_a) {
|
|
3636
3636
|
var _b;
|
|
3637
3637
|
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"]);
|
|
@@ -3665,9 +3665,9 @@ var PriceLabel = function (_a) {
|
|
|
3665
3665
|
marginTop: '-6px',
|
|
3666
3666
|
} }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }), void 0)] }), void 0));
|
|
3667
3667
|
};
|
|
3668
|
-
var templateObject_1$
|
|
3668
|
+
var templateObject_1$2b;
|
|
3669
3669
|
|
|
3670
|
-
var FinalPriceStyledContainer = newStyled.div(templateObject_1$
|
|
3670
|
+
var FinalPriceStyledContainer = newStyled.div(templateObject_1$2a || (templateObject_1$2a = __makeTemplateObject(["\n display: flex;\n margin-left: -5px;\n"], ["\n display: flex;\n margin-left: -5px;\n"])));
|
|
3671
3671
|
var PriceLabelV2 = function (_a) {
|
|
3672
3672
|
var _b;
|
|
3673
3673
|
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"]);
|
|
@@ -3700,11 +3700,11 @@ var PriceLabelV2 = function (_a) {
|
|
|
3700
3700
|
: (_b = "".concat(finalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1];
|
|
3701
3701
|
return (jsxRuntime.jsxs(Container$1j, __assign$1({}, rest, { children: [isOriginalPrice && !isClubOffer && jsxRuntime.jsx(OriginalPrice, {}, void 0), jsxRuntime.jsxs(FinalPriceStyledContainer, __assign$1({ "data-testid": getTestId$1(testId, 'final-product-price'), style: { marginLeft: '-3px' } }, { children: [jsxRuntime.jsxs(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size }, { children: [currencySymbol, finalPriceString] }), void 0), jsxRuntime.jsx(Price, __assign$1({ finalPriceStyledSmall: true }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }), void 0)] }), void 0));
|
|
3702
3702
|
};
|
|
3703
|
-
var templateObject_1$
|
|
3703
|
+
var templateObject_1$2a;
|
|
3704
3704
|
|
|
3705
|
-
var ContainerWrapper$2 = newStyled.div(templateObject_1$
|
|
3706
|
-
var ImgWrapper = newStyled.div(templateObject_2$
|
|
3707
|
-
var templateObject_1$
|
|
3705
|
+
var ContainerWrapper$2 = newStyled.div(templateObject_1$29 || (templateObject_1$29 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 2px;\n"], ["\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 2px;\n"])));
|
|
3706
|
+
var ImgWrapper = newStyled.div(templateObject_2$1y || (templateObject_2$1y = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n width: 50px auto;\n height: 20px;\n opacity: 0px;\n position: relative;\n"], ["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n width: 50px auto;\n height: 20px;\n opacity: 0px;\n position: relative;\n"])));
|
|
3707
|
+
var templateObject_1$29, templateObject_2$1y;
|
|
3708
3708
|
|
|
3709
3709
|
function ClubPriceMemberLabel(_a) {
|
|
3710
3710
|
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"]);
|
|
@@ -3713,7 +3713,7 @@ function ClubPriceMemberLabel(_a) {
|
|
|
3713
3713
|
return (jsxRuntime.jsx("div", { children: isClub ? (jsxRuntime.jsxs(ContainerWrapper$2, __assign$1({ id: "priceMemberLabelWrapper" }, { children: [PriceComponent, jsxRuntime.jsx(ImgWrapper, __assign$1({ id: "priceMemberLabelImgWrapper" }, { children: icon }), void 0)] }), void 0)) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: PriceComponent }, void 0)) }, void 0));
|
|
3714
3714
|
}
|
|
3715
3715
|
|
|
3716
|
-
var Container$1i = newStyled.div(templateObject_1$
|
|
3716
|
+
var Container$1i = newStyled.div(templateObject_1$28 || (templateObject_1$28 = __makeTemplateObject(["\n @keyframes shimmer {\n 100% {\n transform: translateX(100%);\n }\n }\n\n display: inline-block;\n height: ", ";\n width: ", ";\n position: relative;\n overflow: hidden;\n background-color: ", ";\n border-radius: ", ";\n box-sizing: border-box;\n\n ::after {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n transform: translateX(-100%);\n background-image: linear-gradient(\n 90deg,\n ", ",\n ", ",\n ", "\n );\n animation: shimmer 2s infinite;\n content: '';\n box-sizing: border-box;\n }\n"], ["\n @keyframes shimmer {\n 100% {\n transform: translateX(100%);\n }\n }\n\n display: inline-block;\n height: ", ";\n width: ", ";\n position: relative;\n overflow: hidden;\n background-color: ", ";\n border-radius: ", ";\n box-sizing: border-box;\n\n ::after {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n transform: translateX(-100%);\n background-image: linear-gradient(\n 90deg,\n ", ",\n ", ",\n ", "\n );\n animation: shimmer 2s infinite;\n content: '';\n box-sizing: border-box;\n }\n"])), function (_a) {
|
|
3717
3717
|
var height = _a.height;
|
|
3718
3718
|
return height !== null && height !== void 0 ? height : '1.5em';
|
|
3719
3719
|
}, function (_a) {
|
|
@@ -3740,9 +3740,9 @@ var SkeletonBox = function (_a) {
|
|
|
3740
3740
|
var theme = useTheme();
|
|
3741
3741
|
return jsxRuntime.jsx(Container$1i, { "data-testid": "skeleton-container", width: width, height: height, theme: theme }, void 0);
|
|
3742
3742
|
};
|
|
3743
|
-
var templateObject_1$
|
|
3743
|
+
var templateObject_1$28;
|
|
3744
3744
|
|
|
3745
|
-
var StyledSvgWrapper = newStyled.svg(templateObject_1$
|
|
3745
|
+
var StyledSvgWrapper = newStyled.svg(templateObject_1$27 || (templateObject_1$27 = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n color: ", ";\n display: inline-block;\n vertical-align: middle;\n flex: none;\n ", "\n ", "\n"], ["\n width: ", ";\n height: ", ";\n color: ", ";\n display: inline-block;\n vertical-align: middle;\n flex: none;\n ", "\n ", "\n"])), function (_a) {
|
|
3746
3746
|
var width = _a.width;
|
|
3747
3747
|
return width;
|
|
3748
3748
|
}, function (_a) {
|
|
@@ -3758,7 +3758,7 @@ var StyledSvgWrapper = newStyled.svg(templateObject_1$26 || (templateObject_1$26
|
|
|
3758
3758
|
var opacity = _a.opacity;
|
|
3759
3759
|
return opacity && "opacity: ".concat(opacity, ";");
|
|
3760
3760
|
});
|
|
3761
|
-
var StyledImageWrapper = newStyled.img(templateObject_2$
|
|
3761
|
+
var StyledImageWrapper = newStyled.img(templateObject_2$1x || (templateObject_2$1x = __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) {
|
|
3762
3762
|
var width = _a.width;
|
|
3763
3763
|
return width;
|
|
3764
3764
|
}, function (_a) {
|
|
@@ -3771,7 +3771,7 @@ var StyledImageWrapper = newStyled.img(templateObject_2$1w || (templateObject_2$
|
|
|
3771
3771
|
var opacity = _a.opacity;
|
|
3772
3772
|
return opacity && "opacity: ".concat(opacity, ";");
|
|
3773
3773
|
});
|
|
3774
|
-
var templateObject_1$
|
|
3774
|
+
var templateObject_1$27, templateObject_2$1x;
|
|
3775
3775
|
|
|
3776
3776
|
/* eslint-disable no-undef */
|
|
3777
3777
|
var cache = new Map();
|
|
@@ -3947,7 +3947,7 @@ var buildImageUrl = function (_a) {
|
|
|
3947
3947
|
}
|
|
3948
3948
|
};
|
|
3949
3949
|
|
|
3950
|
-
var Img = newStyled.img(templateObject_1$
|
|
3950
|
+
var Img = newStyled.img(templateObject_1$26 || (templateObject_1$26 = __makeTemplateObject(["\n height: ", ";\n width: ", ";\n border-radius: ", ";\n object-fit: ", ";\n object-position: ", ";\n"], ["\n height: ", ";\n width: ", ";\n border-radius: ", ";\n object-fit: ", ";\n object-position: ", ";\n"])), function (props) { return props.height; }, function (props) { return props.width; }, function (props) { return props.borderRadius; }, function (props) { return props.objectFit; }, function (props) { return props.objectPosition; });
|
|
3951
3951
|
var Image$3 = function (_a) {
|
|
3952
3952
|
var src = _a.src, srcSet = _a.srcSet, _b = _a.sizes, sizes = _b === void 0 ? '100vw' : _b, _c = _a.loading, loading = _c === void 0 ? 'lazy' : _c, _d = _a.decoding, decoding = _d === void 0 ? 'async' : _d, alt = _a.alt, height = _a.height, width = _a.width, borderRadius = _a.borderRadius, objectFit = _a.objectFit, objectPosition = _a.objectPosition, quality = _a.quality, rest = __rest(_a, ["src", "srcSet", "sizes", "loading", "decoding", "alt", "height", "width", "borderRadius", "objectFit", "objectPosition", "quality"]);
|
|
3953
3953
|
var config = useTheme().config;
|
|
@@ -3956,15 +3956,15 @@ var Image$3 = function (_a) {
|
|
|
3956
3956
|
: src;
|
|
3957
3957
|
return (jsxRuntime.jsx(Img, __assign$1({ src: source, srcSet: srcSet, sizes: sizes, loading: loading, decoding: decoding, alt: alt, height: height, width: width, borderRadius: borderRadius, objectFit: objectFit, objectPosition: objectPosition }, rest), void 0));
|
|
3958
3958
|
};
|
|
3959
|
-
var templateObject_1$
|
|
3959
|
+
var templateObject_1$26;
|
|
3960
3960
|
|
|
3961
|
-
var LabelWrapper = newStyled.label(templateObject_1$
|
|
3962
|
-
var SwitchWrapper = newStyled.div(templateObject_2$
|
|
3963
|
-
var InputWrapper$1 = newStyled.input(templateObject_3$
|
|
3961
|
+
var LabelWrapper = newStyled.label(templateObject_1$25 || (templateObject_1$25 = __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"])));
|
|
3962
|
+
var SwitchWrapper = newStyled.div(templateObject_2$1w || (templateObject_2$1w = __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"])));
|
|
3963
|
+
var InputWrapper$1 = newStyled.input(templateObject_3$1b || (templateObject_3$1b = __makeTemplateObject(["\n opacity: 0;\n position: absolute;\n\n &:checked + div {\n background: ", ";\n\n &:before {\n transform: translate(14.5px, -50%);\n }\n }\n"], ["\n opacity: 0;\n position: absolute;\n\n &:checked + div {\n background: ", ";\n\n &:before {\n transform: translate(14.5px, -50%);\n }\n }\n"])), function (_a) {
|
|
3964
3964
|
var $color = _a.$color;
|
|
3965
3965
|
return $color;
|
|
3966
3966
|
});
|
|
3967
|
-
var templateObject_1$
|
|
3967
|
+
var templateObject_1$25, templateObject_2$1w, templateObject_3$1b;
|
|
3968
3968
|
|
|
3969
3969
|
var ToggleComponent = function (_a) {
|
|
3970
3970
|
var onToggle = _a.onToggle, _b = _a.isChecked, isChecked = _b === void 0 ? false : _b, _c = _a.color, color = _c === void 0 ? '#882a2b' : _c;
|
|
@@ -4798,13 +4798,13 @@ function jsxs(type, props, key) {
|
|
|
4798
4798
|
// This defines which HTML tag to render for each `variant`, it also defines
|
|
4799
4799
|
// `variants` styles that are consistent through all themes.
|
|
4800
4800
|
var TAGS = {
|
|
4801
|
-
hero1: newStyled.h1(templateObject_1$
|
|
4802
|
-
hero2: newStyled.h2(templateObject_2$
|
|
4803
|
-
hero3: newStyled.h3(templateObject_3$
|
|
4804
|
-
display1: newStyled.h1(templateObject_4$
|
|
4805
|
-
display2: newStyled.h2(templateObject_5$
|
|
4806
|
-
display3: newStyled.h3(templateObject_6$
|
|
4807
|
-
heading1: newStyled.h1(templateObject_7$
|
|
4801
|
+
hero1: newStyled.h1(templateObject_1$24 || (templateObject_1$24 = __makeTemplateObject([""], [""]))),
|
|
4802
|
+
hero2: newStyled.h2(templateObject_2$1v || (templateObject_2$1v = __makeTemplateObject([""], [""]))),
|
|
4803
|
+
hero3: newStyled.h3(templateObject_3$1a || (templateObject_3$1a = __makeTemplateObject([""], [""]))),
|
|
4804
|
+
display1: newStyled.h1(templateObject_4$Y || (templateObject_4$Y = __makeTemplateObject([""], [""]))),
|
|
4805
|
+
display2: newStyled.h2(templateObject_5$J || (templateObject_5$J = __makeTemplateObject([""], [""]))),
|
|
4806
|
+
display3: newStyled.h3(templateObject_6$E || (templateObject_6$E = __makeTemplateObject([""], [""]))),
|
|
4807
|
+
heading1: newStyled.h1(templateObject_7$u || (templateObject_7$u = __makeTemplateObject([""], [""]))),
|
|
4808
4808
|
heading2: newStyled.h2(templateObject_8$n || (templateObject_8$n = __makeTemplateObject([""], [""]))),
|
|
4809
4809
|
heading3: newStyled.h3(templateObject_9$d || (templateObject_9$d = __makeTemplateObject([""], [""]))),
|
|
4810
4810
|
heading4: newStyled.h4(templateObject_10$c || (templateObject_10$c = __makeTemplateObject([""], [""]))),
|
|
@@ -4934,14 +4934,14 @@ var DEFAULTS = {
|
|
|
4934
4934
|
size: 'regular',
|
|
4935
4935
|
},
|
|
4936
4936
|
};
|
|
4937
|
-
var templateObject_1$
|
|
4938
|
-
|
|
4939
|
-
var Container$1h = newStyled.div(templateObject_1$
|
|
4940
|
-
var Card$4 = newStyled.div(templateObject_2$
|
|
4941
|
-
var Tag$2 = newStyled.div(templateObject_3$
|
|
4942
|
-
var Label$7 = newStyled.div(templateObject_4$
|
|
4943
|
-
var Check$1 = newStyled.div(templateObject_5$
|
|
4944
|
-
var DiscountContainer$1 = newStyled.div(templateObject_6$
|
|
4937
|
+
var templateObject_1$24, templateObject_2$1v, templateObject_3$1a, templateObject_4$Y, templateObject_5$J, templateObject_6$E, templateObject_7$u, templateObject_8$n, templateObject_9$d, templateObject_10$c, templateObject_11$8, templateObject_12$5, templateObject_13$5, templateObject_14$3, templateObject_15$2, templateObject_16$2, templateObject_17$2, templateObject_18$2, templateObject_19$2, templateObject_20$1;
|
|
4938
|
+
|
|
4939
|
+
var Container$1h = newStyled.div(templateObject_1$23 || (templateObject_1$23 = __makeTemplateObject(["\n position: relative;\n display: flex;\n border-radius: 6px;\n gap: 6px;\n"], ["\n position: relative;\n display: flex;\n border-radius: 6px;\n gap: 6px;\n"])));
|
|
4940
|
+
var Card$4 = newStyled.div(templateObject_2$1u || (templateObject_2$1u = __makeTemplateObject(["\n --background: var(--colors-background-color);\n\n flex: 1;\n position: relative;\n overflow: hidden;\n cursor: pointer;\n border: 2px solid var(--component-packSelector-borderColor);\n padding: 16px 7px 7px;\n text-align: center;\n background-color: var(--background);\n border-radius: var(--component-packSelector-borderRadius);\n\n &[aria-checked='true'] {\n --color: var(--component-packSelector-selectedColor);\n\n border-color: var(--color);\n\n & * {\n p {\n color: var(--color);\n }\n }\n }\n"], ["\n --background: var(--colors-background-color);\n\n flex: 1;\n position: relative;\n overflow: hidden;\n cursor: pointer;\n border: 2px solid var(--component-packSelector-borderColor);\n padding: 16px 7px 7px;\n text-align: center;\n background-color: var(--background);\n border-radius: var(--component-packSelector-borderRadius);\n\n &[aria-checked='true'] {\n --color: var(--component-packSelector-selectedColor);\n\n border-color: var(--color);\n\n & * {\n p {\n color: var(--color);\n }\n }\n }\n"])));
|
|
4941
|
+
var Tag$2 = newStyled.div(templateObject_3$19 || (templateObject_3$19 = __makeTemplateObject(["\n position: absolute;\n width: 100%;\n left: 50%;\n top: 0;\n transform: translateX(-50%);\n background-color: var(--component-packSelector-tagColor);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 1px 0;\n\n [aria-checked='true'] & {\n background-color: var(--component-packSelector-selectedColor);\n\n & * {\n color: var(--component-packSelector-selectedContrast) !important;\n }\n }\n"], ["\n position: absolute;\n width: 100%;\n left: 50%;\n top: 0;\n transform: translateX(-50%);\n background-color: var(--component-packSelector-tagColor);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 1px 0;\n\n [aria-checked='true'] & {\n background-color: var(--component-packSelector-selectedColor);\n\n & * {\n color: var(--component-packSelector-selectedContrast) !important;\n }\n }\n"])));
|
|
4942
|
+
var Label$7 = newStyled.div(templateObject_4$X || (templateObject_4$X = __makeTemplateObject(["\n position: relative;\n width: fit-content;\n margin: 0 auto;\n"], ["\n position: relative;\n width: fit-content;\n margin: 0 auto;\n"])));
|
|
4943
|
+
var Check$1 = newStyled.div(templateObject_5$I || (templateObject_5$I = __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"])));
|
|
4944
|
+
var DiscountContainer$1 = newStyled.div(templateObject_6$D || (templateObject_6$D = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n flex-wrap: wrap;\n"], ["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n flex-wrap: wrap;\n"])));
|
|
4945
4945
|
var PackSelectorV2 = function (_a) {
|
|
4946
4946
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange, currencyCode = _a.currencyCode;
|
|
4947
4947
|
return (jsxRuntime.jsx(Container$1h, __assign$1({ role: "radiogroup" }, { children: packs.map(function (pack) {
|
|
@@ -4966,27 +4966,27 @@ var PackCard$1 = function (_a) {
|
|
|
4966
4966
|
currency: currencyCode || 'USD',
|
|
4967
4967
|
}), ' ', "each", ')'] }), void 0)) : null] }, void 0)] }), void 0));
|
|
4968
4968
|
};
|
|
4969
|
-
var templateObject_1$
|
|
4969
|
+
var templateObject_1$23, templateObject_2$1u, templateObject_3$19, templateObject_4$X, templateObject_5$I, templateObject_6$D;
|
|
4970
4970
|
|
|
4971
|
-
var Container$1g = newStyled.div(templateObject_1$
|
|
4972
|
-
var DropContainer = newStyled.div(templateObject_2$
|
|
4971
|
+
var Container$1g = newStyled.div(templateObject_1$22 || (templateObject_1$22 = __makeTemplateObject(["\n height: 32px;\n display: flex;\n align-items: center;\n"], ["\n height: 32px;\n display: flex;\n align-items: center;\n"])));
|
|
4972
|
+
var DropContainer = newStyled.div(templateObject_2$1t || (templateObject_2$1t = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
4973
4973
|
var DropList = function (_a) {
|
|
4974
4974
|
var dropTotal = _a.dropTotal, drops = _a.drops;
|
|
4975
4975
|
return (jsxRuntime.jsx(Container$1g, { children: __spreadArray([], new Array(dropTotal), true).map(function (_, index) {
|
|
4976
4976
|
return (jsxRuntime.jsx(DropContainer, __assign$1({ "data-testid": "star-container" }, { children: index < Math.floor(drops) ? (jsxRuntime.jsx(Icon.PDP.Drop, { width: 0.875, height: 0.875 }, void 0)) : (jsxRuntime.jsx(Icon.PDP.DropEmpty, { width: 0.875, height: 0.875 }, void 0)) }), index));
|
|
4977
4977
|
}) }, void 0));
|
|
4978
4978
|
};
|
|
4979
|
-
var templateObject_1$
|
|
4979
|
+
var templateObject_1$22, templateObject_2$1t;
|
|
4980
4980
|
|
|
4981
4981
|
var DROPS_TOTAL = 5;
|
|
4982
|
-
var Container$1f = newStyled.div(templateObject_1$
|
|
4983
|
-
var Title$b = newStyled.p(templateObject_2$
|
|
4984
|
-
var Description$3 = newStyled.p(templateObject_3$
|
|
4982
|
+
var Container$1f = newStyled.div(templateObject_1$21 || (templateObject_1$21 = __makeTemplateObject(["\n height: 32px;\n display: flex;\n"], ["\n height: 32px;\n display: flex;\n"])));
|
|
4983
|
+
var Title$b = newStyled.p(templateObject_2$1s || (templateObject_2$1s = __makeTemplateObject(["\n height: 32px;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n display: flex;\n align-items: center;\n font-weight: 600;\n margin-right: 7px;\n"], ["\n height: 32px;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n display: flex;\n align-items: center;\n font-weight: 600;\n margin-right: 7px;\n"])));
|
|
4984
|
+
var Description$3 = newStyled.p(templateObject_3$18 || (templateObject_3$18 = __makeTemplateObject(["\n height: 32px;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n display: flex;\n align-items: center;\n font-weight: 600;\n margin-left: 7px;\n"], ["\n height: 32px;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n display: flex;\n align-items: center;\n font-weight: 600;\n margin-left: 7px;\n"])));
|
|
4985
4985
|
var AbsorbencyLevel = function (_a) {
|
|
4986
4986
|
var dropTotal = _a.dropTotal, drops = _a.drops, absorbencyTitle = _a.absorbencyTitle, absorbencyDescription = _a.absorbencyDescription;
|
|
4987
4987
|
return (jsxRuntime.jsxs(Container$1f, { children: [jsxRuntime.jsx(Title$b, { children: absorbencyTitle }, void 0), jsxRuntime.jsx(DropList, { dropTotal: dropTotal || DROPS_TOTAL, drops: drops }, void 0), jsxRuntime.jsx(Description$3, { children: absorbencyDescription }, void 0)] }, void 0));
|
|
4988
4988
|
};
|
|
4989
|
-
var templateObject_1$
|
|
4989
|
+
var templateObject_1$21, templateObject_2$1s, templateObject_3$18;
|
|
4990
4990
|
|
|
4991
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(`
|
|
4992
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(`
|
|
@@ -5062,7 +5062,7 @@ var StyledButton$3 = newStyled(Ye.Button)(AccordionSummaryStyles.baseStyles, fun
|
|
|
5062
5062
|
AccordionSummaryStyles[props.variant](props.theme, props.disabled, props.controlIconPos),
|
|
5063
5063
|
]; }, function (props) { return [AccordionSummaryStyles.title(props.titlecolor)]; });
|
|
5064
5064
|
var StyledPanel$1 = newStyled(Ye.Panel)(AccordionDetailsStyles.baseStyles, function (props) { return [AccordionDetailsStyles[props.variant](props.theme)]; });
|
|
5065
|
-
var StyledContent$1 = newStyled.button(templateObject_1$
|
|
5065
|
+
var StyledContent$1 = newStyled.button(templateObject_1$20 || (templateObject_1$20 = __makeTemplateObject(["\n appearance: none;\n padding: 0;\n margin: 0;\n border: none;\n background: none;\n font-size: inherit;\n line-height: inherit;\n color: inherit;\n cursor: auto;\n user-select: text;\n writing-mode: unset;\n font-family: inherit;\n"], ["\n appearance: none;\n padding: 0;\n margin: 0;\n border: none;\n background: none;\n font-size: inherit;\n line-height: inherit;\n color: inherit;\n cursor: auto;\n user-select: text;\n writing-mode: unset;\n font-family: inherit;\n"])));
|
|
5066
5066
|
var Accordion$1 = function (_a) {
|
|
5067
5067
|
var header = _a.header, headerOnOpen = _a.headerOnOpen, content = _a.content, defaultOpen = _a.defaultOpen, _b = _a.forceOpenHandler, forceOpenHandler = _b === void 0 ? false : _b, _c = _a.forceOpenValue, forceOpenValue = _c === void 0 ? false : _c, titleColor = _a.titleColor, variant = _a.variant, _d = _a.disabled, disabled = _d === void 0 ? false : _d, _e = _a.innerHTML, innerHTML = _e === void 0 ? false : _e, _f = _a.backgroundCover, backgroundCover = _f === void 0 ? { value: false, iconBgColor: 'inherit' } : _f, _g = _a.controlIconPos, controlIconPos = _g === void 0 ? 'right' : _g, openIcon = _a.openIcon, closeIcon = _a.closeIcon, onClick = _a.onClick;
|
|
5068
5068
|
var theme = useTheme();
|
|
@@ -5086,9 +5086,9 @@ var Accordion$1 = function (_a) {
|
|
|
5086
5086
|
} }, { children: jsxRuntime.jsx(ControlIcon, { title: "close icon", height: theme.component.accordion.variant[variant].icon.height, width: theme.component.accordion.variant[variant].icon.width, fill: theme.component.accordion.variant[variant].icon.color }, void 0) }), void 0)] }, void 0))] }), void 0), controlIconPos === 'right' && showPanel && (jsxRuntime.jsx(StyledContent$1, __assign$1({ onClick: function (e) { return e.stopPropagation(); } }, { children: !innerHTML ? (jsxRuntime.jsx(StyledPanel$1, __assign$1({ static: true, variant: variant, theme: theme }, { children: content }), void 0)) : (jsxRuntime.jsx("div", { dangerouslySetInnerHTML: { __html: content } }, void 0)) }), void 0))] }, void 0));
|
|
5087
5087
|
} }), void 0));
|
|
5088
5088
|
};
|
|
5089
|
-
var templateObject_1$
|
|
5089
|
+
var templateObject_1$20;
|
|
5090
5090
|
|
|
5091
|
-
var Container$1e = newStyled.div(templateObject_1$
|
|
5091
|
+
var Container$1e = newStyled.div(templateObject_1$1$ || (templateObject_1$1$ = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 16px;\n"], ["\n display: flex;\n flex-direction: column;\n gap: 16px;\n"])));
|
|
5092
5092
|
var AccordionOptions = function (_a) {
|
|
5093
5093
|
var titleColor = _a.titleColor, accordions = _a.accordions;
|
|
5094
5094
|
var _b = React$2.useState({
|
|
@@ -5112,7 +5112,7 @@ var AccordionOptions = function (_a) {
|
|
|
5112
5112
|
} }, accordion, { forceOpenHandler: true, forceOpenValue: getForceOpen(index), titleColor: accordionTitleColor }), "accordion-".concat(index)));
|
|
5113
5113
|
}) }, void 0));
|
|
5114
5114
|
};
|
|
5115
|
-
var templateObject_1$
|
|
5115
|
+
var templateObject_1$1$;
|
|
5116
5116
|
|
|
5117
5117
|
/**
|
|
5118
5118
|
* @returns number formatted with "," and 2 decimals as string
|
|
@@ -5248,22 +5248,22 @@ var isValidDate = function (value) {
|
|
|
5248
5248
|
return /^\d{4}-\d{2}-\d{2}$/.test(value);
|
|
5249
5249
|
};
|
|
5250
5250
|
|
|
5251
|
-
var Bold = newStyled.span(templateObject_1$
|
|
5252
|
-
var FlexContainer$4 = newStyled.div(templateObject_2$
|
|
5253
|
-
var templateObject_1$
|
|
5251
|
+
var Bold = newStyled.span(templateObject_1$1_ || (templateObject_1$1_ = __makeTemplateObject(["\n font-weight: bold;\n"], ["\n font-weight: bold;\n"])));
|
|
5252
|
+
var FlexContainer$4 = newStyled.div(templateObject_2$1r || (templateObject_2$1r = __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$1_, templateObject_2$1r;
|
|
5254
5254
|
|
|
5255
|
-
var Container$1d = newStyled.div(templateObject_1$
|
|
5255
|
+
var Container$1d = newStyled.div(templateObject_1$1Z || (templateObject_1$1Z = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: center;\n width: ", ";\n height: ", ";\n border-radius: 12px;\n background-color: #fff;\n"], ["\n display: flex;\n flex-direction: row;\n align-items: center;\n width: ", ";\n height: ", ";\n border-radius: 12px;\n background-color: #fff;\n"])), function (_a) {
|
|
5256
5256
|
var _b = _a.width, width = _b === void 0 ? '100%' : _b;
|
|
5257
5257
|
return width;
|
|
5258
5258
|
}, function (_a) {
|
|
5259
5259
|
var _b = _a.height, height = _b === void 0 ? '100%' : _b;
|
|
5260
5260
|
return height;
|
|
5261
5261
|
});
|
|
5262
|
-
var FlexCentered = newStyled.div(templateObject_2$
|
|
5263
|
-
var LeftSide = newStyled.div(templateObject_3$
|
|
5264
|
-
var RightSide = newStyled.div(templateObject_4$
|
|
5265
|
-
var FlexStart = newStyled.div(templateObject_5$
|
|
5266
|
-
var templateObject_1$
|
|
5262
|
+
var FlexCentered = newStyled.div(templateObject_2$1q || (templateObject_2$1q = __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"])));
|
|
5263
|
+
var LeftSide = newStyled.div(templateObject_3$17 || (templateObject_3$17 = __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"])));
|
|
5264
|
+
var RightSide = newStyled.div(templateObject_4$W || (templateObject_4$W = __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"])));
|
|
5265
|
+
var FlexStart = newStyled.div(templateObject_5$H || (templateObject_5$H = __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"])));
|
|
5266
|
+
var templateObject_1$1Z, templateObject_2$1q, templateObject_3$17, templateObject_4$W, templateObject_5$H;
|
|
5267
5267
|
|
|
5268
5268
|
var CouponCard = function (_a) {
|
|
5269
5269
|
var image = _a.image, title = _a.title, content = _a.content, couponCode = _a.couponCode, offerLink = _a.offerLink, width = _a.width, height = _a.height, _b = _a.btnText, btnText = _b === void 0 ? 'Redeem Offer' : _b, onClickRedeemOfferHandler = _a.onClickRedeemOfferHandler, onClickHandler = _a.onClickHandler;
|
|
@@ -5319,14 +5319,14 @@ var CancellationFlowAccordionContentPerPartner = {
|
|
|
5319
5319
|
TheBodCon: [cancellationFlowContentPerKey['TheBodCon']],
|
|
5320
5320
|
};
|
|
5321
5321
|
|
|
5322
|
-
var ErrorText = newStyled.h3(templateObject_1$
|
|
5323
|
-
var ErrorContainer = newStyled.div(templateObject_2$
|
|
5322
|
+
var ErrorText = newStyled.h3(templateObject_1$1Y || (templateObject_1$1Y = __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; });
|
|
5323
|
+
var ErrorContainer = newStyled.div(templateObject_2$1p || (templateObject_2$1p = __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"])));
|
|
5324
5324
|
var Error$1 = function (_a) {
|
|
5325
5325
|
var error = _a.error;
|
|
5326
5326
|
var theme = useTheme();
|
|
5327
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));
|
|
5328
5328
|
};
|
|
5329
|
-
var templateObject_1$
|
|
5329
|
+
var templateObject_1$1Y, templateObject_2$1p;
|
|
5330
5330
|
|
|
5331
5331
|
var BaseSelectButton = function (_a) {
|
|
5332
5332
|
var children = _a.children, as = _a.as;
|
|
@@ -5343,7 +5343,7 @@ function BaseSelectOption(_a) {
|
|
|
5343
5343
|
return (jsxRuntime.jsx(Ee.Option, __assign$1({ className: className, as: as, value: value, disabled: disabled }, { children: children }), void 0));
|
|
5344
5344
|
}
|
|
5345
5345
|
|
|
5346
|
-
var CustomListBox = newStyled(Ee)(templateObject_1$
|
|
5346
|
+
var CustomListBox = newStyled(Ee)(templateObject_1$1X || (templateObject_1$1X = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
5347
5347
|
function BaseSelect(_a) {
|
|
5348
5348
|
var value = _a.value, onChange = _a.onChange, disabled = _a.disabled, children = _a.children, className = _a.className;
|
|
5349
5349
|
return (jsxRuntime.jsx(CustomListBox, __assign$1({ disabled: disabled, as: "div", value: value, onChange: onChange, className: className }, { children: children }), void 0));
|
|
@@ -5353,7 +5353,7 @@ var BaseSelect$1 = Object.assign(BaseSelect, {
|
|
|
5353
5353
|
Options: BaseSelectOptions,
|
|
5354
5354
|
Option: BaseSelectOption,
|
|
5355
5355
|
});
|
|
5356
|
-
var templateObject_1$
|
|
5356
|
+
var templateObject_1$1X;
|
|
5357
5357
|
|
|
5358
5358
|
var CustomButton = newStyled.button(function (_a) {
|
|
5359
5359
|
var theme = _a.theme, wide = _a.wide, isSortOrFilter = _a.isSortOrFilter;
|
|
@@ -5392,7 +5392,7 @@ var CustomButton = newStyled.button(function (_a) {
|
|
|
5392
5392
|
});
|
|
5393
5393
|
});
|
|
5394
5394
|
// TODO Remove this when we find the real solution
|
|
5395
|
-
var StyledIcon$1 = newStyled.span(templateObject_1$
|
|
5395
|
+
var StyledIcon$1 = newStyled.span(templateObject_1$1W || (templateObject_1$1W = __makeTemplateObject(["\n [data-testid='CloseIcon'] {\n display: none;\n }\n ", "\n"], ["\n [data-testid='CloseIcon'] {\n display: none;\n }\n ", "\n"])), function (_a) {
|
|
5396
5396
|
var open = _a.open;
|
|
5397
5397
|
return open &&
|
|
5398
5398
|
"\n [data-testid=\"CloseIcon\"] {\n display: block;\n }\n [data-testid=\"OpenIcon\"] {\n display: none;\n }\n";
|
|
@@ -5412,7 +5412,7 @@ var BaseDropdownButton = function (_a) {
|
|
|
5412
5412
|
} }), void 0));
|
|
5413
5413
|
};
|
|
5414
5414
|
var BaseDropdownButton$1 = React__default["default"].memo(BaseDropdownButton);
|
|
5415
|
-
var templateObject_1$
|
|
5415
|
+
var templateObject_1$1W;
|
|
5416
5416
|
|
|
5417
5417
|
var DropdownOptions$1 = newStyled(BaseSelect$1.Options)(function (_a) {
|
|
5418
5418
|
var theme = _a.theme;
|
|
@@ -5579,7 +5579,7 @@ var CustomCheckboxStyles = {
|
|
|
5579
5579
|
},
|
|
5580
5580
|
};
|
|
5581
5581
|
|
|
5582
|
-
var Container$1c = newStyled.div(templateObject_1$
|
|
5582
|
+
var Container$1c = newStyled.div(templateObject_1$1V || (templateObject_1$1V = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n width: fit-content;\n user-select: none;\n position: relative;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n width: fit-content;\n user-select: none;\n position: relative;\n"])));
|
|
5583
5583
|
var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (props) { return [
|
|
5584
5584
|
CustomCheckboxStyles[props.size](props.theme),
|
|
5585
5585
|
CustomCheckboxStyles[props.variant](props.theme, props.isChecked, props.disabled),
|
|
@@ -5590,7 +5590,7 @@ var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (pr
|
|
|
5590
5590
|
? "\n svg {\n path {\n fill: var(--colors-shades-black-color);\n }\n }"
|
|
5591
5591
|
: '', "\n ").concat(props.text === 'White' ? "border: 0.27px var(--colors-shades-300-color) solid;" : ''),
|
|
5592
5592
|
]; });
|
|
5593
|
-
var Input$5 = newStyled.input(templateObject_2$
|
|
5593
|
+
var Input$5 = newStyled.input(templateObject_2$1o || (templateObject_2$1o = __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) {
|
|
5594
5594
|
var disabled = _a.disabled;
|
|
5595
5595
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
5596
5596
|
});
|
|
@@ -5606,7 +5606,7 @@ var Checkbox = function (_a) {
|
|
|
5606
5606
|
};
|
|
5607
5607
|
return (jsxRuntime.jsxs(Container$1c, { children: [jsxRuntime.jsx(Input$5, { type: "checkbox", checked: checked, disabled: disabled, onChange: handleChange, id: id }, void 0), jsxRuntime.jsx(CustomCheckbox, __assign$1({ theme: theme, size: size, disabled: disabled, isChecked: checked, "data-testid": "checkbox", variant: variant, backgroundColor: backgroundColor, text: text }, { children: checked && jsxRuntime.jsx(Icon.Actions.Check, { fill: "#fff" }, void 0) }), void 0), jsxRuntime.jsx(Label$6, __assign$1({ "data-testid": "checkbox-text", size: size, variant: checked ? 'demi' : 'regular', htmlFor: id, disabled: disabled }, { children: text }), void 0)] }, void 0));
|
|
5608
5608
|
};
|
|
5609
|
-
var templateObject_1$
|
|
5609
|
+
var templateObject_1$1V, templateObject_2$1o;
|
|
5610
5610
|
|
|
5611
5611
|
var CustomOption = newStyled.li(function (_a) {
|
|
5612
5612
|
var theme = _a.theme, selected = _a.selected, active = _a.active, hasImage = _a.hasImage;
|
|
@@ -5655,9 +5655,9 @@ var BaseDropdown$1 = Object.assign(BaseDropdown, {
|
|
|
5655
5655
|
Option: BaseDropdownOption,
|
|
5656
5656
|
});
|
|
5657
5657
|
|
|
5658
|
-
var Container$1b = newStyled.div(templateObject_1$
|
|
5659
|
-
var RequiredPlaceholder = newStyled.p(templateObject_2$
|
|
5660
|
-
var SelectedOption = newStyled.span(templateObject_3$
|
|
5658
|
+
var Container$1b = newStyled.div(templateObject_1$1U || (templateObject_1$1U = __makeTemplateObject([""], [""])));
|
|
5659
|
+
var RequiredPlaceholder = newStyled.p(templateObject_2$1n || (templateObject_2$1n = __makeTemplateObject(["\n margin: unset;\n &:after {\n content: '*';\n color: var(--colors-semantic-urgent-color);\n }\n"], ["\n margin: unset;\n &:after {\n content: '*';\n color: var(--colors-semantic-urgent-color);\n }\n"])));
|
|
5660
|
+
var SelectedOption = newStyled.span(templateObject_3$16 || (templateObject_3$16 = __makeTemplateObject(["\n font-weight: ", ";\n"], ["\n font-weight: ", ";\n"])), function (_a) {
|
|
5661
5661
|
var fontWeight = _a.fontWeight;
|
|
5662
5662
|
return fontWeight || '';
|
|
5663
5663
|
});
|
|
@@ -5693,7 +5693,7 @@ function SimpleDropdown(_a) {
|
|
|
5693
5693
|
var DropdownContainer = showRequiredPlaceholder ? Container$1b : React$2.Fragment;
|
|
5694
5694
|
return (jsxRuntime.jsxs(DropdownContainer, { children: [jsxRuntime.jsxs(BaseDropdown$1, __assign$1({ value: selectedValue, onChange: onChangeHandler, disabled: disabled, wide: wide }, { children: [jsxRuntime.jsxs(BaseDropdown$1.Button, __assign$1({ label: label, OpenIcon: Icon.Arrows.ChevronDown, CloseIcon: Icon.Arrows.ChevronUp, wide: wide, isSortOrFilter: sort, testId: testId }, { children: [!!(selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.imageURL) && (jsxRuntime.jsx("img", { src: selectedValue.imageURL, alt: selectedValue.label, style: { paddingRight: 8 } }, void 0)), selectedOptionWeight && disabled ? (jsxRuntime.jsx(SelectedOption, __assign$1({ fontWeight: selectedOptionWeight }, { children: selectedOptionLabel }), void 0)) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: selectedOptionLabel }, void 0))] }), void 0), jsxRuntime.jsx(BaseDropdown$1.Options, { children: options.map(function (item) { return (jsxRuntime.jsxs(BaseDropdown$1.Option, __assign$1({ value: item, disabled: item.disabled, hasImage: !!item.imageURL }, { children: [!!item.imageURL && (jsxRuntime.jsx("img", { src: item.imageURL, alt: item.label, style: { paddingRight: 8 } }, void 0)), item.label] }), item.key)); }) }, void 0)] }), void 0), !!required && jsxRuntime.jsx(Error$1, { error: required }, void 0)] }, void 0));
|
|
5695
5695
|
}
|
|
5696
|
-
var templateObject_1$
|
|
5696
|
+
var templateObject_1$1U, templateObject_2$1n, templateObject_3$16;
|
|
5697
5697
|
|
|
5698
5698
|
/* base styles & size variants */
|
|
5699
5699
|
var CustomRadioStyles$2 = {
|
|
@@ -5758,9 +5758,9 @@ var ContainerStyles$2 = {
|
|
|
5758
5758
|
},
|
|
5759
5759
|
};
|
|
5760
5760
|
|
|
5761
|
-
var Wrapper$7 = newStyled.div(templateObject_1$
|
|
5761
|
+
var Wrapper$7 = newStyled.div(templateObject_1$1T || (templateObject_1$1T = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
5762
5762
|
var Container$1a = newStyled.div(__assign$1({}, ContainerStyles$2.baseStyles), function (props) { return [ContainerStyles$2[props.size](props.theme)]; });
|
|
5763
|
-
var Input$4 = newStyled.input(templateObject_2$
|
|
5763
|
+
var Input$4 = newStyled.input(templateObject_2$1m || (templateObject_2$1m = __makeTemplateObject(["\n position: absolute;\n opacity: 0;\n cursor: ", ";\n height: 100%;\n width: 100%;\n margin: 0;\n"], ["\n position: absolute;\n opacity: 0;\n cursor: ", ";\n height: 100%;\n width: 100%;\n margin: 0;\n"])), function (_a) {
|
|
5764
5764
|
var disabled = _a.disabled;
|
|
5765
5765
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
5766
5766
|
});
|
|
@@ -5768,14 +5768,14 @@ var CustomRadio$2 = newStyled.div(function (props) { return [
|
|
|
5768
5768
|
CustomRadioStyles$2.baseStyles(props.theme, props.disabled),
|
|
5769
5769
|
CustomRadioStyles$2[props.size](props.theme, props.isChecked),
|
|
5770
5770
|
]; });
|
|
5771
|
-
var StyledLabel$3 = newStyled(Label$6)(templateObject_3$
|
|
5771
|
+
var StyledLabel$3 = newStyled(Label$6)(templateObject_3$15 || (templateObject_3$15 = __makeTemplateObject(["\n font-size: ", ";\n line-height: ", " !important;\n"], ["\n font-size: ", ";\n line-height: ", " !important;\n"])), function (_a) {
|
|
5772
5772
|
var theme = _a.theme;
|
|
5773
5773
|
return theme.component.radio.textSize;
|
|
5774
5774
|
}, function (_a) {
|
|
5775
5775
|
var theme = _a.theme;
|
|
5776
5776
|
return theme.component.radio.lineHeight;
|
|
5777
5777
|
});
|
|
5778
|
-
var StyledLabelV2 = newStyled(Label$6)(templateObject_4$
|
|
5778
|
+
var StyledLabelV2 = newStyled(Label$6)(templateObject_4$V || (templateObject_4$V = __makeTemplateObject(["\n font-size: ", ";\n font-weight: 600 !important;\n line-height: ", " !important;\n\n color: ", ";\n"], ["\n font-size: ", ";\n font-weight: 600 !important;\n line-height: ", " !important;\n\n color: ", ";\n"])), function (_a) {
|
|
5779
5779
|
var theme = _a.theme;
|
|
5780
5780
|
return theme.component.radio.textSize;
|
|
5781
5781
|
}, function (_a) {
|
|
@@ -5794,7 +5794,7 @@ var RadioInput = function (_a) {
|
|
|
5794
5794
|
};
|
|
5795
5795
|
return (jsxRuntime.jsxs(Wrapper$7, { children: [jsxRuntime.jsxs(Container$1a, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsxRuntime.jsx(Input$4, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled, style: style }, void 0), jsxRuntime.jsx(CustomRadio$2, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), useV2Style ? (jsxRuntime.jsxs(StyledLabelV2, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled, style: labelStyle }, { children: [icon, " ", label] }), void 0)) : (jsxRuntime.jsx(StyledLabel$3, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0))] }, void 0));
|
|
5796
5796
|
};
|
|
5797
|
-
var templateObject_1$
|
|
5797
|
+
var templateObject_1$1T, templateObject_2$1m, templateObject_3$15, templateObject_4$V;
|
|
5798
5798
|
|
|
5799
5799
|
var useOnClickOutside = function (ref, handler) {
|
|
5800
5800
|
React$2.useEffect(function () {
|
|
@@ -5887,7 +5887,7 @@ var getTooltipAlignItems = function (position, align) {
|
|
|
5887
5887
|
}
|
|
5888
5888
|
};
|
|
5889
5889
|
|
|
5890
|
-
var Wrapper$6 = newStyled.div(templateObject_1$
|
|
5890
|
+
var Wrapper$6 = newStyled.div(templateObject_1$1S || (templateObject_1$1S = __makeTemplateObject(["\n display: flex;\n flex-direction: ", ";\n align-items: center;\n cursor: pointer;\n\n &:hover {\n .tooltip-container {\n visibility: ", ";\n opacity: ", ";\n cursor: text;\n }\n }\n"], ["\n display: flex;\n flex-direction: ", ";\n align-items: center;\n cursor: pointer;\n\n &:hover {\n .tooltip-container {\n visibility: ", ";\n opacity: ", ";\n cursor: text;\n }\n }\n"])), function (_a) {
|
|
5891
5891
|
var position = _a.position;
|
|
5892
5892
|
return getWrapperFlexDirection(position);
|
|
5893
5893
|
}, function (_a) {
|
|
@@ -5897,7 +5897,7 @@ var Wrapper$6 = newStyled.div(templateObject_1$1R || (templateObject_1$1R = __ma
|
|
|
5897
5897
|
var disableHover = _a.disableHover;
|
|
5898
5898
|
return (disableHover ? 0 : 1);
|
|
5899
5899
|
});
|
|
5900
|
-
var TooltipContainer = newStyled.div(templateObject_2$
|
|
5900
|
+
var TooltipContainer = newStyled.div(templateObject_2$1l || (templateObject_2$1l = __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) {
|
|
5901
5901
|
var position = _a.position;
|
|
5902
5902
|
return getContainerFlexDirection(position);
|
|
5903
5903
|
}, function (_a) {
|
|
@@ -5925,14 +5925,14 @@ var TooltipContainer = newStyled.div(templateObject_2$1k || (templateObject_2$1k
|
|
|
5925
5925
|
var getTooltipMargin = function (actual, expected, margin) {
|
|
5926
5926
|
return actual === expected ? margin : '0';
|
|
5927
5927
|
};
|
|
5928
|
-
var ContentWrapper = newStyled.div(templateObject_3$
|
|
5928
|
+
var ContentWrapper = newStyled.div(templateObject_3$14 || (templateObject_3$14 = __makeTemplateObject(["\n border: 0.063rem solid ", ";\n padding: 0.563rem 0.75rem;\n border-radius: 0.5rem;\n background-color: ", ";\n z-index: 999;\n position: relative;\n box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);\n z-index: 1;\n"], ["\n border: 0.063rem solid ", ";\n padding: 0.563rem 0.75rem;\n border-radius: 0.5rem;\n background-color: ", ";\n z-index: 999;\n position: relative;\n box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);\n z-index: 1;\n"])), function (_a) {
|
|
5929
5929
|
var borderColor = _a.borderColor;
|
|
5930
5930
|
return borderColor;
|
|
5931
5931
|
}, function (_a) {
|
|
5932
5932
|
var backgroundColor = _a.backgroundColor;
|
|
5933
5933
|
return backgroundColor;
|
|
5934
5934
|
});
|
|
5935
|
-
var TooltipText = newStyled.div(templateObject_4$
|
|
5935
|
+
var TooltipText = newStyled.div(templateObject_4$U || (templateObject_4$U = __makeTemplateObject(["\n font-style: normal;\n font-weight: normal;\n font-size: 0.875rem;\n line-height: 1.125rem;\n margin: 0;\n text-align: ", ";\n max-width: ", ";\n color: ", ";\n"], ["\n font-style: normal;\n font-weight: normal;\n font-size: 0.875rem;\n line-height: 1.125rem;\n margin: 0;\n text-align: ", ";\n max-width: ", ";\n color: ", ";\n"])), function (_a) {
|
|
5936
5936
|
var theme = _a.theme;
|
|
5937
5937
|
return theme.component.autoship.tooltip.text.alignment;
|
|
5938
5938
|
}, function (_a) {
|
|
@@ -5942,17 +5942,17 @@ var TooltipText = newStyled.div(templateObject_4$T || (templateObject_4$T = __ma
|
|
|
5942
5942
|
var color = _a.color;
|
|
5943
5943
|
return color;
|
|
5944
5944
|
});
|
|
5945
|
-
var TopSection = newStyled.div(templateObject_5$
|
|
5946
|
-
var Title$a = newStyled.h1(templateObject_6$
|
|
5945
|
+
var TopSection = newStyled.div(templateObject_5$G || (templateObject_5$G = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: 0.688rem;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: 0.688rem;\n"])));
|
|
5946
|
+
var Title$a = newStyled.h1(templateObject_6$C || (templateObject_6$C = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n"])), function (_a) {
|
|
5947
5947
|
var color = _a.color;
|
|
5948
5948
|
return color;
|
|
5949
5949
|
});
|
|
5950
|
-
var IconContainer$5 = newStyled.div(templateObject_7$
|
|
5950
|
+
var IconContainer$5 = newStyled.div(templateObject_7$t || (templateObject_7$t = __makeTemplateObject(["\n width: 1.375rem;\n height: 1.125rem;\n margin-right: 0.563rem;\n"], ["\n width: 1.375rem;\n height: 1.125rem;\n margin-right: 0.563rem;\n"])));
|
|
5951
5951
|
var CloseToolTip = newStyled.button(templateObject_8$m || (templateObject_8$m = __makeTemplateObject(["\n position: absolute;\n background: none;\n border: none;\n cursor: pointer;\n right: ", ";\n top: 0.25rem;\n padding: 0px;\n z-index: 2;\n"], ["\n position: absolute;\n background: none;\n border: none;\n cursor: pointer;\n right: ", ";\n top: 0.25rem;\n padding: 0px;\n z-index: 2;\n"])), function (_a) {
|
|
5952
5952
|
var _b = _a.right, right = _b === void 0 ? '.3rem' : _b;
|
|
5953
5953
|
return right;
|
|
5954
5954
|
});
|
|
5955
|
-
var templateObject_1$
|
|
5955
|
+
var templateObject_1$1S, templateObject_2$1l, templateObject_3$14, templateObject_4$U, templateObject_5$G, templateObject_6$C, templateObject_7$t, templateObject_8$m;
|
|
5956
5956
|
|
|
5957
5957
|
var Tooltip = function (_a) {
|
|
5958
5958
|
var _b;
|
|
@@ -5995,8 +5995,8 @@ var benefitsColorMapper = function (_a) {
|
|
|
5995
5995
|
};
|
|
5996
5996
|
};
|
|
5997
5997
|
|
|
5998
|
-
var FlexContainer$3 = newStyled.div(templateObject_1$
|
|
5999
|
-
var ContainerBase$3 = newStyled.div(templateObject_2$
|
|
5998
|
+
var FlexContainer$3 = newStyled.div(templateObject_1$1R || (templateObject_1$1R = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5999
|
+
var ContainerBase$3 = newStyled.div(templateObject_2$1k || (templateObject_2$1k = __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) {
|
|
6000
6000
|
var selected = _a.selected, theme = _a.theme;
|
|
6001
6001
|
return selected
|
|
6002
6002
|
? "2px solid ".concat(theme.colors.pallete.primary.color)
|
|
@@ -6010,20 +6010,20 @@ var ContainerBase$3 = newStyled.div(templateObject_2$1j || (templateObject_2$1j
|
|
|
6010
6010
|
var theme = _a.theme;
|
|
6011
6011
|
return theme.colors.pallete.primary.color;
|
|
6012
6012
|
});
|
|
6013
|
-
var SinglePurchaseContainer$3 = newStyled(ContainerBase$3)(templateObject_3$
|
|
6013
|
+
var SinglePurchaseContainer$3 = newStyled(ContainerBase$3)(templateObject_3$13 || (templateObject_3$13 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n padding: 16px;\n margin-bottom: 8px;\n\n ", "\n"], ["\n display: flex;\n justify-content: space-between;\n padding: 16px;\n margin-bottom: 8px;\n\n ", "\n"])), function (_a) {
|
|
6014
6014
|
var onClick = _a.onClick;
|
|
6015
6015
|
return (onClick ? 'cursor: pointer;' : '');
|
|
6016
6016
|
});
|
|
6017
|
-
var SubscriptionContainer$3 = newStyled(ContainerBase$3)(templateObject_4$
|
|
6018
|
-
var SubscriptionHeader$3 = newStyled.div(templateObject_5$
|
|
6017
|
+
var SubscriptionContainer$3 = newStyled(ContainerBase$3)(templateObject_4$T || (templateObject_4$T = __makeTemplateObject(["\n padding: 16px;\n"], ["\n padding: 16px;\n"])));
|
|
6018
|
+
var SubscriptionHeader$3 = newStyled.div(templateObject_5$F || (templateObject_5$F = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n border-bottom: 1px solid ", ";\n padding-bottom: 10px;\n margin-bottom: 8px;\n cursor: pointer;\n\n & input:checked + div {\n border-color: ", ";\n }\n"], ["\n display: flex;\n justify-content: space-between;\n border-bottom: 1px solid ", ";\n padding-bottom: 10px;\n margin-bottom: 8px;\n cursor: pointer;\n\n & input:checked + div {\n border-color: ", ";\n }\n"])), function (_a) {
|
|
6019
6019
|
var theme = _a.theme;
|
|
6020
6020
|
return theme.colors.shades[200].color;
|
|
6021
6021
|
}, function (_a) {
|
|
6022
6022
|
var theme = _a.theme;
|
|
6023
6023
|
return theme.colors.pallete.primary.color;
|
|
6024
6024
|
});
|
|
6025
|
-
var BenefitsContainer$3 = newStyled.div(templateObject_6$
|
|
6026
|
-
var Benefit$3 = newStyled.div(templateObject_7$
|
|
6025
|
+
var BenefitsContainer$3 = newStyled.div(templateObject_6$B || (templateObject_6$B = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
6026
|
+
var Benefit$3 = newStyled.div(templateObject_7$s || (templateObject_7$s = __makeTemplateObject(["\n display: flex;\n padding: 8px 0px;\n svg {\n overflow: visible;\n }\n"], ["\n display: flex;\n padding: 8px 0px;\n svg {\n overflow: visible;\n }\n"])));
|
|
6027
6027
|
var BenefitText$3 = newStyled(Text$7)(templateObject_8$l || (templateObject_8$l = __makeTemplateObject(["\n line-height: 20px;\n margin-left: 9px;\n"], ["\n line-height: 20px;\n margin-left: 9px;\n"])));
|
|
6028
6028
|
var SubscriptionDetails = newStyled(Text$7)(templateObject_9$c || (templateObject_9$c = __makeTemplateObject(["\n font-size: 16px;\n margin-right: 7px;\n"], ["\n font-size: 16px;\n margin-right: 7px;\n"])));
|
|
6029
6029
|
var SubscriptionDetailsContainer = newStyled.div(templateObject_10$b || (templateObject_10$b = __makeTemplateObject(["\n margin-top: 18px;\n display: flex;\n"], ["\n margin-top: 18px;\n display: flex;\n"])));
|
|
@@ -6033,7 +6033,7 @@ var StyledPrice$3 = newStyled(PriceLabelV2$1)(templateObject_12$4 || (templateOb
|
|
|
6033
6033
|
return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
|
|
6034
6034
|
});
|
|
6035
6035
|
var Container$19 = newStyled.div(templateObject_13$4 || (templateObject_13$4 = __makeTemplateObject([""], [""])));
|
|
6036
|
-
var templateObject_1$
|
|
6036
|
+
var templateObject_1$1R, templateObject_2$1k, templateObject_3$13, templateObject_4$T, templateObject_5$F, templateObject_6$B, templateObject_7$s, templateObject_8$l, templateObject_9$c, templateObject_10$b, templateObject_11$7, templateObject_12$4, templateObject_13$4;
|
|
6037
6037
|
|
|
6038
6038
|
var radioIds$2 = {
|
|
6039
6039
|
oneTime: {
|
|
@@ -6088,12 +6088,12 @@ var Autoship = function (_a) {
|
|
|
6088
6088
|
: benefitsColor.base }, void 0), jsxRuntime.jsx(BenefitText$3, __assign$1({ variant: "body" }, { children: benefit }), void 0)] }, benefit)); }) }, void 0), radioIds$2.autoship.id === radioCheck.id && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(FlexContainer$3, { children: [jsxRuntime.jsx(DeliveryFrequencyLabel$1, __assign$1({ variant: "body" }, { children: "Deliver every:" }), void 0), jsxRuntime.jsx(SimpleDropdown, { testId: "subscription-frecuency", initialValue: dropdownOptions[0], options: dropdownOptions, onChange: function (value) { return handleChange(value.value, 'dropdown'); }, placeHolder: "" }, void 0)] }, void 0), jsxRuntime.jsx(SubscriptionDetailsContainer, { children: jsxRuntime.jsx(Tooltip, __assign$1({ position: 0, content: tooltipContent, header: tooltipHeader, maxWidth: "300px", showCloseIcon: closeIcon }, { children: jsxRuntime.jsxs(FlexContainer$3, { children: [jsxRuntime.jsx(SubscriptionDetails, __assign$1({ variant: "body", weight: "demi" }, { children: "Subscription Details" }), void 0), jsxRuntime.jsx(Icon.Actions.CircleQuestion, { width: 1.2 }, void 0)] }, void 0) }), void 0) }, void 0)] }, void 0))] }), void 0)] }), void 0));
|
|
6089
6089
|
};
|
|
6090
6090
|
|
|
6091
|
-
var FlexContainer$2 = newStyled.div(templateObject_1$
|
|
6091
|
+
var FlexContainer$2 = newStyled.div(templateObject_1$1Q || (templateObject_1$1Q = __makeTemplateObject(["\n display: flex;\n\n ", "\n"], ["\n display: flex;\n\n ", "\n"])), function (_a) {
|
|
6092
6092
|
var theme = _a.theme;
|
|
6093
6093
|
return theme.name === 'TheSpaDr' &&
|
|
6094
6094
|
"\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 ";
|
|
6095
6095
|
});
|
|
6096
|
-
var DiscountTag$2 = newStyled.div(templateObject_2$
|
|
6096
|
+
var DiscountTag$2 = newStyled.div(templateObject_2$1j || (templateObject_2$1j = __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) {
|
|
6097
6097
|
var theme = _a.theme, isSelected = _a.isSelected;
|
|
6098
6098
|
return isSelected
|
|
6099
6099
|
? theme.component.autoship.discountTag.backgroundColor
|
|
@@ -6109,7 +6109,7 @@ var getSelectedBorder$1 = function (_a) {
|
|
|
6109
6109
|
}
|
|
6110
6110
|
return "1.5px solid ".concat(colors.shades['700'].color);
|
|
6111
6111
|
};
|
|
6112
|
-
var ContainerBase$2 = newStyled.div(templateObject_3$
|
|
6112
|
+
var ContainerBase$2 = newStyled.div(templateObject_3$12 || (templateObject_3$12 = __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) {
|
|
6113
6113
|
var selected = _a.selected, theme = _a.theme;
|
|
6114
6114
|
return selected ? getSelectedBorder$1(theme) : "1px solid ".concat(theme.colors.shades[200].color);
|
|
6115
6115
|
}, function (_a) {
|
|
@@ -6121,19 +6121,19 @@ var ContainerBase$2 = newStyled.div(templateObject_3$11 || (templateObject_3$11
|
|
|
6121
6121
|
var theme = _a.theme;
|
|
6122
6122
|
return theme.colors.pallete.primary.color;
|
|
6123
6123
|
});
|
|
6124
|
-
var SinglePurchaseContainer$2 = newStyled(ContainerBase$2)(templateObject_4$
|
|
6124
|
+
var SinglePurchaseContainer$2 = newStyled(ContainerBase$2)(templateObject_4$S || (templateObject_4$S = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n padding: 16px;\n\n ", "\n"], ["\n display: flex;\n justify-content: space-between;\n padding: 16px;\n\n ", "\n"])), function (_a) {
|
|
6125
6125
|
var onClick = _a.onClick;
|
|
6126
6126
|
return (onClick ? 'cursor: pointer;' : '');
|
|
6127
6127
|
});
|
|
6128
|
-
var SubscriptionContainer$2 = newStyled(ContainerBase$2)(templateObject_5$
|
|
6129
|
-
var SubscriptionHeader$2 = newStyled.div(templateObject_6$
|
|
6128
|
+
var SubscriptionContainer$2 = newStyled(ContainerBase$2)(templateObject_5$E || (templateObject_5$E = __makeTemplateObject(["\n padding: 16px;\n margin-bottom: 8px;\n position: relative;\n"], ["\n padding: 16px;\n margin-bottom: 8px;\n position: relative;\n"])));
|
|
6129
|
+
var SubscriptionHeader$2 = newStyled.div(templateObject_6$A || (templateObject_6$A = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n border-bottom: 1px solid ", ";\n padding-bottom: 10px;\n margin-bottom: 8px;\n cursor: pointer;\n\n & input:checked + div {\n border-color: ", ";\n }\n"], ["\n display: flex;\n justify-content: space-between;\n border-bottom: 1px solid ", ";\n padding-bottom: 10px;\n margin-bottom: 8px;\n cursor: pointer;\n\n & input:checked + div {\n border-color: ", ";\n }\n"])), function (_a) {
|
|
6130
6130
|
var theme = _a.theme;
|
|
6131
6131
|
return theme.colors.shades[200].color;
|
|
6132
6132
|
}, function (_a) {
|
|
6133
6133
|
var theme = _a.theme;
|
|
6134
6134
|
return theme.colors.pallete.primary.color;
|
|
6135
6135
|
});
|
|
6136
|
-
var BenefitsContainer$2 = newStyled.div(templateObject_7$
|
|
6136
|
+
var BenefitsContainer$2 = newStyled.div(templateObject_7$r || (templateObject_7$r = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
6137
6137
|
var Benefit$2 = newStyled.div(templateObject_8$k || (templateObject_8$k = __makeTemplateObject(["\n display: flex;\n padding: 8px 0;\n svg {\n overflow: visible;\n }\n"], ["\n display: flex;\n padding: 8px 0;\n svg {\n overflow: visible;\n }\n"])));
|
|
6138
6138
|
var BenefitText$2 = newStyled(Text$7)(templateObject_9$b || (templateObject_9$b = __makeTemplateObject(["\n line-height: 20px;\n margin-left: 9px;\n"], ["\n line-height: 20px;\n margin-left: 9px;\n"])));
|
|
6139
6139
|
var DeliveryFrequencyLabel = newStyled(Text$7)(templateObject_10$a || (templateObject_10$a = __makeTemplateObject(["\n line-height: 35px;\n margin-right: 8px;\n align-self: center;\n"], ["\n line-height: 35px;\n margin-right: 8px;\n align-self: center;\n"])));
|
|
@@ -6146,7 +6146,7 @@ var TooltipWrapper$1 = newStyled.div(templateObject_13$3 || (templateObject_13$3
|
|
|
6146
6146
|
var theme = _a.theme;
|
|
6147
6147
|
return theme.component.autoship.tooltip.margin;
|
|
6148
6148
|
});
|
|
6149
|
-
var templateObject_1$
|
|
6149
|
+
var templateObject_1$1Q, templateObject_2$1j, templateObject_3$12, templateObject_4$S, templateObject_5$E, templateObject_6$A, templateObject_7$r, templateObject_8$k, templateObject_9$b, templateObject_10$a, templateObject_11$6, templateObject_12$3, templateObject_13$3;
|
|
6150
6150
|
|
|
6151
6151
|
var radioIds$1 = {
|
|
6152
6152
|
oneTime: {
|
|
@@ -6224,13 +6224,13 @@ var componentSizeMapper = (_a$2 = {},
|
|
|
6224
6224
|
_a$2[exports.ComponentSize.Large] = exports.ComponentSize.Medium,
|
|
6225
6225
|
_a$2);
|
|
6226
6226
|
|
|
6227
|
-
var CustomerDetails = newStyled.div(templateObject_1$
|
|
6228
|
-
var CustomerInfo = newStyled.div(templateObject_2$
|
|
6229
|
-
var Name = newStyled.h4(templateObject_3$
|
|
6230
|
-
var StarIconContainer = newStyled.div(templateObject_4$
|
|
6231
|
-
var Description$2 = newStyled.p(templateObject_5$
|
|
6232
|
-
var ReviewDays = newStyled.span(templateObject_6$
|
|
6233
|
-
var templateObject_1$
|
|
6227
|
+
var CustomerDetails = newStyled.div(templateObject_1$1P || (templateObject_1$1P = __makeTemplateObject([""], [""])));
|
|
6228
|
+
var CustomerInfo = newStyled.div(templateObject_2$1i || (templateObject_2$1i = __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"])));
|
|
6229
|
+
var Name = newStyled.h4(templateObject_3$11 || (templateObject_3$11 = __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"])));
|
|
6230
|
+
var StarIconContainer = newStyled.div(templateObject_4$R || (templateObject_4$R = __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"])));
|
|
6231
|
+
var Description$2 = newStyled.p(templateObject_5$D || (templateObject_5$D = __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"])));
|
|
6232
|
+
var ReviewDays = newStyled.span(templateObject_6$z || (templateObject_6$z = __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"])));
|
|
6233
|
+
var templateObject_1$1P, templateObject_2$1i, templateObject_3$11, templateObject_4$R, templateObject_5$D, templateObject_6$z;
|
|
6234
6234
|
|
|
6235
6235
|
var NameWithStars = function (_a) {
|
|
6236
6236
|
var name = _a.name, size = _a.size;
|
|
@@ -6248,10 +6248,10 @@ var ResultFeedback = function (_a) {
|
|
|
6248
6248
|
return (jsxRuntime.jsxs(CustomerDetails, { children: [jsxRuntime.jsx(NameWithStars, { name: name, size: size }, void 0), description && jsxRuntime.jsx(Description$2, { children: description }, void 0), reviewDays && jsxRuntime.jsx(ReviewDays, { children: reviewDays }, void 0)] }, void 0));
|
|
6249
6249
|
};
|
|
6250
6250
|
|
|
6251
|
-
var Container$17 = newStyled.div(templateObject_1$
|
|
6252
|
-
var ImageContainer$7 = newStyled.div(templateObject_2$
|
|
6253
|
-
var ImageCard = newStyled.div(templateObject_3
|
|
6254
|
-
var UserInfoText = newStyled.div(templateObject_4$
|
|
6251
|
+
var Container$17 = newStyled.div(templateObject_1$1O || (templateObject_1$1O = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n row-gap: 15px;\n background: var(--colors-shades-white-color);\n border: 1px solid var(--colors-shades-50-color);\n box-sizing: border-box;\n border-radius: 10px;\n max-width: ", ";\n width: 100%;\n height: 100%;\n padding: ", ";\n flex-wrap: wrap;\n\n @media (max-width: 768px) {\n row-gap: 12px;\n max-width: ", ";\n }\n"], ["\n display: flex;\n flex-direction: column;\n row-gap: 15px;\n background: var(--colors-shades-white-color);\n border: 1px solid var(--colors-shades-50-color);\n box-sizing: border-box;\n border-radius: 10px;\n max-width: ", ";\n width: 100%;\n height: 100%;\n padding: ", ";\n flex-wrap: wrap;\n\n @media (max-width: 768px) {\n row-gap: 12px;\n max-width: ", ";\n }\n"])), function (props) { return props.styles.imageContainerMaxWidth; }, function (props) { return props.styles.imageContainerPadding; }, function (props) { return props.styles.imageContainerMobileMaxWidth; });
|
|
6252
|
+
var ImageContainer$7 = newStyled.div(templateObject_2$1h || (templateObject_2$1h = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n width: 100%;\n height: 100%;\n column-gap: 4px;\n align-items: center;\n justify-content: center;\n"], ["\n display: flex;\n flex-direction: row;\n width: 100%;\n height: 100%;\n column-gap: 4px;\n align-items: center;\n justify-content: center;\n"])));
|
|
6253
|
+
var ImageCard = newStyled.div(templateObject_3$10 || (templateObject_3$10 = __makeTemplateObject(["\n display: flex;\n min-height: ", ";\n min-width: ", ";\n width: ", ";\n flex-wrap: wrap;\n\n @media (max-width: 768px) {\n min-height: ", ";\n min-width: ", ";\n width: ", ";\n }\n"], ["\n display: flex;\n min-height: ", ";\n min-width: ", ";\n width: ", ";\n flex-wrap: wrap;\n\n @media (max-width: 768px) {\n min-height: ", ";\n min-width: ", ";\n width: ", ";\n }\n"])), function (props) { return props.styles.imageMinHeight; }, function (props) { return props.styles.imageMinWidth; }, function (props) { return props.styles.imageMinWidth; }, function (props) { return props.styles.mobileImageMinHeight; }, function (props) { return props.styles.mobileImageMinWidth; }, function (props) { return props.styles.mobileImageMinWidth; });
|
|
6254
|
+
var UserInfoText = newStyled.div(templateObject_4$Q || (templateObject_4$Q = __makeTemplateObject(["\n color: ", ";\n font-size: ", ";\n text-align: ", ";\n margin: 0;\n font-weight: 400;\n line-height: 130%;\n\n @media (max-width: 768px) {\n font-size: ", ";\n }\n"], ["\n color: ", ";\n font-size: ", ";\n text-align: ", ";\n margin: 0;\n font-weight: 400;\n line-height: 130%;\n\n @media (max-width: 768px) {\n font-size: ", ";\n }\n"])), function (_a) {
|
|
6255
6255
|
var theme = _a.theme;
|
|
6256
6256
|
return theme.colors.pallete.secondary.color;
|
|
6257
6257
|
}, function (_a) {
|
|
@@ -6261,7 +6261,7 @@ var UserInfoText = newStyled.div(templateObject_4$P || (templateObject_4$P = __m
|
|
|
6261
6261
|
var theme = _a.theme, size = _a.size;
|
|
6262
6262
|
return theme.component.beforeAfter.size[componentSizeMapper[size]].userInfoText.mobile.fontSize;
|
|
6263
6263
|
});
|
|
6264
|
-
var templateObject_1$
|
|
6264
|
+
var templateObject_1$1O, templateObject_2$1h, templateObject_3$10, templateObject_4$Q;
|
|
6265
6265
|
|
|
6266
6266
|
/* base styles & size variants */
|
|
6267
6267
|
var getStylesBySize$d = function (size, theme) {
|
|
@@ -6339,7 +6339,7 @@ var BeforeAfterCard = function (_a) {
|
|
|
6339
6339
|
return (jsxRuntime.jsxs(Container$17, __assign$1({ "data-testid": "Container", styles: stylesBySize }, { children: [jsxRuntime.jsxs(ImageContainer$7, __assign$1({ "data-testid": "ImageContainer" }, { children: [jsxRuntime.jsx(ImageCard, __assign$1({ "data-testid": "ImageCard", styles: stylesBySize }, { children: jsxRuntime.jsx(Image$3, { borderRadius: imageBorderRadius, src: beforeImage, alt: "before", height: "100%", width: "100%" }, void 0) }), void 0), jsxRuntime.jsx(ImageCard, __assign$1({ styles: stylesBySize }, { children: jsxRuntime.jsx(Image$3, { borderRadius: imageBorderRadius, src: afterImage, alt: "after", height: "100%", width: "100%" }, void 0) }), void 0)] }), void 0), jsxRuntime.jsx(Component, __assign$1({ name: name, size: size, alignCenter: alignCenter, text: infoText }, rest), void 0)] }), void 0));
|
|
6340
6340
|
};
|
|
6341
6341
|
|
|
6342
|
-
var Section = newStyled.div(templateObject_1$
|
|
6342
|
+
var Section = newStyled.div(templateObject_1$1N || (templateObject_1$1N = __makeTemplateObject(["\n font-weight: 600;\n display: flex;\n flex-direction: row;\n align-items: center;\n align-text: left;\n width: 100%;\n box-sizing: border-box;\n align-self: flex-start;\n padding: ", ";\n"], ["\n font-weight: 600;\n display: flex;\n flex-direction: row;\n align-items: center;\n align-text: left;\n width: 100%;\n box-sizing: border-box;\n align-self: flex-start;\n padding: ", ";\n"])), function (props) {
|
|
6343
6343
|
return props.type === exports.CardSectionType.Header ? '1.5rem 1.5rem 0' : '0 1.5rem 1.5rem';
|
|
6344
6344
|
});
|
|
6345
6345
|
var CardHeader = function (_a) {
|
|
@@ -6350,16 +6350,16 @@ var CardFooter = function (_a) {
|
|
|
6350
6350
|
var children = _a.children;
|
|
6351
6351
|
return (jsxRuntime.jsx(Section, __assign$1({ type: exports.CardSectionType.Footer }, { children: children }), void 0));
|
|
6352
6352
|
};
|
|
6353
|
-
var templateObject_1$
|
|
6353
|
+
var templateObject_1$1N;
|
|
6354
6354
|
|
|
6355
|
-
var Body = newStyled.div(templateObject_1$
|
|
6355
|
+
var Body = newStyled.div(templateObject_1$1M || (templateObject_1$1M = __makeTemplateObject(["\n display: flex;\n align-items: center;\n padding: 0.5rem 1.5rem;\n align-self: flex-start;\n"], ["\n display: flex;\n align-items: center;\n padding: 0.5rem 1.5rem;\n align-self: flex-start;\n"])));
|
|
6356
6356
|
var CardBody$1 = function (_a) {
|
|
6357
6357
|
var children = _a.children;
|
|
6358
6358
|
return jsxRuntime.jsx(Body, { children: children }, void 0);
|
|
6359
6359
|
};
|
|
6360
|
-
var templateObject_1$
|
|
6360
|
+
var templateObject_1$1M;
|
|
6361
6361
|
|
|
6362
|
-
var Container$16 = newStyled.div(templateObject_1$
|
|
6362
|
+
var Container$16 = newStyled.div(templateObject_1$1L || (templateObject_1$1L = __makeTemplateObject(["\n ", "\n width: ", ";\n background: ", ";\n border-radius: ", ";\n border: ", ";\n"], ["\n ", "\n width: ", ";\n background: ", ";\n border-radius: ", ";\n border: ", ";\n"])), function (_a) {
|
|
6363
6363
|
var flex = _a.flex;
|
|
6364
6364
|
return flex &&
|
|
6365
6365
|
"display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;";
|
|
@@ -6381,16 +6381,16 @@ var Card$3 = Object.assign(Card$2, {
|
|
|
6381
6381
|
Footer: CardFooter,
|
|
6382
6382
|
Body: CardBody$1,
|
|
6383
6383
|
});
|
|
6384
|
-
var templateObject_1$
|
|
6384
|
+
var templateObject_1$1L;
|
|
6385
6385
|
|
|
6386
|
-
var StyledWrapper = newStyled.div(templateObject_1$
|
|
6387
|
-
var StyledContainer = newStyled.div(templateObject_2$
|
|
6388
|
-
var TextLabel = newStyled(Text$7)(templateObject_3
|
|
6386
|
+
var StyledWrapper = newStyled.div(templateObject_1$1K || (templateObject_1$1K = __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"])));
|
|
6387
|
+
var StyledContainer = newStyled.div(templateObject_2$1g || (templateObject_2$1g = __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"])));
|
|
6388
|
+
var TextLabel = newStyled(Text$7)(templateObject_3$$ || (templateObject_3$$ = __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) {
|
|
6389
6389
|
var color = _a.color;
|
|
6390
6390
|
return color;
|
|
6391
6391
|
});
|
|
6392
|
-
var YouAreSaving = newStyled(Text$7)(templateObject_4$
|
|
6393
|
-
var templateObject_1$
|
|
6392
|
+
var YouAreSaving = newStyled(Text$7)(templateObject_4$P || (templateObject_4$P = __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"])));
|
|
6393
|
+
var templateObject_1$1K, templateObject_2$1g, templateObject_3$$, templateObject_4$P;
|
|
6394
6394
|
|
|
6395
6395
|
var Minimalistic = function (_a) {
|
|
6396
6396
|
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;
|
|
@@ -6398,28 +6398,28 @@ var Minimalistic = function (_a) {
|
|
|
6398
6398
|
return (jsxRuntime.jsx(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxRuntime.jsxs(StyledWrapper, { children: [jsxRuntime.jsxs(StyledContainer, __assign$1({ "data-testid": "".concat(testId, "-section") }, { children: [jsxRuntime.jsx(StyledContainer, { children: jsxRuntime.jsx(TextLabel, __assign$1({ variant: "body", weight: "demi", size: "small" }, { children: getMorePayLessText }), void 0) }, void 0), jsxRuntime.jsx(PriceLabel$1, { finalPrice: price, originalPrice: originalPrice, color: theme.colors.pallete.secondary.color, size: exports.ComponentSize.Small, testId: testId }, void 0)] }), void 0), jsxRuntime.jsxs(StyledContainer, __assign$1({ "data-testid": "".concat(testId, "-section-bottom") }, { children: [jsxRuntime.jsxs(TextLabel, __assign$1({ variant: "body", weight: "demi", size: "small", color: "var(--colors-pallete-red-color)" }, { children: [getQtyForText, " ", discount, "% ", offText.toLocaleUpperCase()] }), void 0), jsxRuntime.jsxs(YouAreSaving, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [youAreSavingText, ": ", savingPrice] }), void 0)] }), void 0)] }, void 0) }), void 0));
|
|
6399
6399
|
};
|
|
6400
6400
|
|
|
6401
|
-
var Container$15 = newStyled.div(templateObject_1$
|
|
6402
|
-
var Title$9 = newStyled.h1(templateObject_2$
|
|
6403
|
-
var Details$1 = newStyled.span(templateObject_3$
|
|
6404
|
-
var PriceContainer$2 = newStyled.span(templateObject_4$
|
|
6401
|
+
var Container$15 = newStyled.div(templateObject_1$1J || (templateObject_1$1J = __makeTemplateObject(["\n padding: 0.625rem 1.5rem;\n"], ["\n padding: 0.625rem 1.5rem;\n"])));
|
|
6402
|
+
var Title$9 = newStyled.h1(templateObject_2$1f || (templateObject_2$1f = __makeTemplateObject(["\n font-weight: 700;\n font-size: 1rem;\n line-height: 1.25rem;\n color: ", ";\n margin: 0;\n margin-bottom: 0.125rem;\n text-align: center;\n"], ["\n font-weight: 700;\n font-size: 1rem;\n line-height: 1.25rem;\n color: ", ";\n margin: 0;\n margin-bottom: 0.125rem;\n text-align: center;\n"])), function (props) { return props.color; });
|
|
6403
|
+
var Details$1 = newStyled.span(templateObject_3$_ || (templateObject_3$_ = __makeTemplateObject(["\n display: flex;\n align-items: center;\n font-weight: 400;\n font-size: 1rem;\n margin: 0;\n line-height: 1.5rem;\n justify-content: center;\n color: ", ";\n"], ["\n display: flex;\n align-items: center;\n font-weight: 400;\n font-size: 1rem;\n margin: 0;\n line-height: 1.5rem;\n justify-content: center;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
6404
|
+
var PriceContainer$2 = newStyled.span(templateObject_4$O || (templateObject_4$O = __makeTemplateObject(["\n margin: 0 0.313rem;\n display: flex;\n align-items: center;\n"], ["\n margin: 0 0.313rem;\n display: flex;\n align-items: center;\n"])));
|
|
6405
6405
|
var Simple = function (_a) {
|
|
6406
6406
|
var title = _a.title, freeShippingText = _a.freeShippingText, price = _a.price, anyQtyForText = _a.anyQtyForText, backgroundColor = _a.backgroundColor, _b = _a.widthAuto, widthAuto = _b === void 0 ? false : _b;
|
|
6407
6407
|
var theme = useTheme();
|
|
6408
6408
|
return (jsxRuntime.jsx(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxRuntime.jsxs(Container$15, { children: [jsxRuntime.jsx(Title$9, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Title" }, { children: title }), void 0), jsxRuntime.jsxs(Details$1, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Details" }, { children: [anyQtyForText, jsxRuntime.jsx(PriceContainer$2, __assign$1({ "data-testid": "Price" }, { children: jsxRuntime.jsx(PriceLabel$1, { finalPrice: price, color: "var(--colors-pallete-red-color)", size: exports.ComponentSize.Small }, void 0) }), void 0), "+ ", freeShippingText] }), void 0)] }, void 0) }), void 0));
|
|
6409
6409
|
};
|
|
6410
|
-
var templateObject_1$
|
|
6410
|
+
var templateObject_1$1J, templateObject_2$1f, templateObject_3$_, templateObject_4$O;
|
|
6411
6411
|
|
|
6412
6412
|
var Bundle = {
|
|
6413
6413
|
Minimalistic: Minimalistic,
|
|
6414
6414
|
Simple: Simple,
|
|
6415
6415
|
};
|
|
6416
6416
|
|
|
6417
|
-
var Container$14 = newStyled.div(templateObject_1$
|
|
6417
|
+
var Container$14 = newStyled.div(templateObject_1$1I || (templateObject_1$1I = __makeTemplateObject(["\n display: ", ";\n align-items: center;\n font-size: 0.88rem;\n"], ["\n display: ", ";\n align-items: center;\n font-size: 0.88rem;\n"])), function (_a) {
|
|
6418
6418
|
var displayBNPL = _a.displayBNPL;
|
|
6419
6419
|
return (displayBNPL ? 'flex' : 'none');
|
|
6420
6420
|
});
|
|
6421
|
-
var TextContainer$1 = newStyled.div(templateObject_2$
|
|
6422
|
-
var IconWrapper$1 = newStyled.div(templateObject_3$
|
|
6421
|
+
var TextContainer$1 = newStyled.div(templateObject_2$1e || (templateObject_2$1e = __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"])));
|
|
6422
|
+
var IconWrapper$1 = newStyled.div(templateObject_3$Z || (templateObject_3$Z = __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"])));
|
|
6423
6423
|
var BuyNowPayLater = function (_a) {
|
|
6424
6424
|
var _b;
|
|
6425
6425
|
var displayBNPL = _a.displayBNPL, installments = _a.installments, installmentPrice = _a.installmentPrice, _c = _a.iconFolder, iconFolder = _c === void 0 ? 'PDP' : _c, iconName = _a.iconName, _d = _a.showLogo, showLogo = _d === void 0 ? true : _d, _e = _a.iconColor, iconColor = _e === void 0 ? '#292929' : _e, fontSize = _a.fontSize;
|
|
@@ -6431,41 +6431,41 @@ var BuyNowPayLater = function (_a) {
|
|
|
6431
6431
|
}
|
|
6432
6432
|
return (jsxRuntime.jsx(Container$14, __assign$1({ displayBNPL: displayBNPL }, { children: jsxRuntime.jsxs(TextContainer$1, __assign$1({ style: { fontSize: fontSize }, "data-testid": "mainText" }, { children: ["Or ".concat(installments, " payments of "), jsxRuntime.jsx(Text$7, __assign$1({ variant: "heading6", style: { display: 'inline', fontSize: fontSize }, testId: "InstallmentPriceId" }, { children: installmentPrice }), void 0), showLogo ? ' with' : '', showLogo && (jsxRuntime.jsx(IconWrapper$1, { children: jsxRuntime.jsx(IconComponent, { width: 3.2, height: 2, fill: iconColor, style: { top: '-3px', position: 'relative' } }, void 0) }, void 0))] }), void 0) }), void 0));
|
|
6433
6433
|
};
|
|
6434
|
-
var templateObject_1$
|
|
6434
|
+
var templateObject_1$1I, templateObject_2$1e, templateObject_3$Z;
|
|
6435
6435
|
|
|
6436
|
-
var Text$6 = newStyled.span(templateObject_1$
|
|
6436
|
+
var Text$6 = newStyled.span(templateObject_1$1H || (templateObject_1$1H = __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; });
|
|
6437
6437
|
var Title$8 = function (_a) {
|
|
6438
6438
|
var title = _a.title;
|
|
6439
6439
|
var theme = useTheme();
|
|
6440
6440
|
return jsxRuntime.jsx(Text$6, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0);
|
|
6441
6441
|
};
|
|
6442
|
-
var templateObject_1$
|
|
6442
|
+
var templateObject_1$1H;
|
|
6443
6443
|
|
|
6444
|
-
var P$3 = newStyled.p(templateObject_1$
|
|
6444
|
+
var P$3 = newStyled.p(templateObject_1$1G || (templateObject_1$1G = __makeTemplateObject(["\n font-size: 0.75rem;\n font-weight: 400;\n line-height: 1.125rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"], ["\n font-size: 0.75rem;\n font-weight: 400;\n line-height: 1.125rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"])), function (props) { return props.color; });
|
|
6445
6445
|
var Promo = function (_a) {
|
|
6446
6446
|
var text = _a.text;
|
|
6447
6447
|
var theme = useTheme();
|
|
6448
6448
|
return (jsxRuntime.jsx(P$3, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "CartProductItemPromo" }, { children: text }), void 0));
|
|
6449
6449
|
};
|
|
6450
|
-
var templateObject_1$
|
|
6450
|
+
var templateObject_1$1G;
|
|
6451
6451
|
|
|
6452
|
-
var Text$5 = newStyled.span(templateObject_1$
|
|
6452
|
+
var Text$5 = newStyled.span(templateObject_1$1F || (templateObject_1$1F = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 1.125rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"], ["\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 1.125rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"])), function (props) { return props.color; });
|
|
6453
6453
|
var Description$1 = function (_a) {
|
|
6454
6454
|
var text = _a.text;
|
|
6455
6455
|
var theme = useTheme();
|
|
6456
6456
|
return jsxRuntime.jsx(Text$5, __assign$1({ color: theme.colors.shades['400'].color }, { children: text }), void 0);
|
|
6457
6457
|
};
|
|
6458
|
-
var templateObject_1$
|
|
6458
|
+
var templateObject_1$1F;
|
|
6459
6459
|
|
|
6460
|
-
var Container$13 = newStyled.div(templateObject_1$
|
|
6460
|
+
var Container$13 = newStyled.div(templateObject_1$1E || (templateObject_1$1E = __makeTemplateObject(["\n margin: 0;\n padding: 0.25rem;\n background-color: ", ";\n display: inline-flex;\n border-radius: 50%;\n cursor: pointer;\n width: ", ";\n height: ", ";\n justify-content: center;\n align-items: center;\n"], ["\n margin: 0;\n padding: 0.25rem;\n background-color: ", ";\n display: inline-flex;\n border-radius: 50%;\n cursor: pointer;\n width: ", ";\n height: ", ";\n justify-content: center;\n align-items: center;\n"])), function (props) { return props.backgroundColor; }, function (props) { return "".concat(props.size, "em"); }, function (props) { return "".concat(props.size, "em"); });
|
|
6461
6461
|
var CloseButton$1 = function (_a) {
|
|
6462
6462
|
var onClick = _a.onClick, size = _a.size;
|
|
6463
6463
|
var theme = useTheme();
|
|
6464
6464
|
return (jsxRuntime.jsx(Container$13, __assign$1({ backgroundColor: theme.colors.shades['700'].color, onClick: onClick, "data-testid": "CartProductItemCloseBtn", size: size }, { children: jsxRuntime.jsx(Icon.Actions.Close, { width: size - 1, height: size - 1, fill: "#fff" }, void 0) }), void 0));
|
|
6465
6465
|
};
|
|
6466
|
-
var templateObject_1$
|
|
6466
|
+
var templateObject_1$1E;
|
|
6467
6467
|
|
|
6468
|
-
var Text$4 = newStyled.h3(templateObject_1$
|
|
6468
|
+
var Text$4 = newStyled.h3(templateObject_1$1D || (templateObject_1$1D = __makeTemplateObject(["\n background-color: ", ";\n margin: 0;\n padding: 0.25rem 0.5rem;\n font-size: 0.625rem;\n font-weight: 700;\n line-height: 0.875rem;\n border-radius: ", ";\n display: initial;\n color: ", ";\n"], ["\n background-color: ", ";\n margin: 0;\n padding: 0.25rem 0.5rem;\n font-size: 0.625rem;\n font-weight: 700;\n line-height: 0.875rem;\n border-radius: ", ";\n display: initial;\n color: ", ";\n"])), function (_a) {
|
|
6469
6469
|
var backgroundColor = _a.backgroundColor;
|
|
6470
6470
|
return backgroundColor;
|
|
6471
6471
|
}, function (_a) {
|
|
@@ -6480,7 +6480,7 @@ var OfferBanner = function (_a) {
|
|
|
6480
6480
|
var theme = useTheme();
|
|
6481
6481
|
return (jsxRuntime.jsx(Text$4, __assign$1({ backgroundColor: backgroundColor, color: theme.colors.shades['700'].color, borderRadius: theme.component.text.offerBanner.borderRadius, "data-testid": "OfferBanner" }, { children: discountAppliedText }), void 0));
|
|
6482
6482
|
};
|
|
6483
|
-
var templateObject_1$
|
|
6483
|
+
var templateObject_1$1D;
|
|
6484
6484
|
|
|
6485
6485
|
var CartProductItem = {
|
|
6486
6486
|
Title: Title$8,
|
|
@@ -6490,20 +6490,20 @@ var CartProductItem = {
|
|
|
6490
6490
|
CloseButton: CloseButton$1,
|
|
6491
6491
|
};
|
|
6492
6492
|
|
|
6493
|
-
var Container$12 = newStyled.div(templateObject_1$
|
|
6494
|
-
var MobileContainer = newStyled(Container$12)(templateObject_2$
|
|
6495
|
-
var DollarPart = newStyled.span(templateObject_3$
|
|
6496
|
-
var ClubMembersText = newStyled.span(templateObject_4$
|
|
6497
|
-
var MobileDollarPart = newStyled(DollarPart)(templateObject_5$
|
|
6498
|
-
var MobileClubMembersText = newStyled(ClubMembersText)(templateObject_6$
|
|
6499
|
-
var DesktopDollarPart = newStyled(DollarPart)(templateObject_7$
|
|
6493
|
+
var Container$12 = newStyled.div(templateObject_1$1C || (templateObject_1$1C = __makeTemplateObject(["\n display: inline-flex;\n height: 20px;\n padding: 1px 10px;\n align-items: center;\n gap: 6px;\n flex-shrink: 0;\n border-radius: 6px;\n background: #882a2b;\n margin-top: 4px;\n margin-bottom: 10px;\n"], ["\n display: inline-flex;\n height: 20px;\n padding: 1px 10px;\n align-items: center;\n gap: 6px;\n flex-shrink: 0;\n border-radius: 6px;\n background: #882a2b;\n margin-top: 4px;\n margin-bottom: 10px;\n"])));
|
|
6494
|
+
var MobileContainer = newStyled(Container$12)(templateObject_2$1d || (templateObject_2$1d = __makeTemplateObject(["\n padding: 2px 2px;\n gap: 3px;\n"], ["\n padding: 2px 2px;\n gap: 3px;\n"])));
|
|
6495
|
+
var DollarPart = newStyled.span(templateObject_3$Y || (templateObject_3$Y = __makeTemplateObject(["\n color: #fff;\n font-family: 'Avenir Next', sans-serif;\n font-weight: 700;\n line-height: 14px; /* 116.667% */\n"], ["\n color: #fff;\n font-family: 'Avenir Next', sans-serif;\n font-weight: 700;\n line-height: 14px; /* 116.667% */\n"])));
|
|
6496
|
+
var ClubMembersText = newStyled.span(templateObject_4$N || (templateObject_4$N = __makeTemplateObject(["\n color: #fff;\n font-family: 'Avenir Next', sans-serif;\n font-weight: 500;\n line-height: 14px; /* 116.667% */\n"], ["\n color: #fff;\n font-family: 'Avenir Next', sans-serif;\n font-weight: 500;\n line-height: 14px; /* 116.667% */\n"])));
|
|
6497
|
+
var MobileDollarPart = newStyled(DollarPart)(templateObject_5$C || (templateObject_5$C = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
6498
|
+
var MobileClubMembersText = newStyled(ClubMembersText)(templateObject_6$y || (templateObject_6$y = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
6499
|
+
var DesktopDollarPart = newStyled(DollarPart)(templateObject_7$q || (templateObject_7$q = __makeTemplateObject(["\n font-size: 13px;\n"], ["\n font-size: 13px;\n"])));
|
|
6500
6500
|
var DesktopClubMembersText = newStyled(ClubMembersText)(templateObject_8$j || (templateObject_8$j = __makeTemplateObject(["\n font-size: 13px;\n"], ["\n font-size: 13px;\n"])));
|
|
6501
6501
|
var ClubPriceLabel = function (_a) {
|
|
6502
6502
|
var clubPrice = _a.clubPrice;
|
|
6503
6503
|
var isMobile = useWindowDimensions().isMobile;
|
|
6504
6504
|
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: isMobile ? (jsxRuntime.jsxs(MobileContainer, { children: [jsxRuntime.jsx(MobileDollarPart, { children: clubPrice }, void 0), jsxRuntime.jsx(MobileClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) : (jsxRuntime.jsxs(Container$12, { children: [jsxRuntime.jsx(DesktopDollarPart, { children: clubPrice }, void 0), jsxRuntime.jsx(DesktopClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) }, void 0));
|
|
6505
6505
|
};
|
|
6506
|
-
var templateObject_1$
|
|
6506
|
+
var templateObject_1$1C, templateObject_2$1d, templateObject_3$Y, templateObject_4$N, templateObject_5$C, templateObject_6$y, templateObject_7$q, templateObject_8$j;
|
|
6507
6507
|
|
|
6508
6508
|
var Spacing = function (_a) {
|
|
6509
6509
|
var size = _a.size, _b = _a.type, type = _b === void 0 ? 'block' : _b, children = _a.children, styleProp = _a.style;
|
|
@@ -6511,10 +6511,10 @@ var Spacing = function (_a) {
|
|
|
6511
6511
|
return jsxRuntime.jsx("div", __assign$1({ style: style }, { children: children }), void 0);
|
|
6512
6512
|
};
|
|
6513
6513
|
|
|
6514
|
-
var Container$11 = newStyled('div')(templateObject_1$
|
|
6515
|
-
var Content$2 = newStyled('div')(templateObject_2$
|
|
6516
|
-
var BarContainer$1 = newStyled('div')(templateObject_3$
|
|
6517
|
-
var Bar$2 = newStyled('div')(templateObject_4$
|
|
6514
|
+
var Container$11 = newStyled('div')(templateObject_1$1B || (templateObject_1$1B = __makeTemplateObject(["\n gap: 6px;\n display: flex;\n color: #292929;\n align-items: flex-end;\n"], ["\n gap: 6px;\n display: flex;\n color: #292929;\n align-items: flex-end;\n"])));
|
|
6515
|
+
var Content$2 = newStyled('div')(templateObject_2$1c || (templateObject_2$1c = __makeTemplateObject(["\n display: flex;\n align-items: flex-end;\n font-size: 14px;\n font-weight: 600;\n"], ["\n display: flex;\n align-items: flex-end;\n font-size: 14px;\n font-weight: 600;\n"])));
|
|
6516
|
+
var BarContainer$1 = newStyled('div')(templateObject_3$X || (templateObject_3$X = __makeTemplateObject(["\n gap: 2px;\n display: flex;\n align-items: flex-end;\n width: fit-content;\n"], ["\n gap: 2px;\n display: flex;\n align-items: flex-end;\n width: fit-content;\n"])));
|
|
6517
|
+
var Bar$2 = newStyled('div')(templateObject_4$M || (templateObject_4$M = __makeTemplateObject(["\n width: 2px;\n border-radius: 2px;\n height: ", ";\n background-color: ", ";\n"], ["\n width: 2px;\n border-radius: 2px;\n height: ", ";\n background-color: ", ";\n"])), function (_a) {
|
|
6518
6518
|
var index = _a.index;
|
|
6519
6519
|
return "".concat(6 + 3 * index, "px");
|
|
6520
6520
|
}, function (_a) {
|
|
@@ -6525,13 +6525,13 @@ var StrengthBars = function (_a) {
|
|
|
6525
6525
|
var _b = _a.barsFilled, barsFilled = _b === void 0 ? 0 : _b, supportText = _a.supportText;
|
|
6526
6526
|
return (jsxRuntime.jsxs(Container$11, __assign$1({ "data-testid": "strength-bar" }, { children: [jsxRuntime.jsx(BarContainer$1, { children: [1, 2, 3, 4, 5].map(function (bar, index) { return (jsxRuntime.jsx(Bar$2, { index: index, isFilled: bar <= barsFilled }, bar)); }) }, void 0), jsxRuntime.jsx(Content$2, { children: supportText }, void 0)] }), void 0));
|
|
6527
6527
|
};
|
|
6528
|
-
var templateObject_1$
|
|
6528
|
+
var templateObject_1$1B, templateObject_2$1c, templateObject_3$X, templateObject_4$M;
|
|
6529
6529
|
|
|
6530
|
-
var RegularPriceTagSpan = newStyled.span(templateObject_1$
|
|
6531
|
-
var ClubPriceTagSpan = newStyled.span(templateObject_2$
|
|
6532
|
-
var PriceContainer$1 = newStyled.span(templateObject_3$
|
|
6533
|
-
var PriceContainerV2 = newStyled.span(templateObject_4$
|
|
6534
|
-
var PriceWithTagContainer = newStyled.span(templateObject_5$
|
|
6530
|
+
var RegularPriceTagSpan = newStyled.span(templateObject_1$1A || (templateObject_1$1A = __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"])));
|
|
6531
|
+
var ClubPriceTagSpan = newStyled.span(templateObject_2$1b || (templateObject_2$1b = __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"])));
|
|
6532
|
+
var PriceContainer$1 = newStyled.span(templateObject_3$W || (templateObject_3$W = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
6533
|
+
var PriceContainerV2 = newStyled.span(templateObject_4$L || (templateObject_4$L = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
6534
|
+
var PriceWithTagContainer = newStyled.span(templateObject_5$B || (templateObject_5$B = __makeTemplateObject(["\n display: flex;\n gap: 8px;\n"], ["\n display: flex;\n gap: 8px;\n"])));
|
|
6535
6535
|
var RegularPriceTag = function () {
|
|
6536
6536
|
return jsxRuntime.jsx(RegularPriceTagSpan, { children: "REGULAR PRICE" }, void 0);
|
|
6537
6537
|
};
|
|
@@ -6584,14 +6584,14 @@ var PriceLabelV4 = function (_a) {
|
|
|
6584
6584
|
? finalPriceArray[0]
|
|
6585
6585
|
: (_b = "".concat(productFinalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1], "."] }), void 0), jsxRuntime.jsx(Price, __assign$1({ finalPriceStyledSmall: true, style: { marginTop: '-6px', color: '#c64844' } }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }, void 0), jsxRuntime.jsx(ClubPriceTag, {}, void 0)] }, void 0)] }, void 0)), discount && (jsxRuntime.jsx(TagContainer, __assign$1({ size: size }, { children: jsxRuntime.jsx(DiscountTag$3, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
|
|
6586
6586
|
};
|
|
6587
|
-
var templateObject_1$
|
|
6587
|
+
var templateObject_1$1A, templateObject_2$1b, templateObject_3$W, templateObject_4$L, templateObject_5$B;
|
|
6588
6588
|
|
|
6589
6589
|
var STARTS_NUMBER = 5;
|
|
6590
6590
|
|
|
6591
|
-
var Container$10 = newStyled.div(templateObject_1$
|
|
6592
|
-
var templateObject_1$
|
|
6591
|
+
var Container$10 = newStyled.div(templateObject_1$1z || (templateObject_1$1z = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
6592
|
+
var templateObject_1$1z;
|
|
6593
6593
|
|
|
6594
|
-
var StarContainer = newStyled.div(templateObject_1$
|
|
6594
|
+
var StarContainer = newStyled.div(templateObject_1$1y || (templateObject_1$1y = __makeTemplateObject(["\n display: flex;\n margin-right: ", ";\n"], ["\n display: flex;\n margin-right: ", ";\n"])), function (_a) {
|
|
6595
6595
|
var marginRight = _a.marginRight;
|
|
6596
6596
|
return marginRight;
|
|
6597
6597
|
});
|
|
@@ -6607,7 +6607,7 @@ var StarList = function (_a) {
|
|
|
6607
6607
|
return (jsxRuntime.jsx(StarContainer, __assign$1({ "data-testid": "star-container", marginRight: theme.component.stars.element[size].marginRight }, { children: index < Math.floor(rating) ? (jsxRuntime.jsx(Icon.PDP.Star, __assign$1({}, iconProps), void 0)) : index === Math.floor(rating) && rating % 1 != 0 ? (jsxRuntime.jsx(Icon.PDP.StarHalf, __assign$1({}, iconProps), void 0)) : (jsxRuntime.jsx(Icon.PDP.StarEmpty, __assign$1({}, iconProps), void 0)) }), "star-container-".concat(index)));
|
|
6608
6608
|
}) }, void 0));
|
|
6609
6609
|
};
|
|
6610
|
-
var templateObject_1$
|
|
6610
|
+
var templateObject_1$1y;
|
|
6611
6611
|
|
|
6612
6612
|
/* base styles & size variants */
|
|
6613
6613
|
var LabelStyles = {
|
|
@@ -6648,7 +6648,7 @@ var LabelStyles = {
|
|
|
6648
6648
|
});
|
|
6649
6649
|
},
|
|
6650
6650
|
};
|
|
6651
|
-
var Container$$ = newStyled.a(templateObject_1$
|
|
6651
|
+
var Container$$ = newStyled.a(templateObject_1$1x || (templateObject_1$1x = __makeTemplateObject(["\n display: flex;\n align-items: center;\n text-decoration: none;\n"], ["\n display: flex;\n align-items: center;\n text-decoration: none;\n"])));
|
|
6652
6652
|
var CustomLabel = newStyled.div(function (_a) {
|
|
6653
6653
|
var theme = _a.theme, size = _a.size, wrapWithParenthesis = _a.wrapWithParenthesis, underline = _a.underline;
|
|
6654
6654
|
return [
|
|
@@ -6667,8 +6667,8 @@ var CustomLabel = newStyled.div(function (_a) {
|
|
|
6667
6667
|
}),
|
|
6668
6668
|
];
|
|
6669
6669
|
});
|
|
6670
|
-
var RatingLabel = newStyled.span(templateObject_2$
|
|
6671
|
-
var templateObject_1$
|
|
6670
|
+
var RatingLabel = newStyled.span(templateObject_2$1a || (templateObject_2$1a = __makeTemplateObject(["\n font-size: 16px;\n font-weight: 600;\n color: ", ";\n padding-right: 6px;\n text-decoration: none;\n"], ["\n font-size: 16px;\n font-weight: 600;\n color: ", ";\n padding-right: 6px;\n text-decoration: none;\n"])), function (props) { return props.color; });
|
|
6671
|
+
var templateObject_1$1x, templateObject_2$1a;
|
|
6672
6672
|
|
|
6673
6673
|
var Rating = function (_a) {
|
|
6674
6674
|
var _b = _a.size, size = _b === void 0 ? exports.ComponentSize.Medium : _b, reviews = _a.reviews, reviewsText = _a.reviewsText, rating = _a.rating, _c = _a.showRatingText, showRatingText = _c === void 0 ? false : _c, _d = _a.wrapWithParenthesis, wrapWithParenthesis = _d === void 0 ? false : _d, _e = _a.underline, underline = _e === void 0 ? false : _e, reviewsContainerId = _a.reviewsContainerId;
|
|
@@ -6763,10 +6763,10 @@ var ImageContainer$6 = newStyled.div(function (_a) {
|
|
|
6763
6763
|
height: height,
|
|
6764
6764
|
});
|
|
6765
6765
|
});
|
|
6766
|
-
var ImageHoverContainer$3 = newStyled.img(templateObject_1$
|
|
6767
|
-
var Container$_ = newStyled.a(templateObject_2$
|
|
6768
|
-
var ProdCardContainer$4 = newStyled.div(templateObject_3$
|
|
6769
|
-
var Title$7 = newStyled.p(templateObject_4$
|
|
6766
|
+
var ImageHoverContainer$3 = newStyled.img(templateObject_1$1w || (templateObject_1$1w = __makeTemplateObject(["\n opacity: 0;\n position: absolute;\n transition: all 0.4s ease-in-out;\n"], ["\n opacity: 0;\n position: absolute;\n transition: all 0.4s ease-in-out;\n"])));
|
|
6767
|
+
var Container$_ = newStyled.a(templateObject_2$19 || (templateObject_2$19 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n text-decoration: none;\n\n &:hover .hover__image {\n opacity: 1;\n }\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n text-decoration: none;\n\n &:hover .hover__image {\n opacity: 1;\n }\n"])));
|
|
6768
|
+
var ProdCardContainer$4 = newStyled.div(templateObject_3$V || (templateObject_3$V = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: min-content;\n text-decoration: none;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: min-content;\n text-decoration: none;\n"])));
|
|
6769
|
+
var Title$7 = newStyled.p(templateObject_4$K || (templateObject_4$K = __makeTemplateObject(["\n font-size: ", ";\n font-weight: ", ";\n line-height: 1.375rem;\n min-height: 2.75rem;\n text-align: center;\n color: ", ";\n margin: 0.25rem 0;\n text-align: ", ";\n\n ", "\n\n ", "\n\n @media (max-width: ", "px) {\n font-size: ", ";\n }\n"], ["\n font-size: ", ";\n font-weight: ", ";\n line-height: 1.375rem;\n min-height: 2.75rem;\n text-align: center;\n color: ", ";\n margin: 0.25rem 0;\n text-align: ", ";\n\n ", "\n\n ", "\n\n @media (max-width: ", "px) {\n font-size: ", ";\n }\n"])), function (_a) {
|
|
6770
6770
|
var theme = _a.theme;
|
|
6771
6771
|
return STYLES_BY_THEME[theme.name].title.fontSize;
|
|
6772
6772
|
}, function (_a) {
|
|
@@ -6817,17 +6817,17 @@ var getStylesBySize$c = function (size) {
|
|
|
6817
6817
|
};
|
|
6818
6818
|
}
|
|
6819
6819
|
};
|
|
6820
|
-
var TopTagContainer$8 = newStyled.div(templateObject_5$
|
|
6820
|
+
var TopTagContainer$8 = newStyled.div(templateObject_5$A || (templateObject_5$A = __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) {
|
|
6821
6821
|
var style = _a.style;
|
|
6822
6822
|
return style.width;
|
|
6823
6823
|
});
|
|
6824
|
-
var BottomTagContainer$8 = newStyled.div(templateObject_6$
|
|
6824
|
+
var BottomTagContainer$8 = newStyled.div(templateObject_6$x || (templateObject_6$x = __makeTemplateObject(["\n position: absolute;\n bottom: 10%;\n left: 0;\n width: ", ";\n z-index: 1;\n"], ["\n position: absolute;\n bottom: 10%;\n left: 0;\n width: ", ";\n z-index: 1;\n"])), function (_a) {
|
|
6825
6825
|
var style = _a.style;
|
|
6826
6826
|
return style.width;
|
|
6827
6827
|
});
|
|
6828
|
-
var MarginTopContainer$1 = newStyled.div(templateObject_7$
|
|
6828
|
+
var MarginTopContainer$1 = newStyled.div(templateObject_7$p || (templateObject_7$p = __makeTemplateObject(["\n margin-top: 8px;\n"], ["\n margin-top: 8px;\n"])));
|
|
6829
6829
|
var ClubOfferPriceLabelWrapper = newStyled.div(templateObject_8$i || (templateObject_8$i = __makeTemplateObject(["\n margin-top: 2px;\n margin-bottom: 2px;\n"], ["\n margin-top: 2px;\n margin-bottom: 2px;\n"])));
|
|
6830
|
-
var templateObject_1$
|
|
6830
|
+
var templateObject_1$1w, templateObject_2$19, templateObject_3$V, templateObject_4$K, templateObject_5$A, templateObject_6$x, templateObject_7$p, templateObject_8$i;
|
|
6831
6831
|
|
|
6832
6832
|
var ProductItemMobile = function (_a) {
|
|
6833
6833
|
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, _c = _a.priceDisplayType, priceDisplayType = _c === void 0 ? 'default' : _c, priceAtBottom = _a.priceAtBottom, priceLoading = _a.priceLoading, _d = _a.noFollow, noFollow = _d === void 0 ? false : _d, _e = _a.colorPicker, colorPicker = _e === void 0 ? {
|
|
@@ -6902,10 +6902,10 @@ var ImageContainer$5 = newStyled.div(function (_a) {
|
|
|
6902
6902
|
height: height,
|
|
6903
6903
|
});
|
|
6904
6904
|
});
|
|
6905
|
-
var ImageHoverContainer$2 = newStyled.img(templateObject_1$
|
|
6906
|
-
var Container$Z = newStyled.a(templateObject_2$
|
|
6907
|
-
var ProdCardContainer$3 = newStyled.div(templateObject_3$
|
|
6908
|
-
var Title$6 = newStyled.p(templateObject_4$
|
|
6905
|
+
var ImageHoverContainer$2 = newStyled.img(templateObject_1$1v || (templateObject_1$1v = __makeTemplateObject(["\n opacity: 0;\n position: absolute;\n transition: all 0.4s ease-in-out;\n border-radius: ", ";\n"], ["\n opacity: 0;\n position: absolute;\n transition: all 0.4s ease-in-out;\n border-radius: ", ";\n"])), function (props) { return props.borderRadius; });
|
|
6906
|
+
var Container$Z = newStyled.a(templateObject_2$18 || (templateObject_2$18 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n text-decoration: none;\n\n &:hover .hover__image {\n opacity: 1;\n }\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n text-decoration: none;\n\n &:hover .hover__image {\n opacity: 1;\n }\n"])));
|
|
6907
|
+
var ProdCardContainer$3 = newStyled.div(templateObject_3$U || (templateObject_3$U = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: min-content;\n text-decoration: none;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: min-content;\n text-decoration: none;\n"])));
|
|
6908
|
+
var Title$6 = newStyled.p(templateObject_4$J || (templateObject_4$J = __makeTemplateObject(["\n font-size: 0.83rem;\n font-weight: normal;\n line-height: 1.375rem;\n min-height: 2.75rem;\n text-align: center;\n color: ", ";\n margin: 0.25rem 0;\n text-align: ", ";\n"], ["\n font-size: 0.83rem;\n font-weight: normal;\n line-height: 1.375rem;\n min-height: 2.75rem;\n text-align: center;\n color: ", ";\n margin: 0.25rem 0;\n text-align: ", ";\n"])), function (props) { return props.theme.colors.pallete.secondary.color; }, function (props) { return props.align; });
|
|
6909
6909
|
var getStylesBySize$b = function (size) {
|
|
6910
6910
|
switch (size) {
|
|
6911
6911
|
case exports.ComponentSize.Medium:
|
|
@@ -6931,12 +6931,12 @@ var getStylesBySize$b = function (size) {
|
|
|
6931
6931
|
};
|
|
6932
6932
|
}
|
|
6933
6933
|
};
|
|
6934
|
-
var TopTagContainer$7 = newStyled.div(templateObject_5$
|
|
6934
|
+
var TopTagContainer$7 = newStyled.div(templateObject_5$z || (templateObject_5$z = __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) {
|
|
6935
6935
|
var style = _a.style;
|
|
6936
6936
|
return style.width;
|
|
6937
6937
|
});
|
|
6938
|
-
var TopRightTagContainer$2 = newStyled.div(templateObject_6$
|
|
6939
|
-
var BottomTagContainer$7 = newStyled.div(templateObject_7$
|
|
6938
|
+
var TopRightTagContainer$2 = newStyled.div(templateObject_6$w || (templateObject_6$w = __makeTemplateObject(["\n position: absolute;\n right: 0;\n top: 0;\n z-index: 1;\n"], ["\n position: absolute;\n right: 0;\n top: 0;\n z-index: 1;\n"])));
|
|
6939
|
+
var BottomTagContainer$7 = newStyled.div(templateObject_7$o || (templateObject_7$o = __makeTemplateObject(["\n position: absolute;\n bottom: 10%;\n left: 0;\n width: ", ";\n z-index: 1;\n"], ["\n position: absolute;\n bottom: 10%;\n left: 0;\n width: ", ";\n z-index: 1;\n"])), function (_a) {
|
|
6940
6940
|
var style = _a.style;
|
|
6941
6941
|
return style.width;
|
|
6942
6942
|
});
|
|
@@ -6991,9 +6991,9 @@ var ProductItemTK = function (_a) {
|
|
|
6991
6991
|
marginTop: hasSpacing ? undefined : textContainerGap,
|
|
6992
6992
|
} }, { 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));
|
|
6993
6993
|
};
|
|
6994
|
-
var templateObject_1$
|
|
6994
|
+
var templateObject_1$1v, templateObject_2$18, templateObject_3$U, templateObject_4$J, templateObject_5$z, templateObject_6$w, templateObject_7$o, templateObject_8$h;
|
|
6995
6995
|
|
|
6996
|
-
var Container$Y = newStyled.div(templateObject_1$
|
|
6996
|
+
var Container$Y = newStyled.div(templateObject_1$1u || (templateObject_1$1u = __makeTemplateObject(["\n display: flex;\n row-gap: 1.875rem;\n column-gap: 1.875rem;\n flex-wrap: wrap;\n"], ["\n display: flex;\n row-gap: 1.875rem;\n column-gap: 1.875rem;\n flex-wrap: wrap;\n"])));
|
|
6997
6997
|
function withProductGrid(ProductItemComponent, data) {
|
|
6998
6998
|
function WithProductGrid(props) {
|
|
6999
6999
|
return (jsxRuntime.jsx(Container$Y, __assign$1({ "data-testid": "product-grid-container" }, { children: data.map(function (product, index) { return (jsxRuntime.jsx(ProductItemComponent, __assign$1({}, product, props), index)); }) }), void 0));
|
|
@@ -7003,7 +7003,7 @@ function withProductGrid(ProductItemComponent, data) {
|
|
|
7003
7003
|
WithProductGrid.displayName = "withGrid(".concat(wrappedComponentName, ")");
|
|
7004
7004
|
return WithProductGrid;
|
|
7005
7005
|
}
|
|
7006
|
-
var templateObject_1$
|
|
7006
|
+
var templateObject_1$1u;
|
|
7007
7007
|
|
|
7008
7008
|
var Collection = {
|
|
7009
7009
|
ProductItemMobile: ProductItemMobile,
|
|
@@ -7011,11 +7011,11 @@ var Collection = {
|
|
|
7011
7011
|
ProductItemTK: ProductItemTK,
|
|
7012
7012
|
};
|
|
7013
7013
|
|
|
7014
|
-
var CustomRadioGroup = newStyled(lt)(templateObject_1$
|
|
7015
|
-
newStyled(lt.Label)(templateObject_2$
|
|
7016
|
-
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$
|
|
7017
|
-
var Span = newStyled.span(templateObject_4$
|
|
7018
|
-
var OptionsContainer = newStyled.div(templateObject_5$
|
|
7014
|
+
var CustomRadioGroup = newStyled(lt)(templateObject_1$1t || (templateObject_1$1t = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
7015
|
+
newStyled(lt.Label)(templateObject_2$17 || (templateObject_2$17 = __makeTemplateObject(["\n font-size: 0.88rem;\n"], ["\n font-size: 0.88rem;\n"])));
|
|
7016
|
+
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$T || (templateObject_3$T = __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"])));
|
|
7017
|
+
var Span = newStyled.span(templateObject_4$I || (templateObject_4$I = __makeTemplateObject(["\n font-weight: 600;\n"], ["\n font-weight: 600;\n"])));
|
|
7018
|
+
var OptionsContainer = newStyled.div(templateObject_5$y || (templateObject_5$y = __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"])));
|
|
7019
7019
|
var Label$5 = function (_a) {
|
|
7020
7020
|
var label = _a.label, values = _a.values;
|
|
7021
7021
|
return (jsxRuntime.jsxs(Text$7, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [label, " ", jsxRuntime.jsx(Span, { children: values }, void 0)] }), void 0));
|
|
@@ -7033,7 +7033,7 @@ var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
|
|
|
7033
7033
|
Option: Option,
|
|
7034
7034
|
OptionsContainer: OptionsContainer,
|
|
7035
7035
|
});
|
|
7036
|
-
var templateObject_1$
|
|
7036
|
+
var templateObject_1$1t, templateObject_2$17, templateObject_3$T, templateObject_4$I, templateObject_5$y;
|
|
7037
7037
|
|
|
7038
7038
|
var OneColorSelector = function (_a) {
|
|
7039
7039
|
var color = _a.color, selected = _a.selected, testId = _a.testId, noStock = _a.noStock, _b = _a.showCross, showCross = _b === void 0 ? false : _b;
|
|
@@ -7074,21 +7074,21 @@ var OutOfStock = function (_a) {
|
|
|
7074
7074
|
return (jsxRuntime.jsxs("svg", __assign$1({ width: "32", height: "33", viewBox: "0 0 32 33", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsxRuntime.jsx("title", { children: title }, void 0), jsxRuntime.jsx("mask", __assign$1({ id: "path-1-inside-1", fill: "white" }, { children: jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.89435 9.60565C8.40619 10.0938 8.40619 10.8853 8.89435 11.3734L14.0209 16.5L8.89433 21.6266C8.40617 22.1147 8.40617 22.9062 8.89433 23.3943C9.38248 23.8825 10.1739 23.8825 10.6621 23.3943L15.7887 18.2677L21.2687 23.7478C21.7569 24.2359 22.5483 24.2359 23.0365 23.7478C23.5246 23.2596 23.5246 22.4682 23.0365 21.98L17.5564 16.5L23.0365 11.02C23.5246 10.5318 23.5246 9.74035 23.0365 9.25219C22.5483 8.76404 21.7568 8.76404 21.2687 9.25219L15.7887 14.7322L10.6621 9.60565C10.174 9.1175 9.3825 9.1175 8.89435 9.60565Z" }, void 0) }), void 0), jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.89435 9.60565C8.40619 10.0938 8.40619 10.8853 8.89435 11.3734L14.0209 16.5L8.89433 21.6266C8.40617 22.1147 8.40617 22.9062 8.89433 23.3943C9.38248 23.8825 10.1739 23.8825 10.6621 23.3943L15.7887 18.2677L21.2687 23.7478C21.7569 24.2359 22.5483 24.2359 23.0365 23.7478C23.5246 23.2596 23.5246 22.4682 23.0365 21.98L17.5564 16.5L23.0365 11.02C23.5246 10.5318 23.5246 9.74035 23.0365 9.25219C22.5483 8.76404 21.7568 8.76404 21.2687 9.25219L15.7887 14.7322L10.6621 9.60565C10.174 9.1175 9.3825 9.1175 8.89435 9.60565Z", fill: theme.colors.shades['300'].color }, void 0), jsxRuntime.jsx("path", { d: "M14.0209 16.5L14.5866 17.0657L15.1523 16.5L14.5866 15.9343L14.0209 16.5ZM8.89433 21.6266L9.46001 22.1922L8.89433 21.6266ZM10.6621 23.3943L11.2278 23.96L10.6621 23.3943ZM15.7887 18.2677L16.3544 17.7021L15.7887 17.1364L15.223 17.7021L15.7887 18.2677ZM17.5564 16.5L16.9908 15.9343L16.4251 16.5L16.9908 17.0657L17.5564 16.5ZM23.0365 11.02L23.6021 11.5856L23.0365 11.02ZM21.2687 9.25219L21.8344 9.81788L21.2687 9.25219ZM15.7887 14.7322L15.223 15.2979L15.7887 15.8636L16.3544 15.2979L15.7887 14.7322ZM9.46003 10.8077C9.2843 10.632 9.2843 10.3471 9.46003 10.1713L8.32866 9.03997C7.52809 9.84054 7.52809 11.1385 8.32866 11.9391L9.46003 10.8077ZM14.5866 15.9343L9.46003 10.8077L8.32866 11.9391L13.4552 17.0657L14.5866 15.9343ZM9.46001 22.1922L14.5866 17.0657L13.4552 15.9343L8.32864 21.0609L9.46001 22.1922ZM9.46001 22.8286C9.28428 22.6529 9.28428 22.368 9.46001 22.1922L8.32864 21.0609C7.52807 21.8614 7.52807 23.1594 8.32864 23.96L9.46001 22.8286ZM10.0964 22.8286C9.92067 23.0044 9.63575 23.0044 9.46001 22.8286L8.32864 23.96C9.12922 24.7606 10.4272 24.7606 11.2278 23.96L10.0964 22.8286ZM15.223 17.7021L10.0964 22.8286L11.2278 23.96L16.3544 18.8334L15.223 17.7021ZM21.8344 23.1821L16.3544 17.7021L15.223 18.8334L20.703 24.3135L21.8344 23.1821ZM22.4708 23.1821C22.2951 23.3578 22.0101 23.3578 21.8344 23.1821L20.703 24.3135C21.5036 25.114 22.8016 25.114 23.6022 24.3135L22.4708 23.1821ZM22.4708 22.5457C22.6465 22.7214 22.6465 23.0064 22.4708 23.1821L23.6022 24.3135C24.4027 23.5129 24.4027 22.2149 23.6022 21.4143L22.4708 22.5457ZM16.9908 17.0657L22.4708 22.5457L23.6022 21.4143L18.1221 15.9343L16.9908 17.0657ZM22.4708 10.4543L16.9908 15.9343L18.1221 17.0657L23.6021 11.5856L22.4708 10.4543ZM22.4708 9.81788C22.6465 9.99361 22.6465 10.2785 22.4708 10.4543L23.6021 11.5856C24.4027 10.7851 24.4027 9.48708 23.6021 8.68651L22.4708 9.81788ZM21.8344 9.81788C22.0101 9.64214 22.295 9.64214 22.4708 9.81788L23.6021 8.68651C22.8016 7.88593 21.5036 7.88593 20.703 8.68651L21.8344 9.81788ZM16.3544 15.2979L21.8344 9.81788L20.703 8.68651L15.223 14.1665L16.3544 15.2979ZM10.0964 10.1713L15.223 15.2979L16.3544 14.1665L11.2278 9.03997L10.0964 10.1713ZM9.46003 10.1713C9.63577 9.9956 9.92069 9.9956 10.0964 10.1713L11.2278 9.03997C10.4272 8.23939 9.12924 8.23939 8.32866 9.03997L9.46003 10.1713Z", fill: "white", mask: "url(#path-1-inside-1)" }, void 0), jsxRuntime.jsx("circle", { cx: "16", cy: "16.5", r: "12", stroke: theme.colors.shades['300'].color, strokeWidth: "0.5" }, void 0)] }), void 0));
|
|
7075
7075
|
};
|
|
7076
7076
|
|
|
7077
|
-
var Container$X = newStyled.div(templateObject_1$
|
|
7077
|
+
var Container$X = newStyled.div(templateObject_1$1s || (templateObject_1$1s = __makeTemplateObject(["\n width: 2rem;\n height: 2rem;\n border-radius: 50%;\n border: 0.081rem solid ", ";\n box-sizing: border-box;\n padding: 0.156rem;\n cursor: pointer;\n opacity: ", ";\n"], ["\n width: 2rem;\n height: 2rem;\n border-radius: 50%;\n border: 0.081rem solid ", ";\n box-sizing: border-box;\n padding: 0.156rem;\n cursor: pointer;\n opacity: ", ";\n"])), function (_a) {
|
|
7078
7078
|
var borderColor = _a.borderColor;
|
|
7079
7079
|
return borderColor;
|
|
7080
7080
|
}, function (_a) {
|
|
7081
7081
|
var noStock = _a.noStock;
|
|
7082
7082
|
return (noStock ? '0.4' : '1');
|
|
7083
7083
|
});
|
|
7084
|
-
var Image$2 = newStyled.img(templateObject_2$
|
|
7084
|
+
var Image$2 = newStyled.img(templateObject_2$16 || (templateObject_2$16 = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n"], ["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n"])));
|
|
7085
7085
|
var PatternSelector = function (_a) {
|
|
7086
7086
|
var url = _a.url, selected = _a.selected, testId = _a.testId, noStock = _a.noStock;
|
|
7087
7087
|
var theme = useTheme();
|
|
7088
7088
|
var outerBorder = selected ? theme.colors.shades['550'].color : 'transparent';
|
|
7089
7089
|
return (jsxRuntime.jsx(Container$X, __assign$1({ "data-testid": testId, borderColor: outerBorder, noStock: noStock }, { children: jsxRuntime.jsx(Image$2, { src: url, alt: "pattern" }, void 0) }), void 0));
|
|
7090
7090
|
};
|
|
7091
|
-
var templateObject_1$
|
|
7091
|
+
var templateObject_1$1s, templateObject_2$16;
|
|
7092
7092
|
|
|
7093
7093
|
var renderOptions$1 = function (options, showCross) {
|
|
7094
7094
|
if (showCross === void 0) { showCross = false; }
|
|
@@ -7115,10 +7115,10 @@ var ColorPickerWithTooltip = function (_a) {
|
|
|
7115
7115
|
var _b = _a.options, options = _b === void 0 ? [] : _b, selectedValue = _a.selectedValue, label = _a.label, onChange = _a.onChange, _c = _a.inline, inline = _c === void 0 ? false : _c, _d = _a.maxVisibleOptions, maxVisibleOptions = _d === void 0 ? 5 : _d, showCross = _a.showCross;
|
|
7116
7116
|
var visibleOptions = options.slice(0, maxVisibleOptions);
|
|
7117
7117
|
var hiddenOptions = options.slice(maxVisibleOptions);
|
|
7118
|
-
var ColorPickerWrapper = newStyled(ColorRadioGroup$1)(templateObject_1$
|
|
7118
|
+
var ColorPickerWrapper = newStyled(ColorRadioGroup$1)(templateObject_1$1r || (templateObject_1$1r = __makeTemplateObject(["\n max-width: 300px;\n\n .tooltip-container {\n transform: translateX(-30%);\n &::before,\n &::after {\n left: 80%;\n }\n }\n\n .arrow {\n width: 24px;\n height: 24px;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n margin-bottom: 10px;\n }\n\n .tooltip-content {\n display: flex;\n max-width: 300px;\n flex-wrap: wrap;\n }\n "], ["\n max-width: 300px;\n\n .tooltip-container {\n transform: translateX(-30%);\n &::before,\n &::after {\n left: 80%;\n }\n }\n\n .arrow {\n width: 24px;\n height: 24px;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n margin-bottom: 10px;\n }\n\n .tooltip-content {\n display: flex;\n max-width: 300px;\n flex-wrap: wrap;\n }\n "])));
|
|
7119
7119
|
return (jsxs(ColorPickerWrapper, __assign$1({ value: selectedValue, onChange: onChange, css: { flexDirection: inline ? 'row' : 'column', alignItems: inline ? 'center' : 'start' } }, { children: [jsx(ColorRadioGroup$1.Label, { label: label, values: selectedValue && !inline ? selectedValue.label : undefined }, void 0), jsxs(ColorRadioGroup$1.OptionsContainer, __assign$1({ css: { marginTop: inline ? '0' : '0.63rem', marginLeft: inline ? '1.5rem' : '0' }, "data-testid": "radio-group-options-container" }, { children: [renderOptions$1(visibleOptions, showCross), !!hiddenOptions.length && (jsx("div", __assign$1({ style: { display: 'flex', alignItems: 'center', justifyContent: 'center' } }, { children: jsx(Tooltip, __assign$1({ position: 1, elementContent: jsx("div", __assign$1({ className: "tooltip-content" }, { children: renderOptions$1(hiddenOptions, showCross) }), void 0), withArrow: true }, { children: jsx("div", __assign$1({ className: "arrow", "data-testid": "tooltip-arrow" }, { children: jsx(Icon$1, { name: "arrows/chevron_down", width: 1, height: 1 }, void 0) }), void 0) }), void 0) }), void 0))] }), void 0)] }), void 0));
|
|
7120
7120
|
};
|
|
7121
|
-
var templateObject_1$
|
|
7121
|
+
var templateObject_1$1r;
|
|
7122
7122
|
|
|
7123
7123
|
var renderOptions = function (selectedColor, options) {
|
|
7124
7124
|
if (options == null || options.length === 0) {
|
|
@@ -7156,21 +7156,21 @@ var MultiColorPicker = function (_a) {
|
|
|
7156
7156
|
return (jsxRuntime.jsxs(ColorRadioGroup$1, __assign$1({ value: selectedColor, onChange: onChangeHandler }, { children: [jsxRuntime.jsx(ColorRadioGroup$1.Label, { label: label, values: valueLabels }, void 0), jsxRuntime.jsx(ColorRadioGroup$1.OptionsContainer, { children: renderOptions(selectedColor, options) }, void 0)] }), void 0));
|
|
7157
7157
|
};
|
|
7158
7158
|
|
|
7159
|
-
var Wrapper$5 = newStyled.div(templateObject_1$
|
|
7160
|
-
var Col$1 = newStyled.div(templateObject_2$
|
|
7161
|
-
var Row$2 = newStyled.div(templateObject_3$
|
|
7159
|
+
var Wrapper$5 = newStyled.div(templateObject_1$1q || (templateObject_1$1q = __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'); });
|
|
7160
|
+
var Col$1 = newStyled.div(templateObject_2$15 || (templateObject_2$15 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
7161
|
+
var Row$2 = newStyled.div(templateObject_3$S || (templateObject_3$S = __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) {
|
|
7162
7162
|
return props.rightToLeft &&
|
|
7163
7163
|
"\n flex-direction: row-reverse;\n justify-content: space-between;\n ";
|
|
7164
7164
|
});
|
|
7165
|
-
var H5 = newStyled.h5(templateObject_4$
|
|
7166
|
-
var H3$1 = newStyled.h3(templateObject_5$
|
|
7167
|
-
var FreeShipping = newStyled.span(templateObject_6$
|
|
7165
|
+
var H5 = newStyled.h5(templateObject_4$H || (templateObject_4$H = __makeTemplateObject(["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 500;\n margin-bottom: 0.125rem;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 500;\n margin-bottom: 0.125rem;\n margin: 0;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
7166
|
+
var H3$1 = newStyled.h3(templateObject_5$x || (templateObject_5$x = __makeTemplateObject(["\n font-size: 1.125rem;\n line-height: 1.75rem;\n font-weight: 700;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 1.125rem;\n line-height: 1.75rem;\n font-weight: 700;\n margin: 0;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
7167
|
+
var FreeShipping = newStyled.span(templateObject_6$v || (templateObject_6$v = __makeTemplateObject(["\n font-weight: 600;\n color: ", ";\n"], ["\n font-weight: 600;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
7168
7168
|
var CrossSellCheckbox = function (_a) {
|
|
7169
7169
|
var imageURL = _a.imageURL, title = _a.title, description = _a.description, freeShippingText = _a.freeShippingText, rightToLeft = _a.rightToLeft, onChange = _a.onChange;
|
|
7170
7170
|
var theme = useTheme();
|
|
7171
7171
|
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));
|
|
7172
7172
|
};
|
|
7173
|
-
var templateObject_1$
|
|
7173
|
+
var templateObject_1$1q, templateObject_2$15, templateObject_3$S, templateObject_4$H, templateObject_5$x, templateObject_6$v;
|
|
7174
7174
|
|
|
7175
7175
|
var index$1 = /*#__PURE__*/Object.freeze({
|
|
7176
7176
|
__proto__: null,
|
|
@@ -7198,7 +7198,7 @@ var sizeMapper = (_a = {},
|
|
|
7198
7198
|
_a[exports.ComponentSize.Large] = 'large',
|
|
7199
7199
|
_a[exports.ComponentSize.XSmall] = 'small',
|
|
7200
7200
|
_a);
|
|
7201
|
-
var StyledBaseButton = newStyled(BaseButton)(templateObject_1$
|
|
7201
|
+
var StyledBaseButton = newStyled(BaseButton)(templateObject_1$1p || (templateObject_1$1p = __makeTemplateObject(["\n width: ", ";\n font-size: ", ";\n padding: ", ";\n font-weight: ", ";\n border-radius: ", ";\n cursor: pointer;\n &:disabled {\n background-color: ", ";\n color: ", ";\n cursor: not-allowed;\n }\n svg {\n color: inherit;\n }\n"], ["\n width: ", ";\n font-size: ", ";\n padding: ", ";\n font-weight: ", ";\n border-radius: ", ";\n cursor: pointer;\n &:disabled {\n background-color: ", ";\n color: ", ";\n cursor: not-allowed;\n }\n svg {\n color: inherit;\n }\n"])), function (_a) {
|
|
7202
7202
|
var wide = _a.wide;
|
|
7203
7203
|
return (wide ? '100%' : 'fit-content');
|
|
7204
7204
|
}, function (_a) {
|
|
@@ -7220,11 +7220,11 @@ var StyledBaseButton = newStyled(BaseButton)(templateObject_1$1o || (templateObj
|
|
|
7220
7220
|
var theme = _a.theme;
|
|
7221
7221
|
return theme.colors.text.disabled;
|
|
7222
7222
|
});
|
|
7223
|
-
var StyledIcon = newStyled(Icon$1)(templateObject_2$
|
|
7223
|
+
var StyledIcon = newStyled(Icon$1)(templateObject_2$14 || (templateObject_2$14 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
7224
7224
|
var marginLeft = _a.marginLeft, marginRight = _a.marginRight;
|
|
7225
7225
|
return "\n margin-left: ".concat(marginLeft !== null && marginLeft !== void 0 ? marginLeft : '10px', ";\n margin-right: ").concat(marginRight !== null && marginRight !== void 0 ? marginRight : '10px', ";\n ");
|
|
7226
7226
|
});
|
|
7227
|
-
var templateObject_1$
|
|
7227
|
+
var templateObject_1$1p, templateObject_2$14;
|
|
7228
7228
|
|
|
7229
7229
|
var BaseCTA = function (_a) {
|
|
7230
7230
|
var _b, _c, _d;
|
|
@@ -7311,44 +7311,44 @@ var ButtonSecondaryOutline = function (props) {
|
|
|
7311
7311
|
} }), void 0));
|
|
7312
7312
|
};
|
|
7313
7313
|
|
|
7314
|
-
var Container$W = newStyled.div(templateObject_1$
|
|
7315
|
-
var IconContainer$4 = newStyled.div(templateObject_2$
|
|
7316
|
-
var Text$3 = newStyled.p(templateObject_3$
|
|
7317
|
-
var Details = newStyled.span(templateObject_4$
|
|
7314
|
+
var Container$W = newStyled.div(templateObject_1$1o || (templateObject_1$1o = __makeTemplateObject(["\n padding: 0.625rem 1.25rem;\n background-color: ", ";\n border-radius: 0.313rem;\n display: flex;\n margin-bottom: 1.25rem;\n"], ["\n padding: 0.625rem 1.25rem;\n background-color: ", ";\n border-radius: 0.313rem;\n display: flex;\n margin-bottom: 1.25rem;\n"])), function (props) { return props.color; });
|
|
7315
|
+
var IconContainer$4 = newStyled.div(templateObject_2$13 || (templateObject_2$13 = __makeTemplateObject(["\n width: 1rem;\n height: 0.875rem;\n margin-right: 0.5rem;\n margin-top: 0.125rem;\n"], ["\n width: 1rem;\n height: 0.875rem;\n margin-right: 0.5rem;\n margin-top: 0.125rem;\n"])));
|
|
7316
|
+
var Text$3 = newStyled.p(templateObject_3$R || (templateObject_3$R = __makeTemplateObject(["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 400;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 400;\n margin: 0;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
7317
|
+
var Details = newStyled.span(templateObject_4$G || (templateObject_4$G = __makeTemplateObject(["\n color: ", ";\n font-weight: 700;\n"], ["\n color: ", ";\n font-weight: 700;\n"])), function (props) { return props.color; });
|
|
7318
7318
|
var Note = function (_a) {
|
|
7319
7319
|
var accentColor = _a.accentColor, color = _a.color, backgroundColor = _a.backgroundColor, importantNoteText = _a.importantNoteText, text = _a.text;
|
|
7320
7320
|
var theme = useTheme();
|
|
7321
7321
|
return (jsxRuntime.jsxs(Container$W, __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));
|
|
7322
7322
|
};
|
|
7323
|
-
var templateObject_1$
|
|
7323
|
+
var templateObject_1$1o, templateObject_2$13, templateObject_3$R, templateObject_4$G;
|
|
7324
7324
|
|
|
7325
|
-
var Title$5 = newStyled.h1(templateObject_1$
|
|
7325
|
+
var Title$5 = newStyled.h1(templateObject_1$1n || (templateObject_1$1n = __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) {
|
|
7326
7326
|
var theme = _a.theme;
|
|
7327
7327
|
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 ");
|
|
7328
7328
|
});
|
|
7329
|
-
var Line = newStyled.div(templateObject_2$
|
|
7330
|
-
var Row$1 = newStyled.div(templateObject_3$
|
|
7329
|
+
var Line = newStyled.div(templateObject_2$12 || (templateObject_2$12 = __makeTemplateObject(["\n width: 100%;\n height: 0.063rem;\n background-color: ", ";\n margin: 1.25rem 0;\n"], ["\n width: 100%;\n height: 0.063rem;\n background-color: ", ";\n margin: 1.25rem 0;\n"])), function (props) { return props.backgroundColor; });
|
|
7330
|
+
var Row$1 = newStyled.div(templateObject_3$Q || (templateObject_3$Q = __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({
|
|
7331
7331
|
flexDirection: ['column', 'row'],
|
|
7332
7332
|
}));
|
|
7333
|
-
var Col = newStyled.div(templateObject_4$
|
|
7333
|
+
var Col = newStyled.div(templateObject_4$F || (templateObject_4$F = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n justify-content: center;\n flex: 1;\n ", "\n"], ["\n display: flex;\n flex-direction: column;\n justify-content: center;\n flex: 1;\n ", "\n"])), mediaQueries({
|
|
7334
7334
|
margin: ['0', '0 1.25rem'],
|
|
7335
7335
|
marginBottom: ['1.875rem', '0'],
|
|
7336
7336
|
alignItems: ['center', 'flex-start'],
|
|
7337
7337
|
textAlign: ['center', 'inherit'],
|
|
7338
7338
|
width: ['100%', 'inherit'],
|
|
7339
7339
|
}));
|
|
7340
|
-
var IconContainer$3 = newStyled.div(templateObject_5$
|
|
7340
|
+
var IconContainer$3 = newStyled.div(templateObject_5$w || (templateObject_5$w = __makeTemplateObject(["\n width: 1.5rem;\n height: 1.5rem;\n ", "\n"], ["\n width: 1.5rem;\n height: 1.5rem;\n ", "\n"])), mediaQueries({
|
|
7341
7341
|
marginRight: ['0', '0.438rem'],
|
|
7342
7342
|
marginBottom: ['10px', '0'],
|
|
7343
7343
|
width: ['auto', '1.5rem'],
|
|
7344
7344
|
}));
|
|
7345
|
-
var SectionTitle = newStyled.h1(templateObject_6$
|
|
7345
|
+
var SectionTitle = newStyled.h1(templateObject_6$u || (templateObject_6$u = __makeTemplateObject(["\n ", "\n ", "\n margin: 0;\n text-transform: uppercase;\n"], ["\n ", "\n ", "\n margin: 0;\n text-transform: uppercase;\n"])), mediaQueries({
|
|
7346
7346
|
display: ['block', 'flex'],
|
|
7347
7347
|
}), function (_a) {
|
|
7348
7348
|
var theme = _a.theme;
|
|
7349
7349
|
return "\n color: ".concat(theme.colors.shades['700'].color, ";\n font-size: ").concat(theme.component.deliveryDetails.sectionTitle.fontSize, ";\n line-height: ").concat(theme.component.deliveryDetails.sectionTitle.lineHeight, ";\n font-weight: ").concat(theme.component.deliveryDetails.sectionTitle.fontWeight, ";\n ");
|
|
7350
7350
|
});
|
|
7351
|
-
var SectionDetails = newStyled.p(templateObject_7$
|
|
7351
|
+
var SectionDetails = newStyled.p(templateObject_7$n || (templateObject_7$n = __makeTemplateObject(["\n color: ", ";\n ", "\n margin: 0;\n margin-top: 0.625rem;\n ", ";\n"], ["\n color: ", ";\n ", "\n margin: 0;\n margin-top: 0.625rem;\n ", ";\n"])), function (props) { return props.color; }, function (_a) {
|
|
7352
7352
|
var theme = _a.theme;
|
|
7353
7353
|
return "\n font-size: ".concat(theme.component.deliveryDetails.sectionDetails.fontSize, ";\n line-height: ").concat(theme.component.deliveryDetails.sectionDetails.lineHeight, ";\n font-weight: ").concat(theme.component.deliveryDetails.sectionDetails.fontWeight, ";\n ");
|
|
7354
7354
|
}, function (_a) {
|
|
@@ -7365,16 +7365,16 @@ var DeliveryDetails = function (_a) {
|
|
|
7365
7365
|
var theme = useTheme();
|
|
7366
7366
|
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));
|
|
7367
7367
|
};
|
|
7368
|
-
var templateObject_1$
|
|
7368
|
+
var templateObject_1$1n, templateObject_2$12, templateObject_3$Q, templateObject_4$F, templateObject_5$w, templateObject_6$u, templateObject_7$n, templateObject_8$g;
|
|
7369
7369
|
|
|
7370
|
-
var Backdrop = newStyled.div(templateObject_1$
|
|
7370
|
+
var Backdrop = newStyled.div(templateObject_1$1m || (templateObject_1$1m = __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) {
|
|
7371
7371
|
var top = _a.top;
|
|
7372
7372
|
return top;
|
|
7373
7373
|
}, function (_a) {
|
|
7374
7374
|
var isOpen = _a.isOpen, backgroundColor = _a.backgroundColor;
|
|
7375
7375
|
return isOpen ? "background-color: ".concat(backgroundColor, ";") : 'transparent';
|
|
7376
7376
|
});
|
|
7377
|
-
var Sidebar = newStyled.div(templateObject_2$
|
|
7377
|
+
var Sidebar = newStyled.div(templateObject_2$11 || (templateObject_2$11 = __makeTemplateObject(["\n height: ", ";\n width: ", ";\n position: fixed;\n z-index: 30;\n ", ": 0;\n top: ", ";\n background-color: ", ";\n overflow-x: hidden;\n transition: transform 0.3s ease-in-out;\n\n ", "\n"], ["\n height: ", ";\n width: ", ";\n position: fixed;\n z-index: 30;\n ", ": 0;\n top: ", ";\n background-color: ", ";\n overflow-x: hidden;\n transition: transform 0.3s ease-in-out;\n\n ", "\n"])), function (_a) {
|
|
7378
7378
|
var height = _a.height;
|
|
7379
7379
|
return height;
|
|
7380
7380
|
}, function (_a) {
|
|
@@ -7421,20 +7421,20 @@ var Drawer = function (_a) {
|
|
|
7421
7421
|
}, [isOpen, onClose, onOpen]);
|
|
7422
7422
|
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;
|
|
7423
7423
|
};
|
|
7424
|
-
var templateObject_1$
|
|
7424
|
+
var templateObject_1$1m, templateObject_2$11;
|
|
7425
7425
|
|
|
7426
7426
|
var TooltipArrow = function (_a) {
|
|
7427
7427
|
var height = _a.height, width = _a.width, fill = _a.fill, stroke = _a.stroke;
|
|
7428
7428
|
return (jsxRuntime.jsxs("svg", __assign$1({ width: "".concat(width, "rem"), height: "".concat(height, "rem"), viewBox: "0 0 20 12", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsxRuntime.jsx("title", { children: "Tooltip Arrow" }, void 0), jsxRuntime.jsx("path", { d: "M11.1523 8.83618L18.9325 -0.500001L1.06752 -0.500001L8.84767 8.83618C9.44736 9.55581 10.5526 9.55581 11.1523 8.83618Z", fill: fill, stroke: stroke }, void 0)] }), void 0));
|
|
7429
7429
|
};
|
|
7430
7430
|
|
|
7431
|
-
var List = newStyled.ul(templateObject_1$
|
|
7432
|
-
var Item$2 = newStyled.li(templateObject_2
|
|
7433
|
-
var DropdownWrapper = newStyled.div(templateObject_3$
|
|
7434
|
-
var ArrowContainer$1 = newStyled.div(templateObject_4$
|
|
7435
|
-
var StyledDropdown = newStyled.ul(templateObject_5$
|
|
7436
|
-
var DropdownItem = newStyled.li(templateObject_6$
|
|
7437
|
-
var templateObject_1$
|
|
7431
|
+
var List = newStyled.ul(templateObject_1$1l || (templateObject_1$1l = __makeTemplateObject(["\n display: flex;\n margin: 0;\n padding: 0;\n"], ["\n display: flex;\n margin: 0;\n padding: 0;\n"])));
|
|
7432
|
+
var Item$2 = newStyled.li(templateObject_2$10 || (templateObject_2$10 = __makeTemplateObject(["\n width: 1.25rem;\n list-style: none;\n margin-right: 1.5rem;\n position: relative;\n line-height: 0;\n\n &:last-child {\n margin-right: 0;\n }\n\n &:hover {\n .dropdownWrapper {\n visibility: visible;\n }\n }\n"], ["\n width: 1.25rem;\n list-style: none;\n margin-right: 1.5rem;\n position: relative;\n line-height: 0;\n\n &:last-child {\n margin-right: 0;\n }\n\n &:hover {\n .dropdownWrapper {\n visibility: visible;\n }\n }\n"])));
|
|
7433
|
+
var DropdownWrapper = newStyled.div(templateObject_3$P || (templateObject_3$P = __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"])));
|
|
7434
|
+
var ArrowContainer$1 = newStyled.div(templateObject_4$E || (templateObject_4$E = __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"])));
|
|
7435
|
+
var StyledDropdown = newStyled.ul(templateObject_5$v || (templateObject_5$v = __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; });
|
|
7436
|
+
var DropdownItem = newStyled.li(templateObject_6$t || (templateObject_6$t = __makeTemplateObject(["\n list-style: none;\n padding: 0.813rem;\n border-bottom: 0.063rem solid ", ";\n font-size: 0.875rem;\n line-height: 1.125rem;\n font-weight: 400;\n color: ", ";\n cursor: pointer;\n user-select: none;\n\n &:hover {\n background-color: ", ";\n }\n\n &:last-child {\n border-bottom: none;\n border-radius: 0 0 0.5rem 0.5rem;\n }\n\n &:first-of-type {\n border-radius: 0.5rem 0.5rem 0 0;\n }\n\n &:only-child {\n border-radius: 0.5rem;\n }\n"], ["\n list-style: none;\n padding: 0.813rem;\n border-bottom: 0.063rem solid ", ";\n font-size: 0.875rem;\n line-height: 1.125rem;\n font-weight: 400;\n color: ", ";\n cursor: pointer;\n user-select: none;\n\n &:hover {\n background-color: ", ";\n }\n\n &:last-child {\n border-bottom: none;\n border-radius: 0 0 0.5rem 0.5rem;\n }\n\n &:first-of-type {\n border-radius: 0.5rem 0.5rem 0 0;\n }\n\n &:only-child {\n border-radius: 0.5rem;\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.color; }, function (props) { return props.hoverColor; });
|
|
7437
|
+
var templateObject_1$1l, templateObject_2$10, templateObject_3$P, templateObject_4$E, templateObject_5$v, templateObject_6$t;
|
|
7438
7438
|
|
|
7439
7439
|
var DropdownListIcons = function (_a) {
|
|
7440
7440
|
var items = _a.items;
|
|
@@ -7447,13 +7447,13 @@ var Dropdown = function (_a) {
|
|
|
7447
7447
|
return (jsxRuntime.jsxs(DropdownWrapper, __assign$1({ className: "dropdownWrapper", "data-testid": "Dropdown-wrapper" }, { children: [jsxRuntime.jsx(ArrowContainer$1, { children: jsxRuntime.jsx(TooltipArrow, { stroke: theme.colors.shades['200'].color, fill: "#fff", width: 1.25, height: 0.75 }, void 0) }, void 0), jsxRuntime.jsx(StyledDropdown, __assign$1({ borderColor: theme.colors.shades['200'].color }, { children: items.map(function (item, index) { return (jsxRuntime.jsx(DropdownItem, __assign$1({ onClick: item.callback, borderColor: theme.colors.shades['200'].color, color: theme.colors.shades['550'].color, hoverColor: theme.colors.shades['10'].color }, { children: item.description }), index)); }) }), void 0)] }), void 0));
|
|
7448
7448
|
};
|
|
7449
7449
|
|
|
7450
|
-
var DropdownContainer = newStyled.div(templateObject_1$
|
|
7451
|
-
var DropdownLabel = newStyled.div(templateObject_2
|
|
7452
|
-
var SizeLabel = newStyled.span(templateObject_3$
|
|
7453
|
-
var DetailLabel = newStyled.span(templateObject_4$
|
|
7454
|
-
var DropdownOptions = newStyled.div(templateObject_5$
|
|
7455
|
-
var DropdownOption = newStyled.div(templateObject_6$
|
|
7456
|
-
var templateObject_1$
|
|
7450
|
+
var DropdownContainer = newStyled.div(templateObject_1$1k || (templateObject_1$1k = __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"])));
|
|
7451
|
+
var DropdownLabel = newStyled.div(templateObject_2$$ || (templateObject_2$$ = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n background: #fff;\n border: 1px solid #bbb;\n border-radius: 8px;\n padding: 8px 12px 8px 16px;\n cursor: pointer;\n gap: 16px;\n font-weight: 600;\n color: var(--colors-pallete-secondary-color);\n max-width: 337px;\n height: 36px;\n\n @media (max-width: 767px) {\n max-width: 100%;\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n background: #fff;\n border: 1px solid #bbb;\n border-radius: 8px;\n padding: 8px 12px 8px 16px;\n cursor: pointer;\n gap: 16px;\n font-weight: 600;\n color: var(--colors-pallete-secondary-color);\n max-width: 337px;\n height: 36px;\n\n @media (max-width: 767px) {\n max-width: 100%;\n }\n"])));
|
|
7452
|
+
var SizeLabel = newStyled.span(templateObject_3$O || (templateObject_3$O = __makeTemplateObject(["\n margin-right: 8px;\n"], ["\n margin-right: 8px;\n"])));
|
|
7453
|
+
var DetailLabel = newStyled.span(templateObject_4$D || (templateObject_4$D = __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"])));
|
|
7454
|
+
var DropdownOptions = newStyled.div(templateObject_5$u || (templateObject_5$u = __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"])));
|
|
7455
|
+
var DropdownOption = newStyled.div(templateObject_6$s || (templateObject_6$s = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 12px 16px 10px;\n height: 40px;\n cursor: pointer;\n\n &:hover {\n background-color: rgb(247, 247, 247);\n border-radius: 8px;\n }\n\n &[aria-selected='true'] {\n background-color: rgb(247, 247, 247);\n border-radius: 8px;\n }\n\n & > span:first-of-type {\n margin-right: auto;\n font-weight: 600;\n }\n\n & > span:last-of-type {\n text-align: center;\n flex-grow: 1;\n font-weight: 400;\n color: var(--colors-shades-400-color);\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 12px 16px 10px;\n height: 40px;\n cursor: pointer;\n\n &:hover {\n background-color: rgb(247, 247, 247);\n border-radius: 8px;\n }\n\n &[aria-selected='true'] {\n background-color: rgb(247, 247, 247);\n border-radius: 8px;\n }\n\n & > span:first-of-type {\n margin-right: auto;\n font-weight: 600;\n }\n\n & > span:last-of-type {\n text-align: center;\n flex-grow: 1;\n font-weight: 400;\n color: var(--colors-shades-400-color);\n }\n"])));
|
|
7456
|
+
var templateObject_1$1k, templateObject_2$$, templateObject_3$O, templateObject_4$D, templateObject_5$u, templateObject_6$s;
|
|
7457
7457
|
|
|
7458
7458
|
var SizeDropdown = function (_a) {
|
|
7459
7459
|
var options = _a.options, defaultLabel = _a.defaultLabel, onOptionSelect = _a.onOptionSelect;
|
|
@@ -7476,10 +7476,10 @@ var SizeDropdown = function (_a) {
|
|
|
7476
7476
|
return (jsxRuntime.jsxs(DropdownContainer, { children: [jsxRuntime.jsxs(DropdownLabel, __assign$1({ role: "button", tabIndex: 0, onClick: toggleDropdown }, { children: [jsxRuntime.jsx(SizeLabel, { children: selectedOption.size }, void 0), jsxRuntime.jsx(DetailLabel, { children: selectedOption.detail }, void 0), isOpen ? (jsxRuntime.jsx(Icon.Arrows.ChevronUp, { width: 0.563, height: 0.875, fill: "#292929" }, void 0)) : (jsxRuntime.jsx(Icon.Arrows.ChevronDown, { width: 0.563, height: 0.875, fill: "#292929" }, void 0))] }), void 0), isOpen && (jsxRuntime.jsx(DropdownOptions, { children: options.map(function (option) { return (jsxRuntime.jsxs(DropdownOption, __assign$1({ role: "option", "aria-selected": selectedOption.size === option.size, tabIndex: 0, onClick: function () { return handleOptionClick(option); }, onKeyDown: function (e) { return handleOptionKeyDown(e, option); } }, { children: [jsxRuntime.jsx("span", { children: option.size }, void 0), jsxRuntime.jsx("span", { children: option.detail }, void 0)] }), option.size)); }) }, void 0))] }, void 0));
|
|
7477
7477
|
};
|
|
7478
7478
|
|
|
7479
|
-
var DialogDropdownWrapper = newStyled.div(templateObject_1$
|
|
7480
|
-
var DialogDropdownListContainer = newStyled.ul(templateObject_2$
|
|
7481
|
-
var DialogDropdownListItem = newStyled.li(templateObject_3$
|
|
7482
|
-
var DialogDropdownLink = newStyled.a(templateObject_4$
|
|
7479
|
+
var DialogDropdownWrapper = newStyled.div(templateObject_1$1j || (templateObject_1$1j = __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; });
|
|
7480
|
+
var DialogDropdownListContainer = newStyled.ul(templateObject_2$_ || (templateObject_2$_ = __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; });
|
|
7481
|
+
var DialogDropdownListItem = newStyled.li(templateObject_3$N || (templateObject_3$N = __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"])));
|
|
7482
|
+
var DialogDropdownLink = newStyled.a(templateObject_4$C || (templateObject_4$C = __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"])));
|
|
7483
7483
|
var DropdownDialog = function (_a) {
|
|
7484
7484
|
var options = _a.options, _b = _a.position, top = _b.top, right = _b.right, style = _a.style, className = _a.className;
|
|
7485
7485
|
var theme = useTheme$1();
|
|
@@ -7488,7 +7488,7 @@ var DropdownDialog = function (_a) {
|
|
|
7488
7488
|
return (jsxRuntime.jsx(DialogDropdownListItem, { children: jsxRuntime.jsx(DialogDropdownLink, __assign$1({ href: value }, { children: label }), void 0) }, idx));
|
|
7489
7489
|
}) }), void 0) }), void 0));
|
|
7490
7490
|
};
|
|
7491
|
-
var templateObject_1$
|
|
7491
|
+
var templateObject_1$1j, templateObject_2$_, templateObject_3$N, templateObject_4$C;
|
|
7492
7492
|
|
|
7493
7493
|
function FilteringDropdown(_a) {
|
|
7494
7494
|
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;
|
|
@@ -7521,29 +7521,29 @@ function FilteringDropdown(_a) {
|
|
|
7521
7521
|
}) }, void 0)] }), void 0));
|
|
7522
7522
|
}
|
|
7523
7523
|
|
|
7524
|
-
var Title$4 = newStyled.div(templateObject_1$
|
|
7525
|
-
var H3 = newStyled.h3(templateObject_2$
|
|
7526
|
-
var ArrowContainer = newStyled.div(templateObject_3$
|
|
7527
|
-
var Container$V = newStyled.div(templateObject_4$
|
|
7524
|
+
var Title$4 = newStyled.div(templateObject_1$1i || (templateObject_1$1i = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n border-bottom: 0.063rem solid ", ";\n user-select: none;\n cursor: pointer;\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n border-bottom: 0.063rem solid ", ";\n user-select: none;\n cursor: pointer;\n"])), function (props) { return props.borderColor; });
|
|
7525
|
+
var H3 = newStyled.h3(templateObject_2$Z || (templateObject_2$Z = __makeTemplateObject(["\n font-size: 1rem;\n font-weight: 700;\n line-height: 1.5rem;\n color: ", ";\n margin: 0.75rem 0;\n"], ["\n font-size: 1rem;\n font-weight: 700;\n line-height: 1.5rem;\n color: ", ";\n margin: 0.75rem 0;\n"])), function (props) { return props.color; });
|
|
7526
|
+
var ArrowContainer = newStyled.div(templateObject_3$M || (templateObject_3$M = __makeTemplateObject(["\n width: 1rem;\n height: 1rem;\n"], ["\n width: 1rem;\n height: 1rem;\n"])));
|
|
7527
|
+
var Container$V = newStyled.div(templateObject_4$B || (templateObject_4$B = __makeTemplateObject(["\n @media (max-width: 768px) {\n display: ", ";\n }\n"], ["\n @media (max-width: 768px) {\n display: ", ";\n }\n"])), function (props) { return (props.showInMobile ? 'block' : 'none'); });
|
|
7528
7528
|
var Accordion = function (_a) {
|
|
7529
7529
|
var title = _a.title, children = _a.children, _b = _a.isOpenByDefault, isOpenByDefault = _b === void 0 ? false : _b, _c = _a.showInMobile, showInMobile = _c === void 0 ? true : _c;
|
|
7530
7530
|
var theme = useTheme();
|
|
7531
7531
|
var _d = React__default["default"].useState(isOpenByDefault), isOpen = _d[0], setIsOpen = _d[1];
|
|
7532
7532
|
return (jsxRuntime.jsxs(Container$V, __assign$1({ "data-testid": "FiltersAccordion", showInMobile: showInMobile }, { children: [jsxRuntime.jsxs(Title$4, __assign$1({ onClick: function () { return setIsOpen(function (state) { return !state; }); }, borderColor: theme.colors.shades['100'].color, "data-testid": "accordion-title" }, { children: [jsxRuntime.jsx(H3, __assign$1({ color: theme.colors.shades['550'].color }, { children: title }), void 0), jsxRuntime.jsx(ArrowContainer, { children: isOpen ? (jsxRuntime.jsx(Icon.Arrows.ChevronUp, { fill: theme.colors.shades['700'].color }, void 0)) : (jsxRuntime.jsx(Icon.Arrows.ChevronDown, { fill: theme.colors.shades['700'].color }, void 0)) }, void 0)] }), void 0), jsxRuntime.jsx("div", __assign$1({ style: { display: isOpen ? 'block' : 'none' }, "data-testid": "accordion-children-container" }, { children: children }), void 0)] }), void 0));
|
|
7533
7533
|
};
|
|
7534
|
-
var templateObject_1$
|
|
7535
|
-
|
|
7536
|
-
var SectionContent = newStyled.div(templateObject_1$
|
|
7537
|
-
var Header$2 = newStyled.div(templateObject_2$
|
|
7538
|
-
var MobileHeader = newStyled.div(templateObject_3$
|
|
7539
|
-
var MobileIconsContainer = newStyled.div(templateObject_4$
|
|
7540
|
-
var H4 = newStyled.h4(templateObject_5$
|
|
7541
|
-
var FilterLink = newStyled.a(templateObject_6$
|
|
7542
|
-
var OptionContainer = newStyled.div(templateObject_7$
|
|
7534
|
+
var templateObject_1$1i, templateObject_2$Z, templateObject_3$M, templateObject_4$B;
|
|
7535
|
+
|
|
7536
|
+
var SectionContent = newStyled.div(templateObject_1$1h || (templateObject_1$1h = __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; });
|
|
7537
|
+
var Header$2 = newStyled.div(templateObject_2$Y || (templateObject_2$Y = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 1.063rem;\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 1.063rem;\n"])));
|
|
7538
|
+
var MobileHeader = newStyled.div(templateObject_3$L || (templateObject_3$L = __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"])));
|
|
7539
|
+
var MobileIconsContainer = newStyled.div(templateObject_4$A || (templateObject_4$A = __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"])));
|
|
7540
|
+
var H4 = newStyled.h4(templateObject_5$t || (templateObject_5$t = __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; });
|
|
7541
|
+
var FilterLink = newStyled.a(templateObject_6$r || (templateObject_6$r = __makeTemplateObject(["\n font-size: 1rem;\n font-weight: 700;\n line-height: 1.5rem;\n color: ", ";\n text-decoration: none;\n"], ["\n font-size: 1rem;\n font-weight: 700;\n line-height: 1.5rem;\n color: ", ";\n text-decoration: none;\n"])), function (props) { return props.color; });
|
|
7542
|
+
var OptionContainer = newStyled.div(templateObject_7$m || (templateObject_7$m = __makeTemplateObject(["\n margin-bottom: 1.25rem;\n &:last-child {\n margin-bottom: 0;\n }\n @media (max-width: 768px) {\n display: ", ";\n }\n @media (min-width: 768px) and (max-width: 992px) {\n display: ", ";\n }\n"], ["\n margin-bottom: 1.25rem;\n &:last-child {\n margin-bottom: 0;\n }\n @media (max-width: 768px) {\n display: ", ";\n }\n @media (min-width: 768px) and (max-width: 992px) {\n display: ", ";\n }\n"])), function (props) { return (props.showInMobile ? 'block' : 'none'); }, function (props) { return (props.showInTablet ? 'block' : 'none'); });
|
|
7543
7543
|
var ClearAll = newStyled.span(templateObject_8$f || (templateObject_8$f = __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; });
|
|
7544
7544
|
var MobileFooter = newStyled.div(templateObject_9$a || (templateObject_9$a = __makeTemplateObject(["\n background-color: #fff;\n padding: 0.75rem 0.938rem;\n position: sticky;\n bottom: 0;\n z-index: 1;\n margin-top: 5.625rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n"], ["\n background-color: #fff;\n padding: 0.75rem 0.938rem;\n position: sticky;\n bottom: 0;\n z-index: 1;\n margin-top: 5.625rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n"])));
|
|
7545
7545
|
var MobileClearContainer = newStyled.div(templateObject_10$9 || (templateObject_10$9 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n cursor: pointer;\n\n span {\n margin-left: 0.5rem;\n user-select: none;\n }\n"], ["\n display: flex;\n align-items: center;\n cursor: pointer;\n\n span {\n margin-left: 0.5rem;\n user-select: none;\n }\n"])));
|
|
7546
|
-
var templateObject_1$
|
|
7546
|
+
var templateObject_1$1h, templateObject_2$Y, templateObject_3$L, templateObject_4$A, templateObject_5$t, templateObject_6$r, templateObject_7$m, templateObject_8$f, templateObject_9$a, templateObject_10$9;
|
|
7547
7547
|
|
|
7548
7548
|
var getStylesBySize$a = function (size, theme) {
|
|
7549
7549
|
switch (size) {
|
|
@@ -7608,9 +7608,9 @@ var SelectorSecondary = function (_a) {
|
|
|
7608
7608
|
} }), id: id }, void 0));
|
|
7609
7609
|
};
|
|
7610
7610
|
|
|
7611
|
-
var UL = newStyled.ul(templateObject_1$
|
|
7612
|
-
var LI = newStyled.li(templateObject_2$
|
|
7613
|
-
var CloseIconContainer = newStyled.div(templateObject_3$
|
|
7611
|
+
var UL = newStyled.ul(templateObject_1$1g || (templateObject_1$1g = __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"])));
|
|
7612
|
+
var LI = newStyled.li(templateObject_2$X || (templateObject_2$X = __makeTemplateObject(["\n list-style: none;\n background-color: ", ";\n padding: 0.375rem 0.625rem;\n border-radius: 0.5rem;\n font-size: 0.875rem;\n line-height: 1.125rem;\n color: ", ";\n font-weight: 400;\n margin-right: 0.5rem;\n margin-bottom: 0.5rem;\n display: flex;\n align-items: center;\n"], ["\n list-style: none;\n background-color: ", ";\n padding: 0.375rem 0.625rem;\n border-radius: 0.5rem;\n font-size: 0.875rem;\n line-height: 1.125rem;\n color: ", ";\n font-weight: 400;\n margin-right: 0.5rem;\n margin-bottom: 0.5rem;\n display: flex;\n align-items: center;\n"])), function (props) { return props.backgroundColor; }, function (props) { return props.color; });
|
|
7613
|
+
var CloseIconContainer = newStyled.div(templateObject_3$K || (templateObject_3$K = __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"])));
|
|
7614
7614
|
var Tags = function (_a) {
|
|
7615
7615
|
var _b = _a.color, color = _b === void 0 ? '#fff6ef' : _b, items = _a.items, onCloseClick = _a.onCloseClick;
|
|
7616
7616
|
var theme = useTheme();
|
|
@@ -7618,7 +7618,7 @@ var Tags = function (_a) {
|
|
|
7618
7618
|
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));
|
|
7619
7619
|
}) }), void 0));
|
|
7620
7620
|
};
|
|
7621
|
-
var templateObject_1$
|
|
7621
|
+
var templateObject_1$1g, templateObject_2$X, templateObject_3$K;
|
|
7622
7622
|
|
|
7623
7623
|
var Filters = function (_a) {
|
|
7624
7624
|
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;
|
|
@@ -7754,8 +7754,8 @@ var FilterCheckboxColor = function (_a) {
|
|
|
7754
7754
|
return (jsxRuntime.jsx(Checkbox, { onChange: onChange, checked: checked, text: text, id: "filter[".concat(sectionIndex, ",").concat(itemIndex, "]"), size: exports.ComponentSize.Medium, variant: "color", blockUncheck: blockUncheck, backgroundColor: color }, itemIndex));
|
|
7755
7755
|
};
|
|
7756
7756
|
|
|
7757
|
-
var Wrapper$4 = newStyled.div(templateObject_1$
|
|
7758
|
-
var Container$U = newStyled.div(templateObject_2$
|
|
7757
|
+
var Wrapper$4 = newStyled.div(templateObject_1$1f || (templateObject_1$1f = __makeTemplateObject(["\n padding: 12px 58px;\n display: flex;\n gap: 1.5em;\n @media (max-width: 768px) {\n padding: 0.625rem 1.5rem;\n }\n"], ["\n padding: 12px 58px;\n display: flex;\n gap: 1.5em;\n @media (max-width: 768px) {\n padding: 0.625rem 1.5rem;\n }\n"])));
|
|
7758
|
+
var Container$U = newStyled.div(templateObject_2$W || (templateObject_2$W = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n"], ["\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n"])));
|
|
7759
7759
|
var FitGuarantee = function (_a) {
|
|
7760
7760
|
var _b;
|
|
7761
7761
|
var _c = _a.backgroundColor, backgroundColor = _c === void 0 ? '#FFF6EF' : _c, _d = _a.borderColor, borderColor = _d === void 0 ? '#E7C9B2' : _d, title = _a.title, description = _a.description, _e = _a.widthAuto, widthAuto = _e === void 0 ? false : _e, _f = _a.testId, testId = _f === void 0 ? 'FitGuarantee' : _f, _g = _a.iconFolder, iconFolder = _g === void 0 ? 'Custom' : _g, _h = _a.iconName, iconName = _h === void 0 ? 'SixtyDaysGuarantee' : _h, _j = _a.iconWidth, iconWidth = _j === void 0 ? 3.7 : _j, _k = _a.iconHeight, iconHeight = _k === void 0 ? 3.38 : _k;
|
|
@@ -7773,10 +7773,10 @@ var FitGuarantee = function (_a) {
|
|
|
7773
7773
|
fontWeight: theme.component.text.fitGuarantee.titleFontWeight,
|
|
7774
7774
|
} }, { 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));
|
|
7775
7775
|
};
|
|
7776
|
-
var templateObject_1$
|
|
7776
|
+
var templateObject_1$1f, templateObject_2$W;
|
|
7777
7777
|
|
|
7778
|
-
var Container$T = newStyled.div(templateObject_1$
|
|
7779
|
-
var P$2 = newStyled.p(templateObject_2$
|
|
7778
|
+
var Container$T = newStyled.div(templateObject_1$1e || (templateObject_1$1e = __makeTemplateObject(["\n display: flex;\n align-items: center;\n font-size: 0.88rem;\n"], ["\n display: flex;\n align-items: center;\n font-size: 0.88rem;\n"])));
|
|
7779
|
+
var P$2 = newStyled.p(templateObject_2$V || (templateObject_2$V = __makeTemplateObject(["\n margin: 0 0.25rem;\n font-weight: 700;\n color: ", ";\n"], ["\n margin: 0 0.25rem;\n font-weight: 700;\n color: ", ";\n"])), function (props) { return props.theme.colors.shades['550'].color; });
|
|
7780
7780
|
var textButtonStyles$1 = function (theme) { return ({
|
|
7781
7781
|
border: 'none',
|
|
7782
7782
|
background: 'transparent',
|
|
@@ -7791,7 +7791,7 @@ var FitPredictor = function (_a) {
|
|
|
7791
7791
|
var theme = useTheme();
|
|
7792
7792
|
return (jsxs(Container$T, __assign$1({ theme: theme }, { children: [jsx(Container$T, { children: jsx(Icon.Other.FitPredictor, { width: 1.125, height: 1.125, fill: theme.colors.shades['550'].color }, void 0) }, void 0), jsx(P$2, __assign$1({ theme: theme }, { children: "FIT PREDICTOR" }), void 0), jsx(BaseButton, __assign$1({ css: textButtonStyles$1(theme), onClick: onClick }, { children: "Calculate your size" }), void 0)] }), void 0));
|
|
7793
7793
|
};
|
|
7794
|
-
var templateObject_1$
|
|
7794
|
+
var templateObject_1$1e, templateObject_2$V;
|
|
7795
7795
|
|
|
7796
7796
|
var Button$7 = newStyled.button(function () { return ({
|
|
7797
7797
|
background: 'transparent',
|
|
@@ -12035,14 +12035,14 @@ var Slider = /*#__PURE__*/function (_React$Component) {
|
|
|
12035
12035
|
return Slider;
|
|
12036
12036
|
}(React__default["default"].Component);
|
|
12037
12037
|
|
|
12038
|
-
var StyledSlider = newStyled(Slider)(templateObject_1$
|
|
12038
|
+
var StyledSlider = newStyled(Slider)(templateObject_1$1d || (templateObject_1$1d = __makeTemplateObject(["\n .slick-dots {\n position: static;\n display: flex !important;\n justify-content: center;\n column-gap: ", ";\n margin-top: ", ";\n }\n .slick-prev {\n left: ", ";\n }\n .slick-next {\n right: ", ";\n }\n .slick-prev,\n .slick-next {\n width: fit-content;\n height: fit-content;\n }\n .slick-prev:before,\n .slick-next:before {\n content: none;\n }\n .slick-dots li {\n margin: 0;\n width: auto;\n line-height: 0;\n height: auto;\n }\n"], ["\n .slick-dots {\n position: static;\n display: flex !important;\n justify-content: center;\n column-gap: ", ";\n margin-top: ", ";\n }\n .slick-prev {\n left: ", ";\n }\n .slick-next {\n right: ", ";\n }\n .slick-prev,\n .slick-next {\n width: fit-content;\n height: fit-content;\n }\n .slick-prev:before,\n .slick-next:before {\n content: none;\n }\n .slick-dots li {\n margin: 0;\n width: auto;\n line-height: 0;\n height: auto;\n }\n"])), function (props) { return "".concat(props.dotsSpacing, "rem"); }, function (props) { return "".concat(props.dotListMarginTop, "rem"); }, function (_a) {
|
|
12039
12039
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
12040
12040
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
12041
12041
|
}, function (_a) {
|
|
12042
12042
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
12043
12043
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
12044
12044
|
});
|
|
12045
|
-
var templateObject_1$
|
|
12045
|
+
var templateObject_1$1d;
|
|
12046
12046
|
|
|
12047
12047
|
var getStylesBySize$9 = function (size) {
|
|
12048
12048
|
// rem units
|
|
@@ -12101,7 +12101,7 @@ var SliderNavigation = function (_a) {
|
|
|
12101
12101
|
} }, { children: jsx(StyledSlider, __assign$1({}, settings, { arrowPadding: arrows && arrows.arrowPadding, dotListMarginTop: dotListMarginTop && dotListMarginTop, arrowPaddingOffset: arrows ? arrows.arrowWidth : 0, dotsSpacing: styles && styles.dotsSpacing }, { children: children }), void 0) }), void 0));
|
|
12102
12102
|
};
|
|
12103
12103
|
|
|
12104
|
-
var Image$1 = newStyled.img(templateObject_1$
|
|
12104
|
+
var Image$1 = newStyled.img(templateObject_1$1c || (templateObject_1$1c = __makeTemplateObject(["\n ", "\n\n width: ", ";\n height: ", ";\n object-fit: cover;\n box-sizing: border-box;\n cursor: pointer;\n border: ", ";\n"], ["\n ", "\n\n width: ", ";\n height: ", ";\n object-fit: cover;\n box-sizing: border-box;\n cursor: pointer;\n border: ", ";\n"])), function (_a) {
|
|
12105
12105
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
12106
12106
|
return borderRadiusVariant &&
|
|
12107
12107
|
"\n border-radius: 20px;\n ";
|
|
@@ -12119,7 +12119,7 @@ var Image$1 = newStyled.img(templateObject_1$1b || (templateObject_1$1b = __make
|
|
|
12119
12119
|
? "0.1rem solid ".concat(previewImgBorderColor ? previewImgBorderColor : theme.colors.shades['700'].color)
|
|
12120
12120
|
: 'inherit';
|
|
12121
12121
|
});
|
|
12122
|
-
var templateObject_1$
|
|
12122
|
+
var templateObject_1$1c;
|
|
12123
12123
|
|
|
12124
12124
|
var ImageSmallPreview = function (_a) {
|
|
12125
12125
|
var imageUrl = _a.imageUrl, alt = _a.alt, _b = _a.selected, selected = _b === void 0 ? false : _b, className = _a.className, borderRadiusVariant = _a.borderRadiusVariant, previewImgBorderColor = _a.previewImgBorderColor, isRatioSquare = _a.isRatioSquare, _c = _a.loading, loading = _c === void 0 ? 'eager' : _c, _d = _a.decoding, decoding = _d === void 0 ? 'auto' : _d;
|
|
@@ -12127,9 +12127,9 @@ var ImageSmallPreview = function (_a) {
|
|
|
12127
12127
|
return (jsxRuntime.jsx(Image$1, { className: className, src: imageUrl, alt: alt, selected: selected, theme: theme, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor, loading: loading, decoding: decoding, width: theme.component.gallery.thumbnail.desktop.width, height: theme.component.gallery.thumbnail.desktop.height, isRatioSquare: isRatioSquare }, void 0));
|
|
12128
12128
|
};
|
|
12129
12129
|
|
|
12130
|
-
var horizontalStyles = css(templateObject_1$
|
|
12131
|
-
var verticalStyles = css(templateObject_2$
|
|
12132
|
-
var Container$S = newStyled.div(templateObject_3$
|
|
12130
|
+
var horizontalStyles = css(templateObject_1$1b || (templateObject_1$1b = __makeTemplateObject(["\n grid-row: 2;\n grid-auto-flow: column;\n grid-column-gap: 6px;\n margin-top: 20px;\n max-width: 360px;\n overflow: auto;\n"], ["\n grid-row: 2;\n grid-auto-flow: column;\n grid-column-gap: 6px;\n margin-top: 20px;\n max-width: 360px;\n overflow: auto;\n"])));
|
|
12131
|
+
var verticalStyles = css(templateObject_2$U || (templateObject_2$U = __makeTemplateObject(["\n grid-row-gap: 20px;\n overflow: auto;\n grid-area: 1/1;\n"], ["\n grid-row-gap: 20px;\n overflow: auto;\n grid-area: 1/1;\n"])));
|
|
12132
|
+
var Container$S = newStyled.div(templateObject_3$J || (templateObject_3$J = __makeTemplateObject(["\n display: grid;\n max-height: 45rem;\n height: min-content;\n align-items: flex-start;\n ", "\n\n ", "\n"], ["\n display: grid;\n max-height: 45rem;\n height: min-content;\n align-items: flex-start;\n ", "\n\n ", "\n"])), function (_a) {
|
|
12133
12133
|
var position = _a.position;
|
|
12134
12134
|
return (position == 'horizontal' ? horizontalStyles : verticalStyles);
|
|
12135
12135
|
}, function (_a) {
|
|
@@ -12137,12 +12137,12 @@ var Container$S = newStyled.div(templateObject_3$I || (templateObject_3$I = __ma
|
|
|
12137
12137
|
return hasOverflowArrows &&
|
|
12138
12138
|
"\n scroll-behavior: smooth;\n &::-webkit-scrollbar {\n visibility: hidden;\n }\n ";
|
|
12139
12139
|
});
|
|
12140
|
-
var Button$6 = newStyled.button(templateObject_4$
|
|
12141
|
-
var ArrowsContainer = newStyled.div(templateObject_5$
|
|
12142
|
-
var ArrowBaseStyles = newStyled.div(templateObject_6$
|
|
12143
|
-
var ArrowPrev = newStyled(ArrowBaseStyles)(templateObject_7$
|
|
12140
|
+
var Button$6 = newStyled.button(templateObject_4$z || (templateObject_4$z = __makeTemplateObject(["\n padding: 0;\n border: none;\n text-decoration: none;\n background: transparent;\n outline: none;\n"], ["\n padding: 0;\n border: none;\n text-decoration: none;\n background: transparent;\n outline: none;\n"])));
|
|
12141
|
+
var ArrowsContainer = newStyled.div(templateObject_5$s || (templateObject_5$s = __makeTemplateObject(["\n display: flex;\n width: 65px;\n position: relative;\n left: 6px;\n"], ["\n display: flex;\n width: 65px;\n position: relative;\n left: 6px;\n"])));
|
|
12142
|
+
var ArrowBaseStyles = newStyled.div(templateObject_6$q || (templateObject_6$q = __makeTemplateObject(["\n -webkit-text-size-adjust: 100%;\n -webkit-font-smoothing: antialiased;\n color: #2a2a2a;\n border: 0;\n font-family: inherit;\n font-size: 100%;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n margin: 0;\n padding: 0;\n vertical-align: inherit;\n background-color: #ececea;\n box-sizing: border-box;\n cursor: pointer;\n float: left;\n height: 20px;\n position: relative;\n width: 50%;\n background-position: 50%;\n background-repeat: no-repeat;\n background-size: 11px;\n display: block;\n"], ["\n -webkit-text-size-adjust: 100%;\n -webkit-font-smoothing: antialiased;\n color: #2a2a2a;\n border: 0;\n font-family: inherit;\n font-size: 100%;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n margin: 0;\n padding: 0;\n vertical-align: inherit;\n background-color: #ececea;\n box-sizing: border-box;\n cursor: pointer;\n float: left;\n height: 20px;\n position: relative;\n width: 50%;\n background-position: 50%;\n background-repeat: no-repeat;\n background-size: 11px;\n display: block;\n"])));
|
|
12143
|
+
var ArrowPrev = newStyled(ArrowBaseStyles)(templateObject_7$l || (templateObject_7$l = __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"])));
|
|
12144
12144
|
var ArrowNext = newStyled(ArrowBaseStyles)(templateObject_8$e || (templateObject_8$e = __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"])));
|
|
12145
|
-
var templateObject_1$
|
|
12145
|
+
var templateObject_1$1b, templateObject_2$U, templateObject_3$J, templateObject_4$z, templateObject_5$s, templateObject_6$q, templateObject_7$l, templateObject_8$e;
|
|
12146
12146
|
|
|
12147
12147
|
var getLoadingProp = function (index, itemsOnViewport) {
|
|
12148
12148
|
var loading = 'eager';
|
|
@@ -12179,22 +12179,22 @@ var ImagePreviewList = function (_a) {
|
|
|
12179
12179
|
})) }), void 0), hasOverflowArrows && (jsxRuntime.jsxs(ArrowsContainer, __assign$1({ role: "navigation" }, { children: [jsxRuntime.jsx(ArrowPrev, { onClick: handleScrollVerticalPrev }, void 0), jsxRuntime.jsx(ArrowNext, { onClick: handleScrollVerticalNext }, void 0)] }), void 0))] }, void 0));
|
|
12180
12180
|
};
|
|
12181
12181
|
|
|
12182
|
-
var ProgressContainer = newStyled.div(templateObject_1$
|
|
12183
|
-
var ProgressFiller = newStyled.div(templateObject_2$
|
|
12184
|
-
var templateObject_1$
|
|
12182
|
+
var ProgressContainer = newStyled.div(templateObject_1$1a || (templateObject_1$1a = __makeTemplateObject(["\n top: 20px;\n left: 10px;\n border-radius: 10px;\n position: absolute;\n height: 5px;\n width: 95%;\n background: rgba(0, 0, 0, 0.3);\n transition: opacity 0.3s ease-in-out;\n opacity: ", ";\n"], ["\n top: 20px;\n left: 10px;\n border-radius: 10px;\n position: absolute;\n height: 5px;\n width: 95%;\n background: rgba(0, 0, 0, 0.3);\n transition: opacity 0.3s ease-in-out;\n opacity: ", ";\n"])), function (props) { return (props.hide ? 0 : 1); });
|
|
12183
|
+
var ProgressFiller = newStyled.div(templateObject_2$T || (templateObject_2$T = __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; });
|
|
12184
|
+
var templateObject_1$1a, templateObject_2$T;
|
|
12185
12185
|
|
|
12186
12186
|
var ProgressBar$1 = function (_a) {
|
|
12187
12187
|
var progress = _a.progress, hide = _a.hide;
|
|
12188
12188
|
return (jsxRuntime.jsx(ProgressContainer, __assign$1({ "data-testid": "progress-bar", hide: hide }, { children: jsxRuntime.jsx(ProgressFiller, { progress: progress }, void 0) }), void 0));
|
|
12189
12189
|
};
|
|
12190
12190
|
|
|
12191
|
-
var Container$R = newStyled.div(templateObject_1$
|
|
12192
|
-
var HTMLVideo = newStyled.video(templateObject_2$
|
|
12193
|
-
var PlayIcon = newStyled(Icon.PDP.PlayVideo)(templateObject_3$
|
|
12194
|
-
var PlayContainer = newStyled.div(templateObject_4$
|
|
12195
|
-
var PauseContainer = newStyled.div(templateObject_5$
|
|
12196
|
-
var MuteButton = newStyled.button(templateObject_6$
|
|
12197
|
-
var templateObject_1$
|
|
12191
|
+
var Container$R = newStyled.div(templateObject_1$19 || (templateObject_1$19 = __makeTemplateObject(["\n max-width: 530px;\n position: relative;\n"], ["\n max-width: 530px;\n position: relative;\n"])));
|
|
12192
|
+
var HTMLVideo = newStyled.video(templateObject_2$S || (templateObject_2$S = __makeTemplateObject(["\n width: 100%;\n max-width: 530px;\n height: ", ";\n"], ["\n width: 100%;\n max-width: 530px;\n height: ", ";\n"])), function (props) { return props.height; });
|
|
12193
|
+
var PlayIcon = newStyled(Icon.PDP.PlayVideo)(templateObject_3$I || (templateObject_3$I = __makeTemplateObject(["\n width: 120px;\n height: 120px;\n\n @media (max-width: 768px) {\n width: 80px;\n height: 80px;\n }\n"], ["\n width: 120px;\n height: 120px;\n\n @media (max-width: 768px) {\n width: 80px;\n height: 80px;\n }\n"])));
|
|
12194
|
+
var PlayContainer = newStyled.div(templateObject_4$y || (templateObject_4$y = __makeTemplateObject(["\n z-index: 1;\n width: 100%;\n height: 100%;\n display: flex;\n position: absolute;\n align-items: center;\n justify-content: center;\n"], ["\n z-index: 1;\n width: 100%;\n height: 100%;\n display: flex;\n position: absolute;\n align-items: center;\n justify-content: center;\n"])));
|
|
12195
|
+
var PauseContainer = newStyled.div(templateObject_5$r || (templateObject_5$r = __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"])));
|
|
12196
|
+
var MuteButton = newStyled.button(templateObject_6$p || (templateObject_6$p = __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"])));
|
|
12197
|
+
var templateObject_1$19, templateObject_2$S, templateObject_3$I, templateObject_4$y, templateObject_5$r, templateObject_6$p;
|
|
12198
12198
|
|
|
12199
12199
|
var Video$1 = function (_a) {
|
|
12200
12200
|
var _b, _c, _d, _e;
|
|
@@ -13834,32 +13834,32 @@ InnerImageZoom.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
13834
13834
|
afterZoomOut: PropTypes.func
|
|
13835
13835
|
} : {};
|
|
13836
13836
|
|
|
13837
|
-
var Container$Q = newStyled.div(templateObject_1$
|
|
13837
|
+
var Container$Q = newStyled.div(templateObject_1$18 || (templateObject_1$18 = __makeTemplateObject(["\n ", "\n z-index: 0;\n position: relative;\n height: fit-content;\n /* &.styleforhorizontal {\n height: 30rem;\n } */\n display: block;\n overflow: hidden;\n white-space: nowrap;\n grid-area: 1/2;\n width: 100%;\n max-width: max-content;\n"], ["\n ", "\n z-index: 0;\n position: relative;\n height: fit-content;\n /* &.styleforhorizontal {\n height: 30rem;\n } */\n display: block;\n overflow: hidden;\n white-space: nowrap;\n grid-area: 1/2;\n width: 100%;\n max-width: max-content;\n"])), function (_a) {
|
|
13838
13838
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
13839
13839
|
return borderRadiusVariant && "border-radius: 40px;";
|
|
13840
13840
|
});
|
|
13841
|
-
var TopTagContainer$6 = newStyled.div(templateObject_2$
|
|
13841
|
+
var TopTagContainer$6 = newStyled.div(templateObject_2$R || (templateObject_2$R = __makeTemplateObject(["\n position: absolute;\n left: ", ";\n top: ", ";\n"], ["\n position: absolute;\n left: ", ";\n top: ", ";\n"])), function (_a) {
|
|
13842
13842
|
var borderRadiusVariant = _a.borderRadiusVariant, theme = _a.theme;
|
|
13843
13843
|
return borderRadiusVariant ? '50px' : theme.component.gallery.tagPosition.left;
|
|
13844
13844
|
}, function (_a) {
|
|
13845
13845
|
var borderRadiusVariant = _a.borderRadiusVariant, theme = _a.theme;
|
|
13846
13846
|
return borderRadiusVariant ? '10px' : theme.component.gallery.tagPosition.top;
|
|
13847
13847
|
});
|
|
13848
|
-
var BottomTagContainer$6 = newStyled.div(templateObject_3$
|
|
13848
|
+
var BottomTagContainer$6 = newStyled.div(templateObject_3$H || (templateObject_3$H = __makeTemplateObject(["\n position: absolute;\n bottom: ", ";\n left: 0;\n"], ["\n position: absolute;\n bottom: ", ";\n left: 0;\n"])), function (_a) {
|
|
13849
13849
|
var isCTAHidden = _a.isCTAHidden;
|
|
13850
13850
|
return (isCTAHidden ? '60px' : '120px');
|
|
13851
13851
|
});
|
|
13852
|
-
var TopRightTagContainer$1 = newStyled.div(templateObject_4$
|
|
13853
|
-
var ButtonSecondaryOutlineWrapper = newStyled(ButtonSecondaryOutline)(templateObject_5$
|
|
13854
|
-
var ImageStyled = newStyled(Image$3)(templateObject_6$
|
|
13852
|
+
var TopRightTagContainer$1 = newStyled.div(templateObject_4$x || (templateObject_4$x = __makeTemplateObject(["\n position: absolute;\n right: 0;\n top: 0;\n white-space: pre-wrap;\n"], ["\n position: absolute;\n right: 0;\n top: 0;\n white-space: pre-wrap;\n"])));
|
|
13853
|
+
var ButtonSecondaryOutlineWrapper = newStyled(ButtonSecondaryOutline)(templateObject_5$q || (templateObject_5$q = __makeTemplateObject(["\n text-transform: capitalize;\n margin-top: 12px;\n\n @media (max-width: 992px) {\n margin-top: 4px;\n }\n"], ["\n text-transform: capitalize;\n margin-top: 12px;\n\n @media (max-width: 992px) {\n margin-top: 4px;\n }\n"])));
|
|
13854
|
+
var ImageStyled = newStyled(Image$3)(templateObject_6$o || (templateObject_6$o = __makeTemplateObject(["\n aspect-ratio: ", ";\n"], ["\n aspect-ratio: ", ";\n"])), function (_a) {
|
|
13855
13855
|
var theme = _a.theme, isRatioSquare = _a.isRatioSquare;
|
|
13856
13856
|
return isRatioSquare ? '1 / 1' : theme.component.gallery.aspectRatio;
|
|
13857
13857
|
});
|
|
13858
|
-
var InnerImageZoomStyled = newStyled(InnerImageZoom)(templateObject_7$
|
|
13858
|
+
var InnerImageZoomStyled = newStyled(InnerImageZoom)(templateObject_7$k || (templateObject_7$k = __makeTemplateObject(["\n aspect-ratio: ", ";\n"], ["\n aspect-ratio: ", ";\n"])), function (_a) {
|
|
13859
13859
|
var theme = _a.theme, isRatioSquare = _a.isRatioSquare;
|
|
13860
13860
|
return isRatioSquare ? '1 / 1' : theme.component.gallery.aspectRatio;
|
|
13861
13861
|
});
|
|
13862
|
-
var templateObject_1$
|
|
13862
|
+
var templateObject_1$18, templateObject_2$R, templateObject_3$H, templateObject_4$x, templateObject_5$q, templateObject_6$o, templateObject_7$k;
|
|
13863
13863
|
|
|
13864
13864
|
var ImageProductSlide$1 = function (_a) {
|
|
13865
13865
|
var _b;
|
|
@@ -13874,8 +13874,8 @@ var ImageProductSlide$1 = function (_a) {
|
|
|
13874
13874
|
}, width: position == 'horizontal' ? 360 : 530, height: position == 'horizontal' ? 480 : 720, hideHint: true, isRatioSquare: isRatioSquare }, void 0)) : (jsxRuntime.jsx(ImageStyled, { width: position == 'horizontal' ? '360px' : '530px', height: "auto", src: source, alt: content.alt, objectFit: "cover", loading: "eager", decoding: "sync", isRatioSquare: isRatioSquare }, void 0)), jsxRuntime.jsx(TopTagContainer$6, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsxRuntime.jsx(BottomTagContainer$6, __assign$1({ isCTAHidden: hideCTA }, { children: bottomTag }), void 0), !!topRightTag && jsxRuntime.jsx(TopRightTagContainer$1, { children: topRightTag }, void 0)] }, void 0)), isVideo && jsxRuntime.jsx(Video$1, { source: source, thumbnail: content === null || content === void 0 ? void 0 : content.thumbnailUrl }, void 0), ctaText && ctaAction && (jsxRuntime.jsx("div", __assign$1({ style: { display: hideCTA ? 'none' : 'block' } }, { children: jsxRuntime.jsx(ButtonSecondaryOutlineWrapper, { wide: true, onClick: ctaAction, text: ctaText }, void 0) }), void 0))] }), void 0));
|
|
13875
13875
|
};
|
|
13876
13876
|
|
|
13877
|
-
var Container$P = newStyled.div(templateObject_1$
|
|
13878
|
-
var templateObject_1$
|
|
13877
|
+
var Container$P = newStyled.div(templateObject_1$17 || (templateObject_1$17 = __makeTemplateObject(["\n display: grid;\n grid-template-columns: minmax(6rem, max-content) 1fr;\n grid-column-gap: 20px;\n max-height: 50rem;\n width: 100%;\n"], ["\n display: grid;\n grid-template-columns: minmax(6rem, max-content) 1fr;\n grid-column-gap: 20px;\n max-height: 50rem;\n width: 100%;\n"])));
|
|
13878
|
+
var templateObject_1$17;
|
|
13879
13879
|
|
|
13880
13880
|
var getInitialIndex = function (images, selectedValue) {
|
|
13881
13881
|
if (selectedValue) {
|
|
@@ -13923,7 +13923,7 @@ var getStylesBySize$8 = function (size) {
|
|
|
13923
13923
|
};
|
|
13924
13924
|
}
|
|
13925
13925
|
};
|
|
13926
|
-
var Container$O = newStyled.div(templateObject_1$
|
|
13926
|
+
var Container$O = newStyled.div(templateObject_1$16 || (templateObject_1$16 = __makeTemplateObject(["\n background-color: ", ";\n width: ", ";\n height: ", ";\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n transition: background-color 0.1s ease;\n\n padding: ", ";\n\n &:hover {\n background-color: ", ";\n cursor: pointer;\n }\n\n &.disabled {\n background-color: ", ";\n cursor: not-allowed;\n\n svg path {\n fill: ", ";\n }\n }\n"], ["\n background-color: ", ";\n width: ", ";\n height: ", ";\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n transition: background-color 0.1s ease;\n\n padding: ", ";\n\n &:hover {\n background-color: ", ";\n cursor: pointer;\n }\n\n &.disabled {\n background-color: ", ";\n cursor: not-allowed;\n\n svg path {\n fill: ", ";\n }\n }\n"])), function (_a) {
|
|
13927
13927
|
var backgroundColor = _a.backgroundColor;
|
|
13928
13928
|
return backgroundColor;
|
|
13929
13929
|
}, function (_a) {
|
|
@@ -13953,9 +13953,9 @@ var IconButton = function (_a) {
|
|
|
13953
13953
|
var theme = useTheme();
|
|
13954
13954
|
return (jsxRuntime.jsx(Container$O, __assign$1({ className: disabled ? 'disabled' : '', backgroundColor: theme.component.button.primary.active.backgroundColor, hoverBackgroundColor: theme.component.button.secondary.active.backgroundColor, disabledColor: theme.colors.shades['50'].color, disabledIconColor: theme.colors.shades['200'].color, size: size, "data-testid": "Container", onClick: disabled ? function () { } : onClick }, { children: children }), void 0));
|
|
13955
13955
|
};
|
|
13956
|
-
var templateObject_1$
|
|
13956
|
+
var templateObject_1$16;
|
|
13957
13957
|
|
|
13958
|
-
var StyledButton$2 = newStyled(BaseButton)(templateObject_1$
|
|
13958
|
+
var StyledButton$2 = newStyled(BaseButton)(templateObject_1$15 || (templateObject_1$15 = __makeTemplateObject(["\n width: 12.5rem;\n height: 2.5rem;\n background-color: ", ";\n cursor: pointer;\n border: none;\n\n &:hover {\n background-color: ", ";\n }\n"], ["\n width: 12.5rem;\n height: 2.5rem;\n background-color: ", ";\n cursor: pointer;\n border: none;\n\n &:hover {\n background-color: ", ";\n }\n"])), function (props) { return props.backgroundColor; }, function (props) { return props.hoverBackgroundColor; });
|
|
13959
13959
|
var AmazonButton = function (_a) {
|
|
13960
13960
|
var onClick = _a.onClick;
|
|
13961
13961
|
return (jsxRuntime.jsx(StyledButton$2, __assign$1({ backgroundColor: "#FED865", hoverBackgroundColor: "#F1CB58", onClick: onClick }, { children: jsxRuntime.jsx(Icon.Payment.Amazon, { width: 5.375, height: 1.25 }, void 0) }), void 0));
|
|
@@ -13964,7 +13964,7 @@ var PaypalButton = function (_a) {
|
|
|
13964
13964
|
var onClick = _a.onClick;
|
|
13965
13965
|
return (jsxRuntime.jsx(StyledButton$2, __assign$1({ backgroundColor: "#ffc439", hoverBackgroundColor: "#F4BF41", onClick: onClick }, { children: jsxRuntime.jsx(Icon.Payment.Paypal, { width: 4.938, height: 1.25 }, void 0) }), void 0));
|
|
13966
13966
|
};
|
|
13967
|
-
var templateObject_1$
|
|
13967
|
+
var templateObject_1$15;
|
|
13968
13968
|
|
|
13969
13969
|
var Container$N = newStyled.div(function (props) { return ({
|
|
13970
13970
|
height: 'auto',
|
|
@@ -14019,9 +14019,9 @@ var IconsWithTitle = function (_a) {
|
|
|
14019
14019
|
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(Container$N, __assign$1({ textPosition: iconTitlePosition }, { children: [withWrapper ? (jsxRuntime.jsx(IconWrapper, __assign$1({ backgroundColor: backgroundColor, style: iconStyles, iconSize: isMobile ? iconSizeMobile : iconSizeDesktop }, { children: jsxRuntime.jsx(IconComponent, { width: isMobile ? iconSizeMobile : iconSizeDesktop, height: isMobile ? iconSizeMobile : iconSizeDesktop, fill: iconColor }, void 0) }), void 0)) : (jsxRuntime.jsx(IconComponent, { width: isMobile ? iconSizeMobile : iconSizeDesktop, height: isMobile ? iconSizeMobile : iconSizeDesktop, fill: iconColor }, void 0)), jsxRuntime.jsx(Text$7, { variant: "heading6", weight: "demi", style: titleStyles ? titleStyles : defaultTitleStyle, dangerouslySetInnerHTML: isTitleInnerHtml ? { __html: iconTitle } : { __html: "<span>".concat(iconTitle, "</span>") } }, void 0)] }), void 0) }, void 0));
|
|
14020
14020
|
};
|
|
14021
14021
|
|
|
14022
|
-
var Container$M = newStyled.div(templateObject_1$
|
|
14023
|
-
var ImageContainer$4 = newStyled.div(templateObject_2$
|
|
14024
|
-
var StyledTitle = newStyled.div(templateObject_3$
|
|
14022
|
+
var Container$M = newStyled.div(templateObject_1$14 || (templateObject_1$14 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n border-radius: 10px;\n max-width: ", ";\n width: 100%;\n height: 100%;\n flex-wrap: wrap;\n row-gap: 15px;\n"], ["\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n border-radius: 10px;\n max-width: ", ";\n width: 100%;\n height: 100%;\n flex-wrap: wrap;\n row-gap: 15px;\n"])), function (props) { return (props.isMobile ? '200px' : '207px'); });
|
|
14023
|
+
var ImageContainer$4 = newStyled.div(templateObject_2$Q || (templateObject_2$Q = __makeTemplateObject(["\n display: flex;\n max-width: ", ";\n height: ", ";\n"], ["\n display: flex;\n max-width: ", ";\n height: ", ";\n"])), function (props) { return (props.isMobile ? '200px' : '207px'); }, function (props) { return (props.isMobile ? '200px' : '207px'); });
|
|
14024
|
+
var StyledTitle = newStyled.div(templateObject_3$G || (templateObject_3$G = __makeTemplateObject(["\n display: flex;\n ", "\n"], ["\n display: flex;\n ", "\n"])), function (_a) {
|
|
14025
14025
|
var titlePosition = _a.titlePosition;
|
|
14026
14026
|
return titlePosition == 'center' &&
|
|
14027
14027
|
"\nalign-items:center;\njustify-content:center;\n";
|
|
@@ -14031,13 +14031,13 @@ var ImageCardWithDescription = function (_a) {
|
|
|
14031
14031
|
var isMobile = useWindowDimensions().isMobile;
|
|
14032
14032
|
return (jsxRuntime.jsxs(Container$M, __assign$1({ "data-testid": "Container", isMobile: isMobile }, { children: [jsxRuntime.jsx(ImageContainer$4, __assign$1({ "data-testid": "ImageContainer", isMobile: isMobile }, { children: jsxRuntime.jsx(Image$3, { src: image, borderRadius: "40px", alt: "before", height: "100%", width: "100%" }, void 0) }), void 0), jsxRuntime.jsx(StyledTitle, __assign$1({ titlePosition: titlePosition, "data-testid": "StyledTitle" }, { children: isMobile ? (jsxRuntime.jsx(Text$7, __assign$1({ variant: "link", weight: "demi" }, { children: title }), void 0)) : (jsxRuntime.jsx(Text$7, __assign$1({ variant: "heading6", weight: "demi" }, { children: title }), void 0)) }), void 0), jsxRuntime.jsx(Text$7, __assign$1({ variant: "link", weight: "regular" }, { children: description }), void 0)] }), void 0));
|
|
14033
14033
|
};
|
|
14034
|
-
var templateObject_1$
|
|
14034
|
+
var templateObject_1$14, templateObject_2$Q, templateObject_3$G;
|
|
14035
14035
|
|
|
14036
|
-
var Label$4 = newStyled.span(templateObject_1$
|
|
14036
|
+
var Label$4 = newStyled.span(templateObject_1$13 || (templateObject_1$13 = __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) {
|
|
14037
14037
|
var color = _a.color;
|
|
14038
14038
|
return color;
|
|
14039
14039
|
});
|
|
14040
|
-
var MandatoryIcon = newStyled.span(templateObject_2$
|
|
14040
|
+
var MandatoryIcon = newStyled.span(templateObject_2$P || (templateObject_2$P = __makeTemplateObject(["\n color: ", ";\n margin-left: 0.25rem;\n"], ["\n color: ", ";\n margin-left: 0.25rem;\n"])), function (_a) {
|
|
14041
14041
|
var color = _a.color;
|
|
14042
14042
|
return color;
|
|
14043
14043
|
});
|
|
@@ -14046,7 +14046,7 @@ var InputLabel = function (_a) {
|
|
|
14046
14046
|
var theme = useTheme();
|
|
14047
14047
|
return (jsxRuntime.jsxs(Label$4, __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));
|
|
14048
14048
|
};
|
|
14049
|
-
var templateObject_1$
|
|
14049
|
+
var templateObject_1$13, templateObject_2$P;
|
|
14050
14050
|
|
|
14051
14051
|
var containerByStatus = function (theme, status) {
|
|
14052
14052
|
if (status === exports.InputValidationType.Valid)
|
|
@@ -14055,12 +14055,12 @@ var containerByStatus = function (theme, status) {
|
|
|
14055
14055
|
return theme.colors.semantic.urgent.color;
|
|
14056
14056
|
return '';
|
|
14057
14057
|
};
|
|
14058
|
-
var Container$L = newStyled.div(templateObject_1$
|
|
14058
|
+
var Container$L = newStyled.div(templateObject_1$12 || (templateObject_1$12 = __makeTemplateObject(["\n position: relative;\n input {\n border-color: ", ";\n }\n"], ["\n position: relative;\n input {\n border-color: ", ";\n }\n"])), function (_a) {
|
|
14059
14059
|
var theme = _a.theme, status = _a.status, hasError = _a.hasError;
|
|
14060
14060
|
return hasError ? '' : containerByStatus(theme, status);
|
|
14061
14061
|
});
|
|
14062
|
-
var StyledLabel$2 = newStyled.label(templateObject_2$
|
|
14063
|
-
var StyledInput = newStyled.input(templateObject_3$
|
|
14062
|
+
var StyledLabel$2 = newStyled.label(templateObject_2$O || (templateObject_2$O = __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"])));
|
|
14063
|
+
var StyledInput = newStyled.input(templateObject_3$F || (templateObject_3$F = __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) {
|
|
14064
14064
|
var inlinePlaceholder = _a.inlinePlaceholder, theme = _a.theme;
|
|
14065
14065
|
return theme.component[inlinePlaceholder ? 'inputPlaceholder' : 'input'].padding;
|
|
14066
14066
|
}, function (_a) {
|
|
@@ -14115,11 +14115,11 @@ var StyledInput = newStyled.input(templateObject_3$E || (templateObject_3$E = __
|
|
|
14115
14115
|
return hasValue &&
|
|
14116
14116
|
"& ~ span {\n bottom: 1.625rem;\n font-size: 0.75rem;\n opacity: 1;\n }";
|
|
14117
14117
|
});
|
|
14118
|
-
var InputWrapper = newStyled.div(templateObject_4$
|
|
14118
|
+
var InputWrapper = newStyled.div(templateObject_4$w || (templateObject_4$w = __makeTemplateObject(["\n position: relative;\n display: flex;\n height: ", ";\n"], ["\n position: relative;\n display: flex;\n height: ", ";\n"])), function (_a) {
|
|
14119
14119
|
var size = _a.size, inlinePlaceholder = _a.inlinePlaceholder;
|
|
14120
14120
|
return !inlinePlaceholder ? (size === 'small' ? '36px' : '40px') : '48px';
|
|
14121
14121
|
});
|
|
14122
|
-
var AnimatedPlaceholder = newStyled.span(templateObject_5$
|
|
14122
|
+
var AnimatedPlaceholder = newStyled.span(templateObject_5$p || (templateObject_5$p = __makeTemplateObject(["\n color: ", ";\n font-weight: ", ";\n left: 0.9375rem;\n top: 0;\n margin: auto;\n bottom: 0;\n transition: all 0.2s ease;\n position: absolute;\n pointer-events: none;\n font-size: ", ";\n line-height: ", ";\n display: inline-block;\n height: 24px;\n"], ["\n color: ", ";\n font-weight: ", ";\n left: 0.9375rem;\n top: 0;\n margin: auto;\n bottom: 0;\n transition: all 0.2s ease;\n position: absolute;\n pointer-events: none;\n font-size: ", ";\n line-height: ", ";\n display: inline-block;\n height: 24px;\n"])), function (_a) {
|
|
14123
14123
|
var theme = _a.theme;
|
|
14124
14124
|
return theme.component.input.placeholderColor;
|
|
14125
14125
|
}, function (_a) {
|
|
@@ -14132,8 +14132,8 @@ var AnimatedPlaceholder = newStyled.span(templateObject_5$o || (templateObject_5
|
|
|
14132
14132
|
var theme = _a.theme;
|
|
14133
14133
|
return theme.component.input.lineHeight;
|
|
14134
14134
|
});
|
|
14135
|
-
var ClearInput = newStyled.div(templateObject_6$
|
|
14136
|
-
var templateObject_1$
|
|
14135
|
+
var ClearInput = newStyled.div(templateObject_6$n || (templateObject_6$n = __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"])));
|
|
14136
|
+
var templateObject_1$12, templateObject_2$O, templateObject_3$F, templateObject_4$w, templateObject_5$p, templateObject_6$n;
|
|
14137
14137
|
|
|
14138
14138
|
var BaseInput = function (_a) {
|
|
14139
14139
|
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"]);
|
|
@@ -14177,11 +14177,11 @@ var Button$5 = function (_a) {
|
|
|
14177
14177
|
throw new Error("Invalid button variant ".concat(variant));
|
|
14178
14178
|
};
|
|
14179
14179
|
|
|
14180
|
-
var Container$K = newStyled.div(templateObject_1$
|
|
14180
|
+
var Container$K = newStyled.div(templateObject_1$11 || (templateObject_1$11 = __makeTemplateObject(["\n overflow: hidden;\n\n input {\n border-radius: ", ";\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n border-right: none;\n width: 100%;\n }\n"], ["\n overflow: hidden;\n\n input {\n border-radius: ", ";\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n border-right: none;\n width: 100%;\n }\n"])), function (_a) {
|
|
14181
14181
|
var theme = _a.theme;
|
|
14182
14182
|
return theme.component.inputCustom.input.borderRadius;
|
|
14183
14183
|
});
|
|
14184
|
-
var ButtonContainer$1 = newStyled.div(templateObject_2$
|
|
14184
|
+
var ButtonContainer$1 = newStyled.div(templateObject_2$N || (templateObject_2$N = __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) {
|
|
14185
14185
|
var theme = _a.theme, defaultRounded = _a.defaultRounded;
|
|
14186
14186
|
return defaultRounded
|
|
14187
14187
|
? theme.component.inputCustom.button.borderRadius
|
|
@@ -14198,21 +14198,21 @@ var Custom = function (_a) {
|
|
|
14198
14198
|
}); }, [variant, onClick, text, rest.disabled]);
|
|
14199
14199
|
return (jsxRuntime.jsx(Container$K, __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));
|
|
14200
14200
|
};
|
|
14201
|
-
var templateObject_1$
|
|
14201
|
+
var templateObject_1$11, templateObject_2$N;
|
|
14202
14202
|
|
|
14203
|
-
var SuccessContainer = newStyled.div(templateObject_1
|
|
14203
|
+
var SuccessContainer = newStyled.div(templateObject_1$10 || (templateObject_1$10 = __makeTemplateObject(["\n height: ", ";\n display: flex;\n"], ["\n height: ", ";\n display: flex;\n"])), function (_a) {
|
|
14204
14204
|
var size = _a.size;
|
|
14205
14205
|
return (size === 'small' ? '36px' : '');
|
|
14206
14206
|
});
|
|
14207
|
-
var SuccessMessage = newStyled.div(templateObject_2$
|
|
14208
|
-
var SuccessText = newStyled.span(templateObject_3$
|
|
14207
|
+
var SuccessMessage = newStyled.div(templateObject_2$M || (templateObject_2$M = __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"])));
|
|
14208
|
+
var SuccessText = newStyled.span(templateObject_3$E || (templateObject_3$E = __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"])));
|
|
14209
14209
|
var Success = function (_a) {
|
|
14210
14210
|
var children = _a.children, successText = _a.successText, size = _a.size;
|
|
14211
14211
|
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));
|
|
14212
14212
|
};
|
|
14213
|
-
var templateObject_1
|
|
14213
|
+
var templateObject_1$10, templateObject_2$M, templateObject_3$E;
|
|
14214
14214
|
|
|
14215
|
-
var ButtonContainer = newStyled.div(templateObject_1
|
|
14215
|
+
var ButtonContainer = newStyled.div(templateObject_1$$ || (templateObject_1$$ = __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) {
|
|
14216
14216
|
var status = _a.status, type = _a.type, theme = _a.theme;
|
|
14217
14217
|
return status === exports.InputValidationType.Empty &&
|
|
14218
14218
|
type === 'primary' &&
|
|
@@ -14229,16 +14229,16 @@ var BasePlusButton = function (_a) {
|
|
|
14229
14229
|
}
|
|
14230
14230
|
return (jsxRuntime.jsx(BaseInput, __assign$1({ onValidation: setStatus, onChange: onChangeInput }, rest, { children: jsxRuntime.jsx(ButtonContainer, __assign$1({ status: status, type: "primary", theme: theme }, { children: jsxRuntime.jsx(ButtonSecondary, { text: text, onClick: function () { return onClick(inputValue); }, disabled: rest.disabled || status === exports.InputValidationType.Error }, void 0) }), void 0) }), void 0));
|
|
14231
14231
|
};
|
|
14232
|
-
var templateObject_1
|
|
14232
|
+
var templateObject_1$$;
|
|
14233
14233
|
|
|
14234
|
-
var Container$J = newStyled.div(templateObject_1$
|
|
14235
|
-
var IconContainer$2 = newStyled.div(templateObject_2$
|
|
14234
|
+
var Container$J = newStyled.div(templateObject_1$_ || (templateObject_1$_ = __makeTemplateObject(["\n input {\n padding-right: 2.688rem;\n }\n"], ["\n input {\n padding-right: 2.688rem;\n }\n"])));
|
|
14235
|
+
var IconContainer$2 = newStyled.div(templateObject_2$L || (templateObject_2$L = __makeTemplateObject(["\n position: absolute;\n right: 0.875rem;\n width: 1.125rem;\n height: 100%;\n display: flex;\n align-items: center;\n"], ["\n position: absolute;\n right: 0.875rem;\n width: 1.125rem;\n height: 100%;\n display: flex;\n align-items: center;\n"])));
|
|
14236
14236
|
var BasePlusIcon = function (_a) {
|
|
14237
14237
|
var Icon = _a.Icon, rest = __rest(_a, ["Icon"]);
|
|
14238
14238
|
var theme = useTheme();
|
|
14239
14239
|
return (jsxRuntime.jsx(Container$J, { 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));
|
|
14240
14240
|
};
|
|
14241
|
-
var templateObject_1$
|
|
14241
|
+
var templateObject_1$_, templateObject_2$L;
|
|
14242
14242
|
|
|
14243
14243
|
var Input$3 = {
|
|
14244
14244
|
Simple: BaseInput,
|
|
@@ -14283,7 +14283,7 @@ function usePreventVerticalScroll(ref, dragThreshold) {
|
|
|
14283
14283
|
}, [preventTouch, ref, touchStart]);
|
|
14284
14284
|
}
|
|
14285
14285
|
|
|
14286
|
-
var Container$I = newStyled.div(templateObject_1$
|
|
14286
|
+
var Container$I = newStyled.div(templateObject_1$Z || (templateObject_1$Z = __makeTemplateObject(["\n ", "\n position: relative;\n max-height: 524px;\n overflow: hidden;\n & .slick-dots li.slick-active button:before {\n background-color: ", ";\n }\n"], ["\n ", "\n position: relative;\n max-height: 524px;\n overflow: hidden;\n & .slick-dots li.slick-active button:before {\n background-color: ", ";\n }\n"])), function (_a) {
|
|
14287
14287
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
14288
14288
|
return borderRadiusVariant &&
|
|
14289
14289
|
"\n border-radius: 40px;\n ";
|
|
@@ -14292,11 +14292,11 @@ var Container$I = newStyled.div(templateObject_1$Y || (templateObject_1$Y = __ma
|
|
|
14292
14292
|
return theme.component.slideNavigation.slideDots.selectedDotColor;
|
|
14293
14293
|
});
|
|
14294
14294
|
// max-height: 31.875rem;
|
|
14295
|
-
var TopTagContainer$5 = newStyled.div(templateObject_2$
|
|
14296
|
-
var TopRightTagContainer = newStyled.div(templateObject_3$
|
|
14297
|
-
var BottomTagContainer$5 = newStyled.div(templateObject_4$
|
|
14298
|
-
var NavButtonContainer$2 = newStyled.div(templateObject_5$
|
|
14299
|
-
var Button$4 = newStyled.button(templateObject_6$
|
|
14295
|
+
var TopTagContainer$5 = newStyled.div(templateObject_2$K || (templateObject_2$K = __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'); });
|
|
14296
|
+
var TopRightTagContainer = newStyled.div(templateObject_3$D || (templateObject_3$D = __makeTemplateObject(["\n position: absolute;\n right: 0;\n top: 0;\n"], ["\n position: absolute;\n right: 0;\n top: 0;\n"])));
|
|
14297
|
+
var BottomTagContainer$5 = newStyled.div(templateObject_4$v || (templateObject_4$v = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
14298
|
+
var NavButtonContainer$2 = newStyled.div(templateObject_5$o || (templateObject_5$o = __makeTemplateObject(["\n height: 40px;\n width: 40px;\n"], ["\n height: 40px;\n width: 40px;\n"])));
|
|
14299
|
+
var Button$4 = newStyled.button(templateObject_6$m || (templateObject_6$m = __makeTemplateObject(["\n background: transparent;\n border: none;\n padding: 0.188rem 0.625rem;\n z-index: 5;\n height: 40px !important;\n cursor: pointer;\n"], ["\n background: transparent;\n border: none;\n padding: 0.188rem 0.625rem;\n z-index: 5;\n height: 40px !important;\n cursor: pointer;\n"])));
|
|
14300
14300
|
var settings$1 = {
|
|
14301
14301
|
dots: true,
|
|
14302
14302
|
infinite: false,
|
|
@@ -14373,16 +14373,16 @@ var ImageProductSlide = function (_a) {
|
|
|
14373
14373
|
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));
|
|
14374
14374
|
}) }), void 0) }), void 0)] }, void 0));
|
|
14375
14375
|
};
|
|
14376
|
-
var templateObject_1$
|
|
14376
|
+
var templateObject_1$Z, templateObject_2$K, templateObject_3$D, templateObject_4$v, templateObject_5$o, templateObject_6$m;
|
|
14377
14377
|
|
|
14378
|
-
var Container$H = newStyled.div(templateObject_1$
|
|
14378
|
+
var Container$H = newStyled.div(templateObject_1$Y || (templateObject_1$Y = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n height: fit-content;\n position: relative;\n max-width: 450px;\n"], ["\n display: flex;\n flex-direction: column;\n height: fit-content;\n position: relative;\n max-width: 450px;\n"])));
|
|
14379
14379
|
var ProductGalleryMobile = function (_a) {
|
|
14380
14380
|
var images = _a.images, customClick = _a.customClick, topTag = _a.topTag, topRightTag = _a.topRightTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, _b = _a.borderRadiusVariant, borderRadiusVariant = _b === void 0 ? false : _b, selectedValue = _a.selectedValue, _c = _a.hasToPreserveOrder, hasToPreserveOrder = _c === void 0 ? false : _c, _d = _a.itemsOnViewport, itemsOnViewport = _d === void 0 ? 1 : _d;
|
|
14381
14381
|
var _e = React$2.useState(0), activeIndex = _e[0], setActiveIndex = _e[1];
|
|
14382
14382
|
var selectedContent = hasToPreserveOrder ? images === null || images === void 0 ? void 0 : images[activeIndex] : selectedValue;
|
|
14383
14383
|
return (jsxRuntime.jsx(Container$H, __assign$1({ "data-testid": "product-gallery-mobile-v1" }, { children: jsxRuntime.jsx(ImageProductSlide, { contents: images, customClick: customClick, topTag: topTag, topRightTag: topRightTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant, selectedValue: selectedContent, onChange: function (index) { return setActiveIndex(index); }, itemsOnViewport: itemsOnViewport }, void 0) }), void 0));
|
|
14384
14384
|
};
|
|
14385
|
-
var templateObject_1$
|
|
14385
|
+
var templateObject_1$Y;
|
|
14386
14386
|
|
|
14387
14387
|
function _extends() {
|
|
14388
14388
|
_extends = Object.assign || function (target) {
|
|
@@ -14649,14 +14649,14 @@ function useSwipeable(options) {
|
|
|
14649
14649
|
return handlers;
|
|
14650
14650
|
}
|
|
14651
14651
|
|
|
14652
|
-
var Button$3 = newStyled.button(templateObject_1$
|
|
14652
|
+
var Button$3 = newStyled.button(templateObject_1$X || (templateObject_1$X = __makeTemplateObject(["\n background: transparent;\n border: none;\n padding: 0.188rem 0.625rem;\n z-index: 5;\n top: calc(50% - 40px);\n height: 40px !important;\n"], ["\n background: transparent;\n border: none;\n padding: 0.188rem 0.625rem;\n z-index: 5;\n top: calc(50% - 40px);\n height: 40px !important;\n"])));
|
|
14653
14653
|
var ArrowButton = function (_a) {
|
|
14654
14654
|
var Icon = _a.Icon, onClick = _a.onClick, className = _a.className;
|
|
14655
14655
|
return (jsxRuntime.jsx(Button$3, __assign$1({ className: className, type: "button", onClick: onClick }, { children: Icon }), void 0));
|
|
14656
14656
|
};
|
|
14657
|
-
var templateObject_1$
|
|
14657
|
+
var templateObject_1$X;
|
|
14658
14658
|
|
|
14659
|
-
var Container$G = newStyled.div(templateObject_1$
|
|
14659
|
+
var Container$G = newStyled.div(templateObject_1$W || (templateObject_1$W = __makeTemplateObject(["\n position: absolute;\n bottom: 15px;\n display: flex;\n justify-content: center;\n width: 100%;\n svg {\n padding: 0.125rem;\n margin-left: 0.25rem;\n }\n"], ["\n position: absolute;\n bottom: 15px;\n display: flex;\n justify-content: center;\n width: 100%;\n svg {\n padding: 0.125rem;\n margin-left: 0.25rem;\n }\n"])));
|
|
14660
14660
|
var range = function (limit) { return __spreadArray([], new Array(limit), true).map(function (_, index) { return index; }); };
|
|
14661
14661
|
var SlideDots = function (_a) {
|
|
14662
14662
|
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, containerDataTestId = _a.containerDataTestId;
|
|
@@ -14665,11 +14665,11 @@ var SlideDots = function (_a) {
|
|
|
14665
14665
|
? theme.component.slideNavigation.slideDots.selectedDotColor
|
|
14666
14666
|
: theme.component.slideNavigation.slideDots.unselectedDotColor, opacity: theme.component.slideNavigation.slideDots.dotsOpacity, testId: "slide-dot-".concat(index) }, "Icon-".concat(index, "-navigation/slide_dot").concat(index === selectedIndex ? '_solid' : ''))); }) }), void 0));
|
|
14667
14667
|
};
|
|
14668
|
-
var templateObject_1$
|
|
14668
|
+
var templateObject_1$W;
|
|
14669
14669
|
|
|
14670
|
-
var NavigationButton = newStyled(ArrowButton)(templateObject_1$
|
|
14671
|
-
var RightButton = newStyled(NavigationButton)(templateObject_2$
|
|
14672
|
-
var LeftButton = newStyled(NavigationButton)(templateObject_3$
|
|
14670
|
+
var NavigationButton = newStyled(ArrowButton)(templateObject_1$V || (templateObject_1$V = __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"])));
|
|
14671
|
+
var RightButton = newStyled(NavigationButton)(templateObject_2$J || (templateObject_2$J = __makeTemplateObject(["\n right: 0;\n"], ["\n right: 0;\n"])));
|
|
14672
|
+
var LeftButton = newStyled(NavigationButton)(templateObject_3$C || (templateObject_3$C = __makeTemplateObject(["\n left: 0;\n"], ["\n left: 0;\n"])));
|
|
14673
14673
|
var SlideNavigation = function (_a) {
|
|
14674
14674
|
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, onNavigate = _a.onNavigate, testId = _a.testId;
|
|
14675
14675
|
var theme = useTheme();
|
|
@@ -14681,23 +14681,23 @@ var SlideNavigation = function (_a) {
|
|
|
14681
14681
|
onNavigate(selectedIndex + 1);
|
|
14682
14682
|
} }, void 0)), jsxRuntime.jsx(SlideDots, { quantity: quantity, selectedIndex: selectedIndex, containerDataTestId: testId }, void 0)] }, void 0));
|
|
14683
14683
|
};
|
|
14684
|
-
var templateObject_1$
|
|
14684
|
+
var templateObject_1$V, templateObject_2$J, templateObject_3$C;
|
|
14685
14685
|
|
|
14686
|
-
var Container$F = newStyled.div(templateObject_1$
|
|
14686
|
+
var Container$F = newStyled.div(templateObject_1$U || (templateObject_1$U = __makeTemplateObject(["\n ", "\n position: relative;\n max-height: 31.875rem;\n overflow: hidden;\n"], ["\n ", "\n position: relative;\n max-height: 31.875rem;\n overflow: hidden;\n"])), function (_a) {
|
|
14687
14687
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
14688
14688
|
return borderRadiusVariant &&
|
|
14689
14689
|
"\n border-radius: 40px;\n ";
|
|
14690
14690
|
});
|
|
14691
|
-
var TopTagContainer$4 = newStyled.div(templateObject_2$
|
|
14692
|
-
var BottomTagContainer$4 = newStyled.div(templateObject_3$
|
|
14691
|
+
var TopTagContainer$4 = newStyled.div(templateObject_2$I || (templateObject_2$I = __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'); });
|
|
14692
|
+
var BottomTagContainer$4 = newStyled.div(templateObject_3$B || (templateObject_3$B = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
14693
14693
|
var ImageProductSlideV2 = React$2.forwardRef(function ImageProductWithTags(_a, ref) {
|
|
14694
14694
|
var _b, _c;
|
|
14695
14695
|
var image = _a.image, topTag = _a.topTag, bottomTag = _a.bottomTag, testId = _a.testId, borderRadiusVariant = _a.borderRadiusVariant;
|
|
14696
14696
|
return (jsxRuntime.jsxs(Container$F, __assign$1({ "data-testid": testId, ref: ref, borderRadiusVariant: borderRadiusVariant }, { children: [!((_b = image === null || image === void 0 ? void 0 : image.alt) === null || _b === void 0 ? void 0 : _b.includes('-video')) && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(InnerImageZoom, { src: image.url, zoomSrc: image.url, zoomType: "hover", imgAttributes: { alt: image.alt, width: '100%', height: '510px' }, height: 510, fullscreenOnMobile: true, className: "zoomWrapper" }, void 0), jsxRuntime.jsx(TopTagContainer$4, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsxRuntime.jsx(BottomTagContainer$4, { children: bottomTag }, void 0)] }, void 0)), ((_c = image === null || image === void 0 ? void 0 : image.alt) === null || _c === void 0 ? void 0 : _c.includes('-video')) && (jsxRuntime.jsx("iframe", { allowFullScreen: true, title: image.alt, width: "100%", height: 510, src: image === null || image === void 0 ? void 0 : image.url, allow: "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" }, void 0))] }), void 0));
|
|
14697
14697
|
});
|
|
14698
|
-
var templateObject_1$
|
|
14698
|
+
var templateObject_1$U, templateObject_2$I, templateObject_3$B;
|
|
14699
14699
|
|
|
14700
|
-
var Container$E = newStyled.div(templateObject_1$
|
|
14700
|
+
var Container$E = 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"])));
|
|
14701
14701
|
var ProductGalleryMobileV2 = function (_a) {
|
|
14702
14702
|
var images = _a.images, selectedValue = _a.selectedValue, topTag = _a.topTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, slideDotsDataTestId = _a.slideDotsDataTestId, _b = _a.borderRadiusVariant, borderRadiusVariant = _b === void 0 ? false : _b;
|
|
14703
14703
|
var _c = React$2.useState(0), index = _c[0], setIndex = _c[1];
|
|
@@ -14721,9 +14721,9 @@ var ProductGalleryMobileV2 = function (_a) {
|
|
|
14721
14721
|
}, [index, images]);
|
|
14722
14722
|
return (jsxRuntime.jsxs(Container$E, __assign$1({ "data-testid": "product-gallery-mobile-v2" }, { children: [jsxRuntime.jsx(ImageProductSlideV2, __assign$1({}, handlers, { image: selectedImage, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant }), void 0), jsxRuntime.jsx(SlideNavigation, { quantity: images.length, selectedIndex: images.indexOf(selectedImage), onNavigate: setIndex, testId: slideDotsDataTestId }, void 0)] }), void 0));
|
|
14723
14723
|
};
|
|
14724
|
-
var templateObject_1$
|
|
14724
|
+
var templateObject_1$T;
|
|
14725
14725
|
|
|
14726
|
-
var Container$D = newStyled.div(templateObject_1$
|
|
14726
|
+
var Container$D = newStyled.div(templateObject_1$S || (templateObject_1$S = __makeTemplateObject(["\n ", "\n position: relative;\n max-height: 524px;\n overflow: hidden;\n & .slick-dots li.slick-active button:before {\n background-color: ", ";\n }\n"], ["\n ", "\n position: relative;\n max-height: 524px;\n overflow: hidden;\n & .slick-dots li.slick-active button:before {\n background-color: ", ";\n }\n"])), function (_a) {
|
|
14727
14727
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
14728
14728
|
return borderRadiusVariant &&
|
|
14729
14729
|
"\n border-radius: 40px;\n ";
|
|
@@ -14732,12 +14732,12 @@ var Container$D = newStyled.div(templateObject_1$R || (templateObject_1$R = __ma
|
|
|
14732
14732
|
return theme.component.slideNavigation.slideDots.selectedDotColor;
|
|
14733
14733
|
});
|
|
14734
14734
|
// max-height: 31.875rem;
|
|
14735
|
-
var TopTagContainer$3 = newStyled.div(templateObject_2$
|
|
14736
|
-
var BottomTagContainer$3 = newStyled.div(templateObject_3$
|
|
14737
|
-
var VideoOverlay$1 = newStyled.div(templateObject_4$
|
|
14738
|
-
var Video = newStyled.div(templateObject_5$
|
|
14739
|
-
var VideoTag = newStyled.div(templateObject_6$
|
|
14740
|
-
var Text$2 = newStyled.div(templateObject_7$
|
|
14735
|
+
var TopTagContainer$3 = newStyled.div(templateObject_2$H || (templateObject_2$H = __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'); });
|
|
14736
|
+
var BottomTagContainer$3 = newStyled.div(templateObject_3$A || (templateObject_3$A = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
14737
|
+
var VideoOverlay$1 = newStyled.div(templateObject_4$u || (templateObject_4$u = __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"])));
|
|
14738
|
+
var Video = newStyled.div(templateObject_5$n || (templateObject_5$n = __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"])));
|
|
14739
|
+
var VideoTag = newStyled.div(templateObject_6$l || (templateObject_6$l = __makeTemplateObject(["\n gap: 8px;\n position: absolute;\n width: 100%;\n bottom: 50px;\n display: flex;\n padding: 8.6px 0;\n font-weight: 600;\n align-items: center;\n background: #f7f7f7;\n justify-content: center;\n"], ["\n gap: 8px;\n position: absolute;\n width: 100%;\n bottom: 50px;\n display: flex;\n padding: 8.6px 0;\n font-weight: 600;\n align-items: center;\n background: #f7f7f7;\n justify-content: center;\n"])));
|
|
14740
|
+
var Text$2 = newStyled.div(templateObject_7$j || (templateObject_7$j = __makeTemplateObject(["\n padding-top: 3px;\n"], ["\n padding-top: 3px;\n"])));
|
|
14741
14741
|
var NavButtonContainer$1 = newStyled.div(templateObject_8$d || (templateObject_8$d = __makeTemplateObject(["\n height: 40px;\n width: 40px;\n"], ["\n height: 40px;\n width: 40px;\n"])));
|
|
14742
14742
|
var Button$2 = newStyled.button(templateObject_9$9 || (templateObject_9$9 = __makeTemplateObject(["\n background: transparent;\n border: none;\n padding: 0.188rem 0.625rem;\n z-index: 5;\n height: 40px !important;\n cursor: pointer;\n"], ["\n background: transparent;\n border: none;\n padding: 0.188rem 0.625rem;\n z-index: 5;\n height: 40px !important;\n cursor: pointer;\n"])));
|
|
14743
14743
|
var settings = {
|
|
@@ -14797,14 +14797,14 @@ var ImageProductSlideV3 = function (_a) {
|
|
|
14797
14797
|
} }, 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));
|
|
14798
14798
|
}) }), void 0) }), void 0)] }, void 0));
|
|
14799
14799
|
};
|
|
14800
|
-
var templateObject_1$
|
|
14800
|
+
var templateObject_1$S, templateObject_2$H, templateObject_3$A, templateObject_4$u, templateObject_5$n, templateObject_6$l, templateObject_7$j, templateObject_8$d, templateObject_9$9;
|
|
14801
14801
|
|
|
14802
|
-
var Container$C = newStyled.div(templateObject_1$
|
|
14802
|
+
var Container$C = newStyled.div(templateObject_1$R || (templateObject_1$R = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n height: fit-content;\n position: relative;\n max-width: 450px;\n"], ["\n display: flex;\n flex-direction: column;\n height: fit-content;\n position: relative;\n max-width: 450px;\n"])));
|
|
14803
14803
|
var ProductGalleryMobileV3 = function (_a) {
|
|
14804
14804
|
var images = _a.images, customClick = _a.customClick, topTag = _a.topTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, _b = _a.borderRadiusVariant, borderRadiusVariant = _b === void 0 ? false : _b, selectedValue = _a.selectedValue;
|
|
14805
14805
|
return (jsxRuntime.jsx(Container$C, __assign$1({ "data-testid": "product-gallery-mobile-v3" }, { children: jsxRuntime.jsx(ImageProductSlideV3, { images: images, customClick: customClick, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant, selectedValue: selectedValue }, void 0) }), void 0));
|
|
14806
14806
|
};
|
|
14807
|
-
var templateObject_1$
|
|
14807
|
+
var templateObject_1$R;
|
|
14808
14808
|
|
|
14809
14809
|
var __defProp$1 = Object.defineProperty;
|
|
14810
14810
|
var __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor;
|
|
@@ -14937,21 +14937,21 @@ var Portal = function (_a) {
|
|
|
14937
14937
|
var visibleStyle = function (_a) {
|
|
14938
14938
|
var opened = _a.opened;
|
|
14939
14939
|
return opened
|
|
14940
|
-
? css(templateObject_1$
|
|
14940
|
+
? css(templateObject_1$Q || (templateObject_1$Q = __makeTemplateObject(["\n opacity: 1;\n pointer-events: all;\n "], ["\n opacity: 1;\n pointer-events: all;\n "]))) : css(templateObject_2$G || (templateObject_2$G = __makeTemplateObject(["\n opacity: 0;\n pointer-events: none;\n "], ["\n opacity: 0;\n pointer-events: none;\n "])));
|
|
14941
14941
|
};
|
|
14942
14942
|
var transformStyle = function (_a) {
|
|
14943
14943
|
var opened = _a.opened, maxFullScreen = _a.maxFullScreen, initialTop = _a.initialTop;
|
|
14944
14944
|
return opened
|
|
14945
|
-
? css(templateObject_3$
|
|
14945
|
+
? css(templateObject_3$z || (templateObject_3$z = __makeTemplateObject(["\n transform: ", ";\n top: ", ";\n "], ["\n transform: ", ";\n top: ", ";\n "])), maxFullScreen ? 'translateY(0)' : 'translate(-50%, -50%)', maxFullScreen ? '0' : initialTop ? initialTop : '50%') : css(templateObject_4$t || (templateObject_4$t = __makeTemplateObject(["\n transform: ", ";\n top: ", ";\n "], ["\n transform: ", ";\n top: ", ";\n "])), maxFullScreen ? 'translateY(10%)' : 'translate(-50%, -40%)', maxFullScreen ? '0' : initialTop ? initialTop : '50%');
|
|
14946
14946
|
};
|
|
14947
|
-
var Container$B = newStyled.div(templateObject_6$
|
|
14947
|
+
var Container$B = newStyled.div(templateObject_6$k || (templateObject_6$k = __makeTemplateObject(["\n border: 1px solid var(--colors-pallete-primary-color);\n border-radius: ", ";\n padding: ", ";\n position: fixed;\n left: ", ";\n top: ", ";\n z-index: var(--zIndex-modal);\n background-color: var(--colors-background-color);\n transition: transform 0.3s, opacity 0.3s;\n overflow-y: auto;\n max-width: ", ";\n max-height: ", ";\n width: ", ";\n height: ", ";\n ", "\n ", "\n ", "\n"], ["\n border: 1px solid var(--colors-pallete-primary-color);\n border-radius: ", ";\n padding: ", ";\n position: fixed;\n left: ", ";\n top: ", ";\n z-index: var(--zIndex-modal);\n background-color: var(--colors-background-color);\n transition: transform 0.3s, opacity 0.3s;\n overflow-y: auto;\n max-width: ", ";\n max-height: ", ";\n width: ", ";\n height: ", ";\n ", "\n ", "\n ", "\n"])), function (props) { return "".concat(props.maxFullScreen ? '0' : 'var(--radius-regular)'); }, function (props) { return "".concat(props.padding ? props.padding : '20px 10px'); }, function (props) { return "".concat(props.maxFullScreen ? '0' : '50%'); }, function (props) { return (props.maxFullScreen ? '0' : props.initialTop ? props.initialTop : '50%'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : '90vw'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : '90vh'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : 'auto'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : 'inherit'); }, function (_a) {
|
|
14948
14948
|
var width = _a.width;
|
|
14949
14949
|
return width
|
|
14950
|
-
? css(templateObject_5$
|
|
14950
|
+
? css(templateObject_5$m || (templateObject_5$m = __makeTemplateObject(["\n width: ", ";\n "], ["\n width: ", ";\n "])), width) : mediaQueries({
|
|
14951
14951
|
minWidth: ['90%', 'var(--component-modal-minWidth)'],
|
|
14952
14952
|
});
|
|
14953
14953
|
}, visibleStyle, transformStyle);
|
|
14954
|
-
var Overlay = newStyled.div(templateObject_7$
|
|
14954
|
+
var Overlay = newStyled.div(templateObject_7$i || (templateObject_7$i = __makeTemplateObject(["\n position: fixed;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.75);\n z-index: var(--zIndex-overlay);\n transition: opacity 0.3s;\n ", "\n"], ["\n position: fixed;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.75);\n z-index: var(--zIndex-overlay);\n transition: opacity 0.3s;\n ", "\n"])), visibleStyle);
|
|
14955
14955
|
var Modal = function (_a) {
|
|
14956
14956
|
var id = _a.id, children = _a.children, _b = _a.dismissable, dismissable = _b === void 0 ? true : _b, _c = _a.maxFullScreen, maxFullScreen = _c === void 0 ? false : _c, padding = _a.padding, onClickOverlayHandler = _a.onClickOverlayHandler, width = _a.width, _d = _a.initialTop, initialTop = _d === void 0 ? '50%' : _d;
|
|
14957
14957
|
var _e = useModal(id), opened = _e.opened, close = _e.close;
|
|
@@ -14992,7 +14992,7 @@ var useModal = function (id) {
|
|
|
14992
14992
|
close: close,
|
|
14993
14993
|
}); }, [close, open, opened]);
|
|
14994
14994
|
};
|
|
14995
|
-
var templateObject_1$
|
|
14995
|
+
var templateObject_1$Q, templateObject_2$G, templateObject_3$z, templateObject_4$t, templateObject_5$m, templateObject_6$k, templateObject_7$i;
|
|
14996
14996
|
|
|
14997
14997
|
var htmlReactParser = {exports: {}};
|
|
14998
14998
|
|
|
@@ -18773,7 +18773,7 @@ HTMLReactParser$1.htmlToDOM;
|
|
|
18773
18773
|
HTMLReactParser$1.attributesToProps;
|
|
18774
18774
|
HTMLReactParser$1.Element;
|
|
18775
18775
|
|
|
18776
|
-
var Bar$1 = newStyled.div(templateObject_1$
|
|
18776
|
+
var Bar$1 = newStyled.div(templateObject_1$P || (templateObject_1$P = __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) {
|
|
18777
18777
|
var height = _a.height;
|
|
18778
18778
|
return height || '0.5rem';
|
|
18779
18779
|
}, function (_a) {
|
|
@@ -18825,7 +18825,7 @@ var Container$A = newStyled.div(function (_a) {
|
|
|
18825
18825
|
background: backgroundColor,
|
|
18826
18826
|
});
|
|
18827
18827
|
});
|
|
18828
|
-
var MessageContainer = newStyled.div(templateObject_2$
|
|
18828
|
+
var MessageContainer = newStyled.div(templateObject_2$F || (templateObject_2$F = __makeTemplateObject(["\n padding: 0 1rem;\n text-align: center;\n"], ["\n padding: 0 1rem;\n text-align: center;\n"])));
|
|
18829
18829
|
var getBarWithBasedOnPercent$1 = function (percent) {
|
|
18830
18830
|
return percent <= 100 && percent >= 0 ? "".concat(percent, "%") : '0%';
|
|
18831
18831
|
};
|
|
@@ -18856,19 +18856,19 @@ var MotivatorProgressBar = function (_a) {
|
|
|
18856
18856
|
};
|
|
18857
18857
|
return (jsxRuntime.jsxs(Container$A, __assign$1({ backgroundColor: backgroundColor }, { children: [jsxRuntime.jsxs(BarContainer, __assign$1({ "data-testid": "MPBContainer" }, { children: [jsxRuntime.jsxs(Value, { children: [currencyCode, currentAmount] }, void 0), jsxRuntime.jsx(Background$1, __assign$1({ backgroundColor: unfilledColor || theme.colors.shades['100'].color, "data-testid": "MPBBackground" }, { children: jsxRuntime.jsx(Bar$1, { "data-testid": "MPBBar", backgroundColor: fillColor, percent: progress }, void 0) }), void 0), jsxRuntime.jsxs(Value, __assign$1({ isBold: true }, { children: [currencyCode, endingValue] }), void 0)] }), void 0), isRewardUnlocked ? (jsxRuntime.jsx(MessageContainer, { dangerouslySetInnerHTML: { __html: rewardUnlockedMessage } }, void 0)) : (getRemainingAmountMessage())] }), void 0));
|
|
18858
18858
|
};
|
|
18859
|
-
var templateObject_1$
|
|
18859
|
+
var templateObject_1$P, templateObject_2$F;
|
|
18860
18860
|
|
|
18861
|
-
var Container$z = newStyled.div(templateObject_1$
|
|
18861
|
+
var Container$z = newStyled.div(templateObject_1$O || (templateObject_1$O = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: ", ";\n padding: 0.75rem 0;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: ", ";\n padding: 0.75rem 0;\n"])), function (_a) {
|
|
18862
18862
|
var theme = _a.theme;
|
|
18863
18863
|
return theme.component.orderBar.backgroundColor;
|
|
18864
18864
|
});
|
|
18865
|
-
var H1 = newStyled.h1(templateObject_2$
|
|
18865
|
+
var H1 = newStyled.h1(templateObject_2$E || (templateObject_2$E = __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; });
|
|
18866
18866
|
var OrderBar = function (_a) {
|
|
18867
18867
|
var message = _a.message, color = _a.color;
|
|
18868
18868
|
var theme = useTheme();
|
|
18869
18869
|
return (jsxRuntime.jsxs(Container$z, __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));
|
|
18870
18870
|
};
|
|
18871
|
-
var templateObject_1$
|
|
18871
|
+
var templateObject_1$O, templateObject_2$E;
|
|
18872
18872
|
|
|
18873
18873
|
var StyledButton$1 = newStyled(Ye.Button)(function (props) { return ({
|
|
18874
18874
|
background: props.bgColor,
|
|
@@ -18892,15 +18892,15 @@ var StyledPanel = newStyled(Ye.Panel)({
|
|
|
18892
18892
|
justifyContent: 'center',
|
|
18893
18893
|
gap: '10px',
|
|
18894
18894
|
});
|
|
18895
|
-
var StyledContent = newStyled.div(templateObject_1$
|
|
18895
|
+
var StyledContent = newStyled.div(templateObject_1$N || (templateObject_1$N = __makeTemplateObject(["\n appearance: none;\n padding: 0 0 15px 0;\n margin: auto;\n border: none;\n background: ", ";\n font-size: inherit;\n line-height: inherit;\n color: inherit;\n cursor: auto;\n user-select: text;\n writing-mode: unset;\n font-family: inherit;\n display: flex;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: fit-content;\n"], ["\n appearance: none;\n padding: 0 0 15px 0;\n margin: auto;\n border: none;\n background: ", ";\n font-size: inherit;\n line-height: inherit;\n color: inherit;\n cursor: auto;\n user-select: text;\n writing-mode: unset;\n font-family: inherit;\n display: flex;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: fit-content;\n"])), function (_a) {
|
|
18896
18896
|
var bgColor = _a.bgColor;
|
|
18897
18897
|
return bgColor !== null && bgColor !== void 0 ? bgColor : '';
|
|
18898
18898
|
}, function (_a) {
|
|
18899
18899
|
var _b = _a.width, width = _b === void 0 ? '100%' : _b;
|
|
18900
18900
|
return width;
|
|
18901
18901
|
});
|
|
18902
|
-
var StyledController = newStyled.div(templateObject_2$
|
|
18903
|
-
var templateObject_1$
|
|
18902
|
+
var StyledController = newStyled.div(templateObject_2$D || (templateObject_2$D = __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"])));
|
|
18903
|
+
var templateObject_1$N, templateObject_2$D;
|
|
18904
18904
|
|
|
18905
18905
|
var StyledDisclosure = newStyled(Ye)(function (_a) {
|
|
18906
18906
|
var background = _a.background, width = _a.width;
|
|
@@ -18941,13 +18941,13 @@ var BasicAccordion = function (_a) {
|
|
|
18941
18941
|
} }), void 0));
|
|
18942
18942
|
};
|
|
18943
18943
|
|
|
18944
|
-
var TableElement$3 = newStyled.table(templateObject_1$
|
|
18945
|
-
var TableCell$3 = newStyled.td(templateObject_2$
|
|
18946
|
-
var TableHead$3 = newStyled.th(templateObject_3$
|
|
18947
|
-
var Label$3 = newStyled('div')(templateObject_4$
|
|
18948
|
-
newStyled(Label$3)(templateObject_5$
|
|
18949
|
-
newStyled(Label$3)(templateObject_6$
|
|
18950
|
-
var Container$y = newStyled('div')(templateObject_7$
|
|
18944
|
+
var TableElement$3 = newStyled.table(templateObject_1$M || (templateObject_1$M = __makeTemplateObject(["\n box-sizing: border-box;\n border-radius: ", ";\n border-bottom-left-radius: ", ";\n border-bottom-right-radius: ", ";\n border: 0.063rem solid var(--colors-shades-100-color);\n border-spacing: 0;\n font-size: 0.875rem;\n line-height: 3.125rem;\n width: 100%;\n color: var(--colors-shades-700-color);\n"], ["\n box-sizing: border-box;\n border-radius: ", ";\n border-bottom-left-radius: ", ";\n border-bottom-right-radius: ", ";\n border: 0.063rem solid var(--colors-shades-100-color);\n border-spacing: 0;\n font-size: 0.875rem;\n line-height: 3.125rem;\n width: 100%;\n color: var(--colors-shades-700-color);\n"])), function (props) { return (props.isSticky ? '0' : '0.5rem'); }, function (props) { return (props.isSticky ? '0.5rem' : '0'); }, function (props) { return (props.isSticky ? '0.5rem' : '0'); });
|
|
18945
|
+
var TableCell$3 = newStyled.td(templateObject_2$C || (templateObject_2$C = __makeTemplateObject(["\n border-bottom: 0.063rem solid var(--colors-shades-100-color);\n border-right: 0.063rem solid var(--colors-shades-100-color);\n line-height: normal;\n padding: 1rem 0;\n text-align: center;\n position: ", ";\n left: 0;\n z-index: ", ";\n border-bottom-left-radius: ", ";\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n font-weight: 600;\n text-align: center;\n }\n"], ["\n border-bottom: 0.063rem solid var(--colors-shades-100-color);\n border-right: 0.063rem solid var(--colors-shades-100-color);\n line-height: normal;\n padding: 1rem 0;\n text-align: center;\n position: ", ";\n left: 0;\n z-index: ", ";\n border-bottom-left-radius: ", ";\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n font-weight: 600;\n text-align: center;\n }\n"])), function (props) { return (props.isSticky ? 'sticky' : 'unset'); }, function (props) { return (props.isSticky ? 1 : 0); }, function (props) { return (props.isLast ? '0.5rem' : '0'); });
|
|
18946
|
+
var TableHead$3 = newStyled.th(templateObject_3$y || (templateObject_3$y = __makeTemplateObject(["\n border-bottom: 0.063rem solid var(--colors-shades-100-color);\n border-right: 0.063rem solid var(--colors-shades-100-color);\n font-weight: 600;\n line-height: normal;\n padding: 1rem;\n text-align: start;\n position: ", ";\n left: 0;\n z-index: ", ";\n background-color: ", ";\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n text-align: center;\n }\n"], ["\n border-bottom: 0.063rem solid var(--colors-shades-100-color);\n border-right: 0.063rem solid var(--colors-shades-100-color);\n font-weight: 600;\n line-height: normal;\n padding: 1rem;\n text-align: start;\n position: ", ";\n left: 0;\n z-index: ", ";\n background-color: ", ";\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n text-align: center;\n }\n"])), function (props) { return (props.isSticky ? 'sticky' : 'unset'); }, function (props) { return (props.isSticky ? 1 : 0); }, function (props) { return (props.isSticky ? '#fff6ef' : 'unset'); });
|
|
18947
|
+
var Label$3 = newStyled('div')(templateObject_4$s || (templateObject_4$s = __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"])));
|
|
18948
|
+
newStyled(Label$3)(templateObject_5$l || (templateObject_5$l = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
18949
|
+
newStyled(Label$3)(templateObject_6$j || (templateObject_6$j = __makeTemplateObject(["\n width: 20px;\n transform: rotate(270deg);\n"], ["\n width: 20px;\n transform: rotate(270deg);\n"])));
|
|
18950
|
+
var Container$y = newStyled('div')(templateObject_7$h || (templateObject_7$h = __makeTemplateObject(["\n gap: 5px;\n display: flex;\n width: fit-content;\n align-items: center;\n"], ["\n gap: 5px;\n display: flex;\n width: fit-content;\n align-items: center;\n"])));
|
|
18951
18951
|
newStyled('span')(templateObject_8$c || (templateObject_8$c = __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"])));
|
|
18952
18952
|
var Column$2 = newStyled('div')(templateObject_9$8 || (templateObject_9$8 = __makeTemplateObject(["\n display: flex;\n min-width: 675px;\n align-items: flex-start;\n flex-direction: column;\n\n @media (max-width: 768px) {\n min-width: 100%;\n }\n"], ["\n display: flex;\n min-width: 675px;\n align-items: flex-start;\n flex-direction: column;\n\n @media (max-width: 768px) {\n min-width: 100%;\n }\n"])));
|
|
18953
18953
|
var TableRow$3 = newStyled.tr(templateObject_10$8 || (templateObject_10$8 = __makeTemplateObject(["\n &:last-child {\n td {\n border-bottom: none;\n }\n }\n\n &.background {\n background-color: var(--colors-shades-10-color);\n }\n"], ["\n &:last-child {\n td {\n border-bottom: none;\n }\n }\n\n &.background {\n background-color: var(--colors-shades-10-color);\n }\n"])));
|
|
@@ -18957,7 +18957,7 @@ var Arrow = newStyled('div')(templateObject_13$2 || (templateObject_13$2 = __mak
|
|
|
18957
18957
|
var TableHeader = newStyled('thead')(templateObject_14$2 || (templateObject_14$2 = __makeTemplateObject(["\n background-color: ", ";\n"], ["\n background-color: ", ";\n"])), function (props) {
|
|
18958
18958
|
return props.isColored ? 'var(--colors-pallete-primary-80-color)' : 'unset';
|
|
18959
18959
|
});
|
|
18960
|
-
var templateObject_1$
|
|
18960
|
+
var templateObject_1$M, templateObject_2$C, templateObject_3$y, templateObject_4$s, templateObject_5$l, templateObject_6$j, templateObject_7$h, templateObject_8$c, templateObject_9$8, templateObject_10$8, templateObject_11$5, templateObject_12$2, templateObject_13$2, templateObject_14$2;
|
|
18961
18961
|
|
|
18962
18962
|
var getIsOdd$2 = function (number) { return number % 2 !== 0; };
|
|
18963
18963
|
// TODO: Refactor this color logic
|
|
@@ -19032,13 +19032,13 @@ var ArrowTip = function (_a) {
|
|
|
19032
19032
|
};
|
|
19033
19033
|
var trimLabel = function (label) { var _a, _b; return (_b = (_a = label === null || label === void 0 ? void 0 : label.trim()) === null || _a === void 0 ? void 0 : _a.split(' ')) === null || _b === void 0 ? void 0 : _b[0]; };
|
|
19034
19034
|
|
|
19035
|
-
var Container$x = newStyled.div(templateObject_1$
|
|
19036
|
-
var Card$1 = newStyled.div(templateObject_2$
|
|
19037
|
-
var Tag$1 = newStyled.div(templateObject_3$
|
|
19038
|
-
var Label$2 = newStyled.div(templateObject_4$
|
|
19039
|
-
var Check = newStyled.div(templateObject_5$
|
|
19040
|
-
var IconContainer$1 = newStyled.div(templateObject_6$
|
|
19041
|
-
var IconPlaceholder = newStyled.div(templateObject_7$
|
|
19035
|
+
var Container$x = newStyled.div(templateObject_1$L || (templateObject_1$L = __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"])));
|
|
19036
|
+
var Card$1 = newStyled.div(templateObject_2$B || (templateObject_2$B = __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"])));
|
|
19037
|
+
var Tag$1 = newStyled.div(templateObject_3$x || (templateObject_3$x = __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"])));
|
|
19038
|
+
var Label$2 = newStyled.div(templateObject_4$r || (templateObject_4$r = __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"])));
|
|
19039
|
+
var Check = newStyled.div(templateObject_5$k || (templateObject_5$k = __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"])));
|
|
19040
|
+
var IconContainer$1 = newStyled.div(templateObject_6$i || (templateObject_6$i = __makeTemplateObject(["\n height: 56px;\n display: flex;\n align-items: center;\n justify-content: center;\n\n [aria-checked='true'] & * {\n fill: var(--color);\n }\n"], ["\n height: 56px;\n display: flex;\n align-items: center;\n justify-content: center;\n\n [aria-checked='true'] & * {\n fill: var(--color);\n }\n"])));
|
|
19041
|
+
var IconPlaceholder = newStyled.div(templateObject_7$g || (templateObject_7$g = __makeTemplateObject(["\n height: 100%;\n width: 100%;\n background-color: var(--colors-shades-100-color);\n"], ["\n height: 100%;\n width: 100%;\n background-color: var(--colors-shades-100-color);\n"])));
|
|
19042
19042
|
var DiscountContainer = newStyled.div(templateObject_8$b || (templateObject_8$b = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n"], ["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n"])));
|
|
19043
19043
|
var PackSelector = function (_a) {
|
|
19044
19044
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange, currencyCode = _a.currencyCode;
|
|
@@ -19069,14 +19069,14 @@ var PackCard = function (_a) {
|
|
|
19069
19069
|
currency: currencyCode || 'USD',
|
|
19070
19070
|
}), ' ', "each"] }), void 0)] }), void 0));
|
|
19071
19071
|
};
|
|
19072
|
-
var templateObject_1$
|
|
19072
|
+
var templateObject_1$L, templateObject_2$B, templateObject_3$x, templateObject_4$r, templateObject_5$k, templateObject_6$i, templateObject_7$g, templateObject_8$b;
|
|
19073
19073
|
|
|
19074
|
-
var Container$w = newStyled.div(templateObject_1$
|
|
19075
|
-
var IconContainer = newStyled.div(templateObject_2$
|
|
19076
|
-
var PageNumbersContainer = newStyled.div(templateObject_3$
|
|
19074
|
+
var Container$w = newStyled.div(templateObject_1$K || (templateObject_1$K = __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"])));
|
|
19075
|
+
var IconContainer = newStyled.div(templateObject_2$A || (templateObject_2$A = __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"])));
|
|
19076
|
+
var PageNumbersContainer = newStyled.div(templateObject_3$w || (templateObject_3$w = __makeTemplateObject(["\n display: flex;\n ", ";\n"], ["\n display: flex;\n ", ";\n"])), mediaQueries({
|
|
19077
19077
|
margin: ['0 0.75rem', '0 1.25rem'],
|
|
19078
19078
|
}));
|
|
19079
|
-
var PageNumber = newStyled.span(templateObject_4$
|
|
19079
|
+
var PageNumber = newStyled.span(templateObject_4$q || (templateObject_4$q = __makeTemplateObject(["\n font-weight: ", ";\n color: ", ";\n text-align: center;\n cursor: pointer;\n margin: 0 2px;\n border-bottom: ", ";\n ", ";\n background: ", ";\n"], ["\n font-weight: ", ";\n color: ", ";\n text-align: center;\n cursor: pointer;\n margin: 0 2px;\n border-bottom: ", ";\n ", ";\n background: ", ";\n"])), function (_a) {
|
|
19080
19080
|
var bold = _a.bold;
|
|
19081
19081
|
return (bold ? '700' : '500');
|
|
19082
19082
|
}, function (_a) {
|
|
@@ -19093,7 +19093,7 @@ var PageNumber = newStyled.span(templateObject_4$p || (templateObject_4$p = __ma
|
|
|
19093
19093
|
var background = _a.background;
|
|
19094
19094
|
return background || 'unset';
|
|
19095
19095
|
});
|
|
19096
|
-
var templateObject_1$
|
|
19096
|
+
var templateObject_1$K, templateObject_2$A, templateObject_3$w, templateObject_4$q;
|
|
19097
19097
|
|
|
19098
19098
|
var Pagination = function (_a) {
|
|
19099
19099
|
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;
|
|
@@ -19158,7 +19158,7 @@ var PaginatorBlog = function (_a) {
|
|
|
19158
19158
|
: theme.colors.shades['700'].color, borderColor: theme.colors.shades['700'].color, theme: theme, bold: false, underline: false }, { children: i + from }), i)); }) }), void 0), jsxRuntime.jsx(IconContainer, __assign$1({ onClick: function () { return handlePageChange(page + 1); }, "data-testid": "PaginatorBlogRightChevron" }, { children: jsxRuntime.jsx(Icon.Arrows.ChevronRight, { fill: page === to ? theme.colors.shades['white'].color : theme.colors.shades['700'].color }, void 0) }), void 0)] }), void 0));
|
|
19159
19159
|
};
|
|
19160
19160
|
|
|
19161
|
-
var Container$v = newStyled.div(templateObject_1$
|
|
19161
|
+
var Container$v = newStyled.div(templateObject_1$J || (templateObject_1$J = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n border: 0.063rem solid ", ";\n border-radius: 0.25rem;\n padding: 0.375rem;\n cursor: ", ";\n"], ["\n width: ", ";\n height: ", ";\n border: 0.063rem solid ", ";\n border-radius: 0.25rem;\n padding: 0.375rem;\n cursor: ", ";\n"])), function (_a) {
|
|
19162
19162
|
var width = _a.width;
|
|
19163
19163
|
return width;
|
|
19164
19164
|
}, function (_a) {
|
|
@@ -19176,12 +19176,12 @@ var PaymentMethod = function (_a) {
|
|
|
19176
19176
|
var theme = useTheme();
|
|
19177
19177
|
return (jsxRuntime.jsx(Container$v, __assign$1({ width: width, height: height, borderColor: theme.colors.shades['100'].color, isClickable: Boolean(onClick), onClick: onClick, "data-testid": "payment-method-container" }, { children: React$2.createElement(Icon) }), void 0));
|
|
19178
19178
|
};
|
|
19179
|
-
var templateObject_1$
|
|
19179
|
+
var templateObject_1$J;
|
|
19180
19180
|
|
|
19181
|
-
var Container$u = newStyled.div(templateObject_1$
|
|
19181
|
+
var Container$u = newStyled.div(templateObject_1$I || (templateObject_1$I = __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"])));
|
|
19182
19182
|
var IMAGE_WIDTH = '63px';
|
|
19183
|
-
var ImageContainer$3 = newStyled.div(templateObject_2$
|
|
19184
|
-
var DescriptionContainer$1 = newStyled.div(templateObject_3$
|
|
19183
|
+
var ImageContainer$3 = newStyled.div(templateObject_2$z || (templateObject_2$z = __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);
|
|
19184
|
+
var DescriptionContainer$1 = newStyled.div(templateObject_3$v || (templateObject_3$v = __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({
|
|
19185
19185
|
paddingLeft: ['0.938rem', '1.875rem'],
|
|
19186
19186
|
}), IMAGE_WIDTH);
|
|
19187
19187
|
var Title$3 = newStyled.h2(function (_a) {
|
|
@@ -19204,7 +19204,7 @@ var Subtitle = newStyled.h3(function (_a) {
|
|
|
19204
19204
|
margin: margin,
|
|
19205
19205
|
});
|
|
19206
19206
|
});
|
|
19207
|
-
var PriceContainer = newStyled.div(templateObject_4$
|
|
19207
|
+
var PriceContainer = newStyled.div(templateObject_4$p || (templateObject_4$p = __makeTemplateObject(["\n display: flex;\n ", ";\n height: 100%;\n align-items: end;\n margin-top: 0.219rem;\n"], ["\n display: flex;\n ", ";\n height: 100%;\n align-items: end;\n margin-top: 0.219rem;\n"])), function (_a) {
|
|
19208
19208
|
var withTag = _a.withTag; _a.theme;
|
|
19209
19209
|
return withTag
|
|
19210
19210
|
? mediaQueries({
|
|
@@ -19213,15 +19213,15 @@ var PriceContainer = newStyled.div(templateObject_4$o || (templateObject_4$o = _
|
|
|
19213
19213
|
})
|
|
19214
19214
|
: 'justify-content: end';
|
|
19215
19215
|
});
|
|
19216
|
-
var Quantity = newStyled.div(templateObject_5$
|
|
19217
|
-
var StyledSpan = newStyled.span(templateObject_6$
|
|
19216
|
+
var Quantity = newStyled.div(templateObject_5$j || (templateObject_5$j = __makeTemplateObject(["\n position: absolute;\n right: 0;\n top: 0;\n transform: translate(30%, -30%);\n border-radius: 50%;\n width: 1rem;\n height: 1rem;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: var(--colors-shades-300-color);\n color: var(--colors-shades-white-color);\n font-size: 0.75rem;\n font-weight: 600;\n line-height: 24px;\n"], ["\n position: absolute;\n right: 0;\n top: 0;\n transform: translate(30%, -30%);\n border-radius: 50%;\n width: 1rem;\n height: 1rem;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: var(--colors-shades-300-color);\n color: var(--colors-shades-white-color);\n font-size: 0.75rem;\n font-weight: 600;\n line-height: 24px;\n"])));
|
|
19217
|
+
var StyledSpan = newStyled.span(templateObject_6$h || (templateObject_6$h = __makeTemplateObject(["\n display: block;\n transform: translateY(1px);\n"], ["\n display: block;\n transform: translateY(1px);\n"])));
|
|
19218
19218
|
var SimpleOrderItem = function (_a) {
|
|
19219
19219
|
var _b, _c, _d, _e, _f, _g, _h, _j;
|
|
19220
19220
|
var title = _a.title, className = _a.className, subtitle = _a.subtitle, midElement = _a.midElement, image = _a.image, price = _a.price, tag = _a.tag, quantity = _a.quantity, finalPriceStyle = _a.finalPriceStyle;
|
|
19221
19221
|
var theme = useTheme();
|
|
19222
19222
|
return (jsxRuntime.jsxs(Container$u, __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));
|
|
19223
19223
|
};
|
|
19224
|
-
var templateObject_1$
|
|
19224
|
+
var templateObject_1$I, templateObject_2$z, templateObject_3$v, templateObject_4$p, templateObject_5$j, templateObject_6$h;
|
|
19225
19225
|
|
|
19226
19226
|
var P$1 = newStyled.p(function (_a) {
|
|
19227
19227
|
var color = _a.color;
|
|
@@ -19235,7 +19235,7 @@ var P$1 = newStyled.p(function (_a) {
|
|
|
19235
19235
|
margin: '0.938rem 4.188rem',
|
|
19236
19236
|
});
|
|
19237
19237
|
});
|
|
19238
|
-
var Bar = newStyled.div(templateObject_1$
|
|
19238
|
+
var Bar = newStyled.div(templateObject_1$H || (templateObject_1$H = __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 position: absolute;\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 position: absolute;\n left: ", ";\n animation: ", ";\n"])), function (_a) {
|
|
19239
19239
|
var height = _a.height;
|
|
19240
19240
|
return height || '0.5rem';
|
|
19241
19241
|
}, function (_a) {
|
|
@@ -19280,12 +19280,12 @@ var ProgressBar = function (_a) {
|
|
|
19280
19280
|
var theme = useTheme();
|
|
19281
19281
|
return (jsxRuntime.jsxs(Container$t, __assign$1({ "data-testid": "PBContainer", widthAuto: widthAuto, description: description }, { children: [jsxRuntime.jsx(Background, __assign$1({ backgroundColor: backgroundColor || theme.colors.shades['100'].color, height: height, borderRadius: borderRadius, "data-testid": "PBBackground" }, { children: jsxRuntime.jsx(Bar, { "data-testid": "PBBar", backgroundColor: fillColor, percent: percent, height: height, borderRadius: borderRadius }, void 0) }), void 0), description && (jsxRuntime.jsx(P$1, __assign$1({ "data-testid": "paragraph", color: theme.colors.pallete.secondary.color }, { children: description }), void 0))] }), void 0));
|
|
19282
19282
|
};
|
|
19283
|
-
var templateObject_1$
|
|
19283
|
+
var templateObject_1$H;
|
|
19284
19284
|
|
|
19285
|
-
var Container$s = newStyled.div(templateObject_1$
|
|
19286
|
-
var Item$1 = newStyled.span(templateObject_2$
|
|
19287
|
-
var Number$1 = newStyled(Item$1)(templateObject_3$
|
|
19288
|
-
var IncreaseDecrease = newStyled(Item$1)(templateObject_4$
|
|
19285
|
+
var Container$s = newStyled.div(templateObject_1$G || (templateObject_1$G = __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; });
|
|
19286
|
+
var Item$1 = newStyled.span(templateObject_2$y || (templateObject_2$y = __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"])));
|
|
19287
|
+
var Number$1 = newStyled(Item$1)(templateObject_3$u || (templateObject_3$u = __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"])));
|
|
19288
|
+
var IncreaseDecrease = newStyled(Item$1)(templateObject_4$o || (templateObject_4$o = __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)'; });
|
|
19289
19289
|
var QuantityPicker = function (_a) {
|
|
19290
19290
|
var _b = _a.initialValue, initialValue = _b === void 0 ? 0 : _b, _c = _a.maxValue, maxValue = _c === void 0 ? 99 : _c, value = _a.value, _d = _a.testId, testId = _d === void 0 ? 'quantity-picker' : _d, onChange = _a.onChange;
|
|
19291
19291
|
var theme = useTheme();
|
|
@@ -19310,7 +19310,7 @@ var QuantityPicker = function (_a) {
|
|
|
19310
19310
|
}, [value, clamp]);
|
|
19311
19311
|
return (jsxRuntime.jsxs(Container$s, __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));
|
|
19312
19312
|
};
|
|
19313
|
-
var templateObject_1$
|
|
19313
|
+
var templateObject_1$G, templateObject_2$y, templateObject_3$u, templateObject_4$o;
|
|
19314
19314
|
|
|
19315
19315
|
/* base styles & size variants */
|
|
19316
19316
|
var CustomRadioStyles$1 = {
|
|
@@ -19379,9 +19379,9 @@ var ContainerStyles$1 = {
|
|
|
19379
19379
|
},
|
|
19380
19380
|
};
|
|
19381
19381
|
|
|
19382
|
-
var Wrapper$3 = newStyled.div(templateObject_1$
|
|
19382
|
+
var Wrapper$3 = newStyled.div(templateObject_1$F || (templateObject_1$F = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
19383
19383
|
var Container$r = newStyled.div(__assign$1({}, ContainerStyles$1.baseStyles), function (props) { return [ContainerStyles$1[props.size](props.theme)]; });
|
|
19384
|
-
var Input$2 = newStyled.input(templateObject_2$
|
|
19384
|
+
var Input$2 = newStyled.input(templateObject_2$x || (templateObject_2$x = __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) {
|
|
19385
19385
|
var disabled = _a.disabled;
|
|
19386
19386
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
19387
19387
|
});
|
|
@@ -19389,7 +19389,7 @@ var CustomRadio$1 = newStyled.div(function (props) { return [
|
|
|
19389
19389
|
CustomRadioStyles$1.baseStyles(props.theme, props.disabled, props.isChecked),
|
|
19390
19390
|
CustomRadioStyles$1[props.size](props.theme, props.isChecked),
|
|
19391
19391
|
]; });
|
|
19392
|
-
var StyledLabel$1 = newStyled(Label$6)(templateObject_3$
|
|
19392
|
+
var StyledLabel$1 = newStyled(Label$6)(templateObject_3$t || (templateObject_3$t = __makeTemplateObject(["\n font-size: 14px;\n font-weight: 400;\n line-height: 22px;\n"], ["\n font-size: 14px;\n font-weight: 400;\n line-height: 22px;\n"])));
|
|
19393
19393
|
var RadioPrimary = function (_a) {
|
|
19394
19394
|
var style = _a.style, name = _a.name, value = _a.value, id = _a.id, label = _a.label, _b = _a.checked, checked = _b === void 0 ? false : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, onChange = _a.onChange, _d = _a.size, size = _d === void 0 ? exports.ComponentSize.Medium : _d;
|
|
19395
19395
|
var theme = useTheme();
|
|
@@ -19399,7 +19399,7 @@ var RadioPrimary = function (_a) {
|
|
|
19399
19399
|
};
|
|
19400
19400
|
return (jsxRuntime.jsxs(Wrapper$3, { children: [jsxRuntime.jsxs(Container$r, __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));
|
|
19401
19401
|
};
|
|
19402
|
-
var templateObject_1$
|
|
19402
|
+
var templateObject_1$F, templateObject_2$x, templateObject_3$t;
|
|
19403
19403
|
|
|
19404
19404
|
var RadioGroupInput = function (_a) {
|
|
19405
19405
|
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;
|
|
@@ -19478,9 +19478,9 @@ var ContainerStyles = {
|
|
|
19478
19478
|
},
|
|
19479
19479
|
};
|
|
19480
19480
|
|
|
19481
|
-
var Wrapper$2 = newStyled.div(templateObject_1$
|
|
19481
|
+
var Wrapper$2 = newStyled.div(templateObject_1$E || (templateObject_1$E = __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"])));
|
|
19482
19482
|
var Container$q = newStyled.div(__assign$1({}, ContainerStyles.baseStyles), function (props) { return [ContainerStyles[props.size](props.theme)]; });
|
|
19483
|
-
var Input$1 = newStyled.input(templateObject_2$
|
|
19483
|
+
var Input$1 = newStyled.input(templateObject_2$w || (templateObject_2$w = __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) {
|
|
19484
19484
|
var disabled = _a.disabled;
|
|
19485
19485
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
19486
19486
|
});
|
|
@@ -19488,7 +19488,7 @@ var CustomRadio = newStyled.div(function (props) { return [
|
|
|
19488
19488
|
CustomRadioStyles.baseStyles(props.theme, props.disabled, props.isChecked),
|
|
19489
19489
|
CustomRadioStyles[props.size](props.theme, props.isChecked),
|
|
19490
19490
|
]; });
|
|
19491
|
-
var StyledLabel = newStyled(Label$6)(templateObject_3$
|
|
19491
|
+
var StyledLabel = newStyled(Label$6)(templateObject_3$s || (templateObject_3$s = __makeTemplateObject(["\n font-size: ", ";\n line-height: ", " !important;\n"], ["\n font-size: ", ";\n line-height: ", " !important;\n"])), function (_a) {
|
|
19492
19492
|
var theme = _a.theme;
|
|
19493
19493
|
return theme.component.radio.textSize;
|
|
19494
19494
|
}, function (_a) {
|
|
@@ -19504,7 +19504,7 @@ var ClubRadioInput = function (_a) {
|
|
|
19504
19504
|
};
|
|
19505
19505
|
return (jsxRuntime.jsxs(Wrapper$2, { children: [jsxRuntime.jsxs(Container$q, __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));
|
|
19506
19506
|
};
|
|
19507
|
-
var templateObject_1$
|
|
19507
|
+
var templateObject_1$E, templateObject_2$w, templateObject_3$s;
|
|
19508
19508
|
|
|
19509
19509
|
var ClubRadioGroupInput = function (_a) {
|
|
19510
19510
|
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;
|
|
@@ -19532,13 +19532,13 @@ function formatDate(date, format) {
|
|
|
19532
19532
|
}
|
|
19533
19533
|
}
|
|
19534
19534
|
|
|
19535
|
-
var Container$p = newStyled.div(templateObject_1$
|
|
19536
|
-
var Content$1 = newStyled.div(templateObject_2$
|
|
19537
|
-
var StarsContent = newStyled.div(templateObject_3$
|
|
19538
|
-
var ReviewContainer$1 = newStyled.div(templateObject_4$
|
|
19539
|
-
var DateText$1 = newStyled.span(templateObject_5$
|
|
19540
|
-
var ReviewerName$1 = newStyled.h1(templateObject_6$
|
|
19541
|
-
var VerifiedText = newStyled.h1(templateObject_7$
|
|
19535
|
+
var Container$p = newStyled.div(templateObject_1$D || (templateObject_1$D = __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"])));
|
|
19536
|
+
var Content$1 = newStyled.div(templateObject_2$v || (templateObject_2$v = __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"])));
|
|
19537
|
+
var StarsContent = newStyled.div(templateObject_3$r || (templateObject_3$r = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n"], ["\n display: flex;\n justify-content: space-between;\n"])));
|
|
19538
|
+
var ReviewContainer$1 = newStyled.div(templateObject_4$n || (templateObject_4$n = __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"])));
|
|
19539
|
+
var DateText$1 = newStyled.span(templateObject_5$i || (templateObject_5$i = __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"])));
|
|
19540
|
+
var ReviewerName$1 = newStyled.h1(templateObject_6$g || (templateObject_6$g = __makeTemplateObject(["\n font-weight: 600;\n margin: 0;\n font-size: 18px;\n padding: 20px;\n display: flex;\n"], ["\n font-weight: 600;\n margin: 0;\n font-size: 18px;\n padding: 20px;\n display: flex;\n"])));
|
|
19541
|
+
var VerifiedText = newStyled.h1(templateObject_7$f || (templateObject_7$f = __makeTemplateObject(["\n font-weight: 600;\n margin: 0;\n font-size: 18px;\n color: #1cc286;\n margin-left: 6px;\n\n @media (min-width: 768px) {\n font-size: 18px;\n }\n"], ["\n font-weight: 600;\n margin: 0;\n font-size: 18px;\n color: #1cc286;\n margin-left: 6px;\n\n @media (min-width: 768px) {\n font-size: 18px;\n }\n"])));
|
|
19542
19542
|
var ReviewTitle$1 = newStyled.h2(templateObject_8$a || (templateObject_8$a = __makeTemplateObject(["\n font-size: 18px;\n line-height: 20px;\n font-weight: 600;\n margin: 0;\n"], ["\n font-size: 18px;\n line-height: 20px;\n font-weight: 600;\n margin: 0;\n"])));
|
|
19543
19543
|
var ReviewDescription = newStyled.div(templateObject_9$7 || (templateObject_9$7 = __makeTemplateObject(["\n font-weight: normal;\n font-size: 16px;\n margin: 0;\n line-height: 25px;\n word-break: break-word;\n margin-top: 5px;\n white-space: pre-wrap;\n"], ["\n font-weight: normal;\n font-size: 16px;\n margin: 0;\n line-height: 25px;\n word-break: break-word;\n margin-top: 5px;\n white-space: pre-wrap;\n"])));
|
|
19544
19544
|
var ImageContainer$2 = newStyled.div(templateObject_10$7 || (templateObject_10$7 = __makeTemplateObject(["\n width: 100% !important;\n min-width: 100%;\n height: initial !important;\n min-height: 250px;\n background-size: contain !important;\n margin: 0 !important;\n line-height: 0;\n\n @media (min-width: 768px) {\n width: unset;\n min-width: 50%;\n max-width: 100%;\n background-color: #fff;\n display: inline-block;\n vertical-align: middle;\n max-height: calc(100vh - 100px);\n padding: 20px;\n }\n"], ["\n width: 100% !important;\n min-width: 100%;\n height: initial !important;\n min-height: 250px;\n background-size: contain !important;\n margin: 0 !important;\n line-height: 0;\n\n @media (min-width: 768px) {\n width: unset;\n min-width: 50%;\n max-width: 100%;\n background-color: #fff;\n display: inline-block;\n vertical-align: middle;\n max-height: calc(100vh - 100px);\n padding: 20px;\n }\n"])));
|
|
@@ -19573,17 +19573,17 @@ var Review$1 = function (_a) {
|
|
|
19573
19573
|
return (jsxRuntime.jsx(Modal, __assign$1({ id: modalId, maxFullScreen: maxFullScreen, padding: "0" }, { children: jsxRuntime.jsxs(Container$p, { children: [jsxRuntime.jsx(CloseButton, __assign$1({ onClick: close }, { children: "X" }), void 0), jsxRuntime.jsx(ImageContainer$2, { children: image &&
|
|
19574
19574
|
(!isVideo ? (jsxRuntime.jsx(ImageWrapper$3, { 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));
|
|
19575
19575
|
};
|
|
19576
|
-
var templateObject_1$
|
|
19576
|
+
var templateObject_1$D, templateObject_2$v, templateObject_3$r, templateObject_4$n, templateObject_5$i, templateObject_6$g, templateObject_7$f, templateObject_8$a, templateObject_9$7, templateObject_10$7, 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;
|
|
19577
19577
|
|
|
19578
19578
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_DESKTOP = 500;
|
|
19579
19579
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_MOBILE = 168;
|
|
19580
|
-
var Container$o = newStyled.div(templateObject_1$
|
|
19581
|
-
var Heading = newStyled.div(templateObject_2$
|
|
19582
|
-
var Content = newStyled.div(templateObject_3$
|
|
19583
|
-
var ReviewContainer = newStyled.div(templateObject_4$
|
|
19584
|
-
var DateText = newStyled.span(templateObject_5$
|
|
19585
|
-
var VariantText = newStyled.div(templateObject_6$
|
|
19586
|
-
var ReviewerName = newStyled.h2(templateObject_7$
|
|
19580
|
+
var Container$o = newStyled.div(templateObject_1$C || (templateObject_1$C = __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"])));
|
|
19581
|
+
var Heading = newStyled.div(templateObject_2$u || (templateObject_2$u = __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"])));
|
|
19582
|
+
var Content = newStyled.div(templateObject_3$q || (templateObject_3$q = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n"], ["\n display: flex;\n justify-content: space-between;\n"])));
|
|
19583
|
+
var ReviewContainer = newStyled.div(templateObject_4$m || (templateObject_4$m = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
19584
|
+
var DateText = newStyled.span(templateObject_5$h || (templateObject_5$h = __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"])));
|
|
19585
|
+
var VariantText = newStyled.div(templateObject_6$f || (templateObject_6$f = __makeTemplateObject(["\n font-weight: 400;\n font-size: 14px;\n line-height: 22px;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"], ["\n font-weight: 400;\n font-size: 14px;\n line-height: 22px;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"])));
|
|
19586
|
+
var ReviewerName = newStyled.h2(templateObject_7$e || (templateObject_7$e = __makeTemplateObject(["\n font-weight: 600;\n margin: 0;\n font-size: 14px;\n line-height: 22px;\n\n @media (min-width: 768px) {\n font-size: 18px;\n line-height: 28px;\n }\n"], ["\n font-weight: 600;\n margin: 0;\n font-size: 14px;\n line-height: 22px;\n\n @media (min-width: 768px) {\n font-size: 18px;\n line-height: 28px;\n }\n"])));
|
|
19587
19587
|
var ReviewTitle = newStyled.h3(templateObject_8$9 || (templateObject_8$9 = __makeTemplateObject(["\n font-size: 14px;\n line-height: 22px;\n margin: 10px 0 8px;\n font-weight: 600;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"], ["\n font-size: 14px;\n line-height: 22px;\n margin: 10px 0 8px;\n font-weight: 600;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"])));
|
|
19588
19588
|
var ReviewDescriptionDesktop = newStyled.div(templateObject_9$6 || (templateObject_9$6 = __makeTemplateObject(["\n display: none;\n\n @media (min-width: 768px) {\n display: block;\n font-weight: normal;\n font-size: 16px;\n line-height: 24px;\n margin: 0;\n white-space: pre-wrap;\n\n a.see-more {\n color: var(--colors-semantic-informative-color);\n text-decoration: underline;\n cursor: pointer;\n font-weight: 600;\n white-space: nowrap;\n }\n }\n"], ["\n display: none;\n\n @media (min-width: 768px) {\n display: block;\n font-weight: normal;\n font-size: 16px;\n line-height: 24px;\n margin: 0;\n white-space: pre-wrap;\n\n a.see-more {\n color: var(--colors-semantic-informative-color);\n text-decoration: underline;\n cursor: pointer;\n font-weight: 600;\n white-space: nowrap;\n }\n }\n"])));
|
|
19589
19589
|
var ReviewDescriptionMobile = newStyled.div(templateObject_10$6 || (templateObject_10$6 = __makeTemplateObject(["\n font-weight: normal;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n\n a.see-more {\n color: var(--colors-semantic-informative-color);\n text-decoration: underline;\n cursor: pointer;\n font-weight: 600;\n white-space: nowrap;\n }\n\n @media (min-width: 768px) {\n display: none;\n }\n"], ["\n font-weight: normal;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n\n a.see-more {\n color: var(--colors-semantic-informative-color);\n text-decoration: underline;\n cursor: pointer;\n font-weight: 600;\n white-space: nowrap;\n }\n\n @media (min-width: 768px) {\n display: none;\n }\n"])));
|
|
@@ -19629,15 +19629,15 @@ var Review = function (_a) {
|
|
|
19629
19629
|
: description,
|
|
19630
19630
|
} }, 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$2, __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));
|
|
19631
19631
|
};
|
|
19632
|
-
var templateObject_1$
|
|
19633
|
-
|
|
19634
|
-
var Container$n = newStyled.div(templateObject_1$
|
|
19635
|
-
var ReviewsContainer = newStyled.div(templateObject_2$
|
|
19636
|
-
var ReviewsCount = newStyled.div(templateObject_3$
|
|
19637
|
-
var ReviewsStars = newStyled.div(templateObject_4$
|
|
19638
|
-
var ReviewsTextCount = newStyled(Text$7)(templateObject_5$
|
|
19639
|
-
var ReviewsImages = newStyled.div(templateObject_6$
|
|
19640
|
-
var SummaryItem = newStyled.div(templateObject_7$
|
|
19632
|
+
var templateObject_1$C, templateObject_2$u, templateObject_3$q, templateObject_4$m, templateObject_5$h, templateObject_6$f, templateObject_7$e, templateObject_8$9, templateObject_9$6, templateObject_10$6, templateObject_11$3, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19;
|
|
19633
|
+
|
|
19634
|
+
var Container$n = newStyled.div(templateObject_1$B || (templateObject_1$B = __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"])));
|
|
19635
|
+
var ReviewsContainer = newStyled.div(templateObject_2$t || (templateObject_2$t = __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"])));
|
|
19636
|
+
var ReviewsCount = newStyled.div(templateObject_3$p || (templateObject_3$p = __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"])));
|
|
19637
|
+
var ReviewsStars = newStyled.div(templateObject_4$l || (templateObject_4$l = __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"])));
|
|
19638
|
+
var ReviewsTextCount = newStyled(Text$7)(templateObject_5$g || (templateObject_5$g = __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"])));
|
|
19639
|
+
var ReviewsImages = newStyled.div(templateObject_6$e || (templateObject_6$e = __makeTemplateObject(["\n display: flex;\n flex-wrap: wrap;\n max-width: 348px;\n gap: 4px;\n justify-content: center;\n\n @media (min-width: 768px) {\n gap: 8px;\n max-width: 360px;\n }\n"], ["\n display: flex;\n flex-wrap: wrap;\n max-width: 348px;\n gap: 4px;\n justify-content: center;\n\n @media (min-width: 768px) {\n gap: 8px;\n max-width: 360px;\n }\n"])));
|
|
19640
|
+
var SummaryItem = newStyled.div(templateObject_7$d || (templateObject_7$d = __makeTemplateObject(["\n width: 84px;\n height: 68px;\n background: ", ";\n background-repeat: no-repeat;\n background-size: cover;\n background-position: center;\n cursor: zoom-in;\n"], ["\n width: 84px;\n height: 68px;\n background: ", ";\n background-repeat: no-repeat;\n background-size: cover;\n background-position: center;\n cursor: zoom-in;\n"])), function (_a) {
|
|
19641
19641
|
var backgroundUrl = _a.backgroundUrl;
|
|
19642
19642
|
return "url(".concat(backgroundUrl, ")");
|
|
19643
19643
|
});
|
|
@@ -19647,17 +19647,17 @@ var ReviewsHeader = function (_a) {
|
|
|
19647
19647
|
var theme = useTheme();
|
|
19648
19648
|
return (jsxRuntime.jsxs(Container$n, { 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));
|
|
19649
19649
|
};
|
|
19650
|
-
var templateObject_1$
|
|
19650
|
+
var templateObject_1$B, templateObject_2$t, templateObject_3$p, templateObject_4$l, templateObject_5$g, templateObject_6$e, templateObject_7$d;
|
|
19651
19651
|
|
|
19652
|
-
var Container$m = newStyled.div(templateObject_1$
|
|
19653
|
-
var Text = newStyled.p(templateObject_2$
|
|
19652
|
+
var Container$m = newStyled.div(templateObject_1$A || (templateObject_1$A = __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"])));
|
|
19653
|
+
var Text = newStyled.p(templateObject_2$s || (templateObject_2$s = __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; });
|
|
19654
19654
|
var ScrollToTop = function (_a) {
|
|
19655
19655
|
var scrollToTopText = _a.scrollToTopText, onClick = _a.onClick, fill = _a.fill, _b = _a.Icon, Icon$1 = _b === void 0 ? Icon.Arrows.CircleChevronUp : _b;
|
|
19656
19656
|
var theme = useTheme();
|
|
19657
19657
|
var fillValue = fill || theme.colors.pallete.primary.color;
|
|
19658
19658
|
return (jsxRuntime.jsxs(Container$m, __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));
|
|
19659
19659
|
};
|
|
19660
|
-
var templateObject_1$
|
|
19660
|
+
var templateObject_1$A, templateObject_2$s;
|
|
19661
19661
|
|
|
19662
19662
|
var Input = newStyled.input(function (props) { return ({
|
|
19663
19663
|
padding: props.theme.component.input.padding,
|
|
@@ -19688,7 +19688,7 @@ var Input = newStyled.input(function (props) { return ({
|
|
|
19688
19688
|
},
|
|
19689
19689
|
}); });
|
|
19690
19690
|
|
|
19691
|
-
var Container$l = newStyled.div(templateObject_1$
|
|
19691
|
+
var Container$l = newStyled.div(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n width: auto;\n padding: 0.688rem 0rem;\n ", ",\n"], ["\n display: flex;\n flex-direction: row;\n width: auto;\n padding: 0.688rem 0rem;\n ", ",\n"])), mediaQueries({
|
|
19692
19692
|
borderTop: ['0.063rem solid var(--colors-shades-100-color)', 'none'],
|
|
19693
19693
|
}));
|
|
19694
19694
|
var Description = newStyled.div({
|
|
@@ -19707,7 +19707,7 @@ var ProductItem = function (_a) {
|
|
|
19707
19707
|
var theme = useTheme();
|
|
19708
19708
|
return (jsxRuntime.jsxs(Container$l, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(Image$3, { src: src, alt: "", width: "4.063rem", height: "5.375rem" }, void 0), jsxRuntime.jsxs(Description, { children: [jsxRuntime.jsx(Text$7, __assign$1({ variant: "body", weight: "regular", size: "regular" }, { children: jsxRuntime.jsx("div", { dangerouslySetInnerHTML: { __html: title } }, void 0) }), void 0), jsxRuntime.jsx(PriceLabel$1, { finalPrice: price, color: "#C64844", size: exports.ComponentSize.Small }, void 0)] }, void 0)] }), void 0));
|
|
19709
19709
|
};
|
|
19710
|
-
var templateObject_1$
|
|
19710
|
+
var templateObject_1$z;
|
|
19711
19711
|
|
|
19712
19712
|
var Container$k = newStyled.div({
|
|
19713
19713
|
display: 'flex',
|
|
@@ -19723,7 +19723,7 @@ var Ul = newStyled.ul({
|
|
|
19723
19723
|
margin: '0px',
|
|
19724
19724
|
padding: '0px',
|
|
19725
19725
|
});
|
|
19726
|
-
var Li = newStyled.li(templateObject_1$
|
|
19726
|
+
var Li = newStyled.li(templateObject_1$y || (templateObject_1$y = __makeTemplateObject(["\n width: 100%;\n cursor: pointer;\n list-style-type: none;\n box-sizing: border-box;\n &:hover {\n background-color: ", ";\n }\n ", ",\n"], ["\n width: 100%;\n cursor: pointer;\n list-style-type: none;\n box-sizing: border-box;\n &:hover {\n background-color: ", ";\n }\n ", ",\n"])), function (props) { return props.theme.colors.shades['100'].color; }, mediaQueries({
|
|
19727
19727
|
padding: [0, '0rem 1rem'],
|
|
19728
19728
|
borderRadius: [0, '0.5rem'],
|
|
19729
19729
|
}));
|
|
@@ -19735,12 +19735,12 @@ var Anchor = newStyled.a({
|
|
|
19735
19735
|
padding: 0,
|
|
19736
19736
|
textDecoration: 'none',
|
|
19737
19737
|
});
|
|
19738
|
-
var Container$j = newStyled.div(templateObject_2$
|
|
19738
|
+
var Container$j = newStyled.div(templateObject_2$r || (templateObject_2$r = __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({
|
|
19739
19739
|
border: ['none', '0.063rem solid var(--colors-pallete-secondary-color)'],
|
|
19740
19740
|
marginTop: ['1.25rem', '0.125rem'],
|
|
19741
19741
|
borderRadius: ['0', '0.5rem'],
|
|
19742
19742
|
}));
|
|
19743
|
-
var Header = newStyled.div(templateObject_3$
|
|
19743
|
+
var Header = newStyled.div(templateObject_3$o || (templateObject_3$o = __makeTemplateObject(["\n ", ",\n"], ["\n ", ",\n"])), mediaQueries({
|
|
19744
19744
|
margin: ['0rem 0rem 1rem 0rem', '1rem'],
|
|
19745
19745
|
}));
|
|
19746
19746
|
var ResultsPanel = function (_a) {
|
|
@@ -19748,9 +19748,9 @@ var ResultsPanel = function (_a) {
|
|
|
19748
19748
|
var theme = useTheme();
|
|
19749
19749
|
return (jsxRuntime.jsxs(Container$j, __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));
|
|
19750
19750
|
};
|
|
19751
|
-
var templateObject_1$
|
|
19751
|
+
var templateObject_1$y, templateObject_2$r, templateObject_3$o;
|
|
19752
19752
|
|
|
19753
|
-
var Button$1 = newStyled.button(templateObject_1$
|
|
19753
|
+
var Button$1 = newStyled.button(templateObject_1$x || (templateObject_1$x = __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({
|
|
19754
19754
|
right: ['1rem', '7.75rem'],
|
|
19755
19755
|
top: ['0.75rem', '0.75rem'],
|
|
19756
19756
|
}));
|
|
@@ -19759,7 +19759,7 @@ var ClearButton = function (_a) {
|
|
|
19759
19759
|
var theme = useTheme();
|
|
19760
19760
|
return (jsxRuntime.jsx(Button$1, __assign$1({ onClick: onClick, theme: theme }, { children: jsxRuntime.jsx(Icon.Actions.Close, { height: 1.25, width: 1.25 }, void 0) }), void 0));
|
|
19761
19761
|
};
|
|
19762
|
-
var templateObject_1$
|
|
19762
|
+
var templateObject_1$x;
|
|
19763
19763
|
|
|
19764
19764
|
var SearchIconContainer = newStyled.div({
|
|
19765
19765
|
display: 'flex',
|
|
@@ -19769,7 +19769,7 @@ var SearchIconContainer = newStyled.div({
|
|
|
19769
19769
|
background: 'white',
|
|
19770
19770
|
alignSelf: 'center',
|
|
19771
19771
|
});
|
|
19772
|
-
var StyledButton = newStyled(ButtonSecondary)(templateObject_1$
|
|
19772
|
+
var StyledButton = newStyled(ButtonSecondary)(templateObject_1$w || (templateObject_1$w = __makeTemplateObject(["\n position: absolute;\n right: 0;\n height: 100%;\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n padding: 0.875rem 1.5rem;\n"], ["\n position: absolute;\n right: 0;\n height: 100%;\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n padding: 0.875rem 1.5rem;\n"])));
|
|
19773
19773
|
var SearchControl = function (_a) {
|
|
19774
19774
|
var open = _a.open, onSearch = _a.onSearch, onClose = _a.onClose, _b = _a.showSearchIcon, showSearchIcon = _b === void 0 ? false : _b;
|
|
19775
19775
|
var theme = useTheme();
|
|
@@ -19785,7 +19785,7 @@ var SearchControl = function (_a) {
|
|
|
19785
19785
|
}
|
|
19786
19786
|
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(StyledButton, { text: "SEARCH", onClick: onSearch }, void 0), open && jsxRuntime.jsx(ClearButton, { onClick: onClose }, void 0)] }, void 0));
|
|
19787
19787
|
};
|
|
19788
|
-
var templateObject_1$
|
|
19788
|
+
var templateObject_1$w;
|
|
19789
19789
|
|
|
19790
19790
|
var initialState = { selectedOption: undefined, open: false, term: '' };
|
|
19791
19791
|
var reducer = function (state, action) {
|
|
@@ -19852,20 +19852,20 @@ var SearchBar = function (_a) {
|
|
|
19852
19852
|
} }, void 0), jsxRuntime.jsx(SearchControl, { showSearchIcon: isBlogSearchBar, open: state.open, onClose: handleOnClose, onSearch: function () { return onSearch(state.term); } }, void 0)] }), void 0), state.open && !!options.length && (jsxRuntime.jsx(ResultsPanel, { testId: resultsPanelDataTestId, options: options, header: shouldDisplaySuggestion() ? 'Most popular products' : undefined, footer: allResults ? "View all results (".concat(allResults, ")") : undefined, onViewAll: function () { return onSearch(state.term); } }, void 0))] }), void 0));
|
|
19853
19853
|
};
|
|
19854
19854
|
|
|
19855
|
-
var Container$h = newStyled.div(templateObject_1$
|
|
19856
|
-
var BackArrow = newStyled.div(templateObject_2$
|
|
19857
|
-
var BoldSpan = newStyled.span(templateObject_3$
|
|
19858
|
-
var NormalSpan = newStyled.span(templateObject_4$
|
|
19859
|
-
var SearchNavigationParents = newStyled.div(templateObject_5$
|
|
19855
|
+
var Container$h = newStyled.div(templateObject_1$v || (templateObject_1$v = __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"])));
|
|
19856
|
+
var BackArrow = newStyled.div(templateObject_2$q || (templateObject_2$q = __makeTemplateObject(["\n transform: rotate(180deg);\n margin-right: 0.5rem;\n"], ["\n transform: rotate(180deg);\n margin-right: 0.5rem;\n"])));
|
|
19857
|
+
var BoldSpan = newStyled.span(templateObject_3$n || (templateObject_3$n = __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"])));
|
|
19858
|
+
var NormalSpan = newStyled.span(templateObject_4$k || (templateObject_4$k = __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"])));
|
|
19859
|
+
var SearchNavigationParents = newStyled.div(templateObject_5$f || (templateObject_5$f = __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"])));
|
|
19860
19860
|
var SearchNavigation = function (_a) {
|
|
19861
19861
|
var returnText = _a.returnText, returnUrl = _a.returnUrl, _b = _a.steps, steps = _b === void 0 ? [] : _b, returnAction = _a.returnAction;
|
|
19862
19862
|
return (jsxRuntime.jsxs(Container$h, { children: [jsxRuntime.jsxs(Text$7, __assign$1({ variant: "link", style: { display: 'flex', justifyContent: 'center' }, href: returnUrl || '/', onClick: returnAction }, { children: [jsxRuntime.jsx(BackArrow, { children: jsxRuntime.jsx(Icon.Arrows.ChevronRightVariant, { width: 1.375, height: 1.375 }, void 0) }, void 0), returnText && jsxRuntime.jsx(BoldSpan, { children: returnText }, void 0)] }), void 0), jsxRuntime.jsx(SearchNavigationParents, { children: steps.map(function (step, index) {
|
|
19863
19863
|
return index === steps.length - 1 ? (jsxRuntime.jsx(BoldSpan, { children: step }, step)) : (jsxRuntime.jsx(NormalSpan, { children: "".concat(step, " / ") }, step));
|
|
19864
19864
|
}) }, void 0)] }, void 0));
|
|
19865
19865
|
};
|
|
19866
|
-
var templateObject_1$
|
|
19866
|
+
var templateObject_1$v, templateObject_2$q, templateObject_3$n, templateObject_4$k, templateObject_5$f;
|
|
19867
19867
|
|
|
19868
|
-
var Container$g = newStyled.div(templateObject_1$
|
|
19868
|
+
var Container$g = newStyled.div(templateObject_1$u || (templateObject_1$u = __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) {
|
|
19869
19869
|
var alignCenter = _a.alignCenter;
|
|
19870
19870
|
return alignCenter &&
|
|
19871
19871
|
"\n justify-content: center;\n align-items: center;\n text-align: center;\n ";
|
|
@@ -19875,26 +19875,26 @@ var Container$g = newStyled.div(templateObject_1$t || (templateObject_1$t = __ma
|
|
|
19875
19875
|
}, function (props) { return props.backgroundColor; }, function (props) { return props.textColor; }, function (props) {
|
|
19876
19876
|
return props.border ? "".concat(props.border.borderWidth, " solid ").concat(props.border.borderColor) : 'none';
|
|
19877
19877
|
});
|
|
19878
|
-
var TitleText = newStyled.div(templateObject_2$
|
|
19879
|
-
var BannerText = newStyled.div(templateObject_3$
|
|
19878
|
+
var TitleText = newStyled.div(templateObject_2$p || (templateObject_2$p = __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"])));
|
|
19879
|
+
var BannerText = newStyled.div(templateObject_3$m || (templateObject_3$m = __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"])));
|
|
19880
19880
|
var ShortBanner = function (_a) {
|
|
19881
19881
|
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;
|
|
19882
19882
|
var theme = useTheme();
|
|
19883
19883
|
return (jsxRuntime.jsxs(Container$g, __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));
|
|
19884
19884
|
};
|
|
19885
|
-
var templateObject_1$
|
|
19886
|
-
|
|
19887
|
-
var TableElement$2 = newStyled.table(templateObject_1$
|
|
19888
|
-
var TableCell$2 = newStyled.td(templateObject_2$
|
|
19889
|
-
var TableHead$2 = newStyled.th(templateObject_3$
|
|
19890
|
-
var Label$1 = newStyled('div')(templateObject_4$
|
|
19891
|
-
var TopLabel$1 = newStyled(Label$1)(templateObject_5$
|
|
19892
|
-
var LeftLabel$1 = newStyled(Label$1)(templateObject_6$
|
|
19893
|
-
var Container$f = newStyled('div')(templateObject_7$
|
|
19885
|
+
var templateObject_1$u, templateObject_2$p, templateObject_3$m;
|
|
19886
|
+
|
|
19887
|
+
var TableElement$2 = newStyled.table(templateObject_1$t || (templateObject_1$t = __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; });
|
|
19888
|
+
var TableCell$2 = newStyled.td(templateObject_2$o || (templateObject_2$o = __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; });
|
|
19889
|
+
var TableHead$2 = newStyled.th(templateObject_3$l || (templateObject_3$l = __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; });
|
|
19890
|
+
var Label$1 = newStyled('div')(templateObject_4$j || (templateObject_4$j = __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"])));
|
|
19891
|
+
var TopLabel$1 = newStyled(Label$1)(templateObject_5$e || (templateObject_5$e = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
19892
|
+
var LeftLabel$1 = newStyled(Label$1)(templateObject_6$d || (templateObject_6$d = __makeTemplateObject(["\n width: 20px;\n transform: rotate(270deg);\n"], ["\n width: 20px;\n transform: rotate(270deg);\n"])));
|
|
19893
|
+
var Container$f = newStyled('div')(templateObject_7$c || (templateObject_7$c = __makeTemplateObject(["\n gap: 5px;\n display: flex;\n width: fit-content;\n align-items: center;\n"], ["\n gap: 5px;\n display: flex;\n width: fit-content;\n align-items: center;\n"])));
|
|
19894
19894
|
var LabelText$1 = newStyled('span')(templateObject_8$8 || (templateObject_8$8 = __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"])));
|
|
19895
19895
|
var Column$1 = newStyled('div')(templateObject_9$5 || (templateObject_9$5 = __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"])));
|
|
19896
19896
|
var TableRow$2 = newStyled.tr(templateObject_10$5 || (templateObject_10$5 = __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; });
|
|
19897
|
-
var templateObject_1$
|
|
19897
|
+
var templateObject_1$t, templateObject_2$o, templateObject_3$l, templateObject_4$j, templateObject_5$e, templateObject_6$d, templateObject_7$c, templateObject_8$8, templateObject_9$5, templateObject_10$5;
|
|
19898
19898
|
|
|
19899
19899
|
var getIsOdd$1 = function (number) { return number % 2 !== 0; };
|
|
19900
19900
|
var getCellColor$1 = function (index, cell) {
|
|
@@ -19935,16 +19935,16 @@ var SizeChartTable = function (_a) {
|
|
|
19935
19935
|
}, borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }, index)); }) }, void 0)) : (jsxRuntime.jsx("tbody", { children: tableContent === null || tableContent === void 0 ? void 0 : tableContent.map(function (row, index) { return (jsxRuntime.jsx(TableRow$2, __assign$1({ className: getIsOdd$1(index) ? 'background' : '', backgroundColor: theme.colors.shades['10'].color }, { children: row === null || row === void 0 ? void 0 : row.map(function (cell, index) { return (jsxRuntime.jsx(TableCell$2, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }), index)); }) }, void 0))] }), void 0)] }, void 0)] }, void 0));
|
|
19936
19936
|
};
|
|
19937
19937
|
|
|
19938
|
-
var TableElement$1 = newStyled.table(templateObject_1$
|
|
19939
|
-
var TableCell$1 = newStyled.td(templateObject_2$
|
|
19940
|
-
var TableHead$1 = newStyled.th(templateObject_3$
|
|
19941
|
-
var TableRow$1 = newStyled.tr(templateObject_4$
|
|
19938
|
+
var TableElement$1 = newStyled.table(templateObject_1$s || (templateObject_1$s = __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; });
|
|
19939
|
+
var TableCell$1 = newStyled.td(templateObject_2$n || (templateObject_2$n = __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; });
|
|
19940
|
+
var TableHead$1 = newStyled.th(templateObject_3$k || (templateObject_3$k = __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; });
|
|
19941
|
+
var TableRow$1 = newStyled.tr(templateObject_4$i || (templateObject_4$i = __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; });
|
|
19942
19942
|
var SizeTable = function (_a) {
|
|
19943
19943
|
var headers = _a.headers, data = _a.data, className = _a.className;
|
|
19944
19944
|
var theme = useTheme();
|
|
19945
19945
|
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));
|
|
19946
19946
|
};
|
|
19947
|
-
var templateObject_1$
|
|
19947
|
+
var templateObject_1$s, templateObject_2$n, templateObject_3$k, templateObject_4$i;
|
|
19948
19948
|
|
|
19949
19949
|
var getStylesBySize$7 = function (size) {
|
|
19950
19950
|
switch (size) {
|
|
@@ -19971,7 +19971,7 @@ var textButtonStyles = function (theme, size) {
|
|
|
19971
19971
|
} });
|
|
19972
19972
|
};
|
|
19973
19973
|
var withContainer = function (iconFill, isLeading, Icon) {
|
|
19974
|
-
return Icon && (jsx("span", __assign$1({ css: css(templateObject_1$
|
|
19974
|
+
return Icon && (jsx("span", __assign$1({ css: css(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n display: flex;\n align-items: center;\n ", "\n "], ["\n display: flex;\n align-items: center;\n ", "\n "])), isLeading ? 'margin-right: 5px' : 'margin-left: 5px') }, { children: jsx(Icon, { width: 1.25, height: 1.25, fill: iconFill }, void 0) }), void 0));
|
|
19975
19975
|
};
|
|
19976
19976
|
var getIconFill = function (theme, disabled, iconColor) {
|
|
19977
19977
|
if (disabled)
|
|
@@ -19982,28 +19982,28 @@ var getIconFill = function (theme, disabled, iconColor) {
|
|
|
19982
19982
|
return theme.colors.shades['550'].color;
|
|
19983
19983
|
};
|
|
19984
19984
|
var TextButton = function (_a) {
|
|
19985
|
-
var text = _a.text, LeadingIcon = _a.LeadingIcon, TrailingIcon = _a.TrailingIcon, iconColor = _a.iconColor, disabled = _a.disabled, type = _a.type, _b = _a.size, size = _b === void 0 ? exports.ComponentSize.Medium : _b, _c = _a.uppercase, uppercase = _c === void 0 ? true : _c, onClick = _a.onClick;
|
|
19985
|
+
var text = _a.text, LeadingIcon = _a.LeadingIcon, TrailingIcon = _a.TrailingIcon, iconColor = _a.iconColor, disabled = _a.disabled, type = _a.type, _b = _a.size, size = _b === void 0 ? exports.ComponentSize.Medium : _b, _c = _a.uppercase, uppercase = _c === void 0 ? true : _c, onClick = _a.onClick, testId = _a.testId;
|
|
19986
19986
|
var theme = useTheme();
|
|
19987
19987
|
var iconFill = getIconFill(theme, disabled, iconColor);
|
|
19988
|
-
return (jsx(BaseButton, __assign$1({ renderLeading: withContainer(iconFill, true, LeadingIcon), renderTrailing: withContainer(iconFill, false, TrailingIcon), disabled: disabled, type: type, onClick: onClick, css: textButtonStyles(theme, size), uppercase: uppercase }, { children: text }), void 0));
|
|
19988
|
+
return (jsx(BaseButton, __assign$1({ renderLeading: withContainer(iconFill, true, LeadingIcon), renderTrailing: withContainer(iconFill, false, TrailingIcon), disabled: disabled, type: type, onClick: onClick, css: textButtonStyles(theme, size), uppercase: uppercase, testId: testId }, { children: text }), void 0));
|
|
19989
19989
|
};
|
|
19990
|
-
var templateObject_1$
|
|
19990
|
+
var templateObject_1$r;
|
|
19991
19991
|
|
|
19992
|
-
var Container$e = newStyled.div(templateObject_1$
|
|
19993
|
-
var P = newStyled.p(templateObject_2$
|
|
19994
|
-
var PercentageSpan = newStyled.span(templateObject_3$
|
|
19992
|
+
var Container$e = newStyled.div(templateObject_1$q || (templateObject_1$q = __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"])));
|
|
19993
|
+
var P = newStyled.p(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["\n margin: 0;\n"], ["\n margin: 0;\n"])));
|
|
19994
|
+
var PercentageSpan = newStyled.span(templateObject_3$j || (templateObject_3$j = __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"])));
|
|
19995
19995
|
var SizeFitGuide = function (_a) {
|
|
19996
19996
|
var title = _a.title, fitPercentage = _a.fitPercentage, onClick = _a.onClick, onClickFitPercentage = _a.onClickFitPercentage, _b = _a.hideIcon, hideIcon = _b === void 0 ? false : _b;
|
|
19997
19997
|
return (jsxRuntime.jsxs(Container$e, { 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));
|
|
19998
19998
|
};
|
|
19999
|
-
var templateObject_1$
|
|
19999
|
+
var templateObject_1$q, templateObject_2$m, templateObject_3$j;
|
|
20000
20000
|
|
|
20001
|
-
var ButtonsContainer = newStyled.div(templateObject_1$
|
|
20001
|
+
var ButtonsContainer = newStyled.div(templateObject_1$p || (templateObject_1$p = __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) {
|
|
20002
20002
|
var inline = _a.inline;
|
|
20003
20003
|
return (inline ? '0 0 0 10px' : '8px 0 0 0');
|
|
20004
20004
|
});
|
|
20005
|
-
var Row = newStyled.div(templateObject_2$
|
|
20006
|
-
var templateObject_1$
|
|
20005
|
+
var Row = newStyled.div(templateObject_2$l || (templateObject_2$l = __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"])));
|
|
20006
|
+
var templateObject_1$p, templateObject_2$l;
|
|
20007
20007
|
|
|
20008
20008
|
var SizeSelector = function (_a) {
|
|
20009
20009
|
var _b;
|
|
@@ -20025,7 +20025,7 @@ var SizeSelector = function (_a) {
|
|
|
20025
20025
|
}) }), void 0)] }), void 0));
|
|
20026
20026
|
};
|
|
20027
20027
|
|
|
20028
|
-
var TabContainer = newStyled.div(templateObject_1$
|
|
20028
|
+
var TabContainer = newStyled.div(templateObject_1$o || (templateObject_1$o = __makeTemplateObject(["\n display: flex;\n justify-content: center;\n align-content: center;\n flex-direction: column;\n flex: 1 1 0;\n font-size: ", ";\n height: ", ";\n margin: 0 auto;\n text-align: center;\n cursor: pointer;\n transition: all 0.2s;\n max-width: ", ";\n border: none;\n\n ", "\n"], ["\n display: flex;\n justify-content: center;\n align-content: center;\n flex-direction: column;\n flex: 1 1 0;\n font-size: ", ";\n height: ", ";\n margin: 0 auto;\n text-align: center;\n cursor: pointer;\n transition: all 0.2s;\n max-width: ", ";\n border: none;\n\n ", "\n"])), function (_a) {
|
|
20029
20029
|
var titleSize = _a.titleSize;
|
|
20030
20030
|
return titleSize;
|
|
20031
20031
|
}, function (_a) {
|
|
@@ -20042,18 +20042,18 @@ var Tab = function (_a) {
|
|
|
20042
20042
|
var title = _a.title, _b = _a.titleSize, titleSize = _b === void 0 ? '14px' : _b, _c = _a.height, height = _c === void 0 ? '4.5rem' : _c, _d = _a.selectedTitleWeight, selectedTitleWeight = _d === void 0 ? 700 : _d, selected = _a.selected, onClick = _a.onClick, _e = _a.color, color = _e === void 0 ? 'var(--colors-pallete-primary-color)' : _e, _f = _a.tabsMaxWidth, tabsMaxWidth = _f === void 0 ? '11rem' : _f;
|
|
20043
20043
|
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(TabContainer, __assign$1({ selected: selected, onClick: function () { return onClick(title); }, color: color, titleSize: titleSize, height: height, selectedTitleWeight: selectedTitleWeight, tabsMaxWidth: tabsMaxWidth }, { children: title }), title) }, void 0));
|
|
20044
20044
|
};
|
|
20045
|
-
var templateObject_1$
|
|
20045
|
+
var templateObject_1$o;
|
|
20046
20046
|
|
|
20047
|
-
var Container$d = newStyled.div(templateObject_1$
|
|
20048
|
-
var TabList = newStyled.div(templateObject_2$
|
|
20047
|
+
var Container$d = newStyled.div(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
|
|
20048
|
+
var TabList = newStyled.div(templateObject_2$k || (templateObject_2$k = __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) {
|
|
20049
20049
|
var backgroundColor = _a.backgroundColor;
|
|
20050
20050
|
return backgroundColor;
|
|
20051
20051
|
}, function (_a) {
|
|
20052
20052
|
var borderColor = _a.borderColor;
|
|
20053
20053
|
return (borderColor ? "border-bottom: 1px solid ".concat(borderColor) : '');
|
|
20054
20054
|
});
|
|
20055
|
-
var TabContent = newStyled.div(templateObject_3$
|
|
20056
|
-
var TabSeparator = newStyled.div(templateObject_4$
|
|
20055
|
+
var TabContent = newStyled.div(templateObject_3$i || (templateObject_3$i = __makeTemplateObject(["\n display: block;\n"], ["\n display: block;\n"])));
|
|
20056
|
+
var TabSeparator = newStyled.div(templateObject_4$h || (templateObject_4$h = __makeTemplateObject(["\n color: var(--colors-shades-white-color);\n font-family: initial;\n font-size: 40px;\n line-height: 69px;\n padding: 0 25px;\n"], ["\n color: var(--colors-shades-white-color);\n font-family: initial;\n font-size: 40px;\n line-height: 69px;\n padding: 0 25px;\n"])));
|
|
20057
20057
|
var Tabs = function (_a) {
|
|
20058
20058
|
var _b;
|
|
20059
20059
|
var _c = _a.backgroundColor, backgroundColor = _c === void 0 ? 'var(--colors-pallete-primary-color)' : _c, _d = _a.selectedBorderColor, selectedBorderColor = _d === void 0 ? 'var(--colors-pallete-primary-color)' : _d, _e = _a.fixedBorderColor, fixedBorderColor = _e === void 0 ? '' : _e, tabs = _a.tabs, initialSelected = _a.initialSelected, tabsMaxWidth = _a.tabsMaxWidth;
|
|
@@ -20064,14 +20064,14 @@ var Tabs = function (_a) {
|
|
|
20064
20064
|
var selectedContent = (_b = tabs.find(function (tab) { return tab.title === selectedTab; })) === null || _b === void 0 ? void 0 : _b.content;
|
|
20065
20065
|
return (jsxRuntime.jsxs(Container$d, __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));
|
|
20066
20066
|
};
|
|
20067
|
-
var templateObject_1$
|
|
20067
|
+
var templateObject_1$n, templateObject_2$k, templateObject_3$i, templateObject_4$h;
|
|
20068
20068
|
|
|
20069
|
-
var Container$c = newStyled.div(templateObject_1$
|
|
20069
|
+
var Container$c = newStyled.div(templateObject_1$m || (templateObject_1$m = __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"])));
|
|
20070
20070
|
var Tag = function (_a) {
|
|
20071
20071
|
var text = _a.text, className = _a.className;
|
|
20072
20072
|
return jsxRuntime.jsx(Container$c, __assign$1({ className: className }, { children: text }), void 0);
|
|
20073
20073
|
};
|
|
20074
|
-
var templateObject_1$
|
|
20074
|
+
var templateObject_1$m;
|
|
20075
20075
|
|
|
20076
20076
|
var getStylesBySize$6 = function (size, styledBorder) {
|
|
20077
20077
|
switch (size) {
|
|
@@ -20182,9 +20182,9 @@ var SeasonOfferRoundedTag = function (_a) {
|
|
|
20182
20182
|
return (jsx(Tag, { css: __assign$1({ backgroundColor: backgroundColor, fontWeight: 700, color: '#FFFFFF', textAlign: 'center', borderRadius: '50%' }, stylesBySize), text: text, className: className }, void 0));
|
|
20183
20183
|
};
|
|
20184
20184
|
|
|
20185
|
-
var ImageWrapper$1 = newStyled.div(templateObject_1$
|
|
20186
|
-
var VideoOverlay = newStyled.div(templateObject_2$
|
|
20187
|
-
var FullscreenVideo = newStyled.div(templateObject_3$
|
|
20185
|
+
var ImageWrapper$1 = newStyled.div(templateObject_1$l || (templateObject_1$l = __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"])));
|
|
20186
|
+
var VideoOverlay = newStyled.div(templateObject_2$j || (templateObject_2$j = __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"])));
|
|
20187
|
+
var FullscreenVideo = newStyled.div(templateObject_3$h || (templateObject_3$h = __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"])));
|
|
20188
20188
|
var ImageVideo = function (_a) {
|
|
20189
20189
|
var imageLink = _a.imageLink, isVideo = _a.isVideo, isMobile = _a.isMobile;
|
|
20190
20190
|
var video = React$2.useRef(null);
|
|
@@ -20204,12 +20204,12 @@ var ImageVideo = function (_a) {
|
|
|
20204
20204
|
height: '100%',
|
|
20205
20205
|
} }, void 0)] }, void 0))] }, void 0));
|
|
20206
20206
|
};
|
|
20207
|
-
var templateObject_1$
|
|
20207
|
+
var templateObject_1$l, templateObject_2$j, templateObject_3$h;
|
|
20208
20208
|
|
|
20209
|
-
var ContainerDesktop = css(templateObject_1$
|
|
20210
|
-
var ContainerMobile = css(templateObject_2$
|
|
20211
|
-
var Container$b = newStyled.div(templateObject_3$
|
|
20212
|
-
var TextContainer = newStyled.div(templateObject_4$
|
|
20209
|
+
var ContainerDesktop = css(templateObject_1$k || (templateObject_1$k = __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"])));
|
|
20210
|
+
var ContainerMobile = css(templateObject_2$i || (templateObject_2$i = __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"])));
|
|
20211
|
+
var Container$b = newStyled.div(templateObject_3$g || (templateObject_3$g = __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);
|
|
20212
|
+
var TextContainer = newStyled.div(templateObject_4$g || (templateObject_4$g = __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"])));
|
|
20213
20213
|
var TextWithImage = function (_a) {
|
|
20214
20214
|
var _b, _c, _d, _e;
|
|
20215
20215
|
var title = _a.title, text = _a.text, children = _a.children, buttomText = _a.buttomText, backgroundColor = _a.backgroundColor, imageLeftSide = _a.imageLeftSide, titleStyle = _a.titleStyle, textStyle = _a.textStyle, _f = _a.buttonWideOnMobile, buttonWideOnMobile = _f === void 0 ? false : _f, props = __rest(_a, ["title", "text", "children", "buttomText", "backgroundColor", "imageLeftSide", "titleStyle", "textStyle", "buttonWideOnMobile"]);
|
|
@@ -20239,25 +20239,25 @@ var TextWithImage = function (_a) {
|
|
|
20239
20239
|
},
|
|
20240
20240
|
} }, 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));
|
|
20241
20241
|
};
|
|
20242
|
-
var templateObject_1$
|
|
20242
|
+
var templateObject_1$k, templateObject_2$i, templateObject_3$g, templateObject_4$g;
|
|
20243
20243
|
|
|
20244
|
-
var TimerContainer$1 = newStyled.div(templateObject_1$
|
|
20244
|
+
var TimerContainer$1 = newStyled.div(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
20245
20245
|
var timerColor = _a.timerColor;
|
|
20246
20246
|
return timerColor || '';
|
|
20247
20247
|
});
|
|
20248
|
-
var TimerContainerV2 = newStyled.div(templateObject_2$
|
|
20248
|
+
var TimerContainerV2 = newStyled.div(templateObject_2$h || (templateObject_2$h = __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) {
|
|
20249
20249
|
var timerColor = _a.timerColor;
|
|
20250
20250
|
return timerColor || '';
|
|
20251
20251
|
});
|
|
20252
|
-
var UnitBlock = newStyled(Text$7)(templateObject_3$
|
|
20252
|
+
var UnitBlock = newStyled(Text$7)(templateObject_3$f || (templateObject_3$f = __makeTemplateObject(["\n background-color: ", ";\n width: 32px;\n height: 32px;\n border-radius: 2px;\n padding: 0 6px;\n line-height: 22px;\n text-align: center;\n position: relative;\n & + & {\n &:before {\n position: absolute;\n content: ':';\n display: block;\n left: -7px;\n top: 5px;\n color: ", ";\n }\n }\n"], ["\n background-color: ", ";\n width: 32px;\n height: 32px;\n border-radius: 2px;\n padding: 0 6px;\n line-height: 22px;\n text-align: center;\n position: relative;\n & + & {\n &:before {\n position: absolute;\n content: ':';\n display: block;\n left: -7px;\n top: 5px;\n color: ", ";\n }\n }\n"])), function (_a) {
|
|
20253
20253
|
var theme = _a.theme;
|
|
20254
20254
|
return theme.colors.shades.white.color;
|
|
20255
20255
|
}, function (_a) {
|
|
20256
20256
|
var theme = _a.theme;
|
|
20257
20257
|
return theme.colors.shades.white.color;
|
|
20258
20258
|
});
|
|
20259
|
-
var Unit = newStyled.p(templateObject_4$
|
|
20260
|
-
var templateObject_1$
|
|
20259
|
+
var Unit = newStyled.p(templateObject_4$f || (templateObject_4$f = __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"])));
|
|
20260
|
+
var templateObject_1$j, templateObject_2$h, templateObject_3$f, templateObject_4$f;
|
|
20261
20261
|
|
|
20262
20262
|
var HRS = 'HRS';
|
|
20263
20263
|
var MIN = 'MIN';
|
|
@@ -20300,14 +20300,14 @@ var Timer = function (_a) {
|
|
|
20300
20300
|
|
|
20301
20301
|
var slideInAnimation = function (distanceFromTop) {
|
|
20302
20302
|
if (distanceFromTop === void 0) { distanceFromTop = '124px'; }
|
|
20303
|
-
return keyframes(templateObject_1$
|
|
20303
|
+
return keyframes(templateObject_1$i || (templateObject_1$i = __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);
|
|
20304
20304
|
};
|
|
20305
20305
|
var mobileSlideInAnimation = function (distanceFromTop) {
|
|
20306
20306
|
if (distanceFromTop === void 0) { distanceFromTop = '85px'; }
|
|
20307
|
-
return keyframes(templateObject_2$
|
|
20307
|
+
return keyframes(templateObject_2$g || (templateObject_2$g = __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);
|
|
20308
20308
|
};
|
|
20309
|
-
var ToastContainer = newStyled.div(templateObject_3$
|
|
20310
|
-
var ToastContent = newStyled.div(templateObject_4$
|
|
20309
|
+
var ToastContainer = newStyled.div(templateObject_3$e || (templateObject_3$e = __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"])));
|
|
20310
|
+
var ToastContent = newStyled.div(templateObject_4$e || (templateObject_4$e = __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) {
|
|
20311
20311
|
var distanceFromTop = _a.distanceFromTop;
|
|
20312
20312
|
return distanceFromTop || '124px';
|
|
20313
20313
|
}, function (_a) {
|
|
@@ -20320,12 +20320,12 @@ var ToastContent = newStyled.div(templateObject_4$d || (templateObject_4$d = __m
|
|
|
20320
20320
|
var distanceFromTop = _a.distanceFromTop;
|
|
20321
20321
|
return mobileSlideInAnimation(distanceFromTop);
|
|
20322
20322
|
});
|
|
20323
|
-
var ToastText = newStyled.p(templateObject_5$
|
|
20323
|
+
var ToastText = newStyled.p(templateObject_5$d || (templateObject_5$d = __makeTemplateObject(["\n font-size: 14px;\n font-weight: 500;\n line-height: 24px;\n margin: 0;\n color: ", ";\n\n @media (max-width: 768px) {\n font-size: 14px;\n font-style: normal;\n font-weight: 500;\n }\n"], ["\n font-size: 14px;\n font-weight: 500;\n line-height: 24px;\n margin: 0;\n color: ", ";\n\n @media (max-width: 768px) {\n font-size: 14px;\n font-style: normal;\n font-weight: 500;\n }\n"])), function (_a) {
|
|
20324
20324
|
var severity = _a.severity;
|
|
20325
20325
|
return severity === 'error' ? '#C64844' : '#292929';
|
|
20326
20326
|
});
|
|
20327
|
-
var CloseIcon = newStyled.div(templateObject_6$
|
|
20328
|
-
var templateObject_1$
|
|
20327
|
+
var CloseIcon = newStyled.div(templateObject_6$c || (templateObject_6$c = __makeTemplateObject(["\n margin-inline-start: auto;\n cursor: pointer;\n"], ["\n margin-inline-start: auto;\n cursor: pointer;\n"])));
|
|
20328
|
+
var templateObject_1$i, templateObject_2$g, templateObject_3$e, templateObject_4$e, templateObject_5$d, templateObject_6$c;
|
|
20329
20329
|
|
|
20330
20330
|
var Toast = React__default["default"].forwardRef(function (_a, ref) {
|
|
20331
20331
|
var severity = _a.severity, summary = _a.summary, life = _a.life, _b = _a.withCloseIcon, withCloseIcon = _b === void 0 ? true : _b, distanceFromTop = _a.distanceFromTop;
|
|
@@ -20345,9 +20345,9 @@ var Toast = React__default["default"].forwardRef(function (_a, ref) {
|
|
|
20345
20345
|
});
|
|
20346
20346
|
Toast.displayName = 'Toast';
|
|
20347
20347
|
|
|
20348
|
-
var Wrapper$1 = newStyled.div(templateObject_1$
|
|
20349
|
-
var GrandTotal = newStyled.h1(templateObject_2$
|
|
20350
|
-
var Currency = newStyled.span(templateObject_3$
|
|
20348
|
+
var Wrapper$1 = newStyled.div(templateObject_1$h || (templateObject_1$h = __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"])));
|
|
20349
|
+
var GrandTotal = newStyled.h1(templateObject_2$f || (templateObject_2$f = __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; });
|
|
20350
|
+
var Currency = newStyled.span(templateObject_3$d || (templateObject_3$d = __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) {
|
|
20351
20351
|
var theme = _a.theme;
|
|
20352
20352
|
return theme.component.total.basicTotal.currency.color;
|
|
20353
20353
|
}, function (_a) {
|
|
@@ -20360,21 +20360,21 @@ var Currency = newStyled.span(templateObject_3$c || (templateObject_3$c = __make
|
|
|
20360
20360
|
var theme = _a.theme;
|
|
20361
20361
|
return theme.component.total.basicTotal.currency.alignSelf;
|
|
20362
20362
|
});
|
|
20363
|
-
var Container$a = newStyled.div(templateObject_4$
|
|
20363
|
+
var Container$a = newStyled.div(templateObject_4$d || (templateObject_4$d = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n width: 100%;\n margin-top: 0.625rem;\n color: ", ";\n align-items: center;\n"], ["\n display: flex;\n justify-content: space-between;\n width: 100%;\n margin-top: 0.625rem;\n color: ", ";\n align-items: center;\n"])), function (_a) {
|
|
20364
20364
|
var highlightColor = _a.highlightColor;
|
|
20365
20365
|
return highlightColor;
|
|
20366
20366
|
});
|
|
20367
|
-
var TotalContainer = newStyled(Container$a)(templateObject_5$
|
|
20367
|
+
var TotalContainer = newStyled(Container$a)(templateObject_5$c || (templateObject_5$c = __makeTemplateObject(["\n justify-content: ", ";\n margin-top: 0;\n"], ["\n justify-content: ", ";\n margin-top: 0;\n"])), function (_a) {
|
|
20368
20368
|
var showTotalLabel = _a.showTotalLabel;
|
|
20369
20369
|
return (showTotalLabel ? 'space-between' : 'flex-end');
|
|
20370
20370
|
});
|
|
20371
|
-
var DiscountText = newStyled.h3(templateObject_6$
|
|
20372
|
-
var DiscountAmount = newStyled.h3(templateObject_7$
|
|
20371
|
+
var DiscountText = newStyled.h3(templateObject_6$b || (templateObject_6$b = __makeTemplateObject(["\n margin: 0;\n font-size: 14px;\n line-height: 22px;\n font-weight: 600;\n"], ["\n margin: 0;\n font-size: 14px;\n line-height: 22px;\n font-weight: 600;\n"])));
|
|
20372
|
+
var DiscountAmount = newStyled.h3(templateObject_7$b || (templateObject_7$b = __makeTemplateObject(["\n margin: 0;\n font-size: 18px;\n line-height: 28px;\n font-weight: ", ";\n"], ["\n margin: 0;\n font-size: 18px;\n line-height: 28px;\n font-weight: ", ";\n"])), function (_a) {
|
|
20373
20373
|
var theme = _a.theme;
|
|
20374
20374
|
return theme.component.total.basicTotal.savings.amountFontWeight;
|
|
20375
20375
|
});
|
|
20376
20376
|
var TotalLabel = newStyled(Text$7)(templateObject_8$7 || (templateObject_8$7 = __makeTemplateObject(["\n font-size: 20px;\n"], ["\n font-size: 20px;\n"])));
|
|
20377
|
-
var templateObject_1$
|
|
20377
|
+
var templateObject_1$h, templateObject_2$f, templateObject_3$d, templateObject_4$d, templateObject_5$c, templateObject_6$b, templateObject_7$b, templateObject_8$7;
|
|
20378
20378
|
|
|
20379
20379
|
var Total = function (_a) {
|
|
20380
20380
|
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;
|
|
@@ -20382,19 +20382,19 @@ var Total = function (_a) {
|
|
|
20382
20382
|
return (jsxRuntime.jsxs(Wrapper$1, __assign$1({ "data-testid": "total-wrapper" }, { children: [jsxRuntime.jsxs(TotalContainer, __assign$1({ showTotalLabel: showTotalLabel }, { children: [showTotalLabel && (jsxRuntime.jsx(TotalLabel, __assign$1({ variant: "heading6", size: "regular", weight: "bold" }, { children: "Total" }), void 0)), jsxRuntime.jsxs(GrandTotal, __assign$1({ color: theme.component.total.basicTotal.amount.color, "data-testid": "total-price" }, { children: [jsxRuntime.jsx(Currency, { children: currency }, void 0), total] }), void 0)] }), void 0), saving && (jsxRuntime.jsxs(Container$a, __assign$1({ "data-testid": "subtotal-container", highlightColor: highlightColor }, { children: [jsxRuntime.jsx(DiscountText, __assign$1({ "data-testid": "saving-title" }, { children: saving.savingText }), void 0), jsxRuntime.jsx(DiscountAmount, __assign$1({ "data-testid": "saving-price" }, { children: saving.amount }), void 0)] }), void 0))] }), void 0));
|
|
20383
20383
|
};
|
|
20384
20384
|
|
|
20385
|
-
var Wrapper = newStyled.div(templateObject_1$
|
|
20385
|
+
var Wrapper = newStyled.div(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
20386
20386
|
var color = _a.color;
|
|
20387
20387
|
return color;
|
|
20388
20388
|
});
|
|
20389
|
-
var ItemContainer = newStyled.div(templateObject_2$
|
|
20390
|
-
var Item = newStyled.h4(templateObject_3$
|
|
20389
|
+
var ItemContainer = newStyled.div(templateObject_2$e || (templateObject_2$e = __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"])));
|
|
20390
|
+
var Item = newStyled.h4(templateObject_3$c || (templateObject_3$c = __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) {
|
|
20391
20391
|
var theme = _a.theme;
|
|
20392
20392
|
return theme.component.subTotal.basicSubTotal.lineHeight;
|
|
20393
20393
|
}, function (_a) {
|
|
20394
20394
|
var theme = _a.theme;
|
|
20395
20395
|
return theme.component.subTotal.basicSubTotal.weight;
|
|
20396
20396
|
});
|
|
20397
|
-
var CouponItem = newStyled(Item)(templateObject_4$
|
|
20397
|
+
var CouponItem = newStyled(Item)(templateObject_4$c || (templateObject_4$c = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
20398
20398
|
var color = _a.color;
|
|
20399
20399
|
return color;
|
|
20400
20400
|
});
|
|
@@ -20407,26 +20407,26 @@ var Subtotal = function (_a) {
|
|
|
20407
20407
|
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));
|
|
20408
20408
|
})] }), void 0));
|
|
20409
20409
|
};
|
|
20410
|
-
var templateObject_1$
|
|
20410
|
+
var templateObject_1$g, templateObject_2$e, templateObject_3$c, templateObject_4$c;
|
|
20411
20411
|
|
|
20412
20412
|
var Totals = {
|
|
20413
20413
|
Total: Total,
|
|
20414
20414
|
Subtotal: Subtotal,
|
|
20415
20415
|
};
|
|
20416
20416
|
|
|
20417
|
-
var Container$9 = newStyled.div(templateObject_1$
|
|
20418
|
-
var CheckpointContainer$1 = newStyled.div(templateObject_2$
|
|
20419
|
-
var CheckpointDate$1 = newStyled.div(templateObject_3$
|
|
20420
|
-
var CheckpointDateLabel$1 = newStyled.p(templateObject_4$
|
|
20421
|
-
var CheckpointDateAndDayLabel = newStyled.span(templateObject_5$
|
|
20422
|
-
var CheckpointStatus$1 = newStyled.p(templateObject_6$
|
|
20417
|
+
var Container$9 = newStyled.div(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
20418
|
+
var CheckpointContainer$1 = newStyled.div(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
20419
|
+
var CheckpointDate$1 = newStyled.div(templateObject_3$b || (templateObject_3$b = __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; });
|
|
20420
|
+
var CheckpointDateLabel$1 = newStyled.p(templateObject_4$b || (templateObject_4$b = __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'); });
|
|
20421
|
+
var CheckpointDateAndDayLabel = newStyled.span(templateObject_5$b || (templateObject_5$b = __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"])));
|
|
20422
|
+
var CheckpointStatus$1 = newStyled.p(templateObject_6$a || (templateObject_6$a = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n transform: translate(0, 22px);\n margin: 0;\n margin-left: 9px;\n color: ", ";\n font-weight: ", ";\n"], ["\n display: flex;\n flex-direction: column;\n transform: translate(0, 22px);\n margin: 0;\n margin-left: 9px;\n color: ", ";\n font-weight: ", ";\n"])), function (props) {
|
|
20423
20423
|
return props.finishedTrack
|
|
20424
20424
|
? props.finishedTrackColor
|
|
20425
20425
|
: props.activeTrack
|
|
20426
20426
|
? props.activeTrackColor
|
|
20427
20427
|
: '';
|
|
20428
20428
|
}, function (props) { return (props.finishedTrack || props.activeTrack ? '600' : '400'); });
|
|
20429
|
-
var CheckpointStatusMessage = newStyled.span(templateObject_7$
|
|
20429
|
+
var CheckpointStatusMessage = newStyled.span(templateObject_7$a || (templateObject_7$a = __makeTemplateObject(["\n display: flex;\n gap: 4px;\n font-size: 14px;\n line-height: 22px;\n text-align: left;\n"], ["\n display: flex;\n gap: 4px;\n font-size: 14px;\n line-height: 22px;\n text-align: left;\n"])));
|
|
20430
20430
|
var ActiveCheckpointTrack$1 = newStyled.div(templateObject_8$6 || (templateObject_8$6 = __makeTemplateObject(["\n width: 13px;\n min-width: 13px;\n background-color: ", ";\n transform: ", ";\n position: relative;\n border-radius: ", ";\n margin-top: -1px;\n padding-bottom: ", ";\n margin-bottom: ", ";\n"], ["\n width: 13px;\n min-width: 13px;\n background-color: ", ";\n transform: ", ";\n position: relative;\n border-radius: ", ";\n margin-top: -1px;\n padding-bottom: ", ";\n margin-bottom: ", ";\n"])), function (props) { return props.trackColor; }, function (props) { return (props.firstElement ? 'translate(0, 22px)' : 'translate(0, 33px)'); }, function (props) {
|
|
20431
20431
|
return props.firstElement ? '8px 8px 0 0' : props.lastElement ? '0 0 8px 8px' : '';
|
|
20432
20432
|
}, function (props) { return (props.firstElement ? '20px' : '0'); }, function (props) { return (props.firstElement ? '-20px' : '0'); });
|
|
@@ -20466,17 +20466,17 @@ var TrackingProgressV2 = function (_a) {
|
|
|
20466
20466
|
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));
|
|
20467
20467
|
})] }), void 0));
|
|
20468
20468
|
};
|
|
20469
|
-
var templateObject_1$
|
|
20470
|
-
|
|
20471
|
-
var Container$8 = newStyled.div(templateObject_1$
|
|
20472
|
-
var CheckpointContainer = newStyled.div(templateObject_2$
|
|
20473
|
-
var CheckpointDate = newStyled.div(templateObject_3$
|
|
20474
|
-
var CheckpointDateLabel = newStyled.p(templateObject_4$
|
|
20475
|
-
var CheckpointStatus = newStyled.p(templateObject_5$
|
|
20476
|
-
var ActiveCheckpointTrack = newStyled.div(templateObject_6$
|
|
20469
|
+
var templateObject_1$f, templateObject_2$d, templateObject_3$b, templateObject_4$b, templateObject_5$b, templateObject_6$a, templateObject_7$a, templateObject_8$6, templateObject_9$4, templateObject_10$4, templateObject_11$2;
|
|
20470
|
+
|
|
20471
|
+
var Container$8 = newStyled.div(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
20472
|
+
var CheckpointContainer = newStyled.div(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
20473
|
+
var CheckpointDate = newStyled.div(templateObject_3$a || (templateObject_3$a = __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; });
|
|
20474
|
+
var CheckpointDateLabel = newStyled.p(templateObject_4$a || (templateObject_4$a = __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'); });
|
|
20475
|
+
var CheckpointStatus = newStyled.p(templateObject_5$a || (templateObject_5$a = __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'); });
|
|
20476
|
+
var ActiveCheckpointTrack = newStyled.div(templateObject_6$9 || (templateObject_6$9 = __makeTemplateObject(["\n width: 13px;\n min-width: 13px;\n background-color: ", ";\n transform: ", ";\n position: relative;\n border-radius: ", ";\n margin-top: -1px;\n padding-bottom: ", ";\n margin-bottom: ", ";\n"], ["\n width: 13px;\n min-width: 13px;\n background-color: ", ";\n transform: ", ";\n position: relative;\n border-radius: ", ";\n margin-top: -1px;\n padding-bottom: ", ";\n margin-bottom: ", ";\n"])), function (props) { return props.trackColor; }, function (props) { return (props.firstElement ? 'translate(0, 22px)' : 'translate(0, 33px)'); }, function (props) {
|
|
20477
20477
|
return props.firstElement ? '8px 8px 0 0' : props.lastElement ? '0 0 8px 8px' : '';
|
|
20478
20478
|
}, function (props) { return (props.firstElement ? '20px' : '0'); }, function (props) { return (props.firstElement ? '-20px' : '0'); });
|
|
20479
|
-
var ActiveCheckpointDot = newStyled.div(templateObject_7$
|
|
20479
|
+
var ActiveCheckpointDot = newStyled.div(templateObject_7$9 || (templateObject_7$9 = __makeTemplateObject(["\n &:after {\n content: ' ';\n position: absolute;\n width: 13px;\n height: 13px;\n background-color: #e5e5e5;\n z-index: 2;\n border-radius: 50%;\n transform: ", ";\n left: 0;\n }\n"], ["\n &:after {\n content: ' ';\n position: absolute;\n width: 13px;\n height: 13px;\n background-color: #e5e5e5;\n z-index: 2;\n border-radius: 50%;\n transform: ", ";\n left: 0;\n }\n"])), function (props) { return (props.firstElement ? 'translate(0, -0.5px)' : 'translate(0, -6.5px)'); });
|
|
20480
20480
|
var LastCheckpointTrack = newStyled.div(templateObject_8$5 || (templateObject_8$5 = __makeTemplateObject(["\n width: 13px;\n min-width: 13px;\n background-color: ", ";\n position: relative;\n border-radius: 0 0 8px 8px;\n margin-top: -1px;\n"], ["\n width: 13px;\n min-width: 13px;\n background-color: ", ";\n position: relative;\n border-radius: 0 0 8px 8px;\n margin-top: -1px;\n"])), function (props) { return props.backgroundColor; });
|
|
20481
20481
|
var TrackingProgress = function (_a) {
|
|
20482
20482
|
var checkPoints = _a.checkPoints, amountOfCheckPoints = _a.amountOfCheckPoints;
|
|
@@ -20506,9 +20506,9 @@ var TrackingProgress = function (_a) {
|
|
|
20506
20506
|
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));
|
|
20507
20507
|
})] }), void 0));
|
|
20508
20508
|
};
|
|
20509
|
-
var templateObject_1$
|
|
20509
|
+
var templateObject_1$e, templateObject_2$c, templateObject_3$a, templateObject_4$a, templateObject_5$a, templateObject_6$9, templateObject_7$9, templateObject_8$5;
|
|
20510
20510
|
|
|
20511
|
-
var TimerContainer = newStyled.div(templateObject_1$
|
|
20511
|
+
var TimerContainer = newStyled.div(templateObject_1$d || (templateObject_1$d = __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) {
|
|
20512
20512
|
var textPosition = _a.textPosition;
|
|
20513
20513
|
return textPosition;
|
|
20514
20514
|
}, function (_a) {
|
|
@@ -20521,7 +20521,7 @@ var TimerContainer = newStyled.div(templateObject_1$c || (templateObject_1$c = _
|
|
|
20521
20521
|
var borderRadius = _a.borderRadius;
|
|
20522
20522
|
return borderRadius || '8px';
|
|
20523
20523
|
});
|
|
20524
|
-
var templateObject_1$
|
|
20524
|
+
var templateObject_1$d;
|
|
20525
20525
|
|
|
20526
20526
|
var getDefaultCountdown = function () {
|
|
20527
20527
|
var tomorrowDate = new Date();
|
|
@@ -20537,7 +20537,7 @@ var HurryUp = function (_a) {
|
|
|
20537
20537
|
return (jsxRuntime.jsxs(TimerContainer, __assign$1({ backgroundColor: backgroundColor || theme.component.card.backgroundColor, textPosition: textPosition, borderRadius: (!isFullVersion && theme.component.hurryUp.borderRadius) || '0', "data-testid": "HurryUp" }, { children: [clockPosition === 'left' && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Icon.PDP.Stopwatch, { width: iconSize, height: iconSize, fill: theme.colors.pallete.secondary.color }, void 0), "\u00A0"] }, void 0)), jsxRuntime.jsx(Text$7, __assign$1({ testId: "HurryUpText", variant: "body", size: "small", weight: "demi", color: hurryUpTextColor }, { children: hurryUpText }), void 0), "\u00A0", clockPosition === 'right' && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Icon.PDP.Stopwatch, { width: iconSize, height: iconSize, fill: theme.colors.pallete.secondary.color }, void 0), "\u00A0"] }, void 0)), showTimer && (jsxRuntime.jsx(Timer, __assign$1({ countdown: countdown, onTimeUp: function () { } }, timerProps, { isCardsVersion: isFullVersion }), void 0))] }), void 0));
|
|
20538
20538
|
};
|
|
20539
20539
|
|
|
20540
|
-
var Container$7 = newStyled.div(templateObject_1$
|
|
20540
|
+
var Container$7 = newStyled.div(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n svg {\n vertical-align: unset;\n }\n"], ["\n width: ", ";\n height: ", ";\n svg {\n vertical-align: unset;\n }\n"])), function (_a) {
|
|
20541
20541
|
var size = _a.size;
|
|
20542
20542
|
return (size ? size : '100%');
|
|
20543
20543
|
}, function (_a) {
|
|
@@ -20551,7 +20551,7 @@ var borderSize = {
|
|
|
20551
20551
|
large: '3px',
|
|
20552
20552
|
};
|
|
20553
20553
|
var DEFAULT_COLOR = '#5EAD9B';
|
|
20554
|
-
var StyledSpinner = newStyled.div(templateObject_2$
|
|
20554
|
+
var StyledSpinner = newStyled.div(templateObject_2$b || (templateObject_2$b = __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) {
|
|
20555
20555
|
var size = _a.size;
|
|
20556
20556
|
return borderSize[size];
|
|
20557
20557
|
}, function (_a) {
|
|
@@ -20564,7 +20564,7 @@ var StyledSpinner = newStyled.div(templateObject_2$a || (templateObject_2$a = __
|
|
|
20564
20564
|
var _b = _a.duration, duration = _b === void 0 ? 0.7 : _b;
|
|
20565
20565
|
return duration;
|
|
20566
20566
|
});
|
|
20567
|
-
var templateObject_1$
|
|
20567
|
+
var templateObject_1$c, templateObject_2$b;
|
|
20568
20568
|
|
|
20569
20569
|
var Spinner = function (_a) {
|
|
20570
20570
|
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;
|
|
@@ -20600,15 +20600,40 @@ var getDropdownOptions = function (frequency) {
|
|
|
20600
20600
|
}); });
|
|
20601
20601
|
};
|
|
20602
20602
|
|
|
20603
|
-
var Benefit$1 = newStyled.div(templateObject_1$
|
|
20604
|
-
var BenefitText$1 = newStyled(Text$7)(templateObject_2$
|
|
20605
|
-
var templateObject_1$
|
|
20603
|
+
var Benefit$1 = newStyled.div(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n display: flex;\n padding: 8px 0;\n svg {\n overflow: visible;\n }\n"], ["\n display: flex;\n padding: 8px 0;\n svg {\n overflow: visible;\n }\n"])));
|
|
20604
|
+
var BenefitText$1 = newStyled(Text$7)(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n line-height: 20px;\n margin-left: 9px;\n"], ["\n line-height: 20px;\n margin-left: 9px;\n"])));
|
|
20605
|
+
var templateObject_1$b, templateObject_2$a;
|
|
20606
20606
|
|
|
20607
20607
|
var BenefitsList = function (_a) {
|
|
20608
20608
|
var benefits = _a.benefits, isSelected = _a.isSelected, selectedColor = _a.selectedColor, baseColor = _a.baseColor;
|
|
20609
20609
|
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: benefits.map(function (benefit) { return (jsxRuntime.jsxs(Benefit$1, { children: [jsxRuntime.jsx(Icon.Actions.Check, { "data-testid": "icon-check", width: 1.2, height: 1.2, fill: isSelected ? selectedColor : baseColor }, void 0), jsxRuntime.jsx(BenefitText$1, { variant: "body", dangerouslySetInnerHTML: { __html: benefit } }, void 0)] }, benefit)); }) }, void 0));
|
|
20610
20610
|
};
|
|
20611
20611
|
|
|
20612
|
+
var AutoShipCardContainerWrapper = newStyled.div(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 1rem;\n border: 1px solid #e5e5e5;\n border-radius: 8px;\n padding: 10px;\n"], ["\n display: flex;\n flex-direction: column;\n gap: 1rem;\n border: 1px solid #e5e5e5;\n border-radius: 8px;\n padding: 10px;\n"])));
|
|
20613
|
+
var AutoShipHeaderBarWrapper = newStyled.div(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n gap: 10px;\n align-items: center;\n"], ["\n display: flex;\n flex-direction: row;\n gap: 10px;\n align-items: center;\n"])));
|
|
20614
|
+
var AutoShipBodyWrapper = newStyled.div(templateObject_3$9 || (templateObject_3$9 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n border-radius: 8px;\n background-color: #f7f7f7;\n"], ["\n display: flex;\n flex-direction: column;\n border-radius: 8px;\n background-color: #f7f7f7;\n"])));
|
|
20615
|
+
var AutoShipBodyTitle = newStyled.div(templateObject_4$9 || (templateObject_4$9 = __makeTemplateObject(["\n font-size: 14px;\n font-weight: 600;\n line-height: 22px;\n text-align: left;\n width: Fill (311px) px;\n height: Hug (34px) px;\n padding: 6px 10px 6px 10px;\n gap: 4px;\n opacity: 0px;\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n"], ["\n font-size: 14px;\n font-weight: 600;\n line-height: 22px;\n text-align: left;\n width: Fill (311px) px;\n height: Hug (34px) px;\n padding: 6px 10px 6px 10px;\n gap: 4px;\n opacity: 0px;\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n"])));
|
|
20616
|
+
var AutoShipBodyListItem = newStyled.div(templateObject_5$9 || (templateObject_5$9 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n gap: 10px;\n"], ["\n display: flex;\n flex-direction: row;\n gap: 10px;\n"])));
|
|
20617
|
+
var AutoShipBodyListWrapper = newStyled.div(templateObject_6$8 || (templateObject_6$8 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 10px;\n padding: 6px 10px 10px 10px;\n"], ["\n display: flex;\n flex-direction: column;\n gap: 10px;\n padding: 6px 10px 10px 10px;\n"])));
|
|
20618
|
+
var CheckboxInput = newStyled.input(templateObject_7$8 || (templateObject_7$8 = __makeTemplateObject(["\n width: 22px;\n height: 22px;\n gap: 0px;\n border-radius: 4px;\n border: 1px 0px 0px 0px;\n opacity: 0px;\n :checked {\n accent-color: #292929;\n }\n"], ["\n width: 22px;\n height: 22px;\n gap: 0px;\n border-radius: 4px;\n border: 1px 0px 0px 0px;\n opacity: 0px;\n :checked {\n accent-color: #292929;\n }\n"])));
|
|
20619
|
+
var templateObject_1$a, templateObject_2$9, templateObject_3$9, templateObject_4$9, templateObject_5$9, templateObject_6$8, templateObject_7$8;
|
|
20620
|
+
|
|
20621
|
+
function AutoshipOfferCard(_a) {
|
|
20622
|
+
var showMore = _a.showMore, copyList = _a.copyList, copy = _a.copy, handleCheckBoxChange = _a.handleCheckBoxChange, _b = _a.isChecked, isChecked = _b === void 0 ? false : _b;
|
|
20623
|
+
var _c = React$2.useState(false), showMoreBenefits = _c[0], setShowMoreBenefits = _c[1];
|
|
20624
|
+
var _d = React$2.useState(isChecked), check = _d[0], setCheck = _d[1];
|
|
20625
|
+
var handleShowMore = function () {
|
|
20626
|
+
setShowMoreBenefits(!showMoreBenefits);
|
|
20627
|
+
};
|
|
20628
|
+
var handleCheckBox = function () {
|
|
20629
|
+
setCheck(!check);
|
|
20630
|
+
if (handleCheckBoxChange) {
|
|
20631
|
+
handleCheckBoxChange(!check);
|
|
20632
|
+
}
|
|
20633
|
+
};
|
|
20634
|
+
return (jsxRuntime.jsxs(AutoShipCardContainerWrapper, { children: [jsxRuntime.jsxs(AutoShipHeaderBarWrapper, { children: [jsxRuntime.jsx("div", { children: jsxRuntime.jsx(CheckboxInput, { type: "checkbox", onChange: handleCheckBox, checked: check, "data-testid": "autoshipcheckbox" }, void 0) }, void 0), jsxRuntime.jsx("div", { children: copy }, void 0)] }, void 0), jsxRuntime.jsxs(AutoShipBodyWrapper, { children: [jsxRuntime.jsxs(AutoShipBodyTitle, __assign$1({ onClick: handleShowMore }, { children: [showMoreBenefits ? (jsxRuntime.jsx("span", { children: showMore.openedCopy }, void 0)) : (jsxRuntime.jsx("span", { children: showMore.closedCopy }, void 0)), showMoreBenefits ? (jsxRuntime.jsx(Icon$1, { name: "arrows/chevron_up" }, void 0)) : (jsxRuntime.jsx(Icon$1, { name: "arrows/chevron_down" }, void 0))] }), void 0), showMoreBenefits && (jsxRuntime.jsx(AutoShipBodyListWrapper, { children: copyList.map(function (item) { return (jsxRuntime.jsxs(AutoShipBodyListItem, { children: [jsxRuntime.jsx(Icon$1, { name: item.icon, fill: "#D4605B", width: "19px", height: "19px" }, void 0), item.copy] }, item.icon)); }) }, void 0))] }, void 0)] }, void 0));
|
|
20635
|
+
}
|
|
20636
|
+
|
|
20612
20637
|
var ContainerWrapper$1 = newStyled.div(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n max-height: 180px;\n width: auto;\n max-width: 450px;\n gap: 5px;\n @media (max-width: 480px) {\n gap: 0px;\n font-size: 12px !important;\n }\n"], ["\n display: flex;\n flex-direction: row;\n max-height: 180px;\n width: auto;\n max-width: 450px;\n gap: 5px;\n @media (max-width: 480px) {\n gap: 0px;\n font-size: 12px !important;\n }\n"])));
|
|
20613
20638
|
var ImageWrapper = newStyled.div(templateObject_2$8 || (templateObject_2$8 = __makeTemplateObject(["\n max-width: 132px;\n max-height: 160px;\n border-radius: 6px;\n @media (max-width: 480px) {\n width: 102px;\n height: 123px;\n }\n"], ["\n max-width: 132px;\n max-height: 160px;\n border-radius: 6px;\n @media (max-width: 480px) {\n width: 102px;\n height: 123px;\n }\n"])));
|
|
20614
20639
|
var ImageComponent = newStyled(Image$3)(templateObject_3$8 || (templateObject_3$8 = __makeTemplateObject(["\n max-width: 132px;\n max-height: 160px;\n border-radius: 6px;\n position: relative;\n @media (max-width: 480px) {\n max-width: 102px;\n max-height: 123px;\n }\n"], ["\n max-width: 132px;\n max-height: 160px;\n border-radius: 6px;\n position: relative;\n @media (max-width: 480px) {\n max-width: 102px;\n max-height: 123px;\n }\n"])));
|
|
@@ -21368,6 +21393,7 @@ exports.AmazonButton = AmazonButton;
|
|
|
21368
21393
|
exports.AssetsProvider = AssetsProvider;
|
|
21369
21394
|
exports.Autoship = Autoship;
|
|
21370
21395
|
exports.AutoshipFrequencyDropdown = AutoshipFrequencyDropdown;
|
|
21396
|
+
exports.AutoshipOfferCard = AutoshipOfferCard;
|
|
21371
21397
|
exports.AutoshipV2 = AutoshipV2;
|
|
21372
21398
|
exports.BasicAccordion = BasicAccordion;
|
|
21373
21399
|
exports.BeforeAfterCard = BeforeAfterCard;
|