@trafilea/afrodita-components 6.31.2 → 6.31.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/index.d.ts +21 -13
- package/build/index.esm.js +527 -451
- package/build/index.esm.js.map +1 -1
- package/build/index.js +527 -450
- package/build/index.js.map +1 -1
- package/build/theme/revel.theme.js +9 -9
- package/build/theme/thespadr.theme.js +14 -14
- package/package.json +1 -1
package/build/index.js
CHANGED
|
@@ -3207,7 +3207,7 @@ var getStylesBySize$g = function (size) {
|
|
|
3207
3207
|
};
|
|
3208
3208
|
}
|
|
3209
3209
|
};
|
|
3210
|
-
var Container$1k = newStyled.div(templateObject_1$
|
|
3210
|
+
var Container$1k = newStyled.div(templateObject_1$2d || (templateObject_1$2d = __makeTemplateObject(["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n padding: ", ";\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: ", ";\n text-align: center;\n cursor: default;\n"], ["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n padding: ", ";\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: ", ";\n text-align: center;\n cursor: default;\n"])), function (_a) {
|
|
3211
3211
|
var backgroundColor = _a.backgroundColor;
|
|
3212
3212
|
return backgroundColor;
|
|
3213
3213
|
}, function (_a) {
|
|
@@ -3229,7 +3229,7 @@ var Container$1k = newStyled.div(templateObject_1$2e || (templateObject_1$2e = _
|
|
|
3229
3229
|
var size = _a.size;
|
|
3230
3230
|
return (_b = getStylesBySize$g(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
3231
3231
|
});
|
|
3232
|
-
var H3$3 = newStyled.h3(templateObject_2$
|
|
3232
|
+
var H3$3 = newStyled.h3(templateObject_2$1z || (templateObject_2$1z = __makeTemplateObject(["\n color: ", ";\n font-weight: bold;\n margin: 0;\n font-size: ", ";\n line-height: ", ";\n"], ["\n color: ", ";\n font-weight: bold;\n margin: 0;\n font-size: ", ";\n line-height: ", ";\n"])), function (_a) {
|
|
3233
3233
|
var textColor = _a.textColor;
|
|
3234
3234
|
return textColor;
|
|
3235
3235
|
}, function (_a) {
|
|
@@ -3246,7 +3246,7 @@ var ClubOfferTag = function (_a) {
|
|
|
3246
3246
|
var theme = useTheme();
|
|
3247
3247
|
return (jsxRuntime.jsx(Container$1k, __assign$1({ backgroundColor: disabled ? theme.colors.shades['50'].color : backgroundColor, borderColor: disabled ? theme.colors.shades['50'].color : borderColor, size: size, "data-testid": "cluboffer-container", style: style, className: className }, { children: jsxRuntime.jsx(H3$3, __assign$1({ textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size, style: { fontSize: '0.875rem', lineHeight: '18px' } }, { children: clubOfferText }), void 0) }), void 0));
|
|
3248
3248
|
};
|
|
3249
|
-
var templateObject_1$
|
|
3249
|
+
var templateObject_1$2d, templateObject_2$1z;
|
|
3250
3250
|
|
|
3251
3251
|
var getStylesBySize$f = function (size, bordersRounded, theme) {
|
|
3252
3252
|
var _a, _b, _c;
|
|
@@ -3277,7 +3277,7 @@ var getStylesBySize$f = function (size, bordersRounded, theme) {
|
|
|
3277
3277
|
};
|
|
3278
3278
|
}
|
|
3279
3279
|
};
|
|
3280
|
-
var Container$1j = newStyled.div(templateObject_1$
|
|
3280
|
+
var Container$1j = newStyled.div(templateObject_1$2c || (templateObject_1$2c = __makeTemplateObject(["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n padding: ", ";\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: ", ";\n text-align: center;\n cursor: default;\n"], ["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n padding: ", ";\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: ", ";\n text-align: center;\n cursor: default;\n"])), function (_a) {
|
|
3281
3281
|
var backgroundColor = _a.backgroundColor;
|
|
3282
3282
|
return backgroundColor;
|
|
3283
3283
|
}, function (_a) {
|
|
@@ -3299,7 +3299,7 @@ var Container$1j = newStyled.div(templateObject_1$2d || (templateObject_1$2d = _
|
|
|
3299
3299
|
var size = _a.size;
|
|
3300
3300
|
return (_b = getStylesBySize$f(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
3301
3301
|
});
|
|
3302
|
-
var H3$2 = newStyled.h3(templateObject_2$
|
|
3302
|
+
var H3$2 = newStyled.h3(templateObject_2$1y || (templateObject_2$1y = __makeTemplateObject(["\n color: ", ";\n font-weight: bold;\n margin: 0;\n font-size: ", ";\n line-height: ", ";\n"], ["\n color: ", ";\n font-weight: bold;\n margin: 0;\n font-size: ", ";\n line-height: ", ";\n"])), function (_a) {
|
|
3303
3303
|
var textColor = _a.textColor;
|
|
3304
3304
|
return textColor;
|
|
3305
3305
|
}, function (_a) {
|
|
@@ -3316,7 +3316,7 @@ var DiscountTag$2 = function (_a) {
|
|
|
3316
3316
|
var theme = useTheme();
|
|
3317
3317
|
return (jsxRuntime.jsx(Container$1j, __assign$1({ backgroundColor: disabled ? theme.colors.shades['50'].color : backgroundColor, borderColor: disabled ? theme.colors.shades['50'].color : borderColor, size: size, "data-testid": "discount-container", style: style, bordersRounded: bordersRounded }, { children: jsxRuntime.jsxs(H3$2, __assign$1({ textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size, style: style, theme: theme }, { children: [discount, "% ", offText, " ", showSavings && savings && "- ".concat(savings)] }), void 0) }), void 0));
|
|
3318
3318
|
};
|
|
3319
|
-
var templateObject_1$
|
|
3319
|
+
var templateObject_1$2c, templateObject_2$1y;
|
|
3320
3320
|
|
|
3321
3321
|
var Viewports = {
|
|
3322
3322
|
mobile: 'mobile',
|
|
@@ -3425,8 +3425,8 @@ var getFontSize = function (size, theme, finalPriceStyled, finalPriceStyledSmall
|
|
|
3425
3425
|
return (_c = getStylesBySize$e(size, theme)) === null || _c === void 0 ? void 0 : _c.fontSize;
|
|
3426
3426
|
}
|
|
3427
3427
|
};
|
|
3428
|
-
var Container$1i = newStyled.div(templateObject_1$
|
|
3429
|
-
var Price = newStyled.p(templateObject_2$
|
|
3428
|
+
var Container$1i = newStyled.div(templateObject_1$2b || (templateObject_1$2b = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
3429
|
+
var Price = newStyled.p(templateObject_2$1x || (templateObject_2$1x = __makeTemplateObject(["\n font-weight: ", ";\n font-size: ", ";\n line-height: ", ";\n color: ", ";\n text-decoration: ", ";\n margin: ", ";\n position: relative;\n margin-top: ", ";\n"], ["\n font-weight: ", ";\n font-size: ", ";\n line-height: ", ";\n color: ", ";\n text-decoration: ", ";\n margin: ", ";\n position: relative;\n margin-top: ", ";\n"])), function (_a) {
|
|
3430
3430
|
var weight = _a.weight;
|
|
3431
3431
|
return (weight ? weight : '400');
|
|
3432
3432
|
}, function (_a) {
|
|
@@ -3448,7 +3448,7 @@ var Price = newStyled.p(templateObject_2$1w || (templateObject_2$1w = __makeTemp
|
|
|
3448
3448
|
return (margin ? (_b = getStylesBySize$e(size)) === null || _b === void 0 ? void 0 : _b.margin : '0');
|
|
3449
3449
|
}, function (_a) {
|
|
3450
3450
|
var finalPriceStyledSmall = _a.finalPriceStyledSmall, size = _a.size;
|
|
3451
|
-
return finalPriceStyledSmall ? (size === 'large' ? '-
|
|
3451
|
+
return finalPriceStyledSmall ? (size === 'large' ? '-6px' : '-7px') : '0';
|
|
3452
3452
|
});
|
|
3453
3453
|
var TagContainer = newStyled.div(templateObject_3$1b || (templateObject_3$1b = __makeTemplateObject(["\n margin: ", ";\n display: flex;\n align-items: center;\n"], ["\n margin: ", ";\n display: flex;\n align-items: center;\n"])), function (_a) {
|
|
3454
3454
|
var _b;
|
|
@@ -3483,9 +3483,9 @@ var PriceLabel$1 = function (_a) {
|
|
|
3483
3483
|
};
|
|
3484
3484
|
return (jsxRuntime.jsxs(Container$1i, __assign$1({}, rest, { id: "priceLabel" }, { children: [clubStyle ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [!!originalPrice && jsxRuntime.jsx(OriginalPrice, {}, void 0), jsxRuntime.jsx(Price, __assign$1({ margin: true, "data-testid": getTestId$1(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: finalPrice }), void 0)] }, void 0)) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Price, __assign$1({ margin: true, "data-testid": getTestId$1(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: finalPrice }), void 0), !!originalPrice && jsxRuntime.jsx(OriginalPrice, {}, void 0)] }, void 0)), discount && (jsxRuntime.jsx(TagContainer, __assign$1({ size: size }, { children: jsxRuntime.jsx(DiscountTag$2, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
|
|
3485
3485
|
};
|
|
3486
|
-
var templateObject_1$
|
|
3486
|
+
var templateObject_1$2b, templateObject_2$1x, templateObject_3$1b;
|
|
3487
3487
|
|
|
3488
|
-
var FinalPriceStyledContainer$3 = newStyled.div(templateObject_1$
|
|
3488
|
+
var FinalPriceStyledContainer$3 = newStyled.div(templateObject_1$2a || (templateObject_1$2a = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
3489
3489
|
var PriceLabelV2$1 = function (_a) {
|
|
3490
3490
|
var _b;
|
|
3491
3491
|
var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, discount = _a.discount, clubOffer = _a.clubOffer, color = _a.color, testId = _a.testId, _c = _a.originalPriceStyled, originalPriceStyled = _c === void 0 ? false : _c, _d = _a.originalPriceUnderlined, originalPriceUnderlined = _d === void 0 ? true : _d, _e = _a.size, size = _e === void 0 ? exports.ComponentSize.Small : _e, _f = _a.bordersRounded, bordersRounded = _f === void 0 ? false : _f, _g = _a.savingsDisplay, savingsDisplay = _g === void 0 ? true : _g, pricePerItem = _a.pricePerItem, _h = _a.hasRoundedSavings, hasRoundedSavings = _h === void 0 ? true : _h, rest = __rest(_a, ["finalPrice", "originalPrice", "discount", "clubOffer", "color", "testId", "originalPriceStyled", "originalPriceUnderlined", "size", "bordersRounded", "savingsDisplay", "pricePerItem", "hasRoundedSavings"]);
|
|
@@ -3538,9 +3538,7 @@ var PriceLabelV2$1 = function (_a) {
|
|
|
3538
3538
|
var savetoString = saveto.toFixed(2);
|
|
3539
3539
|
var OriginalPrice = function () { return (jsxRuntime.jsx(Price, __assign$1({ size: originalPriceStyled ? size : exports.ComponentSize.Small, color: theme.component.pricing.priceLabel.price.originalPriceColor ||
|
|
3540
3540
|
theme.colors.shades['300'].color, margin: true, underlined: originalPriceUnderlined, "data-testid": getTestId$1(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
|
|
3541
|
-
return (jsxRuntime.jsxs(Container$1i, __assign$1({}, rest, { id: "priceLabelV2" }, { children: [isOriginalPrice && jsxRuntime.jsx(OriginalPrice, {}, void 0), jsxRuntime.jsxs(FinalPriceStyledContainer$3, __assign$1({ "data-testid": getTestId$1(testId, 'final-product-price') }, { children: [jsxRuntime.jsx(Price, __assign$1({ margin: true, finalPriceStyledSmall: true,
|
|
3542
|
-
marginTop: '-5px',
|
|
3543
|
-
} }, priceCommonProps, { size: size }, { children: currencySymbol }), void 0), jsxRuntime.jsx(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size }, { children: finalPriceArray[0]
|
|
3541
|
+
return (jsxRuntime.jsxs(Container$1i, __assign$1({}, rest, { id: "priceLabelV2" }, { children: [isOriginalPrice && jsxRuntime.jsx(OriginalPrice, {}, void 0), jsxRuntime.jsxs(FinalPriceStyledContainer$3, __assign$1({ "data-testid": getTestId$1(testId, 'final-product-price') }, { children: [jsxRuntime.jsx(Price, __assign$1({ margin: true, finalPriceStyledSmall: true }, priceCommonProps, { size: size }, { children: currencySymbol }), void 0), jsxRuntime.jsx(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size }, { children: finalPriceArray[0]
|
|
3544
3542
|
? finalPriceArray[0]
|
|
3545
3543
|
: (_b = "".concat(productFinalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1] }), void 0), jsxRuntime.jsx(Price, __assign$1({ finalPriceStyledSmall: true, style: {
|
|
3546
3544
|
marginTop: '-6px',
|
|
@@ -3556,10 +3554,10 @@ var PriceLabelV2$1 = function (_a) {
|
|
|
3556
3554
|
lineHeight: '22px',
|
|
3557
3555
|
} }), void 0)) }), void 0))] }), void 0));
|
|
3558
3556
|
};
|
|
3559
|
-
var templateObject_1$
|
|
3557
|
+
var templateObject_1$2a;
|
|
3560
3558
|
|
|
3561
|
-
var FinalPriceStyledContainer$2 = newStyled.div(templateObject_1$
|
|
3562
|
-
var ContainerDirectionColumn = newStyled.div(templateObject_2$
|
|
3559
|
+
var FinalPriceStyledContainer$2 = newStyled.div(templateObject_1$29 || (templateObject_1$29 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
3560
|
+
var ContainerDirectionColumn = newStyled.div(templateObject_2$1w || (templateObject_2$1w = __makeTemplateObject(["\n display: column;\n align-items: center;\n"], ["\n display: column;\n align-items: center;\n"])));
|
|
3563
3561
|
var DiscountEachOneContainer = newStyled.div(templateObject_3$1a || (templateObject_3$1a = __makeTemplateObject(["\n display: flex;\n padding-left: 0.5rem;\n"], ["\n display: flex;\n padding-left: 0.5rem;\n"])));
|
|
3564
3562
|
var PriceLabelV3 = function (_a) {
|
|
3565
3563
|
var _b;
|
|
@@ -3631,9 +3629,9 @@ var PriceLabelV3 = function (_a) {
|
|
|
3631
3629
|
lineHeight: '22px',
|
|
3632
3630
|
} }), void 0)) }), void 0))] }, void 0)] }), void 0));
|
|
3633
3631
|
};
|
|
3634
|
-
var templateObject_1$
|
|
3632
|
+
var templateObject_1$29, templateObject_2$1w, templateObject_3$1a;
|
|
3635
3633
|
|
|
3636
|
-
var FinalPriceStyledContainer$1 = newStyled.div(templateObject_1$
|
|
3634
|
+
var FinalPriceStyledContainer$1 = newStyled.div(templateObject_1$28 || (templateObject_1$28 = __makeTemplateObject(["\n display: flex;\n margin-left: -5px;\n"], ["\n display: flex;\n margin-left: -5px;\n"])));
|
|
3637
3635
|
var PriceLabel = function (_a) {
|
|
3638
3636
|
var _b;
|
|
3639
3637
|
var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, color = _a.color, testId = _a.testId, _c = _a.originalPriceStyled, originalPriceStyled = _c === void 0 ? false : _c, _d = _a.originalPriceUnderlined, originalPriceUnderlined = _d === void 0 ? true : _d, _e = _a.size, size = _e === void 0 ? exports.ComponentSize.Small : _e, _f = _a.isClubOffer, isClubOffer = _f === void 0 ? false : _f, rest = __rest(_a, ["finalPrice", "originalPrice", "color", "testId", "originalPriceStyled", "originalPriceUnderlined", "size", "isClubOffer"]);
|
|
@@ -3667,9 +3665,9 @@ var PriceLabel = function (_a) {
|
|
|
3667
3665
|
marginTop: '-6px',
|
|
3668
3666
|
} }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }), void 0)] }), void 0));
|
|
3669
3667
|
};
|
|
3670
|
-
var templateObject_1$
|
|
3668
|
+
var templateObject_1$28;
|
|
3671
3669
|
|
|
3672
|
-
var FinalPriceStyledContainer = newStyled.div(templateObject_1$
|
|
3670
|
+
var FinalPriceStyledContainer = newStyled.div(templateObject_1$27 || (templateObject_1$27 = __makeTemplateObject(["\n display: flex;\n margin-left: -5px;\n"], ["\n display: flex;\n margin-left: -5px;\n"])));
|
|
3673
3671
|
var PriceLabelV2 = function (_a) {
|
|
3674
3672
|
var _b;
|
|
3675
3673
|
var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, color = _a.color, testId = _a.testId, _c = _a.originalPriceStyled, originalPriceStyled = _c === void 0 ? false : _c, _d = _a.originalPriceUnderlined, originalPriceUnderlined = _d === void 0 ? true : _d, _e = _a.size, size = _e === void 0 ? exports.ComponentSize.Small : _e, _f = _a.isClubOffer, isClubOffer = _f === void 0 ? false : _f, rest = __rest(_a, ["finalPrice", "originalPrice", "color", "testId", "originalPriceStyled", "originalPriceUnderlined", "size", "isClubOffer"]);
|
|
@@ -3702,11 +3700,11 @@ var PriceLabelV2 = function (_a) {
|
|
|
3702
3700
|
: (_b = "".concat(finalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1];
|
|
3703
3701
|
return (jsxRuntime.jsxs(Container$1i, __assign$1({}, rest, { children: [isOriginalPrice && !isClubOffer && jsxRuntime.jsx(OriginalPrice, {}, void 0), jsxRuntime.jsxs(FinalPriceStyledContainer, __assign$1({ "data-testid": getTestId$1(testId, 'final-product-price'), style: { marginLeft: '-3px' } }, { children: [jsxRuntime.jsxs(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size }, { children: [currencySymbol, finalPriceString] }), void 0), jsxRuntime.jsx(Price, __assign$1({ finalPriceStyledSmall: true }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }), void 0)] }), void 0));
|
|
3704
3702
|
};
|
|
3705
|
-
var templateObject_1$
|
|
3703
|
+
var templateObject_1$27;
|
|
3706
3704
|
|
|
3707
|
-
var ContainerWrapper$2 = newStyled.div(templateObject_1$
|
|
3708
|
-
var ImgWrapper = newStyled.div(templateObject_2$
|
|
3709
|
-
var templateObject_1$
|
|
3705
|
+
var ContainerWrapper$2 = newStyled.div(templateObject_1$26 || (templateObject_1$26 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 2px;\n"], ["\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 2px;\n"])));
|
|
3706
|
+
var ImgWrapper = newStyled.div(templateObject_2$1v || (templateObject_2$1v = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n width: 50px auto;\n height: 20px;\n opacity: 0px;\n position: relative;\n"], ["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n width: 50px auto;\n height: 20px;\n opacity: 0px;\n position: relative;\n"])));
|
|
3707
|
+
var templateObject_1$26, templateObject_2$1v;
|
|
3710
3708
|
|
|
3711
3709
|
function ClubPriceMemberLabel(_a) {
|
|
3712
3710
|
var isClub = _a.isClub, _b = _a.isPDP, isPDP = _b === void 0 ? false : _b, icon = _a.icon, _c = _a.isCollections, isCollections = _c === void 0 ? false : _c, rest = __rest(_a, ["isClub", "isPDP", "icon", "isCollections"]);
|
|
@@ -3715,7 +3713,7 @@ function ClubPriceMemberLabel(_a) {
|
|
|
3715
3713
|
return (jsxRuntime.jsx("div", { children: isClub ? (jsxRuntime.jsxs(ContainerWrapper$2, __assign$1({ id: "priceMemberLabelWrapper" }, { children: [PriceComponent, jsxRuntime.jsx(ImgWrapper, __assign$1({ id: "priceMemberLabelImgWrapper" }, { children: icon }), void 0)] }), void 0)) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: PriceComponent }, void 0)) }, void 0));
|
|
3716
3714
|
}
|
|
3717
3715
|
|
|
3718
|
-
var Container$1h = newStyled.div(templateObject_1$
|
|
3716
|
+
var Container$1h = newStyled.div(templateObject_1$25 || (templateObject_1$25 = __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) {
|
|
3719
3717
|
var height = _a.height;
|
|
3720
3718
|
return height !== null && height !== void 0 ? height : '1.5em';
|
|
3721
3719
|
}, function (_a) {
|
|
@@ -3742,9 +3740,9 @@ var SkeletonBox = function (_a) {
|
|
|
3742
3740
|
var theme = useTheme();
|
|
3743
3741
|
return jsxRuntime.jsx(Container$1h, { "data-testid": "skeleton-container", width: width, height: height, theme: theme }, void 0);
|
|
3744
3742
|
};
|
|
3745
|
-
var templateObject_1$
|
|
3743
|
+
var templateObject_1$25;
|
|
3746
3744
|
|
|
3747
|
-
var StyledSvgWrapper = newStyled.svg(templateObject_1$
|
|
3745
|
+
var StyledSvgWrapper = newStyled.svg(templateObject_1$24 || (templateObject_1$24 = __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) {
|
|
3748
3746
|
var width = _a.width;
|
|
3749
3747
|
return width;
|
|
3750
3748
|
}, function (_a) {
|
|
@@ -3760,7 +3758,7 @@ var StyledSvgWrapper = newStyled.svg(templateObject_1$25 || (templateObject_1$25
|
|
|
3760
3758
|
var opacity = _a.opacity;
|
|
3761
3759
|
return opacity && "opacity: ".concat(opacity, ";");
|
|
3762
3760
|
});
|
|
3763
|
-
var StyledImageWrapper = newStyled.img(templateObject_2$
|
|
3761
|
+
var StyledImageWrapper = newStyled.img(templateObject_2$1u || (templateObject_2$1u = __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) {
|
|
3764
3762
|
var width = _a.width;
|
|
3765
3763
|
return width;
|
|
3766
3764
|
}, function (_a) {
|
|
@@ -3773,7 +3771,7 @@ var StyledImageWrapper = newStyled.img(templateObject_2$1t || (templateObject_2$
|
|
|
3773
3771
|
var opacity = _a.opacity;
|
|
3774
3772
|
return opacity && "opacity: ".concat(opacity, ";");
|
|
3775
3773
|
});
|
|
3776
|
-
var templateObject_1$
|
|
3774
|
+
var templateObject_1$24, templateObject_2$1u;
|
|
3777
3775
|
|
|
3778
3776
|
/* eslint-disable no-undef */
|
|
3779
3777
|
var cache = new Map();
|
|
@@ -3949,7 +3947,7 @@ var buildImageUrl = function (_a) {
|
|
|
3949
3947
|
}
|
|
3950
3948
|
};
|
|
3951
3949
|
|
|
3952
|
-
var Img = newStyled.img(templateObject_1$
|
|
3950
|
+
var Img = newStyled.img(templateObject_1$23 || (templateObject_1$23 = __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; });
|
|
3953
3951
|
var Image$3 = function (_a) {
|
|
3954
3952
|
var src = _a.src, srcSet = _a.srcSet, _b = _a.sizes, sizes = _b === void 0 ? '100vw' : _b, _c = _a.loading, loading = _c === void 0 ? 'lazy' : _c, _d = _a.decoding, decoding = _d === void 0 ? 'async' : _d, alt = _a.alt, height = _a.height, width = _a.width, borderRadius = _a.borderRadius, objectFit = _a.objectFit, objectPosition = _a.objectPosition, quality = _a.quality, rest = __rest(_a, ["src", "srcSet", "sizes", "loading", "decoding", "alt", "height", "width", "borderRadius", "objectFit", "objectPosition", "quality"]);
|
|
3955
3953
|
var config = useTheme().config;
|
|
@@ -3958,12 +3956,12 @@ var Image$3 = function (_a) {
|
|
|
3958
3956
|
: src;
|
|
3959
3957
|
return (jsxRuntime.jsx(Img, __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));
|
|
3960
3958
|
};
|
|
3961
|
-
var templateObject_1$
|
|
3959
|
+
var templateObject_1$23;
|
|
3962
3960
|
|
|
3963
|
-
var LabelWrapper = newStyled.label(templateObject_1$
|
|
3964
|
-
var SwitchWrapper = newStyled.div(templateObject_2$
|
|
3961
|
+
var LabelWrapper = newStyled.label(templateObject_1$22 || (templateObject_1$22 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: 10px;\n cursor: pointer;\n"], ["\n display: flex;\n align-items: center;\n gap: 10px;\n cursor: pointer;\n"])));
|
|
3962
|
+
var SwitchWrapper = newStyled.div(templateObject_2$1t || (templateObject_2$1t = __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"])));
|
|
3965
3963
|
var InputWrapper$1 = newStyled.input(templateObject_3$19 || (templateObject_3$19 = __makeTemplateObject(["\n opacity: 0;\n position: absolute;\n\n &:checked + div {\n background: #882a2b;\n\n &:before {\n transform: translate(14.5px, -50%);\n }\n }\n"], ["\n opacity: 0;\n position: absolute;\n\n &:checked + div {\n background: #882a2b;\n\n &:before {\n transform: translate(14.5px, -50%);\n }\n }\n"])));
|
|
3966
|
-
var templateObject_1$
|
|
3964
|
+
var templateObject_1$22, templateObject_2$1t, templateObject_3$19;
|
|
3967
3965
|
|
|
3968
3966
|
var ToggleComponent = function (_a) {
|
|
3969
3967
|
var onToggle = _a.onToggle, _b = _a.isChecked, isChecked = _b === void 0 ? false : _b;
|
|
@@ -4797,8 +4795,8 @@ function jsxs(type, props, key) {
|
|
|
4797
4795
|
// This defines which HTML tag to render for each `variant`, it also defines
|
|
4798
4796
|
// `variants` styles that are consistent through all themes.
|
|
4799
4797
|
var TAGS = {
|
|
4800
|
-
hero1: newStyled.h1(templateObject_1$
|
|
4801
|
-
hero2: newStyled.h2(templateObject_2$
|
|
4798
|
+
hero1: newStyled.h1(templateObject_1$21 || (templateObject_1$21 = __makeTemplateObject([""], [""]))),
|
|
4799
|
+
hero2: newStyled.h2(templateObject_2$1s || (templateObject_2$1s = __makeTemplateObject([""], [""]))),
|
|
4802
4800
|
hero3: newStyled.h3(templateObject_3$18 || (templateObject_3$18 = __makeTemplateObject([""], [""]))),
|
|
4803
4801
|
display1: newStyled.h1(templateObject_4$W || (templateObject_4$W = __makeTemplateObject([""], [""]))),
|
|
4804
4802
|
display2: newStyled.h2(templateObject_5$H || (templateObject_5$H = __makeTemplateObject([""], [""]))),
|
|
@@ -4933,10 +4931,10 @@ var DEFAULTS = {
|
|
|
4933
4931
|
size: 'regular',
|
|
4934
4932
|
},
|
|
4935
4933
|
};
|
|
4936
|
-
var templateObject_1$
|
|
4934
|
+
var templateObject_1$21, templateObject_2$1s, templateObject_3$18, templateObject_4$W, templateObject_5$H, templateObject_6$C, templateObject_7$s, templateObject_8$m, templateObject_9$c, templateObject_10$b, templateObject_11$8, templateObject_12$5, templateObject_13$5, templateObject_14$3, templateObject_15$2, templateObject_16$2, templateObject_17$2, templateObject_18$2, templateObject_19$2, templateObject_20$1;
|
|
4937
4935
|
|
|
4938
|
-
var Container$1g = newStyled.div(templateObject_1$
|
|
4939
|
-
var Card$4 = newStyled.div(templateObject_2$
|
|
4936
|
+
var Container$1g = newStyled.div(templateObject_1$20 || (templateObject_1$20 = __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"])));
|
|
4937
|
+
var Card$4 = newStyled.div(templateObject_2$1r || (templateObject_2$1r = __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"])));
|
|
4940
4938
|
var Tag$2 = newStyled.div(templateObject_3$17 || (templateObject_3$17 = __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"])));
|
|
4941
4939
|
var Label$7 = newStyled.div(templateObject_4$V || (templateObject_4$V = __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"])));
|
|
4942
4940
|
var Check$1 = newStyled.div(templateObject_5$G || (templateObject_5$G = __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"])));
|
|
@@ -4965,27 +4963,27 @@ var PackCard$1 = function (_a) {
|
|
|
4965
4963
|
currency: currencyCode || 'USD',
|
|
4966
4964
|
}), ' ', "each", ')'] }), void 0)) : null] }, void 0)] }), void 0));
|
|
4967
4965
|
};
|
|
4968
|
-
var templateObject_1$
|
|
4966
|
+
var templateObject_1$20, templateObject_2$1r, templateObject_3$17, templateObject_4$V, templateObject_5$G, templateObject_6$B;
|
|
4969
4967
|
|
|
4970
|
-
var Container$1f = newStyled.div(templateObject_1$
|
|
4971
|
-
var DropContainer = newStyled.div(templateObject_2$
|
|
4968
|
+
var Container$1f = newStyled.div(templateObject_1$1$ || (templateObject_1$1$ = __makeTemplateObject(["\n height: 32px;\n display: flex;\n align-items: center;\n"], ["\n height: 32px;\n display: flex;\n align-items: center;\n"])));
|
|
4969
|
+
var DropContainer = newStyled.div(templateObject_2$1q || (templateObject_2$1q = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
4972
4970
|
var DropList = function (_a) {
|
|
4973
4971
|
var dropTotal = _a.dropTotal, drops = _a.drops;
|
|
4974
4972
|
return (jsxRuntime.jsx(Container$1f, { children: __spreadArray([], new Array(dropTotal), true).map(function (_, index) {
|
|
4975
4973
|
return (jsxRuntime.jsx(DropContainer, __assign$1({ "data-testid": "star-container" }, { children: index < Math.floor(drops) ? (jsxRuntime.jsx(Icon.PDP.Drop, { width: 0.875, height: 0.875 }, void 0)) : (jsxRuntime.jsx(Icon.PDP.DropEmpty, { width: 0.875, height: 0.875 }, void 0)) }), index));
|
|
4976
4974
|
}) }, void 0));
|
|
4977
4975
|
};
|
|
4978
|
-
var templateObject_1$
|
|
4976
|
+
var templateObject_1$1$, templateObject_2$1q;
|
|
4979
4977
|
|
|
4980
4978
|
var DROPS_TOTAL = 5;
|
|
4981
|
-
var Container$1e = newStyled.div(templateObject_1$
|
|
4982
|
-
var Title$b = newStyled.p(templateObject_2$
|
|
4979
|
+
var Container$1e = newStyled.div(templateObject_1$1_ || (templateObject_1$1_ = __makeTemplateObject(["\n height: 32px;\n display: flex;\n"], ["\n height: 32px;\n display: flex;\n"])));
|
|
4980
|
+
var Title$b = newStyled.p(templateObject_2$1p || (templateObject_2$1p = __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"])));
|
|
4983
4981
|
var Description$3 = newStyled.p(templateObject_3$16 || (templateObject_3$16 = __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"])));
|
|
4984
4982
|
var AbsorbencyLevel = function (_a) {
|
|
4985
4983
|
var dropTotal = _a.dropTotal, drops = _a.drops, absorbencyTitle = _a.absorbencyTitle, absorbencyDescription = _a.absorbencyDescription;
|
|
4986
4984
|
return (jsxRuntime.jsxs(Container$1e, { children: [jsxRuntime.jsx(Title$b, { children: absorbencyTitle }, void 0), jsxRuntime.jsx(DropList, { dropTotal: dropTotal || DROPS_TOTAL, drops: drops }, void 0), jsxRuntime.jsx(Description$3, { children: absorbencyDescription }, void 0)] }, void 0));
|
|
4987
4985
|
};
|
|
4988
|
-
var templateObject_1$
|
|
4986
|
+
var templateObject_1$1_, templateObject_2$1p, templateObject_3$16;
|
|
4989
4987
|
|
|
4990
4988
|
function k$1(){let e=[],t=[],r={enqueue(o){t.push(o);},requestAnimationFrame(...o){let n=requestAnimationFrame(...o);r.add(()=>cancelAnimationFrame(n));},nextFrame(...o){r.requestAnimationFrame(()=>{r.requestAnimationFrame(...o);});},setTimeout(...o){let n=setTimeout(...o);r.add(()=>clearTimeout(n));},add(o){e.push(o);},dispose(){for(let o of e.splice(0))o();},async workQueue(){for(let o of t.splice(0))await o();}};return r}function Q(){let[e]=React$2.useState(k$1);return React$2.useEffect(()=>()=>e.dispose(),[e]),e}var x$1=typeof window!="undefined"?React$2.useLayoutEffect:React$2.useEffect;var yt={serverHandoffComplete:!1};function q$1(){let[e,t]=React$2.useState(yt.serverHandoffComplete);return React$2.useEffect(()=>{e!==!0&&t(!0);},[e]),React$2.useEffect(()=>{yt.serverHandoffComplete===!1&&(yt.serverHandoffComplete=!0);},[]),e}var or=0;function to(){return ++or}function A$1(){let e=q$1(),[t,r]=React$2.useState(e?to:null);return x$1(()=>{t===null&&r(to());},[t]),t!=null?""+t:void 0}function ke(e){let t=React$2.useRef(e);return React$2.useEffect(()=>{t.current=e;},[e]),t}function ee(e,t){let[r,o]=React$2.useState(e),n=ke(e);return x$1(()=>o(n.current),[n,o,...t]),r}function I(...e){let t=React$2.useRef(e);return React$2.useEffect(()=>{t.current=e;},[e]),React$2.useCallback(r=>{for(let o of t.current)o!=null&&(typeof o=="function"?o(r):o.current=r);},[t])}function S(e,t,...r){if(e in t){let n=t[e];return typeof n=="function"?n(...r):n}let o=new Error(`Tried to handle "${e}" but there is no handler defined. Only defined handlers are: ${Object.keys(t).map(n=>`"${n}"`).join(", ")}.`);throw Error.captureStackTrace&&Error.captureStackTrace(o,S),o}function E({props:e,slot:t,defaultTag:r,features:o,visible:n=!0,name:i}){if(n)return _e(e,t,r,i);let a=o!=null?o:0;if(a&2){let{static:l=!1,...s}=e;if(l)return _e(s,t,r,i)}if(a&1){let{unmount:l=!0,...s}=e;return S(l?0:1,{[0](){return null},[1](){return _e({...s,hidden:!0,style:{display:"none"}},t,r,i)}})}return _e(e,t,r,i)}function _e(e,t={},r,o){let{as:n=r,children:i,refName:a="ref",...l}=gt(e,["unmount","static"]),s=e.ref!==void 0?{[a]:e.ref}:{},u=typeof i=="function"?i(t):i;if(l.className&&typeof l.className=="function"&&(l.className=l.className(t)),n===React$2.Fragment&&Object.keys(l).length>0){if(!React$2.isValidElement(u)||Array.isArray(u)&&u.length>1)throw new Error(['Passing props on "Fragment"!',"",`The current component <${o} /> is rendering a "Fragment".`,"However we need to passthrough the following props:",Object.keys(l).map(c=>` - ${c}`).join(`
|
|
4991
4989
|
`),"","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(`
|
|
@@ -5061,7 +5059,7 @@ var StyledButton$3 = newStyled(Ye.Button)(AccordionSummaryStyles.baseStyles, fun
|
|
|
5061
5059
|
AccordionSummaryStyles[props.variant](props.theme, props.disabled, props.controlIconPos),
|
|
5062
5060
|
]; }, function (props) { return [AccordionSummaryStyles.title(props.titlecolor)]; });
|
|
5063
5061
|
var StyledPanel$1 = newStyled(Ye.Panel)(AccordionDetailsStyles.baseStyles, function (props) { return [AccordionDetailsStyles[props.variant](props.theme)]; });
|
|
5064
|
-
var StyledContent$1 = newStyled.button(templateObject_1$
|
|
5062
|
+
var StyledContent$1 = newStyled.button(templateObject_1$1Z || (templateObject_1$1Z = __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"])));
|
|
5065
5063
|
var Accordion$1 = function (_a) {
|
|
5066
5064
|
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;
|
|
5067
5065
|
var theme = useTheme();
|
|
@@ -5085,9 +5083,9 @@ var Accordion$1 = function (_a) {
|
|
|
5085
5083
|
} }, { children: jsxRuntime.jsx(ControlIcon, { title: "close icon", height: theme.component.accordion.variant[variant].icon.height, width: theme.component.accordion.variant[variant].icon.width, fill: theme.component.accordion.variant[variant].icon.color }, void 0) }), void 0)] }, void 0))] }), void 0), controlIconPos === 'right' && showPanel && (jsxRuntime.jsx(StyledContent$1, __assign$1({ onClick: function (e) { return e.stopPropagation(); } }, { children: !innerHTML ? (jsxRuntime.jsx(StyledPanel$1, __assign$1({ static: true, variant: variant, theme: theme }, { children: content }), void 0)) : (jsxRuntime.jsx("div", { dangerouslySetInnerHTML: { __html: content } }, void 0)) }), void 0))] }, void 0));
|
|
5086
5084
|
} }), void 0));
|
|
5087
5085
|
};
|
|
5088
|
-
var templateObject_1$
|
|
5086
|
+
var templateObject_1$1Z;
|
|
5089
5087
|
|
|
5090
|
-
var Container$1d = newStyled.div(templateObject_1$
|
|
5088
|
+
var Container$1d = newStyled.div(templateObject_1$1Y || (templateObject_1$1Y = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 16px;\n"], ["\n display: flex;\n flex-direction: column;\n gap: 16px;\n"])));
|
|
5091
5089
|
var AccordionOptions = function (_a) {
|
|
5092
5090
|
var titleColor = _a.titleColor, accordions = _a.accordions;
|
|
5093
5091
|
var _b = React$2.useState({
|
|
@@ -5111,7 +5109,7 @@ var AccordionOptions = function (_a) {
|
|
|
5111
5109
|
} }, accordion, { forceOpenHandler: true, forceOpenValue: getForceOpen(index), titleColor: accordionTitleColor }), "accordion-".concat(index)));
|
|
5112
5110
|
}) }, void 0));
|
|
5113
5111
|
};
|
|
5114
|
-
var templateObject_1$
|
|
5112
|
+
var templateObject_1$1Y;
|
|
5115
5113
|
|
|
5116
5114
|
/**
|
|
5117
5115
|
* @returns number formatted with "," and 2 decimals as string
|
|
@@ -5247,22 +5245,22 @@ var isValidDate = function (value) {
|
|
|
5247
5245
|
return /^\d{4}-\d{2}-\d{2}$/.test(value);
|
|
5248
5246
|
};
|
|
5249
5247
|
|
|
5250
|
-
var Bold = newStyled.span(templateObject_1$
|
|
5251
|
-
var FlexContainer$3 = newStyled.div(templateObject_2$
|
|
5252
|
-
var templateObject_1$
|
|
5248
|
+
var Bold = newStyled.span(templateObject_1$1X || (templateObject_1$1X = __makeTemplateObject(["\n font-weight: bold;\n"], ["\n font-weight: bold;\n"])));
|
|
5249
|
+
var FlexContainer$3 = newStyled.div(templateObject_2$1o || (templateObject_2$1o = __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"])));
|
|
5250
|
+
var templateObject_1$1X, templateObject_2$1o;
|
|
5253
5251
|
|
|
5254
|
-
var Container$1c = newStyled.div(templateObject_1$
|
|
5252
|
+
var Container$1c = newStyled.div(templateObject_1$1W || (templateObject_1$1W = __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) {
|
|
5255
5253
|
var _b = _a.width, width = _b === void 0 ? '100%' : _b;
|
|
5256
5254
|
return width;
|
|
5257
5255
|
}, function (_a) {
|
|
5258
5256
|
var _b = _a.height, height = _b === void 0 ? '100%' : _b;
|
|
5259
5257
|
return height;
|
|
5260
5258
|
});
|
|
5261
|
-
var FlexCentered = newStyled.div(templateObject_2$
|
|
5259
|
+
var FlexCentered = newStyled.div(templateObject_2$1n || (templateObject_2$1n = __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"])));
|
|
5262
5260
|
var LeftSide = newStyled.div(templateObject_3$15 || (templateObject_3$15 = __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"])));
|
|
5263
5261
|
var RightSide = newStyled.div(templateObject_4$U || (templateObject_4$U = __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"])));
|
|
5264
5262
|
var FlexStart = newStyled.div(templateObject_5$F || (templateObject_5$F = __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"])));
|
|
5265
|
-
var templateObject_1$
|
|
5263
|
+
var templateObject_1$1W, templateObject_2$1n, templateObject_3$15, templateObject_4$U, templateObject_5$F;
|
|
5266
5264
|
|
|
5267
5265
|
var CouponCard = function (_a) {
|
|
5268
5266
|
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;
|
|
@@ -5318,14 +5316,14 @@ var CancellationFlowAccordionContentPerPartner = {
|
|
|
5318
5316
|
TheBodCon: [cancellationFlowContentPerKey['TheBodCon']],
|
|
5319
5317
|
};
|
|
5320
5318
|
|
|
5321
|
-
var ErrorText = newStyled.h3(templateObject_1$
|
|
5322
|
-
var ErrorContainer = newStyled.div(templateObject_2$
|
|
5319
|
+
var ErrorText = newStyled.h3(templateObject_1$1V || (templateObject_1$1V = __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; });
|
|
5320
|
+
var ErrorContainer = newStyled.div(templateObject_2$1m || (templateObject_2$1m = __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"])));
|
|
5323
5321
|
var Error$1 = function (_a) {
|
|
5324
5322
|
var error = _a.error;
|
|
5325
5323
|
var theme = useTheme();
|
|
5326
5324
|
return (jsxRuntime.jsxs(ErrorContainer, { children: [jsxRuntime.jsx(Icon.Actions.LightExclamation, { fill: theme.colors.semantic.urgent.color, width: 0.875, height: 0.875 }, void 0), jsxRuntime.jsx(ErrorText, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: error }), void 0)] }, void 0));
|
|
5327
5325
|
};
|
|
5328
|
-
var templateObject_1$
|
|
5326
|
+
var templateObject_1$1V, templateObject_2$1m;
|
|
5329
5327
|
|
|
5330
5328
|
var BaseSelectButton = function (_a) {
|
|
5331
5329
|
var children = _a.children, as = _a.as;
|
|
@@ -5342,7 +5340,7 @@ function BaseSelectOption(_a) {
|
|
|
5342
5340
|
return (jsxRuntime.jsx(Ee.Option, __assign$1({ className: className, as: as, value: value, disabled: disabled }, { children: children }), void 0));
|
|
5343
5341
|
}
|
|
5344
5342
|
|
|
5345
|
-
var CustomListBox = newStyled(Ee)(templateObject_1$
|
|
5343
|
+
var CustomListBox = newStyled(Ee)(templateObject_1$1U || (templateObject_1$1U = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
5346
5344
|
function BaseSelect(_a) {
|
|
5347
5345
|
var value = _a.value, onChange = _a.onChange, disabled = _a.disabled, children = _a.children, className = _a.className;
|
|
5348
5346
|
return (jsxRuntime.jsx(CustomListBox, __assign$1({ disabled: disabled, as: "div", value: value, onChange: onChange, className: className }, { children: children }), void 0));
|
|
@@ -5352,7 +5350,7 @@ var BaseSelect$1 = Object.assign(BaseSelect, {
|
|
|
5352
5350
|
Options: BaseSelectOptions,
|
|
5353
5351
|
Option: BaseSelectOption,
|
|
5354
5352
|
});
|
|
5355
|
-
var templateObject_1$
|
|
5353
|
+
var templateObject_1$1U;
|
|
5356
5354
|
|
|
5357
5355
|
var CustomButton = newStyled.button(function (_a) {
|
|
5358
5356
|
var theme = _a.theme, wide = _a.wide, isSortOrFilter = _a.isSortOrFilter;
|
|
@@ -5391,7 +5389,7 @@ var CustomButton = newStyled.button(function (_a) {
|
|
|
5391
5389
|
});
|
|
5392
5390
|
});
|
|
5393
5391
|
// TODO Remove this when we find the real solution
|
|
5394
|
-
var StyledIcon$1 = newStyled.span(templateObject_1$
|
|
5392
|
+
var StyledIcon$1 = newStyled.span(templateObject_1$1T || (templateObject_1$1T = __makeTemplateObject(["\n [data-testid='CloseIcon'] {\n display: none;\n }\n ", "\n"], ["\n [data-testid='CloseIcon'] {\n display: none;\n }\n ", "\n"])), function (_a) {
|
|
5395
5393
|
var open = _a.open;
|
|
5396
5394
|
return open &&
|
|
5397
5395
|
"\n [data-testid=\"CloseIcon\"] {\n display: block;\n }\n [data-testid=\"OpenIcon\"] {\n display: none;\n }\n";
|
|
@@ -5411,7 +5409,7 @@ var BaseDropdownButton = function (_a) {
|
|
|
5411
5409
|
} }), void 0));
|
|
5412
5410
|
};
|
|
5413
5411
|
var BaseDropdownButton$1 = React__default["default"].memo(BaseDropdownButton);
|
|
5414
|
-
var templateObject_1$
|
|
5412
|
+
var templateObject_1$1T;
|
|
5415
5413
|
|
|
5416
5414
|
var DropdownOptions$1 = newStyled(BaseSelect$1.Options)(function (_a) {
|
|
5417
5415
|
var theme = _a.theme;
|
|
@@ -5578,7 +5576,7 @@ var CustomCheckboxStyles = {
|
|
|
5578
5576
|
},
|
|
5579
5577
|
};
|
|
5580
5578
|
|
|
5581
|
-
var Container$1b = newStyled.div(templateObject_1$
|
|
5579
|
+
var Container$1b = newStyled.div(templateObject_1$1S || (templateObject_1$1S = __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"])));
|
|
5582
5580
|
var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (props) { return [
|
|
5583
5581
|
CustomCheckboxStyles[props.size](props.theme),
|
|
5584
5582
|
CustomCheckboxStyles[props.variant](props.theme, props.isChecked, props.disabled),
|
|
@@ -5589,7 +5587,7 @@ var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (pr
|
|
|
5589
5587
|
? "\n svg {\n path {\n fill: var(--colors-shades-black-color);\n }\n }"
|
|
5590
5588
|
: '', "\n ").concat(props.text === 'White' ? "border: 0.27px var(--colors-shades-300-color) solid;" : ''),
|
|
5591
5589
|
]; });
|
|
5592
|
-
var Input$5 = newStyled.input(templateObject_2$
|
|
5590
|
+
var Input$5 = newStyled.input(templateObject_2$1l || (templateObject_2$1l = __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) {
|
|
5593
5591
|
var disabled = _a.disabled;
|
|
5594
5592
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
5595
5593
|
});
|
|
@@ -5605,7 +5603,7 @@ var Checkbox = function (_a) {
|
|
|
5605
5603
|
};
|
|
5606
5604
|
return (jsxRuntime.jsxs(Container$1b, { children: [jsxRuntime.jsx(Input$5, { type: "checkbox", checked: checked, disabled: disabled, onChange: handleChange, id: id }, void 0), jsxRuntime.jsx(CustomCheckbox, __assign$1({ theme: theme, size: size, disabled: disabled, isChecked: checked, "data-testid": "checkbox", variant: variant, backgroundColor: backgroundColor, text: text }, { children: checked && jsxRuntime.jsx(Icon.Actions.Check, { fill: "#fff" }, void 0) }), void 0), jsxRuntime.jsx(Label$6, __assign$1({ "data-testid": "checkbox-text", size: size, variant: checked ? 'demi' : 'regular', htmlFor: id, disabled: disabled }, { children: text }), void 0)] }, void 0));
|
|
5607
5605
|
};
|
|
5608
|
-
var templateObject_1$
|
|
5606
|
+
var templateObject_1$1S, templateObject_2$1l;
|
|
5609
5607
|
|
|
5610
5608
|
var CustomOption = newStyled.li(function (_a) {
|
|
5611
5609
|
var theme = _a.theme, selected = _a.selected, active = _a.active, hasImage = _a.hasImage;
|
|
@@ -5654,8 +5652,8 @@ var BaseDropdown$1 = Object.assign(BaseDropdown, {
|
|
|
5654
5652
|
Option: BaseDropdownOption,
|
|
5655
5653
|
});
|
|
5656
5654
|
|
|
5657
|
-
var Container$1a = newStyled.div(templateObject_1$
|
|
5658
|
-
var RequiredPlaceholder = newStyled.p(templateObject_2$
|
|
5655
|
+
var Container$1a = newStyled.div(templateObject_1$1R || (templateObject_1$1R = __makeTemplateObject([""], [""])));
|
|
5656
|
+
var RequiredPlaceholder = newStyled.p(templateObject_2$1k || (templateObject_2$1k = __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"])));
|
|
5659
5657
|
var SelectedOption = newStyled.span(templateObject_3$14 || (templateObject_3$14 = __makeTemplateObject(["\n font-weight: ", ";\n"], ["\n font-weight: ", ";\n"])), function (_a) {
|
|
5660
5658
|
var fontWeight = _a.fontWeight;
|
|
5661
5659
|
return fontWeight || '';
|
|
@@ -5691,7 +5689,7 @@ function SimpleDropdown(_a) {
|
|
|
5691
5689
|
var DropdownContainer = showRequiredPlaceholder ? Container$1a : React$2.Fragment;
|
|
5692
5690
|
return (jsxRuntime.jsxs(DropdownContainer, { children: [jsxRuntime.jsxs(BaseDropdown$1, __assign$1({ value: selectedValue, onChange: onChangeHandler, disabled: disabled, wide: wide }, { children: [jsxRuntime.jsxs(BaseDropdown$1.Button, __assign$1({ label: label, OpenIcon: Icon.Arrows.ChevronDown, CloseIcon: Icon.Arrows.ChevronUp, wide: wide, isSortOrFilter: sort, testId: testId }, { children: [!!(selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.imageURL) && (jsxRuntime.jsx("img", { src: selectedValue.imageURL, alt: selectedValue.label, style: { paddingRight: 8 } }, void 0)), selectedOptionWeight && disabled ? (jsxRuntime.jsx(SelectedOption, __assign$1({ fontWeight: selectedOptionWeight }, { children: selectedOptionLabel }), void 0)) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: selectedOptionLabel }, void 0))] }), void 0), jsxRuntime.jsx(BaseDropdown$1.Options, { children: options.map(function (item) { return (jsxRuntime.jsxs(BaseDropdown$1.Option, __assign$1({ value: item, disabled: item.disabled, hasImage: !!item.imageURL }, { children: [!!item.imageURL && (jsxRuntime.jsx("img", { src: item.imageURL, alt: item.label, style: { paddingRight: 8 } }, void 0)), item.label] }), item.key)); }) }, void 0)] }), void 0), !!required && jsxRuntime.jsx(Error$1, { error: required }, void 0)] }, void 0));
|
|
5693
5691
|
}
|
|
5694
|
-
var templateObject_1$
|
|
5692
|
+
var templateObject_1$1R, templateObject_2$1k, templateObject_3$14;
|
|
5695
5693
|
|
|
5696
5694
|
/* base styles & size variants */
|
|
5697
5695
|
var CustomRadioStyles$2 = {
|
|
@@ -5756,9 +5754,9 @@ var ContainerStyles$2 = {
|
|
|
5756
5754
|
},
|
|
5757
5755
|
};
|
|
5758
5756
|
|
|
5759
|
-
var Wrapper$7 = newStyled.div(templateObject_1$
|
|
5757
|
+
var Wrapper$7 = newStyled.div(templateObject_1$1Q || (templateObject_1$1Q = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
5760
5758
|
var Container$19 = newStyled.div(__assign$1({}, ContainerStyles$2.baseStyles), function (props) { return [ContainerStyles$2[props.size](props.theme)]; });
|
|
5761
|
-
var Input$4 = newStyled.input(templateObject_2$
|
|
5759
|
+
var Input$4 = newStyled.input(templateObject_2$1j || (templateObject_2$1j = __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) {
|
|
5762
5760
|
var disabled = _a.disabled;
|
|
5763
5761
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
5764
5762
|
});
|
|
@@ -5789,7 +5787,7 @@ var RadioInput = function (_a) {
|
|
|
5789
5787
|
};
|
|
5790
5788
|
return (jsxRuntime.jsxs(Wrapper$7, { children: [jsxRuntime.jsxs(Container$19, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsxRuntime.jsx(Input$4, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled, style: style }, void 0), jsxRuntime.jsx(CustomRadio$2, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), useV2Style ? (jsxRuntime.jsx(StyledLabelV2, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled, style: labelStyle }, { children: label }), void 0)) : (jsxRuntime.jsx(StyledLabel$3, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0))] }, void 0));
|
|
5791
5789
|
};
|
|
5792
|
-
var templateObject_1$
|
|
5790
|
+
var templateObject_1$1Q, templateObject_2$1j, templateObject_3$13, templateObject_4$T;
|
|
5793
5791
|
|
|
5794
5792
|
var useOnClickOutside = function (ref, handler) {
|
|
5795
5793
|
React$2.useEffect(function () {
|
|
@@ -5882,7 +5880,7 @@ var getTooltipAlignItems = function (position, align) {
|
|
|
5882
5880
|
}
|
|
5883
5881
|
};
|
|
5884
5882
|
|
|
5885
|
-
var Wrapper$6 = newStyled.div(templateObject_1$
|
|
5883
|
+
var Wrapper$6 = newStyled.div(templateObject_1$1P || (templateObject_1$1P = __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) {
|
|
5886
5884
|
var position = _a.position;
|
|
5887
5885
|
return getWrapperFlexDirection(position);
|
|
5888
5886
|
}, function (_a) {
|
|
@@ -5892,7 +5890,7 @@ var Wrapper$6 = newStyled.div(templateObject_1$1Q || (templateObject_1$1Q = __ma
|
|
|
5892
5890
|
var disableHover = _a.disableHover;
|
|
5893
5891
|
return (disableHover ? 0 : 1);
|
|
5894
5892
|
});
|
|
5895
|
-
var TooltipContainer = newStyled.div(templateObject_2$
|
|
5893
|
+
var TooltipContainer = newStyled.div(templateObject_2$1i || (templateObject_2$1i = __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) {
|
|
5896
5894
|
var position = _a.position;
|
|
5897
5895
|
return getContainerFlexDirection(position);
|
|
5898
5896
|
}, function (_a) {
|
|
@@ -5947,7 +5945,7 @@ var CloseToolTip = newStyled.button(templateObject_8$l || (templateObject_8$l =
|
|
|
5947
5945
|
var _b = _a.right, right = _b === void 0 ? '.3rem' : _b;
|
|
5948
5946
|
return right;
|
|
5949
5947
|
});
|
|
5950
|
-
var templateObject_1$
|
|
5948
|
+
var templateObject_1$1P, templateObject_2$1i, templateObject_3$12, templateObject_4$S, templateObject_5$E, templateObject_6$A, templateObject_7$r, templateObject_8$l;
|
|
5951
5949
|
|
|
5952
5950
|
var Tooltip = function (_a) {
|
|
5953
5951
|
var _b;
|
|
@@ -5990,8 +5988,8 @@ var benefitsColorMapper = function (_a) {
|
|
|
5990
5988
|
};
|
|
5991
5989
|
};
|
|
5992
5990
|
|
|
5993
|
-
var FlexContainer$2 = newStyled.div(templateObject_1$
|
|
5994
|
-
var ContainerBase$2 = newStyled.div(templateObject_2$
|
|
5991
|
+
var FlexContainer$2 = newStyled.div(templateObject_1$1O || (templateObject_1$1O = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5992
|
+
var ContainerBase$2 = newStyled.div(templateObject_2$1h || (templateObject_2$1h = __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) {
|
|
5995
5993
|
var selected = _a.selected, theme = _a.theme;
|
|
5996
5994
|
return selected
|
|
5997
5995
|
? "2px solid ".concat(theme.colors.pallete.primary.color)
|
|
@@ -6028,7 +6026,7 @@ var StyledPrice$2 = newStyled(PriceLabelV2$1)(templateObject_12$4 || (templateOb
|
|
|
6028
6026
|
return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
|
|
6029
6027
|
});
|
|
6030
6028
|
var Container$18 = newStyled.div(templateObject_13$4 || (templateObject_13$4 = __makeTemplateObject([""], [""])));
|
|
6031
|
-
var templateObject_1$
|
|
6029
|
+
var templateObject_1$1O, templateObject_2$1h, templateObject_3$11, templateObject_4$R, templateObject_5$D, templateObject_6$z, templateObject_7$q, templateObject_8$k, templateObject_9$b, templateObject_10$a, templateObject_11$7, templateObject_12$4, templateObject_13$4;
|
|
6032
6030
|
|
|
6033
6031
|
var radioIds$2 = {
|
|
6034
6032
|
oneTime: {
|
|
@@ -6083,12 +6081,12 @@ var Autoship = function (_a) {
|
|
|
6083
6081
|
: benefitsColor.base }, void 0), jsxRuntime.jsx(BenefitText$2, __assign$1({ variant: "body" }, { children: benefit }), void 0)] }, benefit)); }) }, void 0), radioIds$2.autoship.id === radioCheck.id && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(FlexContainer$2, { children: [jsxRuntime.jsx(DeliveryFrequencyLabel$1, __assign$1({ variant: "body" }, { children: "Deliver every:" }), void 0), jsxRuntime.jsx(SimpleDropdown, { testId: "subscription-frecuency", initialValue: dropdownOptions[0], options: dropdownOptions, onChange: function (value) { return handleChange(value.value, 'dropdown'); }, placeHolder: "" }, void 0)] }, void 0), jsxRuntime.jsx(SubscriptionDetailsContainer, { children: jsxRuntime.jsx(Tooltip, __assign$1({ position: 0, content: tooltipContent, header: tooltipHeader, maxWidth: "300px", showCloseIcon: closeIcon }, { children: jsxRuntime.jsxs(FlexContainer$2, { children: [jsxRuntime.jsx(SubscriptionDetails, __assign$1({ variant: "body", weight: "demi" }, { children: "Subscription Details" }), void 0), jsxRuntime.jsx(Icon.Actions.CircleQuestion, { width: 1.2 }, void 0)] }, void 0) }), void 0) }, void 0)] }, void 0))] }), void 0)] }), void 0));
|
|
6084
6082
|
};
|
|
6085
6083
|
|
|
6086
|
-
var FlexContainer$1 = newStyled.div(templateObject_1$
|
|
6084
|
+
var FlexContainer$1 = newStyled.div(templateObject_1$1N || (templateObject_1$1N = __makeTemplateObject(["\n display: flex;\n\n ", "\n"], ["\n display: flex;\n\n ", "\n"])), function (_a) {
|
|
6087
6085
|
var theme = _a.theme;
|
|
6088
6086
|
return theme.name === 'TheSpaDr' &&
|
|
6089
6087
|
"\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 ";
|
|
6090
6088
|
});
|
|
6091
|
-
var DiscountTag$1 = newStyled.div(templateObject_2$
|
|
6089
|
+
var DiscountTag$1 = newStyled.div(templateObject_2$1g || (templateObject_2$1g = __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) {
|
|
6092
6090
|
var theme = _a.theme, isSelected = _a.isSelected;
|
|
6093
6091
|
return isSelected
|
|
6094
6092
|
? theme.component.autoship.discountTag.backgroundColor
|
|
@@ -6141,7 +6139,7 @@ var TooltipWrapper = newStyled.div(templateObject_13$3 || (templateObject_13$3 =
|
|
|
6141
6139
|
var theme = _a.theme;
|
|
6142
6140
|
return theme.component.autoship.tooltip.margin;
|
|
6143
6141
|
});
|
|
6144
|
-
var templateObject_1$
|
|
6142
|
+
var templateObject_1$1N, templateObject_2$1g, templateObject_3$10, templateObject_4$Q, templateObject_5$C, templateObject_6$y, templateObject_7$p, templateObject_8$j, templateObject_9$a, templateObject_10$9, templateObject_11$6, templateObject_12$3, templateObject_13$3;
|
|
6145
6143
|
|
|
6146
6144
|
var radioIds$1 = {
|
|
6147
6145
|
oneTime: {
|
|
@@ -6219,13 +6217,13 @@ var componentSizeMapper = (_a$2 = {},
|
|
|
6219
6217
|
_a$2[exports.ComponentSize.Large] = exports.ComponentSize.Medium,
|
|
6220
6218
|
_a$2);
|
|
6221
6219
|
|
|
6222
|
-
var CustomerDetails = newStyled.div(templateObject_1$
|
|
6223
|
-
var CustomerInfo = newStyled.div(templateObject_2$
|
|
6220
|
+
var CustomerDetails = newStyled.div(templateObject_1$1M || (templateObject_1$1M = __makeTemplateObject([""], [""])));
|
|
6221
|
+
var CustomerInfo = newStyled.div(templateObject_2$1f || (templateObject_2$1f = __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"])));
|
|
6224
6222
|
var Name = newStyled.h4(templateObject_3$$ || (templateObject_3$$ = __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"])));
|
|
6225
6223
|
var StarIconContainer = newStyled.div(templateObject_4$P || (templateObject_4$P = __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"])));
|
|
6226
6224
|
var Description$2 = newStyled.p(templateObject_5$B || (templateObject_5$B = __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"])));
|
|
6227
6225
|
var ReviewDays = newStyled.span(templateObject_6$x || (templateObject_6$x = __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"])));
|
|
6228
|
-
var templateObject_1$
|
|
6226
|
+
var templateObject_1$1M, templateObject_2$1f, templateObject_3$$, templateObject_4$P, templateObject_5$B, templateObject_6$x;
|
|
6229
6227
|
|
|
6230
6228
|
var NameWithStars = function (_a) {
|
|
6231
6229
|
var name = _a.name, size = _a.size;
|
|
@@ -6243,8 +6241,8 @@ var ResultFeedback = function (_a) {
|
|
|
6243
6241
|
return (jsxRuntime.jsxs(CustomerDetails, { children: [jsxRuntime.jsx(NameWithStars, { name: name, size: size }, void 0), description && jsxRuntime.jsx(Description$2, { children: description }, void 0), reviewDays && jsxRuntime.jsx(ReviewDays, { children: reviewDays }, void 0)] }, void 0));
|
|
6244
6242
|
};
|
|
6245
6243
|
|
|
6246
|
-
var Container$16 = newStyled.div(templateObject_1$
|
|
6247
|
-
var ImageContainer$7 = newStyled.div(templateObject_2$
|
|
6244
|
+
var Container$16 = newStyled.div(templateObject_1$1L || (templateObject_1$1L = __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; });
|
|
6245
|
+
var ImageContainer$7 = newStyled.div(templateObject_2$1e || (templateObject_2$1e = __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"])));
|
|
6248
6246
|
var ImageCard = newStyled.div(templateObject_3$_ || (templateObject_3$_ = __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; });
|
|
6249
6247
|
var UserInfoText = newStyled.div(templateObject_4$O || (templateObject_4$O = __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) {
|
|
6250
6248
|
var theme = _a.theme;
|
|
@@ -6256,7 +6254,7 @@ var UserInfoText = newStyled.div(templateObject_4$O || (templateObject_4$O = __m
|
|
|
6256
6254
|
var theme = _a.theme, size = _a.size;
|
|
6257
6255
|
return theme.component.beforeAfter.size[componentSizeMapper[size]].userInfoText.mobile.fontSize;
|
|
6258
6256
|
});
|
|
6259
|
-
var templateObject_1$
|
|
6257
|
+
var templateObject_1$1L, templateObject_2$1e, templateObject_3$_, templateObject_4$O;
|
|
6260
6258
|
|
|
6261
6259
|
/* base styles & size variants */
|
|
6262
6260
|
var getStylesBySize$d = function (size, theme) {
|
|
@@ -6334,7 +6332,7 @@ var BeforeAfterCard = function (_a) {
|
|
|
6334
6332
|
return (jsxRuntime.jsxs(Container$16, __assign$1({ "data-testid": "Container", styles: stylesBySize }, { children: [jsxRuntime.jsxs(ImageContainer$7, __assign$1({ "data-testid": "ImageContainer" }, { children: [jsxRuntime.jsx(ImageCard, __assign$1({ "data-testid": "ImageCard", styles: stylesBySize }, { children: jsxRuntime.jsx(Image$3, { borderRadius: imageBorderRadius, src: beforeImage, alt: "before", height: "100%", width: "100%" }, void 0) }), void 0), jsxRuntime.jsx(ImageCard, __assign$1({ styles: stylesBySize }, { children: jsxRuntime.jsx(Image$3, { borderRadius: imageBorderRadius, src: afterImage, alt: "after", height: "100%", width: "100%" }, void 0) }), void 0)] }), void 0), jsxRuntime.jsx(Component, __assign$1({ name: name, size: size, alignCenter: alignCenter, text: infoText }, rest), void 0)] }), void 0));
|
|
6335
6333
|
};
|
|
6336
6334
|
|
|
6337
|
-
var Section = newStyled.div(templateObject_1$
|
|
6335
|
+
var Section = newStyled.div(templateObject_1$1K || (templateObject_1$1K = __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) {
|
|
6338
6336
|
return props.type === exports.CardSectionType.Header ? '1.5rem 1.5rem 0' : '0 1.5rem 1.5rem';
|
|
6339
6337
|
});
|
|
6340
6338
|
var CardHeader = function (_a) {
|
|
@@ -6345,16 +6343,16 @@ var CardFooter = function (_a) {
|
|
|
6345
6343
|
var children = _a.children;
|
|
6346
6344
|
return (jsxRuntime.jsx(Section, __assign$1({ type: exports.CardSectionType.Footer }, { children: children }), void 0));
|
|
6347
6345
|
};
|
|
6348
|
-
var templateObject_1$
|
|
6346
|
+
var templateObject_1$1K;
|
|
6349
6347
|
|
|
6350
|
-
var Body = newStyled.div(templateObject_1$
|
|
6348
|
+
var Body = newStyled.div(templateObject_1$1J || (templateObject_1$1J = __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"])));
|
|
6351
6349
|
var CardBody$1 = function (_a) {
|
|
6352
6350
|
var children = _a.children;
|
|
6353
6351
|
return jsxRuntime.jsx(Body, { children: children }, void 0);
|
|
6354
6352
|
};
|
|
6355
|
-
var templateObject_1$
|
|
6353
|
+
var templateObject_1$1J;
|
|
6356
6354
|
|
|
6357
|
-
var Container$15 = newStyled.div(templateObject_1$
|
|
6355
|
+
var Container$15 = newStyled.div(templateObject_1$1I || (templateObject_1$1I = __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) {
|
|
6358
6356
|
var flex = _a.flex;
|
|
6359
6357
|
return flex &&
|
|
6360
6358
|
"display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;";
|
|
@@ -6376,16 +6374,16 @@ var Card$3 = Object.assign(Card$2, {
|
|
|
6376
6374
|
Footer: CardFooter,
|
|
6377
6375
|
Body: CardBody$1,
|
|
6378
6376
|
});
|
|
6379
|
-
var templateObject_1$
|
|
6377
|
+
var templateObject_1$1I;
|
|
6380
6378
|
|
|
6381
|
-
var StyledWrapper = newStyled.div(templateObject_1$
|
|
6382
|
-
var StyledContainer = newStyled.div(templateObject_2$
|
|
6379
|
+
var StyledWrapper = newStyled.div(templateObject_1$1H || (templateObject_1$1H = __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"])));
|
|
6380
|
+
var StyledContainer = newStyled.div(templateObject_2$1d || (templateObject_2$1d = __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"])));
|
|
6383
6381
|
var TextLabel = newStyled(Text$7)(templateObject_3$Z || (templateObject_3$Z = __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) {
|
|
6384
6382
|
var color = _a.color;
|
|
6385
6383
|
return color;
|
|
6386
6384
|
});
|
|
6387
6385
|
var YouAreSaving = newStyled(Text$7)(templateObject_4$N || (templateObject_4$N = __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"])));
|
|
6388
|
-
var templateObject_1$
|
|
6386
|
+
var templateObject_1$1H, templateObject_2$1d, templateObject_3$Z, templateObject_4$N;
|
|
6389
6387
|
|
|
6390
6388
|
var Minimalistic = function (_a) {
|
|
6391
6389
|
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;
|
|
@@ -6393,8 +6391,8 @@ var Minimalistic = function (_a) {
|
|
|
6393
6391
|
return (jsxRuntime.jsx(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxRuntime.jsxs(StyledWrapper, { children: [jsxRuntime.jsxs(StyledContainer, __assign$1({ "data-testid": "".concat(testId, "-section") }, { children: [jsxRuntime.jsx(StyledContainer, { children: jsxRuntime.jsx(TextLabel, __assign$1({ variant: "body", weight: "demi", size: "small" }, { children: getMorePayLessText }), void 0) }, void 0), jsxRuntime.jsx(PriceLabel$1, { finalPrice: price, originalPrice: originalPrice, color: theme.colors.pallete.secondary.color, size: exports.ComponentSize.Small, testId: testId }, void 0)] }), void 0), jsxRuntime.jsxs(StyledContainer, __assign$1({ "data-testid": "".concat(testId, "-section-bottom") }, { children: [jsxRuntime.jsxs(TextLabel, __assign$1({ variant: "body", weight: "demi", size: "small", color: "var(--colors-pallete-red-color)" }, { children: [getQtyForText, " ", discount, "% ", offText.toLocaleUpperCase()] }), void 0), jsxRuntime.jsxs(YouAreSaving, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [youAreSavingText, ": ", savingPrice] }), void 0)] }), void 0)] }, void 0) }), void 0));
|
|
6394
6392
|
};
|
|
6395
6393
|
|
|
6396
|
-
var Container$14 = newStyled.div(templateObject_1$
|
|
6397
|
-
var Title$9 = newStyled.h1(templateObject_2$
|
|
6394
|
+
var Container$14 = newStyled.div(templateObject_1$1G || (templateObject_1$1G = __makeTemplateObject(["\n padding: 0.625rem 1.5rem;\n"], ["\n padding: 0.625rem 1.5rem;\n"])));
|
|
6395
|
+
var Title$9 = newStyled.h1(templateObject_2$1c || (templateObject_2$1c = __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; });
|
|
6398
6396
|
var Details$1 = newStyled.span(templateObject_3$Y || (templateObject_3$Y = __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; });
|
|
6399
6397
|
var PriceContainer$2 = newStyled.span(templateObject_4$M || (templateObject_4$M = __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"])));
|
|
6400
6398
|
var Simple = function (_a) {
|
|
@@ -6402,18 +6400,18 @@ var Simple = function (_a) {
|
|
|
6402
6400
|
var theme = useTheme();
|
|
6403
6401
|
return (jsxRuntime.jsx(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxRuntime.jsxs(Container$14, { children: [jsxRuntime.jsx(Title$9, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Title" }, { children: title }), void 0), jsxRuntime.jsxs(Details$1, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Details" }, { children: [anyQtyForText, jsxRuntime.jsx(PriceContainer$2, __assign$1({ "data-testid": "Price" }, { children: jsxRuntime.jsx(PriceLabel$1, { finalPrice: price, color: "var(--colors-pallete-red-color)", size: exports.ComponentSize.Small }, void 0) }), void 0), "+ ", freeShippingText] }), void 0)] }, void 0) }), void 0));
|
|
6404
6402
|
};
|
|
6405
|
-
var templateObject_1$
|
|
6403
|
+
var templateObject_1$1G, templateObject_2$1c, templateObject_3$Y, templateObject_4$M;
|
|
6406
6404
|
|
|
6407
6405
|
var Bundle = {
|
|
6408
6406
|
Minimalistic: Minimalistic,
|
|
6409
6407
|
Simple: Simple,
|
|
6410
6408
|
};
|
|
6411
6409
|
|
|
6412
|
-
var Container$13 = newStyled.div(templateObject_1$
|
|
6410
|
+
var Container$13 = newStyled.div(templateObject_1$1F || (templateObject_1$1F = __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) {
|
|
6413
6411
|
var displayBNPL = _a.displayBNPL;
|
|
6414
6412
|
return (displayBNPL ? 'flex' : 'none');
|
|
6415
6413
|
});
|
|
6416
|
-
var TextContainer$1 = newStyled.div(templateObject_2$
|
|
6414
|
+
var TextContainer$1 = newStyled.div(templateObject_2$1b || (templateObject_2$1b = __makeTemplateObject(["\n font-size: 14px;\n margin: 0;\n line-height: 24px;\n font-weight: 400;\n color: #292929;\n"], ["\n font-size: 14px;\n margin: 0;\n line-height: 24px;\n font-weight: 400;\n color: #292929;\n"])));
|
|
6417
6415
|
var IconWrapper$1 = newStyled.div(templateObject_3$X || (templateObject_3$X = __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"])));
|
|
6418
6416
|
var BuyNowPayLater = function (_a) {
|
|
6419
6417
|
var _b;
|
|
@@ -6426,41 +6424,41 @@ var BuyNowPayLater = function (_a) {
|
|
|
6426
6424
|
}
|
|
6427
6425
|
return (jsxRuntime.jsx(Container$13, __assign$1({ displayBNPL: displayBNPL }, { children: jsxRuntime.jsxs(TextContainer$1, __assign$1({ style: { fontSize: fontSize }, "data-testid": "mainText" }, { children: ["Or ".concat(installments, " payments of "), jsxRuntime.jsx(Text$7, __assign$1({ variant: "heading6", style: { display: 'inline', fontSize: fontSize }, testId: "InstallmentPriceId" }, { children: installmentPrice }), void 0), showLogo ? ' with' : '', showLogo && (jsxRuntime.jsx(IconWrapper$1, { children: jsxRuntime.jsx(IconComponent, { width: 3.2, height: 2, fill: iconColor, style: { top: '-3px', position: 'relative' } }, void 0) }, void 0))] }), void 0) }), void 0));
|
|
6428
6426
|
};
|
|
6429
|
-
var templateObject_1$
|
|
6427
|
+
var templateObject_1$1F, templateObject_2$1b, templateObject_3$X;
|
|
6430
6428
|
|
|
6431
|
-
var Text$6 = newStyled.span(templateObject_1$
|
|
6429
|
+
var Text$6 = newStyled.span(templateObject_1$1E || (templateObject_1$1E = __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; });
|
|
6432
6430
|
var Title$8 = function (_a) {
|
|
6433
6431
|
var title = _a.title;
|
|
6434
6432
|
var theme = useTheme();
|
|
6435
6433
|
return jsxRuntime.jsx(Text$6, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0);
|
|
6436
6434
|
};
|
|
6437
|
-
var templateObject_1$
|
|
6435
|
+
var templateObject_1$1E;
|
|
6438
6436
|
|
|
6439
|
-
var P$3 = newStyled.p(templateObject_1$
|
|
6437
|
+
var P$3 = newStyled.p(templateObject_1$1D || (templateObject_1$1D = __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; });
|
|
6440
6438
|
var Promo = function (_a) {
|
|
6441
6439
|
var text = _a.text;
|
|
6442
6440
|
var theme = useTheme();
|
|
6443
6441
|
return (jsxRuntime.jsx(P$3, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "CartProductItemPromo" }, { children: text }), void 0));
|
|
6444
6442
|
};
|
|
6445
|
-
var templateObject_1$
|
|
6443
|
+
var templateObject_1$1D;
|
|
6446
6444
|
|
|
6447
|
-
var Text$5 = newStyled.span(templateObject_1$
|
|
6445
|
+
var Text$5 = newStyled.span(templateObject_1$1C || (templateObject_1$1C = __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; });
|
|
6448
6446
|
var Description$1 = function (_a) {
|
|
6449
6447
|
var text = _a.text;
|
|
6450
6448
|
var theme = useTheme();
|
|
6451
6449
|
return jsxRuntime.jsx(Text$5, __assign$1({ color: theme.colors.shades['400'].color }, { children: text }), void 0);
|
|
6452
6450
|
};
|
|
6453
|
-
var templateObject_1$
|
|
6451
|
+
var templateObject_1$1C;
|
|
6454
6452
|
|
|
6455
|
-
var Container$12 = newStyled.div(templateObject_1$
|
|
6453
|
+
var Container$12 = newStyled.div(templateObject_1$1B || (templateObject_1$1B = __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"); });
|
|
6456
6454
|
var CloseButton$1 = function (_a) {
|
|
6457
6455
|
var onClick = _a.onClick, size = _a.size;
|
|
6458
6456
|
var theme = useTheme();
|
|
6459
6457
|
return (jsxRuntime.jsx(Container$12, __assign$1({ backgroundColor: theme.colors.shades['700'].color, onClick: onClick, "data-testid": "CartProductItemCloseBtn", size: size }, { children: jsxRuntime.jsx(Icon.Actions.Close, { width: size - 1, height: size - 1, fill: "#fff" }, void 0) }), void 0));
|
|
6460
6458
|
};
|
|
6461
|
-
var templateObject_1$
|
|
6459
|
+
var templateObject_1$1B;
|
|
6462
6460
|
|
|
6463
|
-
var Text$4 = newStyled.h3(templateObject_1$
|
|
6461
|
+
var Text$4 = newStyled.h3(templateObject_1$1A || (templateObject_1$1A = __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) {
|
|
6464
6462
|
var backgroundColor = _a.backgroundColor;
|
|
6465
6463
|
return backgroundColor;
|
|
6466
6464
|
}, function (_a) {
|
|
@@ -6475,7 +6473,7 @@ var OfferBanner = function (_a) {
|
|
|
6475
6473
|
var theme = useTheme();
|
|
6476
6474
|
return (jsxRuntime.jsx(Text$4, __assign$1({ backgroundColor: backgroundColor, color: theme.colors.shades['700'].color, borderRadius: theme.component.text.offerBanner.borderRadius, "data-testid": "OfferBanner" }, { children: discountAppliedText }), void 0));
|
|
6477
6475
|
};
|
|
6478
|
-
var templateObject_1$
|
|
6476
|
+
var templateObject_1$1A;
|
|
6479
6477
|
|
|
6480
6478
|
var CartProductItem = {
|
|
6481
6479
|
Title: Title$8,
|
|
@@ -6485,8 +6483,8 @@ var CartProductItem = {
|
|
|
6485
6483
|
CloseButton: CloseButton$1,
|
|
6486
6484
|
};
|
|
6487
6485
|
|
|
6488
|
-
var Container$11 = newStyled.div(templateObject_1$
|
|
6489
|
-
var MobileContainer = newStyled(Container$11)(templateObject_2$
|
|
6486
|
+
var Container$11 = newStyled.div(templateObject_1$1z || (templateObject_1$1z = __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"])));
|
|
6487
|
+
var MobileContainer = newStyled(Container$11)(templateObject_2$1a || (templateObject_2$1a = __makeTemplateObject(["\n padding: 2px 2px;\n gap: 3px;\n"], ["\n padding: 2px 2px;\n gap: 3px;\n"])));
|
|
6490
6488
|
var DollarPart = newStyled.span(templateObject_3$W || (templateObject_3$W = __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"])));
|
|
6491
6489
|
var ClubMembersText = newStyled.span(templateObject_4$L || (templateObject_4$L = __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"])));
|
|
6492
6490
|
var MobileDollarPart = newStyled(DollarPart)(templateObject_5$A || (templateObject_5$A = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
@@ -6498,7 +6496,7 @@ var ClubPriceLabel = function (_a) {
|
|
|
6498
6496
|
var isMobile = useWindowDimensions().isMobile;
|
|
6499
6497
|
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: isMobile ? (jsxRuntime.jsxs(MobileContainer, { children: [jsxRuntime.jsx(MobileDollarPart, { children: clubPrice }, void 0), jsxRuntime.jsx(MobileClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) : (jsxRuntime.jsxs(Container$11, { children: [jsxRuntime.jsx(DesktopDollarPart, { children: clubPrice }, void 0), jsxRuntime.jsx(DesktopClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) }, void 0));
|
|
6500
6498
|
};
|
|
6501
|
-
var templateObject_1$
|
|
6499
|
+
var templateObject_1$1z, templateObject_2$1a, templateObject_3$W, templateObject_4$L, templateObject_5$A, templateObject_6$w, templateObject_7$o, templateObject_8$i;
|
|
6502
6500
|
|
|
6503
6501
|
var Spacing = function (_a) {
|
|
6504
6502
|
var size = _a.size, _b = _a.type, type = _b === void 0 ? 'block' : _b, children = _a.children, styleProp = _a.style;
|
|
@@ -6506,8 +6504,8 @@ var Spacing = function (_a) {
|
|
|
6506
6504
|
return jsxRuntime.jsx("div", __assign$1({ style: style }, { children: children }), void 0);
|
|
6507
6505
|
};
|
|
6508
6506
|
|
|
6509
|
-
var Container$10 = newStyled('div')(templateObject_1$
|
|
6510
|
-
var Content$2 = newStyled('div')(templateObject_2$
|
|
6507
|
+
var Container$10 = newStyled('div')(templateObject_1$1y || (templateObject_1$1y = __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"])));
|
|
6508
|
+
var Content$2 = newStyled('div')(templateObject_2$19 || (templateObject_2$19 = __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"])));
|
|
6511
6509
|
var BarContainer$1 = newStyled('div')(templateObject_3$V || (templateObject_3$V = __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"])));
|
|
6512
6510
|
var Bar$2 = newStyled('div')(templateObject_4$K || (templateObject_4$K = __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) {
|
|
6513
6511
|
var index = _a.index;
|
|
@@ -6520,10 +6518,10 @@ var StrengthBars = function (_a) {
|
|
|
6520
6518
|
var _b = _a.barsFilled, barsFilled = _b === void 0 ? 0 : _b, supportText = _a.supportText;
|
|
6521
6519
|
return (jsxRuntime.jsxs(Container$10, __assign$1({ "data-testid": "strength-bar" }, { children: [jsxRuntime.jsx(BarContainer$1, { children: [1, 2, 3, 4, 5].map(function (bar, index) { return (jsxRuntime.jsx(Bar$2, { index: index, isFilled: bar <= barsFilled }, bar)); }) }, void 0), jsxRuntime.jsx(Content$2, { children: supportText }, void 0)] }), void 0));
|
|
6522
6520
|
};
|
|
6523
|
-
var templateObject_1$
|
|
6521
|
+
var templateObject_1$1y, templateObject_2$19, templateObject_3$V, templateObject_4$K;
|
|
6524
6522
|
|
|
6525
|
-
var RegularPriceTagSpan = newStyled.span(templateObject_1$
|
|
6526
|
-
var ClubPriceTagSpan = newStyled.span(templateObject_2$
|
|
6523
|
+
var RegularPriceTagSpan = newStyled.span(templateObject_1$1x || (templateObject_1$1x = __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"])));
|
|
6524
|
+
var ClubPriceTagSpan = newStyled.span(templateObject_2$18 || (templateObject_2$18 = __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"])));
|
|
6527
6525
|
var PriceContainer$1 = newStyled.span(templateObject_3$U || (templateObject_3$U = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
6528
6526
|
var PriceContainerV2 = newStyled.span(templateObject_4$J || (templateObject_4$J = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
6529
6527
|
var PriceWithTagContainer = newStyled.span(templateObject_5$z || (templateObject_5$z = __makeTemplateObject(["\n display: flex;\n gap: 8px;\n"], ["\n display: flex;\n gap: 8px;\n"])));
|
|
@@ -6579,12 +6577,14 @@ var PriceLabelV4 = function (_a) {
|
|
|
6579
6577
|
? finalPriceArray[0]
|
|
6580
6578
|
: (_b = "".concat(productFinalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1], "."] }), void 0), jsxRuntime.jsx(Price, __assign$1({ finalPriceStyledSmall: true, style: { marginTop: '-6px', color: '#c64844' } }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }, void 0), jsxRuntime.jsx(ClubPriceTag, {}, void 0)] }, void 0)] }, void 0)), discount && (jsxRuntime.jsx(TagContainer, __assign$1({ size: size }, { children: jsxRuntime.jsx(DiscountTag$2, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
|
|
6581
6579
|
};
|
|
6582
|
-
var templateObject_1$
|
|
6580
|
+
var templateObject_1$1x, templateObject_2$18, templateObject_3$U, templateObject_4$J, templateObject_5$z;
|
|
6581
|
+
|
|
6582
|
+
var STARTS_NUMBER = 5;
|
|
6583
6583
|
|
|
6584
|
-
var Container$$ = newStyled.div(templateObject_1$
|
|
6585
|
-
var templateObject_1$
|
|
6584
|
+
var Container$$ = newStyled.div(templateObject_1$1w || (templateObject_1$1w = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
6585
|
+
var templateObject_1$1w;
|
|
6586
6586
|
|
|
6587
|
-
var StarContainer = newStyled.div(templateObject_1$
|
|
6587
|
+
var StarContainer = newStyled.div(templateObject_1$1v || (templateObject_1$1v = __makeTemplateObject(["\n display: flex;\n margin-right: ", ";\n"], ["\n display: flex;\n margin-right: ", ";\n"])), function (_a) {
|
|
6588
6588
|
var marginRight = _a.marginRight;
|
|
6589
6589
|
return marginRight;
|
|
6590
6590
|
});
|
|
@@ -6600,7 +6600,7 @@ var StarList = function (_a) {
|
|
|
6600
6600
|
return (jsxRuntime.jsx(StarContainer, __assign$1({ "data-testid": "star-container", marginRight: theme.component.stars.element[size].marginRight }, { children: index < Math.floor(rating) ? (jsxRuntime.jsx(Icon.PDP.Star, __assign$1({}, iconProps), void 0)) : index === Math.floor(rating) && rating % 1 != 0 ? (jsxRuntime.jsx(Icon.PDP.StarHalf, __assign$1({}, iconProps), void 0)) : (jsxRuntime.jsx(Icon.PDP.StarEmpty, __assign$1({}, iconProps), void 0)) }), "star-container-".concat(index)));
|
|
6601
6601
|
}) }, void 0));
|
|
6602
6602
|
};
|
|
6603
|
-
var templateObject_1$
|
|
6603
|
+
var templateObject_1$1v;
|
|
6604
6604
|
|
|
6605
6605
|
/* base styles & size variants */
|
|
6606
6606
|
var LabelStyles = {
|
|
@@ -6641,9 +6641,7 @@ var LabelStyles = {
|
|
|
6641
6641
|
});
|
|
6642
6642
|
},
|
|
6643
6643
|
};
|
|
6644
|
-
var Container$_ = newStyled.a(templateObject_1$
|
|
6645
|
-
var templateObject_1$1v;
|
|
6646
|
-
|
|
6644
|
+
var Container$_ = newStyled.a(templateObject_1$1u || (templateObject_1$1u = __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"])));
|
|
6647
6645
|
var CustomLabel = newStyled.div(function (_a) {
|
|
6648
6646
|
var theme = _a.theme, size = _a.size, wrapWithParenthesis = _a.wrapWithParenthesis, underline = _a.underline;
|
|
6649
6647
|
return [
|
|
@@ -6662,8 +6660,9 @@ var CustomLabel = newStyled.div(function (_a) {
|
|
|
6662
6660
|
}),
|
|
6663
6661
|
];
|
|
6664
6662
|
});
|
|
6665
|
-
var RatingLabel = newStyled.span(
|
|
6666
|
-
var
|
|
6663
|
+
var RatingLabel = newStyled.span(templateObject_2$17 || (templateObject_2$17 = __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; });
|
|
6664
|
+
var templateObject_1$1u, templateObject_2$17;
|
|
6665
|
+
|
|
6667
6666
|
var Rating = function (_a) {
|
|
6668
6667
|
var _b = _a.size, size = _b === void 0 ? exports.ComponentSize.Medium : _b, reviews = _a.reviews, reviewsText = _a.reviewsText, rating = _a.rating, _c = _a.showRatingText, showRatingText = _c === void 0 ? false : _c, _d = _a.wrapWithParenthesis, wrapWithParenthesis = _d === void 0 ? false : _d, _e = _a.underline, underline = _e === void 0 ? false : _e, reviewsContainerId = _a.reviewsContainerId;
|
|
6669
6668
|
function handleAnchorClick(e) {
|
|
@@ -6683,9 +6682,71 @@ var Rating = function (_a) {
|
|
|
6683
6682
|
href: reviewsContainerId,
|
|
6684
6683
|
}
|
|
6685
6684
|
: {};
|
|
6686
|
-
return (jsxRuntime.jsxs(Container$_, __assign$1({ as: reviewsContainerId ? 'a' : 'div' }, containerAttributes, { "data-testid": "Container", onClick: handleAnchorClick }, { children: [showRatingText && (jsxRuntime.jsx(RatingLabel, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "RatingLabel" }, { children: rating }), void 0)), jsxRuntime.jsx(StarList, { rating: rating, size: size, starsNumber:
|
|
6687
|
-
};
|
|
6688
|
-
|
|
6685
|
+
return (jsxRuntime.jsxs(Container$_, __assign$1({ as: reviewsContainerId ? 'a' : 'div' }, containerAttributes, { "data-testid": "Container", onClick: handleAnchorClick }, { children: [showRatingText && (jsxRuntime.jsx(RatingLabel, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "RatingLabel" }, { children: rating }), void 0)), jsxRuntime.jsx(StarList, { rating: rating, size: size, starsNumber: STARTS_NUMBER, fill: theme.component.stars.element.color }, void 0), jsxRuntime.jsxs(CustomLabel, __assign$1({ theme: theme, size: size, wrapWithParenthesis: wrapWithParenthesis, underline: underline, "data-testid": "CustomLabel" }, { children: [reviews ? reviews : '', " ", reviewsText ? reviewsText : ''] }), void 0)] }), void 0));
|
|
6686
|
+
};
|
|
6687
|
+
|
|
6688
|
+
var STYLES_BY_THEME = {
|
|
6689
|
+
TheSpaDr: {
|
|
6690
|
+
title: {
|
|
6691
|
+
mobile: {
|
|
6692
|
+
fontSize: '14px',
|
|
6693
|
+
},
|
|
6694
|
+
fontSize: '16px',
|
|
6695
|
+
fontWeight: '600',
|
|
6696
|
+
},
|
|
6697
|
+
image: {
|
|
6698
|
+
borderRadius: '8px',
|
|
6699
|
+
},
|
|
6700
|
+
},
|
|
6701
|
+
Revel: {
|
|
6702
|
+
title: {
|
|
6703
|
+
mobile: {
|
|
6704
|
+
fontSize: '16px',
|
|
6705
|
+
},
|
|
6706
|
+
fontSize: '18px',
|
|
6707
|
+
fontWeight: '400',
|
|
6708
|
+
},
|
|
6709
|
+
image: {
|
|
6710
|
+
borderRadius: '20px',
|
|
6711
|
+
},
|
|
6712
|
+
},
|
|
6713
|
+
Shapermint: {
|
|
6714
|
+
title: {
|
|
6715
|
+
mobile: {
|
|
6716
|
+
fontSize: '',
|
|
6717
|
+
},
|
|
6718
|
+
fontSize: '0.83rem',
|
|
6719
|
+
fontWeight: 'normal',
|
|
6720
|
+
},
|
|
6721
|
+
image: {
|
|
6722
|
+
borderRadius: '',
|
|
6723
|
+
},
|
|
6724
|
+
},
|
|
6725
|
+
Truekind: {
|
|
6726
|
+
title: {
|
|
6727
|
+
mobile: {
|
|
6728
|
+
fontSize: '',
|
|
6729
|
+
},
|
|
6730
|
+
fontSize: '0.83rem',
|
|
6731
|
+
fontWeight: 'normal',
|
|
6732
|
+
},
|
|
6733
|
+
image: {
|
|
6734
|
+
borderRadius: '',
|
|
6735
|
+
},
|
|
6736
|
+
},
|
|
6737
|
+
TheBodCon: {
|
|
6738
|
+
title: {
|
|
6739
|
+
mobile: {
|
|
6740
|
+
fontSize: '',
|
|
6741
|
+
},
|
|
6742
|
+
fontSize: '0.83rem',
|
|
6743
|
+
fontWeight: 'normal',
|
|
6744
|
+
},
|
|
6745
|
+
image: {
|
|
6746
|
+
borderRadius: '',
|
|
6747
|
+
},
|
|
6748
|
+
},
|
|
6749
|
+
};
|
|
6689
6750
|
|
|
6690
6751
|
var ImageContainer$6 = newStyled.div(function (_a) {
|
|
6691
6752
|
var width = _a.width, height = _a.height;
|
|
@@ -6698,7 +6759,19 @@ var ImageContainer$6 = newStyled.div(function (_a) {
|
|
|
6698
6759
|
var ImageHoverContainer$3 = newStyled.img(templateObject_1$1t || (templateObject_1$1t = __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"])));
|
|
6699
6760
|
var Container$Z = newStyled.a(templateObject_2$16 || (templateObject_2$16 = __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"])));
|
|
6700
6761
|
var ProdCardContainer$4 = newStyled.div(templateObject_3$T || (templateObject_3$T = __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"])));
|
|
6701
|
-
var Title$7 = newStyled.p(templateObject_4$I || (templateObject_4$I = __makeTemplateObject(["\n font-size:
|
|
6762
|
+
var Title$7 = newStyled.p(templateObject_4$I || (templateObject_4$I = __makeTemplateObject(["\n font-size: ", ";\n font-weight: ", ";\n line-height: 1.375rem;\n min-height: 2.75rem;\n text-align: center;\n color: ", ";\n margin: 0.25rem 0;\n text-align: ", ";\n\n @media (max-width: ", "px) {\n font-size: ", ";\n }\n"], ["\n font-size: ", ";\n font-weight: ", ";\n line-height: 1.375rem;\n min-height: 2.75rem;\n text-align: center;\n color: ", ";\n margin: 0.25rem 0;\n text-align: ", ";\n\n @media (max-width: ", "px) {\n font-size: ", ";\n }\n"])), function (_a) {
|
|
6763
|
+
var theme = _a.theme;
|
|
6764
|
+
return STYLES_BY_THEME[theme.name].title.fontSize;
|
|
6765
|
+
}, function (_a) {
|
|
6766
|
+
var theme = _a.theme;
|
|
6767
|
+
return STYLES_BY_THEME[theme.name].title.fontWeight;
|
|
6768
|
+
}, function (props) { return props.theme.colors.pallete.secondary.color; }, function (props) { return props.align; }, function (_a) {
|
|
6769
|
+
var theme = _a.theme;
|
|
6770
|
+
return theme.mediaQueries.mobile;
|
|
6771
|
+
}, function (_a) {
|
|
6772
|
+
var theme = _a.theme;
|
|
6773
|
+
return STYLES_BY_THEME[theme.name].title.mobile.fontSize;
|
|
6774
|
+
});
|
|
6702
6775
|
var getStylesBySize$c = function (size) {
|
|
6703
6776
|
switch (size) {
|
|
6704
6777
|
case exports.ComponentSize.Medium:
|
|
@@ -6796,7 +6869,7 @@ var ProductItemMobile = function (_a) {
|
|
|
6796
6869
|
return jsx(Fragment, {}, void 0);
|
|
6797
6870
|
return (jsx(Rating, { size: size === exports.ComponentSize.Large ? exports.ComponentSize.Small : exports.ComponentSize.XSmall, rating: rating.rating, reviews: rating.reviews, reviewsText: "", wrapWithParenthesis: true }, void 0));
|
|
6798
6871
|
};
|
|
6799
|
-
return (jsxs(ProdCardContainer$4, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$Z, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', className: "picContainer", onClick: onClick }, { children: [!!topTag || !!bottomTag ? (jsxs(ImageContainer$6, __assign$1({ width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height, "data-testid": "tags-image-container" }, { children: [jsx(Image$3, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, width: 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' }, void 0), jsx(TopTagContainer$8, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: topTag }), void 0), jsx(BottomTagContainer$8, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: bottomTag }), void 0)] }), void 0)) : (jsx(Image$3, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height, loading: isOnViewport ? 'eager' : 'lazy', decoding: isOnViewport ? 'sync' : 'async' }, 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)), jsxs(Container$Z, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', onClick: onClick, className: "textContainer", style: { alignItems: showClubPriceLabel ? 'flex-start' : 'center' } }, { children: [jsx(Spacing, { size: space }, void 0), jsx(Title$7, __assign$1({ theme: theme, align: showClubPriceLabel ? 'left' : alignName }, { children: title }), void 0), jsx(Spacing, { size: space }, void 0), hasStrength && hasStrength.strength !== -1 && (jsxs(Fragment, { children: [jsx(StrengthBars, { barsFilled: hasStrength.strength, supportText: hasStrength.description }, void 0), jsx(Spacing, { size: 10 }, void 0)] }, void 0)), priceAtBottom ? (jsxs(Fragment, { children: [jsx(RatingDisplay, {}, void 0), jsx(Spacing, { size: space }, void 0), 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: exports.ComponentSize.Small }, { children: discountTag && (jsx(DiscountTag$2, __assign$1({}, discountTag, { size: exports.ComponentSize.Medium, style: {
|
|
6872
|
+
return (jsxs(ProdCardContainer$4, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$Z, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', className: "picContainer", onClick: onClick }, { children: [!!topTag || !!bottomTag ? (jsxs(ImageContainer$6, __assign$1({ width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height, "data-testid": "tags-image-container" }, { children: [jsx(Image$3, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, width: 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$8, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: topTag }), void 0), jsx(BottomTagContainer$8, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: bottomTag }), void 0)] }), void 0)) : (jsx(Image$3, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height, 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)), jsxs(Container$Z, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', onClick: onClick, className: "textContainer", style: { alignItems: showClubPriceLabel ? 'flex-start' : 'center' } }, { children: [jsx(Spacing, { size: space }, void 0), jsx(Title$7, __assign$1({ theme: theme, align: showClubPriceLabel ? 'left' : alignName }, { children: title }), void 0), jsx(Spacing, { size: space }, void 0), hasStrength && hasStrength.strength !== -1 && (jsxs(Fragment, { children: [jsx(StrengthBars, { barsFilled: hasStrength.strength, supportText: hasStrength.description }, void 0), jsx(Spacing, { size: 10 }, void 0)] }, void 0)), priceAtBottom ? (jsxs(Fragment, { children: [jsx(RatingDisplay, {}, void 0), jsx(Spacing, { size: space }, void 0), 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: exports.ComponentSize.Small }, { children: discountTag && (jsx(DiscountTag$2, __assign$1({}, discountTag, { size: exports.ComponentSize.Medium, style: {
|
|
6800
6873
|
letterSpacing: '-0.05rem',
|
|
6801
6874
|
} }), void 0)) }), void 0))), jsx(Spacing, { size: space }, void 0), jsx(RatingDisplay, {}, void 0)] }, void 0))] }), void 0), colorPicker.display && colorPicker.position === 'bottom' && (jsxs(Fragment, { children: [jsx(Spacing, { size: space }, void 0), colorPicker.component] }, void 0))] }), void 0));
|
|
6802
6875
|
};
|
|
@@ -6918,6 +6991,30 @@ var Collection = {
|
|
|
6918
6991
|
ProductItemTK: ProductItemTK,
|
|
6919
6992
|
};
|
|
6920
6993
|
|
|
6994
|
+
var CustomRadioGroup = newStyled(lt)(templateObject_1$1q || (templateObject_1$1q = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
6995
|
+
newStyled(lt.Label)(templateObject_2$14 || (templateObject_2$14 = __makeTemplateObject(["\n font-size: 0.88rem;\n"], ["\n font-size: 0.88rem;\n"])));
|
|
6996
|
+
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$R || (templateObject_3$R = __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"])));
|
|
6997
|
+
var Span = newStyled.span(templateObject_4$G || (templateObject_4$G = __makeTemplateObject(["\n font-weight: 600;\n"], ["\n font-weight: 600;\n"])));
|
|
6998
|
+
var OptionsContainer = newStyled.div(templateObject_5$w || (templateObject_5$w = __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"])));
|
|
6999
|
+
var Label$5 = function (_a) {
|
|
7000
|
+
var label = _a.label, values = _a.values;
|
|
7001
|
+
return (jsxRuntime.jsxs(Text$7, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [label, " ", jsxRuntime.jsx(Span, { children: values }, void 0)] }), void 0));
|
|
7002
|
+
};
|
|
7003
|
+
var Option = function (_a) {
|
|
7004
|
+
var value = _a.value, children = _a.children;
|
|
7005
|
+
return (jsxRuntime.jsx(CustomRadioGroupOption, __assign$1({ value: value }, { children: children }), void 0));
|
|
7006
|
+
};
|
|
7007
|
+
var ColorRadioGroup = function (_a) {
|
|
7008
|
+
var value = _a.value, onChange = _a.onChange, children = _a.children, className = _a.className;
|
|
7009
|
+
return (jsxRuntime.jsx(CustomRadioGroup, __assign$1({ value: value, onChange: onChange, className: className }, { children: children }), void 0));
|
|
7010
|
+
};
|
|
7011
|
+
var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
|
|
7012
|
+
Label: Label$5,
|
|
7013
|
+
Option: Option,
|
|
7014
|
+
OptionsContainer: OptionsContainer,
|
|
7015
|
+
});
|
|
7016
|
+
var templateObject_1$1q, templateObject_2$14, templateObject_3$R, templateObject_4$G, templateObject_5$w;
|
|
7017
|
+
|
|
6921
7018
|
var OneColorSelector = function (_a) {
|
|
6922
7019
|
var color = _a.color, selected = _a.selected, testId = _a.testId, noStock = _a.noStock, _b = _a.showCross, showCross = _b === void 0 ? false : _b;
|
|
6923
7020
|
var theme = useTheme();
|
|
@@ -6957,30 +7054,6 @@ var OutOfStock = function (_a) {
|
|
|
6957
7054
|
return (jsxRuntime.jsxs("svg", __assign$1({ width: "32", height: "33", viewBox: "0 0 32 33", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsxRuntime.jsx("title", { children: title }, void 0), jsxRuntime.jsx("mask", __assign$1({ id: "path-1-inside-1", fill: "white" }, { children: jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.89435 9.60565C8.40619 10.0938 8.40619 10.8853 8.89435 11.3734L14.0209 16.5L8.89433 21.6266C8.40617 22.1147 8.40617 22.9062 8.89433 23.3943C9.38248 23.8825 10.1739 23.8825 10.6621 23.3943L15.7887 18.2677L21.2687 23.7478C21.7569 24.2359 22.5483 24.2359 23.0365 23.7478C23.5246 23.2596 23.5246 22.4682 23.0365 21.98L17.5564 16.5L23.0365 11.02C23.5246 10.5318 23.5246 9.74035 23.0365 9.25219C22.5483 8.76404 21.7568 8.76404 21.2687 9.25219L15.7887 14.7322L10.6621 9.60565C10.174 9.1175 9.3825 9.1175 8.89435 9.60565Z" }, void 0) }), void 0), jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.89435 9.60565C8.40619 10.0938 8.40619 10.8853 8.89435 11.3734L14.0209 16.5L8.89433 21.6266C8.40617 22.1147 8.40617 22.9062 8.89433 23.3943C9.38248 23.8825 10.1739 23.8825 10.6621 23.3943L15.7887 18.2677L21.2687 23.7478C21.7569 24.2359 22.5483 24.2359 23.0365 23.7478C23.5246 23.2596 23.5246 22.4682 23.0365 21.98L17.5564 16.5L23.0365 11.02C23.5246 10.5318 23.5246 9.74035 23.0365 9.25219C22.5483 8.76404 21.7568 8.76404 21.2687 9.25219L15.7887 14.7322L10.6621 9.60565C10.174 9.1175 9.3825 9.1175 8.89435 9.60565Z", fill: theme.colors.shades['300'].color }, void 0), jsxRuntime.jsx("path", { d: "M14.0209 16.5L14.5866 17.0657L15.1523 16.5L14.5866 15.9343L14.0209 16.5ZM8.89433 21.6266L9.46001 22.1922L8.89433 21.6266ZM10.6621 23.3943L11.2278 23.96L10.6621 23.3943ZM15.7887 18.2677L16.3544 17.7021L15.7887 17.1364L15.223 17.7021L15.7887 18.2677ZM17.5564 16.5L16.9908 15.9343L16.4251 16.5L16.9908 17.0657L17.5564 16.5ZM23.0365 11.02L23.6021 11.5856L23.0365 11.02ZM21.2687 9.25219L21.8344 9.81788L21.2687 9.25219ZM15.7887 14.7322L15.223 15.2979L15.7887 15.8636L16.3544 15.2979L15.7887 14.7322ZM9.46003 10.8077C9.2843 10.632 9.2843 10.3471 9.46003 10.1713L8.32866 9.03997C7.52809 9.84054 7.52809 11.1385 8.32866 11.9391L9.46003 10.8077ZM14.5866 15.9343L9.46003 10.8077L8.32866 11.9391L13.4552 17.0657L14.5866 15.9343ZM9.46001 22.1922L14.5866 17.0657L13.4552 15.9343L8.32864 21.0609L9.46001 22.1922ZM9.46001 22.8286C9.28428 22.6529 9.28428 22.368 9.46001 22.1922L8.32864 21.0609C7.52807 21.8614 7.52807 23.1594 8.32864 23.96L9.46001 22.8286ZM10.0964 22.8286C9.92067 23.0044 9.63575 23.0044 9.46001 22.8286L8.32864 23.96C9.12922 24.7606 10.4272 24.7606 11.2278 23.96L10.0964 22.8286ZM15.223 17.7021L10.0964 22.8286L11.2278 23.96L16.3544 18.8334L15.223 17.7021ZM21.8344 23.1821L16.3544 17.7021L15.223 18.8334L20.703 24.3135L21.8344 23.1821ZM22.4708 23.1821C22.2951 23.3578 22.0101 23.3578 21.8344 23.1821L20.703 24.3135C21.5036 25.114 22.8016 25.114 23.6022 24.3135L22.4708 23.1821ZM22.4708 22.5457C22.6465 22.7214 22.6465 23.0064 22.4708 23.1821L23.6022 24.3135C24.4027 23.5129 24.4027 22.2149 23.6022 21.4143L22.4708 22.5457ZM16.9908 17.0657L22.4708 22.5457L23.6022 21.4143L18.1221 15.9343L16.9908 17.0657ZM22.4708 10.4543L16.9908 15.9343L18.1221 17.0657L23.6021 11.5856L22.4708 10.4543ZM22.4708 9.81788C22.6465 9.99361 22.6465 10.2785 22.4708 10.4543L23.6021 11.5856C24.4027 10.7851 24.4027 9.48708 23.6021 8.68651L22.4708 9.81788ZM21.8344 9.81788C22.0101 9.64214 22.295 9.64214 22.4708 9.81788L23.6021 8.68651C22.8016 7.88593 21.5036 7.88593 20.703 8.68651L21.8344 9.81788ZM16.3544 15.2979L21.8344 9.81788L20.703 8.68651L15.223 14.1665L16.3544 15.2979ZM10.0964 10.1713L15.223 15.2979L16.3544 14.1665L11.2278 9.03997L10.0964 10.1713ZM9.46003 10.1713C9.63577 9.9956 9.92069 9.9956 10.0964 10.1713L11.2278 9.03997C10.4272 8.23939 9.12924 8.23939 8.32866 9.03997L9.46003 10.1713Z", fill: "white", mask: "url(#path-1-inside-1)" }, void 0), jsxRuntime.jsx("circle", { cx: "16", cy: "16.5", r: "12", stroke: theme.colors.shades['300'].color, strokeWidth: "0.5" }, void 0)] }), void 0));
|
|
6958
7055
|
};
|
|
6959
7056
|
|
|
6960
|
-
var CustomRadioGroup = newStyled(lt)(templateObject_1$1q || (templateObject_1$1q = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
6961
|
-
newStyled(lt.Label)(templateObject_2$14 || (templateObject_2$14 = __makeTemplateObject(["\n font-size: 0.88rem;\n"], ["\n font-size: 0.88rem;\n"])));
|
|
6962
|
-
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$R || (templateObject_3$R = __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"])));
|
|
6963
|
-
var Span = newStyled.span(templateObject_4$G || (templateObject_4$G = __makeTemplateObject(["\n font-weight: 600;\n"], ["\n font-weight: 600;\n"])));
|
|
6964
|
-
var OptionsContainer = newStyled.div(templateObject_5$w || (templateObject_5$w = __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"])));
|
|
6965
|
-
var Label$5 = function (_a) {
|
|
6966
|
-
var label = _a.label, values = _a.values;
|
|
6967
|
-
return (jsxRuntime.jsxs(Text$7, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [label, " ", jsxRuntime.jsx(Span, { children: values }, void 0)] }), void 0));
|
|
6968
|
-
};
|
|
6969
|
-
var Option = function (_a) {
|
|
6970
|
-
var value = _a.value, children = _a.children;
|
|
6971
|
-
return (jsxRuntime.jsx(CustomRadioGroupOption, __assign$1({ value: value }, { children: children }), void 0));
|
|
6972
|
-
};
|
|
6973
|
-
var ColorRadioGroup = function (_a) {
|
|
6974
|
-
var value = _a.value, onChange = _a.onChange, children = _a.children, className = _a.className;
|
|
6975
|
-
return (jsxRuntime.jsx(CustomRadioGroup, __assign$1({ value: value, onChange: onChange, className: className }, { children: children }), void 0));
|
|
6976
|
-
};
|
|
6977
|
-
var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
|
|
6978
|
-
Label: Label$5,
|
|
6979
|
-
Option: Option,
|
|
6980
|
-
OptionsContainer: OptionsContainer,
|
|
6981
|
-
});
|
|
6982
|
-
var templateObject_1$1q, templateObject_2$14, templateObject_3$R, templateObject_4$G, templateObject_5$w;
|
|
6983
|
-
|
|
6984
7057
|
var Container$W = newStyled.div(templateObject_1$1p || (templateObject_1$1p = __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) {
|
|
6985
7058
|
var borderColor = _a.borderColor;
|
|
6986
7059
|
return borderColor;
|
|
@@ -6997,7 +7070,37 @@ var PatternSelector = function (_a) {
|
|
|
6997
7070
|
};
|
|
6998
7071
|
var templateObject_1$1p, templateObject_2$13;
|
|
6999
7072
|
|
|
7000
|
-
var renderOptions$1 = function (
|
|
7073
|
+
var renderOptions$1 = function (options, showCross) {
|
|
7074
|
+
if (showCross === void 0) { showCross = false; }
|
|
7075
|
+
if ((options === null || options === void 0 ? void 0 : options.length) === 0) {
|
|
7076
|
+
return jsx(OutOfStock, { title: "out of stock color" }, void 0);
|
|
7077
|
+
}
|
|
7078
|
+
return options === null || options === void 0 ? void 0 : options.map(function (option) { return (jsx(ColorRadioGroup$1.Option, __assign$1({ value: option }, { children: function (_a) {
|
|
7079
|
+
var checked = _a.checked;
|
|
7080
|
+
if (option.meta.color) {
|
|
7081
|
+
return (jsx(ColorSelector, { color: option.meta.color, selected: checked, testId: "".concat(option.label.split(' ').join('-').toLowerCase(), "-selector"), noStock: option.noStock, showCross: showCross }, void 0));
|
|
7082
|
+
}
|
|
7083
|
+
if (option.meta.pattern) {
|
|
7084
|
+
return (jsx(PatternSelector, { url: option.meta.pattern.url, selected: checked, noStock: option.noStock }, void 0));
|
|
7085
|
+
}
|
|
7086
|
+
return null;
|
|
7087
|
+
} }), option.label)); });
|
|
7088
|
+
};
|
|
7089
|
+
var SingleColorPicker = function (_a) {
|
|
7090
|
+
var options = _a.options, selectedValue = _a.selectedValue, label = _a.label, onChange = _a.onChange, _b = _a.inline, inline = _b === void 0 ? false : _b, _c = _a.showCross, showCross = _c === void 0 ? false : _c;
|
|
7091
|
+
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.63rem', marginLeft: inline ? '1.5rem' : '0' }, "data-testid": "radio-group-options-container" }, { children: renderOptions$1(options, showCross) }), void 0)] }), void 0));
|
|
7092
|
+
};
|
|
7093
|
+
|
|
7094
|
+
var ColorPickerWithTooltip = function (_a) {
|
|
7095
|
+
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;
|
|
7096
|
+
var visibleOptions = options.slice(0, maxVisibleOptions);
|
|
7097
|
+
var hiddenOptions = options.slice(maxVisibleOptions);
|
|
7098
|
+
var ColorPickerWrapper = newStyled(ColorRadioGroup$1)(templateObject_1$1o || (templateObject_1$1o = __makeTemplateObject(["\n max-width: 300px;\n\n .tooltip-container {\n transform: translateX(-30%);\n &::before,\n &::after {\n left: 80%;\n }\n }\n\n .arrow {\n width: 24px;\n height: 24px;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n margin-bottom: 10px;\n }\n\n .tooltip-content {\n display: flex;\n max-width: 300px;\n flex-wrap: wrap;\n }\n "], ["\n max-width: 300px;\n\n .tooltip-container {\n transform: translateX(-30%);\n &::before,\n &::after {\n left: 80%;\n }\n }\n\n .arrow {\n width: 24px;\n height: 24px;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n margin-bottom: 10px;\n }\n\n .tooltip-content {\n display: flex;\n max-width: 300px;\n flex-wrap: wrap;\n }\n "])));
|
|
7099
|
+
return (jsxs(ColorPickerWrapper, __assign$1({ value: selectedValue, onChange: onChange, css: { flexDirection: inline ? 'row' : 'column', alignItems: inline ? 'center' : 'start' } }, { children: [jsx(ColorRadioGroup$1.Label, { label: label, values: selectedValue && !inline ? selectedValue.label : undefined }, void 0), jsxs(ColorRadioGroup$1.OptionsContainer, __assign$1({ css: { marginTop: inline ? '0' : '0.63rem', marginLeft: inline ? '1.5rem' : '0' }, "data-testid": "radio-group-options-container" }, { children: [renderOptions$1(visibleOptions, showCross), !!hiddenOptions.length && (jsx("div", __assign$1({ style: { display: 'flex', alignItems: 'center', justifyContent: 'center' } }, { children: jsx(Tooltip, __assign$1({ position: 1, elementContent: jsx("div", __assign$1({ className: "tooltip-content" }, { children: renderOptions$1(hiddenOptions, showCross) }), void 0), withArrow: true }, { children: jsx("div", __assign$1({ className: "arrow", "data-testid": "tooltip-arrow" }, { children: jsx(Icon$1, { name: "arrows/chevron_down", width: 1, height: 1 }, void 0) }), void 0) }), void 0) }), void 0))] }), void 0)] }), void 0));
|
|
7100
|
+
};
|
|
7101
|
+
var templateObject_1$1o;
|
|
7102
|
+
|
|
7103
|
+
var renderOptions = function (selectedColor, options) {
|
|
7001
7104
|
if (options == null || options.length === 0) {
|
|
7002
7105
|
return jsxRuntime.jsx(OutOfStock, { title: "out of stock color" }, void 0);
|
|
7003
7106
|
}
|
|
@@ -7030,39 +7133,9 @@ var MultiColorPicker = function (_a) {
|
|
|
7030
7133
|
var valueLabels = Array.from(selectedColor)
|
|
7031
7134
|
.map(function (item) { return item.label; })
|
|
7032
7135
|
.join(' | ');
|
|
7033
|
-
return (jsxRuntime.jsxs(ColorRadioGroup$1, __assign$1({ value: selectedColor, onChange: onChangeHandler }, { children: [jsxRuntime.jsx(ColorRadioGroup$1.Label, { label: label, values: valueLabels }, void 0), jsxRuntime.jsx(ColorRadioGroup$1.OptionsContainer, { children: renderOptions
|
|
7034
|
-
};
|
|
7035
|
-
|
|
7036
|
-
var renderOptions = function (options, showCross) {
|
|
7037
|
-
if (showCross === void 0) { showCross = false; }
|
|
7038
|
-
if ((options === null || options === void 0 ? void 0 : options.length) === 0) {
|
|
7039
|
-
return jsx(OutOfStock, { title: "out of stock color" }, void 0);
|
|
7040
|
-
}
|
|
7041
|
-
return options === null || options === void 0 ? void 0 : options.map(function (option) { return (jsx(ColorRadioGroup$1.Option, __assign$1({ value: option }, { children: function (_a) {
|
|
7042
|
-
var checked = _a.checked;
|
|
7043
|
-
if (option.meta.color) {
|
|
7044
|
-
return (jsx(ColorSelector, { color: option.meta.color, selected: checked, testId: "".concat(option.label.split(' ').join('-').toLowerCase(), "-selector"), noStock: option.noStock, showCross: showCross }, void 0));
|
|
7045
|
-
}
|
|
7046
|
-
if (option.meta.pattern) {
|
|
7047
|
-
return (jsx(PatternSelector, { url: option.meta.pattern.url, selected: checked, noStock: option.noStock }, void 0));
|
|
7048
|
-
}
|
|
7049
|
-
return null;
|
|
7050
|
-
} }), option.label)); });
|
|
7051
|
-
};
|
|
7052
|
-
var SingleColorPicker = function (_a) {
|
|
7053
|
-
var options = _a.options, selectedValue = _a.selectedValue, label = _a.label, onChange = _a.onChange, _b = _a.inline, inline = _b === void 0 ? false : _b, _c = _a.showCross, showCross = _c === void 0 ? false : _c;
|
|
7054
|
-
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.63rem', marginLeft: inline ? '1.5rem' : '0' }, "data-testid": "radio-group-options-container" }, { children: renderOptions(options, showCross) }), void 0)] }), void 0));
|
|
7136
|
+
return (jsxRuntime.jsxs(ColorRadioGroup$1, __assign$1({ value: selectedColor, onChange: onChangeHandler }, { children: [jsxRuntime.jsx(ColorRadioGroup$1.Label, { label: label, values: valueLabels }, void 0), jsxRuntime.jsx(ColorRadioGroup$1.OptionsContainer, { children: renderOptions(selectedColor, options) }, void 0)] }), void 0));
|
|
7055
7137
|
};
|
|
7056
7138
|
|
|
7057
|
-
var ColorPickerWithTooltip = function (_a) {
|
|
7058
|
-
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;
|
|
7059
|
-
var visibleOptions = options.slice(0, maxVisibleOptions);
|
|
7060
|
-
var hiddenOptions = options.slice(maxVisibleOptions);
|
|
7061
|
-
var ColorPickerWrapper = newStyled(ColorRadioGroup$1)(templateObject_1$1o || (templateObject_1$1o = __makeTemplateObject(["\n max-width: 300px;\n\n .tooltip-container {\n transform: translateX(-30%);\n &::before,\n &::after {\n left: 80%;\n }\n }\n\n .arrow {\n width: 24px;\n height: 24px;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n margin-bottom: 10px;\n }\n\n .tooltip-content {\n display: flex;\n max-width: 300px;\n flex-wrap: wrap;\n }\n "], ["\n max-width: 300px;\n\n .tooltip-container {\n transform: translateX(-30%);\n &::before,\n &::after {\n left: 80%;\n }\n }\n\n .arrow {\n width: 24px;\n height: 24px;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n margin-bottom: 10px;\n }\n\n .tooltip-content {\n display: flex;\n max-width: 300px;\n flex-wrap: wrap;\n }\n "])));
|
|
7062
|
-
return (jsxs(ColorPickerWrapper, __assign$1({ value: selectedValue, onChange: onChange, css: { flexDirection: inline ? 'row' : 'column', alignItems: inline ? 'center' : 'start' } }, { children: [jsx(ColorRadioGroup$1.Label, { label: label, values: selectedValue && !inline ? selectedValue.label : undefined }, void 0), jsxs(ColorRadioGroup$1.OptionsContainer, __assign$1({ css: { marginTop: inline ? '0' : '0.63rem', marginLeft: inline ? '1.5rem' : '0' }, "data-testid": "radio-group-options-container" }, { children: [renderOptions(visibleOptions, showCross), !!hiddenOptions.length && (jsx("div", __assign$1({ style: { display: 'flex', alignItems: 'center', justifyContent: 'center' } }, { children: jsx(Tooltip, __assign$1({ position: 1, elementContent: jsx("div", __assign$1({ className: "tooltip-content" }, { children: renderOptions(hiddenOptions, showCross) }), void 0), withArrow: true }, { children: jsx("div", __assign$1({ className: "arrow", "data-testid": "tooltip-arrow" }, { children: jsx(Icon$1, { name: "arrows/chevron_down", width: 1, height: 1 }, void 0) }), void 0) }), void 0) }), void 0))] }), void 0)] }), void 0));
|
|
7063
|
-
};
|
|
7064
|
-
var templateObject_1$1o;
|
|
7065
|
-
|
|
7066
7139
|
var Wrapper$5 = newStyled.div(templateObject_1$1n || (templateObject_1$1n = __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'); });
|
|
7067
7140
|
var Col$1 = newStyled.div(templateObject_2$12 || (templateObject_2$12 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
7068
7141
|
var Row$2 = newStyled.div(templateObject_3$Q || (templateObject_3$Q = __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) {
|
|
@@ -14901,265 +14974,9 @@ var useModal = function (id) {
|
|
|
14901
14974
|
};
|
|
14902
14975
|
var templateObject_1$N, templateObject_2$D, templateObject_3$x, templateObject_4$r, templateObject_5$k, templateObject_6$i, templateObject_7$g;
|
|
14903
14976
|
|
|
14904
|
-
var
|
|
14905
|
-
var height = _a.height;
|
|
14906
|
-
return height || '0.5rem';
|
|
14907
|
-
}, function (_a) {
|
|
14908
|
-
var backgroundColor = _a.backgroundColor;
|
|
14909
|
-
return backgroundColor;
|
|
14910
|
-
}, function (_a) {
|
|
14911
|
-
var percent = _a.percent;
|
|
14912
|
-
return (percent ? getBarWithBasedOnPercent$1(percent) : '50%');
|
|
14913
|
-
}, function (_a) {
|
|
14914
|
-
var borderRadius = _a.borderRadius;
|
|
14915
|
-
return borderRadius || '0.25rem';
|
|
14916
|
-
}, function (_a) {
|
|
14917
|
-
var percent = _a.percent;
|
|
14918
|
-
return (percent ? '0' : '-50%');
|
|
14919
|
-
}, function (_a) {
|
|
14920
|
-
var percent = _a.percent;
|
|
14921
|
-
return (percent ? 'none' : 'loading 1s ease-in 0.5s infinite');
|
|
14922
|
-
});
|
|
14923
|
-
var Background$1 = newStyled.div(function (_a) {
|
|
14924
|
-
var backgroundColor = _a.backgroundColor, height = _a.height, borderRadius = _a.borderRadius;
|
|
14925
|
-
return ({
|
|
14926
|
-
height: height || '0.5rem',
|
|
14927
|
-
width: '100%',
|
|
14928
|
-
backgroundColor: backgroundColor,
|
|
14929
|
-
borderRadius: borderRadius || '0.25rem',
|
|
14930
|
-
});
|
|
14931
|
-
});
|
|
14932
|
-
var BarContainer = newStyled.div({
|
|
14933
|
-
display: 'grid',
|
|
14934
|
-
gridTemplateColumns: '1fr 10fr 1fr',
|
|
14935
|
-
justifyContent: 'center',
|
|
14936
|
-
alignItems: 'center',
|
|
14937
|
-
width: '416px',
|
|
14938
|
-
gap: '8px',
|
|
14939
|
-
maxWidth: '100%',
|
|
14940
|
-
padding: '0 16px',
|
|
14941
|
-
position: 'relative',
|
|
14942
|
-
});
|
|
14943
|
-
var Container$z = newStyled.div(function (_a) {
|
|
14944
|
-
var backgroundColor = _a.backgroundColor;
|
|
14945
|
-
return ({
|
|
14946
|
-
width: '475px',
|
|
14947
|
-
maxWidth: '100%',
|
|
14948
|
-
display: 'flex',
|
|
14949
|
-
gap: '13px',
|
|
14950
|
-
padding: '16px 0',
|
|
14951
|
-
flexDirection: 'column',
|
|
14952
|
-
alignItems: 'center',
|
|
14953
|
-
background: backgroundColor,
|
|
14954
|
-
});
|
|
14955
|
-
});
|
|
14956
|
-
var MessageContainer = newStyled.div(templateObject_2$C || (templateObject_2$C = __makeTemplateObject(["\n padding: 0 1rem;\n text-align: center;\n"], ["\n padding: 0 1rem;\n text-align: center;\n"])));
|
|
14957
|
-
var getBarWithBasedOnPercent$1 = function (percent) {
|
|
14958
|
-
return percent <= 100 && percent >= 0 ? "".concat(percent, "%") : '0%';
|
|
14959
|
-
};
|
|
14960
|
-
var Value = newStyled.div(function (_a) {
|
|
14961
|
-
var isBold = _a.isBold;
|
|
14962
|
-
return ({
|
|
14963
|
-
fontWeight: isBold ? 600 : 400,
|
|
14964
|
-
});
|
|
14965
|
-
});
|
|
14966
|
-
var _calculatePercentage = function (currentAmount, endingValue) {
|
|
14967
|
-
var percentage = currentAmount / endingValue;
|
|
14968
|
-
return percentage > 1 ? 100 : percentage * 100;
|
|
14969
|
-
};
|
|
14970
|
-
var MotivatorProgressBar = function (_a) {
|
|
14971
|
-
var _b = _a.fillColor, fillColor = _b === void 0 ? '#F7A08B' : _b, _c = _a.backgroundColor, backgroundColor = _c === void 0 ? '#F7F7F7' : _c, _d = _a.unfilledColor, unfilledColor = _d === void 0 ? '#EEBFBD' : _d, _e = _a.currencyCode, currencyCode = _e === void 0 ? '$' : _e, _f = _a.endingValue, endingValue = _f === void 0 ? 70 : _f, _g = _a.currentAmount, currentAmount = _g === void 0 ? 0 : _g, rewardUnlockedMessage = _a.rewardUnlockedMessage, _h = _a.isClubBarMotivatorTest, isClubBarMotivatorTest = _h === void 0 ? false : _h;
|
|
14972
|
-
var theme = useTheme();
|
|
14973
|
-
var isRewardUnlocked = currentAmount >= endingValue;
|
|
14974
|
-
var progress = _calculatePercentage(currentAmount, endingValue);
|
|
14975
|
-
var getRemainingAmountMessage = function () {
|
|
14976
|
-
var remainingAmount = Math.round((endingValue - currentAmount) * 100) / 100;
|
|
14977
|
-
if (isClubBarMotivatorTest) {
|
|
14978
|
-
return (jsxRuntime.jsxs(MessageContainer, { children: ["Spend ", currencyCode, remainingAmount, " more to unlock ", jsxRuntime.jsx("strong", { children: "Free Priority Shipping" }, void 0), " with Club!"] }, void 0));
|
|
14979
|
-
}
|
|
14980
|
-
return (jsxRuntime.jsxs(MessageContainer, { children: ["Spend ", currencyCode, remainingAmount, " more to get ", jsxRuntime.jsx("strong", { children: "Free Shipping" }, void 0)] }, void 0));
|
|
14981
|
-
};
|
|
14982
|
-
return (jsxRuntime.jsxs(Container$z, __assign$1({ backgroundColor: backgroundColor }, { children: [jsxRuntime.jsxs(BarContainer, __assign$1({ "data-testid": "MPBContainer" }, { children: [jsxRuntime.jsxs(Value, { children: [currencyCode, currentAmount] }, void 0), jsxRuntime.jsx(Background$1, __assign$1({ backgroundColor: unfilledColor || theme.colors.shades['100'].color, "data-testid": "MPBBackground" }, { children: jsxRuntime.jsx(Bar$1, { "data-testid": "MPBBar", backgroundColor: fillColor, percent: progress }, void 0) }), void 0), jsxRuntime.jsxs(Value, __assign$1({ isBold: true }, { children: [currencyCode, endingValue] }), void 0)] }), void 0), isRewardUnlocked ? (jsxRuntime.jsx(MessageContainer, { dangerouslySetInnerHTML: { __html: rewardUnlockedMessage } }, void 0)) : (getRemainingAmountMessage())] }), void 0));
|
|
14983
|
-
};
|
|
14984
|
-
var templateObject_1$M, templateObject_2$C;
|
|
14977
|
+
var htmlReactParser = {exports: {}};
|
|
14985
14978
|
|
|
14986
|
-
var
|
|
14987
|
-
var theme = _a.theme;
|
|
14988
|
-
return theme.component.orderBar.backgroundColor;
|
|
14989
|
-
});
|
|
14990
|
-
var H1 = newStyled.h1(templateObject_2$B || (templateObject_2$B = __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; });
|
|
14991
|
-
var OrderBar = function (_a) {
|
|
14992
|
-
var message = _a.message, color = _a.color;
|
|
14993
|
-
var theme = useTheme();
|
|
14994
|
-
return (jsxRuntime.jsxs(Container$y, __assign$1({ color: color }, { children: [jsxRuntime.jsx(Icon.Actions.Check, { width: 1.25, height: 0.875, fill: "#2F806A" }, void 0), jsxRuntime.jsx(H1, __assign$1({ color: theme.component.orderBar.fontColor }, { children: message }), void 0)] }), void 0));
|
|
14995
|
-
};
|
|
14996
|
-
var templateObject_1$L, templateObject_2$B;
|
|
14997
|
-
|
|
14998
|
-
var StyledButton$1 = newStyled(Ye.Button)(function (props) { return ({
|
|
14999
|
-
background: props.bgColor,
|
|
15000
|
-
height: '100%',
|
|
15001
|
-
width: '100%',
|
|
15002
|
-
maxHeight: '48px',
|
|
15003
|
-
border: 'none',
|
|
15004
|
-
display: 'flex',
|
|
15005
|
-
cursor: props.disabled ? 'not-allowed' : 'pointer',
|
|
15006
|
-
justifyContent: 'space-between',
|
|
15007
|
-
alignItems: 'center',
|
|
15008
|
-
padding: '10px 24px',
|
|
15009
|
-
}); });
|
|
15010
|
-
var StyledPanel = newStyled(Ye.Panel)({
|
|
15011
|
-
width: '100%',
|
|
15012
|
-
background: 'transparent',
|
|
15013
|
-
border: 'none',
|
|
15014
|
-
display: 'flex',
|
|
15015
|
-
flexDirection: 'column',
|
|
15016
|
-
alignItems: 'center',
|
|
15017
|
-
justifyContent: 'center',
|
|
15018
|
-
gap: '10px',
|
|
15019
|
-
});
|
|
15020
|
-
var StyledContent = newStyled.div(templateObject_1$K || (templateObject_1$K = __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) {
|
|
15021
|
-
var bgColor = _a.bgColor;
|
|
15022
|
-
return bgColor !== null && bgColor !== void 0 ? bgColor : '';
|
|
15023
|
-
}, function (_a) {
|
|
15024
|
-
var _b = _a.width, width = _b === void 0 ? '100%' : _b;
|
|
15025
|
-
return width;
|
|
15026
|
-
});
|
|
15027
|
-
var StyledController = newStyled.div(templateObject_2$A || (templateObject_2$A = __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"])));
|
|
15028
|
-
var templateObject_1$K, templateObject_2$A;
|
|
15029
|
-
|
|
15030
|
-
var StyledDisclosure = newStyled(Ye)(function (_a) {
|
|
15031
|
-
var background = _a.background, width = _a.width;
|
|
15032
|
-
return ({
|
|
15033
|
-
display: 'flex',
|
|
15034
|
-
flexDirection: 'column',
|
|
15035
|
-
justifyContent: 'center',
|
|
15036
|
-
gap: '10px',
|
|
15037
|
-
background: background !== null && background !== void 0 ? background : '',
|
|
15038
|
-
width: width !== null && width !== void 0 ? width : 'auto',
|
|
15039
|
-
borderRadius: '8px',
|
|
15040
|
-
border: '0.063rem solid',
|
|
15041
|
-
borderColor: '#e5e5e5',
|
|
15042
|
-
padding: 'unset',
|
|
15043
|
-
overflow: 'hidden',
|
|
15044
|
-
});
|
|
15045
|
-
});
|
|
15046
|
-
var ControlIconComponent = React$2.memo(function (_a) {
|
|
15047
|
-
var open = _a.open, openIcon = _a.openIcon, closeIcon = _a.closeIcon, fillControlsCollor = _a.fillControlsCollor;
|
|
15048
|
-
var Icon = open ? closeIcon : openIcon;
|
|
15049
|
-
return jsxRuntime.jsx(Icon, { title: open ? 'Close' : 'Open', fill: fillControlsCollor }, void 0);
|
|
15050
|
-
});
|
|
15051
|
-
ControlIconComponent.displayName = 'ControlIconComponent';
|
|
15052
|
-
var HeaderContentComponent = React$2.memo(function (_a) {
|
|
15053
|
-
var open = _a.open, header = _a.header, headerOnOpen = _a.headerOnOpen;
|
|
15054
|
-
return jsxRuntime.jsx(jsxRuntime.Fragment, { children: open && headerOnOpen ? headerOnOpen : header }, void 0);
|
|
15055
|
-
});
|
|
15056
|
-
HeaderContentComponent.displayName = 'HeaderContentComponent';
|
|
15057
|
-
var AccordionContent = function (_a) {
|
|
15058
|
-
var open = _a.open, disabled = _a.disabled, bgColor = _a.bgColor, fillControlsCollor = _a.fillControlsCollor, header = _a.header, headerOnOpen = _a.headerOnOpen, children = _a.children, openIcon = _a.openIcon, closeIcon = _a.closeIcon, contentWidth = _a.contentWidth;
|
|
15059
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(StyledButton$1, __assign$1({ "data-testid": "styled-button", disabled: disabled, bgColor: bgColor }, { children: [jsxRuntime.jsx(HeaderContentComponent, { open: open, header: header, headerOnOpen: headerOnOpen }, void 0), jsxRuntime.jsxs(StyledController, { children: [jsxRuntime.jsx(Text$7, __assign$1({ variant: "body", weight: "demi", size: "small", color: fillControlsCollor }, { children: "View Offers" }), void 0), jsxRuntime.jsx("span", __assign$1({ style: { marginTop: '3px' } }, { children: jsxRuntime.jsx(ControlIconComponent, { open: open, openIcon: openIcon, closeIcon: closeIcon, fillControlsCollor: fillControlsCollor }, void 0) }), void 0)] }, void 0)] }), void 0), open && (jsxRuntime.jsx(StyledContent, __assign$1({ width: contentWidth, bgColor: bgColor, onClick: function (e) { return e.stopPropagation(); } }, { children: jsxRuntime.jsx(StyledPanel, { children: children }, void 0) }), void 0))] }, void 0));
|
|
15060
|
-
};
|
|
15061
|
-
var BasicAccordion = function (_a) {
|
|
15062
|
-
var children = _a.children, header = _a.header, bgColor = _a.bgColor, headerOnOpen = _a.headerOnOpen, _b = _a.defaultOpen, defaultOpen = _b === void 0 ? false : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, openIcon = _a.openIcon, closeIcon = _a.closeIcon, onClick = _a.onClick, _d = _a.width, width = _d === void 0 ? '100%' : _d, fillControlsCollor = _a.fillControlsCollor;
|
|
15063
|
-
return (jsxRuntime.jsx(StyledDisclosure, __assign$1({ "data-testid": "accordion-container", as: "div", background: bgColor, defaultOpen: defaultOpen, disabled: disabled, onClick: onClick, width: width }, { children: function (_a) {
|
|
15064
|
-
var open = _a.open;
|
|
15065
|
-
return (jsxRuntime.jsx(AccordionContent, __assign$1({ open: open, disabled: disabled, bgColor: bgColor, fillControlsCollor: fillControlsCollor, header: header, headerOnOpen: headerOnOpen, openIcon: openIcon, closeIcon: closeIcon }, { children: children }), void 0));
|
|
15066
|
-
} }), void 0));
|
|
15067
|
-
};
|
|
15068
|
-
|
|
15069
|
-
var TableElement$3 = newStyled.table(templateObject_1$J || (templateObject_1$J = __makeTemplateObject(["\n box-sizing: border-box;\n border-radius: ", ";\n border-bottom-left-radius: ", ";\n border-bottom-right-radius: ", ";\n border: 0.063rem solid var(--colors-shades-100-color);\n border-spacing: 0;\n font-size: 0.875rem;\n line-height: 3.125rem;\n width: 100%;\n color: var(--colors-shades-700-color);\n"], ["\n box-sizing: border-box;\n border-radius: ", ";\n border-bottom-left-radius: ", ";\n border-bottom-right-radius: ", ";\n border: 0.063rem solid var(--colors-shades-100-color);\n border-spacing: 0;\n font-size: 0.875rem;\n line-height: 3.125rem;\n width: 100%;\n color: var(--colors-shades-700-color);\n"])), function (props) { return (props.isSticky ? '0' : '0.5rem'); }, function (props) { return (props.isSticky ? '0.5rem' : '0'); }, function (props) { return (props.isSticky ? '0.5rem' : '0'); });
|
|
15070
|
-
var TableCell$3 = newStyled.td(templateObject_2$z || (templateObject_2$z = __makeTemplateObject(["\n border-bottom: 0.063rem solid var(--colors-shades-100-color);\n border-right: 0.063rem solid var(--colors-shades-100-color);\n line-height: normal;\n padding: 1rem 0;\n text-align: center;\n position: ", ";\n left: 0;\n z-index: ", ";\n border-bottom-left-radius: ", ";\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n font-weight: 600;\n text-align: center;\n }\n"], ["\n border-bottom: 0.063rem solid var(--colors-shades-100-color);\n border-right: 0.063rem solid var(--colors-shades-100-color);\n line-height: normal;\n padding: 1rem 0;\n text-align: center;\n position: ", ";\n left: 0;\n z-index: ", ";\n border-bottom-left-radius: ", ";\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n font-weight: 600;\n text-align: center;\n }\n"])), function (props) { return (props.isSticky ? 'sticky' : 'unset'); }, function (props) { return (props.isSticky ? 1 : 0); }, function (props) { return (props.isLast ? '0.5rem' : '0'); });
|
|
15071
|
-
var TableHead$3 = newStyled.th(templateObject_3$w || (templateObject_3$w = __makeTemplateObject(["\n border-bottom: 0.063rem solid var(--colors-shades-100-color);\n border-right: 0.063rem solid var(--colors-shades-100-color);\n font-weight: 600;\n line-height: normal;\n padding: 1rem;\n text-align: start;\n position: ", ";\n left: 0;\n z-index: ", ";\n background-color: ", ";\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n text-align: center;\n }\n"], ["\n border-bottom: 0.063rem solid var(--colors-shades-100-color);\n border-right: 0.063rem solid var(--colors-shades-100-color);\n font-weight: 600;\n line-height: normal;\n padding: 1rem;\n text-align: start;\n position: ", ";\n left: 0;\n z-index: ", ";\n background-color: ", ";\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n text-align: center;\n }\n"])), function (props) { return (props.isSticky ? 'sticky' : 'unset'); }, function (props) { return (props.isSticky ? 1 : 0); }, function (props) { return (props.isSticky ? '#fff6ef' : 'unset'); });
|
|
15072
|
-
var Label$3 = newStyled('div')(templateObject_4$q || (templateObject_4$q = __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"])));
|
|
15073
|
-
newStyled(Label$3)(templateObject_5$j || (templateObject_5$j = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
15074
|
-
newStyled(Label$3)(templateObject_6$h || (templateObject_6$h = __makeTemplateObject(["\n width: 20px;\n transform: rotate(270deg);\n"], ["\n width: 20px;\n transform: rotate(270deg);\n"])));
|
|
15075
|
-
var Container$x = newStyled('div')(templateObject_7$f || (templateObject_7$f = __makeTemplateObject(["\n gap: 5px;\n display: flex;\n width: fit-content;\n align-items: center;\n"], ["\n gap: 5px;\n display: flex;\n width: fit-content;\n align-items: center;\n"])));
|
|
15076
|
-
newStyled('span')(templateObject_8$b || (templateObject_8$b = __makeTemplateObject(["\n display: flex;\n min-width: 70px;\n justify-content: center;\n"], ["\n display: flex;\n min-width: 70px;\n justify-content: center;\n"])));
|
|
15077
|
-
var Column$2 = newStyled('div')(templateObject_9$7 || (templateObject_9$7 = __makeTemplateObject(["\n display: flex;\n min-width: 675px;\n align-items: flex-start;\n flex-direction: column;\n\n @media (max-width: 768px) {\n min-width: 100%;\n }\n"], ["\n display: flex;\n min-width: 675px;\n align-items: flex-start;\n flex-direction: column;\n\n @media (max-width: 768px) {\n min-width: 100%;\n }\n"])));
|
|
15078
|
-
var TableRow$3 = newStyled.tr(templateObject_10$7 || (templateObject_10$7 = __makeTemplateObject(["\n &:last-child {\n td {\n border-bottom: none;\n }\n }\n\n &.background {\n background-color: var(--colors-shades-10-color);\n }\n"], ["\n &:last-child {\n td {\n border-bottom: none;\n }\n }\n\n &.background {\n background-color: var(--colors-shades-10-color);\n }\n"])));
|
|
15079
|
-
var Header$1 = newStyled('div')(templateObject_11$5 || (templateObject_11$5 = __makeTemplateObject(["\n gap: 15px;\n display: flex;\n left: 0;\n border: 1px solid #e5e5e5;\n width: 100%;\n max-width: 92vw;\n position: sticky;\n padding: 14px 18px;\n border-top-left-radius: 12px;\n border-top-right-radius: 12px;\n border-bottom: none;\n background-color: #fff6ef;\n font-size: 0.875rem;\n font-weight: 600;\n\n @media (min-width: 400px) {\n max-width: 92.5vw;\n }\n"], ["\n gap: 15px;\n display: flex;\n left: 0;\n border: 1px solid #e5e5e5;\n width: 100%;\n max-width: 92vw;\n position: sticky;\n padding: 14px 18px;\n border-top-left-radius: 12px;\n border-top-right-radius: 12px;\n border-bottom: none;\n background-color: #fff6ef;\n font-size: 0.875rem;\n font-weight: 600;\n\n @media (min-width: 400px) {\n max-width: 92.5vw;\n }\n"])));
|
|
15080
|
-
var Parent = newStyled('div')(templateObject_12$2 || (templateObject_12$2 = __makeTemplateObject(["\n max-width: 100vw;\n position: relative;\n\n @media (max-width: 768px) {\n overflow-x: auto;\n &::-webkit-scrollbar {\n display: none;\n }\n\n -ms-overflow-style: none;\n }\n"], ["\n max-width: 100vw;\n position: relative;\n\n @media (max-width: 768px) {\n overflow-x: auto;\n &::-webkit-scrollbar {\n display: none;\n }\n\n -ms-overflow-style: none;\n }\n"])));
|
|
15081
|
-
var Arrow = newStyled('div')(templateObject_13$2 || (templateObject_13$2 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n width: 44px;\n height: 44px;\n z-index: 2;\n border-radius: 50%;\n background-color: #d4605b;\n bottom: 20px;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n width: 44px;\n height: 44px;\n z-index: 2;\n border-radius: 50%;\n background-color: #d4605b;\n bottom: 20px;\n"])));
|
|
15082
|
-
var TableHeader = newStyled('thead')(templateObject_14$2 || (templateObject_14$2 = __makeTemplateObject(["\n background-color: ", ";\n"], ["\n background-color: ", ";\n"])), function (props) {
|
|
15083
|
-
return props.isColored ? 'var(--colors-pallete-primary-80-color)' : 'unset';
|
|
15084
|
-
});
|
|
15085
|
-
var templateObject_1$J, templateObject_2$z, templateObject_3$w, templateObject_4$q, templateObject_5$j, templateObject_6$h, templateObject_7$f, templateObject_8$b, templateObject_9$7, templateObject_10$7, templateObject_11$5, templateObject_12$2, templateObject_13$2, templateObject_14$2;
|
|
15086
|
-
|
|
15087
|
-
var getIsOdd$2 = function (number) { return number % 2 !== 0; };
|
|
15088
|
-
// TODO: Refactor this color logic
|
|
15089
|
-
var getCellColor$2 = function (index, cell, isLight) {
|
|
15090
|
-
if (index == 0) {
|
|
15091
|
-
return isLight ? '#fff6ef' : '#f6f0e7';
|
|
15092
|
-
}
|
|
15093
|
-
switch (cell) {
|
|
15094
|
-
case 'XS':
|
|
15095
|
-
return '#f5bab0';
|
|
15096
|
-
case 'S':
|
|
15097
|
-
return '#f7a08b';
|
|
15098
|
-
case 'M':
|
|
15099
|
-
return '#ffe1b8';
|
|
15100
|
-
case 'L':
|
|
15101
|
-
return '#f5bab0';
|
|
15102
|
-
case 'XL':
|
|
15103
|
-
return '#8bbeea';
|
|
15104
|
-
case '2XL':
|
|
15105
|
-
return '#b1d7c3';
|
|
15106
|
-
case '3XL':
|
|
15107
|
-
return '#e7a4f7';
|
|
15108
|
-
case '4XL':
|
|
15109
|
-
return '#e7c9b2';
|
|
15110
|
-
default:
|
|
15111
|
-
return '';
|
|
15112
|
-
}
|
|
15113
|
-
};
|
|
15114
|
-
|
|
15115
|
-
var SizeChartTableV3 = function (_a) {
|
|
15116
|
-
var _b, _c;
|
|
15117
|
-
var headers = _a.headers, tableContent = _a.data, newSizeTableCss = _a.newSizeTableCss;
|
|
15118
|
-
var containerRef = React$2.useRef(null);
|
|
15119
|
-
var isMobile = useWindowDimensions().isMobile;
|
|
15120
|
-
var _d = React$2.useState(false), isAtScrollEnd = _d[0], setIsAtScrollEnd = _d[1];
|
|
15121
|
-
var _e = (_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 = _e[0], yLabel = _e[1];
|
|
15122
|
-
var isMultilabel = xLabel && yLabel;
|
|
15123
|
-
var trimmedXLabel = trimLabel(xLabel);
|
|
15124
|
-
var trimmedYLabel = trimLabel(yLabel);
|
|
15125
|
-
React$2.useEffect(function () {
|
|
15126
|
-
var _a;
|
|
15127
|
-
var handleScroll = function () {
|
|
15128
|
-
var _a = containerRef.current, scrollLeft = _a.scrollLeft, scrollWidth = _a.scrollWidth, clientWidth = _a.clientWidth;
|
|
15129
|
-
var maxScroll = scrollWidth - clientWidth;
|
|
15130
|
-
var isAtEnd = scrollLeft >= maxScroll * 0.92;
|
|
15131
|
-
setIsAtScrollEnd(function (prevState) {
|
|
15132
|
-
if (isAtEnd !== prevState) {
|
|
15133
|
-
return isAtEnd;
|
|
15134
|
-
}
|
|
15135
|
-
return prevState;
|
|
15136
|
-
});
|
|
15137
|
-
};
|
|
15138
|
-
(_a = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener('scroll', handleScroll);
|
|
15139
|
-
return function () { var _a; return (_a = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('scroll', handleScroll); };
|
|
15140
|
-
}, []);
|
|
15141
|
-
// Generate unique ids for each cell
|
|
15142
|
-
var tableContentWithIds = tableContent === null || tableContent === void 0 ? void 0 : tableContent.map(function (row, rowIndex) {
|
|
15143
|
-
return row === null || row === void 0 ? void 0 : row.map(function (cell, cellIndex) { return ({
|
|
15144
|
-
id: "".concat(rowIndex, "-").concat(cellIndex),
|
|
15145
|
-
value: cell,
|
|
15146
|
-
}); });
|
|
15147
|
-
});
|
|
15148
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Parent, __assign$1({ ref: containerRef }, { children: jsxRuntime.jsx(Container$x, { children: jsxRuntime.jsxs(Column$2, { children: [isMultilabel && (jsxRuntime.jsxs(Header$1, { children: [jsxRuntime.jsx("div", { children: trimmedYLabel }, void 0), jsxRuntime.jsx(Icon.Arrows.ChevronRightVariant, {}, void 0)] }, void 0)), jsxRuntime.jsxs(TableElement$3, __assign$1({ isSticky: !!newSizeTableCss }, { children: [jsxRuntime.jsx(TableHeader, __assign$1({ isColored: newSizeTableCss }, { children: jsxRuntime.jsx(TableRow$3, { children: headers === null || headers === void 0 ? void 0 : headers.map(function (header, index) { return (jsxRuntime.jsx(TableHead$3, __assign$1({ isSticky: !!newSizeTableCss && index === 0 }, { children: index === 0 && isMultilabel ? (jsxRuntime.jsxs("div", __assign$1({ style: { display: 'flex', alignItems: 'center', gap: '15px' } }, { children: [jsxRuntime.jsx("div", { children: trimmedXLabel }, void 0), jsxRuntime.jsx(Icon.Arrows.ChevronDownVariant, {}, void 0)] }), void 0)) : (header) }), header)); }) }, void 0) }), void 0), newSizeTableCss ? (jsxRuntime.jsx("tbody", { children: tableContentWithIds === null || tableContentWithIds === void 0 ? void 0 : tableContentWithIds.map(function (row, parentIndex) { return (jsxRuntime.jsx("tr", { children: row === null || row === void 0 ? void 0 : row.map(function (cell, index) { return (jsxRuntime.jsx(TableCell$3, __assign$1({ isSticky: index === 0, isLast: index === 0 && parentIndex === tableContent.length - 1, style: {
|
|
15149
|
-
backgroundColor: getCellColor$2(index, cell.value, true),
|
|
15150
|
-
} }, { children: cell.value }), cell.id)); }) }, row[0].id)); }) }, void 0)) : (jsxRuntime.jsx("tbody", { children: tableContentWithIds === null || tableContentWithIds === void 0 ? void 0 : tableContentWithIds.map(function (row, parentIndex) { return (jsxRuntime.jsx(TableRow$3, __assign$1({ className: getIsOdd$2(parentIndex) ? 'background' : '' }, { children: row === null || row === void 0 ? void 0 : row.map(function (cell) { return (jsxRuntime.jsx(TableCell$3, __assign$1({ isSticky: false }, { children: cell.value }), cell.id)); }) }), row[0].id)); }) }, void 0))] }), void 0)] }, void 0) }, void 0) }), void 0), newSizeTableCss && isMobile && jsxRuntime.jsx(ArrowTip, { isRight: !isAtScrollEnd }, void 0)] }, void 0));
|
|
15151
|
-
};
|
|
15152
|
-
var ArrowTip = function (_a) {
|
|
15153
|
-
var _b = _a.isRight, isRight = _b === void 0 ? true : _b;
|
|
15154
|
-
return (jsxRuntime.jsx(Arrow, __assign$1({ style: {
|
|
15155
|
-
left: isRight ? '85%' : '12%',
|
|
15156
|
-
} }, { children: isRight ? (jsxRuntime.jsx(Icon.Arrows.ChevronRightVariant, { fill: "white" }, void 0)) : (jsxRuntime.jsx(Icon.Arrows.ChevronLeftVariant, { fill: "white" }, void 0)) }), void 0));
|
|
15157
|
-
};
|
|
15158
|
-
var trimLabel = function (label) { var _a, _b; return (_b = (_a = label === null || label === void 0 ? void 0 : label.trim()) === null || _a === void 0 ? void 0 : _a.split(' ')) === null || _b === void 0 ? void 0 : _b[0]; };
|
|
15159
|
-
|
|
15160
|
-
var htmlReactParser = {exports: {}};
|
|
15161
|
-
|
|
15162
|
-
var lib$2 = {};
|
|
14979
|
+
var lib$2 = {};
|
|
15163
14980
|
|
|
15164
14981
|
var possibleStandardNamesOptimized$1 = {};
|
|
15165
14982
|
|
|
@@ -18936,6 +18753,265 @@ HTMLReactParser$1.htmlToDOM;
|
|
|
18936
18753
|
HTMLReactParser$1.attributesToProps;
|
|
18937
18754
|
HTMLReactParser$1.Element;
|
|
18938
18755
|
|
|
18756
|
+
var Bar$1 = newStyled.div(templateObject_1$M || (templateObject_1$M = __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) {
|
|
18757
|
+
var height = _a.height;
|
|
18758
|
+
return height || '0.5rem';
|
|
18759
|
+
}, function (_a) {
|
|
18760
|
+
var backgroundColor = _a.backgroundColor;
|
|
18761
|
+
return backgroundColor;
|
|
18762
|
+
}, function (_a) {
|
|
18763
|
+
var percent = _a.percent;
|
|
18764
|
+
return (percent ? getBarWithBasedOnPercent$1(percent) : '50%');
|
|
18765
|
+
}, function (_a) {
|
|
18766
|
+
var borderRadius = _a.borderRadius;
|
|
18767
|
+
return borderRadius || '0.25rem';
|
|
18768
|
+
}, function (_a) {
|
|
18769
|
+
var percent = _a.percent;
|
|
18770
|
+
return (percent ? '0' : '-50%');
|
|
18771
|
+
}, function (_a) {
|
|
18772
|
+
var percent = _a.percent;
|
|
18773
|
+
return (percent ? 'none' : 'loading 1s ease-in 0.5s infinite');
|
|
18774
|
+
});
|
|
18775
|
+
var Background$1 = newStyled.div(function (_a) {
|
|
18776
|
+
var backgroundColor = _a.backgroundColor, height = _a.height, borderRadius = _a.borderRadius;
|
|
18777
|
+
return ({
|
|
18778
|
+
height: height || '0.5rem',
|
|
18779
|
+
width: '100%',
|
|
18780
|
+
backgroundColor: backgroundColor,
|
|
18781
|
+
borderRadius: borderRadius || '0.25rem',
|
|
18782
|
+
});
|
|
18783
|
+
});
|
|
18784
|
+
var BarContainer = newStyled.div({
|
|
18785
|
+
display: 'grid',
|
|
18786
|
+
gridTemplateColumns: '1fr 10fr 1fr',
|
|
18787
|
+
justifyContent: 'center',
|
|
18788
|
+
alignItems: 'center',
|
|
18789
|
+
width: '416px',
|
|
18790
|
+
gap: '8px',
|
|
18791
|
+
maxWidth: '100%',
|
|
18792
|
+
padding: '0 16px',
|
|
18793
|
+
position: 'relative',
|
|
18794
|
+
});
|
|
18795
|
+
var Container$z = newStyled.div(function (_a) {
|
|
18796
|
+
var backgroundColor = _a.backgroundColor;
|
|
18797
|
+
return ({
|
|
18798
|
+
width: '475px',
|
|
18799
|
+
maxWidth: '100%',
|
|
18800
|
+
display: 'flex',
|
|
18801
|
+
gap: '13px',
|
|
18802
|
+
padding: '16px 0',
|
|
18803
|
+
flexDirection: 'column',
|
|
18804
|
+
alignItems: 'center',
|
|
18805
|
+
background: backgroundColor,
|
|
18806
|
+
});
|
|
18807
|
+
});
|
|
18808
|
+
var MessageContainer = newStyled.div(templateObject_2$C || (templateObject_2$C = __makeTemplateObject(["\n padding: 0 1rem;\n text-align: center;\n"], ["\n padding: 0 1rem;\n text-align: center;\n"])));
|
|
18809
|
+
var getBarWithBasedOnPercent$1 = function (percent) {
|
|
18810
|
+
return percent <= 100 && percent >= 0 ? "".concat(percent, "%") : '0%';
|
|
18811
|
+
};
|
|
18812
|
+
var Value = newStyled.div(function (_a) {
|
|
18813
|
+
var isBold = _a.isBold;
|
|
18814
|
+
return ({
|
|
18815
|
+
fontWeight: isBold ? 600 : 400,
|
|
18816
|
+
});
|
|
18817
|
+
});
|
|
18818
|
+
var _calculatePercentage = function (currentAmount, endingValue) {
|
|
18819
|
+
var percentage = currentAmount / endingValue;
|
|
18820
|
+
return percentage > 1 ? 100 : percentage * 100;
|
|
18821
|
+
};
|
|
18822
|
+
var MotivatorProgressBar = function (_a) {
|
|
18823
|
+
var _b = _a.fillColor, fillColor = _b === void 0 ? '#F7A08B' : _b, _c = _a.backgroundColor, backgroundColor = _c === void 0 ? '#F7F7F7' : _c, _d = _a.unfilledColor, unfilledColor = _d === void 0 ? '#EEBFBD' : _d, _e = _a.currencyCode, currencyCode = _e === void 0 ? '$' : _e, _f = _a.endingValue, endingValue = _f === void 0 ? 70 : _f, _g = _a.currentAmount, currentAmount = _g === void 0 ? 0 : _g, rewardUnlockedMessage = _a.rewardUnlockedMessage, _h = _a.isClubBarMotivatorTest, isClubBarMotivatorTest = _h === void 0 ? false : _h, remainingAmountMessage = _a.remainingAmountMessage;
|
|
18824
|
+
var theme = useTheme();
|
|
18825
|
+
var isRewardUnlocked = currentAmount >= endingValue;
|
|
18826
|
+
var progress = _calculatePercentage(currentAmount, endingValue);
|
|
18827
|
+
var getRemainingAmountMessage = function () {
|
|
18828
|
+
var remainingAmount = Math.round((endingValue - currentAmount) * 100) / 100;
|
|
18829
|
+
if (isClubBarMotivatorTest) {
|
|
18830
|
+
return (jsxRuntime.jsxs(MessageContainer, { children: ["Spend ", currencyCode, remainingAmount, " more to unlock ", jsxRuntime.jsx("strong", { children: "Free Priority Shipping" }, void 0), " with Club!"] }, void 0));
|
|
18831
|
+
}
|
|
18832
|
+
var message = remainingAmountMessage !== null && remainingAmountMessage !== void 0 ? remainingAmountMessage : "Spend currencyCoderemainingAmount more to get <strong>Free Shipping</strong>";
|
|
18833
|
+
message = message.replace('currencyCode', currencyCode);
|
|
18834
|
+
message = message.replace('remainingAmount', remainingAmount.toString());
|
|
18835
|
+
return (jsxRuntime.jsx(MessageContainer, { children: HTMLReactParser$1(message) }, void 0));
|
|
18836
|
+
};
|
|
18837
|
+
return (jsxRuntime.jsxs(Container$z, __assign$1({ backgroundColor: backgroundColor }, { children: [jsxRuntime.jsxs(BarContainer, __assign$1({ "data-testid": "MPBContainer" }, { children: [jsxRuntime.jsxs(Value, { children: [currencyCode, currentAmount] }, void 0), jsxRuntime.jsx(Background$1, __assign$1({ backgroundColor: unfilledColor || theme.colors.shades['100'].color, "data-testid": "MPBBackground" }, { children: jsxRuntime.jsx(Bar$1, { "data-testid": "MPBBar", backgroundColor: fillColor, percent: progress }, void 0) }), void 0), jsxRuntime.jsxs(Value, __assign$1({ isBold: true }, { children: [currencyCode, endingValue] }), void 0)] }), void 0), isRewardUnlocked ? (jsxRuntime.jsx(MessageContainer, { dangerouslySetInnerHTML: { __html: rewardUnlockedMessage } }, void 0)) : (getRemainingAmountMessage())] }), void 0));
|
|
18838
|
+
};
|
|
18839
|
+
var templateObject_1$M, templateObject_2$C;
|
|
18840
|
+
|
|
18841
|
+
var Container$y = newStyled.div(templateObject_1$L || (templateObject_1$L = __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) {
|
|
18842
|
+
var theme = _a.theme;
|
|
18843
|
+
return theme.component.orderBar.backgroundColor;
|
|
18844
|
+
});
|
|
18845
|
+
var H1 = newStyled.h1(templateObject_2$B || (templateObject_2$B = __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; });
|
|
18846
|
+
var OrderBar = function (_a) {
|
|
18847
|
+
var message = _a.message, color = _a.color;
|
|
18848
|
+
var theme = useTheme();
|
|
18849
|
+
return (jsxRuntime.jsxs(Container$y, __assign$1({ color: color }, { children: [jsxRuntime.jsx(Icon.Actions.Check, { width: 1.25, height: 0.875, fill: "#2F806A" }, void 0), jsxRuntime.jsx(H1, __assign$1({ color: theme.component.orderBar.fontColor }, { children: message }), void 0)] }), void 0));
|
|
18850
|
+
};
|
|
18851
|
+
var templateObject_1$L, templateObject_2$B;
|
|
18852
|
+
|
|
18853
|
+
var StyledButton$1 = newStyled(Ye.Button)(function (props) { return ({
|
|
18854
|
+
background: props.bgColor,
|
|
18855
|
+
height: '100%',
|
|
18856
|
+
width: '100%',
|
|
18857
|
+
maxHeight: '48px',
|
|
18858
|
+
border: 'none',
|
|
18859
|
+
display: 'flex',
|
|
18860
|
+
cursor: props.disabled ? 'not-allowed' : 'pointer',
|
|
18861
|
+
justifyContent: 'space-between',
|
|
18862
|
+
alignItems: 'center',
|
|
18863
|
+
padding: '10px 24px',
|
|
18864
|
+
}); });
|
|
18865
|
+
var StyledPanel = newStyled(Ye.Panel)({
|
|
18866
|
+
width: '100%',
|
|
18867
|
+
background: 'transparent',
|
|
18868
|
+
border: 'none',
|
|
18869
|
+
display: 'flex',
|
|
18870
|
+
flexDirection: 'column',
|
|
18871
|
+
alignItems: 'center',
|
|
18872
|
+
justifyContent: 'center',
|
|
18873
|
+
gap: '10px',
|
|
18874
|
+
});
|
|
18875
|
+
var StyledContent = newStyled.div(templateObject_1$K || (templateObject_1$K = __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) {
|
|
18876
|
+
var bgColor = _a.bgColor;
|
|
18877
|
+
return bgColor !== null && bgColor !== void 0 ? bgColor : '';
|
|
18878
|
+
}, function (_a) {
|
|
18879
|
+
var _b = _a.width, width = _b === void 0 ? '100%' : _b;
|
|
18880
|
+
return width;
|
|
18881
|
+
});
|
|
18882
|
+
var StyledController = newStyled.div(templateObject_2$A || (templateObject_2$A = __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"])));
|
|
18883
|
+
var templateObject_1$K, templateObject_2$A;
|
|
18884
|
+
|
|
18885
|
+
var StyledDisclosure = newStyled(Ye)(function (_a) {
|
|
18886
|
+
var background = _a.background, width = _a.width;
|
|
18887
|
+
return ({
|
|
18888
|
+
display: 'flex',
|
|
18889
|
+
flexDirection: 'column',
|
|
18890
|
+
justifyContent: 'center',
|
|
18891
|
+
gap: '10px',
|
|
18892
|
+
background: background !== null && background !== void 0 ? background : '',
|
|
18893
|
+
width: width !== null && width !== void 0 ? width : 'auto',
|
|
18894
|
+
borderRadius: '8px',
|
|
18895
|
+
border: '0.063rem solid',
|
|
18896
|
+
borderColor: '#e5e5e5',
|
|
18897
|
+
padding: 'unset',
|
|
18898
|
+
overflow: 'hidden',
|
|
18899
|
+
});
|
|
18900
|
+
});
|
|
18901
|
+
var ControlIconComponent = React$2.memo(function (_a) {
|
|
18902
|
+
var open = _a.open, openIcon = _a.openIcon, closeIcon = _a.closeIcon, fillControlsCollor = _a.fillControlsCollor;
|
|
18903
|
+
var Icon = open ? closeIcon : openIcon;
|
|
18904
|
+
return jsxRuntime.jsx(Icon, { title: open ? 'Close' : 'Open', fill: fillControlsCollor }, void 0);
|
|
18905
|
+
});
|
|
18906
|
+
ControlIconComponent.displayName = 'ControlIconComponent';
|
|
18907
|
+
var HeaderContentComponent = React$2.memo(function (_a) {
|
|
18908
|
+
var open = _a.open, header = _a.header, headerOnOpen = _a.headerOnOpen;
|
|
18909
|
+
return jsxRuntime.jsx(jsxRuntime.Fragment, { children: open && headerOnOpen ? headerOnOpen : header }, void 0);
|
|
18910
|
+
});
|
|
18911
|
+
HeaderContentComponent.displayName = 'HeaderContentComponent';
|
|
18912
|
+
var AccordionContent = function (_a) {
|
|
18913
|
+
var open = _a.open, disabled = _a.disabled, bgColor = _a.bgColor, fillControlsCollor = _a.fillControlsCollor, header = _a.header, headerOnOpen = _a.headerOnOpen, children = _a.children, openIcon = _a.openIcon, closeIcon = _a.closeIcon, contentWidth = _a.contentWidth;
|
|
18914
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(StyledButton$1, __assign$1({ "data-testid": "styled-button", disabled: disabled, bgColor: bgColor }, { children: [jsxRuntime.jsx(HeaderContentComponent, { open: open, header: header, headerOnOpen: headerOnOpen }, void 0), jsxRuntime.jsxs(StyledController, { children: [jsxRuntime.jsx(Text$7, __assign$1({ variant: "body", weight: "demi", size: "small", color: fillControlsCollor }, { children: "View Offers" }), void 0), jsxRuntime.jsx("span", __assign$1({ style: { marginTop: '3px' } }, { children: jsxRuntime.jsx(ControlIconComponent, { open: open, openIcon: openIcon, closeIcon: closeIcon, fillControlsCollor: fillControlsCollor }, void 0) }), void 0)] }, void 0)] }), void 0), open && (jsxRuntime.jsx(StyledContent, __assign$1({ width: contentWidth, bgColor: bgColor, onClick: function (e) { return e.stopPropagation(); } }, { children: jsxRuntime.jsx(StyledPanel, { children: children }, void 0) }), void 0))] }, void 0));
|
|
18915
|
+
};
|
|
18916
|
+
var BasicAccordion = function (_a) {
|
|
18917
|
+
var children = _a.children, header = _a.header, bgColor = _a.bgColor, headerOnOpen = _a.headerOnOpen, _b = _a.defaultOpen, defaultOpen = _b === void 0 ? false : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, openIcon = _a.openIcon, closeIcon = _a.closeIcon, onClick = _a.onClick, _d = _a.width, width = _d === void 0 ? '100%' : _d, fillControlsCollor = _a.fillControlsCollor;
|
|
18918
|
+
return (jsxRuntime.jsx(StyledDisclosure, __assign$1({ "data-testid": "accordion-container", as: "div", background: bgColor, defaultOpen: defaultOpen, disabled: disabled, onClick: onClick, width: width }, { children: function (_a) {
|
|
18919
|
+
var open = _a.open;
|
|
18920
|
+
return (jsxRuntime.jsx(AccordionContent, __assign$1({ open: open, disabled: disabled, bgColor: bgColor, fillControlsCollor: fillControlsCollor, header: header, headerOnOpen: headerOnOpen, openIcon: openIcon, closeIcon: closeIcon }, { children: children }), void 0));
|
|
18921
|
+
} }), void 0));
|
|
18922
|
+
};
|
|
18923
|
+
|
|
18924
|
+
var TableElement$3 = newStyled.table(templateObject_1$J || (templateObject_1$J = __makeTemplateObject(["\n box-sizing: border-box;\n border-radius: ", ";\n border-bottom-left-radius: ", ";\n border-bottom-right-radius: ", ";\n border: 0.063rem solid var(--colors-shades-100-color);\n border-spacing: 0;\n font-size: 0.875rem;\n line-height: 3.125rem;\n width: 100%;\n color: var(--colors-shades-700-color);\n"], ["\n box-sizing: border-box;\n border-radius: ", ";\n border-bottom-left-radius: ", ";\n border-bottom-right-radius: ", ";\n border: 0.063rem solid var(--colors-shades-100-color);\n border-spacing: 0;\n font-size: 0.875rem;\n line-height: 3.125rem;\n width: 100%;\n color: var(--colors-shades-700-color);\n"])), function (props) { return (props.isSticky ? '0' : '0.5rem'); }, function (props) { return (props.isSticky ? '0.5rem' : '0'); }, function (props) { return (props.isSticky ? '0.5rem' : '0'); });
|
|
18925
|
+
var TableCell$3 = newStyled.td(templateObject_2$z || (templateObject_2$z = __makeTemplateObject(["\n border-bottom: 0.063rem solid var(--colors-shades-100-color);\n border-right: 0.063rem solid var(--colors-shades-100-color);\n line-height: normal;\n padding: 1rem 0;\n text-align: center;\n position: ", ";\n left: 0;\n z-index: ", ";\n border-bottom-left-radius: ", ";\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n font-weight: 600;\n text-align: center;\n }\n"], ["\n border-bottom: 0.063rem solid var(--colors-shades-100-color);\n border-right: 0.063rem solid var(--colors-shades-100-color);\n line-height: normal;\n padding: 1rem 0;\n text-align: center;\n position: ", ";\n left: 0;\n z-index: ", ";\n border-bottom-left-radius: ", ";\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n font-weight: 600;\n text-align: center;\n }\n"])), function (props) { return (props.isSticky ? 'sticky' : 'unset'); }, function (props) { return (props.isSticky ? 1 : 0); }, function (props) { return (props.isLast ? '0.5rem' : '0'); });
|
|
18926
|
+
var TableHead$3 = newStyled.th(templateObject_3$w || (templateObject_3$w = __makeTemplateObject(["\n border-bottom: 0.063rem solid var(--colors-shades-100-color);\n border-right: 0.063rem solid var(--colors-shades-100-color);\n font-weight: 600;\n line-height: normal;\n padding: 1rem;\n text-align: start;\n position: ", ";\n left: 0;\n z-index: ", ";\n background-color: ", ";\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n text-align: center;\n }\n"], ["\n border-bottom: 0.063rem solid var(--colors-shades-100-color);\n border-right: 0.063rem solid var(--colors-shades-100-color);\n font-weight: 600;\n line-height: normal;\n padding: 1rem;\n text-align: start;\n position: ", ";\n left: 0;\n z-index: ", ";\n background-color: ", ";\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n text-align: center;\n }\n"])), function (props) { return (props.isSticky ? 'sticky' : 'unset'); }, function (props) { return (props.isSticky ? 1 : 0); }, function (props) { return (props.isSticky ? '#fff6ef' : 'unset'); });
|
|
18927
|
+
var Label$3 = newStyled('div')(templateObject_4$q || (templateObject_4$q = __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"])));
|
|
18928
|
+
newStyled(Label$3)(templateObject_5$j || (templateObject_5$j = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
18929
|
+
newStyled(Label$3)(templateObject_6$h || (templateObject_6$h = __makeTemplateObject(["\n width: 20px;\n transform: rotate(270deg);\n"], ["\n width: 20px;\n transform: rotate(270deg);\n"])));
|
|
18930
|
+
var Container$x = newStyled('div')(templateObject_7$f || (templateObject_7$f = __makeTemplateObject(["\n gap: 5px;\n display: flex;\n width: fit-content;\n align-items: center;\n"], ["\n gap: 5px;\n display: flex;\n width: fit-content;\n align-items: center;\n"])));
|
|
18931
|
+
newStyled('span')(templateObject_8$b || (templateObject_8$b = __makeTemplateObject(["\n display: flex;\n min-width: 70px;\n justify-content: center;\n"], ["\n display: flex;\n min-width: 70px;\n justify-content: center;\n"])));
|
|
18932
|
+
var Column$2 = newStyled('div')(templateObject_9$7 || (templateObject_9$7 = __makeTemplateObject(["\n display: flex;\n min-width: 675px;\n align-items: flex-start;\n flex-direction: column;\n\n @media (max-width: 768px) {\n min-width: 100%;\n }\n"], ["\n display: flex;\n min-width: 675px;\n align-items: flex-start;\n flex-direction: column;\n\n @media (max-width: 768px) {\n min-width: 100%;\n }\n"])));
|
|
18933
|
+
var TableRow$3 = newStyled.tr(templateObject_10$7 || (templateObject_10$7 = __makeTemplateObject(["\n &:last-child {\n td {\n border-bottom: none;\n }\n }\n\n &.background {\n background-color: var(--colors-shades-10-color);\n }\n"], ["\n &:last-child {\n td {\n border-bottom: none;\n }\n }\n\n &.background {\n background-color: var(--colors-shades-10-color);\n }\n"])));
|
|
18934
|
+
var Header$1 = newStyled('div')(templateObject_11$5 || (templateObject_11$5 = __makeTemplateObject(["\n gap: 15px;\n display: flex;\n left: 0;\n border: 1px solid #e5e5e5;\n width: 100%;\n max-width: 92vw;\n position: sticky;\n padding: 14px 18px;\n border-top-left-radius: 12px;\n border-top-right-radius: 12px;\n border-bottom: none;\n background-color: #fff6ef;\n font-size: 0.875rem;\n font-weight: 600;\n\n @media (min-width: 400px) {\n max-width: 92.5vw;\n }\n"], ["\n gap: 15px;\n display: flex;\n left: 0;\n border: 1px solid #e5e5e5;\n width: 100%;\n max-width: 92vw;\n position: sticky;\n padding: 14px 18px;\n border-top-left-radius: 12px;\n border-top-right-radius: 12px;\n border-bottom: none;\n background-color: #fff6ef;\n font-size: 0.875rem;\n font-weight: 600;\n\n @media (min-width: 400px) {\n max-width: 92.5vw;\n }\n"])));
|
|
18935
|
+
var Parent = newStyled('div')(templateObject_12$2 || (templateObject_12$2 = __makeTemplateObject(["\n max-width: 100vw;\n position: relative;\n\n @media (max-width: 768px) {\n overflow-x: auto;\n &::-webkit-scrollbar {\n display: none;\n }\n\n -ms-overflow-style: none;\n }\n"], ["\n max-width: 100vw;\n position: relative;\n\n @media (max-width: 768px) {\n overflow-x: auto;\n &::-webkit-scrollbar {\n display: none;\n }\n\n -ms-overflow-style: none;\n }\n"])));
|
|
18936
|
+
var Arrow = newStyled('div')(templateObject_13$2 || (templateObject_13$2 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n width: 44px;\n height: 44px;\n z-index: 2;\n border-radius: 50%;\n background-color: #d4605b;\n bottom: 20px;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n width: 44px;\n height: 44px;\n z-index: 2;\n border-radius: 50%;\n background-color: #d4605b;\n bottom: 20px;\n"])));
|
|
18937
|
+
var TableHeader = newStyled('thead')(templateObject_14$2 || (templateObject_14$2 = __makeTemplateObject(["\n background-color: ", ";\n"], ["\n background-color: ", ";\n"])), function (props) {
|
|
18938
|
+
return props.isColored ? 'var(--colors-pallete-primary-80-color)' : 'unset';
|
|
18939
|
+
});
|
|
18940
|
+
var templateObject_1$J, templateObject_2$z, templateObject_3$w, templateObject_4$q, templateObject_5$j, templateObject_6$h, templateObject_7$f, templateObject_8$b, templateObject_9$7, templateObject_10$7, templateObject_11$5, templateObject_12$2, templateObject_13$2, templateObject_14$2;
|
|
18941
|
+
|
|
18942
|
+
var getIsOdd$2 = function (number) { return number % 2 !== 0; };
|
|
18943
|
+
// TODO: Refactor this color logic
|
|
18944
|
+
var getCellColor$2 = function (index, cell, isLight) {
|
|
18945
|
+
if (index == 0) {
|
|
18946
|
+
return isLight ? '#fff6ef' : '#f6f0e7';
|
|
18947
|
+
}
|
|
18948
|
+
switch (cell) {
|
|
18949
|
+
case 'XS':
|
|
18950
|
+
return '#f5bab0';
|
|
18951
|
+
case 'S':
|
|
18952
|
+
return '#f7a08b';
|
|
18953
|
+
case 'M':
|
|
18954
|
+
return '#ffe1b8';
|
|
18955
|
+
case 'L':
|
|
18956
|
+
return '#f5bab0';
|
|
18957
|
+
case 'XL':
|
|
18958
|
+
return '#8bbeea';
|
|
18959
|
+
case '2XL':
|
|
18960
|
+
return '#b1d7c3';
|
|
18961
|
+
case '3XL':
|
|
18962
|
+
return '#e7a4f7';
|
|
18963
|
+
case '4XL':
|
|
18964
|
+
return '#e7c9b2';
|
|
18965
|
+
default:
|
|
18966
|
+
return '';
|
|
18967
|
+
}
|
|
18968
|
+
};
|
|
18969
|
+
|
|
18970
|
+
var SizeChartTableV3 = function (_a) {
|
|
18971
|
+
var _b, _c;
|
|
18972
|
+
var headers = _a.headers, tableContent = _a.data, newSizeTableCss = _a.newSizeTableCss;
|
|
18973
|
+
var containerRef = React$2.useRef(null);
|
|
18974
|
+
var isMobile = useWindowDimensions().isMobile;
|
|
18975
|
+
var _d = React$2.useState(false), isAtScrollEnd = _d[0], setIsAtScrollEnd = _d[1];
|
|
18976
|
+
var _e = (_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 = _e[0], yLabel = _e[1];
|
|
18977
|
+
var isMultilabel = xLabel && yLabel;
|
|
18978
|
+
var trimmedXLabel = trimLabel(xLabel);
|
|
18979
|
+
var trimmedYLabel = trimLabel(yLabel);
|
|
18980
|
+
React$2.useEffect(function () {
|
|
18981
|
+
var _a;
|
|
18982
|
+
var handleScroll = function () {
|
|
18983
|
+
var _a = containerRef.current, scrollLeft = _a.scrollLeft, scrollWidth = _a.scrollWidth, clientWidth = _a.clientWidth;
|
|
18984
|
+
var maxScroll = scrollWidth - clientWidth;
|
|
18985
|
+
var isAtEnd = scrollLeft >= maxScroll * 0.92;
|
|
18986
|
+
setIsAtScrollEnd(function (prevState) {
|
|
18987
|
+
if (isAtEnd !== prevState) {
|
|
18988
|
+
return isAtEnd;
|
|
18989
|
+
}
|
|
18990
|
+
return prevState;
|
|
18991
|
+
});
|
|
18992
|
+
};
|
|
18993
|
+
(_a = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener('scroll', handleScroll);
|
|
18994
|
+
return function () { var _a; return (_a = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('scroll', handleScroll); };
|
|
18995
|
+
}, []);
|
|
18996
|
+
// Generate unique ids for each cell
|
|
18997
|
+
var tableContentWithIds = tableContent === null || tableContent === void 0 ? void 0 : tableContent.map(function (row, rowIndex) {
|
|
18998
|
+
return row === null || row === void 0 ? void 0 : row.map(function (cell, cellIndex) { return ({
|
|
18999
|
+
id: "".concat(rowIndex, "-").concat(cellIndex),
|
|
19000
|
+
value: cell,
|
|
19001
|
+
}); });
|
|
19002
|
+
});
|
|
19003
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Parent, __assign$1({ ref: containerRef }, { children: jsxRuntime.jsx(Container$x, { children: jsxRuntime.jsxs(Column$2, { children: [isMultilabel && (jsxRuntime.jsxs(Header$1, { children: [jsxRuntime.jsx("div", { children: trimmedYLabel }, void 0), jsxRuntime.jsx(Icon.Arrows.ChevronRightVariant, {}, void 0)] }, void 0)), jsxRuntime.jsxs(TableElement$3, __assign$1({ isSticky: !!newSizeTableCss }, { children: [jsxRuntime.jsx(TableHeader, __assign$1({ isColored: newSizeTableCss }, { children: jsxRuntime.jsx(TableRow$3, { children: headers === null || headers === void 0 ? void 0 : headers.map(function (header, index) { return (jsxRuntime.jsx(TableHead$3, __assign$1({ isSticky: !!newSizeTableCss && index === 0 }, { children: index === 0 && isMultilabel ? (jsxRuntime.jsxs("div", __assign$1({ style: { display: 'flex', alignItems: 'center', gap: '15px' } }, { children: [jsxRuntime.jsx("div", { children: trimmedXLabel }, void 0), jsxRuntime.jsx(Icon.Arrows.ChevronDownVariant, {}, void 0)] }), void 0)) : (header) }), header)); }) }, void 0) }), void 0), newSizeTableCss ? (jsxRuntime.jsx("tbody", { children: tableContentWithIds === null || tableContentWithIds === void 0 ? void 0 : tableContentWithIds.map(function (row, parentIndex) { return (jsxRuntime.jsx("tr", { children: row === null || row === void 0 ? void 0 : row.map(function (cell, index) { return (jsxRuntime.jsx(TableCell$3, __assign$1({ isSticky: index === 0, isLast: index === 0 && parentIndex === tableContent.length - 1, style: {
|
|
19004
|
+
backgroundColor: getCellColor$2(index, cell.value, true),
|
|
19005
|
+
} }, { children: cell.value }), cell.id)); }) }, row[0].id)); }) }, void 0)) : (jsxRuntime.jsx("tbody", { children: tableContentWithIds === null || tableContentWithIds === void 0 ? void 0 : tableContentWithIds.map(function (row, parentIndex) { return (jsxRuntime.jsx(TableRow$3, __assign$1({ className: getIsOdd$2(parentIndex) ? 'background' : '' }, { children: row === null || row === void 0 ? void 0 : row.map(function (cell) { return (jsxRuntime.jsx(TableCell$3, __assign$1({ isSticky: false }, { children: cell.value }), cell.id)); }) }), row[0].id)); }) }, void 0))] }), void 0)] }, void 0) }, void 0) }), void 0), newSizeTableCss && isMobile && jsxRuntime.jsx(ArrowTip, { isRight: !isAtScrollEnd }, void 0)] }, void 0));
|
|
19006
|
+
};
|
|
19007
|
+
var ArrowTip = function (_a) {
|
|
19008
|
+
var _b = _a.isRight, isRight = _b === void 0 ? true : _b;
|
|
19009
|
+
return (jsxRuntime.jsx(Arrow, __assign$1({ style: {
|
|
19010
|
+
left: isRight ? '85%' : '12%',
|
|
19011
|
+
} }, { children: isRight ? (jsxRuntime.jsx(Icon.Arrows.ChevronRightVariant, { fill: "white" }, void 0)) : (jsxRuntime.jsx(Icon.Arrows.ChevronLeftVariant, { fill: "white" }, void 0)) }), void 0));
|
|
19012
|
+
};
|
|
19013
|
+
var trimLabel = function (label) { var _a, _b; return (_b = (_a = label === null || label === void 0 ? void 0 : label.trim()) === null || _a === void 0 ? void 0 : _a.split(' ')) === null || _b === void 0 ? void 0 : _b[0]; };
|
|
19014
|
+
|
|
18939
19015
|
var Container$w = newStyled.div(templateObject_1$I || (templateObject_1$I = __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"])));
|
|
18940
19016
|
var Card$1 = newStyled.div(templateObject_2$y || (templateObject_2$y = __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"])));
|
|
18941
19017
|
var Tag$1 = newStyled.div(templateObject_3$v || (templateObject_3$v = __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"])));
|
|
@@ -21190,6 +21266,7 @@ exports.ThemeProvider = ThemeProvider;
|
|
|
21190
21266
|
exports.ThemeVariables = ThemeVariables;
|
|
21191
21267
|
exports.Timer = Timer;
|
|
21192
21268
|
exports.Toast = Toast;
|
|
21269
|
+
exports.ToggleComponent = ToggleComponent;
|
|
21193
21270
|
exports.Tooltip = Tooltip;
|
|
21194
21271
|
exports.Totals = Totals;
|
|
21195
21272
|
exports.TrackingProgress = TrackingProgress;
|