@trafilea/afrodita-components 6.43.2 → 6.43.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 +5 -2
- package/build/index.esm.js +278 -273
- package/build/index.esm.js.map +1 -1
- package/build/index.js +278 -273
- package/build/index.js.map +1 -1
- package/package.json +1 -1
package/build/index.esm.js
CHANGED
|
@@ -3194,7 +3194,7 @@ var getStylesBySize$g = function (size) {
|
|
|
3194
3194
|
};
|
|
3195
3195
|
}
|
|
3196
3196
|
};
|
|
3197
|
-
var Container$1q = newStyled.div(templateObject_1$
|
|
3197
|
+
var Container$1q = newStyled.div(templateObject_1$2n || (templateObject_1$2n = __makeTemplateObject(["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n padding: ", ";\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: ", ";\n text-align: center;\n cursor: default;\n"], ["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n padding: ", ";\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: ", ";\n text-align: center;\n cursor: default;\n"])), function (_a) {
|
|
3198
3198
|
var backgroundColor = _a.backgroundColor;
|
|
3199
3199
|
return backgroundColor;
|
|
3200
3200
|
}, function (_a) {
|
|
@@ -3233,7 +3233,7 @@ var ClubOfferTag = function (_a) {
|
|
|
3233
3233
|
var theme = useTheme();
|
|
3234
3234
|
return (jsx$1(Container$1q, __assign$1({ backgroundColor: disabled ? theme.colors.shades['50'].color : backgroundColor, borderColor: disabled ? theme.colors.shades['50'].color : borderColor, size: size, "data-testid": "cluboffer-container", style: style, className: className }, { children: jsx$1(H3$2, __assign$1({ textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size, style: { fontSize: '0.875rem', lineHeight: '18px' } }, { children: clubOfferText }), void 0) }), void 0));
|
|
3235
3235
|
};
|
|
3236
|
-
var templateObject_1$
|
|
3236
|
+
var templateObject_1$2n, templateObject_2$1H;
|
|
3237
3237
|
|
|
3238
3238
|
var getStylesBySize$f = function (size, bordersRounded, theme) {
|
|
3239
3239
|
var _a, _b, _c;
|
|
@@ -3264,7 +3264,7 @@ var getStylesBySize$f = function (size, bordersRounded, theme) {
|
|
|
3264
3264
|
};
|
|
3265
3265
|
}
|
|
3266
3266
|
};
|
|
3267
|
-
var Container$1p = newStyled.div(templateObject_1$
|
|
3267
|
+
var Container$1p = newStyled.div(templateObject_1$2m || (templateObject_1$2m = __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) {
|
|
3268
3268
|
var backgroundColor = _a.backgroundColor;
|
|
3269
3269
|
return backgroundColor;
|
|
3270
3270
|
}, function (_a) {
|
|
@@ -3303,7 +3303,7 @@ var DiscountTag$3 = function (_a) {
|
|
|
3303
3303
|
var theme = useTheme();
|
|
3304
3304
|
return (jsx$1(Container$1p, __assign$1({ backgroundColor: disabled ? theme.colors.shades['50'].color : backgroundColor, borderColor: disabled ? theme.colors.shades['50'].color : borderColor, size: size, "data-testid": "discount-container", style: style, bordersRounded: bordersRounded }, { children: jsxs$1(H3$1, __assign$1({ textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size, style: style, theme: theme }, { children: [discount, "% ", offText, " ", showSavings && savings && "- ".concat(savings)] }), void 0) }), void 0));
|
|
3305
3305
|
};
|
|
3306
|
-
var templateObject_1$
|
|
3306
|
+
var templateObject_1$2m, templateObject_2$1G;
|
|
3307
3307
|
|
|
3308
3308
|
var Viewports = {
|
|
3309
3309
|
mobile: 'mobile',
|
|
@@ -3412,7 +3412,7 @@ var getFontSize = function (size, theme, finalPriceStyled, finalPriceStyledSmall
|
|
|
3412
3412
|
return (_c = getStylesBySize$e(size, theme)) === null || _c === void 0 ? void 0 : _c.fontSize;
|
|
3413
3413
|
}
|
|
3414
3414
|
};
|
|
3415
|
-
var Container$1o = newStyled.div(templateObject_1$
|
|
3415
|
+
var Container$1o = newStyled.div(templateObject_1$2l || (templateObject_1$2l = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
3416
3416
|
var Price = newStyled.p(templateObject_2$1F || (templateObject_2$1F = __makeTemplateObject(["\n font-weight: ", ";\n font-size: ", ";\n line-height: ", ";\n color: ", ";\n text-decoration: ", ";\n margin: ", ";\n position: relative;\n margin-top: ", ";\n"], ["\n font-weight: ", ";\n font-size: ", ";\n line-height: ", ";\n color: ", ";\n text-decoration: ", ";\n margin: ", ";\n position: relative;\n margin-top: ", ";\n"])), function (_a) {
|
|
3417
3417
|
var weight = _a.weight;
|
|
3418
3418
|
return (weight ? weight : '400');
|
|
@@ -3470,9 +3470,9 @@ var PriceLabel$1 = function (_a) {
|
|
|
3470
3470
|
};
|
|
3471
3471
|
return (jsxs$1(Container$1o, __assign$1({}, rest, { id: "priceLabel" }, { children: [clubStyle ? (jsxs$1(Fragment$2, { children: [!!originalPrice && jsx$1(OriginalPrice, {}, void 0), jsx$1(Price, __assign$1({ margin: true, "data-testid": getTestId$1(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: finalPrice }), void 0)] }, void 0)) : (jsxs$1(Fragment$2, { children: [jsx$1(Price, __assign$1({ margin: true, "data-testid": getTestId$1(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: finalPrice }), void 0), !!originalPrice && jsx$1(OriginalPrice, {}, void 0)] }, void 0)), discount && (jsx$1(TagContainer, __assign$1({ size: size }, { children: jsx$1(DiscountTag$3, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
|
|
3472
3472
|
};
|
|
3473
|
-
var templateObject_1$
|
|
3473
|
+
var templateObject_1$2l, templateObject_2$1F, templateObject_3$1h;
|
|
3474
3474
|
|
|
3475
|
-
var FinalPriceStyledContainer$3 = newStyled.div(templateObject_1$
|
|
3475
|
+
var FinalPriceStyledContainer$3 = newStyled.div(templateObject_1$2k || (templateObject_1$2k = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
3476
3476
|
var PriceLabelV2$1 = function (_a) {
|
|
3477
3477
|
var _b;
|
|
3478
3478
|
var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, discount = _a.discount, clubOffer = _a.clubOffer, color = _a.color, testId = _a.testId, _c = _a.originalPriceStyled, originalPriceStyled = _c === void 0 ? false : _c, _d = _a.originalPriceUnderlined, originalPriceUnderlined = _d === void 0 ? true : _d, _e = _a.size, size = _e === void 0 ? ComponentSize.Small : _e, _f = _a.bordersRounded, bordersRounded = _f === void 0 ? false : _f, _g = _a.savingsDisplay, savingsDisplay = _g === void 0 ? true : _g, pricePerItem = _a.pricePerItem, _h = _a.hasRoundedSavings, hasRoundedSavings = _h === void 0 ? true : _h, rest = __rest(_a, ["finalPrice", "originalPrice", "discount", "clubOffer", "color", "testId", "originalPriceStyled", "originalPriceUnderlined", "size", "bordersRounded", "savingsDisplay", "pricePerItem", "hasRoundedSavings"]);
|
|
@@ -3541,9 +3541,9 @@ var PriceLabelV2$1 = function (_a) {
|
|
|
3541
3541
|
lineHeight: '22px',
|
|
3542
3542
|
} }), void 0)) }), void 0))] }), void 0));
|
|
3543
3543
|
};
|
|
3544
|
-
var templateObject_1$
|
|
3544
|
+
var templateObject_1$2k;
|
|
3545
3545
|
|
|
3546
|
-
var FinalPriceStyledContainer$2 = newStyled.div(templateObject_1$
|
|
3546
|
+
var FinalPriceStyledContainer$2 = newStyled.div(templateObject_1$2j || (templateObject_1$2j = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
3547
3547
|
var ContainerDirectionColumn = newStyled.div(templateObject_2$1E || (templateObject_2$1E = __makeTemplateObject(["\n display: column;\n align-items: center;\n"], ["\n display: column;\n align-items: center;\n"])));
|
|
3548
3548
|
var DiscountEachOneContainer = newStyled.div(templateObject_3$1g || (templateObject_3$1g = __makeTemplateObject(["\n display: flex;\n padding-left: 0.5rem;\n"], ["\n display: flex;\n padding-left: 0.5rem;\n"])));
|
|
3549
3549
|
var PriceLabelV3 = function (_a) {
|
|
@@ -3616,9 +3616,9 @@ var PriceLabelV3 = function (_a) {
|
|
|
3616
3616
|
lineHeight: '22px',
|
|
3617
3617
|
} }), void 0)) }), void 0))] }, void 0)] }), void 0));
|
|
3618
3618
|
};
|
|
3619
|
-
var templateObject_1$
|
|
3619
|
+
var templateObject_1$2j, templateObject_2$1E, templateObject_3$1g;
|
|
3620
3620
|
|
|
3621
|
-
var FinalPriceStyledContainer$1 = newStyled.div(templateObject_1$
|
|
3621
|
+
var FinalPriceStyledContainer$1 = newStyled.div(templateObject_1$2i || (templateObject_1$2i = __makeTemplateObject(["\n display: flex;\n margin-left: -5px;\n"], ["\n display: flex;\n margin-left: -5px;\n"])));
|
|
3622
3622
|
var PriceLabel = function (_a) {
|
|
3623
3623
|
var _b;
|
|
3624
3624
|
var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, color = _a.color, testId = _a.testId, _c = _a.originalPriceStyled, originalPriceStyled = _c === void 0 ? false : _c, _d = _a.originalPriceUnderlined, originalPriceUnderlined = _d === void 0 ? true : _d, _e = _a.size, size = _e === void 0 ? ComponentSize.Small : _e, _f = _a.isClubOffer, isClubOffer = _f === void 0 ? false : _f, rest = __rest(_a, ["finalPrice", "originalPrice", "color", "testId", "originalPriceStyled", "originalPriceUnderlined", "size", "isClubOffer"]);
|
|
@@ -3652,9 +3652,9 @@ var PriceLabel = function (_a) {
|
|
|
3652
3652
|
marginTop: '-6px',
|
|
3653
3653
|
} }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }), void 0)] }), void 0));
|
|
3654
3654
|
};
|
|
3655
|
-
var templateObject_1$
|
|
3655
|
+
var templateObject_1$2i;
|
|
3656
3656
|
|
|
3657
|
-
var FinalPriceStyledContainer = newStyled.div(templateObject_1$
|
|
3657
|
+
var FinalPriceStyledContainer = newStyled.div(templateObject_1$2h || (templateObject_1$2h = __makeTemplateObject(["\n display: flex;\n margin-left: -5px;\n"], ["\n display: flex;\n margin-left: -5px;\n"])));
|
|
3658
3658
|
var PriceLabelV2 = function (_a) {
|
|
3659
3659
|
var _b;
|
|
3660
3660
|
var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, color = _a.color, testId = _a.testId, _c = _a.originalPriceStyled, originalPriceStyled = _c === void 0 ? false : _c, _d = _a.originalPriceUnderlined, originalPriceUnderlined = _d === void 0 ? true : _d, _e = _a.size, size = _e === void 0 ? ComponentSize.Small : _e, _f = _a.isClubOffer, isClubOffer = _f === void 0 ? false : _f, rest = __rest(_a, ["finalPrice", "originalPrice", "color", "testId", "originalPriceStyled", "originalPriceUnderlined", "size", "isClubOffer"]);
|
|
@@ -3687,11 +3687,11 @@ var PriceLabelV2 = function (_a) {
|
|
|
3687
3687
|
: (_b = "".concat(finalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1];
|
|
3688
3688
|
return (jsxs$1(Container$1o, __assign$1({}, rest, { children: [isOriginalPrice && !isClubOffer && jsx$1(OriginalPrice, {}, void 0), jsxs$1(FinalPriceStyledContainer, __assign$1({ "data-testid": getTestId$1(testId, 'final-product-price'), style: { marginLeft: '-3px' } }, { children: [jsxs$1(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size }, { children: [currencySymbol, finalPriceString] }), void 0), jsx$1(Price, __assign$1({ finalPriceStyledSmall: true }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }), void 0)] }), void 0));
|
|
3689
3689
|
};
|
|
3690
|
-
var templateObject_1$
|
|
3690
|
+
var templateObject_1$2h;
|
|
3691
3691
|
|
|
3692
|
-
var ContainerWrapper$2 = newStyled.div(templateObject_1$
|
|
3692
|
+
var ContainerWrapper$2 = newStyled.div(templateObject_1$2g || (templateObject_1$2g = __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"])));
|
|
3693
3693
|
var ImgWrapper = newStyled.div(templateObject_2$1D || (templateObject_2$1D = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n width: 50px auto;\n height: 20px;\n opacity: 0px;\n position: relative;\n"], ["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n width: 50px auto;\n height: 20px;\n opacity: 0px;\n position: relative;\n"])));
|
|
3694
|
-
var templateObject_1$
|
|
3694
|
+
var templateObject_1$2g, templateObject_2$1D;
|
|
3695
3695
|
|
|
3696
3696
|
var ClubPriceMemberLabel = function (_a) {
|
|
3697
3697
|
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"]);
|
|
@@ -3700,13 +3700,13 @@ var ClubPriceMemberLabel = function (_a) {
|
|
|
3700
3700
|
return (jsx$1("div", { children: isClub ? (jsxs$1(ContainerWrapper$2, __assign$1({ id: "priceMemberLabelWrapper" }, { children: [PriceComponent, jsx$1(ImgWrapper, __assign$1({ id: "priceMemberLabelImgWrapper" }, { children: icon }), void 0)] }), void 0)) : (jsx$1(Fragment$2, { children: PriceComponent }, void 0)) }, void 0));
|
|
3701
3701
|
};
|
|
3702
3702
|
|
|
3703
|
-
var HorizontalDivider = newStyled.div(templateObject_1$
|
|
3703
|
+
var HorizontalDivider = newStyled.div(templateObject_1$2f || (templateObject_1$2f = __makeTemplateObject(["\n border: unset;\n outline: unset;\n background-color: var(--colors-shades-100-color);\n height: 1px;\n width: ", ";\n margin: 4% auto;\n"], ["\n border: unset;\n outline: unset;\n background-color: var(--colors-shades-100-color);\n height: 1px;\n width: ", ";\n margin: 4% auto;\n"])), function (_a) {
|
|
3704
3704
|
var width = _a.width;
|
|
3705
3705
|
return width !== null && width !== void 0 ? width : '100%';
|
|
3706
3706
|
});
|
|
3707
|
-
var templateObject_1$
|
|
3707
|
+
var templateObject_1$2f;
|
|
3708
3708
|
|
|
3709
|
-
var Container$1n = newStyled.div(templateObject_1$
|
|
3709
|
+
var Container$1n = newStyled.div(templateObject_1$2e || (templateObject_1$2e = __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) {
|
|
3710
3710
|
var height = _a.height;
|
|
3711
3711
|
return height !== null && height !== void 0 ? height : '1.5em';
|
|
3712
3712
|
}, function (_a) {
|
|
@@ -3733,9 +3733,9 @@ var SkeletonBox = function (_a) {
|
|
|
3733
3733
|
var theme = useTheme();
|
|
3734
3734
|
return jsx$1(Container$1n, { "data-testid": "skeleton-container", width: width, height: height, theme: theme }, void 0);
|
|
3735
3735
|
};
|
|
3736
|
-
var templateObject_1$
|
|
3736
|
+
var templateObject_1$2e;
|
|
3737
3737
|
|
|
3738
|
-
var StyledSvgWrapper = newStyled.svg(templateObject_1$
|
|
3738
|
+
var StyledSvgWrapper = newStyled.svg(templateObject_1$2d || (templateObject_1$2d = __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) {
|
|
3739
3739
|
var width = _a.width;
|
|
3740
3740
|
return width;
|
|
3741
3741
|
}, function (_a) {
|
|
@@ -3764,7 +3764,7 @@ var StyledImageWrapper = newStyled.img(templateObject_2$1C || (templateObject_2$
|
|
|
3764
3764
|
var opacity = _a.opacity;
|
|
3765
3765
|
return opacity && "opacity: ".concat(opacity, ";");
|
|
3766
3766
|
});
|
|
3767
|
-
var templateObject_1$
|
|
3767
|
+
var templateObject_1$2d, templateObject_2$1C;
|
|
3768
3768
|
|
|
3769
3769
|
/* eslint-disable no-undef */
|
|
3770
3770
|
var cache = new Map();
|
|
@@ -3940,7 +3940,7 @@ var buildImageUrl = function (_a) {
|
|
|
3940
3940
|
}
|
|
3941
3941
|
};
|
|
3942
3942
|
|
|
3943
|
-
var Img$1 = newStyled.img(templateObject_1$
|
|
3943
|
+
var Img$1 = newStyled.img(templateObject_1$2c || (templateObject_1$2c = __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; });
|
|
3944
3944
|
var Image$3 = function (_a) {
|
|
3945
3945
|
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"]);
|
|
3946
3946
|
var config = useTheme().config;
|
|
@@ -3949,15 +3949,15 @@ var Image$3 = function (_a) {
|
|
|
3949
3949
|
: src;
|
|
3950
3950
|
return (jsx$1(Img$1, __assign$1({ src: source, srcSet: srcSet, sizes: sizes, loading: loading, decoding: decoding, alt: alt, height: height, width: width, borderRadius: borderRadius, objectFit: objectFit, objectPosition: objectPosition }, rest), void 0));
|
|
3951
3951
|
};
|
|
3952
|
-
var templateObject_1$
|
|
3952
|
+
var templateObject_1$2c;
|
|
3953
3953
|
|
|
3954
|
-
var LabelWrapper = newStyled.label(templateObject_1$
|
|
3954
|
+
var LabelWrapper = newStyled.label(templateObject_1$2b || (templateObject_1$2b = __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"])));
|
|
3955
3955
|
var SwitchWrapper = newStyled.div(templateObject_2$1B || (templateObject_2$1B = __makeTemplateObject(["\n position: relative;\n width: 36px;\n height: 20px;\n background: #949494;\n border-radius: 60px;\n padding: 4px;\n transition: 300ms all;\n\n &:before {\n transition: 300ms all;\n content: '';\n position: absolute;\n width: 16px;\n height: 16px;\n border-radius: 35px;\n top: 50%;\n left: 2.5px;\n background: white;\n transform: translate(0, -50%);\n }\n"], ["\n position: relative;\n width: 36px;\n height: 20px;\n background: #949494;\n border-radius: 60px;\n padding: 4px;\n transition: 300ms all;\n\n &:before {\n transition: 300ms all;\n content: '';\n position: absolute;\n width: 16px;\n height: 16px;\n border-radius: 35px;\n top: 50%;\n left: 2.5px;\n background: white;\n transform: translate(0, -50%);\n }\n"])));
|
|
3956
3956
|
var InputWrapper$1 = newStyled.input(templateObject_3$1f || (templateObject_3$1f = __makeTemplateObject(["\n opacity: 0;\n position: absolute;\n\n &:checked + div {\n background: ", ";\n\n &:before {\n transform: translate(14.5px, -50%);\n }\n }\n"], ["\n opacity: 0;\n position: absolute;\n\n &:checked + div {\n background: ", ";\n\n &:before {\n transform: translate(14.5px, -50%);\n }\n }\n"])), function (_a) {
|
|
3957
3957
|
var $color = _a.$color;
|
|
3958
3958
|
return $color;
|
|
3959
3959
|
});
|
|
3960
|
-
var templateObject_1$
|
|
3960
|
+
var templateObject_1$2b, templateObject_2$1B, templateObject_3$1f;
|
|
3961
3961
|
|
|
3962
3962
|
var ToggleComponent = function (_a) {
|
|
3963
3963
|
var onToggle = _a.onToggle, _b = _a.isChecked, isChecked = _b === void 0 ? false : _b, _c = _a.color, color = _c === void 0 ? '#882a2b' : _c;
|
|
@@ -4812,7 +4812,7 @@ function jsxs(type, props, key) {
|
|
|
4812
4812
|
// This defines which HTML tag to render for each `variant`, it also defines
|
|
4813
4813
|
// `variants` styles that are consistent through all themes.
|
|
4814
4814
|
var TAGS = {
|
|
4815
|
-
hero1: newStyled.h1(templateObject_1$
|
|
4815
|
+
hero1: newStyled.h1(templateObject_1$2a || (templateObject_1$2a = __makeTemplateObject([""], [""]))),
|
|
4816
4816
|
hero2: newStyled.h2(templateObject_2$1A || (templateObject_2$1A = __makeTemplateObject([""], [""]))),
|
|
4817
4817
|
hero3: newStyled.h3(templateObject_3$1e || (templateObject_3$1e = __makeTemplateObject([""], [""]))),
|
|
4818
4818
|
display1: newStyled.h1(templateObject_4$$ || (templateObject_4$$ = __makeTemplateObject([""], [""]))),
|
|
@@ -4952,9 +4952,9 @@ var DEFAULTS = {
|
|
|
4952
4952
|
size: 'regular',
|
|
4953
4953
|
},
|
|
4954
4954
|
};
|
|
4955
|
-
var templateObject_1$
|
|
4955
|
+
var templateObject_1$2a, templateObject_2$1A, templateObject_3$1e, templateObject_4$$, templateObject_5$M, templateObject_6$G, templateObject_7$x, templateObject_8$q, templateObject_9$e, templateObject_10$c, templateObject_11$8, templateObject_12$5, templateObject_13$5, templateObject_14$3, templateObject_15$2, templateObject_16$2, templateObject_17$2, templateObject_18$2, templateObject_19$2, templateObject_20$1;
|
|
4956
4956
|
|
|
4957
|
-
var Container$1m = newStyled.div(templateObject_1$
|
|
4957
|
+
var Container$1m = newStyled.div(templateObject_1$29 || (templateObject_1$29 = __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"])));
|
|
4958
4958
|
var Card$4 = newStyled.div(templateObject_2$1z || (templateObject_2$1z = __makeTemplateObject(["\n --background: var(--colors-background-color);\n\n flex: 1;\n position: relative;\n overflow: hidden;\n cursor: pointer;\n border: 2px solid var(--component-packSelector-borderColor);\n padding: 16px 7px 7px;\n text-align: center;\n background-color: var(--background);\n border-radius: var(--component-packSelector-borderRadius);\n\n &[aria-checked='true'] {\n --color: var(--component-packSelector-selectedColor);\n\n border-color: var(--color);\n\n & * {\n p {\n color: var(--color);\n }\n }\n }\n"], ["\n --background: var(--colors-background-color);\n\n flex: 1;\n position: relative;\n overflow: hidden;\n cursor: pointer;\n border: 2px solid var(--component-packSelector-borderColor);\n padding: 16px 7px 7px;\n text-align: center;\n background-color: var(--background);\n border-radius: var(--component-packSelector-borderRadius);\n\n &[aria-checked='true'] {\n --color: var(--component-packSelector-selectedColor);\n\n border-color: var(--color);\n\n & * {\n p {\n color: var(--color);\n }\n }\n }\n"])));
|
|
4959
4959
|
var Tag$2 = newStyled.div(templateObject_3$1d || (templateObject_3$1d = __makeTemplateObject(["\n position: absolute;\n width: 100%;\n left: 50%;\n top: 0;\n transform: translateX(-50%);\n background-color: var(--component-packSelector-tagColor);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 1px 0;\n\n [aria-checked='true'] & {\n background-color: var(--component-packSelector-selectedColor);\n\n & * {\n color: var(--component-packSelector-selectedContrast) !important;\n }\n }\n"], ["\n position: absolute;\n width: 100%;\n left: 50%;\n top: 0;\n transform: translateX(-50%);\n background-color: var(--component-packSelector-tagColor);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 1px 0;\n\n [aria-checked='true'] & {\n background-color: var(--component-packSelector-selectedColor);\n\n & * {\n color: var(--component-packSelector-selectedContrast) !important;\n }\n }\n"])));
|
|
4960
4960
|
var Label$7 = newStyled.div(templateObject_4$_ || (templateObject_4$_ = __makeTemplateObject(["\n position: relative;\n width: fit-content;\n margin: 0 auto;\n"], ["\n position: relative;\n width: fit-content;\n margin: 0 auto;\n"])));
|
|
@@ -4984,9 +4984,9 @@ var PackCard$1 = function (_a) {
|
|
|
4984
4984
|
currency: currencyCode || 'USD',
|
|
4985
4985
|
}), ' ', "each", ')'] }), void 0)) : null] }, void 0)] }), void 0));
|
|
4986
4986
|
};
|
|
4987
|
-
var templateObject_1$
|
|
4987
|
+
var templateObject_1$29, templateObject_2$1z, templateObject_3$1d, templateObject_4$_, templateObject_5$L, templateObject_6$F;
|
|
4988
4988
|
|
|
4989
|
-
var Container$1l = newStyled.div(templateObject_1$
|
|
4989
|
+
var Container$1l = newStyled.div(templateObject_1$28 || (templateObject_1$28 = __makeTemplateObject(["\n height: 32px;\n display: flex;\n align-items: center;\n"], ["\n height: 32px;\n display: flex;\n align-items: center;\n"])));
|
|
4990
4990
|
var DropContainer = newStyled.div(templateObject_2$1y || (templateObject_2$1y = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
4991
4991
|
var DropList = function (_a) {
|
|
4992
4992
|
var dropTotal = _a.dropTotal, drops = _a.drops;
|
|
@@ -4994,17 +4994,17 @@ var DropList = function (_a) {
|
|
|
4994
4994
|
return (jsx$1(DropContainer, __assign$1({ "data-testid": "star-container" }, { children: index < Math.floor(drops) ? (jsx$1(Icon.PDP.Drop, { width: 0.875, height: 0.875 }, void 0)) : (jsx$1(Icon.PDP.DropEmpty, { width: 0.875, height: 0.875 }, void 0)) }), index));
|
|
4995
4995
|
}) }, void 0));
|
|
4996
4996
|
};
|
|
4997
|
-
var templateObject_1$
|
|
4997
|
+
var templateObject_1$28, templateObject_2$1y;
|
|
4998
4998
|
|
|
4999
4999
|
var DROPS_TOTAL = 5;
|
|
5000
|
-
var Container$1k = newStyled.div(templateObject_1$
|
|
5000
|
+
var Container$1k = newStyled.div(templateObject_1$27 || (templateObject_1$27 = __makeTemplateObject(["\n height: 32px;\n display: flex;\n"], ["\n height: 32px;\n display: flex;\n"])));
|
|
5001
5001
|
var Title$c = newStyled.p(templateObject_2$1x || (templateObject_2$1x = __makeTemplateObject(["\n height: 32px;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n display: flex;\n align-items: center;\n font-weight: 600;\n margin-right: 7px;\n"], ["\n height: 32px;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n display: flex;\n align-items: center;\n font-weight: 600;\n margin-right: 7px;\n"])));
|
|
5002
5002
|
var Description$3 = newStyled.p(templateObject_3$1c || (templateObject_3$1c = __makeTemplateObject(["\n height: 32px;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n display: flex;\n align-items: center;\n font-weight: 600;\n margin-left: 7px;\n"], ["\n height: 32px;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n display: flex;\n align-items: center;\n font-weight: 600;\n margin-left: 7px;\n"])));
|
|
5003
5003
|
var AbsorbencyLevel = function (_a) {
|
|
5004
5004
|
var dropTotal = _a.dropTotal, drops = _a.drops, absorbencyTitle = _a.absorbencyTitle, absorbencyDescription = _a.absorbencyDescription;
|
|
5005
5005
|
return (jsxs$1(Container$1k, { children: [jsx$1(Title$c, { children: absorbencyTitle }, void 0), jsx$1(DropList, { dropTotal: dropTotal || DROPS_TOTAL, drops: drops }, void 0), jsx$1(Description$3, { children: absorbencyDescription }, void 0)] }, void 0));
|
|
5006
5006
|
};
|
|
5007
|
-
var templateObject_1$
|
|
5007
|
+
var templateObject_1$27, templateObject_2$1x, templateObject_3$1c;
|
|
5008
5008
|
|
|
5009
5009
|
function k$1(){let e=[],t=[],r={enqueue(o){t.push(o);},requestAnimationFrame(...o){let n=requestAnimationFrame(...o);r.add(()=>cancelAnimationFrame(n));},nextFrame(...o){r.requestAnimationFrame(()=>{r.requestAnimationFrame(...o);});},setTimeout(...o){let n=setTimeout(...o);r.add(()=>clearTimeout(n));},add(o){e.push(o);},dispose(){for(let o of e.splice(0))o();},async workQueue(){for(let o of t.splice(0))await o();}};return r}function Q(){let[e]=useState(k$1);return useEffect(()=>()=>e.dispose(),[e]),e}var x$1=typeof window!="undefined"?useLayoutEffect:useEffect;var yt={serverHandoffComplete:!1};function q$1(){let[e,t]=useState(yt.serverHandoffComplete);return useEffect(()=>{e!==!0&&t(!0);},[e]),useEffect(()=>{yt.serverHandoffComplete===!1&&(yt.serverHandoffComplete=!0);},[]),e}var or=0;function to(){return ++or}function A$1(){let e=q$1(),[t,r]=useState(e?to:null);return x$1(()=>{t===null&&r(to());},[t]),t!=null?""+t:void 0}function ke(e){let t=useRef(e);return useEffect(()=>{t.current=e;},[e]),t}function ee(e,t){let[r,o]=useState(e),n=ke(e);return x$1(()=>o(n.current),[n,o,...t]),r}function I(...e){let t=useRef(e);return useEffect(()=>{t.current=e;},[e]),useCallback(r=>{for(let o of t.current)o!=null&&(typeof o=="function"?o(r):o.current=r);},[t])}function S(e,t,...r){if(e in t){let n=t[e];return typeof n=="function"?n(...r):n}let o=new Error(`Tried to handle "${e}" but there is no handler defined. Only defined handlers are: ${Object.keys(t).map(n=>`"${n}"`).join(", ")}.`);throw Error.captureStackTrace&&Error.captureStackTrace(o,S),o}function E({props:e,slot:t,defaultTag:r,features:o,visible:n=!0,name:i}){if(n)return _e(e,t,r,i);let a=o!=null?o:0;if(a&2){let{static:l=!1,...s}=e;if(l)return _e(s,t,r,i)}if(a&1){let{unmount:l=!0,...s}=e;return S(l?0:1,{[0](){return null},[1](){return _e({...s,hidden:!0,style:{display:"none"}},t,r,i)}})}return _e(e,t,r,i)}function _e(e,t={},r,o){let{as:n=r,children:i,refName:a="ref",...l}=gt(e,["unmount","static"]),s=e.ref!==void 0?{[a]:e.ref}:{},u=typeof i=="function"?i(t):i;if(l.className&&typeof l.className=="function"&&(l.className=l.className(t)),n===Fragment$1&&Object.keys(l).length>0){if(!isValidElement(u)||Array.isArray(u)&&u.length>1)throw new Error(['Passing props on "Fragment"!',"",`The current component <${o} /> is rendering a "Fragment".`,"However we need to passthrough the following props:",Object.keys(l).map(c=>` - ${c}`).join(`
|
|
5010
5010
|
`),"","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(`
|
|
@@ -5076,11 +5076,11 @@ var AccordionDetailsStyles = {
|
|
|
5076
5076
|
};
|
|
5077
5077
|
|
|
5078
5078
|
var StyledDisclosure$1 = newStyled(Ye)(AccordionStyles.baseStyles, function (props) { return [AccordionStyles[props.variant](props.theme, props.disabled, props.controlIconPos)]; });
|
|
5079
|
-
var StyledButton$
|
|
5079
|
+
var StyledButton$4 = newStyled(Ye.Button)(AccordionSummaryStyles.baseStyles, function (props) { return [
|
|
5080
5080
|
AccordionSummaryStyles[props.variant](props.theme, props.disabled, props.controlIconPos),
|
|
5081
5081
|
]; }, function (props) { return [AccordionSummaryStyles.title(props.titlecolor)]; });
|
|
5082
5082
|
var StyledPanel$1 = newStyled(Ye.Panel)(AccordionDetailsStyles.baseStyles, function (props) { return [AccordionDetailsStyles[props.variant](props.theme)]; });
|
|
5083
|
-
var StyledContent$1 = newStyled.button(templateObject_1$
|
|
5083
|
+
var StyledContent$1 = newStyled.button(templateObject_1$26 || (templateObject_1$26 = __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"])));
|
|
5084
5084
|
var Accordion$1 = function (_a) {
|
|
5085
5085
|
var header = _a.header, headerOnOpen = _a.headerOnOpen, content = _a.content, defaultOpen = _a.defaultOpen, _b = _a.forceOpenHandler, forceOpenHandler = _b === void 0 ? false : _b, _c = _a.forceOpenValue, forceOpenValue = _c === void 0 ? false : _c, titleColor = _a.titleColor, variant = _a.variant, _d = _a.disabled, disabled = _d === void 0 ? false : _d, _e = _a.innerHTML, innerHTML = _e === void 0 ? false : _e, _f = _a.backgroundCover, backgroundCover = _f === void 0 ? { value: false, iconBgColor: 'inherit' } : _f, _g = _a.controlIconPos, controlIconPos = _g === void 0 ? 'right' : _g, openIcon = _a.openIcon, closeIcon = _a.closeIcon, onClick = _a.onClick, testId = _a.testId;
|
|
5086
5086
|
var theme = useTheme();
|
|
@@ -5089,7 +5089,7 @@ var Accordion$1 = function (_a) {
|
|
|
5089
5089
|
var openWithForce = forceOpenHandler ? forceOpenValue : open;
|
|
5090
5090
|
var ControlIcon = disabled ? openIcon : openWithForce ? closeIcon : openIcon;
|
|
5091
5091
|
var showPanel = openWithForce && !disabled;
|
|
5092
|
-
return (jsxs$1(Fragment$2, { children: [jsxs$1(StyledButton$
|
|
5092
|
+
return (jsxs$1(Fragment$2, { children: [jsxs$1(StyledButton$4, __assign$1({ theme: theme, variant: variant, disabled: disabled, titlecolor: titleColor, controlIconPos: controlIconPos }, { children: [showPanel && headerOnOpen ? headerOnOpen : header, controlIconPos === 'right' && (jsx$1(ControlIcon, { title: openWithForce ? 'close icon' : 'open 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)), controlIconPos === 'bottom' && !(backgroundCover === null || backgroundCover === void 0 ? void 0 : backgroundCover.value) && !showPanel && (jsx$1("div", __assign$1({ className: "openIconBottom", style: {
|
|
5093
5093
|
width: '100%',
|
|
5094
5094
|
display: 'flex',
|
|
5095
5095
|
justifyContent: 'center',
|
|
@@ -5104,9 +5104,9 @@ var Accordion$1 = function (_a) {
|
|
|
5104
5104
|
} }, { children: jsx$1(ControlIcon, { title: "close icon", height: theme.component.accordion.variant[variant].icon.height, width: theme.component.accordion.variant[variant].icon.width, fill: theme.component.accordion.variant[variant].icon.color }, void 0) }), void 0)] }, void 0))] }), void 0), controlIconPos === 'right' && showPanel && (jsx$1(StyledContent$1, __assign$1({ onClick: function (e) { return e.stopPropagation(); } }, { children: !innerHTML ? (jsx$1(StyledPanel$1, __assign$1({ static: true, variant: variant, theme: theme }, { children: content }), void 0)) : (jsx$1("div", { dangerouslySetInnerHTML: { __html: content } }, void 0)) }), void 0))] }, void 0));
|
|
5105
5105
|
} }), void 0));
|
|
5106
5106
|
};
|
|
5107
|
-
var templateObject_1$
|
|
5107
|
+
var templateObject_1$26;
|
|
5108
5108
|
|
|
5109
|
-
var Container$1j = newStyled.div(templateObject_1$
|
|
5109
|
+
var Container$1j = newStyled.div(templateObject_1$25 || (templateObject_1$25 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 16px;\n"], ["\n display: flex;\n flex-direction: column;\n gap: 16px;\n"])));
|
|
5110
5110
|
var AccordionOptions = function (_a) {
|
|
5111
5111
|
var titleColor = _a.titleColor, accordions = _a.accordions;
|
|
5112
5112
|
var _b = useState({
|
|
@@ -5130,7 +5130,7 @@ var AccordionOptions = function (_a) {
|
|
|
5130
5130
|
} }, accordion, { forceOpenHandler: true, forceOpenValue: getForceOpen(index), titleColor: accordionTitleColor }), "accordion-".concat(index)));
|
|
5131
5131
|
}) }, void 0));
|
|
5132
5132
|
};
|
|
5133
|
-
var templateObject_1$
|
|
5133
|
+
var templateObject_1$25;
|
|
5134
5134
|
|
|
5135
5135
|
/**
|
|
5136
5136
|
* @returns number formatted with "," and 2 decimals as string
|
|
@@ -5266,11 +5266,11 @@ var isValidDate = function (value) {
|
|
|
5266
5266
|
return /^\d{4}-\d{2}-\d{2}$/.test(value);
|
|
5267
5267
|
};
|
|
5268
5268
|
|
|
5269
|
-
var Bold = newStyled.span(templateObject_1$
|
|
5269
|
+
var Bold = newStyled.span(templateObject_1$24 || (templateObject_1$24 = __makeTemplateObject(["\n font-weight: bold;\n"], ["\n font-weight: bold;\n"])));
|
|
5270
5270
|
var FlexContainer$4 = newStyled.div(templateObject_2$1w || (templateObject_2$1w = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n padding: 12px;\n background-color: white;\n border-radius: 8px;\n text-align: start;\n margin: 10px;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n padding: 12px;\n background-color: white;\n border-radius: 8px;\n text-align: start;\n margin: 10px;\n"])));
|
|
5271
|
-
var templateObject_1$
|
|
5271
|
+
var templateObject_1$24, templateObject_2$1w;
|
|
5272
5272
|
|
|
5273
|
-
var Container$1i = newStyled.div(templateObject_1$
|
|
5273
|
+
var Container$1i = newStyled.div(templateObject_1$23 || (templateObject_1$23 = __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) {
|
|
5274
5274
|
var _b = _a.width, width = _b === void 0 ? '100%' : _b;
|
|
5275
5275
|
return width;
|
|
5276
5276
|
}, function (_a) {
|
|
@@ -5281,7 +5281,7 @@ var FlexCentered = newStyled.div(templateObject_2$1v || (templateObject_2$1v = _
|
|
|
5281
5281
|
var LeftSide = newStyled.div(templateObject_3$1b || (templateObject_3$1b = __makeTemplateObject(["\n width: 110px;\n height: 100%;\n flex-shrink: 0;\n resize: vertical;\n"], ["\n width: 110px;\n height: 100%;\n flex-shrink: 0;\n resize: vertical;\n"])));
|
|
5282
5282
|
var RightSide = newStyled.div(templateObject_4$Z || (templateObject_4$Z = __makeTemplateObject(["\n display: flex;\n flex-grow: 1;\n flex-direction: column;\n align-items: center;\n height: 100%;\n"], ["\n display: flex;\n flex-grow: 1;\n flex-direction: column;\n align-items: center;\n height: 100%;\n"])));
|
|
5283
5283
|
var FlexStart = newStyled.div(templateObject_5$K || (templateObject_5$K = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: start;\n gap: 5px;\n width: 100%;\n padding: 12px;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: start;\n gap: 5px;\n width: 100%;\n padding: 12px;\n"])));
|
|
5284
|
-
var templateObject_1$
|
|
5284
|
+
var templateObject_1$23, templateObject_2$1v, templateObject_3$1b, templateObject_4$Z, templateObject_5$K;
|
|
5285
5285
|
|
|
5286
5286
|
var CouponCard = function (_a) {
|
|
5287
5287
|
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;
|
|
@@ -5426,14 +5426,14 @@ var sizeOptions = [
|
|
|
5426
5426
|
},
|
|
5427
5427
|
];
|
|
5428
5428
|
|
|
5429
|
-
var ErrorText = newStyled.h3(templateObject_1$
|
|
5429
|
+
var ErrorText = newStyled.h3(templateObject_1$22 || (templateObject_1$22 = __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; });
|
|
5430
5430
|
var ErrorContainer = newStyled.div(templateObject_2$1u || (templateObject_2$1u = __makeTemplateObject(["\n display: flex;\n align-items: center;\n margin-top: 12px;\n"], ["\n display: flex;\n align-items: center;\n margin-top: 12px;\n"])));
|
|
5431
5431
|
var Error$1 = function (_a) {
|
|
5432
5432
|
var error = _a.error;
|
|
5433
5433
|
var theme = useTheme();
|
|
5434
5434
|
return (jsxs$1(ErrorContainer, { children: [jsx$1(Icon.Actions.LightExclamation, { fill: theme.colors.semantic.urgent.color, width: 0.875, height: 0.875 }, void 0), jsx$1(ErrorText, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: error }), void 0)] }, void 0));
|
|
5435
5435
|
};
|
|
5436
|
-
var templateObject_1$
|
|
5436
|
+
var templateObject_1$22, templateObject_2$1u;
|
|
5437
5437
|
|
|
5438
5438
|
var BaseSelectButton = function (_a) {
|
|
5439
5439
|
var children = _a.children, as = _a.as;
|
|
@@ -5450,7 +5450,7 @@ function BaseSelectOption(_a) {
|
|
|
5450
5450
|
return (jsx$1(Ee.Option, __assign$1({ className: className, as: as, value: value, disabled: disabled }, { children: children }), void 0));
|
|
5451
5451
|
}
|
|
5452
5452
|
|
|
5453
|
-
var CustomListBox = newStyled(Ee)(templateObject_1$
|
|
5453
|
+
var CustomListBox = newStyled(Ee)(templateObject_1$21 || (templateObject_1$21 = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
5454
5454
|
function BaseSelect(_a) {
|
|
5455
5455
|
var value = _a.value, onChange = _a.onChange, disabled = _a.disabled, children = _a.children, className = _a.className;
|
|
5456
5456
|
return (jsx$1(CustomListBox, __assign$1({ disabled: disabled, as: "div", value: value, onChange: onChange, className: className }, { children: children }), void 0));
|
|
@@ -5460,7 +5460,7 @@ var BaseSelect$1 = Object.assign(BaseSelect, {
|
|
|
5460
5460
|
Options: BaseSelectOptions,
|
|
5461
5461
|
Option: BaseSelectOption,
|
|
5462
5462
|
});
|
|
5463
|
-
var templateObject_1$
|
|
5463
|
+
var templateObject_1$21;
|
|
5464
5464
|
|
|
5465
5465
|
var CustomButton = newStyled.button(function (_a) {
|
|
5466
5466
|
var theme = _a.theme, wide = _a.wide, isSortOrFilter = _a.isSortOrFilter;
|
|
@@ -5499,7 +5499,7 @@ var CustomButton = newStyled.button(function (_a) {
|
|
|
5499
5499
|
});
|
|
5500
5500
|
});
|
|
5501
5501
|
// TODO Remove this when we find the real solution
|
|
5502
|
-
var StyledIcon$1 = newStyled.span(templateObject_1$
|
|
5502
|
+
var StyledIcon$1 = newStyled.span(templateObject_1$20 || (templateObject_1$20 = __makeTemplateObject(["\n [data-testid='CloseIcon'] {\n display: none;\n }\n ", "\n"], ["\n [data-testid='CloseIcon'] {\n display: none;\n }\n ", "\n"])), function (_a) {
|
|
5503
5503
|
var open = _a.open;
|
|
5504
5504
|
return open &&
|
|
5505
5505
|
"\n [data-testid=\"CloseIcon\"] {\n display: block;\n }\n [data-testid=\"OpenIcon\"] {\n display: none;\n }\n";
|
|
@@ -5519,7 +5519,7 @@ var BaseDropdownButton = function (_a) {
|
|
|
5519
5519
|
} }), void 0));
|
|
5520
5520
|
};
|
|
5521
5521
|
var BaseDropdownButton$1 = React__default.memo(BaseDropdownButton);
|
|
5522
|
-
var templateObject_1$
|
|
5522
|
+
var templateObject_1$20;
|
|
5523
5523
|
|
|
5524
5524
|
var DropdownOptions$1 = newStyled(BaseSelect$1.Options)(function (_a) {
|
|
5525
5525
|
var theme = _a.theme;
|
|
@@ -5686,7 +5686,7 @@ var CustomCheckboxStyles = {
|
|
|
5686
5686
|
},
|
|
5687
5687
|
};
|
|
5688
5688
|
|
|
5689
|
-
var Container$1h = newStyled.div(templateObject_1$
|
|
5689
|
+
var Container$1h = newStyled.div(templateObject_1$1$ || (templateObject_1$1$ = __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"])));
|
|
5690
5690
|
var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (props) { return [
|
|
5691
5691
|
CustomCheckboxStyles[props.size](props.theme),
|
|
5692
5692
|
CustomCheckboxStyles[props.variant](props.theme, props.isChecked, props.disabled),
|
|
@@ -5713,7 +5713,7 @@ var Checkbox = function (_a) {
|
|
|
5713
5713
|
};
|
|
5714
5714
|
return (jsxs$1(Container$1h, { children: [jsx$1(Input$5, { type: "checkbox", checked: checked, disabled: disabled, onChange: handleChange, id: id }, void 0), jsx$1(CustomCheckbox, __assign$1({ theme: theme, size: size, disabled: disabled, isChecked: checked, "data-testid": "checkbox", variant: variant, backgroundColor: backgroundColor, text: text }, { children: checked && jsx$1(Icon.Actions.Check, { fill: "#fff" }, void 0) }), void 0), jsx$1(Label$6, __assign$1({ "data-testid": "checkbox-text", size: sizeLabel, style: { color: colorLabel ? colorLabel : theme.colors.shades['700'].color }, variant: checked ? 'demi' : 'regular', htmlFor: id, disabled: disabled }, { children: text }), void 0)] }, void 0));
|
|
5715
5715
|
};
|
|
5716
|
-
var templateObject_1$
|
|
5716
|
+
var templateObject_1$1$, templateObject_2$1t;
|
|
5717
5717
|
|
|
5718
5718
|
var CustomOption = newStyled.li(function (_a) {
|
|
5719
5719
|
var theme = _a.theme, selected = _a.selected, active = _a.active, hasImage = _a.hasImage;
|
|
@@ -5762,7 +5762,7 @@ var BaseDropdown$1 = Object.assign(BaseDropdown, {
|
|
|
5762
5762
|
Option: BaseDropdownOption,
|
|
5763
5763
|
});
|
|
5764
5764
|
|
|
5765
|
-
var Container$1g = newStyled.div(templateObject_1$
|
|
5765
|
+
var Container$1g = newStyled.div(templateObject_1$1_ || (templateObject_1$1_ = __makeTemplateObject([""], [""])));
|
|
5766
5766
|
var RequiredPlaceholder = newStyled.p(templateObject_2$1s || (templateObject_2$1s = __makeTemplateObject(["\n margin: unset;\n &:after {\n content: '*';\n color: var(--colors-semantic-urgent-color);\n }\n"], ["\n margin: unset;\n &:after {\n content: '*';\n color: var(--colors-semantic-urgent-color);\n }\n"])));
|
|
5767
5767
|
var SelectedOption = newStyled.span(templateObject_3$1a || (templateObject_3$1a = __makeTemplateObject(["\n font-weight: ", ";\n"], ["\n font-weight: ", ";\n"])), function (_a) {
|
|
5768
5768
|
var fontWeight = _a.fontWeight;
|
|
@@ -5800,7 +5800,7 @@ function SimpleDropdown(_a) {
|
|
|
5800
5800
|
var DropdownContainer = showRequiredPlaceholder ? Container$1g : Fragment$1;
|
|
5801
5801
|
return (jsxs$1(DropdownContainer, { children: [jsxs$1(BaseDropdown$1, __assign$1({ value: selectedValue, onChange: onChangeHandler, disabled: disabled, wide: wide }, { children: [jsxs$1(BaseDropdown$1.Button, __assign$1({ label: label, OpenIcon: Icon.Arrows.ChevronDown, CloseIcon: Icon.Arrows.ChevronUp, wide: wide, isSortOrFilter: sort, testId: testId }, { children: [!!(selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.imageURL) && (jsx$1("img", { src: selectedValue.imageURL, alt: selectedValue.label, style: { paddingRight: 8 } }, void 0)), selectedOptionWeight && disabled ? (jsx$1(SelectedOption, __assign$1({ fontWeight: selectedOptionWeight }, { children: selectedOptionLabel }), void 0)) : (jsx$1(Fragment$2, { children: selectedOptionLabel }, void 0))] }), void 0), jsx$1(BaseDropdown$1.Options, { children: options.map(function (item) { return (jsxs$1(BaseDropdown$1.Option, __assign$1({ value: item, disabled: item.disabled, hasImage: !!item.imageURL }, { children: [!!item.imageURL && (jsx$1("img", { src: item.imageURL, alt: item.label, style: { paddingRight: 8 } }, void 0)), item.label] }), item.key)); }) }, void 0)] }), void 0), !!required && jsx$1(Error$1, { error: required }, void 0)] }, void 0));
|
|
5802
5802
|
}
|
|
5803
|
-
var templateObject_1$
|
|
5803
|
+
var templateObject_1$1_, templateObject_2$1s, templateObject_3$1a;
|
|
5804
5804
|
|
|
5805
5805
|
/* base styles & size variants */
|
|
5806
5806
|
var CustomRadioStyles$2 = {
|
|
@@ -5865,7 +5865,7 @@ var ContainerStyles$2 = {
|
|
|
5865
5865
|
},
|
|
5866
5866
|
};
|
|
5867
5867
|
|
|
5868
|
-
var Wrapper$7 = newStyled.div(templateObject_1$
|
|
5868
|
+
var Wrapper$7 = newStyled.div(templateObject_1$1Z || (templateObject_1$1Z = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
5869
5869
|
var Container$1f = newStyled.div(__assign$1({}, ContainerStyles$2.baseStyles), function (props) { return [ContainerStyles$2[props.size](props.theme)]; });
|
|
5870
5870
|
var Input$4 = newStyled.input(templateObject_2$1r || (templateObject_2$1r = __makeTemplateObject(["\n position: absolute;\n opacity: 0;\n cursor: ", ";\n height: 100%;\n width: 100%;\n margin: 0;\n"], ["\n position: absolute;\n opacity: 0;\n cursor: ", ";\n height: 100%;\n width: 100%;\n margin: 0;\n"])), function (_a) {
|
|
5871
5871
|
var disabled = _a.disabled;
|
|
@@ -5901,7 +5901,7 @@ var RadioInput = function (_a) {
|
|
|
5901
5901
|
};
|
|
5902
5902
|
return (jsxs$1(Wrapper$7, { children: [jsxs$1(Container$1f, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsx$1(Input$4, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled, style: style }, void 0), jsx$1(CustomRadio$2, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), useV2Style ? (jsxs$1(StyledLabelV2, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled, style: labelStyle }, { children: [icon, " ", label] }), void 0)) : (jsx$1(StyledLabel$3, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0))] }, void 0));
|
|
5903
5903
|
};
|
|
5904
|
-
var templateObject_1$
|
|
5904
|
+
var templateObject_1$1Z, templateObject_2$1r, templateObject_3$19, templateObject_4$Y;
|
|
5905
5905
|
|
|
5906
5906
|
var useOnClickOutside = function (ref, handler) {
|
|
5907
5907
|
useEffect(function () {
|
|
@@ -5994,7 +5994,7 @@ var getTooltipAlignItems = function (position, align) {
|
|
|
5994
5994
|
}
|
|
5995
5995
|
};
|
|
5996
5996
|
|
|
5997
|
-
var Wrapper$6 = newStyled.div(templateObject_1$
|
|
5997
|
+
var Wrapper$6 = newStyled.div(templateObject_1$1Y || (templateObject_1$1Y = __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) {
|
|
5998
5998
|
var position = _a.position;
|
|
5999
5999
|
return getWrapperFlexDirection(position);
|
|
6000
6000
|
}, function (_a) {
|
|
@@ -6059,7 +6059,7 @@ var CloseToolTip = newStyled.button(templateObject_8$p || (templateObject_8$p =
|
|
|
6059
6059
|
var _b = _a.right, right = _b === void 0 ? '.3rem' : _b;
|
|
6060
6060
|
return right;
|
|
6061
6061
|
});
|
|
6062
|
-
var templateObject_1$
|
|
6062
|
+
var templateObject_1$1Y, templateObject_2$1q, templateObject_3$18, templateObject_4$X, templateObject_5$J, templateObject_6$E, templateObject_7$w, templateObject_8$p;
|
|
6063
6063
|
|
|
6064
6064
|
var Tooltip = function (_a) {
|
|
6065
6065
|
var _b;
|
|
@@ -6102,7 +6102,7 @@ var benefitsColorMapper = function (_a) {
|
|
|
6102
6102
|
};
|
|
6103
6103
|
};
|
|
6104
6104
|
|
|
6105
|
-
var FlexContainer$3 = newStyled.div(templateObject_1$
|
|
6105
|
+
var FlexContainer$3 = newStyled.div(templateObject_1$1X || (templateObject_1$1X = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
6106
6106
|
var ContainerBase$3 = newStyled.div(templateObject_2$1p || (templateObject_2$1p = __makeTemplateObject(["\n border-radius: 8px;\n\n border: ", ";\n\n ", "\n\n & input:checked + div {\n border-color: ", ";\n }\n\n & label {\n cursor: pointer;\n }\n"], ["\n border-radius: 8px;\n\n border: ", ";\n\n ", "\n\n & input:checked + div {\n border-color: ", ";\n }\n\n & label {\n cursor: pointer;\n }\n"])), function (_a) {
|
|
6107
6107
|
var selected = _a.selected, theme = _a.theme;
|
|
6108
6108
|
return selected
|
|
@@ -6140,7 +6140,7 @@ var StyledPrice$3 = newStyled(PriceLabelV2$1)(templateObject_12$4 || (templateOb
|
|
|
6140
6140
|
return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
|
|
6141
6141
|
});
|
|
6142
6142
|
var Container$1e = newStyled.div(templateObject_13$4 || (templateObject_13$4 = __makeTemplateObject([""], [""])));
|
|
6143
|
-
var templateObject_1$
|
|
6143
|
+
var templateObject_1$1X, templateObject_2$1p, templateObject_3$17, templateObject_4$W, templateObject_5$I, templateObject_6$D, templateObject_7$v, templateObject_8$o, templateObject_9$d, templateObject_10$b, templateObject_11$7, templateObject_12$4, templateObject_13$4;
|
|
6144
6144
|
|
|
6145
6145
|
var radioIds$2 = {
|
|
6146
6146
|
oneTime: {
|
|
@@ -6195,7 +6195,7 @@ var Autoship = function (_a) {
|
|
|
6195
6195
|
: benefitsColor.base }, void 0), jsx$1(BenefitText$3, __assign$1({ variant: "body" }, { children: benefit }), void 0)] }, benefit)); }) }, void 0), radioIds$2.autoship.id === radioCheck.id && (jsxs$1(Fragment$2, { children: [jsxs$1(FlexContainer$3, { children: [jsx$1(DeliveryFrequencyLabel$1, __assign$1({ variant: "body" }, { children: "Delivery Every:" }), void 0), jsx$1(SimpleDropdown, { testId: "subscription-frecuency", initialValue: dropdownOptions[0], options: dropdownOptions, onChange: function (value) { return handleChange(value.value, 'dropdown'); }, placeHolder: "" }, void 0)] }, void 0), jsx$1(SubscriptionDetailsContainer, { children: jsx$1(Tooltip, __assign$1({ position: 0, content: tooltipContent, header: tooltipHeader, maxWidth: "300px", showCloseIcon: closeIcon }, { children: jsxs$1(FlexContainer$3, { children: [jsx$1(SubscriptionDetails, __assign$1({ variant: "body", weight: "demi" }, { children: "Subscription Details" }), void 0), jsx$1(Icon.Actions.CircleQuestion, { width: 1.2 }, void 0)] }, void 0) }), void 0) }, void 0)] }, void 0))] }), void 0)] }), void 0));
|
|
6196
6196
|
};
|
|
6197
6197
|
|
|
6198
|
-
var FlexContainer$2 = newStyled.div(templateObject_1$
|
|
6198
|
+
var FlexContainer$2 = newStyled.div(templateObject_1$1W || (templateObject_1$1W = __makeTemplateObject(["\n display: flex;\n\n ", "\n"], ["\n display: flex;\n\n ", "\n"])), function (_a) {
|
|
6199
6199
|
var theme = _a.theme;
|
|
6200
6200
|
return theme.name === 'TheSpaDr' &&
|
|
6201
6201
|
"\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 ";
|
|
@@ -6253,7 +6253,7 @@ var TooltipWrapper$1 = newStyled.div(templateObject_13$3 || (templateObject_13$3
|
|
|
6253
6253
|
var theme = _a.theme;
|
|
6254
6254
|
return theme.component.autoship.tooltip.margin;
|
|
6255
6255
|
});
|
|
6256
|
-
var templateObject_1$
|
|
6256
|
+
var templateObject_1$1W, templateObject_2$1o, templateObject_3$16, templateObject_4$V, templateObject_5$H, templateObject_6$C, templateObject_7$u, templateObject_8$n, templateObject_9$c, templateObject_10$a, templateObject_11$6, templateObject_12$3, templateObject_13$3;
|
|
6257
6257
|
|
|
6258
6258
|
var radioIds$1 = {
|
|
6259
6259
|
oneTime: {
|
|
@@ -6332,13 +6332,13 @@ var componentSizeMapper = (_a$2 = {},
|
|
|
6332
6332
|
_a$2[ComponentSize.Large] = ComponentSize.Medium,
|
|
6333
6333
|
_a$2);
|
|
6334
6334
|
|
|
6335
|
-
var CustomerDetails = newStyled.div(templateObject_1$
|
|
6335
|
+
var CustomerDetails = newStyled.div(templateObject_1$1V || (templateObject_1$1V = __makeTemplateObject([""], [""])));
|
|
6336
6336
|
var CustomerInfo = newStyled.div(templateObject_2$1n || (templateObject_2$1n = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n"], ["\n display: flex;\n justify-content: space-between;\n align-items: center;\n"])));
|
|
6337
6337
|
var Name = newStyled.h4(templateObject_3$15 || (templateObject_3$15 = __makeTemplateObject(["\n font-size: 22px;\n line-height: 20px;\n font-weight: 400;\n margin: 0;\n"], ["\n font-size: 22px;\n line-height: 20px;\n font-weight: 400;\n margin: 0;\n"])));
|
|
6338
6338
|
var StarIconContainer = newStyled.div(templateObject_4$U || (templateObject_4$U = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 5px;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 5px;\n"])));
|
|
6339
6339
|
var Description$2 = newStyled.p(templateObject_5$G || (templateObject_5$G = __makeTemplateObject(["\n font-size: 16px;\n font-weight: 300;\n line-height: normal;\n"], ["\n font-size: 16px;\n font-weight: 300;\n line-height: normal;\n"])));
|
|
6340
6340
|
var ReviewDays = newStyled.span(templateObject_6$B || (templateObject_6$B = __makeTemplateObject(["\n display: block;\n font-size: 14px;\n font-style: italic;\n font-weight: 300;\n"], ["\n display: block;\n font-size: 14px;\n font-style: italic;\n font-weight: 300;\n"])));
|
|
6341
|
-
var templateObject_1$
|
|
6341
|
+
var templateObject_1$1V, templateObject_2$1n, templateObject_3$15, templateObject_4$U, templateObject_5$G, templateObject_6$B;
|
|
6342
6342
|
|
|
6343
6343
|
var NameWithStars = function (_a) {
|
|
6344
6344
|
var name = _a.name, size = _a.size;
|
|
@@ -6356,7 +6356,7 @@ var ResultFeedback = function (_a) {
|
|
|
6356
6356
|
return (jsxs$1(CustomerDetails, { children: [jsx$1(NameWithStars, { name: name, size: size }, void 0), description && jsx$1(Description$2, { children: description }, void 0), reviewDays && jsx$1(ReviewDays, { children: reviewDays }, void 0)] }, void 0));
|
|
6357
6357
|
};
|
|
6358
6358
|
|
|
6359
|
-
var Container$1c = newStyled.div(templateObject_1$
|
|
6359
|
+
var Container$1c = newStyled.div(templateObject_1$1U || (templateObject_1$1U = __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; });
|
|
6360
6360
|
var ImageContainer$7 = newStyled.div(templateObject_2$1m || (templateObject_2$1m = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n width: 100%;\n height: 100%;\n column-gap: 4px;\n align-items: center;\n justify-content: center;\n"], ["\n display: flex;\n flex-direction: row;\n width: 100%;\n height: 100%;\n column-gap: 4px;\n align-items: center;\n justify-content: center;\n"])));
|
|
6361
6361
|
var ImageCard = newStyled.div(templateObject_3$14 || (templateObject_3$14 = __makeTemplateObject(["\n display: flex;\n min-height: ", ";\n min-width: ", ";\n width: ", ";\n flex-wrap: wrap;\n\n @media (max-width: 768px) {\n min-height: ", ";\n min-width: ", ";\n width: ", ";\n }\n"], ["\n display: flex;\n min-height: ", ";\n min-width: ", ";\n width: ", ";\n flex-wrap: wrap;\n\n @media (max-width: 768px) {\n min-height: ", ";\n min-width: ", ";\n width: ", ";\n }\n"])), function (props) { return props.styles.imageMinHeight; }, function (props) { return props.styles.imageMinWidth; }, function (props) { return props.styles.imageMinWidth; }, function (props) { return props.styles.mobileImageMinHeight; }, function (props) { return props.styles.mobileImageMinWidth; }, function (props) { return props.styles.mobileImageMinWidth; });
|
|
6362
6362
|
var UserInfoText = newStyled.div(templateObject_4$T || (templateObject_4$T = __makeTemplateObject(["\n color: ", ";\n font-size: ", ";\n text-align: ", ";\n margin: 0;\n font-weight: 400;\n line-height: 130%;\n\n @media (max-width: 768px) {\n font-size: ", ";\n }\n"], ["\n color: ", ";\n font-size: ", ";\n text-align: ", ";\n margin: 0;\n font-weight: 400;\n line-height: 130%;\n\n @media (max-width: 768px) {\n font-size: ", ";\n }\n"])), function (_a) {
|
|
@@ -6369,7 +6369,7 @@ var UserInfoText = newStyled.div(templateObject_4$T || (templateObject_4$T = __m
|
|
|
6369
6369
|
var theme = _a.theme, size = _a.size;
|
|
6370
6370
|
return theme.component.beforeAfter.size[componentSizeMapper[size]].userInfoText.mobile.fontSize;
|
|
6371
6371
|
});
|
|
6372
|
-
var templateObject_1$
|
|
6372
|
+
var templateObject_1$1U, templateObject_2$1m, templateObject_3$14, templateObject_4$T;
|
|
6373
6373
|
|
|
6374
6374
|
/* base styles & size variants */
|
|
6375
6375
|
var getStylesBySize$d = function (size, theme) {
|
|
@@ -6447,7 +6447,7 @@ var BeforeAfterCard = function (_a) {
|
|
|
6447
6447
|
return (jsxs$1(Container$1c, __assign$1({ "data-testid": "Container", styles: stylesBySize }, { children: [jsxs$1(ImageContainer$7, __assign$1({ "data-testid": "ImageContainer" }, { children: [jsx$1(ImageCard, __assign$1({ "data-testid": "ImageCard", styles: stylesBySize }, { children: jsx$1(Image$3, { borderRadius: imageBorderRadius, src: beforeImage, alt: "before", height: "100%", width: "100%" }, void 0) }), void 0), jsx$1(ImageCard, __assign$1({ styles: stylesBySize }, { children: jsx$1(Image$3, { borderRadius: imageBorderRadius, src: afterImage, alt: "after", height: "100%", width: "100%" }, void 0) }), void 0)] }), void 0), jsx$1(Component, __assign$1({ name: name, size: size, alignCenter: alignCenter, text: infoText }, rest), void 0)] }), void 0));
|
|
6448
6448
|
};
|
|
6449
6449
|
|
|
6450
|
-
var Section = newStyled.div(templateObject_1$
|
|
6450
|
+
var Section = newStyled.div(templateObject_1$1T || (templateObject_1$1T = __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) {
|
|
6451
6451
|
return props.type === CardSectionType.Header ? '1.5rem 1.5rem 0' : '0 1.5rem 1.5rem';
|
|
6452
6452
|
});
|
|
6453
6453
|
var CardHeader = function (_a) {
|
|
@@ -6458,16 +6458,16 @@ var CardFooter = function (_a) {
|
|
|
6458
6458
|
var children = _a.children;
|
|
6459
6459
|
return (jsx$1(Section, __assign$1({ type: CardSectionType.Footer }, { children: children }), void 0));
|
|
6460
6460
|
};
|
|
6461
|
-
var templateObject_1$
|
|
6461
|
+
var templateObject_1$1T;
|
|
6462
6462
|
|
|
6463
|
-
var Body$1 = newStyled.div(templateObject_1$
|
|
6463
|
+
var Body$1 = newStyled.div(templateObject_1$1S || (templateObject_1$1S = __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"])));
|
|
6464
6464
|
var CardBody$1 = function (_a) {
|
|
6465
6465
|
var children = _a.children;
|
|
6466
6466
|
return jsx$1(Body$1, { children: children }, void 0);
|
|
6467
6467
|
};
|
|
6468
|
-
var templateObject_1$
|
|
6468
|
+
var templateObject_1$1S;
|
|
6469
6469
|
|
|
6470
|
-
var Container$1b = newStyled.div(templateObject_1$
|
|
6470
|
+
var Container$1b = newStyled.div(templateObject_1$1R || (templateObject_1$1R = __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) {
|
|
6471
6471
|
var flex = _a.flex;
|
|
6472
6472
|
return flex &&
|
|
6473
6473
|
"display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;";
|
|
@@ -6489,16 +6489,16 @@ var Card$3 = Object.assign(Card$2, {
|
|
|
6489
6489
|
Footer: CardFooter,
|
|
6490
6490
|
Body: CardBody$1,
|
|
6491
6491
|
});
|
|
6492
|
-
var templateObject_1$
|
|
6492
|
+
var templateObject_1$1R;
|
|
6493
6493
|
|
|
6494
|
-
var StyledWrapper = newStyled.div(templateObject_1$
|
|
6494
|
+
var StyledWrapper = newStyled.div(templateObject_1$1Q || (templateObject_1$1Q = __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"])));
|
|
6495
6495
|
var StyledContainer = newStyled.div(templateObject_2$1l || (templateObject_2$1l = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n"], ["\n display: flex;\n justify-content: space-between;\n align-items: center;\n"])));
|
|
6496
6496
|
var TextLabel = newStyled(Text$7)(templateObject_3$13 || (templateObject_3$13 = __makeTemplateObject(["\n margin: 0.1rem 0;\n min-width: 4.5rem;\n color: ", ";\n"], ["\n margin: 0.1rem 0;\n min-width: 4.5rem;\n color: ", ";\n"])), function (_a) {
|
|
6497
6497
|
var color = _a.color;
|
|
6498
6498
|
return color;
|
|
6499
6499
|
});
|
|
6500
6500
|
var YouAreSaving = newStyled(Text$7)(templateObject_4$S || (templateObject_4$S = __makeTemplateObject(["\n text-align: right;\n margin: 0 0 0 0.5rem;\n"], ["\n text-align: right;\n margin: 0 0 0 0.5rem;\n"])));
|
|
6501
|
-
var templateObject_1$
|
|
6501
|
+
var templateObject_1$1Q, templateObject_2$1l, templateObject_3$13, templateObject_4$S;
|
|
6502
6502
|
|
|
6503
6503
|
var Minimalistic = function (_a) {
|
|
6504
6504
|
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;
|
|
@@ -6506,7 +6506,7 @@ var Minimalistic = function (_a) {
|
|
|
6506
6506
|
return (jsx$1(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxs$1(StyledWrapper, { children: [jsxs$1(StyledContainer, __assign$1({ "data-testid": "".concat(testId, "-section") }, { children: [jsx$1(StyledContainer, { children: jsx$1(TextLabel, __assign$1({ variant: "body", weight: "demi", size: "small" }, { children: getMorePayLessText }), void 0) }, void 0), jsx$1(PriceLabel$1, { finalPrice: price, originalPrice: originalPrice, color: theme.colors.pallete.secondary.color, size: ComponentSize.Small, testId: testId }, void 0)] }), void 0), jsxs$1(StyledContainer, __assign$1({ "data-testid": "".concat(testId, "-section-bottom") }, { children: [jsxs$1(TextLabel, __assign$1({ variant: "body", weight: "demi", size: "small", color: "var(--colors-pallete-red-color)" }, { children: [getQtyForText, " ", discount, "% ", offText.toLocaleUpperCase()] }), void 0), jsxs$1(YouAreSaving, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [youAreSavingText, ": ", savingPrice] }), void 0)] }), void 0)] }, void 0) }), void 0));
|
|
6507
6507
|
};
|
|
6508
6508
|
|
|
6509
|
-
var Container$1a = newStyled.div(templateObject_1$
|
|
6509
|
+
var Container$1a = newStyled.div(templateObject_1$1P || (templateObject_1$1P = __makeTemplateObject(["\n padding: 0.625rem 1.5rem;\n"], ["\n padding: 0.625rem 1.5rem;\n"])));
|
|
6510
6510
|
var Title$a = newStyled.h1(templateObject_2$1k || (templateObject_2$1k = __makeTemplateObject(["\n font-weight: 700;\n font-size: 1rem;\n line-height: 1.25rem;\n color: ", ";\n margin: 0;\n margin-bottom: 0.125rem;\n text-align: center;\n"], ["\n font-weight: 700;\n font-size: 1rem;\n line-height: 1.25rem;\n color: ", ";\n margin: 0;\n margin-bottom: 0.125rem;\n text-align: center;\n"])), function (props) { return props.color; });
|
|
6511
6511
|
var Details$1 = newStyled.span(templateObject_3$12 || (templateObject_3$12 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n font-weight: 400;\n font-size: 1rem;\n margin: 0;\n line-height: 1.5rem;\n justify-content: center;\n color: ", ";\n"], ["\n display: flex;\n align-items: center;\n font-weight: 400;\n font-size: 1rem;\n margin: 0;\n line-height: 1.5rem;\n justify-content: center;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
6512
6512
|
var PriceContainer$2 = newStyled.span(templateObject_4$R || (templateObject_4$R = __makeTemplateObject(["\n margin: 0 0.313rem;\n display: flex;\n align-items: center;\n"], ["\n margin: 0 0.313rem;\n display: flex;\n align-items: center;\n"])));
|
|
@@ -6515,14 +6515,14 @@ var Simple = function (_a) {
|
|
|
6515
6515
|
var theme = useTheme();
|
|
6516
6516
|
return (jsx$1(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxs$1(Container$1a, { children: [jsx$1(Title$a, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Title" }, { children: title }), void 0), jsxs$1(Details$1, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Details" }, { children: [anyQtyForText, jsx$1(PriceContainer$2, __assign$1({ "data-testid": "Price" }, { children: jsx$1(PriceLabel$1, { finalPrice: price, color: "var(--colors-pallete-red-color)", size: ComponentSize.Small }, void 0) }), void 0), "+ ", freeShippingText] }), void 0)] }, void 0) }), void 0));
|
|
6517
6517
|
};
|
|
6518
|
-
var templateObject_1$
|
|
6518
|
+
var templateObject_1$1P, templateObject_2$1k, templateObject_3$12, templateObject_4$R;
|
|
6519
6519
|
|
|
6520
6520
|
var Bundle = {
|
|
6521
6521
|
Minimalistic: Minimalistic,
|
|
6522
6522
|
Simple: Simple,
|
|
6523
6523
|
};
|
|
6524
6524
|
|
|
6525
|
-
var Container$19 = newStyled.div(templateObject_1$
|
|
6525
|
+
var Container$19 = newStyled.div(templateObject_1$1O || (templateObject_1$1O = __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) {
|
|
6526
6526
|
var displayBNPL = _a.displayBNPL;
|
|
6527
6527
|
return (displayBNPL ? 'flex' : 'none');
|
|
6528
6528
|
});
|
|
@@ -6546,41 +6546,41 @@ var BuyNowPayLater = function (_a) {
|
|
|
6546
6546
|
paddingRight: '0.25rem',
|
|
6547
6547
|
}, testId: "InstallmentPriceId" }, { children: installmentPrice }), void 0), showLogo ? ' with' : ''] }, void 0), showLogo && (jsx$1(IconWrapper$1, __assign$1({ style: { display: 'flex' } }, { children: jsx$1(IconComponent, { width: !bnplWithAfterPay ? 3.2 : 5.3, height: 2, fill: iconColor, style: { position: 'relative', left: bnplWithAfterPay ? '1rem' : '0' } }, void 0) }), void 0))] }), void 0) }), void 0));
|
|
6548
6548
|
};
|
|
6549
|
-
var templateObject_1$
|
|
6549
|
+
var templateObject_1$1O, templateObject_2$1j, templateObject_3$11;
|
|
6550
6550
|
|
|
6551
|
-
var Text$6 = newStyled.span(templateObject_1$
|
|
6551
|
+
var Text$6 = newStyled.span(templateObject_1$1N || (templateObject_1$1N = __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; });
|
|
6552
6552
|
var Title$9 = function (_a) {
|
|
6553
6553
|
var title = _a.title;
|
|
6554
6554
|
var theme = useTheme();
|
|
6555
6555
|
return jsx$1(Text$6, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0);
|
|
6556
6556
|
};
|
|
6557
|
-
var templateObject_1$
|
|
6557
|
+
var templateObject_1$1N;
|
|
6558
6558
|
|
|
6559
|
-
var P$4 = newStyled.p(templateObject_1$
|
|
6559
|
+
var P$4 = newStyled.p(templateObject_1$1M || (templateObject_1$1M = __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; });
|
|
6560
6560
|
var Promo = function (_a) {
|
|
6561
6561
|
var text = _a.text;
|
|
6562
6562
|
var theme = useTheme();
|
|
6563
6563
|
return (jsx$1(P$4, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "CartProductItemPromo" }, { children: text }), void 0));
|
|
6564
6564
|
};
|
|
6565
|
-
var templateObject_1$
|
|
6565
|
+
var templateObject_1$1M;
|
|
6566
6566
|
|
|
6567
|
-
var Text$5 = newStyled.span(templateObject_1$
|
|
6567
|
+
var Text$5 = newStyled.span(templateObject_1$1L || (templateObject_1$1L = __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; });
|
|
6568
6568
|
var Description$1 = function (_a) {
|
|
6569
6569
|
var text = _a.text;
|
|
6570
6570
|
var theme = useTheme();
|
|
6571
6571
|
return jsx$1(Text$5, __assign$1({ color: theme.colors.shades['400'].color }, { children: text }), void 0);
|
|
6572
6572
|
};
|
|
6573
|
-
var templateObject_1$
|
|
6573
|
+
var templateObject_1$1L;
|
|
6574
6574
|
|
|
6575
|
-
var Container$18 = newStyled.div(templateObject_1$
|
|
6575
|
+
var Container$18 = newStyled.div(templateObject_1$1K || (templateObject_1$1K = __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"); });
|
|
6576
6576
|
var CloseButton$1 = function (_a) {
|
|
6577
6577
|
var onClick = _a.onClick, size = _a.size;
|
|
6578
6578
|
var theme = useTheme();
|
|
6579
6579
|
return (jsx$1(Container$18, __assign$1({ backgroundColor: theme.colors.shades['700'].color, onClick: onClick, "data-testid": "CartProductItemCloseBtn", size: size }, { children: jsx$1(Icon.Actions.Close, { width: size - 1, height: size - 1, fill: "#fff" }, void 0) }), void 0));
|
|
6580
6580
|
};
|
|
6581
|
-
var templateObject_1$
|
|
6581
|
+
var templateObject_1$1K;
|
|
6582
6582
|
|
|
6583
|
-
var Text$4 = newStyled.h3(templateObject_1$
|
|
6583
|
+
var Text$4 = newStyled.h3(templateObject_1$1J || (templateObject_1$1J = __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) {
|
|
6584
6584
|
var backgroundColor = _a.backgroundColor;
|
|
6585
6585
|
return backgroundColor;
|
|
6586
6586
|
}, function (_a) {
|
|
@@ -6595,7 +6595,7 @@ var OfferBanner = function (_a) {
|
|
|
6595
6595
|
var theme = useTheme();
|
|
6596
6596
|
return (jsx$1(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));
|
|
6597
6597
|
};
|
|
6598
|
-
var templateObject_1$
|
|
6598
|
+
var templateObject_1$1J;
|
|
6599
6599
|
|
|
6600
6600
|
var CartProductItem = {
|
|
6601
6601
|
Title: Title$9,
|
|
@@ -6605,7 +6605,7 @@ var CartProductItem = {
|
|
|
6605
6605
|
CloseButton: CloseButton$1,
|
|
6606
6606
|
};
|
|
6607
6607
|
|
|
6608
|
-
var Container$17 = newStyled.div(templateObject_1$
|
|
6608
|
+
var Container$17 = newStyled.div(templateObject_1$1I || (templateObject_1$1I = __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"])));
|
|
6609
6609
|
var MobileContainer = newStyled(Container$17)(templateObject_2$1i || (templateObject_2$1i = __makeTemplateObject(["\n padding: 2px 2px;\n gap: 3px;\n"], ["\n padding: 2px 2px;\n gap: 3px;\n"])));
|
|
6610
6610
|
var DollarPart = newStyled.span(templateObject_3$10 || (templateObject_3$10 = __makeTemplateObject(["\n color: #fff;\n font-family: 'Avenir Next', sans-serif;\n font-weight: 700;\n line-height: 14px; /* 116.667% */\n"], ["\n color: #fff;\n font-family: 'Avenir Next', sans-serif;\n font-weight: 700;\n line-height: 14px; /* 116.667% */\n"])));
|
|
6611
6611
|
var ClubMembersText = newStyled.span(templateObject_4$Q || (templateObject_4$Q = __makeTemplateObject(["\n color: #fff;\n font-family: 'Avenir Next', sans-serif;\n font-weight: 500;\n line-height: 14px; /* 116.667% */\n"], ["\n color: #fff;\n font-family: 'Avenir Next', sans-serif;\n font-weight: 500;\n line-height: 14px; /* 116.667% */\n"])));
|
|
@@ -6618,7 +6618,7 @@ var ClubPriceLabel = function (_a) {
|
|
|
6618
6618
|
var isMobile = useWindowDimensions().isMobile;
|
|
6619
6619
|
return (jsx$1(Fragment$2, { children: isMobile ? (jsxs$1(MobileContainer, { children: [jsx$1(MobileDollarPart, { children: clubPrice }, void 0), jsx$1(MobileClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) : (jsxs$1(Container$17, { children: [jsx$1(DesktopDollarPart, { children: clubPrice }, void 0), jsx$1(DesktopClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) }, void 0));
|
|
6620
6620
|
};
|
|
6621
|
-
var templateObject_1$
|
|
6621
|
+
var templateObject_1$1I, templateObject_2$1i, templateObject_3$10, templateObject_4$Q, templateObject_5$F, templateObject_6$A, templateObject_7$t, templateObject_8$m;
|
|
6622
6622
|
|
|
6623
6623
|
var Spacing = function (_a) {
|
|
6624
6624
|
var size = _a.size, _b = _a.type, type = _b === void 0 ? 'block' : _b, children = _a.children, styleProp = _a.style;
|
|
@@ -6626,7 +6626,7 @@ var Spacing = function (_a) {
|
|
|
6626
6626
|
return jsx$1("div", __assign$1({ style: style }, { children: children }), void 0);
|
|
6627
6627
|
};
|
|
6628
6628
|
|
|
6629
|
-
var Container$16 = newStyled('div')(templateObject_1$
|
|
6629
|
+
var Container$16 = newStyled('div')(templateObject_1$1H || (templateObject_1$1H = __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"])));
|
|
6630
6630
|
var Content$2 = newStyled('div')(templateObject_2$1h || (templateObject_2$1h = __makeTemplateObject(["\n display: flex;\n align-items: flex-end;\n font-size: 14px;\n font-weight: 600;\n"], ["\n display: flex;\n align-items: flex-end;\n font-size: 14px;\n font-weight: 600;\n"])));
|
|
6631
6631
|
var BarContainer$1 = newStyled('div')(templateObject_3$$ || (templateObject_3$$ = __makeTemplateObject(["\n gap: 2px;\n display: flex;\n align-items: flex-end;\n width: fit-content;\n"], ["\n gap: 2px;\n display: flex;\n align-items: flex-end;\n width: fit-content;\n"])));
|
|
6632
6632
|
var Bar$2 = newStyled('div')(templateObject_4$P || (templateObject_4$P = __makeTemplateObject(["\n width: 2px;\n border-radius: 2px;\n height: ", ";\n background-color: ", ";\n"], ["\n width: 2px;\n border-radius: 2px;\n height: ", ";\n background-color: ", ";\n"])), function (_a) {
|
|
@@ -6640,7 +6640,7 @@ var StrengthBars = function (_a) {
|
|
|
6640
6640
|
var _b = _a.barsFilled, barsFilled = _b === void 0 ? 0 : _b, supportText = _a.supportText;
|
|
6641
6641
|
return (jsxs$1(Container$16, __assign$1({ "data-testid": "strength-bar" }, { children: [jsx$1(BarContainer$1, { children: [1, 2, 3, 4, 5].map(function (bar, index) { return (jsx$1(Bar$2, { index: index, isFilled: bar <= barsFilled }, bar)); }) }, void 0), jsx$1(Content$2, { children: supportText }, void 0)] }), void 0));
|
|
6642
6642
|
};
|
|
6643
|
-
var templateObject_1$
|
|
6643
|
+
var templateObject_1$1H, templateObject_2$1h, templateObject_3$$, templateObject_4$P;
|
|
6644
6644
|
|
|
6645
6645
|
var AutoshipFrequencyDropdown = function (_a) {
|
|
6646
6646
|
var frequency = _a.frequency, onChange = _a.onChange;
|
|
@@ -6671,16 +6671,16 @@ var getDropdownOptions = function (frequency) {
|
|
|
6671
6671
|
}); });
|
|
6672
6672
|
};
|
|
6673
6673
|
|
|
6674
|
-
var Benefit$2 = newStyled.div(templateObject_1$
|
|
6674
|
+
var Benefit$2 = newStyled.div(templateObject_1$1G || (templateObject_1$1G = __makeTemplateObject(["\n display: flex;\n padding: 8px 0;\n svg {\n overflow: visible;\n }\n"], ["\n display: flex;\n padding: 8px 0;\n svg {\n overflow: visible;\n }\n"])));
|
|
6675
6675
|
var BenefitText$1 = newStyled(Text$7)(templateObject_2$1g || (templateObject_2$1g = __makeTemplateObject(["\n line-height: 20px;\n margin-left: 9px;\n"], ["\n line-height: 20px;\n margin-left: 9px;\n"])));
|
|
6676
|
-
var templateObject_1$
|
|
6676
|
+
var templateObject_1$1G, templateObject_2$1g;
|
|
6677
6677
|
|
|
6678
6678
|
var BenefitsList = function (_a) {
|
|
6679
6679
|
var benefits = _a.benefits, isSelected = _a.isSelected, selectedColor = _a.selectedColor, baseColor = _a.baseColor;
|
|
6680
6680
|
return (jsx$1(Fragment$2, { children: benefits.map(function (benefit) { return (jsxs$1(Benefit$2, { children: [jsx$1(Icon.Actions.Check, { "data-testid": "icon-check", width: 1.2, height: 1.2, fill: isSelected ? selectedColor : baseColor }, void 0), jsx$1(BenefitText$1, { variant: "body", dangerouslySetInnerHTML: { __html: benefit } }, void 0)] }, benefit)); }) }, void 0));
|
|
6681
6681
|
};
|
|
6682
6682
|
|
|
6683
|
-
var TimerContainer$1 = newStyled.div(templateObject_1$
|
|
6683
|
+
var TimerContainer$1 = newStyled.div(templateObject_1$1F || (templateObject_1$1F = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
6684
6684
|
var timerColor = _a.timerColor;
|
|
6685
6685
|
return timerColor || '';
|
|
6686
6686
|
});
|
|
@@ -6696,7 +6696,7 @@ var UnitBlock = newStyled(Text$7)(templateObject_3$_ || (templateObject_3$_ = __
|
|
|
6696
6696
|
return theme.colors.shades.white.color;
|
|
6697
6697
|
});
|
|
6698
6698
|
var Unit = newStyled.p(templateObject_4$O || (templateObject_4$O = __makeTemplateObject(["\n font-size: 8px;\n font-weight: 400;\n line-height: 8px;\n margin: 0;\n"], ["\n font-size: 8px;\n font-weight: 400;\n line-height: 8px;\n margin: 0;\n"])));
|
|
6699
|
-
var templateObject_1$
|
|
6699
|
+
var templateObject_1$1F, templateObject_2$1f, templateObject_3$_, templateObject_4$O;
|
|
6700
6700
|
|
|
6701
6701
|
var HRS = 'HRS';
|
|
6702
6702
|
var MIN = 'MIN';
|
|
@@ -6737,7 +6737,7 @@ var Timer = function (_a) {
|
|
|
6737
6737
|
return (jsxs$1(TimerContainer$1, __assign$1({ "data-testid": "Time", timerColor: timerColor }, { children: [showHours && (hours || displayZeroValues) && "".concat(hours, "h "), (minutes || displayZeroValues) && "".concat(minutes, "m "), showSeconds && "".concat(seconds, "s")] }), void 0));
|
|
6738
6738
|
};
|
|
6739
6739
|
|
|
6740
|
-
var TimerContainer = newStyled.div(templateObject_1$
|
|
6740
|
+
var TimerContainer = newStyled.div(templateObject_1$1E || (templateObject_1$1E = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n justify-content: ", ";\n align-items: center;\n background-color: ", ";\n width: 100%;\n padding: 5px 24px;\n height: 40px;\n line-height: 14px;\n border-radius: ", ";\n\n & [data-testid='HurryUpText'] {\n font-size: 12px !important;\n line-height: 12px !important;\n }\n\n & [data-testid='Time'] {\n font-size: 14px !important;\n line-height: 14px !important;\n }\n\n @media (min-width: 330px) {\n & [data-testid='HurryUpText'] {\n font-size: 14px !important;\n line-height: 14px !important;\n }\n\n & [data-testid='Time'] {\n font-size: 16px !important;\n line-height: 16px !important;\n }\n }\n\n @media (min-width: 767px) {\n border-radius: ", ";\n padding: 5px 2px;\n }\n"], ["\n display: flex;\n flex-direction: row;\n justify-content: ", ";\n align-items: center;\n background-color: ", ";\n width: 100%;\n padding: 5px 24px;\n height: 40px;\n line-height: 14px;\n border-radius: ", ";\n\n & [data-testid='HurryUpText'] {\n font-size: 12px !important;\n line-height: 12px !important;\n }\n\n & [data-testid='Time'] {\n font-size: 14px !important;\n line-height: 14px !important;\n }\n\n @media (min-width: 330px) {\n & [data-testid='HurryUpText'] {\n font-size: 14px !important;\n line-height: 14px !important;\n }\n\n & [data-testid='Time'] {\n font-size: 16px !important;\n line-height: 16px !important;\n }\n }\n\n @media (min-width: 767px) {\n border-radius: ", ";\n padding: 5px 2px;\n }\n"])), function (_a) {
|
|
6741
6741
|
var textPosition = _a.textPosition;
|
|
6742
6742
|
return textPosition;
|
|
6743
6743
|
}, function (_a) {
|
|
@@ -6750,7 +6750,7 @@ var TimerContainer = newStyled.div(templateObject_1$1D || (templateObject_1$1D =
|
|
|
6750
6750
|
var borderRadius = _a.borderRadius;
|
|
6751
6751
|
return borderRadius || '8px';
|
|
6752
6752
|
});
|
|
6753
|
-
var templateObject_1$
|
|
6753
|
+
var templateObject_1$1E;
|
|
6754
6754
|
|
|
6755
6755
|
var getDefaultCountdown = function () {
|
|
6756
6756
|
var tomorrowDate = new Date();
|
|
@@ -6766,7 +6766,7 @@ var HurryUp = function (_a) {
|
|
|
6766
6766
|
return (jsxs$1(TimerContainer, __assign$1({ backgroundColor: backgroundColor || theme.component.card.backgroundColor, textPosition: textPosition, borderRadius: (!isFullVersion && theme.component.hurryUp.borderRadius) || '0', "data-testid": "HurryUp" }, { children: [clockPosition === 'left' && (jsxs$1(Fragment$2, { children: [jsx$1(Icon.PDP.Stopwatch, { width: iconSize, height: iconSize, fill: theme.colors.pallete.secondary.color }, void 0), "\u00A0"] }, void 0)), jsx$1(Text$7, __assign$1({ testId: "HurryUpText", variant: "body", size: "small", weight: "demi", color: hurryUpTextColor }, { children: hurryUpText }), void 0), "\u00A0", clockPosition === 'right' && (jsxs$1(Fragment$2, { children: [jsx$1(Icon.PDP.Stopwatch, { width: iconSize, height: iconSize, fill: theme.colors.pallete.secondary.color }, void 0), "\u00A0"] }, void 0)), showTimer && (jsx$1(Timer, __assign$1({ countdown: countdown, onTimeUp: function () { } }, timerProps, { isCardsVersion: isFullVersion }), void 0))] }), void 0));
|
|
6767
6767
|
};
|
|
6768
6768
|
|
|
6769
|
-
var Container$15 = newStyled.div(templateObject_1$
|
|
6769
|
+
var Container$15 = newStyled.div(templateObject_1$1D || (templateObject_1$1D = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n svg {\n vertical-align: unset;\n }\n"], ["\n width: ", ";\n height: ", ";\n svg {\n vertical-align: unset;\n }\n"])), function (_a) {
|
|
6770
6770
|
var size = _a.size;
|
|
6771
6771
|
return (size ? size : '100%');
|
|
6772
6772
|
}, function (_a) {
|
|
@@ -6794,29 +6794,29 @@ var StyledSpinner = newStyled.div(templateObject_2$1e || (templateObject_2$1e =
|
|
|
6794
6794
|
var _b = _a.duration, duration = _b === void 0 ? 0.7 : _b;
|
|
6795
6795
|
return duration;
|
|
6796
6796
|
});
|
|
6797
|
-
var templateObject_1$
|
|
6797
|
+
var templateObject_1$1D, templateObject_2$1e;
|
|
6798
6798
|
|
|
6799
6799
|
var Spinner = function (_a) {
|
|
6800
6800
|
var fill = _a.fill, background = _a.background, _b = _a.animationDuration, animationDuration = _b === void 0 ? 1 : _b, borderSize = _a.borderSize, _c = _a.complete, complete = _c === void 0 ? false : _c, completeIconStroke = _a.completeIconStroke, size = _a.size;
|
|
6801
6801
|
return (jsx$1(Container$15, __assign$1({ size: size, "data-testid": "Container" }, { children: complete ? (jsx$1(Icon.Actions.LightCheck, { fill: fill, svgProps: { strokeWidth: completeIconStroke } }, void 0)) : (jsx$1(StyledSpinner, { duration: animationDuration, "data-testid": "Loading", color: fill, background: background, size: borderSize !== null && borderSize !== void 0 ? borderSize : ComponentSize.Small }, void 0)) }), void 0));
|
|
6802
6802
|
};
|
|
6803
6803
|
|
|
6804
|
-
var ProgressContainer = newStyled.div(templateObject_1$
|
|
6804
|
+
var ProgressContainer = newStyled.div(templateObject_1$1C || (templateObject_1$1C = __makeTemplateObject(["\n top: 20px;\n left: 10px;\n border-radius: 10px;\n position: absolute;\n height: 5px;\n width: 95%;\n background: rgba(0, 0, 0, 0.3);\n transition: opacity 0.3s ease-in-out;\n opacity: ", ";\n"], ["\n top: 20px;\n left: 10px;\n border-radius: 10px;\n position: absolute;\n height: 5px;\n width: 95%;\n background: rgba(0, 0, 0, 0.3);\n transition: opacity 0.3s ease-in-out;\n opacity: ", ";\n"])), function (props) { return (props.hide ? 0 : 1); });
|
|
6805
6805
|
var ProgressFiller = newStyled.div(templateObject_2$1d || (templateObject_2$1d = __makeTemplateObject(["\n height: 100%;\n width: ", "%;\n background-color: white;\n border-radius: 10px;\n transition: width 0.3s ease-in-out;\n"], ["\n height: 100%;\n width: ", "%;\n background-color: white;\n border-radius: 10px;\n transition: width 0.3s ease-in-out;\n"])), function (props) { return props.progress * 100; });
|
|
6806
|
-
var templateObject_1$
|
|
6806
|
+
var templateObject_1$1C, templateObject_2$1d;
|
|
6807
6807
|
|
|
6808
6808
|
var ProgressBar$1 = function (_a) {
|
|
6809
6809
|
var progress = _a.progress, hide = _a.hide;
|
|
6810
6810
|
return (jsx$1(ProgressContainer, __assign$1({ "data-testid": "progress-bar", hide: hide }, { children: jsx$1(ProgressFiller, { progress: progress }, void 0) }), void 0));
|
|
6811
6811
|
};
|
|
6812
6812
|
|
|
6813
|
-
var Container$14 = newStyled.div(templateObject_1$
|
|
6813
|
+
var Container$14 = newStyled.div(templateObject_1$1B || (templateObject_1$1B = __makeTemplateObject(["\n max-width: 530px;\n position: relative;\n"], ["\n max-width: 530px;\n position: relative;\n"])));
|
|
6814
6814
|
var HTMLVideo = newStyled.video(templateObject_2$1c || (templateObject_2$1c = __makeTemplateObject(["\n width: 100%;\n max-width: 530px;\n height: ", ";\n"], ["\n width: 100%;\n max-width: 530px;\n height: ", ";\n"])), function (props) { return props.height; });
|
|
6815
6815
|
var PlayIcon = newStyled(Icon.PDP.PlayVideo)(templateObject_3$Z || (templateObject_3$Z = __makeTemplateObject(["\n width: 120px;\n height: 120px;\n\n @media (max-width: 768px) {\n width: 80px;\n height: 80px;\n }\n"], ["\n width: 120px;\n height: 120px;\n\n @media (max-width: 768px) {\n width: 80px;\n height: 80px;\n }\n"])));
|
|
6816
6816
|
var PlayContainer = newStyled.div(templateObject_4$N || (templateObject_4$N = __makeTemplateObject(["\n z-index: 1;\n width: 100%;\n height: 100%;\n display: flex;\n position: absolute;\n align-items: center;\n justify-content: center;\n"], ["\n z-index: 1;\n width: 100%;\n height: 100%;\n display: flex;\n position: absolute;\n align-items: center;\n justify-content: center;\n"])));
|
|
6817
6817
|
var PauseContainer = newStyled.div(templateObject_5$E || (templateObject_5$E = __makeTemplateObject(["\n z-index: 1;\n width: 100%;\n height: 100%;\n position: absolute;\n"], ["\n z-index: 1;\n width: 100%;\n height: 100%;\n position: absolute;\n"])));
|
|
6818
6818
|
var MuteButton = newStyled.button(templateObject_6$z || (templateObject_6$z = __makeTemplateObject(["\n position: absolute;\n background: transparent;\n border: none;\n bottom: 21px;\n right: 23px;\n z-index: 2;\n cursor: pointer;\n"], ["\n position: absolute;\n background: transparent;\n border: none;\n bottom: 21px;\n right: 23px;\n z-index: 2;\n cursor: pointer;\n"])));
|
|
6819
|
-
var templateObject_1$
|
|
6819
|
+
var templateObject_1$1B, templateObject_2$1c, templateObject_3$Z, templateObject_4$N, templateObject_5$E, templateObject_6$z;
|
|
6820
6820
|
|
|
6821
6821
|
var Video$1 = function (_a) {
|
|
6822
6822
|
var _b, _c, _d, _e;
|
|
@@ -6869,7 +6869,7 @@ var Video$1 = function (_a) {
|
|
|
6869
6869
|
return (jsxs$1(Container$14, __assign$1({ className: className }, { children: [!isLoading && withProgressBar && jsx$1(ProgressBar$1, { progress: progress, hide: hideProgressBar }, void 0), !isPlaying ? (jsx$1(PlayContainer, __assign$1({ "data-testid": "play", onClick: handlePlayClick }, { children: isStarted && jsx$1(PlayIcon, {}, void 0) }), void 0)) : (jsx$1(PauseContainer, { "data-testid": "pause", onClick: handlePauseClick }, void 0)), hasAudioControl && (jsxs$1(MuteButton, __assign$1({ onClick: handleMuteToggle }, { children: [isMuted && jsx$1(Icon$1, { name: "custom/sound_off" }, void 0), !isMuted && jsx$1(Icon$1, { name: "custom/sound_on" }, void 0)] }), void 0)), jsxs$1(HTMLVideo, __assign$1({}, rest, { muted: isMuted, "data-testid": "video", poster: thumbnail, playsInline: true, ref: videoRef, onTimeUpdate: onTimeUpdate, onCanPlay: function () { return setIsLoading(false); }, onLoadedData: function () { return setIsLoading(false); }, onPause: function () { return setIsPlaying(false); }, onPlaying: function () { return setIsPlaying(true); }, height: height || 'auto' }, { children: [jsx$1("track", { kind: "captions" }, void 0), jsx$1("source", { src: source }, void 0)] }), void 0)] }), void 0));
|
|
6870
6870
|
};
|
|
6871
6871
|
|
|
6872
|
-
var LikeCount = newStyled.span(templateObject_1$
|
|
6872
|
+
var LikeCount = newStyled.span(templateObject_1$1A || (templateObject_1$1A = __makeTemplateObject(["\n font-size: 14px;\n line-height: 22px;\n color: ", ";\n font-weight: 600;\n\n &.like-count {\n transition: color 0.2s ease;\n }\n"], ["\n font-size: 14px;\n line-height: 22px;\n color: ", ";\n font-weight: 600;\n\n &.like-count {\n transition: color 0.2s ease;\n }\n"])), function (_a) {
|
|
6873
6873
|
var theme = _a.theme;
|
|
6874
6874
|
return theme.colors.shades.black.color;
|
|
6875
6875
|
});
|
|
@@ -6892,7 +6892,7 @@ var LikeBtnContainer = newStyled.button(templateObject_2$1b || (templateObject_2
|
|
|
6892
6892
|
var _b = _a.boxSizing, boxSizing = _b === void 0 ? 'border-box' : _b;
|
|
6893
6893
|
return boxSizing;
|
|
6894
6894
|
});
|
|
6895
|
-
var templateObject_1$
|
|
6895
|
+
var templateObject_1$1A, templateObject_2$1b;
|
|
6896
6896
|
|
|
6897
6897
|
var getStylesBySize$c = function (size) {
|
|
6898
6898
|
switch (size) {
|
|
@@ -6913,7 +6913,7 @@ var getStylesBySize$c = function (size) {
|
|
|
6913
6913
|
};
|
|
6914
6914
|
}
|
|
6915
6915
|
};
|
|
6916
|
-
var Container$13 = newStyled.div(templateObject_1$
|
|
6916
|
+
var Container$13 = newStyled.div(templateObject_1$1z || (templateObject_1$1z = __makeTemplateObject(["\n background-color: ", ";\n width: ", ";\n height: ", ";\n border: ", ";\n border-radius: ", ";\n display: flex;\n justify-content: center;\n align-items: center;\n transition: background-color 0.1s ease;\n box-shadow: ", ";\n\n padding: ", ";\n gap: ", ";\n\n &:hover {\n background-color: ", ";\n cursor: pointer;\n }\n\n &.disabled {\n background-color: ", ";\n cursor: not-allowed;\n\n svg path {\n fill: ", ";\n }\n }\n"], ["\n background-color: ", ";\n width: ", ";\n height: ", ";\n border: ", ";\n border-radius: ", ";\n display: flex;\n justify-content: center;\n align-items: center;\n transition: background-color 0.1s ease;\n box-shadow: ", ";\n\n padding: ", ";\n gap: ", ";\n\n &:hover {\n background-color: ", ";\n cursor: pointer;\n }\n\n &.disabled {\n background-color: ", ";\n cursor: not-allowed;\n\n svg path {\n fill: ", ";\n }\n }\n"])), function (_a) {
|
|
6917
6917
|
var backgroundColor = _a.backgroundColor;
|
|
6918
6918
|
return backgroundColor;
|
|
6919
6919
|
}, function (_a) {
|
|
@@ -6956,7 +6956,7 @@ var IconButton = function (_a) {
|
|
|
6956
6956
|
var theme = useTheme();
|
|
6957
6957
|
return (jsx$1(Container$13, __assign$1({ border: border, width: width, className: disabled ? 'disabled' : '', backgroundColor: (_b = backgroundColor === null || backgroundColor === void 0 ? void 0 : backgroundColor.active) !== null && _b !== void 0 ? _b : theme.component.button.primary.active.backgroundColor, hoverBackgroundColor: (_c = backgroundColor === null || backgroundColor === void 0 ? void 0 : backgroundColor.hover) !== null && _c !== void 0 ? _c : theme.component.button.secondary.active.backgroundColor, disabledColor: theme.colors.shades['50'].color, disabledIconColor: theme.colors.shades['200'].color, size: size, "data-testid": dataTestId, onClick: disabled ? function () { } : onClick, hasText: hasText, boxShadow: boxShadow, rounded: rounded }, { children: children }), void 0));
|
|
6958
6958
|
};
|
|
6959
|
-
var templateObject_1$
|
|
6959
|
+
var templateObject_1$1z;
|
|
6960
6960
|
|
|
6961
6961
|
var LikeButton = function (_a) {
|
|
6962
6962
|
var _b;
|
|
@@ -6969,7 +6969,7 @@ var LikeButton = function (_a) {
|
|
|
6969
6969
|
return (jsx$1(LikeBtnContainer, __assign$1({ className: className }, containerProps, { children: jsxs$1(IconButton, __assign$1({ onClick: onClick, backgroundColor: background, hasText: !!likes, boxShadow: "0 6px 16px rgba(0, 0, 0, 0.12)" }, { children: [jsx$1(Icon$1, { name: isLiked ? 'actions/like_solid' : 'actions/like', fill: isLiked ? iconFill.solid : (_b = iconFill.regular) !== null && _b !== void 0 ? _b : iconFill.solid, width: "24px", height: "24px" }, void 0), !!likes && jsx$1(LikeCount, __assign$1({ className: "like-count" }, { children: likes }), void 0)] }), isLiked.toString()) }), void 0));
|
|
6970
6970
|
};
|
|
6971
6971
|
|
|
6972
|
-
var RegularPriceTagSpan = newStyled.span(templateObject_1$
|
|
6972
|
+
var RegularPriceTagSpan = newStyled.span(templateObject_1$1y || (templateObject_1$1y = __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"])));
|
|
6973
6973
|
var ClubPriceTagSpan = newStyled.span(templateObject_2$1a || (templateObject_2$1a = __makeTemplateObject(["\n background-color: #c64844;\n padding: 3px 4px;\n border-radius: 4px;\n gap: 10px;\n align-items: center;\n justify-content: center;\n color: white;\n font-weight: 600;\n font-size: 0.6rem;\n line-height: 1rem;\n text-align: center;\n margin-bottom: 0.5rem;\n"], ["\n background-color: #c64844;\n padding: 3px 4px;\n border-radius: 4px;\n gap: 10px;\n align-items: center;\n justify-content: center;\n color: white;\n font-weight: 600;\n font-size: 0.6rem;\n line-height: 1rem;\n text-align: center;\n margin-bottom: 0.5rem;\n"])));
|
|
6974
6974
|
var PriceContainer$1 = newStyled.span(templateObject_3$Y || (templateObject_3$Y = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
6975
6975
|
var PriceContainerV2 = newStyled.span(templateObject_4$M || (templateObject_4$M = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
@@ -7027,14 +7027,14 @@ var PriceLabelV4 = function (_a) {
|
|
|
7027
7027
|
? finalPriceArray[0]
|
|
7028
7028
|
: (_b = "".concat(productFinalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1], "."] }), void 0), jsx$1(Price, __assign$1({ finalPriceStyledSmall: true, style: { marginTop: '-6px', color: '#c64844' } }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }, void 0), jsx$1(ClubPriceTag, { label: theme.label.member }, void 0)] }, void 0)] }, void 0)), discount && (jsx$1(TagContainer, __assign$1({ size: size }, { children: jsx$1(DiscountTag$3, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
|
|
7029
7029
|
};
|
|
7030
|
-
var templateObject_1$
|
|
7030
|
+
var templateObject_1$1y, templateObject_2$1a, templateObject_3$Y, templateObject_4$M, templateObject_5$D;
|
|
7031
7031
|
|
|
7032
7032
|
var STARTS_NUMBER = 5;
|
|
7033
7033
|
|
|
7034
|
-
var Container$12 = newStyled.div(templateObject_1$
|
|
7035
|
-
var templateObject_1$
|
|
7034
|
+
var Container$12 = newStyled.div(templateObject_1$1x || (templateObject_1$1x = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
7035
|
+
var templateObject_1$1x;
|
|
7036
7036
|
|
|
7037
|
-
var StarContainer = newStyled.div(templateObject_1$
|
|
7037
|
+
var StarContainer = newStyled.div(templateObject_1$1w || (templateObject_1$1w = __makeTemplateObject(["\n display: flex;\n margin-right: ", ";\n"], ["\n display: flex;\n margin-right: ", ";\n"])), function (_a) {
|
|
7038
7038
|
var marginRight = _a.marginRight;
|
|
7039
7039
|
return marginRight;
|
|
7040
7040
|
});
|
|
@@ -7050,7 +7050,7 @@ var StarList = function (_a) {
|
|
|
7050
7050
|
return (jsx$1(StarContainer, __assign$1({ "data-testid": "star-container", marginRight: theme.component.stars.element[size].marginRight }, { children: index < Math.floor(rating) ? (jsx$1(Icon.PDP.Star, __assign$1({}, iconProps), void 0)) : index === Math.floor(rating) && rating % 1 != 0 ? (jsx$1(Icon.PDP.StarHalf, __assign$1({}, iconProps), void 0)) : (jsx$1(Icon.PDP.StarEmpty, __assign$1({}, iconProps), void 0)) }), "star-container-".concat(index)));
|
|
7051
7051
|
}) }, void 0));
|
|
7052
7052
|
};
|
|
7053
|
-
var templateObject_1$
|
|
7053
|
+
var templateObject_1$1w;
|
|
7054
7054
|
|
|
7055
7055
|
/* base styles & size variants */
|
|
7056
7056
|
var LabelStyles = {
|
|
@@ -7098,7 +7098,7 @@ var LabelStyles = {
|
|
|
7098
7098
|
});
|
|
7099
7099
|
},
|
|
7100
7100
|
};
|
|
7101
|
-
var Container$11 = newStyled.a(templateObject_1$
|
|
7101
|
+
var Container$11 = newStyled.a(templateObject_1$1v || (templateObject_1$1v = __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"])));
|
|
7102
7102
|
var CustomLabel = newStyled.div(function (_a) {
|
|
7103
7103
|
var theme = _a.theme, size = _a.size, wrapWithParenthesis = _a.wrapWithParenthesis, underline = _a.underline;
|
|
7104
7104
|
return [
|
|
@@ -7118,7 +7118,7 @@ var CustomLabel = newStyled.div(function (_a) {
|
|
|
7118
7118
|
];
|
|
7119
7119
|
});
|
|
7120
7120
|
var RatingLabel = newStyled.span(templateObject_2$19 || (templateObject_2$19 = __makeTemplateObject(["\n font-size: 16px;\n font-weight: 600;\n color: ", ";\n padding-right: 6px;\n text-decoration: none;\n"], ["\n font-size: 16px;\n font-weight: 600;\n color: ", ";\n padding-right: 6px;\n text-decoration: none;\n"])), function (props) { return props.color; });
|
|
7121
|
-
var templateObject_1$
|
|
7121
|
+
var templateObject_1$1v, templateObject_2$19;
|
|
7122
7122
|
|
|
7123
7123
|
var Rating = function (_a) {
|
|
7124
7124
|
var _b = _a.size, size = _b === void 0 ? ComponentSize.Medium : _b, reviews = _a.reviews, reviewsText = _a.reviewsText, rating = _a.rating, _c = _a.showRatingText, showRatingText = _c === void 0 ? false : _c, _d = _a.wrapWithParenthesis, wrapWithParenthesis = _d === void 0 ? false : _d, _e = _a.underline, underline = _e === void 0 ? false : _e, reviewsContainerId = _a.reviewsContainerId;
|
|
@@ -7213,7 +7213,7 @@ var ImageContainer$6 = newStyled.div(function (_a) {
|
|
|
7213
7213
|
height: height,
|
|
7214
7214
|
});
|
|
7215
7215
|
});
|
|
7216
|
-
var ImageHoverContainer$3 = newStyled.img(templateObject_1$
|
|
7216
|
+
var ImageHoverContainer$3 = newStyled.img(templateObject_1$1u || (templateObject_1$1u = __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"])));
|
|
7217
7217
|
var Container$10 = newStyled.a(templateObject_2$18 || (templateObject_2$18 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n text-decoration: none;\n\n &:hover .hover__image {\n opacity: 1;\n }\n\n &:hover .like-btn-container:hover + .hover__image {\n opacity: 0;\n }\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n text-decoration: none;\n\n &:hover .hover__image {\n opacity: 1;\n }\n\n &:hover .like-btn-container:hover + .hover__image {\n opacity: 0;\n }\n"])));
|
|
7218
7218
|
var ProdCardContainer$4 = newStyled.div(templateObject_3$X || (templateObject_3$X = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: min-content;\n text-decoration: none;\n position: relative;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: min-content;\n text-decoration: none;\n position: relative;\n"])));
|
|
7219
7219
|
var Title$8 = newStyled.h2(templateObject_4$L || (templateObject_4$L = __makeTemplateObject(["\n font-size: ", ";\n font-weight: ", ";\n line-height: 1.375rem;\n min-height: 2.75rem;\n color: ", ";\n margin: 0.25rem 0;\n text-align: ", ";\n\n ", "\n\n ", "\n\n @media (max-width: ", "px) {\n font-size: ", ";\n }\n"], ["\n font-size: ", ";\n font-weight: ", ";\n line-height: 1.375rem;\n min-height: 2.75rem;\n color: ", ";\n margin: 0.25rem 0;\n text-align: ", ";\n\n ", "\n\n ", "\n\n @media (max-width: ", "px) {\n font-size: ", ";\n }\n"])), function (_a) {
|
|
@@ -7277,7 +7277,7 @@ var BottomTagContainer$9 = newStyled.div(templateObject_6$y || (templateObject_6
|
|
|
7277
7277
|
});
|
|
7278
7278
|
var MarginTopContainer$1 = newStyled.div(templateObject_7$s || (templateObject_7$s = __makeTemplateObject(["\n margin-top: 8px;\n"], ["\n margin-top: 8px;\n"])));
|
|
7279
7279
|
var ClubOfferPriceLabelWrapper = newStyled.div(templateObject_8$l || (templateObject_8$l = __makeTemplateObject(["\n margin-top: 2px;\n margin-bottom: 2px;\n"], ["\n margin-top: 2px;\n margin-bottom: 2px;\n"])));
|
|
7280
|
-
var templateObject_1$
|
|
7280
|
+
var templateObject_1$1u, templateObject_2$18, templateObject_3$X, templateObject_4$L, templateObject_5$C, templateObject_6$y, templateObject_7$s, templateObject_8$l;
|
|
7281
7281
|
|
|
7282
7282
|
var ProductItemMobile = function (_a) {
|
|
7283
7283
|
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
|
|
@@ -7394,7 +7394,7 @@ var ImageContainer$5 = newStyled.div(function (_a) {
|
|
|
7394
7394
|
height: height,
|
|
7395
7395
|
});
|
|
7396
7396
|
});
|
|
7397
|
-
var ImageHoverContainer$2 = newStyled.img(templateObject_1$
|
|
7397
|
+
var ImageHoverContainer$2 = newStyled.img(templateObject_1$1t || (templateObject_1$1t = __makeTemplateObject(["\n opacity: 0;\n position: absolute;\n transition: all 0.4s ease-in-out;\n border-radius: ", ";\n"], ["\n opacity: 0;\n position: absolute;\n transition: all 0.4s ease-in-out;\n border-radius: ", ";\n"])), function (props) { return props.borderRadius; });
|
|
7398
7398
|
var Container$$ = newStyled.a(templateObject_2$17 || (templateObject_2$17 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n text-decoration: none;\n\n &:hover .hover__image {\n opacity: 1;\n }\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n text-decoration: none;\n\n &:hover .hover__image {\n opacity: 1;\n }\n"])));
|
|
7399
7399
|
var ProdCardContainer$3 = newStyled.div(templateObject_3$W || (templateObject_3$W = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: min-content;\n text-decoration: none;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: min-content;\n text-decoration: none;\n"])));
|
|
7400
7400
|
var Title$7 = newStyled.p(templateObject_4$K || (templateObject_4$K = __makeTemplateObject(["\n font-size: 0.83rem;\n font-weight: normal;\n line-height: 1.375rem;\n min-height: 2.75rem;\n text-align: center;\n color: ", ";\n margin: 0.25rem 0;\n text-align: ", ";\n"], ["\n font-size: 0.83rem;\n font-weight: normal;\n line-height: 1.375rem;\n min-height: 2.75rem;\n text-align: center;\n color: ", ";\n margin: 0.25rem 0;\n text-align: ", ";\n"])), function (props) { return props.theme.colors.pallete.secondary.color; }, function (props) { return props.align; });
|
|
@@ -7483,9 +7483,9 @@ var ProductItemTK = function (_a) {
|
|
|
7483
7483
|
marginTop: hasSpacing ? undefined : textContainerGap,
|
|
7484
7484
|
} }, { children: title }), void 0)) : (jsx(Title$7, __assign$1({ theme: theme, align: showClubPriceLabel ? 'left' : alignName }, { children: title }), void 0)), hasSpacing && jsx(Spacing, { size: space }, void 0), colorPicker.display && colorPicker.position === 'middle' && jsx(Fragment, { children: colorPicker.component }, void 0), (hasStrength === null || hasStrength === void 0 ? void 0 : hasStrength.strength) !== -1 && (jsxs(Fragment, { children: [jsx(StrengthBars, { barsFilled: hasStrength.strength, supportText: hasStrength.description }, void 0), jsx(Spacing, { size: 10 }, void 0)] }, void 0)), priceAtBottom ? (jsxs(Fragment, { children: [customSizeRating ? (jsx(Rating, { size: customSizeRating, rating: rating.rating, reviews: rating.reviews, reviewsText: "", wrapWithParenthesis: true }, void 0)) : (jsx(RatingDisplay, {}, void 0)), hasSpacing && jsx(Spacing, { size: space }, void 0), jsx(MarginTopContainer, { children: priceLoading ? jsx(SkeletonBox, { height: "20px", width: "140px" }, void 0) : jsx(PriceLabelDisplay, {}, void 0) }, void 0)] }, void 0)) : (jsxs(Fragment, { children: [priceLoading ? (jsx(SkeletonBox, { height: "20px", width: "140px" }, void 0)) : (jsxs(Fragment, { children: [jsx(PriceLabelDisplay, {}, void 0), jsx(BuyNowPayLater, { displayBNPL: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.displayBNPL, installments: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.installments) || 0, installmentPrice: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.installmentPrice) || '', iconFolder: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconFolder, iconName: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconName) || '', showLogo: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.showLogo, iconColor: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconColor, fontSize: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.fontSize }, void 0)] }, void 0)), showClubPriceLabel && jsx(ClubPriceLabel, { clubPrice: clubPrice }, void 0), hasSpacing && jsx(Spacing, { size: space }, void 0), jsx(RatingDisplay, {}, void 0)] }, void 0))] }), void 0), colorPicker.display && colorPicker.position === 'bottom' && (jsxs(Fragment, { children: [hasSpacing && jsx(Spacing, { size: space }, void 0), colorPicker.component] }, void 0))] }), void 0));
|
|
7485
7485
|
};
|
|
7486
|
-
var templateObject_1$
|
|
7486
|
+
var templateObject_1$1t, templateObject_2$17, templateObject_3$W, templateObject_4$K, templateObject_5$B, templateObject_6$x, templateObject_7$r, templateObject_8$k;
|
|
7487
7487
|
|
|
7488
|
-
var Container$_ = newStyled.div(templateObject_1$
|
|
7488
|
+
var Container$_ = newStyled.div(templateObject_1$1s || (templateObject_1$1s = __makeTemplateObject(["\n display: flex;\n row-gap: 1.875rem;\n column-gap: 1.875rem;\n flex-wrap: wrap;\n"], ["\n display: flex;\n row-gap: 1.875rem;\n column-gap: 1.875rem;\n flex-wrap: wrap;\n"])));
|
|
7489
7489
|
function withProductGrid(ProductItemComponent, data) {
|
|
7490
7490
|
function WithProductGrid(props) {
|
|
7491
7491
|
return (jsx$1(Container$_, __assign$1({ "data-testid": "product-grid-container" }, { children: data.map(function (product, index) { return (jsx$1(ProductItemComponent, __assign$1({}, product, props), index)); }) }), void 0));
|
|
@@ -7495,7 +7495,7 @@ function withProductGrid(ProductItemComponent, data) {
|
|
|
7495
7495
|
WithProductGrid.displayName = "withGrid(".concat(wrappedComponentName, ")");
|
|
7496
7496
|
return WithProductGrid;
|
|
7497
7497
|
}
|
|
7498
|
-
var templateObject_1$
|
|
7498
|
+
var templateObject_1$1s;
|
|
7499
7499
|
|
|
7500
7500
|
var Collection = {
|
|
7501
7501
|
ProductItemMobile: ProductItemMobile,
|
|
@@ -7503,7 +7503,7 @@ var Collection = {
|
|
|
7503
7503
|
ProductItemTK: ProductItemTK,
|
|
7504
7504
|
};
|
|
7505
7505
|
|
|
7506
|
-
var CustomRadioGroup = newStyled(lt)(templateObject_1$
|
|
7506
|
+
var CustomRadioGroup = newStyled(lt)(templateObject_1$1r || (templateObject_1$1r = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
7507
7507
|
newStyled(lt.Label)(templateObject_2$16 || (templateObject_2$16 = __makeTemplateObject(["\n font-size: 0.88rem;\n"], ["\n font-size: 0.88rem;\n"])));
|
|
7508
7508
|
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$V || (templateObject_3$V = __makeTemplateObject(["\n margin-right: 8px;\n\n svg {\n cursor: pointer;\n }\n"], ["\n margin-right: 8px;\n\n svg {\n cursor: pointer;\n }\n"])));
|
|
7509
7509
|
var Span = newStyled.span(templateObject_4$J || (templateObject_4$J = __makeTemplateObject(["\n font-weight: 600;\n"], ["\n font-weight: 600;\n"])));
|
|
@@ -7525,7 +7525,7 @@ var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
|
|
|
7525
7525
|
Option: Option,
|
|
7526
7526
|
OptionsContainer: OptionsContainer,
|
|
7527
7527
|
});
|
|
7528
|
-
var templateObject_1$
|
|
7528
|
+
var templateObject_1$1r, templateObject_2$16, templateObject_3$V, templateObject_4$J, templateObject_5$A;
|
|
7529
7529
|
|
|
7530
7530
|
var OneColorSelector = function (_a) {
|
|
7531
7531
|
var color = _a.color, selected = _a.selected, testId = _a.testId, noStock = _a.noStock, _b = _a.showCross, showCross = _b === void 0 ? false : _b;
|
|
@@ -7566,7 +7566,7 @@ var OutOfStock = function (_a) {
|
|
|
7566
7566
|
return (jsxs$1("svg", __assign$1({ width: "32", height: "33", viewBox: "0 0 32 33", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsx$1("title", { children: title }, void 0), jsx$1("mask", __assign$1({ id: "path-1-inside-1", fill: "white" }, { children: jsx$1("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.89435 9.60565C8.40619 10.0938 8.40619 10.8853 8.89435 11.3734L14.0209 16.5L8.89433 21.6266C8.40617 22.1147 8.40617 22.9062 8.89433 23.3943C9.38248 23.8825 10.1739 23.8825 10.6621 23.3943L15.7887 18.2677L21.2687 23.7478C21.7569 24.2359 22.5483 24.2359 23.0365 23.7478C23.5246 23.2596 23.5246 22.4682 23.0365 21.98L17.5564 16.5L23.0365 11.02C23.5246 10.5318 23.5246 9.74035 23.0365 9.25219C22.5483 8.76404 21.7568 8.76404 21.2687 9.25219L15.7887 14.7322L10.6621 9.60565C10.174 9.1175 9.3825 9.1175 8.89435 9.60565Z" }, void 0) }), void 0), jsx$1("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.89435 9.60565C8.40619 10.0938 8.40619 10.8853 8.89435 11.3734L14.0209 16.5L8.89433 21.6266C8.40617 22.1147 8.40617 22.9062 8.89433 23.3943C9.38248 23.8825 10.1739 23.8825 10.6621 23.3943L15.7887 18.2677L21.2687 23.7478C21.7569 24.2359 22.5483 24.2359 23.0365 23.7478C23.5246 23.2596 23.5246 22.4682 23.0365 21.98L17.5564 16.5L23.0365 11.02C23.5246 10.5318 23.5246 9.74035 23.0365 9.25219C22.5483 8.76404 21.7568 8.76404 21.2687 9.25219L15.7887 14.7322L10.6621 9.60565C10.174 9.1175 9.3825 9.1175 8.89435 9.60565Z", fill: theme.colors.shades['300'].color }, void 0), jsx$1("path", { d: "M14.0209 16.5L14.5866 17.0657L15.1523 16.5L14.5866 15.9343L14.0209 16.5ZM8.89433 21.6266L9.46001 22.1922L8.89433 21.6266ZM10.6621 23.3943L11.2278 23.96L10.6621 23.3943ZM15.7887 18.2677L16.3544 17.7021L15.7887 17.1364L15.223 17.7021L15.7887 18.2677ZM17.5564 16.5L16.9908 15.9343L16.4251 16.5L16.9908 17.0657L17.5564 16.5ZM23.0365 11.02L23.6021 11.5856L23.0365 11.02ZM21.2687 9.25219L21.8344 9.81788L21.2687 9.25219ZM15.7887 14.7322L15.223 15.2979L15.7887 15.8636L16.3544 15.2979L15.7887 14.7322ZM9.46003 10.8077C9.2843 10.632 9.2843 10.3471 9.46003 10.1713L8.32866 9.03997C7.52809 9.84054 7.52809 11.1385 8.32866 11.9391L9.46003 10.8077ZM14.5866 15.9343L9.46003 10.8077L8.32866 11.9391L13.4552 17.0657L14.5866 15.9343ZM9.46001 22.1922L14.5866 17.0657L13.4552 15.9343L8.32864 21.0609L9.46001 22.1922ZM9.46001 22.8286C9.28428 22.6529 9.28428 22.368 9.46001 22.1922L8.32864 21.0609C7.52807 21.8614 7.52807 23.1594 8.32864 23.96L9.46001 22.8286ZM10.0964 22.8286C9.92067 23.0044 9.63575 23.0044 9.46001 22.8286L8.32864 23.96C9.12922 24.7606 10.4272 24.7606 11.2278 23.96L10.0964 22.8286ZM15.223 17.7021L10.0964 22.8286L11.2278 23.96L16.3544 18.8334L15.223 17.7021ZM21.8344 23.1821L16.3544 17.7021L15.223 18.8334L20.703 24.3135L21.8344 23.1821ZM22.4708 23.1821C22.2951 23.3578 22.0101 23.3578 21.8344 23.1821L20.703 24.3135C21.5036 25.114 22.8016 25.114 23.6022 24.3135L22.4708 23.1821ZM22.4708 22.5457C22.6465 22.7214 22.6465 23.0064 22.4708 23.1821L23.6022 24.3135C24.4027 23.5129 24.4027 22.2149 23.6022 21.4143L22.4708 22.5457ZM16.9908 17.0657L22.4708 22.5457L23.6022 21.4143L18.1221 15.9343L16.9908 17.0657ZM22.4708 10.4543L16.9908 15.9343L18.1221 17.0657L23.6021 11.5856L22.4708 10.4543ZM22.4708 9.81788C22.6465 9.99361 22.6465 10.2785 22.4708 10.4543L23.6021 11.5856C24.4027 10.7851 24.4027 9.48708 23.6021 8.68651L22.4708 9.81788ZM21.8344 9.81788C22.0101 9.64214 22.295 9.64214 22.4708 9.81788L23.6021 8.68651C22.8016 7.88593 21.5036 7.88593 20.703 8.68651L21.8344 9.81788ZM16.3544 15.2979L21.8344 9.81788L20.703 8.68651L15.223 14.1665L16.3544 15.2979ZM10.0964 10.1713L15.223 15.2979L16.3544 14.1665L11.2278 9.03997L10.0964 10.1713ZM9.46003 10.1713C9.63577 9.9956 9.92069 9.9956 10.0964 10.1713L11.2278 9.03997C10.4272 8.23939 9.12924 8.23939 8.32866 9.03997L9.46003 10.1713Z", fill: "white", mask: "url(#path-1-inside-1)" }, void 0), jsx$1("circle", { cx: "16", cy: "16.5", r: "12", stroke: theme.colors.shades['300'].color, strokeWidth: "0.5" }, void 0)] }), void 0));
|
|
7567
7567
|
};
|
|
7568
7568
|
|
|
7569
|
-
var Container$Z = newStyled.div(templateObject_1$
|
|
7569
|
+
var Container$Z = newStyled.div(templateObject_1$1q || (templateObject_1$1q = __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) {
|
|
7570
7570
|
var borderColor = _a.borderColor;
|
|
7571
7571
|
return borderColor;
|
|
7572
7572
|
}, function (_a) {
|
|
@@ -7580,7 +7580,7 @@ var PatternSelector = function (_a) {
|
|
|
7580
7580
|
var outerBorder = selected ? theme.colors.shades['550'].color : 'transparent';
|
|
7581
7581
|
return (jsx$1(Container$Z, __assign$1({ "data-testid": testId, borderColor: outerBorder, noStock: noStock }, { children: jsx$1(Image$2, { src: url, alt: "pattern" }, void 0) }), void 0));
|
|
7582
7582
|
};
|
|
7583
|
-
var templateObject_1$
|
|
7583
|
+
var templateObject_1$1q, templateObject_2$15;
|
|
7584
7584
|
|
|
7585
7585
|
var renderOptions$1 = function (options, showCross) {
|
|
7586
7586
|
if (showCross === void 0) { showCross = false; }
|
|
@@ -7608,10 +7608,10 @@ var ColorPickerWithTooltip = function (_a) {
|
|
|
7608
7608
|
var visibleOptions = options.slice(0, maxVisibleOptions);
|
|
7609
7609
|
var hiddenOptions = options.slice(maxVisibleOptions);
|
|
7610
7610
|
var showCloseIcon = (tooltipOptions !== null && tooltipOptions !== void 0 ? tooltipOptions : {}).showCloseIcon;
|
|
7611
|
-
var ColorPickerWrapper = newStyled(ColorRadioGroup$1)(templateObject_1$
|
|
7611
|
+
var ColorPickerWrapper = newStyled(ColorRadioGroup$1)(templateObject_1$1p || (templateObject_1$1p = __makeTemplateObject(["\n position: relative;\n max-width: 300px;\n\n .tooltip-container {\n position: absolute;\n transform: translateX(-30%);\n &::before,\n &::after {\n left: 80%;\n }\n }\n\n .arrow {\n width: 24px;\n height: 24px;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n margin-bottom: 10px;\n }\n\n .tooltip-content {\n display: flex;\n max-width: 300px;\n flex-wrap: wrap;\n }\n "], ["\n position: relative;\n max-width: 300px;\n\n .tooltip-container {\n position: absolute;\n transform: translateX(-30%);\n &::before,\n &::after {\n left: 80%;\n }\n }\n\n .arrow {\n width: 24px;\n height: 24px;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n margin-bottom: 10px;\n }\n\n .tooltip-content {\n display: flex;\n max-width: 300px;\n flex-wrap: wrap;\n }\n "])));
|
|
7612
7612
|
return (jsxs(ColorPickerWrapper, __assign$1({ className: className, value: selectedValue, onChange: onChange, css: { flexDirection: inline ? 'row' : 'column', alignItems: inline ? 'center' : 'start' } }, { children: [jsx(ColorRadioGroup$1.Label, { label: label, values: selectedValue && !inline ? selectedValue.label : undefined }, void 0), jsxs(ColorRadioGroup$1.OptionsContainer, __assign$1({ css: { marginTop: inline ? '0' : '0.63rem', marginLeft: inline ? '1.5rem' : '0' }, "data-testid": "radio-group-options-container" }, { children: [renderOptions$1(visibleOptions, showCross), !!hiddenOptions.length && (jsx("div", __assign$1({ style: { display: 'flex', alignItems: 'center', justifyContent: 'center' } }, { children: jsx(Tooltip, __assign$1({ showCloseIcon: showCloseIcon, position: 1, elementContent: jsx("div", __assign$1({ className: "tooltip-content" }, { children: renderOptions$1(hiddenOptions, showCross) }), void 0), withArrow: true }, { children: jsx("div", __assign$1({ className: "arrow", "data-testid": "tooltip-arrow" }, { children: jsx(Icon$1, { name: "arrows/chevron_down", width: 1, height: 1 }, void 0) }), void 0) }), void 0) }), void 0))] }), void 0)] }), void 0));
|
|
7613
7613
|
};
|
|
7614
|
-
var templateObject_1$
|
|
7614
|
+
var templateObject_1$1p;
|
|
7615
7615
|
|
|
7616
7616
|
var renderOptions = function (selectedColor, options) {
|
|
7617
7617
|
if (options == null || options.length === 0) {
|
|
@@ -7649,7 +7649,7 @@ var MultiColorPicker = function (_a) {
|
|
|
7649
7649
|
return (jsxs$1(ColorRadioGroup$1, __assign$1({ value: selectedColor, onChange: onChangeHandler }, { children: [jsx$1(ColorRadioGroup$1.Label, { label: label, values: valueLabels }, void 0), jsx$1(ColorRadioGroup$1.OptionsContainer, { children: renderOptions(selectedColor, options) }, void 0)] }), void 0));
|
|
7650
7650
|
};
|
|
7651
7651
|
|
|
7652
|
-
var Wrapper$5 = newStyled.div(templateObject_1$
|
|
7652
|
+
var Wrapper$5 = newStyled.div(templateObject_1$1o || (templateObject_1$1o = __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'); });
|
|
7653
7653
|
var Col$1 = newStyled.div(templateObject_2$14 || (templateObject_2$14 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
7654
7654
|
var Row$2 = newStyled.div(templateObject_3$U || (templateObject_3$U = __makeTemplateObject(["\n display: flex;\n align-items: center;\n width: 100%;\n margin-left: 10px;\n\n ", ";\n"], ["\n display: flex;\n align-items: center;\n width: 100%;\n margin-left: 10px;\n\n ", ";\n"])), function (props) {
|
|
7655
7655
|
return props.rightToLeft &&
|
|
@@ -7663,7 +7663,7 @@ var CrossSellCheckbox = function (_a) {
|
|
|
7663
7663
|
var theme = useTheme();
|
|
7664
7664
|
return (jsxs$1(Wrapper$5, __assign$1({ backgroundColor: theme.colors.shades['10'].color, rightToLeft: Boolean(rightToLeft) }, { children: [jsx$1(Checkbox, { text: "", id: "checkbox", onChange: onChange, size: ComponentSize.Small, variant: "secondary" }, void 0), jsxs$1(Row$2, __assign$1({ rightToLeft: Boolean(rightToLeft) }, { children: [jsx$1(Image$3, { src: imageURL, alt: "Cross sell image", borderRadius: "0.5rem" }, void 0), jsxs$1(Col$1, { children: [jsx$1(H5, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0), jsxs$1(H3, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: [description, jsxs$1(FreeShipping, __assign$1({ color: theme.colors.shades['700'].color }, { children: [' ', "+ ", freeShippingText] }), void 0)] }), void 0)] }, void 0)] }), void 0)] }), void 0));
|
|
7665
7665
|
};
|
|
7666
|
-
var templateObject_1$
|
|
7666
|
+
var templateObject_1$1o, templateObject_2$14, templateObject_3$U, templateObject_4$I, templateObject_5$z, templateObject_6$w;
|
|
7667
7667
|
|
|
7668
7668
|
var index$1 = /*#__PURE__*/Object.freeze({
|
|
7669
7669
|
__proto__: null,
|
|
@@ -7692,7 +7692,7 @@ var sizeMapper = (_a = {},
|
|
|
7692
7692
|
_a[ComponentSize.XSmall] = 'small',
|
|
7693
7693
|
_a[ComponentSize.XXSmall] = 'small',
|
|
7694
7694
|
_a);
|
|
7695
|
-
var StyledBaseButton = newStyled(BaseButton)(templateObject_1$
|
|
7695
|
+
var StyledBaseButton = newStyled(BaseButton)(templateObject_1$1n || (templateObject_1$1n = __makeTemplateObject(["\n width: ", ";\n font-size: ", ";\n padding: ", ";\n font-weight: ", ";\n border-radius: ", ";\n cursor: pointer;\n &:disabled {\n background-color: ", ";\n color: ", ";\n cursor: not-allowed;\n }\n svg {\n color: inherit;\n }\n"], ["\n width: ", ";\n font-size: ", ";\n padding: ", ";\n font-weight: ", ";\n border-radius: ", ";\n cursor: pointer;\n &:disabled {\n background-color: ", ";\n color: ", ";\n cursor: not-allowed;\n }\n svg {\n color: inherit;\n }\n"])), function (_a) {
|
|
7696
7696
|
var wide = _a.wide;
|
|
7697
7697
|
return (wide ? '100%' : 'fit-content');
|
|
7698
7698
|
}, function (_a) {
|
|
@@ -7718,7 +7718,7 @@ var StyledIcon = newStyled(Icon$1)(templateObject_2$13 || (templateObject_2$13 =
|
|
|
7718
7718
|
var marginLeft = _a.marginLeft, marginRight = _a.marginRight;
|
|
7719
7719
|
return "\n margin-left: ".concat(marginLeft !== null && marginLeft !== void 0 ? marginLeft : '10px', ";\n margin-right: ").concat(marginRight !== null && marginRight !== void 0 ? marginRight : '10px', ";\n ");
|
|
7720
7720
|
});
|
|
7721
|
-
var templateObject_1$
|
|
7721
|
+
var templateObject_1$1n, templateObject_2$13;
|
|
7722
7722
|
|
|
7723
7723
|
var BaseCTA = function (_a) {
|
|
7724
7724
|
var _b, _c, _d;
|
|
@@ -7809,7 +7809,7 @@ var ButtonSecondaryOutline = function (props) {
|
|
|
7809
7809
|
} }), void 0));
|
|
7810
7810
|
};
|
|
7811
7811
|
|
|
7812
|
-
var Container$Y = newStyled.div(templateObject_1$
|
|
7812
|
+
var Container$Y = newStyled.div(templateObject_1$1m || (templateObject_1$1m = __makeTemplateObject(["\n padding: 0.625rem 1.25rem;\n background-color: ", ";\n border-radius: 0.313rem;\n display: flex;\n margin-bottom: 1.25rem;\n"], ["\n padding: 0.625rem 1.25rem;\n background-color: ", ";\n border-radius: 0.313rem;\n display: flex;\n margin-bottom: 1.25rem;\n"])), function (props) { return props.color; });
|
|
7813
7813
|
var IconContainer$5 = newStyled.div(templateObject_2$12 || (templateObject_2$12 = __makeTemplateObject(["\n width: 1rem;\n height: 0.875rem;\n margin-right: 0.5rem;\n margin-top: 0.125rem;\n"], ["\n width: 1rem;\n height: 0.875rem;\n margin-right: 0.5rem;\n margin-top: 0.125rem;\n"])));
|
|
7814
7814
|
var Text$3 = newStyled.p(templateObject_3$T || (templateObject_3$T = __makeTemplateObject(["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 400;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 400;\n margin: 0;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
7815
7815
|
var Details = newStyled.span(templateObject_4$H || (templateObject_4$H = __makeTemplateObject(["\n color: ", ";\n font-weight: 700;\n"], ["\n color: ", ";\n font-weight: 700;\n"])), function (props) { return props.color; });
|
|
@@ -7818,9 +7818,9 @@ var Note = function (_a) {
|
|
|
7818
7818
|
var theme = useTheme();
|
|
7819
7819
|
return (jsxs$1(Container$Y, __assign$1({ color: backgroundColor ? backgroundColor : theme.component.deliveryDetails.note.backgroundColor, "data-testid": "Container" }, { children: [jsx$1(IconContainer$5, { children: jsx$1(Icon.Actions.Warning, { fill: accentColor ? accentColor : theme.component.deliveryDetails.note.accentColor }, void 0) }, void 0), jsx$1("div", { children: jsxs$1(Text$3, __assign$1({ color: color ? color : theme.component.deliveryDetails.note.color }, { children: [importantNoteText && (jsxs$1(Details, __assign$1({ color: accentColor ? accentColor : theme.component.deliveryDetails.note.accentColor }, { children: [importantNoteText, ":"] }), void 0)), ' ', text] }), void 0) }, void 0)] }), void 0));
|
|
7820
7820
|
};
|
|
7821
|
-
var templateObject_1$
|
|
7821
|
+
var templateObject_1$1m, templateObject_2$12, templateObject_3$T, templateObject_4$H;
|
|
7822
7822
|
|
|
7823
|
-
var Title$6 = newStyled.h1(templateObject_1$
|
|
7823
|
+
var Title$6 = newStyled.h1(templateObject_1$1l || (templateObject_1$1l = __makeTemplateObject(["\n color: ", ";\n ", "\n margin: 0;\n text-align: center;\n"], ["\n color: ", ";\n ", "\n margin: 0;\n text-align: center;\n"])), function (props) { return props.color; }, function (_a) {
|
|
7824
7824
|
var theme = _a.theme;
|
|
7825
7825
|
return "\n font-size: ".concat(theme.component.deliveryDetails.title.fontSize, ";\n line-height: ").concat(theme.component.deliveryDetails.title.lineHeight, ";\n font-weight: ").concat(theme.component.deliveryDetails.title.fontWeight, ";\n ");
|
|
7826
7826
|
});
|
|
@@ -7863,9 +7863,9 @@ var DeliveryDetails = function (_a) {
|
|
|
7863
7863
|
var theme = useTheme();
|
|
7864
7864
|
return (jsxs$1("div", __assign$1({ "data-testid": "DeliveryDetails" }, { children: [jsx$1(Title$6, __assign$1({ color: theme.colors.shades[700].color }, { children: deliveryDetailsText }), void 0), jsx$1(Line, { backgroundColor: theme.colors.shades['200'].color }, void 0), note && jsx$1(Note, __assign$1({}, note), void 0), jsxs$1(Row$1, __assign$1({ "data-testid": "DD-row", theme: theme }, { children: [jsxs$1(Col, __assign$1({ theme: theme }, { children: [jsxs$1(SectionTitle, __assign$1({ theme: theme }, { children: [jsx$1(IconContainer$4, __assign$1({ theme: theme }, { children: jsx$1(Icon.PDP.Clock, { width: 1.5 }, void 0) }), void 0), arrivingBy.title] }), void 0), jsx$1(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: arrivingBy.details }), void 0)] }), void 0), jsxs$1(Col, __assign$1({ theme: theme }, { children: [jsxs$1(SectionTitle, __assign$1({ theme: theme }, { children: [jsx$1(IconContainer$4, __assign$1({ theme: theme }, { children: jsx$1(Icon.Navigation.MapMarker, { width: 1.5 }, void 0) }), void 0), shippingTo.title] }), void 0), jsx$1(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: shippingTo.details }), void 0)] }), void 0), jsxs$1(Col, __assign$1({ theme: theme }, { children: [jsxs$1(SectionTitle, __assign$1({ theme: theme }, { children: [jsx$1(IconContainer$4, __assign$1({ theme: theme }, { children: jsx$1(Icon.Messaging.Messenger, { width: 1.5 }, void 0) }), void 0), instantOrderUpdate.title] }), void 0), jsx$1(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: instantOrderUpdate.details }), void 0), instantOrderUpdate.keepMeUpdated && (jsxs$1(KeepMeUpdated, __assign$1({ onClick: instantOrderUpdate.keepMeUpdated.onClick, borderColor: theme.colors.shades['150'].color }, { children: [jsx$1(Icon.Messaging.Messenger, { width: 1, height: 1, fill: "#0078FF" }, void 0), instantOrderUpdate.keepMeUpdated.title] }), void 0))] }), void 0)] }), void 0)] }), void 0));
|
|
7865
7865
|
};
|
|
7866
|
-
var templateObject_1$
|
|
7866
|
+
var templateObject_1$1l, templateObject_2$11, templateObject_3$S, templateObject_4$G, templateObject_5$y, templateObject_6$v, templateObject_7$q, templateObject_8$j;
|
|
7867
7867
|
|
|
7868
|
-
var Backdrop = newStyled.div(templateObject_1$
|
|
7868
|
+
var Backdrop = newStyled.div(templateObject_1$1k || (templateObject_1$1k = __makeTemplateObject(["\n position: fixed;\n z-index: 2;\n left: 0;\n top: ", ";\n width: 100%;\n height: 100%;\n overflow: auto;\n transition: background-color 0.3s ease-out;\n\n ", "\n"], ["\n position: fixed;\n z-index: 2;\n left: 0;\n top: ", ";\n width: 100%;\n height: 100%;\n overflow: auto;\n transition: background-color 0.3s ease-out;\n\n ", "\n"])), function (_a) {
|
|
7869
7869
|
var top = _a.top;
|
|
7870
7870
|
return top;
|
|
7871
7871
|
}, function (_a) {
|
|
@@ -7919,20 +7919,20 @@ var Drawer = function (_a) {
|
|
|
7919
7919
|
}, [isOpen, onClose, onOpen]);
|
|
7920
7920
|
return isMounted ? (jsxs$1("div", { children: [jsx$1(Backdrop, { backgroundColor: backdropColor, isOpen: isOpenState, top: top, "data-testid": "Drawer-Backdrop", onClick: onClickOutside && onClickOutside }, void 0), jsx$1(Sidebar, __assign$1({ position: position, width: width, height: height, top: top, backgroundColor: backgroundColor, isOpen: isOpenState, "data-testid": "Drawer-Sidebar" }, { children: children }), void 0)] }, void 0)) : null;
|
|
7921
7921
|
};
|
|
7922
|
-
var templateObject_1$
|
|
7922
|
+
var templateObject_1$1k, templateObject_2$10;
|
|
7923
7923
|
|
|
7924
7924
|
var TooltipArrow = function (_a) {
|
|
7925
7925
|
var height = _a.height, width = _a.width, fill = _a.fill, stroke = _a.stroke;
|
|
7926
7926
|
return (jsxs$1("svg", __assign$1({ width: "".concat(width, "rem"), height: "".concat(height, "rem"), viewBox: "0 0 20 12", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsx$1("title", { children: "Tooltip Arrow" }, void 0), jsx$1("path", { d: "M11.1523 8.83618L18.9325 -0.500001L1.06752 -0.500001L8.84767 8.83618C9.44736 9.55581 10.5526 9.55581 11.1523 8.83618Z", fill: fill, stroke: stroke }, void 0)] }), void 0));
|
|
7927
7927
|
};
|
|
7928
7928
|
|
|
7929
|
-
var List = newStyled.ul(templateObject_1$
|
|
7929
|
+
var List = newStyled.ul(templateObject_1$1j || (templateObject_1$1j = __makeTemplateObject(["\n display: flex;\n margin: 0;\n padding: 0;\n"], ["\n display: flex;\n margin: 0;\n padding: 0;\n"])));
|
|
7930
7930
|
var Item$2 = newStyled.li(templateObject_2$$ || (templateObject_2$$ = __makeTemplateObject(["\n width: 1.25rem;\n list-style: none;\n margin-right: 1.5rem;\n position: relative;\n line-height: 0;\n\n &:last-child {\n margin-right: 0;\n }\n\n &:hover {\n .dropdownWrapper {\n visibility: visible;\n }\n }\n"], ["\n width: 1.25rem;\n list-style: none;\n margin-right: 1.5rem;\n position: relative;\n line-height: 0;\n\n &:last-child {\n margin-right: 0;\n }\n\n &:hover {\n .dropdownWrapper {\n visibility: visible;\n }\n }\n"])));
|
|
7931
7931
|
var DropdownWrapper = newStyled.div(templateObject_3$R || (templateObject_3$R = __makeTemplateObject(["\n right: -0.938rem;\n min-width: 9.375rem;\n position: absolute;\n padding-top: 0.625rem;\n margin-top: -0.188rem;\n width: max-content;\n visibility: hidden;\n"], ["\n right: -0.938rem;\n min-width: 9.375rem;\n position: absolute;\n padding-top: 0.625rem;\n margin-top: -0.188rem;\n width: max-content;\n visibility: hidden;\n"])));
|
|
7932
7932
|
var ArrowContainer$1 = newStyled.div(templateObject_4$F || (templateObject_4$F = __makeTemplateObject(["\n transform: rotate(180deg);\n display: flex;\n justify-content: flex-start;\n margin-bottom: -0.063rem;\n padding-left: 0.938rem;\n"], ["\n transform: rotate(180deg);\n display: flex;\n justify-content: flex-start;\n margin-bottom: -0.063rem;\n padding-left: 0.938rem;\n"])));
|
|
7933
7933
|
var StyledDropdown = newStyled.ul(templateObject_5$x || (templateObject_5$x = __makeTemplateObject(["\n margin: 0;\n padding: 0;\n border: 0.063rem solid ", ";\n border-radius: 0.5rem;\n display: flex;\n flex-direction: column;\n background-color: #ffffff;\n"], ["\n margin: 0;\n padding: 0;\n border: 0.063rem solid ", ";\n border-radius: 0.5rem;\n display: flex;\n flex-direction: column;\n background-color: #ffffff;\n"])), function (props) { return props.borderColor; });
|
|
7934
7934
|
var DropdownItem = newStyled.li(templateObject_6$u || (templateObject_6$u = __makeTemplateObject(["\n list-style: none;\n padding: 0.813rem;\n border-bottom: 0.063rem solid ", ";\n font-size: 0.875rem;\n line-height: 1.125rem;\n font-weight: 400;\n color: ", ";\n cursor: pointer;\n user-select: none;\n\n &:hover {\n background-color: ", ";\n }\n\n &:last-child {\n border-bottom: none;\n border-radius: 0 0 0.5rem 0.5rem;\n }\n\n &:first-of-type {\n border-radius: 0.5rem 0.5rem 0 0;\n }\n\n &:only-child {\n border-radius: 0.5rem;\n }\n"], ["\n list-style: none;\n padding: 0.813rem;\n border-bottom: 0.063rem solid ", ";\n font-size: 0.875rem;\n line-height: 1.125rem;\n font-weight: 400;\n color: ", ";\n cursor: pointer;\n user-select: none;\n\n &:hover {\n background-color: ", ";\n }\n\n &:last-child {\n border-bottom: none;\n border-radius: 0 0 0.5rem 0.5rem;\n }\n\n &:first-of-type {\n border-radius: 0.5rem 0.5rem 0 0;\n }\n\n &:only-child {\n border-radius: 0.5rem;\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.color; }, function (props) { return props.hoverColor; });
|
|
7935
|
-
var templateObject_1$
|
|
7935
|
+
var templateObject_1$1j, templateObject_2$$, templateObject_3$R, templateObject_4$F, templateObject_5$x, templateObject_6$u;
|
|
7936
7936
|
|
|
7937
7937
|
var DropdownListIcons = function (_a) {
|
|
7938
7938
|
var items = _a.items;
|
|
@@ -7945,13 +7945,13 @@ var Dropdown = function (_a) {
|
|
|
7945
7945
|
return (jsxs$1(DropdownWrapper, __assign$1({ className: "dropdownWrapper", "data-testid": "Dropdown-wrapper" }, { children: [jsx$1(ArrowContainer$1, { children: jsx$1(TooltipArrow, { stroke: theme.colors.shades['200'].color, fill: "#fff", width: 1.25, height: 0.75 }, void 0) }, void 0), jsx$1(StyledDropdown, __assign$1({ borderColor: theme.colors.shades['200'].color }, { children: items.map(function (item, index) { return (jsx$1(DropdownItem, __assign$1({ onClick: item.callback, borderColor: theme.colors.shades['200'].color, color: theme.colors.shades['550'].color, hoverColor: theme.colors.shades['10'].color }, { children: item.description }), index)); }) }), void 0)] }), void 0));
|
|
7946
7946
|
};
|
|
7947
7947
|
|
|
7948
|
-
var DropdownContainer = newStyled.div(templateObject_1$
|
|
7948
|
+
var DropdownContainer = newStyled.div(templateObject_1$1i || (templateObject_1$1i = __makeTemplateObject(["\n position: relative;\n font-size: 14px;\n line-height: 18px;\n"], ["\n position: relative;\n font-size: 14px;\n line-height: 18px;\n"])));
|
|
7949
7949
|
var DropdownLabel = newStyled.div(templateObject_2$_ || (templateObject_2$_ = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n background: #fff;\n border: 1px solid #bbb;\n border-radius: 8px;\n padding: 8px 12px 8px 16px;\n cursor: pointer;\n gap: 16px;\n font-weight: 600;\n color: var(--colors-pallete-secondary-color);\n max-width: 337px;\n height: 36px;\n\n @media (max-width: 767px) {\n max-width: 100%;\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n background: #fff;\n border: 1px solid #bbb;\n border-radius: 8px;\n padding: 8px 12px 8px 16px;\n cursor: pointer;\n gap: 16px;\n font-weight: 600;\n color: var(--colors-pallete-secondary-color);\n max-width: 337px;\n height: 36px;\n\n @media (max-width: 767px) {\n max-width: 100%;\n }\n"])));
|
|
7950
7950
|
var SizeLabel = newStyled.span(templateObject_3$Q || (templateObject_3$Q = __makeTemplateObject(["\n margin-right: 8px;\n"], ["\n margin-right: 8px;\n"])));
|
|
7951
7951
|
var DetailLabel = newStyled.span(templateObject_4$E || (templateObject_4$E = __makeTemplateObject(["\n text-align: center;\n flex-grow: 1;\n font-weight: 400;\n color: var(--colors-shades-400-color);\n"], ["\n text-align: center;\n flex-grow: 1;\n font-weight: 400;\n color: var(--colors-shades-400-color);\n"])));
|
|
7952
7952
|
var DropdownOptions = newStyled.div(templateObject_5$w || (templateObject_5$w = __makeTemplateObject(["\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n z-index: 1;\n padding: 0;\n max-width: 337px;\n border: 1px solid var(--colors-pallete-secondary-color);\n border-radius: 8px;\n overflow: hidden;\n\n @media (max-width: 767px) {\n width: 100%;\n max-width: none;\n }\n"], ["\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n z-index: 1;\n padding: 0;\n max-width: 337px;\n border: 1px solid var(--colors-pallete-secondary-color);\n border-radius: 8px;\n overflow: hidden;\n\n @media (max-width: 767px) {\n width: 100%;\n max-width: none;\n }\n"])));
|
|
7953
7953
|
var DropdownOption = newStyled.div(templateObject_6$t || (templateObject_6$t = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 12px 16px 10px;\n height: 40px;\n cursor: pointer;\n\n &:hover {\n background-color: rgb(247, 247, 247);\n border-radius: 8px;\n }\n\n &[aria-selected='true'] {\n background-color: rgb(247, 247, 247);\n border-radius: 8px;\n }\n\n & > span:first-of-type {\n margin-right: auto;\n font-weight: 600;\n }\n\n & > span:last-of-type {\n text-align: center;\n flex-grow: 1;\n font-weight: 400;\n color: var(--colors-shades-400-color);\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 12px 16px 10px;\n height: 40px;\n cursor: pointer;\n\n &:hover {\n background-color: rgb(247, 247, 247);\n border-radius: 8px;\n }\n\n &[aria-selected='true'] {\n background-color: rgb(247, 247, 247);\n border-radius: 8px;\n }\n\n & > span:first-of-type {\n margin-right: auto;\n font-weight: 600;\n }\n\n & > span:last-of-type {\n text-align: center;\n flex-grow: 1;\n font-weight: 400;\n color: var(--colors-shades-400-color);\n }\n"])));
|
|
7954
|
-
var templateObject_1$
|
|
7954
|
+
var templateObject_1$1i, templateObject_2$_, templateObject_3$Q, templateObject_4$E, templateObject_5$w, templateObject_6$t;
|
|
7955
7955
|
|
|
7956
7956
|
var SizeDropdown = function (_a) {
|
|
7957
7957
|
var options = _a.options, defaultLabel = _a.defaultLabel, onOptionSelect = _a.onOptionSelect;
|
|
@@ -7974,7 +7974,7 @@ var SizeDropdown = function (_a) {
|
|
|
7974
7974
|
return (jsxs$1(DropdownContainer, { children: [jsxs$1(DropdownLabel, __assign$1({ role: "button", tabIndex: 0, onClick: toggleDropdown }, { children: [jsx$1(SizeLabel, { children: selectedOption.size }, void 0), jsx$1(DetailLabel, { children: selectedOption.detail }, void 0), isOpen ? (jsx$1(Icon.Arrows.ChevronUp, { width: 0.563, height: 0.875, fill: "#292929" }, void 0)) : (jsx$1(Icon.Arrows.ChevronDown, { width: 0.563, height: 0.875, fill: "#292929" }, void 0))] }), void 0), isOpen && (jsx$1(DropdownOptions, { children: options.map(function (option) { return (jsxs$1(DropdownOption, __assign$1({ role: "option", "aria-selected": selectedOption.size === option.size, tabIndex: 0, onClick: function () { return handleOptionClick(option); }, onKeyDown: function (e) { return handleOptionKeyDown(e, option); } }, { children: [jsx$1("span", { children: option.size }, void 0), jsx$1("span", { children: option.detail }, void 0)] }), option.size)); }) }, void 0))] }, void 0));
|
|
7975
7975
|
};
|
|
7976
7976
|
|
|
7977
|
-
var DialogDropdownWrapper = newStyled.div(templateObject_1$
|
|
7977
|
+
var DialogDropdownWrapper = newStyled.div(templateObject_1$1h || (templateObject_1$1h = __makeTemplateObject(["\n position: relative;\n display: none;\n ::before,\n ::after {\n content: '';\n position: absolute;\n border: 11px solid transparent;\n margin-left: -10px;\n border-bottom-color: #e9e9e9;\n top: calc(", " - 5px);\n right: calc(", " + 21px);\n z-index: 50 !important;\n }\n ::after {\n border-bottom-color: #fff;\n top: calc(", " - 4px);\n right: calc(", " + 21px);\n z-index: 50 !important;\n }\n"], ["\n position: relative;\n display: none;\n ::before,\n ::after {\n content: '';\n position: absolute;\n border: 11px solid transparent;\n margin-left: -10px;\n border-bottom-color: #e9e9e9;\n top: calc(", " - 5px);\n right: calc(", " + 21px);\n z-index: 50 !important;\n }\n ::after {\n border-bottom-color: #fff;\n top: calc(", " - 4px);\n right: calc(", " + 21px);\n z-index: 50 !important;\n }\n"])), function (props) { return props.top; }, function (props) { return props.right; }, function (props) { return props.top; }, function (props) { return props.right; });
|
|
7978
7978
|
var DialogDropdownWrapper2 = newStyled.div(templateObject_2$Z || (templateObject_2$Z = __makeTemplateObject(["\n position: relative;\n display: none;\n ::before,\n ::after {\n content: '';\n position: absolute;\n border: 11px solid transparent;\n margin-left: -10px;\n border-bottom-color: #292929;\n top: calc(", " - 5px);\n right: calc(", " + 21px);\n z-index: 50 !important;\n }\n ::after {\n border-bottom-color: '#292929';\n top: calc(", " - 4px);\n right: calc(", " + 21px);\n z-index: 50 !important;\n }\n"], ["\n position: relative;\n display: none;\n ::before,\n ::after {\n content: '';\n position: absolute;\n border: 11px solid transparent;\n margin-left: -10px;\n border-bottom-color: #292929;\n top: calc(", " - 5px);\n right: calc(", " + 21px);\n z-index: 50 !important;\n }\n ::after {\n border-bottom-color: '#292929';\n top: calc(", " - 4px);\n right: calc(", " + 21px);\n z-index: 50 !important;\n }\n"])), function (props) { return props.top; }, function (props) { return props.right; }, function (props) { return props.top; }, function (props) { return props.right; });
|
|
7979
7979
|
var DialogDropdownListContainer = newStyled.ul(templateObject_3$P || (templateObject_3$P = __makeTemplateObject(["\n position: absolute;\n list-style: none;\n width: max-content;\n min-width: 100px;\n background: #fff;\n border: 1px solid #e9e9e9;\n border-radius: ", ";\n top: ", ";\n right: ", ";\n z-index: 50 !important;\n margin-bottom: 1rem;\n\n font-family: inherit;\n font-size: 100%;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n margin: 0;\n padding: 0;\n vertical-align: inherit;\n overflow: hidden;\n"], ["\n position: absolute;\n list-style: none;\n width: max-content;\n min-width: 100px;\n background: #fff;\n border: 1px solid #e9e9e9;\n border-radius: ", ";\n top: ", ";\n right: ", ";\n z-index: 50 !important;\n margin-bottom: 1rem;\n\n font-family: inherit;\n font-size: 100%;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n margin: 0;\n padding: 0;\n vertical-align: inherit;\n overflow: hidden;\n"])), function (props) { return props.borderRadius; }, function (props) {
|
|
7980
7980
|
return props.containerPosTop ? "calc(".concat(props.containerPosTop, ")") : "calc(".concat(props.top, " + 15px)");
|
|
@@ -7991,7 +7991,7 @@ var DropdownDialog = function (_a) {
|
|
|
7991
7991
|
return (jsx$1(DialogDropdownListItem, { children: jsx$1(DialogDropdownLink, __assign$1({ href: value }, { children: label }), void 0) }, idx));
|
|
7992
7992
|
}) }), void 0) }), void 0));
|
|
7993
7993
|
};
|
|
7994
|
-
var templateObject_1$
|
|
7994
|
+
var templateObject_1$1h, templateObject_2$Z, templateObject_3$P, templateObject_4$D, templateObject_5$v;
|
|
7995
7995
|
|
|
7996
7996
|
function FilteringDropdown(_a) {
|
|
7997
7997
|
var options = _a.options, _b = _a.disabled, disabled = _b === void 0 ? false : _b, placeHolder = _a.placeHolder, _c = _a.wide, wide = _c === void 0 ? false : _c, _d = _a.sliceAfter, sliceAfter = _d === void 0 ? 100 : _d, _e = _a.filter, filter = _e === void 0 ? false : _e, onChange = _a.onChange;
|
|
@@ -8024,7 +8024,7 @@ function FilteringDropdown(_a) {
|
|
|
8024
8024
|
}) }, void 0)] }), void 0));
|
|
8025
8025
|
}
|
|
8026
8026
|
|
|
8027
|
-
var Title$5 = newStyled.div(templateObject_1$
|
|
8027
|
+
var Title$5 = newStyled.div(templateObject_1$1g || (templateObject_1$1g = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n border-bottom: 0.063rem solid ", ";\n user-select: none;\n cursor: pointer;\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n border-bottom: 0.063rem solid ", ";\n user-select: none;\n cursor: pointer;\n"])), function (props) { return props.borderColor; });
|
|
8028
8028
|
var P$3 = newStyled.p(templateObject_2$Y || (templateObject_2$Y = __makeTemplateObject(["\n font-size: 1rem;\n font-weight: 700;\n line-height: 1.5rem;\n color: ", ";\n margin: 0.75rem 0;\n"], ["\n font-size: 1rem;\n font-weight: 700;\n line-height: 1.5rem;\n color: ", ";\n margin: 0.75rem 0;\n"])), function (props) { return props.color; });
|
|
8029
8029
|
var ArrowContainer = newStyled.div(templateObject_3$O || (templateObject_3$O = __makeTemplateObject(["\n width: 1rem;\n height: 1rem;\n"], ["\n width: 1rem;\n height: 1rem;\n"])));
|
|
8030
8030
|
var Container$X = newStyled.div(templateObject_4$C || (templateObject_4$C = __makeTemplateObject(["\n @media (max-width: 768px) {\n display: ", ";\n }\n"], ["\n @media (max-width: 768px) {\n display: ", ";\n }\n"])), function (props) { return (props.showInMobile ? 'block' : 'none'); });
|
|
@@ -8034,9 +8034,9 @@ var Accordion = function (_a) {
|
|
|
8034
8034
|
var _d = React__default.useState(isOpenByDefault), isOpen = _d[0], setIsOpen = _d[1];
|
|
8035
8035
|
return (jsxs$1(Container$X, __assign$1({ "data-testid": "FiltersAccordion", showInMobile: showInMobile }, { children: [jsxs$1(Title$5, __assign$1({ onClick: function () { return setIsOpen(function (state) { return !state; }); }, borderColor: theme.colors.shades['100'].color, "data-testid": "accordion-title" }, { children: [jsx$1(P$3, __assign$1({ color: theme.colors.shades['550'].color }, { children: title }), void 0), jsx$1(ArrowContainer, { children: isOpen ? (jsx$1(Icon.Arrows.ChevronUp, { fill: theme.colors.shades['700'].color }, void 0)) : (jsx$1(Icon.Arrows.ChevronDown, { fill: theme.colors.shades['700'].color }, void 0)) }, void 0)] }), void 0), jsx$1("div", __assign$1({ style: { display: isOpen ? 'block' : 'none' }, "data-testid": "accordion-children-container" }, { children: children }), void 0)] }), void 0));
|
|
8036
8036
|
};
|
|
8037
|
-
var templateObject_1$
|
|
8037
|
+
var templateObject_1$1g, templateObject_2$Y, templateObject_3$O, templateObject_4$C;
|
|
8038
8038
|
|
|
8039
|
-
var SectionContent = newStyled.div(templateObject_1$
|
|
8039
|
+
var SectionContent = newStyled.div(templateObject_1$1f || (templateObject_1$1f = __makeTemplateObject(["\n display: grid;\n grid-template-columns: repeat(", ", 1fr);\n grid-gap: 10px;\n margin: 1.25rem 0;\n"], ["\n display: grid;\n grid-template-columns: repeat(", ", 1fr);\n grid-gap: 10px;\n margin: 1.25rem 0;\n"])), function (props) { return props.cols; });
|
|
8040
8040
|
var Header$3 = newStyled.div(templateObject_2$X || (templateObject_2$X = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 1.063rem;\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 1.063rem;\n"])));
|
|
8041
8041
|
var MobileHeader = newStyled.div(templateObject_3$N || (templateObject_3$N = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 2.25rem;\n margin-top: 1.063rem;\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 2.25rem;\n margin-top: 1.063rem;\n"])));
|
|
8042
8042
|
var MobileIconsContainer = newStyled.div(templateObject_4$B || (templateObject_4$B = __makeTemplateObject(["\n width: 1.5rem;\n height: 1.5rem;\n cursor: pointer;\n"], ["\n width: 1.5rem;\n height: 1.5rem;\n cursor: pointer;\n"])));
|
|
@@ -8046,7 +8046,7 @@ var OptionContainer = newStyled.div(templateObject_7$p || (templateObject_7$p =
|
|
|
8046
8046
|
var ClearAll = newStyled.span(templateObject_8$i || (templateObject_8$i = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n text-decoration: underline;\n cursor: pointer;\n"], ["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n text-decoration: underline;\n cursor: pointer;\n"])), function (props) { return props.color; });
|
|
8047
8047
|
var MobileFooter = newStyled.div(templateObject_9$b || (templateObject_9$b = __makeTemplateObject(["\n background-color: #fff;\n padding: 0.75rem 0.938rem;\n position: sticky;\n bottom: 0;\n z-index: 1;\n margin-top: 5.625rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n"], ["\n background-color: #fff;\n padding: 0.75rem 0.938rem;\n position: sticky;\n bottom: 0;\n z-index: 1;\n margin-top: 5.625rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n"])));
|
|
8048
8048
|
var MobileClearContainer = newStyled.div(templateObject_10$9 || (templateObject_10$9 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n cursor: pointer;\n\n span {\n margin-left: 0.5rem;\n user-select: none;\n }\n"], ["\n display: flex;\n align-items: center;\n cursor: pointer;\n\n span {\n margin-left: 0.5rem;\n user-select: none;\n }\n"])));
|
|
8049
|
-
var templateObject_1$
|
|
8049
|
+
var templateObject_1$1f, templateObject_2$X, templateObject_3$N, templateObject_4$B, templateObject_5$u, templateObject_6$s, templateObject_7$p, templateObject_8$i, templateObject_9$b, templateObject_10$9;
|
|
8050
8050
|
|
|
8051
8051
|
var getStylesBySize$9 = function (size, theme) {
|
|
8052
8052
|
switch (size) {
|
|
@@ -8111,7 +8111,7 @@ var SelectorSecondary = function (_a) {
|
|
|
8111
8111
|
} }), id: id }, void 0));
|
|
8112
8112
|
};
|
|
8113
8113
|
|
|
8114
|
-
var UL = newStyled.ul(templateObject_1$
|
|
8114
|
+
var UL = newStyled.ul(templateObject_1$1e || (templateObject_1$1e = __makeTemplateObject(["\n margin: 0;\n padding: 0;\n flex-wrap: wrap;\n display: flex;\n max-width: 100%;\n"], ["\n margin: 0;\n padding: 0;\n flex-wrap: wrap;\n display: flex;\n max-width: 100%;\n"])));
|
|
8115
8115
|
var LI = newStyled.li(templateObject_2$W || (templateObject_2$W = __makeTemplateObject(["\n list-style: none;\n background-color: ", ";\n padding: 0.375rem 0.625rem;\n border-radius: 0.5rem;\n font-size: 0.875rem;\n line-height: 1.125rem;\n color: ", ";\n font-weight: 400;\n margin-right: 0.5rem;\n margin-bottom: 0.5rem;\n display: flex;\n align-items: center;\n"], ["\n list-style: none;\n background-color: ", ";\n padding: 0.375rem 0.625rem;\n border-radius: 0.5rem;\n font-size: 0.875rem;\n line-height: 1.125rem;\n color: ", ";\n font-weight: 400;\n margin-right: 0.5rem;\n margin-bottom: 0.5rem;\n display: flex;\n align-items: center;\n"])), function (props) { return props.backgroundColor; }, function (props) { return props.color; });
|
|
8116
8116
|
var CloseIconContainer = newStyled.div(templateObject_3$M || (templateObject_3$M = __makeTemplateObject(["\n width: 0.656rem;\n height: 0.656rem;\n display: flex;\n align-items: center;\n margin-left: 0.5rem;\n cursor: pointer;\n"], ["\n width: 0.656rem;\n height: 0.656rem;\n display: flex;\n align-items: center;\n margin-left: 0.5rem;\n cursor: pointer;\n"])));
|
|
8117
8117
|
var Tags = function (_a) {
|
|
@@ -8121,7 +8121,7 @@ var Tags = function (_a) {
|
|
|
8121
8121
|
return (jsxs$1(LI, __assign$1({ color: theme.colors.shades['700'].color, backgroundColor: color }, { children: [item, jsx$1(CloseIconContainer, __assign$1({ "data-testid": "li-close-icon", onClick: function () { return onCloseClick(index); } }, { children: jsx$1(Icon.Actions.Close, { fill: theme.colors.shades['700'].color, width: "100%", height: "100%" }, void 0) }), void 0)] }), index));
|
|
8122
8122
|
}) }), void 0));
|
|
8123
8123
|
};
|
|
8124
|
-
var templateObject_1$
|
|
8124
|
+
var templateObject_1$1e, templateObject_2$W, templateObject_3$M;
|
|
8125
8125
|
|
|
8126
8126
|
var Filters = function (_a) {
|
|
8127
8127
|
var values = _a.values, onChange = _a.onChange, _b = _a.tagsColor, tagsColor = _b === void 0 ? '#fff6ef' : _b, filterByText = _a.filterByText, clearAllText = _a.clearAllText, isMobile = _a.isMobile, filtersSelectText = _a.filtersSelectText, _c = _a.showSelectedNumberInSection, showSelectedNumberInSection = _c === void 0 ? false : _c, applyText = _a.applyText, mobileApplyButtonClick = _a.mobileApplyButtonClick, mobileBackArrowClick = _a.mobileBackArrowClick, onResetValues = _a.onResetValues;
|
|
@@ -8257,7 +8257,7 @@ var FilterCheckboxColor = function (_a) {
|
|
|
8257
8257
|
return (jsx$1(Checkbox, { onChange: onChange, checked: checked, text: text, id: "filter[".concat(sectionIndex, ",").concat(itemIndex, "]"), size: ComponentSize.Medium, variant: "color", blockUncheck: blockUncheck, backgroundColor: color }, itemIndex));
|
|
8258
8258
|
};
|
|
8259
8259
|
|
|
8260
|
-
var Wrapper$4 = newStyled.div(templateObject_1$
|
|
8260
|
+
var Wrapper$4 = newStyled.div(templateObject_1$1d || (templateObject_1$1d = __makeTemplateObject(["\n padding: 12px 58px;\n display: flex;\n gap: 1.5em;\n @media (max-width: 768px) {\n padding: 0.625rem 1.5rem;\n }\n"], ["\n padding: 12px 58px;\n display: flex;\n gap: 1.5em;\n @media (max-width: 768px) {\n padding: 0.625rem 1.5rem;\n }\n"])));
|
|
8261
8261
|
var Container$W = newStyled.div(templateObject_2$V || (templateObject_2$V = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n"], ["\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n"])));
|
|
8262
8262
|
var FitGuarantee = function (_a) {
|
|
8263
8263
|
var _b;
|
|
@@ -8276,9 +8276,9 @@ var FitGuarantee = function (_a) {
|
|
|
8276
8276
|
fontWeight: theme.component.text.fitGuarantee.titleFontWeight,
|
|
8277
8277
|
} }, { children: title }), void 0), jsx$1(Text$7, __assign$1({ variant: "body", weight: "regular", size: "small", style: { fontWeight: theme.component.text.fitGuarantee.fontWeight } }, { children: description }), void 0)] }), void 0)] }, void 0) }), void 0));
|
|
8278
8278
|
};
|
|
8279
|
-
var templateObject_1$
|
|
8279
|
+
var templateObject_1$1d, templateObject_2$V;
|
|
8280
8280
|
|
|
8281
|
-
var Container$V = newStyled.div(templateObject_1$
|
|
8281
|
+
var Container$V = newStyled.div(templateObject_1$1c || (templateObject_1$1c = __makeTemplateObject(["\n display: flex;\n align-items: center;\n font-size: 0.88rem;\n"], ["\n display: flex;\n align-items: center;\n font-size: 0.88rem;\n"])));
|
|
8282
8282
|
var P$2 = newStyled.p(templateObject_2$U || (templateObject_2$U = __makeTemplateObject(["\n margin: 0 0.25rem;\n font-weight: 700;\n color: ", ";\n"], ["\n margin: 0 0.25rem;\n font-weight: 700;\n color: ", ";\n"])), function (props) { return props.theme.colors.shades['550'].color; });
|
|
8283
8283
|
var textButtonStyles$1 = function (theme) { return ({
|
|
8284
8284
|
border: 'none',
|
|
@@ -8294,7 +8294,7 @@ var FitPredictor = function (_a) {
|
|
|
8294
8294
|
var theme = useTheme();
|
|
8295
8295
|
return (jsxs(Container$V, __assign$1({ theme: theme }, { children: [jsx(Container$V, { children: jsx(Icon.Other.FitPredictor, { width: 1.125, height: 1.125, fill: theme.colors.shades['550'].color }, void 0) }, void 0), jsx(P$2, __assign$1({ theme: theme }, { children: "FIT PREDICTOR" }), void 0), jsx(BaseButton, __assign$1({ css: textButtonStyles$1(theme), onClick: onClick }, { children: "Calculate your size" }), void 0)] }), void 0));
|
|
8296
8296
|
};
|
|
8297
|
-
var templateObject_1$
|
|
8297
|
+
var templateObject_1$1c, templateObject_2$U;
|
|
8298
8298
|
|
|
8299
8299
|
var Button$8 = newStyled.button(function () { return ({
|
|
8300
8300
|
background: 'transparent',
|
|
@@ -12538,14 +12538,14 @@ var Slider$1 = /*#__PURE__*/function (_React$Component) {
|
|
|
12538
12538
|
return Slider;
|
|
12539
12539
|
}(React__default.Component);
|
|
12540
12540
|
|
|
12541
|
-
var StyledSlider = newStyled(Slider$1)(templateObject_1$
|
|
12541
|
+
var StyledSlider = newStyled(Slider$1)(templateObject_1$1b || (templateObject_1$1b = __makeTemplateObject(["\n .slick-dots {\n position: static;\n display: flex !important;\n justify-content: center;\n column-gap: ", ";\n margin-top: ", ";\n }\n .slick-prev {\n left: ", ";\n }\n .slick-next {\n right: ", ";\n }\n .slick-prev,\n .slick-next {\n width: fit-content;\n height: fit-content;\n }\n .slick-prev:before,\n .slick-next:before {\n content: none;\n }\n .slick-dots li {\n margin: 0;\n width: auto;\n line-height: 0;\n height: auto;\n }\n"], ["\n .slick-dots {\n position: static;\n display: flex !important;\n justify-content: center;\n column-gap: ", ";\n margin-top: ", ";\n }\n .slick-prev {\n left: ", ";\n }\n .slick-next {\n right: ", ";\n }\n .slick-prev,\n .slick-next {\n width: fit-content;\n height: fit-content;\n }\n .slick-prev:before,\n .slick-next:before {\n content: none;\n }\n .slick-dots li {\n margin: 0;\n width: auto;\n line-height: 0;\n height: auto;\n }\n"])), function (props) { return "".concat(props.dotsSpacing, "rem"); }, function (props) { return "".concat(props.dotListMarginTop, "rem"); }, function (_a) {
|
|
12542
12542
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
12543
12543
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
12544
12544
|
}, function (_a) {
|
|
12545
12545
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
12546
12546
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
12547
12547
|
});
|
|
12548
|
-
var templateObject_1$
|
|
12548
|
+
var templateObject_1$1b;
|
|
12549
12549
|
|
|
12550
12550
|
var getStylesBySize$8 = function (size) {
|
|
12551
12551
|
// rem units
|
|
@@ -12604,7 +12604,7 @@ var SliderNavigation = function (_a) {
|
|
|
12604
12604
|
} }, { children: jsx(StyledSlider, __assign$1({}, settings, { arrowPadding: arrows && arrows.arrowPadding, dotListMarginTop: dotListMarginTop && dotListMarginTop, arrowPaddingOffset: arrows ? arrows.arrowWidth : 0, dotsSpacing: styles && styles.dotsSpacing }, { children: children }), void 0) }), void 0));
|
|
12605
12605
|
};
|
|
12606
12606
|
|
|
12607
|
-
var Image$1 = newStyled.img(templateObject_1$
|
|
12607
|
+
var Image$1 = newStyled.img(templateObject_1$1a || (templateObject_1$1a = __makeTemplateObject(["\n ", "\n\n width: ", ";\n height: ", ";\n object-fit: cover;\n box-sizing: border-box;\n cursor: pointer;\n border: ", ";\n"], ["\n ", "\n\n width: ", ";\n height: ", ";\n object-fit: cover;\n box-sizing: border-box;\n cursor: pointer;\n border: ", ";\n"])), function (_a) {
|
|
12608
12608
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
12609
12609
|
return borderRadiusVariant &&
|
|
12610
12610
|
"\n border-radius: 20px;\n ";
|
|
@@ -12622,7 +12622,7 @@ var Image$1 = newStyled.img(templateObject_1$19 || (templateObject_1$19 = __make
|
|
|
12622
12622
|
? "0.1rem solid ".concat(previewImgBorderColor ? previewImgBorderColor : theme.colors.shades['700'].color)
|
|
12623
12623
|
: 'inherit';
|
|
12624
12624
|
});
|
|
12625
|
-
var templateObject_1$
|
|
12625
|
+
var templateObject_1$1a;
|
|
12626
12626
|
|
|
12627
12627
|
var ImageSmallPreview = function (_a) {
|
|
12628
12628
|
var imageUrl = _a.imageUrl, alt = _a.alt, _b = _a.selected, selected = _b === void 0 ? false : _b, className = _a.className, borderRadiusVariant = _a.borderRadiusVariant, previewImgBorderColor = _a.previewImgBorderColor, isRatioSquare = _a.isRatioSquare, _c = _a.loading, loading = _c === void 0 ? 'eager' : _c, _d = _a.decoding, decoding = _d === void 0 ? 'auto' : _d;
|
|
@@ -12630,7 +12630,7 @@ var ImageSmallPreview = function (_a) {
|
|
|
12630
12630
|
return (jsx$1(Image$1, { className: className, src: imageUrl, alt: alt, selected: selected, theme: theme, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor, loading: loading, decoding: decoding, width: theme.component.gallery.thumbnail.desktop.width, height: theme.component.gallery.thumbnail.desktop.height, isRatioSquare: isRatioSquare }, void 0));
|
|
12631
12631
|
};
|
|
12632
12632
|
|
|
12633
|
-
var horizontalStyles = css(templateObject_1$
|
|
12633
|
+
var horizontalStyles = css(templateObject_1$19 || (templateObject_1$19 = __makeTemplateObject(["\n grid-row: 2;\n grid-auto-flow: column;\n grid-column-gap: 6px;\n margin-top: 20px;\n max-width: 360px;\n overflow: auto;\n"], ["\n grid-row: 2;\n grid-auto-flow: column;\n grid-column-gap: 6px;\n margin-top: 20px;\n max-width: 360px;\n overflow: auto;\n"])));
|
|
12634
12634
|
var verticalStyles = css(templateObject_2$T || (templateObject_2$T = __makeTemplateObject(["\n grid-row-gap: 20px;\n overflow: auto;\n grid-area: 1/1;\n"], ["\n grid-row-gap: 20px;\n overflow: auto;\n grid-area: 1/1;\n"])));
|
|
12635
12635
|
var Container$U = newStyled.div(templateObject_3$L || (templateObject_3$L = __makeTemplateObject(["\n display: grid;\n max-height: ", ";\n height: min-content;\n align-items: flex-start;\n ", "\n\n ", "\n"], ["\n display: grid;\n max-height: ", ";\n height: min-content;\n align-items: flex-start;\n ", "\n\n ", "\n"])), function (_a) {
|
|
12636
12636
|
var isRatioSquare = _a.isRatioSquare, theme = _a.theme;
|
|
@@ -12648,7 +12648,7 @@ var ArrowsContainer = newStyled.div(templateObject_5$t || (templateObject_5$t =
|
|
|
12648
12648
|
var ArrowBaseStyles = newStyled.div(templateObject_6$r || (templateObject_6$r = __makeTemplateObject(["\n -webkit-text-size-adjust: 100%;\n -webkit-font-smoothing: antialiased;\n color: #2a2a2a;\n border: 0;\n font-family: inherit;\n font-size: 100%;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n margin: 0;\n padding: 0;\n vertical-align: inherit;\n background-color: #ececea;\n box-sizing: border-box;\n cursor: pointer;\n float: left;\n height: 20px;\n position: relative;\n width: 50%;\n background-position: 50%;\n background-repeat: no-repeat;\n background-size: 11px;\n display: block;\n"], ["\n -webkit-text-size-adjust: 100%;\n -webkit-font-smoothing: antialiased;\n color: #2a2a2a;\n border: 0;\n font-family: inherit;\n font-size: 100%;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n margin: 0;\n padding: 0;\n vertical-align: inherit;\n background-color: #ececea;\n box-sizing: border-box;\n cursor: pointer;\n float: left;\n height: 20px;\n position: relative;\n width: 50%;\n background-position: 50%;\n background-repeat: no-repeat;\n background-size: 11px;\n display: block;\n"])));
|
|
12649
12649
|
var ArrowPrev = newStyled(ArrowBaseStyles)(templateObject_7$o || (templateObject_7$o = __makeTemplateObject(["\n background-image: url(https://truekind.com/cdn/shop/t/340/assets/up-arrow.svg?v=48788596234827096911690908673);\n border-radius: 0 0 0 4px;\n"], ["\n background-image: url(https://truekind.com/cdn/shop/t/340/assets/up-arrow.svg?v=48788596234827096911690908673);\n border-radius: 0 0 0 4px;\n"])));
|
|
12650
12650
|
var ArrowNext = newStyled(ArrowBaseStyles)(templateObject_8$h || (templateObject_8$h = __makeTemplateObject(["\n grid-column: 1;\n background-image: url(https://truekind.com/cdn/shop/t/340/assets/down-arrow.svg?v=48788596234827096911690908673);\n border-radius: 0 0 4px 0;\n border-left: 1px solid rgba(42, 42, 42, 0.1);\n"], ["\n grid-column: 1;\n background-image: url(https://truekind.com/cdn/shop/t/340/assets/down-arrow.svg?v=48788596234827096911690908673);\n border-radius: 0 0 4px 0;\n border-left: 1px solid rgba(42, 42, 42, 0.1);\n"])));
|
|
12651
|
-
var templateObject_1$
|
|
12651
|
+
var templateObject_1$19, templateObject_2$T, templateObject_3$L, templateObject_4$A, templateObject_5$t, templateObject_6$r, templateObject_7$o, templateObject_8$h;
|
|
12652
12652
|
|
|
12653
12653
|
var getLoadingProp = function (index, itemsOnViewport) {
|
|
12654
12654
|
var loading = 'eager';
|
|
@@ -14276,7 +14276,7 @@ InnerImageZoom.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
14276
14276
|
afterZoomOut: PropTypes.func
|
|
14277
14277
|
} : {};
|
|
14278
14278
|
|
|
14279
|
-
var Container$T = newStyled.div(templateObject_1$
|
|
14279
|
+
var Container$T = newStyled.div(templateObject_1$18 || (templateObject_1$18 = __makeTemplateObject(["\n ", "\n z-index: 0;\n position: relative;\n height: fit-content;\n /* &.styleforhorizontal {\n height: 30rem;\n } */\n display: block;\n overflow: hidden;\n white-space: nowrap;\n grid-area: 1/2;\n width: 100%;\n max-width: max-content;\n"], ["\n ", "\n z-index: 0;\n position: relative;\n height: fit-content;\n /* &.styleforhorizontal {\n height: 30rem;\n } */\n display: block;\n overflow: hidden;\n white-space: nowrap;\n grid-area: 1/2;\n width: 100%;\n max-width: max-content;\n"])), function (_a) {
|
|
14280
14280
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
14281
14281
|
return borderRadiusVariant && "border-radius: 40px;";
|
|
14282
14282
|
});
|
|
@@ -14302,7 +14302,7 @@ var InnerImageZoomStyled = newStyled(InnerImageZoom)(templateObject_8$g || (temp
|
|
|
14302
14302
|
var theme = _a.theme, isRatioSquare = _a.isRatioSquare;
|
|
14303
14303
|
return isRatioSquare ? '1 / 1' : theme.component.gallery.aspectRatio;
|
|
14304
14304
|
});
|
|
14305
|
-
var templateObject_1$
|
|
14305
|
+
var templateObject_1$18, templateObject_2$S, templateObject_3$K, templateObject_4$z, templateObject_5$s, templateObject_6$q, templateObject_7$n, templateObject_8$g;
|
|
14306
14306
|
|
|
14307
14307
|
var ImageProductSlide$1 = function (_a) {
|
|
14308
14308
|
var _b;
|
|
@@ -14317,8 +14317,8 @@ var ImageProductSlide$1 = function (_a) {
|
|
|
14317
14317
|
}, width: position == 'horizontal' ? 360 : 530, height: position == 'horizontal' ? 480 : 720, hideHint: true, isRatioSquare: isRatioSquare }, void 0)) : (jsx$1(ImageStyled, { width: position == 'horizontal' ? '360px' : '530px', height: "auto", src: source, alt: content.alt, objectFit: "cover", loading: "eager", decoding: "sync", isRatioSquare: isRatioSquare }, void 0)), jsx$1(TopTagContainer$7, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsx$1(BottomTagContainer$7, __assign$1({ isCTAHidden: hideCTA }, { children: bottomTag }), void 0), !!topRightTag && (jsx$1(TopRightTagWrapper, { children: jsx$1(TopRightTagContainer$2, { children: topRightTag }, void 0) }, void 0))] }, void 0)), isVideo && jsx$1(Video$1, { source: source, thumbnail: content === null || content === void 0 ? void 0 : content.thumbnailUrl }, void 0), ctaText && ctaAction && (jsx$1("div", __assign$1({ style: { display: hideCTA ? 'none' : 'block' } }, { children: jsx$1(ButtonSecondaryOutlineWrapper, { wide: true, onClick: ctaAction, text: ctaText }, void 0) }), void 0))] }), void 0));
|
|
14318
14318
|
};
|
|
14319
14319
|
|
|
14320
|
-
var Container$S = newStyled.div(templateObject_1$
|
|
14321
|
-
var templateObject_1$
|
|
14320
|
+
var Container$S = newStyled.div(templateObject_1$17 || (templateObject_1$17 = __makeTemplateObject(["\n display: grid;\n grid-template-columns: minmax(6rem, max-content) 1fr;\n grid-column-gap: 20px;\n max-height: 50rem;\n width: 100%;\n"], ["\n display: grid;\n grid-template-columns: minmax(6rem, max-content) 1fr;\n grid-column-gap: 20px;\n max-height: 50rem;\n width: 100%;\n"])));
|
|
14321
|
+
var templateObject_1$17;
|
|
14322
14322
|
|
|
14323
14323
|
var getInitialIndex = function (images, selectedValue) {
|
|
14324
14324
|
if (selectedValue) {
|
|
@@ -14347,16 +14347,16 @@ var ProductGallery = function (_a) {
|
|
|
14347
14347
|
return (jsxs$1(Container$S, { children: [jsx$1(ImagePreviewList, { images: images, selectedImage: selectedImage, dataTestId: previewListDataTestId, onClick: onContentChange, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor, hasOverflowArrows: hasOverflowArrows, isRatioSquare: isRatioSquare, itemsOnViewport: itemsOnViewport }, void 0), jsx$1(ImageProductSlide$1, { content: selectedImage, topTag: topTag, topRightTag: topRightTag, bottomTag: bottomTag, testId: productImageDataTestId, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant, ctaText: ctaText, ctaAction: ctaAction, hideCTA: hideCTA, withZoom: withZoom, isRatioSquare: isRatioSquare }, void 0)] }, void 0));
|
|
14348
14348
|
};
|
|
14349
14349
|
|
|
14350
|
-
var StyledButton$
|
|
14350
|
+
var StyledButton$3 = newStyled(BaseButton)(templateObject_1$16 || (templateObject_1$16 = __makeTemplateObject(["\n width: 12.5rem;\n height: 2.5rem;\n background-color: ", ";\n cursor: pointer;\n border: none;\n\n &:hover {\n background-color: ", ";\n }\n"], ["\n width: 12.5rem;\n height: 2.5rem;\n background-color: ", ";\n cursor: pointer;\n border: none;\n\n &:hover {\n background-color: ", ";\n }\n"])), function (props) { return props.backgroundColor; }, function (props) { return props.hoverBackgroundColor; });
|
|
14351
14351
|
var AmazonButton = function (_a) {
|
|
14352
14352
|
var onClick = _a.onClick;
|
|
14353
|
-
return (jsx$1(StyledButton$
|
|
14353
|
+
return (jsx$1(StyledButton$3, __assign$1({ backgroundColor: "#FED865", hoverBackgroundColor: "#F1CB58", onClick: onClick }, { children: jsx$1(Icon.Payment.Amazon, { width: 5.375, height: 1.25 }, void 0) }), void 0));
|
|
14354
14354
|
};
|
|
14355
14355
|
var PaypalButton = function (_a) {
|
|
14356
14356
|
var onClick = _a.onClick;
|
|
14357
|
-
return (jsx$1(StyledButton$
|
|
14357
|
+
return (jsx$1(StyledButton$3, __assign$1({ backgroundColor: "#ffc439", hoverBackgroundColor: "#F4BF41", onClick: onClick }, { children: jsx$1(Icon.Payment.Paypal, { width: 4.938, height: 1.25 }, void 0) }), void 0));
|
|
14358
14358
|
};
|
|
14359
|
-
var templateObject_1$
|
|
14359
|
+
var templateObject_1$16;
|
|
14360
14360
|
|
|
14361
14361
|
var Container$R = newStyled.div(function (props) { return ({
|
|
14362
14362
|
height: 'auto',
|
|
@@ -14411,7 +14411,7 @@ var IconsWithTitle = function (_a) {
|
|
|
14411
14411
|
return (jsx$1(Fragment$2, { children: jsxs$1(Container$R, __assign$1({ textPosition: iconTitlePosition }, { children: [withWrapper ? (jsx$1(IconWrapper, __assign$1({ backgroundColor: backgroundColor, style: iconStyles, iconSize: isMobile ? iconSizeMobile : iconSizeDesktop }, { children: jsx$1(IconComponent, { width: isMobile ? iconSizeMobile : iconSizeDesktop, height: isMobile ? iconSizeMobile : iconSizeDesktop, fill: iconColor }, void 0) }), void 0)) : (jsx$1(IconComponent, { width: isMobile ? iconSizeMobile : iconSizeDesktop, height: isMobile ? iconSizeMobile : iconSizeDesktop, fill: iconColor }, void 0)), jsx$1(Text$7, { variant: "heading6", weight: "demi", style: titleStyles ? titleStyles : defaultTitleStyle, dangerouslySetInnerHTML: isTitleInnerHtml ? { __html: iconTitle } : { __html: "<span>".concat(iconTitle, "</span>") } }, void 0)] }), void 0) }, void 0));
|
|
14412
14412
|
};
|
|
14413
14413
|
|
|
14414
|
-
var Container$Q = newStyled.div(templateObject_1$
|
|
14414
|
+
var Container$Q = newStyled.div(templateObject_1$15 || (templateObject_1$15 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n border-radius: 10px;\n max-width: ", ";\n width: 100%;\n height: 100%;\n flex-wrap: wrap;\n row-gap: 15px;\n"], ["\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n border-radius: 10px;\n max-width: ", ";\n width: 100%;\n height: 100%;\n flex-wrap: wrap;\n row-gap: 15px;\n"])), function (props) { return (props.isMobile ? '200px' : '207px'); });
|
|
14415
14415
|
var ImageContainer$4 = newStyled.div(templateObject_2$R || (templateObject_2$R = __makeTemplateObject(["\n display: flex;\n max-width: ", ";\n height: ", ";\n"], ["\n display: flex;\n max-width: ", ";\n height: ", ";\n"])), function (props) { return (props.isMobile ? '200px' : '207px'); }, function (props) { return (props.isMobile ? '200px' : '207px'); });
|
|
14416
14416
|
var StyledTitle = newStyled.div(templateObject_3$J || (templateObject_3$J = __makeTemplateObject(["\n display: flex;\n ", "\n"], ["\n display: flex;\n ", "\n"])), function (_a) {
|
|
14417
14417
|
var titlePosition = _a.titlePosition;
|
|
@@ -14423,9 +14423,9 @@ var ImageCardWithDescription = function (_a) {
|
|
|
14423
14423
|
var isMobile = useWindowDimensions().isMobile;
|
|
14424
14424
|
return (jsxs$1(Container$Q, __assign$1({ "data-testid": "Container", isMobile: isMobile }, { children: [jsx$1(ImageContainer$4, __assign$1({ "data-testid": "ImageContainer", isMobile: isMobile }, { children: jsx$1(Image$3, { src: image, borderRadius: "40px", alt: "before", height: "100%", width: "100%" }, void 0) }), void 0), jsx$1(StyledTitle, __assign$1({ titlePosition: titlePosition, "data-testid": "StyledTitle" }, { children: isMobile ? (jsx$1(Text$7, __assign$1({ variant: "link", weight: "demi" }, { children: title }), void 0)) : (jsx$1(Text$7, __assign$1({ variant: "heading6", weight: "demi" }, { children: title }), void 0)) }), void 0), jsx$1(Text$7, __assign$1({ variant: "link", weight: "regular" }, { children: description }), void 0)] }), void 0));
|
|
14425
14425
|
};
|
|
14426
|
-
var templateObject_1$
|
|
14426
|
+
var templateObject_1$15, templateObject_2$R, templateObject_3$J;
|
|
14427
14427
|
|
|
14428
|
-
var Label$4 = newStyled.span(templateObject_1$
|
|
14428
|
+
var Label$4 = newStyled.span(templateObject_1$14 || (templateObject_1$14 = __makeTemplateObject(["\n font-weight: 600;\n color: ", ";\n font-size: 1.125rem;\n line-height: 1.75rem;\n"], ["\n font-weight: 600;\n color: ", ";\n font-size: 1.125rem;\n line-height: 1.75rem;\n"])), function (_a) {
|
|
14429
14429
|
var color = _a.color;
|
|
14430
14430
|
return color;
|
|
14431
14431
|
});
|
|
@@ -14438,7 +14438,7 @@ var InputLabel = function (_a) {
|
|
|
14438
14438
|
var theme = useTheme();
|
|
14439
14439
|
return (jsxs$1(Label$4, __assign$1({ color: isDisabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, { children: [label, isRequired && jsx$1(MandatoryIcon, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: "*" }), void 0)] }), void 0));
|
|
14440
14440
|
};
|
|
14441
|
-
var templateObject_1$
|
|
14441
|
+
var templateObject_1$14, templateObject_2$Q;
|
|
14442
14442
|
|
|
14443
14443
|
var containerByStatus = function (theme, status) {
|
|
14444
14444
|
if (status === InputValidationType.Valid)
|
|
@@ -14447,7 +14447,7 @@ var containerByStatus = function (theme, status) {
|
|
|
14447
14447
|
return theme.colors.semantic.urgent.color;
|
|
14448
14448
|
return '';
|
|
14449
14449
|
};
|
|
14450
|
-
var Container$P = newStyled.div(templateObject_1$
|
|
14450
|
+
var Container$P = newStyled.div(templateObject_1$13 || (templateObject_1$13 = __makeTemplateObject(["\n position: relative;\n input {\n border-color: ", ";\n }\n"], ["\n position: relative;\n input {\n border-color: ", ";\n }\n"])), function (_a) {
|
|
14451
14451
|
var theme = _a.theme, status = _a.status, hasError = _a.hasError;
|
|
14452
14452
|
return hasError ? '' : containerByStatus(theme, status);
|
|
14453
14453
|
});
|
|
@@ -14525,7 +14525,7 @@ var AnimatedPlaceholder = newStyled.span(templateObject_5$r || (templateObject_5
|
|
|
14525
14525
|
return theme.component.input.lineHeight;
|
|
14526
14526
|
});
|
|
14527
14527
|
var ClearInput = newStyled.div(templateObject_6$p || (templateObject_6$p = __makeTemplateObject(["\n right: 0.75rem;\n top: 1rem;\n position: absolute;\n cursor: pointer;\n"], ["\n right: 0.75rem;\n top: 1rem;\n position: absolute;\n cursor: pointer;\n"])));
|
|
14528
|
-
var templateObject_1$
|
|
14528
|
+
var templateObject_1$13, templateObject_2$P, templateObject_3$I, templateObject_4$y, templateObject_5$r, templateObject_6$p;
|
|
14529
14529
|
|
|
14530
14530
|
var BaseInput = function (_a) {
|
|
14531
14531
|
var value = _a.value, _b = _a.onChange, onChange = _b === void 0 ? function () { } : _b, label = _a.label, children = _a.children, required = _a.required, onValidation = _a.onValidation, size = _a.size, placeholder = _a.placeholder, inlinePlaceholder = _a.inlinePlaceholder, hasError = _a.hasError, _c = _a.inputType, inputType = _c === void 0 ? 'text' : _c, hideClear = _a.hideClear, innerRef = _a.innerRef, requiredPlaceholder = _a.requiredPlaceholder, customErrorMessage = _a.customErrorMessage, rest = __rest(_a, ["value", "onChange", "label", "children", "required", "onValidation", "size", "placeholder", "inlinePlaceholder", "hasError", "inputType", "hideClear", "innerRef", "requiredPlaceholder", "customErrorMessage"]);
|
|
@@ -14570,7 +14570,7 @@ var Button$6 = function (_a) {
|
|
|
14570
14570
|
throw new Error("Invalid button variant ".concat(variant));
|
|
14571
14571
|
};
|
|
14572
14572
|
|
|
14573
|
-
var Container$O = newStyled.div(templateObject_1$
|
|
14573
|
+
var Container$O = newStyled.div(templateObject_1$12 || (templateObject_1$12 = __makeTemplateObject(["\n overflow: hidden;\n\n input {\n border-radius: ", ";\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n border-right: none;\n width: 100%;\n }\n"], ["\n overflow: hidden;\n\n input {\n border-radius: ", ";\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n border-right: none;\n width: 100%;\n }\n"])), function (_a) {
|
|
14574
14574
|
var theme = _a.theme;
|
|
14575
14575
|
return theme.component.inputCustom.input.borderRadius;
|
|
14576
14576
|
});
|
|
@@ -14591,9 +14591,9 @@ var Custom = function (_a) {
|
|
|
14591
14591
|
}); }, [variant, onClick, text, rest.disabled]);
|
|
14592
14592
|
return (jsx$1(Container$O, __assign$1({ theme: theme }, { children: jsx$1(BaseInput, __assign$1({}, rest, { children: jsx$1(ButtonContainer$1, __assign$1({ theme: theme, defaultRounded: defaultRounded }, { children: jsx$1(Button$6, __assign$1({}, props), void 0) }), void 0) }), void 0) }), void 0));
|
|
14593
14593
|
};
|
|
14594
|
-
var templateObject_1$
|
|
14594
|
+
var templateObject_1$12, templateObject_2$O;
|
|
14595
14595
|
|
|
14596
|
-
var SuccessContainer = newStyled.div(templateObject_1$
|
|
14596
|
+
var SuccessContainer = newStyled.div(templateObject_1$11 || (templateObject_1$11 = __makeTemplateObject(["\n height: ", ";\n display: flex;\n"], ["\n height: ", ";\n display: flex;\n"])), function (_a) {
|
|
14597
14597
|
var size = _a.size;
|
|
14598
14598
|
return (size === 'small' ? '36px' : '');
|
|
14599
14599
|
});
|
|
@@ -14603,9 +14603,9 @@ var Success = function (_a) {
|
|
|
14603
14603
|
var children = _a.children, successText = _a.successText, size = _a.size;
|
|
14604
14604
|
return (jsxs$1(SuccessContainer, __assign$1({ size: size }, { children: [jsxs$1(SuccessMessage, { children: [jsx$1(Icon.Actions.Check, { fill: "#5EAD63", width: 1.375, height: 1.063 }, void 0), jsx$1(SuccessText, { children: successText }, void 0)] }, void 0), children] }), void 0));
|
|
14605
14605
|
};
|
|
14606
|
-
var templateObject_1$
|
|
14606
|
+
var templateObject_1$11, templateObject_2$N, templateObject_3$H;
|
|
14607
14607
|
|
|
14608
|
-
var ButtonContainer = newStyled.div(templateObject_1
|
|
14608
|
+
var ButtonContainer = newStyled.div(templateObject_1$10 || (templateObject_1$10 = __makeTemplateObject(["\n margin-left: 0.625rem;\n\n button {\n width: 100%;\n height: 100%;\n background-color: ", ";\n }\n"], ["\n margin-left: 0.625rem;\n\n button {\n width: 100%;\n height: 100%;\n background-color: ", ";\n }\n"])), function (_a) {
|
|
14609
14609
|
var status = _a.status, type = _a.type, theme = _a.theme;
|
|
14610
14610
|
return status === InputValidationType.Empty &&
|
|
14611
14611
|
type === 'primary' &&
|
|
@@ -14622,16 +14622,16 @@ var BasePlusButton = function (_a) {
|
|
|
14622
14622
|
}
|
|
14623
14623
|
return (jsx$1(BaseInput, __assign$1({ onValidation: setStatus, onChange: onChangeInput }, rest, { children: jsx$1(ButtonContainer, __assign$1({ status: status, type: "primary", theme: theme }, { children: jsx$1(ButtonSecondary, { text: text, onClick: function () { return onClick(inputValue); }, disabled: rest.disabled || status === InputValidationType.Error }, void 0) }), void 0) }), void 0));
|
|
14624
14624
|
};
|
|
14625
|
-
var templateObject_1
|
|
14625
|
+
var templateObject_1$10;
|
|
14626
14626
|
|
|
14627
|
-
var Container$N = newStyled.div(templateObject_1
|
|
14627
|
+
var Container$N = newStyled.div(templateObject_1$$ || (templateObject_1$$ = __makeTemplateObject(["\n input {\n padding-right: 2.688rem;\n }\n"], ["\n input {\n padding-right: 2.688rem;\n }\n"])));
|
|
14628
14628
|
var IconContainer$3 = newStyled.div(templateObject_2$M || (templateObject_2$M = __makeTemplateObject(["\n position: absolute;\n right: 0.875rem;\n width: 1.125rem;\n height: 100%;\n display: flex;\n align-items: center;\n"], ["\n position: absolute;\n right: 0.875rem;\n width: 1.125rem;\n height: 100%;\n display: flex;\n align-items: center;\n"])));
|
|
14629
14629
|
var BasePlusIcon = function (_a) {
|
|
14630
14630
|
var Icon = _a.Icon, rest = __rest(_a, ["Icon"]);
|
|
14631
14631
|
var theme = useTheme();
|
|
14632
14632
|
return (jsx$1(Container$N, { children: jsx$1(BaseInput, __assign$1({}, rest, { children: jsx$1(IconContainer$3, { children: jsx$1(Icon, { testId: "IconWrapper", fill: theme.colors.shades['250'].color }, void 0) }, void 0) }), void 0) }, void 0));
|
|
14633
14633
|
};
|
|
14634
|
-
var templateObject_1
|
|
14634
|
+
var templateObject_1$$, templateObject_2$M;
|
|
14635
14635
|
|
|
14636
14636
|
var Input$3 = {
|
|
14637
14637
|
Simple: BaseInput,
|
|
@@ -14771,7 +14771,7 @@ var Portal = function (_a) {
|
|
|
14771
14771
|
var visibleStyle = function (_a) {
|
|
14772
14772
|
var opened = _a.opened;
|
|
14773
14773
|
return opened
|
|
14774
|
-
? css(templateObject_1$
|
|
14774
|
+
? css(templateObject_1$_ || (templateObject_1$_ = __makeTemplateObject(["\n opacity: 1;\n pointer-events: all;\n "], ["\n opacity: 1;\n pointer-events: all;\n "]))) : css(templateObject_2$L || (templateObject_2$L = __makeTemplateObject(["\n opacity: 0;\n pointer-events: none;\n "], ["\n opacity: 0;\n pointer-events: none;\n "])));
|
|
14775
14775
|
};
|
|
14776
14776
|
var transformStyle = function (_a) {
|
|
14777
14777
|
var opened = _a.opened, maxFullScreen = _a.maxFullScreen, initialTop = _a.initialTop;
|
|
@@ -14826,7 +14826,7 @@ var useModal = function (id) {
|
|
|
14826
14826
|
close: close,
|
|
14827
14827
|
}); }, [close, open, opened]);
|
|
14828
14828
|
};
|
|
14829
|
-
var templateObject_1$
|
|
14829
|
+
var templateObject_1$_, templateObject_2$L, templateObject_3$G, templateObject_4$x, templateObject_5$q, templateObject_6$o, templateObject_7$m;
|
|
14830
14830
|
|
|
14831
14831
|
var htmlReactParser = {exports: {}};
|
|
14832
14832
|
|
|
@@ -18607,7 +18607,7 @@ HTMLReactParser$1.htmlToDOM;
|
|
|
18607
18607
|
HTMLReactParser$1.attributesToProps;
|
|
18608
18608
|
HTMLReactParser$1.Element;
|
|
18609
18609
|
|
|
18610
|
-
var Bar$1 = newStyled.div(templateObject_1$
|
|
18610
|
+
var Bar$1 = newStyled.div(templateObject_1$Z || (templateObject_1$Z = __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) {
|
|
18611
18611
|
var height = _a.height;
|
|
18612
18612
|
return height || '0.5rem';
|
|
18613
18613
|
}, function (_a) {
|
|
@@ -18690,9 +18690,9 @@ var MotivatorProgressBar = function (_a) {
|
|
|
18690
18690
|
};
|
|
18691
18691
|
return (jsxs$1(Container$L, __assign$1({ backgroundColor: backgroundColor }, { children: [jsxs$1(BarContainer, __assign$1({ "data-testid": "MPBContainer" }, { children: [jsxs$1(Value, { children: [currencyCode, currentAmount] }, void 0), jsx$1(Background$1, __assign$1({ backgroundColor: unfilledColor || theme.colors.shades['100'].color, "data-testid": "MPBBackground" }, { children: jsx$1(Bar$1, { "data-testid": "MPBBar", backgroundColor: fillColor, percent: progress }, void 0) }), void 0), jsxs$1(Value, __assign$1({ isBold: true }, { children: [currencyCode, endingValue] }), void 0)] }), void 0), isRewardUnlocked ? (jsx$1(MessageContainer, { dangerouslySetInnerHTML: { __html: rewardUnlockedMessage } }, void 0)) : (getRemainingAmountMessage())] }), void 0));
|
|
18692
18692
|
};
|
|
18693
|
-
var templateObject_1$
|
|
18693
|
+
var templateObject_1$Z, templateObject_2$K;
|
|
18694
18694
|
|
|
18695
|
-
var Container$K = newStyled.div(templateObject_1$
|
|
18695
|
+
var Container$K = newStyled.div(templateObject_1$Y || (templateObject_1$Y = __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) {
|
|
18696
18696
|
var theme = _a.theme;
|
|
18697
18697
|
return theme.component.orderBar.backgroundColor;
|
|
18698
18698
|
});
|
|
@@ -18702,9 +18702,9 @@ var OrderBar = function (_a) {
|
|
|
18702
18702
|
var theme = useTheme();
|
|
18703
18703
|
return (jsxs$1(Container$K, __assign$1({ color: color }, { children: [jsx$1(Icon.Actions.Check, { width: 1.25, height: 0.875, fill: "#2F806A" }, void 0), jsx$1(H1, __assign$1({ color: theme.component.orderBar.fontColor }, { children: message }), void 0)] }), void 0));
|
|
18704
18704
|
};
|
|
18705
|
-
var templateObject_1$
|
|
18705
|
+
var templateObject_1$Y, templateObject_2$J;
|
|
18706
18706
|
|
|
18707
|
-
var Container$J = newStyled.div(templateObject_1$
|
|
18707
|
+
var Container$J = newStyled.div(templateObject_1$X || (templateObject_1$X = __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"])));
|
|
18708
18708
|
var Card$1 = newStyled.div(templateObject_2$I || (templateObject_2$I = __makeTemplateObject(["\n --background: var(--colors-background-color);\n\n flex: 1;\n position: relative;\n overflow: hidden;\n cursor: pointer;\n border: 2px solid var(--component-packSelector-borderColor);\n padding: 20px 7px 7px;\n text-align: center;\n background-color: var(--background);\n border-radius: var(--component-packSelector-borderRadius);\n\n &[aria-checked='true'] {\n --color: var(--component-packSelector-selectedColor);\n\n border-color: var(--color);\n\n & * {\n p {\n color: var(--color);\n }\n }\n }\n"], ["\n --background: var(--colors-background-color);\n\n flex: 1;\n position: relative;\n overflow: hidden;\n cursor: pointer;\n border: 2px solid var(--component-packSelector-borderColor);\n padding: 20px 7px 7px;\n text-align: center;\n background-color: var(--background);\n border-radius: var(--component-packSelector-borderRadius);\n\n &[aria-checked='true'] {\n --color: var(--component-packSelector-selectedColor);\n\n border-color: var(--color);\n\n & * {\n p {\n color: var(--color);\n }\n }\n }\n"])));
|
|
18709
18709
|
var Tag$1 = newStyled.div(templateObject_3$F || (templateObject_3$F = __makeTemplateObject(["\n position: absolute;\n width: 100%;\n left: 50%;\n top: 0;\n transform: translateX(-50%);\n background-color: var(--component-packSelector-tagColor);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 1px 0;\n\n [aria-checked='true'] & {\n background-color: var(--component-packSelector-selectedColor);\n\n & * {\n color: var(--component-packSelector-selectedContrast) !important;\n }\n }\n"], ["\n position: absolute;\n width: 100%;\n left: 50%;\n top: 0;\n transform: translateX(-50%);\n background-color: var(--component-packSelector-tagColor);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 1px 0;\n\n [aria-checked='true'] & {\n background-color: var(--component-packSelector-selectedColor);\n\n & * {\n color: var(--component-packSelector-selectedContrast) !important;\n }\n }\n"])));
|
|
18710
18710
|
var Label$3 = newStyled.div(templateObject_4$w || (templateObject_4$w = __makeTemplateObject(["\n position: relative;\n width: fit-content;\n margin: 0 auto;\n"], ["\n position: relative;\n width: fit-content;\n margin: 0 auto;\n"])));
|
|
@@ -18741,9 +18741,9 @@ var PackCard = function (_a) {
|
|
|
18741
18741
|
currency: currencyCode || 'USD',
|
|
18742
18742
|
}), ' ', "each"] }), void 0)] }), void 0));
|
|
18743
18743
|
};
|
|
18744
|
-
var templateObject_1$
|
|
18744
|
+
var templateObject_1$X, templateObject_2$I, templateObject_3$F, templateObject_4$w, templateObject_5$p, templateObject_6$n, templateObject_7$l, templateObject_8$f;
|
|
18745
18745
|
|
|
18746
|
-
var Container$I = newStyled.div(templateObject_1$
|
|
18746
|
+
var Container$I = newStyled.div(templateObject_1$W || (templateObject_1$W = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n user-select: none;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n user-select: none;\n"])));
|
|
18747
18747
|
var IconContainer$1 = newStyled.div(templateObject_2$H || (templateObject_2$H = __makeTemplateObject(["\n width: 0.531rem;\n height: 0.875rem;\n display: flex;\n align-items: center;\n cursor: pointer;\n"], ["\n width: 0.531rem;\n height: 0.875rem;\n display: flex;\n align-items: center;\n cursor: pointer;\n"])));
|
|
18748
18748
|
var PageNumbersContainer = newStyled.div(templateObject_3$E || (templateObject_3$E = __makeTemplateObject(["\n display: flex;\n ", ";\n"], ["\n display: flex;\n ", ";\n"])), mediaQueries({
|
|
18749
18749
|
margin: ['0 0.75rem', '0 1.25rem'],
|
|
@@ -18765,7 +18765,7 @@ var PageNumber = newStyled.span(templateObject_4$v || (templateObject_4$v = __ma
|
|
|
18765
18765
|
var background = _a.background;
|
|
18766
18766
|
return background || 'unset';
|
|
18767
18767
|
});
|
|
18768
|
-
var templateObject_1$
|
|
18768
|
+
var templateObject_1$W, templateObject_2$H, templateObject_3$E, templateObject_4$v;
|
|
18769
18769
|
|
|
18770
18770
|
var Pagination = function (_a) {
|
|
18771
18771
|
var from = _a.from, to = _a.to, _b = _a.currentPage, currentPage = _b === void 0 ? from : _b, onChange = _a.onChange, _c = _a.underlineActive, underlineActive = _c === void 0 ? true : _c, _d = _a.boldActive, boldActive = _d === void 0 ? true : _d, _e = _a.disabled, disabled = _e === void 0 ? false : _e, _f = _a.showReducedPages, showReducedPages = _f === void 0 ? false : _f;
|
|
@@ -18830,7 +18830,7 @@ var PaginatorBlog = function (_a) {
|
|
|
18830
18830
|
: theme.colors.shades['700'].color, borderColor: theme.colors.shades['700'].color, theme: theme, bold: false, underline: false }, { children: i + from }), i)); }) }), void 0), jsx$1(IconContainer$1, __assign$1({ onClick: function () { return handlePageChange(page + 1); }, "data-testid": "PaginatorBlogRightChevron" }, { children: jsx$1(Icon.Arrows.ChevronRight, { fill: page === to ? theme.colors.shades['white'].color : theme.colors.shades['700'].color }, void 0) }), void 0)] }), void 0));
|
|
18831
18831
|
};
|
|
18832
18832
|
|
|
18833
|
-
var Container$H = newStyled.div(templateObject_1$
|
|
18833
|
+
var Container$H = newStyled.div(templateObject_1$V || (templateObject_1$V = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n border: 0.063rem solid ", ";\n border-radius: 0.25rem;\n padding: 0.375rem;\n cursor: ", ";\n"], ["\n width: ", ";\n height: ", ";\n border: 0.063rem solid ", ";\n border-radius: 0.25rem;\n padding: 0.375rem;\n cursor: ", ";\n"])), function (_a) {
|
|
18834
18834
|
var width = _a.width;
|
|
18835
18835
|
return width;
|
|
18836
18836
|
}, function (_a) {
|
|
@@ -18848,9 +18848,9 @@ var PaymentMethod = function (_a) {
|
|
|
18848
18848
|
var theme = useTheme();
|
|
18849
18849
|
return (jsx$1(Container$H, __assign$1({ width: width, height: height, borderColor: theme.colors.shades['100'].color, isClickable: Boolean(onClick), onClick: onClick, "data-testid": "payment-method-container" }, { children: createElement(Icon) }), void 0));
|
|
18850
18850
|
};
|
|
18851
|
-
var templateObject_1$
|
|
18851
|
+
var templateObject_1$V;
|
|
18852
18852
|
|
|
18853
|
-
var Container$G = newStyled.div(templateObject_1$
|
|
18853
|
+
var Container$G = newStyled.div(templateObject_1$U || (templateObject_1$U = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n width: auto;\n padding: 10px 0;\n"], ["\n display: flex;\n flex-direction: row;\n width: auto;\n padding: 10px 0;\n"])));
|
|
18854
18854
|
var IMAGE_WIDTH = '63px';
|
|
18855
18855
|
var ImageContainer$3 = newStyled.div(templateObject_2$G || (templateObject_2$G = __makeTemplateObject(["\n position: relative;\n width: ", ";\n img {\n display: block;\n }\n"], ["\n position: relative;\n width: ", ";\n img {\n display: block;\n }\n"])), IMAGE_WIDTH);
|
|
18856
18856
|
var DescriptionContainer$1 = newStyled.div(templateObject_3$D || (templateObject_3$D = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n ", ";\n width: calc(100% - ", ");\n"], ["\n display: flex;\n flex-direction: column;\n ", ";\n width: calc(100% - ", ");\n"])), mediaQueries({
|
|
@@ -18897,7 +18897,7 @@ var SimpleOrderItem = function (_a) {
|
|
|
18897
18897
|
var theme = useTheme();
|
|
18898
18898
|
return (jsxs$1(Container$G, __assign$1({ className: className }, { children: [jsxs$1(ImageContainer$3, { children: [jsx$1(Image$3, { src: image.src, alt: image.alt, width: "4.063rem", height: "5.375rem", objectFit: "cover", objectPosition: "center" }, void 0), quantity ? (jsx$1(Quantity, __assign$1({ "data-testid": "order-item-quantity" }, { children: jsx$1(StyledSpan, { children: quantity }, void 0) }), void 0)) : null] }, void 0), jsxs$1(DescriptionContainer$1, __assign$1({ "data-testid": "order-item-description-container", theme: theme }, { children: [jsx$1(Title$4, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "product-title" }, { children: title }), void 0), subtitle && (jsx$1(Subtitle, __assign$1({ color: ((_c = (_b = theme.component.pricing) === null || _b === void 0 ? void 0 : _b.subtitle) === null || _c === void 0 ? void 0 : _c.color) || theme.colors.shades['700'].color, fontSize: ((_e = (_d = theme.component.pricing) === null || _d === void 0 ? void 0 : _d.subtitle) === null || _e === void 0 ? void 0 : _e.fontSize) || '0.75rem', lineHeight: ((_g = (_f = theme.component.pricing) === null || _f === void 0 ? void 0 : _f.subtitle) === null || _g === void 0 ? void 0 : _g.lineHeight) || '1rem', fontWeight: ((_j = (_h = theme.component.pricing) === null || _h === void 0 ? void 0 : _h.subtitle) === null || _j === void 0 ? void 0 : _j.fontWeight) || 'normal', "data-testid": "product-variant-title", margin: "0.5rem 0 0 0" }, { children: subtitle }), void 0)), midElement, isGift && jsx$1(Gift, { children: "Limited Time Only" }, void 0), jsxs$1(PriceContainer, __assign$1({ "data-testid": "order-item-price-container", withTag: !!tag, theme: theme }, { children: [tag && (jsx$1(OfferBanner, { discountAppliedText: tag === null || tag === void 0 ? void 0 : tag.text, backgroundColor: tag === null || tag === void 0 ? void 0 : tag.backgroundColor }, void 0)), isGift ? (jsx$1(Gift, { children: "GIFT" }, void 0)) : (jsx$1(PriceLabel$1, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, color: price.color || theme.colors.shades['700'].color, size: theme.component.pricing.priceLabel.price.size, finalPriceStyle: finalPriceStyle, originalPriceStyled: true }, void 0))] }), void 0)] }), void 0)] }), void 0));
|
|
18899
18899
|
};
|
|
18900
|
-
var templateObject_1$
|
|
18900
|
+
var templateObject_1$U, templateObject_2$G, templateObject_3$D, templateObject_4$u, templateObject_5$o, templateObject_6$m, templateObject_7$k;
|
|
18901
18901
|
|
|
18902
18902
|
var P$1 = newStyled.p(function (_a) {
|
|
18903
18903
|
var color = _a.color;
|
|
@@ -18911,7 +18911,7 @@ var P$1 = newStyled.p(function (_a) {
|
|
|
18911
18911
|
margin: '0.938rem 4.188rem',
|
|
18912
18912
|
});
|
|
18913
18913
|
});
|
|
18914
|
-
var Bar = newStyled.div(templateObject_1$
|
|
18914
|
+
var Bar = newStyled.div(templateObject_1$T || (templateObject_1$T = __makeTemplateObject(["\n @keyframes loading {\n 0% {\n transform: translateX(0);\n }\n to {\n transform: translateX(400%);\n }\n }\n\n height: ", ";\n background-color: ", ";\n width: ", ";\n border-radius: ", ";\n position: absolute;\n left: ", ";\n animation: ", ";\n"], ["\n @keyframes loading {\n 0% {\n transform: translateX(0);\n }\n to {\n transform: translateX(400%);\n }\n }\n\n height: ", ";\n background-color: ", ";\n width: ", ";\n border-radius: ", ";\n position: absolute;\n left: ", ";\n animation: ", ";\n"])), function (_a) {
|
|
18915
18915
|
var height = _a.height;
|
|
18916
18916
|
return height || '0.5rem';
|
|
18917
18917
|
}, function (_a) {
|
|
@@ -18956,9 +18956,9 @@ var ProgressBar = function (_a) {
|
|
|
18956
18956
|
var theme = useTheme();
|
|
18957
18957
|
return (jsxs$1(Container$F, __assign$1({ "data-testid": "PBContainer", widthAuto: widthAuto, description: description }, { children: [jsx$1(Background, __assign$1({ backgroundColor: backgroundColor || theme.colors.shades['100'].color, height: height, borderRadius: borderRadius, "data-testid": "PBBackground" }, { children: jsx$1(Bar, { "data-testid": "PBBar", backgroundColor: fillColor, percent: percent, height: height, borderRadius: borderRadius }, void 0) }), void 0), description && (jsx$1(P$1, __assign$1({ "data-testid": "paragraph", color: theme.colors.pallete.secondary.color }, { children: description }), void 0))] }), void 0));
|
|
18958
18958
|
};
|
|
18959
|
-
var templateObject_1$
|
|
18959
|
+
var templateObject_1$T;
|
|
18960
18960
|
|
|
18961
|
-
var Container$E = newStyled.div(templateObject_1$
|
|
18961
|
+
var Container$E = newStyled.div(templateObject_1$S || (templateObject_1$S = __makeTemplateObject(["\n padding: 0.625rem 0;\n border: 0.063rem solid ", ";\n border-radius: ", ";\n display: inline-flex;\n align-items: center;\n justify-content: space-around;\n width: 100%;\n max-width: 3.75rem;\n\n * {\n color: ", ";\n }\n"], ["\n padding: 0.625rem 0;\n border: 0.063rem solid ", ";\n border-radius: ", ";\n display: inline-flex;\n align-items: center;\n justify-content: space-around;\n width: 100%;\n max-width: 3.75rem;\n\n * {\n color: ", ";\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.borderRadius; }, function (props) { return props.color; });
|
|
18962
18962
|
var Item$1 = newStyled.span(templateObject_2$F || (templateObject_2$F = __makeTemplateObject(["\n font-size: 0.875rem;\n line-height: 1.125rem;\n margin: 0;\n padding: 0;\n"], ["\n font-size: 0.875rem;\n line-height: 1.125rem;\n margin: 0;\n padding: 0;\n"])));
|
|
18963
18963
|
var Number$1 = newStyled(Item$1)(templateObject_3$C || (templateObject_3$C = __makeTemplateObject(["\n width: 1.25rem;\n text-align: center;\n font-weight: 600;\n"], ["\n width: 1.25rem;\n text-align: center;\n font-weight: 600;\n"])));
|
|
18964
18964
|
var IncreaseDecrease = newStyled(Item$1)(templateObject_4$t || (templateObject_4$t = __makeTemplateObject(["\n cursor: pointer;\n user-select: none;\n padding: 0 0.313rem;\n font-weight: 400;\n color: ", ";\n"], ["\n cursor: pointer;\n user-select: none;\n padding: 0 0.313rem;\n font-weight: 400;\n color: ", ";\n"])), function (props) { return props.isMaxSelected && 'var(--colors-shades-175-color)'; });
|
|
@@ -18986,7 +18986,7 @@ var QuantityPicker = function (_a) {
|
|
|
18986
18986
|
}, [value, clamp]);
|
|
18987
18987
|
return (jsxs$1(Container$E, __assign$1({ borderColor: theme.colors.shades['200'].color, color: theme.colors.shades['700'].color, "data-testid": testId, borderRadius: theme.component.qtyPicker.borderRadius }, { children: [jsx$1(IncreaseDecrease, __assign$1({ "data-testid": "".concat(testId, "-minus"), onClick: function () { return setInternal(function (value) { return clamp(value - 1); }); } }, { children: "-" }), void 0), jsx$1(Number$1, { children: internal }, void 0), jsx$1(IncreaseDecrease, __assign$1({ isMaxSelected: value === maxValue, "data-testid": "".concat(testId, "-plus"), onClick: function () { return setInternal(function (value) { return clamp(value + 1); }); } }, { children: "+" }), void 0)] }), void 0));
|
|
18988
18988
|
};
|
|
18989
|
-
var templateObject_1$
|
|
18989
|
+
var templateObject_1$S, templateObject_2$F, templateObject_3$C, templateObject_4$t;
|
|
18990
18990
|
|
|
18991
18991
|
/* base styles & size variants */
|
|
18992
18992
|
var CustomRadioStyles$1 = {
|
|
@@ -19055,7 +19055,7 @@ var ContainerStyles$1 = {
|
|
|
19055
19055
|
},
|
|
19056
19056
|
};
|
|
19057
19057
|
|
|
19058
|
-
var Wrapper$3 = newStyled.div(templateObject_1$
|
|
19058
|
+
var Wrapper$3 = newStyled.div(templateObject_1$R || (templateObject_1$R = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
19059
19059
|
var Container$D = newStyled.div(__assign$1({}, ContainerStyles$1.baseStyles), function (props) { return [ContainerStyles$1[props.size](props.theme)]; });
|
|
19060
19060
|
var Input$2 = newStyled.input(templateObject_2$E || (templateObject_2$E = __makeTemplateObject(["\n position: absolute;\n opacity: 0;\n cursor: ", ";\n height: 100%;\n width: 100%;\n margin: 0;\n"], ["\n position: absolute;\n opacity: 0;\n cursor: ", ";\n height: 100%;\n width: 100%;\n margin: 0;\n"])), function (_a) {
|
|
19061
19061
|
var disabled = _a.disabled;
|
|
@@ -19075,7 +19075,7 @@ var RadioPrimary = function (_a) {
|
|
|
19075
19075
|
};
|
|
19076
19076
|
return (jsxs$1(Wrapper$3, { children: [jsxs$1(Container$D, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsx$1(Input$2, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled, style: style }, void 0), jsx$1(CustomRadio$1, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), jsx$1(StyledLabel$1, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0)] }, void 0));
|
|
19077
19077
|
};
|
|
19078
|
-
var templateObject_1$
|
|
19078
|
+
var templateObject_1$R, templateObject_2$E, templateObject_3$B;
|
|
19079
19079
|
|
|
19080
19080
|
var RadioGroupInput = function (_a) {
|
|
19081
19081
|
var style = _a.style, name = _a.name, _b = _a.options, options = _b === void 0 ? [] : _b, value = _a.value, onChange = _a.onChange, _c = _a.size, size = _c === void 0 ? ComponentSize.Medium : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d;
|
|
@@ -19154,7 +19154,7 @@ var ContainerStyles = {
|
|
|
19154
19154
|
},
|
|
19155
19155
|
};
|
|
19156
19156
|
|
|
19157
|
-
var Wrapper$2 = newStyled.div(templateObject_1$
|
|
19157
|
+
var Wrapper$2 = newStyled.div(templateObject_1$Q || (templateObject_1$Q = __makeTemplateObject(["\n display: flex;\n align-items: center;\n padding-bottom: 10px;\n"], ["\n display: flex;\n align-items: center;\n padding-bottom: 10px;\n"])));
|
|
19158
19158
|
var Container$C = newStyled.div(__assign$1({}, ContainerStyles.baseStyles), function (props) { return [ContainerStyles[props.size](props.theme)]; });
|
|
19159
19159
|
var Input$1 = newStyled.input(templateObject_2$D || (templateObject_2$D = __makeTemplateObject(["\n position: absolute;\n opacity: 0;\n cursor: ", ";\n height: 100%;\n width: 100%;\n margin: 0;\n"], ["\n position: absolute;\n opacity: 0;\n cursor: ", ";\n height: 100%;\n width: 100%;\n margin: 0;\n"])), function (_a) {
|
|
19160
19160
|
var disabled = _a.disabled;
|
|
@@ -19180,7 +19180,7 @@ var ClubRadioInput = function (_a) {
|
|
|
19180
19180
|
};
|
|
19181
19181
|
return (jsxs$1(Wrapper$2, { children: [jsxs$1(Container$C, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsx$1(Input$1, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled, style: style }, void 0), jsx$1(CustomRadio, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), jsx$1(StyledLabel, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled, "aria-checked": checked }, { children: label }), void 0)] }, void 0));
|
|
19182
19182
|
};
|
|
19183
|
-
var templateObject_1$
|
|
19183
|
+
var templateObject_1$Q, templateObject_2$D, templateObject_3$A;
|
|
19184
19184
|
|
|
19185
19185
|
var ClubRadioGroupInput = function (_a) {
|
|
19186
19186
|
var style = _a.style, name = _a.name, _b = _a.options, options = _b === void 0 ? [] : _b, value = _a.value, onChange = _a.onChange, _c = _a.size, size = _c === void 0 ? ComponentSize.Medium : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d;
|
|
@@ -19208,7 +19208,7 @@ function formatDate(date, format) {
|
|
|
19208
19208
|
}
|
|
19209
19209
|
}
|
|
19210
19210
|
|
|
19211
|
-
var Container$B = newStyled.div(templateObject_1$
|
|
19211
|
+
var Container$B = newStyled.div(templateObject_1$P || (templateObject_1$P = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n\n @media (min-width: 768px) {\n flex-direction: row;\n }\n"], ["\n display: flex;\n flex-direction: column;\n\n @media (min-width: 768px) {\n flex-direction: row;\n }\n"])));
|
|
19212
19212
|
var Content$1 = newStyled.div(templateObject_2$C || (templateObject_2$C = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n padding: 20px;\n padding-top: 0;\n"], ["\n display: flex;\n flex-direction: column;\n padding: 20px;\n padding-top: 0;\n"])));
|
|
19213
19213
|
var StarsContent = newStyled.div(templateObject_3$z || (templateObject_3$z = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n"], ["\n display: flex;\n justify-content: space-between;\n"])));
|
|
19214
19214
|
var ReviewContainer$1 = newStyled.div(templateObject_4$s || (templateObject_4$s = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n margin-top: 15px;\n margin-bottom: 5px;\n\n @media (min-width: 768px) {\n margin-top: 10px;\n }\n"], ["\n display: flex;\n flex-direction: column;\n margin-top: 15px;\n margin-bottom: 5px;\n\n @media (min-width: 768px) {\n margin-top: 10px;\n }\n"])));
|
|
@@ -19249,11 +19249,11 @@ var Review$1 = function (_a) {
|
|
|
19249
19249
|
return (jsx$1(Modal, __assign$1({ id: modalId, maxFullScreen: maxFullScreen, padding: "0" }, { children: jsxs$1(Container$B, { children: [jsx$1(CloseButton, __assign$1({ onClick: close }, { children: "X" }), void 0), jsx$1(ImageContainer$2, { children: image &&
|
|
19250
19250
|
(!isVideo ? (jsx$1(ImageWrapper$4, { src: image.src, alt: image.alt }, void 0)) : (jsx$1(VideoWrapper, { ref: refVideo, src: image.src, width: "100%", controls: true }, void 0))) }, void 0), jsxs$1(DescriptionContainer, { children: [opened && (jsxs$1(ReviewerName$1, { children: [reviewerName, verified && jsx$1(VerifiedText, { children: "Verified Buyer" }, void 0)] }, void 0)), jsxs$1(Content$1, __assign$1({ "data-testid": "review-detail-content" }, { children: [jsxs$1(StarsContent, { children: [jsx$1(StarList, { starsNumber: 5, rating: rating, fill: stars.color, size: stars.size }, void 0), jsx$1(DateText$1, { children: formatDate(date) }, void 0)] }, void 0), jsxs$1(ReviewContainer$1, { children: [jsx$1(ReviewTitle$1, { children: title }, void 0), jsx$1(ReviewDescription, { dangerouslySetInnerHTML: { __html: description } }, void 0)] }, void 0), jsxs$1(HelpfulContainer, { children: [jsxs$1(HelpfulAction, __assign$1({ "data-testid": "helpful-action", onClick: function () { return (helpfulAction ? helpfulAction(reviewId) : undefined); } }, { children: [jsx$1(Icon.Custom.ThumbsUp, { width: 1, height: 1, fill: "#000" }, void 0), jsx$1(HelpfulCount, { children: helpfulCount }, void 0)] }), void 0), jsxs$1(NotHelpfulAction, __assign$1({ "data-testid": "not-helpful-action", onClick: function () { return (notHelpfulAction ? notHelpfulAction(reviewId) : undefined); } }, { children: [jsx$1(Icon.Custom.ThumbsDown, { width: 1, height: 1, fill: "#000" }, void 0), jsx$1(NotHelpfulCount, { children: notHelpfulCount }, void 0)] }), void 0)] }, void 0)] }), void 0), productImage && productLink && (jsxs$1(ProductContainer, __assign$1({ onClick: function () { return (window.location.href = productLink); } }, { children: [jsx$1(ProductImageWrapper, { children: jsx$1(ProductImage, { src: productImage, alt: "productImage" }, void 0) }, void 0), jsx$1(ProductTitle, { children: productTitle }, void 0)] }), void 0))] }, void 0)] }, void 0) }), void 0));
|
|
19251
19251
|
};
|
|
19252
|
-
var templateObject_1$
|
|
19252
|
+
var templateObject_1$P, templateObject_2$C, templateObject_3$z, templateObject_4$s, templateObject_5$n, templateObject_6$l, templateObject_7$j, templateObject_8$e, templateObject_9$a, templateObject_10$8, templateObject_11$5, templateObject_12$2, templateObject_13$2, templateObject_14$2, templateObject_15$1, templateObject_16$1, templateObject_17$1, templateObject_18$1, templateObject_19$1, templateObject_20, templateObject_21, templateObject_22, templateObject_23;
|
|
19253
19253
|
|
|
19254
19254
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_DESKTOP = 500;
|
|
19255
19255
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_MOBILE = 168;
|
|
19256
|
-
var Container$A = newStyled.div(templateObject_1$
|
|
19256
|
+
var Container$A = newStyled.div(templateObject_1$O || (templateObject_1$O = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n width: auto;\n color: #292929;\n"], ["\n display: flex;\n flex-direction: column;\n width: auto;\n color: #292929;\n"])));
|
|
19257
19257
|
var Heading = newStyled.div(templateObject_2$B || (templateObject_2$B = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n width: 100%;\n font-size: 14px;\n line-height: 22px;\n text-align: right;\n margin-bottom: 10px;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"], ["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n width: 100%;\n font-size: 14px;\n line-height: 22px;\n text-align: right;\n margin-bottom: 10px;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"])));
|
|
19258
19258
|
var Content = newStyled.div(templateObject_3$y || (templateObject_3$y = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n"], ["\n display: flex;\n justify-content: space-between;\n"])));
|
|
19259
19259
|
var ReviewContainer = newStyled.div(templateObject_4$r || (templateObject_4$r = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
@@ -19305,9 +19305,9 @@ var Review = function (_a) {
|
|
|
19305
19305
|
: description,
|
|
19306
19306
|
} }, void 0), jsxs$1(HelpfulContainerDesktop, __assign$1({ showMoreDesktop: description.length > REVIEWS_DESCRIPTION_MAX_LENGTH_DESKTOP }, { children: [helpfulActionText && helpfulAction && (jsx$1(ButtonSecondaryWrapper, { onClick: function () { return helpfulAction(reviewId); }, text: helpfulActionText, size: ComponentSize.Small }, void 0)), (helpfulCount || (hasTextWhenHelpfulCount0 && helpfulCount === 0)) && (jsxs$1(HelpfulText, { children: [helpfulCount, " people found this helpful"] }, void 0))] }), void 0)] }, void 0), jsxs$1(ImagesContainer, { children: [jsxs$1(Images, { children: [images === null || images === void 0 ? void 0 : images.map(function (image) { return (jsx$1(ImageWrapper$3, __assign$1({ onClick: function () { return onClickImage && onClickImage(image.src); } }, { children: jsx$1(Image$3, { src: image.src, alt: image.alt, height: "10rem", width: "7.5rem" }, void 0) }), image.src)); }), !images || (images.length === 0 && jsx$1(ImageSpace, {}, void 0))] }, void 0), jsx$1(VariantText, { children: reviewVariant }, void 0)] }, void 0)] }), void 0), jsx$1(HelpfulTexti, {}, void 0), jsxs$1(HelpfulContainerMobile, { children: [helpfulActionText && helpfulAction && (jsx$1(ButtonSecondaryWrapper, { onClick: function () { return helpfulAction(reviewId); }, text: helpfulActionText, size: ComponentSize.Small }, void 0)), (helpfulCount || (hasTextWhenHelpfulCount0 && helpfulCount === 0)) && (jsxs$1(HelpfulText, { children: [helpfulCount, " people found this helpful"] }, void 0))] }, void 0)] }, void 0));
|
|
19307
19307
|
};
|
|
19308
|
-
var templateObject_1$
|
|
19308
|
+
var templateObject_1$O, templateObject_2$B, templateObject_3$y, templateObject_4$r, templateObject_5$m, templateObject_6$k, templateObject_7$i, templateObject_8$d, templateObject_9$9, templateObject_10$7, templateObject_11$4, templateObject_12$1, templateObject_13$1, templateObject_14$1, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19;
|
|
19309
19309
|
|
|
19310
|
-
var Container$z = newStyled.div(templateObject_1$
|
|
19310
|
+
var Container$z = newStyled.div(templateObject_1$N || (templateObject_1$N = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: auto;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: auto;\n"])));
|
|
19311
19311
|
var ReviewsContainer = newStyled.div(templateObject_2$A || (templateObject_2$A = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n text-align: center;\n align-items: center;\n\n @media (min-width: 768px) {\n flex-direction: row;\n gap: 30px;\n }\n"], ["\n display: flex;\n flex-direction: column;\n text-align: center;\n align-items: center;\n\n @media (min-width: 768px) {\n flex-direction: row;\n gap: 30px;\n }\n"])));
|
|
19312
19312
|
var ReviewsCount = newStyled.div(templateObject_3$x || (templateObject_3$x = __makeTemplateObject(["\n display: block;\n\n @media (min-width: 768px) {\n display: flex;\n flex-direction: column;\n }\n"], ["\n display: block;\n\n @media (min-width: 768px) {\n display: flex;\n flex-direction: column;\n }\n"])));
|
|
19313
19313
|
var ReviewsStars = newStyled.div(templateObject_4$q || (templateObject_4$q = __makeTemplateObject(["\n display: flex;\n margin-bottom: 10px;\n\n @media (min-width: 768px) {\n margin-bottom: 0;\n }\n"], ["\n display: flex;\n margin-bottom: 10px;\n\n @media (min-width: 768px) {\n margin-bottom: 0;\n }\n"])));
|
|
@@ -19323,9 +19323,9 @@ var ReviewsHeader = function (_a) {
|
|
|
19323
19323
|
var theme = useTheme();
|
|
19324
19324
|
return (jsxs$1(Container$z, { children: [jsx$1(Text$7, __assign$1({ variant: "heading3", weight: "bold", style: { margin: '10px 0' } }, { children: title }), void 0), jsxs$1(ReviewsContainer, { children: [jsxs$1(ReviewsCount, { children: [jsxs$1(ReviewsStars, { children: [jsx$1(ReviewsTextCount, __assign$1({ variant: "heading3", weight: "bold" }, { children: rating }), void 0), jsx$1(StarList, { rating: rating, size: ComponentSize.Medium, starsNumber: starsNumber, fill: theme.component.stars.element.color }, void 0)] }, void 0), jsxs$1(Text$7, __assign$1({ variant: "body", size: "small", weight: "regular", style: { marginBottom: '20px' } }, { children: [reviews, " ", reviewsText] }), void 0)] }, void 0), jsx$1(ReviewsImages, { children: reviewsSummary.map(function (summaryItem) { return (jsx$1(SummaryItem, { onClick: function () { return onClickReview(summaryItem); }, backgroundUrl: summaryItem, "data-testid": "summary-review-item" }, summaryItem)); }) }, void 0)] }, void 0)] }, void 0));
|
|
19325
19325
|
};
|
|
19326
|
-
var templateObject_1$
|
|
19326
|
+
var templateObject_1$N, templateObject_2$A, templateObject_3$x, templateObject_4$q, templateObject_5$l, templateObject_6$j, templateObject_7$h;
|
|
19327
19327
|
|
|
19328
|
-
var Container$y = newStyled.div(templateObject_1$
|
|
19328
|
+
var Container$y = newStyled.div(templateObject_1$M || (templateObject_1$M = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n cursor: pointer;\n user-select: none;\n"], ["\n display: inline-flex;\n align-items: center;\n cursor: pointer;\n user-select: none;\n"])));
|
|
19329
19329
|
var Text$1 = newStyled.p(templateObject_2$z || (templateObject_2$z = __makeTemplateObject(["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 700;\n color: ", ";\n margin-right: 0.313rem;\n"], ["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 700;\n color: ", ";\n margin-right: 0.313rem;\n"])), function (props) { return props.color; });
|
|
19330
19330
|
var ScrollToTop = function (_a) {
|
|
19331
19331
|
var scrollToTopText = _a.scrollToTopText, onClick = _a.onClick, fill = _a.fill, _b = _a.Icon, Icon$1 = _b === void 0 ? Icon.Arrows.CircleChevronUp : _b;
|
|
@@ -19333,13 +19333,13 @@ var ScrollToTop = function (_a) {
|
|
|
19333
19333
|
var fillValue = fill || theme.colors.pallete.primary.color;
|
|
19334
19334
|
return (jsxs$1(Container$y, __assign$1({ onClick: onClick, "data-testid": "scrollTopContainer" }, { children: [jsx$1(Text$1, __assign$1({ color: theme.colors.shades['700'].color }, { children: scrollToTopText }), void 0), jsx$1(Icon$1, { width: 1.375, height: 1.375, fill: fillValue }, void 0)] }), void 0));
|
|
19335
19335
|
};
|
|
19336
|
-
var templateObject_1$
|
|
19336
|
+
var templateObject_1$M, templateObject_2$z;
|
|
19337
19337
|
|
|
19338
|
-
var Button$5 = newStyled.button(templateObject_1$
|
|
19338
|
+
var Button$5 = newStyled.button(templateObject_1$L || (templateObject_1$L = __makeTemplateObject(["\n position: absolute;\n right: 1rem;\n background: white;\n border: none;\n align-self: center;\n padding: 0;\n ", "\n"], ["\n position: absolute;\n right: 1rem;\n background: white;\n border: none;\n align-self: center;\n padding: 0;\n ", "\n"])), mediaQueries({
|
|
19339
19339
|
right: ['1rem', '7.75rem'],
|
|
19340
19340
|
top: ['0.75rem', '0.75rem'],
|
|
19341
19341
|
}));
|
|
19342
|
-
var templateObject_1$
|
|
19342
|
+
var templateObject_1$L;
|
|
19343
19343
|
|
|
19344
19344
|
var ClearButton = function (_a) {
|
|
19345
19345
|
var onClick = _a.onClick;
|
|
@@ -19358,7 +19358,7 @@ var Footer = function (_a) {
|
|
|
19358
19358
|
return (jsx$1(Container$x, { children: jsx$1(Text$7, __assign$1({ variant: "link", size: "regular", underline: true, onClick: onClick }, { children: text }), void 0) }, void 0));
|
|
19359
19359
|
};
|
|
19360
19360
|
|
|
19361
|
-
var Container$w = newStyled.div(templateObject_1$
|
|
19361
|
+
var Container$w = newStyled.div(templateObject_1$K || (templateObject_1$K = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n width: auto;\n padding: 0.688rem 0rem;\n ", "\n"], ["\n display: flex;\n flex-direction: row;\n width: auto;\n padding: 0.688rem 0rem;\n ", "\n"])), mediaQueries({
|
|
19362
19362
|
borderTop: ['0.063rem solid var(--colors-shades-100-color)', 'none'],
|
|
19363
19363
|
}));
|
|
19364
19364
|
var Description = newStyled.div({
|
|
@@ -19372,7 +19372,7 @@ var Description = newStyled.div({
|
|
|
19372
19372
|
textAlign: 'start',
|
|
19373
19373
|
},
|
|
19374
19374
|
});
|
|
19375
|
-
var templateObject_1$
|
|
19375
|
+
var templateObject_1$K;
|
|
19376
19376
|
|
|
19377
19377
|
var ProductItem = function (_a) {
|
|
19378
19378
|
var _b;
|
|
@@ -19385,7 +19385,7 @@ var OptionsList = newStyled.ul({
|
|
|
19385
19385
|
margin: '0px',
|
|
19386
19386
|
padding: '0px',
|
|
19387
19387
|
});
|
|
19388
|
-
var OptionItem = newStyled.li(templateObject_1$
|
|
19388
|
+
var OptionItem = newStyled.li(templateObject_1$J || (templateObject_1$J = __makeTemplateObject(["\n width: 100%;\n cursor: pointer;\n list-style-type: none;\n box-sizing: border-box;\n &:hover {\n background-color: ", ";\n }\n ", "\n"], ["\n width: 100%;\n cursor: pointer;\n list-style-type: none;\n box-sizing: border-box;\n &:hover {\n background-color: ", ";\n }\n ", "\n"])), function (props) { return props.theme.colors.shades['100'].color; }, mediaQueries({
|
|
19389
19389
|
padding: [0, '0rem 1rem'],
|
|
19390
19390
|
borderRadius: [0, '0.5rem'],
|
|
19391
19391
|
}));
|
|
@@ -19405,7 +19405,7 @@ var Container$v = newStyled.div(templateObject_2$y || (templateObject_2$y = __ma
|
|
|
19405
19405
|
var Header$2 = newStyled.div(templateObject_3$w || (templateObject_3$w = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), mediaQueries({
|
|
19406
19406
|
margin: ['0rem 0rem 1rem 0rem', '1rem'],
|
|
19407
19407
|
}));
|
|
19408
|
-
var templateObject_1$
|
|
19408
|
+
var templateObject_1$J, templateObject_2$y, templateObject_3$w;
|
|
19409
19409
|
|
|
19410
19410
|
var ResultsPanel = function (_a) {
|
|
19411
19411
|
var options = _a.options, header = _a.header, footer = _a.footer, onViewAll = _a.onViewAll, testId = _a.testId;
|
|
@@ -19424,8 +19424,8 @@ var SearchIconContainer = newStyled.div({
|
|
|
19424
19424
|
background: 'white',
|
|
19425
19425
|
alignSelf: 'center',
|
|
19426
19426
|
});
|
|
19427
|
-
var StyledButton$
|
|
19428
|
-
var templateObject_1$
|
|
19427
|
+
var StyledButton$2 = newStyled(ButtonSecondary)(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["\n position: absolute;\n right: 0;\n height: 100%;\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n padding: 0.875rem 1.5rem;\n"], ["\n position: absolute;\n right: 0;\n height: 100%;\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n padding: 0.875rem 1.5rem;\n"])));
|
|
19428
|
+
var templateObject_1$I;
|
|
19429
19429
|
|
|
19430
19430
|
var SearchControl = function (_a) {
|
|
19431
19431
|
var open = _a.open, onSearch = _a.onSearch, onClose = _a.onClose, _b = _a.showSearchIcon, showSearchIcon = _b === void 0 ? false : _b;
|
|
@@ -19440,7 +19440,7 @@ var SearchControl = function (_a) {
|
|
|
19440
19440
|
}
|
|
19441
19441
|
return (jsx$1(SearchIconContainer, { children: jsx$1(Icon.Navigation.Search, { title: "Search icon", height: 1.25, width: 1.25 }, void 0) }, void 0));
|
|
19442
19442
|
}
|
|
19443
|
-
return (jsxs$1(Fragment$2, { children: [jsx$1(StyledButton$
|
|
19443
|
+
return (jsxs$1(Fragment$2, { children: [jsx$1(StyledButton$2, { text: "SEARCH", onClick: onSearch }, void 0), open && jsx$1(ClearButton, { onClick: onClose }, void 0)] }, void 0));
|
|
19444
19444
|
};
|
|
19445
19445
|
|
|
19446
19446
|
var Input = newStyled.input(function (props) { return ({
|
|
@@ -19537,12 +19537,12 @@ var SearchBar = function (_a) {
|
|
|
19537
19537
|
} }, void 0), jsx$1(SearchControl, { showSearchIcon: isBlogSearchBar, open: state.open, onClose: handleOnClose, onSearch: function () { return onSearch(state.term); } }, void 0)] }), void 0), state.open && !!options.length && (jsx$1(ResultsPanel, { testId: resultsPanelDataTestId, options: options, header: shouldDisplaySuggestion() ? 'Most popular products' : undefined, footer: allResults ? "View all results (".concat(allResults, ")") : undefined, onViewAll: function () { return onSearch(state.term); } }, void 0))] }), void 0));
|
|
19538
19538
|
};
|
|
19539
19539
|
|
|
19540
|
-
var Container$t = newStyled.div(templateObject_1$
|
|
19540
|
+
var Container$t = newStyled.div(templateObject_1$H || (templateObject_1$H = __makeTemplateObject(["\n display: flex;\n flex-wrap: wrap;\n padding: 0 1rem 1rem;\n"], ["\n display: flex;\n flex-wrap: wrap;\n padding: 0 1rem 1rem;\n"])));
|
|
19541
19541
|
var BackArrow = newStyled.div(templateObject_2$x || (templateObject_2$x = __makeTemplateObject(["\n transform: rotate(180deg);\n margin-right: 0.5rem;\n"], ["\n transform: rotate(180deg);\n margin-right: 0.5rem;\n"])));
|
|
19542
19542
|
var BoldSpan = newStyled.span(templateObject_3$v || (templateObject_3$v = __makeTemplateObject(["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 600;\n"], ["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 600;\n"])));
|
|
19543
19543
|
var NormalSpan = newStyled.span(templateObject_4$p || (templateObject_4$p = __makeTemplateObject(["\n font-size: 0.875rem;\n line-height: 1.375rem;\n white-space: pre;\n"], ["\n font-size: 0.875rem;\n line-height: 1.375rem;\n white-space: pre;\n"])));
|
|
19544
19544
|
var SearchNavigationParents = newStyled.div(templateObject_5$k || (templateObject_5$k = __makeTemplateObject(["\n display: flex;\n flex-wrap: wrap;\n padding-left: 1.25rem;\n padding-right: 1rem;\n"], ["\n display: flex;\n flex-wrap: wrap;\n padding-left: 1.25rem;\n padding-right: 1rem;\n"])));
|
|
19545
|
-
var templateObject_1$
|
|
19545
|
+
var templateObject_1$H, templateObject_2$x, templateObject_3$v, templateObject_4$p, templateObject_5$k;
|
|
19546
19546
|
|
|
19547
19547
|
var SearchNavigation = function (_a) {
|
|
19548
19548
|
var returnText = _a.returnText, returnUrl = _a.returnUrl, _b = _a.steps, steps = _b === void 0 ? [] : _b, returnAction = _a.returnAction;
|
|
@@ -19551,7 +19551,7 @@ var SearchNavigation = function (_a) {
|
|
|
19551
19551
|
}) }, void 0)] }, void 0));
|
|
19552
19552
|
};
|
|
19553
19553
|
|
|
19554
|
-
var Container$s = newStyled.div(templateObject_1$
|
|
19554
|
+
var Container$s = newStyled.div(templateObject_1$G || (templateObject_1$G = __makeTemplateObject(["\n ", "\n display: flex;\n flex-direction: column;\n padding: 0px 0px 5px;\n width: ", ";\n background: ", ";\n color: ", ";\n border: ", ";\n"], ["\n ", "\n display: flex;\n flex-direction: column;\n padding: 0px 0px 5px;\n width: ", ";\n background: ", ";\n color: ", ";\n border: ", ";\n"])), function (_a) {
|
|
19555
19555
|
var alignCenter = _a.alignCenter;
|
|
19556
19556
|
return alignCenter &&
|
|
19557
19557
|
"\n justify-content: center;\n align-items: center;\n text-align: center;\n ";
|
|
@@ -19568,9 +19568,9 @@ var ShortBanner = function (_a) {
|
|
|
19568
19568
|
var theme = useTheme();
|
|
19569
19569
|
return (jsxs$1(Container$s, __assign$1({ backgroundColor: backgroundColor, alignCenter: alignCenter, widthAuto: widthAuto, "data-testid": "BannerContainer", theme: theme, textColor: textColor }, { children: [jsx$1(TitleText, { children: title }, void 0), jsx$1(BannerText, { children: bannerText }, void 0)] }), void 0));
|
|
19570
19570
|
};
|
|
19571
|
-
var templateObject_1$
|
|
19571
|
+
var templateObject_1$G, templateObject_2$w, templateObject_3$u;
|
|
19572
19572
|
|
|
19573
|
-
var TableElement$3 = newStyled.table(templateObject_1$
|
|
19573
|
+
var TableElement$3 = newStyled.table(templateObject_1$F || (templateObject_1$F = __makeTemplateObject(["\n position: relative;\n box-sizing: border-box;\n border-radius: 0.5rem;\n border: 0.063rem solid ", ";\n border-spacing: 0;\n font-size: 0.875rem;\n line-height: 3.125rem;\n width: 100%;\n color: ", ";\n"], ["\n position: relative;\n box-sizing: border-box;\n border-radius: 0.5rem;\n border: 0.063rem solid ", ";\n border-spacing: 0;\n font-size: 0.875rem;\n line-height: 3.125rem;\n width: 100%;\n color: ", ";\n"])), function (props) { return props.borderColor; }, function (props) { return props.color; });
|
|
19574
19574
|
var TableCell$3 = newStyled.td(templateObject_2$v || (templateObject_2$v = __makeTemplateObject(["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n line-height: normal;\n padding: 1rem;\n text-align: start;\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n font-weight: 700;\n text-align: center;\n }\n"], ["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n line-height: normal;\n padding: 1rem;\n text-align: start;\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n font-weight: 700;\n text-align: center;\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.borderColor; });
|
|
19575
19575
|
var TableHead$3 = newStyled.th(templateObject_3$t || (templateObject_3$t = __makeTemplateObject(["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n font-weight: 700;\n line-height: normal;\n padding: 1rem;\n text-align: start;\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n text-align: center;\n }\n"], ["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n font-weight: 700;\n line-height: normal;\n padding: 1rem;\n text-align: start;\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n text-align: center;\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.borderColor; });
|
|
19576
19576
|
var Label$2 = newStyled('div')(templateObject_4$o || (templateObject_4$o = __makeTemplateObject(["\n gap: 15px;\n width: 100%;\n display: flex;\n font-size: 14px;\n font-weight: 600;\n align-items: center;\n justify-content: center;\n"], ["\n gap: 15px;\n width: 100%;\n display: flex;\n font-size: 14px;\n font-weight: 600;\n align-items: center;\n justify-content: center;\n"])));
|
|
@@ -19580,7 +19580,7 @@ var Container$r = newStyled('div')(templateObject_7$g || (templateObject_7$g = _
|
|
|
19580
19580
|
var LabelText$1 = newStyled('span')(templateObject_8$c || (templateObject_8$c = __makeTemplateObject(["\n display: flex;\n min-width: 70px;\n justify-content: center;\n"], ["\n display: flex;\n min-width: 70px;\n justify-content: center;\n"])));
|
|
19581
19581
|
var Column$2 = newStyled('div')(templateObject_9$8 || (templateObject_9$8 = __makeTemplateObject(["\n display: flex;\n min-width: 675px;\n align-items: center;\n flex-direction: column;\n\n @media (max-width: 768px) {\n min-width: 100%;\n }\n"], ["\n display: flex;\n min-width: 675px;\n align-items: center;\n flex-direction: column;\n\n @media (max-width: 768px) {\n min-width: 100%;\n }\n"])));
|
|
19582
19582
|
var TableRow$3 = newStyled.tr(templateObject_10$6 || (templateObject_10$6 = __makeTemplateObject(["\n &:last-child {\n td {\n border-bottom: none;\n }\n }\n\n &.background {\n background-color: ", ";\n }\n"], ["\n &:last-child {\n td {\n border-bottom: none;\n }\n }\n\n &.background {\n background-color: ", ";\n }\n"])), function (props) { return props.backgroundColor; });
|
|
19583
|
-
var templateObject_1$
|
|
19583
|
+
var templateObject_1$F, templateObject_2$v, templateObject_3$t, templateObject_4$o, templateObject_5$j, templateObject_6$i, templateObject_7$g, templateObject_8$c, templateObject_9$8, templateObject_10$6;
|
|
19584
19584
|
|
|
19585
19585
|
var getIsOdd$2 = function (number) { return number % 2 !== 0; };
|
|
19586
19586
|
var getCellColor$2 = function (index, cell) {
|
|
@@ -19621,7 +19621,7 @@ var SizeChartTable = function (_a) {
|
|
|
19621
19621
|
}, borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }, index)); }) }, void 0)) : (jsx$1("tbody", { children: tableContent === null || tableContent === void 0 ? void 0 : tableContent.map(function (row, index) { return (jsx$1(TableRow$3, __assign$1({ className: getIsOdd$2(index) ? 'background' : '', backgroundColor: theme.colors.shades['10'].color }, { children: row === null || row === void 0 ? void 0 : row.map(function (cell, index) { return (jsx$1(TableCell$3, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }), index)); }) }, void 0))] }), void 0)] }, void 0)] }, void 0));
|
|
19622
19622
|
};
|
|
19623
19623
|
|
|
19624
|
-
var TableElement$2 = newStyled.table(templateObject_1$
|
|
19624
|
+
var TableElement$2 = newStyled.table(templateObject_1$E || (templateObject_1$E = __makeTemplateObject(["\n box-sizing: border-box;\n border-radius: 0.5rem;\n border: 0.063rem solid ", ";\n border-spacing: 0;\n font-size: 0.875rem;\n line-height: 3.125rem;\n width: 100%;\n color: ", ";\n"], ["\n box-sizing: border-box;\n border-radius: 0.5rem;\n border: 0.063rem solid ", ";\n border-spacing: 0;\n font-size: 0.875rem;\n line-height: 3.125rem;\n width: 100%;\n color: ", ";\n"])), function (props) { return props.borderColor; }, function (props) { return props.color; });
|
|
19625
19625
|
var TableCell$2 = newStyled.td(templateObject_2$u || (templateObject_2$u = __makeTemplateObject(["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n padding: 8px;\n text-align: center;\n line-height: 20px;\n height: 52px;\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n font-weight: 700;\n }\n"], ["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n padding: 8px;\n text-align: center;\n line-height: 20px;\n height: 52px;\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n font-weight: 700;\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.borderColor; });
|
|
19626
19626
|
var TableHead$2 = newStyled.th(templateObject_3$s || (templateObject_3$s = __makeTemplateObject(["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n font-weight: 700;\n\n &:last-child {\n border-right: none;\n }\n"], ["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n font-weight: 700;\n\n &:last-child {\n border-right: none;\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.borderColor; });
|
|
19627
19627
|
var TableRow$2 = newStyled.tr(templateObject_4$n || (templateObject_4$n = __makeTemplateObject(["\n &:last-child {\n td {\n border-bottom: none;\n }\n }\n\n &.background {\n background-color: ", ";\n }\n"], ["\n &:last-child {\n td {\n border-bottom: none;\n }\n }\n\n &.background {\n background-color: ", ";\n }\n"])), function (props) { return props.backgroundColor; });
|
|
@@ -19630,7 +19630,7 @@ var SizeTable = function (_a) {
|
|
|
19630
19630
|
var theme = useTheme();
|
|
19631
19631
|
return (jsxs$1(TableElement$2, __assign$1({ color: theme.colors.shades['700'].color, borderColor: theme.colors.shades['100'].color, className: className }, { children: [jsx$1("thead", { children: jsx$1(TableRow$2, __assign$1({ backgroundColor: theme.colors.shades['10'].color }, { children: headers.map(function (header, index) { return (jsx$1(TableHead$2, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: header }), index)); }) }), void 0) }, void 0), jsx$1("tbody", { children: data.map(function (row, index) { return (jsx$1(TableRow$2, __assign$1({ className: index % 2 !== 0 ? '' : 'background', backgroundColor: theme.colors.shades['10'].color }, { children: row.map(function (cell, index) { return (jsx$1(TableCell$2, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }), index)); }) }, void 0)] }), void 0));
|
|
19632
19632
|
};
|
|
19633
|
-
var templateObject_1$
|
|
19633
|
+
var templateObject_1$E, templateObject_2$u, templateObject_3$s, templateObject_4$n;
|
|
19634
19634
|
|
|
19635
19635
|
var getStylesBySize$7 = function (size) {
|
|
19636
19636
|
switch (size) {
|
|
@@ -19657,7 +19657,7 @@ var textButtonStyles = function (theme, size) {
|
|
|
19657
19657
|
} });
|
|
19658
19658
|
};
|
|
19659
19659
|
var withContainer = function (iconFill, isLeading, Icon) {
|
|
19660
|
-
return Icon && (jsx("span", __assign$1({ css: css(templateObject_1$
|
|
19660
|
+
return Icon && (jsx("span", __assign$1({ css: css(templateObject_1$D || (templateObject_1$D = __makeTemplateObject(["\n display: flex;\n align-items: center;\n ", "\n "], ["\n display: flex;\n align-items: center;\n ", "\n "])), isLeading ? 'margin-right: 5px' : 'margin-left: 5px') }, { children: jsx(Icon, { width: 1.25, height: 1.25, fill: iconFill }, void 0) }), void 0));
|
|
19661
19661
|
};
|
|
19662
19662
|
var getIconFill = function (theme, disabled, iconColor) {
|
|
19663
19663
|
if (disabled)
|
|
@@ -19673,23 +19673,23 @@ var TextButton = function (_a) {
|
|
|
19673
19673
|
var iconFill = getIconFill(theme, disabled, iconColor);
|
|
19674
19674
|
return (jsx(BaseButton, __assign$1({ renderLeading: withContainer(iconFill, true, LeadingIcon), renderTrailing: withContainer(iconFill, false, TrailingIcon), disabled: disabled, type: type, onClick: onClick, css: textButtonStyles(theme, size), uppercase: uppercase, testId: testId }, { children: text }), void 0));
|
|
19675
19675
|
};
|
|
19676
|
-
var templateObject_1$
|
|
19676
|
+
var templateObject_1$D;
|
|
19677
19677
|
|
|
19678
|
-
var Container$q = newStyled.div(templateObject_1$
|
|
19678
|
+
var Container$q = newStyled.div(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n font-size: 0.88rem;\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n font-size: 0.88rem;\n"])));
|
|
19679
19679
|
var P = newStyled.p(templateObject_2$t || (templateObject_2$t = __makeTemplateObject(["\n margin: 0 0 0 10px;\n"], ["\n margin: 0 0 0 10px;\n"])));
|
|
19680
19680
|
var PercentageSpan = newStyled.span(templateObject_3$r || (templateObject_3$r = __makeTemplateObject(["\n font-weight: 700;\n text-decoration-line: underline;\n cursor: pointer;\n"], ["\n font-weight: 700;\n text-decoration-line: underline;\n cursor: pointer;\n"])));
|
|
19681
19681
|
var SizeFitGuide = function (_a) {
|
|
19682
19682
|
var title = _a.title, fitPercentage = _a.fitPercentage, onClick = _a.onClick, onClickFitPercentage = _a.onClickFitPercentage, _b = _a.hideIcon, hideIcon = _b === void 0 ? false : _b;
|
|
19683
19683
|
return (jsxs$1(Container$q, { children: [jsx$1(TextButton, { LeadingIcon: hideIcon ? undefined : Icon.PDP.Rule, size: ComponentSize.Small, text: title, onClick: onClick, uppercase: false }, void 0), !!fitPercentage && (jsxs$1(P, { children: ["Fit As Expected:", ' ', jsxs$1(PercentageSpan, __assign$1({ onClick: onClickFitPercentage, role: "button" }, { children: [fitPercentage, "%"] }), void 0)] }, void 0))] }, void 0));
|
|
19684
19684
|
};
|
|
19685
|
-
var templateObject_1$
|
|
19685
|
+
var templateObject_1$C, templateObject_2$t, templateObject_3$r;
|
|
19686
19686
|
|
|
19687
|
-
var ButtonsContainer = newStyled.div(templateObject_1$
|
|
19687
|
+
var ButtonsContainer = newStyled.div(templateObject_1$B || (templateObject_1$B = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n margin: ", ";\n"], ["\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n margin: ", ";\n"])), function (_a) {
|
|
19688
19688
|
var inline = _a.inline;
|
|
19689
19689
|
return (inline ? '0 0 0 10px' : '8px 0 0 0');
|
|
19690
19690
|
});
|
|
19691
19691
|
var Row = newStyled.div(templateObject_2$s || (templateObject_2$s = __makeTemplateObject(["\n gap: 5px;\n display: flex;\n margin: 8px 0 0;\n flex-wrap: wrap;\n\n & button {\n font-weight: 600;\n }\n"], ["\n gap: 5px;\n display: flex;\n margin: 8px 0 0;\n flex-wrap: wrap;\n\n & button {\n font-weight: 600;\n }\n"])));
|
|
19692
|
-
var templateObject_1$
|
|
19692
|
+
var templateObject_1$B, templateObject_2$s;
|
|
19693
19693
|
|
|
19694
19694
|
var SizeSelector = function (_a) {
|
|
19695
19695
|
var _b;
|
|
@@ -19711,7 +19711,7 @@ var SizeSelector = function (_a) {
|
|
|
19711
19711
|
}) }), void 0)] }), void 0));
|
|
19712
19712
|
};
|
|
19713
19713
|
|
|
19714
|
-
var TabContainer = newStyled.div(templateObject_1$
|
|
19714
|
+
var TabContainer = newStyled.div(templateObject_1$A || (templateObject_1$A = __makeTemplateObject(["\n display: flex;\n justify-content: center;\n align-content: center;\n flex-direction: column;\n flex: 1 1 0;\n font-size: ", ";\n height: ", ";\n margin: 0 auto;\n text-align: center;\n cursor: pointer;\n transition: all 0.2s;\n max-width: ", ";\n border: none;\n\n ", "\n"], ["\n display: flex;\n justify-content: center;\n align-content: center;\n flex-direction: column;\n flex: 1 1 0;\n font-size: ", ";\n height: ", ";\n margin: 0 auto;\n text-align: center;\n cursor: pointer;\n transition: all 0.2s;\n max-width: ", ";\n border: none;\n\n ", "\n"])), function (_a) {
|
|
19715
19715
|
var titleSize = _a.titleSize;
|
|
19716
19716
|
return titleSize;
|
|
19717
19717
|
}, function (_a) {
|
|
@@ -19728,9 +19728,9 @@ var Tab = function (_a) {
|
|
|
19728
19728
|
var title = _a.title, _b = _a.titleSize, titleSize = _b === void 0 ? '14px' : _b, _c = _a.height, height = _c === void 0 ? '4.5rem' : _c, _d = _a.selectedTitleWeight, selectedTitleWeight = _d === void 0 ? 700 : _d, selected = _a.selected, onClick = _a.onClick, _e = _a.color, color = _e === void 0 ? 'var(--colors-pallete-primary-color)' : _e, _f = _a.tabsMaxWidth, tabsMaxWidth = _f === void 0 ? '11rem' : _f;
|
|
19729
19729
|
return (jsx$1(Fragment$2, { children: jsx$1(TabContainer, __assign$1({ selected: selected, onClick: function () { return onClick(title); }, color: color, titleSize: titleSize, height: height, selectedTitleWeight: selectedTitleWeight, tabsMaxWidth: tabsMaxWidth }, { children: title }), title) }, void 0));
|
|
19730
19730
|
};
|
|
19731
|
-
var templateObject_1$
|
|
19731
|
+
var templateObject_1$A;
|
|
19732
19732
|
|
|
19733
|
-
var Container$p = newStyled.div(templateObject_1$
|
|
19733
|
+
var Container$p = newStyled.div(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
|
|
19734
19734
|
var TabList = newStyled.div(templateObject_2$r || (templateObject_2$r = __makeTemplateObject(["\n background-color: ", ";\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n padding: 0 25px;\n ", ";\n"], ["\n background-color: ", ";\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n padding: 0 25px;\n ", ";\n"])), function (_a) {
|
|
19735
19735
|
var backgroundColor = _a.backgroundColor;
|
|
19736
19736
|
return backgroundColor;
|
|
@@ -19750,14 +19750,14 @@ var Tabs = function (_a) {
|
|
|
19750
19750
|
var selectedContent = (_b = tabs.find(function (tab) { return tab.title === selectedTab; })) === null || _b === void 0 ? void 0 : _b.content;
|
|
19751
19751
|
return (jsxs$1(Container$p, __assign$1({ "data-testid": "tabs-container" }, { children: [jsx$1(TabList, __assign$1({ backgroundColor: backgroundColor, borderColor: fixedBorderColor }, { children: tabs.map(function (tab, index) { return (jsxs$1(React__default.Fragment, { children: [jsx$1(Tab, { title: tab.title, selected: selectedTab === tab.title, onClick: setSelectedTab, tabsMaxWidth: tabsMaxWidth, color: selectedBorderColor }, tab.title), index + 1 < tabs.length && jsx$1(TabSeparator, { children: "|" }, void 0)] }, tab.title)); }) }), void 0), jsx$1(TabContent, __assign$1({ "data-testid": "tab-content" }, { children: selectedContent }), void 0)] }), void 0));
|
|
19752
19752
|
};
|
|
19753
|
-
var templateObject_1$
|
|
19753
|
+
var templateObject_1$z, templateObject_2$r, templateObject_3$q, templateObject_4$m;
|
|
19754
19754
|
|
|
19755
|
-
var Container$o = newStyled.div(templateObject_1$
|
|
19755
|
+
var Container$o = newStyled.div(templateObject_1$y || (templateObject_1$y = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n width: fit-content;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n width: fit-content;\n"])));
|
|
19756
19756
|
var Tag = function (_a) {
|
|
19757
19757
|
var text = _a.text, className = _a.className;
|
|
19758
19758
|
return jsx$1(Container$o, __assign$1({ className: className }, { children: text }), void 0);
|
|
19759
19759
|
};
|
|
19760
|
-
var templateObject_1$
|
|
19760
|
+
var templateObject_1$y;
|
|
19761
19761
|
|
|
19762
19762
|
var getStylesBySize$6 = function (size, styledBorder) {
|
|
19763
19763
|
switch (size) {
|
|
@@ -19870,7 +19870,7 @@ var SeasonOfferRoundedTag = function (_a) {
|
|
|
19870
19870
|
return (jsx(Tag, { css: __assign$1({ backgroundColor: backgroundColor, fontWeight: 700, color: '#FFFFFF', textAlign: 'center', borderRadius: '50%' }, stylesBySize), text: text, className: className }, void 0));
|
|
19871
19871
|
};
|
|
19872
19872
|
|
|
19873
|
-
var ImageWrapper$2 = newStyled.div(templateObject_1$
|
|
19873
|
+
var ImageWrapper$2 = newStyled.div(templateObject_1$x || (templateObject_1$x = __makeTemplateObject(["\n position: relative;\n display: flex;\n max-height: fit-content;\n"], ["\n position: relative;\n display: flex;\n max-height: fit-content;\n"])));
|
|
19874
19874
|
var VideoOverlay$1 = newStyled.div(templateObject_2$q || (templateObject_2$q = __makeTemplateObject(["\n position: absolute;\n width: 100%;\n height: 100%;\n background-color: rgba(247, 160, 139, 0.1);\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n top: 0;\n left: 0;\n border-radius: 25px;\n color: #ffffff;\n gap: 15px;\n cursor: pointer;\n text-align: center;\n @media (max-width: 768px) {\n justify-content: end;\n gap: 10px;\n padding-bottom: 20px;\n text-align: center;\n }\n"], ["\n position: absolute;\n width: 100%;\n height: 100%;\n background-color: rgba(247, 160, 139, 0.1);\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n top: 0;\n left: 0;\n border-radius: 25px;\n color: #ffffff;\n gap: 15px;\n cursor: pointer;\n text-align: center;\n @media (max-width: 768px) {\n justify-content: end;\n gap: 10px;\n padding-bottom: 20px;\n text-align: center;\n }\n"])));
|
|
19875
19875
|
var FullscreenVideo = newStyled.div(templateObject_3$p || (templateObject_3$p = __makeTemplateObject(["\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.7);\n z-index: 9999;\n"], ["\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.7);\n z-index: 9999;\n"])));
|
|
19876
19876
|
var ImageVideo = function (_a) {
|
|
@@ -19892,9 +19892,9 @@ var ImageVideo = function (_a) {
|
|
|
19892
19892
|
height: '100%',
|
|
19893
19893
|
} }, void 0)] }, void 0))] }, void 0));
|
|
19894
19894
|
};
|
|
19895
|
-
var templateObject_1$
|
|
19895
|
+
var templateObject_1$x, templateObject_2$q, templateObject_3$p;
|
|
19896
19896
|
|
|
19897
|
-
var ContainerDesktop = css(templateObject_1$
|
|
19897
|
+
var ContainerDesktop = css(templateObject_1$w || (templateObject_1$w = __makeTemplateObject(["\n flex: 0 0 50%;\n justify-content: space-around;\n height: 574px;\n"], ["\n flex: 0 0 50%;\n justify-content: space-around;\n height: 574px;\n"])));
|
|
19898
19898
|
var ContainerMobile = css(templateObject_2$p || (templateObject_2$p = __makeTemplateObject(["\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 16px;\n height: auto;\n @media (max-width: 768px) {\n max-height: fit-content;\n padding: 50px 15px;\n }\n"], ["\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 16px;\n height: auto;\n @media (max-width: 768px) {\n max-height: fit-content;\n padding: 50px 15px;\n }\n"])));
|
|
19899
19899
|
var Container$n = newStyled.div(templateObject_3$o || (templateObject_3$o = __makeTemplateObject(["\n padding: 60px 34px 40px 34px;\n display: flex;\n @media (min-width: 769px) {\n ", "\n }\n @media (max-width: 768px) {\n ", "\n }\n"], ["\n padding: 60px 34px 40px 34px;\n display: flex;\n @media (min-width: 769px) {\n ", "\n }\n @media (max-width: 768px) {\n ", "\n }\n"])), ContainerDesktop, ContainerMobile);
|
|
19900
19900
|
var TextContainer = newStyled.div(templateObject_4$l || (templateObject_4$l = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 0 15px;\n gap: 24px;\n text-align: center;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 0 15px;\n gap: 24px;\n text-align: center;\n"])));
|
|
@@ -19927,11 +19927,11 @@ var TextWithImage = function (_a) {
|
|
|
19927
19927
|
},
|
|
19928
19928
|
} }, void 0), jsx("div", { children: props.contentAfterButton }, void 0)] }, void 0), !imageLeftSide && !isMobile && (jsx(ImageVideo, { imageLink: (_d = props.imgVideo) === null || _d === void 0 ? void 0 : _d.imageLink, isMobile: isMobile, isVideo: (_e = props.imgVideo) === null || _e === void 0 ? void 0 : _e.isVideo }, void 0))] }), void 0));
|
|
19929
19929
|
};
|
|
19930
|
-
var templateObject_1$
|
|
19930
|
+
var templateObject_1$w, templateObject_2$p, templateObject_3$o, templateObject_4$l;
|
|
19931
19931
|
|
|
19932
19932
|
var slideInAnimation = function (distanceFromTop) {
|
|
19933
19933
|
if (distanceFromTop === void 0) { distanceFromTop = '124px'; }
|
|
19934
|
-
return keyframes(templateObject_1$
|
|
19934
|
+
return keyframes(templateObject_1$v || (templateObject_1$v = __makeTemplateObject(["\n from {\n top: 0;\n }\n to {\n top: ", ";\n }\n"], ["\n from {\n top: 0;\n }\n to {\n top: ", ";\n }\n"])), distanceFromTop);
|
|
19935
19935
|
};
|
|
19936
19936
|
var mobileSlideInAnimation = function (distanceFromTop) {
|
|
19937
19937
|
if (distanceFromTop === void 0) { distanceFromTop = '85px'; }
|
|
@@ -19956,7 +19956,7 @@ var ToastText = newStyled.p(templateObject_5$i || (templateObject_5$i = __makeTe
|
|
|
19956
19956
|
return (severity === 'error' ? '#C64844' : '#292929');
|
|
19957
19957
|
});
|
|
19958
19958
|
var CloseIcon = newStyled.div(templateObject_6$h || (templateObject_6$h = __makeTemplateObject(["\n margin-inline-start: auto;\n cursor: pointer;\n"], ["\n margin-inline-start: auto;\n cursor: pointer;\n"])));
|
|
19959
|
-
var templateObject_1$
|
|
19959
|
+
var templateObject_1$v, templateObject_2$o, templateObject_3$n, templateObject_4$k, templateObject_5$i, templateObject_6$h;
|
|
19960
19960
|
|
|
19961
19961
|
var Toast = React__default.forwardRef(function (_a, ref) {
|
|
19962
19962
|
var _b;
|
|
@@ -19978,7 +19978,7 @@ var Toast = React__default.forwardRef(function (_a, ref) {
|
|
|
19978
19978
|
});
|
|
19979
19979
|
Toast.displayName = 'Toast';
|
|
19980
19980
|
|
|
19981
|
-
var Wrapper$1 = newStyled.div(templateObject_1$
|
|
19981
|
+
var Wrapper$1 = newStyled.div(templateObject_1$u || (templateObject_1$u = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n"])));
|
|
19982
19982
|
var GrandTotal = newStyled.h1(templateObject_2$n || (templateObject_2$n = __makeTemplateObject(["\n margin: 0;\n font-size: 1.5rem;\n line-height: 2rem;\n font-weight: 700;\n color: ", ";\n display: block;\n align-items: center;\n"], ["\n margin: 0;\n font-size: 1.5rem;\n line-height: 2rem;\n font-weight: 700;\n color: ", ";\n display: block;\n align-items: center;\n"])), function (props) { return props.color; });
|
|
19983
19983
|
var Currency = newStyled.span(templateObject_3$m || (templateObject_3$m = __makeTemplateObject(["\n margin: 0;\n margin-right: 0.625rem;\n font-weight: 600;\n color: ", ";\n font-size: ", ";\n line-height: ", ";\n align-self: ", ";\n"], ["\n margin: 0;\n margin-right: 0.625rem;\n font-weight: 600;\n color: ", ";\n font-size: ", ";\n line-height: ", ";\n align-self: ", ";\n"])), function (_a) {
|
|
19984
19984
|
var theme = _a.theme;
|
|
@@ -20007,7 +20007,7 @@ var DiscountAmount = newStyled.h3(templateObject_7$f || (templateObject_7$f = __
|
|
|
20007
20007
|
return theme.component.total.basicTotal.savings.amountFontWeight;
|
|
20008
20008
|
});
|
|
20009
20009
|
var TotalLabel = newStyled(Text$7)(templateObject_8$b || (templateObject_8$b = __makeTemplateObject(["\n font-size: 20px;\n"], ["\n font-size: 20px;\n"])));
|
|
20010
|
-
var templateObject_1$
|
|
20010
|
+
var templateObject_1$u, templateObject_2$n, templateObject_3$m, templateObject_4$j, templateObject_5$h, templateObject_6$g, templateObject_7$f, templateObject_8$b;
|
|
20011
20011
|
|
|
20012
20012
|
var Total = function (_a) {
|
|
20013
20013
|
var total = _a.total, currency = _a.currency, saving = _a.saving, _b = _a.highlightColor, highlightColor = _b === void 0 ? '#2f806a' : _b, _c = _a.showTotalLabel, showTotalLabel = _c === void 0 ? false : _c;
|
|
@@ -20015,7 +20015,7 @@ var Total = function (_a) {
|
|
|
20015
20015
|
return (jsxs$1(Wrapper$1, __assign$1({ "data-testid": "total-wrapper" }, { children: [jsxs$1(TotalContainer, __assign$1({ showTotalLabel: showTotalLabel }, { children: [showTotalLabel && (jsx$1(TotalLabel, __assign$1({ variant: "heading6", size: "regular", weight: "bold" }, { children: "Total" }), void 0)), jsxs$1(GrandTotal, __assign$1({ color: theme.component.total.basicTotal.amount.color, "data-testid": "total-price" }, { children: [jsx$1(Currency, { children: currency }, void 0), total] }), void 0)] }), void 0), saving && (jsxs$1(Container$m, __assign$1({ "data-testid": "subtotal-container", highlightColor: highlightColor }, { children: [jsx$1(DiscountText, __assign$1({ "data-testid": "saving-title" }, { children: saving.savingText }), void 0), jsx$1(DiscountAmount, __assign$1({ "data-testid": "saving-price" }, { children: saving.amount }), void 0)] }), void 0))] }), void 0));
|
|
20016
20016
|
};
|
|
20017
20017
|
|
|
20018
|
-
var Wrapper = newStyled.div(templateObject_1$
|
|
20018
|
+
var Wrapper = newStyled.div(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
20019
20019
|
var color = _a.color;
|
|
20020
20020
|
return color;
|
|
20021
20021
|
});
|
|
@@ -20040,14 +20040,14 @@ var Subtotal = function (_a) {
|
|
|
20040
20040
|
return (jsxs$1(ItemContainer, { children: [jsxs$1(CouponItem, __assign$1({ color: highlightColor, "data-testid": "discount-title" }, { children: [coupon.couponText, " ", code, " ", coupon.appliedText] }), void 0), jsx$1(CouponItem, __assign$1({ color: highlightColor, "data-testid": "discount-price" }, { children: amount }), void 0)] }, code));
|
|
20041
20041
|
})] }), void 0));
|
|
20042
20042
|
};
|
|
20043
|
-
var templateObject_1$
|
|
20043
|
+
var templateObject_1$t, templateObject_2$m, templateObject_3$l, templateObject_4$i;
|
|
20044
20044
|
|
|
20045
20045
|
var Totals = {
|
|
20046
20046
|
Total: Total,
|
|
20047
20047
|
Subtotal: Subtotal,
|
|
20048
20048
|
};
|
|
20049
20049
|
|
|
20050
|
-
var Container$l = newStyled.div(templateObject_1$
|
|
20050
|
+
var Container$l = newStyled.div(templateObject_1$s || (templateObject_1$s = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
20051
20051
|
var CheckpointContainer$1 = newStyled.div(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
20052
20052
|
var CheckpointDate$1 = newStyled.div(templateObject_3$k || (templateObject_3$k = __makeTemplateObject(["\n display: flex;\n justify-content: flex-start;\n flex-direction: column;\n padding-bottom: ", ";\n width: 60px;\n min-width: 60px;\n margin-right: 10px;\n"], ["\n display: flex;\n justify-content: flex-start;\n flex-direction: column;\n padding-bottom: ", ";\n width: 60px;\n min-width: 60px;\n margin-right: 10px;\n"])), function (props) { return props.currentSpace; });
|
|
20053
20053
|
var CheckpointDateLabel$1 = newStyled.p(templateObject_4$h || (templateObject_4$h = __makeTemplateObject(["\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n font-weight: ", ";\n"], ["\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n font-weight: ", ";\n"])), function (props) { return (props.lastElement ? '600' : '400'); });
|
|
@@ -20099,9 +20099,9 @@ var TrackingProgressV2 = function (_a) {
|
|
|
20099
20099
|
return (jsxs$1(CheckpointContainer$1, __assign$1({ "data-testid": "empty-checkpoint-track" }, { children: [jsxs$1(CheckpointDate$1, __assign$1({ currentSpace: "90px" }, { children: [jsx$1(CheckpointDateLabel$1, { lastElement: index + 1 === emptySpaces.length }, void 0), jsx$1(CheckpointDateLabel$1, { lastElement: index + 1 === emptySpaces.length }, void 0)] }), void 0), index + 1 !== emptySpaces.length && (jsx$1(ActiveCheckpointTrack$1, __assign$1({ trackColor: theme.colors.shades['200'].color }, { children: jsx$1(ActiveCheckpointDot$1, { firstElement: false }, void 0) }), void 0)), index + 1 === emptySpaces.length && (jsx$1(LastActiveCheckpointDot, __assign$1({ trackColor: theme.colors.shades['200'].color }, { children: jsx$1(ActiveCheckpointDot$1, { firstElement: false }, void 0) }), void 0)), jsx$1(CheckpointStatus$1, __assign$1({ finishedTrack: false }, { children: statusMessage }), void 0)] }), index));
|
|
20100
20100
|
})] }), void 0));
|
|
20101
20101
|
};
|
|
20102
|
-
var templateObject_1$
|
|
20102
|
+
var templateObject_1$s, templateObject_2$l, templateObject_3$k, templateObject_4$h, templateObject_5$g, templateObject_6$f, templateObject_7$e, templateObject_8$a, templateObject_9$7, templateObject_10$5, templateObject_11$3;
|
|
20103
20103
|
|
|
20104
|
-
var Container$k = newStyled.div(templateObject_1$
|
|
20104
|
+
var Container$k = newStyled.div(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
20105
20105
|
var CheckpointContainer = newStyled.div(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
20106
20106
|
var CheckpointDate = newStyled.div(templateObject_3$j || (templateObject_3$j = __makeTemplateObject(["\n display: flex;\n justify-content: flex-start;\n flex-direction: column;\n padding-bottom: ", ";\n width: 60px;\n min-width: 60px;\n margin-right: 10px;\n"], ["\n display: flex;\n justify-content: flex-start;\n flex-direction: column;\n padding-bottom: ", ";\n width: 60px;\n min-width: 60px;\n margin-right: 10px;\n"])), function (props) { return props.currentSpace; });
|
|
20107
20107
|
var CheckpointDateLabel = newStyled.p(templateObject_4$g || (templateObject_4$g = __makeTemplateObject(["\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n font-weight: ", ";\n"], ["\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n font-weight: ", ";\n"])), function (props) { return (props.lastElement ? '600' : '400'); });
|
|
@@ -20139,9 +20139,9 @@ var TrackingProgress = function (_a) {
|
|
|
20139
20139
|
return (jsxs$1(CheckpointContainer, __assign$1({ "data-testid": "empty-checkpoint-track" }, { children: [jsxs$1(CheckpointDate, __assign$1({ currentSpace: getCurrentSpace(index) }, { children: [jsx$1(CheckpointDateLabel, { lastElement: index + 1 === emptySpaces.length }, void 0), jsx$1(CheckpointDateLabel, { lastElement: index + 1 === emptySpaces.length }, void 0)] }), void 0), index + 1 !== emptySpaces.length && (jsx$1(ActiveCheckpointTrack, { trackColor: theme.colors.shades['200'].color, firstElement: false, lastElement: index + 2 === emptySpaces.length }, void 0)), jsx$1(CheckpointStatus, { finishedTrack: false }, void 0)] }), index));
|
|
20140
20140
|
})] }), void 0));
|
|
20141
20141
|
};
|
|
20142
|
-
var templateObject_1$
|
|
20142
|
+
var templateObject_1$r, templateObject_2$k, templateObject_3$j, templateObject_4$g, templateObject_5$f, templateObject_6$e, templateObject_7$d, templateObject_8$9;
|
|
20143
20143
|
|
|
20144
|
-
var AutoShipCardContainerWrapper$1 = newStyled.div(templateObject_1$
|
|
20144
|
+
var AutoShipCardContainerWrapper$1 = newStyled.div(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 1rem;\n border: ", "\n border-radius: 8px;\n padding: 10px;\n"], ["\n display: flex;\n flex-direction: column;\n gap: 1rem;\n border: ", "\n border-radius: 8px;\n padding: 10px;\n"])), function (_a) {
|
|
20145
20145
|
var checked = _a.checked;
|
|
20146
20146
|
return (checked ? 'none' : '1px solid #e5e5e5;');
|
|
20147
20147
|
});
|
|
@@ -20151,7 +20151,7 @@ var AutoShipBodyTitle$1 = newStyled.div(templateObject_4$f || (templateObject_4$
|
|
|
20151
20151
|
var AutoShipBodyListItem$1 = newStyled.div(templateObject_5$e || (templateObject_5$e = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n gap: 10px;\n"], ["\n display: flex;\n flex-direction: row;\n gap: 10px;\n"])));
|
|
20152
20152
|
var AutoShipBodyListWrapper$1 = newStyled.div(templateObject_6$d || (templateObject_6$d = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 10px;\n padding: 10px 10px 10px 10px;\n"], ["\n display: flex;\n flex-direction: column;\n gap: 10px;\n padding: 10px 10px 10px 10px;\n"])));
|
|
20153
20153
|
var CheckboxInput = newStyled.input(templateObject_7$c || (templateObject_7$c = __makeTemplateObject(["\n width: 22px;\n height: 22px;\n gap: 0px;\n border-radius: 4px;\n border: 1px 0px 0px 0px;\n opacity: 0px;\n :checked {\n accent-color: #292929;\n }\n"], ["\n width: 22px;\n height: 22px;\n gap: 0px;\n border-radius: 4px;\n border: 1px 0px 0px 0px;\n opacity: 0px;\n :checked {\n accent-color: #292929;\n }\n"])));
|
|
20154
|
-
var templateObject_1$
|
|
20154
|
+
var templateObject_1$q, templateObject_2$j, templateObject_3$i, templateObject_4$f, templateObject_5$e, templateObject_6$d, templateObject_7$c;
|
|
20155
20155
|
|
|
20156
20156
|
function AutoshipOfferCard(_a) {
|
|
20157
20157
|
var showMore = _a.showMore, copyList = _a.copyList, copy = _a.copy, handleCheckBoxChange = _a.handleCheckBoxChange, _b = _a.isChecked, isChecked = _b === void 0 ? false : _b;
|
|
@@ -20175,7 +20175,7 @@ function AutoshipOfferCard(_a) {
|
|
|
20175
20175
|
return (jsxs$1(AutoShipCardContainerWrapper$1, __assign$1({ checked: check }, { children: [jsxs$1(AutoShipHeaderBarWrapper$1, { children: [jsx$1("div", { children: jsx$1(CheckboxInput, { type: "checkbox", onChange: handleCheckBox, checked: check, "data-testid": "autoshipcheckbox" }, void 0) }, void 0), jsx$1("div", { children: renderCopy(copy) }, void 0)] }, void 0), !check && (jsxs$1(AutoShipBodyWrapper$1, { children: [jsxs$1(AutoShipBodyTitle$1, __assign$1({ onClick: handleShowMore }, { children: [jsx$1("span", { children: showMoreBenefits ? renderCopy(showMore.openedCopy) : renderCopy(showMore.closedCopy) }, void 0), jsx$1(Icon$1, { name: showMoreBenefits ? 'arrows/chevron_up' : 'arrows/chevron_down' }, showMoreBenefits ? 'icon-up' : 'icon-down')] }), void 0), showMoreBenefits && (jsx$1(AutoShipBodyListWrapper$1, { children: copyList.map(function (item) { return (jsxs$1(AutoShipBodyListItem$1, { children: [jsx$1(Icon$1, { name: item.icon, fill: "#D4605B", width: "19px", height: "19px" }, void 0), renderCopy(item.copy)] }, item.icon)); }) }, void 0))] }, void 0))] }), void 0));
|
|
20176
20176
|
}
|
|
20177
20177
|
|
|
20178
|
-
var AutoShipCardContainerWrapper = newStyled.div(templateObject_1$
|
|
20178
|
+
var AutoShipCardContainerWrapper = newStyled.div(templateObject_1$p || (templateObject_1$p = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 1rem;\n border: ", "\n border-radius: 8px;\n padding: 10px;\n"], ["\n display: flex;\n flex-direction: column;\n gap: 1rem;\n border: ", "\n border-radius: 8px;\n padding: 10px;\n"])), function (_a) {
|
|
20179
20179
|
var checked = _a.checked;
|
|
20180
20180
|
return (checked ? 'none' : '1px solid #e5e5e5;');
|
|
20181
20181
|
});
|
|
@@ -20186,7 +20186,7 @@ var AutoShipBodyListItem = newStyled.div(templateObject_5$d || (templateObject_5
|
|
|
20186
20186
|
var AutoShipBodyListWrapper = newStyled.div(templateObject_6$c || (templateObject_6$c = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 10px;\n padding: 10px 10px 10px 10px;\n"], ["\n display: flex;\n flex-direction: column;\n gap: 10px;\n padding: 10px 10px 10px 10px;\n"])));
|
|
20187
20187
|
newStyled.input(templateObject_7$b || (templateObject_7$b = __makeTemplateObject(["\n width: 22px;\n height: 22px;\n gap: 0px;\n border-radius: 4px;\n border: 1px 0px 0px 0px;\n opacity: 0px;\n :checked {\n accent-color: #292929;\n }\n"], ["\n width: 22px;\n height: 22px;\n gap: 0px;\n border-radius: 4px;\n border: 1px 0px 0px 0px;\n opacity: 0px;\n :checked {\n accent-color: #292929;\n }\n"])));
|
|
20188
20188
|
var ButtonRemoveWrapper = newStyled.div(templateObject_8$8 || (templateObject_8$8 = __makeTemplateObject(["\n color: #292929;\n font-size: 14px;\n font-weight: 400;\n line-height: 22px;\n text-align: left;\n text-decoration: underline;\n :hover {\n cursor: pointer;\n }\n"], ["\n color: #292929;\n font-size: 14px;\n font-weight: 400;\n line-height: 22px;\n text-align: left;\n text-decoration: underline;\n :hover {\n cursor: pointer;\n }\n"])));
|
|
20189
|
-
var templateObject_1$
|
|
20189
|
+
var templateObject_1$p, templateObject_2$i, templateObject_3$h, templateObject_4$e, templateObject_5$d, templateObject_6$c, templateObject_7$b, templateObject_8$8;
|
|
20190
20190
|
|
|
20191
20191
|
function AutoshipOfferCardCta(_a) {
|
|
20192
20192
|
var showMore = _a.showMore, copyList = _a.copyList, copy = _a.copy, handleCheckBoxChange = _a.handleCheckBoxChange, _b = _a.isChecked, isChecked = _b === void 0 ? false : _b, buttonCopy = _a.buttonCopy;
|
|
@@ -20204,7 +20204,7 @@ function AutoshipOfferCardCta(_a) {
|
|
|
20204
20204
|
return (jsxs$1(AutoShipCardContainerWrapper, __assign$1({ checked: check }, { children: [jsxs$1(AutoShipHeaderBarWrapper, { children: [jsx$1("div", { children: copy }, void 0), check && (jsx$1(ButtonRemoveWrapper, __assign$1({ tabIndex: 0, role: "button", onKeyDown: handleCheckBox, onClick: handleCheckBox }, { children: "Remove" }), void 0))] }, void 0), !check && (jsxs$1(Fragment$2, { children: [jsxs$1(AutoShipBodyWrapper, { children: [(showMore === null || showMore === void 0 ? void 0 : showMore.openedCopy) && (showMore === null || showMore === void 0 ? void 0 : showMore.closedCopy) && (jsxs$1(AutoShipBodyTitle, __assign$1({ onClick: handleShowMore }, { children: [jsx$1("span", { children: showMoreBenefits ? showMore.openedCopy : showMore.closedCopy }, void 0), jsx$1(Icon$1, { name: showMoreBenefits ? 'arrows/chevron_up' : 'arrows/chevron_down' }, showMoreBenefits ? 'icon-up' : 'icon-down')] }), void 0)), showMoreBenefits && (jsx$1(AutoShipBodyListWrapper, { children: copyList.map(function (item) { return (jsxs$1(AutoShipBodyListItem, { children: [jsx$1(Icon$1, { name: item.icon, fill: "#D4605B", width: "19px", height: "19px" }, void 0), item.copy] }, item.icon)); }) }, void 0))] }, void 0), jsx$1("div", { children: jsx$1(ButtonSecondary, { onClick: handleCheckBox, text: buttonCopy, wide: true }, void 0) }, void 0)] }, void 0))] }), void 0));
|
|
20205
20205
|
}
|
|
20206
20206
|
|
|
20207
|
-
var StyledButton = newStyled(Ye.Button)(function (props) { return ({
|
|
20207
|
+
var StyledButton$1 = newStyled(Ye.Button)(function (props) { return ({
|
|
20208
20208
|
background: props.bgColor,
|
|
20209
20209
|
height: '100%',
|
|
20210
20210
|
width: '100%',
|
|
@@ -20226,7 +20226,7 @@ var StyledPanel = newStyled(Ye.Panel)({
|
|
|
20226
20226
|
justifyContent: 'center',
|
|
20227
20227
|
gap: '10px',
|
|
20228
20228
|
});
|
|
20229
|
-
var StyledContent = newStyled.div(templateObject_1$
|
|
20229
|
+
var StyledContent = newStyled.div(templateObject_1$o || (templateObject_1$o = __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) {
|
|
20230
20230
|
var bgColor = _a.bgColor;
|
|
20231
20231
|
return bgColor !== null && bgColor !== void 0 ? bgColor : '';
|
|
20232
20232
|
}, function (_a) {
|
|
@@ -20234,7 +20234,7 @@ var StyledContent = newStyled.div(templateObject_1$n || (templateObject_1$n = __
|
|
|
20234
20234
|
return width;
|
|
20235
20235
|
});
|
|
20236
20236
|
var StyledController = newStyled.div(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n display: flex;\n align-items: flex-start;\n justify-content: flex-start;\n min-width: fit-content;\n appearance: none;\n padding: 0;\n margin: 0;\n border: none;\n background: none;\n font-size: inherit;\n line-height: inherit;\n color: inherit;\n user-select: text;\n writing-mode: unset;\n font-family: inherit;\n cursor: pointer;\n gap: 5px;\n"], ["\n display: flex;\n align-items: flex-start;\n justify-content: flex-start;\n min-width: fit-content;\n appearance: none;\n padding: 0;\n margin: 0;\n border: none;\n background: none;\n font-size: inherit;\n line-height: inherit;\n color: inherit;\n user-select: text;\n writing-mode: unset;\n font-family: inherit;\n cursor: pointer;\n gap: 5px;\n"])));
|
|
20237
|
-
var templateObject_1$
|
|
20237
|
+
var templateObject_1$o, templateObject_2$h;
|
|
20238
20238
|
|
|
20239
20239
|
var StyledDisclosure = newStyled(Ye)(function (_a) {
|
|
20240
20240
|
var background = _a.background, width = _a.width;
|
|
@@ -20265,7 +20265,7 @@ var HeaderContentComponent = memo(function (_a) {
|
|
|
20265
20265
|
HeaderContentComponent.displayName = 'HeaderContentComponent';
|
|
20266
20266
|
var AccordionContent = function (_a) {
|
|
20267
20267
|
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;
|
|
20268
|
-
return (jsxs$1(Fragment$2, { children: [jsxs$1(StyledButton, __assign$1({ "data-testid": "styled-button", disabled: disabled, bgColor: bgColor }, { children: [jsx$1(HeaderContentComponent, { open: open, header: header, headerOnOpen: headerOnOpen }, void 0), jsxs$1(StyledController, { children: [jsx$1(Text$7, __assign$1({ variant: "body", weight: "demi", size: "small", color: fillControlsCollor }, { children: "View Offers" }), void 0), jsx$1("span", __assign$1({ style: { marginTop: '3px' } }, { children: jsx$1(ControlIconComponent, { open: open, openIcon: openIcon, closeIcon: closeIcon, fillControlsCollor: fillControlsCollor }, void 0) }), void 0)] }, void 0)] }), void 0), open && (jsx$1(StyledContent, __assign$1({ width: contentWidth, bgColor: bgColor, onClick: function (e) { return e.stopPropagation(); } }, { children: jsx$1(StyledPanel, { children: children }, void 0) }), void 0))] }, void 0));
|
|
20268
|
+
return (jsxs$1(Fragment$2, { children: [jsxs$1(StyledButton$1, __assign$1({ "data-testid": "styled-button", disabled: disabled, bgColor: bgColor }, { children: [jsx$1(HeaderContentComponent, { open: open, header: header, headerOnOpen: headerOnOpen }, void 0), jsxs$1(StyledController, { children: [jsx$1(Text$7, __assign$1({ variant: "body", weight: "demi", size: "small", color: fillControlsCollor }, { children: "View Offers" }), void 0), jsx$1("span", __assign$1({ style: { marginTop: '3px' } }, { children: jsx$1(ControlIconComponent, { open: open, openIcon: openIcon, closeIcon: closeIcon, fillControlsCollor: fillControlsCollor }, void 0) }), void 0)] }, void 0)] }), void 0), open && (jsx$1(StyledContent, __assign$1({ width: contentWidth, bgColor: bgColor, onClick: function (e) { return e.stopPropagation(); } }, { children: jsx$1(StyledPanel, { children: children }, void 0) }), void 0))] }, void 0));
|
|
20269
20269
|
};
|
|
20270
20270
|
var BasicAccordion = function (_a) {
|
|
20271
20271
|
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;
|
|
@@ -20275,14 +20275,14 @@ var BasicAccordion = function (_a) {
|
|
|
20275
20275
|
} }), void 0));
|
|
20276
20276
|
};
|
|
20277
20277
|
|
|
20278
|
-
var ContainerWrapper$1 = newStyled.div(templateObject_1$
|
|
20278
|
+
var ContainerWrapper$1 = newStyled.div(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n max-height: 180px;\n width: auto;\n max-width: 450px;\n gap: 5px;\n @media (max-width: 480px) {\n gap: 0px;\n font-size: 12px !important;\n }\n"], ["\n display: flex;\n flex-direction: row;\n max-height: 180px;\n width: auto;\n max-width: 450px;\n gap: 5px;\n @media (max-width: 480px) {\n gap: 0px;\n font-size: 12px !important;\n }\n"])));
|
|
20279
20279
|
var ImageWrapper$1 = newStyled.div(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n max-width: 132px;\n max-height: 160px;\n border-radius: 6px;\n @media (max-width: 480px) {\n width: 102px;\n height: 123px;\n }\n"], ["\n max-width: 132px;\n max-height: 160px;\n border-radius: 6px;\n @media (max-width: 480px) {\n width: 102px;\n height: 123px;\n }\n"])));
|
|
20280
20280
|
var ImageComponent = newStyled(Image$3)(templateObject_3$g || (templateObject_3$g = __makeTemplateObject(["\n max-width: 132px;\n max-height: 160px;\n border-radius: 6px;\n position: relative;\n @media (max-width: 480px) {\n max-width: 102px;\n max-height: 123px;\n }\n"], ["\n max-width: 132px;\n max-height: 160px;\n border-radius: 6px;\n position: relative;\n @media (max-width: 480px) {\n max-width: 102px;\n max-height: 123px;\n }\n"])));
|
|
20281
20281
|
var RightComponentWrapper = newStyled.div(templateObject_4$d || (templateObject_4$d = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n gap: 4px;\n padding: 5px;\n @media (max-width: 401px) {\n gap: 0px;\n padding: 0px;\n }\n"], ["\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n gap: 4px;\n padding: 5px;\n @media (max-width: 401px) {\n gap: 0px;\n padding: 0px;\n }\n"])));
|
|
20282
20282
|
var TitleWrapper = newStyled.div(templateObject_5$c || (templateObject_5$c = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n"], ["\n display: flex;\n flex-direction: row;\n"])));
|
|
20283
20283
|
var SubTitleWrapper = newStyled.div(templateObject_6$b || (templateObject_6$b = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n"], ["\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n"])));
|
|
20284
20284
|
var ButtonsWrapper = newStyled.div(templateObject_7$a || (templateObject_7$a = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n"], ["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n"])));
|
|
20285
|
-
var templateObject_1$
|
|
20285
|
+
var templateObject_1$n, templateObject_2$g, templateObject_3$g, templateObject_4$d, templateObject_5$c, templateObject_6$b, templateObject_7$a;
|
|
20286
20286
|
|
|
20287
20287
|
function CartItemCard(_a) {
|
|
20288
20288
|
var style = _a.style, className = _a.className, children = _a.children;
|
|
@@ -20328,7 +20328,7 @@ var Shades200Color = '#bbbbbb';
|
|
|
20328
20328
|
var Shades700Color = '#292929';
|
|
20329
20329
|
var PrimaryColor = '#f7a08b';
|
|
20330
20330
|
var ClubBorderColor = '#882a2b';
|
|
20331
|
-
var FlexContainer$1 = newStyled.div(templateObject_1$
|
|
20331
|
+
var FlexContainer$1 = newStyled.div(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
20332
20332
|
var DiscountTag$1 = newStyled.div(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n position: absolute;\n top: -24px;\n right: 18px;\n background: ", ";\n color: white;\n padding: 5px 10px;\n font-size: 12px;\n font-weight: bold;\n line-height: 14px;\n border-radius: 6px 6px 0 0;\n"], ["\n position: absolute;\n top: -24px;\n right: 18px;\n background: ", ";\n color: white;\n padding: 5px 10px;\n font-size: 12px;\n font-weight: bold;\n line-height: 14px;\n border-radius: 6px 6px 0 0;\n"])), ClubGradient);
|
|
20333
20333
|
var ContainerBase$1 = newStyled.div(templateObject_3$f || (templateObject_3$f = __makeTemplateObject(["\n border-radius: 8px;\n\n border: ", ";\n\n ", "\n\n & input:checked + div {\n border-color: ", ";\n }\n\n & label {\n cursor: pointer;\n }\n"], ["\n border-radius: 8px;\n\n border: ", ";\n\n ", "\n\n & input:checked + div {\n border-color: ", ";\n }\n\n & label {\n cursor: pointer;\n }\n"])), function (_a) {
|
|
20334
20334
|
var selected = _a.selected;
|
|
@@ -20371,7 +20371,7 @@ var StyledPrice$1 = newStyled(PriceLabelV2$1)(templateObject_10$4 || (templateOb
|
|
|
20371
20371
|
: Shades200Color;
|
|
20372
20372
|
});
|
|
20373
20373
|
var Container$j = newStyled.div(templateObject_11$2 || (templateObject_11$2 = __makeTemplateObject(["\n margin-top: 20px;\n"], ["\n margin-top: 20px;\n"])));
|
|
20374
|
-
var templateObject_1$
|
|
20374
|
+
var templateObject_1$m, templateObject_2$f, templateObject_3$f, templateObject_4$c, templateObject_5$b, templateObject_6$a, templateObject_7$9, templateObject_8$7, templateObject_9$6, templateObject_10$4, templateObject_11$2;
|
|
20375
20375
|
|
|
20376
20376
|
var ClubOfferSelector = function (_a) {
|
|
20377
20377
|
var pricing = _a.pricing, clubOfferBenefits = _a.clubOfferBenefits, benefits = _a.benefits, onChange = _a.onChange, singlePurchaseLabel = _a.singlePurchaseLabel, subscriptionLabel = _a.subscriptionLabel, className = _a.className, _b = _a.currencySymbol, currencySymbol = _b === void 0 ? '$' : _b, discountLabel = _a.discountLabel, disabledInputs = _a.disabledInputs;
|
|
@@ -20417,7 +20417,7 @@ var ClubOfferSelector = function (_a) {
|
|
|
20417
20417
|
}, useV2Style: true, onChange: function () { }, disabled: disabledInputs && disabledInputs.includes(radioIds.clubOfferSelector.id) }, void 0) }, void 0), jsx$1(StyledPrice$1, { testId: "subscription", finalPrice: "".concat(currencySymbol).concat(decimalFormat(Number(clubOfferFinalPrice))), selected: isSelected, size: ComponentSize.Large, originalPrice: "".concat(currencySymbol).concat(decimalFormat(Number(listPrice))) }, void 0)] }), void 0), isSelected && (jsx$1(BenefitsContainer$1, { children: updatedClubOfferBenefits.map(function (benefit) { return (jsx$1(Benefit$1, { children: jsx$1(BenefitText, { variant: "body", dangerouslySetInnerHTML: { __html: benefit } }, void 0) }, benefit)); }) }, void 0))] }), void 0), jsxs$1(SinglePurchaseContainer$1, __assign$1({ isNoMember: true, "data-testid": "single-purchase-block", selected: radioIds.oneTime.id === radioCheck.id, onClick: function () { return handleChange(radioIds.oneTime, 'radio'); } }, { children: [jsx$1(RadioInput, { label: singlePurchaseLabel, name: radioIds.oneTime.id, id: radioIds.oneTime.id, value: radioIds.oneTime.id, checked: radioIds.oneTime.id === radioCheck.id, size: ComponentSize.Medium, onChange: function () { }, useV2Style: true, disabled: disabledInputs && disabledInputs.includes(radioIds.oneTime.id) }, void 0), jsx$1(StyledPrice$1, { isNoMember: true, testId: "single-purchase", finalPrice: "".concat(currencySymbol).concat(decimalFormat(Number(discountedPrice))), selected: radioIds.oneTime.id === radioCheck.id, size: ComponentSize.Large, originalPrice: "".concat(currencySymbol).concat(decimalFormat(Number(listPrice))) }, void 0)] }), void 0)] }), void 0));
|
|
20418
20418
|
};
|
|
20419
20419
|
|
|
20420
|
-
var ContainerWrapper = newStyled.div(templateObject_1$
|
|
20420
|
+
var ContainerWrapper = newStyled.div(templateObject_1$l || (templateObject_1$l = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n width: 100%;\n height: 100%;\n padding: 8px 10px 8px 15px;\n background: white;\n gap: 10px;\n border-radius: 6px;\n background: ", ";\n border: 1px solid ", ";\n"], ["\n display: flex;\n flex-direction: column;\n width: 100%;\n height: 100%;\n padding: 8px 10px 8px 15px;\n background: white;\n gap: 10px;\n border-radius: 6px;\n background: ", ";\n border: 1px solid ", ";\n"])), function (_a) {
|
|
20421
20421
|
var $checked = _a.$checked;
|
|
20422
20422
|
return ($checked ? '#FFF3E3' : '#FAFAFA');
|
|
20423
20423
|
}, function (_a) {
|
|
@@ -20428,22 +20428,27 @@ var CardHeaderWrapper = newStyled.div(templateObject_2$e || (templateObject_2$e
|
|
|
20428
20428
|
var CardBody = newStyled.div(templateObject_3$e || (templateObject_3$e = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n font-size: 12px;\n font-weight: 400;\n line-height: 16px;\n text-align: left;\n color: #292929;\n gap: 4px;\n a {\n color: #292929;\n text-decoration: underline;\n }\n"], ["\n display: flex;\n flex-direction: row;\n font-size: 12px;\n font-weight: 400;\n line-height: 16px;\n text-align: left;\n color: #292929;\n gap: 4px;\n a {\n color: #292929;\n text-decoration: underline;\n }\n"])));
|
|
20429
20429
|
var ClubCopyWrapper = newStyled.div(templateObject_4$b || (templateObject_4$b = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n gap: 5px;\n"], ["\n display: flex;\n flex-direction: row;\n gap: 5px;\n"])));
|
|
20430
20430
|
var ClubCopyTextWrapper = newStyled.div(templateObject_5$a || (templateObject_5$a = __makeTemplateObject(["\n font-size: 14px;\n font-weight: 600;\n line-height: 22px;\n"], ["\n font-size: 14px;\n font-weight: 600;\n line-height: 22px;\n"])));
|
|
20431
|
-
var templateObject_1$
|
|
20431
|
+
var templateObject_1$l, templateObject_2$e, templateObject_3$e, templateObject_4$b, templateObject_5$a;
|
|
20432
20432
|
|
|
20433
20433
|
function Card(_a) {
|
|
20434
20434
|
var children = _a.children, link = _a.link, icon = _a.icon, _b = _a.isChecked, isChecked = _b === void 0 ? false : _b, bodyCopy = _a.bodyCopy, titleCopy = _a.titleCopy, style = _a.style;
|
|
20435
20435
|
return (jsxs$1(ContainerWrapper, __assign$1({ "$checked": isChecked, style: style }, { children: [jsxs$1(CardHeaderWrapper, { children: [jsxs$1(ClubCopyWrapper, { children: [icon, jsx$1(ClubCopyTextWrapper, { children: titleCopy }, void 0)] }, void 0), jsx$1("div", { children: children }, void 0)] }, void 0), !isChecked && (jsxs$1(CardBody, __assign$1({ id: "joinClubCardBody" }, { children: [bodyCopy, ' ', jsx$1("a", __assign$1({ href: link, target: "_blank", rel: "noreferrer" }, { children: "Terms here." }), void 0)] }), void 0))] }), void 0));
|
|
20436
20436
|
}
|
|
20437
20437
|
|
|
20438
|
+
var StyledButton = newStyled.button(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n padding: 10px 20px;\n border-radius: 8px;\n background: var(--shapermint-default-complementary-wine-882-a-2-b, #882a2b);\n color: var(--neutrals-white-ffffff, #fff);\n text-align: center;\n font-family: 'Avenir Next';\n font-size: 14px;\n font-style: normal;\n font-weight: 600;\n line-height: 18px;\n text-transform: uppercase;\n border: none;\n cursor: pointer;\n ", ";\n"], ["\n padding: 10px 20px;\n border-radius: 8px;\n background: var(--shapermint-default-complementary-wine-882-a-2-b, #882a2b);\n color: var(--neutrals-white-ffffff, #fff);\n text-align: center;\n font-family: 'Avenir Next';\n font-size: 14px;\n font-style: normal;\n font-weight: 600;\n line-height: 18px;\n text-transform: uppercase;\n border: none;\n cursor: pointer;\n ", ";\n"])), function (_a) {
|
|
20439
|
+
var customStyle = _a.customStyle;
|
|
20440
|
+
return customStyle && __assign$1({}, customStyle);
|
|
20441
|
+
});
|
|
20438
20442
|
var JoinClubCard = function (_a) {
|
|
20439
|
-
var onCheckToggle = _a.onCheckToggle, isChecked = _a.isChecked, icon = _a.icon, link = _a.link, bodyCopy = _a.bodyCopy, titleCopy = _a.titleCopy, style = _a.style;
|
|
20440
|
-
var
|
|
20443
|
+
var onCheckToggle = _a.onCheckToggle, isChecked = _a.isChecked, icon = _a.icon, link = _a.link, bodyCopy = _a.bodyCopy, titleCopy = _a.titleCopy, style = _a.style, _b = _a.showButton, showButton = _b === void 0 ? false : _b, _c = _a.buttonText, buttonText = _c === void 0 ? 'ADD' : _c, _d = _a.buttonStyle, buttonStyle = _d === void 0 ? {} : _d;
|
|
20444
|
+
var _e = useState(isChecked), checked = _e[0], setChecked = _e[1];
|
|
20441
20445
|
var handleToggleValue = function (value) {
|
|
20442
20446
|
setChecked(value);
|
|
20443
20447
|
onCheckToggle(value);
|
|
20444
20448
|
};
|
|
20445
|
-
return (jsx$1(Card, __assign$1({ link: link, icon: icon, isChecked: checked, bodyCopy: bodyCopy, titleCopy: titleCopy, style: style }, { children: jsx$1(ToggleComponent, { onToggle: handleToggleValue, isChecked:
|
|
20446
|
-
};
|
|
20449
|
+
return (jsx$1(Card, __assign$1({ link: link, icon: icon, isChecked: checked, bodyCopy: bodyCopy, titleCopy: titleCopy, style: style }, { children: showButton ? (jsx$1(StyledButton, __assign$1({ onClick: function () { return handleToggleValue(!checked); }, customStyle: buttonStyle }, { children: buttonText }), void 0)) : (jsx$1(ToggleComponent, { onToggle: handleToggleValue, isChecked: checked }, void 0)) }), void 0));
|
|
20450
|
+
};
|
|
20451
|
+
var templateObject_1$k;
|
|
20447
20452
|
|
|
20448
20453
|
var ImageContainer$1 = newStyled.div(function (_a) {
|
|
20449
20454
|
var width = _a.width, height = _a.height;
|