@trafilea/afrodita-components 6.21.4 → 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 +4 -0
- package/build/index.esm.js +300 -279
- package/build/index.esm.js.map +1 -1
- package/build/index.js +300 -279
- 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,11 +5218,11 @@ 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
5227
|
var CouponCard = function (_a) {
|
|
5228
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;
|
|
@@ -5276,13 +5276,13 @@ var CancellationFlowAccordionContentPerPartner = {
|
|
|
5276
5276
|
};
|
|
5277
5277
|
|
|
5278
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; });
|
|
5279
|
-
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"])));
|
|
5280
5280
|
var Error$1 = function (_a) {
|
|
5281
5281
|
var error = _a.error;
|
|
5282
5282
|
var theme = useTheme();
|
|
5283
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));
|
|
5284
5284
|
};
|
|
5285
|
-
var templateObject_1$1Q, templateObject_2$
|
|
5285
|
+
var templateObject_1$1Q, templateObject_2$1g;
|
|
5286
5286
|
|
|
5287
5287
|
var BaseSelectButton = function (_a) {
|
|
5288
5288
|
var children = _a.children, as = _a.as;
|
|
@@ -5546,7 +5546,7 @@ var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (pr
|
|
|
5546
5546
|
? "\n svg {\n path {\n fill: var(--colors-shades-black-color);\n }\n }"
|
|
5547
5547
|
: '', "\n ").concat(props.text === 'White' ? "border: 0.27px var(--colors-shades-300-color) solid;" : ''),
|
|
5548
5548
|
]; });
|
|
5549
|
-
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) {
|
|
5550
5550
|
var disabled = _a.disabled;
|
|
5551
5551
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
5552
5552
|
});
|
|
@@ -5562,7 +5562,7 @@ var Checkbox = function (_a) {
|
|
|
5562
5562
|
};
|
|
5563
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));
|
|
5564
5564
|
};
|
|
5565
|
-
var templateObject_1$1N, templateObject_2$
|
|
5565
|
+
var templateObject_1$1N, templateObject_2$1f;
|
|
5566
5566
|
|
|
5567
5567
|
var CustomOption = newStyled.li(function (_a) {
|
|
5568
5568
|
var theme = _a.theme, selected = _a.selected, active = _a.active, hasImage = _a.hasImage;
|
|
@@ -5612,8 +5612,8 @@ var BaseDropdown$1 = Object.assign(BaseDropdown, {
|
|
|
5612
5612
|
});
|
|
5613
5613
|
|
|
5614
5614
|
var Container$18 = newStyled.div(templateObject_1$1M || (templateObject_1$1M = __makeTemplateObject([""], [""])));
|
|
5615
|
-
var RequiredPlaceholder = newStyled.p(templateObject_2$
|
|
5616
|
-
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) {
|
|
5617
5617
|
var fontWeight = _a.fontWeight;
|
|
5618
5618
|
return fontWeight || '';
|
|
5619
5619
|
});
|
|
@@ -5648,7 +5648,7 @@ function SimpleDropdown(_a) {
|
|
|
5648
5648
|
var DropdownContainer = showRequiredPlaceholder ? Container$18 : React$2.Fragment;
|
|
5649
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));
|
|
5650
5650
|
}
|
|
5651
|
-
var templateObject_1$1M, templateObject_2$
|
|
5651
|
+
var templateObject_1$1M, templateObject_2$1e, templateObject_3$$;
|
|
5652
5652
|
|
|
5653
5653
|
/* base styles & size variants */
|
|
5654
5654
|
var CustomRadioStyles$2 = {
|
|
@@ -5715,7 +5715,7 @@ var ContainerStyles$2 = {
|
|
|
5715
5715
|
|
|
5716
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"])));
|
|
5717
5717
|
var Container$17 = newStyled.div(__assign$1({}, ContainerStyles$2.baseStyles), function (props) { return [ContainerStyles$2[props.size](props.theme)]; });
|
|
5718
|
-
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) {
|
|
5719
5719
|
var disabled = _a.disabled;
|
|
5720
5720
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
5721
5721
|
});
|
|
@@ -5723,14 +5723,14 @@ var CustomRadio$2 = newStyled.div(function (props) { return [
|
|
|
5723
5723
|
CustomRadioStyles$2.baseStyles(props.theme, props.disabled),
|
|
5724
5724
|
CustomRadioStyles$2[props.size](props.theme, props.isChecked),
|
|
5725
5725
|
]; });
|
|
5726
|
-
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) {
|
|
5727
5727
|
var theme = _a.theme;
|
|
5728
5728
|
return theme.component.radio.textSize;
|
|
5729
5729
|
}, function (_a) {
|
|
5730
5730
|
var theme = _a.theme;
|
|
5731
5731
|
return theme.component.radio.lineHeight;
|
|
5732
5732
|
});
|
|
5733
|
-
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) {
|
|
5734
5734
|
var theme = _a.theme;
|
|
5735
5735
|
return theme.component.radio.textSize;
|
|
5736
5736
|
}, function (_a) {
|
|
@@ -5746,7 +5746,7 @@ var RadioInput = function (_a) {
|
|
|
5746
5746
|
};
|
|
5747
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));
|
|
5748
5748
|
};
|
|
5749
|
-
var templateObject_1$1L, templateObject_2$
|
|
5749
|
+
var templateObject_1$1L, templateObject_2$1d, templateObject_3$_, templateObject_4$O;
|
|
5750
5750
|
|
|
5751
5751
|
var useOnClickOutside = function (ref, handler) {
|
|
5752
5752
|
React$2.useEffect(function () {
|
|
@@ -5849,7 +5849,7 @@ var Wrapper$6 = newStyled.div(templateObject_1$1K || (templateObject_1$1K = __ma
|
|
|
5849
5849
|
var disableHover = _a.disableHover;
|
|
5850
5850
|
return (disableHover ? 0 : 1);
|
|
5851
5851
|
});
|
|
5852
|
-
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) {
|
|
5853
5853
|
var position = _a.position;
|
|
5854
5854
|
return getContainerFlexDirection(position);
|
|
5855
5855
|
}, function (_a) {
|
|
@@ -5877,14 +5877,14 @@ var TooltipContainer = newStyled.div(templateObject_2$1b || (templateObject_2$1b
|
|
|
5877
5877
|
var getTooltipMargin = function (actual, expected, margin) {
|
|
5878
5878
|
return actual === expected ? margin : '0';
|
|
5879
5879
|
};
|
|
5880
|
-
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) {
|
|
5881
5881
|
var borderColor = _a.borderColor;
|
|
5882
5882
|
return borderColor;
|
|
5883
5883
|
}, function (_a) {
|
|
5884
5884
|
var backgroundColor = _a.backgroundColor;
|
|
5885
5885
|
return backgroundColor;
|
|
5886
5886
|
});
|
|
5887
|
-
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) {
|
|
5888
5888
|
var theme = _a.theme;
|
|
5889
5889
|
return theme.component.autoship.tooltip.text.alignment;
|
|
5890
5890
|
}, function (_a) {
|
|
@@ -5904,7 +5904,7 @@ var CloseToolTip = newStyled.button(templateObject_8$i || (templateObject_8$i =
|
|
|
5904
5904
|
var _b = _a.right, right = _b === void 0 ? '.3rem' : _b;
|
|
5905
5905
|
return right;
|
|
5906
5906
|
});
|
|
5907
|
-
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;
|
|
5908
5908
|
|
|
5909
5909
|
var Tooltip = function (_a) {
|
|
5910
5910
|
var _b;
|
|
@@ -5948,7 +5948,7 @@ var benefitsColorMapper = function (_a) {
|
|
|
5948
5948
|
};
|
|
5949
5949
|
|
|
5950
5950
|
var FlexContainer$1 = newStyled.div(templateObject_1$1J || (templateObject_1$1J = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5951
|
-
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) {
|
|
5952
5952
|
var selected = _a.selected, theme = _a.theme;
|
|
5953
5953
|
return selected
|
|
5954
5954
|
? "2px solid ".concat(theme.colors.pallete.primary.color)
|
|
@@ -5962,11 +5962,11 @@ var ContainerBase$1 = newStyled.div(templateObject_2$1a || (templateObject_2$1a
|
|
|
5962
5962
|
var theme = _a.theme;
|
|
5963
5963
|
return theme.colors.pallete.primary.color;
|
|
5964
5964
|
});
|
|
5965
|
-
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) {
|
|
5966
5966
|
var onClick = _a.onClick;
|
|
5967
5967
|
return (onClick ? 'cursor: pointer;' : '');
|
|
5968
5968
|
});
|
|
5969
|
-
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"])));
|
|
5970
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) {
|
|
5971
5971
|
var theme = _a.theme;
|
|
5972
5972
|
return theme.colors.shades[200].color;
|
|
@@ -5985,7 +5985,7 @@ var StyledPrice$1 = newStyled(PriceLabelV2$1)(templateObject_12$3 || (templateOb
|
|
|
5985
5985
|
return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
|
|
5986
5986
|
});
|
|
5987
5987
|
var Container$16 = newStyled.div(templateObject_13$3 || (templateObject_13$3 = __makeTemplateObject([""], [""])));
|
|
5988
|
-
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;
|
|
5989
5989
|
|
|
5990
5990
|
var radioIds$1 = {
|
|
5991
5991
|
oneTime: {
|
|
@@ -6045,7 +6045,7 @@ var FlexContainer = newStyled.div(templateObject_1$1I || (templateObject_1$1I =
|
|
|
6045
6045
|
return theme.name === 'TheSpaDr' &&
|
|
6046
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 ";
|
|
6047
6047
|
});
|
|
6048
|
-
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) {
|
|
6049
6049
|
var theme = _a.theme, isSelected = _a.isSelected;
|
|
6050
6050
|
return isSelected
|
|
6051
6051
|
? theme.component.autoship.discountTag.backgroundColor
|
|
@@ -6061,7 +6061,7 @@ var getSelectedBorder = function (_a) {
|
|
|
6061
6061
|
}
|
|
6062
6062
|
return "1.5px solid ".concat(colors.shades['700'].color);
|
|
6063
6063
|
};
|
|
6064
|
-
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) {
|
|
6065
6065
|
var selected = _a.selected, theme = _a.theme;
|
|
6066
6066
|
return selected ? getSelectedBorder(theme) : "1px solid ".concat(theme.colors.shades[200].color);
|
|
6067
6067
|
}, function (_a) {
|
|
@@ -6073,7 +6073,7 @@ var ContainerBase = newStyled.div(templateObject_3$W || (templateObject_3$W = __
|
|
|
6073
6073
|
var theme = _a.theme;
|
|
6074
6074
|
return theme.colors.pallete.primary.color;
|
|
6075
6075
|
});
|
|
6076
|
-
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) {
|
|
6077
6077
|
var onClick = _a.onClick;
|
|
6078
6078
|
return (onClick ? 'cursor: pointer;' : '');
|
|
6079
6079
|
});
|
|
@@ -6098,7 +6098,7 @@ var TooltipWrapper = newStyled.div(templateObject_13$2 || (templateObject_13$2 =
|
|
|
6098
6098
|
var theme = _a.theme;
|
|
6099
6099
|
return theme.component.autoship.tooltip.margin;
|
|
6100
6100
|
});
|
|
6101
|
-
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;
|
|
6102
6102
|
|
|
6103
6103
|
var radioIds = {
|
|
6104
6104
|
oneTime: {
|
|
@@ -6177,12 +6177,12 @@ var componentSizeMapper = (_a$2 = {},
|
|
|
6177
6177
|
_a$2);
|
|
6178
6178
|
|
|
6179
6179
|
var CustomerDetails = newStyled.div(templateObject_1$1H || (templateObject_1$1H = __makeTemplateObject([""], [""])));
|
|
6180
|
-
var CustomerInfo = newStyled.div(templateObject_2$
|
|
6181
|
-
var Name = newStyled.h4(templateObject_3$
|
|
6182
|
-
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"])));
|
|
6183
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"])));
|
|
6184
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"])));
|
|
6185
|
-
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;
|
|
6186
6186
|
|
|
6187
6187
|
var NameWithStars = function (_a) {
|
|
6188
6188
|
var name = _a.name, size = _a.size;
|
|
@@ -6201,9 +6201,9 @@ var ResultFeedback = function (_a) {
|
|
|
6201
6201
|
};
|
|
6202
6202
|
|
|
6203
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; });
|
|
6204
|
-
var ImageContainer$7 = newStyled.div(templateObject_2$
|
|
6205
|
-
var ImageCard = newStyled.div(templateObject_3$
|
|
6206
|
-
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) {
|
|
6207
6207
|
var theme = _a.theme;
|
|
6208
6208
|
return theme.colors.pallete.secondary.color;
|
|
6209
6209
|
}, function (_a) {
|
|
@@ -6213,7 +6213,7 @@ var UserInfoText = newStyled.div(templateObject_4$I || (templateObject_4$I = __m
|
|
|
6213
6213
|
var theme = _a.theme, size = _a.size;
|
|
6214
6214
|
return theme.component.beforeAfter.size[componentSizeMapper[size]].userInfoText.mobile.fontSize;
|
|
6215
6215
|
});
|
|
6216
|
-
var templateObject_1$1G, templateObject_2$
|
|
6216
|
+
var templateObject_1$1G, templateObject_2$18, templateObject_3$V, templateObject_4$J;
|
|
6217
6217
|
|
|
6218
6218
|
/* base styles & size variants */
|
|
6219
6219
|
var getStylesBySize$d = function (size, theme) {
|
|
@@ -6336,13 +6336,13 @@ var Card$2 = Object.assign(Card$1, {
|
|
|
6336
6336
|
var templateObject_1$1D;
|
|
6337
6337
|
|
|
6338
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"])));
|
|
6339
|
-
var StyledContainer = newStyled.div(templateObject_2$
|
|
6340
|
-
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) {
|
|
6341
6341
|
var color = _a.color;
|
|
6342
6342
|
return color;
|
|
6343
6343
|
});
|
|
6344
|
-
var YouAreSaving = newStyled(Text$7)(templateObject_4$
|
|
6345
|
-
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;
|
|
6346
6346
|
|
|
6347
6347
|
var Minimalistic = function (_a) {
|
|
6348
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;
|
|
@@ -6351,15 +6351,15 @@ var Minimalistic = function (_a) {
|
|
|
6351
6351
|
};
|
|
6352
6352
|
|
|
6353
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"])));
|
|
6354
|
-
var Title$9 = newStyled.h1(templateObject_2$
|
|
6355
|
-
var Details$1 = newStyled.span(templateObject_3$
|
|
6356
|
-
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"])));
|
|
6357
6357
|
var Simple = function (_a) {
|
|
6358
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;
|
|
6359
6359
|
var theme = useTheme();
|
|
6360
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));
|
|
6361
6361
|
};
|
|
6362
|
-
var templateObject_1$1B, templateObject_2$
|
|
6362
|
+
var templateObject_1$1B, templateObject_2$16, templateObject_3$T, templateObject_4$H;
|
|
6363
6363
|
|
|
6364
6364
|
var Bundle = {
|
|
6365
6365
|
Minimalistic: Minimalistic,
|
|
@@ -6370,8 +6370,8 @@ var Container$11 = newStyled.div(templateObject_1$1A || (templateObject_1$1A = _
|
|
|
6370
6370
|
var displayBNPL = _a.displayBNPL;
|
|
6371
6371
|
return (displayBNPL ? 'flex' : 'none');
|
|
6372
6372
|
});
|
|
6373
|
-
var TextContainer$1 = newStyled.div(templateObject_2$
|
|
6374
|
-
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"])));
|
|
6375
6375
|
var BuyNowPayLater = function (_a) {
|
|
6376
6376
|
var _b;
|
|
6377
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;
|
|
@@ -6383,7 +6383,7 @@ var BuyNowPayLater = function (_a) {
|
|
|
6383
6383
|
}
|
|
6384
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));
|
|
6385
6385
|
};
|
|
6386
|
-
var templateObject_1$1A, templateObject_2$
|
|
6386
|
+
var templateObject_1$1A, templateObject_2$15, templateObject_3$S;
|
|
6387
6387
|
|
|
6388
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; });
|
|
6389
6389
|
var Title$8 = function (_a) {
|
|
@@ -6443,9 +6443,9 @@ var CartProductItem = {
|
|
|
6443
6443
|
};
|
|
6444
6444
|
|
|
6445
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"])));
|
|
6446
|
-
var MobileContainer = newStyled(Container$$)(templateObject_2$
|
|
6447
|
-
var DollarPart = newStyled.span(templateObject_3$
|
|
6448
|
-
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"])));
|
|
6449
6449
|
var MobileDollarPart = newStyled(DollarPart)(templateObject_5$v || (templateObject_5$v = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
6450
6450
|
var MobileClubMembersText = newStyled(ClubMembersText)(templateObject_6$q || (templateObject_6$q = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
6451
6451
|
var DesktopDollarPart = newStyled(DollarPart)(templateObject_7$j || (templateObject_7$j = __makeTemplateObject(["\n font-size: 13px;\n"], ["\n font-size: 13px;\n"])));
|
|
@@ -6455,7 +6455,7 @@ var ClubPriceLabel = function (_a) {
|
|
|
6455
6455
|
var isMobile = useWindowDimensions().isMobile;
|
|
6456
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));
|
|
6457
6457
|
};
|
|
6458
|
-
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;
|
|
6459
6459
|
|
|
6460
6460
|
var Spacing = function (_a) {
|
|
6461
6461
|
var size = _a.size, _b = _a.type, type = _b === void 0 ? 'block' : _b, children = _a.children, styleProp = _a.style;
|
|
@@ -6464,9 +6464,9 @@ var Spacing = function (_a) {
|
|
|
6464
6464
|
};
|
|
6465
6465
|
|
|
6466
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"])));
|
|
6467
|
-
var Content$2 = newStyled('div')(templateObject_2$
|
|
6468
|
-
var BarContainer$1 = newStyled('div')(templateObject_3$
|
|
6469
|
-
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) {
|
|
6470
6470
|
var index = _a.index;
|
|
6471
6471
|
return "".concat(6 + 3 * index, "px");
|
|
6472
6472
|
}, function (_a) {
|
|
@@ -6477,12 +6477,12 @@ var StrengthBars = function (_a) {
|
|
|
6477
6477
|
var _b = _a.barsFilled, barsFilled = _b === void 0 ? 0 : _b, supportText = _a.supportText;
|
|
6478
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));
|
|
6479
6479
|
};
|
|
6480
|
-
var templateObject_1$1t, templateObject_2$
|
|
6480
|
+
var templateObject_1$1t, templateObject_2$13, templateObject_3$Q, templateObject_4$F;
|
|
6481
6481
|
|
|
6482
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"])));
|
|
6483
|
-
var ClubPriceTagSpan = newStyled.span(templateObject_2$
|
|
6484
|
-
var PriceContainer$1 = newStyled.span(templateObject_3$
|
|
6485
|
-
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"])));
|
|
6486
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"])));
|
|
6487
6487
|
var RegularPriceTag = function () {
|
|
6488
6488
|
return jsxRuntime.jsx(RegularPriceTagSpan, { children: "REGULAR PRICE" }, void 0);
|
|
@@ -6536,7 +6536,7 @@ var PriceLabelV4 = function (_a) {
|
|
|
6536
6536
|
? finalPriceArray[0]
|
|
6537
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));
|
|
6538
6538
|
};
|
|
6539
|
-
var templateObject_1$1s, templateObject_2$
|
|
6539
|
+
var templateObject_1$1s, templateObject_2$12, templateObject_3$P, templateObject_4$E, templateObject_5$u;
|
|
6540
6540
|
|
|
6541
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"])));
|
|
6542
6542
|
var templateObject_1$1r;
|
|
@@ -6653,9 +6653,9 @@ var ImageContainer$6 = newStyled.div(function (_a) {
|
|
|
6653
6653
|
});
|
|
6654
6654
|
});
|
|
6655
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"])));
|
|
6656
|
-
var Container$X = newStyled.a(templateObject_2$
|
|
6657
|
-
var ProdCardContainer$4 = newStyled.div(templateObject_3$
|
|
6658
|
-
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; });
|
|
6659
6659
|
var getStylesBySize$c = function (size) {
|
|
6660
6660
|
switch (size) {
|
|
6661
6661
|
case exports.ComponentSize.Medium:
|
|
@@ -6748,7 +6748,7 @@ var ProductItemMobile = function (_a) {
|
|
|
6748
6748
|
};
|
|
6749
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));
|
|
6750
6750
|
};
|
|
6751
|
-
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;
|
|
6752
6752
|
|
|
6753
6753
|
var ImageContainer$5 = newStyled.div(function (_a) {
|
|
6754
6754
|
var width = _a.width, height = _a.height;
|
|
@@ -6759,9 +6759,9 @@ var ImageContainer$5 = newStyled.div(function (_a) {
|
|
|
6759
6759
|
});
|
|
6760
6760
|
});
|
|
6761
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; });
|
|
6762
|
-
var Container$W = newStyled.a(templateObject_2
|
|
6763
|
-
var ProdCardContainer$3 = newStyled.div(templateObject_3$
|
|
6764
|
-
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; });
|
|
6765
6765
|
var getStylesBySize$b = function (size) {
|
|
6766
6766
|
switch (size) {
|
|
6767
6767
|
case exports.ComponentSize.Medium:
|
|
@@ -6847,7 +6847,7 @@ var ProductItemTK = function (_a) {
|
|
|
6847
6847
|
marginTop: hasSpacing ? undefined : textContainerGap,
|
|
6848
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));
|
|
6849
6849
|
};
|
|
6850
|
-
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;
|
|
6851
6851
|
|
|
6852
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"])));
|
|
6853
6853
|
function withProductGrid(ProductItemComponent, data) {
|
|
@@ -6907,9 +6907,9 @@ var OutOfStock = function (_a) {
|
|
|
6907
6907
|
};
|
|
6908
6908
|
|
|
6909
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"])));
|
|
6910
|
-
newStyled(lt.Label)(templateObject_2
|
|
6911
|
-
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$
|
|
6912
|
-
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"])));
|
|
6913
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"])));
|
|
6914
6914
|
var Label$4 = function (_a) {
|
|
6915
6915
|
var label = _a.label, values = _a.values;
|
|
@@ -6928,7 +6928,7 @@ var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
|
|
|
6928
6928
|
Option: Option,
|
|
6929
6929
|
OptionsContainer: OptionsContainer,
|
|
6930
6930
|
});
|
|
6931
|
-
var templateObject_1$1k, templateObject_2
|
|
6931
|
+
var templateObject_1$1k, templateObject_2$$, templateObject_3$M, templateObject_4$B, templateObject_5$r;
|
|
6932
6932
|
|
|
6933
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) {
|
|
6934
6934
|
var borderColor = _a.borderColor;
|
|
@@ -6937,14 +6937,14 @@ var Container$U = newStyled.div(templateObject_1$1j || (templateObject_1$1j = __
|
|
|
6937
6937
|
var noStock = _a.noStock;
|
|
6938
6938
|
return (noStock ? '0.4' : '1');
|
|
6939
6939
|
});
|
|
6940
|
-
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"])));
|
|
6941
6941
|
var PatternSelector = function (_a) {
|
|
6942
6942
|
var url = _a.url, selected = _a.selected, testId = _a.testId, noStock = _a.noStock;
|
|
6943
6943
|
var theme = useTheme();
|
|
6944
6944
|
var outerBorder = selected ? theme.colors.shades['550'].color : 'transparent';
|
|
6945
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));
|
|
6946
6946
|
};
|
|
6947
|
-
var templateObject_1$1j, templateObject_2$
|
|
6947
|
+
var templateObject_1$1j, templateObject_2$_;
|
|
6948
6948
|
|
|
6949
6949
|
var renderOptions$1 = function (selectedColor, options) {
|
|
6950
6950
|
if (options == null || options.length === 0) {
|
|
@@ -7004,12 +7004,12 @@ var SingleColorPicker = function (_a) {
|
|
|
7004
7004
|
};
|
|
7005
7005
|
|
|
7006
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'); });
|
|
7007
|
-
var Col$1 = newStyled.div(templateObject_2$
|
|
7008
|
-
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) {
|
|
7009
7009
|
return props.rightToLeft &&
|
|
7010
7010
|
"\n flex-direction: row-reverse;\n justify-content: space-between;\n ";
|
|
7011
7011
|
});
|
|
7012
|
-
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; });
|
|
7013
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; });
|
|
7014
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; });
|
|
7015
7015
|
var CrossSellCheckbox = function (_a) {
|
|
@@ -7017,7 +7017,7 @@ var CrossSellCheckbox = function (_a) {
|
|
|
7017
7017
|
var theme = useTheme();
|
|
7018
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));
|
|
7019
7019
|
};
|
|
7020
|
-
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;
|
|
7021
7021
|
|
|
7022
7022
|
var index$1 = /*#__PURE__*/Object.freeze({
|
|
7023
7023
|
__proto__: null,
|
|
@@ -7067,11 +7067,11 @@ var StyledBaseButton = newStyled(BaseButton)(templateObject_1$1h || (templateObj
|
|
|
7067
7067
|
var theme = _a.theme;
|
|
7068
7068
|
return theme.colors.text.disabled;
|
|
7069
7069
|
});
|
|
7070
|
-
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) {
|
|
7071
7071
|
var marginLeft = _a.marginLeft, marginRight = _a.marginRight;
|
|
7072
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 ");
|
|
7073
7073
|
});
|
|
7074
|
-
var templateObject_1$1h, templateObject_2$
|
|
7074
|
+
var templateObject_1$1h, templateObject_2$Y;
|
|
7075
7075
|
|
|
7076
7076
|
var BaseCTA = function (_a) {
|
|
7077
7077
|
var _b, _c, _d;
|
|
@@ -7159,25 +7159,25 @@ var ButtonSecondaryOutline = function (props) {
|
|
|
7159
7159
|
};
|
|
7160
7160
|
|
|
7161
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; });
|
|
7162
|
-
var IconContainer$4 = newStyled.div(templateObject_2$
|
|
7163
|
-
var Text$3 = newStyled.p(templateObject_3$
|
|
7164
|
-
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; });
|
|
7165
7165
|
var Note = function (_a) {
|
|
7166
7166
|
var accentColor = _a.accentColor, color = _a.color, backgroundColor = _a.backgroundColor, importantNoteText = _a.importantNoteText, text = _a.text;
|
|
7167
7167
|
var theme = useTheme();
|
|
7168
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));
|
|
7169
7169
|
};
|
|
7170
|
-
var templateObject_1$1g, templateObject_2$
|
|
7170
|
+
var templateObject_1$1g, templateObject_2$X, templateObject_3$K, templateObject_4$z;
|
|
7171
7171
|
|
|
7172
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) {
|
|
7173
7173
|
var theme = _a.theme;
|
|
7174
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 ");
|
|
7175
7175
|
});
|
|
7176
|
-
var Line = newStyled.div(templateObject_2$
|
|
7177
|
-
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({
|
|
7178
7178
|
flexDirection: ['column', 'row'],
|
|
7179
7179
|
}));
|
|
7180
|
-
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({
|
|
7181
7181
|
margin: ['0', '0 1.25rem'],
|
|
7182
7182
|
marginBottom: ['1.875rem', '0'],
|
|
7183
7183
|
alignItems: ['center', 'flex-start'],
|
|
@@ -7212,7 +7212,7 @@ var DeliveryDetails = function (_a) {
|
|
|
7212
7212
|
var theme = useTheme();
|
|
7213
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));
|
|
7214
7214
|
};
|
|
7215
|
-
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;
|
|
7216
7216
|
|
|
7217
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) {
|
|
7218
7218
|
var top = _a.top;
|
|
@@ -7221,7 +7221,7 @@ var Backdrop = newStyled.div(templateObject_1$1e || (templateObject_1$1e = __mak
|
|
|
7221
7221
|
var isOpen = _a.isOpen, backgroundColor = _a.backgroundColor;
|
|
7222
7222
|
return isOpen ? "background-color: ".concat(backgroundColor, ";") : 'transparent';
|
|
7223
7223
|
});
|
|
7224
|
-
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) {
|
|
7225
7225
|
var height = _a.height;
|
|
7226
7226
|
return height;
|
|
7227
7227
|
}, function (_a) {
|
|
@@ -7268,7 +7268,7 @@ var Drawer = function (_a) {
|
|
|
7268
7268
|
}, [isOpen, onClose, onOpen]);
|
|
7269
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;
|
|
7270
7270
|
};
|
|
7271
|
-
var templateObject_1$1e, templateObject_2$
|
|
7271
|
+
var templateObject_1$1e, templateObject_2$V;
|
|
7272
7272
|
|
|
7273
7273
|
var TooltipArrow = function (_a) {
|
|
7274
7274
|
var height = _a.height, width = _a.width, fill = _a.fill, stroke = _a.stroke;
|
|
@@ -7276,12 +7276,12 @@ var TooltipArrow = function (_a) {
|
|
|
7276
7276
|
};
|
|
7277
7277
|
|
|
7278
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"])));
|
|
7279
|
-
var Item$2 = newStyled.li(templateObject_2$
|
|
7280
|
-
var DropdownWrapper = newStyled.div(templateObject_3$
|
|
7281
|
-
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"])));
|
|
7282
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; });
|
|
7283
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; });
|
|
7284
|
-
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;
|
|
7285
7285
|
|
|
7286
7286
|
var DropdownListIcons = function (_a) {
|
|
7287
7287
|
var items = _a.items;
|
|
@@ -7295,12 +7295,12 @@ var Dropdown = function (_a) {
|
|
|
7295
7295
|
};
|
|
7296
7296
|
|
|
7297
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"])));
|
|
7298
|
-
var DropdownLabel = newStyled.div(templateObject_2$
|
|
7299
|
-
var SizeLabel = newStyled.span(templateObject_3$
|
|
7300
|
-
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"])));
|
|
7301
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"])));
|
|
7302
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"])));
|
|
7303
|
-
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;
|
|
7304
7304
|
|
|
7305
7305
|
var SizeDropdown = function (_a) {
|
|
7306
7306
|
var options = _a.options, defaultLabel = _a.defaultLabel, onOptionSelect = _a.onOptionSelect;
|
|
@@ -7324,9 +7324,9 @@ var SizeDropdown = function (_a) {
|
|
|
7324
7324
|
};
|
|
7325
7325
|
|
|
7326
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; });
|
|
7327
|
-
var DialogDropdownListContainer = newStyled.ul(templateObject_2$
|
|
7328
|
-
var DialogDropdownListItem = newStyled.li(templateObject_3$
|
|
7329
|
-
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"])));
|
|
7330
7330
|
var DropdownDialog = function (_a) {
|
|
7331
7331
|
var options = _a.options, _b = _a.position, top = _b.top, right = _b.right, style = _a.style, className = _a.className;
|
|
7332
7332
|
var theme = useTheme$1();
|
|
@@ -7335,7 +7335,7 @@ var DropdownDialog = function (_a) {
|
|
|
7335
7335
|
return (jsxRuntime.jsx(DialogDropdownListItem, { children: jsxRuntime.jsx(DialogDropdownLink, __assign$1({ href: value }, { children: label }), void 0) }, idx));
|
|
7336
7336
|
}) }), void 0) }), void 0));
|
|
7337
7337
|
};
|
|
7338
|
-
var templateObject_1$1b, templateObject_2$
|
|
7338
|
+
var templateObject_1$1b, templateObject_2$S, templateObject_3$G, templateObject_4$v;
|
|
7339
7339
|
|
|
7340
7340
|
function FilteringDropdown(_a) {
|
|
7341
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;
|
|
@@ -7369,28 +7369,28 @@ function FilteringDropdown(_a) {
|
|
|
7369
7369
|
}
|
|
7370
7370
|
|
|
7371
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; });
|
|
7372
|
-
var H3 = newStyled.h3(templateObject_2$
|
|
7373
|
-
var ArrowContainer = newStyled.div(templateObject_3$
|
|
7374
|
-
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'); });
|
|
7375
7375
|
var Accordion = function (_a) {
|
|
7376
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;
|
|
7377
7377
|
var theme = useTheme();
|
|
7378
7378
|
var _d = React__default["default"].useState(isOpenByDefault), isOpen = _d[0], setIsOpen = _d[1];
|
|
7379
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));
|
|
7380
7380
|
};
|
|
7381
|
-
var templateObject_1$1a, templateObject_2$
|
|
7381
|
+
var templateObject_1$1a, templateObject_2$R, templateObject_3$F, templateObject_4$u;
|
|
7382
7382
|
|
|
7383
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; });
|
|
7384
|
-
var Header$1 = newStyled.div(templateObject_2$
|
|
7385
|
-
var MobileHeader = newStyled.div(templateObject_3$
|
|
7386
|
-
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"])));
|
|
7387
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; });
|
|
7388
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; });
|
|
7389
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'); });
|
|
7390
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; });
|
|
7391
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"])));
|
|
7392
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"])));
|
|
7393
|
-
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;
|
|
7394
7394
|
|
|
7395
7395
|
var getStylesBySize$a = function (size, theme) {
|
|
7396
7396
|
switch (size) {
|
|
@@ -7456,8 +7456,8 @@ var SelectorSecondary = function (_a) {
|
|
|
7456
7456
|
};
|
|
7457
7457
|
|
|
7458
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"])));
|
|
7459
|
-
var LI = newStyled.li(templateObject_2$
|
|
7460
|
-
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"])));
|
|
7461
7461
|
var Tags = function (_a) {
|
|
7462
7462
|
var _b = _a.color, color = _b === void 0 ? '#fff6ef' : _b, items = _a.items, onCloseClick = _a.onCloseClick;
|
|
7463
7463
|
var theme = useTheme();
|
|
@@ -7465,7 +7465,7 @@ var Tags = function (_a) {
|
|
|
7465
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));
|
|
7466
7466
|
}) }), void 0));
|
|
7467
7467
|
};
|
|
7468
|
-
var templateObject_1$18, templateObject_2$
|
|
7468
|
+
var templateObject_1$18, templateObject_2$P, templateObject_3$D;
|
|
7469
7469
|
|
|
7470
7470
|
var Filters = function (_a) {
|
|
7471
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;
|
|
@@ -7602,7 +7602,7 @@ var FilterCheckboxColor = function (_a) {
|
|
|
7602
7602
|
};
|
|
7603
7603
|
|
|
7604
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"])));
|
|
7605
|
-
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"])));
|
|
7606
7606
|
var FitGuarantee = function (_a) {
|
|
7607
7607
|
var _b;
|
|
7608
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;
|
|
@@ -7620,10 +7620,10 @@ var FitGuarantee = function (_a) {
|
|
|
7620
7620
|
fontWeight: theme.component.text.fitGuarantee.titleFontWeight,
|
|
7621
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));
|
|
7622
7622
|
};
|
|
7623
|
-
var templateObject_1$17, templateObject_2$
|
|
7623
|
+
var templateObject_1$17, templateObject_2$O;
|
|
7624
7624
|
|
|
7625
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"])));
|
|
7626
|
-
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; });
|
|
7627
7627
|
var textButtonStyles$1 = function (theme) { return ({
|
|
7628
7628
|
border: 'none',
|
|
7629
7629
|
background: 'transparent',
|
|
@@ -7638,7 +7638,7 @@ var FitPredictor = function (_a) {
|
|
|
7638
7638
|
var theme = useTheme();
|
|
7639
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));
|
|
7640
7640
|
};
|
|
7641
|
-
var templateObject_1$16, templateObject_2$
|
|
7641
|
+
var templateObject_1$16, templateObject_2$N;
|
|
7642
7642
|
|
|
7643
7643
|
var Button$7 = newStyled.button(function () { return ({
|
|
7644
7644
|
background: 'transparent',
|
|
@@ -11948,7 +11948,7 @@ var SliderNavigation = function (_a) {
|
|
|
11948
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));
|
|
11949
11949
|
};
|
|
11950
11950
|
|
|
11951
|
-
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) {
|
|
11952
11952
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
11953
11953
|
return borderRadiusVariant &&
|
|
11954
11954
|
"\n border-radius: 20px;\n ";
|
|
@@ -11956,8 +11956,10 @@ var Image$1 = newStyled.img(templateObject_1$14 || (templateObject_1$14 = __make
|
|
|
11956
11956
|
var theme = _a.theme;
|
|
11957
11957
|
return theme.component.gallery.thumbnail.desktop.width;
|
|
11958
11958
|
}, function (_a) {
|
|
11959
|
-
var theme = _a.theme;
|
|
11960
|
-
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;
|
|
11961
11963
|
}, function (_a) {
|
|
11962
11964
|
var selected = _a.selected, theme = _a.theme, previewImgBorderColor = _a.previewImgBorderColor;
|
|
11963
11965
|
return selected
|
|
@@ -11967,14 +11969,14 @@ var Image$1 = newStyled.img(templateObject_1$14 || (templateObject_1$14 = __make
|
|
|
11967
11969
|
var templateObject_1$14;
|
|
11968
11970
|
|
|
11969
11971
|
var ImageSmallPreview = function (_a) {
|
|
11970
|
-
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;
|
|
11971
11973
|
var theme = useTheme();
|
|
11972
|
-
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));
|
|
11973
11975
|
};
|
|
11974
11976
|
|
|
11975
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"])));
|
|
11976
|
-
var verticalStyles = css(templateObject_2$
|
|
11977
|
-
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) {
|
|
11978
11980
|
var position = _a.position;
|
|
11979
11981
|
return (position == 'horizontal' ? horizontalStyles : verticalStyles);
|
|
11980
11982
|
}, function (_a) {
|
|
@@ -11982,15 +11984,15 @@ var Container$P = newStyled.div(templateObject_3$B || (templateObject_3$B = __ma
|
|
|
11982
11984
|
return hasOverflowArrows &&
|
|
11983
11985
|
"\n scroll-behavior: smooth;\n &::-webkit-scrollbar {\n visibility: hidden;\n }\n ";
|
|
11984
11986
|
});
|
|
11985
|
-
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"])));
|
|
11986
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"])));
|
|
11987
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"])));
|
|
11988
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"])));
|
|
11989
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"])));
|
|
11990
|
-
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;
|
|
11991
11993
|
|
|
11992
11994
|
var ImagePreviewList = function (_a) {
|
|
11993
|
-
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;
|
|
11994
11996
|
var handleScrollVerticalPrev = function () {
|
|
11995
11997
|
var element = document.querySelector(".imageListContainer");
|
|
11996
11998
|
element.scrollBy(0, -200);
|
|
@@ -12003,7 +12005,7 @@ var ImagePreviewList = function (_a) {
|
|
|
12003
12005
|
arrowWidth: 0.75,
|
|
12004
12006
|
arrowHeight: 1.25,
|
|
12005
12007
|
arrowPadding: 1.625,
|
|
12006
|
-
}, 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));
|
|
12007
12009
|
};
|
|
12008
12010
|
|
|
12009
12011
|
var propTypes = {exports: {}};
|
|
@@ -13598,8 +13600,8 @@ InnerImageZoom.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
13598
13600
|
} : {};
|
|
13599
13601
|
|
|
13600
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); });
|
|
13601
|
-
var ProgressFiller = newStyled.div(templateObject_2$
|
|
13602
|
-
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;
|
|
13603
13605
|
|
|
13604
13606
|
var ProgressBar$1 = function (_a) {
|
|
13605
13607
|
var progress = _a.progress, hide = _a.hide;
|
|
@@ -13607,11 +13609,11 @@ var ProgressBar$1 = function (_a) {
|
|
|
13607
13609
|
};
|
|
13608
13610
|
|
|
13609
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"])));
|
|
13610
|
-
var HTMLVideo = newStyled.video(templateObject_2$
|
|
13611
|
-
var PlayIcon = newStyled(Icon.PDP.PlayVideo)(templateObject_3$
|
|
13612
|
-
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"])));
|
|
13613
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"])));
|
|
13614
|
-
var templateObject_1$11, templateObject_2$
|
|
13616
|
+
var templateObject_1$11, templateObject_2$K, templateObject_3$B, templateObject_4$r, templateObject_5$k;
|
|
13615
13617
|
|
|
13616
13618
|
var Video$1 = function (_a) {
|
|
13617
13619
|
var _b, _c, _d, _e;
|
|
@@ -13657,20 +13659,20 @@ var Container$N = newStyled.div(templateObject_1$10 || (templateObject_1$10 = __
|
|
|
13657
13659
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
13658
13660
|
return borderRadiusVariant && "border-radius: 40px;";
|
|
13659
13661
|
});
|
|
13660
|
-
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) {
|
|
13661
13663
|
var borderRadiusVariant = _a.borderRadiusVariant, theme = _a.theme;
|
|
13662
13664
|
return borderRadiusVariant ? '50px' : theme.component.gallery.tagPosition.left;
|
|
13663
13665
|
}, function (_a) {
|
|
13664
13666
|
var borderRadiusVariant = _a.borderRadiusVariant, theme = _a.theme;
|
|
13665
13667
|
return borderRadiusVariant ? '10px' : theme.component.gallery.tagPosition.top;
|
|
13666
13668
|
});
|
|
13667
|
-
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) {
|
|
13668
13670
|
var isCTAHidden = _a.isCTAHidden;
|
|
13669
13671
|
return (isCTAHidden ? '60px' : '120px');
|
|
13670
13672
|
});
|
|
13671
|
-
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"])));
|
|
13672
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"])));
|
|
13673
|
-
var templateObject_1$10, templateObject_2$
|
|
13675
|
+
var templateObject_1$10, templateObject_2$J, templateObject_3$A, templateObject_4$q, templateObject_5$j;
|
|
13674
13676
|
|
|
13675
13677
|
var ImageProductSlide$1 = function (_a) {
|
|
13676
13678
|
var _b;
|
|
@@ -13694,7 +13696,7 @@ var getInitialIndex = function (images, selectedValue) {
|
|
|
13694
13696
|
return 0;
|
|
13695
13697
|
};
|
|
13696
13698
|
var ProductGallery = function (_a) {
|
|
13697
|
-
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;
|
|
13698
13700
|
var _g = React$2.useState(getInitialIndex(images, selectedValue)), activeIndex = _g[0], setActiveIndex = _g[1];
|
|
13699
13701
|
React$2.useEffect(function () {
|
|
13700
13702
|
if (selectedValue && !hasToPreserveOrder) {
|
|
@@ -13710,7 +13712,7 @@ var ProductGallery = function (_a) {
|
|
|
13710
13712
|
setActiveIndex(index);
|
|
13711
13713
|
};
|
|
13712
13714
|
var selectedImage = images[activeIndex];
|
|
13713
|
-
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));
|
|
13714
13716
|
};
|
|
13715
13717
|
|
|
13716
13718
|
var getStylesBySize$8 = function (size) {
|
|
@@ -13829,8 +13831,8 @@ var IconsWithTitle = function (_a) {
|
|
|
13829
13831
|
};
|
|
13830
13832
|
|
|
13831
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'); });
|
|
13832
|
-
var ImageContainer$4 = newStyled.div(templateObject_2$
|
|
13833
|
-
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) {
|
|
13834
13836
|
var titlePosition = _a.titlePosition;
|
|
13835
13837
|
return titlePosition == 'center' &&
|
|
13836
13838
|
"\nalign-items:center;\njustify-content:center;\n";
|
|
@@ -13840,13 +13842,13 @@ var ImageCardWithDescription = function (_a) {
|
|
|
13840
13842
|
var isMobile = useWindowDimensions().isMobile;
|
|
13841
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));
|
|
13842
13844
|
};
|
|
13843
|
-
var templateObject_1$Y, templateObject_2$
|
|
13845
|
+
var templateObject_1$Y, templateObject_2$I, templateObject_3$z;
|
|
13844
13846
|
|
|
13845
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) {
|
|
13846
13848
|
var color = _a.color;
|
|
13847
13849
|
return color;
|
|
13848
13850
|
});
|
|
13849
|
-
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) {
|
|
13850
13852
|
var color = _a.color;
|
|
13851
13853
|
return color;
|
|
13852
13854
|
});
|
|
@@ -13855,7 +13857,7 @@ var InputLabel = function (_a) {
|
|
|
13855
13857
|
var theme = useTheme();
|
|
13856
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));
|
|
13857
13859
|
};
|
|
13858
|
-
var templateObject_1$X, templateObject_2$
|
|
13860
|
+
var templateObject_1$X, templateObject_2$H;
|
|
13859
13861
|
|
|
13860
13862
|
var containerByStatus = function (theme, status) {
|
|
13861
13863
|
if (status === exports.InputValidationType.Valid)
|
|
@@ -13868,8 +13870,8 @@ var Container$I = newStyled.div(templateObject_1$W || (templateObject_1$W = __ma
|
|
|
13868
13870
|
var theme = _a.theme, status = _a.status, hasError = _a.hasError;
|
|
13869
13871
|
return hasError ? '' : containerByStatus(theme, status);
|
|
13870
13872
|
});
|
|
13871
|
-
var StyledLabel$2 = newStyled.label(templateObject_2$
|
|
13872
|
-
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) {
|
|
13873
13875
|
var inlinePlaceholder = _a.inlinePlaceholder, theme = _a.theme;
|
|
13874
13876
|
return theme.component[inlinePlaceholder ? 'inputPlaceholder' : 'input'].padding;
|
|
13875
13877
|
}, function (_a) {
|
|
@@ -13924,7 +13926,7 @@ var StyledInput = newStyled.input(templateObject_3$x || (templateObject_3$x = __
|
|
|
13924
13926
|
return hasValue &&
|
|
13925
13927
|
"& ~ span {\n bottom: 1.625rem;\n font-size: 0.75rem;\n opacity: 1;\n }";
|
|
13926
13928
|
});
|
|
13927
|
-
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) {
|
|
13928
13930
|
var size = _a.size, inlinePlaceholder = _a.inlinePlaceholder;
|
|
13929
13931
|
return !inlinePlaceholder ? (size === 'small' ? '36px' : '40px') : '48px';
|
|
13930
13932
|
});
|
|
@@ -13942,7 +13944,7 @@ var AnimatedPlaceholder = newStyled.span(templateObject_5$i || (templateObject_5
|
|
|
13942
13944
|
return theme.component.input.lineHeight;
|
|
13943
13945
|
});
|
|
13944
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"])));
|
|
13945
|
-
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;
|
|
13946
13948
|
|
|
13947
13949
|
var BaseInput = function (_a) {
|
|
13948
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"]);
|
|
@@ -13990,7 +13992,7 @@ var Container$H = newStyled.div(templateObject_1$V || (templateObject_1$V = __ma
|
|
|
13990
13992
|
var theme = _a.theme;
|
|
13991
13993
|
return theme.component.inputCustom.input.borderRadius;
|
|
13992
13994
|
});
|
|
13993
|
-
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) {
|
|
13994
13996
|
var theme = _a.theme, defaultRounded = _a.defaultRounded;
|
|
13995
13997
|
return defaultRounded
|
|
13996
13998
|
? theme.component.inputCustom.button.borderRadius
|
|
@@ -14007,19 +14009,19 @@ var Custom = function (_a) {
|
|
|
14007
14009
|
}); }, [variant, onClick, text, rest.disabled]);
|
|
14008
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));
|
|
14009
14011
|
};
|
|
14010
|
-
var templateObject_1$V, templateObject_2$
|
|
14012
|
+
var templateObject_1$V, templateObject_2$F;
|
|
14011
14013
|
|
|
14012
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) {
|
|
14013
14015
|
var size = _a.size;
|
|
14014
14016
|
return (size === 'small' ? '36px' : '');
|
|
14015
14017
|
});
|
|
14016
|
-
var SuccessMessage = newStyled.div(templateObject_2$
|
|
14017
|
-
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"])));
|
|
14018
14020
|
var Success = function (_a) {
|
|
14019
14021
|
var children = _a.children, successText = _a.successText, size = _a.size;
|
|
14020
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));
|
|
14021
14023
|
};
|
|
14022
|
-
var templateObject_1$U, templateObject_2$
|
|
14024
|
+
var templateObject_1$U, templateObject_2$E, templateObject_3$x;
|
|
14023
14025
|
|
|
14024
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) {
|
|
14025
14027
|
var status = _a.status, type = _a.type, theme = _a.theme;
|
|
@@ -14041,13 +14043,13 @@ var BasePlusButton = function (_a) {
|
|
|
14041
14043
|
var templateObject_1$T;
|
|
14042
14044
|
|
|
14043
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"])));
|
|
14044
|
-
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"])));
|
|
14045
14047
|
var BasePlusIcon = function (_a) {
|
|
14046
14048
|
var Icon = _a.Icon, rest = __rest(_a, ["Icon"]);
|
|
14047
14049
|
var theme = useTheme();
|
|
14048
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));
|
|
14049
14051
|
};
|
|
14050
|
-
var templateObject_1$S, templateObject_2$
|
|
14052
|
+
var templateObject_1$S, templateObject_2$D;
|
|
14051
14053
|
|
|
14052
14054
|
var Input$3 = {
|
|
14053
14055
|
Simple: BaseInput,
|
|
@@ -14101,9 +14103,9 @@ var Container$F = newStyled.div(templateObject_1$R || (templateObject_1$R = __ma
|
|
|
14101
14103
|
return theme.component.slideNavigation.slideDots.selectedDotColor;
|
|
14102
14104
|
});
|
|
14103
14105
|
// max-height: 31.875rem;
|
|
14104
|
-
var TopTagContainer$5 = newStyled.div(templateObject_2$
|
|
14105
|
-
var TopRightTagContainer = newStyled.div(templateObject_3$
|
|
14106
|
-
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"])));
|
|
14107
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"])));
|
|
14108
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"])));
|
|
14109
14111
|
var settings$1 = {
|
|
@@ -14164,7 +14166,7 @@ var ImageProductSlide = function (_a) {
|
|
|
14164
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));
|
|
14165
14167
|
}) }), void 0) }), void 0)] }, void 0));
|
|
14166
14168
|
};
|
|
14167
|
-
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;
|
|
14168
14170
|
|
|
14169
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"])));
|
|
14170
14172
|
var ProductGalleryMobile = function (_a) {
|
|
@@ -14459,8 +14461,8 @@ var SlideDots = function (_a) {
|
|
|
14459
14461
|
var templateObject_1$O;
|
|
14460
14462
|
|
|
14461
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"])));
|
|
14462
|
-
var RightButton = newStyled(NavigationButton)(templateObject_2$
|
|
14463
|
-
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"])));
|
|
14464
14466
|
var SlideNavigation = function (_a) {
|
|
14465
14467
|
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, onNavigate = _a.onNavigate, testId = _a.testId;
|
|
14466
14468
|
var theme = useTheme();
|
|
@@ -14472,21 +14474,21 @@ var SlideNavigation = function (_a) {
|
|
|
14472
14474
|
onNavigate(selectedIndex + 1);
|
|
14473
14475
|
} }, void 0)), jsxRuntime.jsx(SlideDots, { quantity: quantity, selectedIndex: selectedIndex, containerDataTestId: testId }, void 0)] }, void 0));
|
|
14474
14476
|
};
|
|
14475
|
-
var templateObject_1$N, templateObject_2$
|
|
14477
|
+
var templateObject_1$N, templateObject_2$B, templateObject_3$v;
|
|
14476
14478
|
|
|
14477
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) {
|
|
14478
14480
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
14479
14481
|
return borderRadiusVariant &&
|
|
14480
14482
|
"\n border-radius: 40px;\n ";
|
|
14481
14483
|
});
|
|
14482
|
-
var TopTagContainer$4 = newStyled.div(templateObject_2$
|
|
14483
|
-
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"])));
|
|
14484
14486
|
var ImageProductSlideV2 = React$2.forwardRef(function ImageProductWithTags(_a, ref) {
|
|
14485
14487
|
var _b, _c;
|
|
14486
14488
|
var image = _a.image, topTag = _a.topTag, bottomTag = _a.bottomTag, testId = _a.testId, borderRadiusVariant = _a.borderRadiusVariant;
|
|
14487
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));
|
|
14488
14490
|
});
|
|
14489
|
-
var templateObject_1$M, templateObject_2$
|
|
14491
|
+
var templateObject_1$M, templateObject_2$A, templateObject_3$u;
|
|
14490
14492
|
|
|
14491
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"])));
|
|
14492
14494
|
var ProductGalleryMobileV2 = function (_a) {
|
|
@@ -14523,9 +14525,9 @@ var Container$A = newStyled.div(templateObject_1$K || (templateObject_1$K = __ma
|
|
|
14523
14525
|
return theme.component.slideNavigation.slideDots.selectedDotColor;
|
|
14524
14526
|
});
|
|
14525
14527
|
// max-height: 31.875rem;
|
|
14526
|
-
var TopTagContainer$3 = newStyled.div(templateObject_2$
|
|
14527
|
-
var BottomTagContainer$3 = newStyled.div(templateObject_3$
|
|
14528
|
-
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"])));
|
|
14529
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"])));
|
|
14530
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"])));
|
|
14531
14533
|
var Text$2 = newStyled.div(templateObject_7$d || (templateObject_7$d = __makeTemplateObject(["\n padding-top: 3px;\n"], ["\n padding-top: 3px;\n"])));
|
|
@@ -14588,7 +14590,7 @@ var ImageProductSlideV3 = function (_a) {
|
|
|
14588
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));
|
|
14589
14591
|
}) }), void 0) }), void 0)] }, void 0));
|
|
14590
14592
|
};
|
|
14591
|
-
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;
|
|
14592
14594
|
|
|
14593
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"])));
|
|
14594
14596
|
var ProductGalleryMobileV3 = function (_a) {
|
|
@@ -14728,12 +14730,12 @@ var Portal = function (_a) {
|
|
|
14728
14730
|
var visibleStyle = function (_a) {
|
|
14729
14731
|
var opened = _a.opened;
|
|
14730
14732
|
return opened
|
|
14731
|
-
? 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 "])));
|
|
14732
14734
|
};
|
|
14733
14735
|
var transformStyle = function (_a) {
|
|
14734
14736
|
var opened = _a.opened, maxFullScreen = _a.maxFullScreen;
|
|
14735
14737
|
return opened
|
|
14736
|
-
? 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%)');
|
|
14737
14739
|
};
|
|
14738
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({
|
|
14739
14741
|
minWidth: ['90%', 'var(--component-modal-minWidth)'],
|
|
@@ -14776,7 +14778,7 @@ var useModal = function (id) {
|
|
|
14776
14778
|
close: close,
|
|
14777
14779
|
}); }, [close, open, opened]);
|
|
14778
14780
|
};
|
|
14779
|
-
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;
|
|
14780
14782
|
|
|
14781
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) {
|
|
14782
14784
|
var height = _a.height;
|
|
@@ -14856,13 +14858,13 @@ var Container$w = newStyled.div(templateObject_1$G || (templateObject_1$G = __ma
|
|
|
14856
14858
|
var theme = _a.theme;
|
|
14857
14859
|
return theme.component.orderBar.backgroundColor;
|
|
14858
14860
|
});
|
|
14859
|
-
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; });
|
|
14860
14862
|
var OrderBar = function (_a) {
|
|
14861
14863
|
var message = _a.message, color = _a.color;
|
|
14862
14864
|
var theme = useTheme();
|
|
14863
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));
|
|
14864
14866
|
};
|
|
14865
|
-
var templateObject_1$G, templateObject_2$
|
|
14867
|
+
var templateObject_1$G, templateObject_2$x;
|
|
14866
14868
|
|
|
14867
14869
|
var StyledButton$1 = newStyled(Ye.Button)(function (props) { return ({
|
|
14868
14870
|
background: props.bgColor,
|
|
@@ -14893,8 +14895,8 @@ var StyledContent = newStyled.div(templateObject_1$F || (templateObject_1$F = __
|
|
|
14893
14895
|
var _b = _a.width, width = _b === void 0 ? '100%' : _b;
|
|
14894
14896
|
return width;
|
|
14895
14897
|
});
|
|
14896
|
-
var StyledController = newStyled.div(templateObject_2$
|
|
14897
|
-
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;
|
|
14898
14900
|
|
|
14899
14901
|
var StyledDisclosure = newStyled(Ye)(function (_a) {
|
|
14900
14902
|
var background = _a.background, width = _a.width;
|
|
@@ -18715,9 +18717,9 @@ HTMLReactParser$1.attributesToProps;
|
|
|
18715
18717
|
HTMLReactParser$1.Element;
|
|
18716
18718
|
|
|
18717
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"])));
|
|
18718
|
-
var Card = newStyled.div(templateObject_2$
|
|
18719
|
-
var Tag$1 = newStyled.div(templateObject_3$
|
|
18720
|
-
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"])));
|
|
18721
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"])));
|
|
18722
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"])));
|
|
18723
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"])));
|
|
@@ -18751,14 +18753,14 @@ var PackCard = function (_a) {
|
|
|
18751
18753
|
currency: currencyCode || 'USD',
|
|
18752
18754
|
}), ' ', "each"] }), void 0)] }), void 0));
|
|
18753
18755
|
};
|
|
18754
|
-
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;
|
|
18755
18757
|
|
|
18756
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"])));
|
|
18757
|
-
var IconContainer = newStyled.div(templateObject_2$
|
|
18758
|
-
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({
|
|
18759
18761
|
margin: ['0 0.75rem', '0 1.25rem'],
|
|
18760
18762
|
}));
|
|
18761
|
-
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) {
|
|
18762
18764
|
var bold = _a.bold;
|
|
18763
18765
|
return (bold ? '700' : '500');
|
|
18764
18766
|
}, function (_a) {
|
|
@@ -18775,7 +18777,7 @@ var PageNumber = newStyled.span(templateObject_4$j || (templateObject_4$j = __ma
|
|
|
18775
18777
|
var background = _a.background;
|
|
18776
18778
|
return background || 'unset';
|
|
18777
18779
|
});
|
|
18778
|
-
var templateObject_1$D, templateObject_2$
|
|
18780
|
+
var templateObject_1$D, templateObject_2$u, templateObject_3$q, templateObject_4$k;
|
|
18779
18781
|
|
|
18780
18782
|
var Pagination = function (_a) {
|
|
18781
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;
|
|
@@ -18862,8 +18864,8 @@ var templateObject_1$C;
|
|
|
18862
18864
|
|
|
18863
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"])));
|
|
18864
18866
|
var IMAGE_WIDTH = '63px';
|
|
18865
|
-
var ImageContainer$3 = newStyled.div(templateObject_2$
|
|
18866
|
-
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({
|
|
18867
18869
|
paddingLeft: ['0.938rem', '1.875rem'],
|
|
18868
18870
|
}), IMAGE_WIDTH);
|
|
18869
18871
|
var Title$3 = newStyled.h2(function (_a) {
|
|
@@ -18886,7 +18888,7 @@ var Subtitle = newStyled.h3(function (_a) {
|
|
|
18886
18888
|
margin: '0.063rem 0',
|
|
18887
18889
|
});
|
|
18888
18890
|
});
|
|
18889
|
-
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) {
|
|
18890
18892
|
var withTag = _a.withTag; _a.theme;
|
|
18891
18893
|
return withTag
|
|
18892
18894
|
? mediaQueries({
|
|
@@ -18902,7 +18904,7 @@ var SimpleOrderItem = function (_a) {
|
|
|
18902
18904
|
var theme = useTheme();
|
|
18903
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));
|
|
18904
18906
|
};
|
|
18905
|
-
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;
|
|
18906
18908
|
|
|
18907
18909
|
var P$1 = newStyled.p(function (_a) {
|
|
18908
18910
|
var color = _a.color;
|
|
@@ -18964,9 +18966,9 @@ var ProgressBar = function (_a) {
|
|
|
18964
18966
|
var templateObject_1$A;
|
|
18965
18967
|
|
|
18966
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; });
|
|
18967
|
-
var Item$1 = newStyled.span(templateObject_2$
|
|
18968
|
-
var Number$1 = newStyled(Item$1)(templateObject_3$
|
|
18969
|
-
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)'; });
|
|
18970
18972
|
var QuantityPicker = function (_a) {
|
|
18971
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;
|
|
18972
18974
|
var theme = useTheme();
|
|
@@ -18991,7 +18993,7 @@ var QuantityPicker = function (_a) {
|
|
|
18991
18993
|
}, [value, clamp]);
|
|
18992
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));
|
|
18993
18995
|
};
|
|
18994
|
-
var templateObject_1$z, templateObject_2$
|
|
18996
|
+
var templateObject_1$z, templateObject_2$s, templateObject_3$o, templateObject_4$i;
|
|
18995
18997
|
|
|
18996
18998
|
/* base styles & size variants */
|
|
18997
18999
|
var CustomRadioStyles$1 = {
|
|
@@ -19062,7 +19064,7 @@ var ContainerStyles$1 = {
|
|
|
19062
19064
|
|
|
19063
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"])));
|
|
19064
19066
|
var Container$p = newStyled.div(__assign$1({}, ContainerStyles$1.baseStyles), function (props) { return [ContainerStyles$1[props.size](props.theme)]; });
|
|
19065
|
-
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) {
|
|
19066
19068
|
var disabled = _a.disabled;
|
|
19067
19069
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
19068
19070
|
});
|
|
@@ -19070,7 +19072,7 @@ var CustomRadio$1 = newStyled.div(function (props) { return [
|
|
|
19070
19072
|
CustomRadioStyles$1.baseStyles(props.theme, props.disabled, props.isChecked),
|
|
19071
19073
|
CustomRadioStyles$1[props.size](props.theme, props.isChecked),
|
|
19072
19074
|
]; });
|
|
19073
|
-
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"])));
|
|
19074
19076
|
var RadioPrimary = function (_a) {
|
|
19075
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;
|
|
19076
19078
|
var theme = useTheme();
|
|
@@ -19080,7 +19082,7 @@ var RadioPrimary = function (_a) {
|
|
|
19080
19082
|
};
|
|
19081
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));
|
|
19082
19084
|
};
|
|
19083
|
-
var templateObject_1$y, templateObject_2$
|
|
19085
|
+
var templateObject_1$y, templateObject_2$r, templateObject_3$n;
|
|
19084
19086
|
|
|
19085
19087
|
var RadioGroupInput = function (_a) {
|
|
19086
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;
|
|
@@ -19161,7 +19163,7 @@ var ContainerStyles = {
|
|
|
19161
19163
|
|
|
19162
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"])));
|
|
19163
19165
|
var Container$o = newStyled.div(__assign$1({}, ContainerStyles.baseStyles), function (props) { return [ContainerStyles[props.size](props.theme)]; });
|
|
19164
|
-
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) {
|
|
19165
19167
|
var disabled = _a.disabled;
|
|
19166
19168
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
19167
19169
|
});
|
|
@@ -19169,7 +19171,7 @@ var CustomRadio = newStyled.div(function (props) { return [
|
|
|
19169
19171
|
CustomRadioStyles.baseStyles(props.theme, props.disabled, props.isChecked),
|
|
19170
19172
|
CustomRadioStyles[props.size](props.theme, props.isChecked),
|
|
19171
19173
|
]; });
|
|
19172
|
-
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) {
|
|
19173
19175
|
var theme = _a.theme;
|
|
19174
19176
|
return theme.component.radio.textSize;
|
|
19175
19177
|
}, function (_a) {
|
|
@@ -19185,7 +19187,7 @@ var ClubRadioInput = function (_a) {
|
|
|
19185
19187
|
};
|
|
19186
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));
|
|
19187
19189
|
};
|
|
19188
|
-
var templateObject_1$x, templateObject_2$
|
|
19190
|
+
var templateObject_1$x, templateObject_2$q, templateObject_3$m;
|
|
19189
19191
|
|
|
19190
19192
|
var ClubRadioGroupInput = function (_a) {
|
|
19191
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;
|
|
@@ -19214,9 +19216,9 @@ function formatDate(date, format) {
|
|
|
19214
19216
|
}
|
|
19215
19217
|
|
|
19216
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"])));
|
|
19217
|
-
var Content$1 = newStyled.div(templateObject_2$
|
|
19218
|
-
var StarsContent = newStyled.div(templateObject_3$
|
|
19219
|
-
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"])));
|
|
19220
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"])));
|
|
19221
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"])));
|
|
19222
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"])));
|
|
@@ -19254,14 +19256,14 @@ var Review$1 = function (_a) {
|
|
|
19254
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 &&
|
|
19255
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));
|
|
19256
19258
|
};
|
|
19257
|
-
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;
|
|
19258
19260
|
|
|
19259
19261
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_DESKTOP = 500;
|
|
19260
19262
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_MOBILE = 168;
|
|
19261
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"])));
|
|
19262
|
-
var Heading = newStyled.div(templateObject_2$
|
|
19263
|
-
var Content = newStyled.div(templateObject_3$
|
|
19264
|
-
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"])));
|
|
19265
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"])));
|
|
19266
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"])));
|
|
19267
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"])));
|
|
@@ -19310,12 +19312,12 @@ var Review = function (_a) {
|
|
|
19310
19312
|
: description,
|
|
19311
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));
|
|
19312
19314
|
};
|
|
19313
|
-
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;
|
|
19314
19316
|
|
|
19315
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"])));
|
|
19316
|
-
var ReviewsContainer = newStyled.div(templateObject_2$
|
|
19317
|
-
var ReviewsCount = newStyled.div(templateObject_3$
|
|
19318
|
-
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"])));
|
|
19319
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"])));
|
|
19320
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"])));
|
|
19321
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) {
|
|
@@ -19328,17 +19330,17 @@ var ReviewsHeader = function (_a) {
|
|
|
19328
19330
|
var theme = useTheme();
|
|
19329
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));
|
|
19330
19332
|
};
|
|
19331
|
-
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;
|
|
19332
19334
|
|
|
19333
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"])));
|
|
19334
|
-
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; });
|
|
19335
19337
|
var ScrollToTop = function (_a) {
|
|
19336
19338
|
var scrollToTopText = _a.scrollToTopText, onClick = _a.onClick, fill = _a.fill, _b = _a.Icon, Icon$1 = _b === void 0 ? Icon.Arrows.CircleChevronUp : _b;
|
|
19337
19339
|
var theme = useTheme();
|
|
19338
19340
|
var fillValue = fill || theme.colors.pallete.primary.color;
|
|
19339
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));
|
|
19340
19342
|
};
|
|
19341
|
-
var templateObject_1$t, templateObject_2$
|
|
19343
|
+
var templateObject_1$t, templateObject_2$m;
|
|
19342
19344
|
|
|
19343
19345
|
var Input = newStyled.input(function (props) { return ({
|
|
19344
19346
|
padding: props.theme.component.input.padding,
|
|
@@ -19416,12 +19418,12 @@ var Anchor = newStyled.a({
|
|
|
19416
19418
|
padding: 0,
|
|
19417
19419
|
textDecoration: 'none',
|
|
19418
19420
|
});
|
|
19419
|
-
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({
|
|
19420
19422
|
border: ['none', '0.063rem solid var(--colors-pallete-secondary-color)'],
|
|
19421
19423
|
marginTop: ['1.25rem', '0.125rem'],
|
|
19422
19424
|
borderRadius: ['0', '0.5rem'],
|
|
19423
19425
|
}));
|
|
19424
|
-
var Header = newStyled.div(templateObject_3$
|
|
19426
|
+
var Header = newStyled.div(templateObject_3$i || (templateObject_3$i = __makeTemplateObject(["\n ", ",\n"], ["\n ", ",\n"])), mediaQueries({
|
|
19425
19427
|
margin: ['0rem 0rem 1rem 0rem', '1rem'],
|
|
19426
19428
|
}));
|
|
19427
19429
|
var ResultsPanel = function (_a) {
|
|
@@ -19429,7 +19431,7 @@ var ResultsPanel = function (_a) {
|
|
|
19429
19431
|
var theme = useTheme();
|
|
19430
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));
|
|
19431
19433
|
};
|
|
19432
|
-
var templateObject_1$r, templateObject_2$
|
|
19434
|
+
var templateObject_1$r, templateObject_2$l, templateObject_3$i;
|
|
19433
19435
|
|
|
19434
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({
|
|
19435
19437
|
right: ['1rem', '7.75rem'],
|
|
@@ -19534,9 +19536,9 @@ var SearchBar = function (_a) {
|
|
|
19534
19536
|
};
|
|
19535
19537
|
|
|
19536
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"])));
|
|
19537
|
-
var BackArrow = newStyled.div(templateObject_2$
|
|
19538
|
-
var BoldSpan = newStyled.span(templateObject_3$
|
|
19539
|
-
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"])));
|
|
19540
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"])));
|
|
19541
19543
|
var SearchNavigation = function (_a) {
|
|
19542
19544
|
var returnText = _a.returnText, returnUrl = _a.returnUrl, _b = _a.steps, steps = _b === void 0 ? [] : _b, returnAction = _a.returnAction;
|
|
@@ -19544,7 +19546,7 @@ var SearchNavigation = function (_a) {
|
|
|
19544
19546
|
return index === steps.length - 1 ? (jsxRuntime.jsx(BoldSpan, { children: step }, step)) : (jsxRuntime.jsx(NormalSpan, { children: "".concat(step, " / ") }, step));
|
|
19545
19547
|
}) }, void 0)] }, void 0));
|
|
19546
19548
|
};
|
|
19547
|
-
var templateObject_1$o, templateObject_2$
|
|
19549
|
+
var templateObject_1$o, templateObject_2$k, templateObject_3$h, templateObject_4$e, templateObject_5$9;
|
|
19548
19550
|
|
|
19549
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) {
|
|
19550
19552
|
var alignCenter = _a.alignCenter;
|
|
@@ -19556,26 +19558,26 @@ var Container$e = newStyled.div(templateObject_1$n || (templateObject_1$n = __ma
|
|
|
19556
19558
|
}, function (props) { return props.backgroundColor; }, function (props) { return props.textColor; }, function (props) {
|
|
19557
19559
|
return props.border ? "".concat(props.border.borderWidth, " solid ").concat(props.border.borderColor) : 'none';
|
|
19558
19560
|
});
|
|
19559
|
-
var TitleText = newStyled.div(templateObject_2$
|
|
19560
|
-
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"])));
|
|
19561
19563
|
var ShortBanner = function (_a) {
|
|
19562
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;
|
|
19563
19565
|
var theme = useTheme();
|
|
19564
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));
|
|
19565
19567
|
};
|
|
19566
|
-
var templateObject_1$n, templateObject_2$
|
|
19568
|
+
var templateObject_1$n, templateObject_2$j, templateObject_3$g;
|
|
19567
19569
|
|
|
19568
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; });
|
|
19569
|
-
var TableCell$2 = newStyled.td(templateObject_2$
|
|
19570
|
-
var TableHead$2 = newStyled.th(templateObject_3$
|
|
19571
|
-
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"])));
|
|
19572
19574
|
var TopLabel$1 = newStyled(Label$1)(templateObject_5$8 || (templateObject_5$8 = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
19573
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"])));
|
|
19574
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"])));
|
|
19575
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"])));
|
|
19576
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"])));
|
|
19577
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; });
|
|
19578
|
-
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;
|
|
19579
19581
|
|
|
19580
19582
|
var getIsOdd$1 = function (number) { return number % 2 !== 0; };
|
|
19581
19583
|
var getCellColor$1 = function (index, cell) {
|
|
@@ -19617,15 +19619,15 @@ var SizeChartTable = function (_a) {
|
|
|
19617
19619
|
};
|
|
19618
19620
|
|
|
19619
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; });
|
|
19620
|
-
var TableCell$1 = newStyled.td(templateObject_2$
|
|
19621
|
-
var TableHead$1 = newStyled.th(templateObject_3$
|
|
19622
|
-
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; });
|
|
19623
19625
|
var SizeTable = function (_a) {
|
|
19624
19626
|
var headers = _a.headers, data = _a.data, className = _a.className;
|
|
19625
19627
|
var theme = useTheme();
|
|
19626
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));
|
|
19627
19629
|
};
|
|
19628
|
-
var templateObject_1$l, templateObject_2$
|
|
19630
|
+
var templateObject_1$l, templateObject_2$h, templateObject_3$e, templateObject_4$c;
|
|
19629
19631
|
|
|
19630
19632
|
var getStylesBySize$7 = function (size) {
|
|
19631
19633
|
switch (size) {
|
|
@@ -19671,20 +19673,20 @@ var TextButton = function (_a) {
|
|
|
19671
19673
|
var templateObject_1$k;
|
|
19672
19674
|
|
|
19673
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"])));
|
|
19674
|
-
var P = newStyled.p(templateObject_2$
|
|
19675
|
-
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"])));
|
|
19676
19678
|
var SizeFitGuide = function (_a) {
|
|
19677
19679
|
var title = _a.title, fitPercentage = _a.fitPercentage, onClick = _a.onClick, onClickFitPercentage = _a.onClickFitPercentage, _b = _a.hideIcon, hideIcon = _b === void 0 ? false : _b;
|
|
19678
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));
|
|
19679
19681
|
};
|
|
19680
|
-
var templateObject_1$j, templateObject_2$
|
|
19682
|
+
var templateObject_1$j, templateObject_2$g, templateObject_3$d;
|
|
19681
19683
|
|
|
19682
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) {
|
|
19683
19685
|
var inline = _a.inline;
|
|
19684
19686
|
return (inline ? '0 0 0 10px' : '8px 0 0 0');
|
|
19685
19687
|
});
|
|
19686
|
-
var Row = newStyled.div(templateObject_2$
|
|
19687
|
-
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;
|
|
19688
19690
|
|
|
19689
19691
|
var SizeSelector = function (_a) {
|
|
19690
19692
|
var _b;
|
|
@@ -19726,15 +19728,15 @@ var Tab = function (_a) {
|
|
|
19726
19728
|
var templateObject_1$h;
|
|
19727
19729
|
|
|
19728
19730
|
var Container$b = newStyled.div(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
|
|
19729
|
-
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) {
|
|
19730
19732
|
var backgroundColor = _a.backgroundColor;
|
|
19731
19733
|
return backgroundColor;
|
|
19732
19734
|
}, function (_a) {
|
|
19733
19735
|
var borderColor = _a.borderColor;
|
|
19734
19736
|
return (borderColor ? "border-bottom: 1px solid ".concat(borderColor) : '');
|
|
19735
19737
|
});
|
|
19736
|
-
var TabContent = newStyled.div(templateObject_3$
|
|
19737
|
-
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"])));
|
|
19738
19740
|
var Tabs = function (_a) {
|
|
19739
19741
|
var _b;
|
|
19740
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;
|
|
@@ -19745,7 +19747,7 @@ var Tabs = function (_a) {
|
|
|
19745
19747
|
var selectedContent = (_b = tabs.find(function (tab) { return tab.title === selectedTab; })) === null || _b === void 0 ? void 0 : _b.content;
|
|
19746
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));
|
|
19747
19749
|
};
|
|
19748
|
-
var templateObject_1$g, templateObject_2$
|
|
19750
|
+
var templateObject_1$g, templateObject_2$e, templateObject_3$c, templateObject_4$b;
|
|
19749
19751
|
|
|
19750
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"])));
|
|
19751
19753
|
var Tag = function (_a) {
|
|
@@ -19864,8 +19866,8 @@ var SeasonOfferRoundedTag = function (_a) {
|
|
|
19864
19866
|
};
|
|
19865
19867
|
|
|
19866
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"])));
|
|
19867
|
-
var VideoOverlay = newStyled.div(templateObject_2$
|
|
19868
|
-
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"])));
|
|
19869
19871
|
var ImageVideo = function (_a) {
|
|
19870
19872
|
var imageLink = _a.imageLink, isVideo = _a.isVideo, isMobile = _a.isMobile;
|
|
19871
19873
|
var video = React$2.useRef(null);
|
|
@@ -19885,12 +19887,12 @@ var ImageVideo = function (_a) {
|
|
|
19885
19887
|
height: '100%',
|
|
19886
19888
|
} }, void 0)] }, void 0))] }, void 0));
|
|
19887
19889
|
};
|
|
19888
|
-
var templateObject_1$e, templateObject_2$
|
|
19890
|
+
var templateObject_1$e, templateObject_2$d, templateObject_3$b;
|
|
19889
19891
|
|
|
19890
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"])));
|
|
19891
|
-
var ContainerMobile = css(templateObject_2$
|
|
19892
|
-
var Container$9 = newStyled.div(templateObject_3$
|
|
19893
|
-
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"])));
|
|
19894
19896
|
var TextWithImage = function (_a) {
|
|
19895
19897
|
var _b, _c, _d, _e;
|
|
19896
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"]);
|
|
@@ -19920,12 +19922,29 @@ var TextWithImage = function (_a) {
|
|
|
19920
19922
|
},
|
|
19921
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));
|
|
19922
19924
|
};
|
|
19923
|
-
var templateObject_1$d, templateObject_2$
|
|
19925
|
+
var templateObject_1$d, templateObject_2$c, templateObject_3$a, templateObject_4$a;
|
|
19924
19926
|
|
|
19925
19927
|
var TimerContainer$1 = newStyled.div(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
19926
19928
|
var timerColor = _a.timerColor;
|
|
19927
19929
|
return timerColor || '';
|
|
19928
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';
|
|
19929
19948
|
var timeToSeconds = function (_a) {
|
|
19930
19949
|
var hours = _a.hours, minutes = _a.minutes, seconds = _a.seconds;
|
|
19931
19950
|
return hours * 3600 + minutes * 60 + seconds;
|
|
@@ -19938,8 +19957,8 @@ var secondsToTime = function (secs) {
|
|
|
19938
19957
|
};
|
|
19939
19958
|
var DEFAULT_TIME = { hours: 0, minutes: 0, seconds: 0 };
|
|
19940
19959
|
var Timer = function (_a) {
|
|
19941
|
-
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"]);
|
|
19942
|
-
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];
|
|
19943
19962
|
React$2.useEffect(function () {
|
|
19944
19963
|
var timer = setInterval(function () {
|
|
19945
19964
|
setSecs(function (seconds) {
|
|
@@ -19955,10 +19974,12 @@ var Timer = function (_a) {
|
|
|
19955
19974
|
clearInterval(timer);
|
|
19956
19975
|
return function () { return clearInterval(timer); };
|
|
19957
19976
|
}, [onTimeUp, secs]);
|
|
19958
|
-
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
|
+
}
|
|
19959
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));
|
|
19960
|
-
};
|
|
19961
|
-
var templateObject_1$c;
|
|
19982
|
+
};
|
|
19962
19983
|
|
|
19963
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"])));
|
|
19964
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; });
|
|
@@ -20147,9 +20168,9 @@ var getDefaultCountdown = function () {
|
|
|
20147
20168
|
};
|
|
20148
20169
|
|
|
20149
20170
|
var HurryUp = function (_a) {
|
|
20150
|
-
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"]);
|
|
20151
20172
|
var theme = useTheme();
|
|
20152
|
-
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));
|
|
20153
20174
|
};
|
|
20154
20175
|
|
|
20155
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) {
|