@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.js
CHANGED
|
@@ -3220,7 +3220,7 @@ var getStylesBySize$g = function (size) {
|
|
|
3220
3220
|
};
|
|
3221
3221
|
}
|
|
3222
3222
|
};
|
|
3223
|
-
var Container$1q = newStyled.div(templateObject_1$
|
|
3223
|
+
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) {
|
|
3224
3224
|
var backgroundColor = _a.backgroundColor;
|
|
3225
3225
|
return backgroundColor;
|
|
3226
3226
|
}, function (_a) {
|
|
@@ -3259,7 +3259,7 @@ var ClubOfferTag = function (_a) {
|
|
|
3259
3259
|
var theme = useTheme();
|
|
3260
3260
|
return (jsxRuntime.jsx(Container$1q, __assign$1({ backgroundColor: disabled ? theme.colors.shades['50'].color : backgroundColor, borderColor: disabled ? theme.colors.shades['50'].color : borderColor, size: size, "data-testid": "cluboffer-container", style: style, className: className }, { children: jsxRuntime.jsx(H3$2, __assign$1({ textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size, style: { fontSize: '0.875rem', lineHeight: '18px' } }, { children: clubOfferText }), void 0) }), void 0));
|
|
3261
3261
|
};
|
|
3262
|
-
var templateObject_1$
|
|
3262
|
+
var templateObject_1$2n, templateObject_2$1H;
|
|
3263
3263
|
|
|
3264
3264
|
var getStylesBySize$f = function (size, bordersRounded, theme) {
|
|
3265
3265
|
var _a, _b, _c;
|
|
@@ -3290,7 +3290,7 @@ var getStylesBySize$f = function (size, bordersRounded, theme) {
|
|
|
3290
3290
|
};
|
|
3291
3291
|
}
|
|
3292
3292
|
};
|
|
3293
|
-
var Container$1p = newStyled.div(templateObject_1$
|
|
3293
|
+
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) {
|
|
3294
3294
|
var backgroundColor = _a.backgroundColor;
|
|
3295
3295
|
return backgroundColor;
|
|
3296
3296
|
}, function (_a) {
|
|
@@ -3329,7 +3329,7 @@ var DiscountTag$3 = function (_a) {
|
|
|
3329
3329
|
var theme = useTheme();
|
|
3330
3330
|
return (jsxRuntime.jsx(Container$1p, __assign$1({ backgroundColor: disabled ? theme.colors.shades['50'].color : backgroundColor, borderColor: disabled ? theme.colors.shades['50'].color : borderColor, size: size, "data-testid": "discount-container", style: style, bordersRounded: bordersRounded }, { children: jsxRuntime.jsxs(H3$1, __assign$1({ textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size, style: style, theme: theme }, { children: [discount, "% ", offText, " ", showSavings && savings && "- ".concat(savings)] }), void 0) }), void 0));
|
|
3331
3331
|
};
|
|
3332
|
-
var templateObject_1$
|
|
3332
|
+
var templateObject_1$2m, templateObject_2$1G;
|
|
3333
3333
|
|
|
3334
3334
|
var Viewports = {
|
|
3335
3335
|
mobile: 'mobile',
|
|
@@ -3438,7 +3438,7 @@ var getFontSize = function (size, theme, finalPriceStyled, finalPriceStyledSmall
|
|
|
3438
3438
|
return (_c = getStylesBySize$e(size, theme)) === null || _c === void 0 ? void 0 : _c.fontSize;
|
|
3439
3439
|
}
|
|
3440
3440
|
};
|
|
3441
|
-
var Container$1o = newStyled.div(templateObject_1$
|
|
3441
|
+
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"])));
|
|
3442
3442
|
var Price = newStyled.p(templateObject_2$1F || (templateObject_2$1F = __makeTemplateObject(["\n font-weight: ", ";\n font-size: ", ";\n line-height: ", ";\n color: ", ";\n text-decoration: ", ";\n margin: ", ";\n position: relative;\n margin-top: ", ";\n"], ["\n font-weight: ", ";\n font-size: ", ";\n line-height: ", ";\n color: ", ";\n text-decoration: ", ";\n margin: ", ";\n position: relative;\n margin-top: ", ";\n"])), function (_a) {
|
|
3443
3443
|
var weight = _a.weight;
|
|
3444
3444
|
return (weight ? weight : '400');
|
|
@@ -3496,9 +3496,9 @@ var PriceLabel$1 = function (_a) {
|
|
|
3496
3496
|
};
|
|
3497
3497
|
return (jsxRuntime.jsxs(Container$1o, __assign$1({}, rest, { id: "priceLabel" }, { children: [clubStyle ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [!!originalPrice && jsxRuntime.jsx(OriginalPrice, {}, void 0), jsxRuntime.jsx(Price, __assign$1({ margin: true, "data-testid": getTestId$1(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: finalPrice }), void 0)] }, void 0)) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Price, __assign$1({ margin: true, "data-testid": getTestId$1(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: finalPrice }), void 0), !!originalPrice && jsxRuntime.jsx(OriginalPrice, {}, void 0)] }, void 0)), discount && (jsxRuntime.jsx(TagContainer, __assign$1({ size: size }, { children: jsxRuntime.jsx(DiscountTag$3, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
|
|
3498
3498
|
};
|
|
3499
|
-
var templateObject_1$
|
|
3499
|
+
var templateObject_1$2l, templateObject_2$1F, templateObject_3$1h;
|
|
3500
3500
|
|
|
3501
|
-
var FinalPriceStyledContainer$3 = newStyled.div(templateObject_1$
|
|
3501
|
+
var FinalPriceStyledContainer$3 = newStyled.div(templateObject_1$2k || (templateObject_1$2k = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
3502
3502
|
var PriceLabelV2$1 = function (_a) {
|
|
3503
3503
|
var _b;
|
|
3504
3504
|
var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, discount = _a.discount, clubOffer = _a.clubOffer, color = _a.color, testId = _a.testId, _c = _a.originalPriceStyled, originalPriceStyled = _c === void 0 ? false : _c, _d = _a.originalPriceUnderlined, originalPriceUnderlined = _d === void 0 ? true : _d, _e = _a.size, size = _e === void 0 ? exports.ComponentSize.Small : _e, _f = _a.bordersRounded, bordersRounded = _f === void 0 ? false : _f, _g = _a.savingsDisplay, savingsDisplay = _g === void 0 ? true : _g, pricePerItem = _a.pricePerItem, _h = _a.hasRoundedSavings, hasRoundedSavings = _h === void 0 ? true : _h, rest = __rest(_a, ["finalPrice", "originalPrice", "discount", "clubOffer", "color", "testId", "originalPriceStyled", "originalPriceUnderlined", "size", "bordersRounded", "savingsDisplay", "pricePerItem", "hasRoundedSavings"]);
|
|
@@ -3567,9 +3567,9 @@ var PriceLabelV2$1 = function (_a) {
|
|
|
3567
3567
|
lineHeight: '22px',
|
|
3568
3568
|
} }), void 0)) }), void 0))] }), void 0));
|
|
3569
3569
|
};
|
|
3570
|
-
var templateObject_1$
|
|
3570
|
+
var templateObject_1$2k;
|
|
3571
3571
|
|
|
3572
|
-
var FinalPriceStyledContainer$2 = newStyled.div(templateObject_1$
|
|
3572
|
+
var FinalPriceStyledContainer$2 = newStyled.div(templateObject_1$2j || (templateObject_1$2j = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
3573
3573
|
var ContainerDirectionColumn = newStyled.div(templateObject_2$1E || (templateObject_2$1E = __makeTemplateObject(["\n display: column;\n align-items: center;\n"], ["\n display: column;\n align-items: center;\n"])));
|
|
3574
3574
|
var DiscountEachOneContainer = newStyled.div(templateObject_3$1g || (templateObject_3$1g = __makeTemplateObject(["\n display: flex;\n padding-left: 0.5rem;\n"], ["\n display: flex;\n padding-left: 0.5rem;\n"])));
|
|
3575
3575
|
var PriceLabelV3 = function (_a) {
|
|
@@ -3642,9 +3642,9 @@ var PriceLabelV3 = function (_a) {
|
|
|
3642
3642
|
lineHeight: '22px',
|
|
3643
3643
|
} }), void 0)) }), void 0))] }, void 0)] }), void 0));
|
|
3644
3644
|
};
|
|
3645
|
-
var templateObject_1$
|
|
3645
|
+
var templateObject_1$2j, templateObject_2$1E, templateObject_3$1g;
|
|
3646
3646
|
|
|
3647
|
-
var FinalPriceStyledContainer$1 = newStyled.div(templateObject_1$
|
|
3647
|
+
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"])));
|
|
3648
3648
|
var PriceLabel = function (_a) {
|
|
3649
3649
|
var _b;
|
|
3650
3650
|
var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, color = _a.color, testId = _a.testId, _c = _a.originalPriceStyled, originalPriceStyled = _c === void 0 ? false : _c, _d = _a.originalPriceUnderlined, originalPriceUnderlined = _d === void 0 ? true : _d, _e = _a.size, size = _e === void 0 ? exports.ComponentSize.Small : _e, _f = _a.isClubOffer, isClubOffer = _f === void 0 ? false : _f, rest = __rest(_a, ["finalPrice", "originalPrice", "color", "testId", "originalPriceStyled", "originalPriceUnderlined", "size", "isClubOffer"]);
|
|
@@ -3678,9 +3678,9 @@ var PriceLabel = function (_a) {
|
|
|
3678
3678
|
marginTop: '-6px',
|
|
3679
3679
|
} }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }), void 0)] }), void 0));
|
|
3680
3680
|
};
|
|
3681
|
-
var templateObject_1$
|
|
3681
|
+
var templateObject_1$2i;
|
|
3682
3682
|
|
|
3683
|
-
var FinalPriceStyledContainer = newStyled.div(templateObject_1$
|
|
3683
|
+
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"])));
|
|
3684
3684
|
var PriceLabelV2 = function (_a) {
|
|
3685
3685
|
var _b;
|
|
3686
3686
|
var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, color = _a.color, testId = _a.testId, _c = _a.originalPriceStyled, originalPriceStyled = _c === void 0 ? false : _c, _d = _a.originalPriceUnderlined, originalPriceUnderlined = _d === void 0 ? true : _d, _e = _a.size, size = _e === void 0 ? exports.ComponentSize.Small : _e, _f = _a.isClubOffer, isClubOffer = _f === void 0 ? false : _f, rest = __rest(_a, ["finalPrice", "originalPrice", "color", "testId", "originalPriceStyled", "originalPriceUnderlined", "size", "isClubOffer"]);
|
|
@@ -3713,11 +3713,11 @@ var PriceLabelV2 = function (_a) {
|
|
|
3713
3713
|
: (_b = "".concat(finalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1];
|
|
3714
3714
|
return (jsxRuntime.jsxs(Container$1o, __assign$1({}, rest, { children: [isOriginalPrice && !isClubOffer && jsxRuntime.jsx(OriginalPrice, {}, void 0), jsxRuntime.jsxs(FinalPriceStyledContainer, __assign$1({ "data-testid": getTestId$1(testId, 'final-product-price'), style: { marginLeft: '-3px' } }, { children: [jsxRuntime.jsxs(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size }, { children: [currencySymbol, finalPriceString] }), void 0), jsxRuntime.jsx(Price, __assign$1({ finalPriceStyledSmall: true }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }), void 0)] }), void 0));
|
|
3715
3715
|
};
|
|
3716
|
-
var templateObject_1$
|
|
3716
|
+
var templateObject_1$2h;
|
|
3717
3717
|
|
|
3718
|
-
var ContainerWrapper$2 = newStyled.div(templateObject_1$
|
|
3718
|
+
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"])));
|
|
3719
3719
|
var ImgWrapper = newStyled.div(templateObject_2$1D || (templateObject_2$1D = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n width: 50px auto;\n height: 20px;\n opacity: 0px;\n position: relative;\n"], ["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n width: 50px auto;\n height: 20px;\n opacity: 0px;\n position: relative;\n"])));
|
|
3720
|
-
var templateObject_1$
|
|
3720
|
+
var templateObject_1$2g, templateObject_2$1D;
|
|
3721
3721
|
|
|
3722
3722
|
var ClubPriceMemberLabel = function (_a) {
|
|
3723
3723
|
var isClub = _a.isClub, _b = _a.isPDP, isPDP = _b === void 0 ? false : _b, icon = _a.icon, _c = _a.isCollections, isCollections = _c === void 0 ? false : _c, rest = __rest(_a, ["isClub", "isPDP", "icon", "isCollections"]);
|
|
@@ -3726,13 +3726,13 @@ var ClubPriceMemberLabel = function (_a) {
|
|
|
3726
3726
|
return (jsxRuntime.jsx("div", { children: isClub ? (jsxRuntime.jsxs(ContainerWrapper$2, __assign$1({ id: "priceMemberLabelWrapper" }, { children: [PriceComponent, jsxRuntime.jsx(ImgWrapper, __assign$1({ id: "priceMemberLabelImgWrapper" }, { children: icon }), void 0)] }), void 0)) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: PriceComponent }, void 0)) }, void 0));
|
|
3727
3727
|
};
|
|
3728
3728
|
|
|
3729
|
-
var HorizontalDivider = newStyled.div(templateObject_1$
|
|
3729
|
+
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) {
|
|
3730
3730
|
var width = _a.width;
|
|
3731
3731
|
return width !== null && width !== void 0 ? width : '100%';
|
|
3732
3732
|
});
|
|
3733
|
-
var templateObject_1$
|
|
3733
|
+
var templateObject_1$2f;
|
|
3734
3734
|
|
|
3735
|
-
var Container$1n = newStyled.div(templateObject_1$
|
|
3735
|
+
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) {
|
|
3736
3736
|
var height = _a.height;
|
|
3737
3737
|
return height !== null && height !== void 0 ? height : '1.5em';
|
|
3738
3738
|
}, function (_a) {
|
|
@@ -3759,9 +3759,9 @@ var SkeletonBox = function (_a) {
|
|
|
3759
3759
|
var theme = useTheme();
|
|
3760
3760
|
return jsxRuntime.jsx(Container$1n, { "data-testid": "skeleton-container", width: width, height: height, theme: theme }, void 0);
|
|
3761
3761
|
};
|
|
3762
|
-
var templateObject_1$
|
|
3762
|
+
var templateObject_1$2e;
|
|
3763
3763
|
|
|
3764
|
-
var StyledSvgWrapper = newStyled.svg(templateObject_1$
|
|
3764
|
+
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) {
|
|
3765
3765
|
var width = _a.width;
|
|
3766
3766
|
return width;
|
|
3767
3767
|
}, function (_a) {
|
|
@@ -3790,7 +3790,7 @@ var StyledImageWrapper = newStyled.img(templateObject_2$1C || (templateObject_2$
|
|
|
3790
3790
|
var opacity = _a.opacity;
|
|
3791
3791
|
return opacity && "opacity: ".concat(opacity, ";");
|
|
3792
3792
|
});
|
|
3793
|
-
var templateObject_1$
|
|
3793
|
+
var templateObject_1$2d, templateObject_2$1C;
|
|
3794
3794
|
|
|
3795
3795
|
/* eslint-disable no-undef */
|
|
3796
3796
|
var cache = new Map();
|
|
@@ -3966,7 +3966,7 @@ var buildImageUrl = function (_a) {
|
|
|
3966
3966
|
}
|
|
3967
3967
|
};
|
|
3968
3968
|
|
|
3969
|
-
var Img$1 = newStyled.img(templateObject_1$
|
|
3969
|
+
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; });
|
|
3970
3970
|
var Image$3 = function (_a) {
|
|
3971
3971
|
var src = _a.src, srcSet = _a.srcSet, _b = _a.sizes, sizes = _b === void 0 ? '100vw' : _b, _c = _a.loading, loading = _c === void 0 ? 'lazy' : _c, _d = _a.decoding, decoding = _d === void 0 ? 'async' : _d, alt = _a.alt, height = _a.height, width = _a.width, borderRadius = _a.borderRadius, objectFit = _a.objectFit, objectPosition = _a.objectPosition, quality = _a.quality, rest = __rest(_a, ["src", "srcSet", "sizes", "loading", "decoding", "alt", "height", "width", "borderRadius", "objectFit", "objectPosition", "quality"]);
|
|
3972
3972
|
var config = useTheme().config;
|
|
@@ -3975,15 +3975,15 @@ var Image$3 = function (_a) {
|
|
|
3975
3975
|
: src;
|
|
3976
3976
|
return (jsxRuntime.jsx(Img$1, __assign$1({ src: source, srcSet: srcSet, sizes: sizes, loading: loading, decoding: decoding, alt: alt, height: height, width: width, borderRadius: borderRadius, objectFit: objectFit, objectPosition: objectPosition }, rest), void 0));
|
|
3977
3977
|
};
|
|
3978
|
-
var templateObject_1$
|
|
3978
|
+
var templateObject_1$2c;
|
|
3979
3979
|
|
|
3980
|
-
var LabelWrapper = newStyled.label(templateObject_1$
|
|
3980
|
+
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"])));
|
|
3981
3981
|
var SwitchWrapper = newStyled.div(templateObject_2$1B || (templateObject_2$1B = __makeTemplateObject(["\n position: relative;\n width: 36px;\n height: 20px;\n background: #949494;\n border-radius: 60px;\n padding: 4px;\n transition: 300ms all;\n\n &:before {\n transition: 300ms all;\n content: '';\n position: absolute;\n width: 16px;\n height: 16px;\n border-radius: 35px;\n top: 50%;\n left: 2.5px;\n background: white;\n transform: translate(0, -50%);\n }\n"], ["\n position: relative;\n width: 36px;\n height: 20px;\n background: #949494;\n border-radius: 60px;\n padding: 4px;\n transition: 300ms all;\n\n &:before {\n transition: 300ms all;\n content: '';\n position: absolute;\n width: 16px;\n height: 16px;\n border-radius: 35px;\n top: 50%;\n left: 2.5px;\n background: white;\n transform: translate(0, -50%);\n }\n"])));
|
|
3982
3982
|
var InputWrapper$1 = newStyled.input(templateObject_3$1f || (templateObject_3$1f = __makeTemplateObject(["\n opacity: 0;\n position: absolute;\n\n &:checked + div {\n background: ", ";\n\n &:before {\n transform: translate(14.5px, -50%);\n }\n }\n"], ["\n opacity: 0;\n position: absolute;\n\n &:checked + div {\n background: ", ";\n\n &:before {\n transform: translate(14.5px, -50%);\n }\n }\n"])), function (_a) {
|
|
3983
3983
|
var $color = _a.$color;
|
|
3984
3984
|
return $color;
|
|
3985
3985
|
});
|
|
3986
|
-
var templateObject_1$
|
|
3986
|
+
var templateObject_1$2b, templateObject_2$1B, templateObject_3$1f;
|
|
3987
3987
|
|
|
3988
3988
|
var ToggleComponent = function (_a) {
|
|
3989
3989
|
var onToggle = _a.onToggle, _b = _a.isChecked, isChecked = _b === void 0 ? false : _b, _c = _a.color, color = _c === void 0 ? '#882a2b' : _c;
|
|
@@ -4838,7 +4838,7 @@ function jsxs(type, props, key) {
|
|
|
4838
4838
|
// This defines which HTML tag to render for each `variant`, it also defines
|
|
4839
4839
|
// `variants` styles that are consistent through all themes.
|
|
4840
4840
|
var TAGS = {
|
|
4841
|
-
hero1: newStyled.h1(templateObject_1$
|
|
4841
|
+
hero1: newStyled.h1(templateObject_1$2a || (templateObject_1$2a = __makeTemplateObject([""], [""]))),
|
|
4842
4842
|
hero2: newStyled.h2(templateObject_2$1A || (templateObject_2$1A = __makeTemplateObject([""], [""]))),
|
|
4843
4843
|
hero3: newStyled.h3(templateObject_3$1e || (templateObject_3$1e = __makeTemplateObject([""], [""]))),
|
|
4844
4844
|
display1: newStyled.h1(templateObject_4$$ || (templateObject_4$$ = __makeTemplateObject([""], [""]))),
|
|
@@ -4978,9 +4978,9 @@ var DEFAULTS = {
|
|
|
4978
4978
|
size: 'regular',
|
|
4979
4979
|
},
|
|
4980
4980
|
};
|
|
4981
|
-
var templateObject_1$
|
|
4981
|
+
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;
|
|
4982
4982
|
|
|
4983
|
-
var Container$1m = newStyled.div(templateObject_1$
|
|
4983
|
+
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"])));
|
|
4984
4984
|
var Card$4 = newStyled.div(templateObject_2$1z || (templateObject_2$1z = __makeTemplateObject(["\n --background: var(--colors-background-color);\n\n flex: 1;\n position: relative;\n overflow: hidden;\n cursor: pointer;\n border: 2px solid var(--component-packSelector-borderColor);\n padding: 16px 7px 7px;\n text-align: center;\n background-color: var(--background);\n border-radius: var(--component-packSelector-borderRadius);\n\n &[aria-checked='true'] {\n --color: var(--component-packSelector-selectedColor);\n\n border-color: var(--color);\n\n & * {\n p {\n color: var(--color);\n }\n }\n }\n"], ["\n --background: var(--colors-background-color);\n\n flex: 1;\n position: relative;\n overflow: hidden;\n cursor: pointer;\n border: 2px solid var(--component-packSelector-borderColor);\n padding: 16px 7px 7px;\n text-align: center;\n background-color: var(--background);\n border-radius: var(--component-packSelector-borderRadius);\n\n &[aria-checked='true'] {\n --color: var(--component-packSelector-selectedColor);\n\n border-color: var(--color);\n\n & * {\n p {\n color: var(--color);\n }\n }\n }\n"])));
|
|
4985
4985
|
var Tag$2 = newStyled.div(templateObject_3$1d || (templateObject_3$1d = __makeTemplateObject(["\n position: absolute;\n width: 100%;\n left: 50%;\n top: 0;\n transform: translateX(-50%);\n background-color: var(--component-packSelector-tagColor);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 1px 0;\n\n [aria-checked='true'] & {\n background-color: var(--component-packSelector-selectedColor);\n\n & * {\n color: var(--component-packSelector-selectedContrast) !important;\n }\n }\n"], ["\n position: absolute;\n width: 100%;\n left: 50%;\n top: 0;\n transform: translateX(-50%);\n background-color: var(--component-packSelector-tagColor);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 1px 0;\n\n [aria-checked='true'] & {\n background-color: var(--component-packSelector-selectedColor);\n\n & * {\n color: var(--component-packSelector-selectedContrast) !important;\n }\n }\n"])));
|
|
4986
4986
|
var Label$7 = newStyled.div(templateObject_4$_ || (templateObject_4$_ = __makeTemplateObject(["\n position: relative;\n width: fit-content;\n margin: 0 auto;\n"], ["\n position: relative;\n width: fit-content;\n margin: 0 auto;\n"])));
|
|
@@ -5010,9 +5010,9 @@ var PackCard$1 = function (_a) {
|
|
|
5010
5010
|
currency: currencyCode || 'USD',
|
|
5011
5011
|
}), ' ', "each", ')'] }), void 0)) : null] }, void 0)] }), void 0));
|
|
5012
5012
|
};
|
|
5013
|
-
var templateObject_1$
|
|
5013
|
+
var templateObject_1$29, templateObject_2$1z, templateObject_3$1d, templateObject_4$_, templateObject_5$L, templateObject_6$F;
|
|
5014
5014
|
|
|
5015
|
-
var Container$1l = newStyled.div(templateObject_1$
|
|
5015
|
+
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"])));
|
|
5016
5016
|
var DropContainer = newStyled.div(templateObject_2$1y || (templateObject_2$1y = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5017
5017
|
var DropList = function (_a) {
|
|
5018
5018
|
var dropTotal = _a.dropTotal, drops = _a.drops;
|
|
@@ -5020,17 +5020,17 @@ var DropList = function (_a) {
|
|
|
5020
5020
|
return (jsxRuntime.jsx(DropContainer, __assign$1({ "data-testid": "star-container" }, { children: index < Math.floor(drops) ? (jsxRuntime.jsx(Icon.PDP.Drop, { width: 0.875, height: 0.875 }, void 0)) : (jsxRuntime.jsx(Icon.PDP.DropEmpty, { width: 0.875, height: 0.875 }, void 0)) }), index));
|
|
5021
5021
|
}) }, void 0));
|
|
5022
5022
|
};
|
|
5023
|
-
var templateObject_1$
|
|
5023
|
+
var templateObject_1$28, templateObject_2$1y;
|
|
5024
5024
|
|
|
5025
5025
|
var DROPS_TOTAL = 5;
|
|
5026
|
-
var Container$1k = newStyled.div(templateObject_1$
|
|
5026
|
+
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"])));
|
|
5027
5027
|
var Title$c = newStyled.p(templateObject_2$1x || (templateObject_2$1x = __makeTemplateObject(["\n height: 32px;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n display: flex;\n align-items: center;\n font-weight: 600;\n margin-right: 7px;\n"], ["\n height: 32px;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n display: flex;\n align-items: center;\n font-weight: 600;\n margin-right: 7px;\n"])));
|
|
5028
5028
|
var Description$3 = newStyled.p(templateObject_3$1c || (templateObject_3$1c = __makeTemplateObject(["\n height: 32px;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n display: flex;\n align-items: center;\n font-weight: 600;\n margin-left: 7px;\n"], ["\n height: 32px;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n display: flex;\n align-items: center;\n font-weight: 600;\n margin-left: 7px;\n"])));
|
|
5029
5029
|
var AbsorbencyLevel = function (_a) {
|
|
5030
5030
|
var dropTotal = _a.dropTotal, drops = _a.drops, absorbencyTitle = _a.absorbencyTitle, absorbencyDescription = _a.absorbencyDescription;
|
|
5031
5031
|
return (jsxRuntime.jsxs(Container$1k, { children: [jsxRuntime.jsx(Title$c, { children: absorbencyTitle }, void 0), jsxRuntime.jsx(DropList, { dropTotal: dropTotal || DROPS_TOTAL, drops: drops }, void 0), jsxRuntime.jsx(Description$3, { children: absorbencyDescription }, void 0)] }, void 0));
|
|
5032
5032
|
};
|
|
5033
|
-
var templateObject_1$
|
|
5033
|
+
var templateObject_1$27, templateObject_2$1x, templateObject_3$1c;
|
|
5034
5034
|
|
|
5035
5035
|
function k$1(){let e=[],t=[],r={enqueue(o){t.push(o);},requestAnimationFrame(...o){let n=requestAnimationFrame(...o);r.add(()=>cancelAnimationFrame(n));},nextFrame(...o){r.requestAnimationFrame(()=>{r.requestAnimationFrame(...o);});},setTimeout(...o){let n=setTimeout(...o);r.add(()=>clearTimeout(n));},add(o){e.push(o);},dispose(){for(let o of e.splice(0))o();},async workQueue(){for(let o of t.splice(0))await o();}};return r}function Q(){let[e]=React$2.useState(k$1);return React$2.useEffect(()=>()=>e.dispose(),[e]),e}var x$1=typeof window!="undefined"?React$2.useLayoutEffect:React$2.useEffect;var yt={serverHandoffComplete:!1};function q$1(){let[e,t]=React$2.useState(yt.serverHandoffComplete);return React$2.useEffect(()=>{e!==!0&&t(!0);},[e]),React$2.useEffect(()=>{yt.serverHandoffComplete===!1&&(yt.serverHandoffComplete=!0);},[]),e}var or=0;function to(){return ++or}function A$1(){let e=q$1(),[t,r]=React$2.useState(e?to:null);return x$1(()=>{t===null&&r(to());},[t]),t!=null?""+t:void 0}function ke(e){let t=React$2.useRef(e);return React$2.useEffect(()=>{t.current=e;},[e]),t}function ee(e,t){let[r,o]=React$2.useState(e),n=ke(e);return x$1(()=>o(n.current),[n,o,...t]),r}function I(...e){let t=React$2.useRef(e);return React$2.useEffect(()=>{t.current=e;},[e]),React$2.useCallback(r=>{for(let o of t.current)o!=null&&(typeof o=="function"?o(r):o.current=r);},[t])}function S(e,t,...r){if(e in t){let n=t[e];return typeof n=="function"?n(...r):n}let o=new Error(`Tried to handle "${e}" but there is no handler defined. Only defined handlers are: ${Object.keys(t).map(n=>`"${n}"`).join(", ")}.`);throw Error.captureStackTrace&&Error.captureStackTrace(o,S),o}function E({props:e,slot:t,defaultTag:r,features:o,visible:n=!0,name:i}){if(n)return _e(e,t,r,i);let a=o!=null?o:0;if(a&2){let{static:l=!1,...s}=e;if(l)return _e(s,t,r,i)}if(a&1){let{unmount:l=!0,...s}=e;return S(l?0:1,{[0](){return null},[1](){return _e({...s,hidden:!0,style:{display:"none"}},t,r,i)}})}return _e(e,t,r,i)}function _e(e,t={},r,o){let{as:n=r,children:i,refName:a="ref",...l}=gt(e,["unmount","static"]),s=e.ref!==void 0?{[a]:e.ref}:{},u=typeof i=="function"?i(t):i;if(l.className&&typeof l.className=="function"&&(l.className=l.className(t)),n===React$2.Fragment&&Object.keys(l).length>0){if(!React$2.isValidElement(u)||Array.isArray(u)&&u.length>1)throw new Error(['Passing props on "Fragment"!',"",`The current component <${o} /> is rendering a "Fragment".`,"However we need to passthrough the following props:",Object.keys(l).map(c=>` - ${c}`).join(`
|
|
5036
5036
|
`),"","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(`
|
|
@@ -5102,11 +5102,11 @@ var AccordionDetailsStyles = {
|
|
|
5102
5102
|
};
|
|
5103
5103
|
|
|
5104
5104
|
var StyledDisclosure$1 = newStyled(Ye)(AccordionStyles.baseStyles, function (props) { return [AccordionStyles[props.variant](props.theme, props.disabled, props.controlIconPos)]; });
|
|
5105
|
-
var StyledButton$
|
|
5105
|
+
var StyledButton$4 = newStyled(Ye.Button)(AccordionSummaryStyles.baseStyles, function (props) { return [
|
|
5106
5106
|
AccordionSummaryStyles[props.variant](props.theme, props.disabled, props.controlIconPos),
|
|
5107
5107
|
]; }, function (props) { return [AccordionSummaryStyles.title(props.titlecolor)]; });
|
|
5108
5108
|
var StyledPanel$1 = newStyled(Ye.Panel)(AccordionDetailsStyles.baseStyles, function (props) { return [AccordionDetailsStyles[props.variant](props.theme)]; });
|
|
5109
|
-
var StyledContent$1 = newStyled.button(templateObject_1$
|
|
5109
|
+
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"])));
|
|
5110
5110
|
var Accordion$1 = function (_a) {
|
|
5111
5111
|
var header = _a.header, headerOnOpen = _a.headerOnOpen, content = _a.content, defaultOpen = _a.defaultOpen, _b = _a.forceOpenHandler, forceOpenHandler = _b === void 0 ? false : _b, _c = _a.forceOpenValue, forceOpenValue = _c === void 0 ? false : _c, titleColor = _a.titleColor, variant = _a.variant, _d = _a.disabled, disabled = _d === void 0 ? false : _d, _e = _a.innerHTML, innerHTML = _e === void 0 ? false : _e, _f = _a.backgroundCover, backgroundCover = _f === void 0 ? { value: false, iconBgColor: 'inherit' } : _f, _g = _a.controlIconPos, controlIconPos = _g === void 0 ? 'right' : _g, openIcon = _a.openIcon, closeIcon = _a.closeIcon, onClick = _a.onClick, testId = _a.testId;
|
|
5112
5112
|
var theme = useTheme();
|
|
@@ -5115,7 +5115,7 @@ var Accordion$1 = function (_a) {
|
|
|
5115
5115
|
var openWithForce = forceOpenHandler ? forceOpenValue : open;
|
|
5116
5116
|
var ControlIcon = disabled ? openIcon : openWithForce ? closeIcon : openIcon;
|
|
5117
5117
|
var showPanel = openWithForce && !disabled;
|
|
5118
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(StyledButton$
|
|
5118
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(StyledButton$4, __assign$1({ theme: theme, variant: variant, disabled: disabled, titlecolor: titleColor, controlIconPos: controlIconPos }, { children: [showPanel && headerOnOpen ? headerOnOpen : header, controlIconPos === 'right' && (jsxRuntime.jsx(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 && (jsxRuntime.jsx("div", __assign$1({ className: "openIconBottom", style: {
|
|
5119
5119
|
width: '100%',
|
|
5120
5120
|
display: 'flex',
|
|
5121
5121
|
justifyContent: 'center',
|
|
@@ -5130,9 +5130,9 @@ var Accordion$1 = function (_a) {
|
|
|
5130
5130
|
} }, { children: jsxRuntime.jsx(ControlIcon, { title: "close icon", height: theme.component.accordion.variant[variant].icon.height, width: theme.component.accordion.variant[variant].icon.width, fill: theme.component.accordion.variant[variant].icon.color }, void 0) }), void 0)] }, void 0))] }), void 0), controlIconPos === 'right' && showPanel && (jsxRuntime.jsx(StyledContent$1, __assign$1({ onClick: function (e) { return e.stopPropagation(); } }, { children: !innerHTML ? (jsxRuntime.jsx(StyledPanel$1, __assign$1({ static: true, variant: variant, theme: theme }, { children: content }), void 0)) : (jsxRuntime.jsx("div", { dangerouslySetInnerHTML: { __html: content } }, void 0)) }), void 0))] }, void 0));
|
|
5131
5131
|
} }), void 0));
|
|
5132
5132
|
};
|
|
5133
|
-
var templateObject_1$
|
|
5133
|
+
var templateObject_1$26;
|
|
5134
5134
|
|
|
5135
|
-
var Container$1j = newStyled.div(templateObject_1$
|
|
5135
|
+
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"])));
|
|
5136
5136
|
var AccordionOptions = function (_a) {
|
|
5137
5137
|
var titleColor = _a.titleColor, accordions = _a.accordions;
|
|
5138
5138
|
var _b = React$2.useState({
|
|
@@ -5156,7 +5156,7 @@ var AccordionOptions = function (_a) {
|
|
|
5156
5156
|
} }, accordion, { forceOpenHandler: true, forceOpenValue: getForceOpen(index), titleColor: accordionTitleColor }), "accordion-".concat(index)));
|
|
5157
5157
|
}) }, void 0));
|
|
5158
5158
|
};
|
|
5159
|
-
var templateObject_1$
|
|
5159
|
+
var templateObject_1$25;
|
|
5160
5160
|
|
|
5161
5161
|
/**
|
|
5162
5162
|
* @returns number formatted with "," and 2 decimals as string
|
|
@@ -5292,11 +5292,11 @@ var isValidDate = function (value) {
|
|
|
5292
5292
|
return /^\d{4}-\d{2}-\d{2}$/.test(value);
|
|
5293
5293
|
};
|
|
5294
5294
|
|
|
5295
|
-
var Bold = newStyled.span(templateObject_1$
|
|
5295
|
+
var Bold = newStyled.span(templateObject_1$24 || (templateObject_1$24 = __makeTemplateObject(["\n font-weight: bold;\n"], ["\n font-weight: bold;\n"])));
|
|
5296
5296
|
var FlexContainer$4 = newStyled.div(templateObject_2$1w || (templateObject_2$1w = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n padding: 12px;\n background-color: white;\n border-radius: 8px;\n text-align: start;\n margin: 10px;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n padding: 12px;\n background-color: white;\n border-radius: 8px;\n text-align: start;\n margin: 10px;\n"])));
|
|
5297
|
-
var templateObject_1$
|
|
5297
|
+
var templateObject_1$24, templateObject_2$1w;
|
|
5298
5298
|
|
|
5299
|
-
var Container$1i = newStyled.div(templateObject_1$
|
|
5299
|
+
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) {
|
|
5300
5300
|
var _b = _a.width, width = _b === void 0 ? '100%' : _b;
|
|
5301
5301
|
return width;
|
|
5302
5302
|
}, function (_a) {
|
|
@@ -5307,7 +5307,7 @@ var FlexCentered = newStyled.div(templateObject_2$1v || (templateObject_2$1v = _
|
|
|
5307
5307
|
var LeftSide = newStyled.div(templateObject_3$1b || (templateObject_3$1b = __makeTemplateObject(["\n width: 110px;\n height: 100%;\n flex-shrink: 0;\n resize: vertical;\n"], ["\n width: 110px;\n height: 100%;\n flex-shrink: 0;\n resize: vertical;\n"])));
|
|
5308
5308
|
var RightSide = newStyled.div(templateObject_4$Z || (templateObject_4$Z = __makeTemplateObject(["\n display: flex;\n flex-grow: 1;\n flex-direction: column;\n align-items: center;\n height: 100%;\n"], ["\n display: flex;\n flex-grow: 1;\n flex-direction: column;\n align-items: center;\n height: 100%;\n"])));
|
|
5309
5309
|
var FlexStart = newStyled.div(templateObject_5$K || (templateObject_5$K = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: start;\n gap: 5px;\n width: 100%;\n padding: 12px;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: start;\n gap: 5px;\n width: 100%;\n padding: 12px;\n"])));
|
|
5310
|
-
var templateObject_1$
|
|
5310
|
+
var templateObject_1$23, templateObject_2$1v, templateObject_3$1b, templateObject_4$Z, templateObject_5$K;
|
|
5311
5311
|
|
|
5312
5312
|
var CouponCard = function (_a) {
|
|
5313
5313
|
var image = _a.image, title = _a.title, content = _a.content, couponCode = _a.couponCode, offerLink = _a.offerLink, width = _a.width, height = _a.height, _b = _a.btnText, btnText = _b === void 0 ? 'Redeem Offer' : _b, onClickRedeemOfferHandler = _a.onClickRedeemOfferHandler, onClickHandler = _a.onClickHandler;
|
|
@@ -5452,14 +5452,14 @@ var sizeOptions = [
|
|
|
5452
5452
|
},
|
|
5453
5453
|
];
|
|
5454
5454
|
|
|
5455
|
-
var ErrorText = newStyled.h3(templateObject_1$
|
|
5455
|
+
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; });
|
|
5456
5456
|
var ErrorContainer = newStyled.div(templateObject_2$1u || (templateObject_2$1u = __makeTemplateObject(["\n display: flex;\n align-items: center;\n margin-top: 12px;\n"], ["\n display: flex;\n align-items: center;\n margin-top: 12px;\n"])));
|
|
5457
5457
|
var Error$1 = function (_a) {
|
|
5458
5458
|
var error = _a.error;
|
|
5459
5459
|
var theme = useTheme();
|
|
5460
5460
|
return (jsxRuntime.jsxs(ErrorContainer, { children: [jsxRuntime.jsx(Icon.Actions.LightExclamation, { fill: theme.colors.semantic.urgent.color, width: 0.875, height: 0.875 }, void 0), jsxRuntime.jsx(ErrorText, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: error }), void 0)] }, void 0));
|
|
5461
5461
|
};
|
|
5462
|
-
var templateObject_1$
|
|
5462
|
+
var templateObject_1$22, templateObject_2$1u;
|
|
5463
5463
|
|
|
5464
5464
|
var BaseSelectButton = function (_a) {
|
|
5465
5465
|
var children = _a.children, as = _a.as;
|
|
@@ -5476,7 +5476,7 @@ function BaseSelectOption(_a) {
|
|
|
5476
5476
|
return (jsxRuntime.jsx(Ee.Option, __assign$1({ className: className, as: as, value: value, disabled: disabled }, { children: children }), void 0));
|
|
5477
5477
|
}
|
|
5478
5478
|
|
|
5479
|
-
var CustomListBox = newStyled(Ee)(templateObject_1$
|
|
5479
|
+
var CustomListBox = newStyled(Ee)(templateObject_1$21 || (templateObject_1$21 = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
5480
5480
|
function BaseSelect(_a) {
|
|
5481
5481
|
var value = _a.value, onChange = _a.onChange, disabled = _a.disabled, children = _a.children, className = _a.className;
|
|
5482
5482
|
return (jsxRuntime.jsx(CustomListBox, __assign$1({ disabled: disabled, as: "div", value: value, onChange: onChange, className: className }, { children: children }), void 0));
|
|
@@ -5486,7 +5486,7 @@ var BaseSelect$1 = Object.assign(BaseSelect, {
|
|
|
5486
5486
|
Options: BaseSelectOptions,
|
|
5487
5487
|
Option: BaseSelectOption,
|
|
5488
5488
|
});
|
|
5489
|
-
var templateObject_1$
|
|
5489
|
+
var templateObject_1$21;
|
|
5490
5490
|
|
|
5491
5491
|
var CustomButton = newStyled.button(function (_a) {
|
|
5492
5492
|
var theme = _a.theme, wide = _a.wide, isSortOrFilter = _a.isSortOrFilter;
|
|
@@ -5525,7 +5525,7 @@ var CustomButton = newStyled.button(function (_a) {
|
|
|
5525
5525
|
});
|
|
5526
5526
|
});
|
|
5527
5527
|
// TODO Remove this when we find the real solution
|
|
5528
|
-
var StyledIcon$1 = newStyled.span(templateObject_1$
|
|
5528
|
+
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) {
|
|
5529
5529
|
var open = _a.open;
|
|
5530
5530
|
return open &&
|
|
5531
5531
|
"\n [data-testid=\"CloseIcon\"] {\n display: block;\n }\n [data-testid=\"OpenIcon\"] {\n display: none;\n }\n";
|
|
@@ -5545,7 +5545,7 @@ var BaseDropdownButton = function (_a) {
|
|
|
5545
5545
|
} }), void 0));
|
|
5546
5546
|
};
|
|
5547
5547
|
var BaseDropdownButton$1 = React__default["default"].memo(BaseDropdownButton);
|
|
5548
|
-
var templateObject_1$
|
|
5548
|
+
var templateObject_1$20;
|
|
5549
5549
|
|
|
5550
5550
|
var DropdownOptions$1 = newStyled(BaseSelect$1.Options)(function (_a) {
|
|
5551
5551
|
var theme = _a.theme;
|
|
@@ -5712,7 +5712,7 @@ var CustomCheckboxStyles = {
|
|
|
5712
5712
|
},
|
|
5713
5713
|
};
|
|
5714
5714
|
|
|
5715
|
-
var Container$1h = newStyled.div(templateObject_1$
|
|
5715
|
+
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"])));
|
|
5716
5716
|
var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (props) { return [
|
|
5717
5717
|
CustomCheckboxStyles[props.size](props.theme),
|
|
5718
5718
|
CustomCheckboxStyles[props.variant](props.theme, props.isChecked, props.disabled),
|
|
@@ -5739,7 +5739,7 @@ var Checkbox = function (_a) {
|
|
|
5739
5739
|
};
|
|
5740
5740
|
return (jsxRuntime.jsxs(Container$1h, { children: [jsxRuntime.jsx(Input$5, { type: "checkbox", checked: checked, disabled: disabled, onChange: handleChange, id: id }, void 0), jsxRuntime.jsx(CustomCheckbox, __assign$1({ theme: theme, size: size, disabled: disabled, isChecked: checked, "data-testid": "checkbox", variant: variant, backgroundColor: backgroundColor, text: text }, { children: checked && jsxRuntime.jsx(Icon.Actions.Check, { fill: "#fff" }, void 0) }), void 0), jsxRuntime.jsx(Label$6, __assign$1({ "data-testid": "checkbox-text", size: sizeLabel, style: { color: colorLabel ? colorLabel : theme.colors.shades['700'].color }, variant: checked ? 'demi' : 'regular', htmlFor: id, disabled: disabled }, { children: text }), void 0)] }, void 0));
|
|
5741
5741
|
};
|
|
5742
|
-
var templateObject_1$
|
|
5742
|
+
var templateObject_1$1$, templateObject_2$1t;
|
|
5743
5743
|
|
|
5744
5744
|
var CustomOption = newStyled.li(function (_a) {
|
|
5745
5745
|
var theme = _a.theme, selected = _a.selected, active = _a.active, hasImage = _a.hasImage;
|
|
@@ -5788,7 +5788,7 @@ var BaseDropdown$1 = Object.assign(BaseDropdown, {
|
|
|
5788
5788
|
Option: BaseDropdownOption,
|
|
5789
5789
|
});
|
|
5790
5790
|
|
|
5791
|
-
var Container$1g = newStyled.div(templateObject_1$
|
|
5791
|
+
var Container$1g = newStyled.div(templateObject_1$1_ || (templateObject_1$1_ = __makeTemplateObject([""], [""])));
|
|
5792
5792
|
var RequiredPlaceholder = newStyled.p(templateObject_2$1s || (templateObject_2$1s = __makeTemplateObject(["\n margin: unset;\n &:after {\n content: '*';\n color: var(--colors-semantic-urgent-color);\n }\n"], ["\n margin: unset;\n &:after {\n content: '*';\n color: var(--colors-semantic-urgent-color);\n }\n"])));
|
|
5793
5793
|
var SelectedOption = newStyled.span(templateObject_3$1a || (templateObject_3$1a = __makeTemplateObject(["\n font-weight: ", ";\n"], ["\n font-weight: ", ";\n"])), function (_a) {
|
|
5794
5794
|
var fontWeight = _a.fontWeight;
|
|
@@ -5826,7 +5826,7 @@ function SimpleDropdown(_a) {
|
|
|
5826
5826
|
var DropdownContainer = showRequiredPlaceholder ? Container$1g : React$2.Fragment;
|
|
5827
5827
|
return (jsxRuntime.jsxs(DropdownContainer, { children: [jsxRuntime.jsxs(BaseDropdown$1, __assign$1({ value: selectedValue, onChange: onChangeHandler, disabled: disabled, wide: wide }, { children: [jsxRuntime.jsxs(BaseDropdown$1.Button, __assign$1({ label: label, OpenIcon: Icon.Arrows.ChevronDown, CloseIcon: Icon.Arrows.ChevronUp, wide: wide, isSortOrFilter: sort, testId: testId }, { children: [!!(selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.imageURL) && (jsxRuntime.jsx("img", { src: selectedValue.imageURL, alt: selectedValue.label, style: { paddingRight: 8 } }, void 0)), selectedOptionWeight && disabled ? (jsxRuntime.jsx(SelectedOption, __assign$1({ fontWeight: selectedOptionWeight }, { children: selectedOptionLabel }), void 0)) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: selectedOptionLabel }, void 0))] }), void 0), jsxRuntime.jsx(BaseDropdown$1.Options, { children: options.map(function (item) { return (jsxRuntime.jsxs(BaseDropdown$1.Option, __assign$1({ value: item, disabled: item.disabled, hasImage: !!item.imageURL }, { children: [!!item.imageURL && (jsxRuntime.jsx("img", { src: item.imageURL, alt: item.label, style: { paddingRight: 8 } }, void 0)), item.label] }), item.key)); }) }, void 0)] }), void 0), !!required && jsxRuntime.jsx(Error$1, { error: required }, void 0)] }, void 0));
|
|
5828
5828
|
}
|
|
5829
|
-
var templateObject_1$
|
|
5829
|
+
var templateObject_1$1_, templateObject_2$1s, templateObject_3$1a;
|
|
5830
5830
|
|
|
5831
5831
|
/* base styles & size variants */
|
|
5832
5832
|
var CustomRadioStyles$2 = {
|
|
@@ -5891,7 +5891,7 @@ var ContainerStyles$2 = {
|
|
|
5891
5891
|
},
|
|
5892
5892
|
};
|
|
5893
5893
|
|
|
5894
|
-
var Wrapper$7 = newStyled.div(templateObject_1$
|
|
5894
|
+
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"])));
|
|
5895
5895
|
var Container$1f = newStyled.div(__assign$1({}, ContainerStyles$2.baseStyles), function (props) { return [ContainerStyles$2[props.size](props.theme)]; });
|
|
5896
5896
|
var Input$4 = newStyled.input(templateObject_2$1r || (templateObject_2$1r = __makeTemplateObject(["\n position: absolute;\n opacity: 0;\n cursor: ", ";\n height: 100%;\n width: 100%;\n margin: 0;\n"], ["\n position: absolute;\n opacity: 0;\n cursor: ", ";\n height: 100%;\n width: 100%;\n margin: 0;\n"])), function (_a) {
|
|
5897
5897
|
var disabled = _a.disabled;
|
|
@@ -5927,7 +5927,7 @@ var RadioInput = function (_a) {
|
|
|
5927
5927
|
};
|
|
5928
5928
|
return (jsxRuntime.jsxs(Wrapper$7, { children: [jsxRuntime.jsxs(Container$1f, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsxRuntime.jsx(Input$4, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled, style: style }, void 0), jsxRuntime.jsx(CustomRadio$2, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), useV2Style ? (jsxRuntime.jsxs(StyledLabelV2, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled, style: labelStyle }, { children: [icon, " ", label] }), void 0)) : (jsxRuntime.jsx(StyledLabel$3, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0))] }, void 0));
|
|
5929
5929
|
};
|
|
5930
|
-
var templateObject_1$
|
|
5930
|
+
var templateObject_1$1Z, templateObject_2$1r, templateObject_3$19, templateObject_4$Y;
|
|
5931
5931
|
|
|
5932
5932
|
var useOnClickOutside = function (ref, handler) {
|
|
5933
5933
|
React$2.useEffect(function () {
|
|
@@ -6020,7 +6020,7 @@ var getTooltipAlignItems = function (position, align) {
|
|
|
6020
6020
|
}
|
|
6021
6021
|
};
|
|
6022
6022
|
|
|
6023
|
-
var Wrapper$6 = newStyled.div(templateObject_1$
|
|
6023
|
+
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) {
|
|
6024
6024
|
var position = _a.position;
|
|
6025
6025
|
return getWrapperFlexDirection(position);
|
|
6026
6026
|
}, function (_a) {
|
|
@@ -6085,7 +6085,7 @@ var CloseToolTip = newStyled.button(templateObject_8$p || (templateObject_8$p =
|
|
|
6085
6085
|
var _b = _a.right, right = _b === void 0 ? '.3rem' : _b;
|
|
6086
6086
|
return right;
|
|
6087
6087
|
});
|
|
6088
|
-
var templateObject_1$
|
|
6088
|
+
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;
|
|
6089
6089
|
|
|
6090
6090
|
var Tooltip = function (_a) {
|
|
6091
6091
|
var _b;
|
|
@@ -6128,7 +6128,7 @@ var benefitsColorMapper = function (_a) {
|
|
|
6128
6128
|
};
|
|
6129
6129
|
};
|
|
6130
6130
|
|
|
6131
|
-
var FlexContainer$3 = newStyled.div(templateObject_1$
|
|
6131
|
+
var FlexContainer$3 = newStyled.div(templateObject_1$1X || (templateObject_1$1X = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
6132
6132
|
var ContainerBase$3 = newStyled.div(templateObject_2$1p || (templateObject_2$1p = __makeTemplateObject(["\n border-radius: 8px;\n\n border: ", ";\n\n ", "\n\n & input:checked + div {\n border-color: ", ";\n }\n\n & label {\n cursor: pointer;\n }\n"], ["\n border-radius: 8px;\n\n border: ", ";\n\n ", "\n\n & input:checked + div {\n border-color: ", ";\n }\n\n & label {\n cursor: pointer;\n }\n"])), function (_a) {
|
|
6133
6133
|
var selected = _a.selected, theme = _a.theme;
|
|
6134
6134
|
return selected
|
|
@@ -6166,7 +6166,7 @@ var StyledPrice$3 = newStyled(PriceLabelV2$1)(templateObject_12$4 || (templateOb
|
|
|
6166
6166
|
return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
|
|
6167
6167
|
});
|
|
6168
6168
|
var Container$1e = newStyled.div(templateObject_13$4 || (templateObject_13$4 = __makeTemplateObject([""], [""])));
|
|
6169
|
-
var templateObject_1$
|
|
6169
|
+
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;
|
|
6170
6170
|
|
|
6171
6171
|
var radioIds$2 = {
|
|
6172
6172
|
oneTime: {
|
|
@@ -6221,7 +6221,7 @@ var Autoship = function (_a) {
|
|
|
6221
6221
|
: benefitsColor.base }, void 0), jsxRuntime.jsx(BenefitText$3, __assign$1({ variant: "body" }, { children: benefit }), void 0)] }, benefit)); }) }, void 0), radioIds$2.autoship.id === radioCheck.id && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(FlexContainer$3, { children: [jsxRuntime.jsx(DeliveryFrequencyLabel$1, __assign$1({ variant: "body" }, { children: "Delivery Every:" }), void 0), jsxRuntime.jsx(SimpleDropdown, { testId: "subscription-frecuency", initialValue: dropdownOptions[0], options: dropdownOptions, onChange: function (value) { return handleChange(value.value, 'dropdown'); }, placeHolder: "" }, void 0)] }, void 0), jsxRuntime.jsx(SubscriptionDetailsContainer, { children: jsxRuntime.jsx(Tooltip, __assign$1({ position: 0, content: tooltipContent, header: tooltipHeader, maxWidth: "300px", showCloseIcon: closeIcon }, { children: jsxRuntime.jsxs(FlexContainer$3, { children: [jsxRuntime.jsx(SubscriptionDetails, __assign$1({ variant: "body", weight: "demi" }, { children: "Subscription Details" }), void 0), jsxRuntime.jsx(Icon.Actions.CircleQuestion, { width: 1.2 }, void 0)] }, void 0) }), void 0) }, void 0)] }, void 0))] }), void 0)] }), void 0));
|
|
6222
6222
|
};
|
|
6223
6223
|
|
|
6224
|
-
var FlexContainer$2 = newStyled.div(templateObject_1$
|
|
6224
|
+
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) {
|
|
6225
6225
|
var theme = _a.theme;
|
|
6226
6226
|
return theme.name === 'TheSpaDr' &&
|
|
6227
6227
|
"\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 ";
|
|
@@ -6279,7 +6279,7 @@ var TooltipWrapper$1 = newStyled.div(templateObject_13$3 || (templateObject_13$3
|
|
|
6279
6279
|
var theme = _a.theme;
|
|
6280
6280
|
return theme.component.autoship.tooltip.margin;
|
|
6281
6281
|
});
|
|
6282
|
-
var templateObject_1$
|
|
6282
|
+
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;
|
|
6283
6283
|
|
|
6284
6284
|
var radioIds$1 = {
|
|
6285
6285
|
oneTime: {
|
|
@@ -6358,13 +6358,13 @@ var componentSizeMapper = (_a$2 = {},
|
|
|
6358
6358
|
_a$2[exports.ComponentSize.Large] = exports.ComponentSize.Medium,
|
|
6359
6359
|
_a$2);
|
|
6360
6360
|
|
|
6361
|
-
var CustomerDetails = newStyled.div(templateObject_1$
|
|
6361
|
+
var CustomerDetails = newStyled.div(templateObject_1$1V || (templateObject_1$1V = __makeTemplateObject([""], [""])));
|
|
6362
6362
|
var CustomerInfo = newStyled.div(templateObject_2$1n || (templateObject_2$1n = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n"], ["\n display: flex;\n justify-content: space-between;\n align-items: center;\n"])));
|
|
6363
6363
|
var Name = newStyled.h4(templateObject_3$15 || (templateObject_3$15 = __makeTemplateObject(["\n font-size: 22px;\n line-height: 20px;\n font-weight: 400;\n margin: 0;\n"], ["\n font-size: 22px;\n line-height: 20px;\n font-weight: 400;\n margin: 0;\n"])));
|
|
6364
6364
|
var StarIconContainer = newStyled.div(templateObject_4$U || (templateObject_4$U = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 5px;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 5px;\n"])));
|
|
6365
6365
|
var Description$2 = newStyled.p(templateObject_5$G || (templateObject_5$G = __makeTemplateObject(["\n font-size: 16px;\n font-weight: 300;\n line-height: normal;\n"], ["\n font-size: 16px;\n font-weight: 300;\n line-height: normal;\n"])));
|
|
6366
6366
|
var ReviewDays = newStyled.span(templateObject_6$B || (templateObject_6$B = __makeTemplateObject(["\n display: block;\n font-size: 14px;\n font-style: italic;\n font-weight: 300;\n"], ["\n display: block;\n font-size: 14px;\n font-style: italic;\n font-weight: 300;\n"])));
|
|
6367
|
-
var templateObject_1$
|
|
6367
|
+
var templateObject_1$1V, templateObject_2$1n, templateObject_3$15, templateObject_4$U, templateObject_5$G, templateObject_6$B;
|
|
6368
6368
|
|
|
6369
6369
|
var NameWithStars = function (_a) {
|
|
6370
6370
|
var name = _a.name, size = _a.size;
|
|
@@ -6382,7 +6382,7 @@ var ResultFeedback = function (_a) {
|
|
|
6382
6382
|
return (jsxRuntime.jsxs(CustomerDetails, { children: [jsxRuntime.jsx(NameWithStars, { name: name, size: size }, void 0), description && jsxRuntime.jsx(Description$2, { children: description }, void 0), reviewDays && jsxRuntime.jsx(ReviewDays, { children: reviewDays }, void 0)] }, void 0));
|
|
6383
6383
|
};
|
|
6384
6384
|
|
|
6385
|
-
var Container$1c = newStyled.div(templateObject_1$
|
|
6385
|
+
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; });
|
|
6386
6386
|
var ImageContainer$7 = newStyled.div(templateObject_2$1m || (templateObject_2$1m = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n width: 100%;\n height: 100%;\n column-gap: 4px;\n align-items: center;\n justify-content: center;\n"], ["\n display: flex;\n flex-direction: row;\n width: 100%;\n height: 100%;\n column-gap: 4px;\n align-items: center;\n justify-content: center;\n"])));
|
|
6387
6387
|
var ImageCard = newStyled.div(templateObject_3$14 || (templateObject_3$14 = __makeTemplateObject(["\n display: flex;\n min-height: ", ";\n min-width: ", ";\n width: ", ";\n flex-wrap: wrap;\n\n @media (max-width: 768px) {\n min-height: ", ";\n min-width: ", ";\n width: ", ";\n }\n"], ["\n display: flex;\n min-height: ", ";\n min-width: ", ";\n width: ", ";\n flex-wrap: wrap;\n\n @media (max-width: 768px) {\n min-height: ", ";\n min-width: ", ";\n width: ", ";\n }\n"])), function (props) { return props.styles.imageMinHeight; }, function (props) { return props.styles.imageMinWidth; }, function (props) { return props.styles.imageMinWidth; }, function (props) { return props.styles.mobileImageMinHeight; }, function (props) { return props.styles.mobileImageMinWidth; }, function (props) { return props.styles.mobileImageMinWidth; });
|
|
6388
6388
|
var UserInfoText = newStyled.div(templateObject_4$T || (templateObject_4$T = __makeTemplateObject(["\n color: ", ";\n font-size: ", ";\n text-align: ", ";\n margin: 0;\n font-weight: 400;\n line-height: 130%;\n\n @media (max-width: 768px) {\n font-size: ", ";\n }\n"], ["\n color: ", ";\n font-size: ", ";\n text-align: ", ";\n margin: 0;\n font-weight: 400;\n line-height: 130%;\n\n @media (max-width: 768px) {\n font-size: ", ";\n }\n"])), function (_a) {
|
|
@@ -6395,7 +6395,7 @@ var UserInfoText = newStyled.div(templateObject_4$T || (templateObject_4$T = __m
|
|
|
6395
6395
|
var theme = _a.theme, size = _a.size;
|
|
6396
6396
|
return theme.component.beforeAfter.size[componentSizeMapper[size]].userInfoText.mobile.fontSize;
|
|
6397
6397
|
});
|
|
6398
|
-
var templateObject_1$
|
|
6398
|
+
var templateObject_1$1U, templateObject_2$1m, templateObject_3$14, templateObject_4$T;
|
|
6399
6399
|
|
|
6400
6400
|
/* base styles & size variants */
|
|
6401
6401
|
var getStylesBySize$d = function (size, theme) {
|
|
@@ -6473,7 +6473,7 @@ var BeforeAfterCard = function (_a) {
|
|
|
6473
6473
|
return (jsxRuntime.jsxs(Container$1c, __assign$1({ "data-testid": "Container", styles: stylesBySize }, { children: [jsxRuntime.jsxs(ImageContainer$7, __assign$1({ "data-testid": "ImageContainer" }, { children: [jsxRuntime.jsx(ImageCard, __assign$1({ "data-testid": "ImageCard", styles: stylesBySize }, { children: jsxRuntime.jsx(Image$3, { borderRadius: imageBorderRadius, src: beforeImage, alt: "before", height: "100%", width: "100%" }, void 0) }), void 0), jsxRuntime.jsx(ImageCard, __assign$1({ styles: stylesBySize }, { children: jsxRuntime.jsx(Image$3, { borderRadius: imageBorderRadius, src: afterImage, alt: "after", height: "100%", width: "100%" }, void 0) }), void 0)] }), void 0), jsxRuntime.jsx(Component, __assign$1({ name: name, size: size, alignCenter: alignCenter, text: infoText }, rest), void 0)] }), void 0));
|
|
6474
6474
|
};
|
|
6475
6475
|
|
|
6476
|
-
var Section = newStyled.div(templateObject_1$
|
|
6476
|
+
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) {
|
|
6477
6477
|
return props.type === exports.CardSectionType.Header ? '1.5rem 1.5rem 0' : '0 1.5rem 1.5rem';
|
|
6478
6478
|
});
|
|
6479
6479
|
var CardHeader = function (_a) {
|
|
@@ -6484,16 +6484,16 @@ var CardFooter = function (_a) {
|
|
|
6484
6484
|
var children = _a.children;
|
|
6485
6485
|
return (jsxRuntime.jsx(Section, __assign$1({ type: exports.CardSectionType.Footer }, { children: children }), void 0));
|
|
6486
6486
|
};
|
|
6487
|
-
var templateObject_1$
|
|
6487
|
+
var templateObject_1$1T;
|
|
6488
6488
|
|
|
6489
|
-
var Body$1 = newStyled.div(templateObject_1$
|
|
6489
|
+
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"])));
|
|
6490
6490
|
var CardBody$1 = function (_a) {
|
|
6491
6491
|
var children = _a.children;
|
|
6492
6492
|
return jsxRuntime.jsx(Body$1, { children: children }, void 0);
|
|
6493
6493
|
};
|
|
6494
|
-
var templateObject_1$
|
|
6494
|
+
var templateObject_1$1S;
|
|
6495
6495
|
|
|
6496
|
-
var Container$1b = newStyled.div(templateObject_1$
|
|
6496
|
+
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) {
|
|
6497
6497
|
var flex = _a.flex;
|
|
6498
6498
|
return flex &&
|
|
6499
6499
|
"display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;";
|
|
@@ -6515,16 +6515,16 @@ var Card$3 = Object.assign(Card$2, {
|
|
|
6515
6515
|
Footer: CardFooter,
|
|
6516
6516
|
Body: CardBody$1,
|
|
6517
6517
|
});
|
|
6518
|
-
var templateObject_1$
|
|
6518
|
+
var templateObject_1$1R;
|
|
6519
6519
|
|
|
6520
|
-
var StyledWrapper = newStyled.div(templateObject_1$
|
|
6520
|
+
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"])));
|
|
6521
6521
|
var StyledContainer = newStyled.div(templateObject_2$1l || (templateObject_2$1l = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n"], ["\n display: flex;\n justify-content: space-between;\n align-items: center;\n"])));
|
|
6522
6522
|
var TextLabel = newStyled(Text$7)(templateObject_3$13 || (templateObject_3$13 = __makeTemplateObject(["\n margin: 0.1rem 0;\n min-width: 4.5rem;\n color: ", ";\n"], ["\n margin: 0.1rem 0;\n min-width: 4.5rem;\n color: ", ";\n"])), function (_a) {
|
|
6523
6523
|
var color = _a.color;
|
|
6524
6524
|
return color;
|
|
6525
6525
|
});
|
|
6526
6526
|
var YouAreSaving = newStyled(Text$7)(templateObject_4$S || (templateObject_4$S = __makeTemplateObject(["\n text-align: right;\n margin: 0 0 0 0.5rem;\n"], ["\n text-align: right;\n margin: 0 0 0 0.5rem;\n"])));
|
|
6527
|
-
var templateObject_1$
|
|
6527
|
+
var templateObject_1$1Q, templateObject_2$1l, templateObject_3$13, templateObject_4$S;
|
|
6528
6528
|
|
|
6529
6529
|
var Minimalistic = function (_a) {
|
|
6530
6530
|
var _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#FFF6EF' : _b, _c = _a.borderColor, borderColor = _c === void 0 ? '#E7C9B2' : _c, originalPrice = _a.originalPrice, price = _a.price, savingPrice = _a.savingPrice, getMorePayLessText = _a.getMorePayLessText, youAreSavingText = _a.youAreSavingText, getQtyForText = _a.getQtyForText, discount = _a.discount, offText = _a.offText, _d = _a.widthAuto, widthAuto = _d === void 0 ? false : _d, _e = _a.testId, testId = _e === void 0 ? 'minimalistic' : _e;
|
|
@@ -6532,7 +6532,7 @@ var Minimalistic = function (_a) {
|
|
|
6532
6532
|
return (jsxRuntime.jsx(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxRuntime.jsxs(StyledWrapper, { children: [jsxRuntime.jsxs(StyledContainer, __assign$1({ "data-testid": "".concat(testId, "-section") }, { children: [jsxRuntime.jsx(StyledContainer, { children: jsxRuntime.jsx(TextLabel, __assign$1({ variant: "body", weight: "demi", size: "small" }, { children: getMorePayLessText }), void 0) }, void 0), jsxRuntime.jsx(PriceLabel$1, { finalPrice: price, originalPrice: originalPrice, color: theme.colors.pallete.secondary.color, size: exports.ComponentSize.Small, testId: testId }, void 0)] }), void 0), jsxRuntime.jsxs(StyledContainer, __assign$1({ "data-testid": "".concat(testId, "-section-bottom") }, { children: [jsxRuntime.jsxs(TextLabel, __assign$1({ variant: "body", weight: "demi", size: "small", color: "var(--colors-pallete-red-color)" }, { children: [getQtyForText, " ", discount, "% ", offText.toLocaleUpperCase()] }), void 0), jsxRuntime.jsxs(YouAreSaving, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [youAreSavingText, ": ", savingPrice] }), void 0)] }), void 0)] }, void 0) }), void 0));
|
|
6533
6533
|
};
|
|
6534
6534
|
|
|
6535
|
-
var Container$1a = newStyled.div(templateObject_1$
|
|
6535
|
+
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"])));
|
|
6536
6536
|
var Title$a = newStyled.h1(templateObject_2$1k || (templateObject_2$1k = __makeTemplateObject(["\n font-weight: 700;\n font-size: 1rem;\n line-height: 1.25rem;\n color: ", ";\n margin: 0;\n margin-bottom: 0.125rem;\n text-align: center;\n"], ["\n font-weight: 700;\n font-size: 1rem;\n line-height: 1.25rem;\n color: ", ";\n margin: 0;\n margin-bottom: 0.125rem;\n text-align: center;\n"])), function (props) { return props.color; });
|
|
6537
6537
|
var Details$1 = newStyled.span(templateObject_3$12 || (templateObject_3$12 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n font-weight: 400;\n font-size: 1rem;\n margin: 0;\n line-height: 1.5rem;\n justify-content: center;\n color: ", ";\n"], ["\n display: flex;\n align-items: center;\n font-weight: 400;\n font-size: 1rem;\n margin: 0;\n line-height: 1.5rem;\n justify-content: center;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
6538
6538
|
var PriceContainer$2 = newStyled.span(templateObject_4$R || (templateObject_4$R = __makeTemplateObject(["\n margin: 0 0.313rem;\n display: flex;\n align-items: center;\n"], ["\n margin: 0 0.313rem;\n display: flex;\n align-items: center;\n"])));
|
|
@@ -6541,14 +6541,14 @@ var Simple = function (_a) {
|
|
|
6541
6541
|
var theme = useTheme();
|
|
6542
6542
|
return (jsxRuntime.jsx(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxRuntime.jsxs(Container$1a, { children: [jsxRuntime.jsx(Title$a, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Title" }, { children: title }), void 0), jsxRuntime.jsxs(Details$1, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Details" }, { children: [anyQtyForText, jsxRuntime.jsx(PriceContainer$2, __assign$1({ "data-testid": "Price" }, { children: jsxRuntime.jsx(PriceLabel$1, { finalPrice: price, color: "var(--colors-pallete-red-color)", size: exports.ComponentSize.Small }, void 0) }), void 0), "+ ", freeShippingText] }), void 0)] }, void 0) }), void 0));
|
|
6543
6543
|
};
|
|
6544
|
-
var templateObject_1$
|
|
6544
|
+
var templateObject_1$1P, templateObject_2$1k, templateObject_3$12, templateObject_4$R;
|
|
6545
6545
|
|
|
6546
6546
|
var Bundle = {
|
|
6547
6547
|
Minimalistic: Minimalistic,
|
|
6548
6548
|
Simple: Simple,
|
|
6549
6549
|
};
|
|
6550
6550
|
|
|
6551
|
-
var Container$19 = newStyled.div(templateObject_1$
|
|
6551
|
+
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) {
|
|
6552
6552
|
var displayBNPL = _a.displayBNPL;
|
|
6553
6553
|
return (displayBNPL ? 'flex' : 'none');
|
|
6554
6554
|
});
|
|
@@ -6572,41 +6572,41 @@ var BuyNowPayLater = function (_a) {
|
|
|
6572
6572
|
paddingRight: '0.25rem',
|
|
6573
6573
|
}, testId: "InstallmentPriceId" }, { children: installmentPrice }), void 0), showLogo ? ' with' : ''] }, void 0), showLogo && (jsxRuntime.jsx(IconWrapper$1, __assign$1({ style: { display: 'flex' } }, { children: jsxRuntime.jsx(IconComponent, { width: !bnplWithAfterPay ? 3.2 : 5.3, height: 2, fill: iconColor, style: { position: 'relative', left: bnplWithAfterPay ? '1rem' : '0' } }, void 0) }), void 0))] }), void 0) }), void 0));
|
|
6574
6574
|
};
|
|
6575
|
-
var templateObject_1$
|
|
6575
|
+
var templateObject_1$1O, templateObject_2$1j, templateObject_3$11;
|
|
6576
6576
|
|
|
6577
|
-
var Text$6 = newStyled.span(templateObject_1$
|
|
6577
|
+
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; });
|
|
6578
6578
|
var Title$9 = function (_a) {
|
|
6579
6579
|
var title = _a.title;
|
|
6580
6580
|
var theme = useTheme();
|
|
6581
6581
|
return jsxRuntime.jsx(Text$6, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0);
|
|
6582
6582
|
};
|
|
6583
|
-
var templateObject_1$
|
|
6583
|
+
var templateObject_1$1N;
|
|
6584
6584
|
|
|
6585
|
-
var P$4 = newStyled.p(templateObject_1$
|
|
6585
|
+
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; });
|
|
6586
6586
|
var Promo = function (_a) {
|
|
6587
6587
|
var text = _a.text;
|
|
6588
6588
|
var theme = useTheme();
|
|
6589
6589
|
return (jsxRuntime.jsx(P$4, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "CartProductItemPromo" }, { children: text }), void 0));
|
|
6590
6590
|
};
|
|
6591
|
-
var templateObject_1$
|
|
6591
|
+
var templateObject_1$1M;
|
|
6592
6592
|
|
|
6593
|
-
var Text$5 = newStyled.span(templateObject_1$
|
|
6593
|
+
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; });
|
|
6594
6594
|
var Description$1 = function (_a) {
|
|
6595
6595
|
var text = _a.text;
|
|
6596
6596
|
var theme = useTheme();
|
|
6597
6597
|
return jsxRuntime.jsx(Text$5, __assign$1({ color: theme.colors.shades['400'].color }, { children: text }), void 0);
|
|
6598
6598
|
};
|
|
6599
|
-
var templateObject_1$
|
|
6599
|
+
var templateObject_1$1L;
|
|
6600
6600
|
|
|
6601
|
-
var Container$18 = newStyled.div(templateObject_1$
|
|
6601
|
+
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"); });
|
|
6602
6602
|
var CloseButton$1 = function (_a) {
|
|
6603
6603
|
var onClick = _a.onClick, size = _a.size;
|
|
6604
6604
|
var theme = useTheme();
|
|
6605
6605
|
return (jsxRuntime.jsx(Container$18, __assign$1({ backgroundColor: theme.colors.shades['700'].color, onClick: onClick, "data-testid": "CartProductItemCloseBtn", size: size }, { children: jsxRuntime.jsx(Icon.Actions.Close, { width: size - 1, height: size - 1, fill: "#fff" }, void 0) }), void 0));
|
|
6606
6606
|
};
|
|
6607
|
-
var templateObject_1$
|
|
6607
|
+
var templateObject_1$1K;
|
|
6608
6608
|
|
|
6609
|
-
var Text$4 = newStyled.h3(templateObject_1$
|
|
6609
|
+
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) {
|
|
6610
6610
|
var backgroundColor = _a.backgroundColor;
|
|
6611
6611
|
return backgroundColor;
|
|
6612
6612
|
}, function (_a) {
|
|
@@ -6621,7 +6621,7 @@ var OfferBanner = function (_a) {
|
|
|
6621
6621
|
var theme = useTheme();
|
|
6622
6622
|
return (jsxRuntime.jsx(Text$4, __assign$1({ backgroundColor: backgroundColor, color: theme.colors.shades['700'].color, borderRadius: theme.component.text.offerBanner.borderRadius, "data-testid": "OfferBanner" }, { children: discountAppliedText }), void 0));
|
|
6623
6623
|
};
|
|
6624
|
-
var templateObject_1$
|
|
6624
|
+
var templateObject_1$1J;
|
|
6625
6625
|
|
|
6626
6626
|
var CartProductItem = {
|
|
6627
6627
|
Title: Title$9,
|
|
@@ -6631,7 +6631,7 @@ var CartProductItem = {
|
|
|
6631
6631
|
CloseButton: CloseButton$1,
|
|
6632
6632
|
};
|
|
6633
6633
|
|
|
6634
|
-
var Container$17 = newStyled.div(templateObject_1$
|
|
6634
|
+
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"])));
|
|
6635
6635
|
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"])));
|
|
6636
6636
|
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"])));
|
|
6637
6637
|
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"])));
|
|
@@ -6644,7 +6644,7 @@ var ClubPriceLabel = function (_a) {
|
|
|
6644
6644
|
var isMobile = useWindowDimensions().isMobile;
|
|
6645
6645
|
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: isMobile ? (jsxRuntime.jsxs(MobileContainer, { children: [jsxRuntime.jsx(MobileDollarPart, { children: clubPrice }, void 0), jsxRuntime.jsx(MobileClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) : (jsxRuntime.jsxs(Container$17, { children: [jsxRuntime.jsx(DesktopDollarPart, { children: clubPrice }, void 0), jsxRuntime.jsx(DesktopClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) }, void 0));
|
|
6646
6646
|
};
|
|
6647
|
-
var templateObject_1$
|
|
6647
|
+
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;
|
|
6648
6648
|
|
|
6649
6649
|
var Spacing = function (_a) {
|
|
6650
6650
|
var size = _a.size, _b = _a.type, type = _b === void 0 ? 'block' : _b, children = _a.children, styleProp = _a.style;
|
|
@@ -6652,7 +6652,7 @@ var Spacing = function (_a) {
|
|
|
6652
6652
|
return jsxRuntime.jsx("div", __assign$1({ style: style }, { children: children }), void 0);
|
|
6653
6653
|
};
|
|
6654
6654
|
|
|
6655
|
-
var Container$16 = newStyled('div')(templateObject_1$
|
|
6655
|
+
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"])));
|
|
6656
6656
|
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"])));
|
|
6657
6657
|
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"])));
|
|
6658
6658
|
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) {
|
|
@@ -6666,7 +6666,7 @@ var StrengthBars = function (_a) {
|
|
|
6666
6666
|
var _b = _a.barsFilled, barsFilled = _b === void 0 ? 0 : _b, supportText = _a.supportText;
|
|
6667
6667
|
return (jsxRuntime.jsxs(Container$16, __assign$1({ "data-testid": "strength-bar" }, { children: [jsxRuntime.jsx(BarContainer$1, { children: [1, 2, 3, 4, 5].map(function (bar, index) { return (jsxRuntime.jsx(Bar$2, { index: index, isFilled: bar <= barsFilled }, bar)); }) }, void 0), jsxRuntime.jsx(Content$2, { children: supportText }, void 0)] }), void 0));
|
|
6668
6668
|
};
|
|
6669
|
-
var templateObject_1$
|
|
6669
|
+
var templateObject_1$1H, templateObject_2$1h, templateObject_3$$, templateObject_4$P;
|
|
6670
6670
|
|
|
6671
6671
|
var AutoshipFrequencyDropdown = function (_a) {
|
|
6672
6672
|
var frequency = _a.frequency, onChange = _a.onChange;
|
|
@@ -6697,16 +6697,16 @@ var getDropdownOptions = function (frequency) {
|
|
|
6697
6697
|
}); });
|
|
6698
6698
|
};
|
|
6699
6699
|
|
|
6700
|
-
var Benefit$2 = newStyled.div(templateObject_1$
|
|
6700
|
+
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"])));
|
|
6701
6701
|
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"])));
|
|
6702
|
-
var templateObject_1$
|
|
6702
|
+
var templateObject_1$1G, templateObject_2$1g;
|
|
6703
6703
|
|
|
6704
6704
|
var BenefitsList = function (_a) {
|
|
6705
6705
|
var benefits = _a.benefits, isSelected = _a.isSelected, selectedColor = _a.selectedColor, baseColor = _a.baseColor;
|
|
6706
6706
|
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: benefits.map(function (benefit) { return (jsxRuntime.jsxs(Benefit$2, { children: [jsxRuntime.jsx(Icon.Actions.Check, { "data-testid": "icon-check", width: 1.2, height: 1.2, fill: isSelected ? selectedColor : baseColor }, void 0), jsxRuntime.jsx(BenefitText$1, { variant: "body", dangerouslySetInnerHTML: { __html: benefit } }, void 0)] }, benefit)); }) }, void 0));
|
|
6707
6707
|
};
|
|
6708
6708
|
|
|
6709
|
-
var TimerContainer$1 = newStyled.div(templateObject_1$
|
|
6709
|
+
var TimerContainer$1 = newStyled.div(templateObject_1$1F || (templateObject_1$1F = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
6710
6710
|
var timerColor = _a.timerColor;
|
|
6711
6711
|
return timerColor || '';
|
|
6712
6712
|
});
|
|
@@ -6722,7 +6722,7 @@ var UnitBlock = newStyled(Text$7)(templateObject_3$_ || (templateObject_3$_ = __
|
|
|
6722
6722
|
return theme.colors.shades.white.color;
|
|
6723
6723
|
});
|
|
6724
6724
|
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"])));
|
|
6725
|
-
var templateObject_1$
|
|
6725
|
+
var templateObject_1$1F, templateObject_2$1f, templateObject_3$_, templateObject_4$O;
|
|
6726
6726
|
|
|
6727
6727
|
var HRS = 'HRS';
|
|
6728
6728
|
var MIN = 'MIN';
|
|
@@ -6763,7 +6763,7 @@ var Timer = function (_a) {
|
|
|
6763
6763
|
return (jsxRuntime.jsxs(TimerContainer$1, __assign$1({ "data-testid": "Time", timerColor: timerColor }, { children: [showHours && (hours || displayZeroValues) && "".concat(hours, "h "), (minutes || displayZeroValues) && "".concat(minutes, "m "), showSeconds && "".concat(seconds, "s")] }), void 0));
|
|
6764
6764
|
};
|
|
6765
6765
|
|
|
6766
|
-
var TimerContainer = newStyled.div(templateObject_1$
|
|
6766
|
+
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) {
|
|
6767
6767
|
var textPosition = _a.textPosition;
|
|
6768
6768
|
return textPosition;
|
|
6769
6769
|
}, function (_a) {
|
|
@@ -6776,7 +6776,7 @@ var TimerContainer = newStyled.div(templateObject_1$1D || (templateObject_1$1D =
|
|
|
6776
6776
|
var borderRadius = _a.borderRadius;
|
|
6777
6777
|
return borderRadius || '8px';
|
|
6778
6778
|
});
|
|
6779
|
-
var templateObject_1$
|
|
6779
|
+
var templateObject_1$1E;
|
|
6780
6780
|
|
|
6781
6781
|
var getDefaultCountdown = function () {
|
|
6782
6782
|
var tomorrowDate = new Date();
|
|
@@ -6792,7 +6792,7 @@ var HurryUp = function (_a) {
|
|
|
6792
6792
|
return (jsxRuntime.jsxs(TimerContainer, __assign$1({ backgroundColor: backgroundColor || theme.component.card.backgroundColor, textPosition: textPosition, borderRadius: (!isFullVersion && theme.component.hurryUp.borderRadius) || '0', "data-testid": "HurryUp" }, { children: [clockPosition === 'left' && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Icon.PDP.Stopwatch, { width: iconSize, height: iconSize, fill: theme.colors.pallete.secondary.color }, void 0), "\u00A0"] }, void 0)), jsxRuntime.jsx(Text$7, __assign$1({ testId: "HurryUpText", variant: "body", size: "small", weight: "demi", color: hurryUpTextColor }, { children: hurryUpText }), void 0), "\u00A0", clockPosition === 'right' && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Icon.PDP.Stopwatch, { width: iconSize, height: iconSize, fill: theme.colors.pallete.secondary.color }, void 0), "\u00A0"] }, void 0)), showTimer && (jsxRuntime.jsx(Timer, __assign$1({ countdown: countdown, onTimeUp: function () { } }, timerProps, { isCardsVersion: isFullVersion }), void 0))] }), void 0));
|
|
6793
6793
|
};
|
|
6794
6794
|
|
|
6795
|
-
var Container$15 = newStyled.div(templateObject_1$
|
|
6795
|
+
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) {
|
|
6796
6796
|
var size = _a.size;
|
|
6797
6797
|
return (size ? size : '100%');
|
|
6798
6798
|
}, function (_a) {
|
|
@@ -6820,29 +6820,29 @@ var StyledSpinner = newStyled.div(templateObject_2$1e || (templateObject_2$1e =
|
|
|
6820
6820
|
var _b = _a.duration, duration = _b === void 0 ? 0.7 : _b;
|
|
6821
6821
|
return duration;
|
|
6822
6822
|
});
|
|
6823
|
-
var templateObject_1$
|
|
6823
|
+
var templateObject_1$1D, templateObject_2$1e;
|
|
6824
6824
|
|
|
6825
6825
|
var Spinner = function (_a) {
|
|
6826
6826
|
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;
|
|
6827
6827
|
return (jsxRuntime.jsx(Container$15, __assign$1({ size: size, "data-testid": "Container" }, { children: complete ? (jsxRuntime.jsx(Icon.Actions.LightCheck, { fill: fill, svgProps: { strokeWidth: completeIconStroke } }, void 0)) : (jsxRuntime.jsx(StyledSpinner, { duration: animationDuration, "data-testid": "Loading", color: fill, background: background, size: borderSize !== null && borderSize !== void 0 ? borderSize : exports.ComponentSize.Small }, void 0)) }), void 0));
|
|
6828
6828
|
};
|
|
6829
6829
|
|
|
6830
|
-
var ProgressContainer = newStyled.div(templateObject_1$
|
|
6830
|
+
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); });
|
|
6831
6831
|
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; });
|
|
6832
|
-
var templateObject_1$
|
|
6832
|
+
var templateObject_1$1C, templateObject_2$1d;
|
|
6833
6833
|
|
|
6834
6834
|
var ProgressBar$1 = function (_a) {
|
|
6835
6835
|
var progress = _a.progress, hide = _a.hide;
|
|
6836
6836
|
return (jsxRuntime.jsx(ProgressContainer, __assign$1({ "data-testid": "progress-bar", hide: hide }, { children: jsxRuntime.jsx(ProgressFiller, { progress: progress }, void 0) }), void 0));
|
|
6837
6837
|
};
|
|
6838
6838
|
|
|
6839
|
-
var Container$14 = newStyled.div(templateObject_1$
|
|
6839
|
+
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"])));
|
|
6840
6840
|
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; });
|
|
6841
6841
|
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"])));
|
|
6842
6842
|
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"])));
|
|
6843
6843
|
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"])));
|
|
6844
6844
|
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"])));
|
|
6845
|
-
var templateObject_1$
|
|
6845
|
+
var templateObject_1$1B, templateObject_2$1c, templateObject_3$Z, templateObject_4$N, templateObject_5$E, templateObject_6$z;
|
|
6846
6846
|
|
|
6847
6847
|
var Video$1 = function (_a) {
|
|
6848
6848
|
var _b, _c, _d, _e;
|
|
@@ -6895,7 +6895,7 @@ var Video$1 = function (_a) {
|
|
|
6895
6895
|
return (jsxRuntime.jsxs(Container$14, __assign$1({ className: className }, { children: [!isLoading && withProgressBar && jsxRuntime.jsx(ProgressBar$1, { progress: progress, hide: hideProgressBar }, void 0), !isPlaying ? (jsxRuntime.jsx(PlayContainer, __assign$1({ "data-testid": "play", onClick: handlePlayClick }, { children: isStarted && jsxRuntime.jsx(PlayIcon, {}, void 0) }), void 0)) : (jsxRuntime.jsx(PauseContainer, { "data-testid": "pause", onClick: handlePauseClick }, void 0)), hasAudioControl && (jsxRuntime.jsxs(MuteButton, __assign$1({ onClick: handleMuteToggle }, { children: [isMuted && jsxRuntime.jsx(Icon$1, { name: "custom/sound_off" }, void 0), !isMuted && jsxRuntime.jsx(Icon$1, { name: "custom/sound_on" }, void 0)] }), void 0)), jsxRuntime.jsxs(HTMLVideo, __assign$1({}, rest, { muted: isMuted, "data-testid": "video", poster: thumbnail, playsInline: true, ref: videoRef, onTimeUpdate: onTimeUpdate, onCanPlay: function () { return setIsLoading(false); }, onLoadedData: function () { return setIsLoading(false); }, onPause: function () { return setIsPlaying(false); }, onPlaying: function () { return setIsPlaying(true); }, height: height || 'auto' }, { children: [jsxRuntime.jsx("track", { kind: "captions" }, void 0), jsxRuntime.jsx("source", { src: source }, void 0)] }), void 0)] }), void 0));
|
|
6896
6896
|
};
|
|
6897
6897
|
|
|
6898
|
-
var LikeCount = newStyled.span(templateObject_1$
|
|
6898
|
+
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) {
|
|
6899
6899
|
var theme = _a.theme;
|
|
6900
6900
|
return theme.colors.shades.black.color;
|
|
6901
6901
|
});
|
|
@@ -6918,7 +6918,7 @@ var LikeBtnContainer = newStyled.button(templateObject_2$1b || (templateObject_2
|
|
|
6918
6918
|
var _b = _a.boxSizing, boxSizing = _b === void 0 ? 'border-box' : _b;
|
|
6919
6919
|
return boxSizing;
|
|
6920
6920
|
});
|
|
6921
|
-
var templateObject_1$
|
|
6921
|
+
var templateObject_1$1A, templateObject_2$1b;
|
|
6922
6922
|
|
|
6923
6923
|
var getStylesBySize$c = function (size) {
|
|
6924
6924
|
switch (size) {
|
|
@@ -6939,7 +6939,7 @@ var getStylesBySize$c = function (size) {
|
|
|
6939
6939
|
};
|
|
6940
6940
|
}
|
|
6941
6941
|
};
|
|
6942
|
-
var Container$13 = newStyled.div(templateObject_1$
|
|
6942
|
+
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) {
|
|
6943
6943
|
var backgroundColor = _a.backgroundColor;
|
|
6944
6944
|
return backgroundColor;
|
|
6945
6945
|
}, function (_a) {
|
|
@@ -6982,7 +6982,7 @@ var IconButton = function (_a) {
|
|
|
6982
6982
|
var theme = useTheme();
|
|
6983
6983
|
return (jsxRuntime.jsx(Container$13, __assign$1({ border: border, width: width, className: disabled ? 'disabled' : '', backgroundColor: (_b = backgroundColor === null || backgroundColor === void 0 ? void 0 : backgroundColor.active) !== null && _b !== void 0 ? _b : theme.component.button.primary.active.backgroundColor, hoverBackgroundColor: (_c = backgroundColor === null || backgroundColor === void 0 ? void 0 : backgroundColor.hover) !== null && _c !== void 0 ? _c : theme.component.button.secondary.active.backgroundColor, disabledColor: theme.colors.shades['50'].color, disabledIconColor: theme.colors.shades['200'].color, size: size, "data-testid": dataTestId, onClick: disabled ? function () { } : onClick, hasText: hasText, boxShadow: boxShadow, rounded: rounded }, { children: children }), void 0));
|
|
6984
6984
|
};
|
|
6985
|
-
var templateObject_1$
|
|
6985
|
+
var templateObject_1$1z;
|
|
6986
6986
|
|
|
6987
6987
|
var LikeButton = function (_a) {
|
|
6988
6988
|
var _b;
|
|
@@ -6995,7 +6995,7 @@ var LikeButton = function (_a) {
|
|
|
6995
6995
|
return (jsxRuntime.jsx(LikeBtnContainer, __assign$1({ className: className }, containerProps, { children: jsxRuntime.jsxs(IconButton, __assign$1({ onClick: onClick, backgroundColor: background, hasText: !!likes, boxShadow: "0 6px 16px rgba(0, 0, 0, 0.12)" }, { children: [jsxRuntime.jsx(Icon$1, { name: isLiked ? 'actions/like_solid' : 'actions/like', fill: isLiked ? iconFill.solid : (_b = iconFill.regular) !== null && _b !== void 0 ? _b : iconFill.solid, width: "24px", height: "24px" }, void 0), !!likes && jsxRuntime.jsx(LikeCount, __assign$1({ className: "like-count" }, { children: likes }), void 0)] }), isLiked.toString()) }), void 0));
|
|
6996
6996
|
};
|
|
6997
6997
|
|
|
6998
|
-
var RegularPriceTagSpan = newStyled.span(templateObject_1$
|
|
6998
|
+
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"])));
|
|
6999
6999
|
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"])));
|
|
7000
7000
|
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"])));
|
|
7001
7001
|
var PriceContainerV2 = newStyled.span(templateObject_4$M || (templateObject_4$M = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
@@ -7053,14 +7053,14 @@ var PriceLabelV4 = function (_a) {
|
|
|
7053
7053
|
? finalPriceArray[0]
|
|
7054
7054
|
: (_b = "".concat(productFinalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1], "."] }), void 0), jsxRuntime.jsx(Price, __assign$1({ finalPriceStyledSmall: true, style: { marginTop: '-6px', color: '#c64844' } }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }, void 0), jsxRuntime.jsx(ClubPriceTag, { label: theme.label.member }, void 0)] }, void 0)] }, void 0)), discount && (jsxRuntime.jsx(TagContainer, __assign$1({ size: size }, { children: jsxRuntime.jsx(DiscountTag$3, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
|
|
7055
7055
|
};
|
|
7056
|
-
var templateObject_1$
|
|
7056
|
+
var templateObject_1$1y, templateObject_2$1a, templateObject_3$Y, templateObject_4$M, templateObject_5$D;
|
|
7057
7057
|
|
|
7058
7058
|
var STARTS_NUMBER = 5;
|
|
7059
7059
|
|
|
7060
|
-
var Container$12 = newStyled.div(templateObject_1$
|
|
7061
|
-
var templateObject_1$
|
|
7060
|
+
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"])));
|
|
7061
|
+
var templateObject_1$1x;
|
|
7062
7062
|
|
|
7063
|
-
var StarContainer = newStyled.div(templateObject_1$
|
|
7063
|
+
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) {
|
|
7064
7064
|
var marginRight = _a.marginRight;
|
|
7065
7065
|
return marginRight;
|
|
7066
7066
|
});
|
|
@@ -7076,7 +7076,7 @@ var StarList = function (_a) {
|
|
|
7076
7076
|
return (jsxRuntime.jsx(StarContainer, __assign$1({ "data-testid": "star-container", marginRight: theme.component.stars.element[size].marginRight }, { children: index < Math.floor(rating) ? (jsxRuntime.jsx(Icon.PDP.Star, __assign$1({}, iconProps), void 0)) : index === Math.floor(rating) && rating % 1 != 0 ? (jsxRuntime.jsx(Icon.PDP.StarHalf, __assign$1({}, iconProps), void 0)) : (jsxRuntime.jsx(Icon.PDP.StarEmpty, __assign$1({}, iconProps), void 0)) }), "star-container-".concat(index)));
|
|
7077
7077
|
}) }, void 0));
|
|
7078
7078
|
};
|
|
7079
|
-
var templateObject_1$
|
|
7079
|
+
var templateObject_1$1w;
|
|
7080
7080
|
|
|
7081
7081
|
/* base styles & size variants */
|
|
7082
7082
|
var LabelStyles = {
|
|
@@ -7124,7 +7124,7 @@ var LabelStyles = {
|
|
|
7124
7124
|
});
|
|
7125
7125
|
},
|
|
7126
7126
|
};
|
|
7127
|
-
var Container$11 = newStyled.a(templateObject_1$
|
|
7127
|
+
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"])));
|
|
7128
7128
|
var CustomLabel = newStyled.div(function (_a) {
|
|
7129
7129
|
var theme = _a.theme, size = _a.size, wrapWithParenthesis = _a.wrapWithParenthesis, underline = _a.underline;
|
|
7130
7130
|
return [
|
|
@@ -7144,7 +7144,7 @@ var CustomLabel = newStyled.div(function (_a) {
|
|
|
7144
7144
|
];
|
|
7145
7145
|
});
|
|
7146
7146
|
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; });
|
|
7147
|
-
var templateObject_1$
|
|
7147
|
+
var templateObject_1$1v, templateObject_2$19;
|
|
7148
7148
|
|
|
7149
7149
|
var Rating = function (_a) {
|
|
7150
7150
|
var _b = _a.size, size = _b === void 0 ? exports.ComponentSize.Medium : _b, reviews = _a.reviews, reviewsText = _a.reviewsText, rating = _a.rating, _c = _a.showRatingText, showRatingText = _c === void 0 ? false : _c, _d = _a.wrapWithParenthesis, wrapWithParenthesis = _d === void 0 ? false : _d, _e = _a.underline, underline = _e === void 0 ? false : _e, reviewsContainerId = _a.reviewsContainerId;
|
|
@@ -7239,7 +7239,7 @@ var ImageContainer$6 = newStyled.div(function (_a) {
|
|
|
7239
7239
|
height: height,
|
|
7240
7240
|
});
|
|
7241
7241
|
});
|
|
7242
|
-
var ImageHoverContainer$3 = newStyled.img(templateObject_1$
|
|
7242
|
+
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"])));
|
|
7243
7243
|
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"])));
|
|
7244
7244
|
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"])));
|
|
7245
7245
|
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) {
|
|
@@ -7303,7 +7303,7 @@ var BottomTagContainer$9 = newStyled.div(templateObject_6$y || (templateObject_6
|
|
|
7303
7303
|
});
|
|
7304
7304
|
var MarginTopContainer$1 = newStyled.div(templateObject_7$s || (templateObject_7$s = __makeTemplateObject(["\n margin-top: 8px;\n"], ["\n margin-top: 8px;\n"])));
|
|
7305
7305
|
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"])));
|
|
7306
|
-
var templateObject_1$
|
|
7306
|
+
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;
|
|
7307
7307
|
|
|
7308
7308
|
var ProductItemMobile = function (_a) {
|
|
7309
7309
|
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
|
|
@@ -7420,7 +7420,7 @@ var ImageContainer$5 = newStyled.div(function (_a) {
|
|
|
7420
7420
|
height: height,
|
|
7421
7421
|
});
|
|
7422
7422
|
});
|
|
7423
|
-
var ImageHoverContainer$2 = newStyled.img(templateObject_1$
|
|
7423
|
+
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; });
|
|
7424
7424
|
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"])));
|
|
7425
7425
|
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"])));
|
|
7426
7426
|
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; });
|
|
@@ -7509,9 +7509,9 @@ var ProductItemTK = function (_a) {
|
|
|
7509
7509
|
marginTop: hasSpacing ? undefined : textContainerGap,
|
|
7510
7510
|
} }, { 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));
|
|
7511
7511
|
};
|
|
7512
|
-
var templateObject_1$
|
|
7512
|
+
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;
|
|
7513
7513
|
|
|
7514
|
-
var Container$_ = newStyled.div(templateObject_1$
|
|
7514
|
+
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"])));
|
|
7515
7515
|
function withProductGrid(ProductItemComponent, data) {
|
|
7516
7516
|
function WithProductGrid(props) {
|
|
7517
7517
|
return (jsxRuntime.jsx(Container$_, __assign$1({ "data-testid": "product-grid-container" }, { children: data.map(function (product, index) { return (jsxRuntime.jsx(ProductItemComponent, __assign$1({}, product, props), index)); }) }), void 0));
|
|
@@ -7521,7 +7521,7 @@ function withProductGrid(ProductItemComponent, data) {
|
|
|
7521
7521
|
WithProductGrid.displayName = "withGrid(".concat(wrappedComponentName, ")");
|
|
7522
7522
|
return WithProductGrid;
|
|
7523
7523
|
}
|
|
7524
|
-
var templateObject_1$
|
|
7524
|
+
var templateObject_1$1s;
|
|
7525
7525
|
|
|
7526
7526
|
var Collection = {
|
|
7527
7527
|
ProductItemMobile: ProductItemMobile,
|
|
@@ -7529,7 +7529,7 @@ var Collection = {
|
|
|
7529
7529
|
ProductItemTK: ProductItemTK,
|
|
7530
7530
|
};
|
|
7531
7531
|
|
|
7532
|
-
var CustomRadioGroup = newStyled(lt)(templateObject_1$
|
|
7532
|
+
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"])));
|
|
7533
7533
|
newStyled(lt.Label)(templateObject_2$16 || (templateObject_2$16 = __makeTemplateObject(["\n font-size: 0.88rem;\n"], ["\n font-size: 0.88rem;\n"])));
|
|
7534
7534
|
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"])));
|
|
7535
7535
|
var Span = newStyled.span(templateObject_4$J || (templateObject_4$J = __makeTemplateObject(["\n font-weight: 600;\n"], ["\n font-weight: 600;\n"])));
|
|
@@ -7551,7 +7551,7 @@ var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
|
|
|
7551
7551
|
Option: Option,
|
|
7552
7552
|
OptionsContainer: OptionsContainer,
|
|
7553
7553
|
});
|
|
7554
|
-
var templateObject_1$
|
|
7554
|
+
var templateObject_1$1r, templateObject_2$16, templateObject_3$V, templateObject_4$J, templateObject_5$A;
|
|
7555
7555
|
|
|
7556
7556
|
var OneColorSelector = function (_a) {
|
|
7557
7557
|
var color = _a.color, selected = _a.selected, testId = _a.testId, noStock = _a.noStock, _b = _a.showCross, showCross = _b === void 0 ? false : _b;
|
|
@@ -7592,7 +7592,7 @@ var OutOfStock = function (_a) {
|
|
|
7592
7592
|
return (jsxRuntime.jsxs("svg", __assign$1({ width: "32", height: "33", viewBox: "0 0 32 33", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsxRuntime.jsx("title", { children: title }, void 0), jsxRuntime.jsx("mask", __assign$1({ id: "path-1-inside-1", fill: "white" }, { children: jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.89435 9.60565C8.40619 10.0938 8.40619 10.8853 8.89435 11.3734L14.0209 16.5L8.89433 21.6266C8.40617 22.1147 8.40617 22.9062 8.89433 23.3943C9.38248 23.8825 10.1739 23.8825 10.6621 23.3943L15.7887 18.2677L21.2687 23.7478C21.7569 24.2359 22.5483 24.2359 23.0365 23.7478C23.5246 23.2596 23.5246 22.4682 23.0365 21.98L17.5564 16.5L23.0365 11.02C23.5246 10.5318 23.5246 9.74035 23.0365 9.25219C22.5483 8.76404 21.7568 8.76404 21.2687 9.25219L15.7887 14.7322L10.6621 9.60565C10.174 9.1175 9.3825 9.1175 8.89435 9.60565Z" }, void 0) }), void 0), jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.89435 9.60565C8.40619 10.0938 8.40619 10.8853 8.89435 11.3734L14.0209 16.5L8.89433 21.6266C8.40617 22.1147 8.40617 22.9062 8.89433 23.3943C9.38248 23.8825 10.1739 23.8825 10.6621 23.3943L15.7887 18.2677L21.2687 23.7478C21.7569 24.2359 22.5483 24.2359 23.0365 23.7478C23.5246 23.2596 23.5246 22.4682 23.0365 21.98L17.5564 16.5L23.0365 11.02C23.5246 10.5318 23.5246 9.74035 23.0365 9.25219C22.5483 8.76404 21.7568 8.76404 21.2687 9.25219L15.7887 14.7322L10.6621 9.60565C10.174 9.1175 9.3825 9.1175 8.89435 9.60565Z", fill: theme.colors.shades['300'].color }, void 0), jsxRuntime.jsx("path", { d: "M14.0209 16.5L14.5866 17.0657L15.1523 16.5L14.5866 15.9343L14.0209 16.5ZM8.89433 21.6266L9.46001 22.1922L8.89433 21.6266ZM10.6621 23.3943L11.2278 23.96L10.6621 23.3943ZM15.7887 18.2677L16.3544 17.7021L15.7887 17.1364L15.223 17.7021L15.7887 18.2677ZM17.5564 16.5L16.9908 15.9343L16.4251 16.5L16.9908 17.0657L17.5564 16.5ZM23.0365 11.02L23.6021 11.5856L23.0365 11.02ZM21.2687 9.25219L21.8344 9.81788L21.2687 9.25219ZM15.7887 14.7322L15.223 15.2979L15.7887 15.8636L16.3544 15.2979L15.7887 14.7322ZM9.46003 10.8077C9.2843 10.632 9.2843 10.3471 9.46003 10.1713L8.32866 9.03997C7.52809 9.84054 7.52809 11.1385 8.32866 11.9391L9.46003 10.8077ZM14.5866 15.9343L9.46003 10.8077L8.32866 11.9391L13.4552 17.0657L14.5866 15.9343ZM9.46001 22.1922L14.5866 17.0657L13.4552 15.9343L8.32864 21.0609L9.46001 22.1922ZM9.46001 22.8286C9.28428 22.6529 9.28428 22.368 9.46001 22.1922L8.32864 21.0609C7.52807 21.8614 7.52807 23.1594 8.32864 23.96L9.46001 22.8286ZM10.0964 22.8286C9.92067 23.0044 9.63575 23.0044 9.46001 22.8286L8.32864 23.96C9.12922 24.7606 10.4272 24.7606 11.2278 23.96L10.0964 22.8286ZM15.223 17.7021L10.0964 22.8286L11.2278 23.96L16.3544 18.8334L15.223 17.7021ZM21.8344 23.1821L16.3544 17.7021L15.223 18.8334L20.703 24.3135L21.8344 23.1821ZM22.4708 23.1821C22.2951 23.3578 22.0101 23.3578 21.8344 23.1821L20.703 24.3135C21.5036 25.114 22.8016 25.114 23.6022 24.3135L22.4708 23.1821ZM22.4708 22.5457C22.6465 22.7214 22.6465 23.0064 22.4708 23.1821L23.6022 24.3135C24.4027 23.5129 24.4027 22.2149 23.6022 21.4143L22.4708 22.5457ZM16.9908 17.0657L22.4708 22.5457L23.6022 21.4143L18.1221 15.9343L16.9908 17.0657ZM22.4708 10.4543L16.9908 15.9343L18.1221 17.0657L23.6021 11.5856L22.4708 10.4543ZM22.4708 9.81788C22.6465 9.99361 22.6465 10.2785 22.4708 10.4543L23.6021 11.5856C24.4027 10.7851 24.4027 9.48708 23.6021 8.68651L22.4708 9.81788ZM21.8344 9.81788C22.0101 9.64214 22.295 9.64214 22.4708 9.81788L23.6021 8.68651C22.8016 7.88593 21.5036 7.88593 20.703 8.68651L21.8344 9.81788ZM16.3544 15.2979L21.8344 9.81788L20.703 8.68651L15.223 14.1665L16.3544 15.2979ZM10.0964 10.1713L15.223 15.2979L16.3544 14.1665L11.2278 9.03997L10.0964 10.1713ZM9.46003 10.1713C9.63577 9.9956 9.92069 9.9956 10.0964 10.1713L11.2278 9.03997C10.4272 8.23939 9.12924 8.23939 8.32866 9.03997L9.46003 10.1713Z", fill: "white", mask: "url(#path-1-inside-1)" }, void 0), jsxRuntime.jsx("circle", { cx: "16", cy: "16.5", r: "12", stroke: theme.colors.shades['300'].color, strokeWidth: "0.5" }, void 0)] }), void 0));
|
|
7593
7593
|
};
|
|
7594
7594
|
|
|
7595
|
-
var Container$Z = newStyled.div(templateObject_1$
|
|
7595
|
+
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) {
|
|
7596
7596
|
var borderColor = _a.borderColor;
|
|
7597
7597
|
return borderColor;
|
|
7598
7598
|
}, function (_a) {
|
|
@@ -7606,7 +7606,7 @@ var PatternSelector = function (_a) {
|
|
|
7606
7606
|
var outerBorder = selected ? theme.colors.shades['550'].color : 'transparent';
|
|
7607
7607
|
return (jsxRuntime.jsx(Container$Z, __assign$1({ "data-testid": testId, borderColor: outerBorder, noStock: noStock }, { children: jsxRuntime.jsx(Image$2, { src: url, alt: "pattern" }, void 0) }), void 0));
|
|
7608
7608
|
};
|
|
7609
|
-
var templateObject_1$
|
|
7609
|
+
var templateObject_1$1q, templateObject_2$15;
|
|
7610
7610
|
|
|
7611
7611
|
var renderOptions$1 = function (options, showCross) {
|
|
7612
7612
|
if (showCross === void 0) { showCross = false; }
|
|
@@ -7634,10 +7634,10 @@ var ColorPickerWithTooltip = function (_a) {
|
|
|
7634
7634
|
var visibleOptions = options.slice(0, maxVisibleOptions);
|
|
7635
7635
|
var hiddenOptions = options.slice(maxVisibleOptions);
|
|
7636
7636
|
var showCloseIcon = (tooltipOptions !== null && tooltipOptions !== void 0 ? tooltipOptions : {}).showCloseIcon;
|
|
7637
|
-
var ColorPickerWrapper = newStyled(ColorRadioGroup$1)(templateObject_1$
|
|
7637
|
+
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 "])));
|
|
7638
7638
|
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));
|
|
7639
7639
|
};
|
|
7640
|
-
var templateObject_1$
|
|
7640
|
+
var templateObject_1$1p;
|
|
7641
7641
|
|
|
7642
7642
|
var renderOptions = function (selectedColor, options) {
|
|
7643
7643
|
if (options == null || options.length === 0) {
|
|
@@ -7675,7 +7675,7 @@ var MultiColorPicker = function (_a) {
|
|
|
7675
7675
|
return (jsxRuntime.jsxs(ColorRadioGroup$1, __assign$1({ value: selectedColor, onChange: onChangeHandler }, { children: [jsxRuntime.jsx(ColorRadioGroup$1.Label, { label: label, values: valueLabels }, void 0), jsxRuntime.jsx(ColorRadioGroup$1.OptionsContainer, { children: renderOptions(selectedColor, options) }, void 0)] }), void 0));
|
|
7676
7676
|
};
|
|
7677
7677
|
|
|
7678
|
-
var Wrapper$5 = newStyled.div(templateObject_1$
|
|
7678
|
+
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'); });
|
|
7679
7679
|
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"])));
|
|
7680
7680
|
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) {
|
|
7681
7681
|
return props.rightToLeft &&
|
|
@@ -7689,7 +7689,7 @@ var CrossSellCheckbox = function (_a) {
|
|
|
7689
7689
|
var theme = useTheme();
|
|
7690
7690
|
return (jsxRuntime.jsxs(Wrapper$5, __assign$1({ backgroundColor: theme.colors.shades['10'].color, rightToLeft: Boolean(rightToLeft) }, { children: [jsxRuntime.jsx(Checkbox, { text: "", id: "checkbox", onChange: onChange, size: exports.ComponentSize.Small, variant: "secondary" }, void 0), jsxRuntime.jsxs(Row$2, __assign$1({ rightToLeft: Boolean(rightToLeft) }, { children: [jsxRuntime.jsx(Image$3, { src: imageURL, alt: "Cross sell image", borderRadius: "0.5rem" }, void 0), jsxRuntime.jsxs(Col$1, { children: [jsxRuntime.jsx(H5, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0), jsxRuntime.jsxs(H3, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: [description, jsxRuntime.jsxs(FreeShipping, __assign$1({ color: theme.colors.shades['700'].color }, { children: [' ', "+ ", freeShippingText] }), void 0)] }), void 0)] }, void 0)] }), void 0)] }), void 0));
|
|
7691
7691
|
};
|
|
7692
|
-
var templateObject_1$
|
|
7692
|
+
var templateObject_1$1o, templateObject_2$14, templateObject_3$U, templateObject_4$I, templateObject_5$z, templateObject_6$w;
|
|
7693
7693
|
|
|
7694
7694
|
var index$1 = /*#__PURE__*/Object.freeze({
|
|
7695
7695
|
__proto__: null,
|
|
@@ -7718,7 +7718,7 @@ var sizeMapper = (_a = {},
|
|
|
7718
7718
|
_a[exports.ComponentSize.XSmall] = 'small',
|
|
7719
7719
|
_a[exports.ComponentSize.XXSmall] = 'small',
|
|
7720
7720
|
_a);
|
|
7721
|
-
var StyledBaseButton = newStyled(BaseButton)(templateObject_1$
|
|
7721
|
+
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) {
|
|
7722
7722
|
var wide = _a.wide;
|
|
7723
7723
|
return (wide ? '100%' : 'fit-content');
|
|
7724
7724
|
}, function (_a) {
|
|
@@ -7744,7 +7744,7 @@ var StyledIcon = newStyled(Icon$1)(templateObject_2$13 || (templateObject_2$13 =
|
|
|
7744
7744
|
var marginLeft = _a.marginLeft, marginRight = _a.marginRight;
|
|
7745
7745
|
return "\n margin-left: ".concat(marginLeft !== null && marginLeft !== void 0 ? marginLeft : '10px', ";\n margin-right: ").concat(marginRight !== null && marginRight !== void 0 ? marginRight : '10px', ";\n ");
|
|
7746
7746
|
});
|
|
7747
|
-
var templateObject_1$
|
|
7747
|
+
var templateObject_1$1n, templateObject_2$13;
|
|
7748
7748
|
|
|
7749
7749
|
var BaseCTA = function (_a) {
|
|
7750
7750
|
var _b, _c, _d;
|
|
@@ -7835,7 +7835,7 @@ var ButtonSecondaryOutline = function (props) {
|
|
|
7835
7835
|
} }), void 0));
|
|
7836
7836
|
};
|
|
7837
7837
|
|
|
7838
|
-
var Container$Y = newStyled.div(templateObject_1$
|
|
7838
|
+
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; });
|
|
7839
7839
|
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"])));
|
|
7840
7840
|
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; });
|
|
7841
7841
|
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; });
|
|
@@ -7844,9 +7844,9 @@ var Note = function (_a) {
|
|
|
7844
7844
|
var theme = useTheme();
|
|
7845
7845
|
return (jsxRuntime.jsxs(Container$Y, __assign$1({ color: backgroundColor ? backgroundColor : theme.component.deliveryDetails.note.backgroundColor, "data-testid": "Container" }, { children: [jsxRuntime.jsx(IconContainer$5, { children: jsxRuntime.jsx(Icon.Actions.Warning, { fill: accentColor ? accentColor : theme.component.deliveryDetails.note.accentColor }, void 0) }, void 0), jsxRuntime.jsx("div", { children: jsxRuntime.jsxs(Text$3, __assign$1({ color: color ? color : theme.component.deliveryDetails.note.color }, { children: [importantNoteText && (jsxRuntime.jsxs(Details, __assign$1({ color: accentColor ? accentColor : theme.component.deliveryDetails.note.accentColor }, { children: [importantNoteText, ":"] }), void 0)), ' ', text] }), void 0) }, void 0)] }), void 0));
|
|
7846
7846
|
};
|
|
7847
|
-
var templateObject_1$
|
|
7847
|
+
var templateObject_1$1m, templateObject_2$12, templateObject_3$T, templateObject_4$H;
|
|
7848
7848
|
|
|
7849
|
-
var Title$6 = newStyled.h1(templateObject_1$
|
|
7849
|
+
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) {
|
|
7850
7850
|
var theme = _a.theme;
|
|
7851
7851
|
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 ");
|
|
7852
7852
|
});
|
|
@@ -7889,9 +7889,9 @@ var DeliveryDetails = function (_a) {
|
|
|
7889
7889
|
var theme = useTheme();
|
|
7890
7890
|
return (jsxRuntime.jsxs("div", __assign$1({ "data-testid": "DeliveryDetails" }, { children: [jsxRuntime.jsx(Title$6, __assign$1({ color: theme.colors.shades[700].color }, { children: deliveryDetailsText }), void 0), jsxRuntime.jsx(Line, { backgroundColor: theme.colors.shades['200'].color }, void 0), note && jsxRuntime.jsx(Note, __assign$1({}, note), void 0), jsxRuntime.jsxs(Row$1, __assign$1({ "data-testid": "DD-row", theme: theme }, { children: [jsxRuntime.jsxs(Col, __assign$1({ theme: theme }, { children: [jsxRuntime.jsxs(SectionTitle, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(IconContainer$4, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Icon.PDP.Clock, { width: 1.5 }, void 0) }), void 0), arrivingBy.title] }), void 0), jsxRuntime.jsx(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: arrivingBy.details }), void 0)] }), void 0), jsxRuntime.jsxs(Col, __assign$1({ theme: theme }, { children: [jsxRuntime.jsxs(SectionTitle, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(IconContainer$4, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Icon.Navigation.MapMarker, { width: 1.5 }, void 0) }), void 0), shippingTo.title] }), void 0), jsxRuntime.jsx(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: shippingTo.details }), void 0)] }), void 0), jsxRuntime.jsxs(Col, __assign$1({ theme: theme }, { children: [jsxRuntime.jsxs(SectionTitle, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(IconContainer$4, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Icon.Messaging.Messenger, { width: 1.5 }, void 0) }), void 0), instantOrderUpdate.title] }), void 0), jsxRuntime.jsx(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: instantOrderUpdate.details }), void 0), instantOrderUpdate.keepMeUpdated && (jsxRuntime.jsxs(KeepMeUpdated, __assign$1({ onClick: instantOrderUpdate.keepMeUpdated.onClick, borderColor: theme.colors.shades['150'].color }, { children: [jsxRuntime.jsx(Icon.Messaging.Messenger, { width: 1, height: 1, fill: "#0078FF" }, void 0), instantOrderUpdate.keepMeUpdated.title] }), void 0))] }), void 0)] }), void 0)] }), void 0));
|
|
7891
7891
|
};
|
|
7892
|
-
var templateObject_1$
|
|
7892
|
+
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;
|
|
7893
7893
|
|
|
7894
|
-
var Backdrop = newStyled.div(templateObject_1$
|
|
7894
|
+
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) {
|
|
7895
7895
|
var top = _a.top;
|
|
7896
7896
|
return top;
|
|
7897
7897
|
}, function (_a) {
|
|
@@ -7945,20 +7945,20 @@ var Drawer = function (_a) {
|
|
|
7945
7945
|
}, [isOpen, onClose, onOpen]);
|
|
7946
7946
|
return isMounted ? (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Backdrop, { backgroundColor: backdropColor, isOpen: isOpenState, top: top, "data-testid": "Drawer-Backdrop", onClick: onClickOutside && onClickOutside }, void 0), jsxRuntime.jsx(Sidebar, __assign$1({ position: position, width: width, height: height, top: top, backgroundColor: backgroundColor, isOpen: isOpenState, "data-testid": "Drawer-Sidebar" }, { children: children }), void 0)] }, void 0)) : null;
|
|
7947
7947
|
};
|
|
7948
|
-
var templateObject_1$
|
|
7948
|
+
var templateObject_1$1k, templateObject_2$10;
|
|
7949
7949
|
|
|
7950
7950
|
var TooltipArrow = function (_a) {
|
|
7951
7951
|
var height = _a.height, width = _a.width, fill = _a.fill, stroke = _a.stroke;
|
|
7952
7952
|
return (jsxRuntime.jsxs("svg", __assign$1({ width: "".concat(width, "rem"), height: "".concat(height, "rem"), viewBox: "0 0 20 12", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsxRuntime.jsx("title", { children: "Tooltip Arrow" }, void 0), jsxRuntime.jsx("path", { d: "M11.1523 8.83618L18.9325 -0.500001L1.06752 -0.500001L8.84767 8.83618C9.44736 9.55581 10.5526 9.55581 11.1523 8.83618Z", fill: fill, stroke: stroke }, void 0)] }), void 0));
|
|
7953
7953
|
};
|
|
7954
7954
|
|
|
7955
|
-
var List = newStyled.ul(templateObject_1$
|
|
7955
|
+
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"])));
|
|
7956
7956
|
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"])));
|
|
7957
7957
|
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"])));
|
|
7958
7958
|
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"])));
|
|
7959
7959
|
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; });
|
|
7960
7960
|
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; });
|
|
7961
|
-
var templateObject_1$
|
|
7961
|
+
var templateObject_1$1j, templateObject_2$$, templateObject_3$R, templateObject_4$F, templateObject_5$x, templateObject_6$u;
|
|
7962
7962
|
|
|
7963
7963
|
var DropdownListIcons = function (_a) {
|
|
7964
7964
|
var items = _a.items;
|
|
@@ -7971,13 +7971,13 @@ var Dropdown = function (_a) {
|
|
|
7971
7971
|
return (jsxRuntime.jsxs(DropdownWrapper, __assign$1({ className: "dropdownWrapper", "data-testid": "Dropdown-wrapper" }, { children: [jsxRuntime.jsx(ArrowContainer$1, { children: jsxRuntime.jsx(TooltipArrow, { stroke: theme.colors.shades['200'].color, fill: "#fff", width: 1.25, height: 0.75 }, void 0) }, void 0), jsxRuntime.jsx(StyledDropdown, __assign$1({ borderColor: theme.colors.shades['200'].color }, { children: items.map(function (item, index) { return (jsxRuntime.jsx(DropdownItem, __assign$1({ onClick: item.callback, borderColor: theme.colors.shades['200'].color, color: theme.colors.shades['550'].color, hoverColor: theme.colors.shades['10'].color }, { children: item.description }), index)); }) }), void 0)] }), void 0));
|
|
7972
7972
|
};
|
|
7973
7973
|
|
|
7974
|
-
var DropdownContainer = newStyled.div(templateObject_1$
|
|
7974
|
+
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"])));
|
|
7975
7975
|
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"])));
|
|
7976
7976
|
var SizeLabel = newStyled.span(templateObject_3$Q || (templateObject_3$Q = __makeTemplateObject(["\n margin-right: 8px;\n"], ["\n margin-right: 8px;\n"])));
|
|
7977
7977
|
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"])));
|
|
7978
7978
|
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"])));
|
|
7979
7979
|
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"])));
|
|
7980
|
-
var templateObject_1$
|
|
7980
|
+
var templateObject_1$1i, templateObject_2$_, templateObject_3$Q, templateObject_4$E, templateObject_5$w, templateObject_6$t;
|
|
7981
7981
|
|
|
7982
7982
|
var SizeDropdown = function (_a) {
|
|
7983
7983
|
var options = _a.options, defaultLabel = _a.defaultLabel, onOptionSelect = _a.onOptionSelect;
|
|
@@ -8000,7 +8000,7 @@ var SizeDropdown = function (_a) {
|
|
|
8000
8000
|
return (jsxRuntime.jsxs(DropdownContainer, { children: [jsxRuntime.jsxs(DropdownLabel, __assign$1({ role: "button", tabIndex: 0, onClick: toggleDropdown }, { children: [jsxRuntime.jsx(SizeLabel, { children: selectedOption.size }, void 0), jsxRuntime.jsx(DetailLabel, { children: selectedOption.detail }, void 0), isOpen ? (jsxRuntime.jsx(Icon.Arrows.ChevronUp, { width: 0.563, height: 0.875, fill: "#292929" }, void 0)) : (jsxRuntime.jsx(Icon.Arrows.ChevronDown, { width: 0.563, height: 0.875, fill: "#292929" }, void 0))] }), void 0), isOpen && (jsxRuntime.jsx(DropdownOptions, { children: options.map(function (option) { return (jsxRuntime.jsxs(DropdownOption, __assign$1({ role: "option", "aria-selected": selectedOption.size === option.size, tabIndex: 0, onClick: function () { return handleOptionClick(option); }, onKeyDown: function (e) { return handleOptionKeyDown(e, option); } }, { children: [jsxRuntime.jsx("span", { children: option.size }, void 0), jsxRuntime.jsx("span", { children: option.detail }, void 0)] }), option.size)); }) }, void 0))] }, void 0));
|
|
8001
8001
|
};
|
|
8002
8002
|
|
|
8003
|
-
var DialogDropdownWrapper = newStyled.div(templateObject_1$
|
|
8003
|
+
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; });
|
|
8004
8004
|
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; });
|
|
8005
8005
|
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) {
|
|
8006
8006
|
return props.containerPosTop ? "calc(".concat(props.containerPosTop, ")") : "calc(".concat(props.top, " + 15px)");
|
|
@@ -8017,7 +8017,7 @@ var DropdownDialog = function (_a) {
|
|
|
8017
8017
|
return (jsxRuntime.jsx(DialogDropdownListItem, { children: jsxRuntime.jsx(DialogDropdownLink, __assign$1({ href: value }, { children: label }), void 0) }, idx));
|
|
8018
8018
|
}) }), void 0) }), void 0));
|
|
8019
8019
|
};
|
|
8020
|
-
var templateObject_1$
|
|
8020
|
+
var templateObject_1$1h, templateObject_2$Z, templateObject_3$P, templateObject_4$D, templateObject_5$v;
|
|
8021
8021
|
|
|
8022
8022
|
function FilteringDropdown(_a) {
|
|
8023
8023
|
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;
|
|
@@ -8050,7 +8050,7 @@ function FilteringDropdown(_a) {
|
|
|
8050
8050
|
}) }, void 0)] }), void 0));
|
|
8051
8051
|
}
|
|
8052
8052
|
|
|
8053
|
-
var Title$5 = newStyled.div(templateObject_1$
|
|
8053
|
+
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; });
|
|
8054
8054
|
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; });
|
|
8055
8055
|
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"])));
|
|
8056
8056
|
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'); });
|
|
@@ -8060,9 +8060,9 @@ var Accordion = function (_a) {
|
|
|
8060
8060
|
var _d = React__default["default"].useState(isOpenByDefault), isOpen = _d[0], setIsOpen = _d[1];
|
|
8061
8061
|
return (jsxRuntime.jsxs(Container$X, __assign$1({ "data-testid": "FiltersAccordion", showInMobile: showInMobile }, { children: [jsxRuntime.jsxs(Title$5, __assign$1({ onClick: function () { return setIsOpen(function (state) { return !state; }); }, borderColor: theme.colors.shades['100'].color, "data-testid": "accordion-title" }, { children: [jsxRuntime.jsx(P$3, __assign$1({ color: theme.colors.shades['550'].color }, { children: title }), void 0), jsxRuntime.jsx(ArrowContainer, { children: isOpen ? (jsxRuntime.jsx(Icon.Arrows.ChevronUp, { fill: theme.colors.shades['700'].color }, void 0)) : (jsxRuntime.jsx(Icon.Arrows.ChevronDown, { fill: theme.colors.shades['700'].color }, void 0)) }, void 0)] }), void 0), jsxRuntime.jsx("div", __assign$1({ style: { display: isOpen ? 'block' : 'none' }, "data-testid": "accordion-children-container" }, { children: children }), void 0)] }), void 0));
|
|
8062
8062
|
};
|
|
8063
|
-
var templateObject_1$
|
|
8063
|
+
var templateObject_1$1g, templateObject_2$Y, templateObject_3$O, templateObject_4$C;
|
|
8064
8064
|
|
|
8065
|
-
var SectionContent = newStyled.div(templateObject_1$
|
|
8065
|
+
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; });
|
|
8066
8066
|
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"])));
|
|
8067
8067
|
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"])));
|
|
8068
8068
|
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"])));
|
|
@@ -8072,7 +8072,7 @@ var OptionContainer = newStyled.div(templateObject_7$p || (templateObject_7$p =
|
|
|
8072
8072
|
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; });
|
|
8073
8073
|
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"])));
|
|
8074
8074
|
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"])));
|
|
8075
|
-
var templateObject_1$
|
|
8075
|
+
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;
|
|
8076
8076
|
|
|
8077
8077
|
var getStylesBySize$9 = function (size, theme) {
|
|
8078
8078
|
switch (size) {
|
|
@@ -8137,7 +8137,7 @@ var SelectorSecondary = function (_a) {
|
|
|
8137
8137
|
} }), id: id }, void 0));
|
|
8138
8138
|
};
|
|
8139
8139
|
|
|
8140
|
-
var UL = newStyled.ul(templateObject_1$
|
|
8140
|
+
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"])));
|
|
8141
8141
|
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; });
|
|
8142
8142
|
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"])));
|
|
8143
8143
|
var Tags = function (_a) {
|
|
@@ -8147,7 +8147,7 @@ var Tags = function (_a) {
|
|
|
8147
8147
|
return (jsxRuntime.jsxs(LI, __assign$1({ color: theme.colors.shades['700'].color, backgroundColor: color }, { children: [item, jsxRuntime.jsx(CloseIconContainer, __assign$1({ "data-testid": "li-close-icon", onClick: function () { return onCloseClick(index); } }, { children: jsxRuntime.jsx(Icon.Actions.Close, { fill: theme.colors.shades['700'].color, width: "100%", height: "100%" }, void 0) }), void 0)] }), index));
|
|
8148
8148
|
}) }), void 0));
|
|
8149
8149
|
};
|
|
8150
|
-
var templateObject_1$
|
|
8150
|
+
var templateObject_1$1e, templateObject_2$W, templateObject_3$M;
|
|
8151
8151
|
|
|
8152
8152
|
var Filters = function (_a) {
|
|
8153
8153
|
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;
|
|
@@ -8283,7 +8283,7 @@ var FilterCheckboxColor = function (_a) {
|
|
|
8283
8283
|
return (jsxRuntime.jsx(Checkbox, { onChange: onChange, checked: checked, text: text, id: "filter[".concat(sectionIndex, ",").concat(itemIndex, "]"), size: exports.ComponentSize.Medium, variant: "color", blockUncheck: blockUncheck, backgroundColor: color }, itemIndex));
|
|
8284
8284
|
};
|
|
8285
8285
|
|
|
8286
|
-
var Wrapper$4 = newStyled.div(templateObject_1$
|
|
8286
|
+
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"])));
|
|
8287
8287
|
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"])));
|
|
8288
8288
|
var FitGuarantee = function (_a) {
|
|
8289
8289
|
var _b;
|
|
@@ -8302,9 +8302,9 @@ var FitGuarantee = function (_a) {
|
|
|
8302
8302
|
fontWeight: theme.component.text.fitGuarantee.titleFontWeight,
|
|
8303
8303
|
} }, { children: title }), void 0), jsxRuntime.jsx(Text$7, __assign$1({ variant: "body", weight: "regular", size: "small", style: { fontWeight: theme.component.text.fitGuarantee.fontWeight } }, { children: description }), void 0)] }), void 0)] }, void 0) }), void 0));
|
|
8304
8304
|
};
|
|
8305
|
-
var templateObject_1$
|
|
8305
|
+
var templateObject_1$1d, templateObject_2$V;
|
|
8306
8306
|
|
|
8307
|
-
var Container$V = newStyled.div(templateObject_1$
|
|
8307
|
+
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"])));
|
|
8308
8308
|
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; });
|
|
8309
8309
|
var textButtonStyles$1 = function (theme) { return ({
|
|
8310
8310
|
border: 'none',
|
|
@@ -8320,7 +8320,7 @@ var FitPredictor = function (_a) {
|
|
|
8320
8320
|
var theme = useTheme();
|
|
8321
8321
|
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));
|
|
8322
8322
|
};
|
|
8323
|
-
var templateObject_1$
|
|
8323
|
+
var templateObject_1$1c, templateObject_2$U;
|
|
8324
8324
|
|
|
8325
8325
|
var Button$8 = newStyled.button(function () { return ({
|
|
8326
8326
|
background: 'transparent',
|
|
@@ -12564,14 +12564,14 @@ var Slider$1 = /*#__PURE__*/function (_React$Component) {
|
|
|
12564
12564
|
return Slider;
|
|
12565
12565
|
}(React__default["default"].Component);
|
|
12566
12566
|
|
|
12567
|
-
var StyledSlider = newStyled(Slider$1)(templateObject_1$
|
|
12567
|
+
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) {
|
|
12568
12568
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
12569
12569
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
12570
12570
|
}, function (_a) {
|
|
12571
12571
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
12572
12572
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
12573
12573
|
});
|
|
12574
|
-
var templateObject_1$
|
|
12574
|
+
var templateObject_1$1b;
|
|
12575
12575
|
|
|
12576
12576
|
var getStylesBySize$8 = function (size) {
|
|
12577
12577
|
// rem units
|
|
@@ -12630,7 +12630,7 @@ var SliderNavigation = function (_a) {
|
|
|
12630
12630
|
} }, { 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));
|
|
12631
12631
|
};
|
|
12632
12632
|
|
|
12633
|
-
var Image$1 = newStyled.img(templateObject_1$
|
|
12633
|
+
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) {
|
|
12634
12634
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
12635
12635
|
return borderRadiusVariant &&
|
|
12636
12636
|
"\n border-radius: 20px;\n ";
|
|
@@ -12648,7 +12648,7 @@ var Image$1 = newStyled.img(templateObject_1$19 || (templateObject_1$19 = __make
|
|
|
12648
12648
|
? "0.1rem solid ".concat(previewImgBorderColor ? previewImgBorderColor : theme.colors.shades['700'].color)
|
|
12649
12649
|
: 'inherit';
|
|
12650
12650
|
});
|
|
12651
|
-
var templateObject_1$
|
|
12651
|
+
var templateObject_1$1a;
|
|
12652
12652
|
|
|
12653
12653
|
var ImageSmallPreview = function (_a) {
|
|
12654
12654
|
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;
|
|
@@ -12656,7 +12656,7 @@ var ImageSmallPreview = function (_a) {
|
|
|
12656
12656
|
return (jsxRuntime.jsx(Image$1, { className: className, src: imageUrl, alt: alt, selected: selected, theme: theme, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor, loading: loading, decoding: decoding, width: theme.component.gallery.thumbnail.desktop.width, height: theme.component.gallery.thumbnail.desktop.height, isRatioSquare: isRatioSquare }, void 0));
|
|
12657
12657
|
};
|
|
12658
12658
|
|
|
12659
|
-
var horizontalStyles = css(templateObject_1$
|
|
12659
|
+
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"])));
|
|
12660
12660
|
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"])));
|
|
12661
12661
|
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) {
|
|
12662
12662
|
var isRatioSquare = _a.isRatioSquare, theme = _a.theme;
|
|
@@ -12674,7 +12674,7 @@ var ArrowsContainer = newStyled.div(templateObject_5$t || (templateObject_5$t =
|
|
|
12674
12674
|
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"])));
|
|
12675
12675
|
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"])));
|
|
12676
12676
|
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"])));
|
|
12677
|
-
var templateObject_1$
|
|
12677
|
+
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;
|
|
12678
12678
|
|
|
12679
12679
|
var getLoadingProp = function (index, itemsOnViewport) {
|
|
12680
12680
|
var loading = 'eager';
|
|
@@ -14302,7 +14302,7 @@ InnerImageZoom.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
14302
14302
|
afterZoomOut: PropTypes.func
|
|
14303
14303
|
} : {};
|
|
14304
14304
|
|
|
14305
|
-
var Container$T = newStyled.div(templateObject_1$
|
|
14305
|
+
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) {
|
|
14306
14306
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
14307
14307
|
return borderRadiusVariant && "border-radius: 40px;";
|
|
14308
14308
|
});
|
|
@@ -14328,7 +14328,7 @@ var InnerImageZoomStyled = newStyled(InnerImageZoom)(templateObject_8$g || (temp
|
|
|
14328
14328
|
var theme = _a.theme, isRatioSquare = _a.isRatioSquare;
|
|
14329
14329
|
return isRatioSquare ? '1 / 1' : theme.component.gallery.aspectRatio;
|
|
14330
14330
|
});
|
|
14331
|
-
var templateObject_1$
|
|
14331
|
+
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;
|
|
14332
14332
|
|
|
14333
14333
|
var ImageProductSlide$1 = function (_a) {
|
|
14334
14334
|
var _b;
|
|
@@ -14343,8 +14343,8 @@ var ImageProductSlide$1 = function (_a) {
|
|
|
14343
14343
|
}, width: position == 'horizontal' ? 360 : 530, height: position == 'horizontal' ? 480 : 720, hideHint: true, isRatioSquare: isRatioSquare }, void 0)) : (jsxRuntime.jsx(ImageStyled, { width: position == 'horizontal' ? '360px' : '530px', height: "auto", src: source, alt: content.alt, objectFit: "cover", loading: "eager", decoding: "sync", isRatioSquare: isRatioSquare }, void 0)), jsxRuntime.jsx(TopTagContainer$7, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsxRuntime.jsx(BottomTagContainer$7, __assign$1({ isCTAHidden: hideCTA }, { children: bottomTag }), void 0), !!topRightTag && (jsxRuntime.jsx(TopRightTagWrapper, { children: jsxRuntime.jsx(TopRightTagContainer$2, { children: topRightTag }, void 0) }, void 0))] }, void 0)), isVideo && jsxRuntime.jsx(Video$1, { source: source, thumbnail: content === null || content === void 0 ? void 0 : content.thumbnailUrl }, void 0), ctaText && ctaAction && (jsxRuntime.jsx("div", __assign$1({ style: { display: hideCTA ? 'none' : 'block' } }, { children: jsxRuntime.jsx(ButtonSecondaryOutlineWrapper, { wide: true, onClick: ctaAction, text: ctaText }, void 0) }), void 0))] }), void 0));
|
|
14344
14344
|
};
|
|
14345
14345
|
|
|
14346
|
-
var Container$S = newStyled.div(templateObject_1$
|
|
14347
|
-
var templateObject_1$
|
|
14346
|
+
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"])));
|
|
14347
|
+
var templateObject_1$17;
|
|
14348
14348
|
|
|
14349
14349
|
var getInitialIndex = function (images, selectedValue) {
|
|
14350
14350
|
if (selectedValue) {
|
|
@@ -14373,16 +14373,16 @@ var ProductGallery = function (_a) {
|
|
|
14373
14373
|
return (jsxRuntime.jsxs(Container$S, { children: [jsxRuntime.jsx(ImagePreviewList, { images: images, selectedImage: selectedImage, dataTestId: previewListDataTestId, onClick: onContentChange, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor, hasOverflowArrows: hasOverflowArrows, isRatioSquare: isRatioSquare, itemsOnViewport: itemsOnViewport }, void 0), jsxRuntime.jsx(ImageProductSlide$1, { content: selectedImage, topTag: topTag, topRightTag: topRightTag, bottomTag: bottomTag, testId: productImageDataTestId, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant, ctaText: ctaText, ctaAction: ctaAction, hideCTA: hideCTA, withZoom: withZoom, isRatioSquare: isRatioSquare }, void 0)] }, void 0));
|
|
14374
14374
|
};
|
|
14375
14375
|
|
|
14376
|
-
var StyledButton$
|
|
14376
|
+
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; });
|
|
14377
14377
|
var AmazonButton = function (_a) {
|
|
14378
14378
|
var onClick = _a.onClick;
|
|
14379
|
-
return (jsxRuntime.jsx(StyledButton$
|
|
14379
|
+
return (jsxRuntime.jsx(StyledButton$3, __assign$1({ backgroundColor: "#FED865", hoverBackgroundColor: "#F1CB58", onClick: onClick }, { children: jsxRuntime.jsx(Icon.Payment.Amazon, { width: 5.375, height: 1.25 }, void 0) }), void 0));
|
|
14380
14380
|
};
|
|
14381
14381
|
var PaypalButton = function (_a) {
|
|
14382
14382
|
var onClick = _a.onClick;
|
|
14383
|
-
return (jsxRuntime.jsx(StyledButton$
|
|
14383
|
+
return (jsxRuntime.jsx(StyledButton$3, __assign$1({ backgroundColor: "#ffc439", hoverBackgroundColor: "#F4BF41", onClick: onClick }, { children: jsxRuntime.jsx(Icon.Payment.Paypal, { width: 4.938, height: 1.25 }, void 0) }), void 0));
|
|
14384
14384
|
};
|
|
14385
|
-
var templateObject_1$
|
|
14385
|
+
var templateObject_1$16;
|
|
14386
14386
|
|
|
14387
14387
|
var Container$R = newStyled.div(function (props) { return ({
|
|
14388
14388
|
height: 'auto',
|
|
@@ -14437,7 +14437,7 @@ var IconsWithTitle = function (_a) {
|
|
|
14437
14437
|
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(Container$R, __assign$1({ textPosition: iconTitlePosition }, { children: [withWrapper ? (jsxRuntime.jsx(IconWrapper, __assign$1({ backgroundColor: backgroundColor, style: iconStyles, iconSize: isMobile ? iconSizeMobile : iconSizeDesktop }, { children: jsxRuntime.jsx(IconComponent, { width: isMobile ? iconSizeMobile : iconSizeDesktop, height: isMobile ? iconSizeMobile : iconSizeDesktop, fill: iconColor }, void 0) }), void 0)) : (jsxRuntime.jsx(IconComponent, { width: isMobile ? iconSizeMobile : iconSizeDesktop, height: isMobile ? iconSizeMobile : iconSizeDesktop, fill: iconColor }, void 0)), jsxRuntime.jsx(Text$7, { variant: "heading6", weight: "demi", style: titleStyles ? titleStyles : defaultTitleStyle, dangerouslySetInnerHTML: isTitleInnerHtml ? { __html: iconTitle } : { __html: "<span>".concat(iconTitle, "</span>") } }, void 0)] }), void 0) }, void 0));
|
|
14438
14438
|
};
|
|
14439
14439
|
|
|
14440
|
-
var Container$Q = newStyled.div(templateObject_1$
|
|
14440
|
+
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'); });
|
|
14441
14441
|
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'); });
|
|
14442
14442
|
var StyledTitle = newStyled.div(templateObject_3$J || (templateObject_3$J = __makeTemplateObject(["\n display: flex;\n ", "\n"], ["\n display: flex;\n ", "\n"])), function (_a) {
|
|
14443
14443
|
var titlePosition = _a.titlePosition;
|
|
@@ -14449,9 +14449,9 @@ var ImageCardWithDescription = function (_a) {
|
|
|
14449
14449
|
var isMobile = useWindowDimensions().isMobile;
|
|
14450
14450
|
return (jsxRuntime.jsxs(Container$Q, __assign$1({ "data-testid": "Container", isMobile: isMobile }, { children: [jsxRuntime.jsx(ImageContainer$4, __assign$1({ "data-testid": "ImageContainer", isMobile: isMobile }, { children: jsxRuntime.jsx(Image$3, { src: image, borderRadius: "40px", alt: "before", height: "100%", width: "100%" }, void 0) }), void 0), jsxRuntime.jsx(StyledTitle, __assign$1({ titlePosition: titlePosition, "data-testid": "StyledTitle" }, { children: isMobile ? (jsxRuntime.jsx(Text$7, __assign$1({ variant: "link", weight: "demi" }, { children: title }), void 0)) : (jsxRuntime.jsx(Text$7, __assign$1({ variant: "heading6", weight: "demi" }, { children: title }), void 0)) }), void 0), jsxRuntime.jsx(Text$7, __assign$1({ variant: "link", weight: "regular" }, { children: description }), void 0)] }), void 0));
|
|
14451
14451
|
};
|
|
14452
|
-
var templateObject_1$
|
|
14452
|
+
var templateObject_1$15, templateObject_2$R, templateObject_3$J;
|
|
14453
14453
|
|
|
14454
|
-
var Label$4 = newStyled.span(templateObject_1$
|
|
14454
|
+
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) {
|
|
14455
14455
|
var color = _a.color;
|
|
14456
14456
|
return color;
|
|
14457
14457
|
});
|
|
@@ -14464,7 +14464,7 @@ var InputLabel = function (_a) {
|
|
|
14464
14464
|
var theme = useTheme();
|
|
14465
14465
|
return (jsxRuntime.jsxs(Label$4, __assign$1({ color: isDisabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, { children: [label, isRequired && jsxRuntime.jsx(MandatoryIcon, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: "*" }), void 0)] }), void 0));
|
|
14466
14466
|
};
|
|
14467
|
-
var templateObject_1$
|
|
14467
|
+
var templateObject_1$14, templateObject_2$Q;
|
|
14468
14468
|
|
|
14469
14469
|
var containerByStatus = function (theme, status) {
|
|
14470
14470
|
if (status === exports.InputValidationType.Valid)
|
|
@@ -14473,7 +14473,7 @@ var containerByStatus = function (theme, status) {
|
|
|
14473
14473
|
return theme.colors.semantic.urgent.color;
|
|
14474
14474
|
return '';
|
|
14475
14475
|
};
|
|
14476
|
-
var Container$P = newStyled.div(templateObject_1$
|
|
14476
|
+
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) {
|
|
14477
14477
|
var theme = _a.theme, status = _a.status, hasError = _a.hasError;
|
|
14478
14478
|
return hasError ? '' : containerByStatus(theme, status);
|
|
14479
14479
|
});
|
|
@@ -14551,7 +14551,7 @@ var AnimatedPlaceholder = newStyled.span(templateObject_5$r || (templateObject_5
|
|
|
14551
14551
|
return theme.component.input.lineHeight;
|
|
14552
14552
|
});
|
|
14553
14553
|
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"])));
|
|
14554
|
-
var templateObject_1$
|
|
14554
|
+
var templateObject_1$13, templateObject_2$P, templateObject_3$I, templateObject_4$y, templateObject_5$r, templateObject_6$p;
|
|
14555
14555
|
|
|
14556
14556
|
var BaseInput = function (_a) {
|
|
14557
14557
|
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"]);
|
|
@@ -14596,7 +14596,7 @@ var Button$6 = function (_a) {
|
|
|
14596
14596
|
throw new Error("Invalid button variant ".concat(variant));
|
|
14597
14597
|
};
|
|
14598
14598
|
|
|
14599
|
-
var Container$O = newStyled.div(templateObject_1$
|
|
14599
|
+
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) {
|
|
14600
14600
|
var theme = _a.theme;
|
|
14601
14601
|
return theme.component.inputCustom.input.borderRadius;
|
|
14602
14602
|
});
|
|
@@ -14617,9 +14617,9 @@ var Custom = function (_a) {
|
|
|
14617
14617
|
}); }, [variant, onClick, text, rest.disabled]);
|
|
14618
14618
|
return (jsxRuntime.jsx(Container$O, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(BaseInput, __assign$1({}, rest, { children: jsxRuntime.jsx(ButtonContainer$1, __assign$1({ theme: theme, defaultRounded: defaultRounded }, { children: jsxRuntime.jsx(Button$6, __assign$1({}, props), void 0) }), void 0) }), void 0) }), void 0));
|
|
14619
14619
|
};
|
|
14620
|
-
var templateObject_1$
|
|
14620
|
+
var templateObject_1$12, templateObject_2$O;
|
|
14621
14621
|
|
|
14622
|
-
var SuccessContainer = newStyled.div(templateObject_1$
|
|
14622
|
+
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) {
|
|
14623
14623
|
var size = _a.size;
|
|
14624
14624
|
return (size === 'small' ? '36px' : '');
|
|
14625
14625
|
});
|
|
@@ -14629,9 +14629,9 @@ var Success = function (_a) {
|
|
|
14629
14629
|
var children = _a.children, successText = _a.successText, size = _a.size;
|
|
14630
14630
|
return (jsxRuntime.jsxs(SuccessContainer, __assign$1({ size: size }, { children: [jsxRuntime.jsxs(SuccessMessage, { children: [jsxRuntime.jsx(Icon.Actions.Check, { fill: "#5EAD63", width: 1.375, height: 1.063 }, void 0), jsxRuntime.jsx(SuccessText, { children: successText }, void 0)] }, void 0), children] }), void 0));
|
|
14631
14631
|
};
|
|
14632
|
-
var templateObject_1$
|
|
14632
|
+
var templateObject_1$11, templateObject_2$N, templateObject_3$H;
|
|
14633
14633
|
|
|
14634
|
-
var ButtonContainer = newStyled.div(templateObject_1
|
|
14634
|
+
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) {
|
|
14635
14635
|
var status = _a.status, type = _a.type, theme = _a.theme;
|
|
14636
14636
|
return status === exports.InputValidationType.Empty &&
|
|
14637
14637
|
type === 'primary' &&
|
|
@@ -14648,16 +14648,16 @@ var BasePlusButton = function (_a) {
|
|
|
14648
14648
|
}
|
|
14649
14649
|
return (jsxRuntime.jsx(BaseInput, __assign$1({ onValidation: setStatus, onChange: onChangeInput }, rest, { children: jsxRuntime.jsx(ButtonContainer, __assign$1({ status: status, type: "primary", theme: theme }, { children: jsxRuntime.jsx(ButtonSecondary, { text: text, onClick: function () { return onClick(inputValue); }, disabled: rest.disabled || status === exports.InputValidationType.Error }, void 0) }), void 0) }), void 0));
|
|
14650
14650
|
};
|
|
14651
|
-
var templateObject_1
|
|
14651
|
+
var templateObject_1$10;
|
|
14652
14652
|
|
|
14653
|
-
var Container$N = newStyled.div(templateObject_1
|
|
14653
|
+
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"])));
|
|
14654
14654
|
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"])));
|
|
14655
14655
|
var BasePlusIcon = function (_a) {
|
|
14656
14656
|
var Icon = _a.Icon, rest = __rest(_a, ["Icon"]);
|
|
14657
14657
|
var theme = useTheme();
|
|
14658
14658
|
return (jsxRuntime.jsx(Container$N, { children: jsxRuntime.jsx(BaseInput, __assign$1({}, rest, { children: jsxRuntime.jsx(IconContainer$3, { children: jsxRuntime.jsx(Icon, { testId: "IconWrapper", fill: theme.colors.shades['250'].color }, void 0) }, void 0) }), void 0) }, void 0));
|
|
14659
14659
|
};
|
|
14660
|
-
var templateObject_1
|
|
14660
|
+
var templateObject_1$$, templateObject_2$M;
|
|
14661
14661
|
|
|
14662
14662
|
var Input$3 = {
|
|
14663
14663
|
Simple: BaseInput,
|
|
@@ -14797,7 +14797,7 @@ var Portal = function (_a) {
|
|
|
14797
14797
|
var visibleStyle = function (_a) {
|
|
14798
14798
|
var opened = _a.opened;
|
|
14799
14799
|
return opened
|
|
14800
|
-
? css(templateObject_1$
|
|
14800
|
+
? 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 "])));
|
|
14801
14801
|
};
|
|
14802
14802
|
var transformStyle = function (_a) {
|
|
14803
14803
|
var opened = _a.opened, maxFullScreen = _a.maxFullScreen, initialTop = _a.initialTop;
|
|
@@ -14852,7 +14852,7 @@ var useModal = function (id) {
|
|
|
14852
14852
|
close: close,
|
|
14853
14853
|
}); }, [close, open, opened]);
|
|
14854
14854
|
};
|
|
14855
|
-
var templateObject_1$
|
|
14855
|
+
var templateObject_1$_, templateObject_2$L, templateObject_3$G, templateObject_4$x, templateObject_5$q, templateObject_6$o, templateObject_7$m;
|
|
14856
14856
|
|
|
14857
14857
|
var htmlReactParser = {exports: {}};
|
|
14858
14858
|
|
|
@@ -18633,7 +18633,7 @@ HTMLReactParser$1.htmlToDOM;
|
|
|
18633
18633
|
HTMLReactParser$1.attributesToProps;
|
|
18634
18634
|
HTMLReactParser$1.Element;
|
|
18635
18635
|
|
|
18636
|
-
var Bar$1 = newStyled.div(templateObject_1$
|
|
18636
|
+
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) {
|
|
18637
18637
|
var height = _a.height;
|
|
18638
18638
|
return height || '0.5rem';
|
|
18639
18639
|
}, function (_a) {
|
|
@@ -18716,9 +18716,9 @@ var MotivatorProgressBar = function (_a) {
|
|
|
18716
18716
|
};
|
|
18717
18717
|
return (jsxRuntime.jsxs(Container$L, __assign$1({ backgroundColor: backgroundColor }, { children: [jsxRuntime.jsxs(BarContainer, __assign$1({ "data-testid": "MPBContainer" }, { children: [jsxRuntime.jsxs(Value, { children: [currencyCode, currentAmount] }, void 0), jsxRuntime.jsx(Background$1, __assign$1({ backgroundColor: unfilledColor || theme.colors.shades['100'].color, "data-testid": "MPBBackground" }, { children: jsxRuntime.jsx(Bar$1, { "data-testid": "MPBBar", backgroundColor: fillColor, percent: progress }, void 0) }), void 0), jsxRuntime.jsxs(Value, __assign$1({ isBold: true }, { children: [currencyCode, endingValue] }), void 0)] }), void 0), isRewardUnlocked ? (jsxRuntime.jsx(MessageContainer, { dangerouslySetInnerHTML: { __html: rewardUnlockedMessage } }, void 0)) : (getRemainingAmountMessage())] }), void 0));
|
|
18718
18718
|
};
|
|
18719
|
-
var templateObject_1$
|
|
18719
|
+
var templateObject_1$Z, templateObject_2$K;
|
|
18720
18720
|
|
|
18721
|
-
var Container$K = newStyled.div(templateObject_1$
|
|
18721
|
+
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) {
|
|
18722
18722
|
var theme = _a.theme;
|
|
18723
18723
|
return theme.component.orderBar.backgroundColor;
|
|
18724
18724
|
});
|
|
@@ -18728,9 +18728,9 @@ var OrderBar = function (_a) {
|
|
|
18728
18728
|
var theme = useTheme();
|
|
18729
18729
|
return (jsxRuntime.jsxs(Container$K, __assign$1({ color: color }, { children: [jsxRuntime.jsx(Icon.Actions.Check, { width: 1.25, height: 0.875, fill: "#2F806A" }, void 0), jsxRuntime.jsx(H1, __assign$1({ color: theme.component.orderBar.fontColor }, { children: message }), void 0)] }), void 0));
|
|
18730
18730
|
};
|
|
18731
|
-
var templateObject_1$
|
|
18731
|
+
var templateObject_1$Y, templateObject_2$J;
|
|
18732
18732
|
|
|
18733
|
-
var Container$J = newStyled.div(templateObject_1$
|
|
18733
|
+
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"])));
|
|
18734
18734
|
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"])));
|
|
18735
18735
|
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"])));
|
|
18736
18736
|
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"])));
|
|
@@ -18767,9 +18767,9 @@ var PackCard = function (_a) {
|
|
|
18767
18767
|
currency: currencyCode || 'USD',
|
|
18768
18768
|
}), ' ', "each"] }), void 0)] }), void 0));
|
|
18769
18769
|
};
|
|
18770
|
-
var templateObject_1$
|
|
18770
|
+
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;
|
|
18771
18771
|
|
|
18772
|
-
var Container$I = newStyled.div(templateObject_1$
|
|
18772
|
+
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"])));
|
|
18773
18773
|
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"])));
|
|
18774
18774
|
var PageNumbersContainer = newStyled.div(templateObject_3$E || (templateObject_3$E = __makeTemplateObject(["\n display: flex;\n ", ";\n"], ["\n display: flex;\n ", ";\n"])), mediaQueries({
|
|
18775
18775
|
margin: ['0 0.75rem', '0 1.25rem'],
|
|
@@ -18791,7 +18791,7 @@ var PageNumber = newStyled.span(templateObject_4$v || (templateObject_4$v = __ma
|
|
|
18791
18791
|
var background = _a.background;
|
|
18792
18792
|
return background || 'unset';
|
|
18793
18793
|
});
|
|
18794
|
-
var templateObject_1$
|
|
18794
|
+
var templateObject_1$W, templateObject_2$H, templateObject_3$E, templateObject_4$v;
|
|
18795
18795
|
|
|
18796
18796
|
var Pagination = function (_a) {
|
|
18797
18797
|
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;
|
|
@@ -18856,7 +18856,7 @@ var PaginatorBlog = function (_a) {
|
|
|
18856
18856
|
: theme.colors.shades['700'].color, borderColor: theme.colors.shades['700'].color, theme: theme, bold: false, underline: false }, { children: i + from }), i)); }) }), void 0), jsxRuntime.jsx(IconContainer$1, __assign$1({ onClick: function () { return handlePageChange(page + 1); }, "data-testid": "PaginatorBlogRightChevron" }, { children: jsxRuntime.jsx(Icon.Arrows.ChevronRight, { fill: page === to ? theme.colors.shades['white'].color : theme.colors.shades['700'].color }, void 0) }), void 0)] }), void 0));
|
|
18857
18857
|
};
|
|
18858
18858
|
|
|
18859
|
-
var Container$H = newStyled.div(templateObject_1$
|
|
18859
|
+
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) {
|
|
18860
18860
|
var width = _a.width;
|
|
18861
18861
|
return width;
|
|
18862
18862
|
}, function (_a) {
|
|
@@ -18874,9 +18874,9 @@ var PaymentMethod = function (_a) {
|
|
|
18874
18874
|
var theme = useTheme();
|
|
18875
18875
|
return (jsxRuntime.jsx(Container$H, __assign$1({ width: width, height: height, borderColor: theme.colors.shades['100'].color, isClickable: Boolean(onClick), onClick: onClick, "data-testid": "payment-method-container" }, { children: React$2.createElement(Icon) }), void 0));
|
|
18876
18876
|
};
|
|
18877
|
-
var templateObject_1$
|
|
18877
|
+
var templateObject_1$V;
|
|
18878
18878
|
|
|
18879
|
-
var Container$G = newStyled.div(templateObject_1$
|
|
18879
|
+
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"])));
|
|
18880
18880
|
var IMAGE_WIDTH = '63px';
|
|
18881
18881
|
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);
|
|
18882
18882
|
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({
|
|
@@ -18923,7 +18923,7 @@ var SimpleOrderItem = function (_a) {
|
|
|
18923
18923
|
var theme = useTheme();
|
|
18924
18924
|
return (jsxRuntime.jsxs(Container$G, __assign$1({ className: className }, { children: [jsxRuntime.jsxs(ImageContainer$3, { children: [jsxRuntime.jsx(Image$3, { src: image.src, alt: image.alt, width: "4.063rem", height: "5.375rem", objectFit: "cover", objectPosition: "center" }, void 0), quantity ? (jsxRuntime.jsx(Quantity, __assign$1({ "data-testid": "order-item-quantity" }, { children: jsxRuntime.jsx(StyledSpan, { children: quantity }, void 0) }), void 0)) : null] }, void 0), jsxRuntime.jsxs(DescriptionContainer$1, __assign$1({ "data-testid": "order-item-description-container", theme: theme }, { children: [jsxRuntime.jsx(Title$4, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "product-title" }, { children: title }), void 0), subtitle && (jsxRuntime.jsx(Subtitle, __assign$1({ color: ((_c = (_b = theme.component.pricing) === null || _b === void 0 ? void 0 : _b.subtitle) === null || _c === void 0 ? void 0 : _c.color) || theme.colors.shades['700'].color, fontSize: ((_e = (_d = theme.component.pricing) === null || _d === void 0 ? void 0 : _d.subtitle) === null || _e === void 0 ? void 0 : _e.fontSize) || '0.75rem', lineHeight: ((_g = (_f = theme.component.pricing) === null || _f === void 0 ? void 0 : _f.subtitle) === null || _g === void 0 ? void 0 : _g.lineHeight) || '1rem', fontWeight: ((_j = (_h = theme.component.pricing) === null || _h === void 0 ? void 0 : _h.subtitle) === null || _j === void 0 ? void 0 : _j.fontWeight) || 'normal', "data-testid": "product-variant-title", margin: "0.5rem 0 0 0" }, { children: subtitle }), void 0)), midElement, isGift && jsxRuntime.jsx(Gift, { children: "Limited Time Only" }, void 0), jsxRuntime.jsxs(PriceContainer, __assign$1({ "data-testid": "order-item-price-container", withTag: !!tag, theme: theme }, { children: [tag && (jsxRuntime.jsx(OfferBanner, { discountAppliedText: tag === null || tag === void 0 ? void 0 : tag.text, backgroundColor: tag === null || tag === void 0 ? void 0 : tag.backgroundColor }, void 0)), isGift ? (jsxRuntime.jsx(Gift, { children: "GIFT" }, void 0)) : (jsxRuntime.jsx(PriceLabel$1, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, color: price.color || theme.colors.shades['700'].color, size: theme.component.pricing.priceLabel.price.size, finalPriceStyle: finalPriceStyle, originalPriceStyled: true }, void 0))] }), void 0)] }), void 0)] }), void 0));
|
|
18925
18925
|
};
|
|
18926
|
-
var templateObject_1$
|
|
18926
|
+
var templateObject_1$U, templateObject_2$G, templateObject_3$D, templateObject_4$u, templateObject_5$o, templateObject_6$m, templateObject_7$k;
|
|
18927
18927
|
|
|
18928
18928
|
var P$1 = newStyled.p(function (_a) {
|
|
18929
18929
|
var color = _a.color;
|
|
@@ -18937,7 +18937,7 @@ var P$1 = newStyled.p(function (_a) {
|
|
|
18937
18937
|
margin: '0.938rem 4.188rem',
|
|
18938
18938
|
});
|
|
18939
18939
|
});
|
|
18940
|
-
var Bar = newStyled.div(templateObject_1$
|
|
18940
|
+
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) {
|
|
18941
18941
|
var height = _a.height;
|
|
18942
18942
|
return height || '0.5rem';
|
|
18943
18943
|
}, function (_a) {
|
|
@@ -18982,9 +18982,9 @@ var ProgressBar = function (_a) {
|
|
|
18982
18982
|
var theme = useTheme();
|
|
18983
18983
|
return (jsxRuntime.jsxs(Container$F, __assign$1({ "data-testid": "PBContainer", widthAuto: widthAuto, description: description }, { children: [jsxRuntime.jsx(Background, __assign$1({ backgroundColor: backgroundColor || theme.colors.shades['100'].color, height: height, borderRadius: borderRadius, "data-testid": "PBBackground" }, { children: jsxRuntime.jsx(Bar, { "data-testid": "PBBar", backgroundColor: fillColor, percent: percent, height: height, borderRadius: borderRadius }, void 0) }), void 0), description && (jsxRuntime.jsx(P$1, __assign$1({ "data-testid": "paragraph", color: theme.colors.pallete.secondary.color }, { children: description }), void 0))] }), void 0));
|
|
18984
18984
|
};
|
|
18985
|
-
var templateObject_1$
|
|
18985
|
+
var templateObject_1$T;
|
|
18986
18986
|
|
|
18987
|
-
var Container$E = newStyled.div(templateObject_1$
|
|
18987
|
+
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; });
|
|
18988
18988
|
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"])));
|
|
18989
18989
|
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"])));
|
|
18990
18990
|
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)'; });
|
|
@@ -19012,7 +19012,7 @@ var QuantityPicker = function (_a) {
|
|
|
19012
19012
|
}, [value, clamp]);
|
|
19013
19013
|
return (jsxRuntime.jsxs(Container$E, __assign$1({ borderColor: theme.colors.shades['200'].color, color: theme.colors.shades['700'].color, "data-testid": testId, borderRadius: theme.component.qtyPicker.borderRadius }, { children: [jsxRuntime.jsx(IncreaseDecrease, __assign$1({ "data-testid": "".concat(testId, "-minus"), onClick: function () { return setInternal(function (value) { return clamp(value - 1); }); } }, { children: "-" }), void 0), jsxRuntime.jsx(Number$1, { children: internal }, void 0), jsxRuntime.jsx(IncreaseDecrease, __assign$1({ isMaxSelected: value === maxValue, "data-testid": "".concat(testId, "-plus"), onClick: function () { return setInternal(function (value) { return clamp(value + 1); }); } }, { children: "+" }), void 0)] }), void 0));
|
|
19014
19014
|
};
|
|
19015
|
-
var templateObject_1$
|
|
19015
|
+
var templateObject_1$S, templateObject_2$F, templateObject_3$C, templateObject_4$t;
|
|
19016
19016
|
|
|
19017
19017
|
/* base styles & size variants */
|
|
19018
19018
|
var CustomRadioStyles$1 = {
|
|
@@ -19081,7 +19081,7 @@ var ContainerStyles$1 = {
|
|
|
19081
19081
|
},
|
|
19082
19082
|
};
|
|
19083
19083
|
|
|
19084
|
-
var Wrapper$3 = newStyled.div(templateObject_1$
|
|
19084
|
+
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"])));
|
|
19085
19085
|
var Container$D = newStyled.div(__assign$1({}, ContainerStyles$1.baseStyles), function (props) { return [ContainerStyles$1[props.size](props.theme)]; });
|
|
19086
19086
|
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) {
|
|
19087
19087
|
var disabled = _a.disabled;
|
|
@@ -19101,7 +19101,7 @@ var RadioPrimary = function (_a) {
|
|
|
19101
19101
|
};
|
|
19102
19102
|
return (jsxRuntime.jsxs(Wrapper$3, { children: [jsxRuntime.jsxs(Container$D, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsxRuntime.jsx(Input$2, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled, style: style }, void 0), jsxRuntime.jsx(CustomRadio$1, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), jsxRuntime.jsx(StyledLabel$1, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0)] }, void 0));
|
|
19103
19103
|
};
|
|
19104
|
-
var templateObject_1$
|
|
19104
|
+
var templateObject_1$R, templateObject_2$E, templateObject_3$B;
|
|
19105
19105
|
|
|
19106
19106
|
var RadioGroupInput = function (_a) {
|
|
19107
19107
|
var style = _a.style, name = _a.name, _b = _a.options, options = _b === void 0 ? [] : _b, value = _a.value, onChange = _a.onChange, _c = _a.size, size = _c === void 0 ? exports.ComponentSize.Medium : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d;
|
|
@@ -19180,7 +19180,7 @@ var ContainerStyles = {
|
|
|
19180
19180
|
},
|
|
19181
19181
|
};
|
|
19182
19182
|
|
|
19183
|
-
var Wrapper$2 = newStyled.div(templateObject_1$
|
|
19183
|
+
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"])));
|
|
19184
19184
|
var Container$C = newStyled.div(__assign$1({}, ContainerStyles.baseStyles), function (props) { return [ContainerStyles[props.size](props.theme)]; });
|
|
19185
19185
|
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) {
|
|
19186
19186
|
var disabled = _a.disabled;
|
|
@@ -19206,7 +19206,7 @@ var ClubRadioInput = function (_a) {
|
|
|
19206
19206
|
};
|
|
19207
19207
|
return (jsxRuntime.jsxs(Wrapper$2, { children: [jsxRuntime.jsxs(Container$C, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsxRuntime.jsx(Input$1, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled, style: style }, void 0), jsxRuntime.jsx(CustomRadio, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), jsxRuntime.jsx(StyledLabel, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled, "aria-checked": checked }, { children: label }), void 0)] }, void 0));
|
|
19208
19208
|
};
|
|
19209
|
-
var templateObject_1$
|
|
19209
|
+
var templateObject_1$Q, templateObject_2$D, templateObject_3$A;
|
|
19210
19210
|
|
|
19211
19211
|
var ClubRadioGroupInput = function (_a) {
|
|
19212
19212
|
var style = _a.style, name = _a.name, _b = _a.options, options = _b === void 0 ? [] : _b, value = _a.value, onChange = _a.onChange, _c = _a.size, size = _c === void 0 ? exports.ComponentSize.Medium : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d;
|
|
@@ -19234,7 +19234,7 @@ function formatDate(date, format) {
|
|
|
19234
19234
|
}
|
|
19235
19235
|
}
|
|
19236
19236
|
|
|
19237
|
-
var Container$B = newStyled.div(templateObject_1$
|
|
19237
|
+
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"])));
|
|
19238
19238
|
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"])));
|
|
19239
19239
|
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"])));
|
|
19240
19240
|
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"])));
|
|
@@ -19275,11 +19275,11 @@ var Review$1 = function (_a) {
|
|
|
19275
19275
|
return (jsxRuntime.jsx(Modal, __assign$1({ id: modalId, maxFullScreen: maxFullScreen, padding: "0" }, { children: jsxRuntime.jsxs(Container$B, { children: [jsxRuntime.jsx(CloseButton, __assign$1({ onClick: close }, { children: "X" }), void 0), jsxRuntime.jsx(ImageContainer$2, { children: image &&
|
|
19276
19276
|
(!isVideo ? (jsxRuntime.jsx(ImageWrapper$4, { src: image.src, alt: image.alt }, void 0)) : (jsxRuntime.jsx(VideoWrapper, { ref: refVideo, src: image.src, width: "100%", controls: true }, void 0))) }, void 0), jsxRuntime.jsxs(DescriptionContainer, { children: [opened && (jsxRuntime.jsxs(ReviewerName$1, { children: [reviewerName, verified && jsxRuntime.jsx(VerifiedText, { children: "Verified Buyer" }, void 0)] }, void 0)), jsxRuntime.jsxs(Content$1, __assign$1({ "data-testid": "review-detail-content" }, { children: [jsxRuntime.jsxs(StarsContent, { children: [jsxRuntime.jsx(StarList, { starsNumber: 5, rating: rating, fill: stars.color, size: stars.size }, void 0), jsxRuntime.jsx(DateText$1, { children: formatDate(date) }, void 0)] }, void 0), jsxRuntime.jsxs(ReviewContainer$1, { children: [jsxRuntime.jsx(ReviewTitle$1, { children: title }, void 0), jsxRuntime.jsx(ReviewDescription, { dangerouslySetInnerHTML: { __html: description } }, void 0)] }, void 0), jsxRuntime.jsxs(HelpfulContainer, { children: [jsxRuntime.jsxs(HelpfulAction, __assign$1({ "data-testid": "helpful-action", onClick: function () { return (helpfulAction ? helpfulAction(reviewId) : undefined); } }, { children: [jsxRuntime.jsx(Icon.Custom.ThumbsUp, { width: 1, height: 1, fill: "#000" }, void 0), jsxRuntime.jsx(HelpfulCount, { children: helpfulCount }, void 0)] }), void 0), jsxRuntime.jsxs(NotHelpfulAction, __assign$1({ "data-testid": "not-helpful-action", onClick: function () { return (notHelpfulAction ? notHelpfulAction(reviewId) : undefined); } }, { children: [jsxRuntime.jsx(Icon.Custom.ThumbsDown, { width: 1, height: 1, fill: "#000" }, void 0), jsxRuntime.jsx(NotHelpfulCount, { children: notHelpfulCount }, void 0)] }), void 0)] }, void 0)] }), void 0), productImage && productLink && (jsxRuntime.jsxs(ProductContainer, __assign$1({ onClick: function () { return (window.location.href = productLink); } }, { children: [jsxRuntime.jsx(ProductImageWrapper, { children: jsxRuntime.jsx(ProductImage, { src: productImage, alt: "productImage" }, void 0) }, void 0), jsxRuntime.jsx(ProductTitle, { children: productTitle }, void 0)] }), void 0))] }, void 0)] }, void 0) }), void 0));
|
|
19277
19277
|
};
|
|
19278
|
-
var templateObject_1$
|
|
19278
|
+
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;
|
|
19279
19279
|
|
|
19280
19280
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_DESKTOP = 500;
|
|
19281
19281
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_MOBILE = 168;
|
|
19282
|
-
var Container$A = newStyled.div(templateObject_1$
|
|
19282
|
+
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"])));
|
|
19283
19283
|
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"])));
|
|
19284
19284
|
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"])));
|
|
19285
19285
|
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"])));
|
|
@@ -19331,9 +19331,9 @@ var Review = function (_a) {
|
|
|
19331
19331
|
: description,
|
|
19332
19332
|
} }, void 0), jsxRuntime.jsxs(HelpfulContainerDesktop, __assign$1({ showMoreDesktop: description.length > REVIEWS_DESCRIPTION_MAX_LENGTH_DESKTOP }, { children: [helpfulActionText && helpfulAction && (jsxRuntime.jsx(ButtonSecondaryWrapper, { onClick: function () { return helpfulAction(reviewId); }, text: helpfulActionText, size: exports.ComponentSize.Small }, void 0)), (helpfulCount || (hasTextWhenHelpfulCount0 && helpfulCount === 0)) && (jsxRuntime.jsxs(HelpfulText, { children: [helpfulCount, " people found this helpful"] }, void 0))] }), void 0)] }, void 0), jsxRuntime.jsxs(ImagesContainer, { children: [jsxRuntime.jsxs(Images, { children: [images === null || images === void 0 ? void 0 : images.map(function (image) { return (jsxRuntime.jsx(ImageWrapper$3, __assign$1({ onClick: function () { return onClickImage && onClickImage(image.src); } }, { children: jsxRuntime.jsx(Image$3, { src: image.src, alt: image.alt, height: "10rem", width: "7.5rem" }, void 0) }), image.src)); }), !images || (images.length === 0 && jsxRuntime.jsx(ImageSpace, {}, void 0))] }, void 0), jsxRuntime.jsx(VariantText, { children: reviewVariant }, void 0)] }, void 0)] }), void 0), jsxRuntime.jsx(HelpfulTexti, {}, void 0), jsxRuntime.jsxs(HelpfulContainerMobile, { children: [helpfulActionText && helpfulAction && (jsxRuntime.jsx(ButtonSecondaryWrapper, { onClick: function () { return helpfulAction(reviewId); }, text: helpfulActionText, size: exports.ComponentSize.Small }, void 0)), (helpfulCount || (hasTextWhenHelpfulCount0 && helpfulCount === 0)) && (jsxRuntime.jsxs(HelpfulText, { children: [helpfulCount, " people found this helpful"] }, void 0))] }, void 0)] }, void 0));
|
|
19333
19333
|
};
|
|
19334
|
-
var templateObject_1$
|
|
19334
|
+
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;
|
|
19335
19335
|
|
|
19336
|
-
var Container$z = newStyled.div(templateObject_1$
|
|
19336
|
+
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"])));
|
|
19337
19337
|
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"])));
|
|
19338
19338
|
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"])));
|
|
19339
19339
|
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"])));
|
|
@@ -19349,9 +19349,9 @@ var ReviewsHeader = function (_a) {
|
|
|
19349
19349
|
var theme = useTheme();
|
|
19350
19350
|
return (jsxRuntime.jsxs(Container$z, { children: [jsxRuntime.jsx(Text$7, __assign$1({ variant: "heading3", weight: "bold", style: { margin: '10px 0' } }, { children: title }), void 0), jsxRuntime.jsxs(ReviewsContainer, { children: [jsxRuntime.jsxs(ReviewsCount, { children: [jsxRuntime.jsxs(ReviewsStars, { children: [jsxRuntime.jsx(ReviewsTextCount, __assign$1({ variant: "heading3", weight: "bold" }, { children: rating }), void 0), jsxRuntime.jsx(StarList, { rating: rating, size: exports.ComponentSize.Medium, starsNumber: starsNumber, fill: theme.component.stars.element.color }, void 0)] }, void 0), jsxRuntime.jsxs(Text$7, __assign$1({ variant: "body", size: "small", weight: "regular", style: { marginBottom: '20px' } }, { children: [reviews, " ", reviewsText] }), void 0)] }, void 0), jsxRuntime.jsx(ReviewsImages, { children: reviewsSummary.map(function (summaryItem) { return (jsxRuntime.jsx(SummaryItem, { onClick: function () { return onClickReview(summaryItem); }, backgroundUrl: summaryItem, "data-testid": "summary-review-item" }, summaryItem)); }) }, void 0)] }, void 0)] }, void 0));
|
|
19351
19351
|
};
|
|
19352
|
-
var templateObject_1$
|
|
19352
|
+
var templateObject_1$N, templateObject_2$A, templateObject_3$x, templateObject_4$q, templateObject_5$l, templateObject_6$j, templateObject_7$h;
|
|
19353
19353
|
|
|
19354
|
-
var Container$y = newStyled.div(templateObject_1$
|
|
19354
|
+
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"])));
|
|
19355
19355
|
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; });
|
|
19356
19356
|
var ScrollToTop = function (_a) {
|
|
19357
19357
|
var scrollToTopText = _a.scrollToTopText, onClick = _a.onClick, fill = _a.fill, _b = _a.Icon, Icon$1 = _b === void 0 ? Icon.Arrows.CircleChevronUp : _b;
|
|
@@ -19359,13 +19359,13 @@ var ScrollToTop = function (_a) {
|
|
|
19359
19359
|
var fillValue = fill || theme.colors.pallete.primary.color;
|
|
19360
19360
|
return (jsxRuntime.jsxs(Container$y, __assign$1({ onClick: onClick, "data-testid": "scrollTopContainer" }, { children: [jsxRuntime.jsx(Text$1, __assign$1({ color: theme.colors.shades['700'].color }, { children: scrollToTopText }), void 0), jsxRuntime.jsx(Icon$1, { width: 1.375, height: 1.375, fill: fillValue }, void 0)] }), void 0));
|
|
19361
19361
|
};
|
|
19362
|
-
var templateObject_1$
|
|
19362
|
+
var templateObject_1$M, templateObject_2$z;
|
|
19363
19363
|
|
|
19364
|
-
var Button$5 = newStyled.button(templateObject_1$
|
|
19364
|
+
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({
|
|
19365
19365
|
right: ['1rem', '7.75rem'],
|
|
19366
19366
|
top: ['0.75rem', '0.75rem'],
|
|
19367
19367
|
}));
|
|
19368
|
-
var templateObject_1$
|
|
19368
|
+
var templateObject_1$L;
|
|
19369
19369
|
|
|
19370
19370
|
var ClearButton = function (_a) {
|
|
19371
19371
|
var onClick = _a.onClick;
|
|
@@ -19384,7 +19384,7 @@ var Footer = function (_a) {
|
|
|
19384
19384
|
return (jsxRuntime.jsx(Container$x, { children: jsxRuntime.jsx(Text$7, __assign$1({ variant: "link", size: "regular", underline: true, onClick: onClick }, { children: text }), void 0) }, void 0));
|
|
19385
19385
|
};
|
|
19386
19386
|
|
|
19387
|
-
var Container$w = newStyled.div(templateObject_1$
|
|
19387
|
+
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({
|
|
19388
19388
|
borderTop: ['0.063rem solid var(--colors-shades-100-color)', 'none'],
|
|
19389
19389
|
}));
|
|
19390
19390
|
var Description = newStyled.div({
|
|
@@ -19398,7 +19398,7 @@ var Description = newStyled.div({
|
|
|
19398
19398
|
textAlign: 'start',
|
|
19399
19399
|
},
|
|
19400
19400
|
});
|
|
19401
|
-
var templateObject_1$
|
|
19401
|
+
var templateObject_1$K;
|
|
19402
19402
|
|
|
19403
19403
|
var ProductItem = function (_a) {
|
|
19404
19404
|
var _b;
|
|
@@ -19411,7 +19411,7 @@ var OptionsList = newStyled.ul({
|
|
|
19411
19411
|
margin: '0px',
|
|
19412
19412
|
padding: '0px',
|
|
19413
19413
|
});
|
|
19414
|
-
var OptionItem = newStyled.li(templateObject_1$
|
|
19414
|
+
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({
|
|
19415
19415
|
padding: [0, '0rem 1rem'],
|
|
19416
19416
|
borderRadius: [0, '0.5rem'],
|
|
19417
19417
|
}));
|
|
@@ -19431,7 +19431,7 @@ var Container$v = newStyled.div(templateObject_2$y || (templateObject_2$y = __ma
|
|
|
19431
19431
|
var Header$2 = newStyled.div(templateObject_3$w || (templateObject_3$w = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), mediaQueries({
|
|
19432
19432
|
margin: ['0rem 0rem 1rem 0rem', '1rem'],
|
|
19433
19433
|
}));
|
|
19434
|
-
var templateObject_1$
|
|
19434
|
+
var templateObject_1$J, templateObject_2$y, templateObject_3$w;
|
|
19435
19435
|
|
|
19436
19436
|
var ResultsPanel = function (_a) {
|
|
19437
19437
|
var options = _a.options, header = _a.header, footer = _a.footer, onViewAll = _a.onViewAll, testId = _a.testId;
|
|
@@ -19450,8 +19450,8 @@ var SearchIconContainer = newStyled.div({
|
|
|
19450
19450
|
background: 'white',
|
|
19451
19451
|
alignSelf: 'center',
|
|
19452
19452
|
});
|
|
19453
|
-
var StyledButton$
|
|
19454
|
-
var templateObject_1$
|
|
19453
|
+
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"])));
|
|
19454
|
+
var templateObject_1$I;
|
|
19455
19455
|
|
|
19456
19456
|
var SearchControl = function (_a) {
|
|
19457
19457
|
var open = _a.open, onSearch = _a.onSearch, onClose = _a.onClose, _b = _a.showSearchIcon, showSearchIcon = _b === void 0 ? false : _b;
|
|
@@ -19466,7 +19466,7 @@ var SearchControl = function (_a) {
|
|
|
19466
19466
|
}
|
|
19467
19467
|
return (jsxRuntime.jsx(SearchIconContainer, { children: jsxRuntime.jsx(Icon.Navigation.Search, { title: "Search icon", height: 1.25, width: 1.25 }, void 0) }, void 0));
|
|
19468
19468
|
}
|
|
19469
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(StyledButton$
|
|
19469
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(StyledButton$2, { text: "SEARCH", onClick: onSearch }, void 0), open && jsxRuntime.jsx(ClearButton, { onClick: onClose }, void 0)] }, void 0));
|
|
19470
19470
|
};
|
|
19471
19471
|
|
|
19472
19472
|
var Input = newStyled.input(function (props) { return ({
|
|
@@ -19563,12 +19563,12 @@ var SearchBar = function (_a) {
|
|
|
19563
19563
|
} }, void 0), jsxRuntime.jsx(SearchControl, { showSearchIcon: isBlogSearchBar, open: state.open, onClose: handleOnClose, onSearch: function () { return onSearch(state.term); } }, void 0)] }), void 0), state.open && !!options.length && (jsxRuntime.jsx(ResultsPanel, { testId: resultsPanelDataTestId, options: options, header: shouldDisplaySuggestion() ? 'Most popular products' : undefined, footer: allResults ? "View all results (".concat(allResults, ")") : undefined, onViewAll: function () { return onSearch(state.term); } }, void 0))] }), void 0));
|
|
19564
19564
|
};
|
|
19565
19565
|
|
|
19566
|
-
var Container$t = newStyled.div(templateObject_1$
|
|
19566
|
+
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"])));
|
|
19567
19567
|
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"])));
|
|
19568
19568
|
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"])));
|
|
19569
19569
|
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"])));
|
|
19570
19570
|
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"])));
|
|
19571
|
-
var templateObject_1$
|
|
19571
|
+
var templateObject_1$H, templateObject_2$x, templateObject_3$v, templateObject_4$p, templateObject_5$k;
|
|
19572
19572
|
|
|
19573
19573
|
var SearchNavigation = function (_a) {
|
|
19574
19574
|
var returnText = _a.returnText, returnUrl = _a.returnUrl, _b = _a.steps, steps = _b === void 0 ? [] : _b, returnAction = _a.returnAction;
|
|
@@ -19577,7 +19577,7 @@ var SearchNavigation = function (_a) {
|
|
|
19577
19577
|
}) }, void 0)] }, void 0));
|
|
19578
19578
|
};
|
|
19579
19579
|
|
|
19580
|
-
var Container$s = newStyled.div(templateObject_1$
|
|
19580
|
+
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) {
|
|
19581
19581
|
var alignCenter = _a.alignCenter;
|
|
19582
19582
|
return alignCenter &&
|
|
19583
19583
|
"\n justify-content: center;\n align-items: center;\n text-align: center;\n ";
|
|
@@ -19594,9 +19594,9 @@ var ShortBanner = function (_a) {
|
|
|
19594
19594
|
var theme = useTheme();
|
|
19595
19595
|
return (jsxRuntime.jsxs(Container$s, __assign$1({ backgroundColor: backgroundColor, alignCenter: alignCenter, widthAuto: widthAuto, "data-testid": "BannerContainer", theme: theme, textColor: textColor }, { children: [jsxRuntime.jsx(TitleText, { children: title }, void 0), jsxRuntime.jsx(BannerText, { children: bannerText }, void 0)] }), void 0));
|
|
19596
19596
|
};
|
|
19597
|
-
var templateObject_1$
|
|
19597
|
+
var templateObject_1$G, templateObject_2$w, templateObject_3$u;
|
|
19598
19598
|
|
|
19599
|
-
var TableElement$3 = newStyled.table(templateObject_1$
|
|
19599
|
+
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; });
|
|
19600
19600
|
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; });
|
|
19601
19601
|
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; });
|
|
19602
19602
|
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"])));
|
|
@@ -19606,7 +19606,7 @@ var Container$r = newStyled('div')(templateObject_7$g || (templateObject_7$g = _
|
|
|
19606
19606
|
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"])));
|
|
19607
19607
|
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"])));
|
|
19608
19608
|
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; });
|
|
19609
|
-
var templateObject_1$
|
|
19609
|
+
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;
|
|
19610
19610
|
|
|
19611
19611
|
var getIsOdd$2 = function (number) { return number % 2 !== 0; };
|
|
19612
19612
|
var getCellColor$2 = function (index, cell) {
|
|
@@ -19647,7 +19647,7 @@ var SizeChartTable = function (_a) {
|
|
|
19647
19647
|
}, borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }, index)); }) }, void 0)) : (jsxRuntime.jsx("tbody", { children: tableContent === null || tableContent === void 0 ? void 0 : tableContent.map(function (row, index) { return (jsxRuntime.jsx(TableRow$3, __assign$1({ className: getIsOdd$2(index) ? 'background' : '', backgroundColor: theme.colors.shades['10'].color }, { children: row === null || row === void 0 ? void 0 : row.map(function (cell, index) { return (jsxRuntime.jsx(TableCell$3, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }), index)); }) }, void 0))] }), void 0)] }, void 0)] }, void 0));
|
|
19648
19648
|
};
|
|
19649
19649
|
|
|
19650
|
-
var TableElement$2 = newStyled.table(templateObject_1$
|
|
19650
|
+
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; });
|
|
19651
19651
|
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; });
|
|
19652
19652
|
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; });
|
|
19653
19653
|
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; });
|
|
@@ -19656,7 +19656,7 @@ var SizeTable = function (_a) {
|
|
|
19656
19656
|
var theme = useTheme();
|
|
19657
19657
|
return (jsxRuntime.jsxs(TableElement$2, __assign$1({ color: theme.colors.shades['700'].color, borderColor: theme.colors.shades['100'].color, className: className }, { children: [jsxRuntime.jsx("thead", { children: jsxRuntime.jsx(TableRow$2, __assign$1({ backgroundColor: theme.colors.shades['10'].color }, { children: headers.map(function (header, index) { return (jsxRuntime.jsx(TableHead$2, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: header }), index)); }) }), void 0) }, void 0), jsxRuntime.jsx("tbody", { children: data.map(function (row, index) { return (jsxRuntime.jsx(TableRow$2, __assign$1({ className: index % 2 !== 0 ? '' : 'background', backgroundColor: theme.colors.shades['10'].color }, { children: row.map(function (cell, index) { return (jsxRuntime.jsx(TableCell$2, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }), index)); }) }, void 0)] }), void 0));
|
|
19658
19658
|
};
|
|
19659
|
-
var templateObject_1$
|
|
19659
|
+
var templateObject_1$E, templateObject_2$u, templateObject_3$s, templateObject_4$n;
|
|
19660
19660
|
|
|
19661
19661
|
var getStylesBySize$7 = function (size) {
|
|
19662
19662
|
switch (size) {
|
|
@@ -19683,7 +19683,7 @@ var textButtonStyles = function (theme, size) {
|
|
|
19683
19683
|
} });
|
|
19684
19684
|
};
|
|
19685
19685
|
var withContainer = function (iconFill, isLeading, Icon) {
|
|
19686
|
-
return Icon && (jsx("span", __assign$1({ css: css(templateObject_1$
|
|
19686
|
+
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));
|
|
19687
19687
|
};
|
|
19688
19688
|
var getIconFill = function (theme, disabled, iconColor) {
|
|
19689
19689
|
if (disabled)
|
|
@@ -19699,23 +19699,23 @@ var TextButton = function (_a) {
|
|
|
19699
19699
|
var iconFill = getIconFill(theme, disabled, iconColor);
|
|
19700
19700
|
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));
|
|
19701
19701
|
};
|
|
19702
|
-
var templateObject_1$
|
|
19702
|
+
var templateObject_1$D;
|
|
19703
19703
|
|
|
19704
|
-
var Container$q = newStyled.div(templateObject_1$
|
|
19704
|
+
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"])));
|
|
19705
19705
|
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"])));
|
|
19706
19706
|
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"])));
|
|
19707
19707
|
var SizeFitGuide = function (_a) {
|
|
19708
19708
|
var title = _a.title, fitPercentage = _a.fitPercentage, onClick = _a.onClick, onClickFitPercentage = _a.onClickFitPercentage, _b = _a.hideIcon, hideIcon = _b === void 0 ? false : _b;
|
|
19709
19709
|
return (jsxRuntime.jsxs(Container$q, { children: [jsxRuntime.jsx(TextButton, { LeadingIcon: hideIcon ? undefined : Icon.PDP.Rule, size: exports.ComponentSize.Small, text: title, onClick: onClick, uppercase: false }, void 0), !!fitPercentage && (jsxRuntime.jsxs(P, { children: ["Fit As Expected:", ' ', jsxRuntime.jsxs(PercentageSpan, __assign$1({ onClick: onClickFitPercentage, role: "button" }, { children: [fitPercentage, "%"] }), void 0)] }, void 0))] }, void 0));
|
|
19710
19710
|
};
|
|
19711
|
-
var templateObject_1$
|
|
19711
|
+
var templateObject_1$C, templateObject_2$t, templateObject_3$r;
|
|
19712
19712
|
|
|
19713
|
-
var ButtonsContainer = newStyled.div(templateObject_1$
|
|
19713
|
+
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) {
|
|
19714
19714
|
var inline = _a.inline;
|
|
19715
19715
|
return (inline ? '0 0 0 10px' : '8px 0 0 0');
|
|
19716
19716
|
});
|
|
19717
19717
|
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"])));
|
|
19718
|
-
var templateObject_1$
|
|
19718
|
+
var templateObject_1$B, templateObject_2$s;
|
|
19719
19719
|
|
|
19720
19720
|
var SizeSelector = function (_a) {
|
|
19721
19721
|
var _b;
|
|
@@ -19737,7 +19737,7 @@ var SizeSelector = function (_a) {
|
|
|
19737
19737
|
}) }), void 0)] }), void 0));
|
|
19738
19738
|
};
|
|
19739
19739
|
|
|
19740
|
-
var TabContainer = newStyled.div(templateObject_1$
|
|
19740
|
+
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) {
|
|
19741
19741
|
var titleSize = _a.titleSize;
|
|
19742
19742
|
return titleSize;
|
|
19743
19743
|
}, function (_a) {
|
|
@@ -19754,9 +19754,9 @@ var Tab = function (_a) {
|
|
|
19754
19754
|
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;
|
|
19755
19755
|
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(TabContainer, __assign$1({ selected: selected, onClick: function () { return onClick(title); }, color: color, titleSize: titleSize, height: height, selectedTitleWeight: selectedTitleWeight, tabsMaxWidth: tabsMaxWidth }, { children: title }), title) }, void 0));
|
|
19756
19756
|
};
|
|
19757
|
-
var templateObject_1$
|
|
19757
|
+
var templateObject_1$A;
|
|
19758
19758
|
|
|
19759
|
-
var Container$p = newStyled.div(templateObject_1$
|
|
19759
|
+
var Container$p = newStyled.div(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
|
|
19760
19760
|
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) {
|
|
19761
19761
|
var backgroundColor = _a.backgroundColor;
|
|
19762
19762
|
return backgroundColor;
|
|
@@ -19776,14 +19776,14 @@ var Tabs = function (_a) {
|
|
|
19776
19776
|
var selectedContent = (_b = tabs.find(function (tab) { return tab.title === selectedTab; })) === null || _b === void 0 ? void 0 : _b.content;
|
|
19777
19777
|
return (jsxRuntime.jsxs(Container$p, __assign$1({ "data-testid": "tabs-container" }, { children: [jsxRuntime.jsx(TabList, __assign$1({ backgroundColor: backgroundColor, borderColor: fixedBorderColor }, { children: tabs.map(function (tab, index) { return (jsxRuntime.jsxs(React__default["default"].Fragment, { children: [jsxRuntime.jsx(Tab, { title: tab.title, selected: selectedTab === tab.title, onClick: setSelectedTab, tabsMaxWidth: tabsMaxWidth, color: selectedBorderColor }, tab.title), index + 1 < tabs.length && jsxRuntime.jsx(TabSeparator, { children: "|" }, void 0)] }, tab.title)); }) }), void 0), jsxRuntime.jsx(TabContent, __assign$1({ "data-testid": "tab-content" }, { children: selectedContent }), void 0)] }), void 0));
|
|
19778
19778
|
};
|
|
19779
|
-
var templateObject_1$
|
|
19779
|
+
var templateObject_1$z, templateObject_2$r, templateObject_3$q, templateObject_4$m;
|
|
19780
19780
|
|
|
19781
|
-
var Container$o = newStyled.div(templateObject_1$
|
|
19781
|
+
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"])));
|
|
19782
19782
|
var Tag = function (_a) {
|
|
19783
19783
|
var text = _a.text, className = _a.className;
|
|
19784
19784
|
return jsxRuntime.jsx(Container$o, __assign$1({ className: className }, { children: text }), void 0);
|
|
19785
19785
|
};
|
|
19786
|
-
var templateObject_1$
|
|
19786
|
+
var templateObject_1$y;
|
|
19787
19787
|
|
|
19788
19788
|
var getStylesBySize$6 = function (size, styledBorder) {
|
|
19789
19789
|
switch (size) {
|
|
@@ -19896,7 +19896,7 @@ var SeasonOfferRoundedTag = function (_a) {
|
|
|
19896
19896
|
return (jsx(Tag, { css: __assign$1({ backgroundColor: backgroundColor, fontWeight: 700, color: '#FFFFFF', textAlign: 'center', borderRadius: '50%' }, stylesBySize), text: text, className: className }, void 0));
|
|
19897
19897
|
};
|
|
19898
19898
|
|
|
19899
|
-
var ImageWrapper$2 = newStyled.div(templateObject_1$
|
|
19899
|
+
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"])));
|
|
19900
19900
|
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"])));
|
|
19901
19901
|
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"])));
|
|
19902
19902
|
var ImageVideo = function (_a) {
|
|
@@ -19918,9 +19918,9 @@ var ImageVideo = function (_a) {
|
|
|
19918
19918
|
height: '100%',
|
|
19919
19919
|
} }, void 0)] }, void 0))] }, void 0));
|
|
19920
19920
|
};
|
|
19921
|
-
var templateObject_1$
|
|
19921
|
+
var templateObject_1$x, templateObject_2$q, templateObject_3$p;
|
|
19922
19922
|
|
|
19923
|
-
var ContainerDesktop = css(templateObject_1$
|
|
19923
|
+
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"])));
|
|
19924
19924
|
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"])));
|
|
19925
19925
|
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);
|
|
19926
19926
|
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"])));
|
|
@@ -19953,11 +19953,11 @@ var TextWithImage = function (_a) {
|
|
|
19953
19953
|
},
|
|
19954
19954
|
} }, 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));
|
|
19955
19955
|
};
|
|
19956
|
-
var templateObject_1$
|
|
19956
|
+
var templateObject_1$w, templateObject_2$p, templateObject_3$o, templateObject_4$l;
|
|
19957
19957
|
|
|
19958
19958
|
var slideInAnimation = function (distanceFromTop) {
|
|
19959
19959
|
if (distanceFromTop === void 0) { distanceFromTop = '124px'; }
|
|
19960
|
-
return keyframes(templateObject_1$
|
|
19960
|
+
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);
|
|
19961
19961
|
};
|
|
19962
19962
|
var mobileSlideInAnimation = function (distanceFromTop) {
|
|
19963
19963
|
if (distanceFromTop === void 0) { distanceFromTop = '85px'; }
|
|
@@ -19982,7 +19982,7 @@ var ToastText = newStyled.p(templateObject_5$i || (templateObject_5$i = __makeTe
|
|
|
19982
19982
|
return (severity === 'error' ? '#C64844' : '#292929');
|
|
19983
19983
|
});
|
|
19984
19984
|
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"])));
|
|
19985
|
-
var templateObject_1$
|
|
19985
|
+
var templateObject_1$v, templateObject_2$o, templateObject_3$n, templateObject_4$k, templateObject_5$i, templateObject_6$h;
|
|
19986
19986
|
|
|
19987
19987
|
var Toast = React__default["default"].forwardRef(function (_a, ref) {
|
|
19988
19988
|
var _b;
|
|
@@ -20004,7 +20004,7 @@ var Toast = React__default["default"].forwardRef(function (_a, ref) {
|
|
|
20004
20004
|
});
|
|
20005
20005
|
Toast.displayName = 'Toast';
|
|
20006
20006
|
|
|
20007
|
-
var Wrapper$1 = newStyled.div(templateObject_1$
|
|
20007
|
+
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"])));
|
|
20008
20008
|
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; });
|
|
20009
20009
|
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) {
|
|
20010
20010
|
var theme = _a.theme;
|
|
@@ -20033,7 +20033,7 @@ var DiscountAmount = newStyled.h3(templateObject_7$f || (templateObject_7$f = __
|
|
|
20033
20033
|
return theme.component.total.basicTotal.savings.amountFontWeight;
|
|
20034
20034
|
});
|
|
20035
20035
|
var TotalLabel = newStyled(Text$7)(templateObject_8$b || (templateObject_8$b = __makeTemplateObject(["\n font-size: 20px;\n"], ["\n font-size: 20px;\n"])));
|
|
20036
|
-
var templateObject_1$
|
|
20036
|
+
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;
|
|
20037
20037
|
|
|
20038
20038
|
var Total = function (_a) {
|
|
20039
20039
|
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;
|
|
@@ -20041,7 +20041,7 @@ var Total = function (_a) {
|
|
|
20041
20041
|
return (jsxRuntime.jsxs(Wrapper$1, __assign$1({ "data-testid": "total-wrapper" }, { children: [jsxRuntime.jsxs(TotalContainer, __assign$1({ showTotalLabel: showTotalLabel }, { children: [showTotalLabel && (jsxRuntime.jsx(TotalLabel, __assign$1({ variant: "heading6", size: "regular", weight: "bold" }, { children: "Total" }), void 0)), jsxRuntime.jsxs(GrandTotal, __assign$1({ color: theme.component.total.basicTotal.amount.color, "data-testid": "total-price" }, { children: [jsxRuntime.jsx(Currency, { children: currency }, void 0), total] }), void 0)] }), void 0), saving && (jsxRuntime.jsxs(Container$m, __assign$1({ "data-testid": "subtotal-container", highlightColor: highlightColor }, { children: [jsxRuntime.jsx(DiscountText, __assign$1({ "data-testid": "saving-title" }, { children: saving.savingText }), void 0), jsxRuntime.jsx(DiscountAmount, __assign$1({ "data-testid": "saving-price" }, { children: saving.amount }), void 0)] }), void 0))] }), void 0));
|
|
20042
20042
|
};
|
|
20043
20043
|
|
|
20044
|
-
var Wrapper = newStyled.div(templateObject_1$
|
|
20044
|
+
var Wrapper = newStyled.div(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
20045
20045
|
var color = _a.color;
|
|
20046
20046
|
return color;
|
|
20047
20047
|
});
|
|
@@ -20066,14 +20066,14 @@ var Subtotal = function (_a) {
|
|
|
20066
20066
|
return (jsxRuntime.jsxs(ItemContainer, { children: [jsxRuntime.jsxs(CouponItem, __assign$1({ color: highlightColor, "data-testid": "discount-title" }, { children: [coupon.couponText, " ", code, " ", coupon.appliedText] }), void 0), jsxRuntime.jsx(CouponItem, __assign$1({ color: highlightColor, "data-testid": "discount-price" }, { children: amount }), void 0)] }, code));
|
|
20067
20067
|
})] }), void 0));
|
|
20068
20068
|
};
|
|
20069
|
-
var templateObject_1$
|
|
20069
|
+
var templateObject_1$t, templateObject_2$m, templateObject_3$l, templateObject_4$i;
|
|
20070
20070
|
|
|
20071
20071
|
var Totals = {
|
|
20072
20072
|
Total: Total,
|
|
20073
20073
|
Subtotal: Subtotal,
|
|
20074
20074
|
};
|
|
20075
20075
|
|
|
20076
|
-
var Container$l = newStyled.div(templateObject_1$
|
|
20076
|
+
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"])));
|
|
20077
20077
|
var CheckpointContainer$1 = newStyled.div(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
20078
20078
|
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; });
|
|
20079
20079
|
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'); });
|
|
@@ -20125,9 +20125,9 @@ var TrackingProgressV2 = function (_a) {
|
|
|
20125
20125
|
return (jsxRuntime.jsxs(CheckpointContainer$1, __assign$1({ "data-testid": "empty-checkpoint-track" }, { children: [jsxRuntime.jsxs(CheckpointDate$1, __assign$1({ currentSpace: "90px" }, { children: [jsxRuntime.jsx(CheckpointDateLabel$1, { lastElement: index + 1 === emptySpaces.length }, void 0), jsxRuntime.jsx(CheckpointDateLabel$1, { lastElement: index + 1 === emptySpaces.length }, void 0)] }), void 0), index + 1 !== emptySpaces.length && (jsxRuntime.jsx(ActiveCheckpointTrack$1, __assign$1({ trackColor: theme.colors.shades['200'].color }, { children: jsxRuntime.jsx(ActiveCheckpointDot$1, { firstElement: false }, void 0) }), void 0)), index + 1 === emptySpaces.length && (jsxRuntime.jsx(LastActiveCheckpointDot, __assign$1({ trackColor: theme.colors.shades['200'].color }, { children: jsxRuntime.jsx(ActiveCheckpointDot$1, { firstElement: false }, void 0) }), void 0)), jsxRuntime.jsx(CheckpointStatus$1, __assign$1({ finishedTrack: false }, { children: statusMessage }), void 0)] }), index));
|
|
20126
20126
|
})] }), void 0));
|
|
20127
20127
|
};
|
|
20128
|
-
var templateObject_1$
|
|
20128
|
+
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;
|
|
20129
20129
|
|
|
20130
|
-
var Container$k = newStyled.div(templateObject_1$
|
|
20130
|
+
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"])));
|
|
20131
20131
|
var CheckpointContainer = newStyled.div(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
20132
20132
|
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; });
|
|
20133
20133
|
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'); });
|
|
@@ -20165,9 +20165,9 @@ var TrackingProgress = function (_a) {
|
|
|
20165
20165
|
return (jsxRuntime.jsxs(CheckpointContainer, __assign$1({ "data-testid": "empty-checkpoint-track" }, { children: [jsxRuntime.jsxs(CheckpointDate, __assign$1({ currentSpace: getCurrentSpace(index) }, { children: [jsxRuntime.jsx(CheckpointDateLabel, { lastElement: index + 1 === emptySpaces.length }, void 0), jsxRuntime.jsx(CheckpointDateLabel, { lastElement: index + 1 === emptySpaces.length }, void 0)] }), void 0), index + 1 !== emptySpaces.length && (jsxRuntime.jsx(ActiveCheckpointTrack, { trackColor: theme.colors.shades['200'].color, firstElement: false, lastElement: index + 2 === emptySpaces.length }, void 0)), jsxRuntime.jsx(CheckpointStatus, { finishedTrack: false }, void 0)] }), index));
|
|
20166
20166
|
})] }), void 0));
|
|
20167
20167
|
};
|
|
20168
|
-
var templateObject_1$
|
|
20168
|
+
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;
|
|
20169
20169
|
|
|
20170
|
-
var AutoShipCardContainerWrapper$1 = newStyled.div(templateObject_1$
|
|
20170
|
+
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) {
|
|
20171
20171
|
var checked = _a.checked;
|
|
20172
20172
|
return (checked ? 'none' : '1px solid #e5e5e5;');
|
|
20173
20173
|
});
|
|
@@ -20177,7 +20177,7 @@ var AutoShipBodyTitle$1 = newStyled.div(templateObject_4$f || (templateObject_4$
|
|
|
20177
20177
|
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"])));
|
|
20178
20178
|
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"])));
|
|
20179
20179
|
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"])));
|
|
20180
|
-
var templateObject_1$
|
|
20180
|
+
var templateObject_1$q, templateObject_2$j, templateObject_3$i, templateObject_4$f, templateObject_5$e, templateObject_6$d, templateObject_7$c;
|
|
20181
20181
|
|
|
20182
20182
|
function AutoshipOfferCard(_a) {
|
|
20183
20183
|
var showMore = _a.showMore, copyList = _a.copyList, copy = _a.copy, handleCheckBoxChange = _a.handleCheckBoxChange, _b = _a.isChecked, isChecked = _b === void 0 ? false : _b;
|
|
@@ -20201,7 +20201,7 @@ function AutoshipOfferCard(_a) {
|
|
|
20201
20201
|
return (jsxRuntime.jsxs(AutoShipCardContainerWrapper$1, __assign$1({ checked: check }, { children: [jsxRuntime.jsxs(AutoShipHeaderBarWrapper$1, { children: [jsxRuntime.jsx("div", { children: jsxRuntime.jsx(CheckboxInput, { type: "checkbox", onChange: handleCheckBox, checked: check, "data-testid": "autoshipcheckbox" }, void 0) }, void 0), jsxRuntime.jsx("div", { children: renderCopy(copy) }, void 0)] }, void 0), !check && (jsxRuntime.jsxs(AutoShipBodyWrapper$1, { children: [jsxRuntime.jsxs(AutoShipBodyTitle$1, __assign$1({ onClick: handleShowMore }, { children: [jsxRuntime.jsx("span", { children: showMoreBenefits ? renderCopy(showMore.openedCopy) : renderCopy(showMore.closedCopy) }, void 0), jsxRuntime.jsx(Icon$1, { name: showMoreBenefits ? 'arrows/chevron_up' : 'arrows/chevron_down' }, showMoreBenefits ? 'icon-up' : 'icon-down')] }), void 0), showMoreBenefits && (jsxRuntime.jsx(AutoShipBodyListWrapper$1, { children: copyList.map(function (item) { return (jsxRuntime.jsxs(AutoShipBodyListItem$1, { children: [jsxRuntime.jsx(Icon$1, { name: item.icon, fill: "#D4605B", width: "19px", height: "19px" }, void 0), renderCopy(item.copy)] }, item.icon)); }) }, void 0))] }, void 0))] }), void 0));
|
|
20202
20202
|
}
|
|
20203
20203
|
|
|
20204
|
-
var AutoShipCardContainerWrapper = newStyled.div(templateObject_1$
|
|
20204
|
+
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) {
|
|
20205
20205
|
var checked = _a.checked;
|
|
20206
20206
|
return (checked ? 'none' : '1px solid #e5e5e5;');
|
|
20207
20207
|
});
|
|
@@ -20212,7 +20212,7 @@ var AutoShipBodyListItem = newStyled.div(templateObject_5$d || (templateObject_5
|
|
|
20212
20212
|
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"])));
|
|
20213
20213
|
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"])));
|
|
20214
20214
|
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"])));
|
|
20215
|
-
var templateObject_1$
|
|
20215
|
+
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;
|
|
20216
20216
|
|
|
20217
20217
|
function AutoshipOfferCardCta(_a) {
|
|
20218
20218
|
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;
|
|
@@ -20230,7 +20230,7 @@ function AutoshipOfferCardCta(_a) {
|
|
|
20230
20230
|
return (jsxRuntime.jsxs(AutoShipCardContainerWrapper, __assign$1({ checked: check }, { children: [jsxRuntime.jsxs(AutoShipHeaderBarWrapper, { children: [jsxRuntime.jsx("div", { children: copy }, void 0), check && (jsxRuntime.jsx(ButtonRemoveWrapper, __assign$1({ tabIndex: 0, role: "button", onKeyDown: handleCheckBox, onClick: handleCheckBox }, { children: "Remove" }), void 0))] }, void 0), !check && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(AutoShipBodyWrapper, { children: [(showMore === null || showMore === void 0 ? void 0 : showMore.openedCopy) && (showMore === null || showMore === void 0 ? void 0 : showMore.closedCopy) && (jsxRuntime.jsxs(AutoShipBodyTitle, __assign$1({ onClick: handleShowMore }, { children: [jsxRuntime.jsx("span", { children: showMoreBenefits ? showMore.openedCopy : showMore.closedCopy }, void 0), jsxRuntime.jsx(Icon$1, { name: showMoreBenefits ? 'arrows/chevron_up' : 'arrows/chevron_down' }, showMoreBenefits ? 'icon-up' : 'icon-down')] }), void 0)), showMoreBenefits && (jsxRuntime.jsx(AutoShipBodyListWrapper, { children: copyList.map(function (item) { return (jsxRuntime.jsxs(AutoShipBodyListItem, { children: [jsxRuntime.jsx(Icon$1, { name: item.icon, fill: "#D4605B", width: "19px", height: "19px" }, void 0), item.copy] }, item.icon)); }) }, void 0))] }, void 0), jsxRuntime.jsx("div", { children: jsxRuntime.jsx(ButtonSecondary, { onClick: handleCheckBox, text: buttonCopy, wide: true }, void 0) }, void 0)] }, void 0))] }), void 0));
|
|
20231
20231
|
}
|
|
20232
20232
|
|
|
20233
|
-
var StyledButton = newStyled(Ye.Button)(function (props) { return ({
|
|
20233
|
+
var StyledButton$1 = newStyled(Ye.Button)(function (props) { return ({
|
|
20234
20234
|
background: props.bgColor,
|
|
20235
20235
|
height: '100%',
|
|
20236
20236
|
width: '100%',
|
|
@@ -20252,7 +20252,7 @@ var StyledPanel = newStyled(Ye.Panel)({
|
|
|
20252
20252
|
justifyContent: 'center',
|
|
20253
20253
|
gap: '10px',
|
|
20254
20254
|
});
|
|
20255
|
-
var StyledContent = newStyled.div(templateObject_1$
|
|
20255
|
+
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) {
|
|
20256
20256
|
var bgColor = _a.bgColor;
|
|
20257
20257
|
return bgColor !== null && bgColor !== void 0 ? bgColor : '';
|
|
20258
20258
|
}, function (_a) {
|
|
@@ -20260,7 +20260,7 @@ var StyledContent = newStyled.div(templateObject_1$n || (templateObject_1$n = __
|
|
|
20260
20260
|
return width;
|
|
20261
20261
|
});
|
|
20262
20262
|
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"])));
|
|
20263
|
-
var templateObject_1$
|
|
20263
|
+
var templateObject_1$o, templateObject_2$h;
|
|
20264
20264
|
|
|
20265
20265
|
var StyledDisclosure = newStyled(Ye)(function (_a) {
|
|
20266
20266
|
var background = _a.background, width = _a.width;
|
|
@@ -20291,7 +20291,7 @@ var HeaderContentComponent = React$2.memo(function (_a) {
|
|
|
20291
20291
|
HeaderContentComponent.displayName = 'HeaderContentComponent';
|
|
20292
20292
|
var AccordionContent = function (_a) {
|
|
20293
20293
|
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;
|
|
20294
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(StyledButton, __assign$1({ "data-testid": "styled-button", disabled: disabled, bgColor: bgColor }, { children: [jsxRuntime.jsx(HeaderContentComponent, { open: open, header: header, headerOnOpen: headerOnOpen }, void 0), jsxRuntime.jsxs(StyledController, { children: [jsxRuntime.jsx(Text$7, __assign$1({ variant: "body", weight: "demi", size: "small", color: fillControlsCollor }, { children: "View Offers" }), void 0), jsxRuntime.jsx("span", __assign$1({ style: { marginTop: '3px' } }, { children: jsxRuntime.jsx(ControlIconComponent, { open: open, openIcon: openIcon, closeIcon: closeIcon, fillControlsCollor: fillControlsCollor }, void 0) }), void 0)] }, void 0)] }), void 0), open && (jsxRuntime.jsx(StyledContent, __assign$1({ width: contentWidth, bgColor: bgColor, onClick: function (e) { return e.stopPropagation(); } }, { children: jsxRuntime.jsx(StyledPanel, { children: children }, void 0) }), void 0))] }, void 0));
|
|
20294
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(StyledButton$1, __assign$1({ "data-testid": "styled-button", disabled: disabled, bgColor: bgColor }, { children: [jsxRuntime.jsx(HeaderContentComponent, { open: open, header: header, headerOnOpen: headerOnOpen }, void 0), jsxRuntime.jsxs(StyledController, { children: [jsxRuntime.jsx(Text$7, __assign$1({ variant: "body", weight: "demi", size: "small", color: fillControlsCollor }, { children: "View Offers" }), void 0), jsxRuntime.jsx("span", __assign$1({ style: { marginTop: '3px' } }, { children: jsxRuntime.jsx(ControlIconComponent, { open: open, openIcon: openIcon, closeIcon: closeIcon, fillControlsCollor: fillControlsCollor }, void 0) }), void 0)] }, void 0)] }), void 0), open && (jsxRuntime.jsx(StyledContent, __assign$1({ width: contentWidth, bgColor: bgColor, onClick: function (e) { return e.stopPropagation(); } }, { children: jsxRuntime.jsx(StyledPanel, { children: children }, void 0) }), void 0))] }, void 0));
|
|
20295
20295
|
};
|
|
20296
20296
|
var BasicAccordion = function (_a) {
|
|
20297
20297
|
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;
|
|
@@ -20301,14 +20301,14 @@ var BasicAccordion = function (_a) {
|
|
|
20301
20301
|
} }), void 0));
|
|
20302
20302
|
};
|
|
20303
20303
|
|
|
20304
|
-
var ContainerWrapper$1 = newStyled.div(templateObject_1$
|
|
20304
|
+
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"])));
|
|
20305
20305
|
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"])));
|
|
20306
20306
|
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"])));
|
|
20307
20307
|
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"])));
|
|
20308
20308
|
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"])));
|
|
20309
20309
|
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"])));
|
|
20310
20310
|
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"])));
|
|
20311
|
-
var templateObject_1$
|
|
20311
|
+
var templateObject_1$n, templateObject_2$g, templateObject_3$g, templateObject_4$d, templateObject_5$c, templateObject_6$b, templateObject_7$a;
|
|
20312
20312
|
|
|
20313
20313
|
function CartItemCard(_a) {
|
|
20314
20314
|
var style = _a.style, className = _a.className, children = _a.children;
|
|
@@ -20354,7 +20354,7 @@ var Shades200Color = '#bbbbbb';
|
|
|
20354
20354
|
var Shades700Color = '#292929';
|
|
20355
20355
|
var PrimaryColor = '#f7a08b';
|
|
20356
20356
|
var ClubBorderColor = '#882a2b';
|
|
20357
|
-
var FlexContainer$1 = newStyled.div(templateObject_1$
|
|
20357
|
+
var FlexContainer$1 = newStyled.div(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
20358
20358
|
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);
|
|
20359
20359
|
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) {
|
|
20360
20360
|
var selected = _a.selected;
|
|
@@ -20397,7 +20397,7 @@ var StyledPrice$1 = newStyled(PriceLabelV2$1)(templateObject_10$4 || (templateOb
|
|
|
20397
20397
|
: Shades200Color;
|
|
20398
20398
|
});
|
|
20399
20399
|
var Container$j = newStyled.div(templateObject_11$2 || (templateObject_11$2 = __makeTemplateObject(["\n margin-top: 20px;\n"], ["\n margin-top: 20px;\n"])));
|
|
20400
|
-
var templateObject_1$
|
|
20400
|
+
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;
|
|
20401
20401
|
|
|
20402
20402
|
var ClubOfferSelector = function (_a) {
|
|
20403
20403
|
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;
|
|
@@ -20443,7 +20443,7 @@ var ClubOfferSelector = function (_a) {
|
|
|
20443
20443
|
}, useV2Style: true, onChange: function () { }, disabled: disabledInputs && disabledInputs.includes(radioIds.clubOfferSelector.id) }, void 0) }, void 0), jsxRuntime.jsx(StyledPrice$1, { testId: "subscription", finalPrice: "".concat(currencySymbol).concat(decimalFormat(Number(clubOfferFinalPrice))), selected: isSelected, size: exports.ComponentSize.Large, originalPrice: "".concat(currencySymbol).concat(decimalFormat(Number(listPrice))) }, void 0)] }), void 0), isSelected && (jsxRuntime.jsx(BenefitsContainer$1, { children: updatedClubOfferBenefits.map(function (benefit) { return (jsxRuntime.jsx(Benefit$1, { children: jsxRuntime.jsx(BenefitText, { variant: "body", dangerouslySetInnerHTML: { __html: benefit } }, void 0) }, benefit)); }) }, void 0))] }), void 0), jsxRuntime.jsxs(SinglePurchaseContainer$1, __assign$1({ isNoMember: true, "data-testid": "single-purchase-block", selected: radioIds.oneTime.id === radioCheck.id, onClick: function () { return handleChange(radioIds.oneTime, 'radio'); } }, { children: [jsxRuntime.jsx(RadioInput, { label: singlePurchaseLabel, name: radioIds.oneTime.id, id: radioIds.oneTime.id, value: radioIds.oneTime.id, checked: radioIds.oneTime.id === radioCheck.id, size: exports.ComponentSize.Medium, onChange: function () { }, useV2Style: true, disabled: disabledInputs && disabledInputs.includes(radioIds.oneTime.id) }, void 0), jsxRuntime.jsx(StyledPrice$1, { isNoMember: true, testId: "single-purchase", finalPrice: "".concat(currencySymbol).concat(decimalFormat(Number(discountedPrice))), selected: radioIds.oneTime.id === radioCheck.id, size: exports.ComponentSize.Large, originalPrice: "".concat(currencySymbol).concat(decimalFormat(Number(listPrice))) }, void 0)] }), void 0)] }), void 0));
|
|
20444
20444
|
};
|
|
20445
20445
|
|
|
20446
|
-
var ContainerWrapper = newStyled.div(templateObject_1$
|
|
20446
|
+
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) {
|
|
20447
20447
|
var $checked = _a.$checked;
|
|
20448
20448
|
return ($checked ? '#FFF3E3' : '#FAFAFA');
|
|
20449
20449
|
}, function (_a) {
|
|
@@ -20454,22 +20454,27 @@ var CardHeaderWrapper = newStyled.div(templateObject_2$e || (templateObject_2$e
|
|
|
20454
20454
|
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"])));
|
|
20455
20455
|
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"])));
|
|
20456
20456
|
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"])));
|
|
20457
|
-
var templateObject_1$
|
|
20457
|
+
var templateObject_1$l, templateObject_2$e, templateObject_3$e, templateObject_4$b, templateObject_5$a;
|
|
20458
20458
|
|
|
20459
20459
|
function Card(_a) {
|
|
20460
20460
|
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;
|
|
20461
20461
|
return (jsxRuntime.jsxs(ContainerWrapper, __assign$1({ "$checked": isChecked, style: style }, { children: [jsxRuntime.jsxs(CardHeaderWrapper, { children: [jsxRuntime.jsxs(ClubCopyWrapper, { children: [icon, jsxRuntime.jsx(ClubCopyTextWrapper, { children: titleCopy }, void 0)] }, void 0), jsxRuntime.jsx("div", { children: children }, void 0)] }, void 0), !isChecked && (jsxRuntime.jsxs(CardBody, __assign$1({ id: "joinClubCardBody" }, { children: [bodyCopy, ' ', jsxRuntime.jsx("a", __assign$1({ href: link, target: "_blank", rel: "noreferrer" }, { children: "Terms here." }), void 0)] }), void 0))] }), void 0));
|
|
20462
20462
|
}
|
|
20463
20463
|
|
|
20464
|
+
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) {
|
|
20465
|
+
var customStyle = _a.customStyle;
|
|
20466
|
+
return customStyle && __assign$1({}, customStyle);
|
|
20467
|
+
});
|
|
20464
20468
|
var JoinClubCard = function (_a) {
|
|
20465
|
-
var onCheckToggle = _a.onCheckToggle, isChecked = _a.isChecked, icon = _a.icon, link = _a.link, bodyCopy = _a.bodyCopy, titleCopy = _a.titleCopy, style = _a.style;
|
|
20466
|
-
var
|
|
20469
|
+
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;
|
|
20470
|
+
var _e = React$2.useState(isChecked), checked = _e[0], setChecked = _e[1];
|
|
20467
20471
|
var handleToggleValue = function (value) {
|
|
20468
20472
|
setChecked(value);
|
|
20469
20473
|
onCheckToggle(value);
|
|
20470
20474
|
};
|
|
20471
|
-
return (jsxRuntime.jsx(Card, __assign$1({ link: link, icon: icon, isChecked: checked, bodyCopy: bodyCopy, titleCopy: titleCopy, style: style }, { children: jsxRuntime.jsx(ToggleComponent, { onToggle: handleToggleValue, isChecked:
|
|
20472
|
-
};
|
|
20475
|
+
return (jsxRuntime.jsx(Card, __assign$1({ link: link, icon: icon, isChecked: checked, bodyCopy: bodyCopy, titleCopy: titleCopy, style: style }, { children: showButton ? (jsxRuntime.jsx(StyledButton, __assign$1({ onClick: function () { return handleToggleValue(!checked); }, customStyle: buttonStyle }, { children: buttonText }), void 0)) : (jsxRuntime.jsx(ToggleComponent, { onToggle: handleToggleValue, isChecked: checked }, void 0)) }), void 0));
|
|
20476
|
+
};
|
|
20477
|
+
var templateObject_1$k;
|
|
20473
20478
|
|
|
20474
20479
|
var ImageContainer$1 = newStyled.div(function (_a) {
|
|
20475
20480
|
var width = _a.width, height = _a.height;
|