@trafilea/afrodita-components 6.21.3 → 6.21.5
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 +5 -0
- package/build/index.esm.js +302 -283
- package/build/index.esm.js.map +1 -1
- package/build/index.js +302 -283
- package/build/index.js.map +1 -1
- package/package.json +1 -1
package/build/index.js
CHANGED
|
@@ -3198,7 +3198,7 @@ var StyledSvgWrapper = newStyled.svg(templateObject_1$25 || (templateObject_1$25
|
|
|
3198
3198
|
var opacity = _a.opacity;
|
|
3199
3199
|
return opacity && "opacity: ".concat(opacity, ";");
|
|
3200
3200
|
});
|
|
3201
|
-
var StyledImageWrapper = newStyled.img(templateObject_2$
|
|
3201
|
+
var StyledImageWrapper = newStyled.img(templateObject_2$1r || (templateObject_2$1r = __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) {
|
|
3202
3202
|
var width = _a.width;
|
|
3203
3203
|
return width;
|
|
3204
3204
|
}, function (_a) {
|
|
@@ -3211,7 +3211,7 @@ var StyledImageWrapper = newStyled.img(templateObject_2$1q || (templateObject_2$
|
|
|
3211
3211
|
var opacity = _a.opacity;
|
|
3212
3212
|
return opacity && "opacity: ".concat(opacity, ";");
|
|
3213
3213
|
});
|
|
3214
|
-
var templateObject_1$25, templateObject_2$
|
|
3214
|
+
var templateObject_1$25, templateObject_2$1r;
|
|
3215
3215
|
|
|
3216
3216
|
/* eslint-disable no-undef */
|
|
3217
3217
|
var cache = new Map();
|
|
@@ -3474,7 +3474,7 @@ var Container$1h = newStyled.div(templateObject_1$23 || (templateObject_1$23 = _
|
|
|
3474
3474
|
var size = _a.size;
|
|
3475
3475
|
return (_b = getStylesBySize$g(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
3476
3476
|
});
|
|
3477
|
-
var H3$3 = newStyled.h3(templateObject_2$
|
|
3477
|
+
var H3$3 = newStyled.h3(templateObject_2$1q || (templateObject_2$1q = __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) {
|
|
3478
3478
|
var textColor = _a.textColor;
|
|
3479
3479
|
return textColor;
|
|
3480
3480
|
}, function (_a) {
|
|
@@ -3491,7 +3491,7 @@ var ClubOfferTag = function (_a) {
|
|
|
3491
3491
|
var theme = useTheme();
|
|
3492
3492
|
return (jsxRuntime.jsx(Container$1h, __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));
|
|
3493
3493
|
};
|
|
3494
|
-
var templateObject_1$23, templateObject_2$
|
|
3494
|
+
var templateObject_1$23, templateObject_2$1q;
|
|
3495
3495
|
|
|
3496
3496
|
var getStylesBySize$f = function (size, bordersRounded, theme) {
|
|
3497
3497
|
var _a, _b, _c;
|
|
@@ -3544,7 +3544,7 @@ var Container$1g = newStyled.div(templateObject_1$22 || (templateObject_1$22 = _
|
|
|
3544
3544
|
var size = _a.size;
|
|
3545
3545
|
return (_b = getStylesBySize$f(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
3546
3546
|
});
|
|
3547
|
-
var H3$2 = newStyled.h3(templateObject_2$
|
|
3547
|
+
var H3$2 = newStyled.h3(templateObject_2$1p || (templateObject_2$1p = __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) {
|
|
3548
3548
|
var textColor = _a.textColor;
|
|
3549
3549
|
return textColor;
|
|
3550
3550
|
}, function (_a) {
|
|
@@ -3561,7 +3561,7 @@ var DiscountTag$1 = function (_a) {
|
|
|
3561
3561
|
var theme = useTheme();
|
|
3562
3562
|
return (jsxRuntime.jsx(Container$1g, __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));
|
|
3563
3563
|
};
|
|
3564
|
-
var templateObject_1$22, templateObject_2$
|
|
3564
|
+
var templateObject_1$22, templateObject_2$1p;
|
|
3565
3565
|
|
|
3566
3566
|
function getWindowDimensions() {
|
|
3567
3567
|
if (typeof window === 'undefined')
|
|
@@ -3657,7 +3657,7 @@ var getFontSize = function (size, theme, finalPriceStyled, finalPriceStyledSmall
|
|
|
3657
3657
|
}
|
|
3658
3658
|
};
|
|
3659
3659
|
var Container$1f = newStyled.div(templateObject_1$21 || (templateObject_1$21 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
3660
|
-
var Price = newStyled.p(templateObject_2$
|
|
3660
|
+
var Price = newStyled.p(templateObject_2$1o || (templateObject_2$1o = __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) {
|
|
3661
3661
|
var weight = _a.weight;
|
|
3662
3662
|
return (weight ? weight : '400');
|
|
3663
3663
|
}, function (_a) {
|
|
@@ -3681,7 +3681,7 @@ var Price = newStyled.p(templateObject_2$1n || (templateObject_2$1n = __makeTemp
|
|
|
3681
3681
|
var finalPriceStyledSmall = _a.finalPriceStyledSmall, size = _a.size;
|
|
3682
3682
|
return finalPriceStyledSmall ? (size === 'large' ? '-10px' : '-7px') : '0';
|
|
3683
3683
|
});
|
|
3684
|
-
var TagContainer = newStyled.div(templateObject_3$
|
|
3684
|
+
var TagContainer = newStyled.div(templateObject_3$15 || (templateObject_3$15 = __makeTemplateObject(["\n margin: ", ";\n display: flex;\n align-items: center;\n"], ["\n margin: ", ";\n display: flex;\n align-items: center;\n"])), function (_a) {
|
|
3685
3685
|
var _b;
|
|
3686
3686
|
var size = _a.size;
|
|
3687
3687
|
return (_b = getStylesBySize$e(size)) === null || _b === void 0 ? void 0 : _b.margin;
|
|
@@ -3714,7 +3714,7 @@ var PriceLabel$1 = function (_a) {
|
|
|
3714
3714
|
};
|
|
3715
3715
|
return (jsxRuntime.jsxs(Container$1f, __assign$1({}, rest, { children: [clubStyle ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [!!originalPrice && jsxRuntime.jsx(OriginalPrice, {}, void 0), jsxRuntime.jsx(Price, __assign$1({ margin: true, "data-testid": getTestId$1(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: finalPrice }), void 0)] }, void 0)) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Price, __assign$1({ margin: true, "data-testid": getTestId$1(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: finalPrice }), void 0), !!originalPrice && jsxRuntime.jsx(OriginalPrice, {}, void 0)] }, void 0)), discount && (jsxRuntime.jsx(TagContainer, __assign$1({ size: size }, { children: jsxRuntime.jsx(DiscountTag$1, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
|
|
3716
3716
|
};
|
|
3717
|
-
var templateObject_1$21, templateObject_2$
|
|
3717
|
+
var templateObject_1$21, templateObject_2$1o, templateObject_3$15;
|
|
3718
3718
|
|
|
3719
3719
|
var FinalPriceStyledContainer$3 = newStyled.div(templateObject_1$20 || (templateObject_1$20 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
3720
3720
|
var PriceLabelV2$1 = function (_a) {
|
|
@@ -3790,8 +3790,8 @@ var PriceLabelV2$1 = function (_a) {
|
|
|
3790
3790
|
var templateObject_1$20;
|
|
3791
3791
|
|
|
3792
3792
|
var FinalPriceStyledContainer$2 = newStyled.div(templateObject_1$1$ || (templateObject_1$1$ = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
3793
|
-
var ContainerDirectionColumn = newStyled.div(templateObject_2$
|
|
3794
|
-
var DiscountEachOneContainer = newStyled.div(templateObject_3$
|
|
3793
|
+
var ContainerDirectionColumn = newStyled.div(templateObject_2$1n || (templateObject_2$1n = __makeTemplateObject(["\n display: column;\n align-items: center;\n"], ["\n display: column;\n align-items: center;\n"])));
|
|
3794
|
+
var DiscountEachOneContainer = newStyled.div(templateObject_3$14 || (templateObject_3$14 = __makeTemplateObject(["\n display: flex;\n padding-left: 0.5rem;\n"], ["\n display: flex;\n padding-left: 0.5rem;\n"])));
|
|
3795
3795
|
var PriceLabelV3 = function (_a) {
|
|
3796
3796
|
var _b;
|
|
3797
3797
|
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"]);
|
|
@@ -3862,7 +3862,7 @@ var PriceLabelV3 = function (_a) {
|
|
|
3862
3862
|
lineHeight: '22px',
|
|
3863
3863
|
} }), void 0)) }), void 0))] }, void 0)] }), void 0));
|
|
3864
3864
|
};
|
|
3865
|
-
var templateObject_1$1$, templateObject_2$
|
|
3865
|
+
var templateObject_1$1$, templateObject_2$1n, templateObject_3$14;
|
|
3866
3866
|
|
|
3867
3867
|
var FinalPriceStyledContainer$1 = newStyled.div(templateObject_1$1_ || (templateObject_1$1_ = __makeTemplateObject(["\n display: flex;\n margin-left: -5px;\n"], ["\n display: flex;\n margin-left: -5px;\n"])));
|
|
3868
3868
|
var PriceLabel = function (_a) {
|
|
@@ -4758,9 +4758,9 @@ function jsxs(type, props, key) {
|
|
|
4758
4758
|
// `variants` styles that are consistent through all themes.
|
|
4759
4759
|
var TAGS = {
|
|
4760
4760
|
hero1: newStyled.h1(templateObject_1$1Y || (templateObject_1$1Y = __makeTemplateObject([""], [""]))),
|
|
4761
|
-
hero2: newStyled.h2(templateObject_2$
|
|
4762
|
-
hero3: newStyled.h3(templateObject_3$
|
|
4763
|
-
display1: newStyled.h1(templateObject_4$
|
|
4761
|
+
hero2: newStyled.h2(templateObject_2$1m || (templateObject_2$1m = __makeTemplateObject([""], [""]))),
|
|
4762
|
+
hero3: newStyled.h3(templateObject_3$13 || (templateObject_3$13 = __makeTemplateObject([""], [""]))),
|
|
4763
|
+
display1: newStyled.h1(templateObject_4$R || (templateObject_4$R = __makeTemplateObject([""], [""]))),
|
|
4764
4764
|
display2: newStyled.h2(templateObject_5$C || (templateObject_5$C = __makeTemplateObject([""], [""]))),
|
|
4765
4765
|
display3: newStyled.h3(templateObject_6$w || (templateObject_6$w = __makeTemplateObject([""], [""]))),
|
|
4766
4766
|
heading1: newStyled.h1(templateObject_7$n || (templateObject_7$n = __makeTemplateObject([""], [""]))),
|
|
@@ -4893,12 +4893,12 @@ var DEFAULTS = {
|
|
|
4893
4893
|
size: 'regular',
|
|
4894
4894
|
},
|
|
4895
4895
|
};
|
|
4896
|
-
var templateObject_1$1Y, templateObject_2$
|
|
4896
|
+
var templateObject_1$1Y, templateObject_2$1m, templateObject_3$13, templateObject_4$R, templateObject_5$C, templateObject_6$w, templateObject_7$n, templateObject_8$j, templateObject_9$a, templateObject_10$9, templateObject_11$6, templateObject_12$4, templateObject_13$4, templateObject_14$2, templateObject_15$2, templateObject_16$2, templateObject_17$2, templateObject_18$2, templateObject_19$2, templateObject_20$1;
|
|
4897
4897
|
|
|
4898
4898
|
var Container$1e = newStyled.div(templateObject_1$1X || (templateObject_1$1X = __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"])));
|
|
4899
|
-
var Card$3 = newStyled.div(templateObject_2$
|
|
4900
|
-
var Tag$2 = newStyled.div(templateObject_3$
|
|
4901
|
-
var Label$6 = newStyled.div(templateObject_4$
|
|
4899
|
+
var Card$3 = newStyled.div(templateObject_2$1l || (templateObject_2$1l = __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"])));
|
|
4900
|
+
var Tag$2 = newStyled.div(templateObject_3$12 || (templateObject_3$12 = __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"])));
|
|
4901
|
+
var Label$6 = newStyled.div(templateObject_4$Q || (templateObject_4$Q = __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"])));
|
|
4902
4902
|
var Check$1 = newStyled.div(templateObject_5$B || (templateObject_5$B = __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"])));
|
|
4903
4903
|
var DiscountContainer$1 = newStyled.div(templateObject_6$v || (templateObject_6$v = __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"])));
|
|
4904
4904
|
var PackSelectorV2 = function (_a) {
|
|
@@ -4925,27 +4925,27 @@ var PackCard$1 = function (_a) {
|
|
|
4925
4925
|
currency: currencyCode || 'USD',
|
|
4926
4926
|
}), ' ', "each", ')'] }), void 0)) : null] }, void 0)] }), void 0));
|
|
4927
4927
|
};
|
|
4928
|
-
var templateObject_1$1X, templateObject_2$
|
|
4928
|
+
var templateObject_1$1X, templateObject_2$1l, templateObject_3$12, templateObject_4$Q, templateObject_5$B, templateObject_6$v;
|
|
4929
4929
|
|
|
4930
4930
|
var Container$1d = newStyled.div(templateObject_1$1W || (templateObject_1$1W = __makeTemplateObject(["\n height: 32px;\n display: flex;\n align-items: center;\n"], ["\n height: 32px;\n display: flex;\n align-items: center;\n"])));
|
|
4931
|
-
var DropContainer = newStyled.div(templateObject_2$
|
|
4931
|
+
var DropContainer = newStyled.div(templateObject_2$1k || (templateObject_2$1k = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
4932
4932
|
var DropList = function (_a) {
|
|
4933
4933
|
var dropTotal = _a.dropTotal, drops = _a.drops;
|
|
4934
4934
|
return (jsxRuntime.jsx(Container$1d, { children: __spreadArray([], new Array(dropTotal), true).map(function (_, index) {
|
|
4935
4935
|
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));
|
|
4936
4936
|
}) }, void 0));
|
|
4937
4937
|
};
|
|
4938
|
-
var templateObject_1$1W, templateObject_2$
|
|
4938
|
+
var templateObject_1$1W, templateObject_2$1k;
|
|
4939
4939
|
|
|
4940
4940
|
var DROPS_TOTAL = 5;
|
|
4941
4941
|
var Container$1c = newStyled.div(templateObject_1$1V || (templateObject_1$1V = __makeTemplateObject(["\n height: 32px;\n display: flex;\n"], ["\n height: 32px;\n display: flex;\n"])));
|
|
4942
|
-
var Title$b = newStyled.p(templateObject_2$
|
|
4943
|
-
var Description$3 = newStyled.p(templateObject_3$
|
|
4942
|
+
var Title$b = newStyled.p(templateObject_2$1j || (templateObject_2$1j = __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"])));
|
|
4943
|
+
var Description$3 = newStyled.p(templateObject_3$11 || (templateObject_3$11 = __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"])));
|
|
4944
4944
|
var AbsorbencyLevel = function (_a) {
|
|
4945
4945
|
var dropTotal = _a.dropTotal, drops = _a.drops, absorbencyTitle = _a.absorbencyTitle, absorbencyDescription = _a.absorbencyDescription;
|
|
4946
4946
|
return (jsxRuntime.jsxs(Container$1c, { 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));
|
|
4947
4947
|
};
|
|
4948
|
-
var templateObject_1$1V, templateObject_2$
|
|
4948
|
+
var templateObject_1$1V, templateObject_2$1j, templateObject_3$11;
|
|
4949
4949
|
|
|
4950
4950
|
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(`
|
|
4951
4951
|
`),"","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(`
|
|
@@ -5208,8 +5208,8 @@ var isValidDate = function (value) {
|
|
|
5208
5208
|
};
|
|
5209
5209
|
|
|
5210
5210
|
var Bold = newStyled.span(templateObject_1$1S || (templateObject_1$1S = __makeTemplateObject(["\n font-weight: bold;\n"], ["\n font-weight: bold;\n"])));
|
|
5211
|
-
var FlexContainer$2 = newStyled.div(templateObject_2$
|
|
5212
|
-
var templateObject_1$1S, templateObject_2$
|
|
5211
|
+
var FlexContainer$2 = newStyled.div(templateObject_2$1i || (templateObject_2$1i = __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"])));
|
|
5212
|
+
var templateObject_1$1S, templateObject_2$1i;
|
|
5213
5213
|
|
|
5214
5214
|
var Container$1a = newStyled.div(templateObject_1$1R || (templateObject_1$1R = __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) {
|
|
5215
5215
|
var _b = _a.width, width = _b === void 0 ? '100%' : _b;
|
|
@@ -5218,22 +5218,20 @@ var Container$1a = newStyled.div(templateObject_1$1R || (templateObject_1$1R = _
|
|
|
5218
5218
|
var _b = _a.height, height = _b === void 0 ? '100%' : _b;
|
|
5219
5219
|
return height;
|
|
5220
5220
|
});
|
|
5221
|
-
var FlexCentered = newStyled.div(templateObject_2$
|
|
5222
|
-
var LeftSide = newStyled.div(templateObject_3
|
|
5223
|
-
var RightSide = newStyled.div(templateObject_4$
|
|
5221
|
+
var FlexCentered = newStyled.div(templateObject_2$1h || (templateObject_2$1h = __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"])));
|
|
5222
|
+
var LeftSide = newStyled.div(templateObject_3$10 || (templateObject_3$10 = __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"])));
|
|
5223
|
+
var RightSide = newStyled.div(templateObject_4$P || (templateObject_4$P = __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"])));
|
|
5224
5224
|
var FlexStart = newStyled.div(templateObject_5$A || (templateObject_5$A = __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"])));
|
|
5225
|
-
var templateObject_1$1R, templateObject_2$
|
|
5225
|
+
var templateObject_1$1R, templateObject_2$1h, templateObject_3$10, templateObject_4$P, templateObject_5$A;
|
|
5226
5226
|
|
|
5227
|
-
var _this$1 = undefined;
|
|
5228
5227
|
var CouponCard = function (_a) {
|
|
5229
|
-
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;
|
|
5228
|
+
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, onClickHandler = _a.onClickHandler;
|
|
5230
5229
|
var _c = React$2.useState(false), showCoupon = _c[0], setShowCoupon = _c[1];
|
|
5231
|
-
var handleCopy = React$2.useCallback(function (couponCode) { return (couponCode ? navigator.clipboard.writeText(couponCode) : undefined); }, []);
|
|
5232
5230
|
return (jsxRuntime.jsxs(Container$1a, __assign$1({ height: height, width: width }, { children: [jsxRuntime.jsx(LeftSide, { children: jsxRuntime.jsx(Image$3, { objectFit: "cover", src: image.src, alt: image.alt, width: "100%", height: "100%", borderRadius: "8px 0 0 8px" }, void 0) }, void 0), jsxRuntime.jsxs(RightSide, { children: [jsxRuntime.jsxs(FlexStart, { children: [jsxRuntime.jsx(Text$7, __assign$1({ variant: "body", weight: "bold", size: "small" }, { children: title }), void 0), content] }, void 0), jsxRuntime.jsx(FlexCentered, { children: !showCoupon ? (jsxRuntime.jsx(ButtonPrimary, { type: "button", text: btnText, wide: true, size: exports.ComponentSize.Large, onClick: function () { return setShowCoupon(function (prev) { return !prev; }); } }, void 0)) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ButtonSecondaryOutline, { "data-testid": "coupon-code-btn", testId: "coupon-code-btn", type: "button", text: couponCode !== null && couponCode !== void 0 ? couponCode : '', wide: true, size: exports.ComponentSize.Small, icon: {
|
|
5233
5231
|
name: 'actions/copy_outlined',
|
|
5234
5232
|
position: 'right',
|
|
5235
5233
|
margin: '10px',
|
|
5236
|
-
}, onClick:
|
|
5234
|
+
}, onClick: function () { return onClickHandler && onClickHandler(); } }, void 0), jsxRuntime.jsx(Text$7, __assign$1({ variant: "link", weight: "demi", underline: true, href: offerLink }, { children: "Go to offer" }), void 0)] }, void 0)) }, void 0)] }, void 0)] }), void 0));
|
|
5237
5235
|
};
|
|
5238
5236
|
|
|
5239
5237
|
// Partner titles
|
|
@@ -5278,13 +5276,13 @@ var CancellationFlowAccordionContentPerPartner = {
|
|
|
5278
5276
|
};
|
|
5279
5277
|
|
|
5280
5278
|
var ErrorText = newStyled.h3(templateObject_1$1Q || (templateObject_1$1Q = __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; });
|
|
5281
|
-
var ErrorContainer = newStyled.div(templateObject_2$
|
|
5279
|
+
var ErrorContainer = newStyled.div(templateObject_2$1g || (templateObject_2$1g = __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"])));
|
|
5282
5280
|
var Error$1 = function (_a) {
|
|
5283
5281
|
var error = _a.error;
|
|
5284
5282
|
var theme = useTheme();
|
|
5285
5283
|
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));
|
|
5286
5284
|
};
|
|
5287
|
-
var templateObject_1$1Q, templateObject_2$
|
|
5285
|
+
var templateObject_1$1Q, templateObject_2$1g;
|
|
5288
5286
|
|
|
5289
5287
|
var BaseSelectButton = function (_a) {
|
|
5290
5288
|
var children = _a.children, as = _a.as;
|
|
@@ -5548,7 +5546,7 @@ var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (pr
|
|
|
5548
5546
|
? "\n svg {\n path {\n fill: var(--colors-shades-black-color);\n }\n }"
|
|
5549
5547
|
: '', "\n ").concat(props.text === 'White' ? "border: 0.27px var(--colors-shades-300-color) solid;" : ''),
|
|
5550
5548
|
]; });
|
|
5551
|
-
var Input$5 = newStyled.input(templateObject_2$
|
|
5549
|
+
var Input$5 = newStyled.input(templateObject_2$1f || (templateObject_2$1f = __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) {
|
|
5552
5550
|
var disabled = _a.disabled;
|
|
5553
5551
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
5554
5552
|
});
|
|
@@ -5564,7 +5562,7 @@ var Checkbox = function (_a) {
|
|
|
5564
5562
|
};
|
|
5565
5563
|
return (jsxRuntime.jsxs(Container$19, { children: [jsxRuntime.jsx(Input$5, { type: "checkbox", checked: checked, disabled: disabled, onChange: handleChange, id: id }, void 0), jsxRuntime.jsx(CustomCheckbox, __assign$1({ theme: theme, size: size, disabled: disabled, isChecked: checked, "data-testid": "checkbox", variant: variant, backgroundColor: backgroundColor, text: text }, { children: checked && jsxRuntime.jsx(Icon.Actions.Check, { fill: "#fff" }, void 0) }), void 0), jsxRuntime.jsx(Label$5, __assign$1({ "data-testid": "checkbox-text", size: size, variant: checked ? 'demi' : 'regular', htmlFor: id, disabled: disabled }, { children: text }), void 0)] }, void 0));
|
|
5566
5564
|
};
|
|
5567
|
-
var templateObject_1$1N, templateObject_2$
|
|
5565
|
+
var templateObject_1$1N, templateObject_2$1f;
|
|
5568
5566
|
|
|
5569
5567
|
var CustomOption = newStyled.li(function (_a) {
|
|
5570
5568
|
var theme = _a.theme, selected = _a.selected, active = _a.active, hasImage = _a.hasImage;
|
|
@@ -5614,8 +5612,8 @@ var BaseDropdown$1 = Object.assign(BaseDropdown, {
|
|
|
5614
5612
|
});
|
|
5615
5613
|
|
|
5616
5614
|
var Container$18 = newStyled.div(templateObject_1$1M || (templateObject_1$1M = __makeTemplateObject([""], [""])));
|
|
5617
|
-
var RequiredPlaceholder = newStyled.p(templateObject_2$
|
|
5618
|
-
var SelectedOption = newStyled.span(templateObject_3
|
|
5615
|
+
var RequiredPlaceholder = newStyled.p(templateObject_2$1e || (templateObject_2$1e = __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"])));
|
|
5616
|
+
var SelectedOption = newStyled.span(templateObject_3$$ || (templateObject_3$$ = __makeTemplateObject(["\n font-weight: ", ";\n"], ["\n font-weight: ", ";\n"])), function (_a) {
|
|
5619
5617
|
var fontWeight = _a.fontWeight;
|
|
5620
5618
|
return fontWeight || '';
|
|
5621
5619
|
});
|
|
@@ -5650,7 +5648,7 @@ function SimpleDropdown(_a) {
|
|
|
5650
5648
|
var DropdownContainer = showRequiredPlaceholder ? Container$18 : React$2.Fragment;
|
|
5651
5649
|
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));
|
|
5652
5650
|
}
|
|
5653
|
-
var templateObject_1$1M, templateObject_2$
|
|
5651
|
+
var templateObject_1$1M, templateObject_2$1e, templateObject_3$$;
|
|
5654
5652
|
|
|
5655
5653
|
/* base styles & size variants */
|
|
5656
5654
|
var CustomRadioStyles$2 = {
|
|
@@ -5717,7 +5715,7 @@ var ContainerStyles$2 = {
|
|
|
5717
5715
|
|
|
5718
5716
|
var Wrapper$7 = newStyled.div(templateObject_1$1L || (templateObject_1$1L = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
5719
5717
|
var Container$17 = newStyled.div(__assign$1({}, ContainerStyles$2.baseStyles), function (props) { return [ContainerStyles$2[props.size](props.theme)]; });
|
|
5720
|
-
var Input$4 = newStyled.input(templateObject_2$
|
|
5718
|
+
var Input$4 = newStyled.input(templateObject_2$1d || (templateObject_2$1d = __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) {
|
|
5721
5719
|
var disabled = _a.disabled;
|
|
5722
5720
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
5723
5721
|
});
|
|
@@ -5725,14 +5723,14 @@ var CustomRadio$2 = newStyled.div(function (props) { return [
|
|
|
5725
5723
|
CustomRadioStyles$2.baseStyles(props.theme, props.disabled),
|
|
5726
5724
|
CustomRadioStyles$2[props.size](props.theme, props.isChecked),
|
|
5727
5725
|
]; });
|
|
5728
|
-
var StyledLabel$3 = newStyled(Label$5)(templateObject_3$
|
|
5726
|
+
var StyledLabel$3 = newStyled(Label$5)(templateObject_3$_ || (templateObject_3$_ = __makeTemplateObject(["\n font-size: ", ";\n line-height: ", " !important;\n"], ["\n font-size: ", ";\n line-height: ", " !important;\n"])), function (_a) {
|
|
5729
5727
|
var theme = _a.theme;
|
|
5730
5728
|
return theme.component.radio.textSize;
|
|
5731
5729
|
}, function (_a) {
|
|
5732
5730
|
var theme = _a.theme;
|
|
5733
5731
|
return theme.component.radio.lineHeight;
|
|
5734
5732
|
});
|
|
5735
|
-
var StyledLabelV2 = newStyled(Label$5)(templateObject_4$
|
|
5733
|
+
var StyledLabelV2 = newStyled(Label$5)(templateObject_4$O || (templateObject_4$O = __makeTemplateObject(["\n font-size: ", ";\n font-weight: 600 !important;\n line-height: ", " !important;\n"], ["\n font-size: ", ";\n font-weight: 600 !important;\n line-height: ", " !important;\n"])), function (_a) {
|
|
5736
5734
|
var theme = _a.theme;
|
|
5737
5735
|
return theme.component.radio.textSize;
|
|
5738
5736
|
}, function (_a) {
|
|
@@ -5748,7 +5746,7 @@ var RadioInput = function (_a) {
|
|
|
5748
5746
|
};
|
|
5749
5747
|
return (jsxRuntime.jsxs(Wrapper$7, { children: [jsxRuntime.jsxs(Container$17, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsxRuntime.jsx(Input$4, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled, style: style }, void 0), jsxRuntime.jsx(CustomRadio$2, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), useV2Style ? (jsxRuntime.jsx(StyledLabelV2, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0)) : (jsxRuntime.jsx(StyledLabel$3, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0))] }, void 0));
|
|
5750
5748
|
};
|
|
5751
|
-
var templateObject_1$1L, templateObject_2$
|
|
5749
|
+
var templateObject_1$1L, templateObject_2$1d, templateObject_3$_, templateObject_4$O;
|
|
5752
5750
|
|
|
5753
5751
|
var useOnClickOutside = function (ref, handler) {
|
|
5754
5752
|
React$2.useEffect(function () {
|
|
@@ -5851,7 +5849,7 @@ var Wrapper$6 = newStyled.div(templateObject_1$1K || (templateObject_1$1K = __ma
|
|
|
5851
5849
|
var disableHover = _a.disableHover;
|
|
5852
5850
|
return (disableHover ? 0 : 1);
|
|
5853
5851
|
});
|
|
5854
|
-
var TooltipContainer = newStyled.div(templateObject_2$
|
|
5852
|
+
var TooltipContainer = newStyled.div(templateObject_2$1c || (templateObject_2$1c = __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) {
|
|
5855
5853
|
var position = _a.position;
|
|
5856
5854
|
return getContainerFlexDirection(position);
|
|
5857
5855
|
}, function (_a) {
|
|
@@ -5879,14 +5877,14 @@ var TooltipContainer = newStyled.div(templateObject_2$1b || (templateObject_2$1b
|
|
|
5879
5877
|
var getTooltipMargin = function (actual, expected, margin) {
|
|
5880
5878
|
return actual === expected ? margin : '0';
|
|
5881
5879
|
};
|
|
5882
|
-
var ContentWrapper = newStyled.div(templateObject_3$
|
|
5880
|
+
var ContentWrapper = newStyled.div(templateObject_3$Z || (templateObject_3$Z = __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) {
|
|
5883
5881
|
var borderColor = _a.borderColor;
|
|
5884
5882
|
return borderColor;
|
|
5885
5883
|
}, function (_a) {
|
|
5886
5884
|
var backgroundColor = _a.backgroundColor;
|
|
5887
5885
|
return backgroundColor;
|
|
5888
5886
|
});
|
|
5889
|
-
var TooltipText = newStyled.div(templateObject_4$
|
|
5887
|
+
var TooltipText = newStyled.div(templateObject_4$N || (templateObject_4$N = __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) {
|
|
5890
5888
|
var theme = _a.theme;
|
|
5891
5889
|
return theme.component.autoship.tooltip.text.alignment;
|
|
5892
5890
|
}, function (_a) {
|
|
@@ -5906,7 +5904,7 @@ var CloseToolTip = newStyled.button(templateObject_8$i || (templateObject_8$i =
|
|
|
5906
5904
|
var _b = _a.right, right = _b === void 0 ? '.3rem' : _b;
|
|
5907
5905
|
return right;
|
|
5908
5906
|
});
|
|
5909
|
-
var templateObject_1$1K, templateObject_2$
|
|
5907
|
+
var templateObject_1$1K, templateObject_2$1c, templateObject_3$Z, templateObject_4$N, templateObject_5$z, templateObject_6$u, templateObject_7$m, templateObject_8$i;
|
|
5910
5908
|
|
|
5911
5909
|
var Tooltip = function (_a) {
|
|
5912
5910
|
var _b;
|
|
@@ -5950,7 +5948,7 @@ var benefitsColorMapper = function (_a) {
|
|
|
5950
5948
|
};
|
|
5951
5949
|
|
|
5952
5950
|
var FlexContainer$1 = newStyled.div(templateObject_1$1J || (templateObject_1$1J = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5953
|
-
var ContainerBase$1 = newStyled.div(templateObject_2$
|
|
5951
|
+
var ContainerBase$1 = newStyled.div(templateObject_2$1b || (templateObject_2$1b = __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) {
|
|
5954
5952
|
var selected = _a.selected, theme = _a.theme;
|
|
5955
5953
|
return selected
|
|
5956
5954
|
? "2px solid ".concat(theme.colors.pallete.primary.color)
|
|
@@ -5964,11 +5962,11 @@ var ContainerBase$1 = newStyled.div(templateObject_2$1a || (templateObject_2$1a
|
|
|
5964
5962
|
var theme = _a.theme;
|
|
5965
5963
|
return theme.colors.pallete.primary.color;
|
|
5966
5964
|
});
|
|
5967
|
-
var SinglePurchaseContainer$1 = newStyled(ContainerBase$1)(templateObject_3$
|
|
5965
|
+
var SinglePurchaseContainer$1 = newStyled(ContainerBase$1)(templateObject_3$Y || (templateObject_3$Y = __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) {
|
|
5968
5966
|
var onClick = _a.onClick;
|
|
5969
5967
|
return (onClick ? 'cursor: pointer;' : '');
|
|
5970
5968
|
});
|
|
5971
|
-
var SubscriptionContainer$1 = newStyled(ContainerBase$1)(templateObject_4$
|
|
5969
|
+
var SubscriptionContainer$1 = newStyled(ContainerBase$1)(templateObject_4$M || (templateObject_4$M = __makeTemplateObject(["\n padding: 16px;\n"], ["\n padding: 16px;\n"])));
|
|
5972
5970
|
var SubscriptionHeader$1 = newStyled.div(templateObject_5$y || (templateObject_5$y = __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) {
|
|
5973
5971
|
var theme = _a.theme;
|
|
5974
5972
|
return theme.colors.shades[200].color;
|
|
@@ -5987,7 +5985,7 @@ var StyledPrice$1 = newStyled(PriceLabelV2$1)(templateObject_12$3 || (templateOb
|
|
|
5987
5985
|
return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
|
|
5988
5986
|
});
|
|
5989
5987
|
var Container$16 = newStyled.div(templateObject_13$3 || (templateObject_13$3 = __makeTemplateObject([""], [""])));
|
|
5990
|
-
var templateObject_1$1J, templateObject_2$
|
|
5988
|
+
var templateObject_1$1J, templateObject_2$1b, templateObject_3$Y, templateObject_4$M, templateObject_5$y, templateObject_6$t, templateObject_7$l, templateObject_8$h, templateObject_9$9, templateObject_10$8, templateObject_11$5, templateObject_12$3, templateObject_13$3;
|
|
5991
5989
|
|
|
5992
5990
|
var radioIds$1 = {
|
|
5993
5991
|
oneTime: {
|
|
@@ -6047,7 +6045,7 @@ var FlexContainer = newStyled.div(templateObject_1$1I || (templateObject_1$1I =
|
|
|
6047
6045
|
return theme.name === 'TheSpaDr' &&
|
|
6048
6046
|
"\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 ";
|
|
6049
6047
|
});
|
|
6050
|
-
var DiscountTag = newStyled.div(templateObject_2$
|
|
6048
|
+
var DiscountTag = newStyled.div(templateObject_2$1a || (templateObject_2$1a = __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) {
|
|
6051
6049
|
var theme = _a.theme, isSelected = _a.isSelected;
|
|
6052
6050
|
return isSelected
|
|
6053
6051
|
? theme.component.autoship.discountTag.backgroundColor
|
|
@@ -6063,7 +6061,7 @@ var getSelectedBorder = function (_a) {
|
|
|
6063
6061
|
}
|
|
6064
6062
|
return "1.5px solid ".concat(colors.shades['700'].color);
|
|
6065
6063
|
};
|
|
6066
|
-
var ContainerBase = newStyled.div(templateObject_3$
|
|
6064
|
+
var ContainerBase = newStyled.div(templateObject_3$X || (templateObject_3$X = __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) {
|
|
6067
6065
|
var selected = _a.selected, theme = _a.theme;
|
|
6068
6066
|
return selected ? getSelectedBorder(theme) : "1px solid ".concat(theme.colors.shades[200].color);
|
|
6069
6067
|
}, function (_a) {
|
|
@@ -6075,7 +6073,7 @@ var ContainerBase = newStyled.div(templateObject_3$W || (templateObject_3$W = __
|
|
|
6075
6073
|
var theme = _a.theme;
|
|
6076
6074
|
return theme.colors.pallete.primary.color;
|
|
6077
6075
|
});
|
|
6078
|
-
var SinglePurchaseContainer = newStyled(ContainerBase)(templateObject_4$
|
|
6076
|
+
var SinglePurchaseContainer = newStyled(ContainerBase)(templateObject_4$L || (templateObject_4$L = __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) {
|
|
6079
6077
|
var onClick = _a.onClick;
|
|
6080
6078
|
return (onClick ? 'cursor: pointer;' : '');
|
|
6081
6079
|
});
|
|
@@ -6100,7 +6098,7 @@ var TooltipWrapper = newStyled.div(templateObject_13$2 || (templateObject_13$2 =
|
|
|
6100
6098
|
var theme = _a.theme;
|
|
6101
6099
|
return theme.component.autoship.tooltip.margin;
|
|
6102
6100
|
});
|
|
6103
|
-
var templateObject_1$1I, templateObject_2$
|
|
6101
|
+
var templateObject_1$1I, templateObject_2$1a, templateObject_3$X, templateObject_4$L, templateObject_5$x, templateObject_6$s, templateObject_7$k, templateObject_8$g, templateObject_9$8, templateObject_10$7, templateObject_11$4, templateObject_12$2, templateObject_13$2;
|
|
6104
6102
|
|
|
6105
6103
|
var radioIds = {
|
|
6106
6104
|
oneTime: {
|
|
@@ -6179,12 +6177,12 @@ var componentSizeMapper = (_a$2 = {},
|
|
|
6179
6177
|
_a$2);
|
|
6180
6178
|
|
|
6181
6179
|
var CustomerDetails = newStyled.div(templateObject_1$1H || (templateObject_1$1H = __makeTemplateObject([""], [""])));
|
|
6182
|
-
var CustomerInfo = newStyled.div(templateObject_2$
|
|
6183
|
-
var Name = newStyled.h4(templateObject_3$
|
|
6184
|
-
var StarIconContainer = newStyled.div(templateObject_4$
|
|
6180
|
+
var CustomerInfo = newStyled.div(templateObject_2$19 || (templateObject_2$19 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n"], ["\n display: flex;\n justify-content: space-between;\n align-items: center;\n"])));
|
|
6181
|
+
var Name = newStyled.h4(templateObject_3$W || (templateObject_3$W = __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"])));
|
|
6182
|
+
var StarIconContainer = newStyled.div(templateObject_4$K || (templateObject_4$K = __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"])));
|
|
6185
6183
|
var Description$2 = newStyled.p(templateObject_5$w || (templateObject_5$w = __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"])));
|
|
6186
6184
|
var ReviewDays = newStyled.span(templateObject_6$r || (templateObject_6$r = __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"])));
|
|
6187
|
-
var templateObject_1$1H, templateObject_2$
|
|
6185
|
+
var templateObject_1$1H, templateObject_2$19, templateObject_3$W, templateObject_4$K, templateObject_5$w, templateObject_6$r;
|
|
6188
6186
|
|
|
6189
6187
|
var NameWithStars = function (_a) {
|
|
6190
6188
|
var name = _a.name, size = _a.size;
|
|
@@ -6203,9 +6201,9 @@ var ResultFeedback = function (_a) {
|
|
|
6203
6201
|
};
|
|
6204
6202
|
|
|
6205
6203
|
var Container$14 = newStyled.div(templateObject_1$1G || (templateObject_1$1G = __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; });
|
|
6206
|
-
var ImageContainer$7 = newStyled.div(templateObject_2$
|
|
6207
|
-
var ImageCard = newStyled.div(templateObject_3$
|
|
6208
|
-
var UserInfoText = newStyled.div(templateObject_4$
|
|
6204
|
+
var ImageContainer$7 = newStyled.div(templateObject_2$18 || (templateObject_2$18 = __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"])));
|
|
6205
|
+
var ImageCard = newStyled.div(templateObject_3$V || (templateObject_3$V = __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; });
|
|
6206
|
+
var UserInfoText = newStyled.div(templateObject_4$J || (templateObject_4$J = __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) {
|
|
6209
6207
|
var theme = _a.theme;
|
|
6210
6208
|
return theme.colors.pallete.secondary.color;
|
|
6211
6209
|
}, function (_a) {
|
|
@@ -6215,7 +6213,7 @@ var UserInfoText = newStyled.div(templateObject_4$I || (templateObject_4$I = __m
|
|
|
6215
6213
|
var theme = _a.theme, size = _a.size;
|
|
6216
6214
|
return theme.component.beforeAfter.size[componentSizeMapper[size]].userInfoText.mobile.fontSize;
|
|
6217
6215
|
});
|
|
6218
|
-
var templateObject_1$1G, templateObject_2$
|
|
6216
|
+
var templateObject_1$1G, templateObject_2$18, templateObject_3$V, templateObject_4$J;
|
|
6219
6217
|
|
|
6220
6218
|
/* base styles & size variants */
|
|
6221
6219
|
var getStylesBySize$d = function (size, theme) {
|
|
@@ -6338,13 +6336,13 @@ var Card$2 = Object.assign(Card$1, {
|
|
|
6338
6336
|
var templateObject_1$1D;
|
|
6339
6337
|
|
|
6340
6338
|
var StyledWrapper = newStyled.div(templateObject_1$1C || (templateObject_1$1C = __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"])));
|
|
6341
|
-
var StyledContainer = newStyled.div(templateObject_2$
|
|
6342
|
-
var TextLabel = newStyled(Text$7)(templateObject_3$
|
|
6339
|
+
var StyledContainer = newStyled.div(templateObject_2$17 || (templateObject_2$17 = __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"])));
|
|
6340
|
+
var TextLabel = newStyled(Text$7)(templateObject_3$U || (templateObject_3$U = __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) {
|
|
6343
6341
|
var color = _a.color;
|
|
6344
6342
|
return color;
|
|
6345
6343
|
});
|
|
6346
|
-
var YouAreSaving = newStyled(Text$7)(templateObject_4$
|
|
6347
|
-
var templateObject_1$1C, templateObject_2$
|
|
6344
|
+
var YouAreSaving = newStyled(Text$7)(templateObject_4$I || (templateObject_4$I = __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"])));
|
|
6345
|
+
var templateObject_1$1C, templateObject_2$17, templateObject_3$U, templateObject_4$I;
|
|
6348
6346
|
|
|
6349
6347
|
var Minimalistic = function (_a) {
|
|
6350
6348
|
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;
|
|
@@ -6353,15 +6351,15 @@ var Minimalistic = function (_a) {
|
|
|
6353
6351
|
};
|
|
6354
6352
|
|
|
6355
6353
|
var Container$12 = newStyled.div(templateObject_1$1B || (templateObject_1$1B = __makeTemplateObject(["\n padding: 0.625rem 1.5rem;\n"], ["\n padding: 0.625rem 1.5rem;\n"])));
|
|
6356
|
-
var Title$9 = newStyled.h1(templateObject_2$
|
|
6357
|
-
var Details$1 = newStyled.span(templateObject_3$
|
|
6358
|
-
var PriceContainer$2 = newStyled.span(templateObject_4$
|
|
6354
|
+
var Title$9 = newStyled.h1(templateObject_2$16 || (templateObject_2$16 = __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; });
|
|
6355
|
+
var Details$1 = newStyled.span(templateObject_3$T || (templateObject_3$T = __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; });
|
|
6356
|
+
var PriceContainer$2 = newStyled.span(templateObject_4$H || (templateObject_4$H = __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"])));
|
|
6359
6357
|
var Simple = function (_a) {
|
|
6360
6358
|
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;
|
|
6361
6359
|
var theme = useTheme();
|
|
6362
6360
|
return (jsxRuntime.jsx(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxRuntime.jsxs(Container$12, { 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));
|
|
6363
6361
|
};
|
|
6364
|
-
var templateObject_1$1B, templateObject_2$
|
|
6362
|
+
var templateObject_1$1B, templateObject_2$16, templateObject_3$T, templateObject_4$H;
|
|
6365
6363
|
|
|
6366
6364
|
var Bundle = {
|
|
6367
6365
|
Minimalistic: Minimalistic,
|
|
@@ -6372,8 +6370,8 @@ var Container$11 = newStyled.div(templateObject_1$1A || (templateObject_1$1A = _
|
|
|
6372
6370
|
var displayBNPL = _a.displayBNPL;
|
|
6373
6371
|
return (displayBNPL ? 'flex' : 'none');
|
|
6374
6372
|
});
|
|
6375
|
-
var TextContainer$1 = newStyled.div(templateObject_2$
|
|
6376
|
-
var IconWrapper$1 = newStyled.div(templateObject_3$
|
|
6373
|
+
var TextContainer$1 = newStyled.div(templateObject_2$15 || (templateObject_2$15 = __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"])));
|
|
6374
|
+
var IconWrapper$1 = newStyled.div(templateObject_3$S || (templateObject_3$S = __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"])));
|
|
6377
6375
|
var BuyNowPayLater = function (_a) {
|
|
6378
6376
|
var _b;
|
|
6379
6377
|
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;
|
|
@@ -6385,7 +6383,7 @@ var BuyNowPayLater = function (_a) {
|
|
|
6385
6383
|
}
|
|
6386
6384
|
return (jsxRuntime.jsx(Container$11, __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));
|
|
6387
6385
|
};
|
|
6388
|
-
var templateObject_1$1A, templateObject_2$
|
|
6386
|
+
var templateObject_1$1A, templateObject_2$15, templateObject_3$S;
|
|
6389
6387
|
|
|
6390
6388
|
var Text$6 = newStyled.span(templateObject_1$1z || (templateObject_1$1z = __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; });
|
|
6391
6389
|
var Title$8 = function (_a) {
|
|
@@ -6445,9 +6443,9 @@ var CartProductItem = {
|
|
|
6445
6443
|
};
|
|
6446
6444
|
|
|
6447
6445
|
var Container$$ = newStyled.div(templateObject_1$1u || (templateObject_1$1u = __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"])));
|
|
6448
|
-
var MobileContainer = newStyled(Container$$)(templateObject_2$
|
|
6449
|
-
var DollarPart = newStyled.span(templateObject_3$
|
|
6450
|
-
var ClubMembersText = newStyled.span(templateObject_4$
|
|
6446
|
+
var MobileContainer = newStyled(Container$$)(templateObject_2$14 || (templateObject_2$14 = __makeTemplateObject(["\n padding: 2px 2px;\n gap: 3px;\n"], ["\n padding: 2px 2px;\n gap: 3px;\n"])));
|
|
6447
|
+
var DollarPart = newStyled.span(templateObject_3$R || (templateObject_3$R = __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"])));
|
|
6448
|
+
var ClubMembersText = newStyled.span(templateObject_4$G || (templateObject_4$G = __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"])));
|
|
6451
6449
|
var MobileDollarPart = newStyled(DollarPart)(templateObject_5$v || (templateObject_5$v = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
6452
6450
|
var MobileClubMembersText = newStyled(ClubMembersText)(templateObject_6$q || (templateObject_6$q = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
6453
6451
|
var DesktopDollarPart = newStyled(DollarPart)(templateObject_7$j || (templateObject_7$j = __makeTemplateObject(["\n font-size: 13px;\n"], ["\n font-size: 13px;\n"])));
|
|
@@ -6457,7 +6455,7 @@ var ClubPriceLabel = function (_a) {
|
|
|
6457
6455
|
var isMobile = useWindowDimensions().isMobile;
|
|
6458
6456
|
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$$, { children: [jsxRuntime.jsx(DesktopDollarPart, { children: clubPrice }, void 0), jsxRuntime.jsx(DesktopClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) }, void 0));
|
|
6459
6457
|
};
|
|
6460
|
-
var templateObject_1$1u, templateObject_2$
|
|
6458
|
+
var templateObject_1$1u, templateObject_2$14, templateObject_3$R, templateObject_4$G, templateObject_5$v, templateObject_6$q, templateObject_7$j, templateObject_8$f;
|
|
6461
6459
|
|
|
6462
6460
|
var Spacing = function (_a) {
|
|
6463
6461
|
var size = _a.size, _b = _a.type, type = _b === void 0 ? 'block' : _b, children = _a.children, styleProp = _a.style;
|
|
@@ -6466,9 +6464,9 @@ var Spacing = function (_a) {
|
|
|
6466
6464
|
};
|
|
6467
6465
|
|
|
6468
6466
|
var Container$_ = newStyled('div')(templateObject_1$1t || (templateObject_1$1t = __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"])));
|
|
6469
|
-
var Content$2 = newStyled('div')(templateObject_2$
|
|
6470
|
-
var BarContainer$1 = newStyled('div')(templateObject_3$
|
|
6471
|
-
var Bar$2 = newStyled('div')(templateObject_4$
|
|
6467
|
+
var Content$2 = newStyled('div')(templateObject_2$13 || (templateObject_2$13 = __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"])));
|
|
6468
|
+
var BarContainer$1 = newStyled('div')(templateObject_3$Q || (templateObject_3$Q = __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"])));
|
|
6469
|
+
var Bar$2 = newStyled('div')(templateObject_4$F || (templateObject_4$F = __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) {
|
|
6472
6470
|
var index = _a.index;
|
|
6473
6471
|
return "".concat(6 + 3 * index, "px");
|
|
6474
6472
|
}, function (_a) {
|
|
@@ -6479,12 +6477,12 @@ var StrengthBars = function (_a) {
|
|
|
6479
6477
|
var _b = _a.barsFilled, barsFilled = _b === void 0 ? 0 : _b, supportText = _a.supportText;
|
|
6480
6478
|
return (jsxRuntime.jsxs(Container$_, __assign$1({ "data-testid": "strength-bar" }, { children: [jsxRuntime.jsx(BarContainer$1, { children: [1, 2, 3, 4, 5].map(function (bar, index) { return (jsxRuntime.jsx(Bar$2, { index: index, isFilled: bar <= barsFilled }, bar)); }) }, void 0), jsxRuntime.jsx(Content$2, { children: supportText }, void 0)] }), void 0));
|
|
6481
6479
|
};
|
|
6482
|
-
var templateObject_1$1t, templateObject_2$
|
|
6480
|
+
var templateObject_1$1t, templateObject_2$13, templateObject_3$Q, templateObject_4$F;
|
|
6483
6481
|
|
|
6484
6482
|
var RegularPriceTagSpan = newStyled.span(templateObject_1$1s || (templateObject_1$1s = __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"])));
|
|
6485
|
-
var ClubPriceTagSpan = newStyled.span(templateObject_2$
|
|
6486
|
-
var PriceContainer$1 = newStyled.span(templateObject_3$
|
|
6487
|
-
var PriceContainerV2 = newStyled.span(templateObject_4$
|
|
6483
|
+
var ClubPriceTagSpan = newStyled.span(templateObject_2$12 || (templateObject_2$12 = __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"])));
|
|
6484
|
+
var PriceContainer$1 = newStyled.span(templateObject_3$P || (templateObject_3$P = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
6485
|
+
var PriceContainerV2 = newStyled.span(templateObject_4$E || (templateObject_4$E = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
6488
6486
|
var PriceWithTagContainer = newStyled.span(templateObject_5$u || (templateObject_5$u = __makeTemplateObject(["\n display: flex;\n gap: 8px;\n"], ["\n display: flex;\n gap: 8px;\n"])));
|
|
6489
6487
|
var RegularPriceTag = function () {
|
|
6490
6488
|
return jsxRuntime.jsx(RegularPriceTagSpan, { children: "REGULAR PRICE" }, void 0);
|
|
@@ -6538,7 +6536,7 @@ var PriceLabelV4 = function (_a) {
|
|
|
6538
6536
|
? finalPriceArray[0]
|
|
6539
6537
|
: (_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$1, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
|
|
6540
6538
|
};
|
|
6541
|
-
var templateObject_1$1s, templateObject_2$
|
|
6539
|
+
var templateObject_1$1s, templateObject_2$12, templateObject_3$P, templateObject_4$E, templateObject_5$u;
|
|
6542
6540
|
|
|
6543
6541
|
var Container$Z = newStyled.div(templateObject_1$1r || (templateObject_1$1r = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
6544
6542
|
var templateObject_1$1r;
|
|
@@ -6655,9 +6653,9 @@ var ImageContainer$6 = newStyled.div(function (_a) {
|
|
|
6655
6653
|
});
|
|
6656
6654
|
});
|
|
6657
6655
|
var ImageHoverContainer$3 = newStyled.img(templateObject_1$1n || (templateObject_1$1n = __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"])));
|
|
6658
|
-
var Container$X = newStyled.a(templateObject_2$
|
|
6659
|
-
var ProdCardContainer$4 = newStyled.div(templateObject_3$
|
|
6660
|
-
var Title$7 = newStyled.p(templateObject_4$
|
|
6656
|
+
var Container$X = newStyled.a(templateObject_2$11 || (templateObject_2$11 = __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"])));
|
|
6657
|
+
var ProdCardContainer$4 = newStyled.div(templateObject_3$O || (templateObject_3$O = __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"])));
|
|
6658
|
+
var Title$7 = newStyled.p(templateObject_4$D || (templateObject_4$D = __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; });
|
|
6661
6659
|
var getStylesBySize$c = function (size) {
|
|
6662
6660
|
switch (size) {
|
|
6663
6661
|
case exports.ComponentSize.Medium:
|
|
@@ -6750,7 +6748,7 @@ var ProductItemMobile = function (_a) {
|
|
|
6750
6748
|
};
|
|
6751
6749
|
return (jsxs(ProdCardContainer$4, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$X, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', className: "picContainer", onClick: onClick }, { children: [!!topTag || !!bottomTag ? (jsxs(ImageContainer$6, __assign$1({ width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height, "data-testid": "tags-image-container" }, { children: [jsx(Image$3, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, width: "100%", height: "100%" }, void 0), jsx(TopTagContainer$8, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: topTag }), void 0), jsx(BottomTagContainer$8, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: bottomTag }), void 0)] }), void 0)) : (jsx(Image$3, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)), imageHover ? (jsx(ImageHoverContainer$3, { className: "hover__image", src: imageHover.src, srcSet: getSrcSet(imageHover.src, 180, 360, 720, 960), loading: "lazy", alt: imageHover.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)) : null] }), void 0), colorPicker.display && colorPicker.position === 'top' && (jsxs(Fragment, { children: [jsx(Spacing, { size: space }, void 0), colorPicker.component] }, void 0)), jsxs(Container$X, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', onClick: onClick, className: "textContainer", style: { alignItems: showClubPriceLabel ? 'flex-start' : 'center' } }, { children: [jsx(Spacing, { size: space }, void 0), jsx(Title$7, __assign$1({ theme: theme, align: showClubPriceLabel ? 'left' : alignName }, { children: title }), void 0), jsx(Spacing, { size: space }, void 0), hasStrength && hasStrength.strength !== -1 && (jsxs(Fragment, { children: [jsx(StrengthBars, { barsFilled: hasStrength.strength, supportText: hasStrength.description }, void 0), jsx(Spacing, { size: 10 }, void 0)] }, void 0)), priceAtBottom ? (jsxs(Fragment, { children: [jsx(RatingDisplay, {}, void 0), jsx(Spacing, { size: space }, void 0), jsx(MarginTopContainer$1, { children: priceLoading ? jsx(SkeletonBox, { height: "20px", width: "140px" }, void 0) : PriceLabelDisplay() }, void 0)] }, void 0)) : (jsxs(Fragment, { children: [priceLoading ? (jsx(SkeletonBox, { height: "20px", width: "140px" }, void 0)) : (jsxs(Fragment, { children: [PriceLabelDisplay(), jsx(BuyNowPayLater, { displayBNPL: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.displayBNPL, installments: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.installments) || 0, installmentPrice: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.installmentPrice) || '', iconFolder: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconFolder, iconName: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconName) || '', showLogo: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.showLogo, iconColor: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconColor, fontSize: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.fontSize }, void 0)] }, void 0)), showClubPriceLabel && jsx(ClubPriceLabel, { clubPrice: clubPrice }, void 0), jsx(Spacing, { size: space }, void 0), jsx(RatingDisplay, {}, void 0)] }, void 0))] }), void 0), colorPicker.display && colorPicker.position === 'bottom' && (jsxs(Fragment, { children: [jsx(Spacing, { size: space }, void 0), colorPicker.component] }, void 0))] }), void 0));
|
|
6752
6750
|
};
|
|
6753
|
-
var templateObject_1$1n, templateObject_2$
|
|
6751
|
+
var templateObject_1$1n, templateObject_2$11, templateObject_3$O, templateObject_4$D, templateObject_5$t, templateObject_6$p, templateObject_7$i;
|
|
6754
6752
|
|
|
6755
6753
|
var ImageContainer$5 = newStyled.div(function (_a) {
|
|
6756
6754
|
var width = _a.width, height = _a.height;
|
|
@@ -6761,9 +6759,9 @@ var ImageContainer$5 = newStyled.div(function (_a) {
|
|
|
6761
6759
|
});
|
|
6762
6760
|
});
|
|
6763
6761
|
var ImageHoverContainer$2 = newStyled.img(templateObject_1$1m || (templateObject_1$1m = __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; });
|
|
6764
|
-
var Container$W = newStyled.a(templateObject_2
|
|
6765
|
-
var ProdCardContainer$3 = newStyled.div(templateObject_3$
|
|
6766
|
-
var Title$6 = newStyled.p(templateObject_4$
|
|
6762
|
+
var Container$W = newStyled.a(templateObject_2$10 || (templateObject_2$10 = __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"])));
|
|
6763
|
+
var ProdCardContainer$3 = newStyled.div(templateObject_3$N || (templateObject_3$N = __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"])));
|
|
6764
|
+
var Title$6 = newStyled.p(templateObject_4$C || (templateObject_4$C = __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; });
|
|
6767
6765
|
var getStylesBySize$b = function (size) {
|
|
6768
6766
|
switch (size) {
|
|
6769
6767
|
case exports.ComponentSize.Medium:
|
|
@@ -6849,7 +6847,7 @@ var ProductItemTK = function (_a) {
|
|
|
6849
6847
|
marginTop: hasSpacing ? undefined : textContainerGap,
|
|
6850
6848
|
} }, { 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));
|
|
6851
6849
|
};
|
|
6852
|
-
var templateObject_1$1m, templateObject_2
|
|
6850
|
+
var templateObject_1$1m, templateObject_2$10, templateObject_3$N, templateObject_4$C, templateObject_5$s, templateObject_6$o, templateObject_7$h, templateObject_8$e;
|
|
6853
6851
|
|
|
6854
6852
|
var Container$V = newStyled.div(templateObject_1$1l || (templateObject_1$1l = __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"])));
|
|
6855
6853
|
function withProductGrid(ProductItemComponent, data) {
|
|
@@ -6909,9 +6907,9 @@ var OutOfStock = function (_a) {
|
|
|
6909
6907
|
};
|
|
6910
6908
|
|
|
6911
6909
|
var CustomRadioGroup = newStyled(lt)(templateObject_1$1k || (templateObject_1$1k = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
6912
|
-
newStyled(lt.Label)(templateObject_2
|
|
6913
|
-
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$
|
|
6914
|
-
var Span = newStyled.span(templateObject_4$
|
|
6910
|
+
newStyled(lt.Label)(templateObject_2$$ || (templateObject_2$$ = __makeTemplateObject(["\n font-size: 0.88rem;\n"], ["\n font-size: 0.88rem;\n"])));
|
|
6911
|
+
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$M || (templateObject_3$M = __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"])));
|
|
6912
|
+
var Span = newStyled.span(templateObject_4$B || (templateObject_4$B = __makeTemplateObject(["\n font-weight: 600;\n"], ["\n font-weight: 600;\n"])));
|
|
6915
6913
|
var OptionsContainer = newStyled.div(templateObject_5$r || (templateObject_5$r = __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"])));
|
|
6916
6914
|
var Label$4 = function (_a) {
|
|
6917
6915
|
var label = _a.label, values = _a.values;
|
|
@@ -6930,7 +6928,7 @@ var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
|
|
|
6930
6928
|
Option: Option,
|
|
6931
6929
|
OptionsContainer: OptionsContainer,
|
|
6932
6930
|
});
|
|
6933
|
-
var templateObject_1$1k, templateObject_2
|
|
6931
|
+
var templateObject_1$1k, templateObject_2$$, templateObject_3$M, templateObject_4$B, templateObject_5$r;
|
|
6934
6932
|
|
|
6935
6933
|
var Container$U = newStyled.div(templateObject_1$1j || (templateObject_1$1j = __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) {
|
|
6936
6934
|
var borderColor = _a.borderColor;
|
|
@@ -6939,14 +6937,14 @@ var Container$U = newStyled.div(templateObject_1$1j || (templateObject_1$1j = __
|
|
|
6939
6937
|
var noStock = _a.noStock;
|
|
6940
6938
|
return (noStock ? '0.4' : '1');
|
|
6941
6939
|
});
|
|
6942
|
-
var Image$2 = newStyled.img(templateObject_2$
|
|
6940
|
+
var Image$2 = newStyled.img(templateObject_2$_ || (templateObject_2$_ = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n"], ["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n"])));
|
|
6943
6941
|
var PatternSelector = function (_a) {
|
|
6944
6942
|
var url = _a.url, selected = _a.selected, testId = _a.testId, noStock = _a.noStock;
|
|
6945
6943
|
var theme = useTheme();
|
|
6946
6944
|
var outerBorder = selected ? theme.colors.shades['550'].color : 'transparent';
|
|
6947
6945
|
return (jsxRuntime.jsx(Container$U, __assign$1({ "data-testid": testId, borderColor: outerBorder, noStock: noStock }, { children: jsxRuntime.jsx(Image$2, { src: url, alt: "pattern" }, void 0) }), void 0));
|
|
6948
6946
|
};
|
|
6949
|
-
var templateObject_1$1j, templateObject_2$
|
|
6947
|
+
var templateObject_1$1j, templateObject_2$_;
|
|
6950
6948
|
|
|
6951
6949
|
var renderOptions$1 = function (selectedColor, options) {
|
|
6952
6950
|
if (options == null || options.length === 0) {
|
|
@@ -7006,12 +7004,12 @@ var SingleColorPicker = function (_a) {
|
|
|
7006
7004
|
};
|
|
7007
7005
|
|
|
7008
7006
|
var Wrapper$5 = newStyled.div(templateObject_1$1i || (templateObject_1$1i = __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'); });
|
|
7009
|
-
var Col$1 = newStyled.div(templateObject_2$
|
|
7010
|
-
var Row$2 = newStyled.div(templateObject_3$
|
|
7007
|
+
var Col$1 = newStyled.div(templateObject_2$Z || (templateObject_2$Z = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
7008
|
+
var Row$2 = newStyled.div(templateObject_3$L || (templateObject_3$L = __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) {
|
|
7011
7009
|
return props.rightToLeft &&
|
|
7012
7010
|
"\n flex-direction: row-reverse;\n justify-content: space-between;\n ";
|
|
7013
7011
|
});
|
|
7014
|
-
var H5 = newStyled.h5(templateObject_4$
|
|
7012
|
+
var H5 = newStyled.h5(templateObject_4$A || (templateObject_4$A = __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; });
|
|
7015
7013
|
var H3$1 = newStyled.h3(templateObject_5$q || (templateObject_5$q = __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; });
|
|
7016
7014
|
var FreeShipping = newStyled.span(templateObject_6$n || (templateObject_6$n = __makeTemplateObject(["\n font-weight: 600;\n color: ", ";\n"], ["\n font-weight: 600;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
7017
7015
|
var CrossSellCheckbox = function (_a) {
|
|
@@ -7019,7 +7017,7 @@ var CrossSellCheckbox = function (_a) {
|
|
|
7019
7017
|
var theme = useTheme();
|
|
7020
7018
|
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));
|
|
7021
7019
|
};
|
|
7022
|
-
var templateObject_1$1i, templateObject_2$
|
|
7020
|
+
var templateObject_1$1i, templateObject_2$Z, templateObject_3$L, templateObject_4$A, templateObject_5$q, templateObject_6$n;
|
|
7023
7021
|
|
|
7024
7022
|
var index$1 = /*#__PURE__*/Object.freeze({
|
|
7025
7023
|
__proto__: null,
|
|
@@ -7069,11 +7067,11 @@ var StyledBaseButton = newStyled(BaseButton)(templateObject_1$1h || (templateObj
|
|
|
7069
7067
|
var theme = _a.theme;
|
|
7070
7068
|
return theme.colors.text.disabled;
|
|
7071
7069
|
});
|
|
7072
|
-
var StyledIcon = newStyled(Icon$1)(templateObject_2$
|
|
7070
|
+
var StyledIcon = newStyled(Icon$1)(templateObject_2$Y || (templateObject_2$Y = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
7073
7071
|
var marginLeft = _a.marginLeft, marginRight = _a.marginRight;
|
|
7074
7072
|
return "\n margin-left: ".concat(marginLeft !== null && marginLeft !== void 0 ? marginLeft : '10px', ";\n margin-right: ").concat(marginRight !== null && marginRight !== void 0 ? marginRight : '10px', ";\n ");
|
|
7075
7073
|
});
|
|
7076
|
-
var templateObject_1$1h, templateObject_2$
|
|
7074
|
+
var templateObject_1$1h, templateObject_2$Y;
|
|
7077
7075
|
|
|
7078
7076
|
var BaseCTA = function (_a) {
|
|
7079
7077
|
var _b, _c, _d;
|
|
@@ -7161,25 +7159,25 @@ var ButtonSecondaryOutline = function (props) {
|
|
|
7161
7159
|
};
|
|
7162
7160
|
|
|
7163
7161
|
var Container$T = newStyled.div(templateObject_1$1g || (templateObject_1$1g = __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; });
|
|
7164
|
-
var IconContainer$4 = newStyled.div(templateObject_2$
|
|
7165
|
-
var Text$3 = newStyled.p(templateObject_3$
|
|
7166
|
-
var Details = newStyled.span(templateObject_4$
|
|
7162
|
+
var IconContainer$4 = newStyled.div(templateObject_2$X || (templateObject_2$X = __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"])));
|
|
7163
|
+
var Text$3 = newStyled.p(templateObject_3$K || (templateObject_3$K = __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; });
|
|
7164
|
+
var Details = newStyled.span(templateObject_4$z || (templateObject_4$z = __makeTemplateObject(["\n color: ", ";\n font-weight: 700;\n"], ["\n color: ", ";\n font-weight: 700;\n"])), function (props) { return props.color; });
|
|
7167
7165
|
var Note = function (_a) {
|
|
7168
7166
|
var accentColor = _a.accentColor, color = _a.color, backgroundColor = _a.backgroundColor, importantNoteText = _a.importantNoteText, text = _a.text;
|
|
7169
7167
|
var theme = useTheme();
|
|
7170
7168
|
return (jsxRuntime.jsxs(Container$T, __assign$1({ color: backgroundColor ? backgroundColor : theme.component.deliveryDetails.note.backgroundColor, "data-testid": "Container" }, { children: [jsxRuntime.jsx(IconContainer$4, { children: jsxRuntime.jsx(Icon.Actions.Warning, { fill: accentColor ? accentColor : theme.component.deliveryDetails.note.accentColor }, void 0) }, void 0), jsxRuntime.jsx("div", { children: jsxRuntime.jsxs(Text$3, __assign$1({ color: color ? color : theme.component.deliveryDetails.note.color }, { children: [importantNoteText && (jsxRuntime.jsxs(Details, __assign$1({ color: accentColor ? accentColor : theme.component.deliveryDetails.note.accentColor }, { children: [importantNoteText, ":"] }), void 0)), ' ', text] }), void 0) }, void 0)] }), void 0));
|
|
7171
7169
|
};
|
|
7172
|
-
var templateObject_1$1g, templateObject_2$
|
|
7170
|
+
var templateObject_1$1g, templateObject_2$X, templateObject_3$K, templateObject_4$z;
|
|
7173
7171
|
|
|
7174
7172
|
var Title$5 = newStyled.h1(templateObject_1$1f || (templateObject_1$1f = __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) {
|
|
7175
7173
|
var theme = _a.theme;
|
|
7176
7174
|
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 ");
|
|
7177
7175
|
});
|
|
7178
|
-
var Line = newStyled.div(templateObject_2$
|
|
7179
|
-
var Row$1 = newStyled.div(templateObject_3$
|
|
7176
|
+
var Line = newStyled.div(templateObject_2$W || (templateObject_2$W = __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; });
|
|
7177
|
+
var Row$1 = newStyled.div(templateObject_3$J || (templateObject_3$J = __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({
|
|
7180
7178
|
flexDirection: ['column', 'row'],
|
|
7181
7179
|
}));
|
|
7182
|
-
var Col = newStyled.div(templateObject_4$
|
|
7180
|
+
var Col = newStyled.div(templateObject_4$y || (templateObject_4$y = __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({
|
|
7183
7181
|
margin: ['0', '0 1.25rem'],
|
|
7184
7182
|
marginBottom: ['1.875rem', '0'],
|
|
7185
7183
|
alignItems: ['center', 'flex-start'],
|
|
@@ -7214,7 +7212,7 @@ var DeliveryDetails = function (_a) {
|
|
|
7214
7212
|
var theme = useTheme();
|
|
7215
7213
|
return (jsxRuntime.jsxs("div", __assign$1({ "data-testid": "DeliveryDetails" }, { children: [jsxRuntime.jsx(Title$5, __assign$1({ color: theme.colors.shades[700].color }, { children: deliveryDetailsText }), void 0), jsxRuntime.jsx(Line, { backgroundColor: theme.colors.shades['200'].color }, void 0), note && jsxRuntime.jsx(Note, __assign$1({}, note), void 0), jsxRuntime.jsxs(Row$1, __assign$1({ "data-testid": "DD-row", theme: theme }, { children: [jsxRuntime.jsxs(Col, __assign$1({ theme: theme }, { children: [jsxRuntime.jsxs(SectionTitle, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(IconContainer$3, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Icon.PDP.Clock, { width: 1.5 }, void 0) }), void 0), arrivingBy.title] }), void 0), jsxRuntime.jsx(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: arrivingBy.details }), void 0)] }), void 0), jsxRuntime.jsxs(Col, __assign$1({ theme: theme }, { children: [jsxRuntime.jsxs(SectionTitle, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(IconContainer$3, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Icon.Navigation.MapMarker, { width: 1.5 }, void 0) }), void 0), shippingTo.title] }), void 0), jsxRuntime.jsx(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: shippingTo.details }), void 0)] }), void 0), jsxRuntime.jsxs(Col, __assign$1({ theme: theme }, { children: [jsxRuntime.jsxs(SectionTitle, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(IconContainer$3, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Icon.Messaging.Messenger, { width: 1.5 }, void 0) }), void 0), instantOrderUpdate.title] }), void 0), jsxRuntime.jsx(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: instantOrderUpdate.details }), void 0), instantOrderUpdate.keepMeUpdated && (jsxRuntime.jsxs(KeepMeUpdated, __assign$1({ onClick: instantOrderUpdate.keepMeUpdated.onClick, borderColor: theme.colors.shades['150'].color }, { children: [jsxRuntime.jsx(Icon.Messaging.Messenger, { width: 1, height: 1, fill: "#0078FF" }, void 0), instantOrderUpdate.keepMeUpdated.title] }), void 0))] }), void 0)] }), void 0)] }), void 0));
|
|
7216
7214
|
};
|
|
7217
|
-
var templateObject_1$1f, templateObject_2$
|
|
7215
|
+
var templateObject_1$1f, templateObject_2$W, templateObject_3$J, templateObject_4$y, templateObject_5$p, templateObject_6$m, templateObject_7$g, templateObject_8$d;
|
|
7218
7216
|
|
|
7219
7217
|
var Backdrop = newStyled.div(templateObject_1$1e || (templateObject_1$1e = __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) {
|
|
7220
7218
|
var top = _a.top;
|
|
@@ -7223,7 +7221,7 @@ var Backdrop = newStyled.div(templateObject_1$1e || (templateObject_1$1e = __mak
|
|
|
7223
7221
|
var isOpen = _a.isOpen, backgroundColor = _a.backgroundColor;
|
|
7224
7222
|
return isOpen ? "background-color: ".concat(backgroundColor, ";") : 'transparent';
|
|
7225
7223
|
});
|
|
7226
|
-
var Sidebar = newStyled.div(templateObject_2$
|
|
7224
|
+
var Sidebar = newStyled.div(templateObject_2$V || (templateObject_2$V = __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) {
|
|
7227
7225
|
var height = _a.height;
|
|
7228
7226
|
return height;
|
|
7229
7227
|
}, function (_a) {
|
|
@@ -7270,7 +7268,7 @@ var Drawer = function (_a) {
|
|
|
7270
7268
|
}, [isOpen, onClose, onOpen]);
|
|
7271
7269
|
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;
|
|
7272
7270
|
};
|
|
7273
|
-
var templateObject_1$1e, templateObject_2$
|
|
7271
|
+
var templateObject_1$1e, templateObject_2$V;
|
|
7274
7272
|
|
|
7275
7273
|
var TooltipArrow = function (_a) {
|
|
7276
7274
|
var height = _a.height, width = _a.width, fill = _a.fill, stroke = _a.stroke;
|
|
@@ -7278,12 +7276,12 @@ var TooltipArrow = function (_a) {
|
|
|
7278
7276
|
};
|
|
7279
7277
|
|
|
7280
7278
|
var List = newStyled.ul(templateObject_1$1d || (templateObject_1$1d = __makeTemplateObject(["\n display: flex;\n margin: 0;\n padding: 0;\n"], ["\n display: flex;\n margin: 0;\n padding: 0;\n"])));
|
|
7281
|
-
var Item$2 = newStyled.li(templateObject_2$
|
|
7282
|
-
var DropdownWrapper = newStyled.div(templateObject_3$
|
|
7283
|
-
var ArrowContainer$1 = newStyled.div(templateObject_4$
|
|
7279
|
+
var Item$2 = newStyled.li(templateObject_2$U || (templateObject_2$U = __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"])));
|
|
7280
|
+
var DropdownWrapper = newStyled.div(templateObject_3$I || (templateObject_3$I = __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"])));
|
|
7281
|
+
var ArrowContainer$1 = newStyled.div(templateObject_4$x || (templateObject_4$x = __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"])));
|
|
7284
7282
|
var StyledDropdown = newStyled.ul(templateObject_5$o || (templateObject_5$o = __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; });
|
|
7285
7283
|
var DropdownItem = newStyled.li(templateObject_6$l || (templateObject_6$l = __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; });
|
|
7286
|
-
var templateObject_1$1d, templateObject_2$
|
|
7284
|
+
var templateObject_1$1d, templateObject_2$U, templateObject_3$I, templateObject_4$x, templateObject_5$o, templateObject_6$l;
|
|
7287
7285
|
|
|
7288
7286
|
var DropdownListIcons = function (_a) {
|
|
7289
7287
|
var items = _a.items;
|
|
@@ -7297,12 +7295,12 @@ var Dropdown = function (_a) {
|
|
|
7297
7295
|
};
|
|
7298
7296
|
|
|
7299
7297
|
var DropdownContainer = newStyled.div(templateObject_1$1c || (templateObject_1$1c = __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"])));
|
|
7300
|
-
var DropdownLabel = newStyled.div(templateObject_2$
|
|
7301
|
-
var SizeLabel = newStyled.span(templateObject_3$
|
|
7302
|
-
var DetailLabel = newStyled.span(templateObject_4$
|
|
7298
|
+
var DropdownLabel = newStyled.div(templateObject_2$T || (templateObject_2$T = __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"])));
|
|
7299
|
+
var SizeLabel = newStyled.span(templateObject_3$H || (templateObject_3$H = __makeTemplateObject(["\n margin-right: 8px;\n"], ["\n margin-right: 8px;\n"])));
|
|
7300
|
+
var DetailLabel = newStyled.span(templateObject_4$w || (templateObject_4$w = __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"])));
|
|
7303
7301
|
var DropdownOptions = newStyled.div(templateObject_5$n || (templateObject_5$n = __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"])));
|
|
7304
7302
|
var DropdownOption = newStyled.div(templateObject_6$k || (templateObject_6$k = __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"])));
|
|
7305
|
-
var templateObject_1$1c, templateObject_2$
|
|
7303
|
+
var templateObject_1$1c, templateObject_2$T, templateObject_3$H, templateObject_4$w, templateObject_5$n, templateObject_6$k;
|
|
7306
7304
|
|
|
7307
7305
|
var SizeDropdown = function (_a) {
|
|
7308
7306
|
var options = _a.options, defaultLabel = _a.defaultLabel, onOptionSelect = _a.onOptionSelect;
|
|
@@ -7326,9 +7324,9 @@ var SizeDropdown = function (_a) {
|
|
|
7326
7324
|
};
|
|
7327
7325
|
|
|
7328
7326
|
var DialogDropdownWrapper = newStyled.div(templateObject_1$1b || (templateObject_1$1b = __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; });
|
|
7329
|
-
var DialogDropdownListContainer = newStyled.ul(templateObject_2$
|
|
7330
|
-
var DialogDropdownListItem = newStyled.li(templateObject_3$
|
|
7331
|
-
var DialogDropdownLink = newStyled.a(templateObject_4$
|
|
7327
|
+
var DialogDropdownListContainer = newStyled.ul(templateObject_2$S || (templateObject_2$S = __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; });
|
|
7328
|
+
var DialogDropdownListItem = newStyled.li(templateObject_3$G || (templateObject_3$G = __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"])));
|
|
7329
|
+
var DialogDropdownLink = newStyled.a(templateObject_4$v || (templateObject_4$v = __makeTemplateObject(["\n display: inline-block;\n text-decoration: none;\n width: 100%;\n background-color: transparent;\n border: 0;\n margin: 0;\n padding: 12px;\n cursor: pointer;\n transition: all 0.2s;\n color: var(--colors-shades-700-color);\n font-size: 1.125rem;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n vertical-align: inherit;\n"], ["\n display: inline-block;\n text-decoration: none;\n width: 100%;\n background-color: transparent;\n border: 0;\n margin: 0;\n padding: 12px;\n cursor: pointer;\n transition: all 0.2s;\n color: var(--colors-shades-700-color);\n font-size: 1.125rem;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n vertical-align: inherit;\n"])));
|
|
7332
7330
|
var DropdownDialog = function (_a) {
|
|
7333
7331
|
var options = _a.options, _b = _a.position, top = _b.top, right = _b.right, style = _a.style, className = _a.className;
|
|
7334
7332
|
var theme = useTheme$1();
|
|
@@ -7337,7 +7335,7 @@ var DropdownDialog = function (_a) {
|
|
|
7337
7335
|
return (jsxRuntime.jsx(DialogDropdownListItem, { children: jsxRuntime.jsx(DialogDropdownLink, __assign$1({ href: value }, { children: label }), void 0) }, idx));
|
|
7338
7336
|
}) }), void 0) }), void 0));
|
|
7339
7337
|
};
|
|
7340
|
-
var templateObject_1$1b, templateObject_2$
|
|
7338
|
+
var templateObject_1$1b, templateObject_2$S, templateObject_3$G, templateObject_4$v;
|
|
7341
7339
|
|
|
7342
7340
|
function FilteringDropdown(_a) {
|
|
7343
7341
|
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;
|
|
@@ -7371,28 +7369,28 @@ function FilteringDropdown(_a) {
|
|
|
7371
7369
|
}
|
|
7372
7370
|
|
|
7373
7371
|
var Title$4 = newStyled.div(templateObject_1$1a || (templateObject_1$1a = __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; });
|
|
7374
|
-
var H3 = newStyled.h3(templateObject_2$
|
|
7375
|
-
var ArrowContainer = newStyled.div(templateObject_3$
|
|
7376
|
-
var Container$S = newStyled.div(templateObject_4$
|
|
7372
|
+
var H3 = newStyled.h3(templateObject_2$R || (templateObject_2$R = __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; });
|
|
7373
|
+
var ArrowContainer = newStyled.div(templateObject_3$F || (templateObject_3$F = __makeTemplateObject(["\n width: 1rem;\n height: 1rem;\n"], ["\n width: 1rem;\n height: 1rem;\n"])));
|
|
7374
|
+
var Container$S = newStyled.div(templateObject_4$u || (templateObject_4$u = __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'); });
|
|
7377
7375
|
var Accordion = function (_a) {
|
|
7378
7376
|
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;
|
|
7379
7377
|
var theme = useTheme();
|
|
7380
7378
|
var _d = React__default["default"].useState(isOpenByDefault), isOpen = _d[0], setIsOpen = _d[1];
|
|
7381
7379
|
return (jsxRuntime.jsxs(Container$S, __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));
|
|
7382
7380
|
};
|
|
7383
|
-
var templateObject_1$1a, templateObject_2$
|
|
7381
|
+
var templateObject_1$1a, templateObject_2$R, templateObject_3$F, templateObject_4$u;
|
|
7384
7382
|
|
|
7385
7383
|
var SectionContent = newStyled.div(templateObject_1$19 || (templateObject_1$19 = __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; });
|
|
7386
|
-
var Header$1 = newStyled.div(templateObject_2$
|
|
7387
|
-
var MobileHeader = newStyled.div(templateObject_3$
|
|
7388
|
-
var MobileIconsContainer = newStyled.div(templateObject_4$
|
|
7384
|
+
var Header$1 = newStyled.div(templateObject_2$Q || (templateObject_2$Q = __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"])));
|
|
7385
|
+
var MobileHeader = newStyled.div(templateObject_3$E || (templateObject_3$E = __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"])));
|
|
7386
|
+
var MobileIconsContainer = newStyled.div(templateObject_4$t || (templateObject_4$t = __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"])));
|
|
7389
7387
|
var H4 = newStyled.h4(templateObject_5$m || (templateObject_5$m = __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; });
|
|
7390
7388
|
var FilterLink = newStyled.a(templateObject_6$j || (templateObject_6$j = __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; });
|
|
7391
7389
|
var OptionContainer = newStyled.div(templateObject_7$f || (templateObject_7$f = __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'); });
|
|
7392
7390
|
var ClearAll = newStyled.span(templateObject_8$c || (templateObject_8$c = __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; });
|
|
7393
7391
|
var MobileFooter = newStyled.div(templateObject_9$7 || (templateObject_9$7 = __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"])));
|
|
7394
7392
|
var MobileClearContainer = newStyled.div(templateObject_10$6 || (templateObject_10$6 = __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"])));
|
|
7395
|
-
var templateObject_1$19, templateObject_2$
|
|
7393
|
+
var templateObject_1$19, templateObject_2$Q, templateObject_3$E, templateObject_4$t, templateObject_5$m, templateObject_6$j, templateObject_7$f, templateObject_8$c, templateObject_9$7, templateObject_10$6;
|
|
7396
7394
|
|
|
7397
7395
|
var getStylesBySize$a = function (size, theme) {
|
|
7398
7396
|
switch (size) {
|
|
@@ -7458,8 +7456,8 @@ var SelectorSecondary = function (_a) {
|
|
|
7458
7456
|
};
|
|
7459
7457
|
|
|
7460
7458
|
var UL = newStyled.ul(templateObject_1$18 || (templateObject_1$18 = __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"])));
|
|
7461
|
-
var LI = newStyled.li(templateObject_2$
|
|
7462
|
-
var CloseIconContainer = newStyled.div(templateObject_3$
|
|
7459
|
+
var LI = newStyled.li(templateObject_2$P || (templateObject_2$P = __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; });
|
|
7460
|
+
var CloseIconContainer = newStyled.div(templateObject_3$D || (templateObject_3$D = __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"])));
|
|
7463
7461
|
var Tags = function (_a) {
|
|
7464
7462
|
var _b = _a.color, color = _b === void 0 ? '#fff6ef' : _b, items = _a.items, onCloseClick = _a.onCloseClick;
|
|
7465
7463
|
var theme = useTheme();
|
|
@@ -7467,7 +7465,7 @@ var Tags = function (_a) {
|
|
|
7467
7465
|
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));
|
|
7468
7466
|
}) }), void 0));
|
|
7469
7467
|
};
|
|
7470
|
-
var templateObject_1$18, templateObject_2$
|
|
7468
|
+
var templateObject_1$18, templateObject_2$P, templateObject_3$D;
|
|
7471
7469
|
|
|
7472
7470
|
var Filters = function (_a) {
|
|
7473
7471
|
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;
|
|
@@ -7604,7 +7602,7 @@ var FilterCheckboxColor = function (_a) {
|
|
|
7604
7602
|
};
|
|
7605
7603
|
|
|
7606
7604
|
var Wrapper$4 = newStyled.div(templateObject_1$17 || (templateObject_1$17 = __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"])));
|
|
7607
|
-
var Container$R = newStyled.div(templateObject_2$
|
|
7605
|
+
var Container$R = newStyled.div(templateObject_2$O || (templateObject_2$O = __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"])));
|
|
7608
7606
|
var FitGuarantee = function (_a) {
|
|
7609
7607
|
var _b;
|
|
7610
7608
|
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;
|
|
@@ -7622,10 +7620,10 @@ var FitGuarantee = function (_a) {
|
|
|
7622
7620
|
fontWeight: theme.component.text.fitGuarantee.titleFontWeight,
|
|
7623
7621
|
} }, { 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));
|
|
7624
7622
|
};
|
|
7625
|
-
var templateObject_1$17, templateObject_2$
|
|
7623
|
+
var templateObject_1$17, templateObject_2$O;
|
|
7626
7624
|
|
|
7627
7625
|
var Container$Q = newStyled.div(templateObject_1$16 || (templateObject_1$16 = __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"])));
|
|
7628
|
-
var P$2 = newStyled.p(templateObject_2$
|
|
7626
|
+
var P$2 = newStyled.p(templateObject_2$N || (templateObject_2$N = __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; });
|
|
7629
7627
|
var textButtonStyles$1 = function (theme) { return ({
|
|
7630
7628
|
border: 'none',
|
|
7631
7629
|
background: 'transparent',
|
|
@@ -7640,7 +7638,7 @@ var FitPredictor = function (_a) {
|
|
|
7640
7638
|
var theme = useTheme();
|
|
7641
7639
|
return (jsxs(Container$Q, __assign$1({ theme: theme }, { children: [jsx(Container$Q, { 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));
|
|
7642
7640
|
};
|
|
7643
|
-
var templateObject_1$16, templateObject_2$
|
|
7641
|
+
var templateObject_1$16, templateObject_2$N;
|
|
7644
7642
|
|
|
7645
7643
|
var Button$7 = newStyled.button(function () { return ({
|
|
7646
7644
|
background: 'transparent',
|
|
@@ -11950,7 +11948,7 @@ var SliderNavigation = function (_a) {
|
|
|
11950
11948
|
} }, { 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));
|
|
11951
11949
|
};
|
|
11952
11950
|
|
|
11953
|
-
var Image$1 = newStyled.img(templateObject_1$14 || (templateObject_1$14 = __makeTemplateObject(["\n ", "\n\n width: ", ";\n height: ", ";\n box-sizing: border-box;\n cursor: pointer;\n border: ", ";\n"], ["\n ", "\n\n width: ", ";\n height: ", ";\n box-sizing: border-box;\n cursor: pointer;\n border: ", ";\n"])), function (_a) {
|
|
11951
|
+
var Image$1 = newStyled.img(templateObject_1$14 || (templateObject_1$14 = __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) {
|
|
11954
11952
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
11955
11953
|
return borderRadiusVariant &&
|
|
11956
11954
|
"\n border-radius: 20px;\n ";
|
|
@@ -11958,8 +11956,10 @@ var Image$1 = newStyled.img(templateObject_1$14 || (templateObject_1$14 = __make
|
|
|
11958
11956
|
var theme = _a.theme;
|
|
11959
11957
|
return theme.component.gallery.thumbnail.desktop.width;
|
|
11960
11958
|
}, function (_a) {
|
|
11961
|
-
var theme = _a.theme;
|
|
11962
|
-
return
|
|
11959
|
+
var isRatioSquare = _a.isRatioSquare, theme = _a.theme;
|
|
11960
|
+
return isRatioSquare
|
|
11961
|
+
? theme.component.gallery.thumbnail.desktop.width
|
|
11962
|
+
: theme.component.gallery.thumbnail.desktop.height;
|
|
11963
11963
|
}, function (_a) {
|
|
11964
11964
|
var selected = _a.selected, theme = _a.theme, previewImgBorderColor = _a.previewImgBorderColor;
|
|
11965
11965
|
return selected
|
|
@@ -11969,14 +11969,14 @@ var Image$1 = newStyled.img(templateObject_1$14 || (templateObject_1$14 = __make
|
|
|
11969
11969
|
var templateObject_1$14;
|
|
11970
11970
|
|
|
11971
11971
|
var ImageSmallPreview = function (_a) {
|
|
11972
|
-
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;
|
|
11972
|
+
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;
|
|
11973
11973
|
var theme = useTheme();
|
|
11974
|
-
return (jsxRuntime.jsx(Image$1, { className: className, src: imageUrl, alt: alt, selected: selected, theme: theme, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor, loading: "eager", width: theme.component.gallery.thumbnail.desktop.width, height: theme.component.gallery.thumbnail.desktop.height }, void 0));
|
|
11974
|
+
return (jsxRuntime.jsx(Image$1, { className: className, src: imageUrl, alt: alt, selected: selected, theme: theme, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor, loading: "eager", width: theme.component.gallery.thumbnail.desktop.width, height: theme.component.gallery.thumbnail.desktop.height, isRatioSquare: isRatioSquare }, void 0));
|
|
11975
11975
|
};
|
|
11976
11976
|
|
|
11977
11977
|
var horizontalStyles = css(templateObject_1$13 || (templateObject_1$13 = __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"])));
|
|
11978
|
-
var verticalStyles = css(templateObject_2$
|
|
11979
|
-
var Container$P = newStyled.div(templateObject_3$
|
|
11978
|
+
var verticalStyles = css(templateObject_2$M || (templateObject_2$M = __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"])));
|
|
11979
|
+
var Container$P = newStyled.div(templateObject_3$C || (templateObject_3$C = __makeTemplateObject(["\n display: grid;\n max-height: 45rem;\n height: min-content;\n align-items: flex-start;\n ", "\n\n ", "\n"], ["\n display: grid;\n max-height: 45rem;\n height: min-content;\n align-items: flex-start;\n ", "\n\n ", "\n"])), function (_a) {
|
|
11980
11980
|
var position = _a.position;
|
|
11981
11981
|
return (position == 'horizontal' ? horizontalStyles : verticalStyles);
|
|
11982
11982
|
}, function (_a) {
|
|
@@ -11984,15 +11984,15 @@ var Container$P = newStyled.div(templateObject_3$B || (templateObject_3$B = __ma
|
|
|
11984
11984
|
return hasOverflowArrows &&
|
|
11985
11985
|
"\n scroll-behavior: smooth;\n &::-webkit-scrollbar {\n visibility: hidden;\n }\n ";
|
|
11986
11986
|
});
|
|
11987
|
-
var Button$6 = newStyled.button(templateObject_4$
|
|
11987
|
+
var Button$6 = newStyled.button(templateObject_4$s || (templateObject_4$s = __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"])));
|
|
11988
11988
|
var ArrowsContainer = newStyled.div(templateObject_5$l || (templateObject_5$l = __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"])));
|
|
11989
11989
|
var ArrowBaseStyles = newStyled.div(templateObject_6$i || (templateObject_6$i = __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"])));
|
|
11990
11990
|
var ArrowPrev = newStyled(ArrowBaseStyles)(templateObject_7$e || (templateObject_7$e = __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"])));
|
|
11991
11991
|
var ArrowNext = newStyled(ArrowBaseStyles)(templateObject_8$b || (templateObject_8$b = __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"])));
|
|
11992
|
-
var templateObject_1$13, templateObject_2$
|
|
11992
|
+
var templateObject_1$13, templateObject_2$M, templateObject_3$C, templateObject_4$s, templateObject_5$l, templateObject_6$i, templateObject_7$e, templateObject_8$b;
|
|
11993
11993
|
|
|
11994
11994
|
var ImagePreviewList = function (_a) {
|
|
11995
|
-
var images = _a.images, selectedImage = _a.selectedImage, onClick = _a.onClick, dataTestId = _a.dataTestId, position = _a.position, borderRadiusVariant = _a.borderRadiusVariant, previewImgBorderColor = _a.previewImgBorderColor, hasOverflowArrows = _a.hasOverflowArrows;
|
|
11995
|
+
var images = _a.images, selectedImage = _a.selectedImage, onClick = _a.onClick, dataTestId = _a.dataTestId, position = _a.position, borderRadiusVariant = _a.borderRadiusVariant, previewImgBorderColor = _a.previewImgBorderColor, hasOverflowArrows = _a.hasOverflowArrows, isRatioSquare = _a.isRatioSquare;
|
|
11996
11996
|
var handleScrollVerticalPrev = function () {
|
|
11997
11997
|
var element = document.querySelector(".imageListContainer");
|
|
11998
11998
|
element.scrollBy(0, -200);
|
|
@@ -12005,7 +12005,7 @@ var ImagePreviewList = function (_a) {
|
|
|
12005
12005
|
arrowWidth: 0.75,
|
|
12006
12006
|
arrowHeight: 1.25,
|
|
12007
12007
|
arrowPadding: 1.625,
|
|
12008
|
-
}, adaptiveHeight: true, dots: false, slidesToShow: 4 }, { children: images.map(function (item, index) { return (jsxRuntime.jsx(Button$6, __assign$1({ onClick: function () { return onClick(index); } }, { children: jsxRuntime.jsx(ImageSmallPreview, { imageUrl: (item === null || item === void 0 ? void 0 : item.alt.includes('-video')) ? item === null || item === void 0 ? void 0 : item.thumbnailUrl : item === null || item === void 0 ? void 0 : item.url, alt: item.alt, selected: item.key === selectedImage.key, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0) }), item.key)); }) }), void 0) }), void 0)) : (images.map(function (item, index) { return (jsxRuntime.jsx(Button$6, __assign$1({ onClick: function () { return onClick(index); } }, { children: jsxRuntime.jsx(ImageSmallPreview, { imageUrl: (item === null || item === void 0 ? void 0 : item.alt.includes('-video')) ? item === null || item === void 0 ? void 0 : item.thumbnailUrl : item === null || item === void 0 ? void 0 : item.url, alt: item.alt, selected: item.key === selectedImage.key, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0) }), item.key)); })) }), 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));
|
|
12008
|
+
}, adaptiveHeight: true, dots: false, slidesToShow: 4 }, { children: images.map(function (item, index) { return (jsxRuntime.jsx(Button$6, __assign$1({ onClick: function () { return onClick(index); } }, { children: jsxRuntime.jsx(ImageSmallPreview, { imageUrl: (item === null || item === void 0 ? void 0 : item.alt.includes('-video')) ? item === null || item === void 0 ? void 0 : item.thumbnailUrl : item === null || item === void 0 ? void 0 : item.url, alt: item.alt, selected: item.key === selectedImage.key, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor, isRatioSquare: isRatioSquare }, void 0) }), item.key)); }) }), void 0) }), void 0)) : (images.map(function (item, index) { return (jsxRuntime.jsx(Button$6, __assign$1({ onClick: function () { return onClick(index); } }, { children: jsxRuntime.jsx(ImageSmallPreview, { imageUrl: (item === null || item === void 0 ? void 0 : item.alt.includes('-video')) ? item === null || item === void 0 ? void 0 : item.thumbnailUrl : item === null || item === void 0 ? void 0 : item.url, alt: item.alt, selected: item.key === selectedImage.key, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor, isRatioSquare: isRatioSquare }, void 0) }), item.key)); })) }), 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));
|
|
12009
12009
|
};
|
|
12010
12010
|
|
|
12011
12011
|
var propTypes = {exports: {}};
|
|
@@ -13600,8 +13600,8 @@ InnerImageZoom.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
13600
13600
|
} : {};
|
|
13601
13601
|
|
|
13602
13602
|
var ProgressContainer = newStyled.div(templateObject_1$12 || (templateObject_1$12 = __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); });
|
|
13603
|
-
var ProgressFiller = newStyled.div(templateObject_2$
|
|
13604
|
-
var templateObject_1$12, templateObject_2$
|
|
13603
|
+
var ProgressFiller = newStyled.div(templateObject_2$L || (templateObject_2$L = __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; });
|
|
13604
|
+
var templateObject_1$12, templateObject_2$L;
|
|
13605
13605
|
|
|
13606
13606
|
var ProgressBar$1 = function (_a) {
|
|
13607
13607
|
var progress = _a.progress, hide = _a.hide;
|
|
@@ -13609,11 +13609,11 @@ var ProgressBar$1 = function (_a) {
|
|
|
13609
13609
|
};
|
|
13610
13610
|
|
|
13611
13611
|
var Container$O = newStyled.div(templateObject_1$11 || (templateObject_1$11 = __makeTemplateObject(["\n max-width: 530px;\n position: relative;\n"], ["\n max-width: 530px;\n position: relative;\n"])));
|
|
13612
|
-
var HTMLVideo = newStyled.video(templateObject_2$
|
|
13613
|
-
var PlayIcon = newStyled(Icon.PDP.PlayVideo)(templateObject_3$
|
|
13614
|
-
var PlayContainer = newStyled.div(templateObject_4$
|
|
13612
|
+
var HTMLVideo = newStyled.video(templateObject_2$K || (templateObject_2$K = __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; });
|
|
13613
|
+
var PlayIcon = newStyled(Icon.PDP.PlayVideo)(templateObject_3$B || (templateObject_3$B = __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"])));
|
|
13614
|
+
var PlayContainer = newStyled.div(templateObject_4$r || (templateObject_4$r = __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"])));
|
|
13615
13615
|
var PauseContainer = newStyled.div(templateObject_5$k || (templateObject_5$k = __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"])));
|
|
13616
|
-
var templateObject_1$11, templateObject_2$
|
|
13616
|
+
var templateObject_1$11, templateObject_2$K, templateObject_3$B, templateObject_4$r, templateObject_5$k;
|
|
13617
13617
|
|
|
13618
13618
|
var Video$1 = function (_a) {
|
|
13619
13619
|
var _b, _c, _d, _e;
|
|
@@ -13659,20 +13659,20 @@ var Container$N = newStyled.div(templateObject_1$10 || (templateObject_1$10 = __
|
|
|
13659
13659
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
13660
13660
|
return borderRadiusVariant && "border-radius: 40px;";
|
|
13661
13661
|
});
|
|
13662
|
-
var TopTagContainer$6 = newStyled.div(templateObject_2$
|
|
13662
|
+
var TopTagContainer$6 = newStyled.div(templateObject_2$J || (templateObject_2$J = __makeTemplateObject(["\n position: absolute;\n left: ", ";\n top: ", ";\n"], ["\n position: absolute;\n left: ", ";\n top: ", ";\n"])), function (_a) {
|
|
13663
13663
|
var borderRadiusVariant = _a.borderRadiusVariant, theme = _a.theme;
|
|
13664
13664
|
return borderRadiusVariant ? '50px' : theme.component.gallery.tagPosition.left;
|
|
13665
13665
|
}, function (_a) {
|
|
13666
13666
|
var borderRadiusVariant = _a.borderRadiusVariant, theme = _a.theme;
|
|
13667
13667
|
return borderRadiusVariant ? '10px' : theme.component.gallery.tagPosition.top;
|
|
13668
13668
|
});
|
|
13669
|
-
var BottomTagContainer$6 = newStyled.div(templateObject_3$
|
|
13669
|
+
var BottomTagContainer$6 = newStyled.div(templateObject_3$A || (templateObject_3$A = __makeTemplateObject(["\n position: absolute;\n bottom: ", ";\n left: 0;\n"], ["\n position: absolute;\n bottom: ", ";\n left: 0;\n"])), function (_a) {
|
|
13670
13670
|
var isCTAHidden = _a.isCTAHidden;
|
|
13671
13671
|
return (isCTAHidden ? '60px' : '120px');
|
|
13672
13672
|
});
|
|
13673
|
-
var TopRightTagContainer$1 = newStyled.div(templateObject_4$
|
|
13673
|
+
var TopRightTagContainer$1 = newStyled.div(templateObject_4$q || (templateObject_4$q = __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"])));
|
|
13674
13674
|
var ButtonSecondaryOutlineWrapper = newStyled(ButtonSecondaryOutline)(templateObject_5$j || (templateObject_5$j = __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"])));
|
|
13675
|
-
var templateObject_1$10, templateObject_2$
|
|
13675
|
+
var templateObject_1$10, templateObject_2$J, templateObject_3$A, templateObject_4$q, templateObject_5$j;
|
|
13676
13676
|
|
|
13677
13677
|
var ImageProductSlide$1 = function (_a) {
|
|
13678
13678
|
var _b;
|
|
@@ -13696,7 +13696,7 @@ var getInitialIndex = function (images, selectedValue) {
|
|
|
13696
13696
|
return 0;
|
|
13697
13697
|
};
|
|
13698
13698
|
var ProductGallery = function (_a) {
|
|
13699
|
-
var images = _a.images, selectedValue = _a.selectedValue, topTag = _a.topTag, topRightTag = _a.topRightTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, previewListDataTestId = _a.previewListDataTestId, thumbnailPosition = _a.thumbnailPosition, _b = _a.borderRadiusVariant, borderRadiusVariant = _b === void 0 ? false : _b, previewImgBorderColor = _a.previewImgBorderColor, ctaText = _a.ctaText, ctaAction = _a.ctaAction, _c = _a.hideCTA, hideCTA = _c === void 0 ? true : _c, _d = _a.hasOverflowArrows, hasOverflowArrows = _d === void 0 ? false : _d, _e = _a.withZoom, withZoom = _e === void 0 ? true : _e, _f = _a.hasToPreserveOrder, hasToPreserveOrder = _f === void 0 ? false : _f;
|
|
13699
|
+
var images = _a.images, selectedValue = _a.selectedValue, topTag = _a.topTag, topRightTag = _a.topRightTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, previewListDataTestId = _a.previewListDataTestId, thumbnailPosition = _a.thumbnailPosition, _b = _a.borderRadiusVariant, borderRadiusVariant = _b === void 0 ? false : _b, previewImgBorderColor = _a.previewImgBorderColor, ctaText = _a.ctaText, ctaAction = _a.ctaAction, _c = _a.hideCTA, hideCTA = _c === void 0 ? true : _c, _d = _a.hasOverflowArrows, hasOverflowArrows = _d === void 0 ? false : _d, _e = _a.withZoom, withZoom = _e === void 0 ? true : _e, _f = _a.hasToPreserveOrder, hasToPreserveOrder = _f === void 0 ? false : _f, isRatioSquare = _a.isRatioSquare;
|
|
13700
13700
|
var _g = React$2.useState(getInitialIndex(images, selectedValue)), activeIndex = _g[0], setActiveIndex = _g[1];
|
|
13701
13701
|
React$2.useEffect(function () {
|
|
13702
13702
|
if (selectedValue && !hasToPreserveOrder) {
|
|
@@ -13712,7 +13712,7 @@ var ProductGallery = function (_a) {
|
|
|
13712
13712
|
setActiveIndex(index);
|
|
13713
13713
|
};
|
|
13714
13714
|
var selectedImage = images[activeIndex];
|
|
13715
|
-
return (jsxRuntime.jsxs(Container$M, { children: [jsxRuntime.jsx(ImagePreviewList, { images: images, selectedImage: selectedImage, dataTestId: previewListDataTestId, onClick: onContentChange, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor, hasOverflowArrows: hasOverflowArrows }, void 0), jsxRuntime.jsx(ImageProductSlide$1, { content: selectedImage, topTag: topTag, topRightTag: topRightTag, bottomTag: bottomTag, testId: productImageDataTestId, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant, ctaText: ctaText, ctaAction: ctaAction, hideCTA: hideCTA, withZoom: withZoom }, void 0)] }, void 0));
|
|
13715
|
+
return (jsxRuntime.jsxs(Container$M, { children: [jsxRuntime.jsx(ImagePreviewList, { images: images, selectedImage: selectedImage, dataTestId: previewListDataTestId, onClick: onContentChange, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor, hasOverflowArrows: hasOverflowArrows, isRatioSquare: isRatioSquare }, void 0), jsxRuntime.jsx(ImageProductSlide$1, { content: selectedImage, topTag: topTag, topRightTag: topRightTag, bottomTag: bottomTag, testId: productImageDataTestId, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant, ctaText: ctaText, ctaAction: ctaAction, hideCTA: hideCTA, withZoom: withZoom }, void 0)] }, void 0));
|
|
13716
13716
|
};
|
|
13717
13717
|
|
|
13718
13718
|
var getStylesBySize$8 = function (size) {
|
|
@@ -13831,8 +13831,8 @@ var IconsWithTitle = function (_a) {
|
|
|
13831
13831
|
};
|
|
13832
13832
|
|
|
13833
13833
|
var Container$J = newStyled.div(templateObject_1$Y || (templateObject_1$Y = __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'); });
|
|
13834
|
-
var ImageContainer$4 = newStyled.div(templateObject_2$
|
|
13835
|
-
var StyledTitle = newStyled.div(templateObject_3$
|
|
13834
|
+
var ImageContainer$4 = newStyled.div(templateObject_2$I || (templateObject_2$I = __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'); });
|
|
13835
|
+
var StyledTitle = newStyled.div(templateObject_3$z || (templateObject_3$z = __makeTemplateObject(["\n display: flex;\n ", "\n"], ["\n display: flex;\n ", "\n"])), function (_a) {
|
|
13836
13836
|
var titlePosition = _a.titlePosition;
|
|
13837
13837
|
return titlePosition == 'center' &&
|
|
13838
13838
|
"\nalign-items:center;\njustify-content:center;\n";
|
|
@@ -13842,13 +13842,13 @@ var ImageCardWithDescription = function (_a) {
|
|
|
13842
13842
|
var isMobile = useWindowDimensions().isMobile;
|
|
13843
13843
|
return (jsxRuntime.jsxs(Container$J, __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));
|
|
13844
13844
|
};
|
|
13845
|
-
var templateObject_1$Y, templateObject_2$
|
|
13845
|
+
var templateObject_1$Y, templateObject_2$I, templateObject_3$z;
|
|
13846
13846
|
|
|
13847
13847
|
var Label$3 = newStyled.span(templateObject_1$X || (templateObject_1$X = __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) {
|
|
13848
13848
|
var color = _a.color;
|
|
13849
13849
|
return color;
|
|
13850
13850
|
});
|
|
13851
|
-
var MandatoryIcon = newStyled.span(templateObject_2$
|
|
13851
|
+
var MandatoryIcon = newStyled.span(templateObject_2$H || (templateObject_2$H = __makeTemplateObject(["\n color: ", ";\n margin-left: 0.25rem;\n"], ["\n color: ", ";\n margin-left: 0.25rem;\n"])), function (_a) {
|
|
13852
13852
|
var color = _a.color;
|
|
13853
13853
|
return color;
|
|
13854
13854
|
});
|
|
@@ -13857,7 +13857,7 @@ var InputLabel = function (_a) {
|
|
|
13857
13857
|
var theme = useTheme();
|
|
13858
13858
|
return (jsxRuntime.jsxs(Label$3, __assign$1({ color: isDisabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, { children: [label, isRequired && jsxRuntime.jsx(MandatoryIcon, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: "*" }), void 0)] }), void 0));
|
|
13859
13859
|
};
|
|
13860
|
-
var templateObject_1$X, templateObject_2$
|
|
13860
|
+
var templateObject_1$X, templateObject_2$H;
|
|
13861
13861
|
|
|
13862
13862
|
var containerByStatus = function (theme, status) {
|
|
13863
13863
|
if (status === exports.InputValidationType.Valid)
|
|
@@ -13870,8 +13870,8 @@ var Container$I = newStyled.div(templateObject_1$W || (templateObject_1$W = __ma
|
|
|
13870
13870
|
var theme = _a.theme, status = _a.status, hasError = _a.hasError;
|
|
13871
13871
|
return hasError ? '' : containerByStatus(theme, status);
|
|
13872
13872
|
});
|
|
13873
|
-
var StyledLabel$2 = newStyled.label(templateObject_2$
|
|
13874
|
-
var StyledInput = newStyled.input(templateObject_3$
|
|
13873
|
+
var StyledLabel$2 = newStyled.label(templateObject_2$G || (templateObject_2$G = __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"])));
|
|
13874
|
+
var StyledInput = newStyled.input(templateObject_3$y || (templateObject_3$y = __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) {
|
|
13875
13875
|
var inlinePlaceholder = _a.inlinePlaceholder, theme = _a.theme;
|
|
13876
13876
|
return theme.component[inlinePlaceholder ? 'inputPlaceholder' : 'input'].padding;
|
|
13877
13877
|
}, function (_a) {
|
|
@@ -13926,7 +13926,7 @@ var StyledInput = newStyled.input(templateObject_3$x || (templateObject_3$x = __
|
|
|
13926
13926
|
return hasValue &&
|
|
13927
13927
|
"& ~ span {\n bottom: 1.625rem;\n font-size: 0.75rem;\n opacity: 1;\n }";
|
|
13928
13928
|
});
|
|
13929
|
-
var InputWrapper = newStyled.div(templateObject_4$
|
|
13929
|
+
var InputWrapper = newStyled.div(templateObject_4$p || (templateObject_4$p = __makeTemplateObject(["\n position: relative;\n display: flex;\n height: ", ";\n"], ["\n position: relative;\n display: flex;\n height: ", ";\n"])), function (_a) {
|
|
13930
13930
|
var size = _a.size, inlinePlaceholder = _a.inlinePlaceholder;
|
|
13931
13931
|
return !inlinePlaceholder ? (size === 'small' ? '36px' : '40px') : '48px';
|
|
13932
13932
|
});
|
|
@@ -13944,7 +13944,7 @@ var AnimatedPlaceholder = newStyled.span(templateObject_5$i || (templateObject_5
|
|
|
13944
13944
|
return theme.component.input.lineHeight;
|
|
13945
13945
|
});
|
|
13946
13946
|
var ClearInput = newStyled.div(templateObject_6$h || (templateObject_6$h = __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"])));
|
|
13947
|
-
var templateObject_1$W, templateObject_2$
|
|
13947
|
+
var templateObject_1$W, templateObject_2$G, templateObject_3$y, templateObject_4$p, templateObject_5$i, templateObject_6$h;
|
|
13948
13948
|
|
|
13949
13949
|
var BaseInput = function (_a) {
|
|
13950
13950
|
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"]);
|
|
@@ -13992,7 +13992,7 @@ var Container$H = newStyled.div(templateObject_1$V || (templateObject_1$V = __ma
|
|
|
13992
13992
|
var theme = _a.theme;
|
|
13993
13993
|
return theme.component.inputCustom.input.borderRadius;
|
|
13994
13994
|
});
|
|
13995
|
-
var ButtonContainer$1 = newStyled.div(templateObject_2$
|
|
13995
|
+
var ButtonContainer$1 = newStyled.div(templateObject_2$F || (templateObject_2$F = __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) {
|
|
13996
13996
|
var theme = _a.theme, defaultRounded = _a.defaultRounded;
|
|
13997
13997
|
return defaultRounded
|
|
13998
13998
|
? theme.component.inputCustom.button.borderRadius
|
|
@@ -14009,19 +14009,19 @@ var Custom = function (_a) {
|
|
|
14009
14009
|
}); }, [variant, onClick, text, rest.disabled]);
|
|
14010
14010
|
return (jsxRuntime.jsx(Container$H, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(BaseInput, __assign$1({}, rest, { children: jsxRuntime.jsx(ButtonContainer$1, __assign$1({ theme: theme, defaultRounded: defaultRounded }, { children: jsxRuntime.jsx(Button$5, __assign$1({}, props), void 0) }), void 0) }), void 0) }), void 0));
|
|
14011
14011
|
};
|
|
14012
|
-
var templateObject_1$V, templateObject_2$
|
|
14012
|
+
var templateObject_1$V, templateObject_2$F;
|
|
14013
14013
|
|
|
14014
14014
|
var SuccessContainer = newStyled.div(templateObject_1$U || (templateObject_1$U = __makeTemplateObject(["\n height: ", ";\n display: flex;\n"], ["\n height: ", ";\n display: flex;\n"])), function (_a) {
|
|
14015
14015
|
var size = _a.size;
|
|
14016
14016
|
return (size === 'small' ? '36px' : '');
|
|
14017
14017
|
});
|
|
14018
|
-
var SuccessMessage = newStyled.div(templateObject_2$
|
|
14019
|
-
var SuccessText = newStyled.span(templateObject_3$
|
|
14018
|
+
var SuccessMessage = newStyled.div(templateObject_2$E || (templateObject_2$E = __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"])));
|
|
14019
|
+
var SuccessText = newStyled.span(templateObject_3$x || (templateObject_3$x = __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"])));
|
|
14020
14020
|
var Success = function (_a) {
|
|
14021
14021
|
var children = _a.children, successText = _a.successText, size = _a.size;
|
|
14022
14022
|
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));
|
|
14023
14023
|
};
|
|
14024
|
-
var templateObject_1$U, templateObject_2$
|
|
14024
|
+
var templateObject_1$U, templateObject_2$E, templateObject_3$x;
|
|
14025
14025
|
|
|
14026
14026
|
var ButtonContainer = newStyled.div(templateObject_1$T || (templateObject_1$T = __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) {
|
|
14027
14027
|
var status = _a.status, type = _a.type, theme = _a.theme;
|
|
@@ -14043,13 +14043,13 @@ var BasePlusButton = function (_a) {
|
|
|
14043
14043
|
var templateObject_1$T;
|
|
14044
14044
|
|
|
14045
14045
|
var Container$G = newStyled.div(templateObject_1$S || (templateObject_1$S = __makeTemplateObject(["\n input {\n padding-right: 2.688rem;\n }\n"], ["\n input {\n padding-right: 2.688rem;\n }\n"])));
|
|
14046
|
-
var IconContainer$2 = newStyled.div(templateObject_2$
|
|
14046
|
+
var IconContainer$2 = newStyled.div(templateObject_2$D || (templateObject_2$D = __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"])));
|
|
14047
14047
|
var BasePlusIcon = function (_a) {
|
|
14048
14048
|
var Icon = _a.Icon, rest = __rest(_a, ["Icon"]);
|
|
14049
14049
|
var theme = useTheme();
|
|
14050
14050
|
return (jsxRuntime.jsx(Container$G, { children: jsxRuntime.jsx(BaseInput, __assign$1({}, rest, { children: jsxRuntime.jsx(IconContainer$2, { children: jsxRuntime.jsx(Icon, { testId: "IconWrapper", fill: theme.colors.shades['250'].color }, void 0) }, void 0) }), void 0) }, void 0));
|
|
14051
14051
|
};
|
|
14052
|
-
var templateObject_1$S, templateObject_2$
|
|
14052
|
+
var templateObject_1$S, templateObject_2$D;
|
|
14053
14053
|
|
|
14054
14054
|
var Input$3 = {
|
|
14055
14055
|
Simple: BaseInput,
|
|
@@ -14103,9 +14103,9 @@ var Container$F = newStyled.div(templateObject_1$R || (templateObject_1$R = __ma
|
|
|
14103
14103
|
return theme.component.slideNavigation.slideDots.selectedDotColor;
|
|
14104
14104
|
});
|
|
14105
14105
|
// max-height: 31.875rem;
|
|
14106
|
-
var TopTagContainer$5 = newStyled.div(templateObject_2$
|
|
14107
|
-
var TopRightTagContainer = newStyled.div(templateObject_3$
|
|
14108
|
-
var BottomTagContainer$5 = newStyled.div(templateObject_4$
|
|
14106
|
+
var TopTagContainer$5 = newStyled.div(templateObject_2$C || (templateObject_2$C = __makeTemplateObject(["\n position: absolute;\n left: ", ";\n top: ", ";\n"], ["\n position: absolute;\n left: ", ";\n top: ", ";\n"])), function (props) { return (props.borderRadiusVariant ? '13px' : '0'); }, function (props) { return (props.borderRadiusVariant ? '11px' : '0'); });
|
|
14107
|
+
var TopRightTagContainer = newStyled.div(templateObject_3$w || (templateObject_3$w = __makeTemplateObject(["\n position: absolute;\n right: 0;\n top: 0;\n"], ["\n position: absolute;\n right: 0;\n top: 0;\n"])));
|
|
14108
|
+
var BottomTagContainer$5 = newStyled.div(templateObject_4$o || (templateObject_4$o = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
14109
14109
|
var NavButtonContainer$2 = newStyled.div(templateObject_5$h || (templateObject_5$h = __makeTemplateObject(["\n height: 40px;\n width: 40px;\n"], ["\n height: 40px;\n width: 40px;\n"])));
|
|
14110
14110
|
var Button$4 = newStyled.button(templateObject_6$g || (templateObject_6$g = __makeTemplateObject(["\n background: transparent;\n border: none;\n padding: 0.188rem 0.625rem;\n z-index: 5;\n height: 40px !important;\n cursor: pointer;\n"], ["\n background: transparent;\n border: none;\n padding: 0.188rem 0.625rem;\n z-index: 5;\n height: 40px !important;\n cursor: pointer;\n"])));
|
|
14111
14111
|
var settings$1 = {
|
|
@@ -14166,7 +14166,7 @@ var ImageProductSlide = function (_a) {
|
|
|
14166
14166
|
return (jsxRuntime.jsx("div", { children: !isVideo ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(InnerImageZoom, { src: source, zoomSrc: source, zoomType: "hover", imgAttributes: { alt: content.alt, width: '100%', height: '510px' }, height: 510, fullscreenOnMobile: true, className: "zoomWrapper" }, void 0), jsxRuntime.jsx(TopTagContainer$5, __assign$1({ borderRadiusVariant: borderRadiusVariant, "data-testid": "topTag" }, { children: topTag }), void 0), jsxRuntime.jsx(BottomTagContainer$5, __assign$1({ "data-testid": "bottomTag" }, { children: bottomTag }), void 0), !!topRightTag && jsxRuntime.jsx(TopRightTagContainer, { children: topRightTag }, void 0)] }, void 0)) : (jsxRuntime.jsx(Video$1, { source: source, thumbnail: content === null || content === void 0 ? void 0 : content.thumbnailUrl }, void 0)) }, content.key));
|
|
14167
14167
|
}) }), void 0) }), void 0)] }, void 0));
|
|
14168
14168
|
};
|
|
14169
|
-
var templateObject_1$R, templateObject_2$
|
|
14169
|
+
var templateObject_1$R, templateObject_2$C, templateObject_3$w, templateObject_4$o, templateObject_5$h, templateObject_6$g;
|
|
14170
14170
|
|
|
14171
14171
|
var Container$E = newStyled.div(templateObject_1$Q || (templateObject_1$Q = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n height: fit-content;\n position: relative;\n max-width: 450px;\n"], ["\n display: flex;\n flex-direction: column;\n height: fit-content;\n position: relative;\n max-width: 450px;\n"])));
|
|
14172
14172
|
var ProductGalleryMobile = function (_a) {
|
|
@@ -14461,8 +14461,8 @@ var SlideDots = function (_a) {
|
|
|
14461
14461
|
var templateObject_1$O;
|
|
14462
14462
|
|
|
14463
14463
|
var NavigationButton = newStyled(ArrowButton)(templateObject_1$N || (templateObject_1$N = __makeTemplateObject(["\n position: absolute;\n height: 100%;\n display: flex;\n align-items: center;\n cursor: pointer;\n"], ["\n position: absolute;\n height: 100%;\n display: flex;\n align-items: center;\n cursor: pointer;\n"])));
|
|
14464
|
-
var RightButton = newStyled(NavigationButton)(templateObject_2$
|
|
14465
|
-
var LeftButton = newStyled(NavigationButton)(templateObject_3$
|
|
14464
|
+
var RightButton = newStyled(NavigationButton)(templateObject_2$B || (templateObject_2$B = __makeTemplateObject(["\n right: 0;\n"], ["\n right: 0;\n"])));
|
|
14465
|
+
var LeftButton = newStyled(NavigationButton)(templateObject_3$v || (templateObject_3$v = __makeTemplateObject(["\n left: 0;\n"], ["\n left: 0;\n"])));
|
|
14466
14466
|
var SlideNavigation = function (_a) {
|
|
14467
14467
|
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, onNavigate = _a.onNavigate, testId = _a.testId;
|
|
14468
14468
|
var theme = useTheme();
|
|
@@ -14474,21 +14474,21 @@ var SlideNavigation = function (_a) {
|
|
|
14474
14474
|
onNavigate(selectedIndex + 1);
|
|
14475
14475
|
} }, void 0)), jsxRuntime.jsx(SlideDots, { quantity: quantity, selectedIndex: selectedIndex, containerDataTestId: testId }, void 0)] }, void 0));
|
|
14476
14476
|
};
|
|
14477
|
-
var templateObject_1$N, templateObject_2$
|
|
14477
|
+
var templateObject_1$N, templateObject_2$B, templateObject_3$v;
|
|
14478
14478
|
|
|
14479
14479
|
var Container$C = newStyled.div(templateObject_1$M || (templateObject_1$M = __makeTemplateObject(["\n ", "\n position: relative;\n max-height: 31.875rem;\n overflow: hidden;\n"], ["\n ", "\n position: relative;\n max-height: 31.875rem;\n overflow: hidden;\n"])), function (_a) {
|
|
14480
14480
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
14481
14481
|
return borderRadiusVariant &&
|
|
14482
14482
|
"\n border-radius: 40px;\n ";
|
|
14483
14483
|
});
|
|
14484
|
-
var TopTagContainer$4 = newStyled.div(templateObject_2$
|
|
14485
|
-
var BottomTagContainer$4 = newStyled.div(templateObject_3$
|
|
14484
|
+
var TopTagContainer$4 = newStyled.div(templateObject_2$A || (templateObject_2$A = __makeTemplateObject(["\n position: absolute;\n left: ", ";\n top: ", ";\n"], ["\n position: absolute;\n left: ", ";\n top: ", ";\n"])), function (props) { return (props.borderRadiusVariant ? '13px' : '0'); }, function (props) { return (props.borderRadiusVariant ? '11px' : '0'); });
|
|
14485
|
+
var BottomTagContainer$4 = newStyled.div(templateObject_3$u || (templateObject_3$u = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
14486
14486
|
var ImageProductSlideV2 = React$2.forwardRef(function ImageProductWithTags(_a, ref) {
|
|
14487
14487
|
var _b, _c;
|
|
14488
14488
|
var image = _a.image, topTag = _a.topTag, bottomTag = _a.bottomTag, testId = _a.testId, borderRadiusVariant = _a.borderRadiusVariant;
|
|
14489
14489
|
return (jsxRuntime.jsxs(Container$C, __assign$1({ "data-testid": testId, ref: ref, borderRadiusVariant: borderRadiusVariant }, { children: [!((_b = image === null || image === void 0 ? void 0 : image.alt) === null || _b === void 0 ? void 0 : _b.includes('-video')) && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(InnerImageZoom, { src: image.url, zoomSrc: image.url, zoomType: "hover", imgAttributes: { alt: image.alt, width: '100%', height: '510px' }, height: 510, fullscreenOnMobile: true, className: "zoomWrapper" }, void 0), jsxRuntime.jsx(TopTagContainer$4, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsxRuntime.jsx(BottomTagContainer$4, { children: bottomTag }, void 0)] }, void 0)), ((_c = image === null || image === void 0 ? void 0 : image.alt) === null || _c === void 0 ? void 0 : _c.includes('-video')) && (jsxRuntime.jsx("iframe", { allowFullScreen: true, title: image.alt, width: "100%", height: 510, src: image === null || image === void 0 ? void 0 : image.url, allow: "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" }, void 0))] }), void 0));
|
|
14490
14490
|
});
|
|
14491
|
-
var templateObject_1$M, templateObject_2$
|
|
14491
|
+
var templateObject_1$M, templateObject_2$A, templateObject_3$u;
|
|
14492
14492
|
|
|
14493
14493
|
var Container$B = newStyled.div(templateObject_1$L || (templateObject_1$L = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n height: fit-content;\n position: relative;\n max-width: 450px;\n"], ["\n display: flex;\n flex-direction: column;\n height: fit-content;\n position: relative;\n max-width: 450px;\n"])));
|
|
14494
14494
|
var ProductGalleryMobileV2 = function (_a) {
|
|
@@ -14525,9 +14525,9 @@ var Container$A = newStyled.div(templateObject_1$K || (templateObject_1$K = __ma
|
|
|
14525
14525
|
return theme.component.slideNavigation.slideDots.selectedDotColor;
|
|
14526
14526
|
});
|
|
14527
14527
|
// max-height: 31.875rem;
|
|
14528
|
-
var TopTagContainer$3 = newStyled.div(templateObject_2$
|
|
14529
|
-
var BottomTagContainer$3 = newStyled.div(templateObject_3$
|
|
14530
|
-
var VideoOverlay$1 = newStyled.div(templateObject_4$
|
|
14528
|
+
var TopTagContainer$3 = newStyled.div(templateObject_2$z || (templateObject_2$z = __makeTemplateObject(["\n position: absolute;\n left: ", ";\n top: ", ";\n"], ["\n position: absolute;\n left: ", ";\n top: ", ";\n"])), function (props) { return (props.borderRadiusVariant ? '13px' : '0'); }, function (props) { return (props.borderRadiusVariant ? '11px' : '0'); });
|
|
14529
|
+
var BottomTagContainer$3 = newStyled.div(templateObject_3$t || (templateObject_3$t = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
14530
|
+
var VideoOverlay$1 = newStyled.div(templateObject_4$n || (templateObject_4$n = __makeTemplateObject(["\n content: '';\n background: transparent;\n width: 100%;\n height: 100%;\n min-height: 1px;\n position: absolute;\n top: 0;\n"], ["\n content: '';\n background: transparent;\n width: 100%;\n height: 100%;\n min-height: 1px;\n position: absolute;\n top: 0;\n"])));
|
|
14531
14531
|
var Video = newStyled.div(templateObject_5$g || (templateObject_5$g = __makeTemplateObject(["\n position: relative;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n height: 510px;\n background: #efefef;\n\n & > iframe {\n border: none;\n }\n"], ["\n position: relative;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n height: 510px;\n background: #efefef;\n\n & > iframe {\n border: none;\n }\n"])));
|
|
14532
14532
|
var VideoTag = newStyled.div(templateObject_6$f || (templateObject_6$f = __makeTemplateObject(["\n gap: 8px;\n position: absolute;\n width: 100%;\n bottom: 50px;\n display: flex;\n padding: 8.6px 0;\n font-weight: 600;\n align-items: center;\n background: #f7f7f7;\n justify-content: center;\n"], ["\n gap: 8px;\n position: absolute;\n width: 100%;\n bottom: 50px;\n display: flex;\n padding: 8.6px 0;\n font-weight: 600;\n align-items: center;\n background: #f7f7f7;\n justify-content: center;\n"])));
|
|
14533
14533
|
var Text$2 = newStyled.div(templateObject_7$d || (templateObject_7$d = __makeTemplateObject(["\n padding-top: 3px;\n"], ["\n padding-top: 3px;\n"])));
|
|
@@ -14590,7 +14590,7 @@ var ImageProductSlideV3 = function (_a) {
|
|
|
14590
14590
|
} }, void 0), jsxRuntime.jsxs(VideoTag, { children: [jsxRuntime.jsx(Icon.PDP.PlayMini, { width: 1.5 }, void 0), jsxRuntime.jsx(Text$2, { children: "VIDEO" }, void 0)] }, void 0)] }, void 0))] }, image.key));
|
|
14591
14591
|
}) }), void 0) }), void 0)] }, void 0));
|
|
14592
14592
|
};
|
|
14593
|
-
var templateObject_1$K, templateObject_2$
|
|
14593
|
+
var templateObject_1$K, templateObject_2$z, templateObject_3$t, templateObject_4$n, templateObject_5$g, templateObject_6$f, templateObject_7$d, templateObject_8$a, templateObject_9$6;
|
|
14594
14594
|
|
|
14595
14595
|
var Container$z = newStyled.div(templateObject_1$J || (templateObject_1$J = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n height: fit-content;\n position: relative;\n max-width: 450px;\n"], ["\n display: flex;\n flex-direction: column;\n height: fit-content;\n position: relative;\n max-width: 450px;\n"])));
|
|
14596
14596
|
var ProductGalleryMobileV3 = function (_a) {
|
|
@@ -14730,12 +14730,12 @@ var Portal = function (_a) {
|
|
|
14730
14730
|
var visibleStyle = function (_a) {
|
|
14731
14731
|
var opened = _a.opened;
|
|
14732
14732
|
return opened
|
|
14733
|
-
? css(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["\n opacity: 1;\n pointer-events: all;\n "], ["\n opacity: 1;\n pointer-events: all;\n "]))) : css(templateObject_2$
|
|
14733
|
+
? css(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["\n opacity: 1;\n pointer-events: all;\n "], ["\n opacity: 1;\n pointer-events: all;\n "]))) : css(templateObject_2$y || (templateObject_2$y = __makeTemplateObject(["\n opacity: 0;\n pointer-events: none;\n "], ["\n opacity: 0;\n pointer-events: none;\n "])));
|
|
14734
14734
|
};
|
|
14735
14735
|
var transformStyle = function (_a) {
|
|
14736
14736
|
var opened = _a.opened, maxFullScreen = _a.maxFullScreen;
|
|
14737
14737
|
return opened
|
|
14738
|
-
? css(templateObject_3$
|
|
14738
|
+
? css(templateObject_3$s || (templateObject_3$s = __makeTemplateObject(["\n transform: ", ";\n "], ["\n transform: ", ";\n "])), maxFullScreen ? 'translateY(0)' : 'translate(-50%, -50%)') : css(templateObject_4$m || (templateObject_4$m = __makeTemplateObject(["\n transform: ", ";\n "], ["\n transform: ", ";\n "])), maxFullScreen ? 'translateY(10%)' : 'translate(-50%, -40%)');
|
|
14739
14739
|
};
|
|
14740
14740
|
var Container$y = newStyled.div(templateObject_5$f || (templateObject_5$f = __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"], ["\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"])), 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 "".concat(props.maxFullScreen ? '0' : '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'); }, mediaQueries({
|
|
14741
14741
|
minWidth: ['90%', 'var(--component-modal-minWidth)'],
|
|
@@ -14778,7 +14778,7 @@ var useModal = function (id) {
|
|
|
14778
14778
|
close: close,
|
|
14779
14779
|
}); }, [close, open, opened]);
|
|
14780
14780
|
};
|
|
14781
|
-
var templateObject_1$I, templateObject_2$
|
|
14781
|
+
var templateObject_1$I, templateObject_2$y, templateObject_3$s, templateObject_4$m, templateObject_5$f, templateObject_6$e;
|
|
14782
14782
|
|
|
14783
14783
|
var Bar$1 = newStyled.div(templateObject_1$H || (templateObject_1$H = __makeTemplateObject(["\n @keyframes loading {\n 0% {\n transform: translateX(0);\n }\n to {\n transform: translateX(400%);\n }\n }\n\n height: ", ";\n background-color: ", ";\n width: ", ";\n border-radius: ", ";\n 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) {
|
|
14784
14784
|
var height = _a.height;
|
|
@@ -14858,13 +14858,13 @@ var Container$w = newStyled.div(templateObject_1$G || (templateObject_1$G = __ma
|
|
|
14858
14858
|
var theme = _a.theme;
|
|
14859
14859
|
return theme.component.orderBar.backgroundColor;
|
|
14860
14860
|
});
|
|
14861
|
-
var H1 = newStyled.h1(templateObject_2$
|
|
14861
|
+
var H1 = newStyled.h1(templateObject_2$x || (templateObject_2$x = __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; });
|
|
14862
14862
|
var OrderBar = function (_a) {
|
|
14863
14863
|
var message = _a.message, color = _a.color;
|
|
14864
14864
|
var theme = useTheme();
|
|
14865
14865
|
return (jsxRuntime.jsxs(Container$w, __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));
|
|
14866
14866
|
};
|
|
14867
|
-
var templateObject_1$G, templateObject_2$
|
|
14867
|
+
var templateObject_1$G, templateObject_2$x;
|
|
14868
14868
|
|
|
14869
14869
|
var StyledButton$1 = newStyled(Ye.Button)(function (props) { return ({
|
|
14870
14870
|
background: props.bgColor,
|
|
@@ -14895,8 +14895,8 @@ var StyledContent = newStyled.div(templateObject_1$F || (templateObject_1$F = __
|
|
|
14895
14895
|
var _b = _a.width, width = _b === void 0 ? '100%' : _b;
|
|
14896
14896
|
return width;
|
|
14897
14897
|
});
|
|
14898
|
-
var StyledController = newStyled.div(templateObject_2$
|
|
14899
|
-
var templateObject_1$F, templateObject_2$
|
|
14898
|
+
var StyledController = newStyled.div(templateObject_2$w || (templateObject_2$w = __makeTemplateObject(["\n display: flex;\n align-items: flex-start;\n justify-content: flex-start;\n min-width: fit-content;\n appearance: none;\n padding: 0;\n margin: 0;\n border: none;\n background: none;\n font-size: inherit;\n line-height: inherit;\n color: inherit;\n user-select: text;\n writing-mode: unset;\n font-family: inherit;\n cursor: pointer;\n gap: 5px;\n"], ["\n display: flex;\n align-items: flex-start;\n justify-content: flex-start;\n min-width: fit-content;\n appearance: none;\n padding: 0;\n margin: 0;\n border: none;\n background: none;\n font-size: inherit;\n line-height: inherit;\n color: inherit;\n user-select: text;\n writing-mode: unset;\n font-family: inherit;\n cursor: pointer;\n gap: 5px;\n"])));
|
|
14899
|
+
var templateObject_1$F, templateObject_2$w;
|
|
14900
14900
|
|
|
14901
14901
|
var StyledDisclosure = newStyled(Ye)(function (_a) {
|
|
14902
14902
|
var background = _a.background, width = _a.width;
|
|
@@ -18717,9 +18717,9 @@ HTMLReactParser$1.attributesToProps;
|
|
|
18717
18717
|
HTMLReactParser$1.Element;
|
|
18718
18718
|
|
|
18719
18719
|
var Container$v = newStyled.div(templateObject_1$E || (templateObject_1$E = __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"])));
|
|
18720
|
-
var Card = newStyled.div(templateObject_2$
|
|
18721
|
-
var Tag$1 = newStyled.div(templateObject_3$
|
|
18722
|
-
var Label$2 = newStyled.div(templateObject_4$
|
|
18720
|
+
var Card = newStyled.div(templateObject_2$v || (templateObject_2$v = __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"])));
|
|
18721
|
+
var Tag$1 = newStyled.div(templateObject_3$r || (templateObject_3$r = __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"])));
|
|
18722
|
+
var Label$2 = newStyled.div(templateObject_4$l || (templateObject_4$l = __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"])));
|
|
18723
18723
|
var Check = newStyled.div(templateObject_5$e || (templateObject_5$e = __makeTemplateObject(["\n position: absolute;\n width: 20px;\n height: 20px;\n background-color: var(--color);\n border-radius: 50%;\n left: 100%;\n top: 50%;\n transform: translate(6px, -50%) scale(0.5);\n opacity: 0;\n transition: opacity 0.3s, transform 0.3s;\n\n &[data-visible='true'] {\n transform: translate(6px, -50%) scale(1);\n opacity: 1;\n }\n"], ["\n position: absolute;\n width: 20px;\n height: 20px;\n background-color: var(--color);\n border-radius: 50%;\n left: 100%;\n top: 50%;\n transform: translate(6px, -50%) scale(0.5);\n opacity: 0;\n transition: opacity 0.3s, transform 0.3s;\n\n &[data-visible='true'] {\n transform: translate(6px, -50%) scale(1);\n opacity: 1;\n }\n"])));
|
|
18724
18724
|
var IconContainer$1 = newStyled.div(templateObject_6$d || (templateObject_6$d = __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"])));
|
|
18725
18725
|
var IconPlaceholder = newStyled.div(templateObject_7$c || (templateObject_7$c = __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"])));
|
|
@@ -18753,14 +18753,14 @@ var PackCard = function (_a) {
|
|
|
18753
18753
|
currency: currencyCode || 'USD',
|
|
18754
18754
|
}), ' ', "each"] }), void 0)] }), void 0));
|
|
18755
18755
|
};
|
|
18756
|
-
var templateObject_1$E, templateObject_2$
|
|
18756
|
+
var templateObject_1$E, templateObject_2$v, templateObject_3$r, templateObject_4$l, templateObject_5$e, templateObject_6$d, templateObject_7$c, templateObject_8$9;
|
|
18757
18757
|
|
|
18758
18758
|
var Container$u = newStyled.div(templateObject_1$D || (templateObject_1$D = __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"])));
|
|
18759
|
-
var IconContainer = newStyled.div(templateObject_2$
|
|
18760
|
-
var PageNumbersContainer = newStyled.div(templateObject_3$
|
|
18759
|
+
var IconContainer = newStyled.div(templateObject_2$u || (templateObject_2$u = __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"])));
|
|
18760
|
+
var PageNumbersContainer = newStyled.div(templateObject_3$q || (templateObject_3$q = __makeTemplateObject(["\n display: flex;\n ", ";\n"], ["\n display: flex;\n ", ";\n"])), mediaQueries({
|
|
18761
18761
|
margin: ['0 0.75rem', '0 1.25rem'],
|
|
18762
18762
|
}));
|
|
18763
|
-
var PageNumber = newStyled.span(templateObject_4$
|
|
18763
|
+
var PageNumber = newStyled.span(templateObject_4$k || (templateObject_4$k = __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) {
|
|
18764
18764
|
var bold = _a.bold;
|
|
18765
18765
|
return (bold ? '700' : '500');
|
|
18766
18766
|
}, function (_a) {
|
|
@@ -18777,7 +18777,7 @@ var PageNumber = newStyled.span(templateObject_4$j || (templateObject_4$j = __ma
|
|
|
18777
18777
|
var background = _a.background;
|
|
18778
18778
|
return background || 'unset';
|
|
18779
18779
|
});
|
|
18780
|
-
var templateObject_1$D, templateObject_2$
|
|
18780
|
+
var templateObject_1$D, templateObject_2$u, templateObject_3$q, templateObject_4$k;
|
|
18781
18781
|
|
|
18782
18782
|
var Pagination = function (_a) {
|
|
18783
18783
|
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;
|
|
@@ -18864,8 +18864,8 @@ var templateObject_1$C;
|
|
|
18864
18864
|
|
|
18865
18865
|
var Container$s = newStyled.div(templateObject_1$B || (templateObject_1$B = __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"])));
|
|
18866
18866
|
var IMAGE_WIDTH = '63px';
|
|
18867
|
-
var ImageContainer$3 = newStyled.div(templateObject_2$
|
|
18868
|
-
var DescriptionContainer$1 = newStyled.div(templateObject_3$
|
|
18867
|
+
var ImageContainer$3 = newStyled.div(templateObject_2$t || (templateObject_2$t = __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);
|
|
18868
|
+
var DescriptionContainer$1 = newStyled.div(templateObject_3$p || (templateObject_3$p = __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({
|
|
18869
18869
|
paddingLeft: ['0.938rem', '1.875rem'],
|
|
18870
18870
|
}), IMAGE_WIDTH);
|
|
18871
18871
|
var Title$3 = newStyled.h2(function (_a) {
|
|
@@ -18888,7 +18888,7 @@ var Subtitle = newStyled.h3(function (_a) {
|
|
|
18888
18888
|
margin: '0.063rem 0',
|
|
18889
18889
|
});
|
|
18890
18890
|
});
|
|
18891
|
-
var PriceContainer = newStyled.div(templateObject_4$
|
|
18891
|
+
var PriceContainer = newStyled.div(templateObject_4$j || (templateObject_4$j = __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) {
|
|
18892
18892
|
var withTag = _a.withTag; _a.theme;
|
|
18893
18893
|
return withTag
|
|
18894
18894
|
? mediaQueries({
|
|
@@ -18904,7 +18904,7 @@ var SimpleOrderItem = function (_a) {
|
|
|
18904
18904
|
var theme = useTheme();
|
|
18905
18905
|
return (jsxRuntime.jsxs(Container$s, __assign$1({ className: className }, { children: [jsxRuntime.jsxs(ImageContainer$3, { children: [jsxRuntime.jsx(Image$3, { src: image.src, alt: image.alt, width: "4.063rem", height: "5.375rem", objectFit: "cover", objectPosition: "center" }, void 0), quantity ? (jsxRuntime.jsx(Quantity, __assign$1({ "data-testid": "order-item-quantity" }, { children: jsxRuntime.jsx(StyledSpan, { children: quantity }, void 0) }), void 0)) : null] }, void 0), jsxRuntime.jsxs(DescriptionContainer$1, __assign$1({ "data-testid": "order-item-description-container", theme: theme }, { children: [jsxRuntime.jsx(Title$3, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "product-title" }, { children: title }), void 0), jsxRuntime.jsx(Subtitle, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "product-variant-title" }, { children: subtitle }), 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)), 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));
|
|
18906
18906
|
};
|
|
18907
|
-
var templateObject_1$B, templateObject_2$
|
|
18907
|
+
var templateObject_1$B, templateObject_2$t, templateObject_3$p, templateObject_4$j, templateObject_5$d, templateObject_6$c;
|
|
18908
18908
|
|
|
18909
18909
|
var P$1 = newStyled.p(function (_a) {
|
|
18910
18910
|
var color = _a.color;
|
|
@@ -18966,9 +18966,9 @@ var ProgressBar = function (_a) {
|
|
|
18966
18966
|
var templateObject_1$A;
|
|
18967
18967
|
|
|
18968
18968
|
var Container$q = newStyled.div(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\n padding: 0.625rem 0;\n border: 0.063rem solid ", ";\n border-radius: ", ";\n display: inline-flex;\n align-items: center;\n justify-content: space-around;\n width: 100%;\n max-width: 3.75rem;\n\n * {\n color: ", ";\n }\n"], ["\n padding: 0.625rem 0;\n border: 0.063rem solid ", ";\n border-radius: ", ";\n display: inline-flex;\n align-items: center;\n justify-content: space-around;\n width: 100%;\n max-width: 3.75rem;\n\n * {\n color: ", ";\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.borderRadius; }, function (props) { return props.color; });
|
|
18969
|
-
var Item$1 = newStyled.span(templateObject_2$
|
|
18970
|
-
var Number$1 = newStyled(Item$1)(templateObject_3$
|
|
18971
|
-
var IncreaseDecrease = newStyled(Item$1)(templateObject_4$
|
|
18969
|
+
var Item$1 = newStyled.span(templateObject_2$s || (templateObject_2$s = __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"])));
|
|
18970
|
+
var Number$1 = newStyled(Item$1)(templateObject_3$o || (templateObject_3$o = __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"])));
|
|
18971
|
+
var IncreaseDecrease = newStyled(Item$1)(templateObject_4$i || (templateObject_4$i = __makeTemplateObject(["\n cursor: pointer;\n user-select: none;\n padding: 0 0.313rem;\n font-weight: 400;\n color: ", ";\n"], ["\n cursor: pointer;\n user-select: none;\n padding: 0 0.313rem;\n font-weight: 400;\n color: ", ";\n"])), function (props) { return props.isMaxSelected && 'var(--colors-shades-175-color)'; });
|
|
18972
18972
|
var QuantityPicker = function (_a) {
|
|
18973
18973
|
var _b = _a.initialValue, initialValue = _b === void 0 ? 0 : _b, _c = _a.maxValue, maxValue = _c === void 0 ? 99 : _c, value = _a.value, _d = _a.testId, testId = _d === void 0 ? 'quantity-picker' : _d, onChange = _a.onChange;
|
|
18974
18974
|
var theme = useTheme();
|
|
@@ -18993,7 +18993,7 @@ var QuantityPicker = function (_a) {
|
|
|
18993
18993
|
}, [value, clamp]);
|
|
18994
18994
|
return (jsxRuntime.jsxs(Container$q, __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));
|
|
18995
18995
|
};
|
|
18996
|
-
var templateObject_1$z, templateObject_2$
|
|
18996
|
+
var templateObject_1$z, templateObject_2$s, templateObject_3$o, templateObject_4$i;
|
|
18997
18997
|
|
|
18998
18998
|
/* base styles & size variants */
|
|
18999
18999
|
var CustomRadioStyles$1 = {
|
|
@@ -19064,7 +19064,7 @@ var ContainerStyles$1 = {
|
|
|
19064
19064
|
|
|
19065
19065
|
var Wrapper$3 = newStyled.div(templateObject_1$y || (templateObject_1$y = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
19066
19066
|
var Container$p = newStyled.div(__assign$1({}, ContainerStyles$1.baseStyles), function (props) { return [ContainerStyles$1[props.size](props.theme)]; });
|
|
19067
|
-
var Input$2 = newStyled.input(templateObject_2$
|
|
19067
|
+
var Input$2 = newStyled.input(templateObject_2$r || (templateObject_2$r = __makeTemplateObject(["\n position: absolute;\n opacity: 0;\n cursor: ", ";\n height: 100%;\n width: 100%;\n margin: 0;\n"], ["\n position: absolute;\n opacity: 0;\n cursor: ", ";\n height: 100%;\n width: 100%;\n margin: 0;\n"])), function (_a) {
|
|
19068
19068
|
var disabled = _a.disabled;
|
|
19069
19069
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
19070
19070
|
});
|
|
@@ -19072,7 +19072,7 @@ var CustomRadio$1 = newStyled.div(function (props) { return [
|
|
|
19072
19072
|
CustomRadioStyles$1.baseStyles(props.theme, props.disabled, props.isChecked),
|
|
19073
19073
|
CustomRadioStyles$1[props.size](props.theme, props.isChecked),
|
|
19074
19074
|
]; });
|
|
19075
|
-
var StyledLabel$1 = newStyled(Label$5)(templateObject_3$
|
|
19075
|
+
var StyledLabel$1 = newStyled(Label$5)(templateObject_3$n || (templateObject_3$n = __makeTemplateObject(["\n font-size: 14px;\n font-weight: 400;\n line-height: 22px;\n"], ["\n font-size: 14px;\n font-weight: 400;\n line-height: 22px;\n"])));
|
|
19076
19076
|
var RadioPrimary = function (_a) {
|
|
19077
19077
|
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;
|
|
19078
19078
|
var theme = useTheme();
|
|
@@ -19082,7 +19082,7 @@ var RadioPrimary = function (_a) {
|
|
|
19082
19082
|
};
|
|
19083
19083
|
return (jsxRuntime.jsxs(Wrapper$3, { children: [jsxRuntime.jsxs(Container$p, __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));
|
|
19084
19084
|
};
|
|
19085
|
-
var templateObject_1$y, templateObject_2$
|
|
19085
|
+
var templateObject_1$y, templateObject_2$r, templateObject_3$n;
|
|
19086
19086
|
|
|
19087
19087
|
var RadioGroupInput = function (_a) {
|
|
19088
19088
|
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;
|
|
@@ -19163,7 +19163,7 @@ var ContainerStyles = {
|
|
|
19163
19163
|
|
|
19164
19164
|
var Wrapper$2 = newStyled.div(templateObject_1$x || (templateObject_1$x = __makeTemplateObject(["\n display: flex;\n align-items: center;\n padding-bottom: 10px;\n"], ["\n display: flex;\n align-items: center;\n padding-bottom: 10px;\n"])));
|
|
19165
19165
|
var Container$o = newStyled.div(__assign$1({}, ContainerStyles.baseStyles), function (props) { return [ContainerStyles[props.size](props.theme)]; });
|
|
19166
|
-
var Input$1 = newStyled.input(templateObject_2$
|
|
19166
|
+
var Input$1 = newStyled.input(templateObject_2$q || (templateObject_2$q = __makeTemplateObject(["\n position: absolute;\n opacity: 0;\n cursor: ", ";\n height: 100%;\n width: 100%;\n margin: 0;\n"], ["\n position: absolute;\n opacity: 0;\n cursor: ", ";\n height: 100%;\n width: 100%;\n margin: 0;\n"])), function (_a) {
|
|
19167
19167
|
var disabled = _a.disabled;
|
|
19168
19168
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
19169
19169
|
});
|
|
@@ -19171,7 +19171,7 @@ var CustomRadio = newStyled.div(function (props) { return [
|
|
|
19171
19171
|
CustomRadioStyles.baseStyles(props.theme, props.disabled, props.isChecked),
|
|
19172
19172
|
CustomRadioStyles[props.size](props.theme, props.isChecked),
|
|
19173
19173
|
]; });
|
|
19174
|
-
var StyledLabel = newStyled(Label$5)(templateObject_3$
|
|
19174
|
+
var StyledLabel = newStyled(Label$5)(templateObject_3$m || (templateObject_3$m = __makeTemplateObject(["\n font-size: ", ";\n line-height: ", " !important;\n"], ["\n font-size: ", ";\n line-height: ", " !important;\n"])), function (_a) {
|
|
19175
19175
|
var theme = _a.theme;
|
|
19176
19176
|
return theme.component.radio.textSize;
|
|
19177
19177
|
}, function (_a) {
|
|
@@ -19187,7 +19187,7 @@ var ClubRadioInput = function (_a) {
|
|
|
19187
19187
|
};
|
|
19188
19188
|
return (jsxRuntime.jsxs(Wrapper$2, { children: [jsxRuntime.jsxs(Container$o, __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));
|
|
19189
19189
|
};
|
|
19190
|
-
var templateObject_1$x, templateObject_2$
|
|
19190
|
+
var templateObject_1$x, templateObject_2$q, templateObject_3$m;
|
|
19191
19191
|
|
|
19192
19192
|
var ClubRadioGroupInput = function (_a) {
|
|
19193
19193
|
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;
|
|
@@ -19216,9 +19216,9 @@ function formatDate(date, format) {
|
|
|
19216
19216
|
}
|
|
19217
19217
|
|
|
19218
19218
|
var Container$n = newStyled.div(templateObject_1$w || (templateObject_1$w = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n\n @media (min-width: 768px) {\n flex-direction: row;\n }\n"], ["\n display: flex;\n flex-direction: column;\n\n @media (min-width: 768px) {\n flex-direction: row;\n }\n"])));
|
|
19219
|
-
var Content$1 = newStyled.div(templateObject_2$
|
|
19220
|
-
var StarsContent = newStyled.div(templateObject_3$
|
|
19221
|
-
var ReviewContainer$1 = newStyled.div(templateObject_4$
|
|
19219
|
+
var Content$1 = newStyled.div(templateObject_2$p || (templateObject_2$p = __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"])));
|
|
19220
|
+
var StarsContent = newStyled.div(templateObject_3$l || (templateObject_3$l = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n"], ["\n display: flex;\n justify-content: space-between;\n"])));
|
|
19221
|
+
var ReviewContainer$1 = newStyled.div(templateObject_4$h || (templateObject_4$h = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n margin-top: 15px;\n margin-bottom: 5px;\n\n @media (min-width: 768px) {\n margin-top: 10px;\n }\n"], ["\n display: flex;\n flex-direction: column;\n margin-top: 15px;\n margin-bottom: 5px;\n\n @media (min-width: 768px) {\n margin-top: 10px;\n }\n"])));
|
|
19222
19222
|
var DateText$1 = newStyled.span(templateObject_5$c || (templateObject_5$c = __makeTemplateObject(["\n font-weight: 400;\n font-size: 14px;\n line-height: 22px;\n"], ["\n font-weight: 400;\n font-size: 14px;\n line-height: 22px;\n"])));
|
|
19223
19223
|
var ReviewerName$1 = newStyled.h1(templateObject_6$b || (templateObject_6$b = __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"])));
|
|
19224
19224
|
var VerifiedText = newStyled.h1(templateObject_7$b || (templateObject_7$b = __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"])));
|
|
@@ -19256,14 +19256,14 @@ var Review$1 = function (_a) {
|
|
|
19256
19256
|
return (jsxRuntime.jsx(Modal, __assign$1({ id: modalId, maxFullScreen: maxFullScreen, padding: "0" }, { children: jsxRuntime.jsxs(Container$n, { children: [jsxRuntime.jsx(CloseButton, __assign$1({ onClick: close }, { children: "X" }), void 0), jsxRuntime.jsx(ImageContainer$2, { children: image &&
|
|
19257
19257
|
(!isVideo ? (jsxRuntime.jsx(ImageWrapper$2, { src: image.src, alt: image.alt }, void 0)) : (jsxRuntime.jsx(VideoWrapper, { ref: refVideo, src: image.src, width: "100%", controls: true }, void 0))) }, void 0), jsxRuntime.jsxs(DescriptionContainer, { children: [opened && (jsxRuntime.jsxs(ReviewerName$1, { children: [reviewerName, verified && jsxRuntime.jsx(VerifiedText, { children: "Verified Buyer" }, void 0)] }, void 0)), jsxRuntime.jsxs(Content$1, __assign$1({ "data-testid": "review-detail-content" }, { children: [jsxRuntime.jsxs(StarsContent, { children: [jsxRuntime.jsx(StarList, { starsNumber: 5, rating: rating, fill: stars.color, size: stars.size }, void 0), jsxRuntime.jsx(DateText$1, { children: formatDate(date) }, void 0)] }, void 0), jsxRuntime.jsxs(ReviewContainer$1, { children: [jsxRuntime.jsx(ReviewTitle$1, { children: title }, void 0), jsxRuntime.jsx(ReviewDescription, { dangerouslySetInnerHTML: { __html: description } }, void 0)] }, void 0), jsxRuntime.jsxs(HelpfulContainer, { children: [jsxRuntime.jsxs(HelpfulAction, __assign$1({ "data-testid": "helpful-action", onClick: function () { return (helpfulAction ? helpfulAction(reviewId) : undefined); } }, { children: [jsxRuntime.jsx(Icon.Custom.ThumbsUp, { width: 1, height: 1, fill: "#000" }, void 0), jsxRuntime.jsx(HelpfulCount, { children: helpfulCount }, void 0)] }), void 0), jsxRuntime.jsxs(NotHelpfulAction, __assign$1({ "data-testid": "not-helpful-action", onClick: function () { return (notHelpfulAction ? notHelpfulAction(reviewId) : undefined); } }, { children: [jsxRuntime.jsx(Icon.Custom.ThumbsDown, { width: 1, height: 1, fill: "#000" }, void 0), jsxRuntime.jsx(NotHelpfulCount, { children: notHelpfulCount }, void 0)] }), void 0)] }, void 0)] }), void 0), productImage && productLink && (jsxRuntime.jsxs(ProductContainer, __assign$1({ onClick: function () { return (window.location.href = productLink); } }, { children: [jsxRuntime.jsx(ProductImageWrapper, { children: jsxRuntime.jsx(ProductImage, { src: productImage, alt: "productImage" }, void 0) }, void 0), jsxRuntime.jsx(ProductTitle, { children: productTitle }, void 0)] }), void 0))] }, void 0)] }, void 0) }), void 0));
|
|
19258
19258
|
};
|
|
19259
|
-
var templateObject_1$w, templateObject_2$
|
|
19259
|
+
var templateObject_1$w, templateObject_2$p, templateObject_3$l, templateObject_4$h, templateObject_5$c, templateObject_6$b, templateObject_7$b, templateObject_8$8, templateObject_9$5, templateObject_10$5, templateObject_11$3, templateObject_12$1, templateObject_13$1, templateObject_14$1, templateObject_15$1, templateObject_16$1, templateObject_17$1, templateObject_18$1, templateObject_19$1, templateObject_20, templateObject_21, templateObject_22, templateObject_23;
|
|
19260
19260
|
|
|
19261
19261
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_DESKTOP = 500;
|
|
19262
19262
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_MOBILE = 168;
|
|
19263
19263
|
var Container$m = newStyled.div(templateObject_1$v || (templateObject_1$v = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n width: auto;\n color: #292929;\n"], ["\n display: flex;\n flex-direction: column;\n width: auto;\n color: #292929;\n"])));
|
|
19264
|
-
var Heading = newStyled.div(templateObject_2$
|
|
19265
|
-
var Content = newStyled.div(templateObject_3$
|
|
19266
|
-
var ReviewContainer = newStyled.div(templateObject_4$
|
|
19264
|
+
var Heading = newStyled.div(templateObject_2$o || (templateObject_2$o = __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"])));
|
|
19265
|
+
var Content = newStyled.div(templateObject_3$k || (templateObject_3$k = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n"], ["\n display: flex;\n justify-content: space-between;\n"])));
|
|
19266
|
+
var ReviewContainer = newStyled.div(templateObject_4$g || (templateObject_4$g = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
19267
19267
|
var DateText = newStyled.span(templateObject_5$b || (templateObject_5$b = __makeTemplateObject(["\n font-weight: 400;\n font-size: 12px;\n line-height: 16px;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"], ["\n font-weight: 400;\n font-size: 12px;\n line-height: 16px;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"])));
|
|
19268
19268
|
var VariantText = newStyled.div(templateObject_6$a || (templateObject_6$a = __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"])));
|
|
19269
19269
|
var ReviewerName = newStyled.h2(templateObject_7$a || (templateObject_7$a = __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"])));
|
|
@@ -19312,12 +19312,12 @@ var Review = function (_a) {
|
|
|
19312
19312
|
: description,
|
|
19313
19313
|
} }, void 0), jsxRuntime.jsxs(HelpfulContainerDesktop, __assign$1({ showMoreDesktop: description.length > REVIEWS_DESCRIPTION_MAX_LENGTH_DESKTOP }, { children: [helpfulActionText && helpfulAction && (jsxRuntime.jsx(ButtonSecondaryWrapper, { onClick: function () { return helpfulAction(reviewId); }, text: helpfulActionText, size: exports.ComponentSize.Small }, void 0)), (helpfulCount || (hasTextWhenHelpfulCount0 && helpfulCount === 0)) && (jsxRuntime.jsxs(HelpfulText, { children: [helpfulCount, " people found this helpful"] }, void 0))] }), void 0)] }, void 0), jsxRuntime.jsxs(ImagesContainer, { children: [jsxRuntime.jsxs(Images, { children: [images === null || images === void 0 ? void 0 : images.map(function (image) { return (jsxRuntime.jsx(ImageWrapper$1, __assign$1({ onClick: function () { return onClickImage && onClickImage(image.src); } }, { children: jsxRuntime.jsx(Image$3, { src: image.src, alt: image.alt, height: "10rem", width: "7.5rem" }, void 0) }), image.src)); }), !images || (images.length === 0 && jsxRuntime.jsx(ImageSpace, {}, void 0))] }, void 0), jsxRuntime.jsx(VariantText, { children: reviewVariant }, void 0)] }, void 0)] }), void 0), jsxRuntime.jsx(HelpfulTexti, {}, void 0), jsxRuntime.jsxs(HelpfulContainerMobile, { children: [helpfulActionText && helpfulAction && (jsxRuntime.jsx(ButtonSecondaryWrapper, { onClick: function () { return helpfulAction(reviewId); }, text: helpfulActionText, size: exports.ComponentSize.Small }, void 0)), (helpfulCount || (hasTextWhenHelpfulCount0 && helpfulCount === 0)) && (jsxRuntime.jsxs(HelpfulText, { children: [helpfulCount, " people found this helpful"] }, void 0))] }, void 0)] }, void 0));
|
|
19314
19314
|
};
|
|
19315
|
-
var templateObject_1$v, templateObject_2$
|
|
19315
|
+
var templateObject_1$v, templateObject_2$o, templateObject_3$k, templateObject_4$g, templateObject_5$b, templateObject_6$a, templateObject_7$a, templateObject_8$7, templateObject_9$4, templateObject_10$4, templateObject_11$2, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19;
|
|
19316
19316
|
|
|
19317
19317
|
var Container$l = newStyled.div(templateObject_1$u || (templateObject_1$u = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: auto;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: auto;\n"])));
|
|
19318
|
-
var ReviewsContainer = newStyled.div(templateObject_2$
|
|
19319
|
-
var ReviewsCount = newStyled.div(templateObject_3$
|
|
19320
|
-
var ReviewsStars = newStyled.div(templateObject_4$
|
|
19318
|
+
var ReviewsContainer = newStyled.div(templateObject_2$n || (templateObject_2$n = __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"])));
|
|
19319
|
+
var ReviewsCount = newStyled.div(templateObject_3$j || (templateObject_3$j = __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"])));
|
|
19320
|
+
var ReviewsStars = newStyled.div(templateObject_4$f || (templateObject_4$f = __makeTemplateObject(["\n display: flex;\n margin-bottom: 10px;\n\n @media (min-width: 768px) {\n margin-bottom: 0;\n }\n"], ["\n display: flex;\n margin-bottom: 10px;\n\n @media (min-width: 768px) {\n margin-bottom: 0;\n }\n"])));
|
|
19321
19321
|
var ReviewsTextCount = newStyled(Text$7)(templateObject_5$a || (templateObject_5$a = __makeTemplateObject(["\n margin-right: 5px;\n padding-top: 6px;\n line-height: 32px;\n\n @media (min-width: 768px) {\n font-size: 42px;\n line-height: 46px;\n }\n"], ["\n margin-right: 5px;\n padding-top: 6px;\n line-height: 32px;\n\n @media (min-width: 768px) {\n font-size: 42px;\n line-height: 46px;\n }\n"])));
|
|
19322
19322
|
var ReviewsImages = newStyled.div(templateObject_6$9 || (templateObject_6$9 = __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"])));
|
|
19323
19323
|
var SummaryItem = newStyled.div(templateObject_7$9 || (templateObject_7$9 = __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) {
|
|
@@ -19330,17 +19330,17 @@ var ReviewsHeader = function (_a) {
|
|
|
19330
19330
|
var theme = useTheme();
|
|
19331
19331
|
return (jsxRuntime.jsxs(Container$l, { 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));
|
|
19332
19332
|
};
|
|
19333
|
-
var templateObject_1$u, templateObject_2$
|
|
19333
|
+
var templateObject_1$u, templateObject_2$n, templateObject_3$j, templateObject_4$f, templateObject_5$a, templateObject_6$9, templateObject_7$9;
|
|
19334
19334
|
|
|
19335
19335
|
var Container$k = newStyled.div(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n cursor: pointer;\n user-select: none;\n"], ["\n display: inline-flex;\n align-items: center;\n cursor: pointer;\n user-select: none;\n"])));
|
|
19336
|
-
var Text = newStyled.p(templateObject_2$
|
|
19336
|
+
var Text = newStyled.p(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 700;\n color: ", ";\n margin-right: 0.313rem;\n"], ["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 700;\n color: ", ";\n margin-right: 0.313rem;\n"])), function (props) { return props.color; });
|
|
19337
19337
|
var ScrollToTop = function (_a) {
|
|
19338
19338
|
var scrollToTopText = _a.scrollToTopText, onClick = _a.onClick, fill = _a.fill, _b = _a.Icon, Icon$1 = _b === void 0 ? Icon.Arrows.CircleChevronUp : _b;
|
|
19339
19339
|
var theme = useTheme();
|
|
19340
19340
|
var fillValue = fill || theme.colors.pallete.primary.color;
|
|
19341
19341
|
return (jsxRuntime.jsxs(Container$k, __assign$1({ onClick: onClick, "data-testid": "scrollTopContainer" }, { children: [jsxRuntime.jsx(Text, __assign$1({ color: theme.colors.shades['700'].color }, { children: scrollToTopText }), void 0), jsxRuntime.jsx(Icon$1, { width: 1.375, height: 1.375, fill: fillValue }, void 0)] }), void 0));
|
|
19342
19342
|
};
|
|
19343
|
-
var templateObject_1$t, templateObject_2$
|
|
19343
|
+
var templateObject_1$t, templateObject_2$m;
|
|
19344
19344
|
|
|
19345
19345
|
var Input = newStyled.input(function (props) { return ({
|
|
19346
19346
|
padding: props.theme.component.input.padding,
|
|
@@ -19418,12 +19418,12 @@ var Anchor = newStyled.a({
|
|
|
19418
19418
|
padding: 0,
|
|
19419
19419
|
textDecoration: 'none',
|
|
19420
19420
|
});
|
|
19421
|
-
var Container$h = newStyled.div(templateObject_2$
|
|
19421
|
+
var Container$h = newStyled.div(templateObject_2$l || (templateObject_2$l = __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({
|
|
19422
19422
|
border: ['none', '0.063rem solid var(--colors-pallete-secondary-color)'],
|
|
19423
19423
|
marginTop: ['1.25rem', '0.125rem'],
|
|
19424
19424
|
borderRadius: ['0', '0.5rem'],
|
|
19425
19425
|
}));
|
|
19426
|
-
var Header = newStyled.div(templateObject_3$
|
|
19426
|
+
var Header = newStyled.div(templateObject_3$i || (templateObject_3$i = __makeTemplateObject(["\n ", ",\n"], ["\n ", ",\n"])), mediaQueries({
|
|
19427
19427
|
margin: ['0rem 0rem 1rem 0rem', '1rem'],
|
|
19428
19428
|
}));
|
|
19429
19429
|
var ResultsPanel = function (_a) {
|
|
@@ -19431,7 +19431,7 @@ var ResultsPanel = function (_a) {
|
|
|
19431
19431
|
var theme = useTheme();
|
|
19432
19432
|
return (jsxRuntime.jsxs(Container$h, __assign$1({ "data-testid": testId, theme: theme }, { children: [header && (jsxRuntime.jsx(Header, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Text$7, __assign$1({ variant: "heading6", weight: "demi" }, { children: header }), void 0) }), void 0)), jsxRuntime.jsx(Ul, { children: options.map(function (item, index) { return (jsxRuntime.jsx(Li, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Anchor, __assign$1({ href: item.optionUrl }, { children: jsxRuntime.jsx(ProductItem, { src: item.src, title: item.title, price: item.price }, void 0) }), void 0) }), index)); }) }, void 0), footer && jsxRuntime.jsx(Footer, { text: footer, onClick: onViewAll }, void 0)] }), void 0));
|
|
19433
19433
|
};
|
|
19434
|
-
var templateObject_1$r, templateObject_2$
|
|
19434
|
+
var templateObject_1$r, templateObject_2$l, templateObject_3$i;
|
|
19435
19435
|
|
|
19436
19436
|
var Button$1 = newStyled.button(templateObject_1$q || (templateObject_1$q = __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({
|
|
19437
19437
|
right: ['1rem', '7.75rem'],
|
|
@@ -19536,9 +19536,9 @@ var SearchBar = function (_a) {
|
|
|
19536
19536
|
};
|
|
19537
19537
|
|
|
19538
19538
|
var Container$f = newStyled.div(templateObject_1$o || (templateObject_1$o = __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"])));
|
|
19539
|
-
var BackArrow = newStyled.div(templateObject_2$
|
|
19540
|
-
var BoldSpan = newStyled.span(templateObject_3$
|
|
19541
|
-
var NormalSpan = newStyled.span(templateObject_4$
|
|
19539
|
+
var BackArrow = newStyled.div(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\n transform: rotate(180deg);\n margin-right: 0.5rem;\n"], ["\n transform: rotate(180deg);\n margin-right: 0.5rem;\n"])));
|
|
19540
|
+
var BoldSpan = newStyled.span(templateObject_3$h || (templateObject_3$h = __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"])));
|
|
19541
|
+
var NormalSpan = newStyled.span(templateObject_4$e || (templateObject_4$e = __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"])));
|
|
19542
19542
|
var SearchNavigationParents = newStyled.div(templateObject_5$9 || (templateObject_5$9 = __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"])));
|
|
19543
19543
|
var SearchNavigation = function (_a) {
|
|
19544
19544
|
var returnText = _a.returnText, returnUrl = _a.returnUrl, _b = _a.steps, steps = _b === void 0 ? [] : _b, returnAction = _a.returnAction;
|
|
@@ -19546,7 +19546,7 @@ var SearchNavigation = function (_a) {
|
|
|
19546
19546
|
return index === steps.length - 1 ? (jsxRuntime.jsx(BoldSpan, { children: step }, step)) : (jsxRuntime.jsx(NormalSpan, { children: "".concat(step, " / ") }, step));
|
|
19547
19547
|
}) }, void 0)] }, void 0));
|
|
19548
19548
|
};
|
|
19549
|
-
var templateObject_1$o, templateObject_2$
|
|
19549
|
+
var templateObject_1$o, templateObject_2$k, templateObject_3$h, templateObject_4$e, templateObject_5$9;
|
|
19550
19550
|
|
|
19551
19551
|
var Container$e = newStyled.div(templateObject_1$n || (templateObject_1$n = __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) {
|
|
19552
19552
|
var alignCenter = _a.alignCenter;
|
|
@@ -19558,26 +19558,26 @@ var Container$e = newStyled.div(templateObject_1$n || (templateObject_1$n = __ma
|
|
|
19558
19558
|
}, function (props) { return props.backgroundColor; }, function (props) { return props.textColor; }, function (props) {
|
|
19559
19559
|
return props.border ? "".concat(props.border.borderWidth, " solid ").concat(props.border.borderColor) : 'none';
|
|
19560
19560
|
});
|
|
19561
|
-
var TitleText = newStyled.div(templateObject_2$
|
|
19562
|
-
var BannerText = newStyled.div(templateObject_3$
|
|
19561
|
+
var TitleText = newStyled.div(templateObject_2$j || (templateObject_2$j = __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"])));
|
|
19562
|
+
var BannerText = newStyled.div(templateObject_3$g || (templateObject_3$g = __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"])));
|
|
19563
19563
|
var ShortBanner = function (_a) {
|
|
19564
19564
|
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;
|
|
19565
19565
|
var theme = useTheme();
|
|
19566
19566
|
return (jsxRuntime.jsxs(Container$e, __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));
|
|
19567
19567
|
};
|
|
19568
|
-
var templateObject_1$n, templateObject_2$
|
|
19568
|
+
var templateObject_1$n, templateObject_2$j, templateObject_3$g;
|
|
19569
19569
|
|
|
19570
19570
|
var TableElement$2 = newStyled.table(templateObject_1$m || (templateObject_1$m = __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; });
|
|
19571
|
-
var TableCell$2 = newStyled.td(templateObject_2$
|
|
19572
|
-
var TableHead$2 = newStyled.th(templateObject_3$
|
|
19573
|
-
var Label$1 = newStyled('div')(templateObject_4$
|
|
19571
|
+
var TableCell$2 = newStyled.td(templateObject_2$i || (templateObject_2$i = __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; });
|
|
19572
|
+
var TableHead$2 = newStyled.th(templateObject_3$f || (templateObject_3$f = __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; });
|
|
19573
|
+
var Label$1 = newStyled('div')(templateObject_4$d || (templateObject_4$d = __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"])));
|
|
19574
19574
|
var TopLabel$1 = newStyled(Label$1)(templateObject_5$8 || (templateObject_5$8 = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
19575
19575
|
var LeftLabel$1 = newStyled(Label$1)(templateObject_6$8 || (templateObject_6$8 = __makeTemplateObject(["\n width: 20px;\n transform: rotate(270deg);\n"], ["\n width: 20px;\n transform: rotate(270deg);\n"])));
|
|
19576
19576
|
var Container$d = newStyled('div')(templateObject_7$8 || (templateObject_7$8 = __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"])));
|
|
19577
19577
|
var LabelText$1 = newStyled('span')(templateObject_8$6 || (templateObject_8$6 = __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"])));
|
|
19578
19578
|
var Column$1 = newStyled('div')(templateObject_9$3 || (templateObject_9$3 = __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"])));
|
|
19579
19579
|
var TableRow$2 = newStyled.tr(templateObject_10$3 || (templateObject_10$3 = __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; });
|
|
19580
|
-
var templateObject_1$m, templateObject_2$
|
|
19580
|
+
var templateObject_1$m, templateObject_2$i, templateObject_3$f, templateObject_4$d, templateObject_5$8, templateObject_6$8, templateObject_7$8, templateObject_8$6, templateObject_9$3, templateObject_10$3;
|
|
19581
19581
|
|
|
19582
19582
|
var getIsOdd$1 = function (number) { return number % 2 !== 0; };
|
|
19583
19583
|
var getCellColor$1 = function (index, cell) {
|
|
@@ -19619,15 +19619,15 @@ var SizeChartTable = function (_a) {
|
|
|
19619
19619
|
};
|
|
19620
19620
|
|
|
19621
19621
|
var TableElement$1 = newStyled.table(templateObject_1$l || (templateObject_1$l = __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; });
|
|
19622
|
-
var TableCell$1 = newStyled.td(templateObject_2$
|
|
19623
|
-
var TableHead$1 = newStyled.th(templateObject_3$
|
|
19624
|
-
var TableRow$1 = newStyled.tr(templateObject_4$
|
|
19622
|
+
var TableCell$1 = newStyled.td(templateObject_2$h || (templateObject_2$h = __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; });
|
|
19623
|
+
var TableHead$1 = newStyled.th(templateObject_3$e || (templateObject_3$e = __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; });
|
|
19624
|
+
var TableRow$1 = newStyled.tr(templateObject_4$c || (templateObject_4$c = __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; });
|
|
19625
19625
|
var SizeTable = function (_a) {
|
|
19626
19626
|
var headers = _a.headers, data = _a.data, className = _a.className;
|
|
19627
19627
|
var theme = useTheme();
|
|
19628
19628
|
return (jsxRuntime.jsxs(TableElement$1, __assign$1({ color: theme.colors.shades['700'].color, borderColor: theme.colors.shades['100'].color, className: className }, { children: [jsxRuntime.jsx("thead", { children: jsxRuntime.jsx(TableRow$1, __assign$1({ backgroundColor: theme.colors.shades['10'].color }, { children: headers.map(function (header, index) { return (jsxRuntime.jsx(TableHead$1, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: header }), index)); }) }), void 0) }, void 0), jsxRuntime.jsx("tbody", { children: data.map(function (row, index) { return (jsxRuntime.jsx(TableRow$1, __assign$1({ className: index % 2 !== 0 ? '' : 'background', backgroundColor: theme.colors.shades['10'].color }, { children: row.map(function (cell, index) { return (jsxRuntime.jsx(TableCell$1, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }), index)); }) }, void 0)] }), void 0));
|
|
19629
19629
|
};
|
|
19630
|
-
var templateObject_1$l, templateObject_2$
|
|
19630
|
+
var templateObject_1$l, templateObject_2$h, templateObject_3$e, templateObject_4$c;
|
|
19631
19631
|
|
|
19632
19632
|
var getStylesBySize$7 = function (size) {
|
|
19633
19633
|
switch (size) {
|
|
@@ -19673,20 +19673,20 @@ var TextButton = function (_a) {
|
|
|
19673
19673
|
var templateObject_1$k;
|
|
19674
19674
|
|
|
19675
19675
|
var Container$c = newStyled.div(templateObject_1$j || (templateObject_1$j = __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"])));
|
|
19676
|
-
var P = newStyled.p(templateObject_2$
|
|
19677
|
-
var PercentageSpan = newStyled.span(templateObject_3$
|
|
19676
|
+
var P = newStyled.p(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n margin: 0;\n"], ["\n margin: 0;\n"])));
|
|
19677
|
+
var PercentageSpan = newStyled.span(templateObject_3$d || (templateObject_3$d = __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"])));
|
|
19678
19678
|
var SizeFitGuide = function (_a) {
|
|
19679
19679
|
var title = _a.title, fitPercentage = _a.fitPercentage, onClick = _a.onClick, onClickFitPercentage = _a.onClickFitPercentage, _b = _a.hideIcon, hideIcon = _b === void 0 ? false : _b;
|
|
19680
19680
|
return (jsxRuntime.jsxs(Container$c, { 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));
|
|
19681
19681
|
};
|
|
19682
|
-
var templateObject_1$j, templateObject_2$
|
|
19682
|
+
var templateObject_1$j, templateObject_2$g, templateObject_3$d;
|
|
19683
19683
|
|
|
19684
19684
|
var ButtonsContainer = newStyled.div(templateObject_1$i || (templateObject_1$i = __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) {
|
|
19685
19685
|
var inline = _a.inline;
|
|
19686
19686
|
return (inline ? '0 0 0 10px' : '8px 0 0 0');
|
|
19687
19687
|
});
|
|
19688
|
-
var Row = newStyled.div(templateObject_2$
|
|
19689
|
-
var templateObject_1$i, templateObject_2$
|
|
19688
|
+
var Row = newStyled.div(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n gap: 5px;\n display: flex;\n margin: 5px 0 3px;\n flex-wrap: wrap;\n\n & button {\n font-weight: 600;\n }\n"], ["\n gap: 5px;\n display: flex;\n margin: 5px 0 3px;\n flex-wrap: wrap;\n\n & button {\n font-weight: 600;\n }\n"])));
|
|
19689
|
+
var templateObject_1$i, templateObject_2$f;
|
|
19690
19690
|
|
|
19691
19691
|
var SizeSelector = function (_a) {
|
|
19692
19692
|
var _b;
|
|
@@ -19728,15 +19728,15 @@ var Tab = function (_a) {
|
|
|
19728
19728
|
var templateObject_1$h;
|
|
19729
19729
|
|
|
19730
19730
|
var Container$b = newStyled.div(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
|
|
19731
|
-
var TabList = newStyled.div(templateObject_2$
|
|
19731
|
+
var TabList = newStyled.div(templateObject_2$e || (templateObject_2$e = __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) {
|
|
19732
19732
|
var backgroundColor = _a.backgroundColor;
|
|
19733
19733
|
return backgroundColor;
|
|
19734
19734
|
}, function (_a) {
|
|
19735
19735
|
var borderColor = _a.borderColor;
|
|
19736
19736
|
return (borderColor ? "border-bottom: 1px solid ".concat(borderColor) : '');
|
|
19737
19737
|
});
|
|
19738
|
-
var TabContent = newStyled.div(templateObject_3$
|
|
19739
|
-
var TabSeparator = newStyled.div(templateObject_4$
|
|
19738
|
+
var TabContent = newStyled.div(templateObject_3$c || (templateObject_3$c = __makeTemplateObject(["\n display: block;\n"], ["\n display: block;\n"])));
|
|
19739
|
+
var TabSeparator = newStyled.div(templateObject_4$b || (templateObject_4$b = __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"])));
|
|
19740
19740
|
var Tabs = function (_a) {
|
|
19741
19741
|
var _b;
|
|
19742
19742
|
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;
|
|
@@ -19747,7 +19747,7 @@ var Tabs = function (_a) {
|
|
|
19747
19747
|
var selectedContent = (_b = tabs.find(function (tab) { return tab.title === selectedTab; })) === null || _b === void 0 ? void 0 : _b.content;
|
|
19748
19748
|
return (jsxRuntime.jsxs(Container$b, __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));
|
|
19749
19749
|
};
|
|
19750
|
-
var templateObject_1$g, templateObject_2$
|
|
19750
|
+
var templateObject_1$g, templateObject_2$e, templateObject_3$c, templateObject_4$b;
|
|
19751
19751
|
|
|
19752
19752
|
var Container$a = newStyled.div(templateObject_1$f || (templateObject_1$f = __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"])));
|
|
19753
19753
|
var Tag = function (_a) {
|
|
@@ -19866,8 +19866,8 @@ var SeasonOfferRoundedTag = function (_a) {
|
|
|
19866
19866
|
};
|
|
19867
19867
|
|
|
19868
19868
|
var ImageWrapper = newStyled.div(templateObject_1$e || (templateObject_1$e = __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"])));
|
|
19869
|
-
var VideoOverlay = newStyled.div(templateObject_2$
|
|
19870
|
-
var FullscreenVideo = newStyled.div(templateObject_3$
|
|
19869
|
+
var VideoOverlay = newStyled.div(templateObject_2$d || (templateObject_2$d = __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"])));
|
|
19870
|
+
var FullscreenVideo = newStyled.div(templateObject_3$b || (templateObject_3$b = __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"])));
|
|
19871
19871
|
var ImageVideo = function (_a) {
|
|
19872
19872
|
var imageLink = _a.imageLink, isVideo = _a.isVideo, isMobile = _a.isMobile;
|
|
19873
19873
|
var video = React$2.useRef(null);
|
|
@@ -19887,12 +19887,12 @@ var ImageVideo = function (_a) {
|
|
|
19887
19887
|
height: '100%',
|
|
19888
19888
|
} }, void 0)] }, void 0))] }, void 0));
|
|
19889
19889
|
};
|
|
19890
|
-
var templateObject_1$e, templateObject_2$
|
|
19890
|
+
var templateObject_1$e, templateObject_2$d, templateObject_3$b;
|
|
19891
19891
|
|
|
19892
19892
|
var ContainerDesktop = css(templateObject_1$d || (templateObject_1$d = __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"])));
|
|
19893
|
-
var ContainerMobile = css(templateObject_2$
|
|
19894
|
-
var Container$9 = newStyled.div(templateObject_3$
|
|
19895
|
-
var TextContainer = newStyled.div(templateObject_4$
|
|
19893
|
+
var ContainerMobile = css(templateObject_2$c || (templateObject_2$c = __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"])));
|
|
19894
|
+
var Container$9 = newStyled.div(templateObject_3$a || (templateObject_3$a = __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);
|
|
19895
|
+
var TextContainer = newStyled.div(templateObject_4$a || (templateObject_4$a = __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"])));
|
|
19896
19896
|
var TextWithImage = function (_a) {
|
|
19897
19897
|
var _b, _c, _d, _e;
|
|
19898
19898
|
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"]);
|
|
@@ -19922,12 +19922,29 @@ var TextWithImage = function (_a) {
|
|
|
19922
19922
|
},
|
|
19923
19923
|
} }, 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));
|
|
19924
19924
|
};
|
|
19925
|
-
var templateObject_1$d, templateObject_2$
|
|
19925
|
+
var templateObject_1$d, templateObject_2$c, templateObject_3$a, templateObject_4$a;
|
|
19926
19926
|
|
|
19927
19927
|
var TimerContainer$1 = newStyled.div(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
19928
19928
|
var timerColor = _a.timerColor;
|
|
19929
19929
|
return timerColor || '';
|
|
19930
19930
|
});
|
|
19931
|
+
var TimerContainerV2 = newStyled.div(templateObject_2$b || (templateObject_2$b = __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) {
|
|
19932
|
+
var timerColor = _a.timerColor;
|
|
19933
|
+
return timerColor || '';
|
|
19934
|
+
});
|
|
19935
|
+
var UnitBlock = newStyled(Text$7)(templateObject_3$9 || (templateObject_3$9 = __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) {
|
|
19936
|
+
var theme = _a.theme;
|
|
19937
|
+
return theme.colors.shades.white.color;
|
|
19938
|
+
}, function (_a) {
|
|
19939
|
+
var theme = _a.theme;
|
|
19940
|
+
return theme.colors.shades.white.color;
|
|
19941
|
+
});
|
|
19942
|
+
var Unit = newStyled.p(templateObject_4$9 || (templateObject_4$9 = __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"])));
|
|
19943
|
+
var templateObject_1$c, templateObject_2$b, templateObject_3$9, templateObject_4$9;
|
|
19944
|
+
|
|
19945
|
+
var HRS = 'HRS';
|
|
19946
|
+
var MIN = 'MIN';
|
|
19947
|
+
var SEC = 'SEC';
|
|
19931
19948
|
var timeToSeconds = function (_a) {
|
|
19932
19949
|
var hours = _a.hours, minutes = _a.minutes, seconds = _a.seconds;
|
|
19933
19950
|
return hours * 3600 + minutes * 60 + seconds;
|
|
@@ -19940,8 +19957,8 @@ var secondsToTime = function (secs) {
|
|
|
19940
19957
|
};
|
|
19941
19958
|
var DEFAULT_TIME = { hours: 0, minutes: 0, seconds: 0 };
|
|
19942
19959
|
var Timer = function (_a) {
|
|
19943
|
-
var onTimeUp = _a.onTimeUp, _b = _a.displayZeroValues, displayZeroValues = _b === void 0 ? false : _b, _c = _a.showSeconds, showSeconds = _c === void 0 ? true : _c, _d = _a.showHours, showHours = _d === void 0 ? true : _d, _e = _a.timerColor, timerColor = _e === void 0 ? '#292929' : _e, countdown = _a.countdown, rest = __rest(_a, ["onTimeUp", "displayZeroValues", "showSeconds", "showHours", "timerColor", "countdown"]);
|
|
19944
|
-
var
|
|
19960
|
+
var onTimeUp = _a.onTimeUp, _b = _a.displayZeroValues, displayZeroValues = _b === void 0 ? false : _b, _c = _a.showSeconds, showSeconds = _c === void 0 ? true : _c, _d = _a.showHours, showHours = _d === void 0 ? true : _d, _e = _a.timerColor, timerColor = _e === void 0 ? '#292929' : _e, countdown = _a.countdown, _f = _a.template, template = _f === void 0 ? false : _f, rest = __rest(_a, ["onTimeUp", "displayZeroValues", "showSeconds", "showHours", "timerColor", "countdown", "template"]);
|
|
19961
|
+
var _g = React$2.useState(countdown !== null && countdown !== void 0 ? countdown : timeToSeconds(__assign$1(__assign$1({}, DEFAULT_TIME), rest))), secs = _g[0], setSecs = _g[1];
|
|
19945
19962
|
React$2.useEffect(function () {
|
|
19946
19963
|
var timer = setInterval(function () {
|
|
19947
19964
|
setSecs(function (seconds) {
|
|
@@ -19957,10 +19974,12 @@ var Timer = function (_a) {
|
|
|
19957
19974
|
clearInterval(timer);
|
|
19958
19975
|
return function () { return clearInterval(timer); };
|
|
19959
19976
|
}, [onTimeUp, secs]);
|
|
19960
|
-
var
|
|
19977
|
+
var _h = secondsToTime(secs), hours = _h.hours, minutes = _h.minutes, seconds = _h.seconds;
|
|
19978
|
+
if (template) {
|
|
19979
|
+
return (jsxRuntime.jsxs(TimerContainerV2, __assign$1({ "data-testid": "Time", timerColor: timerColor }, { children: [showHours && (jsxRuntime.jsxs(UnitBlock, __assign$1({ variant: "body", weight: "bold" }, { children: [(hours || displayZeroValues) && "".concat(hours), jsxRuntime.jsx(Unit, { children: HRS }, void 0)] }), void 0)), jsxRuntime.jsxs(UnitBlock, __assign$1({ variant: "body", weight: "bold" }, { children: [(minutes || displayZeroValues) && "".concat(minutes), jsxRuntime.jsx(Unit, { children: MIN }, void 0)] }), void 0), jsxRuntime.jsxs(UnitBlock, __assign$1({ variant: "body", weight: "bold" }, { children: [showSeconds && "".concat(seconds), jsxRuntime.jsx(Unit, { children: SEC }, void 0)] }), void 0)] }), void 0));
|
|
19980
|
+
}
|
|
19961
19981
|
return (jsxRuntime.jsxs(TimerContainer$1, __assign$1({ "data-testid": "Time", timerColor: timerColor }, { children: [showHours && (hours || displayZeroValues) && "".concat(hours, "h "), (minutes || displayZeroValues) && "".concat(minutes, "m "), showSeconds && "".concat(seconds, "s")] }), void 0));
|
|
19962
|
-
};
|
|
19963
|
-
var templateObject_1$c;
|
|
19982
|
+
};
|
|
19964
19983
|
|
|
19965
19984
|
var Wrapper$1 = newStyled.div(templateObject_1$b || (templateObject_1$b = __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"])));
|
|
19966
19985
|
var GrandTotal = newStyled.h1(templateObject_2$a || (templateObject_2$a = __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; });
|
|
@@ -20149,9 +20168,9 @@ var getDefaultCountdown = function () {
|
|
|
20149
20168
|
};
|
|
20150
20169
|
|
|
20151
20170
|
var HurryUp = function (_a) {
|
|
20152
|
-
var hurryUpText = _a.hurryUpText, backgroundColor = _a.backgroundColor, _b = _a.iconSize, iconSize = _b === void 0 ? 1.5 : _b, _c = _a.textPosition, textPosition = _c === void 0 ? 'center' : _c, _d = _a.showTimer, showTimer = _d === void 0 ? false : _d, _e = _a.clockPosition, clockPosition = _e === void 0 ? 'left' : _e, _f = _a.countdown, countdown = _f === void 0 ? getDefaultCountdown() : _f, timerProps = __rest(_a, ["hurryUpText", "backgroundColor", "iconSize", "textPosition", "showTimer", "clockPosition", "countdown"]);
|
|
20171
|
+
var hurryUpText = _a.hurryUpText, backgroundColor = _a.backgroundColor, _b = _a.iconSize, iconSize = _b === void 0 ? 1.5 : _b, _c = _a.textPosition, textPosition = _c === void 0 ? 'center' : _c, _d = _a.showTimer, showTimer = _d === void 0 ? false : _d, _e = _a.clockPosition, clockPosition = _e === void 0 ? 'left' : _e, _f = _a.countdown, countdown = _f === void 0 ? getDefaultCountdown() : _f, template = _a.template, hurryUpTextColor = _a.hurryUpTextColor, timerProps = __rest(_a, ["hurryUpText", "backgroundColor", "iconSize", "textPosition", "showTimer", "clockPosition", "countdown", "template", "hurryUpTextColor"]);
|
|
20153
20172
|
var theme = useTheme();
|
|
20154
|
-
return (jsxRuntime.jsxs(TimerContainer, __assign$1({ backgroundColor: backgroundColor || theme.component.card.backgroundColor, textPosition: textPosition, borderRadius: theme.component.hurryUp.borderRadius, "data-testid": "HurryUp" }, { children: [clockPosition === 'left' && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Icon.PDP.Stopwatch, { width: iconSize, height: iconSize, fill: theme.colors.pallete.secondary.color }, void 0), "\u00A0"] }, void 0)), jsxRuntime.jsx(Text$7, __assign$1({ testId: "HurryUpText", variant: "body", size: "small", weight: "demi" }, { children: hurryUpText }), void 0), "\u00A0", clockPosition === 'right' && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Icon.PDP.Stopwatch, { width: iconSize, height: iconSize, fill: theme.colors.pallete.secondary.color }, void 0), "\u00A0"] }, void 0)), showTimer && jsxRuntime.jsx(Timer, __assign$1({ countdown: countdown, onTimeUp: function () { } }, timerProps), void 0)] }), void 0));
|
|
20173
|
+
return (jsxRuntime.jsxs(TimerContainer, __assign$1({ backgroundColor: backgroundColor || theme.component.card.backgroundColor, textPosition: textPosition, borderRadius: (!template && theme.component.hurryUp.borderRadius) || '0', "data-testid": "HurryUp" }, { children: [clockPosition === 'left' && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Icon.PDP.Stopwatch, { width: iconSize, height: iconSize, fill: theme.colors.pallete.secondary.color }, void 0), "\u00A0"] }, void 0)), jsxRuntime.jsx(Text$7, __assign$1({ testId: "HurryUpText", variant: "body", size: "small", weight: "demi", color: hurryUpTextColor }, { children: hurryUpText }), void 0), "\u00A0", clockPosition === 'right' && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Icon.PDP.Stopwatch, { width: iconSize, height: iconSize, fill: theme.colors.pallete.secondary.color }, void 0), "\u00A0"] }, void 0)), showTimer && (jsxRuntime.jsx(Timer, __assign$1({ countdown: countdown, onTimeUp: function () { } }, timerProps, { template: template }), void 0))] }), void 0));
|
|
20155
20174
|
};
|
|
20156
20175
|
|
|
20157
20176
|
var Container$5 = newStyled.div(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n svg {\n vertical-align: unset;\n }\n"], ["\n width: ", ";\n height: ", ";\n svg {\n vertical-align: unset;\n }\n"])), function (_a) {
|