@trafilea/afrodita-components 6.45.2 → 6.45.3
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.esm.js +91 -87
- package/build/index.esm.js.map +1 -1
- package/build/index.js +91 -87
- package/build/index.js.map +1 -1
- package/package.json +1 -1
package/build/index.esm.js
CHANGED
|
@@ -4811,7 +4811,7 @@ var TAGS = {
|
|
|
4811
4811
|
hero2: newStyled.h2(templateObject_2$1C || (templateObject_2$1C = __makeTemplateObject([""], [""]))),
|
|
4812
4812
|
hero3: newStyled.h3(templateObject_3$1g || (templateObject_3$1g = __makeTemplateObject([""], [""]))),
|
|
4813
4813
|
display1: newStyled.h1(templateObject_4$10 || (templateObject_4$10 = __makeTemplateObject([""], [""]))),
|
|
4814
|
-
display2: newStyled.h2(templateObject_5$
|
|
4814
|
+
display2: newStyled.h2(templateObject_5$N || (templateObject_5$N = __makeTemplateObject([""], [""]))),
|
|
4815
4815
|
display3: newStyled.h3(templateObject_6$F || (templateObject_6$F = __makeTemplateObject([""], [""]))),
|
|
4816
4816
|
heading1: newStyled.h1(templateObject_7$w || (templateObject_7$w = __makeTemplateObject([""], [""]))),
|
|
4817
4817
|
heading2: newStyled.h2(templateObject_8$p || (templateObject_8$p = __makeTemplateObject([""], [""]))),
|
|
@@ -4947,13 +4947,13 @@ var DEFAULTS = {
|
|
|
4947
4947
|
size: 'regular',
|
|
4948
4948
|
},
|
|
4949
4949
|
};
|
|
4950
|
-
var templateObject_1$2d, templateObject_2$1C, templateObject_3$1g, templateObject_4$10, templateObject_5$
|
|
4950
|
+
var templateObject_1$2d, templateObject_2$1C, templateObject_3$1g, templateObject_4$10, templateObject_5$N, templateObject_6$F, templateObject_7$w, templateObject_8$p, templateObject_9$d, templateObject_10$c, templateObject_11$8, templateObject_12$5, templateObject_13$5, templateObject_14$3, templateObject_15$2, templateObject_16$2, templateObject_17$2, templateObject_18$2, templateObject_19$2, templateObject_20$1;
|
|
4951
4951
|
|
|
4952
4952
|
var Container$1m = newStyled.div(templateObject_1$2c || (templateObject_1$2c = __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"])));
|
|
4953
4953
|
var Card$4 = newStyled.div(templateObject_2$1B || (templateObject_2$1B = __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"])));
|
|
4954
4954
|
var Tag$2 = newStyled.div(templateObject_3$1f || (templateObject_3$1f = __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"])));
|
|
4955
4955
|
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"])));
|
|
4956
|
-
var Check$1 = newStyled.div(templateObject_5$
|
|
4956
|
+
var Check$1 = newStyled.div(templateObject_5$M || (templateObject_5$M = __makeTemplateObject(["\n position: absolute;\n width: 20px;\n height: 20px;\n background-color: var(--color);\n border-radius: 50%;\n left: 100%;\n top: 50%;\n transform: translate(6px, -50%) scale(0.5);\n opacity: 0;\n transition: opacity 0.3s, transform 0.3s;\n\n &[data-visible='true'] {\n transform: translate(6px, -50%) scale(1);\n opacity: 1;\n }\n"], ["\n position: absolute;\n width: 20px;\n height: 20px;\n background-color: var(--color);\n border-radius: 50%;\n left: 100%;\n top: 50%;\n transform: translate(6px, -50%) scale(0.5);\n opacity: 0;\n transition: opacity 0.3s, transform 0.3s;\n\n &[data-visible='true'] {\n transform: translate(6px, -50%) scale(1);\n opacity: 1;\n }\n"])));
|
|
4957
4957
|
var DiscountContainer$1 = newStyled.div(templateObject_6$E || (templateObject_6$E = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n flex-wrap: wrap;\n"], ["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n flex-wrap: wrap;\n"])));
|
|
4958
4958
|
var PackSelectorV2 = function (_a) {
|
|
4959
4959
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange, currencyCode = _a.currencyCode;
|
|
@@ -4979,7 +4979,7 @@ var PackCard$1 = function (_a) {
|
|
|
4979
4979
|
currency: currencyCode || 'USD',
|
|
4980
4980
|
}), ' ', "each", ')'] }), void 0)) : null] }, void 0)] }), void 0));
|
|
4981
4981
|
};
|
|
4982
|
-
var templateObject_1$2c, templateObject_2$1B, templateObject_3$1f, templateObject_4$$, templateObject_5$
|
|
4982
|
+
var templateObject_1$2c, templateObject_2$1B, templateObject_3$1f, templateObject_4$$, templateObject_5$M, templateObject_6$E;
|
|
4983
4983
|
|
|
4984
4984
|
var Container$1l = newStyled.div(templateObject_1$2b || (templateObject_1$2b = __makeTemplateObject(["\n height: 32px;\n display: flex;\n align-items: center;\n"], ["\n height: 32px;\n display: flex;\n align-items: center;\n"])));
|
|
4985
4985
|
var DropContainer = newStyled.div(templateObject_2$1A || (templateObject_2$1A = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
@@ -5275,8 +5275,8 @@ var Container$1i = newStyled.div(templateObject_1$26 || (templateObject_1$26 = _
|
|
|
5275
5275
|
var FlexCentered = newStyled.div(templateObject_2$1x || (templateObject_2$1x = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 10px;\n width: 90%;\n height: 100%;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 10px;\n width: 90%;\n height: 100%;\n"])));
|
|
5276
5276
|
var LeftSide = newStyled.div(templateObject_3$1d || (templateObject_3$1d = __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"])));
|
|
5277
5277
|
var RightSide = newStyled.div(templateObject_4$_ || (templateObject_4$_ = __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"])));
|
|
5278
|
-
var FlexStart = newStyled.div(templateObject_5$
|
|
5279
|
-
var templateObject_1$26, templateObject_2$1x, templateObject_3$1d, templateObject_4$_, templateObject_5$
|
|
5278
|
+
var FlexStart = newStyled.div(templateObject_5$L || (templateObject_5$L = __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"])));
|
|
5279
|
+
var templateObject_1$26, templateObject_2$1x, templateObject_3$1d, templateObject_4$_, templateObject_5$L;
|
|
5280
5280
|
|
|
5281
5281
|
var CouponCard = function (_a) {
|
|
5282
5282
|
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;
|
|
@@ -6052,7 +6052,7 @@ var TooltipText = newStyled.div(templateObject_4$Y || (templateObject_4$Y = __ma
|
|
|
6052
6052
|
var color = _a.color;
|
|
6053
6053
|
return color;
|
|
6054
6054
|
});
|
|
6055
|
-
var TopSection = newStyled.div(templateObject_5$
|
|
6055
|
+
var TopSection = newStyled.div(templateObject_5$K || (templateObject_5$K = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: 0.688rem;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: 0.688rem;\n"])));
|
|
6056
6056
|
var Title$a = newStyled.h1(templateObject_6$D || (templateObject_6$D = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n"])), function (_a) {
|
|
6057
6057
|
var color = _a.color;
|
|
6058
6058
|
return color;
|
|
@@ -6062,7 +6062,7 @@ var CloseToolTip = newStyled.button(templateObject_8$o || (templateObject_8$o =
|
|
|
6062
6062
|
var _b = _a.right, right = _b === void 0 ? '.3rem' : _b;
|
|
6063
6063
|
return right;
|
|
6064
6064
|
});
|
|
6065
|
-
var templateObject_1$1$, templateObject_2$1s, templateObject_3$1a, templateObject_4$Y, templateObject_5$
|
|
6065
|
+
var templateObject_1$1$, templateObject_2$1s, templateObject_3$1a, templateObject_4$Y, templateObject_5$K, templateObject_6$D, templateObject_7$v, templateObject_8$o;
|
|
6066
6066
|
|
|
6067
6067
|
var Tooltip = function (_a) {
|
|
6068
6068
|
var _b;
|
|
@@ -6125,7 +6125,7 @@ var SinglePurchaseContainer$3 = newStyled(ContainerBase$3)(templateObject_3$19 |
|
|
|
6125
6125
|
return (onClick ? 'cursor: pointer;' : '');
|
|
6126
6126
|
});
|
|
6127
6127
|
var SubscriptionContainer$3 = newStyled(ContainerBase$3)(templateObject_4$X || (templateObject_4$X = __makeTemplateObject(["\n padding: 16px;\n"], ["\n padding: 16px;\n"])));
|
|
6128
|
-
var SubscriptionHeader$3 = newStyled.div(templateObject_5$
|
|
6128
|
+
var SubscriptionHeader$3 = newStyled.div(templateObject_5$J || (templateObject_5$J = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n border-bottom: 1px solid ", ";\n padding-bottom: 10px;\n margin-bottom: 8px;\n cursor: pointer;\n\n & input:checked + div {\n border-color: ", ";\n }\n"], ["\n display: flex;\n justify-content: space-between;\n border-bottom: 1px solid ", ";\n padding-bottom: 10px;\n margin-bottom: 8px;\n cursor: pointer;\n\n & input:checked + div {\n border-color: ", ";\n }\n"])), function (_a) {
|
|
6129
6129
|
var theme = _a.theme;
|
|
6130
6130
|
return theme.colors.shades[200].color;
|
|
6131
6131
|
}, function (_a) {
|
|
@@ -6143,7 +6143,7 @@ var StyledPrice$3 = newStyled(PriceLabelV2$1)(templateObject_12$4 || (templateOb
|
|
|
6143
6143
|
return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
|
|
6144
6144
|
});
|
|
6145
6145
|
var Container$1e = newStyled.div(templateObject_13$4 || (templateObject_13$4 = __makeTemplateObject([""], [""])));
|
|
6146
|
-
var templateObject_1$1_, templateObject_2$1r, templateObject_3$19, templateObject_4$X, templateObject_5$
|
|
6146
|
+
var templateObject_1$1_, templateObject_2$1r, templateObject_3$19, templateObject_4$X, templateObject_5$J, templateObject_6$C, templateObject_7$u, templateObject_8$n, templateObject_9$c, templateObject_10$b, templateObject_11$7, templateObject_12$4, templateObject_13$4;
|
|
6147
6147
|
|
|
6148
6148
|
var radioIds$2 = {
|
|
6149
6149
|
oneTime: {
|
|
@@ -6235,7 +6235,7 @@ var SinglePurchaseContainer$2 = newStyled(ContainerBase$2)(templateObject_4$W ||
|
|
|
6235
6235
|
var onClick = _a.onClick;
|
|
6236
6236
|
return (onClick ? 'cursor: pointer;' : '');
|
|
6237
6237
|
});
|
|
6238
|
-
var SubscriptionContainer$2 = newStyled(ContainerBase$2)(templateObject_5$
|
|
6238
|
+
var SubscriptionContainer$2 = newStyled(ContainerBase$2)(templateObject_5$I || (templateObject_5$I = __makeTemplateObject(["\n padding: 16px;\n margin-bottom: 8px;\n position: relative;\n"], ["\n padding: 16px;\n margin-bottom: 8px;\n position: relative;\n"])));
|
|
6239
6239
|
var SubscriptionHeader$2 = newStyled.div(templateObject_6$B || (templateObject_6$B = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n border-bottom: 1px solid ", ";\n padding-bottom: 10px;\n margin-bottom: 8px;\n cursor: pointer;\n\n & input:checked + div {\n border-color: ", ";\n }\n"], ["\n display: flex;\n justify-content: space-between;\n border-bottom: 1px solid ", ";\n padding-bottom: 10px;\n margin-bottom: 8px;\n cursor: pointer;\n\n & input:checked + div {\n border-color: ", ";\n }\n"])), function (_a) {
|
|
6240
6240
|
var theme = _a.theme;
|
|
6241
6241
|
return theme.colors.shades[200].color;
|
|
@@ -6256,7 +6256,7 @@ var TooltipWrapper$1 = newStyled.div(templateObject_13$3 || (templateObject_13$3
|
|
|
6256
6256
|
var theme = _a.theme;
|
|
6257
6257
|
return theme.component.autoship.tooltip.margin;
|
|
6258
6258
|
});
|
|
6259
|
-
var templateObject_1$1Z, templateObject_2$1q, templateObject_3$18, templateObject_4$W, templateObject_5$
|
|
6259
|
+
var templateObject_1$1Z, templateObject_2$1q, templateObject_3$18, templateObject_4$W, templateObject_5$I, templateObject_6$B, templateObject_7$t, templateObject_8$m, templateObject_9$b, templateObject_10$a, templateObject_11$6, templateObject_12$3, templateObject_13$3;
|
|
6260
6260
|
|
|
6261
6261
|
var radioIds$1 = {
|
|
6262
6262
|
oneTime: {
|
|
@@ -6339,9 +6339,9 @@ var CustomerDetails = newStyled.div(templateObject_1$1Y || (templateObject_1$1Y
|
|
|
6339
6339
|
var CustomerInfo = newStyled.div(templateObject_2$1p || (templateObject_2$1p = __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"])));
|
|
6340
6340
|
var Name = newStyled.h4(templateObject_3$17 || (templateObject_3$17 = __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"])));
|
|
6341
6341
|
var StarIconContainer = newStyled.div(templateObject_4$V || (templateObject_4$V = __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"])));
|
|
6342
|
-
var Description$2 = newStyled.p(templateObject_5$
|
|
6342
|
+
var Description$2 = newStyled.p(templateObject_5$H || (templateObject_5$H = __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"])));
|
|
6343
6343
|
var ReviewDays = newStyled.span(templateObject_6$A || (templateObject_6$A = __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"])));
|
|
6344
|
-
var templateObject_1$1Y, templateObject_2$1p, templateObject_3$17, templateObject_4$V, templateObject_5$
|
|
6344
|
+
var templateObject_1$1Y, templateObject_2$1p, templateObject_3$17, templateObject_4$V, templateObject_5$H, templateObject_6$A;
|
|
6345
6345
|
|
|
6346
6346
|
var NameWithStars = function (_a) {
|
|
6347
6347
|
var name = _a.name, size = _a.size;
|
|
@@ -6620,7 +6620,7 @@ var Container$17 = newStyled.div(templateObject_1$1L || (templateObject_1$1L = _
|
|
|
6620
6620
|
var MobileContainer = newStyled(Container$17)(templateObject_2$1k || (templateObject_2$1k = __makeTemplateObject(["\n padding: 2px 2px;\n gap: 3px;\n"], ["\n padding: 2px 2px;\n gap: 3px;\n"])));
|
|
6621
6621
|
var DollarPart = newStyled.span(templateObject_3$12 || (templateObject_3$12 = __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"])));
|
|
6622
6622
|
var ClubMembersText = newStyled.span(templateObject_4$R || (templateObject_4$R = __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"])));
|
|
6623
|
-
var MobileDollarPart = newStyled(DollarPart)(templateObject_5$
|
|
6623
|
+
var MobileDollarPart = newStyled(DollarPart)(templateObject_5$G || (templateObject_5$G = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
6624
6624
|
var MobileClubMembersText = newStyled(ClubMembersText)(templateObject_6$z || (templateObject_6$z = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
6625
6625
|
var DesktopDollarPart = newStyled(DollarPart)(templateObject_7$s || (templateObject_7$s = __makeTemplateObject(["\n font-size: 13px;\n"], ["\n font-size: 13px;\n"])));
|
|
6626
6626
|
var DesktopClubMembersText = newStyled(ClubMembersText)(templateObject_8$l || (templateObject_8$l = __makeTemplateObject(["\n font-size: 13px;\n"], ["\n font-size: 13px;\n"])));
|
|
@@ -6629,7 +6629,7 @@ var ClubPriceLabel = function (_a) {
|
|
|
6629
6629
|
var isMobile = useWindowDimensions().isMobile;
|
|
6630
6630
|
return (jsx$1(Fragment$2, { children: isMobile ? (jsxs$1(MobileContainer, { children: [jsx$1(MobileDollarPart, { children: clubPrice }, void 0), jsx$1(MobileClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) : (jsxs$1(Container$17, { children: [jsx$1(DesktopDollarPart, { children: clubPrice }, void 0), jsx$1(DesktopClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) }, void 0));
|
|
6631
6631
|
};
|
|
6632
|
-
var templateObject_1$1L, templateObject_2$1k, templateObject_3$12, templateObject_4$R, templateObject_5$
|
|
6632
|
+
var templateObject_1$1L, templateObject_2$1k, templateObject_3$12, templateObject_4$R, templateObject_5$G, templateObject_6$z, templateObject_7$s, templateObject_8$l;
|
|
6633
6633
|
|
|
6634
6634
|
var Spacing = function (_a) {
|
|
6635
6635
|
var size = _a.size, _b = _a.type, type = _b === void 0 ? 'block' : _b, children = _a.children, styleProp = _a.style;
|
|
@@ -6787,7 +6787,10 @@ var Rating = function (_a) {
|
|
|
6787
6787
|
return (jsxs$1(Container$14, __assign$1({ as: reviewsContainerId ? 'a' : 'div' }, containerAttributes, { "data-testid": "Container", onClick: handleAnchorClick }, { children: [showRatingText && (jsx$1(RatingLabel, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "RatingLabel" }, { children: rating }), void 0)), jsx$1(StarList, { rating: rating, size: size, starsNumber: STARTS_NUMBER, fill: theme.component.stars.element.color }, void 0), jsxs$1(CustomLabel, __assign$1({ theme: theme, size: size, wrapWithParenthesis: wrapWithParenthesis, underline: underline, "data-testid": "CustomLabel" }, { children: [reviews ? reviews : '', " ", reviewsText ? reviewsText : ''] }), void 0)] }), void 0));
|
|
6788
6788
|
};
|
|
6789
6789
|
|
|
6790
|
-
var ImageWrapper$4 = newStyled.div(templateObject_1$1F || (templateObject_1$1F = __makeTemplateObject(["\n position: relative;\n display: flex;\n flex-shrink: 0;\n justify-content: center;\n align-items: center;\n border-radius: 8px;\n"], ["\n position: relative;\n display: flex;\n flex-shrink: 0;\n justify-content: center;\n align-items: center;\n border-radius: 8px;\n"])))
|
|
6790
|
+
var ImageWrapper$4 = newStyled.div(templateObject_1$1F || (templateObject_1$1F = __makeTemplateObject(["\n position: relative;\n display: flex;\n flex-shrink: 0;\n justify-content: center;\n align-items: center;\n border-radius: 8px;\n width: ", ";\n"], ["\n position: relative;\n display: flex;\n flex-shrink: 0;\n justify-content: center;\n align-items: center;\n border-radius: 8px;\n width: ", ";\n"])), function (_a) {
|
|
6791
|
+
var width = _a.width;
|
|
6792
|
+
return width;
|
|
6793
|
+
});
|
|
6791
6794
|
var RatingWrapper = newStyled.div(templateObject_2$1h || (templateObject_2$1h = __makeTemplateObject(["\n position: absolute;\n bottom: 5px;\n left: 50%;\n transform: translateX(-50%);\n display: flex;\n justify-content: center;\n align-items: center;\n background-color: white;\n border-radius: 8px;\n padding: 4px 8px;\n width: 95%;\n"], ["\n position: absolute;\n bottom: 5px;\n left: 50%;\n transform: translateX(-50%);\n display: flex;\n justify-content: center;\n align-items: center;\n background-color: white;\n border-radius: 8px;\n padding: 4px 8px;\n width: 95%;\n"])));
|
|
6792
6795
|
var RatingText = newStyled.span(templateObject_3$10 || (templateObject_3$10 = __makeTemplateObject(["\n font-size: ", ";\n font-weight: 600;\n margin-bottom: -3%;\n color: #292929;\n"], ["\n font-size: ", ";\n font-weight: 600;\n margin-bottom: -3%;\n color: #292929;\n"])), function (_a) {
|
|
6793
6796
|
var fontSize = _a.fontSize;
|
|
@@ -6796,8 +6799,8 @@ var RatingText = newStyled.span(templateObject_3$10 || (templateObject_3$10 = __
|
|
|
6796
6799
|
var templateObject_1$1F, templateObject_2$1h, templateObject_3$10;
|
|
6797
6800
|
|
|
6798
6801
|
var OfferAtCartImage = function (_a) {
|
|
6799
|
-
var isMobile = _a.isMobile, src = _a.src, alt = _a.alt, rating = _a.rating;
|
|
6800
|
-
return (jsxs$1(ImageWrapper$4, { children: [!!rating && (jsxs$1(RatingWrapper, { children: [jsx$1(Rating, { rating: rating, size: isMobile ? ComponentSize.XXSmall : ComponentSize.XSmall }, void 0), jsxs$1(RatingText, __assign$1({ fontSize: isMobile ? '9px' : '13px' }, { children: [rating, "/5"] }), void 0)] }, void 0)), jsx$1(Image$3, { src: src, alt: alt, width: "100%", height: "100%", objectFit: "cover", borderRadius: "8px" }, void 0)] }, void 0));
|
|
6802
|
+
var isMobile = _a.isMobile, src = _a.src, alt = _a.alt, rating = _a.rating, width = _a.width;
|
|
6803
|
+
return (jsxs$1(ImageWrapper$4, __assign$1({ width: width }, { children: [!!rating && (jsxs$1(RatingWrapper, { children: [jsx$1(Rating, { rating: rating, size: isMobile ? ComponentSize.XXSmall : ComponentSize.XSmall }, void 0), jsxs$1(RatingText, __assign$1({ fontSize: isMobile ? '9px' : '13px' }, { children: [rating, "/5"] }), void 0)] }, void 0)), jsx$1(Image$3, { src: src, alt: alt, width: "100%", height: "100%", objectFit: "cover", borderRadius: "8px" }, void 0)] }), void 0));
|
|
6801
6804
|
};
|
|
6802
6805
|
|
|
6803
6806
|
var OfferAtCartTitle = function (_a) {
|
|
@@ -6987,9 +6990,9 @@ var Container$12 = newStyled.div(templateObject_1$1z || (templateObject_1$1z = _
|
|
|
6987
6990
|
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; });
|
|
6988
6991
|
var PlayIcon = newStyled(Icon.PDP.PlayVideo)(templateObject_3$_ || (templateObject_3$_ = __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"])));
|
|
6989
6992
|
var PlayContainer = newStyled.div(templateObject_4$O || (templateObject_4$O = __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"])));
|
|
6990
|
-
var PauseContainer = newStyled.div(templateObject_5$
|
|
6993
|
+
var PauseContainer = newStyled.div(templateObject_5$F || (templateObject_5$F = __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"])));
|
|
6991
6994
|
var MuteButton = newStyled.button(templateObject_6$y || (templateObject_6$y = __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"])));
|
|
6992
|
-
var templateObject_1$1z, templateObject_2$1c, templateObject_3$_, templateObject_4$O, templateObject_5$
|
|
6995
|
+
var templateObject_1$1z, templateObject_2$1c, templateObject_3$_, templateObject_4$O, templateObject_5$F, templateObject_6$y;
|
|
6993
6996
|
|
|
6994
6997
|
var Video$1 = function (_a) {
|
|
6995
6998
|
var _b, _c, _d, _e;
|
|
@@ -7146,7 +7149,7 @@ var RegularPriceTagSpan = newStyled.span(templateObject_1$1w || (templateObject_
|
|
|
7146
7149
|
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"])));
|
|
7147
7150
|
var PriceContainer$1 = newStyled.span(templateObject_3$Z || (templateObject_3$Z = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
7148
7151
|
var PriceContainerV2 = newStyled.span(templateObject_4$N || (templateObject_4$N = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
7149
|
-
var PriceWithTagContainer = newStyled.span(templateObject_5$
|
|
7152
|
+
var PriceWithTagContainer = newStyled.span(templateObject_5$E || (templateObject_5$E = __makeTemplateObject(["\n display: flex;\n gap: 8px;\n"], ["\n display: flex;\n gap: 8px;\n"])));
|
|
7150
7153
|
var RegularPriceTag = function () {
|
|
7151
7154
|
return jsx$1(RegularPriceTagSpan, { children: "REGULAR PRICE" }, void 0);
|
|
7152
7155
|
};
|
|
@@ -7200,7 +7203,7 @@ var PriceLabelV4 = function (_a) {
|
|
|
7200
7203
|
? finalPriceArray[0]
|
|
7201
7204
|
: (_b = "".concat(productFinalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1], "."] }), void 0), jsx$1(Price, __assign$1({ finalPriceStyledSmall: true, style: { marginTop: '-6px', color: '#c64844' } }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }, void 0), jsx$1(ClubPriceTag, { label: theme.label.member }, void 0)] }, void 0)] }, void 0)), discount && (jsx$1(TagContainer, __assign$1({ size: size }, { children: jsx$1(DiscountTag$3, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
|
|
7202
7205
|
};
|
|
7203
|
-
var templateObject_1$1w, templateObject_2$1a, templateObject_3$Z, templateObject_4$N, templateObject_5$
|
|
7206
|
+
var templateObject_1$1w, templateObject_2$1a, templateObject_3$Z, templateObject_4$N, templateObject_5$E;
|
|
7204
7207
|
|
|
7205
7208
|
var STYLES_BY_THEME = {
|
|
7206
7209
|
TheSpaDr: {
|
|
@@ -7327,7 +7330,7 @@ var getStylesBySize$b = function (size) {
|
|
|
7327
7330
|
};
|
|
7328
7331
|
}
|
|
7329
7332
|
};
|
|
7330
|
-
var TopTagContainer$9 = newStyled.div(templateObject_5$
|
|
7333
|
+
var TopTagContainer$9 = newStyled.div(templateObject_5$D || (templateObject_5$D = __makeTemplateObject(["\n position: absolute;\n left: 0;\n top: 0;\n width: ", ";\n z-index: 1;\n"], ["\n position: absolute;\n left: 0;\n top: 0;\n width: ", ";\n z-index: 1;\n"])), function (_a) {
|
|
7331
7334
|
var style = _a.style;
|
|
7332
7335
|
return style.width;
|
|
7333
7336
|
});
|
|
@@ -7337,7 +7340,7 @@ var BottomTagContainer$9 = newStyled.div(templateObject_6$x || (templateObject_6
|
|
|
7337
7340
|
});
|
|
7338
7341
|
var MarginTopContainer$1 = newStyled.div(templateObject_7$r || (templateObject_7$r = __makeTemplateObject(["\n margin-top: 8px;\n"], ["\n margin-top: 8px;\n"])));
|
|
7339
7342
|
var ClubOfferPriceLabelWrapper = newStyled.div(templateObject_8$k || (templateObject_8$k = __makeTemplateObject(["\n margin-top: 2px;\n margin-bottom: 2px;\n"], ["\n margin-top: 2px;\n margin-bottom: 2px;\n"])));
|
|
7340
|
-
var templateObject_1$1v, templateObject_2$19, templateObject_3$Y, templateObject_4$M, templateObject_5$
|
|
7343
|
+
var templateObject_1$1v, templateObject_2$19, templateObject_3$Y, templateObject_4$M, templateObject_5$D, templateObject_6$x, templateObject_7$r, templateObject_8$k;
|
|
7341
7344
|
|
|
7342
7345
|
var ProductItemMobile = function (_a) {
|
|
7343
7346
|
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
|
|
@@ -7483,7 +7486,7 @@ var getStylesBySize$a = function (size) {
|
|
|
7483
7486
|
};
|
|
7484
7487
|
}
|
|
7485
7488
|
};
|
|
7486
|
-
var TopTagContainer$8 = newStyled.div(templateObject_5$
|
|
7489
|
+
var TopTagContainer$8 = newStyled.div(templateObject_5$C || (templateObject_5$C = __makeTemplateObject(["\n position: absolute;\n left: 0;\n top: 0;\n width: ", ";\n z-index: 1;\n"], ["\n position: absolute;\n left: 0;\n top: 0;\n width: ", ";\n z-index: 1;\n"])), function (_a) {
|
|
7487
7490
|
var style = _a.style;
|
|
7488
7491
|
return style.width;
|
|
7489
7492
|
});
|
|
@@ -7543,7 +7546,7 @@ var ProductItemTK = function (_a) {
|
|
|
7543
7546
|
marginTop: hasSpacing ? undefined : textContainerGap,
|
|
7544
7547
|
} }, { children: title }), void 0)) : (jsx(Title$6, __assign$1({ theme: theme, align: showClubPriceLabel ? 'left' : alignName }, { children: title }), void 0)), hasSpacing && jsx(Spacing, { size: space }, void 0), colorPicker.display && colorPicker.position === 'middle' && jsx(Fragment, { children: colorPicker.component }, void 0), (hasStrength === null || hasStrength === void 0 ? void 0 : hasStrength.strength) !== -1 && (jsxs(Fragment, { children: [jsx(StrengthBars, { barsFilled: hasStrength.strength, supportText: hasStrength.description }, void 0), jsx(Spacing, { size: 10 }, void 0)] }, void 0)), priceAtBottom ? (jsxs(Fragment, { children: [customSizeRating ? (jsx(Rating, { size: customSizeRating, rating: rating.rating, reviews: rating.reviews, reviewsText: "", wrapWithParenthesis: true }, void 0)) : (jsx(RatingDisplay, {}, void 0)), hasSpacing && jsx(Spacing, { size: space }, void 0), jsx(MarginTopContainer, { children: priceLoading ? jsx(SkeletonBox, { height: "20px", width: "140px" }, void 0) : jsx(PriceLabelDisplay, {}, void 0) }, void 0)] }, void 0)) : (jsxs(Fragment, { children: [priceLoading ? (jsx(SkeletonBox, { height: "20px", width: "140px" }, void 0)) : (jsxs(Fragment, { children: [jsx(PriceLabelDisplay, {}, void 0), jsx(BuyNowPayLater, { displayBNPL: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.displayBNPL, installments: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.installments) || 0, installmentPrice: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.installmentPrice) || '', iconFolder: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconFolder, iconName: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconName) || '', showLogo: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.showLogo, iconColor: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconColor, fontSize: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.fontSize }, void 0)] }, void 0)), showClubPriceLabel && jsx(ClubPriceLabel, { clubPrice: clubPrice }, void 0), hasSpacing && jsx(Spacing, { size: space }, void 0), jsx(RatingDisplay, {}, void 0)] }, void 0))] }), void 0), colorPicker.display && colorPicker.position === 'bottom' && (jsxs(Fragment, { children: [hasSpacing && jsx(Spacing, { size: space }, void 0), colorPicker.component] }, void 0))] }), void 0));
|
|
7545
7548
|
};
|
|
7546
|
-
var templateObject_1$1u, templateObject_2$18, templateObject_3$X, templateObject_4$L, templateObject_5$
|
|
7549
|
+
var templateObject_1$1u, templateObject_2$18, templateObject_3$X, templateObject_4$L, templateObject_5$C, templateObject_6$w, templateObject_7$q, templateObject_8$j;
|
|
7547
7550
|
|
|
7548
7551
|
var Container$_ = newStyled.div(templateObject_1$1t || (templateObject_1$1t = __makeTemplateObject(["\n display: flex;\n row-gap: 1.875rem;\n column-gap: 1.875rem;\n flex-wrap: wrap;\n"], ["\n display: flex;\n row-gap: 1.875rem;\n column-gap: 1.875rem;\n flex-wrap: wrap;\n"])));
|
|
7549
7552
|
function withProductGrid(ProductItemComponent, data) {
|
|
@@ -7567,7 +7570,7 @@ var CustomRadioGroup = newStyled(lt)(templateObject_1$1s || (templateObject_1$1s
|
|
|
7567
7570
|
newStyled(lt.Label)(templateObject_2$17 || (templateObject_2$17 = __makeTemplateObject(["\n font-size: 0.88rem;\n"], ["\n font-size: 0.88rem;\n"])));
|
|
7568
7571
|
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$W || (templateObject_3$W = __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"])));
|
|
7569
7572
|
var Span = newStyled.span(templateObject_4$K || (templateObject_4$K = __makeTemplateObject(["\n font-weight: 600;\n"], ["\n font-weight: 600;\n"])));
|
|
7570
|
-
var OptionsContainer = newStyled.div(templateObject_5$
|
|
7573
|
+
var OptionsContainer = newStyled.div(templateObject_5$B || (templateObject_5$B = __makeTemplateObject(["\n display: flex;\n margin-top: 0.63rem;\n flex-wrap: wrap;\n"], ["\n display: flex;\n margin-top: 0.63rem;\n flex-wrap: wrap;\n"])));
|
|
7571
7574
|
var Label$5 = function (_a) {
|
|
7572
7575
|
var label = _a.label, values = _a.values;
|
|
7573
7576
|
return (jsxs$1(Text$7, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [label, " ", jsx$1(Span, { children: values }, void 0)] }), void 0));
|
|
@@ -7585,7 +7588,7 @@ var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
|
|
|
7585
7588
|
Option: Option,
|
|
7586
7589
|
OptionsContainer: OptionsContainer,
|
|
7587
7590
|
});
|
|
7588
|
-
var templateObject_1$1s, templateObject_2$17, templateObject_3$W, templateObject_4$K, templateObject_5$
|
|
7591
|
+
var templateObject_1$1s, templateObject_2$17, templateObject_3$W, templateObject_4$K, templateObject_5$B;
|
|
7589
7592
|
|
|
7590
7593
|
var OneColorSelector = function (_a) {
|
|
7591
7594
|
var color = _a.color, selected = _a.selected, testId = _a.testId, noStock = _a.noStock, _b = _a.showCross, showCross = _b === void 0 ? false : _b;
|
|
@@ -7716,14 +7719,14 @@ var Row$2 = newStyled.div(templateObject_3$V || (templateObject_3$V = __makeTemp
|
|
|
7716
7719
|
"\n flex-direction: row-reverse;\n justify-content: space-between;\n ";
|
|
7717
7720
|
});
|
|
7718
7721
|
var H5 = newStyled.h5(templateObject_4$J || (templateObject_4$J = __makeTemplateObject(["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 500;\n margin-bottom: 0.125rem;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 500;\n margin-bottom: 0.125rem;\n margin: 0;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
7719
|
-
var H3 = newStyled.h3(templateObject_5$
|
|
7722
|
+
var H3 = newStyled.h3(templateObject_5$A || (templateObject_5$A = __makeTemplateObject(["\n font-size: 1.125rem;\n line-height: 1.75rem;\n font-weight: 700;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 1.125rem;\n line-height: 1.75rem;\n font-weight: 700;\n margin: 0;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
7720
7723
|
var FreeShipping = newStyled.span(templateObject_6$v || (templateObject_6$v = __makeTemplateObject(["\n font-weight: 600;\n color: ", ";\n"], ["\n font-weight: 600;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
7721
7724
|
var CrossSellCheckbox = function (_a) {
|
|
7722
7725
|
var imageURL = _a.imageURL, title = _a.title, description = _a.description, freeShippingText = _a.freeShippingText, rightToLeft = _a.rightToLeft, onChange = _a.onChange;
|
|
7723
7726
|
var theme = useTheme();
|
|
7724
7727
|
return (jsxs$1(Wrapper$5, __assign$1({ backgroundColor: theme.colors.shades['10'].color, rightToLeft: Boolean(rightToLeft) }, { children: [jsx$1(Checkbox, { text: "", id: "checkbox", onChange: onChange, size: ComponentSize.Small, variant: "secondary" }, void 0), jsxs$1(Row$2, __assign$1({ rightToLeft: Boolean(rightToLeft) }, { children: [jsx$1(Image$3, { src: imageURL, alt: "Cross sell image", borderRadius: "0.5rem" }, void 0), jsxs$1(Col$1, { children: [jsx$1(H5, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0), jsxs$1(H3, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: [description, jsxs$1(FreeShipping, __assign$1({ color: theme.colors.shades['700'].color }, { children: [' ', "+ ", freeShippingText] }), void 0)] }), void 0)] }, void 0)] }), void 0)] }), void 0));
|
|
7725
7728
|
};
|
|
7726
|
-
var templateObject_1$1p, templateObject_2$15, templateObject_3$V, templateObject_4$J, templateObject_5$
|
|
7729
|
+
var templateObject_1$1p, templateObject_2$15, templateObject_3$V, templateObject_4$J, templateObject_5$A, templateObject_6$v;
|
|
7727
7730
|
|
|
7728
7731
|
var index$1 = /*#__PURE__*/Object.freeze({
|
|
7729
7732
|
__proto__: null,
|
|
@@ -7895,7 +7898,7 @@ var Col = newStyled.div(templateObject_4$H || (templateObject_4$H = __makeTempla
|
|
|
7895
7898
|
textAlign: ['center', 'inherit'],
|
|
7896
7899
|
width: ['100%', 'inherit'],
|
|
7897
7900
|
}));
|
|
7898
|
-
var IconContainer$4 = newStyled.div(templateObject_5$
|
|
7901
|
+
var IconContainer$4 = newStyled.div(templateObject_5$z || (templateObject_5$z = __makeTemplateObject(["\n width: 1.5rem;\n height: 1.5rem;\n ", "\n"], ["\n width: 1.5rem;\n height: 1.5rem;\n ", "\n"])), mediaQueries({
|
|
7899
7902
|
marginRight: ['0', '0.438rem'],
|
|
7900
7903
|
marginBottom: ['10px', '0'],
|
|
7901
7904
|
width: ['auto', '1.5rem'],
|
|
@@ -7923,7 +7926,7 @@ var DeliveryDetails = function (_a) {
|
|
|
7923
7926
|
var theme = useTheme();
|
|
7924
7927
|
return (jsxs$1("div", __assign$1({ "data-testid": "DeliveryDetails" }, { children: [jsx$1(Title$5, __assign$1({ color: theme.colors.shades[700].color }, { children: deliveryDetailsText }), void 0), jsx$1(Line, { backgroundColor: theme.colors.shades['200'].color }, void 0), note && jsx$1(Note, __assign$1({}, note), void 0), jsxs$1(Row$1, __assign$1({ "data-testid": "DD-row", theme: theme }, { children: [jsxs$1(Col, __assign$1({ theme: theme }, { children: [jsxs$1(SectionTitle, __assign$1({ theme: theme }, { children: [jsx$1(IconContainer$4, __assign$1({ theme: theme }, { children: jsx$1(Icon.PDP.Clock, { width: 1.5 }, void 0) }), void 0), arrivingBy.title] }), void 0), jsx$1(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: arrivingBy.details }), void 0)] }), void 0), jsxs$1(Col, __assign$1({ theme: theme }, { children: [jsxs$1(SectionTitle, __assign$1({ theme: theme }, { children: [jsx$1(IconContainer$4, __assign$1({ theme: theme }, { children: jsx$1(Icon.Navigation.MapMarker, { width: 1.5 }, void 0) }), void 0), shippingTo.title] }), void 0), jsx$1(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: shippingTo.details }), void 0)] }), void 0), jsxs$1(Col, __assign$1({ theme: theme }, { children: [jsxs$1(SectionTitle, __assign$1({ theme: theme }, { children: [jsx$1(IconContainer$4, __assign$1({ theme: theme }, { children: jsx$1(Icon.Messaging.Messenger, { width: 1.5 }, void 0) }), void 0), instantOrderUpdate.title] }), void 0), jsx$1(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: instantOrderUpdate.details }), void 0), instantOrderUpdate.keepMeUpdated && (jsxs$1(KeepMeUpdated, __assign$1({ onClick: instantOrderUpdate.keepMeUpdated.onClick, borderColor: theme.colors.shades['150'].color }, { children: [jsx$1(Icon.Messaging.Messenger, { width: 1, height: 1, fill: "#0078FF" }, void 0), instantOrderUpdate.keepMeUpdated.title] }), void 0))] }), void 0)] }), void 0)] }), void 0));
|
|
7925
7928
|
};
|
|
7926
|
-
var templateObject_1$1m, templateObject_2$12, templateObject_3$T, templateObject_4$H, templateObject_5$
|
|
7929
|
+
var templateObject_1$1m, templateObject_2$12, templateObject_3$T, templateObject_4$H, templateObject_5$z, templateObject_6$u, templateObject_7$p, templateObject_8$i;
|
|
7927
7930
|
|
|
7928
7931
|
var Backdrop = newStyled.div(templateObject_1$1l || (templateObject_1$1l = __makeTemplateObject(["\n position: fixed;\n z-index: 2;\n left: 0;\n top: ", ";\n width: 100%;\n height: 100%;\n overflow: auto;\n transition: background-color 0.3s ease-out;\n\n ", "\n"], ["\n position: fixed;\n z-index: 2;\n left: 0;\n top: ", ";\n width: 100%;\n height: 100%;\n overflow: auto;\n transition: background-color 0.3s ease-out;\n\n ", "\n"])), function (_a) {
|
|
7929
7932
|
var top = _a.top;
|
|
@@ -7990,9 +7993,9 @@ var List = newStyled.ul(templateObject_1$1k || (templateObject_1$1k = __makeTemp
|
|
|
7990
7993
|
var Item$2 = newStyled.li(templateObject_2$10 || (templateObject_2$10 = __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"])));
|
|
7991
7994
|
var DropdownWrapper = newStyled.div(templateObject_3$S || (templateObject_3$S = __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"])));
|
|
7992
7995
|
var ArrowContainer$1 = newStyled.div(templateObject_4$G || (templateObject_4$G = __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"])));
|
|
7993
|
-
var StyledDropdown = newStyled.ul(templateObject_5$
|
|
7996
|
+
var StyledDropdown = newStyled.ul(templateObject_5$y || (templateObject_5$y = __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; });
|
|
7994
7997
|
var DropdownItem = newStyled.li(templateObject_6$t || (templateObject_6$t = __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; });
|
|
7995
|
-
var templateObject_1$1k, templateObject_2$10, templateObject_3$S, templateObject_4$G, templateObject_5$
|
|
7998
|
+
var templateObject_1$1k, templateObject_2$10, templateObject_3$S, templateObject_4$G, templateObject_5$y, templateObject_6$t;
|
|
7996
7999
|
|
|
7997
8000
|
var DropdownListIcons = function (_a) {
|
|
7998
8001
|
var items = _a.items;
|
|
@@ -8009,9 +8012,9 @@ var DropdownContainer = newStyled.div(templateObject_1$1j || (templateObject_1$1
|
|
|
8009
8012
|
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"])));
|
|
8010
8013
|
var SizeLabel = newStyled.span(templateObject_3$R || (templateObject_3$R = __makeTemplateObject(["\n margin-right: 8px;\n"], ["\n margin-right: 8px;\n"])));
|
|
8011
8014
|
var DetailLabel = newStyled.span(templateObject_4$F || (templateObject_4$F = __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"])));
|
|
8012
|
-
var DropdownOptions = newStyled.div(templateObject_5$
|
|
8015
|
+
var DropdownOptions = newStyled.div(templateObject_5$x || (templateObject_5$x = __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"])));
|
|
8013
8016
|
var DropdownOption = newStyled.div(templateObject_6$s || (templateObject_6$s = __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"])));
|
|
8014
|
-
var templateObject_1$1j, templateObject_2$$, templateObject_3$R, templateObject_4$F, templateObject_5$
|
|
8017
|
+
var templateObject_1$1j, templateObject_2$$, templateObject_3$R, templateObject_4$F, templateObject_5$x, templateObject_6$s;
|
|
8015
8018
|
|
|
8016
8019
|
var SizeDropdown = function (_a) {
|
|
8017
8020
|
var options = _a.options, defaultLabel = _a.defaultLabel, onOptionSelect = _a.onOptionSelect;
|
|
@@ -8042,7 +8045,7 @@ var DialogDropdownListContainer = newStyled.ul(templateObject_3$Q || (templateOb
|
|
|
8042
8045
|
return props.containerPosRight ? "calc(".concat(props.containerPosRight, ")") : "calc(".concat(props.right, " - 23px)");
|
|
8043
8046
|
});
|
|
8044
8047
|
var DialogDropdownListItem = newStyled.li(templateObject_4$E || (templateObject_4$E = __makeTemplateObject(["\n border-bottom: 1px solid #e9e9e9;\n margin: 0;\n padding: 0;\n font-style: normal;\n font-weight: 400;\n font-size: 14px;\n line-height: 17px;\n color: var(--colors-shades-550-color);\n vertical-align: inherit;\n"], ["\n border-bottom: 1px solid #e9e9e9;\n margin: 0;\n padding: 0;\n font-style: normal;\n font-weight: 400;\n font-size: 14px;\n line-height: 17px;\n color: var(--colors-shades-550-color);\n vertical-align: inherit;\n"])));
|
|
8045
|
-
var DialogDropdownLink = newStyled.a(templateObject_5$
|
|
8048
|
+
var DialogDropdownLink = newStyled.a(templateObject_5$w || (templateObject_5$w = __makeTemplateObject(["\n display: inline-block;\n text-decoration: none;\n width: 100%;\n background-color: transparent;\n border: 0;\n margin: 0;\n padding: 12px;\n cursor: pointer;\n transition: all 0.2s;\n color: var(--colors-shades-700-color);\n font-size: 1.125rem;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n vertical-align: inherit;\n"], ["\n display: inline-block;\n text-decoration: none;\n width: 100%;\n background-color: transparent;\n border: 0;\n margin: 0;\n padding: 12px;\n cursor: pointer;\n transition: all 0.2s;\n color: var(--colors-shades-700-color);\n font-size: 1.125rem;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n vertical-align: inherit;\n"])));
|
|
8046
8049
|
var DropdownDialog = function (_a) {
|
|
8047
8050
|
var options = _a.options, _b = _a.position, top = _b.top, right = _b.right, containerPosRight = _b.containerPosRight, containerPosTop = _b.containerPosTop, style = _a.style, dialogDropdownContainerStyle = _a.dialogDropdownContainerStyle, dialogDropdownListItemStyle = _a.dialogDropdownListItemStyle, dialogContainerText = _a.dialogContainerText, className = _a.className;
|
|
8048
8051
|
var theme = useTheme$1();
|
|
@@ -8051,7 +8054,7 @@ var DropdownDialog = function (_a) {
|
|
|
8051
8054
|
return (jsx$1(DialogDropdownListItem, { children: jsx$1(DialogDropdownLink, __assign$1({ href: value }, { children: label }), void 0) }, idx));
|
|
8052
8055
|
}) }), void 0) }), void 0));
|
|
8053
8056
|
};
|
|
8054
|
-
var templateObject_1$1i, templateObject_2$_, templateObject_3$Q, templateObject_4$E, templateObject_5$
|
|
8057
|
+
var templateObject_1$1i, templateObject_2$_, templateObject_3$Q, templateObject_4$E, templateObject_5$w;
|
|
8055
8058
|
|
|
8056
8059
|
function FilteringDropdown(_a) {
|
|
8057
8060
|
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;
|
|
@@ -8100,13 +8103,13 @@ var SectionContent = newStyled.div(templateObject_1$1g || (templateObject_1$1g =
|
|
|
8100
8103
|
var Header$3 = newStyled.div(templateObject_2$Y || (templateObject_2$Y = __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"])));
|
|
8101
8104
|
var MobileHeader = newStyled.div(templateObject_3$O || (templateObject_3$O = __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"])));
|
|
8102
8105
|
var MobileIconsContainer = newStyled.div(templateObject_4$C || (templateObject_4$C = __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"])));
|
|
8103
|
-
var H4 = newStyled.h4(templateObject_5$
|
|
8106
|
+
var H4 = newStyled.h4(templateObject_5$v || (templateObject_5$v = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
8104
8107
|
var FilterLink = newStyled.a(templateObject_6$r || (templateObject_6$r = __makeTemplateObject(["\n font-size: 1rem;\n font-weight: 700;\n line-height: 1.5rem;\n color: ", ";\n text-decoration: none;\n"], ["\n font-size: 1rem;\n font-weight: 700;\n line-height: 1.5rem;\n color: ", ";\n text-decoration: none;\n"])), function (props) { return props.color; });
|
|
8105
8108
|
var OptionContainer = newStyled.div(templateObject_7$o || (templateObject_7$o = __makeTemplateObject(["\n margin-bottom: 1.25rem;\n &:last-child {\n margin-bottom: 0;\n }\n @media (max-width: 768px) {\n display: ", ";\n }\n @media (min-width: 768px) and (max-width: 992px) {\n display: ", ";\n }\n"], ["\n margin-bottom: 1.25rem;\n &:last-child {\n margin-bottom: 0;\n }\n @media (max-width: 768px) {\n display: ", ";\n }\n @media (min-width: 768px) and (max-width: 992px) {\n display: ", ";\n }\n"])), function (props) { return (props.showInMobile ? 'block' : 'none'); }, function (props) { return (props.showInTablet ? 'block' : 'none'); });
|
|
8106
8109
|
var ClearAll = newStyled.span(templateObject_8$h || (templateObject_8$h = __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; });
|
|
8107
8110
|
var MobileFooter = newStyled.div(templateObject_9$a || (templateObject_9$a = __makeTemplateObject(["\n background-color: #fff;\n padding: 0.75rem 0.938rem;\n position: sticky;\n bottom: 0;\n z-index: 1;\n margin-top: 5.625rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n"], ["\n background-color: #fff;\n padding: 0.75rem 0.938rem;\n position: sticky;\n bottom: 0;\n z-index: 1;\n margin-top: 5.625rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n"])));
|
|
8108
8111
|
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"])));
|
|
8109
|
-
var templateObject_1$1g, templateObject_2$Y, templateObject_3$O, templateObject_4$C, templateObject_5$
|
|
8112
|
+
var templateObject_1$1g, templateObject_2$Y, templateObject_3$O, templateObject_4$C, templateObject_5$v, templateObject_6$r, templateObject_7$o, templateObject_8$h, templateObject_9$a, templateObject_10$9;
|
|
8110
8113
|
|
|
8111
8114
|
var getStylesBySize$9 = function (size, theme) {
|
|
8112
8115
|
switch (size) {
|
|
@@ -12704,11 +12707,11 @@ var Container$U = newStyled.div(templateObject_3$M || (templateObject_3$M = __ma
|
|
|
12704
12707
|
"\n scroll-behavior: smooth;\n &::-webkit-scrollbar {\n visibility: hidden;\n }\n ";
|
|
12705
12708
|
});
|
|
12706
12709
|
var Button$7 = newStyled.button(templateObject_4$B || (templateObject_4$B = __makeTemplateObject(["\n padding: 0;\n border: none;\n text-decoration: none;\n background: transparent;\n outline: none;\n"], ["\n padding: 0;\n border: none;\n text-decoration: none;\n background: transparent;\n outline: none;\n"])));
|
|
12707
|
-
var ArrowsContainer = newStyled.div(templateObject_5$
|
|
12710
|
+
var ArrowsContainer = newStyled.div(templateObject_5$u || (templateObject_5$u = __makeTemplateObject(["\n display: flex;\n width: 65px;\n position: relative;\n left: 6px;\n"], ["\n display: flex;\n width: 65px;\n position: relative;\n left: 6px;\n"])));
|
|
12708
12711
|
var ArrowBaseStyles = newStyled.div(templateObject_6$q || (templateObject_6$q = __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"])));
|
|
12709
12712
|
var ArrowPrev = newStyled(ArrowBaseStyles)(templateObject_7$n || (templateObject_7$n = __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"])));
|
|
12710
12713
|
var ArrowNext = newStyled(ArrowBaseStyles)(templateObject_8$g || (templateObject_8$g = __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"])));
|
|
12711
|
-
var templateObject_1$1a, templateObject_2$U, templateObject_3$M, templateObject_4$B, templateObject_5$
|
|
12714
|
+
var templateObject_1$1a, templateObject_2$U, templateObject_3$M, templateObject_4$B, templateObject_5$u, templateObject_6$q, templateObject_7$n, templateObject_8$g;
|
|
12712
12715
|
|
|
12713
12716
|
var getLoadingProp = function (index, itemsOnViewport) {
|
|
12714
12717
|
var loading = 'eager';
|
|
@@ -14352,7 +14355,7 @@ var BottomTagContainer$7 = newStyled.div(templateObject_3$L || (templateObject_3
|
|
|
14352
14355
|
return (isCTAHidden ? '60px' : '120px');
|
|
14353
14356
|
});
|
|
14354
14357
|
var TopRightTagWrapper = newStyled.div(templateObject_4$A || (templateObject_4$A = __makeTemplateObject(["\n position: absolute;\n right: 0;\n top: 0;\n"], ["\n position: absolute;\n right: 0;\n top: 0;\n"])));
|
|
14355
|
-
var TopRightTagContainer$2 = newStyled.div(templateObject_5$
|
|
14358
|
+
var TopRightTagContainer$2 = newStyled.div(templateObject_5$t || (templateObject_5$t = __makeTemplateObject(["\n white-space: pre-wrap;\n"], ["\n white-space: pre-wrap;\n"])));
|
|
14356
14359
|
var ButtonSecondaryOutlineWrapper = newStyled(ButtonSecondaryOutline)(templateObject_6$p || (templateObject_6$p = __makeTemplateObject(["\n text-transform: capitalize;\n margin-top: 12px;\n\n @media (max-width: 992px) {\n margin-top: 4px;\n }\n"], ["\n text-transform: capitalize;\n margin-top: 12px;\n\n @media (max-width: 992px) {\n margin-top: 4px;\n }\n"])));
|
|
14357
14360
|
var ImageStyled = newStyled(Image$3)(templateObject_7$m || (templateObject_7$m = __makeTemplateObject(["\n aspect-ratio: ", ";\n"], ["\n aspect-ratio: ", ";\n"])), function (_a) {
|
|
14358
14361
|
var theme = _a.theme, isRatioSquare = _a.isRatioSquare;
|
|
@@ -14362,7 +14365,7 @@ var InnerImageZoomStyled = newStyled(InnerImageZoom)(templateObject_8$f || (temp
|
|
|
14362
14365
|
var theme = _a.theme, isRatioSquare = _a.isRatioSquare;
|
|
14363
14366
|
return isRatioSquare ? '1 / 1' : theme.component.gallery.aspectRatio;
|
|
14364
14367
|
});
|
|
14365
|
-
var templateObject_1$19, templateObject_2$T, templateObject_3$L, templateObject_4$A, templateObject_5$
|
|
14368
|
+
var templateObject_1$19, templateObject_2$T, templateObject_3$L, templateObject_4$A, templateObject_5$t, templateObject_6$p, templateObject_7$m, templateObject_8$f;
|
|
14366
14369
|
|
|
14367
14370
|
var ImageProductSlide$1 = function (_a) {
|
|
14368
14371
|
var _b;
|
|
@@ -14571,7 +14574,7 @@ var InputWrapper = newStyled.div(templateObject_4$z || (templateObject_4$z = __m
|
|
|
14571
14574
|
var size = _a.size, inlinePlaceholder = _a.inlinePlaceholder;
|
|
14572
14575
|
return !inlinePlaceholder ? (size === 'small' ? '36px' : '40px') : '48px';
|
|
14573
14576
|
});
|
|
14574
|
-
var AnimatedPlaceholder = newStyled.span(templateObject_5$
|
|
14577
|
+
var AnimatedPlaceholder = newStyled.span(templateObject_5$s || (templateObject_5$s = __makeTemplateObject(["\n color: ", ";\n font-weight: ", ";\n left: 0.9375rem;\n top: 0;\n margin: auto;\n bottom: 0;\n transition: all 0.2s ease;\n position: absolute;\n pointer-events: none;\n font-size: ", ";\n line-height: ", ";\n display: inline-block;\n height: 24px;\n"], ["\n color: ", ";\n font-weight: ", ";\n left: 0.9375rem;\n top: 0;\n margin: auto;\n bottom: 0;\n transition: all 0.2s ease;\n position: absolute;\n pointer-events: none;\n font-size: ", ";\n line-height: ", ";\n display: inline-block;\n height: 24px;\n"])), function (_a) {
|
|
14575
14578
|
var theme = _a.theme;
|
|
14576
14579
|
return theme.component.input.placeholderColor;
|
|
14577
14580
|
}, function (_a) {
|
|
@@ -14585,7 +14588,7 @@ var AnimatedPlaceholder = newStyled.span(templateObject_5$r || (templateObject_5
|
|
|
14585
14588
|
return theme.component.input.lineHeight;
|
|
14586
14589
|
});
|
|
14587
14590
|
var ClearInput = newStyled.div(templateObject_6$o || (templateObject_6$o = __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"])));
|
|
14588
|
-
var templateObject_1$14, templateObject_2$Q, templateObject_3$J, templateObject_4$z, templateObject_5$
|
|
14591
|
+
var templateObject_1$14, templateObject_2$Q, templateObject_3$J, templateObject_4$z, templateObject_5$s, templateObject_6$o;
|
|
14589
14592
|
|
|
14590
14593
|
var BaseInput = function (_a) {
|
|
14591
14594
|
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"]);
|
|
@@ -14841,7 +14844,7 @@ var transformStyle = function (_a) {
|
|
|
14841
14844
|
var Container$M = newStyled.div(templateObject_6$n || (templateObject_6$n = __makeTemplateObject(["\n border: 1px solid var(--colors-pallete-primary-color);\n border-radius: ", ";\n padding: ", ";\n position: fixed;\n left: ", ";\n top: ", ";\n z-index: var(--zIndex-modal);\n background-color: var(--colors-background-color);\n transition: transform 0.3s, opacity 0.3s;\n overflow-y: auto;\n max-width: ", ";\n max-height: ", ";\n width: ", ";\n height: ", ";\n ", "\n ", "\n ", "\n"], ["\n border: 1px solid var(--colors-pallete-primary-color);\n border-radius: ", ";\n padding: ", ";\n position: fixed;\n left: ", ";\n top: ", ";\n z-index: var(--zIndex-modal);\n background-color: var(--colors-background-color);\n transition: transform 0.3s, opacity 0.3s;\n overflow-y: auto;\n max-width: ", ";\n max-height: ", ";\n width: ", ";\n height: ", ";\n ", "\n ", "\n ", "\n"])), function (props) { return "".concat(props.maxFullScreen ? '0' : 'var(--radius-regular)'); }, function (props) { return "".concat(props.padding ? props.padding : '20px 10px'); }, function (props) { return "".concat(props.maxFullScreen ? '0' : '50%'); }, function (props) { return (props.maxFullScreen ? '0' : props.initialTop ? props.initialTop : '50%'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : '90vw'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : '90vh'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : 'auto'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : 'inherit'); }, function (_a) {
|
|
14842
14845
|
var width = _a.width;
|
|
14843
14846
|
return width
|
|
14844
|
-
? css(templateObject_5$
|
|
14847
|
+
? css(templateObject_5$r || (templateObject_5$r = __makeTemplateObject(["\n width: ", ";\n "], ["\n width: ", ";\n "])), width) : mediaQueries({
|
|
14845
14848
|
minWidth: ['90%', 'var(--component-modal-minWidth)'],
|
|
14846
14849
|
});
|
|
14847
14850
|
}, visibleStyle, transformStyle);
|
|
@@ -14886,7 +14889,7 @@ var useModal = function (id) {
|
|
|
14886
14889
|
close: close,
|
|
14887
14890
|
}); }, [close, open, opened]);
|
|
14888
14891
|
};
|
|
14889
|
-
var templateObject_1$$, templateObject_2$M, templateObject_3$H, templateObject_4$y, templateObject_5$
|
|
14892
|
+
var templateObject_1$$, templateObject_2$M, templateObject_3$H, templateObject_4$y, templateObject_5$r, templateObject_6$n, templateObject_7$l;
|
|
14890
14893
|
|
|
14891
14894
|
var htmlReactParser = {exports: {}};
|
|
14892
14895
|
|
|
@@ -18768,7 +18771,7 @@ var Container$J = newStyled.div(templateObject_1$Y || (templateObject_1$Y = __ma
|
|
|
18768
18771
|
var Card$1 = newStyled.div(templateObject_2$J || (templateObject_2$J = __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"])));
|
|
18769
18772
|
var Tag$1 = newStyled.div(templateObject_3$G || (templateObject_3$G = __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"])));
|
|
18770
18773
|
var Label$3 = newStyled.div(templateObject_4$x || (templateObject_4$x = __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"])));
|
|
18771
|
-
var Check = newStyled.div(templateObject_5$
|
|
18774
|
+
var Check = newStyled.div(templateObject_5$q || (templateObject_5$q = __makeTemplateObject(["\n position: absolute;\n width: 20px;\n height: 20px;\n background-color: var(--color);\n border-radius: 50%;\n left: 100%;\n top: 50%;\n transform: translate(6px, -50%) scale(0.5);\n opacity: 0;\n transition: opacity 0.3s, transform 0.3s;\n\n &[data-visible='true'] {\n transform: translate(6px, -50%) scale(1);\n opacity: 1;\n }\n"], ["\n position: absolute;\n width: 20px;\n height: 20px;\n background-color: var(--color);\n border-radius: 50%;\n left: 100%;\n top: 50%;\n transform: translate(6px, -50%) scale(0.5);\n opacity: 0;\n transition: opacity 0.3s, transform 0.3s;\n\n &[data-visible='true'] {\n transform: translate(6px, -50%) scale(1);\n opacity: 1;\n }\n"])));
|
|
18772
18775
|
var IconContainer$2 = newStyled.div(templateObject_6$m || (templateObject_6$m = __makeTemplateObject(["\n height: 56px;\n display: flex;\n align-items: center;\n justify-content: center;\n\n [aria-checked='true'] & * {\n fill: var(--color);\n }\n"], ["\n height: 56px;\n display: flex;\n align-items: center;\n justify-content: center;\n\n [aria-checked='true'] & * {\n fill: var(--color);\n }\n"])));
|
|
18773
18776
|
var IconPlaceholder = newStyled.div(templateObject_7$k || (templateObject_7$k = __makeTemplateObject(["\n height: 100%;\n width: 100%;\n background-color: var(--colors-shades-100-color);\n"], ["\n height: 100%;\n width: 100%;\n background-color: var(--colors-shades-100-color);\n"])));
|
|
18774
18777
|
var DiscountContainer = newStyled.div(templateObject_8$e || (templateObject_8$e = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n"], ["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n"])));
|
|
@@ -18801,7 +18804,7 @@ var PackCard = function (_a) {
|
|
|
18801
18804
|
currency: currencyCode || 'USD',
|
|
18802
18805
|
}), ' ', "each"] }), void 0)] }), void 0));
|
|
18803
18806
|
};
|
|
18804
|
-
var templateObject_1$Y, templateObject_2$J, templateObject_3$G, templateObject_4$x, templateObject_5$
|
|
18807
|
+
var templateObject_1$Y, templateObject_2$J, templateObject_3$G, templateObject_4$x, templateObject_5$q, templateObject_6$m, templateObject_7$k, templateObject_8$e;
|
|
18805
18808
|
|
|
18806
18809
|
var Container$I = newStyled.div(templateObject_1$X || (templateObject_1$X = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n user-select: none;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n user-select: none;\n"])));
|
|
18807
18810
|
var IconContainer$1 = newStyled.div(templateObject_2$I || (templateObject_2$I = __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"])));
|
|
@@ -18945,7 +18948,7 @@ var PriceContainer = newStyled.div(templateObject_4$v || (templateObject_4$v = _
|
|
|
18945
18948
|
})
|
|
18946
18949
|
: 'justify-content: end';
|
|
18947
18950
|
});
|
|
18948
|
-
var Quantity = newStyled.div(templateObject_5$
|
|
18951
|
+
var Quantity = newStyled.div(templateObject_5$p || (templateObject_5$p = __makeTemplateObject(["\n position: absolute;\n right: 0;\n top: 0;\n transform: translate(30%, -30%);\n border-radius: 50%;\n width: 1rem;\n height: 1rem;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: var(--colors-shades-300-color);\n color: var(--colors-shades-white-color);\n font-size: 0.75rem;\n font-weight: 600;\n line-height: 24px;\n"], ["\n position: absolute;\n right: 0;\n top: 0;\n transform: translate(30%, -30%);\n border-radius: 50%;\n width: 1rem;\n height: 1rem;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: var(--colors-shades-300-color);\n color: var(--colors-shades-white-color);\n font-size: 0.75rem;\n font-weight: 600;\n line-height: 24px;\n"])));
|
|
18949
18952
|
var StyledSpan = newStyled.span(templateObject_6$l || (templateObject_6$l = __makeTemplateObject(["\n display: block;\n transform: translateY(1px);\n"], ["\n display: block;\n transform: translateY(1px);\n"])));
|
|
18950
18953
|
var Gift = newStyled.span(templateObject_7$j || (templateObject_7$j = __makeTemplateObject(["\n color: ", ";\n font-weight: 600;\n font-size: 14px;\n line-height: 22px;\n"], ["\n color: ", ";\n font-weight: 600;\n font-size: 14px;\n line-height: 22px;\n"])), function (_a) {
|
|
18951
18954
|
var theme = _a.theme;
|
|
@@ -18957,7 +18960,7 @@ var SimpleOrderItem = function (_a) {
|
|
|
18957
18960
|
var theme = useTheme();
|
|
18958
18961
|
return (jsxs$1(Container$G, __assign$1({ className: className }, { children: [jsxs$1(ImageContainer$3, { children: [jsx$1(Image$3, { src: image.src, alt: image.alt, width: "4.063rem", height: "5.375rem", objectFit: "cover", objectPosition: "center" }, void 0), quantity ? (jsx$1(Quantity, __assign$1({ "data-testid": "order-item-quantity" }, { children: jsx$1(StyledSpan, { children: quantity }, void 0) }), void 0)) : null] }, void 0), jsxs$1(DescriptionContainer$1, __assign$1({ "data-testid": "order-item-description-container", theme: theme }, { children: [jsx$1(Title$3, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "product-title" }, { children: title }), void 0), subtitle && (jsx$1(Subtitle, __assign$1({ color: ((_c = (_b = theme.component.pricing) === null || _b === void 0 ? void 0 : _b.subtitle) === null || _c === void 0 ? void 0 : _c.color) || theme.colors.shades['700'].color, fontSize: ((_e = (_d = theme.component.pricing) === null || _d === void 0 ? void 0 : _d.subtitle) === null || _e === void 0 ? void 0 : _e.fontSize) || '0.75rem', lineHeight: ((_g = (_f = theme.component.pricing) === null || _f === void 0 ? void 0 : _f.subtitle) === null || _g === void 0 ? void 0 : _g.lineHeight) || '1rem', fontWeight: ((_j = (_h = theme.component.pricing) === null || _h === void 0 ? void 0 : _h.subtitle) === null || _j === void 0 ? void 0 : _j.fontWeight) || 'normal', "data-testid": "product-variant-title", margin: "0.5rem 0 0 0" }, { children: subtitle }), void 0)), midElement, isGift && jsx$1(Gift, { children: "Limited Time Only" }, void 0), jsxs$1(PriceContainer, __assign$1({ "data-testid": "order-item-price-container", withTag: !!tag, theme: theme }, { children: [tag && (jsx$1(OfferBanner, { discountAppliedText: tag === null || tag === void 0 ? void 0 : tag.text, backgroundColor: tag === null || tag === void 0 ? void 0 : tag.backgroundColor }, void 0)), isGift ? (jsx$1(Gift, { children: "GIFT" }, void 0)) : (jsx$1(PriceLabel$1, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, color: price.color || theme.colors.shades['700'].color, size: theme.component.pricing.priceLabel.price.size, finalPriceStyle: finalPriceStyle, originalPriceStyled: true }, void 0))] }), void 0)] }), void 0)] }), void 0));
|
|
18959
18962
|
};
|
|
18960
|
-
var templateObject_1$V, templateObject_2$H, templateObject_3$E, templateObject_4$v, templateObject_5$
|
|
18963
|
+
var templateObject_1$V, templateObject_2$H, templateObject_3$E, templateObject_4$v, templateObject_5$p, templateObject_6$l, templateObject_7$j;
|
|
18961
18964
|
|
|
18962
18965
|
var P$1 = newStyled.p(function (_a) {
|
|
18963
18966
|
var color = _a.color;
|
|
@@ -19272,7 +19275,7 @@ var Container$B = newStyled.div(templateObject_1$Q || (templateObject_1$Q = __ma
|
|
|
19272
19275
|
var Content$1 = newStyled.div(templateObject_2$D || (templateObject_2$D = __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"])));
|
|
19273
19276
|
var StarsContent = newStyled.div(templateObject_3$A || (templateObject_3$A = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n"], ["\n display: flex;\n justify-content: space-between;\n"])));
|
|
19274
19277
|
var ReviewContainer$1 = newStyled.div(templateObject_4$t || (templateObject_4$t = __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
|
-
var DateText$1 = newStyled.span(templateObject_5$
|
|
19278
|
+
var DateText$1 = newStyled.span(templateObject_5$o || (templateObject_5$o = __makeTemplateObject(["\n font-weight: 400;\n font-size: 14px;\n line-height: 22px;\n"], ["\n font-weight: 400;\n font-size: 14px;\n line-height: 22px;\n"])));
|
|
19276
19279
|
var ReviewerName$1 = newStyled.h1(templateObject_6$k || (templateObject_6$k = __makeTemplateObject(["\n font-weight: 600;\n margin: 0;\n font-size: 18px;\n padding: 20px;\n display: flex;\n"], ["\n font-weight: 600;\n margin: 0;\n font-size: 18px;\n padding: 20px;\n display: flex;\n"])));
|
|
19277
19280
|
var VerifiedText = newStyled.h1(templateObject_7$i || (templateObject_7$i = __makeTemplateObject(["\n font-weight: 600;\n margin: 0;\n font-size: 18px;\n color: #1cc286;\n margin-left: 6px;\n\n @media (min-width: 768px) {\n font-size: 18px;\n }\n"], ["\n font-weight: 600;\n margin: 0;\n font-size: 18px;\n color: #1cc286;\n margin-left: 6px;\n\n @media (min-width: 768px) {\n font-size: 18px;\n }\n"])));
|
|
19278
19281
|
var ReviewTitle$1 = newStyled.h2(templateObject_8$d || (templateObject_8$d = __makeTemplateObject(["\n font-size: 18px;\n line-height: 20px;\n font-weight: 600;\n margin: 0;\n"], ["\n font-size: 18px;\n line-height: 20px;\n font-weight: 600;\n margin: 0;\n"])));
|
|
@@ -19309,7 +19312,7 @@ var Review$1 = function (_a) {
|
|
|
19309
19312
|
return (jsx$1(Modal, __assign$1({ id: modalId, maxFullScreen: maxFullScreen, padding: "0" }, { children: jsxs$1(Container$B, { children: [jsx$1(CloseButton, __assign$1({ onClick: close }, { children: "X" }), void 0), jsx$1(ImageContainer$2, { children: image &&
|
|
19310
19313
|
(!isVideo ? (jsx$1(ImageWrapper$3, { src: image.src, alt: image.alt }, void 0)) : (jsx$1(VideoWrapper, { ref: refVideo, src: image.src, width: "100%", controls: true }, void 0))) }, void 0), jsxs$1(DescriptionContainer, { children: [opened && (jsxs$1(ReviewerName$1, { children: [reviewerName, verified && jsx$1(VerifiedText, { children: "Verified Buyer" }, void 0)] }, void 0)), jsxs$1(Content$1, __assign$1({ "data-testid": "review-detail-content" }, { children: [jsxs$1(StarsContent, { children: [jsx$1(StarList, { starsNumber: 5, rating: rating, fill: stars.color, size: stars.size }, void 0), jsx$1(DateText$1, { children: formatDate(date) }, void 0)] }, void 0), jsxs$1(ReviewContainer$1, { children: [jsx$1(ReviewTitle$1, { children: title }, void 0), jsx$1(ReviewDescription, { dangerouslySetInnerHTML: { __html: description } }, void 0)] }, void 0), jsxs$1(HelpfulContainer, { children: [jsxs$1(HelpfulAction, __assign$1({ "data-testid": "helpful-action", onClick: function () { return (helpfulAction ? helpfulAction(reviewId) : undefined); } }, { children: [jsx$1(Icon.Custom.ThumbsUp, { width: 1, height: 1, fill: "#000" }, void 0), jsx$1(HelpfulCount, { children: helpfulCount }, void 0)] }), void 0), jsxs$1(NotHelpfulAction, __assign$1({ "data-testid": "not-helpful-action", onClick: function () { return (notHelpfulAction ? notHelpfulAction(reviewId) : undefined); } }, { children: [jsx$1(Icon.Custom.ThumbsDown, { width: 1, height: 1, fill: "#000" }, void 0), jsx$1(NotHelpfulCount, { children: notHelpfulCount }, void 0)] }), void 0)] }, void 0)] }), void 0), productImage && productLink && (jsxs$1(ProductContainer, __assign$1({ onClick: function () { return (window.location.href = productLink); } }, { children: [jsx$1(ProductImageWrapper, { children: jsx$1(ProductImage, { src: productImage, alt: "productImage" }, void 0) }, void 0), jsx$1(ProductTitle, { children: productTitle }, void 0)] }), void 0))] }, void 0)] }, void 0) }), void 0));
|
|
19311
19314
|
};
|
|
19312
|
-
var templateObject_1$Q, templateObject_2$D, templateObject_3$A, templateObject_4$t, templateObject_5$
|
|
19315
|
+
var templateObject_1$Q, templateObject_2$D, templateObject_3$A, templateObject_4$t, templateObject_5$o, templateObject_6$k, templateObject_7$i, templateObject_8$d, templateObject_9$9, templateObject_10$8, templateObject_11$5, templateObject_12$2, templateObject_13$2, templateObject_14$2, templateObject_15$1, templateObject_16$1, templateObject_17$1, templateObject_18$1, templateObject_19$1, templateObject_20, templateObject_21, templateObject_22, templateObject_23;
|
|
19313
19316
|
|
|
19314
19317
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_DESKTOP = 500;
|
|
19315
19318
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_MOBILE = 168;
|
|
@@ -19317,7 +19320,7 @@ var Container$A = newStyled.div(templateObject_1$P || (templateObject_1$P = __ma
|
|
|
19317
19320
|
var Heading = newStyled.div(templateObject_2$C || (templateObject_2$C = __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"])));
|
|
19318
19321
|
var Content = 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"])));
|
|
19319
19322
|
var ReviewContainer = newStyled.div(templateObject_4$s || (templateObject_4$s = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
19320
|
-
var DateText = newStyled.span(templateObject_5$
|
|
19323
|
+
var DateText = newStyled.span(templateObject_5$n || (templateObject_5$n = __makeTemplateObject(["\n font-weight: 400;\n font-size: 12px;\n line-height: 16px;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"], ["\n font-weight: 400;\n font-size: 12px;\n line-height: 16px;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"])));
|
|
19321
19324
|
var VariantText = newStyled.div(templateObject_6$j || (templateObject_6$j = __makeTemplateObject(["\n font-weight: 400;\n font-size: 14px;\n line-height: 22px;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"], ["\n font-weight: 400;\n font-size: 14px;\n line-height: 22px;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"])));
|
|
19322
19325
|
var ReviewerName = newStyled.h2(templateObject_7$h || (templateObject_7$h = __makeTemplateObject(["\n font-weight: 600;\n margin: 0;\n font-size: 14px;\n line-height: 22px;\n\n @media (min-width: 768px) {\n font-size: 18px;\n line-height: 28px;\n }\n"], ["\n font-weight: 600;\n margin: 0;\n font-size: 14px;\n line-height: 22px;\n\n @media (min-width: 768px) {\n font-size: 18px;\n line-height: 28px;\n }\n"])));
|
|
19323
19326
|
var ReviewTitle = newStyled.h3(templateObject_8$c || (templateObject_8$c = __makeTemplateObject(["\n font-size: 14px;\n line-height: 22px;\n margin: 10px 0 8px;\n font-weight: 600;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"], ["\n font-size: 14px;\n line-height: 22px;\n margin: 10px 0 8px;\n font-weight: 600;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"])));
|
|
@@ -19365,13 +19368,13 @@ var Review = function (_a) {
|
|
|
19365
19368
|
: description,
|
|
19366
19369
|
} }, void 0), jsxs$1(HelpfulContainerDesktop, __assign$1({ showMoreDesktop: description.length > REVIEWS_DESCRIPTION_MAX_LENGTH_DESKTOP }, { children: [helpfulActionText && helpfulAction && (jsx$1(ButtonSecondaryWrapper, { onClick: function () { return helpfulAction(reviewId); }, text: helpfulActionText, size: ComponentSize.Small }, void 0)), (helpfulCount || (hasTextWhenHelpfulCount0 && helpfulCount === 0)) && (jsxs$1(HelpfulText, { children: [helpfulCount, " people found this helpful"] }, void 0))] }), void 0)] }, void 0), jsxs$1(ImagesContainer, { children: [jsxs$1(Images, { children: [images === null || images === void 0 ? void 0 : images.map(function (image) { return (jsx$1(ImageWrapper$2, __assign$1({ onClick: function () { return onClickImage && onClickImage(image.src); } }, { children: jsx$1(Image$3, { src: image.src, alt: image.alt, height: "10rem", width: "7.5rem" }, void 0) }), image.src)); }), !images || (images.length === 0 && jsx$1(ImageSpace, {}, void 0))] }, void 0), jsx$1(VariantText, { children: reviewVariant }, void 0)] }, void 0)] }), void 0), jsx$1(HelpfulTexti, {}, void 0), jsxs$1(HelpfulContainerMobile, { children: [helpfulActionText && helpfulAction && (jsx$1(ButtonSecondaryWrapper, { onClick: function () { return helpfulAction(reviewId); }, text: helpfulActionText, size: ComponentSize.Small }, void 0)), (helpfulCount || (hasTextWhenHelpfulCount0 && helpfulCount === 0)) && (jsxs$1(HelpfulText, { children: [helpfulCount, " people found this helpful"] }, void 0))] }, void 0)] }, void 0));
|
|
19367
19370
|
};
|
|
19368
|
-
var templateObject_1$P, templateObject_2$C, templateObject_3$z, templateObject_4$s, templateObject_5$
|
|
19371
|
+
var templateObject_1$P, templateObject_2$C, templateObject_3$z, templateObject_4$s, templateObject_5$n, templateObject_6$j, templateObject_7$h, templateObject_8$c, templateObject_9$8, templateObject_10$7, templateObject_11$4, templateObject_12$1, templateObject_13$1, templateObject_14$1, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19;
|
|
19369
19372
|
|
|
19370
19373
|
var Container$z = newStyled.div(templateObject_1$O || (templateObject_1$O = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: auto;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: auto;\n"])));
|
|
19371
19374
|
var ReviewsContainer = newStyled.div(templateObject_2$B || (templateObject_2$B = __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"])));
|
|
19372
19375
|
var ReviewsCount = newStyled.div(templateObject_3$y || (templateObject_3$y = __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"])));
|
|
19373
19376
|
var ReviewsStars = newStyled.div(templateObject_4$r || (templateObject_4$r = __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"])));
|
|
19374
|
-
var ReviewsTextCount = newStyled(Text$7)(templateObject_5$
|
|
19377
|
+
var ReviewsTextCount = newStyled(Text$7)(templateObject_5$m || (templateObject_5$m = __makeTemplateObject(["\n margin-right: 5px;\n padding-top: 6px;\n line-height: 32px;\n\n @media (min-width: 768px) {\n font-size: 42px;\n line-height: 46px;\n }\n"], ["\n margin-right: 5px;\n padding-top: 6px;\n line-height: 32px;\n\n @media (min-width: 768px) {\n font-size: 42px;\n line-height: 46px;\n }\n"])));
|
|
19375
19378
|
var ReviewsImages = newStyled.div(templateObject_6$i || (templateObject_6$i = __makeTemplateObject(["\n display: flex;\n flex-wrap: wrap;\n max-width: 348px;\n gap: 4px;\n justify-content: center;\n\n @media (min-width: 768px) {\n gap: 8px;\n max-width: 360px;\n }\n"], ["\n display: flex;\n flex-wrap: wrap;\n max-width: 348px;\n gap: 4px;\n justify-content: center;\n\n @media (min-width: 768px) {\n gap: 8px;\n max-width: 360px;\n }\n"])));
|
|
19376
19379
|
var SummaryItem = newStyled.div(templateObject_7$g || (templateObject_7$g = __makeTemplateObject(["\n width: 84px;\n height: 68px;\n background: ", ";\n background-repeat: no-repeat;\n background-size: cover;\n background-position: center;\n cursor: zoom-in;\n"], ["\n width: 84px;\n height: 68px;\n background: ", ";\n background-repeat: no-repeat;\n background-size: cover;\n background-position: center;\n cursor: zoom-in;\n"])), function (_a) {
|
|
19377
19380
|
var backgroundUrl = _a.backgroundUrl;
|
|
@@ -19383,7 +19386,7 @@ var ReviewsHeader = function (_a) {
|
|
|
19383
19386
|
var theme = useTheme();
|
|
19384
19387
|
return (jsxs$1(Container$z, { children: [jsx$1(Text$7, __assign$1({ variant: "heading3", weight: "bold", style: { margin: '10px 0' } }, { children: title }), void 0), jsxs$1(ReviewsContainer, { children: [jsxs$1(ReviewsCount, { children: [jsxs$1(ReviewsStars, { children: [jsx$1(ReviewsTextCount, __assign$1({ variant: "heading3", weight: "bold" }, { children: rating }), void 0), jsx$1(StarList, { rating: rating, size: ComponentSize.Medium, starsNumber: starsNumber, fill: theme.component.stars.element.color }, void 0)] }, void 0), jsxs$1(Text$7, __assign$1({ variant: "body", size: "small", weight: "regular", style: { marginBottom: '20px' } }, { children: [reviews, " ", reviewsText] }), void 0)] }, void 0), jsx$1(ReviewsImages, { children: reviewsSummary.map(function (summaryItem) { return (jsx$1(SummaryItem, { onClick: function () { return onClickReview(summaryItem); }, backgroundUrl: summaryItem, "data-testid": "summary-review-item" }, summaryItem)); }) }, void 0)] }, void 0)] }, void 0));
|
|
19385
19388
|
};
|
|
19386
|
-
var templateObject_1$O, templateObject_2$B, templateObject_3$y, templateObject_4$r, templateObject_5$
|
|
19389
|
+
var templateObject_1$O, templateObject_2$B, templateObject_3$y, templateObject_4$r, templateObject_5$m, templateObject_6$i, templateObject_7$g;
|
|
19387
19390
|
|
|
19388
19391
|
var Container$y = newStyled.div(templateObject_1$N || (templateObject_1$N = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n cursor: pointer;\n user-select: none;\n"], ["\n display: inline-flex;\n align-items: center;\n cursor: pointer;\n user-select: none;\n"])));
|
|
19389
19392
|
var Text$1 = newStyled.p(templateObject_2$A || (templateObject_2$A = __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; });
|
|
@@ -19601,8 +19604,8 @@ var Container$t = newStyled.div(templateObject_1$I || (templateObject_1$I = __ma
|
|
|
19601
19604
|
var BackArrow = newStyled.div(templateObject_2$y || (templateObject_2$y = __makeTemplateObject(["\n transform: rotate(180deg);\n margin-right: 0.5rem;\n"], ["\n transform: rotate(180deg);\n margin-right: 0.5rem;\n"])));
|
|
19602
19605
|
var BoldSpan = newStyled.span(templateObject_3$w || (templateObject_3$w = __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"])));
|
|
19603
19606
|
var NormalSpan = newStyled.span(templateObject_4$q || (templateObject_4$q = __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"])));
|
|
19604
|
-
var SearchNavigationParents = newStyled.div(templateObject_5$
|
|
19605
|
-
var templateObject_1$I, templateObject_2$y, templateObject_3$w, templateObject_4$q, templateObject_5$
|
|
19607
|
+
var SearchNavigationParents = newStyled.div(templateObject_5$l || (templateObject_5$l = __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"])));
|
|
19608
|
+
var templateObject_1$I, templateObject_2$y, templateObject_3$w, templateObject_4$q, templateObject_5$l;
|
|
19606
19609
|
|
|
19607
19610
|
var SearchNavigation = function (_a) {
|
|
19608
19611
|
var returnText = _a.returnText, returnUrl = _a.returnUrl, _b = _a.steps, steps = _b === void 0 ? [] : _b, returnAction = _a.returnAction;
|
|
@@ -19634,13 +19637,13 @@ var TableElement$3 = newStyled.table(templateObject_1$G || (templateObject_1$G =
|
|
|
19634
19637
|
var TableCell$3 = newStyled.td(templateObject_2$w || (templateObject_2$w = __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; });
|
|
19635
19638
|
var TableHead$3 = newStyled.th(templateObject_3$u || (templateObject_3$u = __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; });
|
|
19636
19639
|
var Label$2 = newStyled('div')(templateObject_4$p || (templateObject_4$p = __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"])));
|
|
19637
|
-
var TopLabel$1 = newStyled(Label$2)(templateObject_5$
|
|
19640
|
+
var TopLabel$1 = newStyled(Label$2)(templateObject_5$k || (templateObject_5$k = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
19638
19641
|
var LeftLabel$1 = newStyled(Label$2)(templateObject_6$h || (templateObject_6$h = __makeTemplateObject(["\n width: 20px;\n transform: rotate(270deg);\n"], ["\n width: 20px;\n transform: rotate(270deg);\n"])));
|
|
19639
19642
|
var Container$r = newStyled('div')(templateObject_7$f || (templateObject_7$f = __makeTemplateObject(["\n gap: 5px;\n display: flex;\n width: fit-content;\n align-items: center;\n"], ["\n gap: 5px;\n display: flex;\n width: fit-content;\n align-items: center;\n"])));
|
|
19640
19643
|
var LabelText$1 = newStyled('span')(templateObject_8$b || (templateObject_8$b = __makeTemplateObject(["\n display: flex;\n min-width: 70px;\n justify-content: center;\n"], ["\n display: flex;\n min-width: 70px;\n justify-content: center;\n"])));
|
|
19641
19644
|
var Column$2 = newStyled('div')(templateObject_9$7 || (templateObject_9$7 = __makeTemplateObject(["\n display: flex;\n min-width: 675px;\n align-items: center;\n flex-direction: column;\n\n @media (max-width: 768px) {\n min-width: 100%;\n }\n"], ["\n display: flex;\n min-width: 675px;\n align-items: center;\n flex-direction: column;\n\n @media (max-width: 768px) {\n min-width: 100%;\n }\n"])));
|
|
19642
19645
|
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; });
|
|
19643
|
-
var templateObject_1$G, templateObject_2$w, templateObject_3$u, templateObject_4$p, templateObject_5$
|
|
19646
|
+
var templateObject_1$G, templateObject_2$w, templateObject_3$u, templateObject_4$p, templateObject_5$k, templateObject_6$h, templateObject_7$f, templateObject_8$b, templateObject_9$7, templateObject_10$6;
|
|
19644
19647
|
|
|
19645
19648
|
var getIsOdd$2 = function (number) { return number % 2 !== 0; };
|
|
19646
19649
|
var getCellColor$2 = function (index, cell) {
|
|
@@ -20011,12 +20014,12 @@ var ToastContent = newStyled.div(templateObject_4$l || (templateObject_4$l = __m
|
|
|
20011
20014
|
var distanceFromTop = _a.distanceFromTop;
|
|
20012
20015
|
return mobileSlideInAnimation(distanceFromTop);
|
|
20013
20016
|
});
|
|
20014
|
-
var ToastText = newStyled.p(templateObject_5$
|
|
20017
|
+
var ToastText = newStyled.p(templateObject_5$j || (templateObject_5$j = __makeTemplateObject(["\n font-size: 14px;\n font-weight: 500;\n line-height: 24px;\n margin: 0;\n color: ", ";\n\n @media (max-width: 768px) {\n font-size: 14px;\n font-style: normal;\n font-weight: 500;\n }\n"], ["\n font-size: 14px;\n font-weight: 500;\n line-height: 24px;\n margin: 0;\n color: ", ";\n\n @media (max-width: 768px) {\n font-size: 14px;\n font-style: normal;\n font-weight: 500;\n }\n"])), function (_a) {
|
|
20015
20018
|
var severity = _a.severity;
|
|
20016
20019
|
return (severity === 'error' ? '#C64844' : '#292929');
|
|
20017
20020
|
});
|
|
20018
20021
|
var CloseIcon = newStyled.div(templateObject_6$g || (templateObject_6$g = __makeTemplateObject(["\n margin-inline-start: auto;\n cursor: pointer;\n"], ["\n margin-inline-start: auto;\n cursor: pointer;\n"])));
|
|
20019
|
-
var templateObject_1$w, templateObject_2$p, templateObject_3$o, templateObject_4$l, templateObject_5$
|
|
20022
|
+
var templateObject_1$w, templateObject_2$p, templateObject_3$o, templateObject_4$l, templateObject_5$j, templateObject_6$g;
|
|
20020
20023
|
|
|
20021
20024
|
var Toast = React__default.forwardRef(function (_a, ref) {
|
|
20022
20025
|
var _b;
|
|
@@ -20057,7 +20060,7 @@ var Container$m = newStyled.div(templateObject_4$k || (templateObject_4$k = __ma
|
|
|
20057
20060
|
var highlightColor = _a.highlightColor;
|
|
20058
20061
|
return highlightColor;
|
|
20059
20062
|
});
|
|
20060
|
-
var TotalContainer = newStyled(Container$m)(templateObject_5$
|
|
20063
|
+
var TotalContainer = newStyled(Container$m)(templateObject_5$i || (templateObject_5$i = __makeTemplateObject(["\n justify-content: ", ";\n margin-top: 0;\n"], ["\n justify-content: ", ";\n margin-top: 0;\n"])), function (_a) {
|
|
20061
20064
|
var showTotalLabel = _a.showTotalLabel;
|
|
20062
20065
|
return (showTotalLabel ? 'space-between' : 'flex-end');
|
|
20063
20066
|
});
|
|
@@ -20067,7 +20070,7 @@ var DiscountAmount = newStyled.h3(templateObject_7$e || (templateObject_7$e = __
|
|
|
20067
20070
|
return theme.component.total.basicTotal.savings.amountFontWeight;
|
|
20068
20071
|
});
|
|
20069
20072
|
var TotalLabel = newStyled(Text$7)(templateObject_8$a || (templateObject_8$a = __makeTemplateObject(["\n font-size: 20px;\n"], ["\n font-size: 20px;\n"])));
|
|
20070
|
-
var templateObject_1$v, templateObject_2$o, templateObject_3$n, templateObject_4$k, templateObject_5$
|
|
20073
|
+
var templateObject_1$v, templateObject_2$o, templateObject_3$n, templateObject_4$k, templateObject_5$i, templateObject_6$f, templateObject_7$e, templateObject_8$a;
|
|
20071
20074
|
|
|
20072
20075
|
var Total = function (_a) {
|
|
20073
20076
|
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;
|
|
@@ -20111,7 +20114,7 @@ var Container$l = newStyled.div(templateObject_1$t || (templateObject_1$t = __ma
|
|
|
20111
20114
|
var CheckpointContainer$1 = newStyled.div(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
20112
20115
|
var CheckpointDate$1 = newStyled.div(templateObject_3$l || (templateObject_3$l = __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; });
|
|
20113
20116
|
var CheckpointDateLabel$1 = newStyled.p(templateObject_4$i || (templateObject_4$i = __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'); });
|
|
20114
|
-
var CheckpointDateAndDayLabel = newStyled.span(templateObject_5$
|
|
20117
|
+
var CheckpointDateAndDayLabel = newStyled.span(templateObject_5$h || (templateObject_5$h = __makeTemplateObject(["\n font-size: 14px;\n weight: 400;\n color: #949494;\n text-align: start;\n margin-bottom: 42px;\n"], ["\n font-size: 14px;\n weight: 400;\n color: #949494;\n text-align: start;\n margin-bottom: 42px;\n"])));
|
|
20115
20118
|
var CheckpointStatus$1 = newStyled.p(templateObject_6$e || (templateObject_6$e = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n transform: translate(0, 22px);\n margin: 0;\n margin-left: 9px;\n color: ", ";\n font-weight: ", ";\n"], ["\n display: flex;\n flex-direction: column;\n transform: translate(0, 22px);\n margin: 0;\n margin-left: 9px;\n color: ", ";\n font-weight: ", ";\n"])), function (props) {
|
|
20116
20119
|
return props.finishedTrack
|
|
20117
20120
|
? props.finishedTrackColor
|
|
@@ -20159,13 +20162,13 @@ var TrackingProgressV2 = function (_a) {
|
|
|
20159
20162
|
return (jsxs$1(CheckpointContainer$1, __assign$1({ "data-testid": "empty-checkpoint-track" }, { children: [jsxs$1(CheckpointDate$1, __assign$1({ currentSpace: "90px" }, { children: [jsx$1(CheckpointDateLabel$1, { lastElement: index + 1 === emptySpaces.length }, void 0), jsx$1(CheckpointDateLabel$1, { lastElement: index + 1 === emptySpaces.length }, void 0)] }), void 0), index + 1 !== emptySpaces.length && (jsx$1(ActiveCheckpointTrack$1, __assign$1({ trackColor: theme.colors.shades['200'].color }, { children: jsx$1(ActiveCheckpointDot$1, { firstElement: false }, void 0) }), void 0)), index + 1 === emptySpaces.length && (jsx$1(LastActiveCheckpointDot, __assign$1({ trackColor: theme.colors.shades['200'].color }, { children: jsx$1(ActiveCheckpointDot$1, { firstElement: false }, void 0) }), void 0)), jsx$1(CheckpointStatus$1, __assign$1({ finishedTrack: false }, { children: statusMessage }), void 0)] }), index));
|
|
20160
20163
|
})] }), void 0));
|
|
20161
20164
|
};
|
|
20162
|
-
var templateObject_1$t, templateObject_2$m, templateObject_3$l, templateObject_4$i, templateObject_5$
|
|
20165
|
+
var templateObject_1$t, templateObject_2$m, templateObject_3$l, templateObject_4$i, templateObject_5$h, templateObject_6$e, templateObject_7$d, templateObject_8$9, templateObject_9$6, templateObject_10$5, templateObject_11$3;
|
|
20163
20166
|
|
|
20164
20167
|
var Container$k = newStyled.div(templateObject_1$s || (templateObject_1$s = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
20165
20168
|
var CheckpointContainer = newStyled.div(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
20166
20169
|
var CheckpointDate = 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; });
|
|
20167
20170
|
var CheckpointDateLabel = 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'); });
|
|
20168
|
-
var CheckpointStatus = newStyled.p(templateObject_5$
|
|
20171
|
+
var CheckpointStatus = newStyled.p(templateObject_5$g || (templateObject_5$g = __makeTemplateObject(["\n font-size: 14px;\n line-height: 22px;\n transform: translate(0, 22px);\n margin: 0;\n margin-left: 9px;\n color: ", ";\n font-weight: ", ";\n text-align: left;\n"], ["\n font-size: 14px;\n line-height: 22px;\n transform: translate(0, 22px);\n margin: 0;\n margin-left: 9px;\n color: ", ";\n font-weight: ", ";\n text-align: left;\n"])), function (props) { return (props.finishedTrack ? props.finishedTrackColor : ''); }, function (props) { return (props.finishedTrack ? '600' : '400'); });
|
|
20169
20172
|
var ActiveCheckpointTrack = newStyled.div(templateObject_6$d || (templateObject_6$d = __makeTemplateObject(["\n width: 13px;\n min-width: 13px;\n background-color: ", ";\n transform: ", ";\n position: relative;\n border-radius: ", ";\n margin-top: -1px;\n padding-bottom: ", ";\n margin-bottom: ", ";\n"], ["\n width: 13px;\n min-width: 13px;\n background-color: ", ";\n transform: ", ";\n position: relative;\n border-radius: ", ";\n margin-top: -1px;\n padding-bottom: ", ";\n margin-bottom: ", ";\n"])), function (props) { return props.trackColor; }, function (props) { return (props.firstElement ? 'translate(0, 22px)' : 'translate(0, 33px)'); }, function (props) {
|
|
20170
20173
|
return props.firstElement ? '8px 8px 0 0' : props.lastElement ? '0 0 8px 8px' : '';
|
|
20171
20174
|
}, function (props) { return (props.firstElement ? '20px' : '0'); }, function (props) { return (props.firstElement ? '-20px' : '0'); });
|
|
@@ -20199,7 +20202,7 @@ var TrackingProgress = function (_a) {
|
|
|
20199
20202
|
return (jsxs$1(CheckpointContainer, __assign$1({ "data-testid": "empty-checkpoint-track" }, { children: [jsxs$1(CheckpointDate, __assign$1({ currentSpace: getCurrentSpace(index) }, { children: [jsx$1(CheckpointDateLabel, { lastElement: index + 1 === emptySpaces.length }, void 0), jsx$1(CheckpointDateLabel, { lastElement: index + 1 === emptySpaces.length }, void 0)] }), void 0), index + 1 !== emptySpaces.length && (jsx$1(ActiveCheckpointTrack, { trackColor: theme.colors.shades['200'].color, firstElement: false, lastElement: index + 2 === emptySpaces.length }, void 0)), jsx$1(CheckpointStatus, { finishedTrack: false }, void 0)] }), index));
|
|
20200
20203
|
})] }), void 0));
|
|
20201
20204
|
};
|
|
20202
|
-
var templateObject_1$s, templateObject_2$l, templateObject_3$k, templateObject_4$h, templateObject_5$
|
|
20205
|
+
var templateObject_1$s, templateObject_2$l, templateObject_3$k, templateObject_4$h, templateObject_5$g, templateObject_6$d, templateObject_7$c, templateObject_8$8;
|
|
20203
20206
|
|
|
20204
20207
|
var AutoShipCardContainerWrapper$1 = newStyled.div(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 1rem;\n border: ", "\n border-radius: 8px;\n padding: 10px;\n"], ["\n display: flex;\n flex-direction: column;\n gap: 1rem;\n border: ", "\n border-radius: 8px;\n padding: 10px;\n"])), function (_a) {
|
|
20205
20208
|
var checked = _a.checked;
|
|
@@ -20208,10 +20211,10 @@ var AutoShipCardContainerWrapper$1 = newStyled.div(templateObject_1$r || (templa
|
|
|
20208
20211
|
var AutoShipHeaderBarWrapper$1 = newStyled.div(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n gap: 10px;\n align-items: center;\n"], ["\n display: flex;\n flex-direction: row;\n gap: 10px;\n align-items: center;\n"])));
|
|
20209
20212
|
var AutoShipBodyWrapper$1 = newStyled.div(templateObject_3$j || (templateObject_3$j = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n border-radius: 8px;\n background-color: #f7f7f7;\n"], ["\n display: flex;\n flex-direction: column;\n border-radius: 8px;\n background-color: #f7f7f7;\n"])));
|
|
20210
20213
|
var AutoShipBodyTitle$1 = newStyled.div(templateObject_4$g || (templateObject_4$g = __makeTemplateObject(["\n font-size: 14px;\n font-weight: 600;\n line-height: 22px;\n text-align: left;\n width: Fill (311px) px;\n height: Hug (34px) px;\n padding: 6px 10px 6px 10px;\n gap: 4px;\n opacity: 0px;\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n"], ["\n font-size: 14px;\n font-weight: 600;\n line-height: 22px;\n text-align: left;\n width: Fill (311px) px;\n height: Hug (34px) px;\n padding: 6px 10px 6px 10px;\n gap: 4px;\n opacity: 0px;\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n"])));
|
|
20211
|
-
var AutoShipBodyListItem$1 = newStyled.div(templateObject_5$
|
|
20214
|
+
var AutoShipBodyListItem$1 = newStyled.div(templateObject_5$f || (templateObject_5$f = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n gap: 10px;\n"], ["\n display: flex;\n flex-direction: row;\n gap: 10px;\n"])));
|
|
20212
20215
|
var AutoShipBodyListWrapper$1 = 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
20216
|
var CheckboxInput = 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
|
-
var templateObject_1$r, templateObject_2$k, templateObject_3$j, templateObject_4$g, templateObject_5$
|
|
20217
|
+
var templateObject_1$r, templateObject_2$k, templateObject_3$j, templateObject_4$g, templateObject_5$f, templateObject_6$c, templateObject_7$b;
|
|
20215
20218
|
|
|
20216
20219
|
function AutoshipOfferCard(_a) {
|
|
20217
20220
|
var showMore = _a.showMore, copyList = _a.copyList, copy = _a.copy, handleCheckBoxChange = _a.handleCheckBoxChange, _b = _a.isChecked, isChecked = _b === void 0 ? false : _b;
|
|
@@ -20242,11 +20245,11 @@ var AutoShipCardContainerWrapper = newStyled.div(templateObject_1$q || (template
|
|
|
20242
20245
|
var AutoShipHeaderBarWrapper = newStyled.div(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n gap: 10px;\n align-items: center;\n justify-content: space-between;\n"], ["\n display: flex;\n flex-direction: row;\n gap: 10px;\n align-items: center;\n justify-content: space-between;\n"])));
|
|
20243
20246
|
var AutoShipBodyWrapper = newStyled.div(templateObject_3$i || (templateObject_3$i = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n border-radius: 8px;\n background-color: #f7f7f7;\n"], ["\n display: flex;\n flex-direction: column;\n border-radius: 8px;\n background-color: #f7f7f7;\n"])));
|
|
20244
20247
|
var AutoShipBodyTitle = newStyled.div(templateObject_4$f || (templateObject_4$f = __makeTemplateObject(["\n font-size: 14px;\n font-weight: 600;\n line-height: 22px;\n text-align: left;\n width: Fill (311px) px;\n height: Hug (34px) px;\n padding: 6px 10px 6px 10px;\n gap: 4px;\n opacity: 0px;\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n"], ["\n font-size: 14px;\n font-weight: 600;\n line-height: 22px;\n text-align: left;\n width: Fill (311px) px;\n height: Hug (34px) px;\n padding: 6px 10px 6px 10px;\n gap: 4px;\n opacity: 0px;\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n"])));
|
|
20245
|
-
var AutoShipBodyListItem = newStyled.div(templateObject_5$
|
|
20248
|
+
var AutoShipBodyListItem = 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"])));
|
|
20246
20249
|
var AutoShipBodyListWrapper = newStyled.div(templateObject_6$b || (templateObject_6$b = __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"])));
|
|
20247
20250
|
newStyled.input(templateObject_7$a || (templateObject_7$a = __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"])));
|
|
20248
20251
|
var ButtonRemoveWrapper = newStyled.div(templateObject_8$7 || (templateObject_8$7 = __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"])));
|
|
20249
|
-
var templateObject_1$q, templateObject_2$j, templateObject_3$i, templateObject_4$f, templateObject_5$
|
|
20252
|
+
var templateObject_1$q, templateObject_2$j, templateObject_3$i, templateObject_4$f, templateObject_5$e, templateObject_6$b, templateObject_7$a, templateObject_8$7;
|
|
20250
20253
|
|
|
20251
20254
|
function AutoshipOfferCardCta(_a) {
|
|
20252
20255
|
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;
|
|
@@ -20339,10 +20342,10 @@ var ContainerWrapper$1 = newStyled.div(templateObject_1$o || (templateObject_1$o
|
|
|
20339
20342
|
var ImageWrapper = newStyled.div(templateObject_2$h || (templateObject_2$h = __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"])));
|
|
20340
20343
|
var ImageComponent = newStyled(Image$3)(templateObject_3$h || (templateObject_3$h = __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"])));
|
|
20341
20344
|
var RightComponentWrapper = newStyled.div(templateObject_4$e || (templateObject_4$e = __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"])));
|
|
20342
|
-
var TitleWrapper = newStyled.div(templateObject_5$
|
|
20345
|
+
var TitleWrapper = newStyled.div(templateObject_5$d || (templateObject_5$d = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n"], ["\n display: flex;\n flex-direction: row;\n"])));
|
|
20343
20346
|
var SubTitleWrapper = newStyled.div(templateObject_6$a || (templateObject_6$a = __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"])));
|
|
20344
20347
|
var ButtonsWrapper = newStyled.div(templateObject_7$9 || (templateObject_7$9 = __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"])));
|
|
20345
|
-
var templateObject_1$o, templateObject_2$h, templateObject_3$h, templateObject_4$e, templateObject_5$
|
|
20348
|
+
var templateObject_1$o, templateObject_2$h, templateObject_3$h, templateObject_4$e, templateObject_5$d, templateObject_6$a, templateObject_7$9;
|
|
20346
20349
|
|
|
20347
20350
|
function CartItemCard(_a) {
|
|
20348
20351
|
var style = _a.style, className = _a.className, children = _a.children;
|
|
@@ -20406,7 +20409,7 @@ var SinglePurchaseContainer$1 = newStyled(ContainerBase$1)(templateObject_4$d ||
|
|
|
20406
20409
|
var onClick = _a.onClick;
|
|
20407
20410
|
return (onClick ? 'cursor: pointer;' : '');
|
|
20408
20411
|
});
|
|
20409
|
-
var SubscriptionContainer$1 = newStyled(ContainerBase$1)(templateObject_5$
|
|
20412
|
+
var SubscriptionContainer$1 = newStyled(ContainerBase$1)(templateObject_5$c || (templateObject_5$c = __makeTemplateObject(["\n padding: 16px;\n margin-bottom: 8px;\n position: relative;\n"], ["\n padding: 16px;\n margin-bottom: 8px;\n position: relative;\n"])));
|
|
20410
20413
|
var SubscriptionHeader$1 = newStyled.div(templateObject_6$9 || (templateObject_6$9 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n border-bottom: ", ";\n padding-bottom: ", ";\n margin-bottom: ", ";\n cursor: pointer;\n\n & input:checked + div {\n border-color: ", ";\n }\n"], ["\n display: flex;\n justify-content: space-between;\n border-bottom: ", ";\n padding-bottom: ", ";\n margin-bottom: ", ";\n cursor: pointer;\n\n & input:checked + div {\n border-color: ", ";\n }\n"])), function (_a) {
|
|
20411
20414
|
var isSelected = _a.isSelected;
|
|
20412
20415
|
return (isSelected ? "1px solid ".concat(Shades200Color) : "none");
|
|
@@ -20431,7 +20434,7 @@ var StyledPrice$1 = newStyled(PriceLabelV2$1)(templateObject_10$4 || (templateOb
|
|
|
20431
20434
|
: Shades200Color;
|
|
20432
20435
|
});
|
|
20433
20436
|
var Container$j = newStyled.div(templateObject_11$2 || (templateObject_11$2 = __makeTemplateObject(["\n margin-top: 20px;\n"], ["\n margin-top: 20px;\n"])));
|
|
20434
|
-
var templateObject_1$n, templateObject_2$g, templateObject_3$g, templateObject_4$d, templateObject_5$
|
|
20437
|
+
var templateObject_1$n, templateObject_2$g, templateObject_3$g, templateObject_4$d, templateObject_5$c, templateObject_6$9, templateObject_7$8, templateObject_8$6, templateObject_9$5, templateObject_10$4, templateObject_11$2;
|
|
20435
20438
|
|
|
20436
20439
|
var ClubOfferSelector = function (_a) {
|
|
20437
20440
|
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;
|
|
@@ -20487,8 +20490,8 @@ var ContainerWrapper = newStyled.div(templateObject_1$m || (templateObject_1$m =
|
|
|
20487
20490
|
var CardHeaderWrapper = newStyled.div(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n"], ["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n"])));
|
|
20488
20491
|
var CardBody = newStyled.div(templateObject_3$f || (templateObject_3$f = __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"])));
|
|
20489
20492
|
var ClubCopyWrapper = newStyled.div(templateObject_4$c || (templateObject_4$c = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n gap: 5px;\n"], ["\n display: flex;\n flex-direction: row;\n gap: 5px;\n"])));
|
|
20490
|
-
var ClubCopyTextWrapper = newStyled.div(templateObject_5$
|
|
20491
|
-
var templateObject_1$m, templateObject_2$f, templateObject_3$f, templateObject_4$c, templateObject_5$
|
|
20493
|
+
var ClubCopyTextWrapper = newStyled.div(templateObject_5$b || (templateObject_5$b = __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"])));
|
|
20494
|
+
var templateObject_1$m, templateObject_2$f, templateObject_3$f, templateObject_4$c, templateObject_5$b;
|
|
20492
20495
|
|
|
20493
20496
|
function Card(_a) {
|
|
20494
20497
|
var children = _a.children, link = _a.link, icon = _a.icon, _b = _a.isChecked, isChecked = _b === void 0 ? false : _b, bodyCopy = _a.bodyCopy, titleCopy = _a.titleCopy, style = _a.style, _c = _a.termsText, termsText = _c === void 0 ? 'Terms here.' : _c;
|
|
@@ -20523,8 +20526,8 @@ var Benefits = newStyled.div(templateObject_4$b || (templateObject_4$b = __makeT
|
|
|
20523
20526
|
var theme = _a.theme, backgroundColor = _a.backgroundColor;
|
|
20524
20527
|
return backgroundColor !== null && backgroundColor !== void 0 ? backgroundColor : theme.colors.shades['10'].color;
|
|
20525
20528
|
});
|
|
20526
|
-
var Actions = newStyled.div(templateObject_5$
|
|
20527
|
-
var templateObject_1$k, templateObject_2$e, templateObject_3$e, templateObject_4$b, templateObject_5$
|
|
20529
|
+
var Actions = newStyled.div(templateObject_5$a || (templateObject_5$a = __makeTemplateObject(["\n display: flex;\n width: 100%;\n gap: 8px;\n"], ["\n display: flex;\n width: 100%;\n gap: 8px;\n"])));
|
|
20530
|
+
var templateObject_1$k, templateObject_2$e, templateObject_3$e, templateObject_4$b, templateObject_5$a;
|
|
20528
20531
|
|
|
20529
20532
|
var getTitleProps = function (_a) {
|
|
20530
20533
|
var titleContent = _a.content, bold = _a.bold;
|
|
@@ -20583,9 +20586,10 @@ var ContainerV2 = newStyled.div(templateObject_1$j || (templateObject_1$j = __ma
|
|
|
20583
20586
|
return (variant === VariantType.V2 ? '#F7F7F7' : 'white');
|
|
20584
20587
|
});
|
|
20585
20588
|
var ActionsV2 = newStyled.div(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n display: flex;\n width: 100%;\n gap: 8px;\n flex-direction: column;\n"], ["\n display: flex;\n width: 100%;\n gap: 8px;\n flex-direction: column;\n"])));
|
|
20586
|
-
var SizeCardItem = newStyled.div(templateObject_3$d || (templateObject_3$d = __makeTemplateObject(["\n width: 59px;\n height: 36px;\n border-radius: 8px;\n border: 1px 0px 0px 0px;\n border-color: #bbbbbb;\n border-style: solid;\n border-width: 1px;\n font-size: 12px;\n font-weight: 600;\n line-height: 16px;\n text-align: center;\n display: flex;\n justify-content: center;\n align-items: center;\n cursor: pointer;\n"], ["\n width: 59px;\n height: 36px;\n border-radius: 8px;\n border: 1px 0px 0px 0px;\n border-color: #bbbbbb;\n border-style: solid;\n border-width: 1px;\n font-size: 12px;\n font-weight: 600;\n line-height: 16px;\n text-align: center;\n display: flex;\n justify-content: center;\n align-items: center;\n cursor: pointer;\n"])));
|
|
20587
|
-
var SizeCardWrapper = newStyled.div(templateObject_4$a || (templateObject_4$a = __makeTemplateObject(["\n display: grid;\n gap: 4px;\n grid-template-columns: repeat(5, 1fr);\n\n @media only screen and (max-width: 375px) {\n grid-template-columns: repeat(
|
|
20588
|
-
var
|
|
20589
|
+
var SizeCardItem = newStyled.div(templateObject_3$d || (templateObject_3$d = __makeTemplateObject(["\n width: 59px;\n height: 36px;\n border-radius: 8px;\n border: 1px 0px 0px 0px;\n border-color: #bbbbbb;\n border-style: solid;\n border-width: 1px;\n font-size: 12px;\n font-weight: 600;\n line-height: 16px;\n text-align: center;\n display: flex;\n justify-content: center;\n align-items: center;\n cursor: pointer;\n @media only screen and (max-width: 375px) {\n width: 45px !important;\n font-size: 11px !important;\n }\n"], ["\n width: 59px;\n height: 36px;\n border-radius: 8px;\n border: 1px 0px 0px 0px;\n border-color: #bbbbbb;\n border-style: solid;\n border-width: 1px;\n font-size: 12px;\n font-weight: 600;\n line-height: 16px;\n text-align: center;\n display: flex;\n justify-content: center;\n align-items: center;\n cursor: pointer;\n @media only screen and (max-width: 375px) {\n width: 45px !important;\n font-size: 11px !important;\n }\n"])));
|
|
20590
|
+
var SizeCardWrapper = newStyled.div(templateObject_4$a || (templateObject_4$a = __makeTemplateObject(["\n display: grid;\n gap: 4px;\n grid-template-columns: repeat(5, 1fr);\n\n @media only screen and (max-width: 375px) {\n grid-template-columns: repeat(5, 1fr);\n }\n"], ["\n display: grid;\n gap: 4px;\n grid-template-columns: repeat(5, 1fr);\n\n @media only screen and (max-width: 375px) {\n grid-template-columns: repeat(5, 1fr);\n }\n"])));
|
|
20591
|
+
var BottomCopyWrapper = newStyled.div(templateObject_5$9 || (templateObject_5$9 = __makeTemplateObject(["\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n"], ["\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n"])));
|
|
20592
|
+
var templateObject_1$j, templateObject_2$d, templateObject_3$d, templateObject_4$a, templateObject_5$9;
|
|
20589
20593
|
|
|
20590
20594
|
var SizeOptions = function (_a) {
|
|
20591
20595
|
var onAddToCart = _a.onAddToCart, sizeOptions = _a.sizeOptions;
|
|
@@ -20602,7 +20606,7 @@ var OfferAtCartV2 = function (_a) {
|
|
|
20602
20606
|
var ActionsSection = (jsx$1(ActionsV2, { children: showButton ? (jsx$1(ButtonSecondary, { wide: true, text: ctaText, size: ComponentSize.Small, onClick: function () {
|
|
20603
20607
|
setShowButton(false);
|
|
20604
20608
|
} }, void 0)) : (sizeOptions && jsx$1(SizeOptions, { sizeOptions: sizeOptions, onAddToCart: onAddToCart }, void 0)) }, void 0));
|
|
20605
|
-
return (jsxs$1(ContainerV2, __assign$1({ className: className, variant: bottomCopy ? VariantType.V2 : VariantType.V1 }, { children: [jsx$1(OfferAtCartTitle, __assign$1({}, getTitleProps({ content: titleContent, bold: bold })), void 0), jsxs$1(Body,
|
|
20609
|
+
return (jsxs$1(ContainerV2, __assign$1({ className: className, variant: bottomCopy ? VariantType.V2 : VariantType.V1 }, { children: [jsx$1(OfferAtCartTitle, __assign$1({}, getTitleProps({ content: titleContent, bold: bold })), void 0), jsxs$1(Body, { children: [src && alt && (jsx$1(OfferAtCartImage, { isMobile: isMobile, src: src, alt: alt, rating: rating, width: isMobile ? '90px' : '122px' }, void 0)), jsx$1(RightContent, { children: jsx$1(Benefits, { children: jsx$1(OfferAtCartBenefits, { benefits: benefits }, void 0) }, void 0) }, void 0)] }, void 0), jsx$1("div", { children: !isMobile && ActionsSection }, void 0), isMobile && ActionsSection, bottomCopy && jsx$1(BottomCopyWrapper, { children: renderBottomCopy(bottomCopy) }, void 0)] }), void 0));
|
|
20606
20610
|
};
|
|
20607
20611
|
|
|
20608
20612
|
var ImageContainer$1 = newStyled.div(function (_a) {
|