@trafilea/afrodita-components 6.36.21 → 6.37.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 +17 -2
- package/build/index.esm.js +553 -525
- package/build/index.esm.js.map +1 -1
- package/build/index.js +553 -524
- package/build/index.js.map +1 -1
- package/package.json +1 -1
package/build/index.js
CHANGED
|
@@ -3207,7 +3207,7 @@ var getStylesBySize$g = function (size) {
|
|
|
3207
3207
|
};
|
|
3208
3208
|
}
|
|
3209
3209
|
};
|
|
3210
|
-
var Container$1p = newStyled.div(templateObject_1$
|
|
3210
|
+
var Container$1p = newStyled.div(templateObject_1$2j || (templateObject_1$2j = __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$1p = newStyled.div(templateObject_1$2i || (templateObject_1$2i = _
|
|
|
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$1F || (templateObject_2$1F = __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$1p, __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$2j, templateObject_2$1F;
|
|
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$1o = newStyled.div(templateObject_1$
|
|
3280
|
+
var Container$1o = newStyled.div(templateObject_1$2i || (templateObject_1$2i = __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$1o = newStyled.div(templateObject_1$2h || (templateObject_1$2h = _
|
|
|
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$1E || (templateObject_2$1E = __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$1o, __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$2i, templateObject_2$1E;
|
|
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$1n = newStyled.div(templateObject_1$
|
|
3429
|
-
var Price = newStyled.p(templateObject_2$
|
|
3428
|
+
var Container$1n = newStyled.div(templateObject_1$2h || (templateObject_1$2h = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
3429
|
+
var Price = newStyled.p(templateObject_2$1D || (templateObject_2$1D = __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$1C || (templateObject_2$1C = __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$1g || (templateObject_3$1g = __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$1n, __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$2h, templateObject_2$1D, templateObject_3$1g;
|
|
3487
3487
|
|
|
3488
|
-
var FinalPriceStyledContainer$3 = newStyled.div(templateObject_1$
|
|
3488
|
+
var FinalPriceStyledContainer$3 = newStyled.div(templateObject_1$2g || (templateObject_1$2g = __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$2g;
|
|
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$2f || (templateObject_1$2f = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
3560
|
+
var ContainerDirectionColumn = newStyled.div(templateObject_2$1C || (templateObject_2$1C = __makeTemplateObject(["\n display: column;\n align-items: center;\n"], ["\n display: column;\n align-items: center;\n"])));
|
|
3561
|
+
var DiscountEachOneContainer = newStyled.div(templateObject_3$1f || (templateObject_3$1f = __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$2f, templateObject_2$1C, templateObject_3$1f;
|
|
3633
3633
|
|
|
3634
|
-
var FinalPriceStyledContainer$1 = newStyled.div(templateObject_1$
|
|
3634
|
+
var FinalPriceStyledContainer$1 = newStyled.div(templateObject_1$2e || (templateObject_1$2e = __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$2e;
|
|
3669
3669
|
|
|
3670
|
-
var FinalPriceStyledContainer = newStyled.div(templateObject_1$
|
|
3670
|
+
var FinalPriceStyledContainer = newStyled.div(templateObject_1$2d || (templateObject_1$2d = __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$1n, __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$2d;
|
|
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$2c || (templateObject_1$2c = __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$1B || (templateObject_2$1B = __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$2c, templateObject_2$1B;
|
|
3708
3708
|
|
|
3709
3709
|
var ClubPriceMemberLabel = function (_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 @@ var ClubPriceMemberLabel = function (_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$1m = newStyled.div(templateObject_1$
|
|
3716
|
+
var Container$1m = newStyled.div(templateObject_1$2b || (templateObject_1$2b = __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$1m, { "data-testid": "skeleton-container", width: width, height: height, theme: theme }, void 0);
|
|
3742
3742
|
};
|
|
3743
|
-
var templateObject_1$
|
|
3743
|
+
var templateObject_1$2b;
|
|
3744
3744
|
|
|
3745
|
-
var StyledSvgWrapper = newStyled.svg(templateObject_1$
|
|
3745
|
+
var StyledSvgWrapper = newStyled.svg(templateObject_1$2a || (templateObject_1$2a = __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$29 || (templateObject_1$29
|
|
|
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$1A || (templateObject_2$1A = __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$1z || (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$2a, templateObject_2$1A;
|
|
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$1 = newStyled.img(templateObject_1$
|
|
3950
|
+
var Img$1 = newStyled.img(templateObject_1$29 || (templateObject_1$29 = __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$1, __assign$1({ src: source, srcSet: srcSet, sizes: sizes, loading: loading, decoding: decoding, alt: alt, height: height, width: width, borderRadius: borderRadius, objectFit: objectFit, objectPosition: objectPosition }, rest), void 0));
|
|
3958
3958
|
};
|
|
3959
|
-
var templateObject_1$
|
|
3959
|
+
var templateObject_1$29;
|
|
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$28 || (templateObject_1$28 = __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$1z || (templateObject_2$1z = __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$1e || (templateObject_3$1e = __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$28, templateObject_2$1z, templateObject_3$1e;
|
|
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$27 || (templateObject_1$27 = __makeTemplateObject([""], [""]))),
|
|
4802
|
+
hero2: newStyled.h2(templateObject_2$1y || (templateObject_2$1y = __makeTemplateObject([""], [""]))),
|
|
4803
|
+
hero3: newStyled.h3(templateObject_3$1d || (templateObject_3$1d = __makeTemplateObject([""], [""]))),
|
|
4804
|
+
display1: newStyled.h1(templateObject_4$_ || (templateObject_4$_ = __makeTemplateObject([""], [""]))),
|
|
4805
|
+
display2: newStyled.h2(templateObject_5$K || (templateObject_5$K = __makeTemplateObject([""], [""]))),
|
|
4806
|
+
display3: newStyled.h3(templateObject_6$F || (templateObject_6$F = __makeTemplateObject([""], [""]))),
|
|
4807
|
+
heading1: newStyled.h1(templateObject_7$w || (templateObject_7$w = __makeTemplateObject([""], [""]))),
|
|
4808
4808
|
heading2: newStyled.h2(templateObject_8$o || (templateObject_8$o = __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$1l = 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$27, templateObject_2$1y, templateObject_3$1d, templateObject_4$_, templateObject_5$K, templateObject_6$F, templateObject_7$w, templateObject_8$o, 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$1l = newStyled.div(templateObject_1$26 || (templateObject_1$26 = __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$1x || (templateObject_2$1x = __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$1c || (templateObject_3$1c = __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$Z || (templateObject_4$Z = __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$J || (templateObject_5$J = __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$E || (templateObject_6$E = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n flex-wrap: wrap;\n"], ["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n flex-wrap: wrap;\n"])));
|
|
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$1l, __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$26, templateObject_2$1x, templateObject_3$1c, templateObject_4$Z, templateObject_5$J, templateObject_6$E;
|
|
4970
4970
|
|
|
4971
|
-
var Container$1k = newStyled.div(templateObject_1$
|
|
4972
|
-
var DropContainer = newStyled.div(templateObject_2$
|
|
4971
|
+
var Container$1k = newStyled.div(templateObject_1$25 || (templateObject_1$25 = __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$1w || (templateObject_2$1w = __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$1k, { 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$25, templateObject_2$1w;
|
|
4980
4980
|
|
|
4981
4981
|
var DROPS_TOTAL = 5;
|
|
4982
|
-
var Container$1j = newStyled.div(templateObject_1$
|
|
4983
|
-
var Title$b = newStyled.p(templateObject_2$
|
|
4984
|
-
var Description$3 = newStyled.p(templateObject_3$
|
|
4982
|
+
var Container$1j = newStyled.div(templateObject_1$24 || (templateObject_1$24 = __makeTemplateObject(["\n height: 32px;\n display: flex;\n"], ["\n height: 32px;\n display: flex;\n"])));
|
|
4983
|
+
var Title$b = newStyled.p(templateObject_2$1v || (templateObject_2$1v = __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$1b || (templateObject_3$1b = __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$1j, { 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$24, templateObject_2$1v, templateObject_3$1b;
|
|
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$23 || (templateObject_1$23 = __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$23;
|
|
5090
5090
|
|
|
5091
|
-
var Container$1i = newStyled.div(templateObject_1$
|
|
5091
|
+
var Container$1i = newStyled.div(templateObject_1$22 || (templateObject_1$22 = __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$22;
|
|
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$21 || (templateObject_1$21 = __makeTemplateObject(["\n font-weight: bold;\n"], ["\n font-weight: bold;\n"])));
|
|
5252
|
+
var FlexContainer$4 = newStyled.div(templateObject_2$1u || (templateObject_2$1u = __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$21, templateObject_2$1u;
|
|
5254
5254
|
|
|
5255
|
-
var Container$1h = newStyled.div(templateObject_1$
|
|
5255
|
+
var Container$1h = newStyled.div(templateObject_1$20 || (templateObject_1$20 = __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$1t || (templateObject_2$1t = __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$1a || (templateObject_3$1a = __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$Y || (templateObject_4$Y = __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$I || (templateObject_5$I = __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$20, templateObject_2$1t, templateObject_3$1a, templateObject_4$Y, templateObject_5$I;
|
|
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$1$ || (templateObject_1$1$ = __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$1s || (templateObject_2$1s = __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$1$, templateObject_2$1s;
|
|
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$1_ || (templateObject_1$1_ = __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$1_;
|
|
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$1Z || (templateObject_1$1Z = __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$1Z;
|
|
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$1g = newStyled.div(templateObject_1$
|
|
5582
|
+
var Container$1g = newStyled.div(templateObject_1$1Y || (templateObject_1$1Y = __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$1r || (templateObject_2$1r = __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$1g, { 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: sizeLabel, style: { color: colorLabel ? colorLabel : theme.colors.shades['700'].color }, variant: checked ? 'demi' : 'regular', htmlFor: id, disabled: disabled }, { children: text }), void 0)] }, void 0));
|
|
5608
5608
|
};
|
|
5609
|
-
var templateObject_1$
|
|
5609
|
+
var templateObject_1$1Y, templateObject_2$1r;
|
|
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$1f = newStyled.div(templateObject_1$
|
|
5659
|
-
var RequiredPlaceholder = newStyled.p(templateObject_2$
|
|
5660
|
-
var SelectedOption = newStyled.span(templateObject_3$
|
|
5658
|
+
var Container$1f = newStyled.div(templateObject_1$1X || (templateObject_1$1X = __makeTemplateObject([""], [""])));
|
|
5659
|
+
var RequiredPlaceholder = newStyled.p(templateObject_2$1q || (templateObject_2$1q = __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$19 || (templateObject_3$19 = __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$1f : 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$1X, templateObject_2$1q, templateObject_3$19;
|
|
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$1W || (templateObject_1$1W = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
5762
5762
|
var Container$1e = 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$1p || (templateObject_2$1p = __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$18 || (templateObject_3$18 = __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$X || (templateObject_4$X = __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$1e, __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$1W, templateObject_2$1p, templateObject_3$18, templateObject_4$X;
|
|
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$1V || (templateObject_1$1V = __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$1U || (templateObject_1$1U = __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$1o || (templateObject_2$1o = __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$1n || (templateObject_2$1n
|
|
|
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$17 || (templateObject_3$17 = __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$W || (templateObject_4$W = __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$V || (templateObject_4$V = __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$H || (templateObject_5$H = __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$D || (templateObject_6$D = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n"])), function (_a) {
|
|
5947
5947
|
var color = _a.color;
|
|
5948
5948
|
return color;
|
|
5949
5949
|
});
|
|
5950
|
-
var IconContainer$6 = newStyled.div(templateObject_7$
|
|
5950
|
+
var IconContainer$6 = newStyled.div(templateObject_7$v || (templateObject_7$v = __makeTemplateObject(["\n width: 1.375rem;\n height: 1.125rem;\n margin-right: 0.563rem;\n"], ["\n width: 1.375rem;\n height: 1.125rem;\n margin-right: 0.563rem;\n"])));
|
|
5951
5951
|
var CloseToolTip = newStyled.button(templateObject_8$n || (templateObject_8$n = __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$1V, templateObject_2$1o, templateObject_3$17, templateObject_4$W, templateObject_5$H, templateObject_6$D, templateObject_7$v, templateObject_8$n;
|
|
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$1U || (templateObject_1$1U = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5999
|
+
var ContainerBase$3 = newStyled.div(templateObject_2$1n || (templateObject_2$1n = __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$1m || (templateObject_2$1m
|
|
|
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$16 || (templateObject_3$16 = __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$V || (templateObject_4$V = __makeTemplateObject(["\n padding: 16px;\n"], ["\n padding: 16px;\n"])));
|
|
6018
|
+
var SubscriptionHeader$3 = newStyled.div(templateObject_5$G || (templateObject_5$G = __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$C || (templateObject_6$C = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
6026
|
+
var Benefit$3 = newStyled.div(templateObject_7$u || (templateObject_7$u = __makeTemplateObject(["\n display: flex;\n padding: 8px 0px;\n svg {\n overflow: visible;\n }\n"], ["\n display: flex;\n padding: 8px 0px;\n svg {\n overflow: visible;\n }\n"])));
|
|
6027
6027
|
var BenefitText$3 = newStyled(Text$7)(templateObject_8$m || (templateObject_8$m = __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$1d = newStyled.div(templateObject_13$4 || (templateObject_13$4 = __makeTemplateObject([""], [""])));
|
|
6036
|
-
var templateObject_1$
|
|
6036
|
+
var templateObject_1$1U, templateObject_2$1n, templateObject_3$16, templateObject_4$V, templateObject_5$G, templateObject_6$C, templateObject_7$u, templateObject_8$m, 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$1T || (templateObject_1$1T = __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$1m || (templateObject_2$1m = __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$15 || (templateObject_3$15 = __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$14 || (templateObject_3$14
|
|
|
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$U || (templateObject_4$U = __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$F || (templateObject_5$F = __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$B || (templateObject_6$B = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n border-bottom: 1px solid ", ";\n padding-bottom: 10px;\n margin-bottom: 8px;\n cursor: pointer;\n\n & input:checked + div {\n border-color: ", ";\n }\n"], ["\n display: flex;\n justify-content: space-between;\n border-bottom: 1px solid ", ";\n padding-bottom: 10px;\n margin-bottom: 8px;\n cursor: pointer;\n\n & input:checked + div {\n border-color: ", ";\n }\n"])), function (_a) {
|
|
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$t || (templateObject_7$t = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
6137
6137
|
var Benefit$2 = newStyled.div(templateObject_8$l || (templateObject_8$l = __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$1T, templateObject_2$1m, templateObject_3$15, templateObject_4$U, templateObject_5$F, templateObject_6$B, templateObject_7$t, templateObject_8$l, 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$1S || (templateObject_1$1S = __makeTemplateObject([""], [""])));
|
|
6228
|
+
var CustomerInfo = newStyled.div(templateObject_2$1l || (templateObject_2$1l = __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$14 || (templateObject_3$14 = __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$T || (templateObject_4$T = __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$E || (templateObject_5$E = __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$A || (templateObject_6$A = __makeTemplateObject(["\n display: block;\n font-size: 14px;\n font-style: italic;\n font-weight: 300;\n"], ["\n display: block;\n font-size: 14px;\n font-style: italic;\n font-weight: 300;\n"])));
|
|
6233
|
+
var templateObject_1$1S, templateObject_2$1l, templateObject_3$14, templateObject_4$T, templateObject_5$E, templateObject_6$A;
|
|
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$1b = 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$1b = newStyled.div(templateObject_1$1R || (templateObject_1$1R = __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$1k || (templateObject_2$1k = __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$13 || (templateObject_3$13 = __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$S || (templateObject_4$S = __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$R || (templateObject_4$R = __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$1R, templateObject_2$1k, templateObject_3$13, templateObject_4$S;
|
|
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$1b, __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$1Q || (templateObject_1$1Q = __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$1Q;
|
|
6354
6354
|
|
|
6355
|
-
var Body = newStyled.div(templateObject_1$
|
|
6355
|
+
var Body = newStyled.div(templateObject_1$1P || (templateObject_1$1P = __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$1P;
|
|
6361
6361
|
|
|
6362
|
-
var Container$1a = newStyled.div(templateObject_1$
|
|
6362
|
+
var Container$1a = newStyled.div(templateObject_1$1O || (templateObject_1$1O = __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$1O;
|
|
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$1N || (templateObject_1$1N = __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$1j || (templateObject_2$1j = __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$12 || (templateObject_3$12 = __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$R || (templateObject_4$R = __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$1N, templateObject_2$1j, templateObject_3$12, templateObject_4$R;
|
|
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$19 = 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$19 = newStyled.div(templateObject_1$1M || (templateObject_1$1M = __makeTemplateObject(["\n padding: 0.625rem 1.5rem;\n"], ["\n padding: 0.625rem 1.5rem;\n"])));
|
|
6402
|
+
var Title$9 = newStyled.h1(templateObject_2$1i || (templateObject_2$1i = __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$11 || (templateObject_3$11 = __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$Q || (templateObject_4$Q = __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$19, { 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$1M, templateObject_2$1i, templateObject_3$11, templateObject_4$Q;
|
|
6411
6411
|
|
|
6412
6412
|
var Bundle = {
|
|
6413
6413
|
Minimalistic: Minimalistic,
|
|
6414
6414
|
Simple: Simple,
|
|
6415
6415
|
};
|
|
6416
6416
|
|
|
6417
|
-
var Container$18 = newStyled.div(templateObject_1$
|
|
6417
|
+
var Container$18 = newStyled.div(templateObject_1$1L || (templateObject_1$1L = __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$1h || (templateObject_2$1h = __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$10 || (templateObject_3$10 = __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$18, __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$1L, templateObject_2$1h, templateObject_3$10;
|
|
6435
6435
|
|
|
6436
|
-
var Text$6 = newStyled.span(templateObject_1$
|
|
6436
|
+
var Text$6 = newStyled.span(templateObject_1$1K || (templateObject_1$1K = __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$1K;
|
|
6443
6443
|
|
|
6444
|
-
var P$3 = newStyled.p(templateObject_1$
|
|
6444
|
+
var P$3 = newStyled.p(templateObject_1$1J || (templateObject_1$1J = __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$1J;
|
|
6451
6451
|
|
|
6452
|
-
var Text$5 = newStyled.span(templateObject_1$
|
|
6452
|
+
var Text$5 = newStyled.span(templateObject_1$1I || (templateObject_1$1I = __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$1I;
|
|
6459
6459
|
|
|
6460
|
-
var Container$17 = newStyled.div(templateObject_1$
|
|
6460
|
+
var Container$17 = newStyled.div(templateObject_1$1H || (templateObject_1$1H = __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$17, __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$1H;
|
|
6467
6467
|
|
|
6468
|
-
var Text$4 = newStyled.h3(templateObject_1$
|
|
6468
|
+
var Text$4 = newStyled.h3(templateObject_1$1G || (templateObject_1$1G = __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$1G;
|
|
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$16 = newStyled.div(templateObject_1$
|
|
6494
|
-
var MobileContainer = newStyled(Container$16)(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$16 = newStyled.div(templateObject_1$1F || (templateObject_1$1F = __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$16)(templateObject_2$1g || (templateObject_2$1g = __makeTemplateObject(["\n padding: 2px 2px;\n gap: 3px;\n"], ["\n padding: 2px 2px;\n gap: 3px;\n"])));
|
|
6495
|
+
var DollarPart = newStyled.span(templateObject_3$$ || (templateObject_3$$ = __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$P || (templateObject_4$P = __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$D || (templateObject_5$D = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
6498
|
+
var MobileClubMembersText = newStyled(ClubMembersText)(templateObject_6$z || (templateObject_6$z = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
6499
|
+
var DesktopDollarPart = newStyled(DollarPart)(templateObject_7$s || (templateObject_7$s = __makeTemplateObject(["\n font-size: 13px;\n"], ["\n font-size: 13px;\n"])));
|
|
6500
6500
|
var DesktopClubMembersText = newStyled(ClubMembersText)(templateObject_8$k || (templateObject_8$k = __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$16, { 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$1F, templateObject_2$1g, templateObject_3$$, templateObject_4$P, templateObject_5$D, templateObject_6$z, templateObject_7$s, templateObject_8$k;
|
|
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$15 = 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$15 = newStyled('div')(templateObject_1$1E || (templateObject_1$1E = __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$1f || (templateObject_2$1f = __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$_ || (templateObject_3$_ = __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$O || (templateObject_4$O = __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$15, __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$1E, templateObject_2$1f, templateObject_3$_, templateObject_4$O;
|
|
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$1D || (templateObject_1$1D = __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$1e || (templateObject_2$1e = __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$Z || (templateObject_3$Z = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
6533
|
+
var PriceContainerV2 = newStyled.span(templateObject_4$N || (templateObject_4$N = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
6534
|
+
var PriceWithTagContainer = newStyled.span(templateObject_5$C || (templateObject_5$C = __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$1D, templateObject_2$1e, templateObject_3$Z, templateObject_4$N, templateObject_5$C;
|
|
6588
6588
|
|
|
6589
6589
|
var STARTS_NUMBER = 5;
|
|
6590
6590
|
|
|
6591
|
-
var Container$14 = newStyled.div(templateObject_1$
|
|
6592
|
-
var templateObject_1$
|
|
6591
|
+
var Container$14 = newStyled.div(templateObject_1$1C || (templateObject_1$1C = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
6592
|
+
var templateObject_1$1C;
|
|
6593
6593
|
|
|
6594
|
-
var StarContainer = newStyled.div(templateObject_1$
|
|
6594
|
+
var StarContainer = newStyled.div(templateObject_1$1B || (templateObject_1$1B = __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$1B;
|
|
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$13 = newStyled.a(templateObject_1$
|
|
6651
|
+
var Container$13 = newStyled.a(templateObject_1$1A || (templateObject_1$1A = __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$1d || (templateObject_2$1d = __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$1A, templateObject_2$1d;
|
|
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$12 = 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$1z || (templateObject_1$1z = __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$12 = newStyled.a(templateObject_2$1c || (templateObject_2$1c = __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$Y || (templateObject_3$Y = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: min-content;\n text-decoration: none;\n"], ["\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$M || (templateObject_4$M = __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$9 = newStyled.div(templateObject_5$
|
|
6820
|
+
var TopTagContainer$9 = newStyled.div(templateObject_5$B || (templateObject_5$B = __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$9 = newStyled.div(templateObject_6$
|
|
6824
|
+
var BottomTagContainer$9 = newStyled.div(templateObject_6$y || (templateObject_6$y = __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$r || (templateObject_7$r = __makeTemplateObject(["\n margin-top: 8px;\n"], ["\n margin-top: 8px;\n"])));
|
|
6829
6829
|
var ClubOfferPriceLabelWrapper = newStyled.div(templateObject_8$j || (templateObject_8$j = __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$1z, templateObject_2$1c, templateObject_3$Y, templateObject_4$M, templateObject_5$B, templateObject_6$y, templateObject_7$r, templateObject_8$j;
|
|
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$11 = 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$1y || (templateObject_1$1y = __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$11 = newStyled.a(templateObject_2$1b || (templateObject_2$1b = __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$X || (templateObject_3$X = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: min-content;\n text-decoration: none;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: min-content;\n text-decoration: none;\n"])));
|
|
6908
|
+
var Title$6 = newStyled.p(templateObject_4$L || (templateObject_4$L = __makeTemplateObject(["\n font-size: 0.83rem;\n font-weight: normal;\n line-height: 1.375rem;\n min-height: 2.75rem;\n text-align: center;\n color: ", ";\n margin: 0.25rem 0;\n text-align: ", ";\n"], ["\n font-size: 0.83rem;\n font-weight: normal;\n line-height: 1.375rem;\n min-height: 2.75rem;\n text-align: center;\n color: ", ";\n margin: 0.25rem 0;\n text-align: ", ";\n"])), function (props) { return props.theme.colors.pallete.secondary.color; }, function (props) { return props.align; });
|
|
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$8 = newStyled.div(templateObject_5$
|
|
6934
|
+
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) {
|
|
6935
6935
|
var style = _a.style;
|
|
6936
6936
|
return style.width;
|
|
6937
6937
|
});
|
|
6938
|
-
var TopRightTagContainer$3 = newStyled.div(templateObject_6$
|
|
6939
|
-
var BottomTagContainer$8 = newStyled.div(templateObject_7$
|
|
6938
|
+
var TopRightTagContainer$3 = newStyled.div(templateObject_6$x || (templateObject_6$x = __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$8 = newStyled.div(templateObject_7$q || (templateObject_7$q = __makeTemplateObject(["\n position: absolute;\n bottom: 10%;\n left: 0;\n width: ", ";\n z-index: 1;\n"], ["\n position: absolute;\n bottom: 10%;\n left: 0;\n width: ", ";\n z-index: 1;\n"])), function (_a) {
|
|
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$1y, templateObject_2$1b, templateObject_3$X, templateObject_4$L, templateObject_5$A, templateObject_6$x, templateObject_7$q, templateObject_8$i;
|
|
6995
6995
|
|
|
6996
|
-
var Container$10 = newStyled.div(templateObject_1$
|
|
6996
|
+
var Container$10 = newStyled.div(templateObject_1$1x || (templateObject_1$1x = __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$10, __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$1x;
|
|
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$1w || (templateObject_1$1w = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
7015
|
+
newStyled(lt.Label)(templateObject_2$1a || (templateObject_2$1a = __makeTemplateObject(["\n font-size: 0.88rem;\n"], ["\n font-size: 0.88rem;\n"])));
|
|
7016
|
+
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$W || (templateObject_3$W = __makeTemplateObject(["\n margin-right: 8px;\n\n svg {\n cursor: pointer;\n }\n"], ["\n margin-right: 8px;\n\n svg {\n cursor: pointer;\n }\n"])));
|
|
7017
|
+
var Span = newStyled.span(templateObject_4$K || (templateObject_4$K = __makeTemplateObject(["\n font-weight: 600;\n"], ["\n font-weight: 600;\n"])));
|
|
7018
|
+
var OptionsContainer = newStyled.div(templateObject_5$z || (templateObject_5$z = __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$1w, templateObject_2$1a, templateObject_3$W, templateObject_4$K, templateObject_5$z;
|
|
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$$ = newStyled.div(templateObject_1$
|
|
7077
|
+
var Container$$ = newStyled.div(templateObject_1$1v || (templateObject_1$1v = __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$19 || (templateObject_2$19 = __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$$, __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$1v, templateObject_2$19;
|
|
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$1u || (templateObject_1$1u = __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$1u;
|
|
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$1t || (templateObject_1$1t = __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$18 || (templateObject_2$18 = __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$V || (templateObject_3$V = __makeTemplateObject(["\n display: flex;\n align-items: center;\n width: 100%;\n margin-left: 10px;\n\n ", ";\n"], ["\n display: flex;\n align-items: center;\n width: 100%;\n margin-left: 10px;\n\n ", ";\n"])), function (props) {
|
|
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$J || (templateObject_4$J = __makeTemplateObject(["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 500;\n margin-bottom: 0.125rem;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 500;\n margin-bottom: 0.125rem;\n margin: 0;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
7166
|
+
var H3$1 = newStyled.h3(templateObject_5$y || (templateObject_5$y = __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$w || (templateObject_6$w = __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$1t, templateObject_2$18, templateObject_3$V, templateObject_4$J, templateObject_5$y, templateObject_6$w;
|
|
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$1s || (templateObject_1$1s = __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$1r || (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$17 || (templateObject_2$17 = __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$1s, templateObject_2$17;
|
|
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$_ = newStyled.div(templateObject_1$
|
|
7315
|
-
var IconContainer$5 = newStyled.div(templateObject_2$
|
|
7316
|
-
var Text$3 = newStyled.p(templateObject_3$
|
|
7317
|
-
var Details = newStyled.span(templateObject_4$
|
|
7314
|
+
var Container$_ = newStyled.div(templateObject_1$1r || (templateObject_1$1r = __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$5 = newStyled.div(templateObject_2$16 || (templateObject_2$16 = __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$U || (templateObject_3$U = __makeTemplateObject(["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 400;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 400;\n margin: 0;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
7317
|
+
var Details = newStyled.span(templateObject_4$I || (templateObject_4$I = __makeTemplateObject(["\n color: ", ";\n font-weight: 700;\n"], ["\n color: ", ";\n font-weight: 700;\n"])), function (props) { return props.color; });
|
|
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$_, __assign$1({ color: backgroundColor ? backgroundColor : theme.component.deliveryDetails.note.backgroundColor, "data-testid": "Container" }, { children: [jsxRuntime.jsx(IconContainer$5, { children: jsxRuntime.jsx(Icon.Actions.Warning, { fill: accentColor ? accentColor : theme.component.deliveryDetails.note.accentColor }, void 0) }, void 0), jsxRuntime.jsx("div", { children: jsxRuntime.jsxs(Text$3, __assign$1({ color: color ? color : theme.component.deliveryDetails.note.color }, { children: [importantNoteText && (jsxRuntime.jsxs(Details, __assign$1({ color: accentColor ? accentColor : theme.component.deliveryDetails.note.accentColor }, { children: [importantNoteText, ":"] }), void 0)), ' ', text] }), void 0) }, void 0)] }), void 0));
|
|
7322
7322
|
};
|
|
7323
|
-
var templateObject_1$
|
|
7323
|
+
var templateObject_1$1r, templateObject_2$16, templateObject_3$U, templateObject_4$I;
|
|
7324
7324
|
|
|
7325
|
-
var Title$5 = newStyled.h1(templateObject_1$
|
|
7325
|
+
var Title$5 = newStyled.h1(templateObject_1$1q || (templateObject_1$1q = __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$15 || (templateObject_2$15 = __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$T || (templateObject_3$T = __makeTemplateObject(["\n display: flex;\n ", "\n justify-content: space-between;\n align-items: flex-start;\n"], ["\n display: flex;\n ", "\n justify-content: space-between;\n align-items: flex-start;\n"])), mediaQueries({
|
|
7331
7331
|
flexDirection: ['column', 'row'],
|
|
7332
7332
|
}));
|
|
7333
|
-
var Col = newStyled.div(templateObject_4$
|
|
7333
|
+
var Col = newStyled.div(templateObject_4$H || (templateObject_4$H = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n justify-content: center;\n flex: 1;\n ", "\n"], ["\n display: flex;\n flex-direction: column;\n justify-content: center;\n flex: 1;\n ", "\n"])), mediaQueries({
|
|
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$4 = newStyled.div(templateObject_5$
|
|
7340
|
+
var IconContainer$4 = newStyled.div(templateObject_5$x || (templateObject_5$x = __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$v || (templateObject_6$v = __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$p || (templateObject_7$p = __makeTemplateObject(["\n color: ", ";\n ", "\n margin: 0;\n margin-top: 0.625rem;\n ", ";\n"], ["\n color: ", ";\n ", "\n margin: 0;\n margin-top: 0.625rem;\n ", ";\n"])), function (props) { return props.color; }, function (_a) {
|
|
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$4, __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$4, __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$4, __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$1q, templateObject_2$15, templateObject_3$T, templateObject_4$H, templateObject_5$x, templateObject_6$v, templateObject_7$p, templateObject_8$h;
|
|
7369
7369
|
|
|
7370
|
-
var Backdrop = newStyled.div(templateObject_1$
|
|
7370
|
+
var Backdrop = newStyled.div(templateObject_1$1p || (templateObject_1$1p = __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$14 || (templateObject_2$14 = __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$1p, templateObject_2$14;
|
|
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$1o || (templateObject_1$1o = __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$13 || (templateObject_2$13 = __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$S || (templateObject_3$S = __makeTemplateObject(["\n right: -0.938rem;\n min-width: 9.375rem;\n position: absolute;\n padding-top: 0.625rem;\n margin-top: -0.188rem;\n width: max-content;\n visibility: hidden;\n"], ["\n right: -0.938rem;\n min-width: 9.375rem;\n position: absolute;\n padding-top: 0.625rem;\n margin-top: -0.188rem;\n width: max-content;\n visibility: hidden;\n"])));
|
|
7434
|
+
var ArrowContainer$1 = newStyled.div(templateObject_4$G || (templateObject_4$G = __makeTemplateObject(["\n transform: rotate(180deg);\n display: flex;\n justify-content: flex-start;\n margin-bottom: -0.063rem;\n padding-left: 0.938rem;\n"], ["\n transform: rotate(180deg);\n display: flex;\n justify-content: flex-start;\n margin-bottom: -0.063rem;\n padding-left: 0.938rem;\n"])));
|
|
7435
|
+
var StyledDropdown = newStyled.ul(templateObject_5$w || (templateObject_5$w = __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$u || (templateObject_6$u = __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$1o, templateObject_2$13, templateObject_3$S, templateObject_4$G, templateObject_5$w, templateObject_6$u;
|
|
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$1n || (templateObject_1$1n = __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$12 || (templateObject_2$12 = __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$R || (templateObject_3$R = __makeTemplateObject(["\n margin-right: 8px;\n"], ["\n margin-right: 8px;\n"])));
|
|
7453
|
+
var DetailLabel = newStyled.span(templateObject_4$F || (templateObject_4$F = __makeTemplateObject(["\n text-align: center;\n flex-grow: 1;\n font-weight: 400;\n color: var(--colors-shades-400-color);\n"], ["\n text-align: center;\n flex-grow: 1;\n font-weight: 400;\n color: var(--colors-shades-400-color);\n"])));
|
|
7454
|
+
var DropdownOptions = newStyled.div(templateObject_5$v || (templateObject_5$v = __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$t || (templateObject_6$t = __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$1n, templateObject_2$12, templateObject_3$R, templateObject_4$F, templateObject_5$v, templateObject_6$t;
|
|
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$1m || (templateObject_1$1m = __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$11 || (templateObject_2$11 = __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$Q || (templateObject_3$Q = __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$E || (templateObject_4$E = __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$1m, templateObject_2$11, templateObject_3$Q, templateObject_4$E;
|
|
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$Z = newStyled.div(templateObject_4$
|
|
7524
|
+
var Title$4 = newStyled.div(templateObject_1$1l || (templateObject_1$1l = __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$10 || (templateObject_2$10 = __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$P || (templateObject_3$P = __makeTemplateObject(["\n width: 1rem;\n height: 1rem;\n"], ["\n width: 1rem;\n height: 1rem;\n"])));
|
|
7527
|
+
var Container$Z = newStyled.div(templateObject_4$D || (templateObject_4$D = __makeTemplateObject(["\n @media (max-width: 768px) {\n display: ", ";\n }\n"], ["\n @media (max-width: 768px) {\n display: ", ";\n }\n"])), function (props) { return (props.showInMobile ? 'block' : 'none'); });
|
|
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$Z, __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$3 = 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$1l, templateObject_2$10, templateObject_3$P, templateObject_4$D;
|
|
7535
|
+
|
|
7536
|
+
var SectionContent = newStyled.div(templateObject_1$1k || (templateObject_1$1k = __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$3 = newStyled.div(templateObject_2$$ || (templateObject_2$$ = __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$O || (templateObject_3$O = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 2.25rem;\n margin-top: 1.063rem;\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 2.25rem;\n margin-top: 1.063rem;\n"])));
|
|
7539
|
+
var MobileIconsContainer = newStyled.div(templateObject_4$C || (templateObject_4$C = __makeTemplateObject(["\n width: 1.5rem;\n height: 1.5rem;\n cursor: pointer;\n"], ["\n width: 1.5rem;\n height: 1.5rem;\n cursor: pointer;\n"])));
|
|
7540
|
+
var H4 = newStyled.h4(templateObject_5$u || (templateObject_5$u = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
7541
|
+
var FilterLink = newStyled.a(templateObject_6$s || (templateObject_6$s = __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$o || (templateObject_7$o = __makeTemplateObject(["\n margin-bottom: 1.25rem;\n &:last-child {\n margin-bottom: 0;\n }\n @media (max-width: 768px) {\n display: ", ";\n }\n @media (min-width: 768px) and (max-width: 992px) {\n display: ", ";\n }\n"], ["\n margin-bottom: 1.25rem;\n &:last-child {\n margin-bottom: 0;\n }\n @media (max-width: 768px) {\n display: ", ";\n }\n @media (min-width: 768px) and (max-width: 992px) {\n display: ", ";\n }\n"])), function (props) { return (props.showInMobile ? 'block' : 'none'); }, function (props) { return (props.showInTablet ? 'block' : 'none'); });
|
|
7543
7543
|
var ClearAll = newStyled.span(templateObject_8$g || (templateObject_8$g = __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$1k, templateObject_2$$, templateObject_3$O, templateObject_4$C, templateObject_5$u, templateObject_6$s, templateObject_7$o, templateObject_8$g, 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$1j || (templateObject_1$1j = __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$_ || (templateObject_2$_ = __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$N || (templateObject_3$N = __makeTemplateObject(["\n width: 0.656rem;\n height: 0.656rem;\n display: flex;\n align-items: center;\n margin-left: 0.5rem;\n cursor: pointer;\n"], ["\n width: 0.656rem;\n height: 0.656rem;\n display: flex;\n align-items: center;\n margin-left: 0.5rem;\n cursor: pointer;\n"])));
|
|
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$1j, templateObject_2$_, templateObject_3$N;
|
|
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$Y = newStyled.div(templateObject_2$
|
|
7757
|
+
var Wrapper$4 = newStyled.div(templateObject_1$1i || (templateObject_1$1i = __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$Y = newStyled.div(templateObject_2$Z || (templateObject_2$Z = __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$1i, templateObject_2$Z;
|
|
7777
7777
|
|
|
7778
|
-
var Container$X = newStyled.div(templateObject_1$
|
|
7779
|
-
var P$2 = newStyled.p(templateObject_2$
|
|
7778
|
+
var Container$X = newStyled.div(templateObject_1$1h || (templateObject_1$1h = __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$Y || (templateObject_2$Y = __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$X, __assign$1({ theme: theme }, { children: [jsx(Container$X, { 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$1h, templateObject_2$Y;
|
|
7795
7795
|
|
|
7796
7796
|
var Button$8 = newStyled.button(function () { return ({
|
|
7797
7797
|
background: 'transparent',
|
|
@@ -12035,14 +12035,14 @@ var Slider$1 = /*#__PURE__*/function (_React$Component) {
|
|
|
12035
12035
|
return Slider;
|
|
12036
12036
|
}(React__default["default"].Component);
|
|
12037
12037
|
|
|
12038
|
-
var StyledSlider = newStyled(Slider$1)(templateObject_1$
|
|
12038
|
+
var StyledSlider = newStyled(Slider$1)(templateObject_1$1g || (templateObject_1$1g = __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$1g;
|
|
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$1f || (templateObject_1$1f = __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$1e || (templateObject_1$1e = __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$1f;
|
|
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$W = newStyled.div(templateObject_3$
|
|
12130
|
+
var horizontalStyles = css(templateObject_1$1e || (templateObject_1$1e = __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$X || (templateObject_2$X = __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$W = newStyled.div(templateObject_3$M || (templateObject_3$M = __makeTemplateObject(["\n display: grid;\n max-height: ", ";\n height: min-content;\n align-items: flex-start;\n ", "\n\n ", "\n"], ["\n display: grid;\n max-height: ", ";\n height: min-content;\n align-items: flex-start;\n ", "\n\n ", "\n"])), function (_a) {
|
|
12133
12133
|
var isRatioSquare = _a.isRatioSquare, theme = _a.theme;
|
|
12134
12134
|
return isRatioSquare ? '530px' : "calc(530px / (".concat(theme.component.gallery.aspectRatio, "))");
|
|
12135
12135
|
}, function (_a) {
|
|
@@ -12140,12 +12140,12 @@ var Container$W = newStyled.div(templateObject_3$L || (templateObject_3$L = __ma
|
|
|
12140
12140
|
return hasOverflowArrows &&
|
|
12141
12141
|
"\n scroll-behavior: smooth;\n &::-webkit-scrollbar {\n visibility: hidden;\n }\n ";
|
|
12142
12142
|
});
|
|
12143
|
-
var Button$7 = newStyled.button(templateObject_4$
|
|
12144
|
-
var ArrowsContainer = newStyled.div(templateObject_5$
|
|
12145
|
-
var ArrowBaseStyles = newStyled.div(templateObject_6$
|
|
12146
|
-
var ArrowPrev = newStyled(ArrowBaseStyles)(templateObject_7$
|
|
12143
|
+
var Button$7 = newStyled.button(templateObject_4$B || (templateObject_4$B = __makeTemplateObject(["\n padding: 0;\n border: none;\n text-decoration: none;\n background: transparent;\n outline: none;\n"], ["\n padding: 0;\n border: none;\n text-decoration: none;\n background: transparent;\n outline: none;\n"])));
|
|
12144
|
+
var ArrowsContainer = newStyled.div(templateObject_5$t || (templateObject_5$t = __makeTemplateObject(["\n display: flex;\n width: 65px;\n position: relative;\n left: 6px;\n"], ["\n display: flex;\n width: 65px;\n position: relative;\n left: 6px;\n"])));
|
|
12145
|
+
var ArrowBaseStyles = newStyled.div(templateObject_6$r || (templateObject_6$r = __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"])));
|
|
12146
|
+
var ArrowPrev = newStyled(ArrowBaseStyles)(templateObject_7$n || (templateObject_7$n = __makeTemplateObject(["\n background-image: url(https://truekind.com/cdn/shop/t/340/assets/up-arrow.svg?v=48788596234827096911690908673);\n border-radius: 0 0 0 4px;\n"], ["\n background-image: url(https://truekind.com/cdn/shop/t/340/assets/up-arrow.svg?v=48788596234827096911690908673);\n border-radius: 0 0 0 4px;\n"])));
|
|
12147
12147
|
var ArrowNext = newStyled(ArrowBaseStyles)(templateObject_8$f || (templateObject_8$f = __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"])));
|
|
12148
|
-
var templateObject_1$
|
|
12148
|
+
var templateObject_1$1e, templateObject_2$X, templateObject_3$M, templateObject_4$B, templateObject_5$t, templateObject_6$r, templateObject_7$n, templateObject_8$f;
|
|
12149
12149
|
|
|
12150
12150
|
var getLoadingProp = function (index, itemsOnViewport) {
|
|
12151
12151
|
var loading = 'eager';
|
|
@@ -12182,22 +12182,22 @@ var ImagePreviewList = function (_a) {
|
|
|
12182
12182
|
})) }), 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));
|
|
12183
12183
|
};
|
|
12184
12184
|
|
|
12185
|
-
var ProgressContainer = newStyled.div(templateObject_1$
|
|
12186
|
-
var ProgressFiller = newStyled.div(templateObject_2$
|
|
12187
|
-
var templateObject_1$
|
|
12185
|
+
var ProgressContainer = newStyled.div(templateObject_1$1d || (templateObject_1$1d = __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); });
|
|
12186
|
+
var ProgressFiller = newStyled.div(templateObject_2$W || (templateObject_2$W = __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; });
|
|
12187
|
+
var templateObject_1$1d, templateObject_2$W;
|
|
12188
12188
|
|
|
12189
12189
|
var ProgressBar$1 = function (_a) {
|
|
12190
12190
|
var progress = _a.progress, hide = _a.hide;
|
|
12191
12191
|
return (jsxRuntime.jsx(ProgressContainer, __assign$1({ "data-testid": "progress-bar", hide: hide }, { children: jsxRuntime.jsx(ProgressFiller, { progress: progress }, void 0) }), void 0));
|
|
12192
12192
|
};
|
|
12193
12193
|
|
|
12194
|
-
var Container$V = newStyled.div(templateObject_1$
|
|
12195
|
-
var HTMLVideo = newStyled.video(templateObject_2$
|
|
12196
|
-
var PlayIcon = newStyled(Icon.PDP.PlayVideo)(templateObject_3$
|
|
12197
|
-
var PlayContainer = newStyled.div(templateObject_4$
|
|
12198
|
-
var PauseContainer = newStyled.div(templateObject_5$
|
|
12199
|
-
var MuteButton = newStyled.button(templateObject_6$
|
|
12200
|
-
var templateObject_1$
|
|
12194
|
+
var Container$V = newStyled.div(templateObject_1$1c || (templateObject_1$1c = __makeTemplateObject(["\n max-width: 530px;\n position: relative;\n"], ["\n max-width: 530px;\n position: relative;\n"])));
|
|
12195
|
+
var HTMLVideo = newStyled.video(templateObject_2$V || (templateObject_2$V = __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; });
|
|
12196
|
+
var PlayIcon = newStyled(Icon.PDP.PlayVideo)(templateObject_3$L || (templateObject_3$L = __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"])));
|
|
12197
|
+
var PlayContainer = newStyled.div(templateObject_4$A || (templateObject_4$A = __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"])));
|
|
12198
|
+
var PauseContainer = newStyled.div(templateObject_5$s || (templateObject_5$s = __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"])));
|
|
12199
|
+
var MuteButton = newStyled.button(templateObject_6$q || (templateObject_6$q = __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"])));
|
|
12200
|
+
var templateObject_1$1c, templateObject_2$V, templateObject_3$L, templateObject_4$A, templateObject_5$s, templateObject_6$q;
|
|
12201
12201
|
|
|
12202
12202
|
var Video$1 = function (_a) {
|
|
12203
12203
|
var _b, _c, _d, _e;
|
|
@@ -13841,32 +13841,32 @@ InnerImageZoom.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
13841
13841
|
afterZoomOut: PropTypes.func
|
|
13842
13842
|
} : {};
|
|
13843
13843
|
|
|
13844
|
-
var Container$U = newStyled.div(templateObject_1$
|
|
13844
|
+
var Container$U = newStyled.div(templateObject_1$1b || (templateObject_1$1b = __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) {
|
|
13845
13845
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
13846
13846
|
return borderRadiusVariant && "border-radius: 40px;";
|
|
13847
13847
|
});
|
|
13848
|
-
var TopTagContainer$7 = newStyled.div(templateObject_2$
|
|
13848
|
+
var TopTagContainer$7 = newStyled.div(templateObject_2$U || (templateObject_2$U = __makeTemplateObject(["\n position: absolute;\n left: ", ";\n top: ", ";\n"], ["\n position: absolute;\n left: ", ";\n top: ", ";\n"])), function (_a) {
|
|
13849
13849
|
var borderRadiusVariant = _a.borderRadiusVariant, theme = _a.theme;
|
|
13850
13850
|
return borderRadiusVariant ? '50px' : theme.component.gallery.tagPosition.left;
|
|
13851
13851
|
}, function (_a) {
|
|
13852
13852
|
var borderRadiusVariant = _a.borderRadiusVariant, theme = _a.theme;
|
|
13853
13853
|
return borderRadiusVariant ? '10px' : theme.component.gallery.tagPosition.top;
|
|
13854
13854
|
});
|
|
13855
|
-
var BottomTagContainer$7 = newStyled.div(templateObject_3$
|
|
13855
|
+
var BottomTagContainer$7 = newStyled.div(templateObject_3$K || (templateObject_3$K = __makeTemplateObject(["\n position: absolute;\n bottom: ", ";\n left: 0;\n"], ["\n position: absolute;\n bottom: ", ";\n left: 0;\n"])), function (_a) {
|
|
13856
13856
|
var isCTAHidden = _a.isCTAHidden;
|
|
13857
13857
|
return (isCTAHidden ? '60px' : '120px');
|
|
13858
13858
|
});
|
|
13859
|
-
var TopRightTagContainer$2 = newStyled.div(templateObject_4$
|
|
13860
|
-
var ButtonSecondaryOutlineWrapper = newStyled(ButtonSecondaryOutline)(templateObject_5$
|
|
13861
|
-
var ImageStyled = newStyled(Image$3)(templateObject_6$
|
|
13859
|
+
var TopRightTagContainer$2 = newStyled.div(templateObject_4$z || (templateObject_4$z = __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"])));
|
|
13860
|
+
var ButtonSecondaryOutlineWrapper = newStyled(ButtonSecondaryOutline)(templateObject_5$r || (templateObject_5$r = __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"])));
|
|
13861
|
+
var ImageStyled = newStyled(Image$3)(templateObject_6$p || (templateObject_6$p = __makeTemplateObject(["\n aspect-ratio: ", ";\n"], ["\n aspect-ratio: ", ";\n"])), function (_a) {
|
|
13862
13862
|
var theme = _a.theme, isRatioSquare = _a.isRatioSquare;
|
|
13863
13863
|
return isRatioSquare ? '1 / 1' : theme.component.gallery.aspectRatio;
|
|
13864
13864
|
});
|
|
13865
|
-
var InnerImageZoomStyled = newStyled(InnerImageZoom)(templateObject_7$
|
|
13865
|
+
var InnerImageZoomStyled = newStyled(InnerImageZoom)(templateObject_7$m || (templateObject_7$m = __makeTemplateObject(["\n aspect-ratio: ", ";\n"], ["\n aspect-ratio: ", ";\n"])), function (_a) {
|
|
13866
13866
|
var theme = _a.theme, isRatioSquare = _a.isRatioSquare;
|
|
13867
13867
|
return isRatioSquare ? '1 / 1' : theme.component.gallery.aspectRatio;
|
|
13868
13868
|
});
|
|
13869
|
-
var templateObject_1$
|
|
13869
|
+
var templateObject_1$1b, templateObject_2$U, templateObject_3$K, templateObject_4$z, templateObject_5$r, templateObject_6$p, templateObject_7$m;
|
|
13870
13870
|
|
|
13871
13871
|
var ImageProductSlide$1 = function (_a) {
|
|
13872
13872
|
var _b;
|
|
@@ -13881,8 +13881,8 @@ var ImageProductSlide$1 = function (_a) {
|
|
|
13881
13881
|
}, 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$7, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsxRuntime.jsx(BottomTagContainer$7, __assign$1({ isCTAHidden: hideCTA }, { children: bottomTag }), void 0), !!topRightTag && jsxRuntime.jsx(TopRightTagContainer$2, { children: topRightTag }, void 0)] }, void 0)), isVideo && jsxRuntime.jsx(Video$1, { source: source, thumbnail: content === null || content === void 0 ? void 0 : content.thumbnailUrl }, void 0), ctaText && ctaAction && (jsxRuntime.jsx("div", __assign$1({ style: { display: hideCTA ? 'none' : 'block' } }, { children: jsxRuntime.jsx(ButtonSecondaryOutlineWrapper, { wide: true, onClick: ctaAction, text: ctaText }, void 0) }), void 0))] }), void 0));
|
|
13882
13882
|
};
|
|
13883
13883
|
|
|
13884
|
-
var Container$T = newStyled.div(templateObject_1$
|
|
13885
|
-
var templateObject_1$
|
|
13884
|
+
var Container$T = newStyled.div(templateObject_1$1a || (templateObject_1$1a = __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"])));
|
|
13885
|
+
var templateObject_1$1a;
|
|
13886
13886
|
|
|
13887
13887
|
var getInitialIndex = function (images, selectedValue) {
|
|
13888
13888
|
if (selectedValue) {
|
|
@@ -13930,7 +13930,7 @@ var getStylesBySize$8 = function (size) {
|
|
|
13930
13930
|
};
|
|
13931
13931
|
}
|
|
13932
13932
|
};
|
|
13933
|
-
var Container$S = newStyled.div(templateObject_1$
|
|
13933
|
+
var Container$S = newStyled.div(templateObject_1$19 || (templateObject_1$19 = __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) {
|
|
13934
13934
|
var backgroundColor = _a.backgroundColor;
|
|
13935
13935
|
return backgroundColor;
|
|
13936
13936
|
}, function (_a) {
|
|
@@ -13960,9 +13960,9 @@ var IconButton = function (_a) {
|
|
|
13960
13960
|
var theme = useTheme();
|
|
13961
13961
|
return (jsxRuntime.jsx(Container$S, __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));
|
|
13962
13962
|
};
|
|
13963
|
-
var templateObject_1$
|
|
13963
|
+
var templateObject_1$19;
|
|
13964
13964
|
|
|
13965
|
-
var StyledButton$2 = newStyled(BaseButton)(templateObject_1$
|
|
13965
|
+
var StyledButton$2 = newStyled(BaseButton)(templateObject_1$18 || (templateObject_1$18 = __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; });
|
|
13966
13966
|
var AmazonButton = function (_a) {
|
|
13967
13967
|
var onClick = _a.onClick;
|
|
13968
13968
|
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));
|
|
@@ -13971,7 +13971,7 @@ var PaypalButton = function (_a) {
|
|
|
13971
13971
|
var onClick = _a.onClick;
|
|
13972
13972
|
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));
|
|
13973
13973
|
};
|
|
13974
|
-
var templateObject_1$
|
|
13974
|
+
var templateObject_1$18;
|
|
13975
13975
|
|
|
13976
13976
|
var Container$R = newStyled.div(function (props) { return ({
|
|
13977
13977
|
height: 'auto',
|
|
@@ -14026,9 +14026,9 @@ var IconsWithTitle = function (_a) {
|
|
|
14026
14026
|
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(Container$R, __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));
|
|
14027
14027
|
};
|
|
14028
14028
|
|
|
14029
|
-
var Container$Q = newStyled.div(templateObject_1$
|
|
14030
|
-
var ImageContainer$4 = newStyled.div(templateObject_2$
|
|
14031
|
-
var StyledTitle = newStyled.div(templateObject_3$
|
|
14029
|
+
var Container$Q = newStyled.div(templateObject_1$17 || (templateObject_1$17 = __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'); });
|
|
14030
|
+
var ImageContainer$4 = newStyled.div(templateObject_2$T || (templateObject_2$T = __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'); });
|
|
14031
|
+
var StyledTitle = newStyled.div(templateObject_3$J || (templateObject_3$J = __makeTemplateObject(["\n display: flex;\n ", "\n"], ["\n display: flex;\n ", "\n"])), function (_a) {
|
|
14032
14032
|
var titlePosition = _a.titlePosition;
|
|
14033
14033
|
return titlePosition == 'center' &&
|
|
14034
14034
|
"\nalign-items:center;\njustify-content:center;\n";
|
|
@@ -14038,13 +14038,13 @@ var ImageCardWithDescription = function (_a) {
|
|
|
14038
14038
|
var isMobile = useWindowDimensions().isMobile;
|
|
14039
14039
|
return (jsxRuntime.jsxs(Container$Q, __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));
|
|
14040
14040
|
};
|
|
14041
|
-
var templateObject_1$
|
|
14041
|
+
var templateObject_1$17, templateObject_2$T, templateObject_3$J;
|
|
14042
14042
|
|
|
14043
|
-
var Label$4 = newStyled.span(templateObject_1$
|
|
14043
|
+
var Label$4 = newStyled.span(templateObject_1$16 || (templateObject_1$16 = __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) {
|
|
14044
14044
|
var color = _a.color;
|
|
14045
14045
|
return color;
|
|
14046
14046
|
});
|
|
14047
|
-
var MandatoryIcon = newStyled.span(templateObject_2$
|
|
14047
|
+
var MandatoryIcon = newStyled.span(templateObject_2$S || (templateObject_2$S = __makeTemplateObject(["\n color: ", ";\n margin-left: 0.25rem;\n"], ["\n color: ", ";\n margin-left: 0.25rem;\n"])), function (_a) {
|
|
14048
14048
|
var color = _a.color;
|
|
14049
14049
|
return color;
|
|
14050
14050
|
});
|
|
@@ -14053,7 +14053,7 @@ var InputLabel = function (_a) {
|
|
|
14053
14053
|
var theme = useTheme();
|
|
14054
14054
|
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));
|
|
14055
14055
|
};
|
|
14056
|
-
var templateObject_1$
|
|
14056
|
+
var templateObject_1$16, templateObject_2$S;
|
|
14057
14057
|
|
|
14058
14058
|
var containerByStatus = function (theme, status) {
|
|
14059
14059
|
if (status === exports.InputValidationType.Valid)
|
|
@@ -14062,12 +14062,12 @@ var containerByStatus = function (theme, status) {
|
|
|
14062
14062
|
return theme.colors.semantic.urgent.color;
|
|
14063
14063
|
return '';
|
|
14064
14064
|
};
|
|
14065
|
-
var Container$P = newStyled.div(templateObject_1$
|
|
14065
|
+
var Container$P = newStyled.div(templateObject_1$15 || (templateObject_1$15 = __makeTemplateObject(["\n position: relative;\n input {\n border-color: ", ";\n }\n"], ["\n position: relative;\n input {\n border-color: ", ";\n }\n"])), function (_a) {
|
|
14066
14066
|
var theme = _a.theme, status = _a.status, hasError = _a.hasError;
|
|
14067
14067
|
return hasError ? '' : containerByStatus(theme, status);
|
|
14068
14068
|
});
|
|
14069
|
-
var StyledLabel$2 = newStyled.label(templateObject_2$
|
|
14070
|
-
var StyledInput = newStyled.input(templateObject_3$
|
|
14069
|
+
var StyledLabel$2 = newStyled.label(templateObject_2$R || (templateObject_2$R = __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"])));
|
|
14070
|
+
var StyledInput = newStyled.input(templateObject_3$I || (templateObject_3$I = __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) {
|
|
14071
14071
|
var inlinePlaceholder = _a.inlinePlaceholder, theme = _a.theme;
|
|
14072
14072
|
return theme.component[inlinePlaceholder ? 'inputPlaceholder' : 'input'].padding;
|
|
14073
14073
|
}, function (_a) {
|
|
@@ -14122,11 +14122,11 @@ var StyledInput = newStyled.input(templateObject_3$H || (templateObject_3$H = __
|
|
|
14122
14122
|
return hasValue &&
|
|
14123
14123
|
"& ~ span {\n bottom: 1.625rem;\n font-size: 0.75rem;\n opacity: 1;\n }";
|
|
14124
14124
|
});
|
|
14125
|
-
var InputWrapper = newStyled.div(templateObject_4$
|
|
14125
|
+
var InputWrapper = newStyled.div(templateObject_4$y || (templateObject_4$y = __makeTemplateObject(["\n position: relative;\n display: flex;\n height: ", ";\n"], ["\n position: relative;\n display: flex;\n height: ", ";\n"])), function (_a) {
|
|
14126
14126
|
var size = _a.size, inlinePlaceholder = _a.inlinePlaceholder;
|
|
14127
14127
|
return !inlinePlaceholder ? (size === 'small' ? '36px' : '40px') : '48px';
|
|
14128
14128
|
});
|
|
14129
|
-
var AnimatedPlaceholder = newStyled.span(templateObject_5$
|
|
14129
|
+
var AnimatedPlaceholder = newStyled.span(templateObject_5$q || (templateObject_5$q = __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) {
|
|
14130
14130
|
var theme = _a.theme;
|
|
14131
14131
|
return theme.component.input.placeholderColor;
|
|
14132
14132
|
}, function (_a) {
|
|
@@ -14139,8 +14139,8 @@ var AnimatedPlaceholder = newStyled.span(templateObject_5$p || (templateObject_5
|
|
|
14139
14139
|
var theme = _a.theme;
|
|
14140
14140
|
return theme.component.input.lineHeight;
|
|
14141
14141
|
});
|
|
14142
|
-
var ClearInput = newStyled.div(templateObject_6$
|
|
14143
|
-
var templateObject_1$
|
|
14142
|
+
var ClearInput = newStyled.div(templateObject_6$o || (templateObject_6$o = __makeTemplateObject(["\n right: 0.75rem;\n top: 1rem;\n position: absolute;\n cursor: pointer;\n"], ["\n right: 0.75rem;\n top: 1rem;\n position: absolute;\n cursor: pointer;\n"])));
|
|
14143
|
+
var templateObject_1$15, templateObject_2$R, templateObject_3$I, templateObject_4$y, templateObject_5$q, templateObject_6$o;
|
|
14144
14144
|
|
|
14145
14145
|
var BaseInput = function (_a) {
|
|
14146
14146
|
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"]);
|
|
@@ -14184,11 +14184,11 @@ var Button$6 = function (_a) {
|
|
|
14184
14184
|
throw new Error("Invalid button variant ".concat(variant));
|
|
14185
14185
|
};
|
|
14186
14186
|
|
|
14187
|
-
var Container$O = newStyled.div(templateObject_1$
|
|
14187
|
+
var Container$O = newStyled.div(templateObject_1$14 || (templateObject_1$14 = __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) {
|
|
14188
14188
|
var theme = _a.theme;
|
|
14189
14189
|
return theme.component.inputCustom.input.borderRadius;
|
|
14190
14190
|
});
|
|
14191
|
-
var ButtonContainer$1 = newStyled.div(templateObject_2$
|
|
14191
|
+
var ButtonContainer$1 = newStyled.div(templateObject_2$Q || (templateObject_2$Q = __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) {
|
|
14192
14192
|
var theme = _a.theme, defaultRounded = _a.defaultRounded;
|
|
14193
14193
|
return defaultRounded
|
|
14194
14194
|
? theme.component.inputCustom.button.borderRadius
|
|
@@ -14205,21 +14205,21 @@ var Custom = function (_a) {
|
|
|
14205
14205
|
}); }, [variant, onClick, text, rest.disabled]);
|
|
14206
14206
|
return (jsxRuntime.jsx(Container$O, __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$6, __assign$1({}, props), void 0) }), void 0) }), void 0) }), void 0));
|
|
14207
14207
|
};
|
|
14208
|
-
var templateObject_1$
|
|
14208
|
+
var templateObject_1$14, templateObject_2$Q;
|
|
14209
14209
|
|
|
14210
|
-
var SuccessContainer = newStyled.div(templateObject_1$
|
|
14210
|
+
var SuccessContainer = newStyled.div(templateObject_1$13 || (templateObject_1$13 = __makeTemplateObject(["\n height: ", ";\n display: flex;\n"], ["\n height: ", ";\n display: flex;\n"])), function (_a) {
|
|
14211
14211
|
var size = _a.size;
|
|
14212
14212
|
return (size === 'small' ? '36px' : '');
|
|
14213
14213
|
});
|
|
14214
|
-
var SuccessMessage = newStyled.div(templateObject_2$
|
|
14215
|
-
var SuccessText = newStyled.span(templateObject_3$
|
|
14214
|
+
var SuccessMessage = newStyled.div(templateObject_2$P || (templateObject_2$P = __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"])));
|
|
14215
|
+
var SuccessText = newStyled.span(templateObject_3$H || (templateObject_3$H = __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"])));
|
|
14216
14216
|
var Success = function (_a) {
|
|
14217
14217
|
var children = _a.children, successText = _a.successText, size = _a.size;
|
|
14218
14218
|
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));
|
|
14219
14219
|
};
|
|
14220
|
-
var templateObject_1$
|
|
14220
|
+
var templateObject_1$13, templateObject_2$P, templateObject_3$H;
|
|
14221
14221
|
|
|
14222
|
-
var ButtonContainer = newStyled.div(templateObject_1$
|
|
14222
|
+
var ButtonContainer = newStyled.div(templateObject_1$12 || (templateObject_1$12 = __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) {
|
|
14223
14223
|
var status = _a.status, type = _a.type, theme = _a.theme;
|
|
14224
14224
|
return status === exports.InputValidationType.Empty &&
|
|
14225
14225
|
type === 'primary' &&
|
|
@@ -14236,16 +14236,16 @@ var BasePlusButton = function (_a) {
|
|
|
14236
14236
|
}
|
|
14237
14237
|
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));
|
|
14238
14238
|
};
|
|
14239
|
-
var templateObject_1$
|
|
14239
|
+
var templateObject_1$12;
|
|
14240
14240
|
|
|
14241
|
-
var Container$N = newStyled.div(templateObject_1$
|
|
14242
|
-
var IconContainer$3 = newStyled.div(templateObject_2$
|
|
14241
|
+
var Container$N = newStyled.div(templateObject_1$11 || (templateObject_1$11 = __makeTemplateObject(["\n input {\n padding-right: 2.688rem;\n }\n"], ["\n input {\n padding-right: 2.688rem;\n }\n"])));
|
|
14242
|
+
var IconContainer$3 = newStyled.div(templateObject_2$O || (templateObject_2$O = __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"])));
|
|
14243
14243
|
var BasePlusIcon = function (_a) {
|
|
14244
14244
|
var Icon = _a.Icon, rest = __rest(_a, ["Icon"]);
|
|
14245
14245
|
var theme = useTheme();
|
|
14246
14246
|
return (jsxRuntime.jsx(Container$N, { children: jsxRuntime.jsx(BaseInput, __assign$1({}, rest, { children: jsxRuntime.jsx(IconContainer$3, { children: jsxRuntime.jsx(Icon, { testId: "IconWrapper", fill: theme.colors.shades['250'].color }, void 0) }, void 0) }), void 0) }, void 0));
|
|
14247
14247
|
};
|
|
14248
|
-
var templateObject_1$
|
|
14248
|
+
var templateObject_1$11, templateObject_2$O;
|
|
14249
14249
|
|
|
14250
14250
|
var Input$3 = {
|
|
14251
14251
|
Simple: BaseInput,
|
|
@@ -14385,21 +14385,21 @@ var Portal = function (_a) {
|
|
|
14385
14385
|
var visibleStyle = function (_a) {
|
|
14386
14386
|
var opened = _a.opened;
|
|
14387
14387
|
return opened
|
|
14388
|
-
? css(templateObject_1
|
|
14388
|
+
? css(templateObject_1$10 || (templateObject_1$10 = __makeTemplateObject(["\n opacity: 1;\n pointer-events: all;\n "], ["\n opacity: 1;\n pointer-events: all;\n "]))) : css(templateObject_2$N || (templateObject_2$N = __makeTemplateObject(["\n opacity: 0;\n pointer-events: none;\n "], ["\n opacity: 0;\n pointer-events: none;\n "])));
|
|
14389
14389
|
};
|
|
14390
14390
|
var transformStyle = function (_a) {
|
|
14391
14391
|
var opened = _a.opened, maxFullScreen = _a.maxFullScreen, initialTop = _a.initialTop;
|
|
14392
14392
|
return opened
|
|
14393
|
-
? css(templateObject_3$
|
|
14393
|
+
? css(templateObject_3$G || (templateObject_3$G = __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$x || (templateObject_4$x = __makeTemplateObject(["\n transform: ", ";\n top: ", ";\n "], ["\n transform: ", ";\n top: ", ";\n "])), maxFullScreen ? 'translateY(10%)' : 'translate(-50%, -40%)', maxFullScreen ? '0' : initialTop ? initialTop : '50%');
|
|
14394
14394
|
};
|
|
14395
|
-
var Container$M = newStyled.div(templateObject_6$
|
|
14395
|
+
var Container$M = newStyled.div(templateObject_6$n || (templateObject_6$n = __makeTemplateObject(["\n border: 1px solid var(--colors-pallete-primary-color);\n border-radius: ", ";\n padding: ", ";\n position: fixed;\n left: ", ";\n top: ", ";\n z-index: var(--zIndex-modal);\n background-color: var(--colors-background-color);\n transition: transform 0.3s, opacity 0.3s;\n overflow-y: auto;\n max-width: ", ";\n max-height: ", ";\n width: ", ";\n height: ", ";\n ", "\n ", "\n ", "\n"], ["\n border: 1px solid var(--colors-pallete-primary-color);\n border-radius: ", ";\n padding: ", ";\n position: fixed;\n left: ", ";\n top: ", ";\n z-index: var(--zIndex-modal);\n background-color: var(--colors-background-color);\n transition: transform 0.3s, opacity 0.3s;\n overflow-y: auto;\n max-width: ", ";\n max-height: ", ";\n width: ", ";\n height: ", ";\n ", "\n ", "\n ", "\n"])), function (props) { return "".concat(props.maxFullScreen ? '0' : 'var(--radius-regular)'); }, function (props) { return "".concat(props.padding ? props.padding : '20px 10px'); }, function (props) { return "".concat(props.maxFullScreen ? '0' : '50%'); }, function (props) { return (props.maxFullScreen ? '0' : props.initialTop ? props.initialTop : '50%'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : '90vw'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : '90vh'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : 'auto'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : 'inherit'); }, function (_a) {
|
|
14396
14396
|
var width = _a.width;
|
|
14397
14397
|
return width
|
|
14398
|
-
? css(templateObject_5$
|
|
14398
|
+
? css(templateObject_5$p || (templateObject_5$p = __makeTemplateObject(["\n width: ", ";\n "], ["\n width: ", ";\n "])), width) : mediaQueries({
|
|
14399
14399
|
minWidth: ['90%', 'var(--component-modal-minWidth)'],
|
|
14400
14400
|
});
|
|
14401
14401
|
}, visibleStyle, transformStyle);
|
|
14402
|
-
var Overlay = newStyled.div(templateObject_7$
|
|
14402
|
+
var Overlay = newStyled.div(templateObject_7$l || (templateObject_7$l = __makeTemplateObject(["\n position: fixed;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.75);\n z-index: var(--zIndex-overlay);\n transition: opacity 0.3s;\n ", "\n"], ["\n position: fixed;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.75);\n z-index: var(--zIndex-overlay);\n transition: opacity 0.3s;\n ", "\n"])), visibleStyle);
|
|
14403
14403
|
var Modal = function (_a) {
|
|
14404
14404
|
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;
|
|
14405
14405
|
var _e = useModal(id), opened = _e.opened, close = _e.close;
|
|
@@ -14440,7 +14440,7 @@ var useModal = function (id) {
|
|
|
14440
14440
|
close: close,
|
|
14441
14441
|
}); }, [close, open, opened]);
|
|
14442
14442
|
};
|
|
14443
|
-
var templateObject_1
|
|
14443
|
+
var templateObject_1$10, templateObject_2$N, templateObject_3$G, templateObject_4$x, templateObject_5$p, templateObject_6$n, templateObject_7$l;
|
|
14444
14444
|
|
|
14445
14445
|
var htmlReactParser = {exports: {}};
|
|
14446
14446
|
|
|
@@ -18221,7 +18221,7 @@ HTMLReactParser$1.htmlToDOM;
|
|
|
18221
18221
|
HTMLReactParser$1.attributesToProps;
|
|
18222
18222
|
HTMLReactParser$1.Element;
|
|
18223
18223
|
|
|
18224
|
-
var Bar$1 = newStyled.div(templateObject_1
|
|
18224
|
+
var Bar$1 = newStyled.div(templateObject_1$$ || (templateObject_1$$ = __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) {
|
|
18225
18225
|
var height = _a.height;
|
|
18226
18226
|
return height || '0.5rem';
|
|
18227
18227
|
}, function (_a) {
|
|
@@ -18273,7 +18273,7 @@ var Container$L = newStyled.div(function (_a) {
|
|
|
18273
18273
|
background: backgroundColor,
|
|
18274
18274
|
});
|
|
18275
18275
|
});
|
|
18276
|
-
var MessageContainer = newStyled.div(templateObject_2$
|
|
18276
|
+
var MessageContainer = newStyled.div(templateObject_2$M || (templateObject_2$M = __makeTemplateObject(["\n padding: 0 1rem;\n text-align: center;\n"], ["\n padding: 0 1rem;\n text-align: center;\n"])));
|
|
18277
18277
|
var getBarWithBasedOnPercent$1 = function (percent) {
|
|
18278
18278
|
return percent <= 100 && percent >= 0 ? "".concat(percent, "%") : '0%';
|
|
18279
18279
|
};
|
|
@@ -18304,27 +18304,27 @@ var MotivatorProgressBar = function (_a) {
|
|
|
18304
18304
|
};
|
|
18305
18305
|
return (jsxRuntime.jsxs(Container$L, __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));
|
|
18306
18306
|
};
|
|
18307
|
-
var templateObject_1
|
|
18307
|
+
var templateObject_1$$, templateObject_2$M;
|
|
18308
18308
|
|
|
18309
|
-
var Container$K = newStyled.div(templateObject_1$
|
|
18309
|
+
var Container$K = newStyled.div(templateObject_1$_ || (templateObject_1$_ = __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) {
|
|
18310
18310
|
var theme = _a.theme;
|
|
18311
18311
|
return theme.component.orderBar.backgroundColor;
|
|
18312
18312
|
});
|
|
18313
|
-
var H1 = newStyled.h1(templateObject_2$
|
|
18313
|
+
var H1 = newStyled.h1(templateObject_2$L || (templateObject_2$L = __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; });
|
|
18314
18314
|
var OrderBar = function (_a) {
|
|
18315
18315
|
var message = _a.message, color = _a.color;
|
|
18316
18316
|
var theme = useTheme();
|
|
18317
18317
|
return (jsxRuntime.jsxs(Container$K, __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));
|
|
18318
18318
|
};
|
|
18319
|
-
var templateObject_1$
|
|
18320
|
-
|
|
18321
|
-
var Container$J = newStyled.div(templateObject_1$
|
|
18322
|
-
var Card$1 = newStyled.div(templateObject_2$
|
|
18323
|
-
var Tag$1 = newStyled.div(templateObject_3$
|
|
18324
|
-
var Label$3 = newStyled.div(templateObject_4$
|
|
18325
|
-
var Check = newStyled.div(templateObject_5$
|
|
18326
|
-
var IconContainer$2 = newStyled.div(templateObject_6$
|
|
18327
|
-
var IconPlaceholder = newStyled.div(templateObject_7$
|
|
18319
|
+
var templateObject_1$_, templateObject_2$L;
|
|
18320
|
+
|
|
18321
|
+
var Container$J = newStyled.div(templateObject_1$Z || (templateObject_1$Z = __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"])));
|
|
18322
|
+
var Card$1 = newStyled.div(templateObject_2$K || (templateObject_2$K = __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"])));
|
|
18323
|
+
var Tag$1 = newStyled.div(templateObject_3$F || (templateObject_3$F = __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"])));
|
|
18324
|
+
var Label$3 = newStyled.div(templateObject_4$w || (templateObject_4$w = __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"])));
|
|
18325
|
+
var Check = newStyled.div(templateObject_5$o || (templateObject_5$o = __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"])));
|
|
18326
|
+
var IconContainer$2 = newStyled.div(templateObject_6$m || (templateObject_6$m = __makeTemplateObject(["\n height: 56px;\n display: flex;\n align-items: center;\n justify-content: center;\n\n [aria-checked='true'] & * {\n fill: var(--color);\n }\n"], ["\n height: 56px;\n display: flex;\n align-items: center;\n justify-content: center;\n\n [aria-checked='true'] & * {\n fill: var(--color);\n }\n"])));
|
|
18327
|
+
var IconPlaceholder = newStyled.div(templateObject_7$k || (templateObject_7$k = __makeTemplateObject(["\n height: 100%;\n width: 100%;\n background-color: var(--colors-shades-100-color);\n"], ["\n height: 100%;\n width: 100%;\n background-color: var(--colors-shades-100-color);\n"])));
|
|
18328
18328
|
var DiscountContainer = newStyled.div(templateObject_8$e || (templateObject_8$e = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n"], ["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n"])));
|
|
18329
18329
|
var PackSelector = function (_a) {
|
|
18330
18330
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange, currencyCode = _a.currencyCode;
|
|
@@ -18355,14 +18355,14 @@ var PackCard = function (_a) {
|
|
|
18355
18355
|
currency: currencyCode || 'USD',
|
|
18356
18356
|
}), ' ', "each"] }), void 0)] }), void 0));
|
|
18357
18357
|
};
|
|
18358
|
-
var templateObject_1$
|
|
18358
|
+
var templateObject_1$Z, templateObject_2$K, templateObject_3$F, templateObject_4$w, templateObject_5$o, templateObject_6$m, templateObject_7$k, templateObject_8$e;
|
|
18359
18359
|
|
|
18360
|
-
var Container$I = newStyled.div(templateObject_1$
|
|
18361
|
-
var IconContainer$1 = newStyled.div(templateObject_2$
|
|
18362
|
-
var PageNumbersContainer = newStyled.div(templateObject_3$
|
|
18360
|
+
var Container$I = newStyled.div(templateObject_1$Y || (templateObject_1$Y = __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"])));
|
|
18361
|
+
var IconContainer$1 = newStyled.div(templateObject_2$J || (templateObject_2$J = __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"])));
|
|
18362
|
+
var PageNumbersContainer = newStyled.div(templateObject_3$E || (templateObject_3$E = __makeTemplateObject(["\n display: flex;\n ", ";\n"], ["\n display: flex;\n ", ";\n"])), mediaQueries({
|
|
18363
18363
|
margin: ['0 0.75rem', '0 1.25rem'],
|
|
18364
18364
|
}));
|
|
18365
|
-
var PageNumber = newStyled.span(templateObject_4$
|
|
18365
|
+
var PageNumber = newStyled.span(templateObject_4$v || (templateObject_4$v = __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) {
|
|
18366
18366
|
var bold = _a.bold;
|
|
18367
18367
|
return (bold ? '700' : '500');
|
|
18368
18368
|
}, function (_a) {
|
|
@@ -18379,7 +18379,7 @@ var PageNumber = newStyled.span(templateObject_4$u || (templateObject_4$u = __ma
|
|
|
18379
18379
|
var background = _a.background;
|
|
18380
18380
|
return background || 'unset';
|
|
18381
18381
|
});
|
|
18382
|
-
var templateObject_1$
|
|
18382
|
+
var templateObject_1$Y, templateObject_2$J, templateObject_3$E, templateObject_4$v;
|
|
18383
18383
|
|
|
18384
18384
|
var Pagination = function (_a) {
|
|
18385
18385
|
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;
|
|
@@ -18444,7 +18444,7 @@ var PaginatorBlog = function (_a) {
|
|
|
18444
18444
|
: 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$1, __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));
|
|
18445
18445
|
};
|
|
18446
18446
|
|
|
18447
|
-
var Container$H = newStyled.div(templateObject_1$
|
|
18447
|
+
var Container$H = newStyled.div(templateObject_1$X || (templateObject_1$X = __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) {
|
|
18448
18448
|
var width = _a.width;
|
|
18449
18449
|
return width;
|
|
18450
18450
|
}, function (_a) {
|
|
@@ -18462,12 +18462,12 @@ var PaymentMethod = function (_a) {
|
|
|
18462
18462
|
var theme = useTheme();
|
|
18463
18463
|
return (jsxRuntime.jsx(Container$H, __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));
|
|
18464
18464
|
};
|
|
18465
|
-
var templateObject_1$
|
|
18465
|
+
var templateObject_1$X;
|
|
18466
18466
|
|
|
18467
|
-
var Container$G = newStyled.div(templateObject_1$
|
|
18467
|
+
var Container$G = newStyled.div(templateObject_1$W || (templateObject_1$W = __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"])));
|
|
18468
18468
|
var IMAGE_WIDTH = '63px';
|
|
18469
|
-
var ImageContainer$3 = newStyled.div(templateObject_2$
|
|
18470
|
-
var DescriptionContainer$1 = newStyled.div(templateObject_3$
|
|
18469
|
+
var ImageContainer$3 = newStyled.div(templateObject_2$I || (templateObject_2$I = __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);
|
|
18470
|
+
var DescriptionContainer$1 = newStyled.div(templateObject_3$D || (templateObject_3$D = __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({
|
|
18471
18471
|
paddingLeft: ['0.938rem', '1.875rem'],
|
|
18472
18472
|
}), IMAGE_WIDTH);
|
|
18473
18473
|
var Title$3 = newStyled.h2(function (_a) {
|
|
@@ -18490,7 +18490,7 @@ var Subtitle = newStyled.h3(function (_a) {
|
|
|
18490
18490
|
margin: margin,
|
|
18491
18491
|
});
|
|
18492
18492
|
});
|
|
18493
|
-
var PriceContainer = newStyled.div(templateObject_4$
|
|
18493
|
+
var PriceContainer = newStyled.div(templateObject_4$u || (templateObject_4$u = __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) {
|
|
18494
18494
|
var withTag = _a.withTag; _a.theme;
|
|
18495
18495
|
return withTag
|
|
18496
18496
|
? mediaQueries({
|
|
@@ -18499,9 +18499,9 @@ var PriceContainer = newStyled.div(templateObject_4$t || (templateObject_4$t = _
|
|
|
18499
18499
|
})
|
|
18500
18500
|
: 'justify-content: end';
|
|
18501
18501
|
});
|
|
18502
|
-
var Quantity = newStyled.div(templateObject_5$
|
|
18503
|
-
var StyledSpan = newStyled.span(templateObject_6$
|
|
18504
|
-
var Gift = newStyled.span(templateObject_7$
|
|
18502
|
+
var Quantity = newStyled.div(templateObject_5$n || (templateObject_5$n = __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"])));
|
|
18503
|
+
var StyledSpan = newStyled.span(templateObject_6$l || (templateObject_6$l = __makeTemplateObject(["\n display: block;\n transform: translateY(1px);\n"], ["\n display: block;\n transform: translateY(1px);\n"])));
|
|
18504
|
+
var Gift = newStyled.span(templateObject_7$j || (templateObject_7$j = __makeTemplateObject(["\n color: ", ";\n font-weight: 600;\n font-size: 14px;\n line-height: 22px;\n"], ["\n color: ", ";\n font-weight: 600;\n font-size: 14px;\n line-height: 22px;\n"])), function (_a) {
|
|
18505
18505
|
var theme = _a.theme;
|
|
18506
18506
|
return theme.colors.semantic.urgent.color;
|
|
18507
18507
|
});
|
|
@@ -18511,7 +18511,7 @@ var SimpleOrderItem = function (_a) {
|
|
|
18511
18511
|
var theme = useTheme();
|
|
18512
18512
|
return (jsxRuntime.jsxs(Container$G, __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), subtitle && (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", margin: "0.5rem 0 0 0" }, { children: subtitle }), void 0)), midElement, isGift && jsxRuntime.jsx(Gift, { children: "Limited Time Only" }, void 0), 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)), isGift ? (jsxRuntime.jsx(Gift, { children: "GIFT" }, 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));
|
|
18513
18513
|
};
|
|
18514
|
-
var templateObject_1$
|
|
18514
|
+
var templateObject_1$W, templateObject_2$I, templateObject_3$D, templateObject_4$u, templateObject_5$n, templateObject_6$l, templateObject_7$j;
|
|
18515
18515
|
|
|
18516
18516
|
var P$1 = newStyled.p(function (_a) {
|
|
18517
18517
|
var color = _a.color;
|
|
@@ -18525,7 +18525,7 @@ var P$1 = newStyled.p(function (_a) {
|
|
|
18525
18525
|
margin: '0.938rem 4.188rem',
|
|
18526
18526
|
});
|
|
18527
18527
|
});
|
|
18528
|
-
var Bar = newStyled.div(templateObject_1$
|
|
18528
|
+
var Bar = newStyled.div(templateObject_1$V || (templateObject_1$V = __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) {
|
|
18529
18529
|
var height = _a.height;
|
|
18530
18530
|
return height || '0.5rem';
|
|
18531
18531
|
}, function (_a) {
|
|
@@ -18570,12 +18570,12 @@ var ProgressBar = function (_a) {
|
|
|
18570
18570
|
var theme = useTheme();
|
|
18571
18571
|
return (jsxRuntime.jsxs(Container$F, __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));
|
|
18572
18572
|
};
|
|
18573
|
-
var templateObject_1$
|
|
18573
|
+
var templateObject_1$V;
|
|
18574
18574
|
|
|
18575
|
-
var Container$E = newStyled.div(templateObject_1$
|
|
18576
|
-
var Item$1 = newStyled.span(templateObject_2$
|
|
18577
|
-
var Number$1 = newStyled(Item$1)(templateObject_3$
|
|
18578
|
-
var IncreaseDecrease = newStyled(Item$1)(templateObject_4$
|
|
18575
|
+
var Container$E = newStyled.div(templateObject_1$U || (templateObject_1$U = __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; });
|
|
18576
|
+
var Item$1 = newStyled.span(templateObject_2$H || (templateObject_2$H = __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"])));
|
|
18577
|
+
var Number$1 = newStyled(Item$1)(templateObject_3$C || (templateObject_3$C = __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"])));
|
|
18578
|
+
var IncreaseDecrease = newStyled(Item$1)(templateObject_4$t || (templateObject_4$t = __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)'; });
|
|
18579
18579
|
var QuantityPicker = function (_a) {
|
|
18580
18580
|
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;
|
|
18581
18581
|
var theme = useTheme();
|
|
@@ -18600,7 +18600,7 @@ var QuantityPicker = function (_a) {
|
|
|
18600
18600
|
}, [value, clamp]);
|
|
18601
18601
|
return (jsxRuntime.jsxs(Container$E, __assign$1({ borderColor: theme.colors.shades['200'].color, color: theme.colors.shades['700'].color, "data-testid": testId, borderRadius: theme.component.qtyPicker.borderRadius }, { children: [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));
|
|
18602
18602
|
};
|
|
18603
|
-
var templateObject_1$
|
|
18603
|
+
var templateObject_1$U, templateObject_2$H, templateObject_3$C, templateObject_4$t;
|
|
18604
18604
|
|
|
18605
18605
|
/* base styles & size variants */
|
|
18606
18606
|
var CustomRadioStyles$1 = {
|
|
@@ -18669,9 +18669,9 @@ var ContainerStyles$1 = {
|
|
|
18669
18669
|
},
|
|
18670
18670
|
};
|
|
18671
18671
|
|
|
18672
|
-
var Wrapper$3 = newStyled.div(templateObject_1$
|
|
18672
|
+
var Wrapper$3 = newStyled.div(templateObject_1$T || (templateObject_1$T = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
18673
18673
|
var Container$D = newStyled.div(__assign$1({}, ContainerStyles$1.baseStyles), function (props) { return [ContainerStyles$1[props.size](props.theme)]; });
|
|
18674
|
-
var Input$2 = newStyled.input(templateObject_2$
|
|
18674
|
+
var Input$2 = newStyled.input(templateObject_2$G || (templateObject_2$G = __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) {
|
|
18675
18675
|
var disabled = _a.disabled;
|
|
18676
18676
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
18677
18677
|
});
|
|
@@ -18679,7 +18679,7 @@ var CustomRadio$1 = newStyled.div(function (props) { return [
|
|
|
18679
18679
|
CustomRadioStyles$1.baseStyles(props.theme, props.disabled, props.isChecked),
|
|
18680
18680
|
CustomRadioStyles$1[props.size](props.theme, props.isChecked),
|
|
18681
18681
|
]; });
|
|
18682
|
-
var StyledLabel$1 = newStyled(Label$6)(templateObject_3$
|
|
18682
|
+
var StyledLabel$1 = newStyled(Label$6)(templateObject_3$B || (templateObject_3$B = __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"])));
|
|
18683
18683
|
var RadioPrimary = function (_a) {
|
|
18684
18684
|
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;
|
|
18685
18685
|
var theme = useTheme();
|
|
@@ -18689,7 +18689,7 @@ var RadioPrimary = function (_a) {
|
|
|
18689
18689
|
};
|
|
18690
18690
|
return (jsxRuntime.jsxs(Wrapper$3, { children: [jsxRuntime.jsxs(Container$D, __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));
|
|
18691
18691
|
};
|
|
18692
|
-
var templateObject_1$
|
|
18692
|
+
var templateObject_1$T, templateObject_2$G, templateObject_3$B;
|
|
18693
18693
|
|
|
18694
18694
|
var RadioGroupInput = function (_a) {
|
|
18695
18695
|
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;
|
|
@@ -18768,9 +18768,9 @@ var ContainerStyles = {
|
|
|
18768
18768
|
},
|
|
18769
18769
|
};
|
|
18770
18770
|
|
|
18771
|
-
var Wrapper$2 = newStyled.div(templateObject_1$
|
|
18771
|
+
var Wrapper$2 = newStyled.div(templateObject_1$S || (templateObject_1$S = __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"])));
|
|
18772
18772
|
var Container$C = newStyled.div(__assign$1({}, ContainerStyles.baseStyles), function (props) { return [ContainerStyles[props.size](props.theme)]; });
|
|
18773
|
-
var Input$1 = newStyled.input(templateObject_2$
|
|
18773
|
+
var Input$1 = newStyled.input(templateObject_2$F || (templateObject_2$F = __makeTemplateObject(["\n position: absolute;\n opacity: 0;\n cursor: ", ";\n height: 100%;\n width: 100%;\n margin: 0;\n"], ["\n position: absolute;\n opacity: 0;\n cursor: ", ";\n height: 100%;\n width: 100%;\n margin: 0;\n"])), function (_a) {
|
|
18774
18774
|
var disabled = _a.disabled;
|
|
18775
18775
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
18776
18776
|
});
|
|
@@ -18778,7 +18778,7 @@ var CustomRadio = newStyled.div(function (props) { return [
|
|
|
18778
18778
|
CustomRadioStyles.baseStyles(props.theme, props.disabled, props.isChecked),
|
|
18779
18779
|
CustomRadioStyles[props.size](props.theme, props.isChecked),
|
|
18780
18780
|
]; });
|
|
18781
|
-
var StyledLabel = newStyled(Label$6)(templateObject_3$
|
|
18781
|
+
var StyledLabel = newStyled(Label$6)(templateObject_3$A || (templateObject_3$A = __makeTemplateObject(["\n font-size: ", ";\n line-height: ", " !important;\n"], ["\n font-size: ", ";\n line-height: ", " !important;\n"])), function (_a) {
|
|
18782
18782
|
var theme = _a.theme;
|
|
18783
18783
|
return theme.component.radio.textSize;
|
|
18784
18784
|
}, function (_a) {
|
|
@@ -18794,7 +18794,7 @@ var ClubRadioInput = function (_a) {
|
|
|
18794
18794
|
};
|
|
18795
18795
|
return (jsxRuntime.jsxs(Wrapper$2, { children: [jsxRuntime.jsxs(Container$C, __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));
|
|
18796
18796
|
};
|
|
18797
|
-
var templateObject_1$
|
|
18797
|
+
var templateObject_1$S, templateObject_2$F, templateObject_3$A;
|
|
18798
18798
|
|
|
18799
18799
|
var ClubRadioGroupInput = function (_a) {
|
|
18800
18800
|
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;
|
|
@@ -18822,13 +18822,13 @@ function formatDate(date, format) {
|
|
|
18822
18822
|
}
|
|
18823
18823
|
}
|
|
18824
18824
|
|
|
18825
|
-
var Container$B = newStyled.div(templateObject_1$
|
|
18826
|
-
var Content$1 = newStyled.div(templateObject_2$
|
|
18827
|
-
var StarsContent = newStyled.div(templateObject_3$
|
|
18828
|
-
var ReviewContainer$1 = newStyled.div(templateObject_4$
|
|
18829
|
-
var DateText$1 = newStyled.span(templateObject_5$
|
|
18830
|
-
var ReviewerName$1 = newStyled.h1(templateObject_6$
|
|
18831
|
-
var VerifiedText = newStyled.h1(templateObject_7$
|
|
18825
|
+
var Container$B = newStyled.div(templateObject_1$R || (templateObject_1$R = __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"])));
|
|
18826
|
+
var Content$1 = newStyled.div(templateObject_2$E || (templateObject_2$E = __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"])));
|
|
18827
|
+
var StarsContent = newStyled.div(templateObject_3$z || (templateObject_3$z = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n"], ["\n display: flex;\n justify-content: space-between;\n"])));
|
|
18828
|
+
var ReviewContainer$1 = newStyled.div(templateObject_4$s || (templateObject_4$s = __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"])));
|
|
18829
|
+
var DateText$1 = newStyled.span(templateObject_5$m || (templateObject_5$m = __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"])));
|
|
18830
|
+
var ReviewerName$1 = newStyled.h1(templateObject_6$k || (templateObject_6$k = __makeTemplateObject(["\n font-weight: 600;\n margin: 0;\n font-size: 18px;\n padding: 20px;\n display: flex;\n"], ["\n font-weight: 600;\n margin: 0;\n font-size: 18px;\n padding: 20px;\n display: flex;\n"])));
|
|
18831
|
+
var VerifiedText = newStyled.h1(templateObject_7$i || (templateObject_7$i = __makeTemplateObject(["\n font-weight: 600;\n margin: 0;\n font-size: 18px;\n color: #1cc286;\n margin-left: 6px;\n\n @media (min-width: 768px) {\n font-size: 18px;\n }\n"], ["\n font-weight: 600;\n margin: 0;\n font-size: 18px;\n color: #1cc286;\n margin-left: 6px;\n\n @media (min-width: 768px) {\n font-size: 18px;\n }\n"])));
|
|
18832
18832
|
var ReviewTitle$1 = newStyled.h2(templateObject_8$d || (templateObject_8$d = __makeTemplateObject(["\n font-size: 18px;\n line-height: 20px;\n font-weight: 600;\n margin: 0;\n"], ["\n font-size: 18px;\n line-height: 20px;\n font-weight: 600;\n margin: 0;\n"])));
|
|
18833
18833
|
var ReviewDescription = newStyled.div(templateObject_9$9 || (templateObject_9$9 = __makeTemplateObject(["\n font-weight: normal;\n font-size: 16px;\n margin: 0;\n line-height: 25px;\n word-break: break-word;\n margin-top: 5px;\n white-space: pre-wrap;\n"], ["\n font-weight: normal;\n font-size: 16px;\n margin: 0;\n line-height: 25px;\n word-break: break-word;\n margin-top: 5px;\n white-space: pre-wrap;\n"])));
|
|
18834
18834
|
var ImageContainer$2 = newStyled.div(templateObject_10$8 || (templateObject_10$8 = __makeTemplateObject(["\n width: 100% !important;\n min-width: 100%;\n height: initial !important;\n min-height: 250px;\n background-size: contain !important;\n margin: 0 !important;\n line-height: 0;\n\n @media (min-width: 768px) {\n width: unset;\n min-width: 50%;\n max-width: 100%;\n background-color: #fff;\n display: inline-block;\n vertical-align: middle;\n max-height: calc(100vh - 100px);\n padding: 20px;\n }\n"], ["\n width: 100% !important;\n min-width: 100%;\n height: initial !important;\n min-height: 250px;\n background-size: contain !important;\n margin: 0 !important;\n line-height: 0;\n\n @media (min-width: 768px) {\n width: unset;\n min-width: 50%;\n max-width: 100%;\n background-color: #fff;\n display: inline-block;\n vertical-align: middle;\n max-height: calc(100vh - 100px);\n padding: 20px;\n }\n"])));
|
|
@@ -18863,17 +18863,17 @@ var Review$1 = function (_a) {
|
|
|
18863
18863
|
return (jsxRuntime.jsx(Modal, __assign$1({ id: modalId, maxFullScreen: maxFullScreen, padding: "0" }, { children: jsxRuntime.jsxs(Container$B, { children: [jsxRuntime.jsx(CloseButton, __assign$1({ onClick: close }, { children: "X" }), void 0), jsxRuntime.jsx(ImageContainer$2, { children: image &&
|
|
18864
18864
|
(!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));
|
|
18865
18865
|
};
|
|
18866
|
-
var templateObject_1$
|
|
18866
|
+
var templateObject_1$R, templateObject_2$E, templateObject_3$z, templateObject_4$s, templateObject_5$m, templateObject_6$k, templateObject_7$i, templateObject_8$d, templateObject_9$9, templateObject_10$8, templateObject_11$5, templateObject_12$2, templateObject_13$2, templateObject_14$2, templateObject_15$1, templateObject_16$1, templateObject_17$1, templateObject_18$1, templateObject_19$1, templateObject_20, templateObject_21, templateObject_22, templateObject_23;
|
|
18867
18867
|
|
|
18868
18868
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_DESKTOP = 500;
|
|
18869
18869
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_MOBILE = 168;
|
|
18870
|
-
var Container$A = newStyled.div(templateObject_1$
|
|
18871
|
-
var Heading = newStyled.div(templateObject_2$
|
|
18872
|
-
var Content = newStyled.div(templateObject_3$
|
|
18873
|
-
var ReviewContainer = newStyled.div(templateObject_4$
|
|
18874
|
-
var DateText = newStyled.span(templateObject_5$
|
|
18875
|
-
var VariantText = newStyled.div(templateObject_6$
|
|
18876
|
-
var ReviewerName = newStyled.h2(templateObject_7$
|
|
18870
|
+
var Container$A = newStyled.div(templateObject_1$Q || (templateObject_1$Q = __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"])));
|
|
18871
|
+
var Heading = newStyled.div(templateObject_2$D || (templateObject_2$D = __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"])));
|
|
18872
|
+
var Content = newStyled.div(templateObject_3$y || (templateObject_3$y = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n"], ["\n display: flex;\n justify-content: space-between;\n"])));
|
|
18873
|
+
var ReviewContainer = newStyled.div(templateObject_4$r || (templateObject_4$r = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
18874
|
+
var DateText = newStyled.span(templateObject_5$l || (templateObject_5$l = __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"])));
|
|
18875
|
+
var VariantText = newStyled.div(templateObject_6$j || (templateObject_6$j = __makeTemplateObject(["\n font-weight: 400;\n font-size: 14px;\n line-height: 22px;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"], ["\n font-weight: 400;\n font-size: 14px;\n line-height: 22px;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"])));
|
|
18876
|
+
var ReviewerName = newStyled.h2(templateObject_7$h || (templateObject_7$h = __makeTemplateObject(["\n font-weight: 600;\n margin: 0;\n font-size: 14px;\n line-height: 22px;\n\n @media (min-width: 768px) {\n font-size: 18px;\n line-height: 28px;\n }\n"], ["\n font-weight: 600;\n margin: 0;\n font-size: 14px;\n line-height: 22px;\n\n @media (min-width: 768px) {\n font-size: 18px;\n line-height: 28px;\n }\n"])));
|
|
18877
18877
|
var ReviewTitle = newStyled.h3(templateObject_8$c || (templateObject_8$c = __makeTemplateObject(["\n font-size: 14px;\n line-height: 22px;\n margin: 10px 0 8px;\n font-weight: 600;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"], ["\n font-size: 14px;\n line-height: 22px;\n margin: 10px 0 8px;\n font-weight: 600;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"])));
|
|
18878
18878
|
var ReviewDescriptionDesktop = newStyled.div(templateObject_9$8 || (templateObject_9$8 = __makeTemplateObject(["\n display: none;\n\n @media (min-width: 768px) {\n display: block;\n font-weight: normal;\n font-size: 16px;\n line-height: 24px;\n margin: 0;\n white-space: pre-wrap;\n\n a.see-more {\n color: var(--colors-semantic-informative-color);\n text-decoration: underline;\n cursor: pointer;\n font-weight: 600;\n white-space: nowrap;\n }\n }\n"], ["\n display: none;\n\n @media (min-width: 768px) {\n display: block;\n font-weight: normal;\n font-size: 16px;\n line-height: 24px;\n margin: 0;\n white-space: pre-wrap;\n\n a.see-more {\n color: var(--colors-semantic-informative-color);\n text-decoration: underline;\n cursor: pointer;\n font-weight: 600;\n white-space: nowrap;\n }\n }\n"])));
|
|
18879
18879
|
var ReviewDescriptionMobile = newStyled.div(templateObject_10$7 || (templateObject_10$7 = __makeTemplateObject(["\n font-weight: normal;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n\n a.see-more {\n color: var(--colors-semantic-informative-color);\n text-decoration: underline;\n cursor: pointer;\n font-weight: 600;\n white-space: nowrap;\n }\n\n @media (min-width: 768px) {\n display: none;\n }\n"], ["\n font-weight: normal;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n\n a.see-more {\n color: var(--colors-semantic-informative-color);\n text-decoration: underline;\n cursor: pointer;\n font-weight: 600;\n white-space: nowrap;\n }\n\n @media (min-width: 768px) {\n display: none;\n }\n"])));
|
|
@@ -18919,15 +18919,15 @@ var Review = function (_a) {
|
|
|
18919
18919
|
: description,
|
|
18920
18920
|
} }, 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));
|
|
18921
18921
|
};
|
|
18922
|
-
var templateObject_1$
|
|
18923
|
-
|
|
18924
|
-
var Container$z = newStyled.div(templateObject_1$
|
|
18925
|
-
var ReviewsContainer = newStyled.div(templateObject_2$
|
|
18926
|
-
var ReviewsCount = newStyled.div(templateObject_3$
|
|
18927
|
-
var ReviewsStars = newStyled.div(templateObject_4$
|
|
18928
|
-
var ReviewsTextCount = newStyled(Text$7)(templateObject_5$
|
|
18929
|
-
var ReviewsImages = newStyled.div(templateObject_6$
|
|
18930
|
-
var SummaryItem = newStyled.div(templateObject_7$
|
|
18922
|
+
var templateObject_1$Q, templateObject_2$D, templateObject_3$y, templateObject_4$r, templateObject_5$l, templateObject_6$j, templateObject_7$h, templateObject_8$c, templateObject_9$8, templateObject_10$7, templateObject_11$4, templateObject_12$1, templateObject_13$1, templateObject_14$1, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19;
|
|
18923
|
+
|
|
18924
|
+
var Container$z = newStyled.div(templateObject_1$P || (templateObject_1$P = __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"])));
|
|
18925
|
+
var ReviewsContainer = newStyled.div(templateObject_2$C || (templateObject_2$C = __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"])));
|
|
18926
|
+
var ReviewsCount = newStyled.div(templateObject_3$x || (templateObject_3$x = __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"])));
|
|
18927
|
+
var ReviewsStars = newStyled.div(templateObject_4$q || (templateObject_4$q = __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"])));
|
|
18928
|
+
var ReviewsTextCount = newStyled(Text$7)(templateObject_5$k || (templateObject_5$k = __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"])));
|
|
18929
|
+
var ReviewsImages = newStyled.div(templateObject_6$i || (templateObject_6$i = __makeTemplateObject(["\n display: flex;\n flex-wrap: wrap;\n max-width: 348px;\n gap: 4px;\n justify-content: center;\n\n @media (min-width: 768px) {\n gap: 8px;\n max-width: 360px;\n }\n"], ["\n display: flex;\n flex-wrap: wrap;\n max-width: 348px;\n gap: 4px;\n justify-content: center;\n\n @media (min-width: 768px) {\n gap: 8px;\n max-width: 360px;\n }\n"])));
|
|
18930
|
+
var SummaryItem = newStyled.div(templateObject_7$g || (templateObject_7$g = __makeTemplateObject(["\n width: 84px;\n height: 68px;\n background: ", ";\n background-repeat: no-repeat;\n background-size: cover;\n background-position: center;\n cursor: zoom-in;\n"], ["\n width: 84px;\n height: 68px;\n background: ", ";\n background-repeat: no-repeat;\n background-size: cover;\n background-position: center;\n cursor: zoom-in;\n"])), function (_a) {
|
|
18931
18931
|
var backgroundUrl = _a.backgroundUrl;
|
|
18932
18932
|
return "url(".concat(backgroundUrl, ")");
|
|
18933
18933
|
});
|
|
@@ -18937,17 +18937,17 @@ var ReviewsHeader = function (_a) {
|
|
|
18937
18937
|
var theme = useTheme();
|
|
18938
18938
|
return (jsxRuntime.jsxs(Container$z, { 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));
|
|
18939
18939
|
};
|
|
18940
|
-
var templateObject_1$
|
|
18940
|
+
var templateObject_1$P, templateObject_2$C, templateObject_3$x, templateObject_4$q, templateObject_5$k, templateObject_6$i, templateObject_7$g;
|
|
18941
18941
|
|
|
18942
|
-
var Container$y = newStyled.div(templateObject_1$
|
|
18943
|
-
var Text$1 = newStyled.p(templateObject_2$
|
|
18942
|
+
var Container$y = newStyled.div(templateObject_1$O || (templateObject_1$O = __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"])));
|
|
18943
|
+
var Text$1 = newStyled.p(templateObject_2$B || (templateObject_2$B = __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; });
|
|
18944
18944
|
var ScrollToTop = function (_a) {
|
|
18945
18945
|
var scrollToTopText = _a.scrollToTopText, onClick = _a.onClick, fill = _a.fill, _b = _a.Icon, Icon$1 = _b === void 0 ? Icon.Arrows.CircleChevronUp : _b;
|
|
18946
18946
|
var theme = useTheme();
|
|
18947
18947
|
var fillValue = fill || theme.colors.pallete.primary.color;
|
|
18948
18948
|
return (jsxRuntime.jsxs(Container$y, __assign$1({ onClick: onClick, "data-testid": "scrollTopContainer" }, { children: [jsxRuntime.jsx(Text$1, __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));
|
|
18949
18949
|
};
|
|
18950
|
-
var templateObject_1$
|
|
18950
|
+
var templateObject_1$O, templateObject_2$B;
|
|
18951
18951
|
|
|
18952
18952
|
var Input = newStyled.input(function (props) { return ({
|
|
18953
18953
|
padding: props.theme.component.input.padding,
|
|
@@ -18978,7 +18978,7 @@ var Input = newStyled.input(function (props) { return ({
|
|
|
18978
18978
|
},
|
|
18979
18979
|
}); });
|
|
18980
18980
|
|
|
18981
|
-
var Container$x = newStyled.div(templateObject_1$
|
|
18981
|
+
var Container$x = newStyled.div(templateObject_1$N || (templateObject_1$N = __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({
|
|
18982
18982
|
borderTop: ['0.063rem solid var(--colors-shades-100-color)', 'none'],
|
|
18983
18983
|
}));
|
|
18984
18984
|
var Description = newStyled.div({
|
|
@@ -18997,7 +18997,7 @@ var ProductItem = function (_a) {
|
|
|
18997
18997
|
var theme = useTheme();
|
|
18998
18998
|
return (jsxRuntime.jsxs(Container$x, __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));
|
|
18999
18999
|
};
|
|
19000
|
-
var templateObject_1$
|
|
19000
|
+
var templateObject_1$N;
|
|
19001
19001
|
|
|
19002
19002
|
var Container$w = newStyled.div({
|
|
19003
19003
|
display: 'flex',
|
|
@@ -19013,7 +19013,7 @@ var Ul = newStyled.ul({
|
|
|
19013
19013
|
margin: '0px',
|
|
19014
19014
|
padding: '0px',
|
|
19015
19015
|
});
|
|
19016
|
-
var Li = newStyled.li(templateObject_1$
|
|
19016
|
+
var Li = newStyled.li(templateObject_1$M || (templateObject_1$M = __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({
|
|
19017
19017
|
padding: [0, '0rem 1rem'],
|
|
19018
19018
|
borderRadius: [0, '0.5rem'],
|
|
19019
19019
|
}));
|
|
@@ -19025,12 +19025,12 @@ var Anchor = newStyled.a({
|
|
|
19025
19025
|
padding: 0,
|
|
19026
19026
|
textDecoration: 'none',
|
|
19027
19027
|
});
|
|
19028
|
-
var Container$v = newStyled.div(templateObject_2$
|
|
19028
|
+
var Container$v = newStyled.div(templateObject_2$A || (templateObject_2$A = __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({
|
|
19029
19029
|
border: ['none', '0.063rem solid var(--colors-pallete-secondary-color)'],
|
|
19030
19030
|
marginTop: ['1.25rem', '0.125rem'],
|
|
19031
19031
|
borderRadius: ['0', '0.5rem'],
|
|
19032
19032
|
}));
|
|
19033
|
-
var Header$2 = newStyled.div(templateObject_3$
|
|
19033
|
+
var Header$2 = newStyled.div(templateObject_3$w || (templateObject_3$w = __makeTemplateObject(["\n ", ",\n"], ["\n ", ",\n"])), mediaQueries({
|
|
19034
19034
|
margin: ['0rem 0rem 1rem 0rem', '1rem'],
|
|
19035
19035
|
}));
|
|
19036
19036
|
var ResultsPanel = function (_a) {
|
|
@@ -19038,9 +19038,9 @@ var ResultsPanel = function (_a) {
|
|
|
19038
19038
|
var theme = useTheme();
|
|
19039
19039
|
return (jsxRuntime.jsxs(Container$v, __assign$1({ "data-testid": testId, theme: theme }, { children: [header && (jsxRuntime.jsx(Header$2, __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));
|
|
19040
19040
|
};
|
|
19041
|
-
var templateObject_1$
|
|
19041
|
+
var templateObject_1$M, templateObject_2$A, templateObject_3$w;
|
|
19042
19042
|
|
|
19043
|
-
var Button$5 = newStyled.button(templateObject_1$
|
|
19043
|
+
var Button$5 = newStyled.button(templateObject_1$L || (templateObject_1$L = __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({
|
|
19044
19044
|
right: ['1rem', '7.75rem'],
|
|
19045
19045
|
top: ['0.75rem', '0.75rem'],
|
|
19046
19046
|
}));
|
|
@@ -19049,7 +19049,7 @@ var ClearButton = function (_a) {
|
|
|
19049
19049
|
var theme = useTheme();
|
|
19050
19050
|
return (jsxRuntime.jsx(Button$5, __assign$1({ onClick: onClick, theme: theme }, { children: jsxRuntime.jsx(Icon.Actions.Close, { height: 1.25, width: 1.25 }, void 0) }), void 0));
|
|
19051
19051
|
};
|
|
19052
|
-
var templateObject_1$
|
|
19052
|
+
var templateObject_1$L;
|
|
19053
19053
|
|
|
19054
19054
|
var SearchIconContainer = newStyled.div({
|
|
19055
19055
|
display: 'flex',
|
|
@@ -19059,7 +19059,7 @@ var SearchIconContainer = newStyled.div({
|
|
|
19059
19059
|
background: 'white',
|
|
19060
19060
|
alignSelf: 'center',
|
|
19061
19061
|
});
|
|
19062
|
-
var StyledButton$1 = newStyled(ButtonSecondary)(templateObject_1$
|
|
19062
|
+
var StyledButton$1 = newStyled(ButtonSecondary)(templateObject_1$K || (templateObject_1$K = __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"])));
|
|
19063
19063
|
var SearchControl = function (_a) {
|
|
19064
19064
|
var open = _a.open, onSearch = _a.onSearch, onClose = _a.onClose, _b = _a.showSearchIcon, showSearchIcon = _b === void 0 ? false : _b;
|
|
19065
19065
|
var theme = useTheme();
|
|
@@ -19075,7 +19075,7 @@ var SearchControl = function (_a) {
|
|
|
19075
19075
|
}
|
|
19076
19076
|
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(StyledButton$1, { text: "SEARCH", onClick: onSearch }, void 0), open && jsxRuntime.jsx(ClearButton, { onClick: onClose }, void 0)] }, void 0));
|
|
19077
19077
|
};
|
|
19078
|
-
var templateObject_1$
|
|
19078
|
+
var templateObject_1$K;
|
|
19079
19079
|
|
|
19080
19080
|
var initialState$1 = { selectedOption: undefined, open: false, term: '' };
|
|
19081
19081
|
var reducer = function (state, action) {
|
|
@@ -19142,20 +19142,20 @@ var SearchBar = function (_a) {
|
|
|
19142
19142
|
} }, 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));
|
|
19143
19143
|
};
|
|
19144
19144
|
|
|
19145
|
-
var Container$t = newStyled.div(templateObject_1$
|
|
19146
|
-
var BackArrow = newStyled.div(templateObject_2$
|
|
19147
|
-
var BoldSpan = newStyled.span(templateObject_3$
|
|
19148
|
-
var NormalSpan = newStyled.span(templateObject_4$
|
|
19149
|
-
var SearchNavigationParents = newStyled.div(templateObject_5$
|
|
19145
|
+
var Container$t = newStyled.div(templateObject_1$J || (templateObject_1$J = __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"])));
|
|
19146
|
+
var BackArrow = newStyled.div(templateObject_2$z || (templateObject_2$z = __makeTemplateObject(["\n transform: rotate(180deg);\n margin-right: 0.5rem;\n"], ["\n transform: rotate(180deg);\n margin-right: 0.5rem;\n"])));
|
|
19147
|
+
var BoldSpan = newStyled.span(templateObject_3$v || (templateObject_3$v = __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"])));
|
|
19148
|
+
var NormalSpan = newStyled.span(templateObject_4$p || (templateObject_4$p = __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"])));
|
|
19149
|
+
var SearchNavigationParents = newStyled.div(templateObject_5$j || (templateObject_5$j = __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"])));
|
|
19150
19150
|
var SearchNavigation = function (_a) {
|
|
19151
19151
|
var returnText = _a.returnText, returnUrl = _a.returnUrl, _b = _a.steps, steps = _b === void 0 ? [] : _b, returnAction = _a.returnAction;
|
|
19152
19152
|
return (jsxRuntime.jsxs(Container$t, { 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) {
|
|
19153
19153
|
return index === steps.length - 1 ? (jsxRuntime.jsx(BoldSpan, { children: step }, step)) : (jsxRuntime.jsx(NormalSpan, { children: "".concat(step, " / ") }, step));
|
|
19154
19154
|
}) }, void 0)] }, void 0));
|
|
19155
19155
|
};
|
|
19156
|
-
var templateObject_1$
|
|
19156
|
+
var templateObject_1$J, templateObject_2$z, templateObject_3$v, templateObject_4$p, templateObject_5$j;
|
|
19157
19157
|
|
|
19158
|
-
var Container$s = newStyled.div(templateObject_1$
|
|
19158
|
+
var Container$s = newStyled.div(templateObject_1$I || (templateObject_1$I = __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) {
|
|
19159
19159
|
var alignCenter = _a.alignCenter;
|
|
19160
19160
|
return alignCenter &&
|
|
19161
19161
|
"\n justify-content: center;\n align-items: center;\n text-align: center;\n ";
|
|
@@ -19165,26 +19165,26 @@ var Container$s = newStyled.div(templateObject_1$H || (templateObject_1$H = __ma
|
|
|
19165
19165
|
}, function (props) { return props.backgroundColor; }, function (props) { return props.textColor; }, function (props) {
|
|
19166
19166
|
return props.border ? "".concat(props.border.borderWidth, " solid ").concat(props.border.borderColor) : 'none';
|
|
19167
19167
|
});
|
|
19168
|
-
var TitleText = newStyled.div(templateObject_2$
|
|
19169
|
-
var BannerText = newStyled.div(templateObject_3$
|
|
19168
|
+
var TitleText = newStyled.div(templateObject_2$y || (templateObject_2$y = __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"])));
|
|
19169
|
+
var BannerText = newStyled.div(templateObject_3$u || (templateObject_3$u = __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"])));
|
|
19170
19170
|
var ShortBanner = function (_a) {
|
|
19171
19171
|
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;
|
|
19172
19172
|
var theme = useTheme();
|
|
19173
19173
|
return (jsxRuntime.jsxs(Container$s, __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));
|
|
19174
19174
|
};
|
|
19175
|
-
var templateObject_1$
|
|
19176
|
-
|
|
19177
|
-
var TableElement$3 = newStyled.table(templateObject_1$
|
|
19178
|
-
var TableCell$3 = newStyled.td(templateObject_2$
|
|
19179
|
-
var TableHead$3 = newStyled.th(templateObject_3$
|
|
19180
|
-
var Label$2 = newStyled('div')(templateObject_4$
|
|
19181
|
-
var TopLabel$1 = newStyled(Label$2)(templateObject_5$
|
|
19182
|
-
var LeftLabel$1 = newStyled(Label$2)(templateObject_6$
|
|
19183
|
-
var Container$r = newStyled('div')(templateObject_7$
|
|
19175
|
+
var templateObject_1$I, templateObject_2$y, templateObject_3$u;
|
|
19176
|
+
|
|
19177
|
+
var TableElement$3 = newStyled.table(templateObject_1$H || (templateObject_1$H = __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; });
|
|
19178
|
+
var TableCell$3 = newStyled.td(templateObject_2$x || (templateObject_2$x = __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; });
|
|
19179
|
+
var TableHead$3 = newStyled.th(templateObject_3$t || (templateObject_3$t = __makeTemplateObject(["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n font-weight: 700;\n 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; });
|
|
19180
|
+
var Label$2 = newStyled('div')(templateObject_4$o || (templateObject_4$o = __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"])));
|
|
19181
|
+
var TopLabel$1 = newStyled(Label$2)(templateObject_5$i || (templateObject_5$i = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
19182
|
+
var LeftLabel$1 = newStyled(Label$2)(templateObject_6$h || (templateObject_6$h = __makeTemplateObject(["\n width: 20px;\n transform: rotate(270deg);\n"], ["\n width: 20px;\n transform: rotate(270deg);\n"])));
|
|
19183
|
+
var Container$r = newStyled('div')(templateObject_7$f || (templateObject_7$f = __makeTemplateObject(["\n gap: 5px;\n display: flex;\n width: fit-content;\n align-items: center;\n"], ["\n gap: 5px;\n display: flex;\n width: fit-content;\n align-items: center;\n"])));
|
|
19184
19184
|
var LabelText$1 = newStyled('span')(templateObject_8$b || (templateObject_8$b = __makeTemplateObject(["\n display: flex;\n min-width: 70px;\n justify-content: center;\n"], ["\n display: flex;\n min-width: 70px;\n justify-content: center;\n"])));
|
|
19185
19185
|
var Column$2 = newStyled('div')(templateObject_9$7 || (templateObject_9$7 = __makeTemplateObject(["\n display: flex;\n min-width: 675px;\n align-items: center;\n flex-direction: column;\n\n @media (max-width: 768px) {\n min-width: 100%;\n }\n"], ["\n display: flex;\n min-width: 675px;\n align-items: center;\n flex-direction: column;\n\n @media (max-width: 768px) {\n min-width: 100%;\n }\n"])));
|
|
19186
19186
|
var TableRow$3 = newStyled.tr(templateObject_10$6 || (templateObject_10$6 = __makeTemplateObject(["\n &:last-child {\n td {\n border-bottom: none;\n }\n }\n\n &.background {\n background-color: ", ";\n }\n"], ["\n &:last-child {\n td {\n border-bottom: none;\n }\n }\n\n &.background {\n background-color: ", ";\n }\n"])), function (props) { return props.backgroundColor; });
|
|
19187
|
-
var templateObject_1$
|
|
19187
|
+
var templateObject_1$H, templateObject_2$x, templateObject_3$t, templateObject_4$o, templateObject_5$i, templateObject_6$h, templateObject_7$f, templateObject_8$b, templateObject_9$7, templateObject_10$6;
|
|
19188
19188
|
|
|
19189
19189
|
var getIsOdd$2 = function (number) { return number % 2 !== 0; };
|
|
19190
19190
|
var getCellColor$2 = function (index, cell) {
|
|
@@ -19225,16 +19225,16 @@ var SizeChartTable = function (_a) {
|
|
|
19225
19225
|
}, 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$3, __assign$1({ className: getIsOdd$2(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$3, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }), index)); }) }, void 0))] }), void 0)] }, void 0)] }, void 0));
|
|
19226
19226
|
};
|
|
19227
19227
|
|
|
19228
|
-
var TableElement$2 = newStyled.table(templateObject_1$
|
|
19229
|
-
var TableCell$2 = newStyled.td(templateObject_2$
|
|
19230
|
-
var TableHead$2 = newStyled.th(templateObject_3$
|
|
19231
|
-
var TableRow$2 = newStyled.tr(templateObject_4$
|
|
19228
|
+
var TableElement$2 = newStyled.table(templateObject_1$G || (templateObject_1$G = __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; });
|
|
19229
|
+
var TableCell$2 = newStyled.td(templateObject_2$w || (templateObject_2$w = __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; });
|
|
19230
|
+
var TableHead$2 = newStyled.th(templateObject_3$s || (templateObject_3$s = __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; });
|
|
19231
|
+
var TableRow$2 = newStyled.tr(templateObject_4$n || (templateObject_4$n = __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; });
|
|
19232
19232
|
var SizeTable = function (_a) {
|
|
19233
19233
|
var headers = _a.headers, data = _a.data, className = _a.className;
|
|
19234
19234
|
var theme = useTheme();
|
|
19235
19235
|
return (jsxRuntime.jsxs(TableElement$2, __assign$1({ color: theme.colors.shades['700'].color, borderColor: theme.colors.shades['100'].color, className: className }, { children: [jsxRuntime.jsx("thead", { children: jsxRuntime.jsx(TableRow$2, __assign$1({ backgroundColor: theme.colors.shades['10'].color }, { children: headers.map(function (header, index) { return (jsxRuntime.jsx(TableHead$2, __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$2, __assign$1({ className: index % 2 !== 0 ? '' : 'background', backgroundColor: theme.colors.shades['10'].color }, { children: 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));
|
|
19236
19236
|
};
|
|
19237
|
-
var templateObject_1$
|
|
19237
|
+
var templateObject_1$G, templateObject_2$w, templateObject_3$s, templateObject_4$n;
|
|
19238
19238
|
|
|
19239
19239
|
var getStylesBySize$7 = function (size) {
|
|
19240
19240
|
switch (size) {
|
|
@@ -19261,7 +19261,7 @@ var textButtonStyles = function (theme, size) {
|
|
|
19261
19261
|
} });
|
|
19262
19262
|
};
|
|
19263
19263
|
var withContainer = function (iconFill, isLeading, Icon) {
|
|
19264
|
-
return Icon && (jsx("span", __assign$1({ css: css(templateObject_1$
|
|
19264
|
+
return Icon && (jsx("span", __assign$1({ css: css(templateObject_1$F || (templateObject_1$F = __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));
|
|
19265
19265
|
};
|
|
19266
19266
|
var getIconFill = function (theme, disabled, iconColor) {
|
|
19267
19267
|
if (disabled)
|
|
@@ -19277,23 +19277,23 @@ var TextButton = function (_a) {
|
|
|
19277
19277
|
var iconFill = getIconFill(theme, disabled, iconColor);
|
|
19278
19278
|
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));
|
|
19279
19279
|
};
|
|
19280
|
-
var templateObject_1$
|
|
19280
|
+
var templateObject_1$F;
|
|
19281
19281
|
|
|
19282
|
-
var Container$q = newStyled.div(templateObject_1$
|
|
19283
|
-
var P = newStyled.p(templateObject_2$
|
|
19284
|
-
var PercentageSpan = newStyled.span(templateObject_3$
|
|
19282
|
+
var Container$q = newStyled.div(templateObject_1$E || (templateObject_1$E = __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"])));
|
|
19283
|
+
var P = newStyled.p(templateObject_2$v || (templateObject_2$v = __makeTemplateObject(["\n margin: 0 0 0 10px;\n"], ["\n margin: 0 0 0 10px;\n"])));
|
|
19284
|
+
var PercentageSpan = newStyled.span(templateObject_3$r || (templateObject_3$r = __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"])));
|
|
19285
19285
|
var SizeFitGuide = function (_a) {
|
|
19286
19286
|
var title = _a.title, fitPercentage = _a.fitPercentage, onClick = _a.onClick, onClickFitPercentage = _a.onClickFitPercentage, _b = _a.hideIcon, hideIcon = _b === void 0 ? false : _b;
|
|
19287
19287
|
return (jsxRuntime.jsxs(Container$q, { 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));
|
|
19288
19288
|
};
|
|
19289
|
-
var templateObject_1$
|
|
19289
|
+
var templateObject_1$E, templateObject_2$v, templateObject_3$r;
|
|
19290
19290
|
|
|
19291
|
-
var ButtonsContainer = newStyled.div(templateObject_1$
|
|
19291
|
+
var ButtonsContainer = newStyled.div(templateObject_1$D || (templateObject_1$D = __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) {
|
|
19292
19292
|
var inline = _a.inline;
|
|
19293
19293
|
return (inline ? '0 0 0 10px' : '8px 0 0 0');
|
|
19294
19294
|
});
|
|
19295
|
-
var Row = newStyled.div(templateObject_2$
|
|
19296
|
-
var templateObject_1$
|
|
19295
|
+
var Row = newStyled.div(templateObject_2$u || (templateObject_2$u = __makeTemplateObject(["\n gap: 5px;\n display: flex;\n margin: 8px 0 0;\n flex-wrap: wrap;\n\n & button {\n font-weight: 600;\n }\n"], ["\n gap: 5px;\n display: flex;\n margin: 8px 0 0;\n flex-wrap: wrap;\n\n & button {\n font-weight: 600;\n }\n"])));
|
|
19296
|
+
var templateObject_1$D, templateObject_2$u;
|
|
19297
19297
|
|
|
19298
19298
|
var SizeSelector = function (_a) {
|
|
19299
19299
|
var _b;
|
|
@@ -19315,7 +19315,7 @@ var SizeSelector = function (_a) {
|
|
|
19315
19315
|
}) }), void 0)] }), void 0));
|
|
19316
19316
|
};
|
|
19317
19317
|
|
|
19318
|
-
var TabContainer = newStyled.div(templateObject_1$
|
|
19318
|
+
var TabContainer = newStyled.div(templateObject_1$C || (templateObject_1$C = __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) {
|
|
19319
19319
|
var titleSize = _a.titleSize;
|
|
19320
19320
|
return titleSize;
|
|
19321
19321
|
}, function (_a) {
|
|
@@ -19332,18 +19332,18 @@ var Tab = function (_a) {
|
|
|
19332
19332
|
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;
|
|
19333
19333
|
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));
|
|
19334
19334
|
};
|
|
19335
|
-
var templateObject_1$
|
|
19335
|
+
var templateObject_1$C;
|
|
19336
19336
|
|
|
19337
|
-
var Container$p = newStyled.div(templateObject_1$
|
|
19338
|
-
var TabList = newStyled.div(templateObject_2$
|
|
19337
|
+
var Container$p = newStyled.div(templateObject_1$B || (templateObject_1$B = __makeTemplateObject(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
|
|
19338
|
+
var TabList = newStyled.div(templateObject_2$t || (templateObject_2$t = __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) {
|
|
19339
19339
|
var backgroundColor = _a.backgroundColor;
|
|
19340
19340
|
return backgroundColor;
|
|
19341
19341
|
}, function (_a) {
|
|
19342
19342
|
var borderColor = _a.borderColor;
|
|
19343
19343
|
return (borderColor ? "border-bottom: 1px solid ".concat(borderColor) : '');
|
|
19344
19344
|
});
|
|
19345
|
-
var TabContent = newStyled.div(templateObject_3$
|
|
19346
|
-
var TabSeparator = newStyled.div(templateObject_4$
|
|
19345
|
+
var TabContent = newStyled.div(templateObject_3$q || (templateObject_3$q = __makeTemplateObject(["\n display: block;\n"], ["\n display: block;\n"])));
|
|
19346
|
+
var TabSeparator = newStyled.div(templateObject_4$m || (templateObject_4$m = __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"])));
|
|
19347
19347
|
var Tabs = function (_a) {
|
|
19348
19348
|
var _b;
|
|
19349
19349
|
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;
|
|
@@ -19354,14 +19354,14 @@ var Tabs = function (_a) {
|
|
|
19354
19354
|
var selectedContent = (_b = tabs.find(function (tab) { return tab.title === selectedTab; })) === null || _b === void 0 ? void 0 : _b.content;
|
|
19355
19355
|
return (jsxRuntime.jsxs(Container$p, __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));
|
|
19356
19356
|
};
|
|
19357
|
-
var templateObject_1$
|
|
19357
|
+
var templateObject_1$B, templateObject_2$t, templateObject_3$q, templateObject_4$m;
|
|
19358
19358
|
|
|
19359
|
-
var Container$o = newStyled.div(templateObject_1$
|
|
19359
|
+
var Container$o = newStyled.div(templateObject_1$A || (templateObject_1$A = __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"])));
|
|
19360
19360
|
var Tag = function (_a) {
|
|
19361
19361
|
var text = _a.text, className = _a.className;
|
|
19362
19362
|
return jsxRuntime.jsx(Container$o, __assign$1({ className: className }, { children: text }), void 0);
|
|
19363
19363
|
};
|
|
19364
|
-
var templateObject_1$
|
|
19364
|
+
var templateObject_1$A;
|
|
19365
19365
|
|
|
19366
19366
|
var getStylesBySize$6 = function (size, styledBorder) {
|
|
19367
19367
|
switch (size) {
|
|
@@ -19472,9 +19472,9 @@ var SeasonOfferRoundedTag = function (_a) {
|
|
|
19472
19472
|
return (jsx(Tag, { css: __assign$1({ backgroundColor: backgroundColor, fontWeight: 700, color: '#FFFFFF', textAlign: 'center', borderRadius: '50%' }, stylesBySize), text: text, className: className }, void 0));
|
|
19473
19473
|
};
|
|
19474
19474
|
|
|
19475
|
-
var ImageWrapper$1 = newStyled.div(templateObject_1$
|
|
19476
|
-
var VideoOverlay$1 = newStyled.div(templateObject_2$
|
|
19477
|
-
var FullscreenVideo = newStyled.div(templateObject_3$
|
|
19475
|
+
var ImageWrapper$1 = newStyled.div(templateObject_1$z || (templateObject_1$z = __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"])));
|
|
19476
|
+
var VideoOverlay$1 = newStyled.div(templateObject_2$s || (templateObject_2$s = __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"])));
|
|
19477
|
+
var FullscreenVideo = newStyled.div(templateObject_3$p || (templateObject_3$p = __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"])));
|
|
19478
19478
|
var ImageVideo = function (_a) {
|
|
19479
19479
|
var imageLink = _a.imageLink, isVideo = _a.isVideo, isMobile = _a.isMobile;
|
|
19480
19480
|
var video = React$2.useRef(null);
|
|
@@ -19494,12 +19494,12 @@ var ImageVideo = function (_a) {
|
|
|
19494
19494
|
height: '100%',
|
|
19495
19495
|
} }, void 0)] }, void 0))] }, void 0));
|
|
19496
19496
|
};
|
|
19497
|
-
var templateObject_1$
|
|
19497
|
+
var templateObject_1$z, templateObject_2$s, templateObject_3$p;
|
|
19498
19498
|
|
|
19499
|
-
var ContainerDesktop = css(templateObject_1$
|
|
19500
|
-
var ContainerMobile = css(templateObject_2$
|
|
19501
|
-
var Container$n = newStyled.div(templateObject_3$
|
|
19502
|
-
var TextContainer = newStyled.div(templateObject_4$
|
|
19499
|
+
var ContainerDesktop = css(templateObject_1$y || (templateObject_1$y = __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"])));
|
|
19500
|
+
var ContainerMobile = css(templateObject_2$r || (templateObject_2$r = __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"])));
|
|
19501
|
+
var Container$n = newStyled.div(templateObject_3$o || (templateObject_3$o = __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);
|
|
19502
|
+
var TextContainer = newStyled.div(templateObject_4$l || (templateObject_4$l = __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"])));
|
|
19503
19503
|
var TextWithImage = function (_a) {
|
|
19504
19504
|
var _b, _c, _d, _e;
|
|
19505
19505
|
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"]);
|
|
@@ -19529,25 +19529,25 @@ var TextWithImage = function (_a) {
|
|
|
19529
19529
|
},
|
|
19530
19530
|
} }, 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));
|
|
19531
19531
|
};
|
|
19532
|
-
var templateObject_1$
|
|
19532
|
+
var templateObject_1$y, templateObject_2$r, templateObject_3$o, templateObject_4$l;
|
|
19533
19533
|
|
|
19534
|
-
var TimerContainer$1 = newStyled.div(templateObject_1$
|
|
19534
|
+
var TimerContainer$1 = newStyled.div(templateObject_1$x || (templateObject_1$x = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
19535
19535
|
var timerColor = _a.timerColor;
|
|
19536
19536
|
return timerColor || '';
|
|
19537
19537
|
});
|
|
19538
|
-
var TimerContainerV2 = newStyled.div(templateObject_2$
|
|
19538
|
+
var TimerContainerV2 = newStyled.div(templateObject_2$q || (templateObject_2$q = __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) {
|
|
19539
19539
|
var timerColor = _a.timerColor;
|
|
19540
19540
|
return timerColor || '';
|
|
19541
19541
|
});
|
|
19542
|
-
var UnitBlock = newStyled(Text$7)(templateObject_3$
|
|
19542
|
+
var UnitBlock = newStyled(Text$7)(templateObject_3$n || (templateObject_3$n = __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) {
|
|
19543
19543
|
var theme = _a.theme;
|
|
19544
19544
|
return theme.colors.shades.white.color;
|
|
19545
19545
|
}, function (_a) {
|
|
19546
19546
|
var theme = _a.theme;
|
|
19547
19547
|
return theme.colors.shades.white.color;
|
|
19548
19548
|
});
|
|
19549
|
-
var Unit = newStyled.p(templateObject_4$
|
|
19550
|
-
var templateObject_1$
|
|
19549
|
+
var Unit = newStyled.p(templateObject_4$k || (templateObject_4$k = __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"])));
|
|
19550
|
+
var templateObject_1$x, templateObject_2$q, templateObject_3$n, templateObject_4$k;
|
|
19551
19551
|
|
|
19552
19552
|
var HRS = 'HRS';
|
|
19553
19553
|
var MIN = 'MIN';
|
|
@@ -19590,14 +19590,14 @@ var Timer = function (_a) {
|
|
|
19590
19590
|
|
|
19591
19591
|
var slideInAnimation = function (distanceFromTop) {
|
|
19592
19592
|
if (distanceFromTop === void 0) { distanceFromTop = '124px'; }
|
|
19593
|
-
return keyframes(templateObject_1$
|
|
19593
|
+
return keyframes(templateObject_1$w || (templateObject_1$w = __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);
|
|
19594
19594
|
};
|
|
19595
19595
|
var mobileSlideInAnimation = function (distanceFromTop) {
|
|
19596
19596
|
if (distanceFromTop === void 0) { distanceFromTop = '85px'; }
|
|
19597
|
-
return keyframes(templateObject_2$
|
|
19597
|
+
return keyframes(templateObject_2$p || (templateObject_2$p = __makeTemplateObject(["\n from {\n top: 0;\n }\n to {\n top: ", ";\n }\n"], ["\n from {\n top: 0;\n }\n to {\n top: ", ";\n }\n"])), distanceFromTop);
|
|
19598
19598
|
};
|
|
19599
|
-
var ToastContainer = newStyled.div(templateObject_3$
|
|
19600
|
-
var ToastContent = newStyled.div(templateObject_4$
|
|
19599
|
+
var ToastContainer = newStyled.div(templateObject_3$m || (templateObject_3$m = __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"])));
|
|
19600
|
+
var ToastContent = newStyled.div(templateObject_4$j || (templateObject_4$j = __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) {
|
|
19601
19601
|
var distanceFromTop = _a.distanceFromTop;
|
|
19602
19602
|
return distanceFromTop || '124px';
|
|
19603
19603
|
}, function (_a) {
|
|
@@ -19610,12 +19610,12 @@ var ToastContent = newStyled.div(templateObject_4$i || (templateObject_4$i = __m
|
|
|
19610
19610
|
var distanceFromTop = _a.distanceFromTop;
|
|
19611
19611
|
return mobileSlideInAnimation(distanceFromTop);
|
|
19612
19612
|
});
|
|
19613
|
-
var ToastText = newStyled.p(templateObject_5$
|
|
19613
|
+
var ToastText = newStyled.p(templateObject_5$h || (templateObject_5$h = __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) {
|
|
19614
19614
|
var severity = _a.severity;
|
|
19615
19615
|
return severity === 'error' ? '#C64844' : '#292929';
|
|
19616
19616
|
});
|
|
19617
|
-
var CloseIcon = newStyled.div(templateObject_6$
|
|
19618
|
-
var templateObject_1$
|
|
19617
|
+
var CloseIcon = newStyled.div(templateObject_6$g || (templateObject_6$g = __makeTemplateObject(["\n margin-inline-start: auto;\n cursor: pointer;\n"], ["\n margin-inline-start: auto;\n cursor: pointer;\n"])));
|
|
19618
|
+
var templateObject_1$w, templateObject_2$p, templateObject_3$m, templateObject_4$j, templateObject_5$h, templateObject_6$g;
|
|
19619
19619
|
|
|
19620
19620
|
var Toast = React__default["default"].forwardRef(function (_a, ref) {
|
|
19621
19621
|
var severity = _a.severity, summary = _a.summary, life = _a.life, _b = _a.withCloseIcon, withCloseIcon = _b === void 0 ? true : _b, distanceFromTop = _a.distanceFromTop;
|
|
@@ -19635,9 +19635,9 @@ var Toast = React__default["default"].forwardRef(function (_a, ref) {
|
|
|
19635
19635
|
});
|
|
19636
19636
|
Toast.displayName = 'Toast';
|
|
19637
19637
|
|
|
19638
|
-
var Wrapper$1 = newStyled.div(templateObject_1$
|
|
19639
|
-
var GrandTotal = newStyled.h1(templateObject_2$
|
|
19640
|
-
var Currency = newStyled.span(templateObject_3$
|
|
19638
|
+
var Wrapper$1 = newStyled.div(templateObject_1$v || (templateObject_1$v = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n"])));
|
|
19639
|
+
var GrandTotal = newStyled.h1(templateObject_2$o || (templateObject_2$o = __makeTemplateObject(["\n margin: 0;\n font-size: 1.5rem;\n line-height: 2rem;\n font-weight: 700;\n color: ", ";\n display: block;\n align-items: center;\n"], ["\n margin: 0;\n font-size: 1.5rem;\n line-height: 2rem;\n font-weight: 700;\n color: ", ";\n display: block;\n align-items: center;\n"])), function (props) { return props.color; });
|
|
19640
|
+
var Currency = newStyled.span(templateObject_3$l || (templateObject_3$l = __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) {
|
|
19641
19641
|
var theme = _a.theme;
|
|
19642
19642
|
return theme.component.total.basicTotal.currency.color;
|
|
19643
19643
|
}, function (_a) {
|
|
@@ -19650,21 +19650,21 @@ var Currency = newStyled.span(templateObject_3$k || (templateObject_3$k = __make
|
|
|
19650
19650
|
var theme = _a.theme;
|
|
19651
19651
|
return theme.component.total.basicTotal.currency.alignSelf;
|
|
19652
19652
|
});
|
|
19653
|
-
var Container$m = newStyled.div(templateObject_4$
|
|
19653
|
+
var Container$m = newStyled.div(templateObject_4$i || (templateObject_4$i = __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) {
|
|
19654
19654
|
var highlightColor = _a.highlightColor;
|
|
19655
19655
|
return highlightColor;
|
|
19656
19656
|
});
|
|
19657
|
-
var TotalContainer = newStyled(Container$m)(templateObject_5$
|
|
19657
|
+
var TotalContainer = newStyled(Container$m)(templateObject_5$g || (templateObject_5$g = __makeTemplateObject(["\n justify-content: ", ";\n margin-top: 0;\n"], ["\n justify-content: ", ";\n margin-top: 0;\n"])), function (_a) {
|
|
19658
19658
|
var showTotalLabel = _a.showTotalLabel;
|
|
19659
19659
|
return (showTotalLabel ? 'space-between' : 'flex-end');
|
|
19660
19660
|
});
|
|
19661
|
-
var DiscountText = newStyled.h3(templateObject_6$
|
|
19662
|
-
var DiscountAmount = newStyled.h3(templateObject_7$
|
|
19661
|
+
var DiscountText = newStyled.h3(templateObject_6$f || (templateObject_6$f = __makeTemplateObject(["\n margin: 0;\n font-size: 14px;\n line-height: 22px;\n font-weight: 600;\n"], ["\n margin: 0;\n font-size: 14px;\n line-height: 22px;\n font-weight: 600;\n"])));
|
|
19662
|
+
var DiscountAmount = newStyled.h3(templateObject_7$e || (templateObject_7$e = __makeTemplateObject(["\n margin: 0;\n font-size: 18px;\n line-height: 28px;\n font-weight: ", ";\n"], ["\n margin: 0;\n font-size: 18px;\n line-height: 28px;\n font-weight: ", ";\n"])), function (_a) {
|
|
19663
19663
|
var theme = _a.theme;
|
|
19664
19664
|
return theme.component.total.basicTotal.savings.amountFontWeight;
|
|
19665
19665
|
});
|
|
19666
19666
|
var TotalLabel = newStyled(Text$7)(templateObject_8$a || (templateObject_8$a = __makeTemplateObject(["\n font-size: 20px;\n"], ["\n font-size: 20px;\n"])));
|
|
19667
|
-
var templateObject_1$
|
|
19667
|
+
var templateObject_1$v, templateObject_2$o, templateObject_3$l, templateObject_4$i, templateObject_5$g, templateObject_6$f, templateObject_7$e, templateObject_8$a;
|
|
19668
19668
|
|
|
19669
19669
|
var Total = function (_a) {
|
|
19670
19670
|
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;
|
|
@@ -19672,19 +19672,19 @@ var Total = function (_a) {
|
|
|
19672
19672
|
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$m, __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));
|
|
19673
19673
|
};
|
|
19674
19674
|
|
|
19675
|
-
var Wrapper = newStyled.div(templateObject_1$
|
|
19675
|
+
var Wrapper = newStyled.div(templateObject_1$u || (templateObject_1$u = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
19676
19676
|
var color = _a.color;
|
|
19677
19677
|
return color;
|
|
19678
19678
|
});
|
|
19679
|
-
var ItemContainer = newStyled.div(templateObject_2$
|
|
19680
|
-
var Item = newStyled.h4(templateObject_3$
|
|
19679
|
+
var ItemContainer = newStyled.div(templateObject_2$n || (templateObject_2$n = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n margin-bottom: 0.625rem;\n\n &:last-child {\n margin-bottom: 0;\n }\n"], ["\n display: flex;\n justify-content: space-between;\n margin-bottom: 0.625rem;\n\n &:last-child {\n margin-bottom: 0;\n }\n"])));
|
|
19680
|
+
var Item = newStyled.h4(templateObject_3$k || (templateObject_3$k = __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) {
|
|
19681
19681
|
var theme = _a.theme;
|
|
19682
19682
|
return theme.component.subTotal.basicSubTotal.lineHeight;
|
|
19683
19683
|
}, function (_a) {
|
|
19684
19684
|
var theme = _a.theme;
|
|
19685
19685
|
return theme.component.subTotal.basicSubTotal.weight;
|
|
19686
19686
|
});
|
|
19687
|
-
var CouponItem = newStyled(Item)(templateObject_4$
|
|
19687
|
+
var CouponItem = newStyled(Item)(templateObject_4$h || (templateObject_4$h = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
19688
19688
|
var color = _a.color;
|
|
19689
19689
|
return color;
|
|
19690
19690
|
});
|
|
@@ -19697,26 +19697,26 @@ var Subtotal = function (_a) {
|
|
|
19697
19697
|
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));
|
|
19698
19698
|
})] }), void 0));
|
|
19699
19699
|
};
|
|
19700
|
-
var templateObject_1$
|
|
19700
|
+
var templateObject_1$u, templateObject_2$n, templateObject_3$k, templateObject_4$h;
|
|
19701
19701
|
|
|
19702
19702
|
var Totals = {
|
|
19703
19703
|
Total: Total,
|
|
19704
19704
|
Subtotal: Subtotal,
|
|
19705
19705
|
};
|
|
19706
19706
|
|
|
19707
|
-
var Container$l = newStyled.div(templateObject_1$
|
|
19708
|
-
var CheckpointContainer$1 = newStyled.div(templateObject_2$
|
|
19709
|
-
var CheckpointDate$1 = newStyled.div(templateObject_3$
|
|
19710
|
-
var CheckpointDateLabel$1 = newStyled.p(templateObject_4$
|
|
19711
|
-
var CheckpointDateAndDayLabel = newStyled.span(templateObject_5$
|
|
19712
|
-
var CheckpointStatus$1 = newStyled.p(templateObject_6$
|
|
19707
|
+
var Container$l = newStyled.div(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
19708
|
+
var CheckpointContainer$1 = newStyled.div(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
19709
|
+
var CheckpointDate$1 = newStyled.div(templateObject_3$j || (templateObject_3$j = __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; });
|
|
19710
|
+
var CheckpointDateLabel$1 = newStyled.p(templateObject_4$g || (templateObject_4$g = __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'); });
|
|
19711
|
+
var CheckpointDateAndDayLabel = newStyled.span(templateObject_5$f || (templateObject_5$f = __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"])));
|
|
19712
|
+
var CheckpointStatus$1 = newStyled.p(templateObject_6$e || (templateObject_6$e = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n transform: translate(0, 22px);\n margin: 0;\n margin-left: 9px;\n color: ", ";\n font-weight: ", ";\n"], ["\n display: flex;\n flex-direction: column;\n transform: translate(0, 22px);\n margin: 0;\n margin-left: 9px;\n color: ", ";\n font-weight: ", ";\n"])), function (props) {
|
|
19713
19713
|
return props.finishedTrack
|
|
19714
19714
|
? props.finishedTrackColor
|
|
19715
19715
|
: props.activeTrack
|
|
19716
19716
|
? props.activeTrackColor
|
|
19717
19717
|
: '';
|
|
19718
19718
|
}, function (props) { return (props.finishedTrack || props.activeTrack ? '600' : '400'); });
|
|
19719
|
-
var CheckpointStatusMessage = newStyled.span(templateObject_7$
|
|
19719
|
+
var CheckpointStatusMessage = newStyled.span(templateObject_7$d || (templateObject_7$d = __makeTemplateObject(["\n display: flex;\n gap: 4px;\n font-size: 14px;\n line-height: 22px;\n text-align: left;\n"], ["\n display: flex;\n gap: 4px;\n font-size: 14px;\n line-height: 22px;\n text-align: left;\n"])));
|
|
19720
19720
|
var ActiveCheckpointTrack$1 = newStyled.div(templateObject_8$9 || (templateObject_8$9 = __makeTemplateObject(["\n width: 13px;\n min-width: 13px;\n background-color: ", ";\n transform: ", ";\n position: relative;\n border-radius: ", ";\n margin-top: -1px;\n padding-bottom: ", ";\n margin-bottom: ", ";\n"], ["\n width: 13px;\n min-width: 13px;\n background-color: ", ";\n transform: ", ";\n position: relative;\n border-radius: ", ";\n margin-top: -1px;\n padding-bottom: ", ";\n margin-bottom: ", ";\n"])), function (props) { return props.trackColor; }, function (props) { return (props.firstElement ? 'translate(0, 22px)' : 'translate(0, 33px)'); }, function (props) {
|
|
19721
19721
|
return props.firstElement ? '8px 8px 0 0' : props.lastElement ? '0 0 8px 8px' : '';
|
|
19722
19722
|
}, function (props) { return (props.firstElement ? '20px' : '0'); }, function (props) { return (props.firstElement ? '-20px' : '0'); });
|
|
@@ -19756,17 +19756,17 @@ var TrackingProgressV2 = function (_a) {
|
|
|
19756
19756
|
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));
|
|
19757
19757
|
})] }), void 0));
|
|
19758
19758
|
};
|
|
19759
|
-
var templateObject_1$
|
|
19760
|
-
|
|
19761
|
-
var Container$k = newStyled.div(templateObject_1$
|
|
19762
|
-
var CheckpointContainer = newStyled.div(templateObject_2$
|
|
19763
|
-
var CheckpointDate = newStyled.div(templateObject_3$
|
|
19764
|
-
var CheckpointDateLabel = newStyled.p(templateObject_4$
|
|
19765
|
-
var CheckpointStatus = newStyled.p(templateObject_5$
|
|
19766
|
-
var ActiveCheckpointTrack = newStyled.div(templateObject_6$
|
|
19759
|
+
var templateObject_1$t, templateObject_2$m, templateObject_3$j, templateObject_4$g, templateObject_5$f, templateObject_6$e, templateObject_7$d, templateObject_8$9, templateObject_9$6, templateObject_10$5, templateObject_11$3;
|
|
19760
|
+
|
|
19761
|
+
var Container$k = newStyled.div(templateObject_1$s || (templateObject_1$s = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
19762
|
+
var CheckpointContainer = newStyled.div(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
19763
|
+
var CheckpointDate = newStyled.div(templateObject_3$i || (templateObject_3$i = __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; });
|
|
19764
|
+
var CheckpointDateLabel = newStyled.p(templateObject_4$f || (templateObject_4$f = __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'); });
|
|
19765
|
+
var CheckpointStatus = newStyled.p(templateObject_5$e || (templateObject_5$e = __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'); });
|
|
19766
|
+
var ActiveCheckpointTrack = newStyled.div(templateObject_6$d || (templateObject_6$d = __makeTemplateObject(["\n width: 13px;\n min-width: 13px;\n background-color: ", ";\n transform: ", ";\n position: relative;\n border-radius: ", ";\n margin-top: -1px;\n padding-bottom: ", ";\n margin-bottom: ", ";\n"], ["\n width: 13px;\n min-width: 13px;\n background-color: ", ";\n transform: ", ";\n position: relative;\n border-radius: ", ";\n margin-top: -1px;\n padding-bottom: ", ";\n margin-bottom: ", ";\n"])), function (props) { return props.trackColor; }, function (props) { return (props.firstElement ? 'translate(0, 22px)' : 'translate(0, 33px)'); }, function (props) {
|
|
19767
19767
|
return props.firstElement ? '8px 8px 0 0' : props.lastElement ? '0 0 8px 8px' : '';
|
|
19768
19768
|
}, function (props) { return (props.firstElement ? '20px' : '0'); }, function (props) { return (props.firstElement ? '-20px' : '0'); });
|
|
19769
|
-
var ActiveCheckpointDot = newStyled.div(templateObject_7$
|
|
19769
|
+
var ActiveCheckpointDot = newStyled.div(templateObject_7$c || (templateObject_7$c = __makeTemplateObject(["\n &:after {\n content: ' ';\n position: absolute;\n width: 13px;\n height: 13px;\n background-color: #e5e5e5;\n z-index: 2;\n border-radius: 50%;\n transform: ", ";\n left: 0;\n }\n"], ["\n &:after {\n content: ' ';\n position: absolute;\n width: 13px;\n height: 13px;\n background-color: #e5e5e5;\n z-index: 2;\n border-radius: 50%;\n transform: ", ";\n left: 0;\n }\n"])), function (props) { return (props.firstElement ? 'translate(0, -0.5px)' : 'translate(0, -6.5px)'); });
|
|
19770
19770
|
var LastCheckpointTrack = newStyled.div(templateObject_8$8 || (templateObject_8$8 = __makeTemplateObject(["\n width: 13px;\n min-width: 13px;\n background-color: ", ";\n position: relative;\n border-radius: 0 0 8px 8px;\n margin-top: -1px;\n"], ["\n width: 13px;\n min-width: 13px;\n background-color: ", ";\n position: relative;\n border-radius: 0 0 8px 8px;\n margin-top: -1px;\n"])), function (props) { return props.backgroundColor; });
|
|
19771
19771
|
var TrackingProgress = function (_a) {
|
|
19772
19772
|
var checkPoints = _a.checkPoints, amountOfCheckPoints = _a.amountOfCheckPoints;
|
|
@@ -19796,7 +19796,35 @@ var TrackingProgress = function (_a) {
|
|
|
19796
19796
|
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));
|
|
19797
19797
|
})] }), void 0));
|
|
19798
19798
|
};
|
|
19799
|
-
var templateObject_1$
|
|
19799
|
+
var templateObject_1$s, templateObject_2$l, templateObject_3$i, templateObject_4$f, templateObject_5$e, templateObject_6$d, templateObject_7$c, templateObject_8$8;
|
|
19800
|
+
|
|
19801
|
+
var AutoShipCardContainerWrapper$1 = newStyled.div(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 1rem;\n border: ", "\n border-radius: 8px;\n padding: 10px;\n"], ["\n display: flex;\n flex-direction: column;\n gap: 1rem;\n border: ", "\n border-radius: 8px;\n padding: 10px;\n"])), function (_a) {
|
|
19802
|
+
var checked = _a.checked;
|
|
19803
|
+
return (checked ? 'none' : '1px solid #e5e5e5;');
|
|
19804
|
+
});
|
|
19805
|
+
var AutoShipHeaderBarWrapper$1 = newStyled.div(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n gap: 10px;\n align-items: center;\n"], ["\n display: flex;\n flex-direction: row;\n gap: 10px;\n align-items: center;\n"])));
|
|
19806
|
+
var AutoShipBodyWrapper$1 = newStyled.div(templateObject_3$h || (templateObject_3$h = __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"])));
|
|
19807
|
+
var AutoShipBodyTitle$1 = newStyled.div(templateObject_4$e || (templateObject_4$e = __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"])));
|
|
19808
|
+
var AutoShipBodyListItem$1 = newStyled.div(templateObject_5$d || (templateObject_5$d = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n gap: 10px;\n"], ["\n display: flex;\n flex-direction: row;\n gap: 10px;\n"])));
|
|
19809
|
+
var AutoShipBodyListWrapper$1 = newStyled.div(templateObject_6$c || (templateObject_6$c = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 10px;\n padding: 10px 10px 10px 10px;\n"], ["\n display: flex;\n flex-direction: column;\n gap: 10px;\n padding: 10px 10px 10px 10px;\n"])));
|
|
19810
|
+
var CheckboxInput = newStyled.input(templateObject_7$b || (templateObject_7$b = __makeTemplateObject(["\n width: 22px;\n height: 22px;\n gap: 0px;\n border-radius: 4px;\n border: 1px 0px 0px 0px;\n opacity: 0px;\n :checked {\n accent-color: #292929;\n }\n"], ["\n width: 22px;\n height: 22px;\n gap: 0px;\n border-radius: 4px;\n border: 1px 0px 0px 0px;\n opacity: 0px;\n :checked {\n accent-color: #292929;\n }\n"])));
|
|
19811
|
+
var templateObject_1$r, templateObject_2$k, templateObject_3$h, templateObject_4$e, templateObject_5$d, templateObject_6$c, templateObject_7$b;
|
|
19812
|
+
|
|
19813
|
+
function AutoshipOfferCard(_a) {
|
|
19814
|
+
var showMore = _a.showMore, copyList = _a.copyList, copy = _a.copy, handleCheckBoxChange = _a.handleCheckBoxChange, _b = _a.isChecked, isChecked = _b === void 0 ? false : _b;
|
|
19815
|
+
var _c = React$2.useState(true), showMoreBenefits = _c[0], setShowMoreBenefits = _c[1];
|
|
19816
|
+
var _d = React$2.useState(isChecked), check = _d[0], setCheck = _d[1];
|
|
19817
|
+
var handleShowMore = function () {
|
|
19818
|
+
setShowMoreBenefits(!showMoreBenefits);
|
|
19819
|
+
};
|
|
19820
|
+
var handleCheckBox = function () {
|
|
19821
|
+
setCheck(!check);
|
|
19822
|
+
if (handleCheckBoxChange) {
|
|
19823
|
+
handleCheckBoxChange(!check);
|
|
19824
|
+
}
|
|
19825
|
+
};
|
|
19826
|
+
return (jsxRuntime.jsxs(AutoShipCardContainerWrapper$1, __assign$1({ checked: check }, { children: [jsxRuntime.jsxs(AutoShipHeaderBarWrapper$1, { 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), !check && (jsxRuntime.jsxs(AutoShipBodyWrapper$1, { children: [jsxRuntime.jsxs(AutoShipBodyTitle$1, __assign$1({ onClick: handleShowMore }, { children: [jsxRuntime.jsx("span", { children: showMoreBenefits ? showMore.openedCopy : showMore.closedCopy }, void 0), jsxRuntime.jsx(Icon$1, { name: showMoreBenefits ? 'arrows/chevron_up' : 'arrows/chevron_down' }, showMoreBenefits ? 'icon-up' : 'icon-down')] }), void 0), showMoreBenefits && (jsxRuntime.jsx(AutoShipBodyListWrapper$1, { children: copyList.map(function (item) { return (jsxRuntime.jsxs(AutoShipBodyListItem$1, { 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));
|
|
19827
|
+
}
|
|
19800
19828
|
|
|
19801
19829
|
var AutoShipCardContainerWrapper = newStyled.div(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 1rem;\n border: ", "\n border-radius: 8px;\n padding: 10px;\n"], ["\n display: flex;\n flex-direction: column;\n gap: 1rem;\n border: ", "\n border-radius: 8px;\n padding: 10px;\n"])), function (_a) {
|
|
19802
19830
|
var checked = _a.checked;
|
|
@@ -19811,7 +19839,7 @@ newStyled.input(templateObject_7$a || (templateObject_7$a = __makeTemplateObject
|
|
|
19811
19839
|
var ButtonRemoveWrapper = newStyled.div(templateObject_8$7 || (templateObject_8$7 = __makeTemplateObject(["\n color: #292929;\n font-size: 14px;\n font-weight: 400;\n line-height: 22px;\n text-align: left;\n text-decoration: underline;\n :hover {\n cursor: pointer;\n }\n"], ["\n color: #292929;\n font-size: 14px;\n font-weight: 400;\n line-height: 22px;\n text-align: left;\n text-decoration: underline;\n :hover {\n cursor: pointer;\n }\n"])));
|
|
19812
19840
|
var templateObject_1$q, templateObject_2$j, templateObject_3$g, templateObject_4$d, templateObject_5$c, templateObject_6$b, templateObject_7$a, templateObject_8$7;
|
|
19813
19841
|
|
|
19814
|
-
function
|
|
19842
|
+
function AutoshipOfferCardCta(_a) {
|
|
19815
19843
|
var showMore = _a.showMore, copyList = _a.copyList, copy = _a.copy, handleCheckBoxChange = _a.handleCheckBoxChange, _b = _a.isChecked, isChecked = _b === void 0 ? false : _b, buttonCopy = _a.buttonCopy;
|
|
19816
19844
|
var _c = React$2.useState(true), showMoreBenefits = _c[0], setShowMoreBenefits = _c[1];
|
|
19817
19845
|
var _d = React$2.useState(isChecked), check = _d[0], setCheck = _d[1];
|
|
@@ -21743,6 +21771,7 @@ exports.AssetsProvider = AssetsProvider;
|
|
|
21743
21771
|
exports.Autoship = Autoship;
|
|
21744
21772
|
exports.AutoshipFrequencyDropdown = AutoshipFrequencyDropdown;
|
|
21745
21773
|
exports.AutoshipOfferCard = AutoshipOfferCard;
|
|
21774
|
+
exports.AutoshipOfferCardCta = AutoshipOfferCardCta;
|
|
21746
21775
|
exports.AutoshipV2 = AutoshipV2;
|
|
21747
21776
|
exports.BasicAccordion = BasicAccordion;
|
|
21748
21777
|
exports.BeforeAfterCard = BeforeAfterCard;
|