@trafilea/afrodita-components 6.51.6 → 6.53.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/index.css +1 -0
- package/build/index.d.ts +3 -1
- package/build/index.esm.css +1 -0
- package/build/index.esm.js +685 -650
- package/build/index.esm.js.map +1 -1
- package/build/index.js +685 -649
- package/build/index.js.map +1 -1
- package/package.json +1 -1
package/build/index.esm.js
CHANGED
|
@@ -3189,7 +3189,7 @@ var getStylesBySize$g = function (size) {
|
|
|
3189
3189
|
};
|
|
3190
3190
|
}
|
|
3191
3191
|
};
|
|
3192
|
-
var Container$
|
|
3192
|
+
var Container$1y = newStyled.div(templateObject_1$2z || (templateObject_1$2z = __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) {
|
|
3193
3193
|
var backgroundColor = _a.backgroundColor;
|
|
3194
3194
|
return backgroundColor;
|
|
3195
3195
|
}, function (_a) {
|
|
@@ -3211,7 +3211,7 @@ var Container$1x = newStyled.div(templateObject_1$2y || (templateObject_1$2y = _
|
|
|
3211
3211
|
var size = _a.size;
|
|
3212
3212
|
return (_b = getStylesBySize$g(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
3213
3213
|
});
|
|
3214
|
-
var H3$2 = newStyled.h3(templateObject_2$
|
|
3214
|
+
var H3$2 = newStyled.h3(templateObject_2$1S || (templateObject_2$1S = __makeTemplateObject(["\n color: ", ";\n font-weight: bold;\n margin: 0;\n font-size: ", ";\n line-height: ", ";\n"], ["\n color: ", ";\n font-weight: bold;\n margin: 0;\n font-size: ", ";\n line-height: ", ";\n"])), function (_a) {
|
|
3215
3215
|
var textColor = _a.textColor;
|
|
3216
3216
|
return textColor;
|
|
3217
3217
|
}, function (_a) {
|
|
@@ -3226,9 +3226,9 @@ var H3$2 = newStyled.h3(templateObject_2$1R || (templateObject_2$1R = __makeTemp
|
|
|
3226
3226
|
var ClubOfferTag = function (_a) {
|
|
3227
3227
|
var clubOfferText = _a.clubOfferText, className = _a.className, disabled = _a.disabled, _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#882A2B' : _b, _c = _a.borderColor, borderColor = _c === void 0 ? 'transparent' : _c, _d = _a.textColor, textColor = _d === void 0 ? '#fff' : _d, _e = _a.size, size = _e === void 0 ? ComponentSize.Medium : _e, style = _a.style;
|
|
3228
3228
|
var theme = useTheme();
|
|
3229
|
-
return (jsx$1(Container$
|
|
3229
|
+
return (jsx$1(Container$1y, __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: jsx$1(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));
|
|
3230
3230
|
};
|
|
3231
|
-
var templateObject_1$
|
|
3231
|
+
var templateObject_1$2z, templateObject_2$1S;
|
|
3232
3232
|
|
|
3233
3233
|
var getStylesBySize$f = function (size, bordersRounded, theme) {
|
|
3234
3234
|
var _a, _b, _c;
|
|
@@ -3259,7 +3259,7 @@ var getStylesBySize$f = function (size, bordersRounded, theme) {
|
|
|
3259
3259
|
};
|
|
3260
3260
|
}
|
|
3261
3261
|
};
|
|
3262
|
-
var Container$
|
|
3262
|
+
var Container$1x = newStyled.div(templateObject_1$2y || (templateObject_1$2y = __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) {
|
|
3263
3263
|
var backgroundColor = _a.backgroundColor;
|
|
3264
3264
|
return backgroundColor;
|
|
3265
3265
|
}, function (_a) {
|
|
@@ -3281,7 +3281,7 @@ var Container$1w = newStyled.div(templateObject_1$2x || (templateObject_1$2x = _
|
|
|
3281
3281
|
var size = _a.size;
|
|
3282
3282
|
return (_b = getStylesBySize$f(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
3283
3283
|
});
|
|
3284
|
-
var H3$1 = newStyled.h3(templateObject_2$
|
|
3284
|
+
var H3$1 = newStyled.h3(templateObject_2$1R || (templateObject_2$1R = __makeTemplateObject(["\n color: ", ";\n font-weight: bold;\n margin: 0;\n font-size: ", ";\n line-height: ", ";\n"], ["\n color: ", ";\n font-weight: bold;\n margin: 0;\n font-size: ", ";\n line-height: ", ";\n"])), function (_a) {
|
|
3285
3285
|
var textColor = _a.textColor;
|
|
3286
3286
|
return textColor;
|
|
3287
3287
|
}, function (_a) {
|
|
@@ -3296,9 +3296,9 @@ var H3$1 = newStyled.h3(templateObject_2$1Q || (templateObject_2$1Q = __makeTemp
|
|
|
3296
3296
|
var DiscountTag$4 = function (_a) {
|
|
3297
3297
|
var discount = _a.discount, offText = _a.offText, savings = _a.savings, _b = _a.showSavings, showSavings = _b === void 0 ? false : _b, disabled = _a.disabled, _c = _a.backgroundColor, backgroundColor = _c === void 0 ? '#fff' : _c, _d = _a.borderColor, borderColor = _d === void 0 ? 'transparent' : _d, _e = _a.textColor, textColor = _e === void 0 ? '#fff' : _e, _f = _a.size, size = _f === void 0 ? ComponentSize.Medium : _f, style = _a.style, _g = _a.bordersRounded, bordersRounded = _g === void 0 ? false : _g;
|
|
3298
3298
|
var theme = useTheme();
|
|
3299
|
-
return (jsx$1(Container$
|
|
3299
|
+
return (jsx$1(Container$1x, __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: jsxs$1(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));
|
|
3300
3300
|
};
|
|
3301
|
-
var templateObject_1$
|
|
3301
|
+
var templateObject_1$2y, templateObject_2$1R;
|
|
3302
3302
|
|
|
3303
3303
|
var Viewports = {
|
|
3304
3304
|
mobile: 'mobile',
|
|
@@ -3407,8 +3407,8 @@ var getFontSize = function (size, theme, finalPriceStyled, finalPriceStyledSmall
|
|
|
3407
3407
|
return (_c = getStylesBySize$e(size, theme)) === null || _c === void 0 ? void 0 : _c.fontSize;
|
|
3408
3408
|
}
|
|
3409
3409
|
};
|
|
3410
|
-
var Container$
|
|
3411
|
-
var Price$1 = newStyled.p(templateObject_2$
|
|
3410
|
+
var Container$1w = newStyled.div(templateObject_1$2x || (templateObject_1$2x = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
3411
|
+
var Price$1 = newStyled.p(templateObject_2$1Q || (templateObject_2$1Q = __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) {
|
|
3412
3412
|
var weight = _a.weight;
|
|
3413
3413
|
return (weight ? weight : '400');
|
|
3414
3414
|
}, function (_a) {
|
|
@@ -3432,7 +3432,7 @@ var Price$1 = newStyled.p(templateObject_2$1P || (templateObject_2$1P = __makeTe
|
|
|
3432
3432
|
var finalPriceStyledSmall = _a.finalPriceStyledSmall, size = _a.size;
|
|
3433
3433
|
return finalPriceStyledSmall ? (size === 'large' ? '-6px' : '-7px') : '0';
|
|
3434
3434
|
});
|
|
3435
|
-
var TagContainer = newStyled.div(templateObject_3$
|
|
3435
|
+
var TagContainer = newStyled.div(templateObject_3$1q || (templateObject_3$1q = __makeTemplateObject(["\n margin: ", ";\n display: flex;\n align-items: center;\n"], ["\n margin: ", ";\n display: flex;\n align-items: center;\n"])), function (_a) {
|
|
3436
3436
|
var _b;
|
|
3437
3437
|
var size = _a.size;
|
|
3438
3438
|
return (_b = getStylesBySize$e(size)) === null || _b === void 0 ? void 0 : _b.margin;
|
|
@@ -3463,11 +3463,11 @@ var PriceLabel$1 = function (_a) {
|
|
|
3463
3463
|
: ComponentSize.XSmall;
|
|
3464
3464
|
return (jsx$1(Price$1, __assign$1({ size: sizeProp, color: theme.component.pricing.priceLabel.price.originalPriceColor, margin: !clubStyle, underlined: originalPriceUnderlined, "data-testid": getTestId$2(testId, 'original-product-price'), theme: theme }, { children: originalPrice }), void 0));
|
|
3465
3465
|
};
|
|
3466
|
-
return (jsxs$1(Container$
|
|
3466
|
+
return (jsxs$1(Container$1w, __assign$1({}, rest, { id: "priceLabel" }, { children: [clubStyle ? (jsxs$1(Fragment$2, { children: [!!originalPrice && jsx$1(OriginalPrice, {}, void 0), jsx$1(Price$1, __assign$1({ margin: true, "data-testid": getTestId$2(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: finalPrice }), void 0)] }, void 0)) : (jsxs$1(Fragment$2, { children: [jsx$1(Price$1, __assign$1({ margin: true, "data-testid": getTestId$2(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: finalPrice }), void 0), !!originalPrice && jsx$1(OriginalPrice, {}, void 0)] }, void 0)), discount && (jsx$1(TagContainer, __assign$1({ size: size }, { children: jsx$1(DiscountTag$4, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
|
|
3467
3467
|
};
|
|
3468
|
-
var templateObject_1$
|
|
3468
|
+
var templateObject_1$2x, templateObject_2$1Q, templateObject_3$1q;
|
|
3469
3469
|
|
|
3470
|
-
var FinalPriceStyledContainer$3 = newStyled.div(templateObject_1$
|
|
3470
|
+
var FinalPriceStyledContainer$3 = newStyled.div(templateObject_1$2w || (templateObject_1$2w = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
3471
3471
|
var PriceLabelV2$1 = function (_a) {
|
|
3472
3472
|
var _b;
|
|
3473
3473
|
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 ? 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"]);
|
|
@@ -3520,7 +3520,7 @@ var PriceLabelV2$1 = function (_a) {
|
|
|
3520
3520
|
var savetoString = saveto.toFixed(2);
|
|
3521
3521
|
var OriginalPrice = function () { return (jsx$1(Price$1, __assign$1({ size: originalPriceStyled ? size : ComponentSize.Small, color: theme.component.pricing.priceLabel.price.originalPriceColor ||
|
|
3522
3522
|
theme.colors.shades['300'].color, margin: true, underlined: originalPriceUnderlined, "data-testid": getTestId$2(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
|
|
3523
|
-
return (jsxs$1(Container$
|
|
3523
|
+
return (jsxs$1(Container$1w, __assign$1({}, rest, { id: "priceLabelV2" }, { children: [isOriginalPrice && jsx$1(OriginalPrice, {}, void 0), jsxs$1(FinalPriceStyledContainer$3, __assign$1({ "data-testid": getTestId$2(testId, 'final-product-price') }, { children: [jsx$1(Price$1, __assign$1({ margin: true, finalPriceStyledSmall: true }, priceCommonProps, { size: size }, { children: currencySymbol }), void 0), jsx$1(Price$1, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size }, { children: finalPriceArray[0]
|
|
3524
3524
|
? finalPriceArray[0]
|
|
3525
3525
|
: (_b = "".concat(productFinalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1] }), void 0), jsx$1(Price$1, __assign$1({ finalPriceStyledSmall: true, style: {
|
|
3526
3526
|
marginTop: '-6px',
|
|
@@ -3536,11 +3536,11 @@ var PriceLabelV2$1 = function (_a) {
|
|
|
3536
3536
|
lineHeight: '22px',
|
|
3537
3537
|
} }), void 0)) }), void 0))] }), void 0));
|
|
3538
3538
|
};
|
|
3539
|
-
var templateObject_1$
|
|
3539
|
+
var templateObject_1$2w;
|
|
3540
3540
|
|
|
3541
|
-
var FinalPriceStyledContainer$2 = newStyled.div(templateObject_1$
|
|
3542
|
-
var ContainerDirectionColumn = newStyled.div(templateObject_2$
|
|
3543
|
-
var DiscountEachOneContainer = newStyled.div(templateObject_3$
|
|
3541
|
+
var FinalPriceStyledContainer$2 = newStyled.div(templateObject_1$2v || (templateObject_1$2v = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
3542
|
+
var ContainerDirectionColumn = newStyled.div(templateObject_2$1P || (templateObject_2$1P = __makeTemplateObject(["\n display: column;\n align-items: center;\n"], ["\n display: column;\n align-items: center;\n"])));
|
|
3543
|
+
var DiscountEachOneContainer = newStyled.div(templateObject_3$1p || (templateObject_3$1p = __makeTemplateObject(["\n display: flex;\n padding-left: 0.5rem;\n"], ["\n display: flex;\n padding-left: 0.5rem;\n"])));
|
|
3544
3544
|
var PriceLabelV3 = function (_a) {
|
|
3545
3545
|
var _b;
|
|
3546
3546
|
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 ? ComponentSize.Small : _e, _f = _a.bordersRounded, bordersRounded = _f === void 0 ? false : _f, _g = _a.savingsDisplay, savingsDisplay = _g === void 0 ? true : _g, itemsQuantity = _a.itemsQuantity, packUnitPrice = _a.packUnitPrice, rest = __rest(_a, ["finalPrice", "originalPrice", "discount", "clubOffer", "color", "testId", "originalPriceStyled", "originalPriceUnderlined", "size", "bordersRounded", "savingsDisplay", "itemsQuantity", "packUnitPrice"]);
|
|
@@ -3595,7 +3595,7 @@ var PriceLabelV3 = function (_a) {
|
|
|
3595
3595
|
return null;
|
|
3596
3596
|
return (jsxs$1(DiscountEachOneContainer, __assign$1({ "data-testid": getTestId$2(testId, 'each-one-price') }, { children: [jsxs$1(Price$1, __assign$1({}, priceCommonProps, { weight: 600 }, { children: ["(", packUnitPrice] }), void 0), jsx$1(Price$1, __assign$1({}, priceCommonProps, { weight: 400 }, { children: "/each" }), void 0), jsx$1(Price$1, __assign$1({}, priceCommonProps, { weight: 600 }, { children: ")" }), void 0)] }), void 0));
|
|
3597
3597
|
};
|
|
3598
|
-
return (jsxs$1(ContainerDirectionColumn, __assign$1({}, rest, { children: [jsx$1(Container$
|
|
3598
|
+
return (jsxs$1(ContainerDirectionColumn, __assign$1({}, rest, { children: [jsx$1(Container$1w, __assign$1({ style: { paddingBottom: '0.5rem' } }, { children: isOriginalPrice && jsx$1(OriginalPrice, {}, void 0) }), void 0), jsxs$1(Container$1w, { children: [jsxs$1(FinalPriceStyledContainer$2, __assign$1({ "data-testid": getTestId$2(testId, 'final-product-price') }, { children: [jsx$1(Price$1, __assign$1({ margin: true, finalPriceStyledSmall: true, style: {
|
|
3599
3599
|
marginTop: '-5px',
|
|
3600
3600
|
} }, priceCommonProps, { size: size }, { children: currencySymbol }), void 0), jsx$1(Price$1, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size }, { children: finalPriceArray[0] ? finalPriceArray[0] : (_b = "".concat(finalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1] }), void 0), jsx$1(Price$1, __assign$1({ finalPriceStyledSmall: true, style: {
|
|
3601
3601
|
marginTop: '-6px',
|
|
@@ -3611,10 +3611,10 @@ var PriceLabelV3 = function (_a) {
|
|
|
3611
3611
|
lineHeight: '22px',
|
|
3612
3612
|
} }), void 0)) }), void 0))] }, void 0)] }), void 0));
|
|
3613
3613
|
};
|
|
3614
|
-
var templateObject_1$
|
|
3614
|
+
var templateObject_1$2v, templateObject_2$1P, templateObject_3$1p;
|
|
3615
3615
|
|
|
3616
|
-
var Container$
|
|
3617
|
-
var Price = newStyled.p(templateObject_2$
|
|
3616
|
+
var Container$1v = newStyled.div(templateObject_1$2u || (templateObject_1$2u = __makeTemplateObject(["\n display: flex;\n flex-direction: column-reverse;\n align-items: flex-end;\n"], ["\n display: flex;\n flex-direction: column-reverse;\n align-items: flex-end;\n"])));
|
|
3617
|
+
var Price = newStyled.p(templateObject_2$1O || (templateObject_2$1O = __makeTemplateObject(["\n font-weight: ", ";\n font-size: ", ";\n line-height: 1.25rem;\n color: ", ";\n text-decoration: ", ";\n margin: 0;\n position: relative;\n"], ["\n font-weight: ", ";\n font-size: ", ";\n line-height: 1.25rem;\n color: ", ";\n text-decoration: ", ";\n margin: 0;\n position: relative;\n"])), function (_a) {
|
|
3618
3618
|
var weight = _a.weight;
|
|
3619
3619
|
return weight !== null && weight !== void 0 ? weight : '400';
|
|
3620
3620
|
}, function (_a) {
|
|
@@ -3627,7 +3627,7 @@ var Price = newStyled.p(templateObject_2$1N || (templateObject_2$1N = __makeTemp
|
|
|
3627
3627
|
var underlined = _a.underlined;
|
|
3628
3628
|
return (underlined ? 'line-through' : 'none');
|
|
3629
3629
|
});
|
|
3630
|
-
var templateObject_1$
|
|
3630
|
+
var templateObject_1$2u, templateObject_2$1O;
|
|
3631
3631
|
|
|
3632
3632
|
function getTestId$1() {
|
|
3633
3633
|
var args = [];
|
|
@@ -3648,10 +3648,10 @@ var PriceLabelV5 = function (_a) {
|
|
|
3648
3648
|
color: color !== null && color !== void 0 ? color : theme.colors.pallete.secondary.color,
|
|
3649
3649
|
weight: 700,
|
|
3650
3650
|
};
|
|
3651
|
-
return (jsx$1(Container$
|
|
3651
|
+
return (jsx$1(Container$1v, __assign$1({}, rest, { id: "priceLabel" }, { children: jsxs$1(Fragment$2, { children: [jsx$1(Price, __assign$1({ margin: true, "data-testid": getTestId$1(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: finalPrice }), void 0), !!originalPrice && (jsx$1(OriginalPrice, { theme: theme, originalPriceUnderlined: originalPriceUnderlined, testId: testId, originalPrice: originalPrice }, void 0))] }, void 0) }), void 0));
|
|
3652
3652
|
};
|
|
3653
3653
|
|
|
3654
|
-
var FinalPriceStyledContainer$1 = newStyled.div(templateObject_1$
|
|
3654
|
+
var FinalPriceStyledContainer$1 = newStyled.div(templateObject_1$2t || (templateObject_1$2t = __makeTemplateObject(["\n display: flex;\n margin-left: -5px;\n"], ["\n display: flex;\n margin-left: -5px;\n"])));
|
|
3655
3655
|
var PriceLabel = function (_a) {
|
|
3656
3656
|
var _b;
|
|
3657
3657
|
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 ? ComponentSize.Small : _e, _f = _a.isClubOffer, isClubOffer = _f === void 0 ? false : _f, rest = __rest(_a, ["finalPrice", "originalPrice", "color", "testId", "originalPriceStyled", "originalPriceUnderlined", "size", "isClubOffer"]);
|
|
@@ -3679,15 +3679,15 @@ var PriceLabel = function (_a) {
|
|
|
3679
3679
|
};
|
|
3680
3680
|
var OriginalPrice = function () { return (jsx$1(Price$1, __assign$1({ size: originalPriceStyled ? size : ComponentSize.Small, color: theme.component.pricing.priceLabel.price.originalPriceColor ||
|
|
3681
3681
|
theme.colors.shades['300'].color, margin: true, underlined: originalPriceUnderlined, "data-testid": getTestId$2(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
|
|
3682
|
-
return (jsxs$1(Container$
|
|
3682
|
+
return (jsxs$1(Container$1w, __assign$1({}, rest, { children: [isOriginalPrice && !isClubOffer && jsx$1(OriginalPrice, {}, void 0), jsxs$1(FinalPriceStyledContainer$1, __assign$1({ "data-testid": getTestId$2(testId, 'final-product-price') }, { children: [jsx$1(Price$1, __assign$1({ margin: true, finalPriceStyledSmall: true, style: {
|
|
3683
3683
|
marginTop: '-5px',
|
|
3684
3684
|
} }, priceCommonProps, { size: size }, { children: currencySymbol }), void 0), jsx$1(Price$1, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size, "data-testid": "test-price-final-product-price'" }, { children: finalPriceArray[0] ? finalPriceArray[0] : (_b = "".concat(finalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1] }), void 0), jsx$1(Price$1, __assign$1({ finalPriceStyledSmall: true, style: {
|
|
3685
3685
|
marginTop: '-6px',
|
|
3686
3686
|
} }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }), void 0)] }), void 0));
|
|
3687
3687
|
};
|
|
3688
|
-
var templateObject_1$
|
|
3688
|
+
var templateObject_1$2t;
|
|
3689
3689
|
|
|
3690
|
-
var FinalPriceStyledContainer = newStyled.div(templateObject_1$
|
|
3690
|
+
var FinalPriceStyledContainer = newStyled.div(templateObject_1$2s || (templateObject_1$2s = __makeTemplateObject(["\n display: flex;\n margin-left: -5px;\n"], ["\n display: flex;\n margin-left: -5px;\n"])));
|
|
3691
3691
|
var PriceLabelV2 = function (_a) {
|
|
3692
3692
|
var _b;
|
|
3693
3693
|
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 ? ComponentSize.Small : _e, _f = _a.isClubOffer, isClubOffer = _f === void 0 ? false : _f, rest = __rest(_a, ["finalPrice", "originalPrice", "color", "testId", "originalPriceStyled", "originalPriceUnderlined", "size", "isClubOffer"]);
|
|
@@ -3718,13 +3718,13 @@ var PriceLabelV2 = function (_a) {
|
|
|
3718
3718
|
var finalPriceString = finalPriceArray[0]
|
|
3719
3719
|
? finalPriceArray[0]
|
|
3720
3720
|
: (_b = "".concat(finalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1];
|
|
3721
|
-
return (jsxs$1(Container$
|
|
3721
|
+
return (jsxs$1(Container$1w, __assign$1({}, rest, { children: [isOriginalPrice && !isClubOffer && jsx$1(OriginalPrice, {}, void 0), jsxs$1(FinalPriceStyledContainer, __assign$1({ "data-testid": getTestId$2(testId, 'final-product-price'), style: { marginLeft: '-3px' } }, { children: [jsxs$1(Price$1, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size }, { children: [currencySymbol, finalPriceString] }), void 0), jsx$1(Price$1, __assign$1({ finalPriceStyledSmall: true }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }), void 0)] }), void 0));
|
|
3722
3722
|
};
|
|
3723
|
-
var templateObject_1$
|
|
3723
|
+
var templateObject_1$2s;
|
|
3724
3724
|
|
|
3725
|
-
var ContainerWrapper$3 = newStyled.div(templateObject_1$
|
|
3726
|
-
var ImgWrapper = newStyled.div(templateObject_2$
|
|
3727
|
-
var templateObject_1$
|
|
3725
|
+
var ContainerWrapper$3 = newStyled.div(templateObject_1$2r || (templateObject_1$2r = __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"])));
|
|
3726
|
+
var ImgWrapper = newStyled.div(templateObject_2$1N || (templateObject_2$1N = __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"])));
|
|
3727
|
+
var templateObject_1$2r, templateObject_2$1N;
|
|
3728
3728
|
|
|
3729
3729
|
var ClubPriceMemberLabel = function (_a) {
|
|
3730
3730
|
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"]);
|
|
@@ -3733,13 +3733,13 @@ var ClubPriceMemberLabel = function (_a) {
|
|
|
3733
3733
|
return (jsx$1("div", { children: isClub ? (jsxs$1(ContainerWrapper$3, __assign$1({ id: "priceMemberLabelWrapper" }, { children: [PriceComponent, jsx$1(ImgWrapper, __assign$1({ id: "priceMemberLabelImgWrapper" }, { children: icon }), void 0)] }), void 0)) : (jsx$1(Fragment$2, { children: PriceComponent }, void 0)) }, void 0));
|
|
3734
3734
|
};
|
|
3735
3735
|
|
|
3736
|
-
var HorizontalDivider = newStyled.div(templateObject_1$
|
|
3736
|
+
var HorizontalDivider = newStyled.div(templateObject_1$2q || (templateObject_1$2q = __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) {
|
|
3737
3737
|
var width = _a.width;
|
|
3738
3738
|
return width !== null && width !== void 0 ? width : '100%';
|
|
3739
3739
|
});
|
|
3740
|
-
var templateObject_1$
|
|
3740
|
+
var templateObject_1$2q;
|
|
3741
3741
|
|
|
3742
|
-
var Container$
|
|
3742
|
+
var Container$1u = newStyled.div(templateObject_1$2p || (templateObject_1$2p = __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) {
|
|
3743
3743
|
var height = _a.height;
|
|
3744
3744
|
return height !== null && height !== void 0 ? height : '1.5em';
|
|
3745
3745
|
}, function (_a) {
|
|
@@ -3764,11 +3764,11 @@ var Container$1t = newStyled.div(templateObject_1$2o || (templateObject_1$2o = _
|
|
|
3764
3764
|
var SkeletonBox = function (_a) {
|
|
3765
3765
|
var width = _a.width, height = _a.height;
|
|
3766
3766
|
var theme = useTheme();
|
|
3767
|
-
return jsx$1(Container$
|
|
3767
|
+
return jsx$1(Container$1u, { "data-testid": "skeleton-container", width: width, height: height, theme: theme }, void 0);
|
|
3768
3768
|
};
|
|
3769
|
-
var templateObject_1$
|
|
3769
|
+
var templateObject_1$2p;
|
|
3770
3770
|
|
|
3771
|
-
var StyledSvgWrapper = newStyled.svg(templateObject_1$
|
|
3771
|
+
var StyledSvgWrapper = newStyled.svg(templateObject_1$2o || (templateObject_1$2o = __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) {
|
|
3772
3772
|
var width = _a.width;
|
|
3773
3773
|
return width;
|
|
3774
3774
|
}, function (_a) {
|
|
@@ -3784,7 +3784,7 @@ var StyledSvgWrapper = newStyled.svg(templateObject_1$2n || (templateObject_1$2n
|
|
|
3784
3784
|
var opacity = _a.opacity;
|
|
3785
3785
|
return opacity && "opacity: ".concat(opacity, ";");
|
|
3786
3786
|
});
|
|
3787
|
-
var StyledImageWrapper = newStyled.img(templateObject_2$
|
|
3787
|
+
var StyledImageWrapper = newStyled.img(templateObject_2$1M || (templateObject_2$1M = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n display: inline-block;\n vertical-align: middle;\n flex: none;\n ", "\n ", "\n"], ["\n width: ", ";\n height: ", ";\n display: inline-block;\n vertical-align: middle;\n flex: none;\n ", "\n ", "\n"])), function (_a) {
|
|
3788
3788
|
var width = _a.width;
|
|
3789
3789
|
return width;
|
|
3790
3790
|
}, function (_a) {
|
|
@@ -3797,7 +3797,7 @@ var StyledImageWrapper = newStyled.img(templateObject_2$1L || (templateObject_2$
|
|
|
3797
3797
|
var opacity = _a.opacity;
|
|
3798
3798
|
return opacity && "opacity: ".concat(opacity, ";");
|
|
3799
3799
|
});
|
|
3800
|
-
var templateObject_1$
|
|
3800
|
+
var templateObject_1$2o, templateObject_2$1M;
|
|
3801
3801
|
|
|
3802
3802
|
/* eslint-disable no-undef */
|
|
3803
3803
|
var cache = new Map();
|
|
@@ -3973,7 +3973,7 @@ var buildImageUrl = function (_a) {
|
|
|
3973
3973
|
}
|
|
3974
3974
|
};
|
|
3975
3975
|
|
|
3976
|
-
var Img$1 = newStyled.img(templateObject_1$
|
|
3976
|
+
var Img$1 = newStyled.img(templateObject_1$2n || (templateObject_1$2n = __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; });
|
|
3977
3977
|
var Image$3 = function (_a) {
|
|
3978
3978
|
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"]);
|
|
3979
3979
|
var config = useTheme().config;
|
|
@@ -3982,15 +3982,15 @@ var Image$3 = function (_a) {
|
|
|
3982
3982
|
: src;
|
|
3983
3983
|
return (jsx$1(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));
|
|
3984
3984
|
};
|
|
3985
|
-
var templateObject_1$
|
|
3985
|
+
var templateObject_1$2n;
|
|
3986
3986
|
|
|
3987
|
-
var LabelWrapper = newStyled.label(templateObject_1$
|
|
3988
|
-
var SwitchWrapper = newStyled.div(templateObject_2$
|
|
3989
|
-
var InputWrapper$1 = newStyled.input(templateObject_3$
|
|
3987
|
+
var LabelWrapper = newStyled.label(templateObject_1$2m || (templateObject_1$2m = __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"])));
|
|
3988
|
+
var SwitchWrapper = newStyled.div(templateObject_2$1L || (templateObject_2$1L = __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"])));
|
|
3989
|
+
var InputWrapper$1 = newStyled.input(templateObject_3$1o || (templateObject_3$1o = __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) {
|
|
3990
3990
|
var $color = _a.$color;
|
|
3991
3991
|
return $color;
|
|
3992
3992
|
});
|
|
3993
|
-
var templateObject_1$
|
|
3993
|
+
var templateObject_1$2m, templateObject_2$1L, templateObject_3$1o;
|
|
3994
3994
|
|
|
3995
3995
|
var ToggleComponent = function (_a) {
|
|
3996
3996
|
var onToggle = _a.onToggle, _b = _a.isChecked, isChecked = _b === void 0 ? false : _b, _c = _a.color, color = _c === void 0 ? '#882a2b' : _c, rest = __rest(_a, ["onToggle", "isChecked", "color"]);
|
|
@@ -4446,7 +4446,7 @@ var MyAccount = /*#__PURE__*/Object.freeze({
|
|
|
4446
4446
|
|
|
4447
4447
|
var AddressInformation = function (props) { return (jsx$1(Icon$1, __assign$1({}, props, { name: "navigation/address_information" }), void 0)); };
|
|
4448
4448
|
|
|
4449
|
-
var Benefits$
|
|
4449
|
+
var Benefits$3 = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "navigation/benefits" }), void 0); };
|
|
4450
4450
|
|
|
4451
4451
|
var ClubMembership = function (props) { return (jsx$1(Icon$1, __assign$1({}, props, { name: "navigation/club_membership" }), void 0)); };
|
|
4452
4452
|
|
|
@@ -4505,7 +4505,7 @@ var UserV2 = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { nam
|
|
|
4505
4505
|
var Navigation = /*#__PURE__*/Object.freeze({
|
|
4506
4506
|
__proto__: null,
|
|
4507
4507
|
AddressInformation: AddressInformation,
|
|
4508
|
-
Benefits: Benefits$
|
|
4508
|
+
Benefits: Benefits$3,
|
|
4509
4509
|
ClubMembership: ClubMembership,
|
|
4510
4510
|
Ellipsis: Ellipsis,
|
|
4511
4511
|
EllipsisHorizontal: EllipsisHorizontal,
|
|
@@ -4872,10 +4872,10 @@ function jsxs(type, props, key) {
|
|
|
4872
4872
|
// This defines which HTML tag to render for each `variant`, it also defines
|
|
4873
4873
|
// `variants` styles that are consistent through all themes.
|
|
4874
4874
|
var TAGS = {
|
|
4875
|
-
hero1: newStyled.h1(templateObject_1$
|
|
4876
|
-
hero2: newStyled.h2(templateObject_2$
|
|
4877
|
-
hero3: newStyled.h3(templateObject_3$
|
|
4878
|
-
display1: newStyled.h1(templateObject_4$
|
|
4875
|
+
hero1: newStyled.h1(templateObject_1$2l || (templateObject_1$2l = __makeTemplateObject([""], [""]))),
|
|
4876
|
+
hero2: newStyled.h2(templateObject_2$1K || (templateObject_2$1K = __makeTemplateObject([""], [""]))),
|
|
4877
|
+
hero3: newStyled.h3(templateObject_3$1n || (templateObject_3$1n = __makeTemplateObject([""], [""]))),
|
|
4878
|
+
display1: newStyled.h1(templateObject_4$16 || (templateObject_4$16 = __makeTemplateObject([""], [""]))),
|
|
4879
4879
|
display2: newStyled.h2(templateObject_5$S || (templateObject_5$S = __makeTemplateObject([""], [""]))),
|
|
4880
4880
|
display3: newStyled.h3(templateObject_6$J || (templateObject_6$J = __makeTemplateObject([""], [""]))),
|
|
4881
4881
|
heading1: newStyled.h1(templateObject_7$A || (templateObject_7$A = __makeTemplateObject([""], [""]))),
|
|
@@ -5012,17 +5012,17 @@ var DEFAULTS = {
|
|
|
5012
5012
|
size: 'regular',
|
|
5013
5013
|
},
|
|
5014
5014
|
};
|
|
5015
|
-
var templateObject_1$
|
|
5015
|
+
var templateObject_1$2l, templateObject_2$1K, templateObject_3$1n, templateObject_4$16, templateObject_5$S, templateObject_6$J, templateObject_7$A, templateObject_8$t, templateObject_9$g, templateObject_10$e, templateObject_11$a, templateObject_12$7, templateObject_13$6, templateObject_14$3, templateObject_15$2, templateObject_16$2, templateObject_17$2, templateObject_18$2, templateObject_19$2, templateObject_20$1;
|
|
5016
5016
|
|
|
5017
|
-
var Container$
|
|
5018
|
-
var Card$4 = newStyled.div(templateObject_2$
|
|
5019
|
-
var Tag$2 = newStyled.div(templateObject_3$
|
|
5020
|
-
var Label$7 = newStyled.div(templateObject_4$
|
|
5017
|
+
var Container$1t = newStyled.div(templateObject_1$2k || (templateObject_1$2k = __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"])));
|
|
5018
|
+
var Card$4 = newStyled.div(templateObject_2$1J || (templateObject_2$1J = __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"])));
|
|
5019
|
+
var Tag$2 = newStyled.div(templateObject_3$1m || (templateObject_3$1m = __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"])));
|
|
5020
|
+
var Label$7 = newStyled.div(templateObject_4$15 || (templateObject_4$15 = __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"])));
|
|
5021
5021
|
var Check$1 = newStyled.div(templateObject_5$R || (templateObject_5$R = __makeTemplateObject(["\n position: absolute;\n width: 20px;\n height: 20px;\n background-color: var(--color);\n border-radius: 50%;\n left: 100%;\n top: 50%;\n transform: translate(6px, -50%) scale(0.5);\n opacity: 0;\n transition: opacity 0.3s, transform 0.3s;\n\n &[data-visible='true'] {\n transform: translate(6px, -50%) scale(1);\n opacity: 1;\n }\n"], ["\n position: absolute;\n width: 20px;\n height: 20px;\n background-color: var(--color);\n border-radius: 50%;\n left: 100%;\n top: 50%;\n transform: translate(6px, -50%) scale(0.5);\n opacity: 0;\n transition: opacity 0.3s, transform 0.3s;\n\n &[data-visible='true'] {\n transform: translate(6px, -50%) scale(1);\n opacity: 1;\n }\n"])));
|
|
5022
5022
|
var DiscountContainer$1 = newStyled.div(templateObject_6$I || (templateObject_6$I = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n flex-wrap: wrap;\n"], ["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n flex-wrap: wrap;\n"])));
|
|
5023
5023
|
var PackSelectorV2 = function (_a) {
|
|
5024
5024
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange, currencyCode = _a.currencyCode;
|
|
5025
|
-
return (jsx$1(Container$
|
|
5025
|
+
return (jsx$1(Container$1t, __assign$1({ role: "radiogroup" }, { children: packs.map(function (pack) {
|
|
5026
5026
|
return (jsx$1(PackCard$1, { pack: pack, onChange: onChange, selected: selectedValue === pack, currencyCode: currencyCode }, pack.label));
|
|
5027
5027
|
}) }), void 0));
|
|
5028
5028
|
};
|
|
@@ -5044,27 +5044,27 @@ var PackCard$1 = function (_a) {
|
|
|
5044
5044
|
currency: currencyCode || 'USD',
|
|
5045
5045
|
}), ' ', "each", ')'] }), void 0)) : null] }, void 0)] }), void 0));
|
|
5046
5046
|
};
|
|
5047
|
-
var templateObject_1$
|
|
5047
|
+
var templateObject_1$2k, templateObject_2$1J, templateObject_3$1m, templateObject_4$15, templateObject_5$R, templateObject_6$I;
|
|
5048
5048
|
|
|
5049
|
-
var Container$
|
|
5050
|
-
var DropContainer = newStyled.div(templateObject_2$
|
|
5049
|
+
var Container$1s = newStyled.div(templateObject_1$2j || (templateObject_1$2j = __makeTemplateObject(["\n height: 32px;\n display: flex;\n align-items: center;\n"], ["\n height: 32px;\n display: flex;\n align-items: center;\n"])));
|
|
5050
|
+
var DropContainer = newStyled.div(templateObject_2$1I || (templateObject_2$1I = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5051
5051
|
var DropList = function (_a) {
|
|
5052
5052
|
var dropTotal = _a.dropTotal, drops = _a.drops;
|
|
5053
|
-
return (jsx$1(Container$
|
|
5053
|
+
return (jsx$1(Container$1s, { children: __spreadArray([], new Array(dropTotal), true).map(function (_, index) {
|
|
5054
5054
|
return (jsx$1(DropContainer, __assign$1({ "data-testid": "star-container" }, { children: index < Math.floor(drops) ? (jsx$1(Icon.PDP.Drop, { width: 0.875, height: 0.875 }, void 0)) : (jsx$1(Icon.PDP.DropEmpty, { width: 0.875, height: 0.875 }, void 0)) }), index));
|
|
5055
5055
|
}) }, void 0));
|
|
5056
5056
|
};
|
|
5057
|
-
var templateObject_1$
|
|
5057
|
+
var templateObject_1$2j, templateObject_2$1I;
|
|
5058
5058
|
|
|
5059
5059
|
var DROPS_TOTAL = 5;
|
|
5060
|
-
var Container$
|
|
5061
|
-
var Title$b = newStyled.p(templateObject_2$
|
|
5062
|
-
var Description$3 = newStyled.p(templateObject_3$
|
|
5060
|
+
var Container$1r = newStyled.div(templateObject_1$2i || (templateObject_1$2i = __makeTemplateObject(["\n height: 32px;\n display: flex;\n"], ["\n height: 32px;\n display: flex;\n"])));
|
|
5061
|
+
var Title$b = newStyled.p(templateObject_2$1H || (templateObject_2$1H = __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"])));
|
|
5062
|
+
var Description$3 = newStyled.p(templateObject_3$1l || (templateObject_3$1l = __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"])));
|
|
5063
5063
|
var AbsorbencyLevel = function (_a) {
|
|
5064
5064
|
var dropTotal = _a.dropTotal, drops = _a.drops, absorbencyTitle = _a.absorbencyTitle, absorbencyDescription = _a.absorbencyDescription;
|
|
5065
|
-
return (jsxs$1(Container$
|
|
5065
|
+
return (jsxs$1(Container$1r, { children: [jsx$1(Title$b, { children: absorbencyTitle }, void 0), jsx$1(DropList, { dropTotal: dropTotal || DROPS_TOTAL, drops: drops }, void 0), jsx$1(Description$3, { children: absorbencyDescription }, void 0)] }, void 0));
|
|
5066
5066
|
};
|
|
5067
|
-
var templateObject_1$
|
|
5067
|
+
var templateObject_1$2i, templateObject_2$1H, templateObject_3$1l;
|
|
5068
5068
|
|
|
5069
5069
|
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]=useState(k$1);return useEffect(()=>()=>e.dispose(),[e]),e}var x$1=typeof window!="undefined"?useLayoutEffect:useEffect;var yt={serverHandoffComplete:!1};function q$1(){let[e,t]=useState(yt.serverHandoffComplete);return useEffect(()=>{e!==!0&&t(!0);},[e]),useEffect(()=>{yt.serverHandoffComplete===!1&&(yt.serverHandoffComplete=!0);},[]),e}var or=0;function to(){return ++or}function A$1(){let e=q$1(),[t,r]=useState(e?to:null);return x$1(()=>{t===null&&r(to());},[t]),t!=null?""+t:void 0}function ke(e){let t=useRef(e);return useEffect(()=>{t.current=e;},[e]),t}function ee(e,t){let[r,o]=useState(e),n=ke(e);return x$1(()=>o(n.current),[n,o,...t]),r}function I(...e){let t=useRef(e);return useEffect(()=>{t.current=e;},[e]),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===Fragment$1&&Object.keys(l).length>0){if(!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(`
|
|
5070
5070
|
`),"","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(`
|
|
@@ -5140,7 +5140,7 @@ var StyledButton$4 = newStyled(Ye.Button)(AccordionSummaryStyles.baseStyles, fun
|
|
|
5140
5140
|
AccordionSummaryStyles[props.variant](props.theme, props.disabled, props.controlIconPos),
|
|
5141
5141
|
]; }, function (props) { return [AccordionSummaryStyles.title(props.titlecolor)]; });
|
|
5142
5142
|
var StyledPanel$1 = newStyled(Ye.Panel)(AccordionDetailsStyles.baseStyles, function (props) { return [AccordionDetailsStyles[props.variant](props.theme)]; });
|
|
5143
|
-
var StyledContent$1 = newStyled.button(templateObject_1$
|
|
5143
|
+
var StyledContent$1 = newStyled.button(templateObject_1$2h || (templateObject_1$2h = __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"])));
|
|
5144
5144
|
var Accordion$1 = function (_a) {
|
|
5145
5145
|
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;
|
|
5146
5146
|
var theme = useTheme();
|
|
@@ -5164,9 +5164,9 @@ var Accordion$1 = function (_a) {
|
|
|
5164
5164
|
} }, { children: jsx$1(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 && (jsx$1(StyledContent$1, __assign$1({ onClick: function (e) { return e.stopPropagation(); } }, { children: !innerHTML ? (jsx$1(StyledPanel$1, __assign$1({ static: true, variant: variant, theme: theme }, { children: content }), void 0)) : (jsx$1("div", { dangerouslySetInnerHTML: { __html: content } }, void 0)) }), void 0))] }, void 0));
|
|
5165
5165
|
} }), void 0));
|
|
5166
5166
|
};
|
|
5167
|
-
var templateObject_1$
|
|
5167
|
+
var templateObject_1$2h;
|
|
5168
5168
|
|
|
5169
|
-
var Container$
|
|
5169
|
+
var Container$1q = newStyled.div(templateObject_1$2g || (templateObject_1$2g = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 16px;\n"], ["\n display: flex;\n flex-direction: column;\n gap: 16px;\n"])));
|
|
5170
5170
|
var AccordionOptions = function (_a) {
|
|
5171
5171
|
var titleColor = _a.titleColor, accordions = _a.accordions;
|
|
5172
5172
|
var _b = useState({
|
|
@@ -5179,7 +5179,7 @@ var AccordionOptions = function (_a) {
|
|
|
5179
5179
|
}
|
|
5180
5180
|
return false;
|
|
5181
5181
|
};
|
|
5182
|
-
return (jsx$1(Container$
|
|
5182
|
+
return (jsx$1(Container$1q, { children: accordions.map(function (accordion, index) {
|
|
5183
5183
|
var forceOpenValue = getForceOpen(index);
|
|
5184
5184
|
var accordionTitleColor = forceOpenValue && openAccordionIndex.open ? titleColor : undefined;
|
|
5185
5185
|
return (jsx$1(Accordion$1, __assign$1({ onClick: function () {
|
|
@@ -5190,7 +5190,7 @@ var AccordionOptions = function (_a) {
|
|
|
5190
5190
|
} }, accordion, { forceOpenHandler: true, forceOpenValue: getForceOpen(index), titleColor: accordionTitleColor }), "accordion-".concat(index)));
|
|
5191
5191
|
}) }, void 0));
|
|
5192
5192
|
};
|
|
5193
|
-
var templateObject_1$
|
|
5193
|
+
var templateObject_1$2g;
|
|
5194
5194
|
|
|
5195
5195
|
/**
|
|
5196
5196
|
* @returns number formatted with "," and 2 decimals as string
|
|
@@ -5326,27 +5326,27 @@ var isValidDate = function (value) {
|
|
|
5326
5326
|
return /^\d{4}-\d{2}-\d{2}$/.test(value);
|
|
5327
5327
|
};
|
|
5328
5328
|
|
|
5329
|
-
var Bold = newStyled.span(templateObject_1$
|
|
5330
|
-
var FlexContainer$5 = newStyled.div(templateObject_2$
|
|
5331
|
-
var templateObject_1$
|
|
5329
|
+
var Bold = newStyled.span(templateObject_1$2f || (templateObject_1$2f = __makeTemplateObject(["\n font-weight: bold;\n"], ["\n font-weight: bold;\n"])));
|
|
5330
|
+
var FlexContainer$5 = newStyled.div(templateObject_2$1G || (templateObject_2$1G = __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"])));
|
|
5331
|
+
var templateObject_1$2f, templateObject_2$1G;
|
|
5332
5332
|
|
|
5333
|
-
var Container$
|
|
5333
|
+
var Container$1p = newStyled.div(templateObject_1$2e || (templateObject_1$2e = __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) {
|
|
5334
5334
|
var _b = _a.width, width = _b === void 0 ? '100%' : _b;
|
|
5335
5335
|
return width;
|
|
5336
5336
|
}, function (_a) {
|
|
5337
5337
|
var _b = _a.height, height = _b === void 0 ? '100%' : _b;
|
|
5338
5338
|
return height;
|
|
5339
5339
|
});
|
|
5340
|
-
var FlexCentered = newStyled.div(templateObject_2$
|
|
5341
|
-
var LeftSide = newStyled.div(templateObject_3$
|
|
5342
|
-
var RightSide = newStyled.div(templateObject_4$
|
|
5340
|
+
var FlexCentered = newStyled.div(templateObject_2$1F || (templateObject_2$1F = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 10px;\n width: 90%;\n height: 100%;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 10px;\n width: 90%;\n height: 100%;\n"])));
|
|
5341
|
+
var LeftSide = newStyled.div(templateObject_3$1k || (templateObject_3$1k = __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"])));
|
|
5342
|
+
var RightSide = newStyled.div(templateObject_4$14 || (templateObject_4$14 = __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"])));
|
|
5343
5343
|
var FlexStart = newStyled.div(templateObject_5$Q || (templateObject_5$Q = __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"])));
|
|
5344
|
-
var templateObject_1$
|
|
5344
|
+
var templateObject_1$2e, templateObject_2$1F, templateObject_3$1k, templateObject_4$14, templateObject_5$Q;
|
|
5345
5345
|
|
|
5346
5346
|
var CouponCard = function (_a) {
|
|
5347
5347
|
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;
|
|
5348
5348
|
var _c = useState(false), showCoupon = _c[0], setShowCoupon = _c[1];
|
|
5349
|
-
return (jsxs$1(Container$
|
|
5349
|
+
return (jsxs$1(Container$1p, __assign$1({ height: height, width: width }, { children: [jsx$1(LeftSide, { children: jsx$1(Image$3, { objectFit: "cover", src: image.src, alt: image.alt, width: "100%", height: "100%", borderRadius: "8px 0 0 8px" }, void 0) }, void 0), jsxs$1(RightSide, { children: [jsxs$1(FlexStart, { children: [jsx$1(Text$7, __assign$1({ variant: "body", weight: "bold", size: "small" }, { children: title }), void 0), content] }, void 0), jsx$1(FlexCentered, { children: !showCoupon ? (jsx$1(ButtonPrimary, { type: "button", text: btnText, wide: true, size: ComponentSize.Large, onClick: function () {
|
|
5350
5350
|
onClickRedeemOfferHandler && onClickRedeemOfferHandler();
|
|
5351
5351
|
setShowCoupon(function (prev) { return !prev; });
|
|
5352
5352
|
} }, void 0)) : (jsxs$1(Fragment$2, { children: [jsx$1(ButtonSecondaryOutline, { "data-testid": "coupon-code-btn", testId: "coupon-code-btn", type: "button", text: couponCode !== null && couponCode !== void 0 ? couponCode : '', wide: true, size: ComponentSize.Small, icon: {
|
|
@@ -5494,14 +5494,14 @@ var sizeOptions = [
|
|
|
5494
5494
|
},
|
|
5495
5495
|
];
|
|
5496
5496
|
|
|
5497
|
-
var ErrorText = newStyled.h3(templateObject_1$
|
|
5498
|
-
var ErrorContainer = newStyled.div(templateObject_2$
|
|
5497
|
+
var ErrorText = newStyled.h3(templateObject_1$2d || (templateObject_1$2d = __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; });
|
|
5498
|
+
var ErrorContainer = newStyled.div(templateObject_2$1E || (templateObject_2$1E = __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"])));
|
|
5499
5499
|
var Error$1 = function (_a) {
|
|
5500
5500
|
var error = _a.error;
|
|
5501
5501
|
var theme = useTheme();
|
|
5502
5502
|
return (jsxs$1(ErrorContainer, { children: [jsx$1(Icon.Actions.LightExclamation, { fill: theme.colors.semantic.urgent.color, width: 0.875, height: 0.875 }, void 0), jsx$1(ErrorText, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: error }), void 0)] }, void 0));
|
|
5503
5503
|
};
|
|
5504
|
-
var templateObject_1$
|
|
5504
|
+
var templateObject_1$2d, templateObject_2$1E;
|
|
5505
5505
|
|
|
5506
5506
|
var BaseSelectButton = function (_a) {
|
|
5507
5507
|
var children = _a.children, as = _a.as;
|
|
@@ -5518,7 +5518,7 @@ function BaseSelectOption(_a) {
|
|
|
5518
5518
|
return (jsx$1(Ee.Option, __assign$1({ className: className, as: as, value: value, disabled: disabled }, { children: children }), void 0));
|
|
5519
5519
|
}
|
|
5520
5520
|
|
|
5521
|
-
var CustomListBox = newStyled(Ee)(templateObject_1$
|
|
5521
|
+
var CustomListBox = newStyled(Ee)(templateObject_1$2c || (templateObject_1$2c = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
5522
5522
|
function BaseSelect(_a) {
|
|
5523
5523
|
var value = _a.value, onChange = _a.onChange, disabled = _a.disabled, children = _a.children, className = _a.className;
|
|
5524
5524
|
return (jsx$1(CustomListBox, __assign$1({ disabled: disabled, as: "div", value: value, onChange: onChange, className: className }, { children: children }), void 0));
|
|
@@ -5528,7 +5528,7 @@ var BaseSelect$1 = Object.assign(BaseSelect, {
|
|
|
5528
5528
|
Options: BaseSelectOptions,
|
|
5529
5529
|
Option: BaseSelectOption,
|
|
5530
5530
|
});
|
|
5531
|
-
var templateObject_1$
|
|
5531
|
+
var templateObject_1$2c;
|
|
5532
5532
|
|
|
5533
5533
|
var CustomButton = newStyled.button(function (_a) {
|
|
5534
5534
|
var theme = _a.theme, wide = _a.wide, isSortOrFilter = _a.isSortOrFilter;
|
|
@@ -5567,7 +5567,7 @@ var CustomButton = newStyled.button(function (_a) {
|
|
|
5567
5567
|
});
|
|
5568
5568
|
});
|
|
5569
5569
|
// TODO Remove this when we find the real solution
|
|
5570
|
-
var StyledIcon$1 = newStyled.span(templateObject_1$
|
|
5570
|
+
var StyledIcon$1 = newStyled.span(templateObject_1$2b || (templateObject_1$2b = __makeTemplateObject(["\n [data-testid='CloseIcon'] {\n display: none;\n }\n ", "\n"], ["\n [data-testid='CloseIcon'] {\n display: none;\n }\n ", "\n"])), function (_a) {
|
|
5571
5571
|
var open = _a.open;
|
|
5572
5572
|
return open &&
|
|
5573
5573
|
"\n [data-testid=\"CloseIcon\"] {\n display: block;\n }\n [data-testid=\"OpenIcon\"] {\n display: none;\n }\n";
|
|
@@ -5587,7 +5587,7 @@ var BaseDropdownButton = function (_a) {
|
|
|
5587
5587
|
} }), void 0));
|
|
5588
5588
|
};
|
|
5589
5589
|
var BaseDropdownButton$1 = React__default.memo(BaseDropdownButton);
|
|
5590
|
-
var templateObject_1$
|
|
5590
|
+
var templateObject_1$2b;
|
|
5591
5591
|
|
|
5592
5592
|
var DropdownOptions$1 = newStyled(BaseSelect$1.Options)(function (_a) {
|
|
5593
5593
|
var theme = _a.theme;
|
|
@@ -5754,7 +5754,7 @@ var CustomCheckboxStyles = {
|
|
|
5754
5754
|
},
|
|
5755
5755
|
};
|
|
5756
5756
|
|
|
5757
|
-
var Container$
|
|
5757
|
+
var Container$1o = newStyled.div(templateObject_1$2a || (templateObject_1$2a = __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"])));
|
|
5758
5758
|
var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (props) { return [
|
|
5759
5759
|
CustomCheckboxStyles[props.size](props.theme),
|
|
5760
5760
|
CustomCheckboxStyles[props.variant](props.theme, props.isChecked, props.disabled),
|
|
@@ -5765,7 +5765,7 @@ var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (pr
|
|
|
5765
5765
|
? "\n svg {\n path {\n fill: var(--colors-shades-black-color);\n }\n }"
|
|
5766
5766
|
: '', "\n ").concat(props.text === 'White' ? "border: 0.27px var(--colors-shades-300-color) solid;" : ''),
|
|
5767
5767
|
]; });
|
|
5768
|
-
var Input$5 = newStyled.input(templateObject_2$
|
|
5768
|
+
var Input$5 = newStyled.input(templateObject_2$1D || (templateObject_2$1D = __makeTemplateObject(["\n position: absolute;\n height: 100%;\n width: 100%;\n margin: 0;\n opacity: 0;\n cursor: ", ";\n"], ["\n position: absolute;\n height: 100%;\n width: 100%;\n margin: 0;\n opacity: 0;\n cursor: ", ";\n"])), function (_a) {
|
|
5769
5769
|
var disabled = _a.disabled;
|
|
5770
5770
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
5771
5771
|
});
|
|
@@ -5779,9 +5779,9 @@ var Checkbox = function (_a) {
|
|
|
5779
5779
|
}
|
|
5780
5780
|
onChange(e.target.checked);
|
|
5781
5781
|
};
|
|
5782
|
-
return (jsxs$1(Container$
|
|
5782
|
+
return (jsxs$1(Container$1o, { children: [jsx$1(Input$5, { type: "checkbox", checked: checked, disabled: disabled, onChange: handleChange, id: id }, void 0), jsx$1(CustomCheckbox, __assign$1({ theme: theme, size: size, disabled: disabled, isChecked: checked, "data-testid": "checkbox", variant: variant, backgroundColor: backgroundColor, text: text }, { children: checked && jsx$1(Icon.Actions.Check, { fill: "#fff" }, void 0) }), void 0), jsx$1(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));
|
|
5783
5783
|
};
|
|
5784
|
-
var templateObject_1$
|
|
5784
|
+
var templateObject_1$2a, templateObject_2$1D;
|
|
5785
5785
|
|
|
5786
5786
|
var CustomOption = newStyled.li(function (_a) {
|
|
5787
5787
|
var theme = _a.theme, selected = _a.selected, active = _a.active, hasImage = _a.hasImage;
|
|
@@ -5830,9 +5830,9 @@ var BaseDropdown$1 = Object.assign(BaseDropdown, {
|
|
|
5830
5830
|
Option: BaseDropdownOption,
|
|
5831
5831
|
});
|
|
5832
5832
|
|
|
5833
|
-
var Container$
|
|
5834
|
-
var RequiredPlaceholder = newStyled.p(templateObject_2$
|
|
5835
|
-
var SelectedOption = newStyled.span(templateObject_3$
|
|
5833
|
+
var Container$1n = newStyled.div(templateObject_1$29 || (templateObject_1$29 = __makeTemplateObject([""], [""])));
|
|
5834
|
+
var RequiredPlaceholder = newStyled.p(templateObject_2$1C || (templateObject_2$1C = __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"])));
|
|
5835
|
+
var SelectedOption = newStyled.span(templateObject_3$1j || (templateObject_3$1j = __makeTemplateObject(["\n font-weight: ", ";\n"], ["\n font-weight: ", ";\n"])), function (_a) {
|
|
5836
5836
|
var fontWeight = _a.fontWeight;
|
|
5837
5837
|
return fontWeight || '';
|
|
5838
5838
|
});
|
|
@@ -5865,10 +5865,10 @@ function SimpleDropdown(_a) {
|
|
|
5865
5865
|
}
|
|
5866
5866
|
setSelectedValue(value);
|
|
5867
5867
|
}, [value, options, initialValue]);
|
|
5868
|
-
var DropdownContainer = showRequiredPlaceholder ? Container$
|
|
5868
|
+
var DropdownContainer = showRequiredPlaceholder ? Container$1n : Fragment$1;
|
|
5869
5869
|
return (jsxs$1(DropdownContainer, { children: [jsxs$1(BaseDropdown$1, __assign$1({ value: selectedValue, onChange: onChangeHandler, disabled: disabled, wide: wide }, { children: [jsxs$1(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) && (jsx$1("img", { src: selectedValue.imageURL, alt: selectedValue.label, style: { paddingRight: 8 } }, void 0)), selectedOptionWeight && disabled ? (jsx$1(SelectedOption, __assign$1({ fontWeight: selectedOptionWeight }, { children: selectedOptionLabel }), void 0)) : (jsx$1(Fragment$2, { children: selectedOptionLabel }, void 0))] }), void 0), jsx$1(BaseDropdown$1.Options, { children: options.map(function (item) { return (jsxs$1(BaseDropdown$1.Option, __assign$1({ value: item, disabled: item.disabled, hasImage: !!item.imageURL }, { children: [!!item.imageURL && (jsx$1("img", { src: item.imageURL, alt: item.label, style: { paddingRight: 8 } }, void 0)), item.label] }), item.key)); }) }, void 0)] }), void 0), !!required && jsx$1(Error$1, { error: required }, void 0)] }, void 0));
|
|
5870
5870
|
}
|
|
5871
|
-
var templateObject_1$
|
|
5871
|
+
var templateObject_1$29, templateObject_2$1C, templateObject_3$1j;
|
|
5872
5872
|
|
|
5873
5873
|
/* base styles & size variants */
|
|
5874
5874
|
var CustomRadioStyles$2 = {
|
|
@@ -5933,9 +5933,9 @@ var ContainerStyles$2 = {
|
|
|
5933
5933
|
},
|
|
5934
5934
|
};
|
|
5935
5935
|
|
|
5936
|
-
var Wrapper$7 = newStyled.div(templateObject_1$
|
|
5937
|
-
var Container$
|
|
5938
|
-
var Input$4 = newStyled.input(templateObject_2$
|
|
5936
|
+
var Wrapper$7 = newStyled.div(templateObject_1$28 || (templateObject_1$28 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
5937
|
+
var Container$1m = newStyled.div(__assign$1({}, ContainerStyles$2.baseStyles), function (props) { return [ContainerStyles$2[props.size](props.theme)]; });
|
|
5938
|
+
var Input$4 = newStyled.input(templateObject_2$1B || (templateObject_2$1B = __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) {
|
|
5939
5939
|
var disabled = _a.disabled;
|
|
5940
5940
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
5941
5941
|
});
|
|
@@ -5943,14 +5943,14 @@ var CustomRadio$2 = newStyled.div(function (props) { return [
|
|
|
5943
5943
|
CustomRadioStyles$2.baseStyles(props.theme, props.disabled),
|
|
5944
5944
|
CustomRadioStyles$2[props.size](props.theme, props.isChecked),
|
|
5945
5945
|
]; });
|
|
5946
|
-
var StyledLabel$3 = newStyled(Label$6)(templateObject_3$
|
|
5946
|
+
var StyledLabel$3 = newStyled(Label$6)(templateObject_3$1i || (templateObject_3$1i = __makeTemplateObject(["\n font-size: ", ";\n line-height: ", " !important;\n"], ["\n font-size: ", ";\n line-height: ", " !important;\n"])), function (_a) {
|
|
5947
5947
|
var theme = _a.theme;
|
|
5948
5948
|
return theme.component.radio.textSize;
|
|
5949
5949
|
}, function (_a) {
|
|
5950
5950
|
var theme = _a.theme;
|
|
5951
5951
|
return theme.component.radio.lineHeight;
|
|
5952
5952
|
});
|
|
5953
|
-
var StyledLabelV2 = newStyled(Label$6)(templateObject_4$
|
|
5953
|
+
var StyledLabelV2 = newStyled(Label$6)(templateObject_4$13 || (templateObject_4$13 = __makeTemplateObject(["\n font-size: ", ";\n font-weight: 600 !important;\n line-height: ", " !important;\n\n color: ", ";\n"], ["\n font-size: ", ";\n font-weight: 600 !important;\n line-height: ", " !important;\n\n color: ", ";\n"])), function (_a) {
|
|
5954
5954
|
var theme = _a.theme;
|
|
5955
5955
|
return theme.component.radio.textSize;
|
|
5956
5956
|
}, function (_a) {
|
|
@@ -5967,9 +5967,9 @@ var RadioInput = function (_a) {
|
|
|
5967
5967
|
var value = event.currentTarget.value;
|
|
5968
5968
|
onChange({ value: value, label: label });
|
|
5969
5969
|
};
|
|
5970
|
-
return (jsxs$1(Wrapper$7, { children: [jsxs$1(Container$
|
|
5970
|
+
return (jsxs$1(Wrapper$7, { children: [jsxs$1(Container$1m, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsx$1(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), jsx$1(CustomRadio$2, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), useV2Style ? (jsxs$1(StyledLabelV2, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled, style: labelStyle }, { children: [icon, " ", label] }), void 0)) : (jsx$1(StyledLabel$3, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0))] }, void 0));
|
|
5971
5971
|
};
|
|
5972
|
-
var templateObject_1$
|
|
5972
|
+
var templateObject_1$28, templateObject_2$1B, templateObject_3$1i, templateObject_4$13;
|
|
5973
5973
|
|
|
5974
5974
|
var useOnClickOutside = function (ref, handler) {
|
|
5975
5975
|
useEffect(function () {
|
|
@@ -6062,7 +6062,7 @@ var getTooltipAlignItems = function (position, align) {
|
|
|
6062
6062
|
}
|
|
6063
6063
|
};
|
|
6064
6064
|
|
|
6065
|
-
var Wrapper$6 = newStyled.div(templateObject_1$
|
|
6065
|
+
var Wrapper$6 = newStyled.div(templateObject_1$27 || (templateObject_1$27 = __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) {
|
|
6066
6066
|
var position = _a.position;
|
|
6067
6067
|
return getWrapperFlexDirection(position);
|
|
6068
6068
|
}, function (_a) {
|
|
@@ -6072,7 +6072,7 @@ var Wrapper$6 = newStyled.div(templateObject_1$26 || (templateObject_1$26 = __ma
|
|
|
6072
6072
|
var disableHover = _a.disableHover;
|
|
6073
6073
|
return (disableHover ? 0 : 1);
|
|
6074
6074
|
});
|
|
6075
|
-
var TooltipContainer = newStyled.div(templateObject_2$
|
|
6075
|
+
var TooltipContainer = newStyled.div(templateObject_2$1A || (templateObject_2$1A = __makeTemplateObject(["\n position: absolute;\n display: flex;\n flex-direction: ", ";\n align-items: ", ";\n margin-left: ", ";\n margin-right: ", ";\n margin-top: ", ";\n margin-bottom: ", ";\n max-width: ", ";\n transition: opacity 0.2s ease;\n userselect: none;\n opacity: 0;\n visibility: hidden;\n\n ", "\n"], ["\n position: absolute;\n display: flex;\n flex-direction: ", ";\n align-items: ", ";\n margin-left: ", ";\n margin-right: ", ";\n margin-top: ", ";\n margin-bottom: ", ";\n max-width: ", ";\n transition: opacity 0.2s ease;\n userselect: none;\n opacity: 0;\n visibility: hidden;\n\n ", "\n"])), function (_a) {
|
|
6076
6076
|
var position = _a.position;
|
|
6077
6077
|
return getContainerFlexDirection(position);
|
|
6078
6078
|
}, function (_a) {
|
|
@@ -6100,14 +6100,14 @@ var TooltipContainer = newStyled.div(templateObject_2$1z || (templateObject_2$1z
|
|
|
6100
6100
|
var getTooltipMargin = function (actual, expected, margin) {
|
|
6101
6101
|
return actual === expected ? margin : '0';
|
|
6102
6102
|
};
|
|
6103
|
-
var ContentWrapper$1 = newStyled.div(templateObject_3$
|
|
6103
|
+
var ContentWrapper$1 = newStyled.div(templateObject_3$1h || (templateObject_3$1h = __makeTemplateObject(["\n border: 0.063rem solid ", ";\n padding: 0.563rem 0.75rem;\n border-radius: 0.5rem;\n background-color: ", ";\n z-index: 999;\n position: relative;\n box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);\n z-index: 1;\n"], ["\n border: 0.063rem solid ", ";\n padding: 0.563rem 0.75rem;\n border-radius: 0.5rem;\n background-color: ", ";\n z-index: 999;\n position: relative;\n box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);\n z-index: 1;\n"])), function (_a) {
|
|
6104
6104
|
var borderColor = _a.borderColor;
|
|
6105
6105
|
return borderColor;
|
|
6106
6106
|
}, function (_a) {
|
|
6107
6107
|
var backgroundColor = _a.backgroundColor;
|
|
6108
6108
|
return backgroundColor;
|
|
6109
6109
|
});
|
|
6110
|
-
var TooltipText = newStyled.div(templateObject_4$
|
|
6110
|
+
var TooltipText = newStyled.div(templateObject_4$12 || (templateObject_4$12 = __makeTemplateObject(["\n font-style: normal;\n font-weight: normal;\n font-size: 0.875rem;\n line-height: 1.125rem;\n margin: 0;\n text-align: ", ";\n max-width: ", ";\n color: ", ";\n"], ["\n font-style: normal;\n font-weight: normal;\n font-size: 0.875rem;\n line-height: 1.125rem;\n margin: 0;\n text-align: ", ";\n max-width: ", ";\n color: ", ";\n"])), function (_a) {
|
|
6111
6111
|
var theme = _a.theme;
|
|
6112
6112
|
return theme.component.autoship.tooltip.text.alignment;
|
|
6113
6113
|
}, function (_a) {
|
|
@@ -6127,7 +6127,7 @@ var CloseToolTip = newStyled.button(templateObject_8$s || (templateObject_8$s =
|
|
|
6127
6127
|
var _b = _a.right, right = _b === void 0 ? '.3rem' : _b;
|
|
6128
6128
|
return right;
|
|
6129
6129
|
});
|
|
6130
|
-
var templateObject_1$
|
|
6130
|
+
var templateObject_1$27, templateObject_2$1A, templateObject_3$1h, templateObject_4$12, templateObject_5$P, templateObject_6$H, templateObject_7$z, templateObject_8$s;
|
|
6131
6131
|
|
|
6132
6132
|
var Tooltip = function (_a) {
|
|
6133
6133
|
var _b;
|
|
@@ -6170,8 +6170,8 @@ var benefitsColorMapper = function (_a) {
|
|
|
6170
6170
|
};
|
|
6171
6171
|
};
|
|
6172
6172
|
|
|
6173
|
-
var FlexContainer$4 = newStyled.div(templateObject_1$
|
|
6174
|
-
var ContainerBase$5 = newStyled.div(templateObject_2$
|
|
6173
|
+
var FlexContainer$4 = newStyled.div(templateObject_1$26 || (templateObject_1$26 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
6174
|
+
var ContainerBase$5 = newStyled.div(templateObject_2$1z || (templateObject_2$1z = __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) {
|
|
6175
6175
|
var selected = _a.selected, theme = _a.theme;
|
|
6176
6176
|
return selected
|
|
6177
6177
|
? "2px solid ".concat(theme.colors.pallete.primary.color)
|
|
@@ -6185,11 +6185,11 @@ var ContainerBase$5 = newStyled.div(templateObject_2$1y || (templateObject_2$1y
|
|
|
6185
6185
|
var theme = _a.theme;
|
|
6186
6186
|
return theme.colors.pallete.primary.color;
|
|
6187
6187
|
});
|
|
6188
|
-
var SinglePurchaseContainer$4 = newStyled(ContainerBase$5)(templateObject_3$
|
|
6188
|
+
var SinglePurchaseContainer$4 = newStyled(ContainerBase$5)(templateObject_3$1g || (templateObject_3$1g = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n padding: 16px;\n margin-bottom: 8px;\n\n ", "\n"], ["\n display: flex;\n justify-content: space-between;\n padding: 16px;\n margin-bottom: 8px;\n\n ", "\n"])), function (_a) {
|
|
6189
6189
|
var onClick = _a.onClick;
|
|
6190
6190
|
return (onClick ? 'cursor: pointer;' : '');
|
|
6191
6191
|
});
|
|
6192
|
-
var SubscriptionContainer$5 = newStyled(ContainerBase$5)(templateObject_4$
|
|
6192
|
+
var SubscriptionContainer$5 = newStyled(ContainerBase$5)(templateObject_4$11 || (templateObject_4$11 = __makeTemplateObject(["\n padding: 16px;\n"], ["\n padding: 16px;\n"])));
|
|
6193
6193
|
var SubscriptionHeader$5 = newStyled.div(templateObject_5$O || (templateObject_5$O = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n border-bottom: 1px solid ", ";\n padding-bottom: 10px;\n margin-bottom: 8px;\n cursor: pointer;\n\n & input:checked + div {\n border-color: ", ";\n }\n"], ["\n display: flex;\n justify-content: space-between;\n border-bottom: 1px solid ", ";\n padding-bottom: 10px;\n margin-bottom: 8px;\n cursor: pointer;\n\n & input:checked + div {\n border-color: ", ";\n }\n"])), function (_a) {
|
|
6194
6194
|
var theme = _a.theme;
|
|
6195
6195
|
return theme.colors.shades[200].color;
|
|
@@ -6207,8 +6207,8 @@ var StyledPrice$4 = newStyled(PriceLabelV2$1)(templateObject_12$6 || (templateOb
|
|
|
6207
6207
|
var selected = _a.selected, theme = _a.theme;
|
|
6208
6208
|
return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
|
|
6209
6209
|
});
|
|
6210
|
-
var Container$
|
|
6211
|
-
var templateObject_1$
|
|
6210
|
+
var Container$1l = newStyled.div(templateObject_13$5 || (templateObject_13$5 = __makeTemplateObject([""], [""])));
|
|
6211
|
+
var templateObject_1$26, templateObject_2$1z, templateObject_3$1g, templateObject_4$11, templateObject_5$O, templateObject_6$G, templateObject_7$y, templateObject_8$r, templateObject_9$f, templateObject_10$d, templateObject_11$9, templateObject_12$6, templateObject_13$5;
|
|
6212
6212
|
|
|
6213
6213
|
var radioIds$3 = {
|
|
6214
6214
|
oneTime: {
|
|
@@ -6258,17 +6258,17 @@ var Autoship = function (_a) {
|
|
|
6258
6258
|
onChange(__assign$1(__assign$1({}, dataObj), { subscriptionPeriod: value }));
|
|
6259
6259
|
};
|
|
6260
6260
|
var benefitsColor = benefitsColorMapper(theme);
|
|
6261
|
-
return (jsxs$1(Container$
|
|
6261
|
+
return (jsxs$1(Container$1l, __assign$1({ className: className }, { children: [jsxs$1(SinglePurchaseContainer$4, __assign$1({ "data-testid": "single-purchase-block", selected: radioIds$3.oneTime.id === radioCheck.id, onClick: function () { return handleChange(radioIds$3.oneTime, 'radio'); } }, { children: [jsx$1(RadioInput, { label: singlePurchaseLabel, name: radioIds$3.oneTime.id, id: radioIds$3.oneTime.id, value: radioIds$3.oneTime.id, checked: radioIds$3.oneTime.id === radioCheck.id, size: ComponentSize.Medium, onChange: function () { return handleChange(radioIds$3.oneTime, 'radio'); } }, void 0), jsx$1(StyledPrice$4, { testId: "single-purchase", finalPrice: "$".concat(decimalFormat(Number(discountedProdPrice))), selected: radioIds$3.oneTime.id === radioCheck.id, size: ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(originalProdPrice))) }, void 0)] }), void 0), jsxs$1(SubscriptionContainer$5, __assign$1({ "data-testid": "subscription-purchase-block", selected: radioIds$3.autoship.id === radioCheck.id }, { children: [jsxs$1(SubscriptionHeader$5, __assign$1({ onClick: function () { return handleChange(radioIds$3.autoship, 'radio'); } }, { children: [jsx$1(RadioInput, { label: subscriptionLabel, name: radioIds$3.autoship.id, id: radioIds$3.autoship.id, value: radioIds$3.autoship.id, checked: radioIds$3.autoship.id === radioCheck.id, size: ComponentSize.Medium, onChange: function () { return handleChange(radioIds$3.autoship, 'radio'); } }, void 0), jsx$1(StyledPrice$4, { testId: "subscription", finalPrice: "$".concat(decimalFormat(Number(discountedAutoshipPrice))), selected: radioIds$3.autoship.id === radioCheck.id, size: ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(originalProdPrice))) }, void 0)] }), void 0), jsx$1(BenefitsContainer$4, { children: autoshipBenefits.map(function (benefit) { return (jsxs$1(Benefit$4, { children: [jsx$1(Icon.Actions.Check, { width: 1.2, height: 1.2, fill: radioIds$3.autoship.id === radioCheck.id
|
|
6262
6262
|
? benefitsColor.selected
|
|
6263
6263
|
: benefitsColor.base }, void 0), jsx$1(BenefitText$4, __assign$1({ variant: "body" }, { children: benefit }), void 0)] }, benefit)); }) }, void 0), radioIds$3.autoship.id === radioCheck.id && (jsxs$1(Fragment$2, { children: [jsxs$1(FlexContainer$4, { children: [jsx$1(DeliveryFrequencyLabel$1, __assign$1({ variant: "body" }, { children: "Delivery Every:" }), void 0), jsx$1(SimpleDropdown, { testId: "subscription-frecuency", initialValue: dropdownOptions[0], options: dropdownOptions, onChange: function (value) { return handleChange(value.value, 'dropdown'); }, placeHolder: "" }, void 0)] }, void 0), jsx$1(SubscriptionDetailsContainer, { children: jsx$1(Tooltip, __assign$1({ position: 0, content: tooltipContent, header: tooltipHeader, maxWidth: "300px", showCloseIcon: closeIcon }, { children: jsxs$1(FlexContainer$4, { children: [jsx$1(SubscriptionDetails, __assign$1({ variant: "body", weight: "demi" }, { children: "Subscription Details" }), void 0), jsx$1(Icon.Actions.CircleQuestion, { width: 1.2 }, void 0)] }, void 0) }), void 0) }, void 0)] }, void 0))] }), void 0)] }), void 0));
|
|
6264
6264
|
};
|
|
6265
6265
|
|
|
6266
|
-
var FlexContainer$3 = newStyled.div(templateObject_1$
|
|
6266
|
+
var FlexContainer$3 = newStyled.div(templateObject_1$25 || (templateObject_1$25 = __makeTemplateObject(["\n display: flex;\n\n ", "\n"], ["\n display: flex;\n\n ", "\n"])), function (_a) {
|
|
6267
6267
|
var theme = _a.theme;
|
|
6268
6268
|
return theme.name === 'TheSpaDr' &&
|
|
6269
6269
|
"\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 ";
|
|
6270
6270
|
});
|
|
6271
|
-
var DiscountTag$3 = newStyled.div(templateObject_2$
|
|
6271
|
+
var DiscountTag$3 = newStyled.div(templateObject_2$1y || (templateObject_2$1y = __makeTemplateObject(["\n position: absolute;\n top: -24px;\n right: 18px;\n background-color: ", ";\n color: white;\n padding: 5px 10px;\n font-size: 12px;\n font-weight: bold;\n line-height: 14px;\n border-radius: ", ";\n"], ["\n position: absolute;\n top: -24px;\n right: 18px;\n background-color: ", ";\n color: white;\n padding: 5px 10px;\n font-size: 12px;\n font-weight: bold;\n line-height: 14px;\n border-radius: ", ";\n"])), function (_a) {
|
|
6272
6272
|
var theme = _a.theme, isSelected = _a.isSelected;
|
|
6273
6273
|
return isSelected
|
|
6274
6274
|
? theme.component.autoship.discountTag.backgroundColor
|
|
@@ -6284,7 +6284,7 @@ var getSelectedBorder$1 = function (_a) {
|
|
|
6284
6284
|
}
|
|
6285
6285
|
return "1.5px solid ".concat(colors.shades['700'].color);
|
|
6286
6286
|
};
|
|
6287
|
-
var ContainerBase$4 = newStyled.div(templateObject_3$
|
|
6287
|
+
var ContainerBase$4 = newStyled.div(templateObject_3$1f || (templateObject_3$1f = __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) {
|
|
6288
6288
|
var selected = _a.selected, theme = _a.theme;
|
|
6289
6289
|
return selected ? getSelectedBorder$1(theme) : "1px solid ".concat(theme.colors.shades[200].color);
|
|
6290
6290
|
}, function (_a) {
|
|
@@ -6296,7 +6296,7 @@ var ContainerBase$4 = newStyled.div(templateObject_3$1e || (templateObject_3$1e
|
|
|
6296
6296
|
var theme = _a.theme;
|
|
6297
6297
|
return theme.colors.pallete.primary.color;
|
|
6298
6298
|
});
|
|
6299
|
-
var SinglePurchaseContainer$3 = newStyled(ContainerBase$4)(templateObject_4
|
|
6299
|
+
var SinglePurchaseContainer$3 = newStyled(ContainerBase$4)(templateObject_4$10 || (templateObject_4$10 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n padding: 16px;\n\n ", "\n"], ["\n display: flex;\n justify-content: space-between;\n padding: 16px;\n\n ", "\n"])), function (_a) {
|
|
6300
6300
|
var onClick = _a.onClick;
|
|
6301
6301
|
return (onClick ? 'cursor: pointer;' : '');
|
|
6302
6302
|
});
|
|
@@ -6316,12 +6316,12 @@ var StyledPrice$3 = newStyled(PriceLabelV2$1)(templateObject_11$8 || (templateOb
|
|
|
6316
6316
|
var selected = _a.selected, theme = _a.theme;
|
|
6317
6317
|
return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
|
|
6318
6318
|
});
|
|
6319
|
-
var Container$
|
|
6319
|
+
var Container$1k = newStyled.div(templateObject_12$5 || (templateObject_12$5 = __makeTemplateObject(["\n margin-top: 20px;\n"], ["\n margin-top: 20px;\n"])));
|
|
6320
6320
|
var TooltipWrapper$1 = newStyled.div(templateObject_13$4 || (templateObject_13$4 = __makeTemplateObject(["\n margin: ", ";\n"], ["\n margin: ", ";\n"])), function (_a) {
|
|
6321
6321
|
var theme = _a.theme;
|
|
6322
6322
|
return theme.component.autoship.tooltip.margin;
|
|
6323
6323
|
});
|
|
6324
|
-
var templateObject_1$
|
|
6324
|
+
var templateObject_1$25, templateObject_2$1y, templateObject_3$1f, templateObject_4$10, templateObject_5$N, templateObject_6$F, templateObject_7$x, templateObject_8$q, templateObject_9$e, templateObject_10$c, templateObject_11$8, templateObject_12$5, templateObject_13$4;
|
|
6325
6325
|
|
|
6326
6326
|
var radioIds$2 = {
|
|
6327
6327
|
oneTime: {
|
|
@@ -6381,7 +6381,7 @@ var AutoshipV2 = function (_a) {
|
|
|
6381
6381
|
onChange(__assign$1(__assign$1({}, dataObj), { subscriptionPeriod: value }));
|
|
6382
6382
|
};
|
|
6383
6383
|
var benefitsColor = benefitsColorMapper(theme);
|
|
6384
|
-
return (jsxs$1(Container$
|
|
6384
|
+
return (jsxs$1(Container$1k, __assign$1({ className: className }, { children: [jsxs$1(SubscriptionContainer$4, __assign$1({ onClick: function () { return handleChange(radioIds$2.autoship, 'radio'); }, "data-testid": "subscription-purchase-block", selected: radioIds$2.autoship.id === radioCheck.id }, { children: [jsx$1(DiscountTag$3, __assign$1({ isSelected: radioIds$2.autoship.id === radioCheck.id }, { children: discountLabel !== null && discountLabel !== void 0 ? discountLabel : "".concat(autoShipPctOverListPriceRounded, "% OFF - SAVE ").concat(currencySymbol).concat(autoShipSaving.toFixed(2)) }), void 0), jsxs$1(SubscriptionHeader$4, { children: [jsxs$1(FlexContainer$3, { children: [jsx$1(RadioInput, { label: subscriptionLabel, name: radioIds$2.autoship.id, id: radioIds$2.autoship.id, value: radioIds$2.autoship.id, checked: radioIds$2.autoship.id === radioCheck.id, size: ComponentSize.Medium, style: { marginRight: '10px' }, useV2Style: true, onChange: function () { }, disabled: disabledInputs && disabledInputs.includes(radioIds$2.autoship.id) }, void 0), jsx$1(TooltipWrapper$1, { children: jsx$1(Tooltip, __assign$1({ position: 0, content: tooltipContent, header: tooltipHeader, maxWidth: "248px", showCloseIcon: closeIcon, closeBtnSize: 0.7 }, { children: jsx$1(Icon.Actions.CircleQuestion, { width: 1 }, void 0) }), void 0) }, void 0)] }, void 0), jsx$1(StyledPrice$3, { testId: "subscription", finalPrice: "".concat(currencySymbol).concat(decimalFormat(Number(autoshipFinalPrice))), selected: radioIds$2.autoship.id === radioCheck.id, size: ComponentSize.Large, originalPrice: "".concat(currencySymbol).concat(decimalFormat(Number(listPrice))) }, void 0)] }, void 0), jsx$1(BenefitsContainer$3, { children: updatedAutoshipBenefits.map(function (benefit) { return (jsxs$1(Benefit$3, { children: [jsx$1(Icon.Actions.Check, { width: 1.2, height: 1.2, fill: radioIds$2.autoship.id === radioCheck.id
|
|
6385
6385
|
? benefitsColor.selected
|
|
6386
6386
|
: benefitsColor.base }, void 0), jsx$1(BenefitText$3, { variant: "body", dangerouslySetInnerHTML: { __html: benefit } }, void 0)] }, benefit)); }) }, void 0), jsx$1(Fragment$2, { children: dropdownOptions.length > 1 ? (jsxs$1(FlexContainer$3, __assign$1({ onClick: function (e) { return e.stopPropagation(); } }, { children: [jsx$1(DeliveryFrequencyLabel, __assign$1({ variant: "body" }, { children: "Delivery Every:" }), void 0), jsx$1(SimpleDropdown, { testId: "subscription-frequency", initialValue: dropdownOptions[0], options: dropdownOptions, onChange: function (value) { return handleChange(value.value, 'dropdown'); }, placeHolder: "" }, void 0)] }), void 0)) : (jsxs$1(DeliveryFrequencyLabel, __assign$1({ variant: "body" }, { children: ["Delivery Every ", dropdownOptions[0].label.toLowerCase()] }), void 0)) }, void 0)] }), void 0), jsxs$1(SinglePurchaseContainer$3, __assign$1({ "data-testid": "single-purchase-block", selected: radioIds$2.oneTime.id === radioCheck.id, onClick: function () { return handleChange(radioIds$2.oneTime, 'radio'); } }, { children: [jsx$1(RadioInput, { label: singlePurchaseLabel, name: radioIds$2.oneTime.id, id: radioIds$2.oneTime.id, value: radioIds$2.oneTime.id, checked: radioIds$2.oneTime.id === radioCheck.id, size: ComponentSize.Medium, onChange: function () { }, useV2Style: true, disabled: disabledInputs && disabledInputs.includes(radioIds$2.oneTime.id) }, void 0), jsx$1(StyledPrice$3, { testId: "single-purchase", finalPrice: "".concat(currencySymbol).concat(decimalFormat(Number(discountedPrice))), selected: radioIds$2.oneTime.id === radioCheck.id, size: ComponentSize.Large, originalPrice: "".concat(currencySymbol).concat(decimalFormat(Number(listPrice))) }, void 0)] }), void 0)] }), void 0));
|
|
6387
6387
|
};
|
|
@@ -6400,13 +6400,13 @@ var componentSizeMapper = (_a$2 = {},
|
|
|
6400
6400
|
_a$2[ComponentSize.Large] = ComponentSize.Medium,
|
|
6401
6401
|
_a$2);
|
|
6402
6402
|
|
|
6403
|
-
var CustomerDetails = newStyled.div(templateObject_1$
|
|
6404
|
-
var CustomerInfo = newStyled.div(templateObject_2$
|
|
6405
|
-
var Name = newStyled.h4(templateObject_3$
|
|
6406
|
-
var StarIconContainer = newStyled.div(templateObject_4
|
|
6403
|
+
var CustomerDetails = newStyled.div(templateObject_1$24 || (templateObject_1$24 = __makeTemplateObject([""], [""])));
|
|
6404
|
+
var CustomerInfo = newStyled.div(templateObject_2$1x || (templateObject_2$1x = __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"])));
|
|
6405
|
+
var Name = newStyled.h4(templateObject_3$1e || (templateObject_3$1e = __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"])));
|
|
6406
|
+
var StarIconContainer = newStyled.div(templateObject_4$$ || (templateObject_4$$ = __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"])));
|
|
6407
6407
|
var Description$2 = newStyled.p(templateObject_5$M || (templateObject_5$M = __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"])));
|
|
6408
6408
|
var ReviewDays = newStyled.span(templateObject_6$E || (templateObject_6$E = __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"])));
|
|
6409
|
-
var templateObject_1$
|
|
6409
|
+
var templateObject_1$24, templateObject_2$1x, templateObject_3$1e, templateObject_4$$, templateObject_5$M, templateObject_6$E;
|
|
6410
6410
|
|
|
6411
6411
|
var NameWithStars = function (_a) {
|
|
6412
6412
|
var name = _a.name, size = _a.size;
|
|
@@ -6424,10 +6424,10 @@ var ResultFeedback = function (_a) {
|
|
|
6424
6424
|
return (jsxs$1(CustomerDetails, { children: [jsx$1(NameWithStars, { name: name, size: size }, void 0), description && jsx$1(Description$2, { children: description }, void 0), reviewDays && jsx$1(ReviewDays, { children: reviewDays }, void 0)] }, void 0));
|
|
6425
6425
|
};
|
|
6426
6426
|
|
|
6427
|
-
var Container$
|
|
6428
|
-
var ImageContainer$7 = newStyled.div(templateObject_2$
|
|
6429
|
-
var ImageCard = newStyled.div(templateObject_3$
|
|
6430
|
-
var UserInfoText = newStyled.div(templateObject_4$
|
|
6427
|
+
var Container$1j = newStyled.div(templateObject_1$23 || (templateObject_1$23 = __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; });
|
|
6428
|
+
var ImageContainer$7 = newStyled.div(templateObject_2$1w || (templateObject_2$1w = __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"])));
|
|
6429
|
+
var ImageCard = newStyled.div(templateObject_3$1d || (templateObject_3$1d = __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; });
|
|
6430
|
+
var UserInfoText = newStyled.div(templateObject_4$_ || (templateObject_4$_ = __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) {
|
|
6431
6431
|
var theme = _a.theme;
|
|
6432
6432
|
return theme.colors.pallete.secondary.color;
|
|
6433
6433
|
}, function (_a) {
|
|
@@ -6437,7 +6437,7 @@ var UserInfoText = newStyled.div(templateObject_4$Z || (templateObject_4$Z = __m
|
|
|
6437
6437
|
var theme = _a.theme, size = _a.size;
|
|
6438
6438
|
return theme.component.beforeAfter.size[componentSizeMapper[size]].userInfoText.mobile.fontSize;
|
|
6439
6439
|
});
|
|
6440
|
-
var templateObject_1$
|
|
6440
|
+
var templateObject_1$23, templateObject_2$1w, templateObject_3$1d, templateObject_4$_;
|
|
6441
6441
|
|
|
6442
6442
|
/* base styles & size variants */
|
|
6443
6443
|
var getStylesBySize$d = function (size, theme) {
|
|
@@ -6512,10 +6512,10 @@ var BeforeAfterCard = function (_a) {
|
|
|
6512
6512
|
var stylesBySize = getStylesBySize$d(size, theme);
|
|
6513
6513
|
var infoText = buildInfoText(name, age, months);
|
|
6514
6514
|
var Component = componentByVariant[variant];
|
|
6515
|
-
return (jsxs$1(Container$
|
|
6515
|
+
return (jsxs$1(Container$1j, __assign$1({ "data-testid": "Container", styles: stylesBySize }, { children: [jsxs$1(ImageContainer$7, __assign$1({ "data-testid": "ImageContainer" }, { children: [jsx$1(ImageCard, __assign$1({ "data-testid": "ImageCard", styles: stylesBySize }, { children: jsx$1(Image$3, { borderRadius: imageBorderRadius, src: beforeImage, alt: "before", height: "100%", width: "100%" }, void 0) }), void 0), jsx$1(ImageCard, __assign$1({ styles: stylesBySize }, { children: jsx$1(Image$3, { borderRadius: imageBorderRadius, src: afterImage, alt: "after", height: "100%", width: "100%" }, void 0) }), void 0)] }), void 0), jsx$1(Component, __assign$1({ name: name, size: size, alignCenter: alignCenter, text: infoText }, rest), void 0)] }), void 0));
|
|
6516
6516
|
};
|
|
6517
6517
|
|
|
6518
|
-
var Section = newStyled.div(templateObject_1$
|
|
6518
|
+
var Section = newStyled.div(templateObject_1$22 || (templateObject_1$22 = __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) {
|
|
6519
6519
|
return props.type === CardSectionType.Header ? '1.5rem 1.5rem 0' : '0 1.5rem 1.5rem';
|
|
6520
6520
|
});
|
|
6521
6521
|
var CardHeader = function (_a) {
|
|
@@ -6526,16 +6526,16 @@ var CardFooter = function (_a) {
|
|
|
6526
6526
|
var children = _a.children;
|
|
6527
6527
|
return (jsx$1(Section, __assign$1({ type: CardSectionType.Footer }, { children: children }), void 0));
|
|
6528
6528
|
};
|
|
6529
|
-
var templateObject_1$
|
|
6529
|
+
var templateObject_1$22;
|
|
6530
6530
|
|
|
6531
|
-
var Body$
|
|
6531
|
+
var Body$3 = newStyled.div(templateObject_1$21 || (templateObject_1$21 = __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"])));
|
|
6532
6532
|
var CardBody$1 = function (_a) {
|
|
6533
6533
|
var children = _a.children;
|
|
6534
|
-
return jsx$1(Body$
|
|
6534
|
+
return jsx$1(Body$3, { children: children }, void 0);
|
|
6535
6535
|
};
|
|
6536
|
-
var templateObject_1$
|
|
6536
|
+
var templateObject_1$21;
|
|
6537
6537
|
|
|
6538
|
-
var Container$
|
|
6538
|
+
var Container$1i = newStyled.div(templateObject_1$20 || (templateObject_1$20 = __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) {
|
|
6539
6539
|
var flex = _a.flex;
|
|
6540
6540
|
return flex &&
|
|
6541
6541
|
"display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;";
|
|
@@ -6550,23 +6550,23 @@ var Container$1h = newStyled.div(templateObject_1$1$ || (templateObject_1$1$ = _
|
|
|
6550
6550
|
var Card$2 = function (_a) {
|
|
6551
6551
|
var children = _a.children, backgroundColor = _a.backgroundColor, _b = _a.widthAuto, widthAuto = _b === void 0 ? true : _b, border = _a.border, _c = _a.flex, flex = _c === void 0 ? true : _c;
|
|
6552
6552
|
var theme = useTheme();
|
|
6553
|
-
return (jsx$1(Container$
|
|
6553
|
+
return (jsx$1(Container$1i, __assign$1({ backgroundColor: backgroundColor ? backgroundColor : theme.component.card.backgroundColor, widthAuto: widthAuto, border: border, flex: flex, "data-testid": "CardContainer", theme: theme }, { children: children }), void 0));
|
|
6554
6554
|
};
|
|
6555
6555
|
var Card$3 = Object.assign(Card$2, {
|
|
6556
6556
|
Header: CardHeader,
|
|
6557
6557
|
Footer: CardFooter,
|
|
6558
6558
|
Body: CardBody$1,
|
|
6559
6559
|
});
|
|
6560
|
-
var templateObject_1$
|
|
6560
|
+
var templateObject_1$20;
|
|
6561
6561
|
|
|
6562
|
-
var StyledWrapper = newStyled.div(templateObject_1$
|
|
6563
|
-
var StyledContainer = newStyled.div(templateObject_2$
|
|
6564
|
-
var TextLabel = newStyled(Text$7)(templateObject_3$
|
|
6562
|
+
var StyledWrapper = newStyled.div(templateObject_1$1$ || (templateObject_1$1$ = __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"])));
|
|
6563
|
+
var StyledContainer = newStyled.div(templateObject_2$1v || (templateObject_2$1v = __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"])));
|
|
6564
|
+
var TextLabel = newStyled(Text$7)(templateObject_3$1c || (templateObject_3$1c = __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) {
|
|
6565
6565
|
var color = _a.color;
|
|
6566
6566
|
return color;
|
|
6567
6567
|
});
|
|
6568
|
-
var YouAreSaving = newStyled(Text$7)(templateObject_4$
|
|
6569
|
-
var templateObject_1$
|
|
6568
|
+
var YouAreSaving = newStyled(Text$7)(templateObject_4$Z || (templateObject_4$Z = __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"])));
|
|
6569
|
+
var templateObject_1$1$, templateObject_2$1v, templateObject_3$1c, templateObject_4$Z;
|
|
6570
6570
|
|
|
6571
6571
|
var Minimalistic = function (_a) {
|
|
6572
6572
|
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;
|
|
@@ -6574,28 +6574,28 @@ var Minimalistic = function (_a) {
|
|
|
6574
6574
|
return (jsx$1(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxs$1(StyledWrapper, { children: [jsxs$1(StyledContainer, __assign$1({ "data-testid": "".concat(testId, "-section") }, { children: [jsx$1(StyledContainer, { children: jsx$1(TextLabel, __assign$1({ variant: "body", weight: "demi", size: "small" }, { children: getMorePayLessText }), void 0) }, void 0), jsx$1(PriceLabel$1, { finalPrice: price, originalPrice: originalPrice, color: theme.colors.pallete.secondary.color, size: ComponentSize.Small, testId: testId }, void 0)] }), void 0), jsxs$1(StyledContainer, __assign$1({ "data-testid": "".concat(testId, "-section-bottom") }, { children: [jsxs$1(TextLabel, __assign$1({ variant: "body", weight: "demi", size: "small", color: "var(--colors-pallete-red-color)" }, { children: [getQtyForText, " ", discount, "% ", offText.toLocaleUpperCase()] }), void 0), jsxs$1(YouAreSaving, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [youAreSavingText, ": ", savingPrice] }), void 0)] }), void 0)] }, void 0) }), void 0));
|
|
6575
6575
|
};
|
|
6576
6576
|
|
|
6577
|
-
var Container$
|
|
6578
|
-
var Title$9 = newStyled.h1(templateObject_2$
|
|
6579
|
-
var Details$1 = newStyled.span(templateObject_3$
|
|
6580
|
-
var PriceContainer$2 = newStyled.span(templateObject_4$
|
|
6577
|
+
var Container$1h = newStyled.div(templateObject_1$1_ || (templateObject_1$1_ = __makeTemplateObject(["\n padding: 0.625rem 1.5rem;\n"], ["\n padding: 0.625rem 1.5rem;\n"])));
|
|
6578
|
+
var Title$9 = newStyled.h1(templateObject_2$1u || (templateObject_2$1u = __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; });
|
|
6579
|
+
var Details$1 = newStyled.span(templateObject_3$1b || (templateObject_3$1b = __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; });
|
|
6580
|
+
var PriceContainer$2 = newStyled.span(templateObject_4$Y || (templateObject_4$Y = __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"])));
|
|
6581
6581
|
var Simple = function (_a) {
|
|
6582
6582
|
var title = _a.title, freeShippingText = _a.freeShippingText, price = _a.price, anyQtyForText = _a.anyQtyForText, backgroundColor = _a.backgroundColor, _b = _a.widthAuto, widthAuto = _b === void 0 ? false : _b;
|
|
6583
6583
|
var theme = useTheme();
|
|
6584
|
-
return (jsx$1(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxs$1(Container$
|
|
6584
|
+
return (jsx$1(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxs$1(Container$1h, { children: [jsx$1(Title$9, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Title" }, { children: title }), void 0), jsxs$1(Details$1, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Details" }, { children: [anyQtyForText, jsx$1(PriceContainer$2, __assign$1({ "data-testid": "Price" }, { children: jsx$1(PriceLabel$1, { finalPrice: price, color: "var(--colors-pallete-red-color)", size: ComponentSize.Small }, void 0) }), void 0), "+ ", freeShippingText] }), void 0)] }, void 0) }), void 0));
|
|
6585
6585
|
};
|
|
6586
|
-
var templateObject_1$
|
|
6586
|
+
var templateObject_1$1_, templateObject_2$1u, templateObject_3$1b, templateObject_4$Y;
|
|
6587
6587
|
|
|
6588
6588
|
var Bundle = {
|
|
6589
6589
|
Minimalistic: Minimalistic,
|
|
6590
6590
|
Simple: Simple,
|
|
6591
6591
|
};
|
|
6592
6592
|
|
|
6593
|
-
var Container$
|
|
6593
|
+
var Container$1g = newStyled.div(templateObject_1$1Z || (templateObject_1$1Z = __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) {
|
|
6594
6594
|
var displayBNPL = _a.displayBNPL;
|
|
6595
6595
|
return (displayBNPL ? 'flex' : 'none');
|
|
6596
6596
|
});
|
|
6597
|
-
var TextContainer$1 = newStyled.div(templateObject_2$
|
|
6598
|
-
var IconWrapper$1 = newStyled.div(templateObject_3$
|
|
6597
|
+
var TextContainer$1 = newStyled.div(templateObject_2$1t || (templateObject_2$1t = __makeTemplateObject(["\n font-size: 14px;\n margin: 0;\n line-height: 24px;\n font-weight: 400;\n color: #292929;\n display: flex;\n align-items: center;\n align-self: stretch;\n"], ["\n font-size: 14px;\n margin: 0;\n line-height: 24px;\n font-weight: 400;\n color: #292929;\n display: flex;\n align-items: center;\n align-self: stretch;\n"])));
|
|
6598
|
+
var IconWrapper$1 = newStyled.div(templateObject_3$1a || (templateObject_3$1a = __makeTemplateObject(["\n display: inline;\n top: -1px;\n position: relative;\n\n svg {\n vertical-align: -webkit-baseline-middle;\n }\n"], ["\n display: inline;\n top: -1px;\n position: relative;\n\n svg {\n vertical-align: -webkit-baseline-middle;\n }\n"])));
|
|
6599
6599
|
var BuyNowPayLater = function (_a) {
|
|
6600
6600
|
var _b;
|
|
6601
6601
|
var displayBNPL = _a.displayBNPL, installments = _a.installments, installmentPrice = _a.installmentPrice, _c = _a.iconFolder, iconFolder = _c === void 0 ? 'PDP' : _c, iconName = _a.iconName, _d = _a.showLogo, showLogo = _d === void 0 ? true : _d, _e = _a.iconColor, iconColor = _e === void 0 ? '#292929' : _e, fontSize = _a.fontSize, _f = _a.bnplWithAfterPay, bnplWithAfterPay = _f === void 0 ? false : _f, textTemplate = _a.textTemplate;
|
|
@@ -6615,16 +6615,16 @@ var BuyNowPayLater = function (_a) {
|
|
|
6615
6615
|
else {
|
|
6616
6616
|
dynamicText = "or 4 interest-free payments of ";
|
|
6617
6617
|
}
|
|
6618
|
-
return (jsx$1(Container$
|
|
6618
|
+
return (jsx$1(Container$1g, __assign$1({ displayBNPL: displayBNPL }, { children: jsxs$1(TextContainer$1, __assign$1({ style: { fontSize: fontSize }, "data-testid": "mainText" }, { children: [jsxs$1("div", { children: [dynamicText, jsx$1(Text$7, __assign$1({ variant: "body", weight: "bold", style: {
|
|
6619
6619
|
display: 'inline',
|
|
6620
6620
|
fontSize: fontSize,
|
|
6621
6621
|
paddingLeft: '0.25rem',
|
|
6622
6622
|
paddingRight: '0.25rem',
|
|
6623
6623
|
}, testId: "InstallmentPriceId" }, { children: installmentPrice }), void 0), showLogo ? ' with' : ''] }, void 0), showLogo && (jsx$1(IconWrapper$1, __assign$1({ style: { display: 'flex' } }, { children: jsx$1(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));
|
|
6624
6624
|
};
|
|
6625
|
-
var templateObject_1$
|
|
6625
|
+
var templateObject_1$1Z, templateObject_2$1t, templateObject_3$1a;
|
|
6626
6626
|
|
|
6627
|
-
var Text$6 = newStyled.h3(templateObject_1$
|
|
6627
|
+
var Text$6 = newStyled.h3(templateObject_1$1Y || (templateObject_1$1Y = __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) {
|
|
6628
6628
|
var backgroundColor = _a.backgroundColor;
|
|
6629
6629
|
return backgroundColor;
|
|
6630
6630
|
}, function (_a) {
|
|
@@ -6639,47 +6639,47 @@ var OfferBanner = function (_a) {
|
|
|
6639
6639
|
var theme = useTheme();
|
|
6640
6640
|
return (jsx$1(Text$6, __assign$1({ backgroundColor: backgroundColor, color: theme.colors.shades['700'].color, borderRadius: theme.component.text.offerBanner.borderRadius, "data-testid": "OfferBanner" }, { children: discountAppliedText }), void 0));
|
|
6641
6641
|
};
|
|
6642
|
-
var templateObject_1$
|
|
6642
|
+
var templateObject_1$1Y;
|
|
6643
6643
|
|
|
6644
|
-
var Container$
|
|
6644
|
+
var Container$1f = newStyled.div(templateObject_1$1X || (templateObject_1$1X = __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"); });
|
|
6645
6645
|
var CloseButton$1 = function (_a) {
|
|
6646
6646
|
var onClick = _a.onClick, size = _a.size;
|
|
6647
6647
|
var theme = useTheme();
|
|
6648
|
-
return (jsx$1(Container$
|
|
6648
|
+
return (jsx$1(Container$1f, __assign$1({ backgroundColor: theme.colors.shades['700'].color, onClick: onClick, "data-testid": "CartProductItemCloseBtn", size: size }, { children: jsx$1(Icon.Actions.Close, { width: size - 1, height: size - 1, fill: "#fff" }, void 0) }), void 0));
|
|
6649
6649
|
};
|
|
6650
|
-
var templateObject_1$
|
|
6650
|
+
var templateObject_1$1X;
|
|
6651
6651
|
|
|
6652
|
-
var Text$5 = newStyled.span(templateObject_1$
|
|
6652
|
+
var Text$5 = newStyled.span(templateObject_1$1W || (templateObject_1$1W = __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; });
|
|
6653
6653
|
var Description$1 = function (_a) {
|
|
6654
6654
|
var text = _a.text;
|
|
6655
6655
|
var theme = useTheme();
|
|
6656
6656
|
return jsx$1(Text$5, __assign$1({ color: theme.colors.shades['400'].color }, { children: text }), void 0);
|
|
6657
6657
|
};
|
|
6658
|
-
var templateObject_1$
|
|
6658
|
+
var templateObject_1$1W;
|
|
6659
6659
|
|
|
6660
|
-
var P$4 = newStyled.p(templateObject_1$
|
|
6660
|
+
var P$4 = newStyled.p(templateObject_1$1V || (templateObject_1$1V = __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; });
|
|
6661
6661
|
var Promo = function (_a) {
|
|
6662
6662
|
var text = _a.text;
|
|
6663
6663
|
var theme = useTheme();
|
|
6664
6664
|
return (jsx$1(P$4, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "CartProductItemPromo" }, { children: text }), void 0));
|
|
6665
6665
|
};
|
|
6666
|
-
var templateObject_1$
|
|
6666
|
+
var templateObject_1$1V;
|
|
6667
6667
|
|
|
6668
|
-
var Text$4 = newStyled.span(templateObject_1$
|
|
6668
|
+
var Text$4 = newStyled.span(templateObject_1$1U || (templateObject_1$1U = __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; });
|
|
6669
6669
|
var Title$8 = function (_a) {
|
|
6670
6670
|
var title = _a.title;
|
|
6671
6671
|
var theme = useTheme();
|
|
6672
6672
|
return jsx$1(Text$4, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0);
|
|
6673
6673
|
};
|
|
6674
|
-
var templateObject_1$
|
|
6674
|
+
var templateObject_1$1U;
|
|
6675
6675
|
|
|
6676
|
-
var Container$
|
|
6677
|
-
var templateObject_1$
|
|
6676
|
+
var Container$1e = newStyled.div(templateObject_1$1T || (templateObject_1$1T = __makeTemplateObject(["\n margin: 0;\n padding: 0 0.1rem;\n display: inline-flex;\n cursor: pointer;\n width: ", ";\n height: ", ";\n justify-content: flex-end;\n align-items: flex-start;\n"], ["\n margin: 0;\n padding: 0 0.1rem;\n display: inline-flex;\n cursor: pointer;\n width: ", ";\n height: ", ";\n justify-content: flex-end;\n align-items: flex-start;\n"])), function (props) { return "".concat(props.size, "em"); }, function (props) { return "".concat(props.size, "em"); });
|
|
6677
|
+
var templateObject_1$1T;
|
|
6678
6678
|
|
|
6679
6679
|
var TrashButton = function (_a) {
|
|
6680
6680
|
var onClick = _a.onClick, size = _a.size;
|
|
6681
6681
|
useTheme();
|
|
6682
|
-
return (jsx$1(Container$
|
|
6682
|
+
return (jsx$1(Container$1e, __assign$1({ onClick: onClick, "data-testid": "CartProductItemTrashBtn", size: size }, { children: jsx$1(Icon.Actions.Trash, { width: size, height: size, fill: "#292929" }, void 0) }), void 0));
|
|
6683
6683
|
};
|
|
6684
6684
|
|
|
6685
6685
|
var CartProductItem = {
|
|
@@ -6691,10 +6691,10 @@ var CartProductItem = {
|
|
|
6691
6691
|
TrashButton: TrashButton,
|
|
6692
6692
|
};
|
|
6693
6693
|
|
|
6694
|
-
var Container$
|
|
6695
|
-
var MobileContainer = newStyled(Container$
|
|
6696
|
-
var DollarPart = newStyled.span(templateObject_3$
|
|
6697
|
-
var ClubMembersText = newStyled.span(templateObject_4$
|
|
6694
|
+
var Container$1d = newStyled.div(templateObject_1$1S || (templateObject_1$1S = __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"])));
|
|
6695
|
+
var MobileContainer = newStyled(Container$1d)(templateObject_2$1s || (templateObject_2$1s = __makeTemplateObject(["\n padding: 2px 2px;\n gap: 3px;\n"], ["\n padding: 2px 2px;\n gap: 3px;\n"])));
|
|
6696
|
+
var DollarPart = newStyled.span(templateObject_3$19 || (templateObject_3$19 = __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"])));
|
|
6697
|
+
var ClubMembersText = newStyled.span(templateObject_4$X || (templateObject_4$X = __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"])));
|
|
6698
6698
|
var MobileDollarPart = newStyled(DollarPart)(templateObject_5$L || (templateObject_5$L = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
6699
6699
|
var MobileClubMembersText = newStyled(ClubMembersText)(templateObject_6$D || (templateObject_6$D = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
6700
6700
|
var DesktopDollarPart = newStyled(DollarPart)(templateObject_7$w || (templateObject_7$w = __makeTemplateObject(["\n font-size: 13px;\n"], ["\n font-size: 13px;\n"])));
|
|
@@ -6702,9 +6702,9 @@ var DesktopClubMembersText = newStyled(ClubMembersText)(templateObject_8$p || (t
|
|
|
6702
6702
|
var ClubPriceLabel = function (_a) {
|
|
6703
6703
|
var clubPrice = _a.clubPrice;
|
|
6704
6704
|
var isMobile = useWindowDimensions().isMobile;
|
|
6705
|
-
return (jsx$1(Fragment$2, { children: isMobile ? (jsxs$1(MobileContainer, { children: [jsx$1(MobileDollarPart, { children: clubPrice }, void 0), jsx$1(MobileClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) : (jsxs$1(Container$
|
|
6705
|
+
return (jsx$1(Fragment$2, { children: isMobile ? (jsxs$1(MobileContainer, { children: [jsx$1(MobileDollarPart, { children: clubPrice }, void 0), jsx$1(MobileClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) : (jsxs$1(Container$1d, { children: [jsx$1(DesktopDollarPart, { children: clubPrice }, void 0), jsx$1(DesktopClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) }, void 0));
|
|
6706
6706
|
};
|
|
6707
|
-
var templateObject_1$
|
|
6707
|
+
var templateObject_1$1S, templateObject_2$1s, templateObject_3$19, templateObject_4$X, templateObject_5$L, templateObject_6$D, templateObject_7$w, templateObject_8$p;
|
|
6708
6708
|
|
|
6709
6709
|
var Spacing = function (_a) {
|
|
6710
6710
|
var size = _a.size, _b = _a.type, type = _b === void 0 ? 'block' : _b, children = _a.children, styleProp = _a.style;
|
|
@@ -6712,10 +6712,10 @@ var Spacing = function (_a) {
|
|
|
6712
6712
|
return jsx$1("div", __assign$1({ style: style }, { children: children }), void 0);
|
|
6713
6713
|
};
|
|
6714
6714
|
|
|
6715
|
-
var Container$
|
|
6716
|
-
var Content$2 = newStyled('div')(templateObject_2$
|
|
6717
|
-
var BarContainer$1 = newStyled('div')(templateObject_3$
|
|
6718
|
-
var Bar$2 = newStyled('div')(templateObject_4$
|
|
6715
|
+
var Container$1c = newStyled('div')(templateObject_1$1R || (templateObject_1$1R = __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"])));
|
|
6716
|
+
var Content$2 = newStyled('div')(templateObject_2$1r || (templateObject_2$1r = __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"])));
|
|
6717
|
+
var BarContainer$1 = newStyled('div')(templateObject_3$18 || (templateObject_3$18 = __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"])));
|
|
6718
|
+
var Bar$2 = newStyled('div')(templateObject_4$W || (templateObject_4$W = __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) {
|
|
6719
6719
|
var index = _a.index;
|
|
6720
6720
|
return "".concat(6 + 3 * index, "px");
|
|
6721
6721
|
}, function (_a) {
|
|
@@ -6724,19 +6724,19 @@ var Bar$2 = newStyled('div')(templateObject_4$V || (templateObject_4$V = __makeT
|
|
|
6724
6724
|
});
|
|
6725
6725
|
var StrengthBars = function (_a) {
|
|
6726
6726
|
var _b = _a.barsFilled, barsFilled = _b === void 0 ? 0 : _b, supportText = _a.supportText;
|
|
6727
|
-
return (jsxs$1(Container$
|
|
6727
|
+
return (jsxs$1(Container$1c, __assign$1({ "data-testid": "strength-bar" }, { children: [jsx$1(BarContainer$1, { children: [1, 2, 3, 4, 5].map(function (bar, index) { return (jsx$1(Bar$2, { index: index, isFilled: bar <= barsFilled }, bar)); }) }, void 0), jsx$1(Content$2, { children: supportText }, void 0)] }), void 0));
|
|
6728
6728
|
};
|
|
6729
|
-
var templateObject_1$
|
|
6729
|
+
var templateObject_1$1R, templateObject_2$1r, templateObject_3$18, templateObject_4$W;
|
|
6730
6730
|
|
|
6731
|
-
var Benefit$2 = newStyled.div(templateObject_1$
|
|
6732
|
-
var templateObject_1$
|
|
6731
|
+
var Benefit$2 = newStyled.div(templateObject_1$1Q || (templateObject_1$1Q = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: 8px;\n"], ["\n display: flex;\n align-items: center;\n gap: 8px;\n"])));
|
|
6732
|
+
var templateObject_1$1Q;
|
|
6733
6733
|
|
|
6734
6734
|
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;}}";
|
|
6735
6735
|
|
|
6736
6736
|
var renderBenefit = function (text, className) {
|
|
6737
6737
|
if (className === void 0) { className = style.benefit; }
|
|
6738
6738
|
if (typeof text === 'string') {
|
|
6739
|
-
return jsx$1("
|
|
6739
|
+
return jsx$1("div", { className: className, dangerouslySetInnerHTML: { __html: text } }, void 0);
|
|
6740
6740
|
}
|
|
6741
6741
|
return text;
|
|
6742
6742
|
};
|
|
@@ -6751,10 +6751,10 @@ var OfferAtCartBenefits = function (_a) {
|
|
|
6751
6751
|
|
|
6752
6752
|
var STARTS_NUMBER = 5;
|
|
6753
6753
|
|
|
6754
|
-
var Container$
|
|
6755
|
-
var templateObject_1$
|
|
6754
|
+
var Container$1b = newStyled.div(templateObject_1$1P || (templateObject_1$1P = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
6755
|
+
var templateObject_1$1P;
|
|
6756
6756
|
|
|
6757
|
-
var StarContainer = newStyled.div(templateObject_1$
|
|
6757
|
+
var StarContainer = newStyled.div(templateObject_1$1O || (templateObject_1$1O = __makeTemplateObject(["\n display: flex;\n margin-right: ", ";\n"], ["\n display: flex;\n margin-right: ", ";\n"])), function (_a) {
|
|
6758
6758
|
var marginRight = _a.marginRight;
|
|
6759
6759
|
return marginRight;
|
|
6760
6760
|
});
|
|
@@ -6766,11 +6766,11 @@ var StarList = function (_a) {
|
|
|
6766
6766
|
width: theme.component.stars.element[size].width,
|
|
6767
6767
|
height: theme.component.stars.element[size].height,
|
|
6768
6768
|
};
|
|
6769
|
-
return (jsx$1(Container$
|
|
6769
|
+
return (jsx$1(Container$1b, { children: __spreadArray([], new Array(starsNumber), true).map(function (_, index) {
|
|
6770
6770
|
return (jsx$1(StarContainer, __assign$1({ "data-testid": "star-container", marginRight: theme.component.stars.element[size].marginRight }, { children: index < Math.floor(rating) ? (jsx$1(Icon.PDP.Star, __assign$1({}, iconProps), void 0)) : index === Math.floor(rating) && rating % 1 != 0 ? (jsx$1(Icon.PDP.StarHalf, __assign$1({}, iconProps), void 0)) : (jsx$1(Icon.PDP.StarEmpty, __assign$1({}, iconProps), void 0)) }), "star-container-".concat(index)));
|
|
6771
6771
|
}) }, void 0));
|
|
6772
6772
|
};
|
|
6773
|
-
var templateObject_1$
|
|
6773
|
+
var templateObject_1$1O;
|
|
6774
6774
|
|
|
6775
6775
|
/* base styles & size variants */
|
|
6776
6776
|
var LabelStyles = {
|
|
@@ -6818,7 +6818,7 @@ var LabelStyles = {
|
|
|
6818
6818
|
});
|
|
6819
6819
|
},
|
|
6820
6820
|
};
|
|
6821
|
-
var Container$
|
|
6821
|
+
var Container$1a = newStyled.a(templateObject_1$1N || (templateObject_1$1N = __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"])));
|
|
6822
6822
|
var CustomLabel = newStyled.div(function (_a) {
|
|
6823
6823
|
var theme = _a.theme, size = _a.size, wrapWithParenthesis = _a.wrapWithParenthesis, underline = _a.underline;
|
|
6824
6824
|
return [
|
|
@@ -6837,8 +6837,8 @@ var CustomLabel = newStyled.div(function (_a) {
|
|
|
6837
6837
|
}),
|
|
6838
6838
|
];
|
|
6839
6839
|
});
|
|
6840
|
-
var RatingLabel = newStyled.span(templateObject_2$
|
|
6841
|
-
var templateObject_1$
|
|
6840
|
+
var RatingLabel = newStyled.span(templateObject_2$1q || (templateObject_2$1q = __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; });
|
|
6841
|
+
var templateObject_1$1N, templateObject_2$1q;
|
|
6842
6842
|
|
|
6843
6843
|
var Rating = function (_a) {
|
|
6844
6844
|
var _b = _a.size, size = _b === void 0 ? 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;
|
|
@@ -6859,23 +6859,26 @@ var Rating = function (_a) {
|
|
|
6859
6859
|
href: reviewsContainerId,
|
|
6860
6860
|
}
|
|
6861
6861
|
: {};
|
|
6862
|
-
return (jsxs$1(Container$
|
|
6862
|
+
return (jsxs$1(Container$1a, __assign$1({ as: reviewsContainerId ? 'a' : 'div' }, containerAttributes, { "data-testid": "Container", onClick: handleAnchorClick }, { children: [showRatingText && (jsx$1(RatingLabel, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "RatingLabel" }, { children: rating }), void 0)), jsx$1(StarList, { rating: rating, size: size, starsNumber: STARTS_NUMBER, fill: theme.component.stars.element.color }, void 0), jsxs$1(CustomLabel, __assign$1({ theme: theme, size: size, wrapWithParenthesis: wrapWithParenthesis, underline: underline, "data-testid": "CustomLabel" }, { children: [reviews ? reviews : '', " ", reviewsText ? reviewsText : ''] }), void 0)] }), void 0));
|
|
6863
6863
|
};
|
|
6864
6864
|
|
|
6865
|
-
var ImageWrapper$4 = newStyled.div(templateObject_1$
|
|
6865
|
+
var ImageWrapper$4 = newStyled.div(templateObject_1$1M || (templateObject_1$1M = __makeTemplateObject(["\n position: relative;\n display: flex;\n flex-shrink: 0;\n justify-content: center;\n align-items: center;\n border-radius: 8px;\n width: ", ";\n height: ", ";\n"], ["\n position: relative;\n display: flex;\n flex-shrink: 0;\n justify-content: center;\n align-items: center;\n border-radius: 8px;\n width: ", ";\n height: ", ";\n"])), function (_a) {
|
|
6866
6866
|
var width = _a.width;
|
|
6867
6867
|
return width !== null && width !== void 0 ? width : '30%';
|
|
6868
|
+
}, function (_a) {
|
|
6869
|
+
var height = _a.height;
|
|
6870
|
+
return height !== null && height !== void 0 ? height : 'auto';
|
|
6868
6871
|
});
|
|
6869
|
-
var RatingWrapper = newStyled.div(templateObject_2$
|
|
6870
|
-
var RatingText = newStyled.span(templateObject_3$
|
|
6872
|
+
var RatingWrapper = newStyled.div(templateObject_2$1p || (templateObject_2$1p = __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"])));
|
|
6873
|
+
var RatingText = newStyled.span(templateObject_3$17 || (templateObject_3$17 = __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) {
|
|
6871
6874
|
var fontSize = _a.fontSize;
|
|
6872
6875
|
return fontSize;
|
|
6873
6876
|
});
|
|
6874
|
-
var templateObject_1$
|
|
6877
|
+
var templateObject_1$1M, templateObject_2$1p, templateObject_3$17;
|
|
6875
6878
|
|
|
6876
6879
|
var OfferAtCartImage = function (_a) {
|
|
6877
|
-
var isMobile = _a.isMobile, src = _a.src, alt = _a.alt, rating = _a.rating, width = _a.width;
|
|
6878
|
-
return (jsxs$1(ImageWrapper$4, __assign$1({ width: width }, { children: [!!rating && (jsxs$1(RatingWrapper, { children: [jsx$1(Rating, { rating: rating, size: isMobile ? ComponentSize.XXSmall : ComponentSize.XSmall }, void 0), jsxs$1(RatingText, __assign$1({ fontSize: isMobile ? '9px' : '13px' }, { children: [rating, "/5"] }), void 0)] }, void 0)), jsx$1(Image$3, { src: src, alt: alt, width: "100%", height: "100%", objectFit: "cover", borderRadius: "8px" }, void 0)] }), void 0));
|
|
6880
|
+
var isMobile = _a.isMobile, src = _a.src, alt = _a.alt, rating = _a.rating, width = _a.width, height = _a.height;
|
|
6881
|
+
return (jsxs$1(ImageWrapper$4, __assign$1({ width: width, height: height }, { children: [!!rating && (jsxs$1(RatingWrapper, { children: [jsx$1(Rating, { rating: rating, size: isMobile ? ComponentSize.XXSmall : ComponentSize.XSmall }, void 0), jsxs$1(RatingText, __assign$1({ fontSize: isMobile ? '9px' : '13px' }, { children: [rating, "/5"] }), void 0)] }, void 0)), jsx$1(Image$3, { src: src, alt: alt, width: "100%", height: "100%", objectFit: "cover", borderRadius: "8px" }, void 0)] }), void 0));
|
|
6879
6882
|
};
|
|
6880
6883
|
|
|
6881
6884
|
var OfferAtCartTitle = function (_a) {
|
|
@@ -6918,9 +6921,9 @@ var getDropdownOptions = function (frequency) {
|
|
|
6918
6921
|
}); });
|
|
6919
6922
|
};
|
|
6920
6923
|
|
|
6921
|
-
var Benefit$1 = newStyled.div(templateObject_1$
|
|
6922
|
-
var BenefitText$2 = newStyled(Text$7)(templateObject_2$
|
|
6923
|
-
var templateObject_1$
|
|
6924
|
+
var Benefit$1 = newStyled.div(templateObject_1$1L || (templateObject_1$1L = __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"])));
|
|
6925
|
+
var BenefitText$2 = newStyled(Text$7)(templateObject_2$1o || (templateObject_2$1o = __makeTemplateObject(["\n line-height: 20px;\n margin-left: 9px;\n"], ["\n line-height: 20px;\n margin-left: 9px;\n"])));
|
|
6926
|
+
var templateObject_1$1L, templateObject_2$1o;
|
|
6924
6927
|
|
|
6925
6928
|
var BenefitsList = function (_a) {
|
|
6926
6929
|
var benefits = _a.benefits, disabled = _a.disabled, className = _a.className;
|
|
@@ -6931,23 +6934,23 @@ var BenefitsList = function (_a) {
|
|
|
6931
6934
|
}) }, void 0));
|
|
6932
6935
|
};
|
|
6933
6936
|
|
|
6934
|
-
var TimerContainer$1 = newStyled.div(templateObject_1$
|
|
6937
|
+
var TimerContainer$1 = newStyled.div(templateObject_1$1K || (templateObject_1$1K = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
6935
6938
|
var timerColor = _a.timerColor;
|
|
6936
6939
|
return timerColor || '';
|
|
6937
6940
|
});
|
|
6938
|
-
var TimerContainerV2 = newStyled.div(templateObject_2$
|
|
6941
|
+
var TimerContainerV2 = newStyled.div(templateObject_2$1n || (templateObject_2$1n = __makeTemplateObject(["\n color: ", ";\n display: flex;\n align-items: center;\n justify-content: space-around;\n gap: 10px;\n"], ["\n color: ", ";\n display: flex;\n align-items: center;\n justify-content: space-around;\n gap: 10px;\n"])), function (_a) {
|
|
6939
6942
|
var timerColor = _a.timerColor;
|
|
6940
6943
|
return timerColor || '';
|
|
6941
6944
|
});
|
|
6942
|
-
var UnitBlock = newStyled(Text$7)(templateObject_3$
|
|
6945
|
+
var UnitBlock = newStyled(Text$7)(templateObject_3$16 || (templateObject_3$16 = __makeTemplateObject(["\n background-color: ", ";\n width: 32px;\n height: 32px;\n border-radius: 2px;\n padding: 0 6px;\n line-height: 22px;\n text-align: center;\n position: relative;\n & + & {\n &:before {\n position: absolute;\n content: ':';\n display: block;\n left: -7px;\n top: 5px;\n color: ", ";\n }\n }\n"], ["\n background-color: ", ";\n width: 32px;\n height: 32px;\n border-radius: 2px;\n padding: 0 6px;\n line-height: 22px;\n text-align: center;\n position: relative;\n & + & {\n &:before {\n position: absolute;\n content: ':';\n display: block;\n left: -7px;\n top: 5px;\n color: ", ";\n }\n }\n"])), function (_a) {
|
|
6943
6946
|
var theme = _a.theme;
|
|
6944
6947
|
return theme.colors.shades.white.color;
|
|
6945
6948
|
}, function (_a) {
|
|
6946
6949
|
var theme = _a.theme;
|
|
6947
6950
|
return theme.colors.shades.white.color;
|
|
6948
6951
|
});
|
|
6949
|
-
var Unit = newStyled.p(templateObject_4$
|
|
6950
|
-
var templateObject_1$
|
|
6952
|
+
var Unit = newStyled.p(templateObject_4$V || (templateObject_4$V = __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"])));
|
|
6953
|
+
var templateObject_1$1K, templateObject_2$1n, templateObject_3$16, templateObject_4$V;
|
|
6951
6954
|
|
|
6952
6955
|
var HRS = 'HRS';
|
|
6953
6956
|
var MIN = 'MIN';
|
|
@@ -6988,7 +6991,7 @@ var Timer = function (_a) {
|
|
|
6988
6991
|
return (jsxs$1(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));
|
|
6989
6992
|
};
|
|
6990
6993
|
|
|
6991
|
-
var TimerContainer = newStyled.div(templateObject_1$
|
|
6994
|
+
var TimerContainer = newStyled.div(templateObject_1$1J || (templateObject_1$1J = __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) {
|
|
6992
6995
|
var textPosition = _a.textPosition;
|
|
6993
6996
|
return textPosition;
|
|
6994
6997
|
}, function (_a) {
|
|
@@ -7001,7 +7004,7 @@ var TimerContainer = newStyled.div(templateObject_1$1I || (templateObject_1$1I =
|
|
|
7001
7004
|
var borderRadius = _a.borderRadius;
|
|
7002
7005
|
return borderRadius || '8px';
|
|
7003
7006
|
});
|
|
7004
|
-
var templateObject_1$
|
|
7007
|
+
var templateObject_1$1J;
|
|
7005
7008
|
|
|
7006
7009
|
var getDefaultCountdown = function () {
|
|
7007
7010
|
var tomorrowDate = new Date();
|
|
@@ -7017,7 +7020,7 @@ var HurryUp = function (_a) {
|
|
|
7017
7020
|
return (jsxs$1(TimerContainer, __assign$1({ backgroundColor: backgroundColor || theme.component.card.backgroundColor, textPosition: textPosition, borderRadius: (!isFullVersion && theme.component.hurryUp.borderRadius) || '0', "data-testid": "HurryUp" }, { children: [clockPosition === 'left' && (jsxs$1(Fragment$2, { children: [jsx$1(Icon.PDP.Stopwatch, { width: iconSize, height: iconSize, fill: theme.colors.pallete.secondary.color }, void 0), "\u00A0"] }, void 0)), jsx$1(Text$7, __assign$1({ testId: "HurryUpText", variant: "body", size: "small", weight: "demi", color: hurryUpTextColor }, { children: hurryUpText }), void 0), "\u00A0", clockPosition === 'right' && (jsxs$1(Fragment$2, { children: [jsx$1(Icon.PDP.Stopwatch, { width: iconSize, height: iconSize, fill: theme.colors.pallete.secondary.color }, void 0), "\u00A0"] }, void 0)), showTimer && (jsx$1(Timer, __assign$1({ countdown: countdown, onTimeUp: function () { } }, timerProps, { isCardsVersion: isFullVersion }), void 0))] }), void 0));
|
|
7018
7021
|
};
|
|
7019
7022
|
|
|
7020
|
-
var Container$
|
|
7023
|
+
var Container$19 = newStyled.div(templateObject_1$1I || (templateObject_1$1I = __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) {
|
|
7021
7024
|
var size = _a.size;
|
|
7022
7025
|
return (size ? size : '100%');
|
|
7023
7026
|
}, function (_a) {
|
|
@@ -7032,7 +7035,7 @@ var borderSize = {
|
|
|
7032
7035
|
large: '3px',
|
|
7033
7036
|
};
|
|
7034
7037
|
var DEFAULT_COLOR = '#5EAD9B';
|
|
7035
|
-
var StyledSpinner = newStyled.div(templateObject_2$
|
|
7038
|
+
var StyledSpinner = newStyled.div(templateObject_2$1m || (templateObject_2$1m = __makeTemplateObject(["\n position: relative;\n height: 100%;\n width: 100%;\n top: 50%;\n left: 50%;\n box-sizing: border-box;\n border: ", " solid\n ", ";\n border-top-color: ", ";\n border-radius: 100%;\n animation: rotation ", "s infinite linear;\n\n @keyframes rotation {\n from {\n transform: translateX(-50%) translateY(-50%) rotate(0deg);\n }\n to {\n transform: translateX(-50%) translateY(-50%) rotate(359deg);\n }\n }\n"], ["\n position: relative;\n height: 100%;\n width: 100%;\n top: 50%;\n left: 50%;\n box-sizing: border-box;\n border: ", " solid\n ", ";\n border-top-color: ", ";\n border-radius: 100%;\n animation: rotation ", "s infinite linear;\n\n @keyframes rotation {\n from {\n transform: translateX(-50%) translateY(-50%) rotate(0deg);\n }\n to {\n transform: translateX(-50%) translateY(-50%) rotate(359deg);\n }\n }\n"])), function (_a) {
|
|
7036
7039
|
var size = _a.size;
|
|
7037
7040
|
return borderSize[size];
|
|
7038
7041
|
}, function (_a) {
|
|
@@ -7045,29 +7048,29 @@ var StyledSpinner = newStyled.div(templateObject_2$1l || (templateObject_2$1l =
|
|
|
7045
7048
|
var _b = _a.duration, duration = _b === void 0 ? 0.7 : _b;
|
|
7046
7049
|
return duration;
|
|
7047
7050
|
});
|
|
7048
|
-
var templateObject_1$
|
|
7051
|
+
var templateObject_1$1I, templateObject_2$1m;
|
|
7049
7052
|
|
|
7050
7053
|
var Spinner = function (_a) {
|
|
7051
7054
|
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;
|
|
7052
|
-
return (jsx$1(Container$
|
|
7055
|
+
return (jsx$1(Container$19, __assign$1({ size: size, "data-testid": "Container" }, { children: complete ? (jsx$1(Icon.Actions.LightCheck, { fill: fill, svgProps: { strokeWidth: completeIconStroke } }, void 0)) : (jsx$1(StyledSpinner, { duration: animationDuration, "data-testid": "Loading", color: fill, background: background, size: borderSize !== null && borderSize !== void 0 ? borderSize : ComponentSize.Small }, void 0)) }), void 0));
|
|
7053
7056
|
};
|
|
7054
7057
|
|
|
7055
|
-
var ProgressContainer = newStyled.div(templateObject_1$
|
|
7056
|
-
var ProgressFiller = newStyled.div(templateObject_2$
|
|
7057
|
-
var templateObject_1$
|
|
7058
|
+
var ProgressContainer = newStyled.div(templateObject_1$1H || (templateObject_1$1H = __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); });
|
|
7059
|
+
var ProgressFiller = newStyled.div(templateObject_2$1l || (templateObject_2$1l = __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; });
|
|
7060
|
+
var templateObject_1$1H, templateObject_2$1l;
|
|
7058
7061
|
|
|
7059
7062
|
var ProgressBar$1 = function (_a) {
|
|
7060
7063
|
var progress = _a.progress, hide = _a.hide;
|
|
7061
7064
|
return (jsx$1(ProgressContainer, __assign$1({ "data-testid": "progress-bar", hide: hide }, { children: jsx$1(ProgressFiller, { progress: progress }, void 0) }), void 0));
|
|
7062
7065
|
};
|
|
7063
7066
|
|
|
7064
|
-
var Container$
|
|
7065
|
-
var HTMLVideo = newStyled.video(templateObject_2$
|
|
7066
|
-
var PlayIcon = newStyled(Icon.PDP.PlayVideo)(templateObject_3$
|
|
7067
|
-
var PlayContainer = newStyled.div(templateObject_4$
|
|
7067
|
+
var Container$18 = newStyled.div(templateObject_1$1G || (templateObject_1$1G = __makeTemplateObject(["\n max-width: 530px;\n position: relative;\n"], ["\n max-width: 530px;\n position: relative;\n"])));
|
|
7068
|
+
var HTMLVideo = newStyled.video(templateObject_2$1k || (templateObject_2$1k = __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; });
|
|
7069
|
+
var PlayIcon = newStyled(Icon.PDP.PlayVideo)(templateObject_3$15 || (templateObject_3$15 = __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"])));
|
|
7070
|
+
var PlayContainer = newStyled.div(templateObject_4$U || (templateObject_4$U = __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 &:hover {\n cursor: pointer;\n }\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\n &:hover {\n cursor: pointer;\n }\n"])));
|
|
7068
7071
|
var PauseContainer = newStyled.div(templateObject_5$K || (templateObject_5$K = __makeTemplateObject(["\n z-index: 1;\n width: 100%;\n height: 100%;\n position: absolute;\n"], ["\n z-index: 1;\n width: 100%;\n height: 100%;\n position: absolute;\n"])));
|
|
7069
7072
|
var MuteButton = newStyled.button(templateObject_6$C || (templateObject_6$C = __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"])));
|
|
7070
|
-
var templateObject_1$
|
|
7073
|
+
var templateObject_1$1G, templateObject_2$1k, templateObject_3$15, templateObject_4$U, templateObject_5$K, templateObject_6$C;
|
|
7071
7074
|
|
|
7072
7075
|
var Video$1 = function (_a) {
|
|
7073
7076
|
var _b, _c;
|
|
@@ -7118,14 +7121,14 @@ var Video$1 = function (_a) {
|
|
|
7118
7121
|
}
|
|
7119
7122
|
setIsLoading(false);
|
|
7120
7123
|
};
|
|
7121
|
-
return (jsxs$1(Container$
|
|
7124
|
+
return (jsxs$1(Container$18, __assign$1({ className: className }, { children: [!isLoading && withProgressBar && jsx$1(ProgressBar$1, { progress: progress, hide: hideProgressBar }, void 0), !isPlaying ? (jsx$1(PlayContainer, __assign$1({ "data-testid": "play", onClick: handlePlayClick }, { children: isStarted && jsx$1(PlayIcon, {}, void 0) }), void 0)) : (jsx$1(PauseContainer, { "data-testid": "pause", onClick: handlePauseClick }, void 0)), hasAudioControl && (jsxs$1(MuteButton, __assign$1({ onClick: handleMuteToggle }, { children: [isMuted && jsx$1(Icon$1, { name: "custom/sound_off", testId: "sound-off-icon" }, void 0), !isMuted && jsx$1(Icon$1, { name: "custom/sound_on", testId: "sound-on-icon" }, void 0)] }), void 0)), jsxs$1(HTMLVideo, __assign$1({}, rest, { muted: isMuted, "data-testid": "video", poster: thumbnail, playsInline: true, ref: videoRef, onTimeUpdate: onTimeUpdate, onCanPlay: function () { return setIsLoading(false); }, onLoadedData: handleOnloadedData, onPause: function () { return setIsPlaying(false); }, onPlaying: function () { return setIsPlaying(true); }, height: height || 'auto' }, { children: [jsx$1("track", { kind: "captions" }, void 0), jsx$1("source", { src: source }, void 0)] }), void 0)] }), void 0));
|
|
7122
7125
|
};
|
|
7123
7126
|
|
|
7124
|
-
var LikeCount = newStyled.span(templateObject_1$
|
|
7127
|
+
var LikeCount = newStyled.span(templateObject_1$1F || (templateObject_1$1F = __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) {
|
|
7125
7128
|
var theme = _a.theme;
|
|
7126
7129
|
return theme.colors.shades.black.color;
|
|
7127
7130
|
});
|
|
7128
|
-
var LikeBtnContainer = newStyled.button(templateObject_2$
|
|
7131
|
+
var LikeBtnContainer = newStyled.button(templateObject_2$1j || (templateObject_2$1j = __makeTemplateObject(["\n position: ", ";\n top: ", ";\n right: ", ";\n z-index: ", ";\n padding: ", ";\n box-sizing: ", ";\n background-color: transparent;\n border: none;\n"], ["\n position: ", ";\n top: ", ";\n right: ", ";\n z-index: ", ";\n padding: ", ";\n box-sizing: ", ";\n background-color: transparent;\n border: none;\n"])), function (_a) {
|
|
7129
7132
|
var _b = _a.position, position = _b === void 0 ? 'absolute' : _b;
|
|
7130
7133
|
return position;
|
|
7131
7134
|
}, function (_a) {
|
|
@@ -7144,7 +7147,7 @@ var LikeBtnContainer = newStyled.button(templateObject_2$1i || (templateObject_2
|
|
|
7144
7147
|
var _b = _a.boxSizing, boxSizing = _b === void 0 ? 'border-box' : _b;
|
|
7145
7148
|
return boxSizing;
|
|
7146
7149
|
});
|
|
7147
|
-
var templateObject_1$
|
|
7150
|
+
var templateObject_1$1F, templateObject_2$1j;
|
|
7148
7151
|
|
|
7149
7152
|
var getStylesBySize$c = function (size) {
|
|
7150
7153
|
switch (size) {
|
|
@@ -7165,7 +7168,7 @@ var getStylesBySize$c = function (size) {
|
|
|
7165
7168
|
};
|
|
7166
7169
|
}
|
|
7167
7170
|
};
|
|
7168
|
-
var Container$
|
|
7171
|
+
var Container$17 = newStyled.div(templateObject_1$1E || (templateObject_1$1E = __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) {
|
|
7169
7172
|
var backgroundColor = _a.backgroundColor;
|
|
7170
7173
|
return backgroundColor;
|
|
7171
7174
|
}, function (_a) {
|
|
@@ -7206,9 +7209,9 @@ var IconButton = function (_a) {
|
|
|
7206
7209
|
var _b, _c;
|
|
7207
7210
|
var children = _a.children, disabled = _a.disabled, _d = _a.size, size = _d === void 0 ? ComponentSize.Medium : _d, onClick = _a.onClick, backgroundColor = _a.backgroundColor, _e = _a.dataTestId, dataTestId = _e === void 0 ? 'Container' : _e, _f = _a.hasText, hasText = _f === void 0 ? false : _f, boxShadow = _a.boxShadow, _g = _a.rounded, rounded = _g === void 0 ? true : _g, width = _a.width, border = _a.border;
|
|
7208
7211
|
var theme = useTheme();
|
|
7209
|
-
return (jsx$1(Container$
|
|
7212
|
+
return (jsx$1(Container$17, __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));
|
|
7210
7213
|
};
|
|
7211
|
-
var templateObject_1$
|
|
7214
|
+
var templateObject_1$1E;
|
|
7212
7215
|
|
|
7213
7216
|
var LikeButton = function (_a) {
|
|
7214
7217
|
var _b;
|
|
@@ -7221,10 +7224,10 @@ var LikeButton = function (_a) {
|
|
|
7221
7224
|
return (jsx$1(LikeBtnContainer, __assign$1({ className: className }, containerProps, { children: jsxs$1(IconButton, __assign$1({ onClick: onClick, backgroundColor: background, hasText: !!likes, boxShadow: "0 6px 16px rgba(0, 0, 0, 0.12)" }, { children: [jsx$1(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 && jsx$1(LikeCount, __assign$1({ className: "like-count" }, { children: likes }), void 0)] }), isLiked.toString()) }), void 0));
|
|
7222
7225
|
};
|
|
7223
7226
|
|
|
7224
|
-
var RegularPriceTagSpan = newStyled.span(templateObject_1$
|
|
7225
|
-
var ClubPriceTagSpan = newStyled.span(templateObject_2$
|
|
7226
|
-
var PriceContainer$1 = newStyled.span(templateObject_3$
|
|
7227
|
-
var PriceContainerV2 = newStyled.span(templateObject_4$
|
|
7227
|
+
var RegularPriceTagSpan = newStyled.span(templateObject_1$1D || (templateObject_1$1D = __makeTemplateObject(["\n background-color: #e5e5e5;\n padding: 3px 4px;\n border-radius: 4px;\n gap: 10px;\n align-items: center;\n justify-content: center;\n color: #5a5a5a;\n font-weight: 600;\n font-size: 0.6rem;\n line-height: 1rem;\n text-align: center;\n margin-bottom: 0.5rem;\n"], ["\n background-color: #e5e5e5;\n padding: 3px 4px;\n border-radius: 4px;\n gap: 10px;\n align-items: center;\n justify-content: center;\n color: #5a5a5a;\n font-weight: 600;\n font-size: 0.6rem;\n line-height: 1rem;\n text-align: center;\n margin-bottom: 0.5rem;\n"])));
|
|
7228
|
+
var ClubPriceTagSpan = newStyled.span(templateObject_2$1i || (templateObject_2$1i = __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"])));
|
|
7229
|
+
var PriceContainer$1 = newStyled.span(templateObject_3$14 || (templateObject_3$14 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
7230
|
+
var PriceContainerV2 = newStyled.span(templateObject_4$T || (templateObject_4$T = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
7228
7231
|
var PriceWithTagContainer = newStyled.span(templateObject_5$J || (templateObject_5$J = __makeTemplateObject(["\n display: flex;\n gap: 8px;\n"], ["\n display: flex;\n gap: 8px;\n"])));
|
|
7229
7232
|
var RegularPriceTag = function () {
|
|
7230
7233
|
return jsx$1(RegularPriceTagSpan, { children: "REGULAR PRICE" }, void 0);
|
|
@@ -7275,11 +7278,11 @@ var PriceLabelV4 = function (_a) {
|
|
|
7275
7278
|
: ComponentSize.XSmall;
|
|
7276
7279
|
return (jsx$1(Price$1, __assign$1({ size: sizeProp, color: theme.component.pricing.priceLabel.price.originalPriceColor, underlined: originalPriceUnderlined, "data-testid": getTestId(testId, 'original-product-price'), theme: theme }, { children: originalPrice }), void 0));
|
|
7277
7280
|
};
|
|
7278
|
-
return (jsxs$1(Container$
|
|
7281
|
+
return (jsxs$1(Container$1w, __assign$1({}, rest, { children: [clubStyle && !styledPrice ? (jsxs$1(PriceContainer$1, { children: [jsxs$1(PriceWithTagContainer, { children: [jsx$1(OriginalPrice, {}, void 0), jsx$1(RegularPriceTag, {}, void 0)] }, void 0), jsxs$1(PriceWithTagContainer, { children: [jsx$1(Price$1, __assign$1({ margin: true, "data-testid": getTestId(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: clubPrice }), void 0), jsx$1(ClubPriceTag, { label: theme.label.member }, void 0)] }, void 0)] }, void 0)) : (jsxs$1(PriceContainer$1, { children: [jsxs$1(PriceWithTagContainer, { children: [jsx$1(OriginalPrice, {}, void 0), jsx$1(RegularPriceTag, {}, void 0)] }, void 0), jsxs$1(PriceWithTagContainer, { children: [jsxs$1(PriceContainerV2, { children: [jsx$1(Price$1, __assign$1({ margin: true, finalPriceStyledSmall: true, style: { marginTop: '-5px', color: '#c64844' } }, priceCommonProps, { size: size, "data-testid": getTestId(testId, 'final-product-price') }, { children: currencySymbol }), void 0), jsxs$1(Price$1, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size, style: { color: '#c64844' } }, { children: [finalPriceArray[0]
|
|
7279
7282
|
? finalPriceArray[0]
|
|
7280
7283
|
: (_b = "".concat(productFinalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1], "."] }), void 0), jsx$1(Price$1, __assign$1({ finalPriceStyledSmall: true, style: { marginTop: '-6px', color: '#c64844' } }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }, void 0), jsx$1(ClubPriceTag, { label: theme.label.member }, void 0)] }, void 0)] }, void 0)), discount && (jsx$1(TagContainer, __assign$1({ size: size }, { children: jsx$1(DiscountTag$4, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
|
|
7281
7284
|
};
|
|
7282
|
-
var templateObject_1$
|
|
7285
|
+
var templateObject_1$1D, templateObject_2$1i, templateObject_3$14, templateObject_4$T, templateObject_5$J;
|
|
7283
7286
|
|
|
7284
7287
|
var STYLES_BY_THEME = {
|
|
7285
7288
|
TheSpaDr: {
|
|
@@ -7352,10 +7355,10 @@ var ImageContainer$6 = newStyled.div(function (_a) {
|
|
|
7352
7355
|
height: height,
|
|
7353
7356
|
});
|
|
7354
7357
|
});
|
|
7355
|
-
var ImageHoverContainer$3 = newStyled.img(templateObject_1$
|
|
7356
|
-
var Container$
|
|
7357
|
-
var ProdCardContainer$4 = newStyled.div(templateObject_3$
|
|
7358
|
-
var Title$7 = newStyled.h2(templateObject_4$
|
|
7358
|
+
var ImageHoverContainer$3 = newStyled.img(templateObject_1$1C || (templateObject_1$1C = __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"])));
|
|
7359
|
+
var Container$16 = newStyled.a(templateObject_2$1h || (templateObject_2$1h = __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"])));
|
|
7360
|
+
var ProdCardContainer$4 = newStyled.div(templateObject_3$13 || (templateObject_3$13 = __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"])));
|
|
7361
|
+
var Title$7 = newStyled.h2(templateObject_4$S || (templateObject_4$S = __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) {
|
|
7359
7362
|
var theme = _a.theme;
|
|
7360
7363
|
return STYLES_BY_THEME[theme.name].title.fontSize;
|
|
7361
7364
|
}, function (_a) {
|
|
@@ -7416,7 +7419,7 @@ var BottomTagContainer$9 = newStyled.div(templateObject_6$B || (templateObject_6
|
|
|
7416
7419
|
});
|
|
7417
7420
|
var MarginTopContainer$1 = newStyled.div(templateObject_7$v || (templateObject_7$v = __makeTemplateObject(["\n margin-top: 8px;\n"], ["\n margin-top: 8px;\n"])));
|
|
7418
7421
|
var ClubOfferPriceLabelWrapper = newStyled.div(templateObject_8$o || (templateObject_8$o = __makeTemplateObject(["\n margin-top: 2px;\n margin-bottom: 2px;\n"], ["\n margin-top: 2px;\n margin-bottom: 2px;\n"])));
|
|
7419
|
-
var templateObject_1$
|
|
7422
|
+
var templateObject_1$1C, templateObject_2$1h, templateObject_3$13, templateObject_4$S, templateObject_5$I, templateObject_6$B, templateObject_7$v, templateObject_8$o;
|
|
7420
7423
|
|
|
7421
7424
|
var ProductItemMobile = function (_a) {
|
|
7422
7425
|
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
|
|
@@ -7508,12 +7511,12 @@ var ProductItemMobile = function (_a) {
|
|
|
7508
7511
|
setIsLiked(function (prev) { return !prev; });
|
|
7509
7512
|
likeBtn === null || likeBtn === void 0 ? void 0 : likeBtn.onClick(e);
|
|
7510
7513
|
};
|
|
7511
|
-
return (jsxs(ProdCardContainer$4, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$
|
|
7514
|
+
return (jsxs(ProdCardContainer$4, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$16, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', className: "picContainer", onClick: onClick }, { children: [!!likeBtn && (jsx(LikeButton, { isLiked: isLiked, likes: likesCount, onClick: handleLikeClick, colors: {
|
|
7512
7515
|
background: {
|
|
7513
7516
|
active: (_f = (_e = (_d = likeBtn.colors) === null || _d === void 0 ? void 0 : _d.background) === null || _e === void 0 ? void 0 : _e.active) !== null && _f !== void 0 ? _f : theme.colors.shades.white.color,
|
|
7514
7517
|
hover: (_m = (_j = (_h = (_g = likeBtn.colors) === null || _g === void 0 ? void 0 : _g.background) === null || _h === void 0 ? void 0 : _h.hover) !== null && _j !== void 0 ? _j : (_l = (_k = likeBtn.colors) === null || _k === void 0 ? void 0 : _k.background) === null || _l === void 0 ? void 0 : _l.active) !== null && _m !== void 0 ? _m : theme.colors.shades.white.color,
|
|
7515
7518
|
},
|
|
7516
|
-
} }, void 0)), !!topTag || !!bottomTag ? (jsxs(ImageContainer$6, __assign$1({ width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height, "data-testid": "tags-image-container" }, { children: [jsx(Image$3, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, width: hasDefaultSize ? styles === null || styles === void 0 ? void 0 : styles.width : '100%', height: hasDefaultSize ? styles === null || styles === void 0 ? void 0 : styles.height : '100%', loading: isOnViewport ? 'eager' : 'lazy', decoding: isOnViewport ? 'sync' : 'async', borderRadius: STYLES_BY_THEME[theme.name].image.borderRadius }, void 0), jsx(TopTagContainer$9, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: topTag }), void 0), jsx(BottomTagContainer$9, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: bottomTag }), void 0)] }), void 0)) : (jsx(Image$3, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height, loading: isOnViewport ? 'eager' : 'lazy', decoding: isOnViewport ? 'sync' : 'async', borderRadius: STYLES_BY_THEME[theme.name].image.borderRadius }, void 0)), imageHover ? (jsx(ImageHoverContainer$3, { className: "hover__image", src: imageHover.src, srcSet: getSrcSet(imageHover.src, 180, 360, 720, 960), loading: "lazy", decoding: "async", alt: imageHover.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)) : null] }), void 0), colorPicker.display && colorPicker.position === 'top' && (jsxs(Fragment, { children: [jsx(Spacing, { size: space }, void 0), colorPicker.component] }, void 0)), ratingOnTop && (jsxs(Fragment, { children: [jsx(Spacing, { size: space }, void 0), jsx(Spacing, { size: space }, void 0), jsx(RatingDisplay, {}, void 0)] }, void 0)), jsxs(Container$
|
|
7519
|
+
} }, void 0)), !!topTag || !!bottomTag ? (jsxs(ImageContainer$6, __assign$1({ width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height, "data-testid": "tags-image-container" }, { children: [jsx(Image$3, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, width: hasDefaultSize ? styles === null || styles === void 0 ? void 0 : styles.width : '100%', height: hasDefaultSize ? styles === null || styles === void 0 ? void 0 : styles.height : '100%', loading: isOnViewport ? 'eager' : 'lazy', decoding: isOnViewport ? 'sync' : 'async', borderRadius: STYLES_BY_THEME[theme.name].image.borderRadius }, void 0), jsx(TopTagContainer$9, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: topTag }), void 0), jsx(BottomTagContainer$9, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: bottomTag }), void 0)] }), void 0)) : (jsx(Image$3, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height, loading: isOnViewport ? 'eager' : 'lazy', decoding: isOnViewport ? 'sync' : 'async', borderRadius: STYLES_BY_THEME[theme.name].image.borderRadius }, void 0)), imageHover ? (jsx(ImageHoverContainer$3, { className: "hover__image", src: imageHover.src, srcSet: getSrcSet(imageHover.src, 180, 360, 720, 960), loading: "lazy", decoding: "async", alt: imageHover.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)) : null] }), void 0), colorPicker.display && colorPicker.position === 'top' && (jsxs(Fragment, { children: [jsx(Spacing, { size: space }, void 0), colorPicker.component] }, void 0)), ratingOnTop && (jsxs(Fragment, { children: [jsx(Spacing, { size: space }, void 0), jsx(Spacing, { size: space }, void 0), jsx(RatingDisplay, {}, void 0)] }, void 0)), jsxs(Container$16, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', onClick: onClick, className: "textContainer", style: { alignItems: showClubPriceLabel ? 'flex-start' : 'center' } }, { children: [jsx(Spacing, { size: space }, void 0), jsx(Title$7, __assign$1({ theme: theme, align: showClubPriceLabel ? 'left' : alignName, "data-testid": "product-card-title" }, { children: title }), void 0), jsx(Spacing, { size: space }, void 0), hasStrength && hasStrength.strength !== -1 && (jsxs(Fragment, { children: [jsx(StrengthBars, { barsFilled: hasStrength.strength, supportText: hasStrength.description }, void 0), jsx(Spacing, { size: 10 }, void 0)] }, void 0)), priceAtBottom && !ratingOnTop ? (jsxs(Fragment, { children: [jsx(RatingDisplay, {}, void 0), jsx(Spacing, { size: space }, void 0), jsxs(MarginTopContainer$1, __assign$1({ style: { marginTop: (clubOffer === null || clubOffer === void 0 ? void 0 : clubOffer.isClubOffer) ? 0 : 8 } }, { children: [priceLoading ? jsx(SkeletonBox, { height: "20px", width: "140px" }, void 0) : PriceLabelDisplay(), (clubOffer === null || clubOffer === void 0 ? void 0 : clubOffer.isClubOffer) && PriceLabelDisplay(5)] }), void 0)] }, void 0)) : (jsxs(Fragment, { children: [priceLoading ? (jsx(SkeletonBox, { height: "20px", width: "140px" }, void 0)) : (jsxs(Fragment, { children: [!(clubOffer === null || clubOffer === void 0 ? void 0 : clubOffer.isClubMember) && PriceLabelDisplay(), (clubOffer === null || clubOffer === void 0 ? void 0 : clubOffer.isClubOffer) && PriceLabelDisplay(5), 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), discountTagLoading ? (jsx(SkeletonBox, { height: "22px", width: "75px" }, void 0)) : (showDiscountPercentageTag && (jsx(TagContainer, __assign$1({ size: ComponentSize.Small }, { children: discountTag && (jsx(DiscountTag$4, __assign$1({}, discountTag, { size: ComponentSize.Medium, style: {
|
|
7517
7520
|
letterSpacing: '-0.05rem',
|
|
7518
7521
|
} }), void 0)) }), void 0))), jsx(Spacing, { size: space }, void 0), !ratingOnTop && jsx(RatingDisplay, {}, void 0)] }, void 0)), !!onClickBottomButton && (jsxs(Fragment, { children: [jsx(Spacing, { size: space }, void 0), jsx(Spacing, { size: space }, void 0), jsxs(IconButton, __assign$1({ size: ComponentSize.Small, width: "100%", onClick: function (e) {
|
|
7519
7522
|
e.preventDefault();
|
|
@@ -7533,10 +7536,10 @@ var ImageContainer$5 = newStyled.div(function (_a) {
|
|
|
7533
7536
|
height: height,
|
|
7534
7537
|
});
|
|
7535
7538
|
});
|
|
7536
|
-
var ImageHoverContainer$2 = newStyled.img(templateObject_1$
|
|
7537
|
-
var Container$
|
|
7538
|
-
var ProdCardContainer$3 = newStyled.div(templateObject_3$
|
|
7539
|
-
var Title$6 = newStyled.p(templateObject_4$
|
|
7539
|
+
var ImageHoverContainer$2 = newStyled.img(templateObject_1$1B || (templateObject_1$1B = __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; });
|
|
7540
|
+
var Container$15 = newStyled.a(templateObject_2$1g || (templateObject_2$1g = __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"])));
|
|
7541
|
+
var ProdCardContainer$3 = newStyled.div(templateObject_3$12 || (templateObject_3$12 = __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"])));
|
|
7542
|
+
var Title$6 = newStyled.p(templateObject_4$R || (templateObject_4$R = __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; });
|
|
7540
7543
|
var getStylesBySize$a = function (size) {
|
|
7541
7544
|
switch (size) {
|
|
7542
7545
|
case ComponentSize.Medium:
|
|
@@ -7615,26 +7618,26 @@ var ProductItemTK = function (_a) {
|
|
|
7615
7618
|
: undefined }, void 0));
|
|
7616
7619
|
};
|
|
7617
7620
|
var RatingDisplay = function () { return (jsx(Rating, { size: size === ComponentSize.Large ? ComponentSize.Small : ComponentSize.XSmall, rating: rating.rating, reviews: rating.reviews, reviewsText: "", wrapWithParenthesis: true }, void 0)); };
|
|
7618
|
-
return (jsxs(ProdCardContainer$3, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$
|
|
7621
|
+
return (jsxs(ProdCardContainer$3, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$15, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', className: "picContainer", onClick: onClick }, { children: [!!topTag || !!bottomTag || !!topRightTag ? (jsxs(ImageContainer$5, __assign$1({ width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height, "data-testid": "tags-image-container" }, { children: [jsx(Image$3, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, borderRadius: ImageBorderRadius, width: "100%", height: "100%", loading: isOnViewport ? 'eager' : 'lazy', decoding: isOnViewport ? 'sync' : 'async' }, void 0), jsx(TopTagContainer$8, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: topTag }), void 0), jsx(BottomTagContainer$8, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: bottomTag }), void 0), !!topRightTag && jsx(TopRightTagContainer$3, { children: topRightTag }, void 0)] }), void 0)) : (jsx(Image$3, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, borderRadius: ImageBorderRadius, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height, loading: isOnViewport ? 'eager' : 'lazy', decoding: isOnViewport ? 'sync' : 'async' }, void 0)), imageHover ? (jsx(ImageHoverContainer$2, { className: "hover__image", src: imageHover.src, srcSet: getSrcSet(imageHover.src, 180, 360, 720, 960), loading: "lazy", decoding: "async", alt: imageHover.alt, borderRadius: ImageBorderRadius, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)) : null] }), void 0), colorPicker.display && colorPicker.position === 'top' && (jsxs(Fragment, { children: [hasSpacing && jsx(Spacing, { size: space }, void 0), colorPicker.component] }, void 0)), jsxs(Container$15, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', onClick: onClick, className: "textContainer", style: { alignItems: showClubPriceLabel ? 'flex-start' : 'center', gap: textContainerGap } }, { children: [hasSpacing && jsx(Spacing, { size: space }, void 0), titleStyle ? (
|
|
7619
7622
|
// @ts-ignore
|
|
7620
7623
|
jsx(Text$7, __assign$1({ variant: titleStyle.variant, weight: titleStyle.weight, size: titleStyle.size, style: {
|
|
7621
7624
|
textAlign: showClubPriceLabel ? 'left' : alignName,
|
|
7622
7625
|
marginTop: hasSpacing ? undefined : textContainerGap,
|
|
7623
7626
|
} }, { children: title }), void 0)) : (jsx(Title$6, __assign$1({ theme: theme, align: showClubPriceLabel ? 'left' : alignName }, { children: title }), void 0)), hasSpacing && jsx(Spacing, { size: space }, void 0), colorPicker.display && colorPicker.position === 'middle' && jsx(Fragment, { children: colorPicker.component }, void 0), (hasStrength === null || hasStrength === void 0 ? void 0 : hasStrength.strength) !== -1 && (jsxs(Fragment, { children: [jsx(StrengthBars, { barsFilled: hasStrength.strength, supportText: hasStrength.description }, void 0), jsx(Spacing, { size: 10 }, void 0)] }, void 0)), priceAtBottom ? (jsxs(Fragment, { children: [customSizeRating ? (jsx(Rating, { size: customSizeRating, rating: rating.rating, reviews: rating.reviews, reviewsText: "", wrapWithParenthesis: true }, void 0)) : (jsx(RatingDisplay, {}, void 0)), hasSpacing && jsx(Spacing, { size: space }, void 0), jsx(MarginTopContainer, { children: priceLoading ? jsx(SkeletonBox, { height: "20px", width: "140px" }, void 0) : jsx(PriceLabelDisplay, {}, void 0) }, void 0)] }, void 0)) : (jsxs(Fragment, { children: [priceLoading ? (jsx(SkeletonBox, { height: "20px", width: "140px" }, void 0)) : (jsxs(Fragment, { children: [jsx(PriceLabelDisplay, {}, void 0), jsx(BuyNowPayLater, { displayBNPL: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.displayBNPL, installments: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.installments) || 0, installmentPrice: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.installmentPrice) || '', iconFolder: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconFolder, iconName: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconName) || '', showLogo: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.showLogo, iconColor: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconColor, fontSize: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.fontSize }, void 0)] }, void 0)), showClubPriceLabel && jsx(ClubPriceLabel, { clubPrice: clubPrice }, void 0), hasSpacing && jsx(Spacing, { size: space }, void 0), jsx(RatingDisplay, {}, void 0)] }, void 0))] }), void 0), colorPicker.display && colorPicker.position === 'bottom' && (jsxs(Fragment, { children: [hasSpacing && jsx(Spacing, { size: space }, void 0), colorPicker.component] }, void 0))] }), void 0));
|
|
7624
7627
|
};
|
|
7625
|
-
var templateObject_1$
|
|
7628
|
+
var templateObject_1$1B, templateObject_2$1g, templateObject_3$12, templateObject_4$R, templateObject_5$H, templateObject_6$A, templateObject_7$u, templateObject_8$n;
|
|
7626
7629
|
|
|
7627
|
-
var Container$
|
|
7630
|
+
var Container$14 = newStyled.div(templateObject_1$1A || (templateObject_1$1A = __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"])));
|
|
7628
7631
|
function withProductGrid(ProductItemComponent, data) {
|
|
7629
7632
|
function WithProductGrid(props) {
|
|
7630
|
-
return (jsx$1(Container$
|
|
7633
|
+
return (jsx$1(Container$14, __assign$1({ "data-testid": "product-grid-container" }, { children: data.map(function (product, index) { return (jsx$1(ProductItemComponent, __assign$1({}, product, props), index)); }) }), void 0));
|
|
7631
7634
|
}
|
|
7632
7635
|
/* istanbul ignore next */
|
|
7633
7636
|
var wrappedComponentName = ProductItemComponent.displayName || ProductItemComponent.name || 'Component';
|
|
7634
7637
|
WithProductGrid.displayName = "withGrid(".concat(wrappedComponentName, ")");
|
|
7635
7638
|
return WithProductGrid;
|
|
7636
7639
|
}
|
|
7637
|
-
var templateObject_1$
|
|
7640
|
+
var templateObject_1$1A;
|
|
7638
7641
|
|
|
7639
7642
|
var Collection = {
|
|
7640
7643
|
ProductItemMobile: ProductItemMobile,
|
|
@@ -7642,10 +7645,10 @@ var Collection = {
|
|
|
7642
7645
|
ProductItemTK: ProductItemTK,
|
|
7643
7646
|
};
|
|
7644
7647
|
|
|
7645
|
-
var CustomRadioGroup = newStyled(lt)(templateObject_1$
|
|
7646
|
-
newStyled(lt.Label)(templateObject_2$
|
|
7647
|
-
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$
|
|
7648
|
-
var Span = newStyled.span(templateObject_4$
|
|
7648
|
+
var CustomRadioGroup = newStyled(lt)(templateObject_1$1z || (templateObject_1$1z = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
7649
|
+
newStyled(lt.Label)(templateObject_2$1f || (templateObject_2$1f = __makeTemplateObject(["\n font-size: 0.88rem;\n"], ["\n font-size: 0.88rem;\n"])));
|
|
7650
|
+
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$11 || (templateObject_3$11 = __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"])));
|
|
7651
|
+
var Span = newStyled.span(templateObject_4$Q || (templateObject_4$Q = __makeTemplateObject(["\n font-weight: 600;\n"], ["\n font-weight: 600;\n"])));
|
|
7649
7652
|
var OptionsContainer = newStyled.div(templateObject_5$G || (templateObject_5$G = __makeTemplateObject(["\n display: flex;\n margin-top: 0.63rem;\n flex-wrap: wrap;\n"], ["\n display: flex;\n margin-top: 0.63rem;\n flex-wrap: wrap;\n"])));
|
|
7650
7653
|
var Label$5 = function (_a) {
|
|
7651
7654
|
var label = _a.label, values = _a.values;
|
|
@@ -7664,7 +7667,7 @@ var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
|
|
|
7664
7667
|
Option: Option,
|
|
7665
7668
|
OptionsContainer: OptionsContainer,
|
|
7666
7669
|
});
|
|
7667
|
-
var templateObject_1$
|
|
7670
|
+
var templateObject_1$1z, templateObject_2$1f, templateObject_3$11, templateObject_4$Q, templateObject_5$G;
|
|
7668
7671
|
|
|
7669
7672
|
var OneColorSelector = function (_a) {
|
|
7670
7673
|
var color = _a.color, selected = _a.selected, testId = _a.testId, noStock = _a.noStock, _b = _a.showCross, showCross = _b === void 0 ? false : _b;
|
|
@@ -7705,21 +7708,21 @@ var OutOfStock = function (_a) {
|
|
|
7705
7708
|
return (jsxs$1("svg", __assign$1({ width: "32", height: "33", viewBox: "0 0 32 33", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsx$1("title", { children: title }, void 0), jsx$1("mask", __assign$1({ id: "path-1-inside-1", fill: "white" }, { children: jsx$1("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), jsx$1("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), jsx$1("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), jsx$1("circle", { cx: "16", cy: "16.5", r: "12", stroke: theme.colors.shades['300'].color, strokeWidth: "0.5" }, void 0)] }), void 0));
|
|
7706
7709
|
};
|
|
7707
7710
|
|
|
7708
|
-
var Container$
|
|
7711
|
+
var Container$13 = newStyled.div(templateObject_1$1y || (templateObject_1$1y = __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) {
|
|
7709
7712
|
var borderColor = _a.borderColor;
|
|
7710
7713
|
return borderColor;
|
|
7711
7714
|
}, function (_a) {
|
|
7712
7715
|
var noStock = _a.noStock;
|
|
7713
7716
|
return (noStock ? '0.4' : '1');
|
|
7714
7717
|
});
|
|
7715
|
-
var Image$2 = newStyled.img(templateObject_2$
|
|
7718
|
+
var Image$2 = newStyled.img(templateObject_2$1e || (templateObject_2$1e = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n"], ["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n"])));
|
|
7716
7719
|
var PatternSelector = function (_a) {
|
|
7717
7720
|
var url = _a.url, selected = _a.selected, testId = _a.testId, noStock = _a.noStock;
|
|
7718
7721
|
var theme = useTheme();
|
|
7719
7722
|
var outerBorder = selected ? theme.colors.shades['550'].color : 'transparent';
|
|
7720
|
-
return (jsx$1(Container$
|
|
7723
|
+
return (jsx$1(Container$13, __assign$1({ "data-testid": testId, borderColor: outerBorder, noStock: noStock }, { children: jsx$1(Image$2, { src: url, alt: "pattern" }, void 0) }), void 0));
|
|
7721
7724
|
};
|
|
7722
|
-
var templateObject_1$
|
|
7725
|
+
var templateObject_1$1y, templateObject_2$1e;
|
|
7723
7726
|
|
|
7724
7727
|
var renderOptions$1 = function (options, showCross) {
|
|
7725
7728
|
if (showCross === void 0) { showCross = false; }
|
|
@@ -7742,9 +7745,9 @@ var SingleColorPicker = function (_a) {
|
|
|
7742
7745
|
return (jsxs(ColorRadioGroup$1, __assign$1({ value: selectedValue, onChange: onChange, css: { flexDirection: inline ? 'row' : 'column', alignItems: inline ? 'center' : 'start' } }, { children: [jsx(ColorRadioGroup$1.Label, { label: label, values: selectedValue && !inline ? selectedValue.label : undefined }, void 0), jsx(ColorRadioGroup$1.OptionsContainer, __assign$1({ css: { marginTop: inline ? '0' : '0.5rem', marginLeft: inline ? '1.5rem' : '0' }, "data-testid": "radio-group-options-container" }, { children: renderOptions$1(options, showCross) }), void 0)] }), void 0));
|
|
7743
7746
|
};
|
|
7744
7747
|
|
|
7745
|
-
var ColorPickerWrapper = newStyled(ColorRadioGroup$1)(templateObject_1$
|
|
7746
|
-
var NumericTooltip = newStyled.div(templateObject_2$
|
|
7747
|
-
var templateObject_1$
|
|
7748
|
+
var ColorPickerWrapper = newStyled(ColorRadioGroup$1)(templateObject_1$1x || (templateObject_1$1x = __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"])));
|
|
7749
|
+
var NumericTooltip = newStyled.div(templateObject_2$1d || (templateObject_2$1d = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n\n font-size: 12px;\n font-weight: 400;\n line-height: 20px;\n text-align: center;\n height: 100%;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n\n font-size: 12px;\n font-weight: 400;\n line-height: 20px;\n text-align: center;\n height: 100%;\n"])));
|
|
7750
|
+
var templateObject_1$1x, templateObject_2$1d;
|
|
7748
7751
|
|
|
7749
7752
|
var ColorPickerWithTooltip = function (_a) {
|
|
7750
7753
|
var _b = _a.options, options = _b === void 0 ? [] : _b, selectedValue = _a.selectedValue, label = _a.label, onChange = _a.onChange, _c = _a.inline, inline = _c === void 0 ? false : _c, _d = _a.maxVisibleOptions, maxVisibleOptions = _d === void 0 ? 5 : _d, showCross = _a.showCross, className = _a.className, tooltipOptions = _a.tooltipOptions;
|
|
@@ -7791,13 +7794,13 @@ var MultiColorPicker = function (_a) {
|
|
|
7791
7794
|
return (jsxs$1(ColorRadioGroup$1, __assign$1({ value: selectedColor, onChange: onChangeHandler }, { children: [jsx$1(ColorRadioGroup$1.Label, { label: label, values: valueLabels }, void 0), jsx$1(ColorRadioGroup$1.OptionsContainer, { children: renderOptions(selectedColor, options) }, void 0)] }), void 0));
|
|
7792
7795
|
};
|
|
7793
7796
|
|
|
7794
|
-
var Wrapper$5 = newStyled.div(templateObject_1$
|
|
7795
|
-
var Col$1 = newStyled.div(templateObject_2$
|
|
7796
|
-
var Row$2 = newStyled.div(templateObject_3
|
|
7797
|
+
var Wrapper$5 = newStyled.div(templateObject_1$1w || (templateObject_1$1w = __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'); });
|
|
7798
|
+
var Col$1 = newStyled.div(templateObject_2$1c || (templateObject_2$1c = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
7799
|
+
var Row$2 = newStyled.div(templateObject_3$10 || (templateObject_3$10 = __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) {
|
|
7797
7800
|
return props.rightToLeft &&
|
|
7798
7801
|
"\n flex-direction: row-reverse;\n justify-content: space-between;\n ";
|
|
7799
7802
|
});
|
|
7800
|
-
var H5 = newStyled.h5(templateObject_4$
|
|
7803
|
+
var H5 = newStyled.h5(templateObject_4$P || (templateObject_4$P = __makeTemplateObject(["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 500;\n margin-bottom: 0.125rem;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 500;\n margin-bottom: 0.125rem;\n margin: 0;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
7801
7804
|
var H3 = newStyled.h3(templateObject_5$F || (templateObject_5$F = __makeTemplateObject(["\n font-size: 1.125rem;\n line-height: 1.75rem;\n font-weight: 700;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 1.125rem;\n line-height: 1.75rem;\n font-weight: 700;\n margin: 0;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
7802
7805
|
var FreeShipping = newStyled.span(templateObject_6$z || (templateObject_6$z = __makeTemplateObject(["\n font-weight: 600;\n color: ", ";\n"], ["\n font-weight: 600;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
7803
7806
|
var CrossSellCheckbox = function (_a) {
|
|
@@ -7805,7 +7808,7 @@ var CrossSellCheckbox = function (_a) {
|
|
|
7805
7808
|
var theme = useTheme();
|
|
7806
7809
|
return (jsxs$1(Wrapper$5, __assign$1({ backgroundColor: theme.colors.shades['10'].color, rightToLeft: Boolean(rightToLeft) }, { children: [jsx$1(Checkbox, { text: "", id: "checkbox", onChange: onChange, size: ComponentSize.Small, variant: "secondary" }, void 0), jsxs$1(Row$2, __assign$1({ rightToLeft: Boolean(rightToLeft) }, { children: [jsx$1(Image$3, { src: imageURL, alt: "Cross sell image", borderRadius: "0.5rem" }, void 0), jsxs$1(Col$1, { children: [jsx$1(H5, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0), jsxs$1(H3, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: [description, jsxs$1(FreeShipping, __assign$1({ color: theme.colors.shades['700'].color }, { children: [' ', "+ ", freeShippingText] }), void 0)] }), void 0)] }, void 0)] }), void 0)] }), void 0));
|
|
7807
7810
|
};
|
|
7808
|
-
var templateObject_1$
|
|
7811
|
+
var templateObject_1$1w, templateObject_2$1c, templateObject_3$10, templateObject_4$P, templateObject_5$F, templateObject_6$z;
|
|
7809
7812
|
|
|
7810
7813
|
var index$1 = /*#__PURE__*/Object.freeze({
|
|
7811
7814
|
__proto__: null,
|
|
@@ -7834,7 +7837,7 @@ var sizeMapper = (_a = {},
|
|
|
7834
7837
|
_a[ComponentSize.XSmall] = 'small',
|
|
7835
7838
|
_a[ComponentSize.XXSmall] = 'small',
|
|
7836
7839
|
_a);
|
|
7837
|
-
var StyledBaseButton = newStyled(BaseButton)(templateObject_1$
|
|
7840
|
+
var StyledBaseButton = newStyled(BaseButton)(templateObject_1$1v || (templateObject_1$1v = __makeTemplateObject(["\n width: ", ";\n font-size: ", ";\n padding: ", ";\n font-weight: ", ";\n border-radius: ", ";\n cursor: pointer;\n ", "\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 ", "\n &:disabled {\n background-color: ", ";\n color: ", ";\n cursor: not-allowed;\n }\n svg {\n color: inherit;\n }\n"])), function (_a) {
|
|
7838
7841
|
var wide = _a.wide;
|
|
7839
7842
|
return (wide ? '100%' : 'fit-content');
|
|
7840
7843
|
}, function (_a) {
|
|
@@ -7859,11 +7862,11 @@ var StyledBaseButton = newStyled(BaseButton)(templateObject_1$1u || (templateObj
|
|
|
7859
7862
|
var theme = _a.theme;
|
|
7860
7863
|
return theme.colors.text.disabled;
|
|
7861
7864
|
});
|
|
7862
|
-
var StyledIcon = newStyled(Icon$1)(templateObject_2$
|
|
7865
|
+
var StyledIcon = newStyled(Icon$1)(templateObject_2$1b || (templateObject_2$1b = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
7863
7866
|
var marginLeft = _a.marginLeft, marginRight = _a.marginRight;
|
|
7864
7867
|
return "\n margin-left: ".concat(marginLeft !== null && marginLeft !== void 0 ? marginLeft : '10px', ";\n margin-right: ").concat(marginRight !== null && marginRight !== void 0 ? marginRight : '10px', ";\n ");
|
|
7865
7868
|
});
|
|
7866
|
-
var templateObject_1$
|
|
7869
|
+
var templateObject_1$1v, templateObject_2$1b;
|
|
7867
7870
|
|
|
7868
7871
|
var BaseCTA = function (_a) {
|
|
7869
7872
|
var _b, _c, _d;
|
|
@@ -7954,26 +7957,26 @@ var ButtonSecondaryOutline = function (props) {
|
|
|
7954
7957
|
} }), void 0));
|
|
7955
7958
|
};
|
|
7956
7959
|
|
|
7957
|
-
var Container$
|
|
7958
|
-
var IconContainer$5 = newStyled.div(templateObject_2$
|
|
7959
|
-
var Text$3 = newStyled.p(templateObject_3
|
|
7960
|
-
var Details = newStyled.span(templateObject_4$
|
|
7960
|
+
var Container$12 = newStyled.div(templateObject_1$1u || (templateObject_1$1u = __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; });
|
|
7961
|
+
var IconContainer$5 = newStyled.div(templateObject_2$1a || (templateObject_2$1a = __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"])));
|
|
7962
|
+
var Text$3 = newStyled.p(templateObject_3$$ || (templateObject_3$$ = __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; });
|
|
7963
|
+
var Details = newStyled.span(templateObject_4$O || (templateObject_4$O = __makeTemplateObject(["\n color: ", ";\n font-weight: 700;\n"], ["\n color: ", ";\n font-weight: 700;\n"])), function (props) { return props.color; });
|
|
7961
7964
|
var Note = function (_a) {
|
|
7962
7965
|
var accentColor = _a.accentColor, color = _a.color, backgroundColor = _a.backgroundColor, importantNoteText = _a.importantNoteText, text = _a.text;
|
|
7963
7966
|
var theme = useTheme();
|
|
7964
|
-
return (jsxs$1(Container$
|
|
7967
|
+
return (jsxs$1(Container$12, __assign$1({ color: backgroundColor ? backgroundColor : theme.component.deliveryDetails.note.backgroundColor, "data-testid": "Container" }, { children: [jsx$1(IconContainer$5, { children: jsx$1(Icon.Actions.Warning, { fill: accentColor ? accentColor : theme.component.deliveryDetails.note.accentColor }, void 0) }, void 0), jsx$1("div", { children: jsxs$1(Text$3, __assign$1({ color: color ? color : theme.component.deliveryDetails.note.color }, { children: [importantNoteText && (jsxs$1(Details, __assign$1({ color: accentColor ? accentColor : theme.component.deliveryDetails.note.accentColor }, { children: [importantNoteText, ":"] }), void 0)), ' ', text] }), void 0) }, void 0)] }), void 0));
|
|
7965
7968
|
};
|
|
7966
|
-
var templateObject_1$
|
|
7969
|
+
var templateObject_1$1u, templateObject_2$1a, templateObject_3$$, templateObject_4$O;
|
|
7967
7970
|
|
|
7968
|
-
var Title$5 = newStyled.h1(templateObject_1$
|
|
7971
|
+
var Title$5 = newStyled.h1(templateObject_1$1t || (templateObject_1$1t = __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) {
|
|
7969
7972
|
var theme = _a.theme;
|
|
7970
7973
|
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 ");
|
|
7971
7974
|
});
|
|
7972
|
-
var Line = newStyled.div(templateObject_2$
|
|
7973
|
-
var Row$1 = newStyled.div(templateObject_3$
|
|
7975
|
+
var Line = newStyled.div(templateObject_2$19 || (templateObject_2$19 = __makeTemplateObject(["\n width: 100%;\n height: 0.063rem;\n background-color: ", ";\n margin: 1.25rem 0;\n"], ["\n width: 100%;\n height: 0.063rem;\n background-color: ", ";\n margin: 1.25rem 0;\n"])), function (props) { return props.backgroundColor; });
|
|
7976
|
+
var Row$1 = newStyled.div(templateObject_3$_ || (templateObject_3$_ = __makeTemplateObject(["\n display: flex;\n ", "\n justify-content: space-between;\n align-items: flex-start;\n"], ["\n display: flex;\n ", "\n justify-content: space-between;\n align-items: flex-start;\n"])), mediaQueries({
|
|
7974
7977
|
flexDirection: ['column', 'row'],
|
|
7975
7978
|
}));
|
|
7976
|
-
var Col = newStyled.div(templateObject_4$
|
|
7979
|
+
var Col = newStyled.div(templateObject_4$N || (templateObject_4$N = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n justify-content: center;\n flex: 1;\n ", "\n"], ["\n display: flex;\n flex-direction: column;\n justify-content: center;\n flex: 1;\n ", "\n"])), mediaQueries({
|
|
7977
7980
|
margin: ['0', '0 1.25rem'],
|
|
7978
7981
|
marginBottom: ['1.875rem', '0'],
|
|
7979
7982
|
alignItems: ['center', 'flex-start'],
|
|
@@ -8008,16 +8011,16 @@ var DeliveryDetails = function (_a) {
|
|
|
8008
8011
|
var theme = useTheme();
|
|
8009
8012
|
return (jsxs$1("div", __assign$1({ "data-testid": "DeliveryDetails" }, { children: [jsx$1(Title$5, __assign$1({ color: theme.colors.shades[700].color }, { children: deliveryDetailsText }), void 0), jsx$1(Line, { backgroundColor: theme.colors.shades['200'].color }, void 0), note && jsx$1(Note, __assign$1({}, note), void 0), jsxs$1(Row$1, __assign$1({ "data-testid": "DD-row", theme: theme }, { children: [jsxs$1(Col, __assign$1({ theme: theme }, { children: [jsxs$1(SectionTitle, __assign$1({ theme: theme }, { children: [jsx$1(IconContainer$4, __assign$1({ theme: theme }, { children: jsx$1(Icon.PDP.Clock, { width: 1.5 }, void 0) }), void 0), arrivingBy.title] }), void 0), jsx$1(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: arrivingBy.details }), void 0)] }), void 0), jsxs$1(Col, __assign$1({ theme: theme }, { children: [jsxs$1(SectionTitle, __assign$1({ theme: theme }, { children: [jsx$1(IconContainer$4, __assign$1({ theme: theme }, { children: jsx$1(Icon.Navigation.MapMarker, { width: 1.5 }, void 0) }), void 0), shippingTo.title] }), void 0), jsx$1(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: shippingTo.details }), void 0)] }), void 0), jsxs$1(Col, __assign$1({ theme: theme }, { children: [jsxs$1(SectionTitle, __assign$1({ theme: theme }, { children: [jsx$1(IconContainer$4, __assign$1({ theme: theme }, { children: jsx$1(Icon.Messaging.Messenger, { width: 1.5 }, void 0) }), void 0), instantOrderUpdate.title] }), void 0), jsx$1(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: instantOrderUpdate.details }), void 0), instantOrderUpdate.keepMeUpdated && (jsxs$1(KeepMeUpdated, __assign$1({ onClick: instantOrderUpdate.keepMeUpdated.onClick, borderColor: theme.colors.shades['150'].color }, { children: [jsx$1(Icon.Messaging.Messenger, { width: 1, height: 1, fill: "#0078FF" }, void 0), instantOrderUpdate.keepMeUpdated.title] }), void 0))] }), void 0)] }), void 0)] }), void 0));
|
|
8010
8013
|
};
|
|
8011
|
-
var templateObject_1$
|
|
8014
|
+
var templateObject_1$1t, templateObject_2$19, templateObject_3$_, templateObject_4$N, templateObject_5$E, templateObject_6$y, templateObject_7$t, templateObject_8$m;
|
|
8012
8015
|
|
|
8013
|
-
var Backdrop = newStyled.div(templateObject_1$
|
|
8016
|
+
var Backdrop = newStyled.div(templateObject_1$1s || (templateObject_1$1s = __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) {
|
|
8014
8017
|
var top = _a.top;
|
|
8015
8018
|
return top;
|
|
8016
8019
|
}, function (_a) {
|
|
8017
8020
|
var isOpen = _a.isOpen, backgroundColor = _a.backgroundColor;
|
|
8018
8021
|
return isOpen ? "background-color: ".concat(backgroundColor, ";") : 'transparent';
|
|
8019
8022
|
});
|
|
8020
|
-
var Sidebar = newStyled.div(templateObject_2$
|
|
8023
|
+
var Sidebar = newStyled.div(templateObject_2$18 || (templateObject_2$18 = __makeTemplateObject(["\n height: ", ";\n width: ", ";\n position: fixed;\n z-index: 30;\n ", ": 0;\n top: ", ";\n background-color: ", ";\n overflow-x: hidden;\n transition: transform 0.3s ease-in-out;\n\n ", "\n"], ["\n height: ", ";\n width: ", ";\n position: fixed;\n z-index: 30;\n ", ": 0;\n top: ", ";\n background-color: ", ";\n overflow-x: hidden;\n transition: transform 0.3s ease-in-out;\n\n ", "\n"])), function (_a) {
|
|
8021
8024
|
var height = _a.height;
|
|
8022
8025
|
return height;
|
|
8023
8026
|
}, function (_a) {
|
|
@@ -8064,20 +8067,20 @@ var Drawer = function (_a) {
|
|
|
8064
8067
|
}, [isOpen, onClose, onOpen]);
|
|
8065
8068
|
return isMounted ? (jsxs$1("div", { children: [jsx$1(Backdrop, { backgroundColor: backdropColor, isOpen: isOpenState, top: top, "data-testid": "Drawer-Backdrop", onClick: onClickOutside && onClickOutside }, void 0), jsx$1(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;
|
|
8066
8069
|
};
|
|
8067
|
-
var templateObject_1$
|
|
8070
|
+
var templateObject_1$1s, templateObject_2$18;
|
|
8068
8071
|
|
|
8069
8072
|
var TooltipArrow = function (_a) {
|
|
8070
8073
|
var height = _a.height, width = _a.width, fill = _a.fill, stroke = _a.stroke;
|
|
8071
8074
|
return (jsxs$1("svg", __assign$1({ width: "".concat(width, "rem"), height: "".concat(height, "rem"), viewBox: "0 0 20 12", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsx$1("title", { children: "Tooltip Arrow" }, void 0), jsx$1("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));
|
|
8072
8075
|
};
|
|
8073
8076
|
|
|
8074
|
-
var List = newStyled.ul(templateObject_1$
|
|
8075
|
-
var Item$2 = newStyled.li(templateObject_2$
|
|
8076
|
-
var DropdownWrapper = newStyled.div(templateObject_3$
|
|
8077
|
-
var ArrowContainer$1 = newStyled.div(templateObject_4$
|
|
8077
|
+
var List = newStyled.ul(templateObject_1$1r || (templateObject_1$1r = __makeTemplateObject(["\n display: flex;\n margin: 0;\n padding: 0;\n"], ["\n display: flex;\n margin: 0;\n padding: 0;\n"])));
|
|
8078
|
+
var Item$2 = newStyled.li(templateObject_2$17 || (templateObject_2$17 = __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"])));
|
|
8079
|
+
var DropdownWrapper = newStyled.div(templateObject_3$Z || (templateObject_3$Z = __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"])));
|
|
8080
|
+
var ArrowContainer$1 = newStyled.div(templateObject_4$M || (templateObject_4$M = __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"])));
|
|
8078
8081
|
var StyledDropdown = newStyled.ul(templateObject_5$D || (templateObject_5$D = __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; });
|
|
8079
8082
|
var DropdownItem = newStyled.li(templateObject_6$x || (templateObject_6$x = __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; });
|
|
8080
|
-
var templateObject_1$
|
|
8083
|
+
var templateObject_1$1r, templateObject_2$17, templateObject_3$Z, templateObject_4$M, templateObject_5$D, templateObject_6$x;
|
|
8081
8084
|
|
|
8082
8085
|
var DropdownListIcons = function (_a) {
|
|
8083
8086
|
var items = _a.items;
|
|
@@ -8090,13 +8093,13 @@ var Dropdown = function (_a) {
|
|
|
8090
8093
|
return (jsxs$1(DropdownWrapper, __assign$1({ className: "dropdownWrapper", "data-testid": "Dropdown-wrapper" }, { children: [jsx$1(ArrowContainer$1, { children: jsx$1(TooltipArrow, { stroke: theme.colors.shades['200'].color, fill: "#fff", width: 1.25, height: 0.75 }, void 0) }, void 0), jsx$1(StyledDropdown, __assign$1({ borderColor: theme.colors.shades['200'].color }, { children: items.map(function (item, index) { return (jsx$1(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));
|
|
8091
8094
|
};
|
|
8092
8095
|
|
|
8093
|
-
var DropdownContainer = newStyled.div(templateObject_1$
|
|
8094
|
-
var DropdownLabel = newStyled.div(templateObject_2$
|
|
8095
|
-
var SizeLabel = newStyled.span(templateObject_3$
|
|
8096
|
-
var DetailLabel = newStyled.span(templateObject_4$
|
|
8096
|
+
var DropdownContainer = newStyled.div(templateObject_1$1q || (templateObject_1$1q = __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"])));
|
|
8097
|
+
var DropdownLabel = newStyled.div(templateObject_2$16 || (templateObject_2$16 = __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"])));
|
|
8098
|
+
var SizeLabel = newStyled.span(templateObject_3$Y || (templateObject_3$Y = __makeTemplateObject(["\n margin-right: 8px;\n"], ["\n margin-right: 8px;\n"])));
|
|
8099
|
+
var DetailLabel = newStyled.span(templateObject_4$L || (templateObject_4$L = __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"])));
|
|
8097
8100
|
var DropdownOptions = newStyled.div(templateObject_5$C || (templateObject_5$C = __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"])));
|
|
8098
8101
|
var DropdownOption = newStyled.div(templateObject_6$w || (templateObject_6$w = __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"])));
|
|
8099
|
-
var templateObject_1$
|
|
8102
|
+
var templateObject_1$1q, templateObject_2$16, templateObject_3$Y, templateObject_4$L, templateObject_5$C, templateObject_6$w;
|
|
8100
8103
|
|
|
8101
8104
|
var SizeDropdown = function (_a) {
|
|
8102
8105
|
var options = _a.options, defaultLabel = _a.defaultLabel, onOptionSelect = _a.onOptionSelect;
|
|
@@ -8119,14 +8122,14 @@ var SizeDropdown = function (_a) {
|
|
|
8119
8122
|
return (jsxs$1(DropdownContainer, { children: [jsxs$1(DropdownLabel, __assign$1({ role: "button", tabIndex: 0, onClick: toggleDropdown }, { children: [jsx$1(SizeLabel, { children: selectedOption.size }, void 0), jsx$1(DetailLabel, { children: selectedOption.detail }, void 0), isOpen ? (jsx$1(Icon.Arrows.ChevronUp, { width: 0.563, height: 0.875, fill: "#292929" }, void 0)) : (jsx$1(Icon.Arrows.ChevronDown, { width: 0.563, height: 0.875, fill: "#292929" }, void 0))] }), void 0), isOpen && (jsx$1(DropdownOptions, { children: options.map(function (option) { return (jsxs$1(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: [jsx$1("span", { children: option.size }, void 0), jsx$1("span", { children: option.detail }, void 0)] }), option.size)); }) }, void 0))] }, void 0));
|
|
8120
8123
|
};
|
|
8121
8124
|
|
|
8122
|
-
var DialogDropdownWrapper = newStyled.div(templateObject_1$
|
|
8123
|
-
var DialogDropdownWrapper2 = newStyled.div(templateObject_2$
|
|
8124
|
-
var DialogDropdownListContainer = newStyled.ul(templateObject_3$
|
|
8125
|
+
var DialogDropdownWrapper = newStyled.div(templateObject_1$1p || (templateObject_1$1p = __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; });
|
|
8126
|
+
var DialogDropdownWrapper2 = newStyled.div(templateObject_2$15 || (templateObject_2$15 = __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; });
|
|
8127
|
+
var DialogDropdownListContainer = newStyled.ul(templateObject_3$X || (templateObject_3$X = __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) {
|
|
8125
8128
|
return props.containerPosTop ? "calc(".concat(props.containerPosTop, ")") : "calc(".concat(props.top, " + 15px)");
|
|
8126
8129
|
}, function (props) {
|
|
8127
8130
|
return props.containerPosRight ? "calc(".concat(props.containerPosRight, ")") : "calc(".concat(props.right, " - 23px)");
|
|
8128
8131
|
});
|
|
8129
|
-
var DialogDropdownListItem = newStyled.li(templateObject_4$
|
|
8132
|
+
var DialogDropdownListItem = newStyled.li(templateObject_4$K || (templateObject_4$K = __makeTemplateObject(["\n border-bottom: 1px solid #e9e9e9;\n margin: 0;\n padding: 0;\n font-style: normal;\n font-weight: 400;\n font-size: 14px;\n line-height: 17px;\n color: var(--colors-shades-550-color);\n vertical-align: inherit;\n"], ["\n border-bottom: 1px solid #e9e9e9;\n margin: 0;\n padding: 0;\n font-style: normal;\n font-weight: 400;\n font-size: 14px;\n line-height: 17px;\n color: var(--colors-shades-550-color);\n vertical-align: inherit;\n"])));
|
|
8130
8133
|
var DialogDropdownLink = newStyled.a(templateObject_5$B || (templateObject_5$B = __makeTemplateObject(["\n display: inline-block;\n text-decoration: none;\n width: 100%;\n background-color: transparent;\n border: 0;\n margin: 0;\n padding: 12px;\n cursor: pointer;\n transition: all 0.2s;\n color: var(--colors-shades-700-color);\n font-size: 1.125rem;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n vertical-align: inherit;\n"], ["\n display: inline-block;\n text-decoration: none;\n width: 100%;\n background-color: transparent;\n border: 0;\n margin: 0;\n padding: 12px;\n cursor: pointer;\n transition: all 0.2s;\n color: var(--colors-shades-700-color);\n font-size: 1.125rem;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n vertical-align: inherit;\n"])));
|
|
8131
8134
|
var DropdownDialog = function (_a) {
|
|
8132
8135
|
var options = _a.options, _b = _a.position, top = _b.top, right = _b.right, containerPosRight = _b.containerPosRight, containerPosTop = _b.containerPosTop, style = _a.style, dialogDropdownContainerStyle = _a.dialogDropdownContainerStyle, dialogDropdownListItemStyle = _a.dialogDropdownListItemStyle, dialogContainerText = _a.dialogContainerText, className = _a.className;
|
|
@@ -8136,7 +8139,7 @@ var DropdownDialog = function (_a) {
|
|
|
8136
8139
|
return (jsx$1(DialogDropdownListItem, { children: jsx$1(DialogDropdownLink, __assign$1({ href: value }, { children: label }), void 0) }, idx));
|
|
8137
8140
|
}) }), void 0) }), void 0));
|
|
8138
8141
|
};
|
|
8139
|
-
var templateObject_1$
|
|
8142
|
+
var templateObject_1$1p, templateObject_2$15, templateObject_3$X, templateObject_4$K, templateObject_5$B;
|
|
8140
8143
|
|
|
8141
8144
|
function FilteringDropdown(_a) {
|
|
8142
8145
|
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;
|
|
@@ -8169,29 +8172,29 @@ function FilteringDropdown(_a) {
|
|
|
8169
8172
|
}) }, void 0)] }), void 0));
|
|
8170
8173
|
}
|
|
8171
8174
|
|
|
8172
|
-
var Title$4 = newStyled.div(templateObject_1$
|
|
8173
|
-
var P$3 = newStyled.p(templateObject_2$
|
|
8174
|
-
var ArrowContainer = newStyled.div(templateObject_3$
|
|
8175
|
-
var Container$
|
|
8175
|
+
var Title$4 = newStyled.div(templateObject_1$1o || (templateObject_1$1o = __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; });
|
|
8176
|
+
var P$3 = newStyled.p(templateObject_2$14 || (templateObject_2$14 = __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; });
|
|
8177
|
+
var ArrowContainer = newStyled.div(templateObject_3$W || (templateObject_3$W = __makeTemplateObject(["\n width: 1rem;\n height: 1rem;\n"], ["\n width: 1rem;\n height: 1rem;\n"])));
|
|
8178
|
+
var Container$11 = newStyled.div(templateObject_4$J || (templateObject_4$J = __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'); });
|
|
8176
8179
|
var Accordion = function (_a) {
|
|
8177
8180
|
var title = _a.title, children = _a.children, _b = _a.isOpenByDefault, isOpenByDefault = _b === void 0 ? false : _b, _c = _a.showInMobile, showInMobile = _c === void 0 ? true : _c;
|
|
8178
8181
|
var theme = useTheme();
|
|
8179
8182
|
var _d = React__default.useState(isOpenByDefault), isOpen = _d[0], setIsOpen = _d[1];
|
|
8180
|
-
return (jsxs$1(Container$
|
|
8183
|
+
return (jsxs$1(Container$11, __assign$1({ "data-testid": "FiltersAccordion", showInMobile: showInMobile }, { children: [jsxs$1(Title$4, __assign$1({ onClick: function () { return setIsOpen(function (state) { return !state; }); }, borderColor: theme.colors.shades['100'].color, "data-testid": "accordion-title" }, { children: [jsx$1(P$3, __assign$1({ color: theme.colors.shades['550'].color }, { children: title }), void 0), jsx$1(ArrowContainer, { children: isOpen ? (jsx$1(Icon.Arrows.ChevronUp, { fill: theme.colors.shades['700'].color }, void 0)) : (jsx$1(Icon.Arrows.ChevronDown, { fill: theme.colors.shades['700'].color }, void 0)) }, void 0)] }), void 0), jsx$1("div", __assign$1({ style: { display: isOpen ? 'block' : 'none' }, "data-testid": "accordion-children-container" }, { children: children }), void 0)] }), void 0));
|
|
8181
8184
|
};
|
|
8182
|
-
var templateObject_1$
|
|
8185
|
+
var templateObject_1$1o, templateObject_2$14, templateObject_3$W, templateObject_4$J;
|
|
8183
8186
|
|
|
8184
|
-
var SectionContent = newStyled.div(templateObject_1$
|
|
8185
|
-
var Header$3 = newStyled.div(templateObject_2$
|
|
8186
|
-
var MobileHeader = newStyled.div(templateObject_3$
|
|
8187
|
-
var MobileIconsContainer = newStyled.div(templateObject_4$
|
|
8187
|
+
var SectionContent = newStyled.div(templateObject_1$1n || (templateObject_1$1n = __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; });
|
|
8188
|
+
var Header$3 = newStyled.div(templateObject_2$13 || (templateObject_2$13 = __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"])));
|
|
8189
|
+
var MobileHeader = newStyled.div(templateObject_3$V || (templateObject_3$V = __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"])));
|
|
8190
|
+
var MobileIconsContainer = newStyled.div(templateObject_4$I || (templateObject_4$I = __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"])));
|
|
8188
8191
|
var H4 = newStyled.h4(templateObject_5$A || (templateObject_5$A = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
8189
8192
|
var FilterLink = newStyled.a(templateObject_6$v || (templateObject_6$v = __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; });
|
|
8190
8193
|
var OptionContainer = newStyled.div(templateObject_7$s || (templateObject_7$s = __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'); });
|
|
8191
8194
|
var ClearAll = newStyled.span(templateObject_8$l || (templateObject_8$l = __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; });
|
|
8192
8195
|
var MobileFooter = newStyled.div(templateObject_9$d || (templateObject_9$d = __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"])));
|
|
8193
8196
|
var MobileClearContainer = newStyled.div(templateObject_10$b || (templateObject_10$b = __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"])));
|
|
8194
|
-
var templateObject_1$
|
|
8197
|
+
var templateObject_1$1n, templateObject_2$13, templateObject_3$V, templateObject_4$I, templateObject_5$A, templateObject_6$v, templateObject_7$s, templateObject_8$l, templateObject_9$d, templateObject_10$b;
|
|
8195
8198
|
|
|
8196
8199
|
var getStylesBySize$9 = function (size, theme) {
|
|
8197
8200
|
switch (size) {
|
|
@@ -8256,9 +8259,9 @@ var SelectorSecondary = function (_a) {
|
|
|
8256
8259
|
} }), id: id }, void 0));
|
|
8257
8260
|
};
|
|
8258
8261
|
|
|
8259
|
-
var UL = newStyled.ul(templateObject_1$
|
|
8260
|
-
var LI = newStyled.li(templateObject_2$
|
|
8261
|
-
var CloseIconContainer = newStyled.div(templateObject_3$
|
|
8262
|
+
var UL = newStyled.ul(templateObject_1$1m || (templateObject_1$1m = __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"])));
|
|
8263
|
+
var LI = newStyled.li(templateObject_2$12 || (templateObject_2$12 = __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; });
|
|
8264
|
+
var CloseIconContainer = newStyled.div(templateObject_3$U || (templateObject_3$U = __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"])));
|
|
8262
8265
|
var Tags = function (_a) {
|
|
8263
8266
|
var _b = _a.color, color = _b === void 0 ? '#fff6ef' : _b, items = _a.items, onCloseClick = _a.onCloseClick;
|
|
8264
8267
|
var theme = useTheme();
|
|
@@ -8266,7 +8269,7 @@ var Tags = function (_a) {
|
|
|
8266
8269
|
return (jsxs$1(LI, __assign$1({ color: theme.colors.shades['700'].color, backgroundColor: color }, { children: [item, jsx$1(CloseIconContainer, __assign$1({ "data-testid": "li-close-icon", onClick: function () { return onCloseClick(index); } }, { children: jsx$1(Icon.Actions.Close, { fill: theme.colors.shades['700'].color, width: "100%", height: "100%" }, void 0) }), void 0)] }), index));
|
|
8267
8270
|
}) }), void 0));
|
|
8268
8271
|
};
|
|
8269
|
-
var templateObject_1$
|
|
8272
|
+
var templateObject_1$1m, templateObject_2$12, templateObject_3$U;
|
|
8270
8273
|
|
|
8271
8274
|
var Filters = function (_a) {
|
|
8272
8275
|
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;
|
|
@@ -8402,8 +8405,8 @@ var FilterCheckboxColor = function (_a) {
|
|
|
8402
8405
|
return (jsx$1(Checkbox, { onChange: onChange, checked: checked, text: text, id: "filter[".concat(sectionIndex, ",").concat(itemIndex, "]"), size: ComponentSize.Medium, variant: "color", blockUncheck: blockUncheck, backgroundColor: color }, itemIndex));
|
|
8403
8406
|
};
|
|
8404
8407
|
|
|
8405
|
-
var Wrapper$4 = newStyled.div(templateObject_1$
|
|
8406
|
-
var Container
|
|
8408
|
+
var Wrapper$4 = newStyled.div(templateObject_1$1l || (templateObject_1$1l = __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"])));
|
|
8409
|
+
var Container$10 = newStyled.div(templateObject_2$11 || (templateObject_2$11 = __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"])));
|
|
8407
8410
|
var FitGuarantee = function (_a) {
|
|
8408
8411
|
var _b;
|
|
8409
8412
|
var _c = _a.backgroundColor, backgroundColor = _c === void 0 ? '#FFF6EF' : _c, _d = _a.borderColor, borderColor = _d === void 0 ? '#E7C9B2' : _d, title = _a.title, description = _a.description, _e = _a.widthAuto, widthAuto = _e === void 0 ? false : _e, _f = _a.testId, testId = _f === void 0 ? 'FitGuarantee' : _f, _g = _a.iconFolder, iconFolder = _g === void 0 ? 'Custom' : _g, _h = _a.iconName, iconName = _h === void 0 ? 'SixtyDaysGuarantee' : _h, _j = _a.iconWidth, iconWidth = _j === void 0 ? 3.7 : _j, _k = _a.iconHeight, iconHeight = _k === void 0 ? 3.38 : _k;
|
|
@@ -8414,17 +8417,17 @@ var FitGuarantee = function (_a) {
|
|
|
8414
8417
|
console.error('Icon', iconName, 'not found');
|
|
8415
8418
|
return null;
|
|
8416
8419
|
}
|
|
8417
|
-
return (jsx$1(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxs$1(Wrapper$4, { children: [jsx$1(Container
|
|
8420
|
+
return (jsx$1(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxs$1(Wrapper$4, { children: [jsx$1(Container$10, __assign$1({ "data-testid": "".concat(testId, "-section"), style: { justifyContent: 'center' } }, { children: jsx$1(IconComponent, { width: iconWidth, height: iconHeight }, void 0) }), void 0), jsxs$1(Container$10, __assign$1({ "data-testid": "".concat(testId, "-section-bottom") }, { children: [jsx$1(Text$7, __assign$1({ variant: "body", weight: "demi", size: "small", style: {
|
|
8418
8421
|
margin: '0.1rem 0',
|
|
8419
8422
|
width: '100%',
|
|
8420
8423
|
fontSize: theme.component.text.fitGuarantee.titleFontSize,
|
|
8421
8424
|
fontWeight: theme.component.text.fitGuarantee.titleFontWeight,
|
|
8422
8425
|
} }, { children: title }), void 0), jsx$1(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));
|
|
8423
8426
|
};
|
|
8424
|
-
var templateObject_1$
|
|
8427
|
+
var templateObject_1$1l, templateObject_2$11;
|
|
8425
8428
|
|
|
8426
|
-
var Container
|
|
8427
|
-
var P$2 = newStyled.p(templateObject_2
|
|
8429
|
+
var Container$$ = newStyled.div(templateObject_1$1k || (templateObject_1$1k = __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"])));
|
|
8430
|
+
var P$2 = newStyled.p(templateObject_2$10 || (templateObject_2$10 = __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; });
|
|
8428
8431
|
var textButtonStyles$1 = function (theme) { return ({
|
|
8429
8432
|
border: 'none',
|
|
8430
8433
|
background: 'transparent',
|
|
@@ -8437,9 +8440,9 @@ var textButtonStyles$1 = function (theme) { return ({
|
|
|
8437
8440
|
var FitPredictor = function (_a) {
|
|
8438
8441
|
var onClick = _a.onClick;
|
|
8439
8442
|
var theme = useTheme();
|
|
8440
|
-
return (jsxs(Container
|
|
8443
|
+
return (jsxs(Container$$, __assign$1({ theme: theme }, { children: [jsx(Container$$, { 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));
|
|
8441
8444
|
};
|
|
8442
|
-
var templateObject_1$
|
|
8445
|
+
var templateObject_1$1k, templateObject_2$10;
|
|
8443
8446
|
|
|
8444
8447
|
var Button$8 = newStyled.button(function () { return ({
|
|
8445
8448
|
background: 'transparent',
|
|
@@ -12683,14 +12686,14 @@ var Slider$1 = /*#__PURE__*/function (_React$Component) {
|
|
|
12683
12686
|
return Slider;
|
|
12684
12687
|
}(React__default.Component);
|
|
12685
12688
|
|
|
12686
|
-
var StyledSlider = newStyled(Slider$1)(templateObject_1$
|
|
12689
|
+
var StyledSlider = newStyled(Slider$1)(templateObject_1$1j || (templateObject_1$1j = __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) {
|
|
12687
12690
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
12688
12691
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
12689
12692
|
}, function (_a) {
|
|
12690
12693
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
12691
12694
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
12692
12695
|
});
|
|
12693
|
-
var templateObject_1$
|
|
12696
|
+
var templateObject_1$1j;
|
|
12694
12697
|
|
|
12695
12698
|
var getStylesBySize$8 = function (size) {
|
|
12696
12699
|
// rem units
|
|
@@ -12749,7 +12752,7 @@ var SliderNavigation = function (_a) {
|
|
|
12749
12752
|
} }, { 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));
|
|
12750
12753
|
};
|
|
12751
12754
|
|
|
12752
|
-
var Image$1 = newStyled.img(templateObject_1$
|
|
12755
|
+
var Image$1 = newStyled.img(templateObject_1$1i || (templateObject_1$1i = __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) {
|
|
12753
12756
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
12754
12757
|
return borderRadiusVariant &&
|
|
12755
12758
|
"\n border-radius: 20px;\n ";
|
|
@@ -12767,7 +12770,7 @@ var Image$1 = newStyled.img(templateObject_1$1h || (templateObject_1$1h = __make
|
|
|
12767
12770
|
? "0.1rem solid ".concat(previewImgBorderColor ? previewImgBorderColor : theme.colors.shades['700'].color)
|
|
12768
12771
|
: 'inherit';
|
|
12769
12772
|
});
|
|
12770
|
-
var templateObject_1$
|
|
12773
|
+
var templateObject_1$1i;
|
|
12771
12774
|
|
|
12772
12775
|
var ImageSmallPreview = function (_a) {
|
|
12773
12776
|
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;
|
|
@@ -12775,9 +12778,9 @@ var ImageSmallPreview = function (_a) {
|
|
|
12775
12778
|
return (jsx$1(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));
|
|
12776
12779
|
};
|
|
12777
12780
|
|
|
12778
|
-
var horizontalStyles = css(templateObject_1$
|
|
12779
|
-
var verticalStyles = css(templateObject_2
|
|
12780
|
-
var Container$
|
|
12781
|
+
var horizontalStyles = css(templateObject_1$1h || (templateObject_1$1h = __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"])));
|
|
12782
|
+
var verticalStyles = css(templateObject_2$$ || (templateObject_2$$ = __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"])));
|
|
12783
|
+
var Container$_ = newStyled.div(templateObject_3$T || (templateObject_3$T = __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) {
|
|
12781
12784
|
var isRatioSquare = _a.isRatioSquare, theme = _a.theme;
|
|
12782
12785
|
return isRatioSquare ? '530px' : "calc(530px / (".concat(theme.component.gallery.aspectRatio, "))");
|
|
12783
12786
|
}, function (_a) {
|
|
@@ -12788,12 +12791,12 @@ var Container$Z = newStyled.div(templateObject_3$S || (templateObject_3$S = __ma
|
|
|
12788
12791
|
return hasOverflowArrows &&
|
|
12789
12792
|
"\n scroll-behavior: smooth;\n &::-webkit-scrollbar {\n visibility: hidden;\n }\n ";
|
|
12790
12793
|
});
|
|
12791
|
-
var Button$7 = newStyled.button(templateObject_4$
|
|
12794
|
+
var Button$7 = newStyled.button(templateObject_4$H || (templateObject_4$H = __makeTemplateObject(["\n padding: 0;\n border: none;\n text-decoration: none;\n background: transparent;\n outline: none;\n"], ["\n padding: 0;\n border: none;\n text-decoration: none;\n background: transparent;\n outline: none;\n"])));
|
|
12792
12795
|
var ArrowsContainer = newStyled.div(templateObject_5$z || (templateObject_5$z = __makeTemplateObject(["\n display: flex;\n width: 65px;\n position: relative;\n left: 6px;\n"], ["\n display: flex;\n width: 65px;\n position: relative;\n left: 6px;\n"])));
|
|
12793
12796
|
var ArrowBaseStyles = newStyled.div(templateObject_6$u || (templateObject_6$u = __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"])));
|
|
12794
12797
|
var ArrowPrev = newStyled(ArrowBaseStyles)(templateObject_7$r || (templateObject_7$r = __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"])));
|
|
12795
12798
|
var ArrowNext = newStyled(ArrowBaseStyles)(templateObject_8$k || (templateObject_8$k = __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"])));
|
|
12796
|
-
var templateObject_1$
|
|
12799
|
+
var templateObject_1$1h, templateObject_2$$, templateObject_3$T, templateObject_4$H, templateObject_5$z, templateObject_6$u, templateObject_7$r, templateObject_8$k;
|
|
12797
12800
|
|
|
12798
12801
|
var getLoadingProp = function (index, itemsOnViewport) {
|
|
12799
12802
|
var loading = 'eager';
|
|
@@ -12821,7 +12824,7 @@ var ImagePreviewList = function (_a) {
|
|
|
12821
12824
|
var element = document.querySelector(".imageListContainer");
|
|
12822
12825
|
element.scrollBy(0, 200);
|
|
12823
12826
|
};
|
|
12824
|
-
return (jsxs$1(Fragment$2, { children: [jsx$1(Container$
|
|
12827
|
+
return (jsxs$1(Fragment$2, { children: [jsx$1(Container$_, __assign$1({ role: "list", "data-testid": dataTestId, position: position, className: hasOverflowArrows ? 'imageListContainer' : position, hasOverflowArrows: hasOverflowArrows, isRatioSquare: isRatioSquare }, { children: position == 'horizontal' ? (jsx$1("div", __assign$1({ style: { maxWidth: '360px' } }, { children: jsx$1(SliderNavigation, __assign$1({ speed: 200, infinite: false, arrows: {
|
|
12825
12828
|
arrowWidth: 0.75,
|
|
12826
12829
|
arrowHeight: 1.25,
|
|
12827
12830
|
arrowPadding: 1.625,
|
|
@@ -14421,22 +14424,22 @@ InnerImageZoom.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
14421
14424
|
afterZoomOut: PropTypes.func
|
|
14422
14425
|
} : {};
|
|
14423
14426
|
|
|
14424
|
-
var Container$
|
|
14427
|
+
var Container$Z = newStyled.div(templateObject_1$1g || (templateObject_1$1g = __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) {
|
|
14425
14428
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
14426
14429
|
return borderRadiusVariant && "border-radius: 40px;";
|
|
14427
14430
|
});
|
|
14428
|
-
var TopTagContainer$7 = newStyled.div(templateObject_2$
|
|
14431
|
+
var TopTagContainer$7 = newStyled.div(templateObject_2$_ || (templateObject_2$_ = __makeTemplateObject(["\n position: absolute;\n left: ", ";\n top: ", ";\n"], ["\n position: absolute;\n left: ", ";\n top: ", ";\n"])), function (_a) {
|
|
14429
14432
|
var borderRadiusVariant = _a.borderRadiusVariant, theme = _a.theme;
|
|
14430
14433
|
return borderRadiusVariant ? '50px' : theme.component.gallery.tagPosition.left;
|
|
14431
14434
|
}, function (_a) {
|
|
14432
14435
|
var borderRadiusVariant = _a.borderRadiusVariant, theme = _a.theme;
|
|
14433
14436
|
return borderRadiusVariant ? '10px' : theme.component.gallery.tagPosition.top;
|
|
14434
14437
|
});
|
|
14435
|
-
var BottomTagContainer$7 = newStyled.div(templateObject_3$
|
|
14438
|
+
var BottomTagContainer$7 = newStyled.div(templateObject_3$S || (templateObject_3$S = __makeTemplateObject(["\n position: absolute;\n bottom: ", ";\n left: 0;\n"], ["\n position: absolute;\n bottom: ", ";\n left: 0;\n"])), function (_a) {
|
|
14436
14439
|
var isCTAHidden = _a.isCTAHidden;
|
|
14437
14440
|
return (isCTAHidden ? '60px' : '120px');
|
|
14438
14441
|
});
|
|
14439
|
-
var TopRightTagWrapper = newStyled.div(templateObject_4$
|
|
14442
|
+
var TopRightTagWrapper = newStyled.div(templateObject_4$G || (templateObject_4$G = __makeTemplateObject(["\n position: absolute;\n right: 0;\n top: 0;\n"], ["\n position: absolute;\n right: 0;\n top: 0;\n"])));
|
|
14440
14443
|
var TopRightTagContainer$2 = newStyled.div(templateObject_5$y || (templateObject_5$y = __makeTemplateObject(["\n white-space: pre-wrap;\n"], ["\n white-space: pre-wrap;\n"])));
|
|
14441
14444
|
var ButtonSecondaryOutlineWrapper = newStyled(ButtonSecondaryOutline)(templateObject_6$t || (templateObject_6$t = __makeTemplateObject(["\n text-transform: capitalize;\n margin-top: 12px;\n\n @media (max-width: 992px) {\n margin-top: 4px;\n }\n"], ["\n text-transform: capitalize;\n margin-top: 12px;\n\n @media (max-width: 992px) {\n margin-top: 4px;\n }\n"])));
|
|
14442
14445
|
var ImageStyled = newStyled(Image$3)(templateObject_7$q || (templateObject_7$q = __makeTemplateObject(["\n aspect-ratio: ", ";\n"], ["\n aspect-ratio: ", ";\n"])), function (_a) {
|
|
@@ -14447,14 +14450,14 @@ var InnerImageZoomStyled = newStyled(InnerImageZoom)(templateObject_8$j || (temp
|
|
|
14447
14450
|
var theme = _a.theme, isRatioSquare = _a.isRatioSquare;
|
|
14448
14451
|
return isRatioSquare ? '1 / 1' : theme.component.gallery.aspectRatio;
|
|
14449
14452
|
});
|
|
14450
|
-
var templateObject_1$
|
|
14453
|
+
var templateObject_1$1g, templateObject_2$_, templateObject_3$S, templateObject_4$G, templateObject_5$y, templateObject_6$t, templateObject_7$q, templateObject_8$j;
|
|
14451
14454
|
|
|
14452
14455
|
var ImageProductSlide$1 = function (_a) {
|
|
14453
14456
|
var _b;
|
|
14454
14457
|
var content = _a.content, topTag = _a.topTag, topRightTag = _a.topRightTag, bottomTag = _a.bottomTag, testId = _a.testId, _c = _a.position, position = _c === void 0 ? 'vertical' : _c, borderRadiusVariant = _a.borderRadiusVariant, ctaText = _a.ctaText, ctaAction = _a.ctaAction, hideCTA = _a.hideCTA, withZoom = _a.withZoom, isRatioSquare = _a.isRatioSquare;
|
|
14455
14458
|
var source = content === null || content === void 0 ? void 0 : content.url;
|
|
14456
14459
|
var isVideo = (_b = content === null || content === void 0 ? void 0 : content.isVideo) !== null && _b !== void 0 ? _b : false;
|
|
14457
|
-
return (jsxs$1(Container$
|
|
14460
|
+
return (jsxs$1(Container$Z, __assign$1({ "data-testid": testId, className: "stylefor".concat(position), borderRadiusVariant: borderRadiusVariant }, { children: [!isVideo && (jsxs$1(Fragment$2, { children: [withZoom ? (jsx$1(InnerImageZoomStyled, { src: source, zoomSrc: source, zoomType: "hover", imgAttributes: {
|
|
14458
14461
|
alt: content.alt,
|
|
14459
14462
|
style: { objectFit: 'cover', objectPosition: 'center' },
|
|
14460
14463
|
loading: 'eager',
|
|
@@ -14462,8 +14465,8 @@ var ImageProductSlide$1 = function (_a) {
|
|
|
14462
14465
|
}, width: position == 'horizontal' ? 360 : 530, height: position == 'horizontal' ? 480 : 720, hideHint: true, isRatioSquare: isRatioSquare }, void 0)) : (jsx$1(ImageStyled, { width: position == 'horizontal' ? '360px' : '530px', height: "auto", src: source, alt: content.alt, objectFit: "cover", loading: "eager", decoding: "sync", isRatioSquare: isRatioSquare }, void 0)), jsx$1(TopTagContainer$7, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsx$1(BottomTagContainer$7, __assign$1({ isCTAHidden: hideCTA }, { children: bottomTag }), void 0), !!topRightTag && (jsx$1(TopRightTagWrapper, { children: jsx$1(TopRightTagContainer$2, { children: topRightTag }, void 0) }, void 0))] }, void 0)), isVideo && jsx$1(Video$1, { source: source, thumbnail: content === null || content === void 0 ? void 0 : content.thumbnailUrl }, void 0), ctaText && ctaAction && (jsx$1("div", __assign$1({ style: { display: hideCTA ? 'none' : 'block' } }, { children: jsx$1(ButtonSecondaryOutlineWrapper, { wide: true, onClick: ctaAction, text: ctaText }, void 0) }), void 0))] }), void 0));
|
|
14463
14466
|
};
|
|
14464
14467
|
|
|
14465
|
-
var Container$
|
|
14466
|
-
var templateObject_1$
|
|
14468
|
+
var Container$Y = newStyled.div(templateObject_1$1f || (templateObject_1$1f = __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"])));
|
|
14469
|
+
var templateObject_1$1f;
|
|
14467
14470
|
|
|
14468
14471
|
var getInitialIndex = function (images, selectedValue) {
|
|
14469
14472
|
if (selectedValue) {
|
|
@@ -14489,10 +14492,10 @@ var ProductGallery = function (_a) {
|
|
|
14489
14492
|
setActiveIndex(index);
|
|
14490
14493
|
};
|
|
14491
14494
|
var selectedImage = images[activeIndex];
|
|
14492
|
-
return (jsxs$1(Container$
|
|
14495
|
+
return (jsxs$1(Container$Y, { children: [jsx$1(ImagePreviewList, { images: images, selectedImage: selectedImage, dataTestId: previewListDataTestId, onClick: onContentChange, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor, hasOverflowArrows: hasOverflowArrows, isRatioSquare: isRatioSquare, itemsOnViewport: itemsOnViewport }, void 0), jsx$1(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));
|
|
14493
14496
|
};
|
|
14494
14497
|
|
|
14495
|
-
var StyledButton$3 = newStyled(BaseButton)(templateObject_1$
|
|
14498
|
+
var StyledButton$3 = newStyled(BaseButton)(templateObject_1$1e || (templateObject_1$1e = __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; });
|
|
14496
14499
|
var AmazonButton = function (_a) {
|
|
14497
14500
|
var onClick = _a.onClick;
|
|
14498
14501
|
return (jsx$1(StyledButton$3, __assign$1({ backgroundColor: "#FED865", hoverBackgroundColor: "#F1CB58", onClick: onClick }, { children: jsx$1(Icon.Payment.Amazon, { width: 5.375, height: 1.25 }, void 0) }), void 0));
|
|
@@ -14501,9 +14504,9 @@ var PaypalButton = function (_a) {
|
|
|
14501
14504
|
var onClick = _a.onClick;
|
|
14502
14505
|
return (jsx$1(StyledButton$3, __assign$1({ backgroundColor: "#ffc439", hoverBackgroundColor: "#F4BF41", onClick: onClick }, { children: jsx$1(Icon.Payment.Paypal, { width: 4.938, height: 1.25 }, void 0) }), void 0));
|
|
14503
14506
|
};
|
|
14504
|
-
var templateObject_1$
|
|
14507
|
+
var templateObject_1$1e;
|
|
14505
14508
|
|
|
14506
|
-
var Container$
|
|
14509
|
+
var Container$X = newStyled.div(function (props) { return ({
|
|
14507
14510
|
height: 'auto',
|
|
14508
14511
|
textAlign: 'center',
|
|
14509
14512
|
justifyContent: 'center',
|
|
@@ -14553,12 +14556,12 @@ var IconsWithTitle = function (_a) {
|
|
|
14553
14556
|
textAlign: 'center',
|
|
14554
14557
|
lineHeight: '18px',
|
|
14555
14558
|
};
|
|
14556
|
-
return (jsx$1(Fragment$2, { children: jsxs$1(Container$
|
|
14559
|
+
return (jsx$1(Fragment$2, { children: jsxs$1(Container$X, __assign$1({ textPosition: iconTitlePosition }, { children: [withWrapper ? (jsx$1(IconWrapper, __assign$1({ backgroundColor: backgroundColor, style: iconStyles, iconSize: isMobile ? iconSizeMobile : iconSizeDesktop }, { children: jsx$1(IconComponent, { width: isMobile ? iconSizeMobile : iconSizeDesktop, height: isMobile ? iconSizeMobile : iconSizeDesktop, fill: iconColor }, void 0) }), void 0)) : (jsx$1(IconComponent, { width: isMobile ? iconSizeMobile : iconSizeDesktop, height: isMobile ? iconSizeMobile : iconSizeDesktop, fill: iconColor }, void 0)), jsx$1(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));
|
|
14557
14560
|
};
|
|
14558
14561
|
|
|
14559
|
-
var Container$
|
|
14560
|
-
var ImageContainer$4 = newStyled.div(templateObject_2$
|
|
14561
|
-
var StyledTitle = newStyled.div(templateObject_3$
|
|
14562
|
+
var Container$W = newStyled.div(templateObject_1$1d || (templateObject_1$1d = __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'); });
|
|
14563
|
+
var ImageContainer$4 = newStyled.div(templateObject_2$Z || (templateObject_2$Z = __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'); });
|
|
14564
|
+
var StyledTitle = newStyled.div(templateObject_3$R || (templateObject_3$R = __makeTemplateObject(["\n display: flex;\n ", "\n"], ["\n display: flex;\n ", "\n"])), function (_a) {
|
|
14562
14565
|
var titlePosition = _a.titlePosition;
|
|
14563
14566
|
return titlePosition == 'center' &&
|
|
14564
14567
|
"\nalign-items:center;\njustify-content:center;\n";
|
|
@@ -14566,15 +14569,15 @@ var StyledTitle = newStyled.div(templateObject_3$Q || (templateObject_3$Q = __ma
|
|
|
14566
14569
|
var ImageCardWithDescription = function (_a) {
|
|
14567
14570
|
var image = _a.image, title = _a.title, description = _a.description, _b = _a.titlePosition, titlePosition = _b === void 0 ? 'left' : _b;
|
|
14568
14571
|
var isMobile = useWindowDimensions().isMobile;
|
|
14569
|
-
return (jsxs$1(Container$
|
|
14572
|
+
return (jsxs$1(Container$W, __assign$1({ "data-testid": "Container", isMobile: isMobile }, { children: [jsx$1(ImageContainer$4, __assign$1({ "data-testid": "ImageContainer", isMobile: isMobile }, { children: jsx$1(Image$3, { src: image, borderRadius: "40px", alt: "before", height: "100%", width: "100%" }, void 0) }), void 0), jsx$1(StyledTitle, __assign$1({ titlePosition: titlePosition, "data-testid": "StyledTitle" }, { children: isMobile ? (jsx$1(Text$7, __assign$1({ variant: "link", weight: "demi" }, { children: title }), void 0)) : (jsx$1(Text$7, __assign$1({ variant: "heading6", weight: "demi" }, { children: title }), void 0)) }), void 0), jsx$1(Text$7, __assign$1({ variant: "link", weight: "regular" }, { children: description }), void 0)] }), void 0));
|
|
14570
14573
|
};
|
|
14571
|
-
var templateObject_1$
|
|
14574
|
+
var templateObject_1$1d, templateObject_2$Z, templateObject_3$R;
|
|
14572
14575
|
|
|
14573
|
-
var Label$4 = newStyled.span(templateObject_1$
|
|
14576
|
+
var Label$4 = newStyled.span(templateObject_1$1c || (templateObject_1$1c = __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) {
|
|
14574
14577
|
var color = _a.color;
|
|
14575
14578
|
return color;
|
|
14576
14579
|
});
|
|
14577
|
-
var MandatoryIcon = newStyled.span(templateObject_2$
|
|
14580
|
+
var MandatoryIcon = newStyled.span(templateObject_2$Y || (templateObject_2$Y = __makeTemplateObject(["\n color: ", ";\n margin-left: 0.25rem;\n"], ["\n color: ", ";\n margin-left: 0.25rem;\n"])), function (_a) {
|
|
14578
14581
|
var color = _a.color;
|
|
14579
14582
|
return color;
|
|
14580
14583
|
});
|
|
@@ -14583,7 +14586,7 @@ var InputLabel = function (_a) {
|
|
|
14583
14586
|
var theme = useTheme();
|
|
14584
14587
|
return (jsxs$1(Label$4, __assign$1({ color: isDisabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, { children: [label, isRequired && jsx$1(MandatoryIcon, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: "*" }), void 0)] }), void 0));
|
|
14585
14588
|
};
|
|
14586
|
-
var templateObject_1$
|
|
14589
|
+
var templateObject_1$1c, templateObject_2$Y;
|
|
14587
14590
|
|
|
14588
14591
|
var containerByStatus = function (theme, status) {
|
|
14589
14592
|
if (status === InputValidationType.Valid)
|
|
@@ -14592,12 +14595,12 @@ var containerByStatus = function (theme, status) {
|
|
|
14592
14595
|
return theme.colors.semantic.urgent.color;
|
|
14593
14596
|
return '';
|
|
14594
14597
|
};
|
|
14595
|
-
var Container$
|
|
14598
|
+
var Container$V = newStyled.div(templateObject_1$1b || (templateObject_1$1b = __makeTemplateObject(["\n position: relative;\n input {\n border-color: ", ";\n }\n"], ["\n position: relative;\n input {\n border-color: ", ";\n }\n"])), function (_a) {
|
|
14596
14599
|
var theme = _a.theme, status = _a.status, hasError = _a.hasError;
|
|
14597
14600
|
return hasError ? '' : containerByStatus(theme, status);
|
|
14598
14601
|
});
|
|
14599
|
-
var StyledLabel$2 = newStyled.label(templateObject_2$
|
|
14600
|
-
var StyledInput = newStyled.input(templateObject_3$
|
|
14602
|
+
var StyledLabel$2 = newStyled.label(templateObject_2$X || (templateObject_2$X = __makeTemplateObject(["\n position: absolute;\n top: 10px;\n left: 16px;\n z-index: 15;\n &::after {\n content: '*';\n color: var(--colors-semantic-urgent-color);\n }\n"], ["\n position: absolute;\n top: 10px;\n left: 16px;\n z-index: 15;\n &::after {\n content: '*';\n color: var(--colors-semantic-urgent-color);\n }\n"])));
|
|
14603
|
+
var StyledInput = newStyled.input(templateObject_3$Q || (templateObject_3$Q = __makeTemplateObject(["\n padding: ", ";\n font-size: ", ";\n border-radius: ", ";\n border: ", ";\n line-height: ", ";\n color: ", ";\n font-weight: ", ";\n flex: 1 1 50%;\n height: 100%;\n width: 100%;\n box-sizing: border-box;\n\n &::placeholder {\n color: ", ";\n }\n\n &:focus {\n outline: none;\n border-color: ", ";\n ", ";\n box-shadow: ", ";\n\n ", ";\n }\n\n &:focus + label,\n &:not(:invalid) + label {\n display: none;\n }\n\n &:disabled {\n background-color: ", ";\n border: 0.063rem solid ", ";\n color: ", ";\n\n &::placeholder {\n color: ", ";\n }\n }\n\n ", ";\n"], ["\n padding: ", ";\n font-size: ", ";\n border-radius: ", ";\n border: ", ";\n line-height: ", ";\n color: ", ";\n font-weight: ", ";\n flex: 1 1 50%;\n height: 100%;\n width: 100%;\n box-sizing: border-box;\n\n &::placeholder {\n color: ", ";\n }\n\n &:focus {\n outline: none;\n border-color: ", ";\n ", ";\n box-shadow: ", ";\n\n ", ";\n }\n\n &:focus + label,\n &:not(:invalid) + label {\n display: none;\n }\n\n &:disabled {\n background-color: ", ";\n border: 0.063rem solid ", ";\n color: ", ";\n\n &::placeholder {\n color: ", ";\n }\n }\n\n ", ";\n"])), function (_a) {
|
|
14601
14604
|
var inlinePlaceholder = _a.inlinePlaceholder, theme = _a.theme;
|
|
14602
14605
|
return theme.component[inlinePlaceholder ? 'inputPlaceholder' : 'input'].padding;
|
|
14603
14606
|
}, function (_a) {
|
|
@@ -14652,7 +14655,7 @@ var StyledInput = newStyled.input(templateObject_3$P || (templateObject_3$P = __
|
|
|
14652
14655
|
return hasValue &&
|
|
14653
14656
|
"& ~ span {\n bottom: 1.625rem;\n font-size: 0.75rem;\n opacity: 1;\n }";
|
|
14654
14657
|
});
|
|
14655
|
-
var InputWrapper = newStyled.div(templateObject_4$
|
|
14658
|
+
var InputWrapper = newStyled.div(templateObject_4$F || (templateObject_4$F = __makeTemplateObject(["\n position: relative;\n display: flex;\n height: ", ";\n"], ["\n position: relative;\n display: flex;\n height: ", ";\n"])), function (_a) {
|
|
14656
14659
|
var size = _a.size, inlinePlaceholder = _a.inlinePlaceholder;
|
|
14657
14660
|
return !inlinePlaceholder ? (size === 'small' ? '36px' : '40px') : '48px';
|
|
14658
14661
|
});
|
|
@@ -14670,7 +14673,7 @@ var AnimatedPlaceholder = newStyled.span(templateObject_5$x || (templateObject_5
|
|
|
14670
14673
|
return theme.component.input.lineHeight;
|
|
14671
14674
|
});
|
|
14672
14675
|
var ClearInput = newStyled.div(templateObject_6$s || (templateObject_6$s = __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"])));
|
|
14673
|
-
var templateObject_1$
|
|
14676
|
+
var templateObject_1$1b, templateObject_2$X, templateObject_3$Q, templateObject_4$F, templateObject_5$x, templateObject_6$s;
|
|
14674
14677
|
|
|
14675
14678
|
var BaseInput = function (_a) {
|
|
14676
14679
|
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"]);
|
|
@@ -14694,7 +14697,7 @@ var BaseInput = function (_a) {
|
|
|
14694
14697
|
}, [status]);
|
|
14695
14698
|
var hasValue = Boolean(value);
|
|
14696
14699
|
var errorMessage = customErrorMessage || (status === InputValidationType.Error && required);
|
|
14697
|
-
return (jsxs$1(Container$
|
|
14700
|
+
return (jsxs$1(Container$V, __assign$1({ status: status, hasError: hasError }, { children: [label && (jsx$1(InputLabel, { label: label, isDisabled: rest.disabled, isRequired: Boolean(required) }, void 0)), jsxs$1(InputWrapper, __assign$1({ className: "inputWrapper", size: size, inlinePlaceholder: inlinePlaceholder }, { children: [jsx$1(StyledInput, __assign$1({ id: requiredPlaceholder ? 'requiredPlaceholder' : undefined, hasValue: hasValue, inlinePlaceholder: inlinePlaceholder, hasError: hasError, ref: innerRef, "data-testid": "base-input", type: inputType, onChange: function (event) {
|
|
14698
14701
|
onChange(event.target.value, event);
|
|
14699
14702
|
}, onBlur: onBlur, required: Boolean(required), value: value, placeholder: inlinePlaceholder ? '' : placeholder }, rest), void 0), !!requiredPlaceholder && (jsx$1(StyledLabel$2, __assign$1({ htmlFor: "requiredPlaceholder" }, { children: requiredPlaceholder }), void 0)), inlinePlaceholder && (jsx$1(AnimatedPlaceholder, __assign$1({ "data-testid": "input-placeholder" }, { children: placeholder }), void 0)), children] }), void 0), !hideClear && !rest.disabled && inlinePlaceholder && hasValue && (jsx$1(ClearInput, __assign$1({ onClick: function () {
|
|
14700
14703
|
onChange('', { target: { value: '' } });
|
|
@@ -14715,11 +14718,11 @@ var Button$6 = function (_a) {
|
|
|
14715
14718
|
throw new Error("Invalid button variant ".concat(variant));
|
|
14716
14719
|
};
|
|
14717
14720
|
|
|
14718
|
-
var Container$
|
|
14721
|
+
var Container$U = newStyled.div(templateObject_1$1a || (templateObject_1$1a = __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) {
|
|
14719
14722
|
var theme = _a.theme;
|
|
14720
14723
|
return theme.component.inputCustom.input.borderRadius;
|
|
14721
14724
|
});
|
|
14722
|
-
var ButtonContainer$1 = newStyled.div(templateObject_2$
|
|
14725
|
+
var ButtonContainer$1 = newStyled.div(templateObject_2$W || (templateObject_2$W = __makeTemplateObject(["\n max-width: 50%;\n margin-left: -6px;\n\n button {\n width: 100%;\n height: 100%;\n border-radius: ", "\n"], ["\n max-width: 50%;\n margin-left: -6px;\n\n button {\n width: 100%;\n height: 100%;\n border-radius: ", "\n"])), function (_a) {
|
|
14723
14726
|
var theme = _a.theme, defaultRounded = _a.defaultRounded;
|
|
14724
14727
|
return defaultRounded
|
|
14725
14728
|
? theme.component.inputCustom.button.borderRadius
|
|
@@ -14734,23 +14737,23 @@ var Custom = function (_a) {
|
|
|
14734
14737
|
text: text,
|
|
14735
14738
|
disabled: rest.disabled,
|
|
14736
14739
|
}); }, [variant, onClick, text, rest.disabled]);
|
|
14737
|
-
return (jsx$1(Container$
|
|
14740
|
+
return (jsx$1(Container$U, __assign$1({ theme: theme }, { children: jsx$1(BaseInput, __assign$1({}, rest, { children: jsx$1(ButtonContainer$1, __assign$1({ theme: theme, defaultRounded: defaultRounded }, { children: jsx$1(Button$6, __assign$1({}, props), void 0) }), void 0) }), void 0) }), void 0));
|
|
14738
14741
|
};
|
|
14739
|
-
var templateObject_1$
|
|
14742
|
+
var templateObject_1$1a, templateObject_2$W;
|
|
14740
14743
|
|
|
14741
|
-
var SuccessContainer = newStyled.div(templateObject_1$
|
|
14744
|
+
var SuccessContainer = newStyled.div(templateObject_1$19 || (templateObject_1$19 = __makeTemplateObject(["\n height: ", ";\n display: flex;\n"], ["\n height: ", ";\n display: flex;\n"])), function (_a) {
|
|
14742
14745
|
var size = _a.size;
|
|
14743
14746
|
return (size === 'small' ? '36px' : '');
|
|
14744
14747
|
});
|
|
14745
|
-
var SuccessMessage = newStyled.div(templateObject_2$
|
|
14746
|
-
var SuccessText = newStyled.span(templateObject_3$
|
|
14748
|
+
var SuccessMessage = newStyled.div(templateObject_2$V || (templateObject_2$V = __makeTemplateObject(["\n background-color: #dfefe0;\n border: 0.063rem solid #5ead63;\n border-radius: 0.5rem;\n width: 100%;\n flex: 1;\n display: flex;\n align-items: center;\n padding: 0 1rem;\n box-sizing: border-box;\n"], ["\n background-color: #dfefe0;\n border: 0.063rem solid #5ead63;\n border-radius: 0.5rem;\n width: 100%;\n flex: 1;\n display: flex;\n align-items: center;\n padding: 0 1rem;\n box-sizing: border-box;\n"])));
|
|
14749
|
+
var SuccessText = newStyled.span(templateObject_3$P || (templateObject_3$P = __makeTemplateObject(["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 600;\n margin-left: 0.313rem;\n"], ["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 600;\n margin-left: 0.313rem;\n"])));
|
|
14747
14750
|
var Success = function (_a) {
|
|
14748
14751
|
var children = _a.children, successText = _a.successText, size = _a.size;
|
|
14749
14752
|
return (jsxs$1(SuccessContainer, __assign$1({ size: size }, { children: [jsxs$1(SuccessMessage, { children: [jsx$1(Icon.Actions.Check, { fill: "#5EAD63", width: 1.375, height: 1.063 }, void 0), jsx$1(SuccessText, { children: successText }, void 0)] }, void 0), children] }), void 0));
|
|
14750
14753
|
};
|
|
14751
|
-
var templateObject_1$
|
|
14754
|
+
var templateObject_1$19, templateObject_2$V, templateObject_3$P;
|
|
14752
14755
|
|
|
14753
|
-
var ButtonContainer = newStyled.div(templateObject_1$
|
|
14756
|
+
var ButtonContainer = newStyled.div(templateObject_1$18 || (templateObject_1$18 = __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) {
|
|
14754
14757
|
var status = _a.status, type = _a.type, theme = _a.theme;
|
|
14755
14758
|
return status === InputValidationType.Empty &&
|
|
14756
14759
|
type === 'primary' &&
|
|
@@ -14767,16 +14770,16 @@ var BasePlusButton = function (_a) {
|
|
|
14767
14770
|
}
|
|
14768
14771
|
return (jsx$1(BaseInput, __assign$1({ onValidation: setStatus, onChange: onChangeInput }, rest, { children: jsx$1(ButtonContainer, __assign$1({ status: status, type: "primary", theme: theme }, { children: jsx$1(ButtonSecondary, { text: text, onClick: function () { return onClick(inputValue); }, disabled: rest.disabled || status === InputValidationType.Error }, void 0) }), void 0) }), void 0));
|
|
14769
14772
|
};
|
|
14770
|
-
var templateObject_1$
|
|
14773
|
+
var templateObject_1$18;
|
|
14771
14774
|
|
|
14772
|
-
var Container$
|
|
14773
|
-
var IconContainer$3 = newStyled.div(templateObject_2$
|
|
14775
|
+
var Container$T = newStyled.div(templateObject_1$17 || (templateObject_1$17 = __makeTemplateObject(["\n input {\n padding-right: 2.688rem;\n }\n"], ["\n input {\n padding-right: 2.688rem;\n }\n"])));
|
|
14776
|
+
var IconContainer$3 = newStyled.div(templateObject_2$U || (templateObject_2$U = __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"])));
|
|
14774
14777
|
var BasePlusIcon = function (_a) {
|
|
14775
14778
|
var Icon = _a.Icon, rest = __rest(_a, ["Icon"]);
|
|
14776
14779
|
var theme = useTheme();
|
|
14777
|
-
return (jsx$1(Container$
|
|
14780
|
+
return (jsx$1(Container$T, { children: jsx$1(BaseInput, __assign$1({}, rest, { children: jsx$1(IconContainer$3, { children: jsx$1(Icon, { testId: "IconWrapper", fill: theme.colors.shades['250'].color }, void 0) }, void 0) }), void 0) }, void 0));
|
|
14778
14781
|
};
|
|
14779
|
-
var templateObject_1$
|
|
14782
|
+
var templateObject_1$17, templateObject_2$U;
|
|
14780
14783
|
|
|
14781
14784
|
var Input$3 = {
|
|
14782
14785
|
Simple: BaseInput,
|
|
@@ -14916,14 +14919,14 @@ var Portal = function (_a) {
|
|
|
14916
14919
|
var visibleStyle = function (_a) {
|
|
14917
14920
|
var opened = _a.opened;
|
|
14918
14921
|
return opened
|
|
14919
|
-
? css(templateObject_1$
|
|
14922
|
+
? css(templateObject_1$16 || (templateObject_1$16 = __makeTemplateObject(["\n opacity: 1;\n pointer-events: all;\n "], ["\n opacity: 1;\n pointer-events: all;\n "]))) : css(templateObject_2$T || (templateObject_2$T = __makeTemplateObject(["\n opacity: 0;\n pointer-events: none;\n "], ["\n opacity: 0;\n pointer-events: none;\n "])));
|
|
14920
14923
|
};
|
|
14921
14924
|
var transformStyle = function (_a) {
|
|
14922
14925
|
var opened = _a.opened, maxFullScreen = _a.maxFullScreen, initialTop = _a.initialTop;
|
|
14923
14926
|
return opened
|
|
14924
|
-
? css(templateObject_3$
|
|
14927
|
+
? css(templateObject_3$O || (templateObject_3$O = __makeTemplateObject(["\n transform: ", ";\n top: ", ";\n "], ["\n transform: ", ";\n top: ", ";\n "])), maxFullScreen ? 'translateY(0)' : 'translate(-50%, -50%)', maxFullScreen ? '0' : initialTop ? initialTop : '50%') : css(templateObject_4$E || (templateObject_4$E = __makeTemplateObject(["\n transform: ", ";\n top: ", ";\n "], ["\n transform: ", ";\n top: ", ";\n "])), maxFullScreen ? 'translateY(10%)' : 'translate(-50%, -40%)', maxFullScreen ? '0' : initialTop ? initialTop : '50%');
|
|
14925
14928
|
};
|
|
14926
|
-
var Container$
|
|
14929
|
+
var Container$S = newStyled.div(templateObject_6$r || (templateObject_6$r = __makeTemplateObject(["\n border: 1px solid var(--colors-pallete-primary-color);\n border-radius: ", ";\n padding: ", ";\n position: fixed;\n left: ", ";\n top: ", ";\n z-index: var(--zIndex-modal);\n background-color: var(--colors-background-color);\n transition: transform 0.3s, opacity 0.3s;\n overflow-y: auto;\n max-width: ", ";\n max-height: ", ";\n width: ", ";\n height: ", ";\n ", "\n ", "\n ", "\n"], ["\n border: 1px solid var(--colors-pallete-primary-color);\n border-radius: ", ";\n padding: ", ";\n position: fixed;\n left: ", ";\n top: ", ";\n z-index: var(--zIndex-modal);\n background-color: var(--colors-background-color);\n transition: transform 0.3s, opacity 0.3s;\n overflow-y: auto;\n max-width: ", ";\n max-height: ", ";\n width: ", ";\n height: ", ";\n ", "\n ", "\n ", "\n"])), function (props) { return "".concat(props.maxFullScreen ? '0' : 'var(--radius-regular)'); }, function (props) { return "".concat(props.padding ? props.padding : '20px 10px'); }, function (props) { return "".concat(props.maxFullScreen ? '0' : '50%'); }, function (props) { return (props.maxFullScreen ? '0' : props.initialTop ? props.initialTop : '50%'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : '90vw'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : '90vh'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : 'auto'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : 'inherit'); }, function (_a) {
|
|
14927
14930
|
var width = _a.width;
|
|
14928
14931
|
return width
|
|
14929
14932
|
? css(templateObject_5$w || (templateObject_5$w = __makeTemplateObject(["\n width: ", ";\n "], ["\n width: ", ";\n "])), width) : mediaQueries({
|
|
@@ -14940,7 +14943,7 @@ var Modal = function (_a) {
|
|
|
14940
14943
|
}
|
|
14941
14944
|
close();
|
|
14942
14945
|
};
|
|
14943
|
-
return (jsxs(Portal, __assign$1({ id: id }, { children: [jsx(Container$
|
|
14946
|
+
return (jsxs(Portal, __assign$1({ id: id }, { children: [jsx(Container$S, __assign$1({ opened: opened, maxFullScreen: maxFullScreen, padding: padding, width: width, initialTop: initialTop }, { children: children }), void 0), jsx(Overlay, { "data-testid": "modal-overlay", opened: opened, onClick: function () {
|
|
14944
14947
|
onClickOverlayHandler === null || onClickOverlayHandler === void 0 ? void 0 : onClickOverlayHandler();
|
|
14945
14948
|
onDismiss();
|
|
14946
14949
|
} }, void 0)] }), void 0));
|
|
@@ -14971,7 +14974,7 @@ var useModal = function (id) {
|
|
|
14971
14974
|
close: close,
|
|
14972
14975
|
}); }, [close, open, opened]);
|
|
14973
14976
|
};
|
|
14974
|
-
var templateObject_1$
|
|
14977
|
+
var templateObject_1$16, templateObject_2$T, templateObject_3$O, templateObject_4$E, templateObject_5$w, templateObject_6$r, templateObject_7$p;
|
|
14975
14978
|
|
|
14976
14979
|
var htmlReactParser = {exports: {}};
|
|
14977
14980
|
|
|
@@ -18752,7 +18755,7 @@ HTMLReactParser$1.htmlToDOM;
|
|
|
18752
18755
|
HTMLReactParser$1.attributesToProps;
|
|
18753
18756
|
HTMLReactParser$1.Element;
|
|
18754
18757
|
|
|
18755
|
-
var Bar$1 = newStyled.div(templateObject_1$
|
|
18758
|
+
var Bar$1 = newStyled.div(templateObject_1$15 || (templateObject_1$15 = __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) {
|
|
18756
18759
|
var height = _a.height;
|
|
18757
18760
|
return height || '0.5rem';
|
|
18758
18761
|
}, function (_a) {
|
|
@@ -18791,7 +18794,7 @@ var BarContainer = newStyled.div({
|
|
|
18791
18794
|
padding: '0 16px',
|
|
18792
18795
|
position: 'relative',
|
|
18793
18796
|
});
|
|
18794
|
-
var Container$
|
|
18797
|
+
var Container$R = newStyled.div(function (_a) {
|
|
18795
18798
|
var backgroundColor = _a.backgroundColor;
|
|
18796
18799
|
return ({
|
|
18797
18800
|
width: '475px',
|
|
@@ -18804,7 +18807,7 @@ var Container$Q = newStyled.div(function (_a) {
|
|
|
18804
18807
|
background: backgroundColor,
|
|
18805
18808
|
});
|
|
18806
18809
|
});
|
|
18807
|
-
var MessageContainer = newStyled.div(templateObject_2$
|
|
18810
|
+
var MessageContainer = newStyled.div(templateObject_2$S || (templateObject_2$S = __makeTemplateObject(["\n padding: 0 1rem;\n text-align: center;\n"], ["\n padding: 0 1rem;\n text-align: center;\n"])));
|
|
18808
18811
|
var getBarWithBasedOnPercent$1 = function (percent) {
|
|
18809
18812
|
return percent <= 100 && percent >= 0 ? "".concat(percent, "%") : '0%';
|
|
18810
18813
|
};
|
|
@@ -18833,33 +18836,33 @@ var MotivatorProgressBar = function (_a) {
|
|
|
18833
18836
|
message = message.replace('remainingAmount', remainingAmount.toString());
|
|
18834
18837
|
return (jsx$1(MessageContainer, { children: HTMLReactParser$1(message) }, void 0));
|
|
18835
18838
|
};
|
|
18836
|
-
return (jsxs$1(Container$
|
|
18839
|
+
return (jsxs$1(Container$R, __assign$1({ backgroundColor: backgroundColor }, { children: [jsxs$1(BarContainer, __assign$1({ "data-testid": "MPBContainer" }, { children: [jsxs$1(Value, { children: [currencyCode, currentAmount] }, void 0), jsx$1(Background$1, __assign$1({ backgroundColor: unfilledColor || theme.colors.shades['100'].color, "data-testid": "MPBBackground" }, { children: jsx$1(Bar$1, { "data-testid": "MPBBar", backgroundColor: fillColor, percent: progress }, void 0) }), void 0), jsxs$1(Value, __assign$1({ isBold: true }, { children: [currencyCode, endingValue] }), void 0)] }), void 0), isRewardUnlocked ? (jsx$1(MessageContainer, { dangerouslySetInnerHTML: { __html: rewardUnlockedMessage } }, void 0)) : (getRemainingAmountMessage())] }), void 0));
|
|
18837
18840
|
};
|
|
18838
|
-
var templateObject_1$
|
|
18841
|
+
var templateObject_1$15, templateObject_2$S;
|
|
18839
18842
|
|
|
18840
|
-
var Container$
|
|
18843
|
+
var Container$Q = newStyled.div(templateObject_1$14 || (templateObject_1$14 = __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) {
|
|
18841
18844
|
var theme = _a.theme;
|
|
18842
18845
|
return theme.component.orderBar.backgroundColor;
|
|
18843
18846
|
});
|
|
18844
|
-
var H1 = newStyled.h1(templateObject_2$
|
|
18847
|
+
var H1 = newStyled.h1(templateObject_2$R || (templateObject_2$R = __makeTemplateObject(["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 600;\n color: ", ";\n margin-left: 0.625rem;\n"], ["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 600;\n color: ", ";\n margin-left: 0.625rem;\n"])), function (props) { return props.color; });
|
|
18845
18848
|
var OrderBar = function (_a) {
|
|
18846
18849
|
var message = _a.message, color = _a.color;
|
|
18847
18850
|
var theme = useTheme();
|
|
18848
|
-
return (jsxs$1(Container$
|
|
18851
|
+
return (jsxs$1(Container$Q, __assign$1({ color: color }, { children: [jsx$1(Icon.Actions.Check, { width: 1.25, height: 0.875, fill: "#2F806A" }, void 0), jsx$1(H1, __assign$1({ color: theme.component.orderBar.fontColor }, { children: message }), void 0)] }), void 0));
|
|
18849
18852
|
};
|
|
18850
|
-
var templateObject_1$
|
|
18853
|
+
var templateObject_1$14, templateObject_2$R;
|
|
18851
18854
|
|
|
18852
|
-
var Container$
|
|
18853
|
-
var Card$1 = newStyled.div(templateObject_2$
|
|
18854
|
-
var Tag$1 = newStyled.div(templateObject_3$
|
|
18855
|
-
var Label$3 = newStyled.div(templateObject_4$
|
|
18855
|
+
var Container$P = newStyled.div(templateObject_1$13 || (templateObject_1$13 = __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"])));
|
|
18856
|
+
var Card$1 = newStyled.div(templateObject_2$Q || (templateObject_2$Q = __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"])));
|
|
18857
|
+
var Tag$1 = newStyled.div(templateObject_3$N || (templateObject_3$N = __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"])));
|
|
18858
|
+
var Label$3 = newStyled.div(templateObject_4$D || (templateObject_4$D = __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"])));
|
|
18856
18859
|
var Check = newStyled.div(templateObject_5$v || (templateObject_5$v = __makeTemplateObject(["\n position: absolute;\n width: 20px;\n height: 20px;\n background-color: var(--color);\n border-radius: 50%;\n left: 100%;\n top: 50%;\n transform: translate(6px, -50%) scale(0.5);\n opacity: 0;\n transition: opacity 0.3s, transform 0.3s;\n\n &[data-visible='true'] {\n transform: translate(6px, -50%) scale(1);\n opacity: 1;\n }\n"], ["\n position: absolute;\n width: 20px;\n height: 20px;\n background-color: var(--color);\n border-radius: 50%;\n left: 100%;\n top: 50%;\n transform: translate(6px, -50%) scale(0.5);\n opacity: 0;\n transition: opacity 0.3s, transform 0.3s;\n\n &[data-visible='true'] {\n transform: translate(6px, -50%) scale(1);\n opacity: 1;\n }\n"])));
|
|
18857
18860
|
var IconContainer$2 = newStyled.div(templateObject_6$q || (templateObject_6$q = __makeTemplateObject(["\n height: 56px;\n display: flex;\n align-items: center;\n justify-content: center;\n\n [aria-checked='true'] & * {\n fill: var(--color);\n }\n"], ["\n height: 56px;\n display: flex;\n align-items: center;\n justify-content: center;\n\n [aria-checked='true'] & * {\n fill: var(--color);\n }\n"])));
|
|
18858
18861
|
var IconPlaceholder = newStyled.div(templateObject_7$o || (templateObject_7$o = __makeTemplateObject(["\n height: 100%;\n width: 100%;\n background-color: var(--colors-shades-100-color);\n"], ["\n height: 100%;\n width: 100%;\n background-color: var(--colors-shades-100-color);\n"])));
|
|
18859
18862
|
var DiscountContainer = newStyled.div(templateObject_8$i || (templateObject_8$i = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n"], ["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n"])));
|
|
18860
18863
|
var PackSelector = function (_a) {
|
|
18861
18864
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange, currencyCode = _a.currencyCode;
|
|
18862
|
-
return (jsx$1(Container$
|
|
18865
|
+
return (jsx$1(Container$P, __assign$1({ role: "radiogroup" }, { children: packs.map(function (pack) {
|
|
18863
18866
|
return (jsx$1(PackCard, { pack: pack, onChange: onChange, selected: selectedValue === pack, currencyCode: currencyCode }, pack.label));
|
|
18864
18867
|
}) }), void 0));
|
|
18865
18868
|
};
|
|
@@ -18886,14 +18889,14 @@ var PackCard = function (_a) {
|
|
|
18886
18889
|
currency: currencyCode || 'USD',
|
|
18887
18890
|
}), ' ', "each"] }), void 0)] }), void 0));
|
|
18888
18891
|
};
|
|
18889
|
-
var templateObject_1$
|
|
18892
|
+
var templateObject_1$13, templateObject_2$Q, templateObject_3$N, templateObject_4$D, templateObject_5$v, templateObject_6$q, templateObject_7$o, templateObject_8$i;
|
|
18890
18893
|
|
|
18891
|
-
var Container$
|
|
18892
|
-
var IconContainer$1 = newStyled.div(templateObject_2$
|
|
18893
|
-
var PageNumbersContainer = newStyled.div(templateObject_3$
|
|
18894
|
+
var Container$O = newStyled.div(templateObject_1$12 || (templateObject_1$12 = __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"])));
|
|
18895
|
+
var IconContainer$1 = newStyled.div(templateObject_2$P || (templateObject_2$P = __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"])));
|
|
18896
|
+
var PageNumbersContainer = newStyled.div(templateObject_3$M || (templateObject_3$M = __makeTemplateObject(["\n display: flex;\n ", ";\n"], ["\n display: flex;\n ", ";\n"])), mediaQueries({
|
|
18894
18897
|
margin: ['0 0.75rem', '0 1.25rem'],
|
|
18895
18898
|
}));
|
|
18896
|
-
var PageNumber = newStyled.span(templateObject_4$
|
|
18899
|
+
var PageNumber = newStyled.span(templateObject_4$C || (templateObject_4$C = __makeTemplateObject(["\n font-weight: ", ";\n color: ", ";\n text-align: center;\n cursor: pointer;\n margin: 0 2px;\n border-bottom: ", ";\n ", ";\n background: ", ";\n"], ["\n font-weight: ", ";\n color: ", ";\n text-align: center;\n cursor: pointer;\n margin: 0 2px;\n border-bottom: ", ";\n ", ";\n background: ", ";\n"])), function (_a) {
|
|
18897
18900
|
var bold = _a.bold;
|
|
18898
18901
|
return (bold ? '700' : '500');
|
|
18899
18902
|
}, function (_a) {
|
|
@@ -18910,7 +18913,7 @@ var PageNumber = newStyled.span(templateObject_4$B || (templateObject_4$B = __ma
|
|
|
18910
18913
|
var background = _a.background;
|
|
18911
18914
|
return background || 'unset';
|
|
18912
18915
|
});
|
|
18913
|
-
var templateObject_1$
|
|
18916
|
+
var templateObject_1$12, templateObject_2$P, templateObject_3$M, templateObject_4$C;
|
|
18914
18917
|
|
|
18915
18918
|
var Pagination = function (_a) {
|
|
18916
18919
|
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;
|
|
@@ -18956,7 +18959,7 @@ var Pagination = function (_a) {
|
|
|
18956
18959
|
}
|
|
18957
18960
|
return pages;
|
|
18958
18961
|
}, [from, page, showReducedPages, to]);
|
|
18959
|
-
return (jsxs$1(Container$
|
|
18962
|
+
return (jsxs$1(Container$O, __assign$1({ "data-testid": "PaginationContainer" }, { children: [jsx$1(IconContainer$1, __assign$1({ onClick: function () { return handlePageChange(page - 1); }, "data-testid": "LeftChevron" }, { children: jsx$1(Icon.Arrows.ChevronLeft, { fill: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, void 0) }), void 0), !showReducedPages && (jsx$1(PageNumbersContainer, __assign$1({ "data-testid": "PageNumbersContainer", theme: theme }, { children: new Array(to - from + 1).fill(0).map(function (_, i) { return (jsx$1(PageNumber, __assign$1({ onClick: function () { return handlePageChange(i + from); }, bold: boldActive && page === i + from, underline: underlineActive && page === i + from, role: 'button', color: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color, borderColor: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color, theme: theme }, { children: i + from }), i)); }) }), void 0)), showReducedPages && (jsx$1(PageNumbersContainer, __assign$1({ "data-testid": "PageNumbersContainer", theme: theme }, { children: reducedPages.map(function (reducedPage, index) { return (jsx$1(PageNumber, __assign$1({ onClick: function () { return handlePageChange(reducedPage); }, bold: boldActive && page === reducedPage, underline: underlineActive && page === reducedPage, role: 'button', color: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color, borderColor: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color, theme: theme }, { children: reducedPage !== -2 ? reducedPage : '...' }), index)); }) }), void 0)), jsx$1(IconContainer$1, __assign$1({ onClick: function () { return handlePageChange(page + 1); }, "data-testid": "RightChevron" }, { children: jsx$1(Icon.Arrows.ChevronRight, { fill: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, void 0) }), void 0)] }), void 0));
|
|
18960
18963
|
};
|
|
18961
18964
|
|
|
18962
18965
|
var PaginatorBlog = function (_a) {
|
|
@@ -18970,12 +18973,12 @@ var PaginatorBlog = function (_a) {
|
|
|
18970
18973
|
setPage(page);
|
|
18971
18974
|
onChange(page);
|
|
18972
18975
|
};
|
|
18973
|
-
return (jsxs$1(Container$
|
|
18976
|
+
return (jsxs$1(Container$O, __assign$1({ "data-testid": "PaginatorBlogContainer" }, { children: [jsx$1(IconContainer$1, __assign$1({ onClick: function () { return handlePageChange(page - 1); }, "data-testid": "PaginatorBlogLeftChevron" }, { children: jsx$1(Icon.Arrows.ChevronLeft, { fill: page === 1 ? theme.colors.shades['white'].color : theme.colors.shades['700'].color }, void 0) }), void 0), jsx$1(PageNumbersContainer, __assign$1({ "data-testid": "PaginatorBlogPageNumbersContainer", theme: theme }, { children: new Array(to - from + 1).fill(0).map(function (_, i) { return (jsx$1(PageNumber, __assign$1({ onClick: function () { return handlePageChange(i + from); }, background: page === i + from ? 'black' : '', role: 'button', color: page === i + from
|
|
18974
18977
|
? theme.colors.shades['white'].color
|
|
18975
18978
|
: theme.colors.shades['700'].color, borderColor: theme.colors.shades['700'].color, theme: theme, bold: false, underline: false }, { children: i + from }), i)); }) }), void 0), jsx$1(IconContainer$1, __assign$1({ onClick: function () { return handlePageChange(page + 1); }, "data-testid": "PaginatorBlogRightChevron" }, { children: jsx$1(Icon.Arrows.ChevronRight, { fill: page === to ? theme.colors.shades['white'].color : theme.colors.shades['700'].color }, void 0) }), void 0)] }), void 0));
|
|
18976
18979
|
};
|
|
18977
18980
|
|
|
18978
|
-
var Container$
|
|
18981
|
+
var Container$N = newStyled.div(templateObject_1$11 || (templateObject_1$11 = __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) {
|
|
18979
18982
|
var width = _a.width;
|
|
18980
18983
|
return width;
|
|
18981
18984
|
}, function (_a) {
|
|
@@ -18991,14 +18994,14 @@ var Container$M = newStyled.div(templateObject_1$10 || (templateObject_1$10 = __
|
|
|
18991
18994
|
var PaymentMethod = function (_a) {
|
|
18992
18995
|
var Icon = _a.Icon, width = _a.width, height = _a.height, onClick = _a.onClick;
|
|
18993
18996
|
var theme = useTheme();
|
|
18994
|
-
return (jsx$1(Container$
|
|
18997
|
+
return (jsx$1(Container$N, __assign$1({ width: width, height: height, borderColor: theme.colors.shades['100'].color, isClickable: Boolean(onClick), onClick: onClick, "data-testid": "payment-method-container" }, { children: createElement(Icon) }), void 0));
|
|
18995
18998
|
};
|
|
18996
|
-
var templateObject_1$
|
|
18999
|
+
var templateObject_1$11;
|
|
18997
19000
|
|
|
18998
|
-
var Container$
|
|
19001
|
+
var Container$M = newStyled.div(templateObject_1$10 || (templateObject_1$10 = __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"])));
|
|
18999
19002
|
var IMAGE_WIDTH = '63px';
|
|
19000
|
-
var ImageContainer$3 = newStyled.div(templateObject_2$
|
|
19001
|
-
var DescriptionContainer$1 = newStyled.div(templateObject_3$
|
|
19003
|
+
var ImageContainer$3 = newStyled.div(templateObject_2$O || (templateObject_2$O = __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);
|
|
19004
|
+
var DescriptionContainer$1 = newStyled.div(templateObject_3$L || (templateObject_3$L = __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({
|
|
19002
19005
|
paddingLeft: ['0.938rem', '1.875rem'],
|
|
19003
19006
|
}), IMAGE_WIDTH);
|
|
19004
19007
|
var Title$3 = newStyled.h2(function (_a) {
|
|
@@ -19021,7 +19024,7 @@ var Subtitle = newStyled.h3(function (_a) {
|
|
|
19021
19024
|
margin: margin,
|
|
19022
19025
|
});
|
|
19023
19026
|
});
|
|
19024
|
-
var PriceContainer = newStyled.div(templateObject_4$
|
|
19027
|
+
var PriceContainer = newStyled.div(templateObject_4$B || (templateObject_4$B = __makeTemplateObject(["\n display: flex;\n ", ";\n height: 100%;\n align-items: end;\n margin-top: 0.219rem;\n"], ["\n display: flex;\n ", ";\n height: 100%;\n align-items: end;\n margin-top: 0.219rem;\n"])), function (_a) {
|
|
19025
19028
|
var withTag = _a.withTag; _a.theme;
|
|
19026
19029
|
return withTag
|
|
19027
19030
|
? mediaQueries({
|
|
@@ -19040,9 +19043,9 @@ var SimpleOrderItem = function (_a) {
|
|
|
19040
19043
|
var _b, _c, _d, _e, _f, _g, _h, _j;
|
|
19041
19044
|
var title = _a.title, className = _a.className, subtitle = _a.subtitle, midElement = _a.midElement, image = _a.image, price = _a.price, tag = _a.tag, quantity = _a.quantity, finalPriceStyle = _a.finalPriceStyle, isGift = _a.isGift;
|
|
19042
19045
|
var theme = useTheme();
|
|
19043
|
-
return (jsxs$1(Container$
|
|
19046
|
+
return (jsxs$1(Container$M, __assign$1({ className: className }, { children: [jsxs$1(ImageContainer$3, { children: [jsx$1(Image$3, { src: image.src, alt: image.alt, width: "4.063rem", height: "5.375rem", objectFit: "cover", objectPosition: "center" }, void 0), quantity ? (jsx$1(Quantity, __assign$1({ "data-testid": "order-item-quantity" }, { children: jsx$1(StyledSpan, { children: quantity }, void 0) }), void 0)) : null] }, void 0), jsxs$1(DescriptionContainer$1, __assign$1({ "data-testid": "order-item-description-container", theme: theme }, { children: [jsx$1(Title$3, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "product-title" }, { children: title }), void 0), subtitle && (jsx$1(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 && jsx$1(Gift, { children: "Limited Time Only" }, void 0), jsxs$1(PriceContainer, __assign$1({ "data-testid": "order-item-price-container", withTag: !!tag, theme: theme }, { children: [tag && (jsx$1(OfferBanner, { discountAppliedText: tag === null || tag === void 0 ? void 0 : tag.text, backgroundColor: tag === null || tag === void 0 ? void 0 : tag.backgroundColor }, void 0)), isGift ? (jsx$1(Gift, { children: "GIFT" }, void 0)) : (jsx$1(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));
|
|
19044
19047
|
};
|
|
19045
|
-
var templateObject_1
|
|
19048
|
+
var templateObject_1$10, templateObject_2$O, templateObject_3$L, templateObject_4$B, templateObject_5$u, templateObject_6$p, templateObject_7$n;
|
|
19046
19049
|
|
|
19047
19050
|
var P$1 = newStyled.p(function (_a) {
|
|
19048
19051
|
var color = _a.color;
|
|
@@ -19056,7 +19059,7 @@ var P$1 = newStyled.p(function (_a) {
|
|
|
19056
19059
|
margin: '0.938rem 4.188rem',
|
|
19057
19060
|
});
|
|
19058
19061
|
});
|
|
19059
|
-
var Bar = newStyled.div(templateObject_1
|
|
19062
|
+
var Bar = 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 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) {
|
|
19060
19063
|
var height = _a.height;
|
|
19061
19064
|
return height || '0.5rem';
|
|
19062
19065
|
}, function (_a) {
|
|
@@ -19085,7 +19088,7 @@ var Background = newStyled.div(function (_a) {
|
|
|
19085
19088
|
position: 'absolute',
|
|
19086
19089
|
});
|
|
19087
19090
|
});
|
|
19088
|
-
var Container$
|
|
19091
|
+
var Container$L = newStyled.div(function (_a) {
|
|
19089
19092
|
var widthAuto = _a.widthAuto, description = _a.description;
|
|
19090
19093
|
return ({
|
|
19091
19094
|
width: widthAuto ? 'auto' : 'fit-content',
|
|
@@ -19099,14 +19102,14 @@ var getBarWithBasedOnPercent = function (percent) {
|
|
|
19099
19102
|
var ProgressBar = function (_a) {
|
|
19100
19103
|
var description = _a.description, fillColor = _a.fillColor, _b = _a.widthAuto, widthAuto = _b === void 0 ? true : _b, percent = _a.percent, height = _a.height, backgroundColor = _a.backgroundColor, borderRadius = _a.borderRadius;
|
|
19101
19104
|
var theme = useTheme();
|
|
19102
|
-
return (jsxs$1(Container$
|
|
19105
|
+
return (jsxs$1(Container$L, __assign$1({ "data-testid": "PBContainer", widthAuto: widthAuto, description: description }, { children: [jsx$1(Background, __assign$1({ backgroundColor: backgroundColor || theme.colors.shades['100'].color, height: height, borderRadius: borderRadius, "data-testid": "PBBackground" }, { children: jsx$1(Bar, { "data-testid": "PBBar", backgroundColor: fillColor, percent: percent, height: height, borderRadius: borderRadius }, void 0) }), void 0), description && (jsx$1(P$1, __assign$1({ "data-testid": "paragraph", color: theme.colors.pallete.secondary.color }, { children: description }), void 0))] }), void 0));
|
|
19103
19106
|
};
|
|
19104
|
-
var templateObject_1
|
|
19107
|
+
var templateObject_1$$;
|
|
19105
19108
|
|
|
19106
|
-
var Container$
|
|
19107
|
-
var Item$1 = newStyled.span(templateObject_2$
|
|
19108
|
-
var Number$1 = newStyled(Item$1)(templateObject_3$
|
|
19109
|
-
var IncreaseDecrease = newStyled(Item$1)(templateObject_4$
|
|
19109
|
+
var Container$K = newStyled.div(templateObject_1$_ || (templateObject_1$_ = __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; });
|
|
19110
|
+
var Item$1 = newStyled.span(templateObject_2$N || (templateObject_2$N = __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"])));
|
|
19111
|
+
var Number$1 = newStyled(Item$1)(templateObject_3$K || (templateObject_3$K = __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"])));
|
|
19112
|
+
var IncreaseDecrease = newStyled(Item$1)(templateObject_4$A || (templateObject_4$A = __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)'; });
|
|
19110
19113
|
var QuantityPicker = function (_a) {
|
|
19111
19114
|
var _b = _a.initialValue, initialValue = _b === void 0 ? 0 : _b, _c = _a.maxValue, maxValue = _c === void 0 ? 99 : _c, value = _a.value, _d = _a.testId, testId = _d === void 0 ? 'quantity-picker' : _d, onChange = _a.onChange;
|
|
19112
19115
|
var theme = useTheme();
|
|
@@ -19129,9 +19132,9 @@ var QuantityPicker = function (_a) {
|
|
|
19129
19132
|
return clamp(value);
|
|
19130
19133
|
});
|
|
19131
19134
|
}, [value, clamp]);
|
|
19132
|
-
return (jsxs$1(Container$
|
|
19135
|
+
return (jsxs$1(Container$K, __assign$1({ borderColor: theme.colors.shades['200'].color, color: theme.colors.shades['700'].color, "data-testid": testId, borderRadius: theme.component.qtyPicker.borderRadius }, { children: [jsx$1(IncreaseDecrease, __assign$1({ "data-testid": "".concat(testId, "-minus"), onClick: function () { return setInternal(function (value) { return clamp(value - 1); }); } }, { children: "-" }), void 0), jsx$1(Number$1, { children: internal }, void 0), jsx$1(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));
|
|
19133
19136
|
};
|
|
19134
|
-
var templateObject_1$
|
|
19137
|
+
var templateObject_1$_, templateObject_2$N, templateObject_3$K, templateObject_4$A;
|
|
19135
19138
|
|
|
19136
19139
|
/* base styles & size variants */
|
|
19137
19140
|
var CustomRadioStyles$1 = {
|
|
@@ -19200,9 +19203,9 @@ var ContainerStyles$1 = {
|
|
|
19200
19203
|
},
|
|
19201
19204
|
};
|
|
19202
19205
|
|
|
19203
|
-
var Wrapper$3 = newStyled.div(templateObject_1$
|
|
19204
|
-
var Container$
|
|
19205
|
-
var Input$2 = newStyled.input(templateObject_2$
|
|
19206
|
+
var Wrapper$3 = newStyled.div(templateObject_1$Z || (templateObject_1$Z = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
19207
|
+
var Container$J = newStyled.div(__assign$1({}, ContainerStyles$1.baseStyles), function (props) { return [ContainerStyles$1[props.size](props.theme)]; });
|
|
19208
|
+
var Input$2 = newStyled.input(templateObject_2$M || (templateObject_2$M = __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) {
|
|
19206
19209
|
var disabled = _a.disabled;
|
|
19207
19210
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
19208
19211
|
});
|
|
@@ -19210,7 +19213,7 @@ var CustomRadio$1 = newStyled.div(function (props) { return [
|
|
|
19210
19213
|
CustomRadioStyles$1.baseStyles(props.theme, props.disabled, props.isChecked),
|
|
19211
19214
|
CustomRadioStyles$1[props.size](props.theme, props.isChecked),
|
|
19212
19215
|
]; });
|
|
19213
|
-
var StyledLabel$1 = newStyled(Label$6)(templateObject_3$
|
|
19216
|
+
var StyledLabel$1 = newStyled(Label$6)(templateObject_3$J || (templateObject_3$J = __makeTemplateObject(["\n font-size: 14px;\n font-weight: 400;\n line-height: 22px;\n"], ["\n font-size: 14px;\n font-weight: 400;\n line-height: 22px;\n"])));
|
|
19214
19217
|
var RadioPrimary = function (_a) {
|
|
19215
19218
|
var style = _a.style, name = _a.name, value = _a.value, id = _a.id, label = _a.label, _b = _a.checked, checked = _b === void 0 ? false : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, onChange = _a.onChange, _d = _a.size, size = _d === void 0 ? ComponentSize.Medium : _d;
|
|
19216
19219
|
var theme = useTheme();
|
|
@@ -19218,9 +19221,9 @@ var RadioPrimary = function (_a) {
|
|
|
19218
19221
|
var value = event.currentTarget.value;
|
|
19219
19222
|
onChange({ value: value, label: label });
|
|
19220
19223
|
};
|
|
19221
|
-
return (jsxs$1(Wrapper$3, { children: [jsxs$1(Container$
|
|
19224
|
+
return (jsxs$1(Wrapper$3, { children: [jsxs$1(Container$J, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsx$1(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), jsx$1(CustomRadio$1, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), jsx$1(StyledLabel$1, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0)] }, void 0));
|
|
19222
19225
|
};
|
|
19223
|
-
var templateObject_1$
|
|
19226
|
+
var templateObject_1$Z, templateObject_2$M, templateObject_3$J;
|
|
19224
19227
|
|
|
19225
19228
|
var RadioGroupInput = function (_a) {
|
|
19226
19229
|
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 ? ComponentSize.Medium : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d;
|
|
@@ -19299,9 +19302,9 @@ var ContainerStyles = {
|
|
|
19299
19302
|
},
|
|
19300
19303
|
};
|
|
19301
19304
|
|
|
19302
|
-
var Wrapper$2 = newStyled.div(templateObject_1$
|
|
19303
|
-
var Container$
|
|
19304
|
-
var Input$1 = newStyled.input(templateObject_2$
|
|
19305
|
+
var Wrapper$2 = newStyled.div(templateObject_1$Y || (templateObject_1$Y = __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"])));
|
|
19306
|
+
var Container$I = newStyled.div(__assign$1({}, ContainerStyles.baseStyles), function (props) { return [ContainerStyles[props.size](props.theme)]; });
|
|
19307
|
+
var Input$1 = newStyled.input(templateObject_2$L || (templateObject_2$L = __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) {
|
|
19305
19308
|
var disabled = _a.disabled;
|
|
19306
19309
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
19307
19310
|
});
|
|
@@ -19309,7 +19312,7 @@ var CustomRadio = newStyled.div(function (props) { return [
|
|
|
19309
19312
|
CustomRadioStyles.baseStyles(props.theme, props.disabled, props.isChecked),
|
|
19310
19313
|
CustomRadioStyles[props.size](props.theme, props.isChecked),
|
|
19311
19314
|
]; });
|
|
19312
|
-
var StyledLabel = newStyled(Label$6)(templateObject_3$
|
|
19315
|
+
var StyledLabel = newStyled(Label$6)(templateObject_3$I || (templateObject_3$I = __makeTemplateObject(["\n font-size: ", ";\n line-height: ", " !important;\n"], ["\n font-size: ", ";\n line-height: ", " !important;\n"])), function (_a) {
|
|
19313
19316
|
var theme = _a.theme;
|
|
19314
19317
|
return theme.component.radio.textSize;
|
|
19315
19318
|
}, function (_a) {
|
|
@@ -19323,9 +19326,9 @@ var ClubRadioInput = function (_a) {
|
|
|
19323
19326
|
var value = event.currentTarget.value;
|
|
19324
19327
|
onChange({ value: value, label: label });
|
|
19325
19328
|
};
|
|
19326
|
-
return (jsxs$1(Wrapper$2, { children: [jsxs$1(Container$
|
|
19329
|
+
return (jsxs$1(Wrapper$2, { children: [jsxs$1(Container$I, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsx$1(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), jsx$1(CustomRadio, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), jsx$1(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));
|
|
19327
19330
|
};
|
|
19328
|
-
var templateObject_1$
|
|
19331
|
+
var templateObject_1$Y, templateObject_2$L, templateObject_3$I;
|
|
19329
19332
|
|
|
19330
19333
|
var ClubRadioGroupInput = function (_a) {
|
|
19331
19334
|
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 ? ComponentSize.Medium : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d;
|
|
@@ -19353,10 +19356,10 @@ function formatDate(date, format) {
|
|
|
19353
19356
|
}
|
|
19354
19357
|
}
|
|
19355
19358
|
|
|
19356
|
-
var Container$
|
|
19357
|
-
var Content$1 = newStyled.div(templateObject_2$
|
|
19358
|
-
var StarsContent = newStyled.div(templateObject_3$
|
|
19359
|
-
var ReviewContainer$1 = newStyled.div(templateObject_4$
|
|
19359
|
+
var Container$H = newStyled.div(templateObject_1$X || (templateObject_1$X = __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"])));
|
|
19360
|
+
var Content$1 = newStyled.div(templateObject_2$K || (templateObject_2$K = __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"])));
|
|
19361
|
+
var StarsContent = newStyled.div(templateObject_3$H || (templateObject_3$H = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n"], ["\n display: flex;\n justify-content: space-between;\n"])));
|
|
19362
|
+
var ReviewContainer$1 = newStyled.div(templateObject_4$z || (templateObject_4$z = __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"])));
|
|
19360
19363
|
var DateText$1 = newStyled.span(templateObject_5$t || (templateObject_5$t = __makeTemplateObject(["\n font-weight: 400;\n font-size: 14px;\n line-height: 22px;\n"], ["\n font-weight: 400;\n font-size: 14px;\n line-height: 22px;\n"])));
|
|
19361
19364
|
var ReviewerName$1 = newStyled.h1(templateObject_6$o || (templateObject_6$o = __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"])));
|
|
19362
19365
|
var VerifiedText = newStyled.h1(templateObject_7$m || (templateObject_7$m = __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"])));
|
|
@@ -19391,17 +19394,17 @@ var Review$1 = function (_a) {
|
|
|
19391
19394
|
}
|
|
19392
19395
|
}
|
|
19393
19396
|
}, [opened]);
|
|
19394
|
-
return (jsx$1(Modal, __assign$1({ id: modalId, maxFullScreen: maxFullScreen, padding: "0" }, { children: jsxs$1(Container$
|
|
19397
|
+
return (jsx$1(Modal, __assign$1({ id: modalId, maxFullScreen: maxFullScreen, padding: "0" }, { children: jsxs$1(Container$H, { children: [jsx$1(CloseButton, __assign$1({ onClick: close }, { children: "X" }), void 0), jsx$1(ImageContainer$2, { children: image &&
|
|
19395
19398
|
(!isVideo ? (jsx$1(ImageWrapper$3, { src: image.src, alt: image.alt }, void 0)) : (jsx$1(VideoWrapper, { ref: refVideo, src: image.src, width: "100%", controls: true }, void 0))) }, void 0), jsxs$1(DescriptionContainer, { children: [opened && (jsxs$1(ReviewerName$1, { children: [reviewerName, verified && jsx$1(VerifiedText, { children: "Verified Buyer" }, void 0)] }, void 0)), jsxs$1(Content$1, __assign$1({ "data-testid": "review-detail-content" }, { children: [jsxs$1(StarsContent, { children: [jsx$1(StarList, { starsNumber: 5, rating: rating, fill: stars.color, size: stars.size }, void 0), jsx$1(DateText$1, { children: formatDate(date) }, void 0)] }, void 0), jsxs$1(ReviewContainer$1, { children: [jsx$1(ReviewTitle$1, { children: title }, void 0), jsx$1(ReviewDescription, { dangerouslySetInnerHTML: { __html: description } }, void 0)] }, void 0), jsxs$1(HelpfulContainer, { children: [jsxs$1(HelpfulAction, __assign$1({ "data-testid": "helpful-action", onClick: function () { return (helpfulAction ? helpfulAction(reviewId) : undefined); } }, { children: [jsx$1(Icon.Custom.ThumbsUp, { width: 1, height: 1, fill: "#000" }, void 0), jsx$1(HelpfulCount, { children: helpfulCount }, void 0)] }), void 0), jsxs$1(NotHelpfulAction, __assign$1({ "data-testid": "not-helpful-action", onClick: function () { return (notHelpfulAction ? notHelpfulAction(reviewId) : undefined); } }, { children: [jsx$1(Icon.Custom.ThumbsDown, { width: 1, height: 1, fill: "#000" }, void 0), jsx$1(NotHelpfulCount, { children: notHelpfulCount }, void 0)] }), void 0)] }, void 0)] }), void 0), productImage && productLink && (jsxs$1(ProductContainer, __assign$1({ onClick: function () { return (window.location.href = productLink); } }, { children: [jsx$1(ProductImageWrapper, { children: jsx$1(ProductImage, { src: productImage, alt: "productImage" }, void 0) }, void 0), jsx$1(ProductTitle, { children: productTitle }, void 0)] }), void 0))] }, void 0)] }, void 0) }), void 0));
|
|
19396
19399
|
};
|
|
19397
|
-
var templateObject_1$
|
|
19400
|
+
var templateObject_1$X, templateObject_2$K, templateObject_3$H, templateObject_4$z, templateObject_5$t, templateObject_6$o, templateObject_7$m, templateObject_8$h, templateObject_9$c, templateObject_10$a, templateObject_11$7, templateObject_12$4, templateObject_13$3, 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;
|
|
19398
19401
|
|
|
19399
19402
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_DESKTOP = 500;
|
|
19400
19403
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_MOBILE = 168;
|
|
19401
|
-
var Container$
|
|
19402
|
-
var Heading = newStyled.div(templateObject_2$
|
|
19403
|
-
var Content = newStyled.div(templateObject_3$
|
|
19404
|
-
var ReviewContainer = newStyled.div(templateObject_4$
|
|
19404
|
+
var Container$G = newStyled.div(templateObject_1$W || (templateObject_1$W = __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"])));
|
|
19405
|
+
var Heading = newStyled.div(templateObject_2$J || (templateObject_2$J = __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"])));
|
|
19406
|
+
var Content = newStyled.div(templateObject_3$G || (templateObject_3$G = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n"], ["\n display: flex;\n justify-content: space-between;\n"])));
|
|
19407
|
+
var ReviewContainer = newStyled.div(templateObject_4$y || (templateObject_4$y = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
19405
19408
|
var DateText = newStyled.span(templateObject_5$s || (templateObject_5$s = __makeTemplateObject(["\n font-weight: 400;\n font-size: 12px;\n line-height: 16px;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"], ["\n font-weight: 400;\n font-size: 12px;\n line-height: 16px;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"])));
|
|
19406
19409
|
var VariantText = newStyled.div(templateObject_6$n || (templateObject_6$n = __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"])));
|
|
19407
19410
|
var ReviewerName = newStyled.h2(templateObject_7$l || (templateObject_7$l = __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"])));
|
|
@@ -19440,7 +19443,7 @@ var Review = function (_a) {
|
|
|
19440
19443
|
});
|
|
19441
19444
|
};
|
|
19442
19445
|
}, [randomId]);
|
|
19443
|
-
return (jsxs$1(Container$
|
|
19446
|
+
return (jsxs$1(Container$G, { children: [jsxs$1(Heading, { children: [jsx$1(ReviewerName, { children: reviewerName }, void 0), jsx$1(DateText, { children: formatDate(date, dateFormat) }, void 0)] }, void 0), jsx$1(StarList, { starsNumber: 5, rating: rating, fill: stars.color, size: stars.size }, void 0), jsxs$1(Content, __assign$1({ "data-testid": "review-content" }, { children: [jsxs$1(ReviewContainer, { children: [jsx$1(ReviewTitle, { children: title }, void 0), jsx$1(ReviewDescriptionMobile, { dangerouslySetInnerHTML: {
|
|
19444
19447
|
__html: showMoreMobile
|
|
19445
19448
|
? "".concat(description.slice(0, REVIEWS_DESCRIPTION_MAX_LENGTH_MOBILE), "... <a id=\"see-more-").concat(randomId, "\" class=\"see-more\">See more</a>")
|
|
19446
19449
|
: description,
|
|
@@ -19450,12 +19453,12 @@ var Review = function (_a) {
|
|
|
19450
19453
|
: description,
|
|
19451
19454
|
} }, void 0), jsxs$1(HelpfulContainerDesktop, __assign$1({ showMoreDesktop: description.length > REVIEWS_DESCRIPTION_MAX_LENGTH_DESKTOP }, { children: [helpfulActionText && helpfulAction && (jsx$1(ButtonSecondaryWrapper, { onClick: function () { return helpfulAction(reviewId); }, text: helpfulActionText, size: ComponentSize.Small }, void 0)), (helpfulCount || (hasTextWhenHelpfulCount0 && helpfulCount === 0)) && (jsxs$1(HelpfulText, { children: [helpfulCount, " people found this helpful"] }, void 0))] }), void 0)] }, void 0), jsxs$1(ImagesContainer, { children: [jsxs$1(Images, { children: [images === null || images === void 0 ? void 0 : images.map(function (image) { return (jsx$1(ImageWrapper$2, __assign$1({ onClick: function () { return onClickImage && onClickImage(image.src); } }, { children: jsx$1(Image$3, { src: image.src, alt: image.alt, height: "10rem", width: "7.5rem" }, void 0) }), image.src)); }), !images || (images.length === 0 && jsx$1(ImageSpace, {}, void 0))] }, void 0), jsx$1(VariantText, { children: reviewVariant }, void 0)] }, void 0)] }), void 0), jsx$1(HelpfulTexti, {}, void 0), jsxs$1(HelpfulContainerMobile, { children: [helpfulActionText && helpfulAction && (jsx$1(ButtonSecondaryWrapper, { onClick: function () { return helpfulAction(reviewId); }, text: helpfulActionText, size: ComponentSize.Small }, void 0)), (helpfulCount || (hasTextWhenHelpfulCount0 && helpfulCount === 0)) && (jsxs$1(HelpfulText, { children: [helpfulCount, " people found this helpful"] }, void 0))] }, void 0)] }, void 0));
|
|
19452
19455
|
};
|
|
19453
|
-
var templateObject_1$
|
|
19456
|
+
var templateObject_1$W, templateObject_2$J, templateObject_3$G, templateObject_4$y, templateObject_5$s, templateObject_6$n, templateObject_7$l, templateObject_8$g, templateObject_9$b, templateObject_10$9, templateObject_11$6, templateObject_12$3, templateObject_13$2, templateObject_14$1, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19;
|
|
19454
19457
|
|
|
19455
|
-
var Container$
|
|
19456
|
-
var ReviewsContainer = newStyled.div(templateObject_2$
|
|
19457
|
-
var ReviewsCount = newStyled.div(templateObject_3$
|
|
19458
|
-
var ReviewsStars = newStyled.div(templateObject_4$
|
|
19458
|
+
var Container$F = newStyled.div(templateObject_1$V || (templateObject_1$V = __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"])));
|
|
19459
|
+
var ReviewsContainer = newStyled.div(templateObject_2$I || (templateObject_2$I = __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"])));
|
|
19460
|
+
var ReviewsCount = newStyled.div(templateObject_3$F || (templateObject_3$F = __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"])));
|
|
19461
|
+
var ReviewsStars = newStyled.div(templateObject_4$x || (templateObject_4$x = __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"])));
|
|
19459
19462
|
var ReviewsTextCount = newStyled(Text$7)(templateObject_5$r || (templateObject_5$r = __makeTemplateObject(["\n margin-right: 5px;\n padding-top: 6px;\n line-height: 32px;\n\n @media (min-width: 768px) {\n font-size: 42px;\n line-height: 46px;\n }\n"], ["\n margin-right: 5px;\n padding-top: 6px;\n line-height: 32px;\n\n @media (min-width: 768px) {\n font-size: 42px;\n line-height: 46px;\n }\n"])));
|
|
19460
19463
|
var ReviewsImages = newStyled.div(templateObject_6$m || (templateObject_6$m = __makeTemplateObject(["\n display: flex;\n flex-wrap: wrap;\n max-width: 348px;\n gap: 4px;\n justify-content: center;\n\n @media (min-width: 768px) {\n gap: 8px;\n max-width: 360px;\n }\n"], ["\n display: flex;\n flex-wrap: wrap;\n max-width: 348px;\n gap: 4px;\n justify-content: center;\n\n @media (min-width: 768px) {\n gap: 8px;\n max-width: 360px;\n }\n"])));
|
|
19461
19464
|
var SummaryItem = newStyled.div(templateObject_7$k || (templateObject_7$k = __makeTemplateObject(["\n width: 84px;\n height: 68px;\n background: ", ";\n background-repeat: no-repeat;\n background-size: cover;\n background-position: center;\n cursor: zoom-in;\n"], ["\n width: 84px;\n height: 68px;\n background: ", ";\n background-repeat: no-repeat;\n background-size: cover;\n background-position: center;\n cursor: zoom-in;\n"])), function (_a) {
|
|
@@ -19466,25 +19469,25 @@ var ReviewsHeader = function (_a) {
|
|
|
19466
19469
|
var _b = _a.title, title = _b === void 0 ? 'Reviews' : _b, rating = _a.rating, reviews = _a.reviews, reviewsText = _a.reviewsText, reviewsSummary = _a.reviewsSummary, onClickReview = _a.onClickReview;
|
|
19467
19470
|
var starsNumber = 5;
|
|
19468
19471
|
var theme = useTheme();
|
|
19469
|
-
return (jsxs$1(Container$
|
|
19472
|
+
return (jsxs$1(Container$F, { children: [jsx$1(Text$7, __assign$1({ variant: "heading3", weight: "bold", style: { margin: '10px 0' } }, { children: title }), void 0), jsxs$1(ReviewsContainer, { children: [jsxs$1(ReviewsCount, { children: [jsxs$1(ReviewsStars, { children: [jsx$1(ReviewsTextCount, __assign$1({ variant: "heading3", weight: "bold" }, { children: rating }), void 0), jsx$1(StarList, { rating: rating, size: ComponentSize.Medium, starsNumber: starsNumber, fill: theme.component.stars.element.color }, void 0)] }, void 0), jsxs$1(Text$7, __assign$1({ variant: "body", size: "small", weight: "regular", style: { marginBottom: '20px' } }, { children: [reviews, " ", reviewsText] }), void 0)] }, void 0), jsx$1(ReviewsImages, { children: reviewsSummary.map(function (summaryItem) { return (jsx$1(SummaryItem, { onClick: function () { return onClickReview(summaryItem); }, backgroundUrl: summaryItem, "data-testid": "summary-review-item" }, summaryItem)); }) }, void 0)] }, void 0)] }, void 0));
|
|
19470
19473
|
};
|
|
19471
|
-
var templateObject_1$
|
|
19474
|
+
var templateObject_1$V, templateObject_2$I, templateObject_3$F, templateObject_4$x, templateObject_5$r, templateObject_6$m, templateObject_7$k;
|
|
19472
19475
|
|
|
19473
|
-
var Container$
|
|
19474
|
-
var Text$1 = newStyled.p(templateObject_2$
|
|
19476
|
+
var Container$E = newStyled.div(templateObject_1$U || (templateObject_1$U = __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"])));
|
|
19477
|
+
var Text$1 = newStyled.p(templateObject_2$H || (templateObject_2$H = __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; });
|
|
19475
19478
|
var ScrollToTop = function (_a) {
|
|
19476
19479
|
var scrollToTopText = _a.scrollToTopText, onClick = _a.onClick, fill = _a.fill, _b = _a.Icon, Icon$1 = _b === void 0 ? Icon.Arrows.CircleChevronUp : _b;
|
|
19477
19480
|
var theme = useTheme();
|
|
19478
19481
|
var fillValue = fill || theme.colors.pallete.primary.color;
|
|
19479
|
-
return (jsxs$1(Container$
|
|
19482
|
+
return (jsxs$1(Container$E, __assign$1({ onClick: onClick, "data-testid": "scrollTopContainer" }, { children: [jsx$1(Text$1, __assign$1({ color: theme.colors.shades['700'].color }, { children: scrollToTopText }), void 0), jsx$1(Icon$1, { width: 1.375, height: 1.375, fill: fillValue }, void 0)] }), void 0));
|
|
19480
19483
|
};
|
|
19481
|
-
var templateObject_1$
|
|
19484
|
+
var templateObject_1$U, templateObject_2$H;
|
|
19482
19485
|
|
|
19483
|
-
var Button$5 = newStyled.button(templateObject_1$
|
|
19486
|
+
var Button$5 = newStyled.button(templateObject_1$T || (templateObject_1$T = __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({
|
|
19484
19487
|
right: ['1rem', '7.75rem'],
|
|
19485
19488
|
top: ['0.75rem', '0.75rem'],
|
|
19486
19489
|
}));
|
|
19487
|
-
var templateObject_1$
|
|
19490
|
+
var templateObject_1$T;
|
|
19488
19491
|
|
|
19489
19492
|
var ClearButton = function (_a) {
|
|
19490
19493
|
var onClick = _a.onClick;
|
|
@@ -19492,7 +19495,7 @@ var ClearButton = function (_a) {
|
|
|
19492
19495
|
return (jsx$1(Button$5, __assign$1({ onClick: onClick, theme: theme }, { children: jsx$1(Icon.Actions.Close, { height: 1.25, width: 1.25 }, void 0) }), void 0));
|
|
19493
19496
|
};
|
|
19494
19497
|
|
|
19495
|
-
var Container$
|
|
19498
|
+
var Container$D = newStyled.div({
|
|
19496
19499
|
display: 'flex',
|
|
19497
19500
|
justifyContent: 'center',
|
|
19498
19501
|
padding: '1rem',
|
|
@@ -19500,10 +19503,10 @@ var Container$C = newStyled.div({
|
|
|
19500
19503
|
|
|
19501
19504
|
var Footer = function (_a) {
|
|
19502
19505
|
var text = _a.text, onClick = _a.onClick;
|
|
19503
|
-
return (jsx$1(Container$
|
|
19506
|
+
return (jsx$1(Container$D, { children: jsx$1(Text$7, __assign$1({ variant: "link", size: "regular", underline: true, onClick: onClick }, { children: text }), void 0) }, void 0));
|
|
19504
19507
|
};
|
|
19505
19508
|
|
|
19506
|
-
var Container$
|
|
19509
|
+
var Container$C = newStyled.div(templateObject_1$S || (templateObject_1$S = __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({
|
|
19507
19510
|
borderTop: ['0.063rem solid var(--colors-shades-100-color)', 'none'],
|
|
19508
19511
|
}));
|
|
19509
19512
|
var Description = newStyled.div({
|
|
@@ -19517,20 +19520,20 @@ var Description = newStyled.div({
|
|
|
19517
19520
|
textAlign: 'start',
|
|
19518
19521
|
},
|
|
19519
19522
|
});
|
|
19520
|
-
var templateObject_1$
|
|
19523
|
+
var templateObject_1$S;
|
|
19521
19524
|
|
|
19522
19525
|
var ProductItem = function (_a) {
|
|
19523
19526
|
var _b;
|
|
19524
19527
|
var src = _a.src, title = _a.title, price = _a.price;
|
|
19525
19528
|
var theme = useTheme();
|
|
19526
|
-
return (jsxs$1(Container$
|
|
19529
|
+
return (jsxs$1(Container$C, __assign$1({ theme: theme }, { children: [jsx$1(Image$3, { src: src, alt: title, width: "4.063rem", height: "5.375rem" }, void 0), jsxs$1(Description, { children: [jsx$1(Text$7, { variant: "body", weight: "regular", size: "regular", testId: "search-product-title", dangerouslySetInnerHTML: { __html: title } }, void 0), jsx$1(PriceLabel$1, { finalPrice: price, color: (_b = theme.colors.pallete.brickRed) === null || _b === void 0 ? void 0 : _b.color, size: ComponentSize.Small }, void 0)] }, void 0)] }), void 0));
|
|
19527
19530
|
};
|
|
19528
19531
|
|
|
19529
19532
|
var OptionsList = newStyled.ul({
|
|
19530
19533
|
margin: '0px',
|
|
19531
19534
|
padding: '0px',
|
|
19532
19535
|
});
|
|
19533
|
-
var OptionItem = newStyled.li(templateObject_1$
|
|
19536
|
+
var OptionItem = newStyled.li(templateObject_1$R || (templateObject_1$R = __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({
|
|
19534
19537
|
padding: [0, '0rem 1rem'],
|
|
19535
19538
|
borderRadius: [0, '0.5rem'],
|
|
19536
19539
|
}));
|
|
@@ -19542,20 +19545,20 @@ var Anchor = newStyled.a({
|
|
|
19542
19545
|
padding: 0,
|
|
19543
19546
|
textDecoration: 'none',
|
|
19544
19547
|
});
|
|
19545
|
-
var Container$
|
|
19548
|
+
var Container$B = newStyled.div(templateObject_2$G || (templateObject_2$G = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n margin: 0rem;\n padding: 0rem;\n position: absolute;\n width: 100%;\n background-color: white;\n box-sizing: border-box;\n z-index: 2;\n ", "\n"], ["\n display: flex;\n flex-direction: column;\n margin: 0rem;\n padding: 0rem;\n position: absolute;\n width: 100%;\n background-color: white;\n box-sizing: border-box;\n z-index: 2;\n ", "\n"])), mediaQueries({
|
|
19546
19549
|
border: ['none', '0.063rem solid var(--colors-pallete-secondary-color)'],
|
|
19547
19550
|
marginTop: ['1.25rem', '0.125rem'],
|
|
19548
19551
|
borderRadius: ['0', '0.5rem'],
|
|
19549
19552
|
}));
|
|
19550
|
-
var Header$2 = newStyled.div(templateObject_3$
|
|
19553
|
+
var Header$2 = newStyled.div(templateObject_3$E || (templateObject_3$E = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), mediaQueries({
|
|
19551
19554
|
margin: ['0rem 0rem 1rem 0rem', '1rem'],
|
|
19552
19555
|
}));
|
|
19553
|
-
var templateObject_1$
|
|
19556
|
+
var templateObject_1$R, templateObject_2$G, templateObject_3$E;
|
|
19554
19557
|
|
|
19555
19558
|
var ResultsPanel = function (_a) {
|
|
19556
19559
|
var options = _a.options, header = _a.header, footer = _a.footer, onViewAll = _a.onViewAll, testId = _a.testId;
|
|
19557
19560
|
var theme = useTheme();
|
|
19558
|
-
return (jsxs$1(Container$
|
|
19561
|
+
return (jsxs$1(Container$B, __assign$1({ "data-testid": testId, theme: theme }, { children: [header && (jsx$1(Header$2, __assign$1({ theme: theme }, { children: jsx$1(Text$7, __assign$1({ variant: "heading6", weight: "demi" }, { children: header }), void 0) }), void 0)), jsx$1(OptionsList, { children: options.map(function (_a) {
|
|
19559
19562
|
var optionUrl = _a.optionUrl, price = _a.price, src = _a.src, title = _a.title;
|
|
19560
19563
|
return (jsx$1(OptionItem, __assign$1({ theme: theme }, { children: jsx$1(Anchor, __assign$1({ href: optionUrl }, { children: jsx$1(ProductItem, { src: src, title: title, price: price }, void 0) }), void 0) }), title));
|
|
19561
19564
|
}) }, void 0), footer && jsx$1(Footer, { text: footer, onClick: onViewAll }, void 0)] }), void 0));
|
|
@@ -19569,8 +19572,8 @@ var SearchIconContainer = newStyled.div({
|
|
|
19569
19572
|
background: 'white',
|
|
19570
19573
|
alignSelf: 'center',
|
|
19571
19574
|
});
|
|
19572
|
-
var StyledButton$2 = newStyled(ButtonSecondary)(templateObject_1$
|
|
19573
|
-
var templateObject_1$
|
|
19575
|
+
var StyledButton$2 = newStyled(ButtonSecondary)(templateObject_1$Q || (templateObject_1$Q = __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"])));
|
|
19576
|
+
var templateObject_1$Q;
|
|
19574
19577
|
|
|
19575
19578
|
var SearchControl = function (_a) {
|
|
19576
19579
|
var open = _a.open, onSearch = _a.onSearch, onClose = _a.onClose, _b = _a.showSearchIcon, showSearchIcon = _b === void 0 ? false : _b;
|
|
@@ -19616,7 +19619,7 @@ var Input = newStyled.input(function (props) { return ({
|
|
|
19616
19619
|
},
|
|
19617
19620
|
},
|
|
19618
19621
|
}); });
|
|
19619
|
-
var Container$
|
|
19622
|
+
var Container$A = newStyled.div({
|
|
19620
19623
|
position: 'relative',
|
|
19621
19624
|
display: 'flex',
|
|
19622
19625
|
});
|
|
@@ -19671,7 +19674,7 @@ var SearchBar = function (_a) {
|
|
|
19671
19674
|
if (e.cancelable) {
|
|
19672
19675
|
e.preventDefault();
|
|
19673
19676
|
}
|
|
19674
|
-
}, ref: ref, style: { position: 'relative' } }, { children: [jsxs$1(Container$
|
|
19677
|
+
}, ref: ref, style: { position: 'relative' } }, { children: [jsxs$1(Container$A, __assign$1({ theme: theme }, { children: [jsx$1(Input, { value: state.term, placeholder: placeholder, onChange: function (e) { return dispatch({ type: 'UPDATE_TERM', payload: { term: e.target.value } }); }, onFocus: function () { return dispatch({ type: 'TOGGLE_PANEL', payload: { open: true } }); }, id: id, autoComplete: autoComplete, theme: theme, "aria-label": ariaLabel, onKeyDown: function (e) {
|
|
19675
19678
|
if (e.key === 'Enter') {
|
|
19676
19679
|
if (e.cancelable) {
|
|
19677
19680
|
e.preventDefault();
|
|
@@ -19682,21 +19685,21 @@ var SearchBar = function (_a) {
|
|
|
19682
19685
|
} }, void 0), jsx$1(SearchControl, { showSearchIcon: isBlogSearchBar, open: state.open, onClose: handleOnClose, onSearch: function () { return onSearch(state.term); } }, void 0)] }), void 0), state.open && !!options.length && (jsx$1(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));
|
|
19683
19686
|
};
|
|
19684
19687
|
|
|
19685
|
-
var Container$
|
|
19686
|
-
var BackArrow = newStyled.div(templateObject_2$
|
|
19687
|
-
var BoldSpan = newStyled.span(templateObject_3$
|
|
19688
|
-
var NormalSpan = newStyled.span(templateObject_4$
|
|
19688
|
+
var Container$z = newStyled.div(templateObject_1$P || (templateObject_1$P = __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"])));
|
|
19689
|
+
var BackArrow = newStyled.div(templateObject_2$F || (templateObject_2$F = __makeTemplateObject(["\n transform: rotate(180deg);\n margin-right: 0.5rem;\n"], ["\n transform: rotate(180deg);\n margin-right: 0.5rem;\n"])));
|
|
19690
|
+
var BoldSpan = newStyled.span(templateObject_3$D || (templateObject_3$D = __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"])));
|
|
19691
|
+
var NormalSpan = newStyled.span(templateObject_4$w || (templateObject_4$w = __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"])));
|
|
19689
19692
|
var SearchNavigationParents = newStyled.div(templateObject_5$q || (templateObject_5$q = __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"])));
|
|
19690
|
-
var templateObject_1$
|
|
19693
|
+
var templateObject_1$P, templateObject_2$F, templateObject_3$D, templateObject_4$w, templateObject_5$q;
|
|
19691
19694
|
|
|
19692
19695
|
var SearchNavigation = function (_a) {
|
|
19693
19696
|
var returnText = _a.returnText, returnUrl = _a.returnUrl, _b = _a.steps, steps = _b === void 0 ? [] : _b, returnAction = _a.returnAction;
|
|
19694
|
-
return (jsxs$1(Container$
|
|
19697
|
+
return (jsxs$1(Container$z, { children: [jsxs$1(Text$7, __assign$1({ variant: "link", style: { display: 'flex', justifyContent: 'center' }, href: returnUrl || '/', onClick: returnAction, testId: "breadcrumb-search-returnText" }, { children: [jsx$1(BackArrow, { children: jsx$1(Icon.Arrows.ChevronRightVariant, { width: 1.375, height: 1.375 }, void 0) }, void 0), returnText && jsx$1(BoldSpan, { children: returnText }, void 0)] }), void 0), jsx$1(SearchNavigationParents, { children: steps.map(function (step, index) {
|
|
19695
19698
|
return index === steps.length - 1 ? (jsx$1(BoldSpan, __assign$1({ "data-testid": "breadcrumb-search-step-".concat(index) }, { children: step }), step)) : (jsx$1(NormalSpan, __assign$1({ "data-testid": "breadcrumb-search-step-".concat(index) }, { children: "".concat(step, " / ") }), step));
|
|
19696
19699
|
}) }, void 0)] }, void 0));
|
|
19697
19700
|
};
|
|
19698
19701
|
|
|
19699
|
-
var Container$
|
|
19702
|
+
var Container$y = newStyled.div(templateObject_1$O || (templateObject_1$O = __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) {
|
|
19700
19703
|
var alignCenter = _a.alignCenter;
|
|
19701
19704
|
return alignCenter &&
|
|
19702
19705
|
"\n justify-content: center;\n align-items: center;\n text-align: center;\n ";
|
|
@@ -19706,26 +19709,26 @@ var Container$x = newStyled.div(templateObject_1$N || (templateObject_1$N = __ma
|
|
|
19706
19709
|
}, function (props) { return props.backgroundColor; }, function (props) { return props.textColor; }, function (props) {
|
|
19707
19710
|
return props.border ? "".concat(props.border.borderWidth, " solid ").concat(props.border.borderColor) : 'none';
|
|
19708
19711
|
});
|
|
19709
|
-
var TitleText = newStyled.div(templateObject_2$
|
|
19710
|
-
var BannerText = newStyled.div(templateObject_3$
|
|
19712
|
+
var TitleText = newStyled.div(templateObject_2$E || (templateObject_2$E = __makeTemplateObject(["\n font-style: normal;\n font-weight: 700;\n line-height: 267%;\n margin: 0px 20px 0px;\n font-size: 30px;\n @media (max-width: 768px) {\n font-size: 24px;\n }\n"], ["\n font-style: normal;\n font-weight: 700;\n line-height: 267%;\n margin: 0px 20px 0px;\n font-size: 30px;\n @media (max-width: 768px) {\n font-size: 24px;\n }\n"])));
|
|
19713
|
+
var BannerText = newStyled.div(templateObject_3$C || (templateObject_3$C = __makeTemplateObject(["\n font-style: normal;\n font-weight: 400;\n line-height: 120%;\n font-size: 20px;\n letter-spacing: -0.02em;\n margin: 0px 20px 20px;\n width: 70%;\n @media (max-width: 768px) {\n font-size: 16px;\n width: 80%;\n }\n"], ["\n font-style: normal;\n font-weight: 400;\n line-height: 120%;\n font-size: 20px;\n letter-spacing: -0.02em;\n margin: 0px 20px 20px;\n width: 70%;\n @media (max-width: 768px) {\n font-size: 16px;\n width: 80%;\n }\n"])));
|
|
19711
19714
|
var ShortBanner = function (_a) {
|
|
19712
19715
|
var textColor = _a.textColor, title = _a.title, bannerText = _a.bannerText, backgroundColor = _a.backgroundColor, _b = _a.alignCenter, alignCenter = _b === void 0 ? false : _b, _c = _a.widthAuto, widthAuto = _c === void 0 ? true : _c;
|
|
19713
19716
|
var theme = useTheme();
|
|
19714
|
-
return (jsxs$1(Container$
|
|
19717
|
+
return (jsxs$1(Container$y, __assign$1({ backgroundColor: backgroundColor, alignCenter: alignCenter, widthAuto: widthAuto, "data-testid": "BannerContainer", theme: theme, textColor: textColor }, { children: [jsx$1(TitleText, { children: title }, void 0), jsx$1(BannerText, { children: bannerText }, void 0)] }), void 0));
|
|
19715
19718
|
};
|
|
19716
|
-
var templateObject_1$
|
|
19719
|
+
var templateObject_1$O, templateObject_2$E, templateObject_3$C;
|
|
19717
19720
|
|
|
19718
|
-
var TableElement$3 = newStyled.table(templateObject_1$
|
|
19719
|
-
var TableCell$3 = newStyled.td(templateObject_2$
|
|
19720
|
-
var TableHead$3 = newStyled.th(templateObject_3$
|
|
19721
|
-
var Label$2 = newStyled('div')(templateObject_4$
|
|
19721
|
+
var TableElement$3 = newStyled.table(templateObject_1$N || (templateObject_1$N = __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; });
|
|
19722
|
+
var TableCell$3 = newStyled.td(templateObject_2$D || (templateObject_2$D = __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; });
|
|
19723
|
+
var TableHead$3 = newStyled.th(templateObject_3$B || (templateObject_3$B = __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; });
|
|
19724
|
+
var Label$2 = newStyled('div')(templateObject_4$v || (templateObject_4$v = __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"])));
|
|
19722
19725
|
var TopLabel$1 = newStyled(Label$2)(templateObject_5$p || (templateObject_5$p = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
19723
19726
|
var LeftLabel$1 = newStyled(Label$2)(templateObject_6$l || (templateObject_6$l = __makeTemplateObject(["\n width: 20px;\n transform: rotate(270deg);\n"], ["\n width: 20px;\n transform: rotate(270deg);\n"])));
|
|
19724
|
-
var Container$
|
|
19727
|
+
var Container$x = newStyled('div')(templateObject_7$j || (templateObject_7$j = __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"])));
|
|
19725
19728
|
var LabelText$1 = newStyled('span')(templateObject_8$f || (templateObject_8$f = __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"])));
|
|
19726
19729
|
var Column$2 = newStyled('div')(templateObject_9$a || (templateObject_9$a = __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"])));
|
|
19727
19730
|
var TableRow$3 = newStyled.tr(templateObject_10$8 || (templateObject_10$8 = __makeTemplateObject(["\n &:last-child {\n td {\n border-bottom: none;\n }\n }\n\n &.background {\n background-color: ", ";\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; });
|
|
19728
|
-
var templateObject_1$
|
|
19731
|
+
var templateObject_1$N, templateObject_2$D, templateObject_3$B, templateObject_4$v, templateObject_5$p, templateObject_6$l, templateObject_7$j, templateObject_8$f, templateObject_9$a, templateObject_10$8;
|
|
19729
19732
|
|
|
19730
19733
|
var getIsOdd$2 = function (number) { return number % 2 !== 0; };
|
|
19731
19734
|
var getCellColor$2 = function (index, cell) {
|
|
@@ -19761,21 +19764,21 @@ var SizeChartTable = function (_a) {
|
|
|
19761
19764
|
var theme = useTheme();
|
|
19762
19765
|
var _d = (_c = (_b = headers === null || headers === void 0 ? void 0 : headers[0]) === null || _b === void 0 ? void 0 : _b.split('/')) !== null && _c !== void 0 ? _c : [], xLabel = _d[0], yLabel = _d[1];
|
|
19763
19766
|
var isMultilabel = xLabel && yLabel;
|
|
19764
|
-
return (jsxs$1(Container$
|
|
19767
|
+
return (jsxs$1(Container$x, { children: [isMultilabel && (jsxs$1(LeftLabel$1, { children: [jsx$1(Icon.Arrows.ChevronLeftVariant, {}, void 0), jsx$1(LabelText$1, { children: xLabel }, void 0), jsx$1(Icon.Arrows.ChevronRightVariant, {}, void 0)] }, void 0)), jsxs$1(Column$2, { children: [isMultilabel && (jsxs$1(TopLabel$1, { children: [jsx$1(Icon.Arrows.ChevronLeftVariant, {}, void 0), jsx$1(LabelText$1, { children: yLabel }, void 0), jsx$1(Icon.Arrows.ChevronRightVariant, {}, void 0)] }, void 0)), jsxs$1(TableElement$3, __assign$1({ color: theme.colors.shades['700'].color, borderColor: theme.colors.shades['100'].color }, { children: [jsx$1("thead", __assign$1({ style: { backgroundColor: newSizeTableCss ? '#f6f0e7' : '' } }, { children: jsx$1(TableRow$3, __assign$1({ backgroundColor: theme.colors.shades['10'].color }, { children: headers === null || headers === void 0 ? void 0 : headers.map(function (header, index) { return (jsx$1(TableHead$3, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: !(index === 0 && isMultilabel) && header }), index)); }) }), void 0) }), void 0), newSizeTableCss ? (jsx$1("tbody", { children: tableContent === null || tableContent === void 0 ? void 0 : tableContent.map(function (row, index) { return (jsx$1("tr", { children: row === null || row === void 0 ? void 0 : row.map(function (cell, index) { return (jsx$1(TableCell$3, __assign$1({ style: {
|
|
19765
19768
|
backgroundColor: getCellColor$2(index, cell),
|
|
19766
19769
|
}, borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }, index)); }) }, void 0)) : (jsx$1("tbody", { children: tableContent === null || tableContent === void 0 ? void 0 : tableContent.map(function (row, index) { return (jsx$1(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 (jsx$1(TableCell$3, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }), index)); }) }, void 0))] }), void 0)] }, void 0)] }, void 0));
|
|
19767
19770
|
};
|
|
19768
19771
|
|
|
19769
|
-
var TableElement$2 = newStyled.table(templateObject_1$
|
|
19770
|
-
var TableCell$2 = newStyled.td(templateObject_2$
|
|
19771
|
-
var TableHead$2 = newStyled.th(templateObject_3$
|
|
19772
|
-
var TableRow$2 = newStyled.tr(templateObject_4$
|
|
19772
|
+
var TableElement$2 = newStyled.table(templateObject_1$M || (templateObject_1$M = __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; });
|
|
19773
|
+
var TableCell$2 = newStyled.td(templateObject_2$C || (templateObject_2$C = __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; });
|
|
19774
|
+
var TableHead$2 = newStyled.th(templateObject_3$A || (templateObject_3$A = __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; });
|
|
19775
|
+
var TableRow$2 = newStyled.tr(templateObject_4$u || (templateObject_4$u = __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; });
|
|
19773
19776
|
var SizeTable = function (_a) {
|
|
19774
19777
|
var headers = _a.headers, data = _a.data, className = _a.className;
|
|
19775
19778
|
var theme = useTheme();
|
|
19776
19779
|
return (jsxs$1(TableElement$2, __assign$1({ color: theme.colors.shades['700'].color, borderColor: theme.colors.shades['100'].color, className: className }, { children: [jsx$1("thead", { children: jsx$1(TableRow$2, __assign$1({ backgroundColor: theme.colors.shades['10'].color }, { children: headers.map(function (header, index) { return (jsx$1(TableHead$2, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: header }), index)); }) }), void 0) }, void 0), jsx$1("tbody", { children: data.map(function (row, index) { return (jsx$1(TableRow$2, __assign$1({ className: index % 2 !== 0 ? '' : 'background', backgroundColor: theme.colors.shades['10'].color }, { children: row.map(function (cell, index) { return (jsx$1(TableCell$2, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }), index)); }) }, void 0)] }), void 0));
|
|
19777
19780
|
};
|
|
19778
|
-
var templateObject_1$
|
|
19781
|
+
var templateObject_1$M, templateObject_2$C, templateObject_3$A, templateObject_4$u;
|
|
19779
19782
|
|
|
19780
19783
|
var getStylesBySize$7 = function (size) {
|
|
19781
19784
|
switch (size) {
|
|
@@ -19802,7 +19805,7 @@ var textButtonStyles = function (theme, size) {
|
|
|
19802
19805
|
} });
|
|
19803
19806
|
};
|
|
19804
19807
|
var withContainer = function (iconFill, isLeading, Icon) {
|
|
19805
|
-
return Icon && (jsx("span", __assign$1({ css: css(templateObject_1$
|
|
19808
|
+
return Icon && (jsx("span", __assign$1({ css: css(templateObject_1$L || (templateObject_1$L = __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));
|
|
19806
19809
|
};
|
|
19807
19810
|
var getIconFill = function (theme, disabled, iconColor) {
|
|
19808
19811
|
if (disabled)
|
|
@@ -19818,23 +19821,23 @@ var TextButton = function (_a) {
|
|
|
19818
19821
|
var iconFill = getIconFill(theme, disabled, iconColor);
|
|
19819
19822
|
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));
|
|
19820
19823
|
};
|
|
19821
|
-
var templateObject_1$
|
|
19824
|
+
var templateObject_1$L;
|
|
19822
19825
|
|
|
19823
|
-
var Container$
|
|
19824
|
-
var P = newStyled.p(templateObject_2$
|
|
19825
|
-
var PercentageSpan = newStyled.span(templateObject_3$
|
|
19826
|
+
var Container$w = newStyled.div(templateObject_1$K || (templateObject_1$K = __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"])));
|
|
19827
|
+
var P = newStyled.p(templateObject_2$B || (templateObject_2$B = __makeTemplateObject(["\n margin: 0 0 0 10px;\n"], ["\n margin: 0 0 0 10px;\n"])));
|
|
19828
|
+
var PercentageSpan = newStyled.span(templateObject_3$z || (templateObject_3$z = __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"])));
|
|
19826
19829
|
var SizeFitGuide = function (_a) {
|
|
19827
19830
|
var title = _a.title, fitPercentage = _a.fitPercentage, onClick = _a.onClick, onClickFitPercentage = _a.onClickFitPercentage, _b = _a.hideIcon, hideIcon = _b === void 0 ? false : _b;
|
|
19828
|
-
return (jsxs$1(Container$
|
|
19831
|
+
return (jsxs$1(Container$w, { children: [jsx$1(TextButton, { LeadingIcon: hideIcon ? undefined : Icon.PDP.Rule, size: ComponentSize.Small, text: title, onClick: onClick, uppercase: false }, void 0), !!fitPercentage && (jsxs$1(P, { children: ["Fit As Expected:", ' ', jsxs$1(PercentageSpan, __assign$1({ onClick: onClickFitPercentage, role: "button" }, { children: [fitPercentage, "%"] }), void 0)] }, void 0))] }, void 0));
|
|
19829
19832
|
};
|
|
19830
|
-
var templateObject_1$
|
|
19833
|
+
var templateObject_1$K, templateObject_2$B, templateObject_3$z;
|
|
19831
19834
|
|
|
19832
|
-
var ButtonsContainer = newStyled.div(templateObject_1$
|
|
19835
|
+
var ButtonsContainer = newStyled.div(templateObject_1$J || (templateObject_1$J = __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) {
|
|
19833
19836
|
var inline = _a.inline;
|
|
19834
19837
|
return (inline ? '0 0 0 10px' : '8px 0 0 0');
|
|
19835
19838
|
});
|
|
19836
|
-
var Row = newStyled.div(templateObject_2$
|
|
19837
|
-
var templateObject_1$
|
|
19839
|
+
var Row = newStyled.div(templateObject_2$A || (templateObject_2$A = __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"])));
|
|
19840
|
+
var templateObject_1$J, templateObject_2$A;
|
|
19838
19841
|
|
|
19839
19842
|
var SizeSelector = function (_a) {
|
|
19840
19843
|
var _b;
|
|
@@ -19856,7 +19859,7 @@ var SizeSelector = function (_a) {
|
|
|
19856
19859
|
}) }), void 0)] }), void 0));
|
|
19857
19860
|
};
|
|
19858
19861
|
|
|
19859
|
-
var TabContainer = newStyled.div(templateObject_1$
|
|
19862
|
+
var TabContainer = newStyled.div(templateObject_1$I || (templateObject_1$I = __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) {
|
|
19860
19863
|
var titleSize = _a.titleSize;
|
|
19861
19864
|
return titleSize;
|
|
19862
19865
|
}, function (_a) {
|
|
@@ -19873,18 +19876,18 @@ var Tab = function (_a) {
|
|
|
19873
19876
|
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;
|
|
19874
19877
|
return (jsx$1(Fragment$2, { children: jsx$1(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));
|
|
19875
19878
|
};
|
|
19876
|
-
var templateObject_1$
|
|
19879
|
+
var templateObject_1$I;
|
|
19877
19880
|
|
|
19878
|
-
var Container$
|
|
19879
|
-
var TabList = newStyled.div(templateObject_2$
|
|
19881
|
+
var Container$v = newStyled.div(templateObject_1$H || (templateObject_1$H = __makeTemplateObject(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
|
|
19882
|
+
var TabList = newStyled.div(templateObject_2$z || (templateObject_2$z = __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) {
|
|
19880
19883
|
var backgroundColor = _a.backgroundColor;
|
|
19881
19884
|
return backgroundColor;
|
|
19882
19885
|
}, function (_a) {
|
|
19883
19886
|
var borderColor = _a.borderColor;
|
|
19884
19887
|
return (borderColor ? "border-bottom: 1px solid ".concat(borderColor) : '');
|
|
19885
19888
|
});
|
|
19886
|
-
var TabContent = newStyled.div(templateObject_3$
|
|
19887
|
-
var TabSeparator = newStyled.div(templateObject_4$
|
|
19889
|
+
var TabContent = newStyled.div(templateObject_3$y || (templateObject_3$y = __makeTemplateObject(["\n display: block;\n"], ["\n display: block;\n"])));
|
|
19890
|
+
var TabSeparator = newStyled.div(templateObject_4$t || (templateObject_4$t = __makeTemplateObject(["\n color: var(--colors-shades-white-color);\n font-family: initial;\n font-size: 40px;\n line-height: 69px;\n padding: 0 25px;\n"], ["\n color: var(--colors-shades-white-color);\n font-family: initial;\n font-size: 40px;\n line-height: 69px;\n padding: 0 25px;\n"])));
|
|
19888
19891
|
var Tabs = function (_a) {
|
|
19889
19892
|
var _b;
|
|
19890
19893
|
var _c = _a.backgroundColor, backgroundColor = _c === void 0 ? 'var(--colors-pallete-primary-color)' : _c, _d = _a.selectedBorderColor, selectedBorderColor = _d === void 0 ? 'var(--colors-pallete-primary-color)' : _d, _e = _a.fixedBorderColor, fixedBorderColor = _e === void 0 ? '' : _e, tabs = _a.tabs, initialSelected = _a.initialSelected, tabsMaxWidth = _a.tabsMaxWidth;
|
|
@@ -19893,16 +19896,16 @@ var Tabs = function (_a) {
|
|
|
19893
19896
|
return null;
|
|
19894
19897
|
}
|
|
19895
19898
|
var selectedContent = (_b = tabs.find(function (tab) { return tab.title === selectedTab; })) === null || _b === void 0 ? void 0 : _b.content;
|
|
19896
|
-
return (jsxs$1(Container$
|
|
19899
|
+
return (jsxs$1(Container$v, __assign$1({ "data-testid": "tabs-container" }, { children: [jsx$1(TabList, __assign$1({ backgroundColor: backgroundColor, borderColor: fixedBorderColor }, { children: tabs.map(function (tab, index) { return (jsxs$1(React__default.Fragment, { children: [jsx$1(Tab, { title: tab.title, selected: selectedTab === tab.title, onClick: setSelectedTab, tabsMaxWidth: tabsMaxWidth, color: selectedBorderColor }, tab.title), index + 1 < tabs.length && jsx$1(TabSeparator, { children: "|" }, void 0)] }, tab.title)); }) }), void 0), jsx$1(TabContent, __assign$1({ "data-testid": "tab-content" }, { children: selectedContent }), void 0)] }), void 0));
|
|
19897
19900
|
};
|
|
19898
|
-
var templateObject_1$
|
|
19901
|
+
var templateObject_1$H, templateObject_2$z, templateObject_3$y, templateObject_4$t;
|
|
19899
19902
|
|
|
19900
|
-
var Container$
|
|
19903
|
+
var Container$u = newStyled.div(templateObject_1$G || (templateObject_1$G = __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"])));
|
|
19901
19904
|
var Tag = function (_a) {
|
|
19902
19905
|
var text = _a.text, className = _a.className;
|
|
19903
|
-
return jsx$1(Container$
|
|
19906
|
+
return jsx$1(Container$u, __assign$1({ className: className }, { children: text }), void 0);
|
|
19904
19907
|
};
|
|
19905
|
-
var templateObject_1$
|
|
19908
|
+
var templateObject_1$G;
|
|
19906
19909
|
|
|
19907
19910
|
var getStylesBySize$6 = function (size, styledBorder) {
|
|
19908
19911
|
switch (size) {
|
|
@@ -20015,9 +20018,9 @@ var SeasonOfferRoundedTag = function (_a) {
|
|
|
20015
20018
|
return (jsx(Tag, { css: __assign$1({ backgroundColor: backgroundColor, fontWeight: 700, color: '#FFFFFF', textAlign: 'center', borderRadius: '50%' }, stylesBySize), text: text, className: className }, void 0));
|
|
20016
20019
|
};
|
|
20017
20020
|
|
|
20018
|
-
var ImageWrapper$1 = newStyled.div(templateObject_1$
|
|
20019
|
-
var VideoOverlay$1 = newStyled.div(templateObject_2$
|
|
20020
|
-
var FullscreenVideo = newStyled.div(templateObject_3$
|
|
20021
|
+
var ImageWrapper$1 = newStyled.div(templateObject_1$F || (templateObject_1$F = __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"])));
|
|
20022
|
+
var VideoOverlay$1 = newStyled.div(templateObject_2$y || (templateObject_2$y = __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"])));
|
|
20023
|
+
var FullscreenVideo = newStyled.div(templateObject_3$x || (templateObject_3$x = __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"])));
|
|
20021
20024
|
var ImageVideo = function (_a) {
|
|
20022
20025
|
var imageLink = _a.imageLink, isVideo = _a.isVideo, isMobile = _a.isMobile;
|
|
20023
20026
|
var video = useRef(null);
|
|
@@ -20037,12 +20040,12 @@ var ImageVideo = function (_a) {
|
|
|
20037
20040
|
height: '100%',
|
|
20038
20041
|
} }, void 0)] }, void 0))] }, void 0));
|
|
20039
20042
|
};
|
|
20040
|
-
var templateObject_1$
|
|
20043
|
+
var templateObject_1$F, templateObject_2$y, templateObject_3$x;
|
|
20041
20044
|
|
|
20042
|
-
var ContainerDesktop = css(templateObject_1$
|
|
20043
|
-
var ContainerMobile = css(templateObject_2$
|
|
20044
|
-
var Container$
|
|
20045
|
-
var TextContainer = newStyled.div(templateObject_4$
|
|
20045
|
+
var ContainerDesktop = css(templateObject_1$E || (templateObject_1$E = __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"])));
|
|
20046
|
+
var ContainerMobile = css(templateObject_2$x || (templateObject_2$x = __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"])));
|
|
20047
|
+
var Container$t = newStyled.div(templateObject_3$w || (templateObject_3$w = __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);
|
|
20048
|
+
var TextContainer = newStyled.div(templateObject_4$s || (templateObject_4$s = __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"])));
|
|
20046
20049
|
var TextWithImage = function (_a) {
|
|
20047
20050
|
var _b, _c, _d, _e;
|
|
20048
20051
|
var title = _a.title, text = _a.text, children = _a.children, buttomText = _a.buttomText, backgroundColor = _a.backgroundColor, imageLeftSide = _a.imageLeftSide, titleStyle = _a.titleStyle, textStyle = _a.textStyle, _f = _a.buttonWideOnMobile, buttonWideOnMobile = _f === void 0 ? false : _f, props = __rest(_a, ["title", "text", "children", "buttomText", "backgroundColor", "imageLeftSide", "titleStyle", "textStyle", "buttonWideOnMobile"]);
|
|
@@ -20062,7 +20065,7 @@ var TextWithImage = function (_a) {
|
|
|
20062
20065
|
// @ts-ignore
|
|
20063
20066
|
props.isRedirectionURL ? (window.location.href = props.URLLink) : props.onButtonClick();
|
|
20064
20067
|
};
|
|
20065
|
-
return (jsxs(Container$
|
|
20068
|
+
return (jsxs(Container$t, __assign$1({ style: { backgroundColor: backgroundColor } }, { children: [isMobile && jsx(ImageTitle, {}, void 0), (imageLeftSide || isMobile) && (jsx(ImageVideo, { imageLink: (_b = props.imgVideo) === null || _b === void 0 ? void 0 : _b.imageLink, isMobile: isMobile, isVideo: (_c = props.imgVideo) === null || _c === void 0 ? void 0 : _c.isVideo }, void 0)), jsxs(TextContainer, { children: [!isMobile && jsx(ImageTitle, {}, void 0), jsx(Text$7, __assign$1({ variant: "body", weight: "regular", style: textStyle ? textStyle : { maxWidth: '450px' } }, { children: text }), void 0), children, jsx(BaseCTA, { text: buttomText, size: ComponentSize.Medium, wide: isMobile && buttonWideOnMobile, onClick: buttonAction, testId: buttomText, css: {
|
|
20066
20069
|
backgroundColor: props.btnBGColor,
|
|
20067
20070
|
color: '#ffffff',
|
|
20068
20071
|
border: props.btnBGColor,
|
|
@@ -20072,18 +20075,18 @@ var TextWithImage = function (_a) {
|
|
|
20072
20075
|
},
|
|
20073
20076
|
} }, 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));
|
|
20074
20077
|
};
|
|
20075
|
-
var templateObject_1$
|
|
20078
|
+
var templateObject_1$E, templateObject_2$x, templateObject_3$w, templateObject_4$s;
|
|
20076
20079
|
|
|
20077
20080
|
var slideInAnimation = function (distanceFromTop) {
|
|
20078
20081
|
if (distanceFromTop === void 0) { distanceFromTop = '124px'; }
|
|
20079
|
-
return keyframes(templateObject_1$
|
|
20082
|
+
return keyframes(templateObject_1$D || (templateObject_1$D = __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);
|
|
20080
20083
|
};
|
|
20081
20084
|
var mobileSlideInAnimation = function (distanceFromTop) {
|
|
20082
20085
|
if (distanceFromTop === void 0) { distanceFromTop = '85px'; }
|
|
20083
|
-
return keyframes(templateObject_2$
|
|
20086
|
+
return keyframes(templateObject_2$w || (templateObject_2$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);
|
|
20084
20087
|
};
|
|
20085
|
-
var ToastContainer = newStyled.div(templateObject_3$
|
|
20086
|
-
var ToastContent = newStyled.div(templateObject_4$
|
|
20088
|
+
var ToastContainer = newStyled.div(templateObject_3$v || (templateObject_3$v = __makeTemplateObject(["\n width: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n z-index: 1000;\n"], ["\n width: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n z-index: 1000;\n"])));
|
|
20089
|
+
var ToastContent = newStyled.div(templateObject_4$r || (templateObject_4$r = __makeTemplateObject(["\n position: fixed;\n top: ", ";\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 12px;\n border-radius: 8px;\n background: #fff;\n box-shadow: 0 6px 24px -6px rgba(0, 0, 0, 0.2);\n width: 730px;\n animation: ", " 0.5s ease;\n\n @media (max-width: 768px) {\n width: calc(100vw - 32px);\n top: ", ";\n min-width: auto;\n animation: ", " 0.5s ease;\n }\n"], ["\n position: fixed;\n top: ", ";\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 12px;\n border-radius: 8px;\n background: #fff;\n box-shadow: 0 6px 24px -6px rgba(0, 0, 0, 0.2);\n width: 730px;\n animation: ", " 0.5s ease;\n\n @media (max-width: 768px) {\n width: calc(100vw - 32px);\n top: ", ";\n min-width: auto;\n animation: ", " 0.5s ease;\n }\n"])), function (_a) {
|
|
20087
20090
|
var distanceFromTop = _a.distanceFromTop;
|
|
20088
20091
|
return distanceFromTop || '124px';
|
|
20089
20092
|
}, function (_a) {
|
|
@@ -20101,7 +20104,7 @@ var ToastText = newStyled.p(templateObject_5$o || (templateObject_5$o = __makeTe
|
|
|
20101
20104
|
return (severity === 'error' ? '#C64844' : '#292929');
|
|
20102
20105
|
});
|
|
20103
20106
|
var CloseIcon = newStyled.div(templateObject_6$k || (templateObject_6$k = __makeTemplateObject(["\n margin-inline-start: auto;\n cursor: pointer;\n"], ["\n margin-inline-start: auto;\n cursor: pointer;\n"])));
|
|
20104
|
-
var templateObject_1$
|
|
20107
|
+
var templateObject_1$D, templateObject_2$w, templateObject_3$v, templateObject_4$r, templateObject_5$o, templateObject_6$k;
|
|
20105
20108
|
|
|
20106
20109
|
var Toast = React__default.forwardRef(function (_a, ref) {
|
|
20107
20110
|
var _b;
|
|
@@ -20123,9 +20126,9 @@ var Toast = React__default.forwardRef(function (_a, ref) {
|
|
|
20123
20126
|
});
|
|
20124
20127
|
Toast.displayName = 'Toast';
|
|
20125
20128
|
|
|
20126
|
-
var Wrapper$1 = newStyled.div(templateObject_1$
|
|
20127
|
-
var GrandTotal = newStyled.h1(templateObject_2$
|
|
20128
|
-
var Currency = newStyled.span(templateObject_3$
|
|
20129
|
+
var Wrapper$1 = newStyled.div(templateObject_1$C || (templateObject_1$C = __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"])));
|
|
20130
|
+
var GrandTotal = newStyled.h1(templateObject_2$v || (templateObject_2$v = __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; });
|
|
20131
|
+
var Currency = newStyled.span(templateObject_3$u || (templateObject_3$u = __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) {
|
|
20129
20132
|
var theme = _a.theme;
|
|
20130
20133
|
return theme.component.total.basicTotal.currency.color;
|
|
20131
20134
|
}, function (_a) {
|
|
@@ -20138,11 +20141,11 @@ var Currency = newStyled.span(templateObject_3$t || (templateObject_3$t = __make
|
|
|
20138
20141
|
var theme = _a.theme;
|
|
20139
20142
|
return theme.component.total.basicTotal.currency.alignSelf;
|
|
20140
20143
|
});
|
|
20141
|
-
var Container$
|
|
20144
|
+
var Container$s = newStyled.div(templateObject_4$q || (templateObject_4$q = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n width: 100%;\n margin-top: 0.625rem;\n color: ", ";\n align-items: center;\n"], ["\n display: flex;\n justify-content: space-between;\n width: 100%;\n margin-top: 0.625rem;\n color: ", ";\n align-items: center;\n"])), function (_a) {
|
|
20142
20145
|
var highlightColor = _a.highlightColor;
|
|
20143
20146
|
return highlightColor;
|
|
20144
20147
|
});
|
|
20145
|
-
var TotalContainer = newStyled(Container$
|
|
20148
|
+
var TotalContainer = newStyled(Container$s)(templateObject_5$n || (templateObject_5$n = __makeTemplateObject(["\n justify-content: ", ";\n margin-top: 0;\n"], ["\n justify-content: ", ";\n margin-top: 0;\n"])), function (_a) {
|
|
20146
20149
|
var showTotalLabel = _a.showTotalLabel;
|
|
20147
20150
|
return (showTotalLabel ? 'space-between' : 'flex-end');
|
|
20148
20151
|
});
|
|
@@ -20152,27 +20155,27 @@ var DiscountAmount = newStyled.h3(templateObject_7$i || (templateObject_7$i = __
|
|
|
20152
20155
|
return theme.component.total.basicTotal.savings.amountFontWeight;
|
|
20153
20156
|
});
|
|
20154
20157
|
var TotalLabel = newStyled(Text$7)(templateObject_8$e || (templateObject_8$e = __makeTemplateObject(["\n font-size: 20px;\n"], ["\n font-size: 20px;\n"])));
|
|
20155
|
-
var templateObject_1$
|
|
20158
|
+
var templateObject_1$C, templateObject_2$v, templateObject_3$u, templateObject_4$q, templateObject_5$n, templateObject_6$j, templateObject_7$i, templateObject_8$e;
|
|
20156
20159
|
|
|
20157
20160
|
var Total = function (_a) {
|
|
20158
20161
|
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;
|
|
20159
20162
|
var theme = useTheme();
|
|
20160
|
-
return (jsxs$1(Wrapper$1, __assign$1({ "data-testid": "total-wrapper" }, { children: [jsxs$1(TotalContainer, __assign$1({ showTotalLabel: showTotalLabel }, { children: [showTotalLabel && (jsx$1(TotalLabel, __assign$1({ variant: "heading6", size: "regular", weight: "bold" }, { children: "Total" }), void 0)), jsxs$1(GrandTotal, __assign$1({ color: theme.component.total.basicTotal.amount.color, "data-testid": "total-price" }, { children: [jsx$1(Currency, { children: currency }, void 0), total] }), void 0)] }), void 0), saving && (jsxs$1(Container$
|
|
20163
|
+
return (jsxs$1(Wrapper$1, __assign$1({ "data-testid": "total-wrapper" }, { children: [jsxs$1(TotalContainer, __assign$1({ showTotalLabel: showTotalLabel }, { children: [showTotalLabel && (jsx$1(TotalLabel, __assign$1({ variant: "heading6", size: "regular", weight: "bold" }, { children: "Total" }), void 0)), jsxs$1(GrandTotal, __assign$1({ color: theme.component.total.basicTotal.amount.color, "data-testid": "total-price" }, { children: [jsx$1(Currency, { children: currency }, void 0), total] }), void 0)] }), void 0), saving && (jsxs$1(Container$s, __assign$1({ "data-testid": "subtotal-container", highlightColor: highlightColor }, { children: [jsx$1(DiscountText, __assign$1({ "data-testid": "saving-title" }, { children: saving.savingText }), void 0), jsx$1(DiscountAmount, __assign$1({ "data-testid": "saving-price" }, { children: saving.amount }), void 0)] }), void 0))] }), void 0));
|
|
20161
20164
|
};
|
|
20162
20165
|
|
|
20163
|
-
var Wrapper = newStyled.div(templateObject_1$
|
|
20166
|
+
var Wrapper = newStyled.div(templateObject_1$B || (templateObject_1$B = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
20164
20167
|
var color = _a.color;
|
|
20165
20168
|
return color;
|
|
20166
20169
|
});
|
|
20167
|
-
var ItemContainer = newStyled.div(templateObject_2$
|
|
20168
|
-
var Item = newStyled.h4(templateObject_3$
|
|
20170
|
+
var ItemContainer = newStyled.div(templateObject_2$u || (templateObject_2$u = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n margin-bottom: 0.625rem;\n\n &:last-child {\n margin-bottom: 0;\n }\n"], ["\n display: flex;\n justify-content: space-between;\n margin-bottom: 0.625rem;\n\n &:last-child {\n margin-bottom: 0;\n }\n"])));
|
|
20171
|
+
var Item = newStyled.h4(templateObject_3$t || (templateObject_3$t = __makeTemplateObject(["\n margin: 0;\n font-size: 0.875rem;\n line-height: ", ";\n font-weight: ", ";\n"], ["\n margin: 0;\n font-size: 0.875rem;\n line-height: ", ";\n font-weight: ", ";\n"])), function (_a) {
|
|
20169
20172
|
var theme = _a.theme;
|
|
20170
20173
|
return theme.component.subTotal.basicSubTotal.lineHeight;
|
|
20171
20174
|
}, function (_a) {
|
|
20172
20175
|
var theme = _a.theme;
|
|
20173
20176
|
return theme.component.subTotal.basicSubTotal.weight;
|
|
20174
20177
|
});
|
|
20175
|
-
var CouponItem = newStyled(Item)(templateObject_4$
|
|
20178
|
+
var CouponItem = newStyled(Item)(templateObject_4$p || (templateObject_4$p = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
20176
20179
|
var color = _a.color;
|
|
20177
20180
|
return color;
|
|
20178
20181
|
});
|
|
@@ -20185,17 +20188,17 @@ var Subtotal = function (_a) {
|
|
|
20185
20188
|
return (jsxs$1(ItemContainer, { children: [jsxs$1(CouponItem, __assign$1({ color: highlightColor, "data-testid": "discount-title" }, { children: [coupon.couponText, " ", code, " ", coupon.appliedText] }), void 0), jsx$1(CouponItem, __assign$1({ color: highlightColor, "data-testid": "discount-price" }, { children: amount }), void 0)] }, code));
|
|
20186
20189
|
})] }), void 0));
|
|
20187
20190
|
};
|
|
20188
|
-
var templateObject_1$
|
|
20191
|
+
var templateObject_1$B, templateObject_2$u, templateObject_3$t, templateObject_4$p;
|
|
20189
20192
|
|
|
20190
20193
|
var Totals = {
|
|
20191
20194
|
Total: Total,
|
|
20192
20195
|
Subtotal: Subtotal,
|
|
20193
20196
|
};
|
|
20194
20197
|
|
|
20195
|
-
var Container$
|
|
20196
|
-
var CheckpointContainer$1 = newStyled.div(templateObject_2$
|
|
20197
|
-
var CheckpointDate$1 = newStyled.div(templateObject_3$
|
|
20198
|
-
var CheckpointDateLabel$1 = newStyled.p(templateObject_4$
|
|
20198
|
+
var Container$r = newStyled.div(templateObject_1$A || (templateObject_1$A = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
20199
|
+
var CheckpointContainer$1 = newStyled.div(templateObject_2$t || (templateObject_2$t = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
20200
|
+
var CheckpointDate$1 = newStyled.div(templateObject_3$s || (templateObject_3$s = __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; });
|
|
20201
|
+
var CheckpointDateLabel$1 = newStyled.p(templateObject_4$o || (templateObject_4$o = __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'); });
|
|
20199
20202
|
var CheckpointDateAndDayLabel = newStyled.span(templateObject_5$m || (templateObject_5$m = __makeTemplateObject(["\n font-size: 14px;\n weight: 400;\n color: #949494;\n text-align: start;\n margin-bottom: 42px;\n"], ["\n font-size: 14px;\n weight: 400;\n color: #949494;\n text-align: start;\n margin-bottom: 42px;\n"])));
|
|
20200
20203
|
var CheckpointStatus$1 = newStyled.p(templateObject_6$i || (templateObject_6$i = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n transform: translate(0, 22px);\n margin: 0;\n margin-left: 9px;\n color: ", ";\n font-weight: ", ";\n"], ["\n display: flex;\n flex-direction: column;\n transform: translate(0, 22px);\n margin: 0;\n margin-left: 9px;\n color: ", ";\n font-weight: ", ";\n"])), function (props) {
|
|
20201
20204
|
return props.finishedTrack
|
|
@@ -20233,7 +20236,7 @@ var TrackingProgressV2 = function (_a) {
|
|
|
20233
20236
|
}
|
|
20234
20237
|
return '30px';
|
|
20235
20238
|
};
|
|
20236
|
-
return (jsxs$1(Container$
|
|
20239
|
+
return (jsxs$1(Container$r, __assign$1({ "data-testid": "tracking-progress" }, { children: [checkPoints.map(function (_a, index) {
|
|
20237
20240
|
var day = _a.day, date = _a.date, statusMessage = _a.statusMessage;
|
|
20238
20241
|
return (jsxs$1(CheckpointContainer$1, __assign$1({ "data-testid": "checkpoint-track" }, { children: [jsx$1(CheckpointDate$1, __assign$1({ currentSpace: getCurrentSpace(index) }, { children: !resumedStyle && (jsxs$1(Fragment$2, { children: [jsx$1(CheckpointDateLabel$1, __assign$1({ lastElement: index + 1 === checkPoints.length }, { children: day }), void 0), jsx$1(CheckpointDateLabel$1, __assign$1({ lastElement: index + 1 === checkPoints.length }, { children: date }), void 0)] }, void 0)) }), void 0), index + 1 !== checkPoints.length && (jsx$1(ActiveCheckpointTrack$1, __assign$1({ trackColor: fillSpaces
|
|
20239
20242
|
? activeCheckpointColor
|
|
@@ -20244,12 +20247,12 @@ var TrackingProgressV2 = function (_a) {
|
|
|
20244
20247
|
return (jsxs$1(CheckpointContainer$1, __assign$1({ "data-testid": "empty-checkpoint-track" }, { children: [jsxs$1(CheckpointDate$1, __assign$1({ currentSpace: "90px" }, { children: [jsx$1(CheckpointDateLabel$1, { lastElement: index + 1 === emptySpaces.length }, void 0), jsx$1(CheckpointDateLabel$1, { lastElement: index + 1 === emptySpaces.length }, void 0)] }), void 0), index + 1 !== emptySpaces.length && (jsx$1(ActiveCheckpointTrack$1, __assign$1({ trackColor: theme.colors.shades['200'].color }, { children: jsx$1(ActiveCheckpointDot$1, { firstElement: false }, void 0) }), void 0)), index + 1 === emptySpaces.length && (jsx$1(LastActiveCheckpointDot, __assign$1({ trackColor: theme.colors.shades['200'].color }, { children: jsx$1(ActiveCheckpointDot$1, { firstElement: false }, void 0) }), void 0)), jsx$1(CheckpointStatus$1, __assign$1({ finishedTrack: false }, { children: statusMessage }), void 0)] }), index));
|
|
20245
20248
|
})] }), void 0));
|
|
20246
20249
|
};
|
|
20247
|
-
var templateObject_1$
|
|
20250
|
+
var templateObject_1$A, templateObject_2$t, templateObject_3$s, templateObject_4$o, templateObject_5$m, templateObject_6$i, templateObject_7$h, templateObject_8$d, templateObject_9$9, templateObject_10$7, templateObject_11$5;
|
|
20248
20251
|
|
|
20249
|
-
var Container$
|
|
20250
|
-
var CheckpointContainer = newStyled.div(templateObject_2$
|
|
20251
|
-
var CheckpointDate = newStyled.div(templateObject_3$
|
|
20252
|
-
var CheckpointDateLabel = newStyled.p(templateObject_4$
|
|
20252
|
+
var Container$q = newStyled.div(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
20253
|
+
var CheckpointContainer = newStyled.div(templateObject_2$s || (templateObject_2$s = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
20254
|
+
var CheckpointDate = newStyled.div(templateObject_3$r || (templateObject_3$r = __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; });
|
|
20255
|
+
var CheckpointDateLabel = newStyled.p(templateObject_4$n || (templateObject_4$n = __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'); });
|
|
20253
20256
|
var CheckpointStatus = newStyled.p(templateObject_5$l || (templateObject_5$l = __makeTemplateObject(["\n font-size: 14px;\n line-height: 22px;\n transform: translate(0, 22px);\n margin: 0;\n margin-left: 9px;\n color: ", ";\n font-weight: ", ";\n text-align: left;\n"], ["\n font-size: 14px;\n line-height: 22px;\n transform: translate(0, 22px);\n margin: 0;\n margin-left: 9px;\n color: ", ";\n font-weight: ", ";\n text-align: left;\n"])), function (props) { return (props.finishedTrack ? props.finishedTrackColor : ''); }, function (props) { return (props.finishedTrack ? '600' : '400'); });
|
|
20254
20257
|
var ActiveCheckpointTrack = newStyled.div(templateObject_6$h || (templateObject_6$h = __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) {
|
|
20255
20258
|
return props.firstElement ? '8px 8px 0 0' : props.lastElement ? '0 0 8px 8px' : '';
|
|
@@ -20275,7 +20278,7 @@ var TrackingProgress = function (_a) {
|
|
|
20275
20278
|
}
|
|
20276
20279
|
return '30px';
|
|
20277
20280
|
};
|
|
20278
|
-
return (jsxs$1(Container$
|
|
20281
|
+
return (jsxs$1(Container$q, __assign$1({ "data-testid": "tracking-progress" }, { children: [checkPoints.map(function (_a, index) {
|
|
20279
20282
|
var day = _a.day, date = _a.date, statusMessage = _a.statusMessage;
|
|
20280
20283
|
return (jsxs$1(CheckpointContainer, __assign$1({ "data-testid": "checkpoint-track" }, { children: [jsxs$1(CheckpointDate, __assign$1({ currentSpace: getCurrentSpace(index) }, { children: [jsx$1(CheckpointDateLabel, __assign$1({ lastElement: index + 1 === checkPoints.length }, { children: day }), void 0), jsx$1(CheckpointDateLabel, __assign$1({ lastElement: index + 1 === checkPoints.length }, { children: date }), void 0)] }), void 0), index + 1 !== checkPoints.length && (jsx$1(ActiveCheckpointTrack, __assign$1({ trackColor: fillSpaces
|
|
20281
20284
|
? theme.colors.semantic.informative.color
|
|
@@ -20284,19 +20287,19 @@ var TrackingProgress = function (_a) {
|
|
|
20284
20287
|
return (jsxs$1(CheckpointContainer, __assign$1({ "data-testid": "empty-checkpoint-track" }, { children: [jsxs$1(CheckpointDate, __assign$1({ currentSpace: getCurrentSpace(index) }, { children: [jsx$1(CheckpointDateLabel, { lastElement: index + 1 === emptySpaces.length }, void 0), jsx$1(CheckpointDateLabel, { lastElement: index + 1 === emptySpaces.length }, void 0)] }), void 0), index + 1 !== emptySpaces.length && (jsx$1(ActiveCheckpointTrack, { trackColor: theme.colors.shades['200'].color, firstElement: false, lastElement: index + 2 === emptySpaces.length }, void 0)), jsx$1(CheckpointStatus, { finishedTrack: false }, void 0)] }), index));
|
|
20285
20288
|
})] }), void 0));
|
|
20286
20289
|
};
|
|
20287
|
-
var templateObject_1$
|
|
20290
|
+
var templateObject_1$z, templateObject_2$s, templateObject_3$r, templateObject_4$n, templateObject_5$l, templateObject_6$h, templateObject_7$g, templateObject_8$c;
|
|
20288
20291
|
|
|
20289
|
-
var AutoShipCardContainerWrapper$1 = newStyled.div(templateObject_1$
|
|
20292
|
+
var AutoShipCardContainerWrapper$1 = newStyled.div(templateObject_1$y || (templateObject_1$y = __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) {
|
|
20290
20293
|
var checked = _a.checked;
|
|
20291
20294
|
return (checked ? 'none' : '1px solid #e5e5e5;');
|
|
20292
20295
|
});
|
|
20293
|
-
var AutoShipHeaderBarWrapper$1 = newStyled.div(templateObject_2$
|
|
20294
|
-
var AutoShipBodyWrapper$1 = newStyled.div(templateObject_3$
|
|
20295
|
-
var AutoShipBodyTitle$1 = newStyled.div(templateObject_4$
|
|
20296
|
+
var AutoShipHeaderBarWrapper$1 = newStyled.div(templateObject_2$r || (templateObject_2$r = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n gap: 10px;\n align-items: center;\n"], ["\n display: flex;\n flex-direction: row;\n gap: 10px;\n align-items: center;\n"])));
|
|
20297
|
+
var AutoShipBodyWrapper$1 = newStyled.div(templateObject_3$q || (templateObject_3$q = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n border-radius: 8px;\n background-color: #f7f7f7;\n"], ["\n display: flex;\n flex-direction: column;\n border-radius: 8px;\n background-color: #f7f7f7;\n"])));
|
|
20298
|
+
var AutoShipBodyTitle$1 = newStyled.div(templateObject_4$m || (templateObject_4$m = __makeTemplateObject(["\n font-size: 14px;\n font-weight: 600;\n line-height: 22px;\n text-align: left;\n width: Fill (311px) px;\n height: Hug (34px) px;\n padding: 6px 10px 6px 10px;\n gap: 4px;\n opacity: 0px;\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n"], ["\n font-size: 14px;\n font-weight: 600;\n line-height: 22px;\n text-align: left;\n width: Fill (311px) px;\n height: Hug (34px) px;\n padding: 6px 10px 6px 10px;\n gap: 4px;\n opacity: 0px;\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n"])));
|
|
20296
20299
|
var AutoShipBodyListItem$1 = newStyled.div(templateObject_5$k || (templateObject_5$k = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n gap: 10px;\n"], ["\n display: flex;\n flex-direction: row;\n gap: 10px;\n"])));
|
|
20297
20300
|
var AutoShipBodyListWrapper$1 = newStyled.div(templateObject_6$g || (templateObject_6$g = __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"])));
|
|
20298
20301
|
var CheckboxInput = newStyled.input(templateObject_7$f || (templateObject_7$f = __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"])));
|
|
20299
|
-
var templateObject_1$
|
|
20302
|
+
var templateObject_1$y, templateObject_2$r, templateObject_3$q, templateObject_4$m, templateObject_5$k, templateObject_6$g, templateObject_7$f;
|
|
20300
20303
|
|
|
20301
20304
|
function AutoshipOfferCard(_a) {
|
|
20302
20305
|
var showMore = _a.showMore, copyList = _a.copyList, copy = _a.copy, handleCheckBoxChange = _a.handleCheckBoxChange, _b = _a.isChecked, isChecked = _b === void 0 ? false : _b;
|
|
@@ -20320,18 +20323,18 @@ function AutoshipOfferCard(_a) {
|
|
|
20320
20323
|
return (jsxs$1(AutoShipCardContainerWrapper$1, __assign$1({ checked: check }, { children: [jsxs$1(AutoShipHeaderBarWrapper$1, { children: [jsx$1("div", { children: jsx$1(CheckboxInput, { type: "checkbox", onChange: handleCheckBox, checked: check, "data-testid": "autoshipcheckbox" }, void 0) }, void 0), jsx$1("div", { children: renderCopy(copy) }, void 0)] }, void 0), !check && (jsxs$1(AutoShipBodyWrapper$1, { children: [jsxs$1(AutoShipBodyTitle$1, __assign$1({ onClick: handleShowMore }, { children: [jsx$1("span", { children: showMoreBenefits ? renderCopy(showMore.openedCopy) : renderCopy(showMore.closedCopy) }, void 0), jsx$1(Icon$1, { name: showMoreBenefits ? 'arrows/chevron_up' : 'arrows/chevron_down' }, showMoreBenefits ? 'icon-up' : 'icon-down')] }), void 0), showMoreBenefits && (jsx$1(AutoShipBodyListWrapper$1, { children: copyList.map(function (item) { return (jsxs$1(AutoShipBodyListItem$1, { children: [jsx$1(Icon$1, { name: item.icon, fill: "#D4605B", width: "19px", height: "19px" }, void 0), renderCopy(item.copy)] }, item.icon)); }) }, void 0))] }, void 0))] }), void 0));
|
|
20321
20324
|
}
|
|
20322
20325
|
|
|
20323
|
-
var AutoShipCardContainerWrapper = newStyled.div(templateObject_1$
|
|
20326
|
+
var AutoShipCardContainerWrapper = newStyled.div(templateObject_1$x || (templateObject_1$x = __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) {
|
|
20324
20327
|
var checked = _a.checked;
|
|
20325
20328
|
return (checked ? 'none' : '1px solid #e5e5e5;');
|
|
20326
20329
|
});
|
|
20327
|
-
var AutoShipHeaderBarWrapper = newStyled.div(templateObject_2$
|
|
20328
|
-
var AutoShipBodyWrapper = newStyled.div(templateObject_3$
|
|
20329
|
-
var AutoShipBodyTitle = newStyled.div(templateObject_4$
|
|
20330
|
+
var AutoShipHeaderBarWrapper = newStyled.div(templateObject_2$q || (templateObject_2$q = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n gap: 10px;\n align-items: center;\n justify-content: space-between;\n"], ["\n display: flex;\n flex-direction: row;\n gap: 10px;\n align-items: center;\n justify-content: space-between;\n"])));
|
|
20331
|
+
var AutoShipBodyWrapper = newStyled.div(templateObject_3$p || (templateObject_3$p = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n border-radius: 8px;\n background-color: #f7f7f7;\n"], ["\n display: flex;\n flex-direction: column;\n border-radius: 8px;\n background-color: #f7f7f7;\n"])));
|
|
20332
|
+
var AutoShipBodyTitle = newStyled.div(templateObject_4$l || (templateObject_4$l = __makeTemplateObject(["\n font-size: 14px;\n font-weight: 600;\n line-height: 22px;\n text-align: left;\n width: Fill (311px) px;\n height: Hug (34px) px;\n padding: 6px 10px 6px 10px;\n gap: 4px;\n opacity: 0px;\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n"], ["\n font-size: 14px;\n font-weight: 600;\n line-height: 22px;\n text-align: left;\n width: Fill (311px) px;\n height: Hug (34px) px;\n padding: 6px 10px 6px 10px;\n gap: 4px;\n opacity: 0px;\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n"])));
|
|
20330
20333
|
var AutoShipBodyListItem = newStyled.div(templateObject_5$j || (templateObject_5$j = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n gap: 10px;\n"], ["\n display: flex;\n flex-direction: row;\n gap: 10px;\n"])));
|
|
20331
20334
|
var AutoShipBodyListWrapper = newStyled.div(templateObject_6$f || (templateObject_6$f = __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"])));
|
|
20332
20335
|
newStyled.input(templateObject_7$e || (templateObject_7$e = __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"])));
|
|
20333
20336
|
var ButtonRemoveWrapper = newStyled.div(templateObject_8$b || (templateObject_8$b = __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"])));
|
|
20334
|
-
var templateObject_1$
|
|
20337
|
+
var templateObject_1$x, templateObject_2$q, templateObject_3$p, templateObject_4$l, templateObject_5$j, templateObject_6$f, templateObject_7$e, templateObject_8$b;
|
|
20335
20338
|
|
|
20336
20339
|
function AutoshipOfferCardCta(_a) {
|
|
20337
20340
|
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;
|
|
@@ -20349,18 +20352,18 @@ function AutoshipOfferCardCta(_a) {
|
|
|
20349
20352
|
return (jsxs$1(AutoShipCardContainerWrapper, __assign$1({ checked: check }, { children: [jsxs$1(AutoShipHeaderBarWrapper, { children: [jsx$1("div", { children: copy }, void 0), check && (jsx$1(ButtonRemoveWrapper, __assign$1({ tabIndex: 0, role: "button", onKeyDown: handleCheckBox, onClick: handleCheckBox }, { children: "Remove" }), void 0))] }, void 0), !check && (jsxs$1(Fragment$2, { children: [jsxs$1(AutoShipBodyWrapper, { children: [(showMore === null || showMore === void 0 ? void 0 : showMore.openedCopy) && (showMore === null || showMore === void 0 ? void 0 : showMore.closedCopy) && (jsxs$1(AutoShipBodyTitle, __assign$1({ onClick: handleShowMore }, { children: [jsx$1("span", { children: showMoreBenefits ? showMore.openedCopy : showMore.closedCopy }, void 0), jsx$1(Icon$1, { name: showMoreBenefits ? 'arrows/chevron_up' : 'arrows/chevron_down' }, showMoreBenefits ? 'icon-up' : 'icon-down')] }), void 0)), showMoreBenefits && (jsx$1(AutoShipBodyListWrapper, { children: copyList.map(function (item) { return (jsxs$1(AutoShipBodyListItem, { children: [jsx$1(Icon$1, { name: item.icon, fill: "#D4605B", width: "19px", height: "19px" }, void 0), item.copy] }, item.icon)); }) }, void 0))] }, void 0), jsx$1("div", { children: jsx$1(ButtonSecondary, { onClick: handleCheckBox, text: buttonCopy, wide: true }, void 0) }, void 0)] }, void 0))] }), void 0));
|
|
20350
20353
|
}
|
|
20351
20354
|
|
|
20352
|
-
var ContainerBase$3 = newStyled.div(templateObject_1$
|
|
20353
|
-
var SubscriptionContainer$3 = newStyled(ContainerBase$3)(templateObject_2$
|
|
20354
|
-
var SubscriptionHeader$3 = newStyled.div(templateObject_3$
|
|
20355
|
-
newStyled.div(templateObject_4$
|
|
20355
|
+
var ContainerBase$3 = newStyled.div(templateObject_1$w || (templateObject_1$w = __makeTemplateObject(["\n border-radius: 8px;\n border-color: #e5e5e5;\n border-width: 1px;\n border-style: solid;\n border-radius: 8px;\n background-color: rgba(255, 243, 227, 0.3);\n"], ["\n border-radius: 8px;\n border-color: #e5e5e5;\n border-width: 1px;\n border-style: solid;\n border-radius: 8px;\n background-color: rgba(255, 243, 227, 0.3);\n"])));
|
|
20356
|
+
var SubscriptionContainer$3 = newStyled(ContainerBase$3)(templateObject_2$p || (templateObject_2$p = __makeTemplateObject(["\n padding: 16px;\n margin-bottom: 8px;\n position: relative;\n background-color: #fff3e34d;\n"], ["\n padding: 16px;\n margin-bottom: 8px;\n position: relative;\n background-color: #fff3e34d;\n"])));
|
|
20357
|
+
var SubscriptionHeader$3 = newStyled.div(templateObject_3$o || (templateObject_3$o = __makeTemplateObject(["\n display: flex;\n padding-bottom: 10px;\n margin-bottom: 8px;\n cursor: pointer;\n flex-direction: column;\n gap: 8px;\n"], ["\n display: flex;\n padding-bottom: 10px;\n margin-bottom: 8px;\n cursor: pointer;\n flex-direction: column;\n gap: 8px;\n"])));
|
|
20358
|
+
newStyled.div(templateObject_4$k || (templateObject_4$k = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
20356
20359
|
newStyled.div(templateObject_5$i || (templateObject_5$i = __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"])));
|
|
20357
20360
|
newStyled(Text$7)(templateObject_6$e || (templateObject_6$e = __makeTemplateObject(["\n line-height: 20px;\n margin-left: 9px;\n"], ["\n line-height: 20px;\n margin-left: 9px;\n"])));
|
|
20358
|
-
var Container$
|
|
20359
|
-
var Benefits$
|
|
20361
|
+
var Container$p = newStyled.div(templateObject_7$d || (templateObject_7$d = __makeTemplateObject(["\n margin-top: 20px;\n"], ["\n margin-top: 20px;\n"])));
|
|
20362
|
+
var Benefits$2 = newStyled.div(templateObject_8$a || (templateObject_8$a = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n justify-content: space-around;\n gap: 8px;\n height: ", ";\n border-radius: 8px;\n"], ["\n display: flex;\n flex-direction: column;\n justify-content: space-around;\n gap: 8px;\n height: ", ";\n border-radius: 8px;\n"])), function (_a) {
|
|
20360
20363
|
var height = _a.height;
|
|
20361
20364
|
return height !== null && height !== void 0 ? height : '100%';
|
|
20362
20365
|
});
|
|
20363
|
-
var templateObject_1$
|
|
20366
|
+
var templateObject_1$w, templateObject_2$p, templateObject_3$o, templateObject_4$k, templateObject_5$i, templateObject_6$e, templateObject_7$d, templateObject_8$a;
|
|
20364
20367
|
|
|
20365
20368
|
var renderCopy = function (copy) {
|
|
20366
20369
|
if (typeof copy === 'string') {
|
|
@@ -20371,9 +20374,9 @@ var renderCopy = function (copy) {
|
|
|
20371
20374
|
var AutoshipPdpCard = function (_a) {
|
|
20372
20375
|
var _b, _c;
|
|
20373
20376
|
var handleWithoutSavings = _a.handleWithoutSavings, handleSavings = _a.handleSavings, title = _a.title, ctaText = _a.ctaText, ctaTextNoSavings = _a.ctaTextNoSavings, className = _a.className, benefits = _a.benefits, bottomCopy = _a.bottomCopy;
|
|
20374
|
-
return (jsxs$1(Container$
|
|
20377
|
+
return (jsxs$1(Container$p, __assign$1({ className: className }, { children: [jsxs$1(SubscriptionContainer$3, __assign$1({ "data-testid": "subscription-container" }, { children: [jsxs$1(SubscriptionHeader$3, { children: [jsx$1(Text$7, { variant: "label", dangerouslySetInnerHTML: { __html: title !== null && title !== void 0 ? title : '' } }, void 0), jsx$1(ButtonPrimary, { wide: true, text: (_b = renderCopy(ctaText)) !== null && _b !== void 0 ? _b : 'Yes, I want this offer', size: ComponentSize.Small, onClick: function () {
|
|
20375
20378
|
handleSavings();
|
|
20376
|
-
} }, void 0)] }, void 0), jsxs$1(Benefits$
|
|
20379
|
+
} }, void 0)] }, void 0), jsxs$1(Benefits$2, __assign$1({ "data-testid": "benefits-component" }, { children: [jsx$1(OfferAtCartBenefits, { benefits: benefits }, void 0), bottomCopy && jsx$1(Text$7, { variant: "label", dangerouslySetInnerHTML: { __html: bottomCopy } }, void 0)] }), void 0)] }), void 0), jsx$1(ButtonSecondary, { wide: true, text: (_c = renderCopy(ctaTextNoSavings)) !== null && _c !== void 0 ? _c : 'Continue without more savings - ', size: ComponentSize.Small, onClick: function () {
|
|
20377
20380
|
handleWithoutSavings();
|
|
20378
20381
|
} }, void 0)] }), void 0));
|
|
20379
20382
|
};
|
|
@@ -20400,15 +20403,15 @@ var StyledPanel = newStyled(Ye.Panel)({
|
|
|
20400
20403
|
justifyContent: 'center',
|
|
20401
20404
|
gap: '10px',
|
|
20402
20405
|
});
|
|
20403
|
-
var StyledContent = newStyled.div(templateObject_1$
|
|
20406
|
+
var StyledContent = newStyled.div(templateObject_1$v || (templateObject_1$v = __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) {
|
|
20404
20407
|
var bgColor = _a.bgColor;
|
|
20405
20408
|
return bgColor !== null && bgColor !== void 0 ? bgColor : '';
|
|
20406
20409
|
}, function (_a) {
|
|
20407
20410
|
var _b = _a.width, width = _b === void 0 ? '100%' : _b;
|
|
20408
20411
|
return width;
|
|
20409
20412
|
});
|
|
20410
|
-
var StyledController = newStyled.div(templateObject_2$
|
|
20411
|
-
var templateObject_1$
|
|
20413
|
+
var StyledController = newStyled.div(templateObject_2$o || (templateObject_2$o = __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"])));
|
|
20414
|
+
var templateObject_1$v, templateObject_2$o;
|
|
20412
20415
|
|
|
20413
20416
|
var StyledDisclosure = newStyled(Ye)(function (_a) {
|
|
20414
20417
|
var background = _a.background, width = _a.width;
|
|
@@ -20449,14 +20452,14 @@ var BasicAccordion = function (_a) {
|
|
|
20449
20452
|
} }), void 0));
|
|
20450
20453
|
};
|
|
20451
20454
|
|
|
20452
|
-
var ContainerWrapper$2 = newStyled.div(templateObject_1$
|
|
20453
|
-
var ImageWrapper = newStyled.div(templateObject_2$
|
|
20454
|
-
var ImageComponent = newStyled(Image$3)(templateObject_3$
|
|
20455
|
-
var RightComponentWrapper = newStyled.div(templateObject_4$
|
|
20456
|
-
var TitleWrapper$
|
|
20455
|
+
var ContainerWrapper$2 = newStyled.div(templateObject_1$u || (templateObject_1$u = __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"])));
|
|
20456
|
+
var ImageWrapper = newStyled.div(templateObject_2$n || (templateObject_2$n = __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"])));
|
|
20457
|
+
var ImageComponent = newStyled(Image$3)(templateObject_3$n || (templateObject_3$n = __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"])));
|
|
20458
|
+
var RightComponentWrapper = newStyled.div(templateObject_4$j || (templateObject_4$j = __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"])));
|
|
20459
|
+
var TitleWrapper$2 = newStyled.div(templateObject_5$h || (templateObject_5$h = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n"], ["\n display: flex;\n flex-direction: row;\n"])));
|
|
20457
20460
|
var SubTitleWrapper = newStyled.div(templateObject_6$d || (templateObject_6$d = __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"])));
|
|
20458
20461
|
var ButtonsWrapper = newStyled.div(templateObject_7$c || (templateObject_7$c = __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"])));
|
|
20459
|
-
var templateObject_1$
|
|
20462
|
+
var templateObject_1$u, templateObject_2$n, templateObject_3$n, templateObject_4$j, templateObject_5$h, templateObject_6$d, templateObject_7$c;
|
|
20460
20463
|
|
|
20461
20464
|
function CartItemCard(_a) {
|
|
20462
20465
|
var style = _a.style, className = _a.className, children = _a.children;
|
|
@@ -20472,7 +20475,7 @@ var BodyContent = function (_a) {
|
|
|
20472
20475
|
};
|
|
20473
20476
|
var TitleContent = function (_a) {
|
|
20474
20477
|
var children = _a.children, className = _a.className, style = _a.style;
|
|
20475
|
-
return (jsx$1(TitleWrapper$
|
|
20478
|
+
return (jsx$1(TitleWrapper$2, __assign$1({ style: style, className: className }, { children: children }), void 0));
|
|
20476
20479
|
};
|
|
20477
20480
|
var SubTitleContent = function (_a) {
|
|
20478
20481
|
var children = _a.children, className = _a.className, style = _a.style;
|
|
@@ -20502,9 +20505,9 @@ var Shades200Color$1 = '#bbbbbb';
|
|
|
20502
20505
|
var Shades700Color$1 = '#292929';
|
|
20503
20506
|
var PrimaryColor$1 = '#f7a08b';
|
|
20504
20507
|
var ClubBorderColor$1 = '#882a2b';
|
|
20505
|
-
var FlexContainer$2 = newStyled.div(templateObject_1$
|
|
20506
|
-
var DiscountTag$2 = newStyled.div(templateObject_2$
|
|
20507
|
-
var ContainerBase$2 = newStyled.div(templateObject_3$
|
|
20508
|
+
var FlexContainer$2 = newStyled.div(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
20509
|
+
var DiscountTag$2 = newStyled.div(templateObject_2$m || (templateObject_2$m = __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$1);
|
|
20510
|
+
var ContainerBase$2 = newStyled.div(templateObject_3$m || (templateObject_3$m = __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) {
|
|
20508
20511
|
var selected = _a.selected;
|
|
20509
20512
|
return selected ? "1.5px solid ".concat(ClubBorderColor$1) : "1px solid ".concat(Shades200Color$1);
|
|
20510
20513
|
}, function (_a) {
|
|
@@ -20513,7 +20516,7 @@ var ContainerBase$2 = newStyled.div(templateObject_3$l || (templateObject_3$l =
|
|
|
20513
20516
|
? "& label {\n font-weight: 700;\n }"
|
|
20514
20517
|
: '';
|
|
20515
20518
|
}, PrimaryColor$1);
|
|
20516
|
-
var SinglePurchaseContainer$2 = newStyled(ContainerBase$2)(templateObject_4$
|
|
20519
|
+
var SinglePurchaseContainer$2 = newStyled(ContainerBase$2)(templateObject_4$i || (templateObject_4$i = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n padding: 16px;\n border-color: ", ";\n ", "\n"], ["\n display: flex;\n justify-content: space-between;\n padding: 16px;\n border-color: ", ";\n ", "\n"])), function (_a) {
|
|
20517
20520
|
var isNoMember = _a.isNoMember, selected = _a.selected;
|
|
20518
20521
|
return (isNoMember && selected ? Shades700Color$1 : '');
|
|
20519
20522
|
}, function (_a) {
|
|
@@ -20544,8 +20547,8 @@ var StyledPrice$2 = newStyled(PriceLabelV2$1)(templateObject_10$6 || (templateOb
|
|
|
20544
20547
|
? ClubBorderColor$1
|
|
20545
20548
|
: Shades200Color$1;
|
|
20546
20549
|
});
|
|
20547
|
-
var Container$
|
|
20548
|
-
var templateObject_1$
|
|
20550
|
+
var Container$o = newStyled.div(templateObject_11$4 || (templateObject_11$4 = __makeTemplateObject(["\n margin-top: 20px;\n"], ["\n margin-top: 20px;\n"])));
|
|
20551
|
+
var templateObject_1$t, templateObject_2$m, templateObject_3$m, templateObject_4$i, templateObject_5$g, templateObject_6$c, templateObject_7$b, templateObject_8$9, templateObject_9$8, templateObject_10$6, templateObject_11$4;
|
|
20549
20552
|
|
|
20550
20553
|
var ClubOfferSelector = function (_a) {
|
|
20551
20554
|
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;
|
|
@@ -20584,7 +20587,7 @@ var ClubOfferSelector = function (_a) {
|
|
|
20584
20587
|
onChange(__assign$1({}, dataObj));
|
|
20585
20588
|
};
|
|
20586
20589
|
var isSelected = radioIds$1.clubOfferSelector.id === radioCheck.id;
|
|
20587
|
-
return (jsxs$1(Container$
|
|
20590
|
+
return (jsxs$1(Container$o, __assign$1({ className: className }, { children: [jsxs$1(SubscriptionContainer$2, __assign$1({ onClick: function () { return handleChange(radioIds$1.clubOfferSelector, 'radio'); }, "data-testid": "subscription-purchase-block", selected: isSelected }, { children: [jsx$1(DiscountTag$2, __assign$1({ isSelected: isSelected }, { children: discountLabel !== null && discountLabel !== void 0 ? discountLabel : "".concat(clubOfferPctOverListPriceRounded, "% OFF - SAVE ").concat(currencySymbol).concat(clubOfferSaving.toFixed(2)) }), void 0), jsxs$1(SubscriptionHeader$2, __assign$1({ isSelected: isSelected }, { children: [jsx$1(FlexContainer$2, { children: jsx$1(RadioInput, { label: subscriptionLabel, name: radioIds$1.clubOfferSelector.id, id: radioIds$1.clubOfferSelector.id, value: radioIds$1.clubOfferSelector.id, checked: isSelected, size: ComponentSize.Medium, style: {
|
|
20588
20591
|
marginRight: '10px',
|
|
20589
20592
|
}, labelStyle: {
|
|
20590
20593
|
color: ClubBorderColor$1,
|
|
@@ -20605,9 +20608,9 @@ var Shades200Color = '#bbbbbb';
|
|
|
20605
20608
|
var Shades700Color = '#292929';
|
|
20606
20609
|
var PrimaryColor = '#f7a08b';
|
|
20607
20610
|
var ClubBorderColor = '#882a2b';
|
|
20608
|
-
var FlexContainer$1 = newStyled.div(templateObject_1$
|
|
20609
|
-
var DiscountTag$1 = newStyled.div(templateObject_2$
|
|
20610
|
-
var ContainerBase$1 = newStyled.div(templateObject_3$
|
|
20611
|
+
var FlexContainer$1 = newStyled.div(templateObject_1$s || (templateObject_1$s = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
20612
|
+
var DiscountTag$1 = newStyled.div(templateObject_2$l || (templateObject_2$l = __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);
|
|
20613
|
+
var ContainerBase$1 = newStyled.div(templateObject_3$l || (templateObject_3$l = __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) {
|
|
20611
20614
|
var selected = _a.selected;
|
|
20612
20615
|
return selected ? "1.5px solid ".concat(ClubBorderColor) : "1px solid ".concat(Shades200Color);
|
|
20613
20616
|
}, function (_a) {
|
|
@@ -20616,7 +20619,7 @@ var ContainerBase$1 = newStyled.div(templateObject_3$k || (templateObject_3$k =
|
|
|
20616
20619
|
? "& label {\n font-weight: 700;\n }"
|
|
20617
20620
|
: '';
|
|
20618
20621
|
}, PrimaryColor);
|
|
20619
|
-
var SinglePurchaseContainer$1 = newStyled(ContainerBase$1)(templateObject_4$
|
|
20622
|
+
var SinglePurchaseContainer$1 = newStyled(ContainerBase$1)(templateObject_4$h || (templateObject_4$h = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n padding: 16px;\n border-color: ", ";\n ", "\n"], ["\n display: flex;\n justify-content: space-between;\n padding: 16px;\n border-color: ", ";\n ", "\n"])), function (_a) {
|
|
20620
20623
|
var isNoMember = _a.isNoMember, selected = _a.selected;
|
|
20621
20624
|
return (isNoMember && selected ? Shades700Color : '');
|
|
20622
20625
|
}, function (_a) {
|
|
@@ -20647,9 +20650,9 @@ var StyledPrice$1 = newStyled(PriceLabelV2$1)(templateObject_10$5 || (templateOb
|
|
|
20647
20650
|
? ClubBorderColor
|
|
20648
20651
|
: Shades200Color;
|
|
20649
20652
|
});
|
|
20650
|
-
var Container$
|
|
20653
|
+
var Container$n = newStyled.div(templateObject_11$3 || (templateObject_11$3 = __makeTemplateObject(["\n margin-top: 20px;\n"], ["\n margin-top: 20px;\n"])));
|
|
20651
20654
|
var TermsText = newStyled(Text$7)(templateObject_12$2 || (templateObject_12$2 = __makeTemplateObject(["\n font-size: 10px;\n line-height: 10px;\n margin-bottom: 8px;\n\n a {\n color: #292929;\n text-decoration: underline;\n }\n"], ["\n font-size: 10px;\n line-height: 10px;\n margin-bottom: 8px;\n\n a {\n color: #292929;\n text-decoration: underline;\n }\n"])));
|
|
20652
|
-
var templateObject_1$
|
|
20655
|
+
var templateObject_1$s, templateObject_2$l, templateObject_3$l, templateObject_4$h, templateObject_5$f, templateObject_6$b, templateObject_7$a, templateObject_8$8, templateObject_9$7, templateObject_10$5, templateObject_11$3, templateObject_12$2;
|
|
20653
20656
|
|
|
20654
20657
|
var ClubOfferSelector2 = function (_a) {
|
|
20655
20658
|
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, termsTextLink = _a.termsTextLink;
|
|
@@ -20688,32 +20691,32 @@ var ClubOfferSelector2 = function (_a) {
|
|
|
20688
20691
|
onChange(__assign$1({}, dataObj));
|
|
20689
20692
|
};
|
|
20690
20693
|
var isSelected = radioIds.clubOfferSelector2.id === radioCheck.id;
|
|
20691
|
-
return (jsxs$1(Container$
|
|
20694
|
+
return (jsxs$1(Container$n, __assign$1({ className: className }, { children: [jsxs$1(SubscriptionContainer$1, __assign$1({ onClick: function () { return handleChange(radioIds.clubOfferSelector2, 'radio'); }, "data-testid": "subscription-purchase-block", selected: isSelected }, { children: [jsx$1(DiscountTag$1, __assign$1({ isSelected: isSelected }, { children: discountLabel !== null && discountLabel !== void 0 ? discountLabel : "".concat(clubOfferPctOverListPriceRounded, "% OFF - SAVE ").concat(currencySymbol).concat(clubOfferSaving.toFixed(2)) }), void 0), jsxs$1(SubscriptionHeader$1, __assign$1({ isSelected: isSelected }, { children: [jsx$1(FlexContainer$1, { children: jsx$1(RadioInput, { label: subscriptionLabel, name: radioIds.clubOfferSelector2.id, id: radioIds.clubOfferSelector2.id, value: radioIds.clubOfferSelector2.id, checked: isSelected, size: ComponentSize.Medium, style: {
|
|
20692
20695
|
marginRight: '10px',
|
|
20693
20696
|
}, labelStyle: {
|
|
20694
20697
|
color: ClubBorderColor,
|
|
20695
20698
|
}, useV2Style: true, onChange: function () { }, disabled: disabledInputs && disabledInputs.includes(radioIds.clubOfferSelector2.id) }, void 0) }, void 0), jsx$1(StyledPrice$1, { testId: "subscription", finalPrice: "".concat(currencySymbol).concat(decimalFormat(Number(clubOfferFinalPrice))), selected: isSelected, size: ComponentSize.Large, originalPrice: "".concat(currencySymbol).concat(decimalFormat(Number(listPrice))) }, void 0)] }), void 0), isSelected && (jsx$1(BenefitsContainer$1, { children: jsx$1(BenefitText, { variant: "body", dangerouslySetInnerHTML: { __html: updatedClubOfferBenefits[0] } }, void 0) }, void 0))] }), void 0), isSelected && (jsxs$1(TermsText, __assign$1({ variant: "body" }, { children: [updatedClubOfferBenefits[1], jsxs$1("span", { children: ["Terms ", jsx$1("a", __assign$1({ href: termsTextLink }, { children: "here" }), void 0), "."] }, void 0)] }), void 0)), jsxs$1(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: [jsx$1(RadioInput, { label: singlePurchaseLabel, name: radioIds.oneTime.id, id: radioIds.oneTime.id, value: radioIds.oneTime.id, checked: radioIds.oneTime.id === radioCheck.id, size: ComponentSize.Medium, onChange: function () { }, useV2Style: true, disabled: disabledInputs && disabledInputs.includes(radioIds.oneTime.id) }, void 0), jsx$1(StyledPrice$1, { isNoMember: true, testId: "single-purchase", finalPrice: "".concat(currencySymbol).concat(decimalFormat(Number(discountedPrice))), selected: radioIds.oneTime.id === radioCheck.id, size: ComponentSize.Large, originalPrice: "".concat(currencySymbol).concat(decimalFormat(Number(listPrice))) }, void 0)] }), void 0)] }), void 0));
|
|
20696
20699
|
};
|
|
20697
20700
|
|
|
20698
|
-
var ContainerWrapper$1 = newStyled.div(templateObject_1$
|
|
20701
|
+
var ContainerWrapper$1 = newStyled.div(templateObject_1$r || (templateObject_1$r = __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) {
|
|
20699
20702
|
var $checked = _a.$checked;
|
|
20700
20703
|
return ($checked ? '#FFF3E3' : '#FAFAFA');
|
|
20701
20704
|
}, function (_a) {
|
|
20702
20705
|
var $checked = _a.$checked;
|
|
20703
20706
|
return ($checked ? '#FFE1B8' : '#E5E5E5');
|
|
20704
20707
|
});
|
|
20705
|
-
var CardHeaderWrapper = newStyled.div(templateObject_2$
|
|
20706
|
-
var CardBody = newStyled.div(templateObject_3$
|
|
20707
|
-
var ClubCopyWrapper = newStyled.div(templateObject_4$
|
|
20708
|
+
var CardHeaderWrapper = newStyled.div(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n"], ["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n"])));
|
|
20709
|
+
var CardBody = newStyled.div(templateObject_3$k || (templateObject_3$k = __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"])));
|
|
20710
|
+
var ClubCopyWrapper = newStyled.div(templateObject_4$g || (templateObject_4$g = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n gap: 5px;\n"], ["\n display: flex;\n flex-direction: row;\n gap: 5px;\n"])));
|
|
20708
20711
|
var ClubCopyTextWrapper = newStyled.div(templateObject_5$e || (templateObject_5$e = __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"])));
|
|
20709
|
-
var templateObject_1$
|
|
20712
|
+
var templateObject_1$r, templateObject_2$k, templateObject_3$k, templateObject_4$g, templateObject_5$e;
|
|
20710
20713
|
|
|
20711
20714
|
function Card(_a) {
|
|
20712
20715
|
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;
|
|
20713
20716
|
return (jsxs$1(ContainerWrapper$1, __assign$1({ "$checked": isChecked, style: style }, { children: [jsxs$1(CardHeaderWrapper, { children: [jsxs$1(ClubCopyWrapper, { children: [icon, jsx$1(ClubCopyTextWrapper, { children: titleCopy }, void 0)] }, void 0), jsx$1("div", { children: children }, void 0)] }, void 0), !isChecked && (jsxs$1(CardBody, __assign$1({ id: "joinClubCardBody" }, { children: [bodyCopy, ' ', jsx$1("a", __assign$1({ href: link, target: "_blank", rel: "noreferrer" }, { children: termsText }), void 0)] }), void 0))] }), void 0));
|
|
20714
20717
|
}
|
|
20715
20718
|
|
|
20716
|
-
var StyledButton = newStyled.button(templateObject_1$
|
|
20719
|
+
var StyledButton = newStyled.button(templateObject_1$q || (templateObject_1$q = __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) {
|
|
20717
20720
|
var customStyle = _a.customStyle;
|
|
20718
20721
|
return customStyle && __assign$1({}, customStyle);
|
|
20719
20722
|
});
|
|
@@ -20726,15 +20729,37 @@ var JoinClubCard = function (_a) {
|
|
|
20726
20729
|
};
|
|
20727
20730
|
return (jsx$1(Card, __assign$1({ link: link, icon: icon, isChecked: checked, bodyCopy: bodyCopy, titleCopy: titleCopy, style: style, termsText: termsText }, { children: showButton ? (jsx$1(StyledButton, __assign$1({ onClick: function () { return handleToggleValue(!checked); }, customStyle: buttonStyle }, { children: buttonText }), void 0)) : (jsx$1(ToggleComponent, { onToggle: handleToggleValue, isChecked: checked, color: toggleColor }, void 0)) }), void 0));
|
|
20728
20731
|
};
|
|
20729
|
-
var templateObject_1$
|
|
20732
|
+
var templateObject_1$q;
|
|
20733
|
+
|
|
20734
|
+
function useOfferAtCartForAutoshipCrossSell(props) {
|
|
20735
|
+
var theme = useTheme$1();
|
|
20736
|
+
var isMobile = useDeviceType() === 'mobile';
|
|
20737
|
+
var _a = useState(), selectedSize = _a[0], setSelectedSize = _a[1];
|
|
20738
|
+
var _b = useState(false), showErrorMessage = _b[0], setShowErrorMessage = _b[1];
|
|
20739
|
+
var handleOnClick = function () {
|
|
20740
|
+
if ('sizeOptions' in props && props.sizeOptions) {
|
|
20741
|
+
if (selectedSize) {
|
|
20742
|
+
setShowErrorMessage(false);
|
|
20743
|
+
props.onAddToCart(selectedSize.key);
|
|
20744
|
+
}
|
|
20745
|
+
else {
|
|
20746
|
+
setShowErrorMessage(true);
|
|
20747
|
+
}
|
|
20748
|
+
}
|
|
20749
|
+
else {
|
|
20750
|
+
props.onAddToCart();
|
|
20751
|
+
}
|
|
20752
|
+
};
|
|
20753
|
+
return __assign$1({ handleOnClick: handleOnClick, theme: theme, isMobile: isMobile, selectedSize: selectedSize, setSelectedSize: setSelectedSize, showErrorMessage: showErrorMessage, setShowErrorMessage: setShowErrorMessage }, props);
|
|
20754
|
+
}
|
|
20730
20755
|
|
|
20731
|
-
var Container$
|
|
20732
|
-
var Body$
|
|
20756
|
+
var Container$m = newStyled.div(templateObject_1$p || (templateObject_1$p = __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"])));
|
|
20757
|
+
var Body$2 = newStyled.div(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n display: flex;\n gap: 8px;\n width: 100%;\n height: ", ";\n margin-bottom: 1%;\n"], ["\n display: flex;\n gap: 8px;\n width: 100%;\n height: ", ";\n margin-bottom: 1%;\n"])), function (_a) {
|
|
20733
20758
|
var height = _a.height;
|
|
20734
20759
|
return height;
|
|
20735
20760
|
});
|
|
20736
|
-
var RightContent = newStyled.div(templateObject_3$
|
|
20737
|
-
var Benefits = newStyled.div(templateObject_4$
|
|
20761
|
+
var RightContent = newStyled.div(templateObject_3$j || (templateObject_3$j = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n gap: 8px;\n height: 100%;\n width: 100%;\n"], ["\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n gap: 8px;\n height: 100%;\n width: 100%;\n"])));
|
|
20762
|
+
var Benefits$1 = newStyled.div(templateObject_4$f || (templateObject_4$f = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n justify-content: space-around;\n gap: 8px;\n height: ", ";\n padding: 6px 10px;\n border-radius: 8px;\n background-color: ", ";\n"], ["\n display: flex;\n flex-direction: column;\n justify-content: space-around;\n gap: 8px;\n height: ", ";\n padding: 6px 10px;\n border-radius: 8px;\n background-color: ", ";\n"])), function (_a) {
|
|
20738
20763
|
var height = _a.height;
|
|
20739
20764
|
return height !== null && height !== void 0 ? height : '100%';
|
|
20740
20765
|
}, function (_a) {
|
|
@@ -20742,7 +20767,7 @@ var Benefits = newStyled.div(templateObject_4$e || (templateObject_4$e = __makeT
|
|
|
20742
20767
|
return backgroundColor !== null && backgroundColor !== void 0 ? backgroundColor : theme.colors.shades['10'].color;
|
|
20743
20768
|
});
|
|
20744
20769
|
var Actions = newStyled.div(templateObject_5$d || (templateObject_5$d = __makeTemplateObject(["\n display: flex;\n width: 100%;\n gap: 8px;\n"], ["\n display: flex;\n width: 100%;\n gap: 8px;\n"])));
|
|
20745
|
-
var templateObject_1$
|
|
20770
|
+
var templateObject_1$p, templateObject_2$j, templateObject_3$j, templateObject_4$f, templateObject_5$d;
|
|
20746
20771
|
|
|
20747
20772
|
var getTitleProps = function (_a) {
|
|
20748
20773
|
var titleContent = _a.content, bold = _a.bold;
|
|
@@ -20756,32 +20781,17 @@ var getTitleProps = function (_a) {
|
|
|
20756
20781
|
return { content: titleContent };
|
|
20757
20782
|
}
|
|
20758
20783
|
};
|
|
20759
|
-
var
|
|
20760
|
-
|
|
20761
|
-
var theme = useTheme();
|
|
20762
|
-
var isMobile = useDeviceType() === 'mobile';
|
|
20763
|
-
var _c = useState(), selectedSize = _c[0], setSelectedSize = _c[1];
|
|
20764
|
-
var _d = useState(false), showErrorMessage = _d[0], setShowErrorMessage = _d[1];
|
|
20765
|
-
var handleOnClick = function () {
|
|
20766
|
-
if ('sizeOptions' in props && props.sizeOptions) {
|
|
20767
|
-
if (selectedSize) {
|
|
20784
|
+
var ErrorMessage = function (theme, text) { return (jsx$1(Text$7, __assign$1({ variant: "body", weight: "demi", size: "small", color: theme.colors.semantic.urgent.color }, { children: text !== null && text !== void 0 ? text : 'Please select a size first' }), void 0)); };
|
|
20785
|
+
var ActionsSection = function (sizeOptions, setSelectedSize, setShowErrorMessage, ctaText, handleOnClick) { return (jsxs$1(Actions, { children: [sizeOptions && (jsx$1(SimpleDropdown, { placeHolder: "Size", options: sizeOptions, onChange: function (sizeOption) {
|
|
20768
20786
|
setShowErrorMessage(false);
|
|
20769
|
-
|
|
20770
|
-
}
|
|
20771
|
-
|
|
20772
|
-
|
|
20773
|
-
|
|
20774
|
-
|
|
20775
|
-
else {
|
|
20776
|
-
props.onAddToCart();
|
|
20777
|
-
}
|
|
20787
|
+
setSelectedSize(sizeOption);
|
|
20788
|
+
} }, void 0)), jsx$1(ButtonSecondary, { wide: true, text: ctaText, size: ComponentSize.Small, onClick: handleOnClick }, void 0)] }, void 0)); };
|
|
20789
|
+
var OfferAtCart = function (props) {
|
|
20790
|
+
var _a = useOfferAtCartForAutoshipCrossSell(props), className = _a.className, _b = _a.title, titleContent = _b.content, bold = _b.bold, image = _a.image, benefits = _a.benefits, _c = _a.ctaText, ctaText = _c === void 0 ? 'Yes, I want this offer' : _c, sizeOptions = _a.sizeOptions, rating = _a.rating, bottomCopy = _a.bottomCopy, theme = _a.theme, setSelectedSize = _a.setSelectedSize, setShowErrorMessage = _a.setShowErrorMessage, isMobile = _a.isMobile, showErrorMessage = _a.showErrorMessage, handleOnClick = _a.handleOnClick;
|
|
20791
|
+
var RenderActionSection = function () {
|
|
20792
|
+
return ActionsSection(sizeOptions, setSelectedSize, setShowErrorMessage, ctaText, handleOnClick);
|
|
20778
20793
|
};
|
|
20779
|
-
|
|
20780
|
-
setShowErrorMessage(false);
|
|
20781
|
-
setSelectedSize(sizeOption);
|
|
20782
|
-
} }, void 0)), jsx$1(ButtonSecondary, { wide: true, text: ctaText, size: ComponentSize.Small, onClick: handleOnClick }, void 0)] }, void 0));
|
|
20783
|
-
var ErrorMessage = (jsx$1(Text$7, __assign$1({ variant: "body", weight: "demi", size: "small", color: theme.colors.semantic.urgent.color }, { children: "Please select a size first" }), void 0));
|
|
20784
|
-
return (jsxs$1(Container$l, __assign$1({ className: className }, { children: [jsx$1(OfferAtCartTitle, __assign$1({}, getTitleProps({ content: titleContent, bold: bold })), void 0), jsxs$1(Body$1, __assign$1({ height: isMobile ? '120px' : '162px' }, { children: [image && (jsx$1(OfferAtCartImage, { isMobile: isMobile, src: image.src, alt: image.alt, rating: rating }, void 0)), jsxs$1(RightContent, { children: [jsx$1(Benefits, __assign$1({ id: "benefits" }, { children: jsx$1(OfferAtCartBenefits, { benefits: benefits }, void 0) }), void 0), !isMobile && ActionsSection, !isMobile && showErrorMessage && ErrorMessage] }, void 0)] }), void 0), isMobile && ActionsSection, isMobile && showErrorMessage && ErrorMessage, bottomCopy && jsx$1("span", { dangerouslySetInnerHTML: { __html: bottomCopy } }, void 0)] }), void 0));
|
|
20794
|
+
return (jsxs$1(Container$m, __assign$1({ className: className }, { children: [jsx$1(OfferAtCartTitle, __assign$1({}, getTitleProps({ content: titleContent, bold: bold })), void 0), jsxs$1(Body$2, __assign$1({ height: isMobile ? '120px' : '162px' }, { children: [image && (jsx$1(OfferAtCartImage, { isMobile: isMobile, src: image.src, alt: image.alt, rating: rating }, void 0)), jsxs$1(RightContent, { children: [jsx$1(Benefits$1, __assign$1({ id: "benefits" }, { children: jsx$1(OfferAtCartBenefits, { benefits: benefits }, void 0) }), void 0), !isMobile && RenderActionSection(), !isMobile && showErrorMessage && ErrorMessage(theme)] }, void 0)] }), void 0), isMobile && RenderActionSection(), isMobile && showErrorMessage && ErrorMessage(theme), bottomCopy && jsx$1("span", { dangerouslySetInnerHTML: { __html: bottomCopy } }, void 0)] }), void 0));
|
|
20785
20795
|
};
|
|
20786
20796
|
|
|
20787
20797
|
var renderBottomCopy = function (text) {
|
|
@@ -20796,15 +20806,15 @@ var VariantType$1;
|
|
|
20796
20806
|
VariantType["V1"] = "v1";
|
|
20797
20807
|
VariantType["V2"] = "v2";
|
|
20798
20808
|
})(VariantType$1 || (VariantType$1 = {}));
|
|
20799
|
-
var ContainerV2 = newStyled.div(templateObject_1$
|
|
20809
|
+
var ContainerV2 = newStyled.div(templateObject_1$o || (templateObject_1$o = __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 background-color: ", ";\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 background-color: ", ";\n"])), function (_a) {
|
|
20800
20810
|
var variant = _a.variant;
|
|
20801
20811
|
return (variant === VariantType$1.V2 ? '#F7F7F7' : 'white');
|
|
20802
20812
|
});
|
|
20803
|
-
var ActionsV2 = newStyled.div(templateObject_2$
|
|
20804
|
-
var SizeCardItem = newStyled.div(templateObject_3$
|
|
20805
|
-
var SizeCardWrapper = newStyled.div(templateObject_4$
|
|
20813
|
+
var ActionsV2 = newStyled.div(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n display: flex;\n width: 100%;\n gap: 8px;\n flex-direction: column;\n"], ["\n display: flex;\n width: 100%;\n gap: 8px;\n flex-direction: column;\n"])));
|
|
20814
|
+
var SizeCardItem = newStyled.div(templateObject_3$i || (templateObject_3$i = __makeTemplateObject(["\n width: 59px;\n height: 36px;\n border-radius: 8px;\n border: 1px 0px 0px 0px;\n border-color: #bbbbbb;\n border-style: solid;\n border-width: 1px;\n font-size: 12px;\n font-weight: 600;\n line-height: 16px;\n text-align: center;\n display: flex;\n justify-content: center;\n align-items: center;\n cursor: pointer;\n @media only screen and (max-width: 375px) {\n width: 45px !important;\n font-size: 11px !important;\n }\n"], ["\n width: 59px;\n height: 36px;\n border-radius: 8px;\n border: 1px 0px 0px 0px;\n border-color: #bbbbbb;\n border-style: solid;\n border-width: 1px;\n font-size: 12px;\n font-weight: 600;\n line-height: 16px;\n text-align: center;\n display: flex;\n justify-content: center;\n align-items: center;\n cursor: pointer;\n @media only screen and (max-width: 375px) {\n width: 45px !important;\n font-size: 11px !important;\n }\n"])));
|
|
20815
|
+
var SizeCardWrapper = newStyled.div(templateObject_4$e || (templateObject_4$e = __makeTemplateObject(["\n display: grid;\n gap: 4px;\n grid-template-columns: repeat(5, 1fr);\n\n @media only screen and (max-width: 375px) {\n grid-template-columns: repeat(5, 1fr);\n }\n"], ["\n display: grid;\n gap: 4px;\n grid-template-columns: repeat(5, 1fr);\n\n @media only screen and (max-width: 375px) {\n grid-template-columns: repeat(5, 1fr);\n }\n"])));
|
|
20806
20816
|
var BottomCopyWrapper$1 = newStyled.div(templateObject_5$c || (templateObject_5$c = __makeTemplateObject(["\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n"], ["\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n"])));
|
|
20807
|
-
var templateObject_1$
|
|
20817
|
+
var templateObject_1$o, templateObject_2$i, templateObject_3$i, templateObject_4$e, templateObject_5$c;
|
|
20808
20818
|
|
|
20809
20819
|
var SizeOptions = function (_a) {
|
|
20810
20820
|
var onAddToCart = _a.onAddToCart, sizeOptions = _a.sizeOptions;
|
|
@@ -20821,20 +20831,45 @@ var OfferAtCartV2 = function (_a) {
|
|
|
20821
20831
|
var ActionsSection = (jsx$1(ActionsV2, { children: showButton ? (jsx$1(ButtonSecondary, { wide: true, text: ctaText, size: ComponentSize.Small, onClick: function () {
|
|
20822
20832
|
setShowButton(false);
|
|
20823
20833
|
} }, void 0)) : (sizeOptions && jsx$1(SizeOptions, { sizeOptions: sizeOptions, onAddToCart: onAddToCart }, void 0)) }, void 0));
|
|
20824
|
-
return (jsxs$1(ContainerV2, __assign$1({ className: className, variant: bottomCopy ? VariantType$1.V2 : VariantType$1.V1 }, { children: [jsx$1(OfferAtCartTitle, __assign$1({}, getTitleProps({ content: titleContent, bold: bold })), void 0), jsxs$1(Body$
|
|
20834
|
+
return (jsxs$1(ContainerV2, __assign$1({ className: className, variant: bottomCopy ? VariantType$1.V2 : VariantType$1.V1 }, { children: [jsx$1(OfferAtCartTitle, __assign$1({}, getTitleProps({ content: titleContent, bold: bold })), void 0), jsxs$1(Body$2, { children: [src && alt && (jsx$1(OfferAtCartImage, { isMobile: isMobile, src: src, alt: alt, rating: rating, width: isMobile ? '90px' : '122px' }, void 0)), jsx$1(RightContent, { children: jsx$1(Benefits$1, { children: jsx$1(OfferAtCartBenefits, { benefits: benefits }, void 0) }, void 0) }, void 0)] }, void 0), jsx$1("div", { children: !isMobile && ActionsSection }, void 0), isMobile && ActionsSection, bottomCopy && jsx$1(BottomCopyWrapper$1, { children: renderBottomCopy(bottomCopy) }, void 0)] }), void 0));
|
|
20825
20835
|
};
|
|
20826
20836
|
|
|
20827
|
-
var Container$
|
|
20828
|
-
var QuatityLabel$1 = newStyled.div(templateObject_2$
|
|
20829
|
-
var TextSmallLineHeight = newStyled(Text$7)(templateObject_3$
|
|
20830
|
-
var ButtonSecondaryNoWrap = newStyled(ButtonSecondary)(templateObject_4$
|
|
20837
|
+
var Container$l = newStyled.div(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n display: flex;\n width: 100%;\n padding: ", ";\n gap: 20px;\n background-color: #f6f0e7;\n align-items: center;\n @media (max-width: 767px) {\n gap: 15px;\n }\n"], ["\n display: flex;\n width: 100%;\n padding: ", ";\n gap: 20px;\n background-color: #f6f0e7;\n align-items: center;\n @media (max-width: 767px) {\n gap: 15px;\n }\n"])), function (props) { return (props.isMobile ? '16px 8px' : '20px 12px'); });
|
|
20838
|
+
var QuatityLabel$1 = newStyled.div(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n background: #d4605b;\n border-radius: 50%;\n width: 53px;\n height: 53px;\n color: #fff;\n font-size: 16px;\n font-weight: 700;\n display: flex;\n align-items: center;\n justify-content: center;\n min-width: 53px;\n @media (max-width: 767px) {\n min-width: 56px;\n width: 56px;\n height: 56px;\n }\n"], ["\n background: #d4605b;\n border-radius: 50%;\n width: 53px;\n height: 53px;\n color: #fff;\n font-size: 16px;\n font-weight: 700;\n display: flex;\n align-items: center;\n justify-content: center;\n min-width: 53px;\n @media (max-width: 767px) {\n min-width: 56px;\n width: 56px;\n height: 56px;\n }\n"])));
|
|
20839
|
+
var TextSmallLineHeight = newStyled(Text$7)(templateObject_3$h || (templateObject_3$h = __makeTemplateObject(["\n line-height: 17px;\n"], ["\n line-height: 17px;\n"])));
|
|
20840
|
+
var ButtonSecondaryNoWrap = newStyled(ButtonSecondary)(templateObject_4$d || (templateObject_4$d = __makeTemplateObject(["\n padding: ", ";\n white-space: nowrap;\n"], ["\n padding: ", ";\n white-space: nowrap;\n"])), function (props) { return (props.size === ComponentSize.XSmall ? '8px' : '14px 32px'); });
|
|
20831
20841
|
var ContentWrapper = newStyled.div(templateObject_5$b || (templateObject_5$b = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 6px;\n"], ["\n display: flex;\n flex-direction: column;\n gap: 6px;\n"])));
|
|
20832
|
-
var templateObject_1$
|
|
20842
|
+
var templateObject_1$n, templateObject_2$h, templateObject_3$h, templateObject_4$d, templateObject_5$b;
|
|
20833
20843
|
|
|
20834
20844
|
var OfferAtCartV3 = function (_a) {
|
|
20835
20845
|
var className = _a.className, _b = _a.quantity, quantity = _b === void 0 ? '2X' : _b, titleContent = _a.title.content, onAddToCart = _a.onAddToCart, ctaText = _a.ctaText;
|
|
20836
20846
|
var isMobile = useDeviceType() === 'mobile';
|
|
20837
|
-
return (jsxs$1(Container$
|
|
20847
|
+
return (jsxs$1(Container$l, __assign$1({ isMobile: isMobile, className: className }, { children: [jsx$1(QuatityLabel$1, { children: quantity }, void 0), jsxs$1(ContentWrapper, { children: [jsx$1(TextSmallLineHeight, __assign$1({ variant: "body", weight: "bold", size: isMobile ? 'xsmall' : 'regular' }, { children: titleContent }), void 0), jsx$1(ButtonSecondaryNoWrap, { onClick: onAddToCart, size: isMobile ? ComponentSize.XSmall : ComponentSize.Large, text: ctaText }, void 0)] }, void 0)] }), void 0));
|
|
20848
|
+
};
|
|
20849
|
+
|
|
20850
|
+
var classNames = ".twoOffers > div > div > div{background-color:white;}.benefits{display:flex;flex-direction:column;width:100%!important;}.benefits > div > div{width:100%!important;}.benefits > div > div > div{display:flex;flex-direction:row;gap:8px;width:100%;justify-content:space-between;}";
|
|
20851
|
+
|
|
20852
|
+
var Container$k = newStyled.div(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n width: 100%;\n padding: 12px;\n border-radius: 8px;\n gap: 14px;\n margin: auto;\n background-color: #f7f7f7;\n font-size: 14px;\n"], ["\n display: flex;\n flex-direction: column;\n width: 100%;\n padding: 12px;\n border-radius: 8px;\n gap: 14px;\n margin: auto;\n background-color: #f7f7f7;\n font-size: 14px;\n"])));
|
|
20853
|
+
var TitleWrapper$1 = newStyled.div(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: center;\n width: 100%;\n gap: 8px;\n padding-bottom: 8px;\n border-bottom: 1px solid #d1d1d1;\n"], ["\n display: flex;\n flex-direction: row;\n align-items: center;\n width: 100%;\n gap: 8px;\n padding-bottom: 8px;\n border-bottom: 1px solid #d1d1d1;\n"])));
|
|
20854
|
+
var Body$1 = newStyled.div(templateObject_3$g || (templateObject_3$g = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 4px;\n width: 100%;\n height: ", ";\n margin-bottom: 1%;\n"], ["\n display: flex;\n flex-direction: column;\n gap: 4px;\n width: 100%;\n height: ", ";\n margin-bottom: 1%;\n"])), function (_a) {
|
|
20855
|
+
var height = _a.height;
|
|
20856
|
+
return height;
|
|
20857
|
+
});
|
|
20858
|
+
var Benefits = newStyled.div(templateObject_4$c || (templateObject_4$c = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n justify-content: space-around;\n gap: 8px;\n height: ", ";\n border-radius: 8px;\n background-color: ", ";\n"], ["\n display: flex;\n flex-direction: column;\n justify-content: space-around;\n gap: 8px;\n height: ", ";\n border-radius: 8px;\n background-color: ", ";\n"])), function (_a) {
|
|
20859
|
+
var height = _a.height;
|
|
20860
|
+
return height !== null && height !== void 0 ? height : '100%';
|
|
20861
|
+
}, function (_a) {
|
|
20862
|
+
var theme = _a.theme, backgroundColor = _a.backgroundColor;
|
|
20863
|
+
return backgroundColor !== null && backgroundColor !== void 0 ? backgroundColor : theme.colors.shades['10'].color;
|
|
20864
|
+
});
|
|
20865
|
+
var templateObject_1$m, templateObject_2$g, templateObject_3$g, templateObject_4$c;
|
|
20866
|
+
|
|
20867
|
+
var OfferAtCartV4 = function (props) {
|
|
20868
|
+
var _a = useOfferAtCartForAutoshipCrossSell(props), className = _a.className, _b = _a.title, titleContent = _b.content, bold = _b.bold, image = _a.image, benefits = _a.benefits, _c = _a.ctaText, ctaText = _c === void 0 ? 'Yes, I want this offer' : _c, sizeOptions = _a.sizeOptions, rating = _a.rating, bottomCopy = _a.bottomCopy, theme = _a.theme, setSelectedSize = _a.setSelectedSize, setShowErrorMessage = _a.setShowErrorMessage, isMobile = _a.isMobile, showErrorMessage = _a.showErrorMessage, handleOnClick = _a.handleOnClick;
|
|
20869
|
+
var RenderActionSection = function () {
|
|
20870
|
+
return ActionsSection(sizeOptions, setSelectedSize, setShowErrorMessage, ctaText, handleOnClick);
|
|
20871
|
+
};
|
|
20872
|
+
return (jsx$1(Container$k, __assign$1({ className: className }, { children: jsxs$1(Fragment$2, { children: [jsxs$1(TitleWrapper$1, { children: [image && (jsx$1(OfferAtCartImage, { width: "66px", height: "66px", isMobile: isMobile, src: image.src, alt: image.alt, rating: rating }, void 0)), jsx$1(OfferAtCartTitle, __assign$1({}, getTitleProps({ content: titleContent, bold: bold })), void 0)] }, void 0), jsxs$1(Body$1, __assign$1({ height: isMobile ? '120px' : '162px' }, { children: [jsx$1("span", { children: "Includes:" }, void 0), jsxs$1(RightContent, { children: [jsx$1(Benefits, __assign$1({ id: "benefits", className: classNames.benefits }, { children: jsx$1(OfferAtCartBenefits, { benefits: benefits }, void 0) }), void 0), !isMobile && RenderActionSection(), !isMobile && showErrorMessage && ErrorMessage(theme)] }, void 0)] }), void 0), isMobile && RenderActionSection(), isMobile && showErrorMessage && ErrorMessage(theme), bottomCopy && jsx$1("span", { dangerouslySetInnerHTML: { __html: bottomCopy } }, void 0)] }, void 0) }), void 0));
|
|
20838
20873
|
};
|
|
20839
20874
|
|
|
20840
20875
|
var Container$j = newStyled.div(templateObject_1$l || (templateObject_1$l = __makeTemplateObject(["\n display: flex;\n width: 100%;\n padding: 16px;\n border: 1px solid #d1d1d1;\n border-radius: 8px;\n gap: 14px;\n margin: auto;\n background-color: #fff;\n"], ["\n display: flex;\n width: 100%;\n padding: 16px;\n border: 1px solid #d1d1d1;\n border-radius: 8px;\n gap: 14px;\n margin: auto;\n background-color: #fff;\n"])));
|
|
@@ -22508,5 +22543,5 @@ function TwoCtasAtCart(_a) {
|
|
|
22508
22543
|
return (jsxs$1(Container, __assign$1({ id: "twoCtasAtCart" }, { children: [jsx$1(TitleWrapper, __assign$1({ id: "twoCtasAtCartTitle" }, { children: title }), void 0), jsx$1(ButtonPrimary, { onClick: saveMoreButtonAction, text: saveMoreButtonLabel, wide: true }, void 0), jsxs$1(BodyContainer, { children: [jsx$1(GridContainer, __assign$1({ style: { marginTop: '8px' } }, { children: descriptions.map(function (description, index) { return (jsx$1(DescriptionItem, { text: description.text, smallerText: description.smallerText, iconName: description === null || description === void 0 ? void 0 : description.iconName, type: description === null || description === void 0 ? void 0 : description.type, link: description === null || description === void 0 ? void 0 : description.link }, "".concat(description.text, "-").concat(index))); }) }), void 0), bottomCopy && jsx$1(BottomCopyWrapper, { dangerouslySetInnerHTML: { __html: bottomCopy } }, void 0)] }, void 0), jsx$1(OutLineButtonContainer, { children: version === BottomButtonVersionsTypes.link ? (jsx$1(SaveLessLinkButton, __assign$1({ href: "#", onClick: saveLessButtonAction }, { children: saveLessButtonLabel }), void 0)) : (jsx$1(BtnOutlineWrapper, { wide: true, onClick: saveLessButtonAction, text: saveLessButtonLabel }, void 0)) }, void 0)] }), void 0));
|
|
22509
22544
|
}
|
|
22510
22545
|
|
|
22511
|
-
export { AbsorbencyLevel, Accordion$1 as Accordion, AccordionOptions, AmazonButton, AssetsProvider, Autoship, AutoshipFrequencyDropdown, AutoshipOfferCard, AutoshipOfferCardCta, AutoshipPdpCard, AutoshipV2, BasicAccordion, BeforeAfterCard, BeforeAfterVariant, BenefitsList, Bundle, ButtonPrimary, ButtonSecondary, ButtonSecondaryOutline, BuyNowPayLater, CacheProvider, CancellationFlowAccordionContentPerPartner, Card$3 as Card, CardSectionType, CartItemCard, CartProductItem, CategorySquareTag, CategoryTag, Checkbox, ClubOfferSelector, ClubOfferSelector2, ClubOfferTag, ClubPriceMemberLabel, ClubRadioGroupInput, Collection, ColorPickerWithTooltip, ComponentPosition, ComponentSize, CouponCard, index$1 as CrossSell, DeliveryDetails, DiscountTag$4 as DiscountTag, Drawer, DropdownDialog, DropdownListIcons, FilteringDropdown, Tags as FilteringTags, Filters, FitGuarantee, FitPredictor, Global, GreetingsCard, HorizontalDivider, HurryUp, Icon, IconButton, IconsWithTitle, Image$3 as Image, ImageCardWithDescription, Input$3 as Input, InputValidationType, JoinClubCard, Icon$1 as LibIcon, LikeButton, Modal, MotivatorProgressBar, MultiColorPicker, Note, OfferAtCart, OfferAtCartV2, OfferAtCartV3, OfferAtPDP, OfferBanner, OrderBar, Overlay, PackSelector, PackSelectorV2, Pagination, PaginatorBlog, PaymentMethod, PaypalButton, Portal, PriceLabel$1 as PriceLabel, PriceLabelV2$1 as PriceLabelV2, PriceLabelV3, PriceLabelV5, ProductCard, ProductCardV2, ProductCardV3, ProductGallery, ProductGalleryMobile, ProductGalleryMobileV2, ProductGalleryMobileV3, ProductGalleryMobileV4, ProductGalleryMobileV5, ProgressBar, QuantityPicker, RadioGroupInput, RadioInput, RadioPrimary, Rating, Review, Review$1 as ReviewDetail, ReviewsHeader, ScrollToTop, SearchBar, SearchNavigation, SeasonOfferTag, ShortBanner, SimpleDropdown, SimpleOrderItem, SingleColorPicker, SizeChartTable, SizeChartTableV2, SizeChartTableV3, SizeDropdown, SizeFitGuide, SizeSelector, SizeTable, SliderNavigation, Spacing, Spinner, StarList, StrengthBars, SubscriptionPlanSelector, Tab, Tabs, Text$7 as Text, TextButton, TextWithImage, ThemeProvider, ThemeVariables, Timer, Toast, ToggleComponent, Tooltip, Totals, TrackingProgress, TrackingProgressV2, TwoCtasAtCart, Video$1 as Video, benefits, benefitsRawHtml, benefitsRawHtmlV2, buildImageUrl, componentSizeMapper, createCache, css, decimalFormat, formatPrice, getSrcSet, isDangerouslySetInnerHTML, isEmail, isEmpty, isNumber$1 as isNumber, isPhoneNumber, isValidDate, mediaQueries, modalEvent, SeasonOfferRoundedTag as seasonOfferRoundedTag, simulateMouseClick, sizeOptions, sliceString, newStyled as styled, title, useDeviceType, useModal, useModalEvent, useOnClickOutside, useTheme, useThemeAssets, useWindowDimensions };
|
|
22546
|
+
export { AbsorbencyLevel, Accordion$1 as Accordion, AccordionOptions, AmazonButton, AssetsProvider, Autoship, AutoshipFrequencyDropdown, AutoshipOfferCard, AutoshipOfferCardCta, AutoshipPdpCard, AutoshipV2, BasicAccordion, BeforeAfterCard, BeforeAfterVariant, BenefitsList, Bundle, ButtonPrimary, ButtonSecondary, ButtonSecondaryOutline, BuyNowPayLater, CacheProvider, CancellationFlowAccordionContentPerPartner, Card$3 as Card, CardSectionType, CartItemCard, CartProductItem, CategorySquareTag, CategoryTag, Checkbox, ClubOfferSelector, ClubOfferSelector2, ClubOfferTag, ClubPriceMemberLabel, ClubRadioGroupInput, Collection, ColorPickerWithTooltip, ComponentPosition, ComponentSize, CouponCard, index$1 as CrossSell, DeliveryDetails, DiscountTag$4 as DiscountTag, Drawer, DropdownDialog, DropdownListIcons, FilteringDropdown, Tags as FilteringTags, Filters, FitGuarantee, FitPredictor, Global, GreetingsCard, HorizontalDivider, HurryUp, Icon, IconButton, IconsWithTitle, Image$3 as Image, ImageCardWithDescription, Input$3 as Input, InputValidationType, JoinClubCard, Icon$1 as LibIcon, LikeButton, Modal, MotivatorProgressBar, MultiColorPicker, Note, OfferAtCart, OfferAtCartV2, OfferAtCartV3, OfferAtCartV4, OfferAtPDP, OfferBanner, OrderBar, Overlay, PackSelector, PackSelectorV2, Pagination, PaginatorBlog, PaymentMethod, PaypalButton, Portal, PriceLabel$1 as PriceLabel, PriceLabelV2$1 as PriceLabelV2, PriceLabelV3, PriceLabelV5, ProductCard, ProductCardV2, ProductCardV3, ProductGallery, ProductGalleryMobile, ProductGalleryMobileV2, ProductGalleryMobileV3, ProductGalleryMobileV4, ProductGalleryMobileV5, ProgressBar, QuantityPicker, RadioGroupInput, RadioInput, RadioPrimary, Rating, Review, Review$1 as ReviewDetail, ReviewsHeader, ScrollToTop, SearchBar, SearchNavigation, SeasonOfferTag, ShortBanner, SimpleDropdown, SimpleOrderItem, SingleColorPicker, SizeChartTable, SizeChartTableV2, SizeChartTableV3, SizeDropdown, SizeFitGuide, SizeSelector, SizeTable, SliderNavigation, Spacing, Spinner, StarList, StrengthBars, SubscriptionPlanSelector, Tab, Tabs, Text$7 as Text, TextButton, TextWithImage, ThemeProvider, ThemeVariables, Timer, Toast, ToggleComponent, Tooltip, Totals, TrackingProgress, TrackingProgressV2, TwoCtasAtCart, Video$1 as Video, benefits, benefitsRawHtml, benefitsRawHtmlV2, buildImageUrl, componentSizeMapper, createCache, css, decimalFormat, formatPrice, getSrcSet, isDangerouslySetInnerHTML, isEmail, isEmpty, isNumber$1 as isNumber, isPhoneNumber, isValidDate, mediaQueries, modalEvent, SeasonOfferRoundedTag as seasonOfferRoundedTag, simulateMouseClick, sizeOptions, sliceString, newStyled as styled, title, useDeviceType, useModal, useModalEvent, useOnClickOutside, useTheme, useThemeAssets, useWindowDimensions };
|
|
22512
22547
|
//# sourceMappingURL=index.esm.js.map
|