@trafilea/afrodita-components 6.43.10 → 6.43.14
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.css +1 -1
- package/build/index.d.ts +12 -9
- package/build/index.esm.css +1 -1
- package/build/index.esm.js +352 -353
- package/build/index.esm.js.map +1 -1
- package/build/index.js +352 -353
- package/build/index.js.map +1 -1
- package/package.json +1 -1
package/build/index.js
CHANGED
|
@@ -3151,15 +3151,10 @@ var formatPrice = function (value, _a) {
|
|
|
3151
3151
|
currency: currency,
|
|
3152
3152
|
maximumFractionDigits: 3,
|
|
3153
3153
|
}).format(valueToFormat);
|
|
3154
|
-
if (currency === 'NZD') {
|
|
3155
|
-
// intlFormat does not support NZD$ currency format
|
|
3156
|
-
var resultOverridden = result.replace('NZ$', 'NZD$');
|
|
3157
|
-
return resultOverridden;
|
|
3158
|
-
}
|
|
3159
3154
|
if (currency === 'SGD') {
|
|
3160
3155
|
// intlFormat does not support singapure currency
|
|
3161
3156
|
var onlyValue = result.slice(result.indexOf('SGD') + 4);
|
|
3162
|
-
var resultOverridden = "
|
|
3157
|
+
var resultOverridden = "S$".concat(onlyValue);
|
|
3163
3158
|
return resultOverridden;
|
|
3164
3159
|
}
|
|
3165
3160
|
return result;
|
|
@@ -3220,7 +3215,7 @@ var getStylesBySize$g = function (size) {
|
|
|
3220
3215
|
};
|
|
3221
3216
|
}
|
|
3222
3217
|
};
|
|
3223
|
-
var Container$1q = newStyled.div(templateObject_1$
|
|
3218
|
+
var Container$1q = newStyled.div(templateObject_1$2o || (templateObject_1$2o = __makeTemplateObject(["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n padding: ", ";\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: ", ";\n text-align: center;\n cursor: default;\n"], ["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n padding: ", ";\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: ", ";\n text-align: center;\n cursor: default;\n"])), function (_a) {
|
|
3224
3219
|
var backgroundColor = _a.backgroundColor;
|
|
3225
3220
|
return backgroundColor;
|
|
3226
3221
|
}, function (_a) {
|
|
@@ -3259,7 +3254,7 @@ var ClubOfferTag = function (_a) {
|
|
|
3259
3254
|
var theme = useTheme();
|
|
3260
3255
|
return (jsxRuntime.jsx(Container$1q, __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$2, __assign$1({ textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size, style: { fontSize: '0.875rem', lineHeight: '18px' } }, { children: clubOfferText }), void 0) }), void 0));
|
|
3261
3256
|
};
|
|
3262
|
-
var templateObject_1$
|
|
3257
|
+
var templateObject_1$2o, templateObject_2$1H;
|
|
3263
3258
|
|
|
3264
3259
|
var getStylesBySize$f = function (size, bordersRounded, theme) {
|
|
3265
3260
|
var _a, _b, _c;
|
|
@@ -3290,7 +3285,7 @@ var getStylesBySize$f = function (size, bordersRounded, theme) {
|
|
|
3290
3285
|
};
|
|
3291
3286
|
}
|
|
3292
3287
|
};
|
|
3293
|
-
var Container$1p = newStyled.div(templateObject_1$
|
|
3288
|
+
var Container$1p = newStyled.div(templateObject_1$2n || (templateObject_1$2n = __makeTemplateObject(["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n padding: ", ";\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: ", ";\n text-align: center;\n cursor: default;\n"], ["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n padding: ", ";\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: ", ";\n text-align: center;\n cursor: default;\n"])), function (_a) {
|
|
3294
3289
|
var backgroundColor = _a.backgroundColor;
|
|
3295
3290
|
return backgroundColor;
|
|
3296
3291
|
}, function (_a) {
|
|
@@ -3329,7 +3324,7 @@ var DiscountTag$3 = function (_a) {
|
|
|
3329
3324
|
var theme = useTheme();
|
|
3330
3325
|
return (jsxRuntime.jsx(Container$1p, __assign$1({ backgroundColor: disabled ? theme.colors.shades['50'].color : backgroundColor, borderColor: disabled ? theme.colors.shades['50'].color : borderColor, size: size, "data-testid": "discount-container", style: style, bordersRounded: bordersRounded }, { children: jsxRuntime.jsxs(H3$1, __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));
|
|
3331
3326
|
};
|
|
3332
|
-
var templateObject_1$
|
|
3327
|
+
var templateObject_1$2n, templateObject_2$1G;
|
|
3333
3328
|
|
|
3334
3329
|
var Viewports = {
|
|
3335
3330
|
mobile: 'mobile',
|
|
@@ -3438,7 +3433,7 @@ var getFontSize = function (size, theme, finalPriceStyled, finalPriceStyledSmall
|
|
|
3438
3433
|
return (_c = getStylesBySize$e(size, theme)) === null || _c === void 0 ? void 0 : _c.fontSize;
|
|
3439
3434
|
}
|
|
3440
3435
|
};
|
|
3441
|
-
var Container$1o = newStyled.div(templateObject_1$
|
|
3436
|
+
var Container$1o = newStyled.div(templateObject_1$2m || (templateObject_1$2m = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
3442
3437
|
var Price = newStyled.p(templateObject_2$1F || (templateObject_2$1F = __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) {
|
|
3443
3438
|
var weight = _a.weight;
|
|
3444
3439
|
return (weight ? weight : '400');
|
|
@@ -3496,9 +3491,9 @@ var PriceLabel$1 = function (_a) {
|
|
|
3496
3491
|
};
|
|
3497
3492
|
return (jsxRuntime.jsxs(Container$1o, __assign$1({}, rest, { id: "priceLabel" }, { children: [clubStyle ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [!!originalPrice && jsxRuntime.jsx(OriginalPrice, {}, void 0), jsxRuntime.jsx(Price, __assign$1({ margin: true, "data-testid": getTestId$1(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: finalPrice }), void 0)] }, void 0)) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Price, __assign$1({ margin: true, "data-testid": getTestId$1(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: finalPrice }), void 0), !!originalPrice && jsxRuntime.jsx(OriginalPrice, {}, void 0)] }, void 0)), discount && (jsxRuntime.jsx(TagContainer, __assign$1({ size: size }, { children: jsxRuntime.jsx(DiscountTag$3, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
|
|
3498
3493
|
};
|
|
3499
|
-
var templateObject_1$
|
|
3494
|
+
var templateObject_1$2m, templateObject_2$1F, templateObject_3$1h;
|
|
3500
3495
|
|
|
3501
|
-
var FinalPriceStyledContainer$3 = newStyled.div(templateObject_1$
|
|
3496
|
+
var FinalPriceStyledContainer$3 = newStyled.div(templateObject_1$2l || (templateObject_1$2l = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
3502
3497
|
var PriceLabelV2$1 = function (_a) {
|
|
3503
3498
|
var _b;
|
|
3504
3499
|
var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, discount = _a.discount, clubOffer = _a.clubOffer, color = _a.color, testId = _a.testId, _c = _a.originalPriceStyled, originalPriceStyled = _c === void 0 ? false : _c, _d = _a.originalPriceUnderlined, originalPriceUnderlined = _d === void 0 ? true : _d, _e = _a.size, size = _e === void 0 ? exports.ComponentSize.Small : _e, _f = _a.bordersRounded, bordersRounded = _f === void 0 ? false : _f, _g = _a.savingsDisplay, savingsDisplay = _g === void 0 ? true : _g, pricePerItem = _a.pricePerItem, _h = _a.hasRoundedSavings, hasRoundedSavings = _h === void 0 ? true : _h, rest = __rest(_a, ["finalPrice", "originalPrice", "discount", "clubOffer", "color", "testId", "originalPriceStyled", "originalPriceUnderlined", "size", "bordersRounded", "savingsDisplay", "pricePerItem", "hasRoundedSavings"]);
|
|
@@ -3508,7 +3503,7 @@ var PriceLabelV2$1 = function (_a) {
|
|
|
3508
3503
|
var isOriginalPrice = originalPrice && isDiffFinalAndOriginalPrice;
|
|
3509
3504
|
var isDiscount = discount && isDiffFinalAndOriginalPrice;
|
|
3510
3505
|
var isClubOffer = clubOffer && isDiffFinalAndOriginalPrice;
|
|
3511
|
-
var supportedCurrencies = ['AU$', 'CA$', '£', '
|
|
3506
|
+
var supportedCurrencies = ['AU$', 'CA$', '£', 'NZ$', 'S$'];
|
|
3512
3507
|
var currencySymbol = '$';
|
|
3513
3508
|
if (typeof productFinalPrice === 'string') {
|
|
3514
3509
|
supportedCurrencies.forEach(function (availableCurrency) {
|
|
@@ -3567,9 +3562,9 @@ var PriceLabelV2$1 = function (_a) {
|
|
|
3567
3562
|
lineHeight: '22px',
|
|
3568
3563
|
} }), void 0)) }), void 0))] }), void 0));
|
|
3569
3564
|
};
|
|
3570
|
-
var templateObject_1$
|
|
3565
|
+
var templateObject_1$2l;
|
|
3571
3566
|
|
|
3572
|
-
var FinalPriceStyledContainer$2 = newStyled.div(templateObject_1$
|
|
3567
|
+
var FinalPriceStyledContainer$2 = newStyled.div(templateObject_1$2k || (templateObject_1$2k = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
3573
3568
|
var ContainerDirectionColumn = newStyled.div(templateObject_2$1E || (templateObject_2$1E = __makeTemplateObject(["\n display: column;\n align-items: center;\n"], ["\n display: column;\n align-items: center;\n"])));
|
|
3574
3569
|
var DiscountEachOneContainer = newStyled.div(templateObject_3$1g || (templateObject_3$1g = __makeTemplateObject(["\n display: flex;\n padding-left: 0.5rem;\n"], ["\n display: flex;\n padding-left: 0.5rem;\n"])));
|
|
3575
3570
|
var PriceLabelV3 = function (_a) {
|
|
@@ -3580,7 +3575,7 @@ var PriceLabelV3 = function (_a) {
|
|
|
3580
3575
|
var isOriginalPrice = originalPrice && isDiffFinalAndOriginalPrice;
|
|
3581
3576
|
var isDiscount = discount && isDiffFinalAndOriginalPrice;
|
|
3582
3577
|
var isClubOffer = clubOffer && isDiffFinalAndOriginalPrice;
|
|
3583
|
-
var supportedCurrencies = ['AU$', 'CA$', '£', '
|
|
3578
|
+
var supportedCurrencies = ['AU$', 'CA$', '£', 'NZ$', 'S$'];
|
|
3584
3579
|
var currencySymbol = '$';
|
|
3585
3580
|
if (typeof finalPrice === 'string') {
|
|
3586
3581
|
supportedCurrencies.forEach(function (availableCurrency) {
|
|
@@ -3642,16 +3637,16 @@ var PriceLabelV3 = function (_a) {
|
|
|
3642
3637
|
lineHeight: '22px',
|
|
3643
3638
|
} }), void 0)) }), void 0))] }, void 0)] }), void 0));
|
|
3644
3639
|
};
|
|
3645
|
-
var templateObject_1$
|
|
3640
|
+
var templateObject_1$2k, templateObject_2$1E, templateObject_3$1g;
|
|
3646
3641
|
|
|
3647
|
-
var FinalPriceStyledContainer$1 = newStyled.div(templateObject_1$
|
|
3642
|
+
var FinalPriceStyledContainer$1 = newStyled.div(templateObject_1$2j || (templateObject_1$2j = __makeTemplateObject(["\n display: flex;\n margin-left: -5px;\n"], ["\n display: flex;\n margin-left: -5px;\n"])));
|
|
3648
3643
|
var PriceLabel = function (_a) {
|
|
3649
3644
|
var _b;
|
|
3650
3645
|
var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, color = _a.color, testId = _a.testId, _c = _a.originalPriceStyled, originalPriceStyled = _c === void 0 ? false : _c, _d = _a.originalPriceUnderlined, originalPriceUnderlined = _d === void 0 ? true : _d, _e = _a.size, size = _e === void 0 ? exports.ComponentSize.Small : _e, _f = _a.isClubOffer, isClubOffer = _f === void 0 ? false : _f, rest = __rest(_a, ["finalPrice", "originalPrice", "color", "testId", "originalPriceStyled", "originalPriceUnderlined", "size", "isClubOffer"]);
|
|
3651
3646
|
var theme = useTheme();
|
|
3652
3647
|
var isDiffFinalAndOriginalPrice = originalPrice !== finalPrice;
|
|
3653
3648
|
var isOriginalPrice = originalPrice && isDiffFinalAndOriginalPrice;
|
|
3654
|
-
var supportedCurrencies = ['AU$', 'CA$', '£', '
|
|
3649
|
+
var supportedCurrencies = ['AU$', 'CA$', '£', 'NZ$', 'S$'];
|
|
3655
3650
|
var currencySymbol = '$';
|
|
3656
3651
|
if (typeof finalPrice === 'string') {
|
|
3657
3652
|
supportedCurrencies.forEach(function (availableCurrency) {
|
|
@@ -3678,16 +3673,16 @@ var PriceLabel = function (_a) {
|
|
|
3678
3673
|
marginTop: '-6px',
|
|
3679
3674
|
} }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }), void 0)] }), void 0));
|
|
3680
3675
|
};
|
|
3681
|
-
var templateObject_1$
|
|
3676
|
+
var templateObject_1$2j;
|
|
3682
3677
|
|
|
3683
|
-
var FinalPriceStyledContainer = newStyled.div(templateObject_1$
|
|
3678
|
+
var FinalPriceStyledContainer = newStyled.div(templateObject_1$2i || (templateObject_1$2i = __makeTemplateObject(["\n display: flex;\n margin-left: -5px;\n"], ["\n display: flex;\n margin-left: -5px;\n"])));
|
|
3684
3679
|
var PriceLabelV2 = function (_a) {
|
|
3685
3680
|
var _b;
|
|
3686
3681
|
var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, color = _a.color, testId = _a.testId, _c = _a.originalPriceStyled, originalPriceStyled = _c === void 0 ? false : _c, _d = _a.originalPriceUnderlined, originalPriceUnderlined = _d === void 0 ? true : _d, _e = _a.size, size = _e === void 0 ? exports.ComponentSize.Small : _e, _f = _a.isClubOffer, isClubOffer = _f === void 0 ? false : _f, rest = __rest(_a, ["finalPrice", "originalPrice", "color", "testId", "originalPriceStyled", "originalPriceUnderlined", "size", "isClubOffer"]);
|
|
3687
3682
|
var theme = useTheme();
|
|
3688
3683
|
var isDiffFinalAndOriginalPrice = originalPrice !== finalPrice;
|
|
3689
3684
|
var isOriginalPrice = originalPrice && isDiffFinalAndOriginalPrice;
|
|
3690
|
-
var supportedCurrencies = ['AU$', 'CA$', '£', '
|
|
3685
|
+
var supportedCurrencies = ['AU$', 'CA$', '£', 'NZ$', 'S$'];
|
|
3691
3686
|
var currencySymbol = '$';
|
|
3692
3687
|
if (typeof finalPrice === 'string') {
|
|
3693
3688
|
supportedCurrencies.forEach(function (availableCurrency) {
|
|
@@ -3713,11 +3708,11 @@ var PriceLabelV2 = function (_a) {
|
|
|
3713
3708
|
: (_b = "".concat(finalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1];
|
|
3714
3709
|
return (jsxRuntime.jsxs(Container$1o, __assign$1({}, rest, { children: [isOriginalPrice && !isClubOffer && jsxRuntime.jsx(OriginalPrice, {}, void 0), jsxRuntime.jsxs(FinalPriceStyledContainer, __assign$1({ "data-testid": getTestId$1(testId, 'final-product-price'), style: { marginLeft: '-3px' } }, { children: [jsxRuntime.jsxs(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size }, { children: [currencySymbol, finalPriceString] }), void 0), jsxRuntime.jsx(Price, __assign$1({ finalPriceStyledSmall: true }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }), void 0)] }), void 0));
|
|
3715
3710
|
};
|
|
3716
|
-
var templateObject_1$
|
|
3711
|
+
var templateObject_1$2i;
|
|
3717
3712
|
|
|
3718
|
-
var ContainerWrapper$2 = newStyled.div(templateObject_1$
|
|
3713
|
+
var ContainerWrapper$2 = newStyled.div(templateObject_1$2h || (templateObject_1$2h = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 2px;\n"], ["\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 2px;\n"])));
|
|
3719
3714
|
var ImgWrapper = newStyled.div(templateObject_2$1D || (templateObject_2$1D = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n width: 50px auto;\n height: 20px;\n opacity: 0px;\n position: relative;\n"], ["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n width: 50px auto;\n height: 20px;\n opacity: 0px;\n position: relative;\n"])));
|
|
3720
|
-
var templateObject_1$
|
|
3715
|
+
var templateObject_1$2h, templateObject_2$1D;
|
|
3721
3716
|
|
|
3722
3717
|
var ClubPriceMemberLabel = function (_a) {
|
|
3723
3718
|
var isClub = _a.isClub, _b = _a.isPDP, isPDP = _b === void 0 ? false : _b, icon = _a.icon, _c = _a.isCollections, isCollections = _c === void 0 ? false : _c, rest = __rest(_a, ["isClub", "isPDP", "icon", "isCollections"]);
|
|
@@ -3726,13 +3721,13 @@ var ClubPriceMemberLabel = function (_a) {
|
|
|
3726
3721
|
return (jsxRuntime.jsx("div", { children: isClub ? (jsxRuntime.jsxs(ContainerWrapper$2, __assign$1({ id: "priceMemberLabelWrapper" }, { children: [PriceComponent, jsxRuntime.jsx(ImgWrapper, __assign$1({ id: "priceMemberLabelImgWrapper" }, { children: icon }), void 0)] }), void 0)) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: PriceComponent }, void 0)) }, void 0));
|
|
3727
3722
|
};
|
|
3728
3723
|
|
|
3729
|
-
var HorizontalDivider = newStyled.div(templateObject_1$
|
|
3724
|
+
var HorizontalDivider = newStyled.div(templateObject_1$2g || (templateObject_1$2g = __makeTemplateObject(["\n border: unset;\n outline: unset;\n background-color: var(--colors-shades-100-color);\n height: 1px;\n width: ", ";\n margin: 4% auto;\n"], ["\n border: unset;\n outline: unset;\n background-color: var(--colors-shades-100-color);\n height: 1px;\n width: ", ";\n margin: 4% auto;\n"])), function (_a) {
|
|
3730
3725
|
var width = _a.width;
|
|
3731
3726
|
return width !== null && width !== void 0 ? width : '100%';
|
|
3732
3727
|
});
|
|
3733
|
-
var templateObject_1$
|
|
3728
|
+
var templateObject_1$2g;
|
|
3734
3729
|
|
|
3735
|
-
var Container$1n = newStyled.div(templateObject_1$
|
|
3730
|
+
var Container$1n = newStyled.div(templateObject_1$2f || (templateObject_1$2f = __makeTemplateObject(["\n @keyframes shimmer {\n 100% {\n transform: translateX(100%);\n }\n }\n\n display: inline-block;\n height: ", ";\n width: ", ";\n position: relative;\n overflow: hidden;\n background-color: ", ";\n border-radius: ", ";\n box-sizing: border-box;\n\n ::after {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n transform: translateX(-100%);\n background-image: linear-gradient(\n 90deg,\n ", ",\n ", ",\n ", "\n );\n animation: shimmer 2s infinite;\n content: '';\n box-sizing: border-box;\n }\n"], ["\n @keyframes shimmer {\n 100% {\n transform: translateX(100%);\n }\n }\n\n display: inline-block;\n height: ", ";\n width: ", ";\n position: relative;\n overflow: hidden;\n background-color: ", ";\n border-radius: ", ";\n box-sizing: border-box;\n\n ::after {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n transform: translateX(-100%);\n background-image: linear-gradient(\n 90deg,\n ", ",\n ", ",\n ", "\n );\n animation: shimmer 2s infinite;\n content: '';\n box-sizing: border-box;\n }\n"])), function (_a) {
|
|
3736
3731
|
var height = _a.height;
|
|
3737
3732
|
return height !== null && height !== void 0 ? height : '1.5em';
|
|
3738
3733
|
}, function (_a) {
|
|
@@ -3759,9 +3754,9 @@ var SkeletonBox = function (_a) {
|
|
|
3759
3754
|
var theme = useTheme();
|
|
3760
3755
|
return jsxRuntime.jsx(Container$1n, { "data-testid": "skeleton-container", width: width, height: height, theme: theme }, void 0);
|
|
3761
3756
|
};
|
|
3762
|
-
var templateObject_1$
|
|
3757
|
+
var templateObject_1$2f;
|
|
3763
3758
|
|
|
3764
|
-
var StyledSvgWrapper = newStyled.svg(templateObject_1$
|
|
3759
|
+
var StyledSvgWrapper = newStyled.svg(templateObject_1$2e || (templateObject_1$2e = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n color: ", ";\n display: inline-block;\n vertical-align: middle;\n flex: none;\n ", "\n ", "\n"], ["\n width: ", ";\n height: ", ";\n color: ", ";\n display: inline-block;\n vertical-align: middle;\n flex: none;\n ", "\n ", "\n"])), function (_a) {
|
|
3765
3760
|
var width = _a.width;
|
|
3766
3761
|
return width;
|
|
3767
3762
|
}, function (_a) {
|
|
@@ -3790,7 +3785,7 @@ var StyledImageWrapper = newStyled.img(templateObject_2$1C || (templateObject_2$
|
|
|
3790
3785
|
var opacity = _a.opacity;
|
|
3791
3786
|
return opacity && "opacity: ".concat(opacity, ";");
|
|
3792
3787
|
});
|
|
3793
|
-
var templateObject_1$
|
|
3788
|
+
var templateObject_1$2e, templateObject_2$1C;
|
|
3794
3789
|
|
|
3795
3790
|
/* eslint-disable no-undef */
|
|
3796
3791
|
var cache = new Map();
|
|
@@ -3966,7 +3961,7 @@ var buildImageUrl = function (_a) {
|
|
|
3966
3961
|
}
|
|
3967
3962
|
};
|
|
3968
3963
|
|
|
3969
|
-
var Img$1 = newStyled.img(templateObject_1$
|
|
3964
|
+
var Img$1 = newStyled.img(templateObject_1$2d || (templateObject_1$2d = __makeTemplateObject(["\n height: ", ";\n width: ", ";\n border-radius: ", ";\n object-fit: ", ";\n object-position: ", ";\n"], ["\n height: ", ";\n width: ", ";\n border-radius: ", ";\n object-fit: ", ";\n object-position: ", ";\n"])), function (props) { return props.height; }, function (props) { return props.width; }, function (props) { return props.borderRadius; }, function (props) { return props.objectFit; }, function (props) { return props.objectPosition; });
|
|
3970
3965
|
var Image$3 = function (_a) {
|
|
3971
3966
|
var src = _a.src, srcSet = _a.srcSet, _b = _a.sizes, sizes = _b === void 0 ? '100vw' : _b, _c = _a.loading, loading = _c === void 0 ? 'lazy' : _c, _d = _a.decoding, decoding = _d === void 0 ? 'async' : _d, alt = _a.alt, height = _a.height, width = _a.width, borderRadius = _a.borderRadius, objectFit = _a.objectFit, objectPosition = _a.objectPosition, quality = _a.quality, rest = __rest(_a, ["src", "srcSet", "sizes", "loading", "decoding", "alt", "height", "width", "borderRadius", "objectFit", "objectPosition", "quality"]);
|
|
3972
3967
|
var config = useTheme().config;
|
|
@@ -3975,15 +3970,15 @@ var Image$3 = function (_a) {
|
|
|
3975
3970
|
: src;
|
|
3976
3971
|
return (jsxRuntime.jsx(Img$1, __assign$1({ src: source, srcSet: srcSet, sizes: sizes, loading: loading, decoding: decoding, alt: alt, height: height, width: width, borderRadius: borderRadius, objectFit: objectFit, objectPosition: objectPosition }, rest), void 0));
|
|
3977
3972
|
};
|
|
3978
|
-
var templateObject_1$
|
|
3973
|
+
var templateObject_1$2d;
|
|
3979
3974
|
|
|
3980
|
-
var LabelWrapper = newStyled.label(templateObject_1$
|
|
3975
|
+
var LabelWrapper = newStyled.label(templateObject_1$2c || (templateObject_1$2c = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: 10px;\n cursor: pointer;\n"], ["\n display: flex;\n align-items: center;\n gap: 10px;\n cursor: pointer;\n"])));
|
|
3981
3976
|
var SwitchWrapper = newStyled.div(templateObject_2$1B || (templateObject_2$1B = __makeTemplateObject(["\n position: relative;\n width: 36px;\n height: 20px;\n background: #949494;\n border-radius: 60px;\n padding: 4px;\n transition: 300ms all;\n\n &:before {\n transition: 300ms all;\n content: '';\n position: absolute;\n width: 16px;\n height: 16px;\n border-radius: 35px;\n top: 50%;\n left: 2.5px;\n background: white;\n transform: translate(0, -50%);\n }\n"], ["\n position: relative;\n width: 36px;\n height: 20px;\n background: #949494;\n border-radius: 60px;\n padding: 4px;\n transition: 300ms all;\n\n &:before {\n transition: 300ms all;\n content: '';\n position: absolute;\n width: 16px;\n height: 16px;\n border-radius: 35px;\n top: 50%;\n left: 2.5px;\n background: white;\n transform: translate(0, -50%);\n }\n"])));
|
|
3982
3977
|
var InputWrapper$1 = newStyled.input(templateObject_3$1f || (templateObject_3$1f = __makeTemplateObject(["\n opacity: 0;\n position: absolute;\n\n &:checked + div {\n background: ", ";\n\n &:before {\n transform: translate(14.5px, -50%);\n }\n }\n"], ["\n opacity: 0;\n position: absolute;\n\n &:checked + div {\n background: ", ";\n\n &:before {\n transform: translate(14.5px, -50%);\n }\n }\n"])), function (_a) {
|
|
3983
3978
|
var $color = _a.$color;
|
|
3984
3979
|
return $color;
|
|
3985
3980
|
});
|
|
3986
|
-
var templateObject_1$
|
|
3981
|
+
var templateObject_1$2c, templateObject_2$1B, templateObject_3$1f;
|
|
3987
3982
|
|
|
3988
3983
|
var ToggleComponent = function (_a) {
|
|
3989
3984
|
var onToggle = _a.onToggle, _b = _a.isChecked, isChecked = _b === void 0 ? false : _b, _c = _a.color, color = _c === void 0 ? '#882a2b' : _c;
|
|
@@ -4838,7 +4833,7 @@ function jsxs(type, props, key) {
|
|
|
4838
4833
|
// This defines which HTML tag to render for each `variant`, it also defines
|
|
4839
4834
|
// `variants` styles that are consistent through all themes.
|
|
4840
4835
|
var TAGS = {
|
|
4841
|
-
hero1: newStyled.h1(templateObject_1$
|
|
4836
|
+
hero1: newStyled.h1(templateObject_1$2b || (templateObject_1$2b = __makeTemplateObject([""], [""]))),
|
|
4842
4837
|
hero2: newStyled.h2(templateObject_2$1A || (templateObject_2$1A = __makeTemplateObject([""], [""]))),
|
|
4843
4838
|
hero3: newStyled.h3(templateObject_3$1e || (templateObject_3$1e = __makeTemplateObject([""], [""]))),
|
|
4844
4839
|
display1: newStyled.h1(templateObject_4$$ || (templateObject_4$$ = __makeTemplateObject([""], [""]))),
|
|
@@ -4846,7 +4841,7 @@ var TAGS = {
|
|
|
4846
4841
|
display3: newStyled.h3(templateObject_6$G || (templateObject_6$G = __makeTemplateObject([""], [""]))),
|
|
4847
4842
|
heading1: newStyled.h1(templateObject_7$x || (templateObject_7$x = __makeTemplateObject([""], [""]))),
|
|
4848
4843
|
heading2: newStyled.h2(templateObject_8$q || (templateObject_8$q = __makeTemplateObject([""], [""]))),
|
|
4849
|
-
heading3: newStyled.h3(templateObject_9$
|
|
4844
|
+
heading3: newStyled.h3(templateObject_9$d || (templateObject_9$d = __makeTemplateObject([""], [""]))),
|
|
4850
4845
|
heading4: newStyled.h4(templateObject_10$c || (templateObject_10$c = __makeTemplateObject([""], [""]))),
|
|
4851
4846
|
heading5: newStyled.h5(templateObject_11$8 || (templateObject_11$8 = __makeTemplateObject([""], [""]))),
|
|
4852
4847
|
heading6: newStyled.h6(templateObject_12$5 || (templateObject_12$5 = __makeTemplateObject([""], [""]))),
|
|
@@ -4978,9 +4973,9 @@ var DEFAULTS = {
|
|
|
4978
4973
|
size: 'regular',
|
|
4979
4974
|
},
|
|
4980
4975
|
};
|
|
4981
|
-
var templateObject_1$
|
|
4976
|
+
var templateObject_1$2b, templateObject_2$1A, templateObject_3$1e, templateObject_4$$, templateObject_5$M, templateObject_6$G, templateObject_7$x, templateObject_8$q, templateObject_9$d, templateObject_10$c, templateObject_11$8, templateObject_12$5, templateObject_13$5, templateObject_14$3, templateObject_15$2, templateObject_16$2, templateObject_17$2, templateObject_18$2, templateObject_19$2, templateObject_20$1;
|
|
4982
4977
|
|
|
4983
|
-
var Container$1m = newStyled.div(templateObject_1$
|
|
4978
|
+
var Container$1m = newStyled.div(templateObject_1$2a || (templateObject_1$2a = __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"])));
|
|
4984
4979
|
var Card$4 = newStyled.div(templateObject_2$1z || (templateObject_2$1z = __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"])));
|
|
4985
4980
|
var Tag$2 = newStyled.div(templateObject_3$1d || (templateObject_3$1d = __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"])));
|
|
4986
4981
|
var Label$7 = newStyled.div(templateObject_4$_ || (templateObject_4$_ = __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"])));
|
|
@@ -5010,9 +5005,9 @@ var PackCard$1 = function (_a) {
|
|
|
5010
5005
|
currency: currencyCode || 'USD',
|
|
5011
5006
|
}), ' ', "each", ')'] }), void 0)) : null] }, void 0)] }), void 0));
|
|
5012
5007
|
};
|
|
5013
|
-
var templateObject_1$
|
|
5008
|
+
var templateObject_1$2a, templateObject_2$1z, templateObject_3$1d, templateObject_4$_, templateObject_5$L, templateObject_6$F;
|
|
5014
5009
|
|
|
5015
|
-
var Container$1l = newStyled.div(templateObject_1$
|
|
5010
|
+
var Container$1l = newStyled.div(templateObject_1$29 || (templateObject_1$29 = __makeTemplateObject(["\n height: 32px;\n display: flex;\n align-items: center;\n"], ["\n height: 32px;\n display: flex;\n align-items: center;\n"])));
|
|
5016
5011
|
var DropContainer = newStyled.div(templateObject_2$1y || (templateObject_2$1y = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5017
5012
|
var DropList = function (_a) {
|
|
5018
5013
|
var dropTotal = _a.dropTotal, drops = _a.drops;
|
|
@@ -5020,17 +5015,17 @@ var DropList = function (_a) {
|
|
|
5020
5015
|
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));
|
|
5021
5016
|
}) }, void 0));
|
|
5022
5017
|
};
|
|
5023
|
-
var templateObject_1$
|
|
5018
|
+
var templateObject_1$29, templateObject_2$1y;
|
|
5024
5019
|
|
|
5025
5020
|
var DROPS_TOTAL = 5;
|
|
5026
|
-
var Container$1k = newStyled.div(templateObject_1$
|
|
5021
|
+
var Container$1k = newStyled.div(templateObject_1$28 || (templateObject_1$28 = __makeTemplateObject(["\n height: 32px;\n display: flex;\n"], ["\n height: 32px;\n display: flex;\n"])));
|
|
5027
5022
|
var Title$c = newStyled.p(templateObject_2$1x || (templateObject_2$1x = __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"])));
|
|
5028
5023
|
var Description$3 = newStyled.p(templateObject_3$1c || (templateObject_3$1c = __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"])));
|
|
5029
5024
|
var AbsorbencyLevel = function (_a) {
|
|
5030
5025
|
var dropTotal = _a.dropTotal, drops = _a.drops, absorbencyTitle = _a.absorbencyTitle, absorbencyDescription = _a.absorbencyDescription;
|
|
5031
5026
|
return (jsxRuntime.jsxs(Container$1k, { children: [jsxRuntime.jsx(Title$c, { 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));
|
|
5032
5027
|
};
|
|
5033
|
-
var templateObject_1$
|
|
5028
|
+
var templateObject_1$28, templateObject_2$1x, templateObject_3$1c;
|
|
5034
5029
|
|
|
5035
5030
|
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(`
|
|
5036
5031
|
`),"","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(`
|
|
@@ -5106,7 +5101,7 @@ var StyledButton$4 = newStyled(Ye.Button)(AccordionSummaryStyles.baseStyles, fun
|
|
|
5106
5101
|
AccordionSummaryStyles[props.variant](props.theme, props.disabled, props.controlIconPos),
|
|
5107
5102
|
]; }, function (props) { return [AccordionSummaryStyles.title(props.titlecolor)]; });
|
|
5108
5103
|
var StyledPanel$1 = newStyled(Ye.Panel)(AccordionDetailsStyles.baseStyles, function (props) { return [AccordionDetailsStyles[props.variant](props.theme)]; });
|
|
5109
|
-
var StyledContent$1 = newStyled.button(templateObject_1$
|
|
5104
|
+
var StyledContent$1 = newStyled.button(templateObject_1$27 || (templateObject_1$27 = __makeTemplateObject(["\n appearance: none;\n padding: 0;\n margin: 0;\n border: none;\n background: none;\n font-size: inherit;\n line-height: inherit;\n color: inherit;\n cursor: auto;\n user-select: text;\n writing-mode: unset;\n font-family: inherit;\n"], ["\n appearance: none;\n padding: 0;\n margin: 0;\n border: none;\n background: none;\n font-size: inherit;\n line-height: inherit;\n color: inherit;\n cursor: auto;\n user-select: text;\n writing-mode: unset;\n font-family: inherit;\n"])));
|
|
5110
5105
|
var Accordion$1 = function (_a) {
|
|
5111
5106
|
var header = _a.header, headerOnOpen = _a.headerOnOpen, content = _a.content, defaultOpen = _a.defaultOpen, _b = _a.forceOpenHandler, forceOpenHandler = _b === void 0 ? false : _b, _c = _a.forceOpenValue, forceOpenValue = _c === void 0 ? false : _c, titleColor = _a.titleColor, variant = _a.variant, _d = _a.disabled, disabled = _d === void 0 ? false : _d, _e = _a.innerHTML, innerHTML = _e === void 0 ? false : _e, _f = _a.backgroundCover, backgroundCover = _f === void 0 ? { value: false, iconBgColor: 'inherit' } : _f, _g = _a.controlIconPos, controlIconPos = _g === void 0 ? 'right' : _g, openIcon = _a.openIcon, closeIcon = _a.closeIcon, onClick = _a.onClick, testId = _a.testId;
|
|
5112
5107
|
var theme = useTheme();
|
|
@@ -5130,9 +5125,9 @@ var Accordion$1 = function (_a) {
|
|
|
5130
5125
|
} }, { children: jsxRuntime.jsx(ControlIcon, { title: "close icon", height: theme.component.accordion.variant[variant].icon.height, width: theme.component.accordion.variant[variant].icon.width, fill: theme.component.accordion.variant[variant].icon.color }, void 0) }), void 0)] }, void 0))] }), void 0), controlIconPos === 'right' && showPanel && (jsxRuntime.jsx(StyledContent$1, __assign$1({ onClick: function (e) { return e.stopPropagation(); } }, { children: !innerHTML ? (jsxRuntime.jsx(StyledPanel$1, __assign$1({ static: true, variant: variant, theme: theme }, { children: content }), void 0)) : (jsxRuntime.jsx("div", { dangerouslySetInnerHTML: { __html: content } }, void 0)) }), void 0))] }, void 0));
|
|
5131
5126
|
} }), void 0));
|
|
5132
5127
|
};
|
|
5133
|
-
var templateObject_1$
|
|
5128
|
+
var templateObject_1$27;
|
|
5134
5129
|
|
|
5135
|
-
var Container$1j = newStyled.div(templateObject_1$
|
|
5130
|
+
var Container$1j = newStyled.div(templateObject_1$26 || (templateObject_1$26 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 16px;\n"], ["\n display: flex;\n flex-direction: column;\n gap: 16px;\n"])));
|
|
5136
5131
|
var AccordionOptions = function (_a) {
|
|
5137
5132
|
var titleColor = _a.titleColor, accordions = _a.accordions;
|
|
5138
5133
|
var _b = React$2.useState({
|
|
@@ -5156,7 +5151,7 @@ var AccordionOptions = function (_a) {
|
|
|
5156
5151
|
} }, accordion, { forceOpenHandler: true, forceOpenValue: getForceOpen(index), titleColor: accordionTitleColor }), "accordion-".concat(index)));
|
|
5157
5152
|
}) }, void 0));
|
|
5158
5153
|
};
|
|
5159
|
-
var templateObject_1$
|
|
5154
|
+
var templateObject_1$26;
|
|
5160
5155
|
|
|
5161
5156
|
/**
|
|
5162
5157
|
* @returns number formatted with "," and 2 decimals as string
|
|
@@ -5292,11 +5287,11 @@ var isValidDate = function (value) {
|
|
|
5292
5287
|
return /^\d{4}-\d{2}-\d{2}$/.test(value);
|
|
5293
5288
|
};
|
|
5294
5289
|
|
|
5295
|
-
var Bold = newStyled.span(templateObject_1$
|
|
5290
|
+
var Bold = newStyled.span(templateObject_1$25 || (templateObject_1$25 = __makeTemplateObject(["\n font-weight: bold;\n"], ["\n font-weight: bold;\n"])));
|
|
5296
5291
|
var FlexContainer$4 = newStyled.div(templateObject_2$1w || (templateObject_2$1w = __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"])));
|
|
5297
|
-
var templateObject_1$
|
|
5292
|
+
var templateObject_1$25, templateObject_2$1w;
|
|
5298
5293
|
|
|
5299
|
-
var Container$1i = newStyled.div(templateObject_1$
|
|
5294
|
+
var Container$1i = newStyled.div(templateObject_1$24 || (templateObject_1$24 = __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) {
|
|
5300
5295
|
var _b = _a.width, width = _b === void 0 ? '100%' : _b;
|
|
5301
5296
|
return width;
|
|
5302
5297
|
}, function (_a) {
|
|
@@ -5307,7 +5302,7 @@ var FlexCentered = newStyled.div(templateObject_2$1v || (templateObject_2$1v = _
|
|
|
5307
5302
|
var LeftSide = newStyled.div(templateObject_3$1b || (templateObject_3$1b = __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"])));
|
|
5308
5303
|
var RightSide = newStyled.div(templateObject_4$Z || (templateObject_4$Z = __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"])));
|
|
5309
5304
|
var FlexStart = newStyled.div(templateObject_5$K || (templateObject_5$K = __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"])));
|
|
5310
|
-
var templateObject_1$
|
|
5305
|
+
var templateObject_1$24, templateObject_2$1v, templateObject_3$1b, templateObject_4$Z, templateObject_5$K;
|
|
5311
5306
|
|
|
5312
5307
|
var CouponCard = function (_a) {
|
|
5313
5308
|
var image = _a.image, title = _a.title, content = _a.content, couponCode = _a.couponCode, offerLink = _a.offerLink, width = _a.width, height = _a.height, _b = _a.btnText, btnText = _b === void 0 ? 'Redeem Offer' : _b, onClickRedeemOfferHandler = _a.onClickRedeemOfferHandler, onClickHandler = _a.onClickHandler;
|
|
@@ -5452,14 +5447,14 @@ var sizeOptions = [
|
|
|
5452
5447
|
},
|
|
5453
5448
|
];
|
|
5454
5449
|
|
|
5455
|
-
var ErrorText = newStyled.h3(templateObject_1$
|
|
5450
|
+
var ErrorText = newStyled.h3(templateObject_1$23 || (templateObject_1$23 = __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; });
|
|
5456
5451
|
var ErrorContainer = newStyled.div(templateObject_2$1u || (templateObject_2$1u = __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"])));
|
|
5457
5452
|
var Error$1 = function (_a) {
|
|
5458
5453
|
var error = _a.error;
|
|
5459
5454
|
var theme = useTheme();
|
|
5460
5455
|
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));
|
|
5461
5456
|
};
|
|
5462
|
-
var templateObject_1$
|
|
5457
|
+
var templateObject_1$23, templateObject_2$1u;
|
|
5463
5458
|
|
|
5464
5459
|
var BaseSelectButton = function (_a) {
|
|
5465
5460
|
var children = _a.children, as = _a.as;
|
|
@@ -5476,7 +5471,7 @@ function BaseSelectOption(_a) {
|
|
|
5476
5471
|
return (jsxRuntime.jsx(Ee.Option, __assign$1({ className: className, as: as, value: value, disabled: disabled }, { children: children }), void 0));
|
|
5477
5472
|
}
|
|
5478
5473
|
|
|
5479
|
-
var CustomListBox = newStyled(Ee)(templateObject_1$
|
|
5474
|
+
var CustomListBox = newStyled(Ee)(templateObject_1$22 || (templateObject_1$22 = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
5480
5475
|
function BaseSelect(_a) {
|
|
5481
5476
|
var value = _a.value, onChange = _a.onChange, disabled = _a.disabled, children = _a.children, className = _a.className;
|
|
5482
5477
|
return (jsxRuntime.jsx(CustomListBox, __assign$1({ disabled: disabled, as: "div", value: value, onChange: onChange, className: className }, { children: children }), void 0));
|
|
@@ -5486,7 +5481,7 @@ var BaseSelect$1 = Object.assign(BaseSelect, {
|
|
|
5486
5481
|
Options: BaseSelectOptions,
|
|
5487
5482
|
Option: BaseSelectOption,
|
|
5488
5483
|
});
|
|
5489
|
-
var templateObject_1$
|
|
5484
|
+
var templateObject_1$22;
|
|
5490
5485
|
|
|
5491
5486
|
var CustomButton = newStyled.button(function (_a) {
|
|
5492
5487
|
var theme = _a.theme, wide = _a.wide, isSortOrFilter = _a.isSortOrFilter;
|
|
@@ -5525,7 +5520,7 @@ var CustomButton = newStyled.button(function (_a) {
|
|
|
5525
5520
|
});
|
|
5526
5521
|
});
|
|
5527
5522
|
// TODO Remove this when we find the real solution
|
|
5528
|
-
var StyledIcon$1 = newStyled.span(templateObject_1$
|
|
5523
|
+
var StyledIcon$1 = newStyled.span(templateObject_1$21 || (templateObject_1$21 = __makeTemplateObject(["\n [data-testid='CloseIcon'] {\n display: none;\n }\n ", "\n"], ["\n [data-testid='CloseIcon'] {\n display: none;\n }\n ", "\n"])), function (_a) {
|
|
5529
5524
|
var open = _a.open;
|
|
5530
5525
|
return open &&
|
|
5531
5526
|
"\n [data-testid=\"CloseIcon\"] {\n display: block;\n }\n [data-testid=\"OpenIcon\"] {\n display: none;\n }\n";
|
|
@@ -5545,7 +5540,7 @@ var BaseDropdownButton = function (_a) {
|
|
|
5545
5540
|
} }), void 0));
|
|
5546
5541
|
};
|
|
5547
5542
|
var BaseDropdownButton$1 = React__default["default"].memo(BaseDropdownButton);
|
|
5548
|
-
var templateObject_1$
|
|
5543
|
+
var templateObject_1$21;
|
|
5549
5544
|
|
|
5550
5545
|
var DropdownOptions$1 = newStyled(BaseSelect$1.Options)(function (_a) {
|
|
5551
5546
|
var theme = _a.theme;
|
|
@@ -5712,7 +5707,7 @@ var CustomCheckboxStyles = {
|
|
|
5712
5707
|
},
|
|
5713
5708
|
};
|
|
5714
5709
|
|
|
5715
|
-
var Container$1h = newStyled.div(templateObject_1$
|
|
5710
|
+
var Container$1h = newStyled.div(templateObject_1$20 || (templateObject_1$20 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n width: fit-content;\n user-select: none;\n position: relative;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n width: fit-content;\n user-select: none;\n position: relative;\n"])));
|
|
5716
5711
|
var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (props) { return [
|
|
5717
5712
|
CustomCheckboxStyles[props.size](props.theme),
|
|
5718
5713
|
CustomCheckboxStyles[props.variant](props.theme, props.isChecked, props.disabled),
|
|
@@ -5739,7 +5734,7 @@ var Checkbox = function (_a) {
|
|
|
5739
5734
|
};
|
|
5740
5735
|
return (jsxRuntime.jsxs(Container$1h, { children: [jsxRuntime.jsx(Input$5, { type: "checkbox", checked: checked, disabled: disabled, onChange: handleChange, id: id }, void 0), jsxRuntime.jsx(CustomCheckbox, __assign$1({ theme: theme, size: size, disabled: disabled, isChecked: checked, "data-testid": "checkbox", variant: variant, backgroundColor: backgroundColor, text: text }, { children: checked && jsxRuntime.jsx(Icon.Actions.Check, { fill: "#fff" }, void 0) }), void 0), jsxRuntime.jsx(Label$6, __assign$1({ "data-testid": "checkbox-text", size: sizeLabel, style: { color: colorLabel ? colorLabel : theme.colors.shades['700'].color }, variant: checked ? 'demi' : 'regular', htmlFor: id, disabled: disabled }, { children: text }), void 0)] }, void 0));
|
|
5741
5736
|
};
|
|
5742
|
-
var templateObject_1$
|
|
5737
|
+
var templateObject_1$20, templateObject_2$1t;
|
|
5743
5738
|
|
|
5744
5739
|
var CustomOption = newStyled.li(function (_a) {
|
|
5745
5740
|
var theme = _a.theme, selected = _a.selected, active = _a.active, hasImage = _a.hasImage;
|
|
@@ -5788,7 +5783,7 @@ var BaseDropdown$1 = Object.assign(BaseDropdown, {
|
|
|
5788
5783
|
Option: BaseDropdownOption,
|
|
5789
5784
|
});
|
|
5790
5785
|
|
|
5791
|
-
var Container$1g = newStyled.div(templateObject_1$
|
|
5786
|
+
var Container$1g = newStyled.div(templateObject_1$1$ || (templateObject_1$1$ = __makeTemplateObject([""], [""])));
|
|
5792
5787
|
var RequiredPlaceholder = newStyled.p(templateObject_2$1s || (templateObject_2$1s = __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"])));
|
|
5793
5788
|
var SelectedOption = newStyled.span(templateObject_3$1a || (templateObject_3$1a = __makeTemplateObject(["\n font-weight: ", ";\n"], ["\n font-weight: ", ";\n"])), function (_a) {
|
|
5794
5789
|
var fontWeight = _a.fontWeight;
|
|
@@ -5826,7 +5821,7 @@ function SimpleDropdown(_a) {
|
|
|
5826
5821
|
var DropdownContainer = showRequiredPlaceholder ? Container$1g : React$2.Fragment;
|
|
5827
5822
|
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));
|
|
5828
5823
|
}
|
|
5829
|
-
var templateObject_1$
|
|
5824
|
+
var templateObject_1$1$, templateObject_2$1s, templateObject_3$1a;
|
|
5830
5825
|
|
|
5831
5826
|
/* base styles & size variants */
|
|
5832
5827
|
var CustomRadioStyles$2 = {
|
|
@@ -5891,7 +5886,7 @@ var ContainerStyles$2 = {
|
|
|
5891
5886
|
},
|
|
5892
5887
|
};
|
|
5893
5888
|
|
|
5894
|
-
var Wrapper$7 = newStyled.div(templateObject_1$
|
|
5889
|
+
var Wrapper$7 = newStyled.div(templateObject_1$1_ || (templateObject_1$1_ = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
5895
5890
|
var Container$1f = newStyled.div(__assign$1({}, ContainerStyles$2.baseStyles), function (props) { return [ContainerStyles$2[props.size](props.theme)]; });
|
|
5896
5891
|
var Input$4 = newStyled.input(templateObject_2$1r || (templateObject_2$1r = __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) {
|
|
5897
5892
|
var disabled = _a.disabled;
|
|
@@ -5927,7 +5922,7 @@ var RadioInput = function (_a) {
|
|
|
5927
5922
|
};
|
|
5928
5923
|
return (jsxRuntime.jsxs(Wrapper$7, { children: [jsxRuntime.jsxs(Container$1f, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsxRuntime.jsx(Input$4, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled, style: style }, void 0), jsxRuntime.jsx(CustomRadio$2, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), useV2Style ? (jsxRuntime.jsxs(StyledLabelV2, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled, style: labelStyle }, { children: [icon, " ", label] }), void 0)) : (jsxRuntime.jsx(StyledLabel$3, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0))] }, void 0));
|
|
5929
5924
|
};
|
|
5930
|
-
var templateObject_1$
|
|
5925
|
+
var templateObject_1$1_, templateObject_2$1r, templateObject_3$19, templateObject_4$Y;
|
|
5931
5926
|
|
|
5932
5927
|
var useOnClickOutside = function (ref, handler) {
|
|
5933
5928
|
React$2.useEffect(function () {
|
|
@@ -6020,7 +6015,7 @@ var getTooltipAlignItems = function (position, align) {
|
|
|
6020
6015
|
}
|
|
6021
6016
|
};
|
|
6022
6017
|
|
|
6023
|
-
var Wrapper$6 = newStyled.div(templateObject_1$
|
|
6018
|
+
var Wrapper$6 = newStyled.div(templateObject_1$1Z || (templateObject_1$1Z = __makeTemplateObject(["\n display: flex;\n flex-direction: ", ";\n align-items: center;\n cursor: pointer;\n\n &:hover {\n .tooltip-container {\n visibility: ", ";\n opacity: ", ";\n cursor: text;\n }\n }\n"], ["\n display: flex;\n flex-direction: ", ";\n align-items: center;\n cursor: pointer;\n\n &:hover {\n .tooltip-container {\n visibility: ", ";\n opacity: ", ";\n cursor: text;\n }\n }\n"])), function (_a) {
|
|
6024
6019
|
var position = _a.position;
|
|
6025
6020
|
return getWrapperFlexDirection(position);
|
|
6026
6021
|
}, function (_a) {
|
|
@@ -6085,7 +6080,7 @@ var CloseToolTip = newStyled.button(templateObject_8$p || (templateObject_8$p =
|
|
|
6085
6080
|
var _b = _a.right, right = _b === void 0 ? '.3rem' : _b;
|
|
6086
6081
|
return right;
|
|
6087
6082
|
});
|
|
6088
|
-
var templateObject_1$
|
|
6083
|
+
var templateObject_1$1Z, templateObject_2$1q, templateObject_3$18, templateObject_4$X, templateObject_5$J, templateObject_6$E, templateObject_7$w, templateObject_8$p;
|
|
6089
6084
|
|
|
6090
6085
|
var Tooltip = function (_a) {
|
|
6091
6086
|
var _b;
|
|
@@ -6128,7 +6123,7 @@ var benefitsColorMapper = function (_a) {
|
|
|
6128
6123
|
};
|
|
6129
6124
|
};
|
|
6130
6125
|
|
|
6131
|
-
var FlexContainer$3 = newStyled.div(templateObject_1$
|
|
6126
|
+
var FlexContainer$3 = newStyled.div(templateObject_1$1Y || (templateObject_1$1Y = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
6132
6127
|
var ContainerBase$3 = newStyled.div(templateObject_2$1p || (templateObject_2$1p = __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) {
|
|
6133
6128
|
var selected = _a.selected, theme = _a.theme;
|
|
6134
6129
|
return selected
|
|
@@ -6158,7 +6153,7 @@ var SubscriptionHeader$3 = newStyled.div(templateObject_5$I || (templateObject_5
|
|
|
6158
6153
|
var BenefitsContainer$3 = newStyled.div(templateObject_6$D || (templateObject_6$D = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
6159
6154
|
var Benefit$4 = newStyled.div(templateObject_7$v || (templateObject_7$v = __makeTemplateObject(["\n display: flex;\n padding: 8px 0px;\n svg {\n overflow: visible;\n }\n"], ["\n display: flex;\n padding: 8px 0px;\n svg {\n overflow: visible;\n }\n"])));
|
|
6160
6155
|
var BenefitText$3 = newStyled(Text$7)(templateObject_8$o || (templateObject_8$o = __makeTemplateObject(["\n line-height: 20px;\n margin-left: 9px;\n"], ["\n line-height: 20px;\n margin-left: 9px;\n"])));
|
|
6161
|
-
var SubscriptionDetails = newStyled(Text$7)(templateObject_9$
|
|
6156
|
+
var SubscriptionDetails = newStyled(Text$7)(templateObject_9$c || (templateObject_9$c = __makeTemplateObject(["\n font-size: 16px;\n margin-right: 7px;\n"], ["\n font-size: 16px;\n margin-right: 7px;\n"])));
|
|
6162
6157
|
var SubscriptionDetailsContainer = newStyled.div(templateObject_10$b || (templateObject_10$b = __makeTemplateObject(["\n margin-top: 18px;\n display: flex;\n"], ["\n margin-top: 18px;\n display: flex;\n"])));
|
|
6163
6158
|
var DeliveryFrequencyLabel$1 = newStyled(Text$7)(templateObject_11$7 || (templateObject_11$7 = __makeTemplateObject(["\n line-height: 35px;\n margin-right: 8px;\n align-self: center;\n"], ["\n line-height: 35px;\n margin-right: 8px;\n align-self: center;\n"])));
|
|
6164
6159
|
var StyledPrice$3 = newStyled(PriceLabelV2$1)(templateObject_12$4 || (templateObject_12$4 = __makeTemplateObject(["\n div p {\n color: ", ";\n }\n"], ["\n div p {\n color: ", ";\n }\n"])), function (_a) {
|
|
@@ -6166,7 +6161,7 @@ var StyledPrice$3 = newStyled(PriceLabelV2$1)(templateObject_12$4 || (templateOb
|
|
|
6166
6161
|
return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
|
|
6167
6162
|
});
|
|
6168
6163
|
var Container$1e = newStyled.div(templateObject_13$4 || (templateObject_13$4 = __makeTemplateObject([""], [""])));
|
|
6169
|
-
var templateObject_1$
|
|
6164
|
+
var templateObject_1$1Y, templateObject_2$1p, templateObject_3$17, templateObject_4$W, templateObject_5$I, templateObject_6$D, templateObject_7$v, templateObject_8$o, templateObject_9$c, templateObject_10$b, templateObject_11$7, templateObject_12$4, templateObject_13$4;
|
|
6170
6165
|
|
|
6171
6166
|
var radioIds$2 = {
|
|
6172
6167
|
oneTime: {
|
|
@@ -6221,7 +6216,7 @@ var Autoship = function (_a) {
|
|
|
6221
6216
|
: benefitsColor.base }, void 0), jsxRuntime.jsx(BenefitText$3, __assign$1({ variant: "body" }, { children: benefit }), void 0)] }, benefit)); }) }, void 0), radioIds$2.autoship.id === radioCheck.id && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(FlexContainer$3, { children: [jsxRuntime.jsx(DeliveryFrequencyLabel$1, __assign$1({ variant: "body" }, { children: "Delivery Every:" }), void 0), jsxRuntime.jsx(SimpleDropdown, { testId: "subscription-frecuency", initialValue: dropdownOptions[0], options: dropdownOptions, onChange: function (value) { return handleChange(value.value, 'dropdown'); }, placeHolder: "" }, void 0)] }, void 0), jsxRuntime.jsx(SubscriptionDetailsContainer, { children: jsxRuntime.jsx(Tooltip, __assign$1({ position: 0, content: tooltipContent, header: tooltipHeader, maxWidth: "300px", showCloseIcon: closeIcon }, { children: jsxRuntime.jsxs(FlexContainer$3, { children: [jsxRuntime.jsx(SubscriptionDetails, __assign$1({ variant: "body", weight: "demi" }, { children: "Subscription Details" }), void 0), jsxRuntime.jsx(Icon.Actions.CircleQuestion, { width: 1.2 }, void 0)] }, void 0) }), void 0) }, void 0)] }, void 0))] }), void 0)] }), void 0));
|
|
6222
6217
|
};
|
|
6223
6218
|
|
|
6224
|
-
var FlexContainer$2 = newStyled.div(templateObject_1$
|
|
6219
|
+
var FlexContainer$2 = newStyled.div(templateObject_1$1X || (templateObject_1$1X = __makeTemplateObject(["\n display: flex;\n\n ", "\n"], ["\n display: flex;\n\n ", "\n"])), function (_a) {
|
|
6225
6220
|
var theme = _a.theme;
|
|
6226
6221
|
return theme.name === 'TheSpaDr' &&
|
|
6227
6222
|
"\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 ";
|
|
@@ -6268,7 +6263,7 @@ var SubscriptionHeader$2 = newStyled.div(templateObject_6$C || (templateObject_6
|
|
|
6268
6263
|
});
|
|
6269
6264
|
var BenefitsContainer$2 = newStyled.div(templateObject_7$u || (templateObject_7$u = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
6270
6265
|
var Benefit$3 = newStyled.div(templateObject_8$n || (templateObject_8$n = __makeTemplateObject(["\n display: flex;\n padding: 8px 0;\n svg {\n overflow: visible;\n }\n"], ["\n display: flex;\n padding: 8px 0;\n svg {\n overflow: visible;\n }\n"])));
|
|
6271
|
-
var BenefitText$2 = newStyled(Text$7)(templateObject_9$
|
|
6266
|
+
var BenefitText$2 = newStyled(Text$7)(templateObject_9$b || (templateObject_9$b = __makeTemplateObject(["\n line-height: 20px;\n margin-left: 9px;\n"], ["\n line-height: 20px;\n margin-left: 9px;\n"])));
|
|
6272
6267
|
var DeliveryFrequencyLabel = newStyled(Text$7)(templateObject_10$a || (templateObject_10$a = __makeTemplateObject(["\n line-height: 35px;\n margin-right: 8px;\n align-self: center;\n"], ["\n line-height: 35px;\n margin-right: 8px;\n align-self: center;\n"])));
|
|
6273
6268
|
var StyledPrice$2 = newStyled(PriceLabelV2$1)(templateObject_11$6 || (templateObject_11$6 = __makeTemplateObject(["\n div p {\n color: ", ";\n }\n"], ["\n div p {\n color: ", ";\n }\n"])), function (_a) {
|
|
6274
6269
|
var selected = _a.selected, theme = _a.theme;
|
|
@@ -6279,7 +6274,7 @@ var TooltipWrapper$1 = newStyled.div(templateObject_13$3 || (templateObject_13$3
|
|
|
6279
6274
|
var theme = _a.theme;
|
|
6280
6275
|
return theme.component.autoship.tooltip.margin;
|
|
6281
6276
|
});
|
|
6282
|
-
var templateObject_1$
|
|
6277
|
+
var templateObject_1$1X, templateObject_2$1o, templateObject_3$16, templateObject_4$V, templateObject_5$H, templateObject_6$C, templateObject_7$u, templateObject_8$n, templateObject_9$b, templateObject_10$a, templateObject_11$6, templateObject_12$3, templateObject_13$3;
|
|
6283
6278
|
|
|
6284
6279
|
var radioIds$1 = {
|
|
6285
6280
|
oneTime: {
|
|
@@ -6358,13 +6353,13 @@ var componentSizeMapper = (_a$2 = {},
|
|
|
6358
6353
|
_a$2[exports.ComponentSize.Large] = exports.ComponentSize.Medium,
|
|
6359
6354
|
_a$2);
|
|
6360
6355
|
|
|
6361
|
-
var CustomerDetails = newStyled.div(templateObject_1$
|
|
6356
|
+
var CustomerDetails = newStyled.div(templateObject_1$1W || (templateObject_1$1W = __makeTemplateObject([""], [""])));
|
|
6362
6357
|
var CustomerInfo = newStyled.div(templateObject_2$1n || (templateObject_2$1n = __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"])));
|
|
6363
6358
|
var Name = newStyled.h4(templateObject_3$15 || (templateObject_3$15 = __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"])));
|
|
6364
6359
|
var StarIconContainer = newStyled.div(templateObject_4$U || (templateObject_4$U = __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"])));
|
|
6365
6360
|
var Description$2 = newStyled.p(templateObject_5$G || (templateObject_5$G = __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"])));
|
|
6366
6361
|
var ReviewDays = newStyled.span(templateObject_6$B || (templateObject_6$B = __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"])));
|
|
6367
|
-
var templateObject_1$
|
|
6362
|
+
var templateObject_1$1W, templateObject_2$1n, templateObject_3$15, templateObject_4$U, templateObject_5$G, templateObject_6$B;
|
|
6368
6363
|
|
|
6369
6364
|
var NameWithStars = function (_a) {
|
|
6370
6365
|
var name = _a.name, size = _a.size;
|
|
@@ -6382,7 +6377,7 @@ var ResultFeedback = function (_a) {
|
|
|
6382
6377
|
return (jsxRuntime.jsxs(CustomerDetails, { children: [jsxRuntime.jsx(NameWithStars, { name: name, size: size }, void 0), description && jsxRuntime.jsx(Description$2, { children: description }, void 0), reviewDays && jsxRuntime.jsx(ReviewDays, { children: reviewDays }, void 0)] }, void 0));
|
|
6383
6378
|
};
|
|
6384
6379
|
|
|
6385
|
-
var Container$1c = newStyled.div(templateObject_1$
|
|
6380
|
+
var Container$1c = newStyled.div(templateObject_1$1V || (templateObject_1$1V = __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; });
|
|
6386
6381
|
var ImageContainer$7 = newStyled.div(templateObject_2$1m || (templateObject_2$1m = __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"])));
|
|
6387
6382
|
var ImageCard = newStyled.div(templateObject_3$14 || (templateObject_3$14 = __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; });
|
|
6388
6383
|
var UserInfoText = newStyled.div(templateObject_4$T || (templateObject_4$T = __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) {
|
|
@@ -6395,7 +6390,7 @@ var UserInfoText = newStyled.div(templateObject_4$T || (templateObject_4$T = __m
|
|
|
6395
6390
|
var theme = _a.theme, size = _a.size;
|
|
6396
6391
|
return theme.component.beforeAfter.size[componentSizeMapper[size]].userInfoText.mobile.fontSize;
|
|
6397
6392
|
});
|
|
6398
|
-
var templateObject_1$
|
|
6393
|
+
var templateObject_1$1V, templateObject_2$1m, templateObject_3$14, templateObject_4$T;
|
|
6399
6394
|
|
|
6400
6395
|
/* base styles & size variants */
|
|
6401
6396
|
var getStylesBySize$d = function (size, theme) {
|
|
@@ -6473,7 +6468,7 @@ var BeforeAfterCard = function (_a) {
|
|
|
6473
6468
|
return (jsxRuntime.jsxs(Container$1c, __assign$1({ "data-testid": "Container", styles: stylesBySize }, { children: [jsxRuntime.jsxs(ImageContainer$7, __assign$1({ "data-testid": "ImageContainer" }, { children: [jsxRuntime.jsx(ImageCard, __assign$1({ "data-testid": "ImageCard", styles: stylesBySize }, { children: jsxRuntime.jsx(Image$3, { borderRadius: imageBorderRadius, src: beforeImage, alt: "before", height: "100%", width: "100%" }, void 0) }), void 0), jsxRuntime.jsx(ImageCard, __assign$1({ styles: stylesBySize }, { children: jsxRuntime.jsx(Image$3, { borderRadius: imageBorderRadius, src: afterImage, alt: "after", height: "100%", width: "100%" }, void 0) }), void 0)] }), void 0), jsxRuntime.jsx(Component, __assign$1({ name: name, size: size, alignCenter: alignCenter, text: infoText }, rest), void 0)] }), void 0));
|
|
6474
6469
|
};
|
|
6475
6470
|
|
|
6476
|
-
var Section = newStyled.div(templateObject_1$
|
|
6471
|
+
var Section = newStyled.div(templateObject_1$1U || (templateObject_1$1U = __makeTemplateObject(["\n font-weight: 600;\n display: flex;\n flex-direction: row;\n align-items: center;\n align-text: left;\n width: 100%;\n box-sizing: border-box;\n align-self: flex-start;\n padding: ", ";\n"], ["\n font-weight: 600;\n display: flex;\n flex-direction: row;\n align-items: center;\n align-text: left;\n width: 100%;\n box-sizing: border-box;\n align-self: flex-start;\n padding: ", ";\n"])), function (props) {
|
|
6477
6472
|
return props.type === exports.CardSectionType.Header ? '1.5rem 1.5rem 0' : '0 1.5rem 1.5rem';
|
|
6478
6473
|
});
|
|
6479
6474
|
var CardHeader = function (_a) {
|
|
@@ -6484,16 +6479,16 @@ var CardFooter = function (_a) {
|
|
|
6484
6479
|
var children = _a.children;
|
|
6485
6480
|
return (jsxRuntime.jsx(Section, __assign$1({ type: exports.CardSectionType.Footer }, { children: children }), void 0));
|
|
6486
6481
|
};
|
|
6487
|
-
var templateObject_1$
|
|
6482
|
+
var templateObject_1$1U;
|
|
6488
6483
|
|
|
6489
|
-
var Body$1 = newStyled.div(templateObject_1$
|
|
6484
|
+
var Body$1 = newStyled.div(templateObject_1$1T || (templateObject_1$1T = __makeTemplateObject(["\n display: flex;\n align-items: center;\n padding: 0.5rem 1.5rem;\n align-self: flex-start;\n"], ["\n display: flex;\n align-items: center;\n padding: 0.5rem 1.5rem;\n align-self: flex-start;\n"])));
|
|
6490
6485
|
var CardBody$1 = function (_a) {
|
|
6491
6486
|
var children = _a.children;
|
|
6492
6487
|
return jsxRuntime.jsx(Body$1, { children: children }, void 0);
|
|
6493
6488
|
};
|
|
6494
|
-
var templateObject_1$
|
|
6489
|
+
var templateObject_1$1T;
|
|
6495
6490
|
|
|
6496
|
-
var Container$1b = newStyled.div(templateObject_1$
|
|
6491
|
+
var Container$1b = newStyled.div(templateObject_1$1S || (templateObject_1$1S = __makeTemplateObject(["\n ", "\n width: ", ";\n background: ", ";\n border-radius: ", ";\n border: ", ";\n"], ["\n ", "\n width: ", ";\n background: ", ";\n border-radius: ", ";\n border: ", ";\n"])), function (_a) {
|
|
6497
6492
|
var flex = _a.flex;
|
|
6498
6493
|
return flex &&
|
|
6499
6494
|
"display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;";
|
|
@@ -6515,16 +6510,16 @@ var Card$3 = Object.assign(Card$2, {
|
|
|
6515
6510
|
Footer: CardFooter,
|
|
6516
6511
|
Body: CardBody$1,
|
|
6517
6512
|
});
|
|
6518
|
-
var templateObject_1$
|
|
6513
|
+
var templateObject_1$1S;
|
|
6519
6514
|
|
|
6520
|
-
var StyledWrapper = newStyled.div(templateObject_1$
|
|
6515
|
+
var StyledWrapper = newStyled.div(templateObject_1$1R || (templateObject_1$1R = __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"])));
|
|
6521
6516
|
var StyledContainer = newStyled.div(templateObject_2$1l || (templateObject_2$1l = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n"], ["\n display: flex;\n justify-content: space-between;\n align-items: center;\n"])));
|
|
6522
6517
|
var TextLabel = newStyled(Text$7)(templateObject_3$13 || (templateObject_3$13 = __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) {
|
|
6523
6518
|
var color = _a.color;
|
|
6524
6519
|
return color;
|
|
6525
6520
|
});
|
|
6526
6521
|
var YouAreSaving = newStyled(Text$7)(templateObject_4$S || (templateObject_4$S = __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"])));
|
|
6527
|
-
var templateObject_1$
|
|
6522
|
+
var templateObject_1$1R, templateObject_2$1l, templateObject_3$13, templateObject_4$S;
|
|
6528
6523
|
|
|
6529
6524
|
var Minimalistic = function (_a) {
|
|
6530
6525
|
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;
|
|
@@ -6532,7 +6527,7 @@ var Minimalistic = function (_a) {
|
|
|
6532
6527
|
return (jsxRuntime.jsx(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxRuntime.jsxs(StyledWrapper, { children: [jsxRuntime.jsxs(StyledContainer, __assign$1({ "data-testid": "".concat(testId, "-section") }, { children: [jsxRuntime.jsx(StyledContainer, { children: jsxRuntime.jsx(TextLabel, __assign$1({ variant: "body", weight: "demi", size: "small" }, { children: getMorePayLessText }), void 0) }, void 0), jsxRuntime.jsx(PriceLabel$1, { finalPrice: price, originalPrice: originalPrice, color: theme.colors.pallete.secondary.color, size: exports.ComponentSize.Small, testId: testId }, void 0)] }), void 0), jsxRuntime.jsxs(StyledContainer, __assign$1({ "data-testid": "".concat(testId, "-section-bottom") }, { children: [jsxRuntime.jsxs(TextLabel, __assign$1({ variant: "body", weight: "demi", size: "small", color: "var(--colors-pallete-red-color)" }, { children: [getQtyForText, " ", discount, "% ", offText.toLocaleUpperCase()] }), void 0), jsxRuntime.jsxs(YouAreSaving, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [youAreSavingText, ": ", savingPrice] }), void 0)] }), void 0)] }, void 0) }), void 0));
|
|
6533
6528
|
};
|
|
6534
6529
|
|
|
6535
|
-
var Container$1a = newStyled.div(templateObject_1$
|
|
6530
|
+
var Container$1a = newStyled.div(templateObject_1$1Q || (templateObject_1$1Q = __makeTemplateObject(["\n padding: 0.625rem 1.5rem;\n"], ["\n padding: 0.625rem 1.5rem;\n"])));
|
|
6536
6531
|
var Title$a = newStyled.h1(templateObject_2$1k || (templateObject_2$1k = __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; });
|
|
6537
6532
|
var Details$1 = newStyled.span(templateObject_3$12 || (templateObject_3$12 = __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; });
|
|
6538
6533
|
var PriceContainer$2 = newStyled.span(templateObject_4$R || (templateObject_4$R = __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"])));
|
|
@@ -6541,14 +6536,14 @@ var Simple = function (_a) {
|
|
|
6541
6536
|
var theme = useTheme();
|
|
6542
6537
|
return (jsxRuntime.jsx(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxRuntime.jsxs(Container$1a, { children: [jsxRuntime.jsx(Title$a, __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));
|
|
6543
6538
|
};
|
|
6544
|
-
var templateObject_1$
|
|
6539
|
+
var templateObject_1$1Q, templateObject_2$1k, templateObject_3$12, templateObject_4$R;
|
|
6545
6540
|
|
|
6546
6541
|
var Bundle = {
|
|
6547
6542
|
Minimalistic: Minimalistic,
|
|
6548
6543
|
Simple: Simple,
|
|
6549
6544
|
};
|
|
6550
6545
|
|
|
6551
|
-
var Container$19 = newStyled.div(templateObject_1$
|
|
6546
|
+
var Container$19 = newStyled.div(templateObject_1$1P || (templateObject_1$1P = __makeTemplateObject(["\n display: ", ";\n align-items: center;\n font-size: 0.88rem;\n"], ["\n display: ", ";\n align-items: center;\n font-size: 0.88rem;\n"])), function (_a) {
|
|
6552
6547
|
var displayBNPL = _a.displayBNPL;
|
|
6553
6548
|
return (displayBNPL ? 'flex' : 'none');
|
|
6554
6549
|
});
|
|
@@ -6580,41 +6575,41 @@ var BuyNowPayLater = function (_a) {
|
|
|
6580
6575
|
paddingRight: '0.25rem',
|
|
6581
6576
|
}, testId: "InstallmentPriceId" }, { children: installmentPrice }), void 0), showLogo ? ' with' : ''] }, void 0), showLogo && (jsxRuntime.jsx(IconWrapper$1, __assign$1({ style: { display: 'flex' } }, { children: jsxRuntime.jsx(IconComponent, { width: !bnplWithAfterPay ? 3.2 : 5.3, height: 2, fill: iconColor, style: { position: 'relative', left: bnplWithAfterPay ? '1rem' : '0' } }, void 0) }), void 0))] }), void 0) }), void 0));
|
|
6582
6577
|
};
|
|
6583
|
-
var templateObject_1$
|
|
6578
|
+
var templateObject_1$1P, templateObject_2$1j, templateObject_3$11;
|
|
6584
6579
|
|
|
6585
|
-
var Text$6 = newStyled.span(templateObject_1$
|
|
6580
|
+
var Text$6 = newStyled.span(templateObject_1$1O || (templateObject_1$1O = __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; });
|
|
6586
6581
|
var Title$9 = function (_a) {
|
|
6587
6582
|
var title = _a.title;
|
|
6588
6583
|
var theme = useTheme();
|
|
6589
6584
|
return jsxRuntime.jsx(Text$6, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0);
|
|
6590
6585
|
};
|
|
6591
|
-
var templateObject_1$
|
|
6586
|
+
var templateObject_1$1O;
|
|
6592
6587
|
|
|
6593
|
-
var P$4 = newStyled.p(templateObject_1$
|
|
6588
|
+
var P$4 = newStyled.p(templateObject_1$1N || (templateObject_1$1N = __makeTemplateObject(["\n font-size: 0.75rem;\n font-weight: 400;\n line-height: 1.125rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"], ["\n font-size: 0.75rem;\n font-weight: 400;\n line-height: 1.125rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"])), function (props) { return props.color; });
|
|
6594
6589
|
var Promo = function (_a) {
|
|
6595
6590
|
var text = _a.text;
|
|
6596
6591
|
var theme = useTheme();
|
|
6597
6592
|
return (jsxRuntime.jsx(P$4, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "CartProductItemPromo" }, { children: text }), void 0));
|
|
6598
6593
|
};
|
|
6599
|
-
var templateObject_1$
|
|
6594
|
+
var templateObject_1$1N;
|
|
6600
6595
|
|
|
6601
|
-
var Text$5 = newStyled.span(templateObject_1$
|
|
6596
|
+
var Text$5 = newStyled.span(templateObject_1$1M || (templateObject_1$1M = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 1.125rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"], ["\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 1.125rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"])), function (props) { return props.color; });
|
|
6602
6597
|
var Description$1 = function (_a) {
|
|
6603
6598
|
var text = _a.text;
|
|
6604
6599
|
var theme = useTheme();
|
|
6605
6600
|
return jsxRuntime.jsx(Text$5, __assign$1({ color: theme.colors.shades['400'].color }, { children: text }), void 0);
|
|
6606
6601
|
};
|
|
6607
|
-
var templateObject_1$
|
|
6602
|
+
var templateObject_1$1M;
|
|
6608
6603
|
|
|
6609
|
-
var Container$18 = newStyled.div(templateObject_1$
|
|
6604
|
+
var Container$18 = newStyled.div(templateObject_1$1L || (templateObject_1$1L = __makeTemplateObject(["\n margin: 0;\n padding: 0.25rem;\n background-color: ", ";\n display: inline-flex;\n border-radius: 50%;\n cursor: pointer;\n width: ", ";\n height: ", ";\n justify-content: center;\n align-items: center;\n"], ["\n margin: 0;\n padding: 0.25rem;\n background-color: ", ";\n display: inline-flex;\n border-radius: 50%;\n cursor: pointer;\n width: ", ";\n height: ", ";\n justify-content: center;\n align-items: center;\n"])), function (props) { return props.backgroundColor; }, function (props) { return "".concat(props.size, "em"); }, function (props) { return "".concat(props.size, "em"); });
|
|
6610
6605
|
var CloseButton$1 = function (_a) {
|
|
6611
6606
|
var onClick = _a.onClick, size = _a.size;
|
|
6612
6607
|
var theme = useTheme();
|
|
6613
6608
|
return (jsxRuntime.jsx(Container$18, __assign$1({ backgroundColor: theme.colors.shades['700'].color, onClick: onClick, "data-testid": "CartProductItemCloseBtn", size: size }, { children: jsxRuntime.jsx(Icon.Actions.Close, { width: size - 1, height: size - 1, fill: "#fff" }, void 0) }), void 0));
|
|
6614
6609
|
};
|
|
6615
|
-
var templateObject_1$
|
|
6610
|
+
var templateObject_1$1L;
|
|
6616
6611
|
|
|
6617
|
-
var Text$4 = newStyled.h3(templateObject_1$
|
|
6612
|
+
var Text$4 = newStyled.h3(templateObject_1$1K || (templateObject_1$1K = __makeTemplateObject(["\n background-color: ", ";\n margin: 0;\n padding: 0.25rem 0.5rem;\n font-size: 0.625rem;\n font-weight: 700;\n line-height: 0.875rem;\n border-radius: ", ";\n display: initial;\n color: ", ";\n"], ["\n background-color: ", ";\n margin: 0;\n padding: 0.25rem 0.5rem;\n font-size: 0.625rem;\n font-weight: 700;\n line-height: 0.875rem;\n border-radius: ", ";\n display: initial;\n color: ", ";\n"])), function (_a) {
|
|
6618
6613
|
var backgroundColor = _a.backgroundColor;
|
|
6619
6614
|
return backgroundColor;
|
|
6620
6615
|
}, function (_a) {
|
|
@@ -6629,7 +6624,7 @@ var OfferBanner = function (_a) {
|
|
|
6629
6624
|
var theme = useTheme();
|
|
6630
6625
|
return (jsxRuntime.jsx(Text$4, __assign$1({ backgroundColor: backgroundColor, color: theme.colors.shades['700'].color, borderRadius: theme.component.text.offerBanner.borderRadius, "data-testid": "OfferBanner" }, { children: discountAppliedText }), void 0));
|
|
6631
6626
|
};
|
|
6632
|
-
var templateObject_1$
|
|
6627
|
+
var templateObject_1$1K;
|
|
6633
6628
|
|
|
6634
6629
|
var CartProductItem = {
|
|
6635
6630
|
Title: Title$9,
|
|
@@ -6639,7 +6634,7 @@ var CartProductItem = {
|
|
|
6639
6634
|
CloseButton: CloseButton$1,
|
|
6640
6635
|
};
|
|
6641
6636
|
|
|
6642
|
-
var Container$17 = newStyled.div(templateObject_1$
|
|
6637
|
+
var Container$17 = newStyled.div(templateObject_1$1J || (templateObject_1$1J = __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"])));
|
|
6643
6638
|
var MobileContainer = newStyled(Container$17)(templateObject_2$1i || (templateObject_2$1i = __makeTemplateObject(["\n padding: 2px 2px;\n gap: 3px;\n"], ["\n padding: 2px 2px;\n gap: 3px;\n"])));
|
|
6644
6639
|
var DollarPart = newStyled.span(templateObject_3$10 || (templateObject_3$10 = __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"])));
|
|
6645
6640
|
var ClubMembersText = newStyled.span(templateObject_4$Q || (templateObject_4$Q = __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"])));
|
|
@@ -6652,7 +6647,7 @@ var ClubPriceLabel = function (_a) {
|
|
|
6652
6647
|
var isMobile = useWindowDimensions().isMobile;
|
|
6653
6648
|
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$17, { children: [jsxRuntime.jsx(DesktopDollarPart, { children: clubPrice }, void 0), jsxRuntime.jsx(DesktopClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) }, void 0));
|
|
6654
6649
|
};
|
|
6655
|
-
var templateObject_1$
|
|
6650
|
+
var templateObject_1$1J, templateObject_2$1i, templateObject_3$10, templateObject_4$Q, templateObject_5$F, templateObject_6$A, templateObject_7$t, templateObject_8$m;
|
|
6656
6651
|
|
|
6657
6652
|
var Spacing = function (_a) {
|
|
6658
6653
|
var size = _a.size, _b = _a.type, type = _b === void 0 ? 'block' : _b, children = _a.children, styleProp = _a.style;
|
|
@@ -6660,7 +6655,7 @@ var Spacing = function (_a) {
|
|
|
6660
6655
|
return jsxRuntime.jsx("div", __assign$1({ style: style }, { children: children }), void 0);
|
|
6661
6656
|
};
|
|
6662
6657
|
|
|
6663
|
-
var Container$16 = newStyled('div')(templateObject_1$
|
|
6658
|
+
var Container$16 = newStyled('div')(templateObject_1$1I || (templateObject_1$1I = __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"])));
|
|
6664
6659
|
var Content$2 = newStyled('div')(templateObject_2$1h || (templateObject_2$1h = __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"])));
|
|
6665
6660
|
var BarContainer$1 = newStyled('div')(templateObject_3$$ || (templateObject_3$$ = __makeTemplateObject(["\n gap: 2px;\n display: flex;\n align-items: flex-end;\n width: fit-content;\n"], ["\n gap: 2px;\n display: flex;\n align-items: flex-end;\n width: fit-content;\n"])));
|
|
6666
6661
|
var Bar$2 = newStyled('div')(templateObject_4$P || (templateObject_4$P = __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) {
|
|
@@ -6674,7 +6669,7 @@ var StrengthBars = function (_a) {
|
|
|
6674
6669
|
var _b = _a.barsFilled, barsFilled = _b === void 0 ? 0 : _b, supportText = _a.supportText;
|
|
6675
6670
|
return (jsxRuntime.jsxs(Container$16, __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));
|
|
6676
6671
|
};
|
|
6677
|
-
var templateObject_1$
|
|
6672
|
+
var templateObject_1$1I, templateObject_2$1h, templateObject_3$$, templateObject_4$P;
|
|
6678
6673
|
|
|
6679
6674
|
var AutoshipFrequencyDropdown = function (_a) {
|
|
6680
6675
|
var frequency = _a.frequency, onChange = _a.onChange;
|
|
@@ -6705,20 +6700,20 @@ var getDropdownOptions = function (frequency) {
|
|
|
6705
6700
|
}); });
|
|
6706
6701
|
};
|
|
6707
6702
|
|
|
6708
|
-
var Benefit$2 = newStyled.div(templateObject_1$
|
|
6703
|
+
var Benefit$2 = newStyled.div(templateObject_1$1H || (templateObject_1$1H = __makeTemplateObject(["\n display: flex;\n padding: 8px 0;\n svg {\n overflow: visible;\n }\n"], ["\n display: flex;\n padding: 8px 0;\n svg {\n overflow: visible;\n }\n"])));
|
|
6709
6704
|
var BenefitText$1 = newStyled(Text$7)(templateObject_2$1g || (templateObject_2$1g = __makeTemplateObject(["\n line-height: 20px;\n margin-left: 9px;\n"], ["\n line-height: 20px;\n margin-left: 9px;\n"])));
|
|
6710
|
-
var templateObject_1$
|
|
6705
|
+
var templateObject_1$1H, templateObject_2$1g;
|
|
6711
6706
|
|
|
6712
6707
|
var BenefitsList = function (_a) {
|
|
6713
|
-
var benefits = _a.benefits, disabled = _a.disabled;
|
|
6708
|
+
var benefits = _a.benefits, disabled = _a.disabled, className = _a.className;
|
|
6714
6709
|
var colors = useTheme().colors;
|
|
6715
6710
|
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: benefits.map(function (benefit) {
|
|
6716
6711
|
var _a;
|
|
6717
|
-
return (jsxRuntime.jsxs(Benefit$2, { children: [jsxRuntime.jsx(Icon$1, { name: benefit.iconName, fill: disabled ? colors.shades['250'].color : (_a = benefit.fill) !== null && _a !== void 0 ? _a : colors.shades['700'].color, width: "24px", height: "24px" }, void 0), jsxRuntime.jsx(BenefitText$1, { variant: "body", dangerouslySetInnerHTML: { __html: benefit.htmlText } }, void 0)] }, benefit.iconName));
|
|
6712
|
+
return (jsxRuntime.jsxs(Benefit$2, __assign$1({ className: className }, { children: [jsxRuntime.jsx(Icon$1, { name: benefit.iconName, fill: disabled ? colors.shades['250'].color : (_a = benefit.fill) !== null && _a !== void 0 ? _a : colors.shades['700'].color, width: "24px", height: "24px" }, void 0), jsxRuntime.jsx(BenefitText$1, { variant: "body", dangerouslySetInnerHTML: { __html: benefit.htmlText } }, void 0)] }), benefit.iconName));
|
|
6718
6713
|
}) }, void 0));
|
|
6719
6714
|
};
|
|
6720
6715
|
|
|
6721
|
-
var TimerContainer$1 = newStyled.div(templateObject_1$
|
|
6716
|
+
var TimerContainer$1 = newStyled.div(templateObject_1$1G || (templateObject_1$1G = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
6722
6717
|
var timerColor = _a.timerColor;
|
|
6723
6718
|
return timerColor || '';
|
|
6724
6719
|
});
|
|
@@ -6734,7 +6729,7 @@ var UnitBlock = newStyled(Text$7)(templateObject_3$_ || (templateObject_3$_ = __
|
|
|
6734
6729
|
return theme.colors.shades.white.color;
|
|
6735
6730
|
});
|
|
6736
6731
|
var Unit = newStyled.p(templateObject_4$O || (templateObject_4$O = __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"])));
|
|
6737
|
-
var templateObject_1$
|
|
6732
|
+
var templateObject_1$1G, templateObject_2$1f, templateObject_3$_, templateObject_4$O;
|
|
6738
6733
|
|
|
6739
6734
|
var HRS = 'HRS';
|
|
6740
6735
|
var MIN = 'MIN';
|
|
@@ -6775,7 +6770,7 @@ var Timer = function (_a) {
|
|
|
6775
6770
|
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));
|
|
6776
6771
|
};
|
|
6777
6772
|
|
|
6778
|
-
var TimerContainer = newStyled.div(templateObject_1$
|
|
6773
|
+
var TimerContainer = newStyled.div(templateObject_1$1F || (templateObject_1$1F = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n justify-content: ", ";\n align-items: center;\n background-color: ", ";\n width: 100%;\n padding: 5px 24px;\n height: 40px;\n line-height: 14px;\n border-radius: ", ";\n\n & [data-testid='HurryUpText'] {\n font-size: 12px !important;\n line-height: 12px !important;\n }\n\n & [data-testid='Time'] {\n font-size: 14px !important;\n line-height: 14px !important;\n }\n\n @media (min-width: 330px) {\n & [data-testid='HurryUpText'] {\n font-size: 14px !important;\n line-height: 14px !important;\n }\n\n & [data-testid='Time'] {\n font-size: 16px !important;\n line-height: 16px !important;\n }\n }\n\n @media (min-width: 767px) {\n border-radius: ", ";\n padding: 5px 2px;\n }\n"], ["\n display: flex;\n flex-direction: row;\n justify-content: ", ";\n align-items: center;\n background-color: ", ";\n width: 100%;\n padding: 5px 24px;\n height: 40px;\n line-height: 14px;\n border-radius: ", ";\n\n & [data-testid='HurryUpText'] {\n font-size: 12px !important;\n line-height: 12px !important;\n }\n\n & [data-testid='Time'] {\n font-size: 14px !important;\n line-height: 14px !important;\n }\n\n @media (min-width: 330px) {\n & [data-testid='HurryUpText'] {\n font-size: 14px !important;\n line-height: 14px !important;\n }\n\n & [data-testid='Time'] {\n font-size: 16px !important;\n line-height: 16px !important;\n }\n }\n\n @media (min-width: 767px) {\n border-radius: ", ";\n padding: 5px 2px;\n }\n"])), function (_a) {
|
|
6779
6774
|
var textPosition = _a.textPosition;
|
|
6780
6775
|
return textPosition;
|
|
6781
6776
|
}, function (_a) {
|
|
@@ -6788,7 +6783,7 @@ var TimerContainer = newStyled.div(templateObject_1$1E || (templateObject_1$1E =
|
|
|
6788
6783
|
var borderRadius = _a.borderRadius;
|
|
6789
6784
|
return borderRadius || '8px';
|
|
6790
6785
|
});
|
|
6791
|
-
var templateObject_1$
|
|
6786
|
+
var templateObject_1$1F;
|
|
6792
6787
|
|
|
6793
6788
|
var getDefaultCountdown = function () {
|
|
6794
6789
|
var tomorrowDate = new Date();
|
|
@@ -6804,7 +6799,7 @@ var HurryUp = function (_a) {
|
|
|
6804
6799
|
return (jsxRuntime.jsxs(TimerContainer, __assign$1({ backgroundColor: backgroundColor || theme.component.card.backgroundColor, textPosition: textPosition, borderRadius: (!isFullVersion && theme.component.hurryUp.borderRadius) || '0', "data-testid": "HurryUp" }, { children: [clockPosition === 'left' && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Icon.PDP.Stopwatch, { width: iconSize, height: iconSize, fill: theme.colors.pallete.secondary.color }, void 0), "\u00A0"] }, void 0)), jsxRuntime.jsx(Text$7, __assign$1({ testId: "HurryUpText", variant: "body", size: "small", weight: "demi", color: hurryUpTextColor }, { children: hurryUpText }), void 0), "\u00A0", clockPosition === 'right' && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Icon.PDP.Stopwatch, { width: iconSize, height: iconSize, fill: theme.colors.pallete.secondary.color }, void 0), "\u00A0"] }, void 0)), showTimer && (jsxRuntime.jsx(Timer, __assign$1({ countdown: countdown, onTimeUp: function () { } }, timerProps, { isCardsVersion: isFullVersion }), void 0))] }), void 0));
|
|
6805
6800
|
};
|
|
6806
6801
|
|
|
6807
|
-
var Container$15 = newStyled.div(templateObject_1$
|
|
6802
|
+
var Container$15 = newStyled.div(templateObject_1$1E || (templateObject_1$1E = __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) {
|
|
6808
6803
|
var size = _a.size;
|
|
6809
6804
|
return (size ? size : '100%');
|
|
6810
6805
|
}, function (_a) {
|
|
@@ -6832,29 +6827,29 @@ var StyledSpinner = newStyled.div(templateObject_2$1e || (templateObject_2$1e =
|
|
|
6832
6827
|
var _b = _a.duration, duration = _b === void 0 ? 0.7 : _b;
|
|
6833
6828
|
return duration;
|
|
6834
6829
|
});
|
|
6835
|
-
var templateObject_1$
|
|
6830
|
+
var templateObject_1$1E, templateObject_2$1e;
|
|
6836
6831
|
|
|
6837
6832
|
var Spinner = function (_a) {
|
|
6838
6833
|
var fill = _a.fill, background = _a.background, _b = _a.animationDuration, animationDuration = _b === void 0 ? 1 : _b, borderSize = _a.borderSize, _c = _a.complete, complete = _c === void 0 ? false : _c, completeIconStroke = _a.completeIconStroke, size = _a.size;
|
|
6839
6834
|
return (jsxRuntime.jsx(Container$15, __assign$1({ size: size, "data-testid": "Container" }, { children: complete ? (jsxRuntime.jsx(Icon.Actions.LightCheck, { fill: fill, svgProps: { strokeWidth: completeIconStroke } }, void 0)) : (jsxRuntime.jsx(StyledSpinner, { duration: animationDuration, "data-testid": "Loading", color: fill, background: background, size: borderSize !== null && borderSize !== void 0 ? borderSize : exports.ComponentSize.Small }, void 0)) }), void 0));
|
|
6840
6835
|
};
|
|
6841
6836
|
|
|
6842
|
-
var ProgressContainer = newStyled.div(templateObject_1$
|
|
6837
|
+
var ProgressContainer = newStyled.div(templateObject_1$1D || (templateObject_1$1D = __makeTemplateObject(["\n top: 20px;\n left: 10px;\n border-radius: 10px;\n position: absolute;\n height: 5px;\n width: 95%;\n background: rgba(0, 0, 0, 0.3);\n transition: opacity 0.3s ease-in-out;\n opacity: ", ";\n"], ["\n top: 20px;\n left: 10px;\n border-radius: 10px;\n position: absolute;\n height: 5px;\n width: 95%;\n background: rgba(0, 0, 0, 0.3);\n transition: opacity 0.3s ease-in-out;\n opacity: ", ";\n"])), function (props) { return (props.hide ? 0 : 1); });
|
|
6843
6838
|
var ProgressFiller = newStyled.div(templateObject_2$1d || (templateObject_2$1d = __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; });
|
|
6844
|
-
var templateObject_1$
|
|
6839
|
+
var templateObject_1$1D, templateObject_2$1d;
|
|
6845
6840
|
|
|
6846
6841
|
var ProgressBar$1 = function (_a) {
|
|
6847
6842
|
var progress = _a.progress, hide = _a.hide;
|
|
6848
6843
|
return (jsxRuntime.jsx(ProgressContainer, __assign$1({ "data-testid": "progress-bar", hide: hide }, { children: jsxRuntime.jsx(ProgressFiller, { progress: progress }, void 0) }), void 0));
|
|
6849
6844
|
};
|
|
6850
6845
|
|
|
6851
|
-
var Container$14 = newStyled.div(templateObject_1$
|
|
6846
|
+
var Container$14 = newStyled.div(templateObject_1$1C || (templateObject_1$1C = __makeTemplateObject(["\n max-width: 530px;\n position: relative;\n"], ["\n max-width: 530px;\n position: relative;\n"])));
|
|
6852
6847
|
var HTMLVideo = newStyled.video(templateObject_2$1c || (templateObject_2$1c = __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; });
|
|
6853
6848
|
var PlayIcon = newStyled(Icon.PDP.PlayVideo)(templateObject_3$Z || (templateObject_3$Z = __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"])));
|
|
6854
6849
|
var PlayContainer = newStyled.div(templateObject_4$N || (templateObject_4$N = __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"])));
|
|
6855
6850
|
var PauseContainer = newStyled.div(templateObject_5$E || (templateObject_5$E = __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"])));
|
|
6856
6851
|
var MuteButton = newStyled.button(templateObject_6$z || (templateObject_6$z = __makeTemplateObject(["\n position: absolute;\n background: transparent;\n border: none;\n bottom: 21px;\n right: 23px;\n z-index: 2;\n cursor: pointer;\n"], ["\n position: absolute;\n background: transparent;\n border: none;\n bottom: 21px;\n right: 23px;\n z-index: 2;\n cursor: pointer;\n"])));
|
|
6857
|
-
var templateObject_1$
|
|
6852
|
+
var templateObject_1$1C, templateObject_2$1c, templateObject_3$Z, templateObject_4$N, templateObject_5$E, templateObject_6$z;
|
|
6858
6853
|
|
|
6859
6854
|
var Video$1 = function (_a) {
|
|
6860
6855
|
var _b, _c, _d, _e;
|
|
@@ -6907,7 +6902,7 @@ var Video$1 = function (_a) {
|
|
|
6907
6902
|
return (jsxRuntime.jsxs(Container$14, __assign$1({ className: className }, { children: [!isLoading && withProgressBar && jsxRuntime.jsx(ProgressBar$1, { progress: progress, hide: hideProgressBar }, void 0), !isPlaying ? (jsxRuntime.jsx(PlayContainer, __assign$1({ "data-testid": "play", onClick: handlePlayClick }, { children: isStarted && jsxRuntime.jsx(PlayIcon, {}, void 0) }), void 0)) : (jsxRuntime.jsx(PauseContainer, { "data-testid": "pause", onClick: handlePauseClick }, void 0)), hasAudioControl && (jsxRuntime.jsxs(MuteButton, __assign$1({ onClick: handleMuteToggle }, { children: [isMuted && jsxRuntime.jsx(Icon$1, { name: "custom/sound_off" }, void 0), !isMuted && jsxRuntime.jsx(Icon$1, { name: "custom/sound_on" }, void 0)] }), void 0)), jsxRuntime.jsxs(HTMLVideo, __assign$1({}, rest, { muted: isMuted, "data-testid": "video", poster: thumbnail, playsInline: true, ref: videoRef, onTimeUpdate: onTimeUpdate, onCanPlay: function () { return setIsLoading(false); }, onLoadedData: function () { return setIsLoading(false); }, onPause: function () { return setIsPlaying(false); }, onPlaying: function () { return setIsPlaying(true); }, height: height || 'auto' }, { children: [jsxRuntime.jsx("track", { kind: "captions" }, void 0), jsxRuntime.jsx("source", { src: source }, void 0)] }), void 0)] }), void 0));
|
|
6908
6903
|
};
|
|
6909
6904
|
|
|
6910
|
-
var LikeCount = newStyled.span(templateObject_1$
|
|
6905
|
+
var LikeCount = newStyled.span(templateObject_1$1B || (templateObject_1$1B = __makeTemplateObject(["\n font-size: 14px;\n line-height: 22px;\n color: ", ";\n font-weight: 600;\n\n &.like-count {\n transition: color 0.2s ease;\n }\n"], ["\n font-size: 14px;\n line-height: 22px;\n color: ", ";\n font-weight: 600;\n\n &.like-count {\n transition: color 0.2s ease;\n }\n"])), function (_a) {
|
|
6911
6906
|
var theme = _a.theme;
|
|
6912
6907
|
return theme.colors.shades.black.color;
|
|
6913
6908
|
});
|
|
@@ -6930,7 +6925,7 @@ var LikeBtnContainer = newStyled.button(templateObject_2$1b || (templateObject_2
|
|
|
6930
6925
|
var _b = _a.boxSizing, boxSizing = _b === void 0 ? 'border-box' : _b;
|
|
6931
6926
|
return boxSizing;
|
|
6932
6927
|
});
|
|
6933
|
-
var templateObject_1$
|
|
6928
|
+
var templateObject_1$1B, templateObject_2$1b;
|
|
6934
6929
|
|
|
6935
6930
|
var getStylesBySize$c = function (size) {
|
|
6936
6931
|
switch (size) {
|
|
@@ -6951,7 +6946,7 @@ var getStylesBySize$c = function (size) {
|
|
|
6951
6946
|
};
|
|
6952
6947
|
}
|
|
6953
6948
|
};
|
|
6954
|
-
var Container$13 = newStyled.div(templateObject_1$
|
|
6949
|
+
var Container$13 = newStyled.div(templateObject_1$1A || (templateObject_1$1A = __makeTemplateObject(["\n background-color: ", ";\n width: ", ";\n height: ", ";\n border: ", ";\n border-radius: ", ";\n display: flex;\n justify-content: center;\n align-items: center;\n transition: background-color 0.1s ease;\n box-shadow: ", ";\n\n padding: ", ";\n gap: ", ";\n\n &:hover {\n background-color: ", ";\n cursor: pointer;\n }\n\n &.disabled {\n background-color: ", ";\n cursor: not-allowed;\n\n svg path {\n fill: ", ";\n }\n }\n"], ["\n background-color: ", ";\n width: ", ";\n height: ", ";\n border: ", ";\n border-radius: ", ";\n display: flex;\n justify-content: center;\n align-items: center;\n transition: background-color 0.1s ease;\n box-shadow: ", ";\n\n padding: ", ";\n gap: ", ";\n\n &:hover {\n background-color: ", ";\n cursor: pointer;\n }\n\n &.disabled {\n background-color: ", ";\n cursor: not-allowed;\n\n svg path {\n fill: ", ";\n }\n }\n"])), function (_a) {
|
|
6955
6950
|
var backgroundColor = _a.backgroundColor;
|
|
6956
6951
|
return backgroundColor;
|
|
6957
6952
|
}, function (_a) {
|
|
@@ -6994,7 +6989,7 @@ var IconButton = function (_a) {
|
|
|
6994
6989
|
var theme = useTheme();
|
|
6995
6990
|
return (jsxRuntime.jsx(Container$13, __assign$1({ border: border, width: width, className: disabled ? 'disabled' : '', backgroundColor: (_b = backgroundColor === null || backgroundColor === void 0 ? void 0 : backgroundColor.active) !== null && _b !== void 0 ? _b : theme.component.button.primary.active.backgroundColor, hoverBackgroundColor: (_c = backgroundColor === null || backgroundColor === void 0 ? void 0 : backgroundColor.hover) !== null && _c !== void 0 ? _c : theme.component.button.secondary.active.backgroundColor, disabledColor: theme.colors.shades['50'].color, disabledIconColor: theme.colors.shades['200'].color, size: size, "data-testid": dataTestId, onClick: disabled ? function () { } : onClick, hasText: hasText, boxShadow: boxShadow, rounded: rounded }, { children: children }), void 0));
|
|
6996
6991
|
};
|
|
6997
|
-
var templateObject_1$
|
|
6992
|
+
var templateObject_1$1A;
|
|
6998
6993
|
|
|
6999
6994
|
var LikeButton = function (_a) {
|
|
7000
6995
|
var _b;
|
|
@@ -7007,7 +7002,7 @@ var LikeButton = function (_a) {
|
|
|
7007
7002
|
return (jsxRuntime.jsx(LikeBtnContainer, __assign$1({ className: className }, containerProps, { children: jsxRuntime.jsxs(IconButton, __assign$1({ onClick: onClick, backgroundColor: background, hasText: !!likes, boxShadow: "0 6px 16px rgba(0, 0, 0, 0.12)" }, { children: [jsxRuntime.jsx(Icon$1, { name: isLiked ? 'actions/like_solid' : 'actions/like', fill: isLiked ? iconFill.solid : (_b = iconFill.regular) !== null && _b !== void 0 ? _b : iconFill.solid, width: "24px", height: "24px" }, void 0), !!likes && jsxRuntime.jsx(LikeCount, __assign$1({ className: "like-count" }, { children: likes }), void 0)] }), isLiked.toString()) }), void 0));
|
|
7008
7003
|
};
|
|
7009
7004
|
|
|
7010
|
-
var RegularPriceTagSpan = newStyled.span(templateObject_1$
|
|
7005
|
+
var RegularPriceTagSpan = newStyled.span(templateObject_1$1z || (templateObject_1$1z = __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"])));
|
|
7011
7006
|
var ClubPriceTagSpan = newStyled.span(templateObject_2$1a || (templateObject_2$1a = __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"])));
|
|
7012
7007
|
var PriceContainer$1 = newStyled.span(templateObject_3$Y || (templateObject_3$Y = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
7013
7008
|
var PriceContainerV2 = newStyled.span(templateObject_4$M || (templateObject_4$M = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
@@ -7032,7 +7027,7 @@ var PriceLabelV4 = function (_a) {
|
|
|
7032
7027
|
var theme = useTheme();
|
|
7033
7028
|
var isMobile = useWindowDimensions().isMobile;
|
|
7034
7029
|
var productFinalPrice = clubPrice;
|
|
7035
|
-
var supportedCurrencies = ['AU$', 'CA$', '£', '
|
|
7030
|
+
var supportedCurrencies = ['AU$', 'CA$', '£', 'NZ$', 'S$'];
|
|
7036
7031
|
var currencySymbol = '$';
|
|
7037
7032
|
if (typeof productFinalPrice === 'string') {
|
|
7038
7033
|
supportedCurrencies.forEach(function (availableCurrency) {
|
|
@@ -7065,14 +7060,14 @@ var PriceLabelV4 = function (_a) {
|
|
|
7065
7060
|
? finalPriceArray[0]
|
|
7066
7061
|
: (_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, { label: theme.label.member }, void 0)] }, void 0)] }, void 0)), discount && (jsxRuntime.jsx(TagContainer, __assign$1({ size: size }, { children: jsxRuntime.jsx(DiscountTag$3, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
|
|
7067
7062
|
};
|
|
7068
|
-
var templateObject_1$
|
|
7063
|
+
var templateObject_1$1z, templateObject_2$1a, templateObject_3$Y, templateObject_4$M, templateObject_5$D;
|
|
7069
7064
|
|
|
7070
7065
|
var STARTS_NUMBER = 5;
|
|
7071
7066
|
|
|
7072
|
-
var Container$12 = newStyled.div(templateObject_1$
|
|
7073
|
-
var templateObject_1$
|
|
7067
|
+
var Container$12 = newStyled.div(templateObject_1$1y || (templateObject_1$1y = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
7068
|
+
var templateObject_1$1y;
|
|
7074
7069
|
|
|
7075
|
-
var StarContainer = newStyled.div(templateObject_1$
|
|
7070
|
+
var StarContainer = newStyled.div(templateObject_1$1x || (templateObject_1$1x = __makeTemplateObject(["\n display: flex;\n margin-right: ", ";\n"], ["\n display: flex;\n margin-right: ", ";\n"])), function (_a) {
|
|
7076
7071
|
var marginRight = _a.marginRight;
|
|
7077
7072
|
return marginRight;
|
|
7078
7073
|
});
|
|
@@ -7088,7 +7083,7 @@ var StarList = function (_a) {
|
|
|
7088
7083
|
return (jsxRuntime.jsx(StarContainer, __assign$1({ "data-testid": "star-container", marginRight: theme.component.stars.element[size].marginRight }, { children: index < Math.floor(rating) ? (jsxRuntime.jsx(Icon.PDP.Star, __assign$1({}, iconProps), void 0)) : index === Math.floor(rating) && rating % 1 != 0 ? (jsxRuntime.jsx(Icon.PDP.StarHalf, __assign$1({}, iconProps), void 0)) : (jsxRuntime.jsx(Icon.PDP.StarEmpty, __assign$1({}, iconProps), void 0)) }), "star-container-".concat(index)));
|
|
7089
7084
|
}) }, void 0));
|
|
7090
7085
|
};
|
|
7091
|
-
var templateObject_1$
|
|
7086
|
+
var templateObject_1$1x;
|
|
7092
7087
|
|
|
7093
7088
|
/* base styles & size variants */
|
|
7094
7089
|
var LabelStyles = {
|
|
@@ -7136,7 +7131,7 @@ var LabelStyles = {
|
|
|
7136
7131
|
});
|
|
7137
7132
|
},
|
|
7138
7133
|
};
|
|
7139
|
-
var Container$11 = newStyled.a(templateObject_1$
|
|
7134
|
+
var Container$11 = newStyled.a(templateObject_1$1w || (templateObject_1$1w = __makeTemplateObject(["\n display: flex;\n align-items: center;\n text-decoration: none;\n"], ["\n display: flex;\n align-items: center;\n text-decoration: none;\n"])));
|
|
7140
7135
|
var CustomLabel = newStyled.div(function (_a) {
|
|
7141
7136
|
var theme = _a.theme, size = _a.size, wrapWithParenthesis = _a.wrapWithParenthesis, underline = _a.underline;
|
|
7142
7137
|
return [
|
|
@@ -7156,7 +7151,7 @@ var CustomLabel = newStyled.div(function (_a) {
|
|
|
7156
7151
|
];
|
|
7157
7152
|
});
|
|
7158
7153
|
var RatingLabel = newStyled.span(templateObject_2$19 || (templateObject_2$19 = __makeTemplateObject(["\n font-size: 16px;\n font-weight: 600;\n color: ", ";\n padding-right: 6px;\n text-decoration: none;\n"], ["\n font-size: 16px;\n font-weight: 600;\n color: ", ";\n padding-right: 6px;\n text-decoration: none;\n"])), function (props) { return props.color; });
|
|
7159
|
-
var templateObject_1$
|
|
7154
|
+
var templateObject_1$1w, templateObject_2$19;
|
|
7160
7155
|
|
|
7161
7156
|
var Rating = function (_a) {
|
|
7162
7157
|
var _b = _a.size, size = _b === void 0 ? exports.ComponentSize.Medium : _b, reviews = _a.reviews, reviewsText = _a.reviewsText, rating = _a.rating, _c = _a.showRatingText, showRatingText = _c === void 0 ? false : _c, _d = _a.wrapWithParenthesis, wrapWithParenthesis = _d === void 0 ? false : _d, _e = _a.underline, underline = _e === void 0 ? false : _e, reviewsContainerId = _a.reviewsContainerId;
|
|
@@ -7251,7 +7246,7 @@ var ImageContainer$6 = newStyled.div(function (_a) {
|
|
|
7251
7246
|
height: height,
|
|
7252
7247
|
});
|
|
7253
7248
|
});
|
|
7254
|
-
var ImageHoverContainer$3 = newStyled.img(templateObject_1$
|
|
7249
|
+
var ImageHoverContainer$3 = newStyled.img(templateObject_1$1v || (templateObject_1$1v = __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"])));
|
|
7255
7250
|
var Container$10 = newStyled.a(templateObject_2$18 || (templateObject_2$18 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n text-decoration: none;\n\n &:hover .hover__image {\n opacity: 1;\n }\n\n &:hover .like-btn-container:hover + .hover__image {\n opacity: 0;\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\n &:hover .like-btn-container:hover + .hover__image {\n opacity: 0;\n }\n"])));
|
|
7256
7251
|
var ProdCardContainer$4 = newStyled.div(templateObject_3$X || (templateObject_3$X = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: min-content;\n text-decoration: none;\n position: relative;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: min-content;\n text-decoration: none;\n position: relative;\n"])));
|
|
7257
7252
|
var Title$8 = newStyled.h2(templateObject_4$L || (templateObject_4$L = __makeTemplateObject(["\n font-size: ", ";\n font-weight: ", ";\n line-height: 1.375rem;\n min-height: 2.75rem;\n color: ", ";\n margin: 0.25rem 0;\n text-align: ", ";\n\n ", "\n\n ", "\n\n @media (max-width: ", "px) {\n font-size: ", ";\n }\n"], ["\n font-size: ", ";\n font-weight: ", ";\n line-height: 1.375rem;\n min-height: 2.75rem;\n color: ", ";\n margin: 0.25rem 0;\n text-align: ", ";\n\n ", "\n\n ", "\n\n @media (max-width: ", "px) {\n font-size: ", ";\n }\n"])), function (_a) {
|
|
@@ -7315,7 +7310,7 @@ var BottomTagContainer$9 = newStyled.div(templateObject_6$y || (templateObject_6
|
|
|
7315
7310
|
});
|
|
7316
7311
|
var MarginTopContainer$1 = newStyled.div(templateObject_7$s || (templateObject_7$s = __makeTemplateObject(["\n margin-top: 8px;\n"], ["\n margin-top: 8px;\n"])));
|
|
7317
7312
|
var ClubOfferPriceLabelWrapper = newStyled.div(templateObject_8$l || (templateObject_8$l = __makeTemplateObject(["\n margin-top: 2px;\n margin-bottom: 2px;\n"], ["\n margin-top: 2px;\n margin-bottom: 2px;\n"])));
|
|
7318
|
-
var templateObject_1$
|
|
7313
|
+
var templateObject_1$1v, templateObject_2$18, templateObject_3$X, templateObject_4$L, templateObject_5$C, templateObject_6$y, templateObject_7$s, templateObject_8$l;
|
|
7319
7314
|
|
|
7320
7315
|
var ProductItemMobile = function (_a) {
|
|
7321
7316
|
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
|
|
@@ -7432,7 +7427,7 @@ var ImageContainer$5 = newStyled.div(function (_a) {
|
|
|
7432
7427
|
height: height,
|
|
7433
7428
|
});
|
|
7434
7429
|
});
|
|
7435
|
-
var ImageHoverContainer$2 = newStyled.img(templateObject_1$
|
|
7430
|
+
var ImageHoverContainer$2 = newStyled.img(templateObject_1$1u || (templateObject_1$1u = __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; });
|
|
7436
7431
|
var Container$$ = newStyled.a(templateObject_2$17 || (templateObject_2$17 = __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"])));
|
|
7437
7432
|
var ProdCardContainer$3 = newStyled.div(templateObject_3$W || (templateObject_3$W = __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"])));
|
|
7438
7433
|
var Title$7 = newStyled.p(templateObject_4$K || (templateObject_4$K = __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; });
|
|
@@ -7521,9 +7516,9 @@ var ProductItemTK = function (_a) {
|
|
|
7521
7516
|
marginTop: hasSpacing ? undefined : textContainerGap,
|
|
7522
7517
|
} }, { children: title }), void 0)) : (jsx(Title$7, __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));
|
|
7523
7518
|
};
|
|
7524
|
-
var templateObject_1$
|
|
7519
|
+
var templateObject_1$1u, templateObject_2$17, templateObject_3$W, templateObject_4$K, templateObject_5$B, templateObject_6$x, templateObject_7$r, templateObject_8$k;
|
|
7525
7520
|
|
|
7526
|
-
var Container$_ = newStyled.div(templateObject_1$
|
|
7521
|
+
var Container$_ = newStyled.div(templateObject_1$1t || (templateObject_1$1t = __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"])));
|
|
7527
7522
|
function withProductGrid(ProductItemComponent, data) {
|
|
7528
7523
|
function WithProductGrid(props) {
|
|
7529
7524
|
return (jsxRuntime.jsx(Container$_, __assign$1({ "data-testid": "product-grid-container" }, { children: data.map(function (product, index) { return (jsxRuntime.jsx(ProductItemComponent, __assign$1({}, product, props), index)); }) }), void 0));
|
|
@@ -7533,7 +7528,7 @@ function withProductGrid(ProductItemComponent, data) {
|
|
|
7533
7528
|
WithProductGrid.displayName = "withGrid(".concat(wrappedComponentName, ")");
|
|
7534
7529
|
return WithProductGrid;
|
|
7535
7530
|
}
|
|
7536
|
-
var templateObject_1$
|
|
7531
|
+
var templateObject_1$1t;
|
|
7537
7532
|
|
|
7538
7533
|
var Collection = {
|
|
7539
7534
|
ProductItemMobile: ProductItemMobile,
|
|
@@ -7541,7 +7536,7 @@ var Collection = {
|
|
|
7541
7536
|
ProductItemTK: ProductItemTK,
|
|
7542
7537
|
};
|
|
7543
7538
|
|
|
7544
|
-
var CustomRadioGroup = newStyled(lt)(templateObject_1$
|
|
7539
|
+
var CustomRadioGroup = newStyled(lt)(templateObject_1$1s || (templateObject_1$1s = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
7545
7540
|
newStyled(lt.Label)(templateObject_2$16 || (templateObject_2$16 = __makeTemplateObject(["\n font-size: 0.88rem;\n"], ["\n font-size: 0.88rem;\n"])));
|
|
7546
7541
|
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$V || (templateObject_3$V = __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"])));
|
|
7547
7542
|
var Span = newStyled.span(templateObject_4$J || (templateObject_4$J = __makeTemplateObject(["\n font-weight: 600;\n"], ["\n font-weight: 600;\n"])));
|
|
@@ -7563,7 +7558,7 @@ var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
|
|
|
7563
7558
|
Option: Option,
|
|
7564
7559
|
OptionsContainer: OptionsContainer,
|
|
7565
7560
|
});
|
|
7566
|
-
var templateObject_1$
|
|
7561
|
+
var templateObject_1$1s, templateObject_2$16, templateObject_3$V, templateObject_4$J, templateObject_5$A;
|
|
7567
7562
|
|
|
7568
7563
|
var OneColorSelector = function (_a) {
|
|
7569
7564
|
var color = _a.color, selected = _a.selected, testId = _a.testId, noStock = _a.noStock, _b = _a.showCross, showCross = _b === void 0 ? false : _b;
|
|
@@ -7604,7 +7599,7 @@ var OutOfStock = function (_a) {
|
|
|
7604
7599
|
return (jsxRuntime.jsxs("svg", __assign$1({ width: "32", height: "33", viewBox: "0 0 32 33", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsxRuntime.jsx("title", { children: title }, void 0), jsxRuntime.jsx("mask", __assign$1({ id: "path-1-inside-1", fill: "white" }, { children: jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.89435 9.60565C8.40619 10.0938 8.40619 10.8853 8.89435 11.3734L14.0209 16.5L8.89433 21.6266C8.40617 22.1147 8.40617 22.9062 8.89433 23.3943C9.38248 23.8825 10.1739 23.8825 10.6621 23.3943L15.7887 18.2677L21.2687 23.7478C21.7569 24.2359 22.5483 24.2359 23.0365 23.7478C23.5246 23.2596 23.5246 22.4682 23.0365 21.98L17.5564 16.5L23.0365 11.02C23.5246 10.5318 23.5246 9.74035 23.0365 9.25219C22.5483 8.76404 21.7568 8.76404 21.2687 9.25219L15.7887 14.7322L10.6621 9.60565C10.174 9.1175 9.3825 9.1175 8.89435 9.60565Z" }, void 0) }), void 0), jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.89435 9.60565C8.40619 10.0938 8.40619 10.8853 8.89435 11.3734L14.0209 16.5L8.89433 21.6266C8.40617 22.1147 8.40617 22.9062 8.89433 23.3943C9.38248 23.8825 10.1739 23.8825 10.6621 23.3943L15.7887 18.2677L21.2687 23.7478C21.7569 24.2359 22.5483 24.2359 23.0365 23.7478C23.5246 23.2596 23.5246 22.4682 23.0365 21.98L17.5564 16.5L23.0365 11.02C23.5246 10.5318 23.5246 9.74035 23.0365 9.25219C22.5483 8.76404 21.7568 8.76404 21.2687 9.25219L15.7887 14.7322L10.6621 9.60565C10.174 9.1175 9.3825 9.1175 8.89435 9.60565Z", fill: theme.colors.shades['300'].color }, void 0), jsxRuntime.jsx("path", { d: "M14.0209 16.5L14.5866 17.0657L15.1523 16.5L14.5866 15.9343L14.0209 16.5ZM8.89433 21.6266L9.46001 22.1922L8.89433 21.6266ZM10.6621 23.3943L11.2278 23.96L10.6621 23.3943ZM15.7887 18.2677L16.3544 17.7021L15.7887 17.1364L15.223 17.7021L15.7887 18.2677ZM17.5564 16.5L16.9908 15.9343L16.4251 16.5L16.9908 17.0657L17.5564 16.5ZM23.0365 11.02L23.6021 11.5856L23.0365 11.02ZM21.2687 9.25219L21.8344 9.81788L21.2687 9.25219ZM15.7887 14.7322L15.223 15.2979L15.7887 15.8636L16.3544 15.2979L15.7887 14.7322ZM9.46003 10.8077C9.2843 10.632 9.2843 10.3471 9.46003 10.1713L8.32866 9.03997C7.52809 9.84054 7.52809 11.1385 8.32866 11.9391L9.46003 10.8077ZM14.5866 15.9343L9.46003 10.8077L8.32866 11.9391L13.4552 17.0657L14.5866 15.9343ZM9.46001 22.1922L14.5866 17.0657L13.4552 15.9343L8.32864 21.0609L9.46001 22.1922ZM9.46001 22.8286C9.28428 22.6529 9.28428 22.368 9.46001 22.1922L8.32864 21.0609C7.52807 21.8614 7.52807 23.1594 8.32864 23.96L9.46001 22.8286ZM10.0964 22.8286C9.92067 23.0044 9.63575 23.0044 9.46001 22.8286L8.32864 23.96C9.12922 24.7606 10.4272 24.7606 11.2278 23.96L10.0964 22.8286ZM15.223 17.7021L10.0964 22.8286L11.2278 23.96L16.3544 18.8334L15.223 17.7021ZM21.8344 23.1821L16.3544 17.7021L15.223 18.8334L20.703 24.3135L21.8344 23.1821ZM22.4708 23.1821C22.2951 23.3578 22.0101 23.3578 21.8344 23.1821L20.703 24.3135C21.5036 25.114 22.8016 25.114 23.6022 24.3135L22.4708 23.1821ZM22.4708 22.5457C22.6465 22.7214 22.6465 23.0064 22.4708 23.1821L23.6022 24.3135C24.4027 23.5129 24.4027 22.2149 23.6022 21.4143L22.4708 22.5457ZM16.9908 17.0657L22.4708 22.5457L23.6022 21.4143L18.1221 15.9343L16.9908 17.0657ZM22.4708 10.4543L16.9908 15.9343L18.1221 17.0657L23.6021 11.5856L22.4708 10.4543ZM22.4708 9.81788C22.6465 9.99361 22.6465 10.2785 22.4708 10.4543L23.6021 11.5856C24.4027 10.7851 24.4027 9.48708 23.6021 8.68651L22.4708 9.81788ZM21.8344 9.81788C22.0101 9.64214 22.295 9.64214 22.4708 9.81788L23.6021 8.68651C22.8016 7.88593 21.5036 7.88593 20.703 8.68651L21.8344 9.81788ZM16.3544 15.2979L21.8344 9.81788L20.703 8.68651L15.223 14.1665L16.3544 15.2979ZM10.0964 10.1713L15.223 15.2979L16.3544 14.1665L11.2278 9.03997L10.0964 10.1713ZM9.46003 10.1713C9.63577 9.9956 9.92069 9.9956 10.0964 10.1713L11.2278 9.03997C10.4272 8.23939 9.12924 8.23939 8.32866 9.03997L9.46003 10.1713Z", fill: "white", mask: "url(#path-1-inside-1)" }, void 0), jsxRuntime.jsx("circle", { cx: "16", cy: "16.5", r: "12", stroke: theme.colors.shades['300'].color, strokeWidth: "0.5" }, void 0)] }), void 0));
|
|
7605
7600
|
};
|
|
7606
7601
|
|
|
7607
|
-
var Container$Z = newStyled.div(templateObject_1$
|
|
7602
|
+
var Container$Z = newStyled.div(templateObject_1$1r || (templateObject_1$1r = __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) {
|
|
7608
7603
|
var borderColor = _a.borderColor;
|
|
7609
7604
|
return borderColor;
|
|
7610
7605
|
}, function (_a) {
|
|
@@ -7618,7 +7613,7 @@ var PatternSelector = function (_a) {
|
|
|
7618
7613
|
var outerBorder = selected ? theme.colors.shades['550'].color : 'transparent';
|
|
7619
7614
|
return (jsxRuntime.jsx(Container$Z, __assign$1({ "data-testid": testId, borderColor: outerBorder, noStock: noStock }, { children: jsxRuntime.jsx(Image$2, { src: url, alt: "pattern" }, void 0) }), void 0));
|
|
7620
7615
|
};
|
|
7621
|
-
var templateObject_1$
|
|
7616
|
+
var templateObject_1$1r, templateObject_2$15;
|
|
7622
7617
|
|
|
7623
7618
|
var renderOptions$1 = function (options, showCross) {
|
|
7624
7619
|
if (showCross === void 0) { showCross = false; }
|
|
@@ -7646,10 +7641,10 @@ var ColorPickerWithTooltip = function (_a) {
|
|
|
7646
7641
|
var visibleOptions = options.slice(0, maxVisibleOptions);
|
|
7647
7642
|
var hiddenOptions = options.slice(maxVisibleOptions);
|
|
7648
7643
|
var showCloseIcon = (tooltipOptions !== null && tooltipOptions !== void 0 ? tooltipOptions : {}).showCloseIcon;
|
|
7649
|
-
var ColorPickerWrapper = newStyled(ColorRadioGroup$1)(templateObject_1$
|
|
7644
|
+
var ColorPickerWrapper = newStyled(ColorRadioGroup$1)(templateObject_1$1q || (templateObject_1$1q = __makeTemplateObject(["\n position: relative;\n max-width: 300px;\n\n .tooltip-container {\n position: absolute;\n transform: translateX(-30%);\n &::before,\n &::after {\n left: 80%;\n }\n }\n\n .arrow {\n width: 24px;\n height: 24px;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n margin-bottom: 10px;\n }\n\n .tooltip-content {\n display: flex;\n max-width: 300px;\n flex-wrap: wrap;\n }\n "], ["\n position: relative;\n max-width: 300px;\n\n .tooltip-container {\n position: absolute;\n transform: translateX(-30%);\n &::before,\n &::after {\n left: 80%;\n }\n }\n\n .arrow {\n width: 24px;\n height: 24px;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n margin-bottom: 10px;\n }\n\n .tooltip-content {\n display: flex;\n max-width: 300px;\n flex-wrap: wrap;\n }\n "])));
|
|
7650
7645
|
return (jsxs(ColorPickerWrapper, __assign$1({ className: className, value: selectedValue, onChange: onChange, css: { flexDirection: inline ? 'row' : 'column', alignItems: inline ? 'center' : 'start' } }, { children: [jsx(ColorRadioGroup$1.Label, { label: label, values: selectedValue && !inline ? selectedValue.label : undefined }, void 0), jsxs(ColorRadioGroup$1.OptionsContainer, __assign$1({ css: { marginTop: inline ? '0' : '0.63rem', marginLeft: inline ? '1.5rem' : '0' }, "data-testid": "radio-group-options-container" }, { children: [renderOptions$1(visibleOptions, showCross), !!hiddenOptions.length && (jsx("div", __assign$1({ style: { display: 'flex', alignItems: 'center', justifyContent: 'center' } }, { children: jsx(Tooltip, __assign$1({ showCloseIcon: showCloseIcon, position: 1, elementContent: jsx("div", __assign$1({ className: "tooltip-content" }, { children: renderOptions$1(hiddenOptions, showCross) }), void 0), withArrow: true }, { children: jsx("div", __assign$1({ className: "arrow", "data-testid": "tooltip-arrow" }, { children: jsx(Icon$1, { name: "arrows/chevron_down", width: 1, height: 1 }, void 0) }), void 0) }), void 0) }), void 0))] }), void 0)] }), void 0));
|
|
7651
7646
|
};
|
|
7652
|
-
var templateObject_1$
|
|
7647
|
+
var templateObject_1$1q;
|
|
7653
7648
|
|
|
7654
7649
|
var renderOptions = function (selectedColor, options) {
|
|
7655
7650
|
if (options == null || options.length === 0) {
|
|
@@ -7687,7 +7682,7 @@ var MultiColorPicker = function (_a) {
|
|
|
7687
7682
|
return (jsxRuntime.jsxs(ColorRadioGroup$1, __assign$1({ value: selectedColor, onChange: onChangeHandler }, { children: [jsxRuntime.jsx(ColorRadioGroup$1.Label, { label: label, values: valueLabels }, void 0), jsxRuntime.jsx(ColorRadioGroup$1.OptionsContainer, { children: renderOptions(selectedColor, options) }, void 0)] }), void 0));
|
|
7688
7683
|
};
|
|
7689
7684
|
|
|
7690
|
-
var Wrapper$5 = newStyled.div(templateObject_1$
|
|
7685
|
+
var Wrapper$5 = newStyled.div(templateObject_1$1p || (templateObject_1$1p = __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'); });
|
|
7691
7686
|
var Col$1 = newStyled.div(templateObject_2$14 || (templateObject_2$14 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
7692
7687
|
var Row$2 = newStyled.div(templateObject_3$U || (templateObject_3$U = __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) {
|
|
7693
7688
|
return props.rightToLeft &&
|
|
@@ -7701,7 +7696,7 @@ var CrossSellCheckbox = function (_a) {
|
|
|
7701
7696
|
var theme = useTheme();
|
|
7702
7697
|
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, __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));
|
|
7703
7698
|
};
|
|
7704
|
-
var templateObject_1$
|
|
7699
|
+
var templateObject_1$1p, templateObject_2$14, templateObject_3$U, templateObject_4$I, templateObject_5$z, templateObject_6$w;
|
|
7705
7700
|
|
|
7706
7701
|
var index$1 = /*#__PURE__*/Object.freeze({
|
|
7707
7702
|
__proto__: null,
|
|
@@ -7730,7 +7725,7 @@ var sizeMapper = (_a = {},
|
|
|
7730
7725
|
_a[exports.ComponentSize.XSmall] = 'small',
|
|
7731
7726
|
_a[exports.ComponentSize.XXSmall] = 'small',
|
|
7732
7727
|
_a);
|
|
7733
|
-
var StyledBaseButton = newStyled(BaseButton)(templateObject_1$
|
|
7728
|
+
var StyledBaseButton = newStyled(BaseButton)(templateObject_1$1o || (templateObject_1$1o = __makeTemplateObject(["\n width: ", ";\n font-size: ", ";\n padding: ", ";\n font-weight: ", ";\n border-radius: ", ";\n cursor: pointer;\n &:disabled {\n background-color: ", ";\n color: ", ";\n cursor: not-allowed;\n }\n svg {\n color: inherit;\n }\n"], ["\n width: ", ";\n font-size: ", ";\n padding: ", ";\n font-weight: ", ";\n border-radius: ", ";\n cursor: pointer;\n &:disabled {\n background-color: ", ";\n color: ", ";\n cursor: not-allowed;\n }\n svg {\n color: inherit;\n }\n"])), function (_a) {
|
|
7734
7729
|
var wide = _a.wide;
|
|
7735
7730
|
return (wide ? '100%' : 'fit-content');
|
|
7736
7731
|
}, function (_a) {
|
|
@@ -7756,7 +7751,7 @@ var StyledIcon = newStyled(Icon$1)(templateObject_2$13 || (templateObject_2$13 =
|
|
|
7756
7751
|
var marginLeft = _a.marginLeft, marginRight = _a.marginRight;
|
|
7757
7752
|
return "\n margin-left: ".concat(marginLeft !== null && marginLeft !== void 0 ? marginLeft : '10px', ";\n margin-right: ").concat(marginRight !== null && marginRight !== void 0 ? marginRight : '10px', ";\n ");
|
|
7758
7753
|
});
|
|
7759
|
-
var templateObject_1$
|
|
7754
|
+
var templateObject_1$1o, templateObject_2$13;
|
|
7760
7755
|
|
|
7761
7756
|
var BaseCTA = function (_a) {
|
|
7762
7757
|
var _b, _c, _d;
|
|
@@ -7847,7 +7842,7 @@ var ButtonSecondaryOutline = function (props) {
|
|
|
7847
7842
|
} }), void 0));
|
|
7848
7843
|
};
|
|
7849
7844
|
|
|
7850
|
-
var Container$Y = newStyled.div(templateObject_1$
|
|
7845
|
+
var Container$Y = newStyled.div(templateObject_1$1n || (templateObject_1$1n = __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; });
|
|
7851
7846
|
var IconContainer$5 = newStyled.div(templateObject_2$12 || (templateObject_2$12 = __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"])));
|
|
7852
7847
|
var Text$3 = newStyled.p(templateObject_3$T || (templateObject_3$T = __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; });
|
|
7853
7848
|
var Details = newStyled.span(templateObject_4$H || (templateObject_4$H = __makeTemplateObject(["\n color: ", ";\n font-weight: 700;\n"], ["\n color: ", ";\n font-weight: 700;\n"])), function (props) { return props.color; });
|
|
@@ -7856,9 +7851,9 @@ var Note = function (_a) {
|
|
|
7856
7851
|
var theme = useTheme();
|
|
7857
7852
|
return (jsxRuntime.jsxs(Container$Y, __assign$1({ color: backgroundColor ? backgroundColor : theme.component.deliveryDetails.note.backgroundColor, "data-testid": "Container" }, { children: [jsxRuntime.jsx(IconContainer$5, { children: jsxRuntime.jsx(Icon.Actions.Warning, { fill: accentColor ? accentColor : theme.component.deliveryDetails.note.accentColor }, void 0) }, void 0), jsxRuntime.jsx("div", { children: jsxRuntime.jsxs(Text$3, __assign$1({ color: color ? color : theme.component.deliveryDetails.note.color }, { children: [importantNoteText && (jsxRuntime.jsxs(Details, __assign$1({ color: accentColor ? accentColor : theme.component.deliveryDetails.note.accentColor }, { children: [importantNoteText, ":"] }), void 0)), ' ', text] }), void 0) }, void 0)] }), void 0));
|
|
7858
7853
|
};
|
|
7859
|
-
var templateObject_1$
|
|
7854
|
+
var templateObject_1$1n, templateObject_2$12, templateObject_3$T, templateObject_4$H;
|
|
7860
7855
|
|
|
7861
|
-
var Title$6 = newStyled.h1(templateObject_1$
|
|
7856
|
+
var Title$6 = newStyled.h1(templateObject_1$1m || (templateObject_1$1m = __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) {
|
|
7862
7857
|
var theme = _a.theme;
|
|
7863
7858
|
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 ");
|
|
7864
7859
|
});
|
|
@@ -7901,9 +7896,9 @@ var DeliveryDetails = function (_a) {
|
|
|
7901
7896
|
var theme = useTheme();
|
|
7902
7897
|
return (jsxRuntime.jsxs("div", __assign$1({ "data-testid": "DeliveryDetails" }, { children: [jsxRuntime.jsx(Title$6, __assign$1({ color: theme.colors.shades[700].color }, { children: deliveryDetailsText }), void 0), jsxRuntime.jsx(Line, { backgroundColor: theme.colors.shades['200'].color }, void 0), note && jsxRuntime.jsx(Note, __assign$1({}, note), void 0), jsxRuntime.jsxs(Row$1, __assign$1({ "data-testid": "DD-row", theme: theme }, { children: [jsxRuntime.jsxs(Col, __assign$1({ theme: theme }, { children: [jsxRuntime.jsxs(SectionTitle, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(IconContainer$4, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Icon.PDP.Clock, { width: 1.5 }, void 0) }), void 0), arrivingBy.title] }), void 0), jsxRuntime.jsx(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: arrivingBy.details }), void 0)] }), void 0), jsxRuntime.jsxs(Col, __assign$1({ theme: theme }, { children: [jsxRuntime.jsxs(SectionTitle, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(IconContainer$4, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Icon.Navigation.MapMarker, { width: 1.5 }, void 0) }), void 0), shippingTo.title] }), void 0), jsxRuntime.jsx(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: shippingTo.details }), void 0)] }), void 0), jsxRuntime.jsxs(Col, __assign$1({ theme: theme }, { children: [jsxRuntime.jsxs(SectionTitle, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(IconContainer$4, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Icon.Messaging.Messenger, { width: 1.5 }, void 0) }), void 0), instantOrderUpdate.title] }), void 0), jsxRuntime.jsx(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: instantOrderUpdate.details }), void 0), instantOrderUpdate.keepMeUpdated && (jsxRuntime.jsxs(KeepMeUpdated, __assign$1({ onClick: instantOrderUpdate.keepMeUpdated.onClick, borderColor: theme.colors.shades['150'].color }, { children: [jsxRuntime.jsx(Icon.Messaging.Messenger, { width: 1, height: 1, fill: "#0078FF" }, void 0), instantOrderUpdate.keepMeUpdated.title] }), void 0))] }), void 0)] }), void 0)] }), void 0));
|
|
7903
7898
|
};
|
|
7904
|
-
var templateObject_1$
|
|
7899
|
+
var templateObject_1$1m, templateObject_2$11, templateObject_3$S, templateObject_4$G, templateObject_5$y, templateObject_6$v, templateObject_7$q, templateObject_8$j;
|
|
7905
7900
|
|
|
7906
|
-
var Backdrop = newStyled.div(templateObject_1$
|
|
7901
|
+
var Backdrop = newStyled.div(templateObject_1$1l || (templateObject_1$1l = __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) {
|
|
7907
7902
|
var top = _a.top;
|
|
7908
7903
|
return top;
|
|
7909
7904
|
}, function (_a) {
|
|
@@ -7957,20 +7952,20 @@ var Drawer = function (_a) {
|
|
|
7957
7952
|
}, [isOpen, onClose, onOpen]);
|
|
7958
7953
|
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;
|
|
7959
7954
|
};
|
|
7960
|
-
var templateObject_1$
|
|
7955
|
+
var templateObject_1$1l, templateObject_2$10;
|
|
7961
7956
|
|
|
7962
7957
|
var TooltipArrow = function (_a) {
|
|
7963
7958
|
var height = _a.height, width = _a.width, fill = _a.fill, stroke = _a.stroke;
|
|
7964
7959
|
return (jsxRuntime.jsxs("svg", __assign$1({ width: "".concat(width, "rem"), height: "".concat(height, "rem"), viewBox: "0 0 20 12", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsxRuntime.jsx("title", { children: "Tooltip Arrow" }, void 0), jsxRuntime.jsx("path", { d: "M11.1523 8.83618L18.9325 -0.500001L1.06752 -0.500001L8.84767 8.83618C9.44736 9.55581 10.5526 9.55581 11.1523 8.83618Z", fill: fill, stroke: stroke }, void 0)] }), void 0));
|
|
7965
7960
|
};
|
|
7966
7961
|
|
|
7967
|
-
var List = newStyled.ul(templateObject_1$
|
|
7962
|
+
var List = newStyled.ul(templateObject_1$1k || (templateObject_1$1k = __makeTemplateObject(["\n display: flex;\n margin: 0;\n padding: 0;\n"], ["\n display: flex;\n margin: 0;\n padding: 0;\n"])));
|
|
7968
7963
|
var Item$2 = newStyled.li(templateObject_2$$ || (templateObject_2$$ = __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"])));
|
|
7969
7964
|
var DropdownWrapper = newStyled.div(templateObject_3$R || (templateObject_3$R = __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"])));
|
|
7970
7965
|
var ArrowContainer$1 = newStyled.div(templateObject_4$F || (templateObject_4$F = __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"])));
|
|
7971
7966
|
var StyledDropdown = newStyled.ul(templateObject_5$x || (templateObject_5$x = __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; });
|
|
7972
7967
|
var DropdownItem = newStyled.li(templateObject_6$u || (templateObject_6$u = __makeTemplateObject(["\n list-style: none;\n padding: 0.813rem;\n border-bottom: 0.063rem solid ", ";\n font-size: 0.875rem;\n line-height: 1.125rem;\n font-weight: 400;\n color: ", ";\n cursor: pointer;\n user-select: none;\n\n &:hover {\n background-color: ", ";\n }\n\n &:last-child {\n border-bottom: none;\n border-radius: 0 0 0.5rem 0.5rem;\n }\n\n &:first-of-type {\n border-radius: 0.5rem 0.5rem 0 0;\n }\n\n &:only-child {\n border-radius: 0.5rem;\n }\n"], ["\n list-style: none;\n padding: 0.813rem;\n border-bottom: 0.063rem solid ", ";\n font-size: 0.875rem;\n line-height: 1.125rem;\n font-weight: 400;\n color: ", ";\n cursor: pointer;\n user-select: none;\n\n &:hover {\n background-color: ", ";\n }\n\n &:last-child {\n border-bottom: none;\n border-radius: 0 0 0.5rem 0.5rem;\n }\n\n &:first-of-type {\n border-radius: 0.5rem 0.5rem 0 0;\n }\n\n &:only-child {\n border-radius: 0.5rem;\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.color; }, function (props) { return props.hoverColor; });
|
|
7973
|
-
var templateObject_1$
|
|
7968
|
+
var templateObject_1$1k, templateObject_2$$, templateObject_3$R, templateObject_4$F, templateObject_5$x, templateObject_6$u;
|
|
7974
7969
|
|
|
7975
7970
|
var DropdownListIcons = function (_a) {
|
|
7976
7971
|
var items = _a.items;
|
|
@@ -7983,13 +7978,13 @@ var Dropdown = function (_a) {
|
|
|
7983
7978
|
return (jsxRuntime.jsxs(DropdownWrapper, __assign$1({ className: "dropdownWrapper", "data-testid": "Dropdown-wrapper" }, { children: [jsxRuntime.jsx(ArrowContainer$1, { children: jsxRuntime.jsx(TooltipArrow, { stroke: theme.colors.shades['200'].color, fill: "#fff", width: 1.25, height: 0.75 }, void 0) }, void 0), jsxRuntime.jsx(StyledDropdown, __assign$1({ borderColor: theme.colors.shades['200'].color }, { children: items.map(function (item, index) { return (jsxRuntime.jsx(DropdownItem, __assign$1({ onClick: item.callback, borderColor: theme.colors.shades['200'].color, color: theme.colors.shades['550'].color, hoverColor: theme.colors.shades['10'].color }, { children: item.description }), index)); }) }), void 0)] }), void 0));
|
|
7984
7979
|
};
|
|
7985
7980
|
|
|
7986
|
-
var DropdownContainer = newStyled.div(templateObject_1$
|
|
7981
|
+
var DropdownContainer = newStyled.div(templateObject_1$1j || (templateObject_1$1j = __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"])));
|
|
7987
7982
|
var DropdownLabel = newStyled.div(templateObject_2$_ || (templateObject_2$_ = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n background: #fff;\n border: 1px solid #bbb;\n border-radius: 8px;\n padding: 8px 12px 8px 16px;\n cursor: pointer;\n gap: 16px;\n font-weight: 600;\n color: var(--colors-pallete-secondary-color);\n max-width: 337px;\n height: 36px;\n\n @media (max-width: 767px) {\n max-width: 100%;\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n background: #fff;\n border: 1px solid #bbb;\n border-radius: 8px;\n padding: 8px 12px 8px 16px;\n cursor: pointer;\n gap: 16px;\n font-weight: 600;\n color: var(--colors-pallete-secondary-color);\n max-width: 337px;\n height: 36px;\n\n @media (max-width: 767px) {\n max-width: 100%;\n }\n"])));
|
|
7988
7983
|
var SizeLabel = newStyled.span(templateObject_3$Q || (templateObject_3$Q = __makeTemplateObject(["\n margin-right: 8px;\n"], ["\n margin-right: 8px;\n"])));
|
|
7989
7984
|
var DetailLabel = newStyled.span(templateObject_4$E || (templateObject_4$E = __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"])));
|
|
7990
7985
|
var DropdownOptions = newStyled.div(templateObject_5$w || (templateObject_5$w = __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"])));
|
|
7991
7986
|
var DropdownOption = newStyled.div(templateObject_6$t || (templateObject_6$t = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 12px 16px 10px;\n height: 40px;\n cursor: pointer;\n\n &:hover {\n background-color: rgb(247, 247, 247);\n border-radius: 8px;\n }\n\n &[aria-selected='true'] {\n background-color: rgb(247, 247, 247);\n border-radius: 8px;\n }\n\n & > span:first-of-type {\n margin-right: auto;\n font-weight: 600;\n }\n\n & > span:last-of-type {\n text-align: center;\n flex-grow: 1;\n font-weight: 400;\n color: var(--colors-shades-400-color);\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 12px 16px 10px;\n height: 40px;\n cursor: pointer;\n\n &:hover {\n background-color: rgb(247, 247, 247);\n border-radius: 8px;\n }\n\n &[aria-selected='true'] {\n background-color: rgb(247, 247, 247);\n border-radius: 8px;\n }\n\n & > span:first-of-type {\n margin-right: auto;\n font-weight: 600;\n }\n\n & > span:last-of-type {\n text-align: center;\n flex-grow: 1;\n font-weight: 400;\n color: var(--colors-shades-400-color);\n }\n"])));
|
|
7992
|
-
var templateObject_1$
|
|
7987
|
+
var templateObject_1$1j, templateObject_2$_, templateObject_3$Q, templateObject_4$E, templateObject_5$w, templateObject_6$t;
|
|
7993
7988
|
|
|
7994
7989
|
var SizeDropdown = function (_a) {
|
|
7995
7990
|
var options = _a.options, defaultLabel = _a.defaultLabel, onOptionSelect = _a.onOptionSelect;
|
|
@@ -8012,7 +8007,7 @@ var SizeDropdown = function (_a) {
|
|
|
8012
8007
|
return (jsxRuntime.jsxs(DropdownContainer, { children: [jsxRuntime.jsxs(DropdownLabel, __assign$1({ role: "button", tabIndex: 0, onClick: toggleDropdown }, { children: [jsxRuntime.jsx(SizeLabel, { children: selectedOption.size }, void 0), jsxRuntime.jsx(DetailLabel, { children: selectedOption.detail }, void 0), isOpen ? (jsxRuntime.jsx(Icon.Arrows.ChevronUp, { width: 0.563, height: 0.875, fill: "#292929" }, void 0)) : (jsxRuntime.jsx(Icon.Arrows.ChevronDown, { width: 0.563, height: 0.875, fill: "#292929" }, void 0))] }), void 0), isOpen && (jsxRuntime.jsx(DropdownOptions, { children: options.map(function (option) { return (jsxRuntime.jsxs(DropdownOption, __assign$1({ role: "option", "aria-selected": selectedOption.size === option.size, tabIndex: 0, onClick: function () { return handleOptionClick(option); }, onKeyDown: function (e) { return handleOptionKeyDown(e, option); } }, { children: [jsxRuntime.jsx("span", { children: option.size }, void 0), jsxRuntime.jsx("span", { children: option.detail }, void 0)] }), option.size)); }) }, void 0))] }, void 0));
|
|
8013
8008
|
};
|
|
8014
8009
|
|
|
8015
|
-
var DialogDropdownWrapper = newStyled.div(templateObject_1$
|
|
8010
|
+
var DialogDropdownWrapper = newStyled.div(templateObject_1$1i || (templateObject_1$1i = __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; });
|
|
8016
8011
|
var DialogDropdownWrapper2 = newStyled.div(templateObject_2$Z || (templateObject_2$Z = __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: #292929;\n top: calc(", " - 5px);\n right: calc(", " + 21px);\n z-index: 50 !important;\n }\n ::after {\n border-bottom-color: '#292929';\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: #292929;\n top: calc(", " - 5px);\n right: calc(", " + 21px);\n z-index: 50 !important;\n }\n ::after {\n border-bottom-color: '#292929';\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; });
|
|
8017
8012
|
var DialogDropdownListContainer = newStyled.ul(templateObject_3$P || (templateObject_3$P = __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: ", ";\n right: ", ";\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 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: ", ";\n right: ", ";\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 overflow: hidden;\n"])), function (props) { return props.borderRadius; }, function (props) {
|
|
8018
8013
|
return props.containerPosTop ? "calc(".concat(props.containerPosTop, ")") : "calc(".concat(props.top, " + 15px)");
|
|
@@ -8029,7 +8024,7 @@ var DropdownDialog = function (_a) {
|
|
|
8029
8024
|
return (jsxRuntime.jsx(DialogDropdownListItem, { children: jsxRuntime.jsx(DialogDropdownLink, __assign$1({ href: value }, { children: label }), void 0) }, idx));
|
|
8030
8025
|
}) }), void 0) }), void 0));
|
|
8031
8026
|
};
|
|
8032
|
-
var templateObject_1$
|
|
8027
|
+
var templateObject_1$1i, templateObject_2$Z, templateObject_3$P, templateObject_4$D, templateObject_5$v;
|
|
8033
8028
|
|
|
8034
8029
|
function FilteringDropdown(_a) {
|
|
8035
8030
|
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;
|
|
@@ -8062,7 +8057,7 @@ function FilteringDropdown(_a) {
|
|
|
8062
8057
|
}) }, void 0)] }), void 0));
|
|
8063
8058
|
}
|
|
8064
8059
|
|
|
8065
|
-
var Title$5 = newStyled.div(templateObject_1$
|
|
8060
|
+
var Title$5 = newStyled.div(templateObject_1$1h || (templateObject_1$1h = __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; });
|
|
8066
8061
|
var P$3 = newStyled.p(templateObject_2$Y || (templateObject_2$Y = __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; });
|
|
8067
8062
|
var ArrowContainer = newStyled.div(templateObject_3$O || (templateObject_3$O = __makeTemplateObject(["\n width: 1rem;\n height: 1rem;\n"], ["\n width: 1rem;\n height: 1rem;\n"])));
|
|
8068
8063
|
var Container$X = newStyled.div(templateObject_4$C || (templateObject_4$C = __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'); });
|
|
@@ -8072,9 +8067,9 @@ var Accordion = function (_a) {
|
|
|
8072
8067
|
var _d = React__default["default"].useState(isOpenByDefault), isOpen = _d[0], setIsOpen = _d[1];
|
|
8073
8068
|
return (jsxRuntime.jsxs(Container$X, __assign$1({ "data-testid": "FiltersAccordion", showInMobile: showInMobile }, { children: [jsxRuntime.jsxs(Title$5, __assign$1({ onClick: function () { return setIsOpen(function (state) { return !state; }); }, borderColor: theme.colors.shades['100'].color, "data-testid": "accordion-title" }, { children: [jsxRuntime.jsx(P$3, __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));
|
|
8074
8069
|
};
|
|
8075
|
-
var templateObject_1$
|
|
8070
|
+
var templateObject_1$1h, templateObject_2$Y, templateObject_3$O, templateObject_4$C;
|
|
8076
8071
|
|
|
8077
|
-
var SectionContent = newStyled.div(templateObject_1$
|
|
8072
|
+
var SectionContent = newStyled.div(templateObject_1$1g || (templateObject_1$1g = __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; });
|
|
8078
8073
|
var Header$3 = newStyled.div(templateObject_2$X || (templateObject_2$X = __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"])));
|
|
8079
8074
|
var MobileHeader = newStyled.div(templateObject_3$N || (templateObject_3$N = __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"])));
|
|
8080
8075
|
var MobileIconsContainer = newStyled.div(templateObject_4$B || (templateObject_4$B = __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"])));
|
|
@@ -8082,9 +8077,9 @@ var H4 = newStyled.h4(templateObject_5$u || (templateObject_5$u = __makeTemplate
|
|
|
8082
8077
|
var FilterLink = newStyled.a(templateObject_6$s || (templateObject_6$s = __makeTemplateObject(["\n font-size: 1rem;\n font-weight: 700;\n line-height: 1.5rem;\n color: ", ";\n text-decoration: none;\n"], ["\n font-size: 1rem;\n font-weight: 700;\n line-height: 1.5rem;\n color: ", ";\n text-decoration: none;\n"])), function (props) { return props.color; });
|
|
8083
8078
|
var OptionContainer = newStyled.div(templateObject_7$p || (templateObject_7$p = __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'); });
|
|
8084
8079
|
var ClearAll = newStyled.span(templateObject_8$i || (templateObject_8$i = __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; });
|
|
8085
|
-
var MobileFooter = newStyled.div(templateObject_9$
|
|
8080
|
+
var MobileFooter = newStyled.div(templateObject_9$a || (templateObject_9$a = __makeTemplateObject(["\n background-color: #fff;\n padding: 0.75rem 0.938rem;\n position: sticky;\n bottom: 0;\n z-index: 1;\n margin-top: 5.625rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n"], ["\n background-color: #fff;\n padding: 0.75rem 0.938rem;\n position: sticky;\n bottom: 0;\n z-index: 1;\n margin-top: 5.625rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n"])));
|
|
8086
8081
|
var MobileClearContainer = newStyled.div(templateObject_10$9 || (templateObject_10$9 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n cursor: pointer;\n\n span {\n margin-left: 0.5rem;\n user-select: none;\n }\n"], ["\n display: flex;\n align-items: center;\n cursor: pointer;\n\n span {\n margin-left: 0.5rem;\n user-select: none;\n }\n"])));
|
|
8087
|
-
var templateObject_1$
|
|
8082
|
+
var templateObject_1$1g, templateObject_2$X, templateObject_3$N, templateObject_4$B, templateObject_5$u, templateObject_6$s, templateObject_7$p, templateObject_8$i, templateObject_9$a, templateObject_10$9;
|
|
8088
8083
|
|
|
8089
8084
|
var getStylesBySize$9 = function (size, theme) {
|
|
8090
8085
|
switch (size) {
|
|
@@ -8149,7 +8144,7 @@ var SelectorSecondary = function (_a) {
|
|
|
8149
8144
|
} }), id: id }, void 0));
|
|
8150
8145
|
};
|
|
8151
8146
|
|
|
8152
|
-
var UL = newStyled.ul(templateObject_1$
|
|
8147
|
+
var UL = newStyled.ul(templateObject_1$1f || (templateObject_1$1f = __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"])));
|
|
8153
8148
|
var LI = newStyled.li(templateObject_2$W || (templateObject_2$W = __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; });
|
|
8154
8149
|
var CloseIconContainer = newStyled.div(templateObject_3$M || (templateObject_3$M = __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"])));
|
|
8155
8150
|
var Tags = function (_a) {
|
|
@@ -8159,7 +8154,7 @@ var Tags = function (_a) {
|
|
|
8159
8154
|
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));
|
|
8160
8155
|
}) }), void 0));
|
|
8161
8156
|
};
|
|
8162
|
-
var templateObject_1$
|
|
8157
|
+
var templateObject_1$1f, templateObject_2$W, templateObject_3$M;
|
|
8163
8158
|
|
|
8164
8159
|
var Filters = function (_a) {
|
|
8165
8160
|
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;
|
|
@@ -8295,7 +8290,7 @@ var FilterCheckboxColor = function (_a) {
|
|
|
8295
8290
|
return (jsxRuntime.jsx(Checkbox, { onChange: onChange, checked: checked, text: text, id: "filter[".concat(sectionIndex, ",").concat(itemIndex, "]"), size: exports.ComponentSize.Medium, variant: "color", blockUncheck: blockUncheck, backgroundColor: color }, itemIndex));
|
|
8296
8291
|
};
|
|
8297
8292
|
|
|
8298
|
-
var Wrapper$4 = newStyled.div(templateObject_1$
|
|
8293
|
+
var Wrapper$4 = newStyled.div(templateObject_1$1e || (templateObject_1$1e = __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"])));
|
|
8299
8294
|
var Container$W = newStyled.div(templateObject_2$V || (templateObject_2$V = __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"])));
|
|
8300
8295
|
var FitGuarantee = function (_a) {
|
|
8301
8296
|
var _b;
|
|
@@ -8314,9 +8309,9 @@ var FitGuarantee = function (_a) {
|
|
|
8314
8309
|
fontWeight: theme.component.text.fitGuarantee.titleFontWeight,
|
|
8315
8310
|
} }, { 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));
|
|
8316
8311
|
};
|
|
8317
|
-
var templateObject_1$
|
|
8312
|
+
var templateObject_1$1e, templateObject_2$V;
|
|
8318
8313
|
|
|
8319
|
-
var Container$V = newStyled.div(templateObject_1$
|
|
8314
|
+
var Container$V = newStyled.div(templateObject_1$1d || (templateObject_1$1d = __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"])));
|
|
8320
8315
|
var P$2 = newStyled.p(templateObject_2$U || (templateObject_2$U = __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; });
|
|
8321
8316
|
var textButtonStyles$1 = function (theme) { return ({
|
|
8322
8317
|
border: 'none',
|
|
@@ -8332,7 +8327,7 @@ var FitPredictor = function (_a) {
|
|
|
8332
8327
|
var theme = useTheme();
|
|
8333
8328
|
return (jsxs(Container$V, __assign$1({ theme: theme }, { children: [jsx(Container$V, { 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));
|
|
8334
8329
|
};
|
|
8335
|
-
var templateObject_1$
|
|
8330
|
+
var templateObject_1$1d, templateObject_2$U;
|
|
8336
8331
|
|
|
8337
8332
|
var Button$8 = newStyled.button(function () { return ({
|
|
8338
8333
|
background: 'transparent',
|
|
@@ -12576,14 +12571,14 @@ var Slider$1 = /*#__PURE__*/function (_React$Component) {
|
|
|
12576
12571
|
return Slider;
|
|
12577
12572
|
}(React__default["default"].Component);
|
|
12578
12573
|
|
|
12579
|
-
var StyledSlider = newStyled(Slider$1)(templateObject_1$
|
|
12574
|
+
var StyledSlider = newStyled(Slider$1)(templateObject_1$1c || (templateObject_1$1c = __makeTemplateObject(["\n .slick-dots {\n position: static;\n display: flex !important;\n justify-content: center;\n column-gap: ", ";\n margin-top: ", ";\n }\n .slick-prev {\n left: ", ";\n }\n .slick-next {\n right: ", ";\n }\n .slick-prev,\n .slick-next {\n width: fit-content;\n height: fit-content;\n }\n .slick-prev:before,\n .slick-next:before {\n content: none;\n }\n .slick-dots li {\n margin: 0;\n width: auto;\n line-height: 0;\n height: auto;\n }\n"], ["\n .slick-dots {\n position: static;\n display: flex !important;\n justify-content: center;\n column-gap: ", ";\n margin-top: ", ";\n }\n .slick-prev {\n left: ", ";\n }\n .slick-next {\n right: ", ";\n }\n .slick-prev,\n .slick-next {\n width: fit-content;\n height: fit-content;\n }\n .slick-prev:before,\n .slick-next:before {\n content: none;\n }\n .slick-dots li {\n margin: 0;\n width: auto;\n line-height: 0;\n height: auto;\n }\n"])), function (props) { return "".concat(props.dotsSpacing, "rem"); }, function (props) { return "".concat(props.dotListMarginTop, "rem"); }, function (_a) {
|
|
12580
12575
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
12581
12576
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
12582
12577
|
}, function (_a) {
|
|
12583
12578
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
12584
12579
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
12585
12580
|
});
|
|
12586
|
-
var templateObject_1$
|
|
12581
|
+
var templateObject_1$1c;
|
|
12587
12582
|
|
|
12588
12583
|
var getStylesBySize$8 = function (size) {
|
|
12589
12584
|
// rem units
|
|
@@ -12642,7 +12637,7 @@ var SliderNavigation = function (_a) {
|
|
|
12642
12637
|
} }, { 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));
|
|
12643
12638
|
};
|
|
12644
12639
|
|
|
12645
|
-
var Image$1 = newStyled.img(templateObject_1$
|
|
12640
|
+
var Image$1 = newStyled.img(templateObject_1$1b || (templateObject_1$1b = __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) {
|
|
12646
12641
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
12647
12642
|
return borderRadiusVariant &&
|
|
12648
12643
|
"\n border-radius: 20px;\n ";
|
|
@@ -12660,7 +12655,7 @@ var Image$1 = newStyled.img(templateObject_1$1a || (templateObject_1$1a = __make
|
|
|
12660
12655
|
? "0.1rem solid ".concat(previewImgBorderColor ? previewImgBorderColor : theme.colors.shades['700'].color)
|
|
12661
12656
|
: 'inherit';
|
|
12662
12657
|
});
|
|
12663
|
-
var templateObject_1$
|
|
12658
|
+
var templateObject_1$1b;
|
|
12664
12659
|
|
|
12665
12660
|
var ImageSmallPreview = function (_a) {
|
|
12666
12661
|
var imageUrl = _a.imageUrl, alt = _a.alt, _b = _a.selected, selected = _b === void 0 ? false : _b, className = _a.className, borderRadiusVariant = _a.borderRadiusVariant, previewImgBorderColor = _a.previewImgBorderColor, isRatioSquare = _a.isRatioSquare, _c = _a.loading, loading = _c === void 0 ? 'eager' : _c, _d = _a.decoding, decoding = _d === void 0 ? 'auto' : _d;
|
|
@@ -12668,7 +12663,7 @@ var ImageSmallPreview = function (_a) {
|
|
|
12668
12663
|
return (jsxRuntime.jsx(Image$1, { className: className, src: imageUrl, alt: alt, selected: selected, theme: theme, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor, loading: loading, decoding: decoding, width: theme.component.gallery.thumbnail.desktop.width, height: theme.component.gallery.thumbnail.desktop.height, isRatioSquare: isRatioSquare }, void 0));
|
|
12669
12664
|
};
|
|
12670
12665
|
|
|
12671
|
-
var horizontalStyles = css(templateObject_1$
|
|
12666
|
+
var horizontalStyles = css(templateObject_1$1a || (templateObject_1$1a = __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"])));
|
|
12672
12667
|
var verticalStyles = css(templateObject_2$T || (templateObject_2$T = __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"])));
|
|
12673
12668
|
var Container$U = newStyled.div(templateObject_3$L || (templateObject_3$L = __makeTemplateObject(["\n display: grid;\n max-height: ", ";\n height: min-content;\n align-items: flex-start;\n ", "\n\n ", "\n"], ["\n display: grid;\n max-height: ", ";\n height: min-content;\n align-items: flex-start;\n ", "\n\n ", "\n"])), function (_a) {
|
|
12674
12669
|
var isRatioSquare = _a.isRatioSquare, theme = _a.theme;
|
|
@@ -12686,7 +12681,7 @@ var ArrowsContainer = newStyled.div(templateObject_5$t || (templateObject_5$t =
|
|
|
12686
12681
|
var ArrowBaseStyles = newStyled.div(templateObject_6$r || (templateObject_6$r = __makeTemplateObject(["\n -webkit-text-size-adjust: 100%;\n -webkit-font-smoothing: antialiased;\n color: #2a2a2a;\n border: 0;\n font-family: inherit;\n font-size: 100%;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n margin: 0;\n padding: 0;\n vertical-align: inherit;\n background-color: #ececea;\n box-sizing: border-box;\n cursor: pointer;\n float: left;\n height: 20px;\n position: relative;\n width: 50%;\n background-position: 50%;\n background-repeat: no-repeat;\n background-size: 11px;\n display: block;\n"], ["\n -webkit-text-size-adjust: 100%;\n -webkit-font-smoothing: antialiased;\n color: #2a2a2a;\n border: 0;\n font-family: inherit;\n font-size: 100%;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n margin: 0;\n padding: 0;\n vertical-align: inherit;\n background-color: #ececea;\n box-sizing: border-box;\n cursor: pointer;\n float: left;\n height: 20px;\n position: relative;\n width: 50%;\n background-position: 50%;\n background-repeat: no-repeat;\n background-size: 11px;\n display: block;\n"])));
|
|
12687
12682
|
var ArrowPrev = newStyled(ArrowBaseStyles)(templateObject_7$o || (templateObject_7$o = __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"])));
|
|
12688
12683
|
var ArrowNext = newStyled(ArrowBaseStyles)(templateObject_8$h || (templateObject_8$h = __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"])));
|
|
12689
|
-
var templateObject_1$
|
|
12684
|
+
var templateObject_1$1a, templateObject_2$T, templateObject_3$L, templateObject_4$A, templateObject_5$t, templateObject_6$r, templateObject_7$o, templateObject_8$h;
|
|
12690
12685
|
|
|
12691
12686
|
var getLoadingProp = function (index, itemsOnViewport) {
|
|
12692
12687
|
var loading = 'eager';
|
|
@@ -14314,7 +14309,7 @@ InnerImageZoom.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
14314
14309
|
afterZoomOut: PropTypes.func
|
|
14315
14310
|
} : {};
|
|
14316
14311
|
|
|
14317
|
-
var Container$T = newStyled.div(templateObject_1$
|
|
14312
|
+
var Container$T = newStyled.div(templateObject_1$19 || (templateObject_1$19 = __makeTemplateObject(["\n ", "\n z-index: 0;\n position: relative;\n height: fit-content;\n /* &.styleforhorizontal {\n height: 30rem;\n } */\n display: block;\n overflow: hidden;\n white-space: nowrap;\n grid-area: 1/2;\n width: 100%;\n max-width: max-content;\n"], ["\n ", "\n z-index: 0;\n position: relative;\n height: fit-content;\n /* &.styleforhorizontal {\n height: 30rem;\n } */\n display: block;\n overflow: hidden;\n white-space: nowrap;\n grid-area: 1/2;\n width: 100%;\n max-width: max-content;\n"])), function (_a) {
|
|
14318
14313
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
14319
14314
|
return borderRadiusVariant && "border-radius: 40px;";
|
|
14320
14315
|
});
|
|
@@ -14340,7 +14335,7 @@ var InnerImageZoomStyled = newStyled(InnerImageZoom)(templateObject_8$g || (temp
|
|
|
14340
14335
|
var theme = _a.theme, isRatioSquare = _a.isRatioSquare;
|
|
14341
14336
|
return isRatioSquare ? '1 / 1' : theme.component.gallery.aspectRatio;
|
|
14342
14337
|
});
|
|
14343
|
-
var templateObject_1$
|
|
14338
|
+
var templateObject_1$19, templateObject_2$S, templateObject_3$K, templateObject_4$z, templateObject_5$s, templateObject_6$q, templateObject_7$n, templateObject_8$g;
|
|
14344
14339
|
|
|
14345
14340
|
var ImageProductSlide$1 = function (_a) {
|
|
14346
14341
|
var _b;
|
|
@@ -14355,8 +14350,8 @@ var ImageProductSlide$1 = function (_a) {
|
|
|
14355
14350
|
}, width: position == 'horizontal' ? 360 : 530, height: position == 'horizontal' ? 480 : 720, hideHint: true, isRatioSquare: isRatioSquare }, void 0)) : (jsxRuntime.jsx(ImageStyled, { width: position == 'horizontal' ? '360px' : '530px', height: "auto", src: source, alt: content.alt, objectFit: "cover", loading: "eager", decoding: "sync", isRatioSquare: isRatioSquare }, void 0)), jsxRuntime.jsx(TopTagContainer$7, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsxRuntime.jsx(BottomTagContainer$7, __assign$1({ isCTAHidden: hideCTA }, { children: bottomTag }), void 0), !!topRightTag && (jsxRuntime.jsx(TopRightTagWrapper, { children: jsxRuntime.jsx(TopRightTagContainer$2, { children: topRightTag }, void 0) }, void 0))] }, void 0)), isVideo && jsxRuntime.jsx(Video$1, { source: source, thumbnail: content === null || content === void 0 ? void 0 : content.thumbnailUrl }, void 0), ctaText && ctaAction && (jsxRuntime.jsx("div", __assign$1({ style: { display: hideCTA ? 'none' : 'block' } }, { children: jsxRuntime.jsx(ButtonSecondaryOutlineWrapper, { wide: true, onClick: ctaAction, text: ctaText }, void 0) }), void 0))] }), void 0));
|
|
14356
14351
|
};
|
|
14357
14352
|
|
|
14358
|
-
var Container$S = newStyled.div(templateObject_1$
|
|
14359
|
-
var templateObject_1$
|
|
14353
|
+
var Container$S = newStyled.div(templateObject_1$18 || (templateObject_1$18 = __makeTemplateObject(["\n display: grid;\n grid-template-columns: minmax(6rem, max-content) 1fr;\n grid-column-gap: 20px;\n max-height: 50rem;\n width: 100%;\n"], ["\n display: grid;\n grid-template-columns: minmax(6rem, max-content) 1fr;\n grid-column-gap: 20px;\n max-height: 50rem;\n width: 100%;\n"])));
|
|
14354
|
+
var templateObject_1$18;
|
|
14360
14355
|
|
|
14361
14356
|
var getInitialIndex = function (images, selectedValue) {
|
|
14362
14357
|
if (selectedValue) {
|
|
@@ -14385,7 +14380,7 @@ var ProductGallery = function (_a) {
|
|
|
14385
14380
|
return (jsxRuntime.jsxs(Container$S, { children: [jsxRuntime.jsx(ImagePreviewList, { images: images, selectedImage: selectedImage, dataTestId: previewListDataTestId, onClick: onContentChange, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor, hasOverflowArrows: hasOverflowArrows, isRatioSquare: isRatioSquare, itemsOnViewport: itemsOnViewport }, 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, isRatioSquare: isRatioSquare }, void 0)] }, void 0));
|
|
14386
14381
|
};
|
|
14387
14382
|
|
|
14388
|
-
var StyledButton$3 = newStyled(BaseButton)(templateObject_1$
|
|
14383
|
+
var StyledButton$3 = newStyled(BaseButton)(templateObject_1$17 || (templateObject_1$17 = __makeTemplateObject(["\n width: 12.5rem;\n height: 2.5rem;\n background-color: ", ";\n cursor: pointer;\n border: none;\n\n &:hover {\n background-color: ", ";\n }\n"], ["\n width: 12.5rem;\n height: 2.5rem;\n background-color: ", ";\n cursor: pointer;\n border: none;\n\n &:hover {\n background-color: ", ";\n }\n"])), function (props) { return props.backgroundColor; }, function (props) { return props.hoverBackgroundColor; });
|
|
14389
14384
|
var AmazonButton = function (_a) {
|
|
14390
14385
|
var onClick = _a.onClick;
|
|
14391
14386
|
return (jsxRuntime.jsx(StyledButton$3, __assign$1({ backgroundColor: "#FED865", hoverBackgroundColor: "#F1CB58", onClick: onClick }, { children: jsxRuntime.jsx(Icon.Payment.Amazon, { width: 5.375, height: 1.25 }, void 0) }), void 0));
|
|
@@ -14394,7 +14389,7 @@ var PaypalButton = function (_a) {
|
|
|
14394
14389
|
var onClick = _a.onClick;
|
|
14395
14390
|
return (jsxRuntime.jsx(StyledButton$3, __assign$1({ backgroundColor: "#ffc439", hoverBackgroundColor: "#F4BF41", onClick: onClick }, { children: jsxRuntime.jsx(Icon.Payment.Paypal, { width: 4.938, height: 1.25 }, void 0) }), void 0));
|
|
14396
14391
|
};
|
|
14397
|
-
var templateObject_1$
|
|
14392
|
+
var templateObject_1$17;
|
|
14398
14393
|
|
|
14399
14394
|
var Container$R = newStyled.div(function (props) { return ({
|
|
14400
14395
|
height: 'auto',
|
|
@@ -14449,7 +14444,7 @@ var IconsWithTitle = function (_a) {
|
|
|
14449
14444
|
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(Container$R, __assign$1({ textPosition: iconTitlePosition }, { children: [withWrapper ? (jsxRuntime.jsx(IconWrapper, __assign$1({ backgroundColor: backgroundColor, style: iconStyles, iconSize: isMobile ? iconSizeMobile : iconSizeDesktop }, { children: jsxRuntime.jsx(IconComponent, { width: isMobile ? iconSizeMobile : iconSizeDesktop, height: isMobile ? iconSizeMobile : iconSizeDesktop, fill: iconColor }, void 0) }), void 0)) : (jsxRuntime.jsx(IconComponent, { width: isMobile ? iconSizeMobile : iconSizeDesktop, height: isMobile ? iconSizeMobile : iconSizeDesktop, fill: iconColor }, void 0)), jsxRuntime.jsx(Text$7, { variant: "heading6", weight: "demi", style: titleStyles ? titleStyles : defaultTitleStyle, dangerouslySetInnerHTML: isTitleInnerHtml ? { __html: iconTitle } : { __html: "<span>".concat(iconTitle, "</span>") } }, void 0)] }), void 0) }, void 0));
|
|
14450
14445
|
};
|
|
14451
14446
|
|
|
14452
|
-
var Container$Q = newStyled.div(templateObject_1$
|
|
14447
|
+
var Container$Q = newStyled.div(templateObject_1$16 || (templateObject_1$16 = __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'); });
|
|
14453
14448
|
var ImageContainer$4 = newStyled.div(templateObject_2$R || (templateObject_2$R = __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'); });
|
|
14454
14449
|
var StyledTitle = newStyled.div(templateObject_3$J || (templateObject_3$J = __makeTemplateObject(["\n display: flex;\n ", "\n"], ["\n display: flex;\n ", "\n"])), function (_a) {
|
|
14455
14450
|
var titlePosition = _a.titlePosition;
|
|
@@ -14461,9 +14456,9 @@ var ImageCardWithDescription = function (_a) {
|
|
|
14461
14456
|
var isMobile = useWindowDimensions().isMobile;
|
|
14462
14457
|
return (jsxRuntime.jsxs(Container$Q, __assign$1({ "data-testid": "Container", isMobile: isMobile }, { children: [jsxRuntime.jsx(ImageContainer$4, __assign$1({ "data-testid": "ImageContainer", isMobile: isMobile }, { children: jsxRuntime.jsx(Image$3, { src: image, borderRadius: "40px", alt: "before", height: "100%", width: "100%" }, void 0) }), void 0), jsxRuntime.jsx(StyledTitle, __assign$1({ titlePosition: titlePosition, "data-testid": "StyledTitle" }, { children: isMobile ? (jsxRuntime.jsx(Text$7, __assign$1({ variant: "link", weight: "demi" }, { children: title }), void 0)) : (jsxRuntime.jsx(Text$7, __assign$1({ variant: "heading6", weight: "demi" }, { children: title }), void 0)) }), void 0), jsxRuntime.jsx(Text$7, __assign$1({ variant: "link", weight: "regular" }, { children: description }), void 0)] }), void 0));
|
|
14463
14458
|
};
|
|
14464
|
-
var templateObject_1$
|
|
14459
|
+
var templateObject_1$16, templateObject_2$R, templateObject_3$J;
|
|
14465
14460
|
|
|
14466
|
-
var Label$4 = newStyled.span(templateObject_1$
|
|
14461
|
+
var Label$4 = newStyled.span(templateObject_1$15 || (templateObject_1$15 = __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) {
|
|
14467
14462
|
var color = _a.color;
|
|
14468
14463
|
return color;
|
|
14469
14464
|
});
|
|
@@ -14476,7 +14471,7 @@ var InputLabel = function (_a) {
|
|
|
14476
14471
|
var theme = useTheme();
|
|
14477
14472
|
return (jsxRuntime.jsxs(Label$4, __assign$1({ color: isDisabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, { children: [label, isRequired && jsxRuntime.jsx(MandatoryIcon, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: "*" }), void 0)] }), void 0));
|
|
14478
14473
|
};
|
|
14479
|
-
var templateObject_1$
|
|
14474
|
+
var templateObject_1$15, templateObject_2$Q;
|
|
14480
14475
|
|
|
14481
14476
|
var containerByStatus = function (theme, status) {
|
|
14482
14477
|
if (status === exports.InputValidationType.Valid)
|
|
@@ -14485,7 +14480,7 @@ var containerByStatus = function (theme, status) {
|
|
|
14485
14480
|
return theme.colors.semantic.urgent.color;
|
|
14486
14481
|
return '';
|
|
14487
14482
|
};
|
|
14488
|
-
var Container$P = newStyled.div(templateObject_1$
|
|
14483
|
+
var Container$P = newStyled.div(templateObject_1$14 || (templateObject_1$14 = __makeTemplateObject(["\n position: relative;\n input {\n border-color: ", ";\n }\n"], ["\n position: relative;\n input {\n border-color: ", ";\n }\n"])), function (_a) {
|
|
14489
14484
|
var theme = _a.theme, status = _a.status, hasError = _a.hasError;
|
|
14490
14485
|
return hasError ? '' : containerByStatus(theme, status);
|
|
14491
14486
|
});
|
|
@@ -14563,7 +14558,7 @@ var AnimatedPlaceholder = newStyled.span(templateObject_5$r || (templateObject_5
|
|
|
14563
14558
|
return theme.component.input.lineHeight;
|
|
14564
14559
|
});
|
|
14565
14560
|
var ClearInput = newStyled.div(templateObject_6$p || (templateObject_6$p = __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"])));
|
|
14566
|
-
var templateObject_1$
|
|
14561
|
+
var templateObject_1$14, templateObject_2$P, templateObject_3$I, templateObject_4$y, templateObject_5$r, templateObject_6$p;
|
|
14567
14562
|
|
|
14568
14563
|
var BaseInput = function (_a) {
|
|
14569
14564
|
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, customErrorMessage = _a.customErrorMessage, rest = __rest(_a, ["value", "onChange", "label", "children", "required", "onValidation", "size", "placeholder", "inlinePlaceholder", "hasError", "inputType", "hideClear", "innerRef", "requiredPlaceholder", "customErrorMessage"]);
|
|
@@ -14608,7 +14603,7 @@ var Button$6 = function (_a) {
|
|
|
14608
14603
|
throw new Error("Invalid button variant ".concat(variant));
|
|
14609
14604
|
};
|
|
14610
14605
|
|
|
14611
|
-
var Container$O = newStyled.div(templateObject_1$
|
|
14606
|
+
var Container$O = newStyled.div(templateObject_1$13 || (templateObject_1$13 = __makeTemplateObject(["\n overflow: hidden;\n\n input {\n border-radius: ", ";\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n border-right: none;\n width: 100%;\n }\n"], ["\n overflow: hidden;\n\n input {\n border-radius: ", ";\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n border-right: none;\n width: 100%;\n }\n"])), function (_a) {
|
|
14612
14607
|
var theme = _a.theme;
|
|
14613
14608
|
return theme.component.inputCustom.input.borderRadius;
|
|
14614
14609
|
});
|
|
@@ -14629,9 +14624,9 @@ var Custom = function (_a) {
|
|
|
14629
14624
|
}); }, [variant, onClick, text, rest.disabled]);
|
|
14630
14625
|
return (jsxRuntime.jsx(Container$O, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(BaseInput, __assign$1({}, rest, { children: jsxRuntime.jsx(ButtonContainer$1, __assign$1({ theme: theme, defaultRounded: defaultRounded }, { children: jsxRuntime.jsx(Button$6, __assign$1({}, props), void 0) }), void 0) }), void 0) }), void 0));
|
|
14631
14626
|
};
|
|
14632
|
-
var templateObject_1$
|
|
14627
|
+
var templateObject_1$13, templateObject_2$O;
|
|
14633
14628
|
|
|
14634
|
-
var SuccessContainer = newStyled.div(templateObject_1$
|
|
14629
|
+
var SuccessContainer = newStyled.div(templateObject_1$12 || (templateObject_1$12 = __makeTemplateObject(["\n height: ", ";\n display: flex;\n"], ["\n height: ", ";\n display: flex;\n"])), function (_a) {
|
|
14635
14630
|
var size = _a.size;
|
|
14636
14631
|
return (size === 'small' ? '36px' : '');
|
|
14637
14632
|
});
|
|
@@ -14641,9 +14636,9 @@ var Success = function (_a) {
|
|
|
14641
14636
|
var children = _a.children, successText = _a.successText, size = _a.size;
|
|
14642
14637
|
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));
|
|
14643
14638
|
};
|
|
14644
|
-
var templateObject_1$
|
|
14639
|
+
var templateObject_1$12, templateObject_2$N, templateObject_3$H;
|
|
14645
14640
|
|
|
14646
|
-
var ButtonContainer = newStyled.div(templateObject_1$
|
|
14641
|
+
var ButtonContainer = newStyled.div(templateObject_1$11 || (templateObject_1$11 = __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) {
|
|
14647
14642
|
var status = _a.status, type = _a.type, theme = _a.theme;
|
|
14648
14643
|
return status === exports.InputValidationType.Empty &&
|
|
14649
14644
|
type === 'primary' &&
|
|
@@ -14660,16 +14655,16 @@ var BasePlusButton = function (_a) {
|
|
|
14660
14655
|
}
|
|
14661
14656
|
return (jsxRuntime.jsx(BaseInput, __assign$1({ onValidation: setStatus, onChange: onChangeInput }, rest, { children: jsxRuntime.jsx(ButtonContainer, __assign$1({ status: status, type: "primary", theme: theme }, { children: jsxRuntime.jsx(ButtonSecondary, { text: text, onClick: function () { return onClick(inputValue); }, disabled: rest.disabled || status === exports.InputValidationType.Error }, void 0) }), void 0) }), void 0));
|
|
14662
14657
|
};
|
|
14663
|
-
var templateObject_1$
|
|
14658
|
+
var templateObject_1$11;
|
|
14664
14659
|
|
|
14665
|
-
var Container$N = newStyled.div(templateObject_1
|
|
14660
|
+
var Container$N = newStyled.div(templateObject_1$10 || (templateObject_1$10 = __makeTemplateObject(["\n input {\n padding-right: 2.688rem;\n }\n"], ["\n input {\n padding-right: 2.688rem;\n }\n"])));
|
|
14666
14661
|
var IconContainer$3 = newStyled.div(templateObject_2$M || (templateObject_2$M = __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"])));
|
|
14667
14662
|
var BasePlusIcon = function (_a) {
|
|
14668
14663
|
var Icon = _a.Icon, rest = __rest(_a, ["Icon"]);
|
|
14669
14664
|
var theme = useTheme();
|
|
14670
14665
|
return (jsxRuntime.jsx(Container$N, { children: jsxRuntime.jsx(BaseInput, __assign$1({}, rest, { children: jsxRuntime.jsx(IconContainer$3, { children: jsxRuntime.jsx(Icon, { testId: "IconWrapper", fill: theme.colors.shades['250'].color }, void 0) }, void 0) }), void 0) }, void 0));
|
|
14671
14666
|
};
|
|
14672
|
-
var templateObject_1
|
|
14667
|
+
var templateObject_1$10, templateObject_2$M;
|
|
14673
14668
|
|
|
14674
14669
|
var Input$3 = {
|
|
14675
14670
|
Simple: BaseInput,
|
|
@@ -14809,7 +14804,7 @@ var Portal = function (_a) {
|
|
|
14809
14804
|
var visibleStyle = function (_a) {
|
|
14810
14805
|
var opened = _a.opened;
|
|
14811
14806
|
return opened
|
|
14812
|
-
? css(templateObject_1
|
|
14807
|
+
? css(templateObject_1$$ || (templateObject_1$$ = __makeTemplateObject(["\n opacity: 1;\n pointer-events: all;\n "], ["\n opacity: 1;\n pointer-events: all;\n "]))) : css(templateObject_2$L || (templateObject_2$L = __makeTemplateObject(["\n opacity: 0;\n pointer-events: none;\n "], ["\n opacity: 0;\n pointer-events: none;\n "])));
|
|
14813
14808
|
};
|
|
14814
14809
|
var transformStyle = function (_a) {
|
|
14815
14810
|
var opened = _a.opened, maxFullScreen = _a.maxFullScreen, initialTop = _a.initialTop;
|
|
@@ -14864,7 +14859,7 @@ var useModal = function (id) {
|
|
|
14864
14859
|
close: close,
|
|
14865
14860
|
}); }, [close, open, opened]);
|
|
14866
14861
|
};
|
|
14867
|
-
var templateObject_1
|
|
14862
|
+
var templateObject_1$$, templateObject_2$L, templateObject_3$G, templateObject_4$x, templateObject_5$q, templateObject_6$o, templateObject_7$m;
|
|
14868
14863
|
|
|
14869
14864
|
var htmlReactParser = {exports: {}};
|
|
14870
14865
|
|
|
@@ -18645,7 +18640,7 @@ HTMLReactParser$1.htmlToDOM;
|
|
|
18645
18640
|
HTMLReactParser$1.attributesToProps;
|
|
18646
18641
|
HTMLReactParser$1.Element;
|
|
18647
18642
|
|
|
18648
|
-
var Bar$1 = newStyled.div(templateObject_1$
|
|
18643
|
+
var Bar$1 = newStyled.div(templateObject_1$_ || (templateObject_1$_ = __makeTemplateObject(["\n @keyframes loading {\n 0% {\n transform: translateX(0);\n }\n to {\n transform: translateX(400%);\n }\n }\n\n height: ", ";\n background-color: ", ";\n width: ", ";\n border-radius: ", ";\n left: ", ";\n animation: ", ";\n"], ["\n @keyframes loading {\n 0% {\n transform: translateX(0);\n }\n to {\n transform: translateX(400%);\n }\n }\n\n height: ", ";\n background-color: ", ";\n width: ", ";\n border-radius: ", ";\n left: ", ";\n animation: ", ";\n"])), function (_a) {
|
|
18649
18644
|
var height = _a.height;
|
|
18650
18645
|
return height || '0.5rem';
|
|
18651
18646
|
}, function (_a) {
|
|
@@ -18728,9 +18723,9 @@ var MotivatorProgressBar = function (_a) {
|
|
|
18728
18723
|
};
|
|
18729
18724
|
return (jsxRuntime.jsxs(Container$L, __assign$1({ backgroundColor: backgroundColor }, { children: [jsxRuntime.jsxs(BarContainer, __assign$1({ "data-testid": "MPBContainer" }, { children: [jsxRuntime.jsxs(Value, { children: [currencyCode, currentAmount] }, void 0), jsxRuntime.jsx(Background$1, __assign$1({ backgroundColor: unfilledColor || theme.colors.shades['100'].color, "data-testid": "MPBBackground" }, { children: jsxRuntime.jsx(Bar$1, { "data-testid": "MPBBar", backgroundColor: fillColor, percent: progress }, void 0) }), void 0), jsxRuntime.jsxs(Value, __assign$1({ isBold: true }, { children: [currencyCode, endingValue] }), void 0)] }), void 0), isRewardUnlocked ? (jsxRuntime.jsx(MessageContainer, { dangerouslySetInnerHTML: { __html: rewardUnlockedMessage } }, void 0)) : (getRemainingAmountMessage())] }), void 0));
|
|
18730
18725
|
};
|
|
18731
|
-
var templateObject_1$
|
|
18726
|
+
var templateObject_1$_, templateObject_2$K;
|
|
18732
18727
|
|
|
18733
|
-
var Container$K = newStyled.div(templateObject_1$
|
|
18728
|
+
var Container$K = newStyled.div(templateObject_1$Z || (templateObject_1$Z = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: ", ";\n padding: 0.75rem 0;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: ", ";\n padding: 0.75rem 0;\n"])), function (_a) {
|
|
18734
18729
|
var theme = _a.theme;
|
|
18735
18730
|
return theme.component.orderBar.backgroundColor;
|
|
18736
18731
|
});
|
|
@@ -18740,9 +18735,9 @@ var OrderBar = function (_a) {
|
|
|
18740
18735
|
var theme = useTheme();
|
|
18741
18736
|
return (jsxRuntime.jsxs(Container$K, __assign$1({ color: color }, { children: [jsxRuntime.jsx(Icon.Actions.Check, { width: 1.25, height: 0.875, fill: "#2F806A" }, void 0), jsxRuntime.jsx(H1, __assign$1({ color: theme.component.orderBar.fontColor }, { children: message }), void 0)] }), void 0));
|
|
18742
18737
|
};
|
|
18743
|
-
var templateObject_1$
|
|
18738
|
+
var templateObject_1$Z, templateObject_2$J;
|
|
18744
18739
|
|
|
18745
|
-
var Container$J = newStyled.div(templateObject_1$
|
|
18740
|
+
var Container$J = newStyled.div(templateObject_1$Y || (templateObject_1$Y = __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"])));
|
|
18746
18741
|
var Card$1 = newStyled.div(templateObject_2$I || (templateObject_2$I = __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"])));
|
|
18747
18742
|
var Tag$1 = newStyled.div(templateObject_3$F || (templateObject_3$F = __makeTemplateObject(["\n position: absolute;\n width: 100%;\n left: 50%;\n top: 0;\n transform: translateX(-50%);\n background-color: var(--component-packSelector-tagColor);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 1px 0;\n\n [aria-checked='true'] & {\n background-color: var(--component-packSelector-selectedColor);\n\n & * {\n color: var(--component-packSelector-selectedContrast) !important;\n }\n }\n"], ["\n position: absolute;\n width: 100%;\n left: 50%;\n top: 0;\n transform: translateX(-50%);\n background-color: var(--component-packSelector-tagColor);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 1px 0;\n\n [aria-checked='true'] & {\n background-color: var(--component-packSelector-selectedColor);\n\n & * {\n color: var(--component-packSelector-selectedContrast) !important;\n }\n }\n"])));
|
|
18748
18743
|
var Label$3 = newStyled.div(templateObject_4$w || (templateObject_4$w = __makeTemplateObject(["\n position: relative;\n width: fit-content;\n margin: 0 auto;\n"], ["\n position: relative;\n width: fit-content;\n margin: 0 auto;\n"])));
|
|
@@ -18779,9 +18774,9 @@ var PackCard = function (_a) {
|
|
|
18779
18774
|
currency: currencyCode || 'USD',
|
|
18780
18775
|
}), ' ', "each"] }), void 0)] }), void 0));
|
|
18781
18776
|
};
|
|
18782
|
-
var templateObject_1$
|
|
18777
|
+
var templateObject_1$Y, templateObject_2$I, templateObject_3$F, templateObject_4$w, templateObject_5$p, templateObject_6$n, templateObject_7$l, templateObject_8$f;
|
|
18783
18778
|
|
|
18784
|
-
var Container$I = newStyled.div(templateObject_1$
|
|
18779
|
+
var Container$I = newStyled.div(templateObject_1$X || (templateObject_1$X = __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"])));
|
|
18785
18780
|
var IconContainer$1 = newStyled.div(templateObject_2$H || (templateObject_2$H = __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"])));
|
|
18786
18781
|
var PageNumbersContainer = newStyled.div(templateObject_3$E || (templateObject_3$E = __makeTemplateObject(["\n display: flex;\n ", ";\n"], ["\n display: flex;\n ", ";\n"])), mediaQueries({
|
|
18787
18782
|
margin: ['0 0.75rem', '0 1.25rem'],
|
|
@@ -18803,7 +18798,7 @@ var PageNumber = newStyled.span(templateObject_4$v || (templateObject_4$v = __ma
|
|
|
18803
18798
|
var background = _a.background;
|
|
18804
18799
|
return background || 'unset';
|
|
18805
18800
|
});
|
|
18806
|
-
var templateObject_1$
|
|
18801
|
+
var templateObject_1$X, templateObject_2$H, templateObject_3$E, templateObject_4$v;
|
|
18807
18802
|
|
|
18808
18803
|
var Pagination = function (_a) {
|
|
18809
18804
|
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;
|
|
@@ -18868,7 +18863,7 @@ var PaginatorBlog = function (_a) {
|
|
|
18868
18863
|
: theme.colors.shades['700'].color, borderColor: theme.colors.shades['700'].color, theme: theme, bold: false, underline: false }, { children: i + from }), i)); }) }), void 0), jsxRuntime.jsx(IconContainer$1, __assign$1({ onClick: function () { return handlePageChange(page + 1); }, "data-testid": "PaginatorBlogRightChevron" }, { children: jsxRuntime.jsx(Icon.Arrows.ChevronRight, { fill: page === to ? theme.colors.shades['white'].color : theme.colors.shades['700'].color }, void 0) }), void 0)] }), void 0));
|
|
18869
18864
|
};
|
|
18870
18865
|
|
|
18871
|
-
var Container$H = newStyled.div(templateObject_1$
|
|
18866
|
+
var Container$H = newStyled.div(templateObject_1$W || (templateObject_1$W = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n border: 0.063rem solid ", ";\n border-radius: 0.25rem;\n padding: 0.375rem;\n cursor: ", ";\n"], ["\n width: ", ";\n height: ", ";\n border: 0.063rem solid ", ";\n border-radius: 0.25rem;\n padding: 0.375rem;\n cursor: ", ";\n"])), function (_a) {
|
|
18872
18867
|
var width = _a.width;
|
|
18873
18868
|
return width;
|
|
18874
18869
|
}, function (_a) {
|
|
@@ -18886,9 +18881,9 @@ var PaymentMethod = function (_a) {
|
|
|
18886
18881
|
var theme = useTheme();
|
|
18887
18882
|
return (jsxRuntime.jsx(Container$H, __assign$1({ width: width, height: height, borderColor: theme.colors.shades['100'].color, isClickable: Boolean(onClick), onClick: onClick, "data-testid": "payment-method-container" }, { children: React$2.createElement(Icon) }), void 0));
|
|
18888
18883
|
};
|
|
18889
|
-
var templateObject_1$
|
|
18884
|
+
var templateObject_1$W;
|
|
18890
18885
|
|
|
18891
|
-
var Container$G = newStyled.div(templateObject_1$
|
|
18886
|
+
var Container$G = newStyled.div(templateObject_1$V || (templateObject_1$V = __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"])));
|
|
18892
18887
|
var IMAGE_WIDTH = '63px';
|
|
18893
18888
|
var ImageContainer$3 = newStyled.div(templateObject_2$G || (templateObject_2$G = __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);
|
|
18894
18889
|
var DescriptionContainer$1 = newStyled.div(templateObject_3$D || (templateObject_3$D = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n ", ";\n width: calc(100% - ", ");\n"], ["\n display: flex;\n flex-direction: column;\n ", ";\n width: calc(100% - ", ");\n"])), mediaQueries({
|
|
@@ -18935,7 +18930,7 @@ var SimpleOrderItem = function (_a) {
|
|
|
18935
18930
|
var theme = useTheme();
|
|
18936
18931
|
return (jsxRuntime.jsxs(Container$G, __assign$1({ className: className }, { children: [jsxRuntime.jsxs(ImageContainer$3, { children: [jsxRuntime.jsx(Image$3, { src: image.src, alt: image.alt, width: "4.063rem", height: "5.375rem", objectFit: "cover", objectPosition: "center" }, void 0), quantity ? (jsxRuntime.jsx(Quantity, __assign$1({ "data-testid": "order-item-quantity" }, { children: jsxRuntime.jsx(StyledSpan, { children: quantity }, void 0) }), void 0)) : null] }, void 0), jsxRuntime.jsxs(DescriptionContainer$1, __assign$1({ "data-testid": "order-item-description-container", theme: theme }, { children: [jsxRuntime.jsx(Title$4, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "product-title" }, { children: title }), void 0), subtitle && (jsxRuntime.jsx(Subtitle, __assign$1({ color: ((_c = (_b = theme.component.pricing) === null || _b === void 0 ? void 0 : _b.subtitle) === null || _c === void 0 ? void 0 : _c.color) || theme.colors.shades['700'].color, fontSize: ((_e = (_d = theme.component.pricing) === null || _d === void 0 ? void 0 : _d.subtitle) === null || _e === void 0 ? void 0 : _e.fontSize) || '0.75rem', lineHeight: ((_g = (_f = theme.component.pricing) === null || _f === void 0 ? void 0 : _f.subtitle) === null || _g === void 0 ? void 0 : _g.lineHeight) || '1rem', fontWeight: ((_j = (_h = theme.component.pricing) === null || _h === void 0 ? void 0 : _h.subtitle) === null || _j === void 0 ? void 0 : _j.fontWeight) || 'normal', "data-testid": "product-variant-title", margin: "0.5rem 0 0 0" }, { children: subtitle }), void 0)), midElement, isGift && jsxRuntime.jsx(Gift, { children: "Limited Time Only" }, void 0), jsxRuntime.jsxs(PriceContainer, __assign$1({ "data-testid": "order-item-price-container", withTag: !!tag, theme: theme }, { children: [tag && (jsxRuntime.jsx(OfferBanner, { discountAppliedText: tag === null || tag === void 0 ? void 0 : tag.text, backgroundColor: tag === null || tag === void 0 ? void 0 : tag.backgroundColor }, void 0)), isGift ? (jsxRuntime.jsx(Gift, { children: "GIFT" }, void 0)) : (jsxRuntime.jsx(PriceLabel$1, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, color: price.color || theme.colors.shades['700'].color, size: theme.component.pricing.priceLabel.price.size, finalPriceStyle: finalPriceStyle, originalPriceStyled: true }, void 0))] }), void 0)] }), void 0)] }), void 0));
|
|
18937
18932
|
};
|
|
18938
|
-
var templateObject_1$
|
|
18933
|
+
var templateObject_1$V, templateObject_2$G, templateObject_3$D, templateObject_4$u, templateObject_5$o, templateObject_6$m, templateObject_7$k;
|
|
18939
18934
|
|
|
18940
18935
|
var P$1 = newStyled.p(function (_a) {
|
|
18941
18936
|
var color = _a.color;
|
|
@@ -18949,7 +18944,7 @@ var P$1 = newStyled.p(function (_a) {
|
|
|
18949
18944
|
margin: '0.938rem 4.188rem',
|
|
18950
18945
|
});
|
|
18951
18946
|
});
|
|
18952
|
-
var Bar = newStyled.div(templateObject_1$
|
|
18947
|
+
var Bar = newStyled.div(templateObject_1$U || (templateObject_1$U = __makeTemplateObject(["\n @keyframes loading {\n 0% {\n transform: translateX(0);\n }\n to {\n transform: translateX(400%);\n }\n }\n\n height: ", ";\n background-color: ", ";\n width: ", ";\n border-radius: ", ";\n position: absolute;\n left: ", ";\n animation: ", ";\n"], ["\n @keyframes loading {\n 0% {\n transform: translateX(0);\n }\n to {\n transform: translateX(400%);\n }\n }\n\n height: ", ";\n background-color: ", ";\n width: ", ";\n border-radius: ", ";\n position: absolute;\n left: ", ";\n animation: ", ";\n"])), function (_a) {
|
|
18953
18948
|
var height = _a.height;
|
|
18954
18949
|
return height || '0.5rem';
|
|
18955
18950
|
}, function (_a) {
|
|
@@ -18994,9 +18989,9 @@ var ProgressBar = function (_a) {
|
|
|
18994
18989
|
var theme = useTheme();
|
|
18995
18990
|
return (jsxRuntime.jsxs(Container$F, __assign$1({ "data-testid": "PBContainer", widthAuto: widthAuto, description: description }, { children: [jsxRuntime.jsx(Background, __assign$1({ backgroundColor: backgroundColor || theme.colors.shades['100'].color, height: height, borderRadius: borderRadius, "data-testid": "PBBackground" }, { children: jsxRuntime.jsx(Bar, { "data-testid": "PBBar", backgroundColor: fillColor, percent: percent, height: height, borderRadius: borderRadius }, void 0) }), void 0), description && (jsxRuntime.jsx(P$1, __assign$1({ "data-testid": "paragraph", color: theme.colors.pallete.secondary.color }, { children: description }), void 0))] }), void 0));
|
|
18996
18991
|
};
|
|
18997
|
-
var templateObject_1$
|
|
18992
|
+
var templateObject_1$U;
|
|
18998
18993
|
|
|
18999
|
-
var Container$E = newStyled.div(templateObject_1$
|
|
18994
|
+
var Container$E = newStyled.div(templateObject_1$T || (templateObject_1$T = __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; });
|
|
19000
18995
|
var Item$1 = newStyled.span(templateObject_2$F || (templateObject_2$F = __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"])));
|
|
19001
18996
|
var Number$1 = newStyled(Item$1)(templateObject_3$C || (templateObject_3$C = __makeTemplateObject(["\n width: 1.25rem;\n text-align: center;\n font-weight: 600;\n"], ["\n width: 1.25rem;\n text-align: center;\n font-weight: 600;\n"])));
|
|
19002
18997
|
var IncreaseDecrease = newStyled(Item$1)(templateObject_4$t || (templateObject_4$t = __makeTemplateObject(["\n cursor: pointer;\n user-select: none;\n padding: 0 0.313rem;\n font-weight: 400;\n color: ", ";\n"], ["\n cursor: pointer;\n user-select: none;\n padding: 0 0.313rem;\n font-weight: 400;\n color: ", ";\n"])), function (props) { return props.isMaxSelected && 'var(--colors-shades-175-color)'; });
|
|
@@ -19024,7 +19019,7 @@ var QuantityPicker = function (_a) {
|
|
|
19024
19019
|
}, [value, clamp]);
|
|
19025
19020
|
return (jsxRuntime.jsxs(Container$E, __assign$1({ borderColor: theme.colors.shades['200'].color, color: theme.colors.shades['700'].color, "data-testid": testId, borderRadius: theme.component.qtyPicker.borderRadius }, { children: [jsxRuntime.jsx(IncreaseDecrease, __assign$1({ "data-testid": "".concat(testId, "-minus"), onClick: function () { return setInternal(function (value) { return clamp(value - 1); }); } }, { children: "-" }), void 0), jsxRuntime.jsx(Number$1, { children: internal }, void 0), jsxRuntime.jsx(IncreaseDecrease, __assign$1({ isMaxSelected: value === maxValue, "data-testid": "".concat(testId, "-plus"), onClick: function () { return setInternal(function (value) { return clamp(value + 1); }); } }, { children: "+" }), void 0)] }), void 0));
|
|
19026
19021
|
};
|
|
19027
|
-
var templateObject_1$
|
|
19022
|
+
var templateObject_1$T, templateObject_2$F, templateObject_3$C, templateObject_4$t;
|
|
19028
19023
|
|
|
19029
19024
|
/* base styles & size variants */
|
|
19030
19025
|
var CustomRadioStyles$1 = {
|
|
@@ -19093,7 +19088,7 @@ var ContainerStyles$1 = {
|
|
|
19093
19088
|
},
|
|
19094
19089
|
};
|
|
19095
19090
|
|
|
19096
|
-
var Wrapper$3 = newStyled.div(templateObject_1$
|
|
19091
|
+
var Wrapper$3 = newStyled.div(templateObject_1$S || (templateObject_1$S = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
19097
19092
|
var Container$D = newStyled.div(__assign$1({}, ContainerStyles$1.baseStyles), function (props) { return [ContainerStyles$1[props.size](props.theme)]; });
|
|
19098
19093
|
var Input$2 = newStyled.input(templateObject_2$E || (templateObject_2$E = __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) {
|
|
19099
19094
|
var disabled = _a.disabled;
|
|
@@ -19113,7 +19108,7 @@ var RadioPrimary = function (_a) {
|
|
|
19113
19108
|
};
|
|
19114
19109
|
return (jsxRuntime.jsxs(Wrapper$3, { children: [jsxRuntime.jsxs(Container$D, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsxRuntime.jsx(Input$2, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled, style: style }, void 0), jsxRuntime.jsx(CustomRadio$1, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), jsxRuntime.jsx(StyledLabel$1, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0)] }, void 0));
|
|
19115
19110
|
};
|
|
19116
|
-
var templateObject_1$
|
|
19111
|
+
var templateObject_1$S, templateObject_2$E, templateObject_3$B;
|
|
19117
19112
|
|
|
19118
19113
|
var RadioGroupInput = function (_a) {
|
|
19119
19114
|
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;
|
|
@@ -19192,7 +19187,7 @@ var ContainerStyles = {
|
|
|
19192
19187
|
},
|
|
19193
19188
|
};
|
|
19194
19189
|
|
|
19195
|
-
var Wrapper$2 = newStyled.div(templateObject_1$
|
|
19190
|
+
var Wrapper$2 = newStyled.div(templateObject_1$R || (templateObject_1$R = __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"])));
|
|
19196
19191
|
var Container$C = newStyled.div(__assign$1({}, ContainerStyles.baseStyles), function (props) { return [ContainerStyles[props.size](props.theme)]; });
|
|
19197
19192
|
var Input$1 = newStyled.input(templateObject_2$D || (templateObject_2$D = __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) {
|
|
19198
19193
|
var disabled = _a.disabled;
|
|
@@ -19218,7 +19213,7 @@ var ClubRadioInput = function (_a) {
|
|
|
19218
19213
|
};
|
|
19219
19214
|
return (jsxRuntime.jsxs(Wrapper$2, { children: [jsxRuntime.jsxs(Container$C, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsxRuntime.jsx(Input$1, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled, style: style }, void 0), jsxRuntime.jsx(CustomRadio, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), jsxRuntime.jsx(StyledLabel, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled, "aria-checked": checked }, { children: label }), void 0)] }, void 0));
|
|
19220
19215
|
};
|
|
19221
|
-
var templateObject_1$
|
|
19216
|
+
var templateObject_1$R, templateObject_2$D, templateObject_3$A;
|
|
19222
19217
|
|
|
19223
19218
|
var ClubRadioGroupInput = function (_a) {
|
|
19224
19219
|
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;
|
|
@@ -19246,7 +19241,7 @@ function formatDate(date, format) {
|
|
|
19246
19241
|
}
|
|
19247
19242
|
}
|
|
19248
19243
|
|
|
19249
|
-
var Container$B = newStyled.div(templateObject_1$
|
|
19244
|
+
var Container$B = newStyled.div(templateObject_1$Q || (templateObject_1$Q = __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"])));
|
|
19250
19245
|
var Content$1 = newStyled.div(templateObject_2$C || (templateObject_2$C = __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"])));
|
|
19251
19246
|
var StarsContent = newStyled.div(templateObject_3$z || (templateObject_3$z = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n"], ["\n display: flex;\n justify-content: space-between;\n"])));
|
|
19252
19247
|
var ReviewContainer$1 = newStyled.div(templateObject_4$s || (templateObject_4$s = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n margin-top: 15px;\n margin-bottom: 5px;\n\n @media (min-width: 768px) {\n margin-top: 10px;\n }\n"], ["\n display: flex;\n flex-direction: column;\n margin-top: 15px;\n margin-bottom: 5px;\n\n @media (min-width: 768px) {\n margin-top: 10px;\n }\n"])));
|
|
@@ -19254,7 +19249,7 @@ var DateText$1 = newStyled.span(templateObject_5$n || (templateObject_5$n = __ma
|
|
|
19254
19249
|
var ReviewerName$1 = newStyled.h1(templateObject_6$l || (templateObject_6$l = __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"])));
|
|
19255
19250
|
var VerifiedText = newStyled.h1(templateObject_7$j || (templateObject_7$j = __makeTemplateObject(["\n font-weight: 600;\n margin: 0;\n font-size: 18px;\n color: #1cc286;\n margin-left: 6px;\n\n @media (min-width: 768px) {\n font-size: 18px;\n }\n"], ["\n font-weight: 600;\n margin: 0;\n font-size: 18px;\n color: #1cc286;\n margin-left: 6px;\n\n @media (min-width: 768px) {\n font-size: 18px;\n }\n"])));
|
|
19256
19251
|
var ReviewTitle$1 = newStyled.h2(templateObject_8$e || (templateObject_8$e = __makeTemplateObject(["\n font-size: 18px;\n line-height: 20px;\n font-weight: 600;\n margin: 0;\n"], ["\n font-size: 18px;\n line-height: 20px;\n font-weight: 600;\n margin: 0;\n"])));
|
|
19257
|
-
var ReviewDescription = newStyled.div(templateObject_9$
|
|
19252
|
+
var ReviewDescription = newStyled.div(templateObject_9$9 || (templateObject_9$9 = __makeTemplateObject(["\n font-weight: normal;\n font-size: 16px;\n margin: 0;\n line-height: 25px;\n word-break: break-word;\n margin-top: 5px;\n white-space: pre-wrap;\n"], ["\n font-weight: normal;\n font-size: 16px;\n margin: 0;\n line-height: 25px;\n word-break: break-word;\n margin-top: 5px;\n white-space: pre-wrap;\n"])));
|
|
19258
19253
|
var ImageContainer$2 = newStyled.div(templateObject_10$8 || (templateObject_10$8 = __makeTemplateObject(["\n width: 100% !important;\n min-width: 100%;\n height: initial !important;\n min-height: 250px;\n background-size: contain !important;\n margin: 0 !important;\n line-height: 0;\n\n @media (min-width: 768px) {\n width: unset;\n min-width: 50%;\n max-width: 100%;\n background-color: #fff;\n display: inline-block;\n vertical-align: middle;\n max-height: calc(100vh - 100px);\n padding: 20px;\n }\n"], ["\n width: 100% !important;\n min-width: 100%;\n height: initial !important;\n min-height: 250px;\n background-size: contain !important;\n margin: 0 !important;\n line-height: 0;\n\n @media (min-width: 768px) {\n width: unset;\n min-width: 50%;\n max-width: 100%;\n background-color: #fff;\n display: inline-block;\n vertical-align: middle;\n max-height: calc(100vh - 100px);\n padding: 20px;\n }\n"])));
|
|
19259
19254
|
var ImageWrapper$4 = newStyled(Image$3)(templateObject_11$5 || (templateObject_11$5 = __makeTemplateObject(["\n width: 100%;\n min-width: 50%;\n max-width: 100%;\n background-color: #fff;\n display: inline-block;\n vertical-align: middle;\n max-height: calc(100vh - 100px);\n"], ["\n width: 100%;\n min-width: 50%;\n max-width: 100%;\n background-color: #fff;\n display: inline-block;\n vertical-align: middle;\n max-height: calc(100vh - 100px);\n"])));
|
|
19260
19255
|
var VideoWrapper = newStyled.video(templateObject_12$2 || (templateObject_12$2 = __makeTemplateObject(["\n width: 100%;\n min-width: 50%;\n max-width: 100%;\n background-color: #fff;\n display: inline-block;\n vertical-align: middle;\n max-height: calc(100vh - 100px);\n"], ["\n width: 100%;\n min-width: 50%;\n max-width: 100%;\n background-color: #fff;\n display: inline-block;\n vertical-align: middle;\n max-height: calc(100vh - 100px);\n"])));
|
|
@@ -19287,11 +19282,11 @@ var Review$1 = function (_a) {
|
|
|
19287
19282
|
return (jsxRuntime.jsx(Modal, __assign$1({ id: modalId, maxFullScreen: maxFullScreen, padding: "0" }, { children: jsxRuntime.jsxs(Container$B, { children: [jsxRuntime.jsx(CloseButton, __assign$1({ onClick: close }, { children: "X" }), void 0), jsxRuntime.jsx(ImageContainer$2, { children: image &&
|
|
19288
19283
|
(!isVideo ? (jsxRuntime.jsx(ImageWrapper$4, { 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));
|
|
19289
19284
|
};
|
|
19290
|
-
var templateObject_1$
|
|
19285
|
+
var templateObject_1$Q, templateObject_2$C, templateObject_3$z, templateObject_4$s, templateObject_5$n, templateObject_6$l, templateObject_7$j, templateObject_8$e, templateObject_9$9, templateObject_10$8, templateObject_11$5, templateObject_12$2, templateObject_13$2, templateObject_14$2, templateObject_15$1, templateObject_16$1, templateObject_17$1, templateObject_18$1, templateObject_19$1, templateObject_20, templateObject_21, templateObject_22, templateObject_23;
|
|
19291
19286
|
|
|
19292
19287
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_DESKTOP = 500;
|
|
19293
19288
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_MOBILE = 168;
|
|
19294
|
-
var Container$A = newStyled.div(templateObject_1$
|
|
19289
|
+
var Container$A = newStyled.div(templateObject_1$P || (templateObject_1$P = __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"])));
|
|
19295
19290
|
var Heading = newStyled.div(templateObject_2$B || (templateObject_2$B = __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"])));
|
|
19296
19291
|
var Content = newStyled.div(templateObject_3$y || (templateObject_3$y = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n"], ["\n display: flex;\n justify-content: space-between;\n"])));
|
|
19297
19292
|
var ReviewContainer = newStyled.div(templateObject_4$r || (templateObject_4$r = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
@@ -19299,7 +19294,7 @@ var DateText = newStyled.span(templateObject_5$m || (templateObject_5$m = __make
|
|
|
19299
19294
|
var VariantText = newStyled.div(templateObject_6$k || (templateObject_6$k = __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"])));
|
|
19300
19295
|
var ReviewerName = newStyled.h2(templateObject_7$i || (templateObject_7$i = __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"])));
|
|
19301
19296
|
var ReviewTitle = newStyled.h3(templateObject_8$d || (templateObject_8$d = __makeTemplateObject(["\n font-size: 14px;\n line-height: 22px;\n margin: 10px 0 8px;\n font-weight: 600;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"], ["\n font-size: 14px;\n line-height: 22px;\n margin: 10px 0 8px;\n font-weight: 600;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"])));
|
|
19302
|
-
var ReviewDescriptionDesktop = newStyled.div(templateObject_9$
|
|
19297
|
+
var ReviewDescriptionDesktop = newStyled.div(templateObject_9$8 || (templateObject_9$8 = __makeTemplateObject(["\n display: none;\n\n @media (min-width: 768px) {\n display: block;\n font-weight: normal;\n font-size: 16px;\n line-height: 24px;\n margin: 0;\n white-space: pre-wrap;\n\n a.see-more {\n color: var(--colors-semantic-informative-color);\n text-decoration: underline;\n cursor: pointer;\n font-weight: 600;\n white-space: nowrap;\n }\n }\n"], ["\n display: none;\n\n @media (min-width: 768px) {\n display: block;\n font-weight: normal;\n font-size: 16px;\n line-height: 24px;\n margin: 0;\n white-space: pre-wrap;\n\n a.see-more {\n color: var(--colors-semantic-informative-color);\n text-decoration: underline;\n cursor: pointer;\n font-weight: 600;\n white-space: nowrap;\n }\n }\n"])));
|
|
19303
19298
|
var ReviewDescriptionMobile = newStyled.div(templateObject_10$7 || (templateObject_10$7 = __makeTemplateObject(["\n font-weight: normal;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n\n a.see-more {\n color: var(--colors-semantic-informative-color);\n text-decoration: underline;\n cursor: pointer;\n font-weight: 600;\n white-space: nowrap;\n }\n\n @media (min-width: 768px) {\n display: none;\n }\n"], ["\n font-weight: normal;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n\n a.see-more {\n color: var(--colors-semantic-informative-color);\n text-decoration: underline;\n cursor: pointer;\n font-weight: 600;\n white-space: nowrap;\n }\n\n @media (min-width: 768px) {\n display: none;\n }\n"])));
|
|
19304
19299
|
var ImagesContainer = newStyled.div(templateObject_11$4 || (templateObject_11$4 = __makeTemplateObject(["\n margin-left: 10px;\n text-align: right;\n"], ["\n margin-left: 10px;\n text-align: right;\n"])));
|
|
19305
19300
|
var Images = newStyled.div(templateObject_12$1 || (templateObject_12$1 = __makeTemplateObject(["\n display: flex;\n justify-content: end;\n"], ["\n display: flex;\n justify-content: end;\n"])));
|
|
@@ -19343,9 +19338,9 @@ var Review = function (_a) {
|
|
|
19343
19338
|
: description,
|
|
19344
19339
|
} }, 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$3, __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));
|
|
19345
19340
|
};
|
|
19346
|
-
var templateObject_1$
|
|
19341
|
+
var templateObject_1$P, templateObject_2$B, templateObject_3$y, templateObject_4$r, templateObject_5$m, templateObject_6$k, templateObject_7$i, templateObject_8$d, templateObject_9$8, templateObject_10$7, templateObject_11$4, templateObject_12$1, templateObject_13$1, templateObject_14$1, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19;
|
|
19347
19342
|
|
|
19348
|
-
var Container$z = newStyled.div(templateObject_1$
|
|
19343
|
+
var Container$z = newStyled.div(templateObject_1$O || (templateObject_1$O = __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"])));
|
|
19349
19344
|
var ReviewsContainer = newStyled.div(templateObject_2$A || (templateObject_2$A = __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"])));
|
|
19350
19345
|
var ReviewsCount = newStyled.div(templateObject_3$x || (templateObject_3$x = __makeTemplateObject(["\n display: block;\n\n @media (min-width: 768px) {\n display: flex;\n flex-direction: column;\n }\n"], ["\n display: block;\n\n @media (min-width: 768px) {\n display: flex;\n flex-direction: column;\n }\n"])));
|
|
19351
19346
|
var ReviewsStars = newStyled.div(templateObject_4$q || (templateObject_4$q = __makeTemplateObject(["\n display: flex;\n margin-bottom: 10px;\n\n @media (min-width: 768px) {\n margin-bottom: 0;\n }\n"], ["\n display: flex;\n margin-bottom: 10px;\n\n @media (min-width: 768px) {\n margin-bottom: 0;\n }\n"])));
|
|
@@ -19361,9 +19356,9 @@ var ReviewsHeader = function (_a) {
|
|
|
19361
19356
|
var theme = useTheme();
|
|
19362
19357
|
return (jsxRuntime.jsxs(Container$z, { children: [jsxRuntime.jsx(Text$7, __assign$1({ variant: "heading3", weight: "bold", style: { margin: '10px 0' } }, { children: title }), void 0), jsxRuntime.jsxs(ReviewsContainer, { children: [jsxRuntime.jsxs(ReviewsCount, { children: [jsxRuntime.jsxs(ReviewsStars, { children: [jsxRuntime.jsx(ReviewsTextCount, __assign$1({ variant: "heading3", weight: "bold" }, { children: rating }), void 0), jsxRuntime.jsx(StarList, { rating: rating, size: exports.ComponentSize.Medium, starsNumber: starsNumber, fill: theme.component.stars.element.color }, void 0)] }, void 0), jsxRuntime.jsxs(Text$7, __assign$1({ variant: "body", size: "small", weight: "regular", style: { marginBottom: '20px' } }, { children: [reviews, " ", reviewsText] }), void 0)] }, void 0), jsxRuntime.jsx(ReviewsImages, { children: reviewsSummary.map(function (summaryItem) { return (jsxRuntime.jsx(SummaryItem, { onClick: function () { return onClickReview(summaryItem); }, backgroundUrl: summaryItem, "data-testid": "summary-review-item" }, summaryItem)); }) }, void 0)] }, void 0)] }, void 0));
|
|
19363
19358
|
};
|
|
19364
|
-
var templateObject_1$
|
|
19359
|
+
var templateObject_1$O, templateObject_2$A, templateObject_3$x, templateObject_4$q, templateObject_5$l, templateObject_6$j, templateObject_7$h;
|
|
19365
19360
|
|
|
19366
|
-
var Container$y = newStyled.div(templateObject_1$
|
|
19361
|
+
var Container$y = newStyled.div(templateObject_1$N || (templateObject_1$N = __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"])));
|
|
19367
19362
|
var Text$1 = newStyled.p(templateObject_2$z || (templateObject_2$z = __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; });
|
|
19368
19363
|
var ScrollToTop = function (_a) {
|
|
19369
19364
|
var scrollToTopText = _a.scrollToTopText, onClick = _a.onClick, fill = _a.fill, _b = _a.Icon, Icon$1 = _b === void 0 ? Icon.Arrows.CircleChevronUp : _b;
|
|
@@ -19371,13 +19366,13 @@ var ScrollToTop = function (_a) {
|
|
|
19371
19366
|
var fillValue = fill || theme.colors.pallete.primary.color;
|
|
19372
19367
|
return (jsxRuntime.jsxs(Container$y, __assign$1({ onClick: onClick, "data-testid": "scrollTopContainer" }, { children: [jsxRuntime.jsx(Text$1, __assign$1({ color: theme.colors.shades['700'].color }, { children: scrollToTopText }), void 0), jsxRuntime.jsx(Icon$1, { width: 1.375, height: 1.375, fill: fillValue }, void 0)] }), void 0));
|
|
19373
19368
|
};
|
|
19374
|
-
var templateObject_1$
|
|
19369
|
+
var templateObject_1$N, templateObject_2$z;
|
|
19375
19370
|
|
|
19376
|
-
var Button$5 = newStyled.button(templateObject_1$
|
|
19371
|
+
var Button$5 = newStyled.button(templateObject_1$M || (templateObject_1$M = __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({
|
|
19377
19372
|
right: ['1rem', '7.75rem'],
|
|
19378
19373
|
top: ['0.75rem', '0.75rem'],
|
|
19379
19374
|
}));
|
|
19380
|
-
var templateObject_1$
|
|
19375
|
+
var templateObject_1$M;
|
|
19381
19376
|
|
|
19382
19377
|
var ClearButton = function (_a) {
|
|
19383
19378
|
var onClick = _a.onClick;
|
|
@@ -19396,7 +19391,7 @@ var Footer = function (_a) {
|
|
|
19396
19391
|
return (jsxRuntime.jsx(Container$x, { children: jsxRuntime.jsx(Text$7, __assign$1({ variant: "link", size: "regular", underline: true, onClick: onClick }, { children: text }), void 0) }, void 0));
|
|
19397
19392
|
};
|
|
19398
19393
|
|
|
19399
|
-
var Container$w = newStyled.div(templateObject_1$
|
|
19394
|
+
var Container$w = newStyled.div(templateObject_1$L || (templateObject_1$L = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n width: auto;\n padding: 0.688rem 0rem;\n ", "\n"], ["\n display: flex;\n flex-direction: row;\n width: auto;\n padding: 0.688rem 0rem;\n ", "\n"])), mediaQueries({
|
|
19400
19395
|
borderTop: ['0.063rem solid var(--colors-shades-100-color)', 'none'],
|
|
19401
19396
|
}));
|
|
19402
19397
|
var Description = newStyled.div({
|
|
@@ -19410,7 +19405,7 @@ var Description = newStyled.div({
|
|
|
19410
19405
|
textAlign: 'start',
|
|
19411
19406
|
},
|
|
19412
19407
|
});
|
|
19413
|
-
var templateObject_1$
|
|
19408
|
+
var templateObject_1$L;
|
|
19414
19409
|
|
|
19415
19410
|
var ProductItem = function (_a) {
|
|
19416
19411
|
var _b;
|
|
@@ -19423,7 +19418,7 @@ var OptionsList = newStyled.ul({
|
|
|
19423
19418
|
margin: '0px',
|
|
19424
19419
|
padding: '0px',
|
|
19425
19420
|
});
|
|
19426
|
-
var OptionItem = newStyled.li(templateObject_1$
|
|
19421
|
+
var OptionItem = newStyled.li(templateObject_1$K || (templateObject_1$K = __makeTemplateObject(["\n width: 100%;\n cursor: pointer;\n list-style-type: none;\n box-sizing: border-box;\n &:hover {\n background-color: ", ";\n }\n ", "\n"], ["\n width: 100%;\n cursor: pointer;\n list-style-type: none;\n box-sizing: border-box;\n &:hover {\n background-color: ", ";\n }\n ", "\n"])), function (props) { return props.theme.colors.shades['100'].color; }, mediaQueries({
|
|
19427
19422
|
padding: [0, '0rem 1rem'],
|
|
19428
19423
|
borderRadius: [0, '0.5rem'],
|
|
19429
19424
|
}));
|
|
@@ -19443,7 +19438,7 @@ var Container$v = newStyled.div(templateObject_2$y || (templateObject_2$y = __ma
|
|
|
19443
19438
|
var Header$2 = newStyled.div(templateObject_3$w || (templateObject_3$w = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), mediaQueries({
|
|
19444
19439
|
margin: ['0rem 0rem 1rem 0rem', '1rem'],
|
|
19445
19440
|
}));
|
|
19446
|
-
var templateObject_1$
|
|
19441
|
+
var templateObject_1$K, templateObject_2$y, templateObject_3$w;
|
|
19447
19442
|
|
|
19448
19443
|
var ResultsPanel = function (_a) {
|
|
19449
19444
|
var options = _a.options, header = _a.header, footer = _a.footer, onViewAll = _a.onViewAll, testId = _a.testId;
|
|
@@ -19462,8 +19457,8 @@ var SearchIconContainer = newStyled.div({
|
|
|
19462
19457
|
background: 'white',
|
|
19463
19458
|
alignSelf: 'center',
|
|
19464
19459
|
});
|
|
19465
|
-
var StyledButton$2 = newStyled(ButtonSecondary)(templateObject_1$
|
|
19466
|
-
var templateObject_1$
|
|
19460
|
+
var StyledButton$2 = newStyled(ButtonSecondary)(templateObject_1$J || (templateObject_1$J = __makeTemplateObject(["\n position: absolute;\n right: 0;\n height: 100%;\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n padding: 0.875rem 1.5rem;\n"], ["\n position: absolute;\n right: 0;\n height: 100%;\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n padding: 0.875rem 1.5rem;\n"])));
|
|
19461
|
+
var templateObject_1$J;
|
|
19467
19462
|
|
|
19468
19463
|
var SearchControl = function (_a) {
|
|
19469
19464
|
var open = _a.open, onSearch = _a.onSearch, onClose = _a.onClose, _b = _a.showSearchIcon, showSearchIcon = _b === void 0 ? false : _b;
|
|
@@ -19575,12 +19570,12 @@ var SearchBar = function (_a) {
|
|
|
19575
19570
|
} }, void 0), jsxRuntime.jsx(SearchControl, { showSearchIcon: isBlogSearchBar, open: state.open, onClose: handleOnClose, onSearch: function () { return onSearch(state.term); } }, void 0)] }), void 0), state.open && !!options.length && (jsxRuntime.jsx(ResultsPanel, { testId: resultsPanelDataTestId, options: options, header: shouldDisplaySuggestion() ? 'Most popular products' : undefined, footer: allResults ? "View all results (".concat(allResults, ")") : undefined, onViewAll: function () { return onSearch(state.term); } }, void 0))] }), void 0));
|
|
19576
19571
|
};
|
|
19577
19572
|
|
|
19578
|
-
var Container$t = newStyled.div(templateObject_1$
|
|
19573
|
+
var Container$t = newStyled.div(templateObject_1$I || (templateObject_1$I = __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"])));
|
|
19579
19574
|
var BackArrow = newStyled.div(templateObject_2$x || (templateObject_2$x = __makeTemplateObject(["\n transform: rotate(180deg);\n margin-right: 0.5rem;\n"], ["\n transform: rotate(180deg);\n margin-right: 0.5rem;\n"])));
|
|
19580
19575
|
var BoldSpan = newStyled.span(templateObject_3$v || (templateObject_3$v = __makeTemplateObject(["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 600;\n"], ["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 600;\n"])));
|
|
19581
19576
|
var NormalSpan = newStyled.span(templateObject_4$p || (templateObject_4$p = __makeTemplateObject(["\n font-size: 0.875rem;\n line-height: 1.375rem;\n white-space: pre;\n"], ["\n font-size: 0.875rem;\n line-height: 1.375rem;\n white-space: pre;\n"])));
|
|
19582
19577
|
var SearchNavigationParents = newStyled.div(templateObject_5$k || (templateObject_5$k = __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"])));
|
|
19583
|
-
var templateObject_1$
|
|
19578
|
+
var templateObject_1$I, templateObject_2$x, templateObject_3$v, templateObject_4$p, templateObject_5$k;
|
|
19584
19579
|
|
|
19585
19580
|
var SearchNavigation = function (_a) {
|
|
19586
19581
|
var returnText = _a.returnText, returnUrl = _a.returnUrl, _b = _a.steps, steps = _b === void 0 ? [] : _b, returnAction = _a.returnAction;
|
|
@@ -19589,7 +19584,7 @@ var SearchNavigation = function (_a) {
|
|
|
19589
19584
|
}) }, void 0)] }, void 0));
|
|
19590
19585
|
};
|
|
19591
19586
|
|
|
19592
|
-
var Container$s = newStyled.div(templateObject_1$
|
|
19587
|
+
var Container$s = newStyled.div(templateObject_1$H || (templateObject_1$H = __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) {
|
|
19593
19588
|
var alignCenter = _a.alignCenter;
|
|
19594
19589
|
return alignCenter &&
|
|
19595
19590
|
"\n justify-content: center;\n align-items: center;\n text-align: center;\n ";
|
|
@@ -19606,9 +19601,9 @@ var ShortBanner = function (_a) {
|
|
|
19606
19601
|
var theme = useTheme();
|
|
19607
19602
|
return (jsxRuntime.jsxs(Container$s, __assign$1({ backgroundColor: backgroundColor, alignCenter: alignCenter, widthAuto: widthAuto, "data-testid": "BannerContainer", theme: theme, textColor: textColor }, { children: [jsxRuntime.jsx(TitleText, { children: title }, void 0), jsxRuntime.jsx(BannerText, { children: bannerText }, void 0)] }), void 0));
|
|
19608
19603
|
};
|
|
19609
|
-
var templateObject_1$
|
|
19604
|
+
var templateObject_1$H, templateObject_2$w, templateObject_3$u;
|
|
19610
19605
|
|
|
19611
|
-
var TableElement$3 = newStyled.table(templateObject_1$
|
|
19606
|
+
var TableElement$3 = newStyled.table(templateObject_1$G || (templateObject_1$G = __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; });
|
|
19612
19607
|
var TableCell$3 = newStyled.td(templateObject_2$v || (templateObject_2$v = __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; });
|
|
19613
19608
|
var TableHead$3 = newStyled.th(templateObject_3$t || (templateObject_3$t = __makeTemplateObject(["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n font-weight: 700;\n line-height: normal;\n padding: 1rem;\n text-align: start;\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n text-align: center;\n }\n"], ["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n font-weight: 700;\n line-height: normal;\n padding: 1rem;\n text-align: start;\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n text-align: center;\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.borderColor; });
|
|
19614
19609
|
var Label$2 = newStyled('div')(templateObject_4$o || (templateObject_4$o = __makeTemplateObject(["\n gap: 15px;\n width: 100%;\n display: flex;\n font-size: 14px;\n font-weight: 600;\n align-items: center;\n justify-content: center;\n"], ["\n gap: 15px;\n width: 100%;\n display: flex;\n font-size: 14px;\n font-weight: 600;\n align-items: center;\n justify-content: center;\n"])));
|
|
@@ -19616,9 +19611,9 @@ var TopLabel$1 = newStyled(Label$2)(templateObject_5$j || (templateObject_5$j =
|
|
|
19616
19611
|
var LeftLabel$1 = newStyled(Label$2)(templateObject_6$i || (templateObject_6$i = __makeTemplateObject(["\n width: 20px;\n transform: rotate(270deg);\n"], ["\n width: 20px;\n transform: rotate(270deg);\n"])));
|
|
19617
19612
|
var Container$r = newStyled('div')(templateObject_7$g || (templateObject_7$g = __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"])));
|
|
19618
19613
|
var LabelText$1 = newStyled('span')(templateObject_8$c || (templateObject_8$c = __makeTemplateObject(["\n display: flex;\n min-width: 70px;\n justify-content: center;\n"], ["\n display: flex;\n min-width: 70px;\n justify-content: center;\n"])));
|
|
19619
|
-
var Column$2 = newStyled('div')(templateObject_9$
|
|
19614
|
+
var Column$2 = newStyled('div')(templateObject_9$7 || (templateObject_9$7 = __makeTemplateObject(["\n display: flex;\n min-width: 675px;\n align-items: center;\n flex-direction: column;\n\n @media (max-width: 768px) {\n min-width: 100%;\n }\n"], ["\n display: flex;\n min-width: 675px;\n align-items: center;\n flex-direction: column;\n\n @media (max-width: 768px) {\n min-width: 100%;\n }\n"])));
|
|
19620
19615
|
var TableRow$3 = newStyled.tr(templateObject_10$6 || (templateObject_10$6 = __makeTemplateObject(["\n &:last-child {\n td {\n border-bottom: none;\n }\n }\n\n &.background {\n background-color: ", ";\n }\n"], ["\n &:last-child {\n td {\n border-bottom: none;\n }\n }\n\n &.background {\n background-color: ", ";\n }\n"])), function (props) { return props.backgroundColor; });
|
|
19621
|
-
var templateObject_1$
|
|
19616
|
+
var templateObject_1$G, templateObject_2$v, templateObject_3$t, templateObject_4$o, templateObject_5$j, templateObject_6$i, templateObject_7$g, templateObject_8$c, templateObject_9$7, templateObject_10$6;
|
|
19622
19617
|
|
|
19623
19618
|
var getIsOdd$2 = function (number) { return number % 2 !== 0; };
|
|
19624
19619
|
var getCellColor$2 = function (index, cell) {
|
|
@@ -19659,7 +19654,7 @@ var SizeChartTable = function (_a) {
|
|
|
19659
19654
|
}, borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }, index)); }) }, void 0)) : (jsxRuntime.jsx("tbody", { children: tableContent === null || tableContent === void 0 ? void 0 : tableContent.map(function (row, index) { return (jsxRuntime.jsx(TableRow$3, __assign$1({ className: getIsOdd$2(index) ? 'background' : '', backgroundColor: theme.colors.shades['10'].color }, { children: row === null || row === void 0 ? void 0 : row.map(function (cell, index) { return (jsxRuntime.jsx(TableCell$3, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }), index)); }) }, void 0))] }), void 0)] }, void 0)] }, void 0));
|
|
19660
19655
|
};
|
|
19661
19656
|
|
|
19662
|
-
var TableElement$2 = newStyled.table(templateObject_1$
|
|
19657
|
+
var TableElement$2 = newStyled.table(templateObject_1$F || (templateObject_1$F = __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; });
|
|
19663
19658
|
var TableCell$2 = newStyled.td(templateObject_2$u || (templateObject_2$u = __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; });
|
|
19664
19659
|
var TableHead$2 = newStyled.th(templateObject_3$s || (templateObject_3$s = __makeTemplateObject(["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n font-weight: 700;\n\n &:last-child {\n border-right: none;\n }\n"], ["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n font-weight: 700;\n\n &:last-child {\n border-right: none;\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.borderColor; });
|
|
19665
19660
|
var TableRow$2 = newStyled.tr(templateObject_4$n || (templateObject_4$n = __makeTemplateObject(["\n &:last-child {\n td {\n border-bottom: none;\n }\n }\n\n &.background {\n background-color: ", ";\n }\n"], ["\n &:last-child {\n td {\n border-bottom: none;\n }\n }\n\n &.background {\n background-color: ", ";\n }\n"])), function (props) { return props.backgroundColor; });
|
|
@@ -19668,7 +19663,7 @@ var SizeTable = function (_a) {
|
|
|
19668
19663
|
var theme = useTheme();
|
|
19669
19664
|
return (jsxRuntime.jsxs(TableElement$2, __assign$1({ color: theme.colors.shades['700'].color, borderColor: theme.colors.shades['100'].color, className: className }, { children: [jsxRuntime.jsx("thead", { children: jsxRuntime.jsx(TableRow$2, __assign$1({ backgroundColor: theme.colors.shades['10'].color }, { children: headers.map(function (header, index) { return (jsxRuntime.jsx(TableHead$2, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: header }), index)); }) }), void 0) }, void 0), jsxRuntime.jsx("tbody", { children: data.map(function (row, index) { return (jsxRuntime.jsx(TableRow$2, __assign$1({ className: index % 2 !== 0 ? '' : 'background', backgroundColor: theme.colors.shades['10'].color }, { children: row.map(function (cell, index) { return (jsxRuntime.jsx(TableCell$2, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }), index)); }) }, void 0)] }), void 0));
|
|
19670
19665
|
};
|
|
19671
|
-
var templateObject_1$
|
|
19666
|
+
var templateObject_1$F, templateObject_2$u, templateObject_3$s, templateObject_4$n;
|
|
19672
19667
|
|
|
19673
19668
|
var getStylesBySize$7 = function (size) {
|
|
19674
19669
|
switch (size) {
|
|
@@ -19695,7 +19690,7 @@ var textButtonStyles = function (theme, size) {
|
|
|
19695
19690
|
} });
|
|
19696
19691
|
};
|
|
19697
19692
|
var withContainer = function (iconFill, isLeading, Icon) {
|
|
19698
|
-
return Icon && (jsx("span", __assign$1({ css: css(templateObject_1$
|
|
19693
|
+
return Icon && (jsx("span", __assign$1({ css: css(templateObject_1$E || (templateObject_1$E = __makeTemplateObject(["\n display: flex;\n align-items: center;\n ", "\n "], ["\n display: flex;\n align-items: center;\n ", "\n "])), isLeading ? 'margin-right: 5px' : 'margin-left: 5px') }, { children: jsx(Icon, { width: 1.25, height: 1.25, fill: iconFill }, void 0) }), void 0));
|
|
19699
19694
|
};
|
|
19700
19695
|
var getIconFill = function (theme, disabled, iconColor) {
|
|
19701
19696
|
if (disabled)
|
|
@@ -19711,23 +19706,23 @@ var TextButton = function (_a) {
|
|
|
19711
19706
|
var iconFill = getIconFill(theme, disabled, iconColor);
|
|
19712
19707
|
return (jsx(BaseButton, __assign$1({ renderLeading: withContainer(iconFill, true, LeadingIcon), renderTrailing: withContainer(iconFill, false, TrailingIcon), disabled: disabled, type: type, onClick: onClick, css: textButtonStyles(theme, size), uppercase: uppercase, testId: testId }, { children: text }), void 0));
|
|
19713
19708
|
};
|
|
19714
|
-
var templateObject_1$
|
|
19709
|
+
var templateObject_1$E;
|
|
19715
19710
|
|
|
19716
|
-
var Container$q = newStyled.div(templateObject_1$
|
|
19711
|
+
var Container$q = newStyled.div(templateObject_1$D || (templateObject_1$D = __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"])));
|
|
19717
19712
|
var P = newStyled.p(templateObject_2$t || (templateObject_2$t = __makeTemplateObject(["\n margin: 0 0 0 10px;\n"], ["\n margin: 0 0 0 10px;\n"])));
|
|
19718
19713
|
var PercentageSpan = newStyled.span(templateObject_3$r || (templateObject_3$r = __makeTemplateObject(["\n font-weight: 700;\n text-decoration-line: underline;\n cursor: pointer;\n"], ["\n font-weight: 700;\n text-decoration-line: underline;\n cursor: pointer;\n"])));
|
|
19719
19714
|
var SizeFitGuide = function (_a) {
|
|
19720
19715
|
var title = _a.title, fitPercentage = _a.fitPercentage, onClick = _a.onClick, onClickFitPercentage = _a.onClickFitPercentage, _b = _a.hideIcon, hideIcon = _b === void 0 ? false : _b;
|
|
19721
19716
|
return (jsxRuntime.jsxs(Container$q, { children: [jsxRuntime.jsx(TextButton, { LeadingIcon: hideIcon ? undefined : Icon.PDP.Rule, size: exports.ComponentSize.Small, text: title, onClick: onClick, uppercase: false }, void 0), !!fitPercentage && (jsxRuntime.jsxs(P, { children: ["Fit As Expected:", ' ', jsxRuntime.jsxs(PercentageSpan, __assign$1({ onClick: onClickFitPercentage, role: "button" }, { children: [fitPercentage, "%"] }), void 0)] }, void 0))] }, void 0));
|
|
19722
19717
|
};
|
|
19723
|
-
var templateObject_1$
|
|
19718
|
+
var templateObject_1$D, templateObject_2$t, templateObject_3$r;
|
|
19724
19719
|
|
|
19725
|
-
var ButtonsContainer = newStyled.div(templateObject_1$
|
|
19720
|
+
var ButtonsContainer = newStyled.div(templateObject_1$C || (templateObject_1$C = __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) {
|
|
19726
19721
|
var inline = _a.inline;
|
|
19727
19722
|
return (inline ? '0 0 0 10px' : '8px 0 0 0');
|
|
19728
19723
|
});
|
|
19729
19724
|
var Row = newStyled.div(templateObject_2$s || (templateObject_2$s = __makeTemplateObject(["\n gap: 5px;\n display: flex;\n margin: 8px 0 0;\n flex-wrap: wrap;\n\n & button {\n font-weight: 600;\n }\n"], ["\n gap: 5px;\n display: flex;\n margin: 8px 0 0;\n flex-wrap: wrap;\n\n & button {\n font-weight: 600;\n }\n"])));
|
|
19730
|
-
var templateObject_1$
|
|
19725
|
+
var templateObject_1$C, templateObject_2$s;
|
|
19731
19726
|
|
|
19732
19727
|
var SizeSelector = function (_a) {
|
|
19733
19728
|
var _b;
|
|
@@ -19749,7 +19744,7 @@ var SizeSelector = function (_a) {
|
|
|
19749
19744
|
}) }), void 0)] }), void 0));
|
|
19750
19745
|
};
|
|
19751
19746
|
|
|
19752
|
-
var TabContainer = newStyled.div(templateObject_1$
|
|
19747
|
+
var TabContainer = newStyled.div(templateObject_1$B || (templateObject_1$B = __makeTemplateObject(["\n display: flex;\n justify-content: center;\n align-content: center;\n flex-direction: column;\n flex: 1 1 0;\n font-size: ", ";\n height: ", ";\n margin: 0 auto;\n text-align: center;\n cursor: pointer;\n transition: all 0.2s;\n max-width: ", ";\n border: none;\n\n ", "\n"], ["\n display: flex;\n justify-content: center;\n align-content: center;\n flex-direction: column;\n flex: 1 1 0;\n font-size: ", ";\n height: ", ";\n margin: 0 auto;\n text-align: center;\n cursor: pointer;\n transition: all 0.2s;\n max-width: ", ";\n border: none;\n\n ", "\n"])), function (_a) {
|
|
19753
19748
|
var titleSize = _a.titleSize;
|
|
19754
19749
|
return titleSize;
|
|
19755
19750
|
}, function (_a) {
|
|
@@ -19766,9 +19761,9 @@ var Tab = function (_a) {
|
|
|
19766
19761
|
var title = _a.title, _b = _a.titleSize, titleSize = _b === void 0 ? '14px' : _b, _c = _a.height, height = _c === void 0 ? '4.5rem' : _c, _d = _a.selectedTitleWeight, selectedTitleWeight = _d === void 0 ? 700 : _d, selected = _a.selected, onClick = _a.onClick, _e = _a.color, color = _e === void 0 ? 'var(--colors-pallete-primary-color)' : _e, _f = _a.tabsMaxWidth, tabsMaxWidth = _f === void 0 ? '11rem' : _f;
|
|
19767
19762
|
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(TabContainer, __assign$1({ selected: selected, onClick: function () { return onClick(title); }, color: color, titleSize: titleSize, height: height, selectedTitleWeight: selectedTitleWeight, tabsMaxWidth: tabsMaxWidth }, { children: title }), title) }, void 0));
|
|
19768
19763
|
};
|
|
19769
|
-
var templateObject_1$
|
|
19764
|
+
var templateObject_1$B;
|
|
19770
19765
|
|
|
19771
|
-
var Container$p = newStyled.div(templateObject_1$
|
|
19766
|
+
var Container$p = newStyled.div(templateObject_1$A || (templateObject_1$A = __makeTemplateObject(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
|
|
19772
19767
|
var TabList = newStyled.div(templateObject_2$r || (templateObject_2$r = __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) {
|
|
19773
19768
|
var backgroundColor = _a.backgroundColor;
|
|
19774
19769
|
return backgroundColor;
|
|
@@ -19788,14 +19783,14 @@ var Tabs = function (_a) {
|
|
|
19788
19783
|
var selectedContent = (_b = tabs.find(function (tab) { return tab.title === selectedTab; })) === null || _b === void 0 ? void 0 : _b.content;
|
|
19789
19784
|
return (jsxRuntime.jsxs(Container$p, __assign$1({ "data-testid": "tabs-container" }, { children: [jsxRuntime.jsx(TabList, __assign$1({ backgroundColor: backgroundColor, borderColor: fixedBorderColor }, { children: tabs.map(function (tab, index) { return (jsxRuntime.jsxs(React__default["default"].Fragment, { children: [jsxRuntime.jsx(Tab, { title: tab.title, selected: selectedTab === tab.title, onClick: setSelectedTab, tabsMaxWidth: tabsMaxWidth, color: selectedBorderColor }, tab.title), index + 1 < tabs.length && jsxRuntime.jsx(TabSeparator, { children: "|" }, void 0)] }, tab.title)); }) }), void 0), jsxRuntime.jsx(TabContent, __assign$1({ "data-testid": "tab-content" }, { children: selectedContent }), void 0)] }), void 0));
|
|
19790
19785
|
};
|
|
19791
|
-
var templateObject_1$
|
|
19786
|
+
var templateObject_1$A, templateObject_2$r, templateObject_3$q, templateObject_4$m;
|
|
19792
19787
|
|
|
19793
|
-
var Container$o = newStyled.div(templateObject_1$
|
|
19788
|
+
var Container$o = newStyled.div(templateObject_1$z || (templateObject_1$z = __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"])));
|
|
19794
19789
|
var Tag = function (_a) {
|
|
19795
19790
|
var text = _a.text, className = _a.className;
|
|
19796
19791
|
return jsxRuntime.jsx(Container$o, __assign$1({ className: className }, { children: text }), void 0);
|
|
19797
19792
|
};
|
|
19798
|
-
var templateObject_1$
|
|
19793
|
+
var templateObject_1$z;
|
|
19799
19794
|
|
|
19800
19795
|
var getStylesBySize$6 = function (size, styledBorder) {
|
|
19801
19796
|
switch (size) {
|
|
@@ -19908,7 +19903,7 @@ var SeasonOfferRoundedTag = function (_a) {
|
|
|
19908
19903
|
return (jsx(Tag, { css: __assign$1({ backgroundColor: backgroundColor, fontWeight: 700, color: '#FFFFFF', textAlign: 'center', borderRadius: '50%' }, stylesBySize), text: text, className: className }, void 0));
|
|
19909
19904
|
};
|
|
19910
19905
|
|
|
19911
|
-
var ImageWrapper$2 = newStyled.div(templateObject_1$
|
|
19906
|
+
var ImageWrapper$2 = newStyled.div(templateObject_1$y || (templateObject_1$y = __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"])));
|
|
19912
19907
|
var VideoOverlay$1 = newStyled.div(templateObject_2$q || (templateObject_2$q = __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"])));
|
|
19913
19908
|
var FullscreenVideo = newStyled.div(templateObject_3$p || (templateObject_3$p = __makeTemplateObject(["\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.7);\n z-index: 9999;\n"], ["\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.7);\n z-index: 9999;\n"])));
|
|
19914
19909
|
var ImageVideo = function (_a) {
|
|
@@ -19930,9 +19925,9 @@ var ImageVideo = function (_a) {
|
|
|
19930
19925
|
height: '100%',
|
|
19931
19926
|
} }, void 0)] }, void 0))] }, void 0));
|
|
19932
19927
|
};
|
|
19933
|
-
var templateObject_1$
|
|
19928
|
+
var templateObject_1$y, templateObject_2$q, templateObject_3$p;
|
|
19934
19929
|
|
|
19935
|
-
var ContainerDesktop = css(templateObject_1$
|
|
19930
|
+
var ContainerDesktop = css(templateObject_1$x || (templateObject_1$x = __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"])));
|
|
19936
19931
|
var ContainerMobile = css(templateObject_2$p || (templateObject_2$p = __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"])));
|
|
19937
19932
|
var Container$n = newStyled.div(templateObject_3$o || (templateObject_3$o = __makeTemplateObject(["\n padding: 60px 34px 40px 34px;\n display: flex;\n @media (min-width: 769px) {\n ", "\n }\n @media (max-width: 768px) {\n ", "\n }\n"], ["\n padding: 60px 34px 40px 34px;\n display: flex;\n @media (min-width: 769px) {\n ", "\n }\n @media (max-width: 768px) {\n ", "\n }\n"])), ContainerDesktop, ContainerMobile);
|
|
19938
19933
|
var TextContainer = newStyled.div(templateObject_4$l || (templateObject_4$l = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 0 15px;\n gap: 24px;\n text-align: center;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 0 15px;\n gap: 24px;\n text-align: center;\n"])));
|
|
@@ -19965,11 +19960,11 @@ var TextWithImage = function (_a) {
|
|
|
19965
19960
|
},
|
|
19966
19961
|
} }, 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));
|
|
19967
19962
|
};
|
|
19968
|
-
var templateObject_1$
|
|
19963
|
+
var templateObject_1$x, templateObject_2$p, templateObject_3$o, templateObject_4$l;
|
|
19969
19964
|
|
|
19970
19965
|
var slideInAnimation = function (distanceFromTop) {
|
|
19971
19966
|
if (distanceFromTop === void 0) { distanceFromTop = '124px'; }
|
|
19972
|
-
return keyframes(templateObject_1$
|
|
19967
|
+
return keyframes(templateObject_1$w || (templateObject_1$w = __makeTemplateObject(["\n from {\n top: 0;\n }\n to {\n top: ", ";\n }\n"], ["\n from {\n top: 0;\n }\n to {\n top: ", ";\n }\n"])), distanceFromTop);
|
|
19973
19968
|
};
|
|
19974
19969
|
var mobileSlideInAnimation = function (distanceFromTop) {
|
|
19975
19970
|
if (distanceFromTop === void 0) { distanceFromTop = '85px'; }
|
|
@@ -19994,7 +19989,7 @@ var ToastText = newStyled.p(templateObject_5$i || (templateObject_5$i = __makeTe
|
|
|
19994
19989
|
return (severity === 'error' ? '#C64844' : '#292929');
|
|
19995
19990
|
});
|
|
19996
19991
|
var CloseIcon = newStyled.div(templateObject_6$h || (templateObject_6$h = __makeTemplateObject(["\n margin-inline-start: auto;\n cursor: pointer;\n"], ["\n margin-inline-start: auto;\n cursor: pointer;\n"])));
|
|
19997
|
-
var templateObject_1$
|
|
19992
|
+
var templateObject_1$w, templateObject_2$o, templateObject_3$n, templateObject_4$k, templateObject_5$i, templateObject_6$h;
|
|
19998
19993
|
|
|
19999
19994
|
var Toast = React__default["default"].forwardRef(function (_a, ref) {
|
|
20000
19995
|
var _b;
|
|
@@ -20016,7 +20011,7 @@ var Toast = React__default["default"].forwardRef(function (_a, ref) {
|
|
|
20016
20011
|
});
|
|
20017
20012
|
Toast.displayName = 'Toast';
|
|
20018
20013
|
|
|
20019
|
-
var Wrapper$1 = newStyled.div(templateObject_1$
|
|
20014
|
+
var Wrapper$1 = newStyled.div(templateObject_1$v || (templateObject_1$v = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n"])));
|
|
20020
20015
|
var GrandTotal = newStyled.h1(templateObject_2$n || (templateObject_2$n = __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; });
|
|
20021
20016
|
var Currency = newStyled.span(templateObject_3$m || (templateObject_3$m = __makeTemplateObject(["\n margin: 0;\n margin-right: 0.625rem;\n font-weight: 600;\n color: ", ";\n font-size: ", ";\n line-height: ", ";\n align-self: ", ";\n"], ["\n margin: 0;\n margin-right: 0.625rem;\n font-weight: 600;\n color: ", ";\n font-size: ", ";\n line-height: ", ";\n align-self: ", ";\n"])), function (_a) {
|
|
20022
20017
|
var theme = _a.theme;
|
|
@@ -20045,7 +20040,7 @@ var DiscountAmount = newStyled.h3(templateObject_7$f || (templateObject_7$f = __
|
|
|
20045
20040
|
return theme.component.total.basicTotal.savings.amountFontWeight;
|
|
20046
20041
|
});
|
|
20047
20042
|
var TotalLabel = newStyled(Text$7)(templateObject_8$b || (templateObject_8$b = __makeTemplateObject(["\n font-size: 20px;\n"], ["\n font-size: 20px;\n"])));
|
|
20048
|
-
var templateObject_1$
|
|
20043
|
+
var templateObject_1$v, templateObject_2$n, templateObject_3$m, templateObject_4$j, templateObject_5$h, templateObject_6$g, templateObject_7$f, templateObject_8$b;
|
|
20049
20044
|
|
|
20050
20045
|
var Total = function (_a) {
|
|
20051
20046
|
var total = _a.total, currency = _a.currency, saving = _a.saving, _b = _a.highlightColor, highlightColor = _b === void 0 ? '#2f806a' : _b, _c = _a.showTotalLabel, showTotalLabel = _c === void 0 ? false : _c;
|
|
@@ -20053,7 +20048,7 @@ var Total = function (_a) {
|
|
|
20053
20048
|
return (jsxRuntime.jsxs(Wrapper$1, __assign$1({ "data-testid": "total-wrapper" }, { children: [jsxRuntime.jsxs(TotalContainer, __assign$1({ showTotalLabel: showTotalLabel }, { children: [showTotalLabel && (jsxRuntime.jsx(TotalLabel, __assign$1({ variant: "heading6", size: "regular", weight: "bold" }, { children: "Total" }), void 0)), jsxRuntime.jsxs(GrandTotal, __assign$1({ color: theme.component.total.basicTotal.amount.color, "data-testid": "total-price" }, { children: [jsxRuntime.jsx(Currency, { children: currency }, void 0), total] }), void 0)] }), void 0), saving && (jsxRuntime.jsxs(Container$m, __assign$1({ "data-testid": "subtotal-container", highlightColor: highlightColor }, { children: [jsxRuntime.jsx(DiscountText, __assign$1({ "data-testid": "saving-title" }, { children: saving.savingText }), void 0), jsxRuntime.jsx(DiscountAmount, __assign$1({ "data-testid": "saving-price" }, { children: saving.amount }), void 0)] }), void 0))] }), void 0));
|
|
20054
20049
|
};
|
|
20055
20050
|
|
|
20056
|
-
var Wrapper = newStyled.div(templateObject_1$
|
|
20051
|
+
var Wrapper = newStyled.div(templateObject_1$u || (templateObject_1$u = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
20057
20052
|
var color = _a.color;
|
|
20058
20053
|
return color;
|
|
20059
20054
|
});
|
|
@@ -20078,14 +20073,14 @@ var Subtotal = function (_a) {
|
|
|
20078
20073
|
return (jsxRuntime.jsxs(ItemContainer, { children: [jsxRuntime.jsxs(CouponItem, __assign$1({ color: highlightColor, "data-testid": "discount-title" }, { children: [coupon.couponText, " ", code, " ", coupon.appliedText] }), void 0), jsxRuntime.jsx(CouponItem, __assign$1({ color: highlightColor, "data-testid": "discount-price" }, { children: amount }), void 0)] }, code));
|
|
20079
20074
|
})] }), void 0));
|
|
20080
20075
|
};
|
|
20081
|
-
var templateObject_1$
|
|
20076
|
+
var templateObject_1$u, templateObject_2$m, templateObject_3$l, templateObject_4$i;
|
|
20082
20077
|
|
|
20083
20078
|
var Totals = {
|
|
20084
20079
|
Total: Total,
|
|
20085
20080
|
Subtotal: Subtotal,
|
|
20086
20081
|
};
|
|
20087
20082
|
|
|
20088
|
-
var Container$l = newStyled.div(templateObject_1$
|
|
20083
|
+
var Container$l = newStyled.div(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
20089
20084
|
var CheckpointContainer$1 = newStyled.div(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
20090
20085
|
var CheckpointDate$1 = newStyled.div(templateObject_3$k || (templateObject_3$k = __makeTemplateObject(["\n display: flex;\n justify-content: flex-start;\n flex-direction: column;\n padding-bottom: ", ";\n width: 60px;\n min-width: 60px;\n margin-right: 10px;\n"], ["\n display: flex;\n justify-content: flex-start;\n flex-direction: column;\n padding-bottom: ", ";\n width: 60px;\n min-width: 60px;\n margin-right: 10px;\n"])), function (props) { return props.currentSpace; });
|
|
20091
20086
|
var CheckpointDateLabel$1 = newStyled.p(templateObject_4$h || (templateObject_4$h = __makeTemplateObject(["\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n font-weight: ", ";\n"], ["\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n font-weight: ", ";\n"])), function (props) { return (props.lastElement ? '600' : '400'); });
|
|
@@ -20101,7 +20096,7 @@ var CheckpointStatusMessage = newStyled.span(templateObject_7$e || (templateObje
|
|
|
20101
20096
|
var ActiveCheckpointTrack$1 = newStyled.div(templateObject_8$a || (templateObject_8$a = __makeTemplateObject(["\n width: 13px;\n min-width: 13px;\n background-color: ", ";\n transform: ", ";\n position: relative;\n border-radius: ", ";\n margin-top: -1px;\n padding-bottom: ", ";\n margin-bottom: ", ";\n"], ["\n width: 13px;\n min-width: 13px;\n background-color: ", ";\n transform: ", ";\n position: relative;\n border-radius: ", ";\n margin-top: -1px;\n padding-bottom: ", ";\n margin-bottom: ", ";\n"])), function (props) { return props.trackColor; }, function (props) { return (props.firstElement ? 'translate(0, 22px)' : 'translate(0, 33px)'); }, function (props) {
|
|
20102
20097
|
return props.firstElement ? '8px 8px 0 0' : props.lastElement ? '0 0 8px 8px' : '';
|
|
20103
20098
|
}, function (props) { return (props.firstElement ? '20px' : '0'); }, function (props) { return (props.firstElement ? '-20px' : '0'); });
|
|
20104
|
-
var ActiveCheckpointDot$1 = newStyled.div(templateObject_9$
|
|
20099
|
+
var ActiveCheckpointDot$1 = newStyled.div(templateObject_9$6 || (templateObject_9$6 = __makeTemplateObject(["\n &:after {\n content: ' ';\n position: absolute;\n width: 13px;\n height: 13px;\n background-color: #e5e5e5;\n z-index: 2;\n border-radius: 50%;\n transform: ", ";\n left: 0;\n }\n"], ["\n &:after {\n content: ' ';\n position: absolute;\n width: 13px;\n height: 13px;\n background-color: #e5e5e5;\n z-index: 2;\n border-radius: 50%;\n transform: ", ";\n left: 0;\n }\n"])), function (props) { return (props.firstElement ? 'translate(0, -0.5px)' : 'translate(0, -6.5px)'); });
|
|
20105
20100
|
var LastActiveCheckpointDot = newStyled.div(templateObject_10$5 || (templateObject_10$5 = __makeTemplateObject(["\n width: 13px;\n min-width: 13px;\n background-color: ", ";\n transform: translate(0, 33px);\n position: relative;\n border-radius: 0 0 8px 8px;\n margin-top: -1px;\n height: 8px;\n"], ["\n width: 13px;\n min-width: 13px;\n background-color: ", ";\n transform: translate(0, 33px);\n position: relative;\n border-radius: 0 0 8px 8px;\n margin-top: -1px;\n height: 8px;\n"])), function (props) { return props.trackColor; });
|
|
20106
20101
|
var WarningIconWrapper = newStyled.div(templateObject_11$3 || (templateObject_11$3 = __makeTemplateObject(["\n > svg {\n height: 28px;\n padding-bottom: 10px;\n }\n"], ["\n > svg {\n height: 28px;\n padding-bottom: 10px;\n }\n"])));
|
|
20107
20102
|
var TrackingProgressV2 = function (_a) {
|
|
@@ -20137,9 +20132,9 @@ var TrackingProgressV2 = function (_a) {
|
|
|
20137
20132
|
return (jsxRuntime.jsxs(CheckpointContainer$1, __assign$1({ "data-testid": "empty-checkpoint-track" }, { children: [jsxRuntime.jsxs(CheckpointDate$1, __assign$1({ currentSpace: "90px" }, { children: [jsxRuntime.jsx(CheckpointDateLabel$1, { lastElement: index + 1 === emptySpaces.length }, void 0), jsxRuntime.jsx(CheckpointDateLabel$1, { lastElement: index + 1 === emptySpaces.length }, void 0)] }), void 0), index + 1 !== emptySpaces.length && (jsxRuntime.jsx(ActiveCheckpointTrack$1, __assign$1({ trackColor: theme.colors.shades['200'].color }, { children: jsxRuntime.jsx(ActiveCheckpointDot$1, { firstElement: false }, void 0) }), void 0)), index + 1 === emptySpaces.length && (jsxRuntime.jsx(LastActiveCheckpointDot, __assign$1({ trackColor: theme.colors.shades['200'].color }, { children: jsxRuntime.jsx(ActiveCheckpointDot$1, { firstElement: false }, void 0) }), void 0)), jsxRuntime.jsx(CheckpointStatus$1, __assign$1({ finishedTrack: false }, { children: statusMessage }), void 0)] }), index));
|
|
20138
20133
|
})] }), void 0));
|
|
20139
20134
|
};
|
|
20140
|
-
var templateObject_1$
|
|
20135
|
+
var templateObject_1$t, templateObject_2$l, templateObject_3$k, templateObject_4$h, templateObject_5$g, templateObject_6$f, templateObject_7$e, templateObject_8$a, templateObject_9$6, templateObject_10$5, templateObject_11$3;
|
|
20141
20136
|
|
|
20142
|
-
var Container$k = newStyled.div(templateObject_1$
|
|
20137
|
+
var Container$k = newStyled.div(templateObject_1$s || (templateObject_1$s = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
20143
20138
|
var CheckpointContainer = newStyled.div(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
20144
20139
|
var CheckpointDate = newStyled.div(templateObject_3$j || (templateObject_3$j = __makeTemplateObject(["\n display: flex;\n justify-content: flex-start;\n flex-direction: column;\n padding-bottom: ", ";\n width: 60px;\n min-width: 60px;\n margin-right: 10px;\n"], ["\n display: flex;\n justify-content: flex-start;\n flex-direction: column;\n padding-bottom: ", ";\n width: 60px;\n min-width: 60px;\n margin-right: 10px;\n"])), function (props) { return props.currentSpace; });
|
|
20145
20140
|
var CheckpointDateLabel = newStyled.p(templateObject_4$g || (templateObject_4$g = __makeTemplateObject(["\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n font-weight: ", ";\n"], ["\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n font-weight: ", ";\n"])), function (props) { return (props.lastElement ? '600' : '400'); });
|
|
@@ -20177,9 +20172,9 @@ var TrackingProgress = function (_a) {
|
|
|
20177
20172
|
return (jsxRuntime.jsxs(CheckpointContainer, __assign$1({ "data-testid": "empty-checkpoint-track" }, { children: [jsxRuntime.jsxs(CheckpointDate, __assign$1({ currentSpace: getCurrentSpace(index) }, { children: [jsxRuntime.jsx(CheckpointDateLabel, { lastElement: index + 1 === emptySpaces.length }, void 0), jsxRuntime.jsx(CheckpointDateLabel, { lastElement: index + 1 === emptySpaces.length }, void 0)] }), void 0), index + 1 !== emptySpaces.length && (jsxRuntime.jsx(ActiveCheckpointTrack, { trackColor: theme.colors.shades['200'].color, firstElement: false, lastElement: index + 2 === emptySpaces.length }, void 0)), jsxRuntime.jsx(CheckpointStatus, { finishedTrack: false }, void 0)] }), index));
|
|
20178
20173
|
})] }), void 0));
|
|
20179
20174
|
};
|
|
20180
|
-
var templateObject_1$
|
|
20175
|
+
var templateObject_1$s, templateObject_2$k, templateObject_3$j, templateObject_4$g, templateObject_5$f, templateObject_6$e, templateObject_7$d, templateObject_8$9;
|
|
20181
20176
|
|
|
20182
|
-
var AutoShipCardContainerWrapper$1 = newStyled.div(templateObject_1$
|
|
20177
|
+
var AutoShipCardContainerWrapper$1 = newStyled.div(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 1rem;\n border: ", "\n border-radius: 8px;\n padding: 10px;\n"], ["\n display: flex;\n flex-direction: column;\n gap: 1rem;\n border: ", "\n border-radius: 8px;\n padding: 10px;\n"])), function (_a) {
|
|
20183
20178
|
var checked = _a.checked;
|
|
20184
20179
|
return (checked ? 'none' : '1px solid #e5e5e5;');
|
|
20185
20180
|
});
|
|
@@ -20189,7 +20184,7 @@ var AutoShipBodyTitle$1 = newStyled.div(templateObject_4$f || (templateObject_4$
|
|
|
20189
20184
|
var AutoShipBodyListItem$1 = newStyled.div(templateObject_5$e || (templateObject_5$e = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n gap: 10px;\n"], ["\n display: flex;\n flex-direction: row;\n gap: 10px;\n"])));
|
|
20190
20185
|
var AutoShipBodyListWrapper$1 = newStyled.div(templateObject_6$d || (templateObject_6$d = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 10px;\n padding: 10px 10px 10px 10px;\n"], ["\n display: flex;\n flex-direction: column;\n gap: 10px;\n padding: 10px 10px 10px 10px;\n"])));
|
|
20191
20186
|
var CheckboxInput = newStyled.input(templateObject_7$c || (templateObject_7$c = __makeTemplateObject(["\n width: 22px;\n height: 22px;\n gap: 0px;\n border-radius: 4px;\n border: 1px 0px 0px 0px;\n opacity: 0px;\n :checked {\n accent-color: #292929;\n }\n"], ["\n width: 22px;\n height: 22px;\n gap: 0px;\n border-radius: 4px;\n border: 1px 0px 0px 0px;\n opacity: 0px;\n :checked {\n accent-color: #292929;\n }\n"])));
|
|
20192
|
-
var templateObject_1$
|
|
20187
|
+
var templateObject_1$r, templateObject_2$j, templateObject_3$i, templateObject_4$f, templateObject_5$e, templateObject_6$d, templateObject_7$c;
|
|
20193
20188
|
|
|
20194
20189
|
function AutoshipOfferCard(_a) {
|
|
20195
20190
|
var showMore = _a.showMore, copyList = _a.copyList, copy = _a.copy, handleCheckBoxChange = _a.handleCheckBoxChange, _b = _a.isChecked, isChecked = _b === void 0 ? false : _b;
|
|
@@ -20213,7 +20208,7 @@ function AutoshipOfferCard(_a) {
|
|
|
20213
20208
|
return (jsxRuntime.jsxs(AutoShipCardContainerWrapper$1, __assign$1({ checked: check }, { children: [jsxRuntime.jsxs(AutoShipHeaderBarWrapper$1, { children: [jsxRuntime.jsx("div", { children: jsxRuntime.jsx(CheckboxInput, { type: "checkbox", onChange: handleCheckBox, checked: check, "data-testid": "autoshipcheckbox" }, void 0) }, void 0), jsxRuntime.jsx("div", { children: renderCopy(copy) }, void 0)] }, void 0), !check && (jsxRuntime.jsxs(AutoShipBodyWrapper$1, { children: [jsxRuntime.jsxs(AutoShipBodyTitle$1, __assign$1({ onClick: handleShowMore }, { children: [jsxRuntime.jsx("span", { children: showMoreBenefits ? renderCopy(showMore.openedCopy) : renderCopy(showMore.closedCopy) }, void 0), jsxRuntime.jsx(Icon$1, { name: showMoreBenefits ? 'arrows/chevron_up' : 'arrows/chevron_down' }, showMoreBenefits ? 'icon-up' : 'icon-down')] }), void 0), showMoreBenefits && (jsxRuntime.jsx(AutoShipBodyListWrapper$1, { children: copyList.map(function (item) { return (jsxRuntime.jsxs(AutoShipBodyListItem$1, { children: [jsxRuntime.jsx(Icon$1, { name: item.icon, fill: "#D4605B", width: "19px", height: "19px" }, void 0), renderCopy(item.copy)] }, item.icon)); }) }, void 0))] }, void 0))] }), void 0));
|
|
20214
20209
|
}
|
|
20215
20210
|
|
|
20216
|
-
var AutoShipCardContainerWrapper = newStyled.div(templateObject_1$
|
|
20211
|
+
var AutoShipCardContainerWrapper = newStyled.div(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 1rem;\n border: ", "\n border-radius: 8px;\n padding: 10px;\n"], ["\n display: flex;\n flex-direction: column;\n gap: 1rem;\n border: ", "\n border-radius: 8px;\n padding: 10px;\n"])), function (_a) {
|
|
20217
20212
|
var checked = _a.checked;
|
|
20218
20213
|
return (checked ? 'none' : '1px solid #e5e5e5;');
|
|
20219
20214
|
});
|
|
@@ -20224,7 +20219,7 @@ var AutoShipBodyListItem = newStyled.div(templateObject_5$d || (templateObject_5
|
|
|
20224
20219
|
var AutoShipBodyListWrapper = newStyled.div(templateObject_6$c || (templateObject_6$c = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 10px;\n padding: 10px 10px 10px 10px;\n"], ["\n display: flex;\n flex-direction: column;\n gap: 10px;\n padding: 10px 10px 10px 10px;\n"])));
|
|
20225
20220
|
newStyled.input(templateObject_7$b || (templateObject_7$b = __makeTemplateObject(["\n width: 22px;\n height: 22px;\n gap: 0px;\n border-radius: 4px;\n border: 1px 0px 0px 0px;\n opacity: 0px;\n :checked {\n accent-color: #292929;\n }\n"], ["\n width: 22px;\n height: 22px;\n gap: 0px;\n border-radius: 4px;\n border: 1px 0px 0px 0px;\n opacity: 0px;\n :checked {\n accent-color: #292929;\n }\n"])));
|
|
20226
20221
|
var ButtonRemoveWrapper = newStyled.div(templateObject_8$8 || (templateObject_8$8 = __makeTemplateObject(["\n color: #292929;\n font-size: 14px;\n font-weight: 400;\n line-height: 22px;\n text-align: left;\n text-decoration: underline;\n :hover {\n cursor: pointer;\n }\n"], ["\n color: #292929;\n font-size: 14px;\n font-weight: 400;\n line-height: 22px;\n text-align: left;\n text-decoration: underline;\n :hover {\n cursor: pointer;\n }\n"])));
|
|
20227
|
-
var templateObject_1$
|
|
20222
|
+
var templateObject_1$q, templateObject_2$i, templateObject_3$h, templateObject_4$e, templateObject_5$d, templateObject_6$c, templateObject_7$b, templateObject_8$8;
|
|
20228
20223
|
|
|
20229
20224
|
function AutoshipOfferCardCta(_a) {
|
|
20230
20225
|
var showMore = _a.showMore, copyList = _a.copyList, copy = _a.copy, handleCheckBoxChange = _a.handleCheckBoxChange, _b = _a.isChecked, isChecked = _b === void 0 ? false : _b, buttonCopy = _a.buttonCopy;
|
|
@@ -20264,7 +20259,7 @@ var StyledPanel = newStyled(Ye.Panel)({
|
|
|
20264
20259
|
justifyContent: 'center',
|
|
20265
20260
|
gap: '10px',
|
|
20266
20261
|
});
|
|
20267
|
-
var StyledContent = newStyled.div(templateObject_1$
|
|
20262
|
+
var StyledContent = newStyled.div(templateObject_1$p || (templateObject_1$p = __makeTemplateObject(["\n appearance: none;\n padding: 0 0 15px 0;\n margin: auto;\n border: none;\n background: ", ";\n font-size: inherit;\n line-height: inherit;\n color: inherit;\n cursor: auto;\n user-select: text;\n writing-mode: unset;\n font-family: inherit;\n display: flex;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: fit-content;\n"], ["\n appearance: none;\n padding: 0 0 15px 0;\n margin: auto;\n border: none;\n background: ", ";\n font-size: inherit;\n line-height: inherit;\n color: inherit;\n cursor: auto;\n user-select: text;\n writing-mode: unset;\n font-family: inherit;\n display: flex;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: fit-content;\n"])), function (_a) {
|
|
20268
20263
|
var bgColor = _a.bgColor;
|
|
20269
20264
|
return bgColor !== null && bgColor !== void 0 ? bgColor : '';
|
|
20270
20265
|
}, function (_a) {
|
|
@@ -20272,7 +20267,7 @@ var StyledContent = newStyled.div(templateObject_1$o || (templateObject_1$o = __
|
|
|
20272
20267
|
return width;
|
|
20273
20268
|
});
|
|
20274
20269
|
var StyledController = newStyled.div(templateObject_2$h || (templateObject_2$h = __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"])));
|
|
20275
|
-
var templateObject_1$
|
|
20270
|
+
var templateObject_1$p, templateObject_2$h;
|
|
20276
20271
|
|
|
20277
20272
|
var StyledDisclosure = newStyled(Ye)(function (_a) {
|
|
20278
20273
|
var background = _a.background, width = _a.width;
|
|
@@ -20313,14 +20308,14 @@ var BasicAccordion = function (_a) {
|
|
|
20313
20308
|
} }), void 0));
|
|
20314
20309
|
};
|
|
20315
20310
|
|
|
20316
|
-
var ContainerWrapper$1 = newStyled.div(templateObject_1$
|
|
20311
|
+
var ContainerWrapper$1 = newStyled.div(templateObject_1$o || (templateObject_1$o = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n max-height: 180px;\n width: auto;\n max-width: 450px;\n gap: 5px;\n @media (max-width: 480px) {\n gap: 0px;\n font-size: 12px !important;\n }\n"], ["\n display: flex;\n flex-direction: row;\n max-height: 180px;\n width: auto;\n max-width: 450px;\n gap: 5px;\n @media (max-width: 480px) {\n gap: 0px;\n font-size: 12px !important;\n }\n"])));
|
|
20317
20312
|
var ImageWrapper$1 = newStyled.div(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n max-width: 132px;\n max-height: 160px;\n border-radius: 6px;\n @media (max-width: 480px) {\n width: 102px;\n height: 123px;\n }\n"], ["\n max-width: 132px;\n max-height: 160px;\n border-radius: 6px;\n @media (max-width: 480px) {\n width: 102px;\n height: 123px;\n }\n"])));
|
|
20318
20313
|
var ImageComponent = newStyled(Image$3)(templateObject_3$g || (templateObject_3$g = __makeTemplateObject(["\n max-width: 132px;\n max-height: 160px;\n border-radius: 6px;\n position: relative;\n @media (max-width: 480px) {\n max-width: 102px;\n max-height: 123px;\n }\n"], ["\n max-width: 132px;\n max-height: 160px;\n border-radius: 6px;\n position: relative;\n @media (max-width: 480px) {\n max-width: 102px;\n max-height: 123px;\n }\n"])));
|
|
20319
20314
|
var RightComponentWrapper = newStyled.div(templateObject_4$d || (templateObject_4$d = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n gap: 4px;\n padding: 5px;\n @media (max-width: 401px) {\n gap: 0px;\n padding: 0px;\n }\n"], ["\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n gap: 4px;\n padding: 5px;\n @media (max-width: 401px) {\n gap: 0px;\n padding: 0px;\n }\n"])));
|
|
20320
20315
|
var TitleWrapper = newStyled.div(templateObject_5$c || (templateObject_5$c = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n"], ["\n display: flex;\n flex-direction: row;\n"])));
|
|
20321
20316
|
var SubTitleWrapper = newStyled.div(templateObject_6$b || (templateObject_6$b = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n"], ["\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n"])));
|
|
20322
20317
|
var ButtonsWrapper = newStyled.div(templateObject_7$a || (templateObject_7$a = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n"], ["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n"])));
|
|
20323
|
-
var templateObject_1$
|
|
20318
|
+
var templateObject_1$o, templateObject_2$g, templateObject_3$g, templateObject_4$d, templateObject_5$c, templateObject_6$b, templateObject_7$a;
|
|
20324
20319
|
|
|
20325
20320
|
function CartItemCard(_a) {
|
|
20326
20321
|
var style = _a.style, className = _a.className, children = _a.children;
|
|
@@ -20366,7 +20361,7 @@ var Shades200Color = '#bbbbbb';
|
|
|
20366
20361
|
var Shades700Color = '#292929';
|
|
20367
20362
|
var PrimaryColor = '#f7a08b';
|
|
20368
20363
|
var ClubBorderColor = '#882a2b';
|
|
20369
|
-
var FlexContainer$1 = newStyled.div(templateObject_1$
|
|
20364
|
+
var FlexContainer$1 = newStyled.div(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
20370
20365
|
var DiscountTag$1 = newStyled.div(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n position: absolute;\n top: -24px;\n right: 18px;\n background: ", ";\n color: white;\n padding: 5px 10px;\n font-size: 12px;\n font-weight: bold;\n line-height: 14px;\n border-radius: 6px 6px 0 0;\n"], ["\n position: absolute;\n top: -24px;\n right: 18px;\n background: ", ";\n color: white;\n padding: 5px 10px;\n font-size: 12px;\n font-weight: bold;\n line-height: 14px;\n border-radius: 6px 6px 0 0;\n"])), ClubGradient);
|
|
20371
20366
|
var ContainerBase$1 = newStyled.div(templateObject_3$f || (templateObject_3$f = __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) {
|
|
20372
20367
|
var selected = _a.selected;
|
|
@@ -20397,7 +20392,7 @@ var SubscriptionHeader$1 = newStyled.div(templateObject_6$a || (templateObject_6
|
|
|
20397
20392
|
}, PrimaryColor);
|
|
20398
20393
|
var BenefitsContainer$1 = newStyled.div(templateObject_7$9 || (templateObject_7$9 = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
20399
20394
|
var Benefit$1 = newStyled.div(templateObject_8$7 || (templateObject_8$7 = __makeTemplateObject(["\n display: flex;\n padding: 8px 0;\n svg {\n overflow: visible;\n }\n a {\n text-decoration: underline;\n color: ", ";\n }\n"], ["\n display: flex;\n padding: 8px 0;\n svg {\n overflow: visible;\n }\n a {\n text-decoration: underline;\n color: ", ";\n }\n"])), Shades700Color);
|
|
20400
|
-
var BenefitText = newStyled(Text$7)(templateObject_9$
|
|
20395
|
+
var BenefitText = newStyled(Text$7)(templateObject_9$5 || (templateObject_9$5 = __makeTemplateObject(["\n line-height: 20px;\n margin-left: 9px;\n"], ["\n line-height: 20px;\n margin-left: 9px;\n"])));
|
|
20401
20396
|
var StyledPrice$1 = newStyled(PriceLabelV2$1)(templateObject_10$4 || (templateObject_10$4 = __makeTemplateObject(["\n div p {\n color: ", ";\n }\n"], ["\n div p {\n color: ", ";\n }\n"])), function (_a) {
|
|
20402
20397
|
var selected = _a.selected, isNoMember = _a.isNoMember;
|
|
20403
20398
|
return selected
|
|
@@ -20409,7 +20404,7 @@ var StyledPrice$1 = newStyled(PriceLabelV2$1)(templateObject_10$4 || (templateOb
|
|
|
20409
20404
|
: Shades200Color;
|
|
20410
20405
|
});
|
|
20411
20406
|
var Container$j = newStyled.div(templateObject_11$2 || (templateObject_11$2 = __makeTemplateObject(["\n margin-top: 20px;\n"], ["\n margin-top: 20px;\n"])));
|
|
20412
|
-
var templateObject_1$
|
|
20407
|
+
var templateObject_1$n, templateObject_2$f, templateObject_3$f, templateObject_4$c, templateObject_5$b, templateObject_6$a, templateObject_7$9, templateObject_8$7, templateObject_9$5, templateObject_10$4, templateObject_11$2;
|
|
20413
20408
|
|
|
20414
20409
|
var ClubOfferSelector = function (_a) {
|
|
20415
20410
|
var pricing = _a.pricing, clubOfferBenefits = _a.clubOfferBenefits, benefits = _a.benefits, onChange = _a.onChange, singlePurchaseLabel = _a.singlePurchaseLabel, subscriptionLabel = _a.subscriptionLabel, className = _a.className, _b = _a.currencySymbol, currencySymbol = _b === void 0 ? '$' : _b, discountLabel = _a.discountLabel, disabledInputs = _a.disabledInputs;
|
|
@@ -20455,7 +20450,7 @@ var ClubOfferSelector = function (_a) {
|
|
|
20455
20450
|
}, useV2Style: true, onChange: function () { }, disabled: disabledInputs && disabledInputs.includes(radioIds.clubOfferSelector.id) }, void 0) }, void 0), jsxRuntime.jsx(StyledPrice$1, { testId: "subscription", finalPrice: "".concat(currencySymbol).concat(decimalFormat(Number(clubOfferFinalPrice))), selected: isSelected, size: exports.ComponentSize.Large, originalPrice: "".concat(currencySymbol).concat(decimalFormat(Number(listPrice))) }, void 0)] }), void 0), isSelected && (jsxRuntime.jsx(BenefitsContainer$1, { children: updatedClubOfferBenefits.map(function (benefit) { return (jsxRuntime.jsx(Benefit$1, { children: jsxRuntime.jsx(BenefitText, { variant: "body", dangerouslySetInnerHTML: { __html: benefit } }, void 0) }, benefit)); }) }, void 0))] }), void 0), jsxRuntime.jsxs(SinglePurchaseContainer$1, __assign$1({ isNoMember: true, "data-testid": "single-purchase-block", selected: radioIds.oneTime.id === radioCheck.id, onClick: function () { return handleChange(radioIds.oneTime, 'radio'); } }, { children: [jsxRuntime.jsx(RadioInput, { label: singlePurchaseLabel, name: radioIds.oneTime.id, id: radioIds.oneTime.id, value: radioIds.oneTime.id, checked: radioIds.oneTime.id === radioCheck.id, size: exports.ComponentSize.Medium, onChange: function () { }, useV2Style: true, disabled: disabledInputs && disabledInputs.includes(radioIds.oneTime.id) }, void 0), jsxRuntime.jsx(StyledPrice$1, { isNoMember: true, testId: "single-purchase", finalPrice: "".concat(currencySymbol).concat(decimalFormat(Number(discountedPrice))), selected: radioIds.oneTime.id === radioCheck.id, size: exports.ComponentSize.Large, originalPrice: "".concat(currencySymbol).concat(decimalFormat(Number(listPrice))) }, void 0)] }), void 0)] }), void 0));
|
|
20456
20451
|
};
|
|
20457
20452
|
|
|
20458
|
-
var ContainerWrapper = newStyled.div(templateObject_1$
|
|
20453
|
+
var ContainerWrapper = newStyled.div(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n width: 100%;\n height: 100%;\n padding: 8px 10px 8px 15px;\n background: white;\n gap: 10px;\n border-radius: 6px;\n background: ", ";\n border: 1px solid ", ";\n"], ["\n display: flex;\n flex-direction: column;\n width: 100%;\n height: 100%;\n padding: 8px 10px 8px 15px;\n background: white;\n gap: 10px;\n border-radius: 6px;\n background: ", ";\n border: 1px solid ", ";\n"])), function (_a) {
|
|
20459
20454
|
var $checked = _a.$checked;
|
|
20460
20455
|
return ($checked ? '#FFF3E3' : '#FAFAFA');
|
|
20461
20456
|
}, function (_a) {
|
|
@@ -20466,14 +20461,14 @@ var CardHeaderWrapper = newStyled.div(templateObject_2$e || (templateObject_2$e
|
|
|
20466
20461
|
var CardBody = newStyled.div(templateObject_3$e || (templateObject_3$e = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n font-size: 12px;\n font-weight: 400;\n line-height: 16px;\n text-align: left;\n color: #292929;\n gap: 4px;\n a {\n color: #292929;\n text-decoration: underline;\n }\n"], ["\n display: flex;\n flex-direction: row;\n font-size: 12px;\n font-weight: 400;\n line-height: 16px;\n text-align: left;\n color: #292929;\n gap: 4px;\n a {\n color: #292929;\n text-decoration: underline;\n }\n"])));
|
|
20467
20462
|
var ClubCopyWrapper = newStyled.div(templateObject_4$b || (templateObject_4$b = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n gap: 5px;\n"], ["\n display: flex;\n flex-direction: row;\n gap: 5px;\n"])));
|
|
20468
20463
|
var ClubCopyTextWrapper = newStyled.div(templateObject_5$a || (templateObject_5$a = __makeTemplateObject(["\n font-size: 14px;\n font-weight: 600;\n line-height: 22px;\n"], ["\n font-size: 14px;\n font-weight: 600;\n line-height: 22px;\n"])));
|
|
20469
|
-
var templateObject_1$
|
|
20464
|
+
var templateObject_1$m, templateObject_2$e, templateObject_3$e, templateObject_4$b, templateObject_5$a;
|
|
20470
20465
|
|
|
20471
20466
|
function Card(_a) {
|
|
20472
20467
|
var children = _a.children, link = _a.link, icon = _a.icon, _b = _a.isChecked, isChecked = _b === void 0 ? false : _b, bodyCopy = _a.bodyCopy, titleCopy = _a.titleCopy, style = _a.style, _c = _a.termsText, termsText = _c === void 0 ? 'Terms here.' : _c;
|
|
20473
20468
|
return (jsxRuntime.jsxs(ContainerWrapper, __assign$1({ "$checked": isChecked, style: style }, { children: [jsxRuntime.jsxs(CardHeaderWrapper, { children: [jsxRuntime.jsxs(ClubCopyWrapper, { children: [icon, jsxRuntime.jsx(ClubCopyTextWrapper, { children: titleCopy }, void 0)] }, void 0), jsxRuntime.jsx("div", { children: children }, void 0)] }, void 0), !isChecked && (jsxRuntime.jsxs(CardBody, __assign$1({ id: "joinClubCardBody" }, { children: [bodyCopy, ' ', jsxRuntime.jsx("a", __assign$1({ href: link, target: "_blank", rel: "noreferrer" }, { children: termsText }), void 0)] }), void 0))] }), void 0));
|
|
20474
20469
|
}
|
|
20475
20470
|
|
|
20476
|
-
var StyledButton = newStyled.button(templateObject_1$
|
|
20471
|
+
var StyledButton = newStyled.button(templateObject_1$l || (templateObject_1$l = __makeTemplateObject(["\n padding: 10px 20px;\n border-radius: 8px;\n background: var(--shapermint-default-complementary-wine-882-a-2-b, #882a2b);\n color: var(--neutrals-white-ffffff, #fff);\n text-align: center;\n font-family: 'Avenir Next';\n font-size: 14px;\n font-style: normal;\n font-weight: 600;\n line-height: 18px;\n text-transform: uppercase;\n border: none;\n cursor: pointer;\n ", ";\n"], ["\n padding: 10px 20px;\n border-radius: 8px;\n background: var(--shapermint-default-complementary-wine-882-a-2-b, #882a2b);\n color: var(--neutrals-white-ffffff, #fff);\n text-align: center;\n font-family: 'Avenir Next';\n font-size: 14px;\n font-style: normal;\n font-weight: 600;\n line-height: 18px;\n text-transform: uppercase;\n border: none;\n cursor: pointer;\n ", ";\n"])), function (_a) {
|
|
20477
20472
|
var customStyle = _a.customStyle;
|
|
20478
20473
|
return customStyle && __assign$1({}, customStyle);
|
|
20479
20474
|
});
|
|
@@ -20486,7 +20481,7 @@ var JoinClubCard = function (_a) {
|
|
|
20486
20481
|
};
|
|
20487
20482
|
return (jsxRuntime.jsx(Card, __assign$1({ link: link, icon: icon, isChecked: checked, bodyCopy: bodyCopy, titleCopy: titleCopy, style: style, termsText: termsText }, { children: showButton ? (jsxRuntime.jsx(StyledButton, __assign$1({ onClick: function () { return handleToggleValue(!checked); }, customStyle: buttonStyle }, { children: buttonText }), void 0)) : (jsxRuntime.jsx(ToggleComponent, { onToggle: handleToggleValue, isChecked: checked }, void 0)) }), void 0));
|
|
20488
20483
|
};
|
|
20489
|
-
var templateObject_1$
|
|
20484
|
+
var templateObject_1$l;
|
|
20490
20485
|
|
|
20491
20486
|
var ImageContainer$1 = newStyled.div(function (_a) {
|
|
20492
20487
|
var width = _a.width, height = _a.height;
|
|
@@ -20496,7 +20491,7 @@ var ImageContainer$1 = newStyled.div(function (_a) {
|
|
|
20496
20491
|
height: height,
|
|
20497
20492
|
});
|
|
20498
20493
|
});
|
|
20499
|
-
var ImageHoverContainer$1 = newStyled.img(templateObject_1$
|
|
20494
|
+
var ImageHoverContainer$1 = newStyled.img(templateObject_1$k || (templateObject_1$k = __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"])));
|
|
20500
20495
|
var Container$i = newStyled.a(templateObject_2$d || (templateObject_2$d = __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"])));
|
|
20501
20496
|
var ProdCardContainer$2 = newStyled.div(templateObject_3$d || (templateObject_3$d = __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"])));
|
|
20502
20497
|
var Title$3 = newStyled.h2(templateObject_4$a || (templateObject_4$a = __makeTemplateObject(["\n font-size: 0.83rem;\n font-weight: normal;\n line-height: 1.375rem;\n min-height: 2.75rem;\n color: ", ";\n margin: 0.25rem 0;\n text-align: ", ";\n"], ["\n font-size: 0.83rem;\n font-weight: normal;\n line-height: 1.375rem;\n min-height: 2.75rem;\n color: ", ";\n margin: 0.25rem 0;\n text-align: ", ";\n"])), function (props) { return props.theme.colors.pallete.secondary.color; }, function (props) { return props.align; });
|
|
@@ -20510,7 +20505,7 @@ var BottomTagContainer$6 = newStyled.div(templateObject_6$9 || (templateObject_6
|
|
|
20510
20505
|
});
|
|
20511
20506
|
newStyled.div(templateObject_7$8 || (templateObject_7$8 = __makeTemplateObject(["\n margin-top: 8px;\n"], ["\n margin-top: 8px;\n"])));
|
|
20512
20507
|
var DiscountLabel$2 = newStyled.div(templateObject_8$6 || (templateObject_8$6 = __makeTemplateObject(["\n background-color: #c64844;\n color: white;\n font-size: 10px;\n line-height: 14px;\n padding: 4px 6px 4px 6px;\n font-weight: bold;\n border-radius: 4px;\n margin-top: 2px;\n height: fit-content;\n &:empty {\n display: none;\n }\n"], ["\n background-color: #c64844;\n color: white;\n font-size: 10px;\n line-height: 14px;\n padding: 4px 6px 4px 6px;\n font-weight: bold;\n border-radius: 4px;\n margin-top: 2px;\n height: fit-content;\n &:empty {\n display: none;\n }\n"])));
|
|
20513
|
-
var templateObject_1$
|
|
20508
|
+
var templateObject_1$k, templateObject_2$d, templateObject_3$d, templateObject_4$a, templateObject_5$9, templateObject_6$9, templateObject_7$8, templateObject_8$6;
|
|
20514
20509
|
|
|
20515
20510
|
var PriceLabelDisplay = function (_a) {
|
|
20516
20511
|
var price = _a.price, discountTag = _a.discountTag;
|
|
@@ -20547,7 +20542,7 @@ var getStylesBySize$2 = function (size) {
|
|
|
20547
20542
|
};
|
|
20548
20543
|
}
|
|
20549
20544
|
};
|
|
20550
|
-
var TopTagContainer$6 = newStyled.div(templateObject_1$
|
|
20545
|
+
var TopTagContainer$6 = newStyled.div(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n position: absolute;\n left: 0;\n top: 0;\n width: ", ";\n z-index: 1;\n"], ["\n position: absolute;\n left: 0;\n top: 0;\n width: ", ";\n z-index: 1;\n"])), function (_a) {
|
|
20551
20546
|
var style = _a.style;
|
|
20552
20547
|
return style.width;
|
|
20553
20548
|
});
|
|
@@ -20565,7 +20560,7 @@ var ProductCard = function (_a) {
|
|
|
20565
20560
|
}, [size]);
|
|
20566
20561
|
return (jsxRuntime.jsxs(ProdCardContainer$2, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxRuntime.jsxs(Container$i, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', className: "picContainer", onClick: onClick }, { children: [!!topTag || !!bottomTag ? (jsxRuntime.jsxs(ImageContainer$1, __assign$1({ width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height, "data-testid": "tags-image-container" }, { children: [jsxRuntime.jsx(Image$3, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, width: "100%", height: "100%" }, void 0), jsxRuntime.jsx(TopTagContainer$6, __assign$1({ style: { width: 'inherit' } }, { children: topTag }), void 0), jsxRuntime.jsx(BottomTagContainer$6, __assign$1({ style: { width: 'inherit' } }, { children: bottomTag }), void 0)] }), void 0)) : (jsxRuntime.jsx(Image$3, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)), imageHover ? (jsxRuntime.jsx(ImageHoverContainer$1, { className: "hover__image", src: imageHover.src, srcSet: getSrcSet(imageHover.src, 180, 360, 720, 960), loading: "lazy", alt: imageHover.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)) : null] }), void 0), jsxRuntime.jsxs(Container$i, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', onClick: onClick, className: "textContainer", style: { alignItems: "".concat(size === exports.ComponentSize.Small ? 'start' : 'center') } }, { children: [jsxRuntime.jsx(Spacing, { size: space }, void 0), ratingPos !== 'bottom' && (jsxRuntime.jsx(RatingDisplay, { rating: rating, size: size, isRatingLoading: isRatingLoading }, void 0)), jsxRuntime.jsx(Spacing, { size: space }, void 0), jsxRuntime.jsx(Title$3, __assign$1({ theme: theme, align: alignName }, { children: title }), void 0), jsxRuntime.jsx(Spacing, { size: space }, void 0), priceLoading ? (jsxRuntime.jsx(SkeletonBox, { height: "20px", width: "140px" }, void 0)) : (jsxRuntime.jsx(PriceLabelDisplay, { price: price, discountTag: discountTag }, void 0)), jsxRuntime.jsx(Spacing, { size: space }, void 0), ratingPos === 'bottom' && (jsxRuntime.jsx(RatingDisplay, { rating: rating, size: size, isRatingLoading: isRatingLoading }, void 0))] }), void 0)] }), void 0));
|
|
20567
20562
|
};
|
|
20568
|
-
var templateObject_1$
|
|
20563
|
+
var templateObject_1$j;
|
|
20569
20564
|
|
|
20570
20565
|
var ImageContainer = newStyled.div(function (_a) {
|
|
20571
20566
|
var width = _a.width, height = _a.height;
|
|
@@ -20575,7 +20570,7 @@ var ImageContainer = newStyled.div(function (_a) {
|
|
|
20575
20570
|
height: height,
|
|
20576
20571
|
});
|
|
20577
20572
|
});
|
|
20578
|
-
var DiscountLabel$1 = newStyled.div(templateObject_1$
|
|
20573
|
+
var DiscountLabel$1 = newStyled.div(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n background-color: #c64844;\n color: white;\n font-size: 10px;\n line-height: 14px;\n padding: 4px 6px 4px 6px;\n font-weight: bold;\n border-radius: 4px;\n margin-top: 2px;\n height: fit-content;\n"], ["\n background-color: #c64844;\n color: white;\n font-size: 10px;\n line-height: 14px;\n padding: 4px 6px 4px 6px;\n font-weight: bold;\n border-radius: 4px;\n margin-top: 2px;\n height: fit-content;\n"])));
|
|
20579
20574
|
var ImageHoverContainer = newStyled.img(templateObject_2$c || (templateObject_2$c = __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"])));
|
|
20580
20575
|
var Container$h = newStyled.a(templateObject_3$c || (templateObject_3$c = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\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: flex-start;\n width: 100%;\n text-decoration: none;\n\n &:hover .hover__image {\n opacity: 1;\n }\n"])));
|
|
20581
20576
|
var ProdCardContainer$1 = newStyled.div(templateObject_4$9 || (templateObject_4$9 = __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"])));
|
|
@@ -20597,7 +20592,7 @@ var BottomTagContainer$5 = newStyled.div(templateObject_7$7 || (templateObject_7
|
|
|
20597
20592
|
var style = _a.style;
|
|
20598
20593
|
return (_b = style.width) !== null && _b !== void 0 ? _b : 'auto';
|
|
20599
20594
|
});
|
|
20600
|
-
var templateObject_1$
|
|
20595
|
+
var templateObject_1$i, templateObject_2$c, templateObject_3$c, templateObject_4$9, templateObject_5$8, templateObject_6$8, templateObject_7$7;
|
|
20601
20596
|
|
|
20602
20597
|
var getStylesBySize$1 = function (size) {
|
|
20603
20598
|
switch (size) {
|
|
@@ -20673,7 +20668,7 @@ newStyled.div(function (_a) {
|
|
|
20673
20668
|
height: height,
|
|
20674
20669
|
});
|
|
20675
20670
|
});
|
|
20676
|
-
var DiscountLabel = newStyled.div(templateObject_1$
|
|
20671
|
+
var DiscountLabel = newStyled.div(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n background-color: #c64844;\n color: white;\n font-size: 10px;\n line-height: 14px;\n padding: 4px 6px 4px 6px;\n font-weight: bold;\n border-radius: 4px;\n margin-top: 2px;\n height: fit-content;\n"], ["\n background-color: #c64844;\n color: white;\n font-size: 10px;\n line-height: 14px;\n padding: 4px 6px 4px 6px;\n font-weight: bold;\n border-radius: 4px;\n margin-top: 2px;\n height: fit-content;\n"])));
|
|
20677
20672
|
newStyled.img(templateObject_2$b || (templateObject_2$b = __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"])));
|
|
20678
20673
|
var Container$g = newStyled.a(templateObject_3$b || (templateObject_3$b = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\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: flex-start;\n width: 100%;\n text-decoration: none;\n\n &:hover .hover__image {\n opacity: 1;\n }\n"])));
|
|
20679
20674
|
var ProdCardContainer = newStyled.div(templateObject_4$8 || (templateObject_4$8 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: flex-start;\n width: fit-content;\n text-decoration: none;\n"], ["\n display: flex;\n flex-direction: row;\n align-items: flex-start;\n width: fit-content;\n text-decoration: none;\n"])));
|
|
@@ -20695,7 +20690,7 @@ newStyled.div(templateObject_7$6 || (templateObject_7$6 = __makeTemplateObject([
|
|
|
20695
20690
|
var style = _a.style;
|
|
20696
20691
|
return (_b = style.width) !== null && _b !== void 0 ? _b : 'auto';
|
|
20697
20692
|
});
|
|
20698
|
-
var templateObject_1$
|
|
20693
|
+
var templateObject_1$h, templateObject_2$b, templateObject_3$b, templateObject_4$8, templateObject_5$7, templateObject_6$7, templateObject_7$6;
|
|
20699
20694
|
|
|
20700
20695
|
var getStylesBySize = function (size) {
|
|
20701
20696
|
switch (size) {
|
|
@@ -20816,7 +20811,7 @@ var playVideoCommand = function () {
|
|
|
20816
20811
|
sendCommandToIframe('playVideo');
|
|
20817
20812
|
};
|
|
20818
20813
|
|
|
20819
|
-
var Container$f = newStyled.div(templateObject_1$
|
|
20814
|
+
var Container$f = newStyled.div(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n ", "\n position: relative;\n max-height: 524px;\n overflow: hidden;\n & .slick-dots li.slick-active button:before {\n background-color: ", ";\n }\n"], ["\n ", "\n position: relative;\n max-height: 524px;\n overflow: hidden;\n & .slick-dots li.slick-active button:before {\n background-color: ", ";\n }\n"])), function (_a) {
|
|
20820
20815
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
20821
20816
|
return borderRadiusVariant &&
|
|
20822
20817
|
"\n border-radius: 40px;\n ";
|
|
@@ -20906,16 +20901,16 @@ var ImageProductSlide = function (_a) {
|
|
|
20906
20901
|
return (jsxRuntime.jsx("div", { children: !isVideo ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(InnerImageZoom, { src: source, zoomSrc: source, zoomType: "hover", imgAttributes: getImageAttributes$1(idx, itemsOnViewport, imgAttributes), height: 510, fullscreenOnMobile: true, className: "zoomWrapper" }, void 0), jsxRuntime.jsx(TopTagContainer$4, __assign$1({ borderRadiusVariant: borderRadiusVariant, "data-testid": "topTag" }, { children: topTag }), void 0), jsxRuntime.jsx(BottomTagContainer$4, __assign$1({ "data-testid": "bottomTag" }, { children: bottomTag }), void 0), !!topRightTag && jsxRuntime.jsx(TopRightTagContainer$1, { 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));
|
|
20907
20902
|
}) }), void 0) }), void 0)] }, void 0));
|
|
20908
20903
|
};
|
|
20909
|
-
var templateObject_1$
|
|
20904
|
+
var templateObject_1$g, templateObject_2$a, templateObject_3$a, templateObject_4$7, templateObject_5$6, templateObject_6$6;
|
|
20910
20905
|
|
|
20911
|
-
var Container$e = newStyled.div(templateObject_1$
|
|
20906
|
+
var Container$e = newStyled.div(templateObject_1$f || (templateObject_1$f = __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"])));
|
|
20912
20907
|
var ProductGalleryMobile = function (_a) {
|
|
20913
20908
|
var images = _a.images, customClick = _a.customClick, topTag = _a.topTag, topRightTag = _a.topRightTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, _b = _a.borderRadiusVariant, borderRadiusVariant = _b === void 0 ? false : _b, selectedValue = _a.selectedValue, _c = _a.hasToPreserveOrder, hasToPreserveOrder = _c === void 0 ? false : _c, _d = _a.itemsOnViewport, itemsOnViewport = _d === void 0 ? 1 : _d;
|
|
20914
20909
|
var _e = React$2.useState(0), activeIndex = _e[0], setActiveIndex = _e[1];
|
|
20915
20910
|
var selectedContent = hasToPreserveOrder ? images === null || images === void 0 ? void 0 : images[activeIndex] : selectedValue;
|
|
20916
20911
|
return (jsxRuntime.jsx(Container$e, __assign$1({ "data-testid": "product-gallery-mobile-v1" }, { children: jsxRuntime.jsx(ImageProductSlide, { contents: images, customClick: customClick, topTag: topTag, topRightTag: topRightTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant, selectedValue: selectedContent, onChange: function (index) { return setActiveIndex(index); }, itemsOnViewport: itemsOnViewport }, void 0) }), void 0));
|
|
20917
20912
|
};
|
|
20918
|
-
var templateObject_1$
|
|
20913
|
+
var templateObject_1$f;
|
|
20919
20914
|
|
|
20920
20915
|
function _extends() {
|
|
20921
20916
|
_extends = Object.assign || function (target) {
|
|
@@ -21182,14 +21177,14 @@ function useSwipeable(options) {
|
|
|
21182
21177
|
return handlers;
|
|
21183
21178
|
}
|
|
21184
21179
|
|
|
21185
|
-
var Button$3 = newStyled.button(templateObject_1$
|
|
21180
|
+
var Button$3 = newStyled.button(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n background: transparent;\n border: none;\n padding: 0.188rem 0.625rem;\n z-index: 5;\n top: calc(50% - 40px);\n height: 40px !important;\n"], ["\n background: transparent;\n border: none;\n padding: 0.188rem 0.625rem;\n z-index: 5;\n top: calc(50% - 40px);\n height: 40px !important;\n"])));
|
|
21186
21181
|
var ArrowButton = function (_a) {
|
|
21187
21182
|
var Icon = _a.Icon, onClick = _a.onClick, className = _a.className;
|
|
21188
21183
|
return (jsxRuntime.jsx(Button$3, __assign$1({ className: className, type: "button", onClick: onClick }, { children: Icon }), void 0));
|
|
21189
21184
|
};
|
|
21190
|
-
var templateObject_1$
|
|
21185
|
+
var templateObject_1$e;
|
|
21191
21186
|
|
|
21192
|
-
var Container$d = newStyled.div(templateObject_1$
|
|
21187
|
+
var Container$d = newStyled.div(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n position: absolute;\n bottom: 15px;\n display: flex;\n justify-content: center;\n width: 100%;\n svg {\n padding: 0.125rem;\n margin-left: 0.25rem;\n }\n"], ["\n position: absolute;\n bottom: 15px;\n display: flex;\n justify-content: center;\n width: 100%;\n svg {\n padding: 0.125rem;\n margin-left: 0.25rem;\n }\n"])));
|
|
21193
21188
|
var range = function (limit) { return __spreadArray([], new Array(limit), true).map(function (_, index) { return index; }); };
|
|
21194
21189
|
var SlideDots = function (_a) {
|
|
21195
21190
|
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, containerDataTestId = _a.containerDataTestId;
|
|
@@ -21198,9 +21193,9 @@ var SlideDots = function (_a) {
|
|
|
21198
21193
|
? theme.component.slideNavigation.slideDots.selectedDotColor
|
|
21199
21194
|
: theme.component.slideNavigation.slideDots.unselectedDotColor, opacity: theme.component.slideNavigation.slideDots.dotsOpacity, testId: "slide-dot-".concat(index) }, "Icon-".concat(index, "-navigation/slide_dot").concat(index === selectedIndex ? '_solid' : ''))); }) }), void 0));
|
|
21200
21195
|
};
|
|
21201
|
-
var templateObject_1$
|
|
21196
|
+
var templateObject_1$d;
|
|
21202
21197
|
|
|
21203
|
-
var NavigationButton = newStyled(ArrowButton)(templateObject_1$
|
|
21198
|
+
var NavigationButton = newStyled(ArrowButton)(templateObject_1$c || (templateObject_1$c = __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"])));
|
|
21204
21199
|
var RightButton = newStyled(NavigationButton)(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["\n right: 0;\n"], ["\n right: 0;\n"])));
|
|
21205
21200
|
var LeftButton = newStyled(NavigationButton)(templateObject_3$9 || (templateObject_3$9 = __makeTemplateObject(["\n left: 0;\n"], ["\n left: 0;\n"])));
|
|
21206
21201
|
var SlideNavigation = function (_a) {
|
|
@@ -21214,9 +21209,9 @@ var SlideNavigation = function (_a) {
|
|
|
21214
21209
|
onNavigate(selectedIndex + 1);
|
|
21215
21210
|
} }, void 0)), jsxRuntime.jsx(SlideDots, { quantity: quantity, selectedIndex: selectedIndex, containerDataTestId: testId }, void 0)] }, void 0));
|
|
21216
21211
|
};
|
|
21217
|
-
var templateObject_1$
|
|
21212
|
+
var templateObject_1$c, templateObject_2$9, templateObject_3$9;
|
|
21218
21213
|
|
|
21219
|
-
var Container$c = newStyled.div(templateObject_1$
|
|
21214
|
+
var Container$c = newStyled.div(templateObject_1$b || (templateObject_1$b = __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) {
|
|
21220
21215
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
21221
21216
|
return borderRadiusVariant &&
|
|
21222
21217
|
"\n border-radius: 40px;\n ";
|
|
@@ -21228,9 +21223,9 @@ var ImageProductSlideV2 = React$2.forwardRef(function ImageProductWithTags(_a, r
|
|
|
21228
21223
|
var image = _a.image, topTag = _a.topTag, bottomTag = _a.bottomTag, testId = _a.testId, borderRadiusVariant = _a.borderRadiusVariant;
|
|
21229
21224
|
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$3, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsxRuntime.jsx(BottomTagContainer$3, { 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));
|
|
21230
21225
|
});
|
|
21231
|
-
var templateObject_1$
|
|
21226
|
+
var templateObject_1$b, templateObject_2$8, templateObject_3$8;
|
|
21232
21227
|
|
|
21233
|
-
var Container$b = newStyled.div(templateObject_1$
|
|
21228
|
+
var Container$b = newStyled.div(templateObject_1$a || (templateObject_1$a = __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"])));
|
|
21234
21229
|
var ProductGalleryMobileV2 = function (_a) {
|
|
21235
21230
|
var images = _a.images, selectedValue = _a.selectedValue, topTag = _a.topTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, slideDotsDataTestId = _a.slideDotsDataTestId, _b = _a.borderRadiusVariant, borderRadiusVariant = _b === void 0 ? false : _b;
|
|
21236
21231
|
var _c = React$2.useState(0), index = _c[0], setIndex = _c[1];
|
|
@@ -21254,9 +21249,9 @@ var ProductGalleryMobileV2 = function (_a) {
|
|
|
21254
21249
|
}, [index, images]);
|
|
21255
21250
|
return (jsxRuntime.jsxs(Container$b, __assign$1({ "data-testid": "product-gallery-mobile-v2" }, { children: [jsxRuntime.jsx(ImageProductSlideV2, __assign$1({}, handlers, { image: selectedImage, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant }), void 0), jsxRuntime.jsx(SlideNavigation, { quantity: images.length, selectedIndex: images.indexOf(selectedImage), onNavigate: setIndex, testId: slideDotsDataTestId }, void 0)] }), void 0));
|
|
21256
21251
|
};
|
|
21257
|
-
var templateObject_1$
|
|
21252
|
+
var templateObject_1$a;
|
|
21258
21253
|
|
|
21259
|
-
var Container$a = newStyled.div(templateObject_1$
|
|
21254
|
+
var Container$a = newStyled.div(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n ", "\n position: relative;\n max-height: 524px;\n overflow: hidden;\n & .slick-dots li.slick-active button:before {\n background-color: ", ";\n }\n"], ["\n ", "\n position: relative;\n max-height: 524px;\n overflow: hidden;\n & .slick-dots li.slick-active button:before {\n background-color: ", ";\n }\n"])), function (_a) {
|
|
21260
21255
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
21261
21256
|
return borderRadiusVariant &&
|
|
21262
21257
|
"\n border-radius: 40px;\n ";
|
|
@@ -21271,7 +21266,7 @@ var Video = newStyled.div(templateObject_5$5 || (templateObject_5$5 = __makeTemp
|
|
|
21271
21266
|
var VideoTag = newStyled.div(templateObject_6$5 || (templateObject_6$5 = __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"])));
|
|
21272
21267
|
var Text = newStyled.div(templateObject_7$5 || (templateObject_7$5 = __makeTemplateObject(["\n padding-top: 3px;\n"], ["\n padding-top: 3px;\n"])));
|
|
21273
21268
|
var NavButtonContainer$2 = newStyled.div(templateObject_8$5 || (templateObject_8$5 = __makeTemplateObject(["\n height: 40px;\n width: 40px;\n"], ["\n height: 40px;\n width: 40px;\n"])));
|
|
21274
|
-
var Button$2 = newStyled.button(templateObject_9$
|
|
21269
|
+
var Button$2 = newStyled.button(templateObject_9$4 || (templateObject_9$4 = __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"])));
|
|
21275
21270
|
var settings$2 = {
|
|
21276
21271
|
dots: true,
|
|
21277
21272
|
infinite: false,
|
|
@@ -21331,14 +21326,14 @@ var ImageProductSlideV3 = function (_a) {
|
|
|
21331
21326
|
} }, void 0), jsxRuntime.jsxs(VideoTag, { children: [jsxRuntime.jsx(Icon.PDP.PlayMini, { width: 1.5 }, void 0), jsxRuntime.jsx(Text, { children: "VIDEO" }, void 0)] }, void 0)] }, void 0))] }, image.key));
|
|
21332
21327
|
}) }), void 0) }), void 0)] }, void 0));
|
|
21333
21328
|
};
|
|
21334
|
-
var templateObject_1$
|
|
21329
|
+
var templateObject_1$9, templateObject_2$7, templateObject_3$7, templateObject_4$6, templateObject_5$5, templateObject_6$5, templateObject_7$5, templateObject_8$5, templateObject_9$4;
|
|
21335
21330
|
|
|
21336
|
-
var Container$9 = newStyled.div(templateObject_1$
|
|
21331
|
+
var Container$9 = newStyled.div(templateObject_1$8 || (templateObject_1$8 = __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"])));
|
|
21337
21332
|
var ProductGalleryMobileV3 = function (_a) {
|
|
21338
21333
|
var images = _a.images, customClick = _a.customClick, topTag = _a.topTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, _b = _a.borderRadiusVariant, borderRadiusVariant = _b === void 0 ? false : _b, selectedValue = _a.selectedValue;
|
|
21339
21334
|
return (jsxRuntime.jsx(Container$9, __assign$1({ "data-testid": "product-gallery-mobile-v3" }, { children: jsxRuntime.jsx(ImageProductSlideV3, { images: images, customClick: customClick, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant, selectedValue: selectedValue }, void 0) }), void 0));
|
|
21340
21335
|
};
|
|
21341
|
-
var templateObject_1$
|
|
21336
|
+
var templateObject_1$8;
|
|
21342
21337
|
|
|
21343
21338
|
function closeZoom() {
|
|
21344
21339
|
var closeButton = document.querySelectorAll('.iiz__btn.iiz__close.iiz__close--visible')[0];
|
|
@@ -21359,7 +21354,7 @@ var afterChangeSlide = function (_a) {
|
|
|
21359
21354
|
closeZoom();
|
|
21360
21355
|
};
|
|
21361
21356
|
|
|
21362
|
-
var TopTagContainer$1 = newStyled.div(templateObject_1$
|
|
21357
|
+
var TopTagContainer$1 = newStyled.div(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n position: absolute;\n border-top-left-radius: 8px;\n border-end-end-radius: 16px;\n overflow: hidden;\n left: ", ";\n top: ", ";\n"], ["\n position: absolute;\n border-top-left-radius: 8px;\n border-end-end-radius: 16px;\n overflow: hidden;\n left: ", ";\n top: ", ";\n"])), function (props) { return (props.borderRadiusVariant ? '13px' : '0'); }, function (props) { return (props.borderRadiusVariant ? '11px' : '0'); });
|
|
21363
21358
|
var TopRightTagContainer = newStyled.div(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject(["\n position: absolute;\n border-top-right-radius: 8px;\n border-end-start-radius: 8px;\n overflow: hidden;\n right: 0;\n top: 0;\n"], ["\n position: absolute;\n border-top-right-radius: 8px;\n border-end-start-radius: 8px;\n overflow: hidden;\n right: 0;\n top: 0;\n"])));
|
|
21364
21359
|
var BottomTagContainer$1 = newStyled.div(templateObject_3$6 || (templateObject_3$6 = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
21365
21360
|
var Container$8 = newStyled.div(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject(["\n ", "\n\n padding-left: 15px;\n position: relative;\n max-height: 524px;\n overflow: hidden;\n\n video {\n width: none;\n }\n\n & .slick-dots li.slick-active button:before {\n background-color: ", ";\n }\n\n .slick-slider {\n height: 100%;\n min-height: calc(414px + 50px);\n }\n\n .slick-active > div {\n position: absolute;\n }\n .slick-slide:nth-last-of-type(2):not(:last-of-type) > div {\n position: absolute;\n }\n\n .slider-mobile-gallery {\n zoom: 0.8;\n border-radius: 8px;\n overflow: hidden;\n }\n\n .slick-slide:not(.slick-current) .banner-concealable {\n display: none;\n }\n\n .slick-slide {\n position: relative;\n }\n\n .slick-arrow {\n cursor: pointer;\n display: none !important;\n position: absolute;\n top: 45%;\n z-index: 1;\n }\n\n .slick-arrow::before {\n content: '' !important;\n }\n\n @media only screen and (max-width: 480px) {\n .slick-arrow {\n display: block !important;\n }\n }\n\n .slick-arrow.slick-disabled {\n display: none !important;\n }\n\n .slick-prev {\n left: 0;\n }\n\n .slick-next {\n right: 0;\n }\n\n .slick-dots {\n list-style: none;\n margin: 0;\n padding: 0;\n position: absolute;\n text-align: center;\n width: 100%;\n margin-left: -7px;\n }\n\n .slick-dots li {\n position: relative;\n display: inline-block;\n height: 20px;\n width: 20px;\n margin: 0;\n padding: 0;\n cursor: pointer;\n }\n\n .slick-dots li:before {\n background-color: var(--truekind-default-secondary);\n }\n .slick-dots li.slick-active {\n display: inline-block !important;\n }\n\n .slick-dots li:nth-child(n + 10) {\n display: none;\n }\n\n .slick-dots li button {\n background: transparent;\n border: 0;\n color: transparent;\n cursor: pointer;\n display: block;\n height: 20px;\n line-height: 0;\n outline: none;\n padding: 5px;\n width: 20px;\n }\n\n .slick-dots li button:focus:before,\n .slick-dots li button:hover:before {\n opacity: 0.5;\n }\n\n .slick-dots li button:before {\n background-color: var(--truekind-default-secondary, #292929);\n border-radius: 20px;\n content: ' ';\n display: block;\n height: 12px;\n left: 0;\n margin: 5px;\n position: absolute;\n top: 0;\n width: 12px;\n opacity: 1;\n }\n\n .slick-dots li:last-child button:before {\n ", "\n }\n\n .slick-dots li.slick-active button:before {\n background-color: var(--colors-pallete-primary-color, #cc4125) !important;\n opacity: 1;\n width: 12px;\n height: 12px;\n top: 0;\n }\n\n .slick-dots li:not(.slick-active) button:before {\n border: none;\n }\n\n @media only screen and (max-width: 768px) {\n div[data-testid='product-gallery-mobile-v1'] .slick-list > .slick-track {\n height: auto;\n }\n\n div[data-testid='product-gallery-mobile-v1'] .zoomWrapper.iiz > div {\n height: auto;\n }\n }\n"], ["\n ", "\n\n padding-left: 15px;\n position: relative;\n max-height: 524px;\n overflow: hidden;\n\n video {\n width: none;\n }\n\n & .slick-dots li.slick-active button:before {\n background-color: ", ";\n }\n\n .slick-slider {\n height: 100%;\n min-height: calc(414px + 50px);\n }\n\n .slick-active > div {\n position: absolute;\n }\n .slick-slide:nth-last-of-type(2):not(:last-of-type) > div {\n position: absolute;\n }\n\n .slider-mobile-gallery {\n zoom: 0.8;\n border-radius: 8px;\n overflow: hidden;\n }\n\n .slick-slide:not(.slick-current) .banner-concealable {\n display: none;\n }\n\n .slick-slide {\n position: relative;\n }\n\n .slick-arrow {\n cursor: pointer;\n display: none !important;\n position: absolute;\n top: 45%;\n z-index: 1;\n }\n\n .slick-arrow::before {\n content: '' !important;\n }\n\n @media only screen and (max-width: 480px) {\n .slick-arrow {\n display: block !important;\n }\n }\n\n .slick-arrow.slick-disabled {\n display: none !important;\n }\n\n .slick-prev {\n left: 0;\n }\n\n .slick-next {\n right: 0;\n }\n\n .slick-dots {\n list-style: none;\n margin: 0;\n padding: 0;\n position: absolute;\n text-align: center;\n width: 100%;\n margin-left: -7px;\n }\n\n .slick-dots li {\n position: relative;\n display: inline-block;\n height: 20px;\n width: 20px;\n margin: 0;\n padding: 0;\n cursor: pointer;\n }\n\n .slick-dots li:before {\n background-color: var(--truekind-default-secondary);\n }\n .slick-dots li.slick-active {\n display: inline-block !important;\n }\n\n .slick-dots li:nth-child(n + 10) {\n display: none;\n }\n\n .slick-dots li button {\n background: transparent;\n border: 0;\n color: transparent;\n cursor: pointer;\n display: block;\n height: 20px;\n line-height: 0;\n outline: none;\n padding: 5px;\n width: 20px;\n }\n\n .slick-dots li button:focus:before,\n .slick-dots li button:hover:before {\n opacity: 0.5;\n }\n\n .slick-dots li button:before {\n background-color: var(--truekind-default-secondary, #292929);\n border-radius: 20px;\n content: ' ';\n display: block;\n height: 12px;\n left: 0;\n margin: 5px;\n position: absolute;\n top: 0;\n width: 12px;\n opacity: 1;\n }\n\n .slick-dots li:last-child button:before {\n ", "\n }\n\n .slick-dots li.slick-active button:before {\n background-color: var(--colors-pallete-primary-color, #cc4125) !important;\n opacity: 1;\n width: 12px;\n height: 12px;\n top: 0;\n }\n\n .slick-dots li:not(.slick-active) button:before {\n border: none;\n }\n\n @media only screen and (max-width: 768px) {\n div[data-testid='product-gallery-mobile-v1'] .slick-list > .slick-track {\n height: auto;\n }\n\n div[data-testid='product-gallery-mobile-v1'] .zoomWrapper.iiz > div {\n height: auto;\n }\n }\n"])), function (_a) {
|
|
@@ -21374,7 +21369,7 @@ var Container$8 = newStyled.div(templateObject_4$5 || (templateObject_4$5 = __ma
|
|
|
21374
21369
|
return lastImage &&
|
|
21375
21370
|
"\n background-color: var(--colors-pallete-primary-color, #cc4125) !important;\n opacity: 1;\n width: 12px;\n height: 12px;\n top: 0;\n ";
|
|
21376
21371
|
});
|
|
21377
|
-
var templateObject_1$
|
|
21372
|
+
var templateObject_1$7, templateObject_2$6, templateObject_3$6, templateObject_4$5;
|
|
21378
21373
|
|
|
21379
21374
|
var settings$1 = {
|
|
21380
21375
|
dots: true,
|
|
@@ -21433,7 +21428,7 @@ var ContentGallery = function (_a) {
|
|
|
21433
21428
|
}) }), void 0) }), void 0)] }, void 0));
|
|
21434
21429
|
};
|
|
21435
21430
|
|
|
21436
|
-
var NavButtonContainer$1 = newStyled.div(templateObject_1$
|
|
21431
|
+
var NavButtonContainer$1 = newStyled.div(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n height: 40px;\n width: 40px;\n"], ["\n height: 40px;\n width: 40px;\n"])));
|
|
21437
21432
|
var Button$1 = newStyled.button(templateObject_2$5 || (templateObject_2$5 = __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"])));
|
|
21438
21433
|
var Container$7 = newStyled.div(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject(["\n ", "\n position: relative;\n max-height: 524px;\n max-width: 440px;\n overflow: hidden;\n\n @media screen and (min-width: 480px) {\n margin: 0 auto;\n }\n\n & .slick-dots li.slick-active button:before {\n background-color: ", ";\n }\n\n .iiz {\n max-width: 100%;\n margin: 0;\n position: relative;\n overflow: hidden;\n display: inline-block;\n cursor: -webkit-zoom-in;\n cursor: zoom-in;\n }\n\n .zoomWrapper.iiz {\n max-height: 524px;\n vertical-align: top;\n }\n\n .iiz--drag .iiz__zoom-img--visible {\n cursor: -webkit-grab;\n cursor: grab;\n }\n\n .iiz__img {\n max-width: 100%;\n height: auto;\n display: block;\n pointer-events: none;\n visibility: visible;\n opacity: 1;\n }\n\n .iiz__img--hidden {\n visibility: hidden;\n opacity: 0;\n }\n\n .iiz__img--abs {\n width: 100%;\n height: 100%;\n position: absolute;\n top: 0;\n left: 0;\n display: block;\n }\n\n .iiz__zoom-img {\n width: auto !important;\n max-width: none !important;\n position: absolute;\n visibility: hidden;\n opacity: 0;\n pointer-events: none;\n display: block;\n }\n\n .iiz__zoom-img--visible {\n visibility: visible;\n opacity: 1;\n pointer-events: auto;\n cursor: -webkit-zoom-out;\n cursor: zoom-out;\n -ms-touch-action: none;\n touch-action: none;\n zoom: 1.2;\n }\n\n .iiz__zoom-portal {\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: 99999;\n }\n\n .iiz__btn {\n background: rgba(255, 255, 255, 0.8);\n max-width: 98px;\n min-width: fit-content;\n height: 32px;\n border: none;\n outline: none;\n padding: 0 8px;\n position: absolute;\n z-index: 5;\n text-decoration: none;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -moz-appearance: none;\n -webkit-appearance: none;\n appearance: none;\n }\n\n .iiz__btn:before {\n content: ' ';\n background-position: center;\n background-repeat: no-repeat;\n display: block;\n }\n\n .iiz__hint {\n bottom: 10%;\n right: 0;\n pointer-events: none;\n border-radius: 150px 0 0 150px;\n }\n\n .iiz__hint:before {\n content: '+';\n background-image: none;\n width: 17px;\n height: 17px;\n font-size: 19px;\n border-radius: 500px;\n border: 2px solid #292929;\n display: inline-block;\n position: relative;\n text-align: center;\n line-height: 17px;\n font-weight: 600;\n }\n\n .iiz__hint:after {\n content: 'Zoom in';\n font-size: 14px;\n font-weight: 600;\n display: inline-block;\n margin-left: 5px;\n }\n\n .iiz__close {\n border-radius: 150px;\n top: auto;\n right: 0;\n left: 0;\n margin: auto;\n bottom: 20px;\n visibility: hidden;\n opacity: 0;\n color: #292929;\n }\n\n .iiz__close--visible {\n visibility: visible;\n opacity: 1;\n cursor: pointer;\n }\n\n .iiz__close::before {\n content: ' ';\n width: 16px;\n height: 16px;\n background-image: -webkit-gradient(linear, left top, left bottom, from(#222), to(#222)),\n -webkit-gradient(linear, left top, left bottom, from(#222), to(#222));\n background-image: linear-gradient(#222, #222), linear-gradient(#222, #222);\n background-size: 65% 2px, 2px 65%;\n transform: rotate(45deg);\n border-radius: 500px;\n border: 2px solid #292929;\n }\n\n .iiz__close::after {\n content: 'Close';\n font-size: 14px;\n font-weight: 600;\n display: inline-block;\n margin-left: 5px;\n }\n"], ["\n ", "\n position: relative;\n max-height: 524px;\n max-width: 440px;\n overflow: hidden;\n\n @media screen and (min-width: 480px) {\n margin: 0 auto;\n }\n\n & .slick-dots li.slick-active button:before {\n background-color: ", ";\n }\n\n .iiz {\n max-width: 100%;\n margin: 0;\n position: relative;\n overflow: hidden;\n display: inline-block;\n cursor: -webkit-zoom-in;\n cursor: zoom-in;\n }\n\n .zoomWrapper.iiz {\n max-height: 524px;\n vertical-align: top;\n }\n\n .iiz--drag .iiz__zoom-img--visible {\n cursor: -webkit-grab;\n cursor: grab;\n }\n\n .iiz__img {\n max-width: 100%;\n height: auto;\n display: block;\n pointer-events: none;\n visibility: visible;\n opacity: 1;\n }\n\n .iiz__img--hidden {\n visibility: hidden;\n opacity: 0;\n }\n\n .iiz__img--abs {\n width: 100%;\n height: 100%;\n position: absolute;\n top: 0;\n left: 0;\n display: block;\n }\n\n .iiz__zoom-img {\n width: auto !important;\n max-width: none !important;\n position: absolute;\n visibility: hidden;\n opacity: 0;\n pointer-events: none;\n display: block;\n }\n\n .iiz__zoom-img--visible {\n visibility: visible;\n opacity: 1;\n pointer-events: auto;\n cursor: -webkit-zoom-out;\n cursor: zoom-out;\n -ms-touch-action: none;\n touch-action: none;\n zoom: 1.2;\n }\n\n .iiz__zoom-portal {\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: 99999;\n }\n\n .iiz__btn {\n background: rgba(255, 255, 255, 0.8);\n max-width: 98px;\n min-width: fit-content;\n height: 32px;\n border: none;\n outline: none;\n padding: 0 8px;\n position: absolute;\n z-index: 5;\n text-decoration: none;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -moz-appearance: none;\n -webkit-appearance: none;\n appearance: none;\n }\n\n .iiz__btn:before {\n content: ' ';\n background-position: center;\n background-repeat: no-repeat;\n display: block;\n }\n\n .iiz__hint {\n bottom: 10%;\n right: 0;\n pointer-events: none;\n border-radius: 150px 0 0 150px;\n }\n\n .iiz__hint:before {\n content: '+';\n background-image: none;\n width: 17px;\n height: 17px;\n font-size: 19px;\n border-radius: 500px;\n border: 2px solid #292929;\n display: inline-block;\n position: relative;\n text-align: center;\n line-height: 17px;\n font-weight: 600;\n }\n\n .iiz__hint:after {\n content: 'Zoom in';\n font-size: 14px;\n font-weight: 600;\n display: inline-block;\n margin-left: 5px;\n }\n\n .iiz__close {\n border-radius: 150px;\n top: auto;\n right: 0;\n left: 0;\n margin: auto;\n bottom: 20px;\n visibility: hidden;\n opacity: 0;\n color: #292929;\n }\n\n .iiz__close--visible {\n visibility: visible;\n opacity: 1;\n cursor: pointer;\n }\n\n .iiz__close::before {\n content: ' ';\n width: 16px;\n height: 16px;\n background-image: -webkit-gradient(linear, left top, left bottom, from(#222), to(#222)),\n -webkit-gradient(linear, left top, left bottom, from(#222), to(#222));\n background-image: linear-gradient(#222, #222), linear-gradient(#222, #222);\n background-size: 65% 2px, 2px 65%;\n transform: rotate(45deg);\n border-radius: 500px;\n border: 2px solid #292929;\n }\n\n .iiz__close::after {\n content: 'Close';\n font-size: 14px;\n font-weight: 600;\n display: inline-block;\n margin-left: 5px;\n }\n"])), function (_a) {
|
|
21439
21434
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
@@ -21443,7 +21438,7 @@ var Container$7 = newStyled.div(templateObject_3$5 || (templateObject_3$5 = __ma
|
|
|
21443
21438
|
var theme = _a.theme;
|
|
21444
21439
|
return theme.component.slideNavigation.slideDots.selectedDotColor;
|
|
21445
21440
|
});
|
|
21446
|
-
var templateObject_1$
|
|
21441
|
+
var templateObject_1$6, templateObject_2$5, templateObject_3$5;
|
|
21447
21442
|
|
|
21448
21443
|
var settings = {
|
|
21449
21444
|
dots: false,
|
|
@@ -21711,7 +21706,7 @@ var THUMBNAIL_SETTINGS = {
|
|
|
21711
21706
|
],
|
|
21712
21707
|
};
|
|
21713
21708
|
|
|
21714
|
-
var Container$4 = newStyled.div(templateObject_1$
|
|
21709
|
+
var Container$4 = newStyled.div(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n position: relative;\n"], ["\n display: flex;\n flex-direction: column;\n position: relative;\n"])));
|
|
21715
21710
|
var SliderContainer = newStyled.div(templateObject_2$4 || (templateObject_2$4 = __makeTemplateObject(["\n ", "\n position: relative;\n overflow: hidden;\n & .slick-dots li.slick-active button:before {\n background-color: ", ";\n }\n\n .slick-slide {\n position: relative;\n }\n\n .slick-arrow {\n cursor: pointer;\n position: absolute;\n top: 45%;\n z-index: 1;\n display: block !important;\n }\n\n .slick-arrow::before {\n content: '' !important;\n }\n\n @media only screen and (max-width: 480px) {\n .slick-arrow {\n display: block !important;\n }\n }\n\n .slick-arrow.slick-disabled {\n display: none !important;\n }\n\n .slick-prev {\n left: 5px;\n }\n\n .slick-next {\n right: 5px;\n }\n\n .slick-dots {\n bottom: 15px;\n list-style: none;\n margin: 0;\n padding: 0;\n position: absolute;\n text-align: center;\n width: 100%;\n }\n\n .slick-dots li {\n position: relative;\n display: inline-block;\n height: 20px;\n width: 20px;\n margin: 0;\n padding: 0;\n cursor: pointer;\n }\n\n .slick-dots li.slick-active {\n display: inline-block !important;\n }\n\n .slick-dots li:nth-child(n + 10) {\n display: none;\n }\n\n .slick-dots li button {\n background: transparent;\n border: 0;\n color: transparent;\n cursor: pointer;\n display: block;\n height: 20px;\n line-height: 0;\n outline: none;\n padding: 5px;\n width: 20px;\n }\n\n .slick-dots li button:focus:before,\n .slick-dots li button:hover:before {\n opacity: 0.5;\n }\n\n .slick-dots li button:before {\n background: rgba(27, 25, 25, 0.5);\n border-radius: 20px;\n content: ' ';\n display: block;\n height: 8px;\n left: 0;\n margin: 5px;\n position: absolute;\n top: 0;\n width: 8px;\n opacity: 1;\n }\n\n .slick-dots li.slick-active button:before {\n background-color: #fff;\n opacity: 1;\n width: 12px;\n height: 12px;\n top: -1px;\n }\n\n .slick-dots li:not(.slick-active) button:before {\n border: 1px solid hsla(0, 0%, 100%, 0.6);\n }\n"], ["\n ", "\n position: relative;\n overflow: hidden;\n & .slick-dots li.slick-active button:before {\n background-color: ", ";\n }\n\n .slick-slide {\n position: relative;\n }\n\n .slick-arrow {\n cursor: pointer;\n position: absolute;\n top: 45%;\n z-index: 1;\n display: block !important;\n }\n\n .slick-arrow::before {\n content: '' !important;\n }\n\n @media only screen and (max-width: 480px) {\n .slick-arrow {\n display: block !important;\n }\n }\n\n .slick-arrow.slick-disabled {\n display: none !important;\n }\n\n .slick-prev {\n left: 5px;\n }\n\n .slick-next {\n right: 5px;\n }\n\n .slick-dots {\n bottom: 15px;\n list-style: none;\n margin: 0;\n padding: 0;\n position: absolute;\n text-align: center;\n width: 100%;\n }\n\n .slick-dots li {\n position: relative;\n display: inline-block;\n height: 20px;\n width: 20px;\n margin: 0;\n padding: 0;\n cursor: pointer;\n }\n\n .slick-dots li.slick-active {\n display: inline-block !important;\n }\n\n .slick-dots li:nth-child(n + 10) {\n display: none;\n }\n\n .slick-dots li button {\n background: transparent;\n border: 0;\n color: transparent;\n cursor: pointer;\n display: block;\n height: 20px;\n line-height: 0;\n outline: none;\n padding: 5px;\n width: 20px;\n }\n\n .slick-dots li button:focus:before,\n .slick-dots li button:hover:before {\n opacity: 0.5;\n }\n\n .slick-dots li button:before {\n background: rgba(27, 25, 25, 0.5);\n border-radius: 20px;\n content: ' ';\n display: block;\n height: 8px;\n left: 0;\n margin: 5px;\n position: absolute;\n top: 0;\n width: 8px;\n opacity: 1;\n }\n\n .slick-dots li.slick-active button:before {\n background-color: #fff;\n opacity: 1;\n width: 12px;\n height: 12px;\n top: -1px;\n }\n\n .slick-dots li:not(.slick-active) button:before {\n border: 1px solid hsla(0, 0%, 100%, 0.6);\n }\n"])), function (_a) {
|
|
21716
21711
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
21717
21712
|
return borderRadiusVariant &&
|
|
@@ -21735,7 +21730,7 @@ var StyledImage = newStyled(Image$3)(templateObject_8$4 || (templateObject_8$4 =
|
|
|
21735
21730
|
var theme = _a.theme, isRatioSquare = _a.isRatioSquare;
|
|
21736
21731
|
return isRatioSquare ? '1/1' : theme.component.gallery.aspectRatio;
|
|
21737
21732
|
});
|
|
21738
|
-
var SlideItem = newStyled.div(templateObject_9$
|
|
21733
|
+
var SlideItem = newStyled.div(templateObject_9$3 || (templateObject_9$3 = __makeTemplateObject(["\n padding-right: ", ";\n"], ["\n padding-right: ", ";\n"])), function (_a) {
|
|
21739
21734
|
var paddingRight = _a.paddingRight;
|
|
21740
21735
|
return paddingRight || '12px';
|
|
21741
21736
|
});
|
|
@@ -21749,7 +21744,7 @@ var ThumbnailImage = newStyled(Image$3)(templateObject_10$3 || (templateObject_1
|
|
|
21749
21744
|
var borderRadius = _a.borderRadius;
|
|
21750
21745
|
return borderRadius || '0px';
|
|
21751
21746
|
});
|
|
21752
|
-
var templateObject_1$
|
|
21747
|
+
var templateObject_1$5, templateObject_2$4, templateObject_3$4, templateObject_4$4, templateObject_5$4, templateObject_6$4, templateObject_7$4, templateObject_8$4, templateObject_9$3, templateObject_10$3;
|
|
21753
21748
|
|
|
21754
21749
|
var ProductGalleryMobileV5 = function (_a) {
|
|
21755
21750
|
var images = _a.images, topTag = _a.topTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, imagesSliderConfig = _a.imagesSliderConfig, thumbnailSettings = _a.thumbnailSettings, _b = _a.isRatioSquare, isRatioSquare = _b === void 0 ? false : _b;
|
|
@@ -21776,7 +21771,7 @@ var ProductGalleryMobileV5 = function (_a) {
|
|
|
21776
21771
|
}) }), void 0)] }), void 0) }), void 0));
|
|
21777
21772
|
};
|
|
21778
21773
|
|
|
21779
|
-
var ScrollContainer = newStyled.div(templateObject_1$
|
|
21774
|
+
var ScrollContainer = newStyled.div(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n overflow-x: auto;\n width: 100%;\n @media (max-width: 768px) {\n width: 80vw;\n overflow-x: auto;\n }\n"], ["\n overflow-x: auto;\n width: 100%;\n @media (max-width: 768px) {\n width: 80vw;\n overflow-x: auto;\n }\n"])));
|
|
21780
21775
|
var TableElement$1 = newStyled.table(templateObject_2$3 || (templateObject_2$3 = __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; });
|
|
21781
21776
|
var TableCell$1 = newStyled.td(templateObject_3$3 || (templateObject_3$3 = __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; });
|
|
21782
21777
|
var TableHead$1 = newStyled.th(templateObject_4$3 || (templateObject_4$3 = __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; });
|
|
@@ -21784,10 +21779,10 @@ var Label$1 = newStyled('div')(templateObject_5$3 || (templateObject_5$3 = __mak
|
|
|
21784
21779
|
var TopLabel = newStyled(Label$1)(templateObject_6$3 || (templateObject_6$3 = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
21785
21780
|
var LeftLabel = newStyled(Label$1)(templateObject_7$3 || (templateObject_7$3 = __makeTemplateObject(["\n width: 20px;\n transform: rotate(270deg);\n"], ["\n width: 20px;\n transform: rotate(270deg);\n"])));
|
|
21786
21781
|
var Container$3 = newStyled('div')(templateObject_8$3 || (templateObject_8$3 = __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"])));
|
|
21787
|
-
var LabelText = newStyled('span')(templateObject_9$
|
|
21782
|
+
var LabelText = newStyled('span')(templateObject_9$2 || (templateObject_9$2 = __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"])));
|
|
21788
21783
|
var Column$1 = newStyled('div')(templateObject_10$2 || (templateObject_10$2 = __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"])));
|
|
21789
21784
|
var TableRow$1 = newStyled.tr(templateObject_11$1 || (templateObject_11$1 = __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; });
|
|
21790
|
-
var templateObject_1$
|
|
21785
|
+
var templateObject_1$4, templateObject_2$3, templateObject_3$3, templateObject_4$3, templateObject_5$3, templateObject_6$3, templateObject_7$3, templateObject_8$3, templateObject_9$2, templateObject_10$2, templateObject_11$1;
|
|
21791
21786
|
|
|
21792
21787
|
var getIsOdd$1 = function (number) { return number % 2 !== 0; };
|
|
21793
21788
|
var getCellColor$1 = function (index, cell) {
|
|
@@ -21827,7 +21822,7 @@ var SizeChartTableV2 = function (_a) {
|
|
|
21827
21822
|
}, borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }, index)); }) }, void 0)) : (jsxRuntime.jsx("tbody", { children: tableContent === null || tableContent === void 0 ? void 0 : tableContent.map(function (row, index) { return (jsxRuntime.jsx(TableRow$1, __assign$1({ className: getIsOdd$1(index) ? 'background' : '', backgroundColor: theme.colors.shades['10'].color }, { children: row === null || row === void 0 ? void 0 : row.map(function (cell, index) { return (jsxRuntime.jsx(TableCell$1, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }), index)); }) }, void 0))] }), void 0) }, void 0)] }, void 0)] }, void 0));
|
|
21828
21823
|
};
|
|
21829
21824
|
|
|
21830
|
-
var TableElement = newStyled.table(templateObject_1$
|
|
21825
|
+
var TableElement = newStyled.table(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n box-sizing: border-box;\n border-radius: ", ";\n border-bottom-left-radius: ", ";\n border-bottom-right-radius: ", ";\n border: 0.063rem solid var(--colors-shades-100-color);\n border-spacing: 0;\n font-size: 0.875rem;\n line-height: 3.125rem;\n width: 100%;\n color: var(--colors-shades-700-color);\n"], ["\n box-sizing: border-box;\n border-radius: ", ";\n border-bottom-left-radius: ", ";\n border-bottom-right-radius: ", ";\n border: 0.063rem solid var(--colors-shades-100-color);\n border-spacing: 0;\n font-size: 0.875rem;\n line-height: 3.125rem;\n width: 100%;\n color: var(--colors-shades-700-color);\n"])), function (props) { return (props.isSticky ? '0' : '0.5rem'); }, function (props) { return (props.isSticky ? '0.5rem' : '0'); }, function (props) { return (props.isSticky ? '0.5rem' : '0'); });
|
|
21831
21826
|
var TableCell = newStyled.td(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n border-bottom: 0.063rem solid var(--colors-shades-100-color);\n border-right: 0.063rem solid var(--colors-shades-100-color);\n line-height: normal;\n padding: 1rem 0;\n text-align: center;\n position: ", ";\n left: 0;\n z-index: ", ";\n border-bottom-left-radius: ", ";\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n font-weight: 600;\n text-align: center;\n }\n"], ["\n border-bottom: 0.063rem solid var(--colors-shades-100-color);\n border-right: 0.063rem solid var(--colors-shades-100-color);\n line-height: normal;\n padding: 1rem 0;\n text-align: center;\n position: ", ";\n left: 0;\n z-index: ", ";\n border-bottom-left-radius: ", ";\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n font-weight: 600;\n text-align: center;\n }\n"])), function (props) { return (props.isSticky ? 'sticky' : 'unset'); }, function (props) { return (props.isSticky ? 1 : 0); }, function (props) { return (props.isLast ? '0.5rem' : '0'); });
|
|
21832
21827
|
var TableHead = newStyled.th(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject(["\n border-bottom: 0.063rem solid var(--colors-shades-100-color);\n border-right: 0.063rem solid var(--colors-shades-100-color);\n font-weight: 600;\n line-height: normal;\n padding: 1rem;\n text-align: start;\n position: ", ";\n left: 0;\n z-index: ", ";\n background-color: ", ";\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n text-align: center;\n }\n"], ["\n border-bottom: 0.063rem solid var(--colors-shades-100-color);\n border-right: 0.063rem solid var(--colors-shades-100-color);\n font-weight: 600;\n line-height: normal;\n padding: 1rem;\n text-align: start;\n position: ", ";\n left: 0;\n z-index: ", ";\n background-color: ", ";\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n text-align: center;\n }\n"])), function (props) { return (props.isSticky ? 'sticky' : 'unset'); }, function (props) { return (props.isSticky ? 1 : 0); }, function (props) { return (props.isSticky ? '#fff6ef' : 'unset'); });
|
|
21833
21828
|
var Label = newStyled('div')(templateObject_4$2 || (templateObject_4$2 = __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"])));
|
|
@@ -21835,7 +21830,7 @@ newStyled(Label)(templateObject_5$2 || (templateObject_5$2 = __makeTemplateObjec
|
|
|
21835
21830
|
newStyled(Label)(templateObject_6$2 || (templateObject_6$2 = __makeTemplateObject(["\n width: 20px;\n transform: rotate(270deg);\n"], ["\n width: 20px;\n transform: rotate(270deg);\n"])));
|
|
21836
21831
|
var Container$2 = newStyled('div')(templateObject_7$2 || (templateObject_7$2 = __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"])));
|
|
21837
21832
|
newStyled('span')(templateObject_8$2 || (templateObject_8$2 = __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"])));
|
|
21838
|
-
var Column = newStyled('div')(templateObject_9$
|
|
21833
|
+
var Column = newStyled('div')(templateObject_9$1 || (templateObject_9$1 = __makeTemplateObject(["\n display: flex;\n min-width: 675px;\n align-items: flex-start;\n flex-direction: column;\n\n @media (max-width: 768px) {\n min-width: 100%;\n }\n"], ["\n display: flex;\n min-width: 675px;\n align-items: flex-start;\n flex-direction: column;\n\n @media (max-width: 768px) {\n min-width: 100%;\n }\n"])));
|
|
21839
21834
|
var TableRow = newStyled.tr(templateObject_10$1 || (templateObject_10$1 = __makeTemplateObject(["\n &:last-child {\n td {\n border-bottom: none;\n }\n }\n\n &.background {\n background-color: var(--colors-shades-10-color);\n }\n"], ["\n &:last-child {\n td {\n border-bottom: none;\n }\n }\n\n &.background {\n background-color: var(--colors-shades-10-color);\n }\n"])));
|
|
21840
21835
|
var Header = newStyled('div')(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n gap: 15px;\n display: flex;\n left: 0;\n border: 1px solid #e5e5e5;\n width: 100%;\n max-width: 92vw;\n position: sticky;\n padding: 14px 18px;\n border-top-left-radius: 12px;\n border-top-right-radius: 12px;\n border-bottom: none;\n background-color: #fff6ef;\n font-size: 0.875rem;\n font-weight: 600;\n\n @media (min-width: 400px) {\n max-width: 92.5vw;\n }\n"], ["\n gap: 15px;\n display: flex;\n left: 0;\n border: 1px solid #e5e5e5;\n width: 100%;\n max-width: 92vw;\n position: sticky;\n padding: 14px 18px;\n border-top-left-radius: 12px;\n border-top-right-radius: 12px;\n border-bottom: none;\n background-color: #fff6ef;\n font-size: 0.875rem;\n font-weight: 600;\n\n @media (min-width: 400px) {\n max-width: 92.5vw;\n }\n"])));
|
|
21841
21836
|
var Parent = newStyled('div')(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n max-width: 100vw;\n position: relative;\n\n @media (max-width: 768px) {\n overflow-x: auto;\n &::-webkit-scrollbar {\n display: none;\n }\n\n -ms-overflow-style: none;\n }\n"], ["\n max-width: 100vw;\n position: relative;\n\n @media (max-width: 768px) {\n overflow-x: auto;\n &::-webkit-scrollbar {\n display: none;\n }\n\n -ms-overflow-style: none;\n }\n"])));
|
|
@@ -21843,7 +21838,7 @@ var Arrow = newStyled('div')(templateObject_13 || (templateObject_13 = __makeTem
|
|
|
21843
21838
|
var TableHeader = newStyled('thead')(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n background-color: ", ";\n"], ["\n background-color: ", ";\n"])), function (props) {
|
|
21844
21839
|
return props.isColored ? 'var(--colors-pallete-primary-80-color)' : 'unset';
|
|
21845
21840
|
});
|
|
21846
|
-
var templateObject_1$
|
|
21841
|
+
var templateObject_1$3, templateObject_2$2, templateObject_3$2, templateObject_4$2, templateObject_5$2, templateObject_6$2, templateObject_7$2, templateObject_8$2, templateObject_9$1, templateObject_10$1, templateObject_11, templateObject_12, templateObject_13, templateObject_14;
|
|
21847
21842
|
|
|
21848
21843
|
var getIsOdd = function (number) { return number % 2 !== 0; };
|
|
21849
21844
|
// TODO: Refactor this color logic
|
|
@@ -21922,7 +21917,7 @@ var ArrowTip = function (_a) {
|
|
|
21922
21917
|
};
|
|
21923
21918
|
var trimLabel = function (label) { var _a, _b; return (_b = (_a = label === null || label === void 0 ? void 0 : label.trim()) === null || _a === void 0 ? void 0 : _a.split(' ')) === null || _b === void 0 ? void 0 : _b[0]; };
|
|
21924
21919
|
|
|
21925
|
-
var FlexContainer = newStyled.div(templateObject_1$
|
|
21920
|
+
var FlexContainer = newStyled.div(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n display: flex;\n\n ", "\n"], ["\n display: flex;\n\n ", "\n"])), function (_a) {
|
|
21926
21921
|
var theme = _a.theme;
|
|
21927
21922
|
return theme.name === 'TheSpaDr' &&
|
|
21928
21923
|
"\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 ";
|
|
@@ -21992,12 +21987,12 @@ var StyledPrice = newStyled(PriceLabelV2$1)(templateObject_8$1 || (templateObjec
|
|
|
21992
21987
|
}
|
|
21993
21988
|
return shades[700].color;
|
|
21994
21989
|
});
|
|
21995
|
-
var Container$1 = newStyled.div(templateObject_9
|
|
21990
|
+
var Container$1 = newStyled.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n margin-top: 20px;\n"], ["\n margin-top: 20px;\n"])));
|
|
21996
21991
|
var TooltipWrapper = newStyled.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n margin: ", ";\n"], ["\n margin: ", ";\n"])), function (_a) {
|
|
21997
21992
|
var theme = _a.theme;
|
|
21998
21993
|
return theme.component.autoship.tooltip.margin;
|
|
21999
21994
|
});
|
|
22000
|
-
var templateObject_1$
|
|
21995
|
+
var templateObject_1$2, templateObject_2$1, templateObject_3$1, templateObject_4$1, templateObject_5$1, templateObject_6$1, templateObject_7$1, templateObject_8$1, templateObject_9, templateObject_10;
|
|
22001
21996
|
|
|
22002
21997
|
var SubscriptionPlanSelector = function (_a) {
|
|
22003
21998
|
var children = _a.children, benefits = _a.benefits, tooltip = _a.tooltip, pricing = _a.pricing, frequency = _a.frequency, onChange = _a.onChange, className = _a.className, discountTagClassName = _a.discountTagClassName, closeIcon = _a.closeIcon, currencySymbol = _a.currencySymbol, discountLabel = _a.discountLabel, radios = _a.radios, termsAndConditions = _a.termsAndConditions;
|
|
@@ -22079,7 +22074,7 @@ var SubscriptionPlanSelector = function (_a) {
|
|
|
22079
22074
|
}, useV2Style: true, checked: !radiosStatuses.oneTime.disabled && radiosStatuses.oneTime.checked, disabled: radiosStatuses.oneTime.disabled }, void 0), jsxRuntime.jsx(StyledPrice, { testId: "single-purchase", finalPrice: "$".concat(decimalFormat(Number(discountedPrice))), disabled: radiosStatuses.oneTime.disabled, highlighted: !radiosStatuses.oneTime.disabled && radiosStatuses.oneTime.highlighted, size: exports.ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(listPrice))) }, void 0)] }), void 0)] }), void 0));
|
|
22080
22075
|
};
|
|
22081
22076
|
|
|
22082
|
-
var Container = newStyled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n width: 100%;\n padding: 12px;\n border: 1px solid #e5e5e5;\n border-radius: 8px;\n gap: 14px;\n margin: auto;\n"], ["\n display: flex;\n flex-direction: column;\n width: 100%;\n padding: 12px;\n border: 1px solid #e5e5e5;\n border-radius: 8px;\n gap: 14px;\n margin: auto;\n"])));
|
|
22077
|
+
var Container = newStyled.div(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n width: 100%;\n padding: 12px;\n border: 1px solid #e5e5e5;\n border-radius: 8px;\n gap: 14px;\n margin: auto;\n"], ["\n display: flex;\n flex-direction: column;\n width: 100%;\n padding: 12px;\n border: 1px solid #e5e5e5;\n border-radius: 8px;\n gap: 14px;\n margin: auto;\n"])));
|
|
22083
22078
|
var Body = newStyled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n gap: 8px;\n width: 100%;\n height: ", ";\n"], ["\n display: flex;\n gap: 8px;\n width: 100%;\n height: ", ";\n"])), function (_a) {
|
|
22084
22079
|
var height = _a.height;
|
|
22085
22080
|
return height;
|
|
@@ -22092,18 +22087,17 @@ var Benefits = newStyled.div(templateObject_4 || (templateObject_4 = __makeTempl
|
|
|
22092
22087
|
var theme = _a.theme;
|
|
22093
22088
|
return theme.colors.shades['10'].color;
|
|
22094
22089
|
});
|
|
22095
|
-
var
|
|
22096
|
-
var
|
|
22097
|
-
var ImageWrapper = newStyled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n position: relative;\n display: flex;\n width: ", ";\n justify-content: center;\n align-items: center;\n border-radius: 8px;\n"], ["\n position: relative;\n display: flex;\n width: ", ";\n justify-content: center;\n align-items: center;\n border-radius: 8px;\n"])), function (_a) {
|
|
22090
|
+
var Actions = newStyled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n display: flex;\n width: 100%;\n gap: 8px;\n"], ["\n display: flex;\n width: 100%;\n gap: 8px;\n"])));
|
|
22091
|
+
var ImageWrapper = newStyled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n position: relative;\n display: flex;\n width: ", ";\n justify-content: center;\n align-items: center;\n border-radius: 8px;\n"], ["\n position: relative;\n display: flex;\n width: ", ";\n justify-content: center;\n align-items: center;\n border-radius: 8px;\n"])), function (_a) {
|
|
22098
22092
|
var width = _a.width;
|
|
22099
22093
|
return width;
|
|
22100
22094
|
});
|
|
22101
|
-
var RatingWrapper = newStyled.div(
|
|
22102
|
-
var RatingText = newStyled.span(
|
|
22095
|
+
var RatingWrapper = newStyled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n position: absolute;\n bottom: 5px;\n left: 50%;\n transform: translateX(-50%);\n display: flex;\n justify-content: center;\n align-items: center;\n background-color: white;\n border-radius: 8px;\n padding: 4px 8px;\n width: 95%;\n"], ["\n position: absolute;\n bottom: 5px;\n left: 50%;\n transform: translateX(-50%);\n display: flex;\n justify-content: center;\n align-items: center;\n background-color: white;\n border-radius: 8px;\n padding: 4px 8px;\n width: 95%;\n"])));
|
|
22096
|
+
var RatingText = newStyled.span(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n font-size: ", ";\n font-weight: 600;\n margin-bottom: -3%;\n color: #292929;\n"], ["\n font-size: ", ";\n font-weight: 600;\n margin-bottom: -3%;\n color: #292929;\n"])), function (_a) {
|
|
22103
22097
|
var fontSize = _a.fontSize;
|
|
22104
22098
|
return fontSize;
|
|
22105
22099
|
});
|
|
22106
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8
|
|
22100
|
+
var templateObject_1$1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
|
|
22107
22101
|
|
|
22108
22102
|
var Title = function (_a) {
|
|
22109
22103
|
var content = _a.content, bold = _a.bold, dangerouslySetInnerHTML = _a.dangerouslySetInnerHTML;
|
|
@@ -22116,18 +22110,33 @@ var Title = function (_a) {
|
|
|
22116
22110
|
return jsxRuntime.jsx(jsxRuntime.Fragment, { children: content }, void 0);
|
|
22117
22111
|
};
|
|
22118
22112
|
|
|
22113
|
+
var style = ".benefit{font-size:14px;line-height:22px;display:inline-block;margin:0;@media screen and (max-width:768px){font-size:12px;line-height:16px;}}";
|
|
22114
|
+
|
|
22115
|
+
var Benefit = newStyled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: 8px;\n"], ["\n display: flex;\n align-items: center;\n gap: 8px;\n"])));
|
|
22116
|
+
var templateObject_1;
|
|
22117
|
+
|
|
22118
|
+
var renderBenefit = function (text, className) {
|
|
22119
|
+
if (className === void 0) { className = style.benefit; }
|
|
22120
|
+
if (typeof text === 'string') {
|
|
22121
|
+
return jsxRuntime.jsx("span", { className: className, dangerouslySetInnerHTML: { __html: text } }, void 0);
|
|
22122
|
+
}
|
|
22123
|
+
return text;
|
|
22124
|
+
};
|
|
22125
|
+
var OfferAtCartBenefits = function (_a) {
|
|
22126
|
+
var benefits = _a.benefits;
|
|
22127
|
+
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: benefits.map(function (_a) {
|
|
22128
|
+
var _b;
|
|
22129
|
+
var icon = _a.icon, text = _a.text, className = _a.className;
|
|
22130
|
+
return (jsxRuntime.jsxs(Benefit, { children: [(icon === null || icon === void 0 ? void 0 : icon.name) && (jsxRuntime.jsx(Icon$1, { name: icon.name, fill: icon.fill, width: icon.width, height: icon.height }, void 0)), renderBenefit(text, className)] }, (_b = icon === null || icon === void 0 ? void 0 : icon.name) !== null && _b !== void 0 ? _b : text.toString()));
|
|
22131
|
+
}) }, void 0));
|
|
22132
|
+
};
|
|
22133
|
+
|
|
22119
22134
|
var OfferAtCart = function (_a) {
|
|
22120
22135
|
var className = _a.className, _b = _a.title, titleContent = _b.content, bold = _b.bold, _c = _a.image, src = _c.src, alt = _c.alt, benefits = _a.benefits, _d = _a.ctaText, ctaText = _d === void 0 ? 'Yes, I want this offer' : _d, sizeOptions = _a.sizeOptions, rating = _a.rating, onAddToCart = _a.onAddToCart;
|
|
22121
22136
|
var theme = useTheme();
|
|
22122
22137
|
var isMobile = useDeviceType() === 'mobile';
|
|
22123
22138
|
var _e = React$2.useState(), selectedSize = _e[0], setSelectedSize = _e[1];
|
|
22124
22139
|
var _f = React$2.useState(false), showErrorMessage = _f[0], setShowErrorMessage = _f[1];
|
|
22125
|
-
var rawBenefitStyles = {
|
|
22126
|
-
fontSize: isMobile ? '12px' : '14px',
|
|
22127
|
-
lineHeight: isMobile ? '16px' : '22px',
|
|
22128
|
-
display: 'inline-block',
|
|
22129
|
-
margin: 0,
|
|
22130
|
-
};
|
|
22131
22140
|
var getTitleProps = function () {
|
|
22132
22141
|
if (typeof titleContent === 'string') {
|
|
22133
22142
|
return { content: titleContent, bold: bold };
|
|
@@ -22139,16 +22148,6 @@ var OfferAtCart = function (_a) {
|
|
|
22139
22148
|
return { content: titleContent };
|
|
22140
22149
|
}
|
|
22141
22150
|
};
|
|
22142
|
-
var renderBenefit = function (text) {
|
|
22143
|
-
if (typeof text === 'string') {
|
|
22144
|
-
return jsxRuntime.jsx("span", { style: rawBenefitStyles, dangerouslySetInnerHTML: { __html: text } }, void 0);
|
|
22145
|
-
}
|
|
22146
|
-
return text;
|
|
22147
|
-
};
|
|
22148
|
-
var BenefitsSection = (jsxRuntime.jsx(Benefits, __assign$1({ height: isMobile ? '100%' : '65%' }, { children: benefits.map(function (_a) {
|
|
22149
|
-
var icon = _a.icon, text = _a.text;
|
|
22150
|
-
return icon && (jsxRuntime.jsxs(Benefit, { children: [jsxRuntime.jsx(Icon$1, { name: icon.name, fill: icon.fill, width: icon.width, height: icon.height }, void 0), renderBenefit(text)] }, icon.name));
|
|
22151
|
-
}) }), void 0));
|
|
22152
22151
|
var ActionsSection = (jsxRuntime.jsxs(Actions, { children: [jsxRuntime.jsx(SimpleDropdown, { placeHolder: "Size", options: sizeOptions, onChange: function (sizeOption) {
|
|
22153
22152
|
setShowErrorMessage(false);
|
|
22154
22153
|
setSelectedSize(sizeOption);
|
|
@@ -22162,7 +22161,7 @@ var OfferAtCart = function (_a) {
|
|
|
22162
22161
|
}
|
|
22163
22162
|
} }, void 0)] }, void 0));
|
|
22164
22163
|
var ErrorMessage = showErrorMessage ? (jsxRuntime.jsx(Text$7, __assign$1({ variant: "body", weight: "demi", size: "small", color: theme.colors.semantic.urgent.color }, { children: "Please select a size first" }), void 0)) : null;
|
|
22165
|
-
return (jsxRuntime.jsxs(Container, __assign$1({ className: className }, { children: [jsxRuntime.jsx(Title, __assign$1({}, getTitleProps()), void 0), jsxRuntime.jsxs(Body, __assign$1({ height: isMobile ? '120px' : '162px' }, { children: [jsxRuntime.jsxs(ImageWrapper, __assign$1({ width: isMobile ? '130px' : '122px' }, { children: [!!rating && (jsxRuntime.jsxs(RatingWrapper, { children: [jsxRuntime.jsx(Rating, { rating: rating, size: isMobile ? exports.ComponentSize.XXSmall : exports.ComponentSize.XSmall }, void 0), jsxRuntime.jsxs(RatingText, __assign$1({ fontSize: isMobile ? '9px' : '13px' }, { children: [rating, "/5"] }), void 0)] }, void 0)), jsxRuntime.jsx(Image$3, { src: src, alt: alt, width: "100%", height: "100%", objectFit: "cover", borderRadius: "8px" }, void 0)] }), void 0), jsxRuntime.jsxs(RightContent, { children: [
|
|
22164
|
+
return (jsxRuntime.jsxs(Container, __assign$1({ className: className }, { children: [jsxRuntime.jsx(Title, __assign$1({}, getTitleProps()), void 0), jsxRuntime.jsxs(Body, __assign$1({ height: isMobile ? '120px' : '162px' }, { children: [jsxRuntime.jsxs(ImageWrapper, __assign$1({ width: isMobile ? '130px' : '122px' }, { children: [!!rating && (jsxRuntime.jsxs(RatingWrapper, { children: [jsxRuntime.jsx(Rating, { rating: rating, size: isMobile ? exports.ComponentSize.XXSmall : exports.ComponentSize.XSmall }, void 0), jsxRuntime.jsxs(RatingText, __assign$1({ fontSize: isMobile ? '9px' : '13px' }, { children: [rating, "/5"] }), void 0)] }, void 0)), jsxRuntime.jsx(Image$3, { src: src, alt: alt, width: "100%", height: "100%", objectFit: "cover", borderRadius: "8px" }, void 0)] }), void 0), jsxRuntime.jsxs(RightContent, { children: [jsxRuntime.jsx(Benefits, __assign$1({ height: isMobile ? '100%' : '65%' }, { children: jsxRuntime.jsx(OfferAtCartBenefits, { benefits: benefits }, void 0) }), void 0), !isMobile && ActionsSection, !isMobile && ErrorMessage] }, void 0)] }), void 0), isMobile && ActionsSection, isMobile && ErrorMessage] }), void 0));
|
|
22166
22165
|
};
|
|
22167
22166
|
|
|
22168
22167
|
exports.AbsorbencyLevel = AbsorbencyLevel;
|