@trafilea/afrodita-components 6.45.2 → 6.45.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/index.d.ts +5 -1
- package/build/index.esm.js +94 -87
- package/build/index.esm.js.map +1 -1
- package/build/index.js +94 -87
- package/build/index.js.map +1 -1
- package/package.json +1 -1
package/build/index.esm.js
CHANGED
|
@@ -4647,6 +4647,8 @@ var SizeEmpty = function (props) { return jsx$1(Icon$1, __assign$1({}, props, {
|
|
|
4647
4647
|
|
|
4648
4648
|
var SizeEmptyV2 = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "pdp/size_empty_v2" }), void 0); };
|
|
4649
4649
|
|
|
4650
|
+
var SizeWithStars = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "pdp/size_with_stars" }), void 0); };
|
|
4651
|
+
|
|
4650
4652
|
var Star = function (props) { return jsx$1(Icon$1, __assign$1({ testId: "star" }, props, { name: "pdp/star" }), void 0); };
|
|
4651
4653
|
|
|
4652
4654
|
var StarEmpty = function (props) { return (jsx$1(Icon$1, __assign$1({ testId: "star-empty" }, props, { name: "pdp/star_empty" }), void 0)); };
|
|
@@ -4692,6 +4694,7 @@ var PDP = /*#__PURE__*/Object.freeze({
|
|
|
4692
4694
|
ShippingEmpty: ShippingEmpty,
|
|
4693
4695
|
SizeEmpty: SizeEmpty,
|
|
4694
4696
|
SizeEmptyV2: SizeEmptyV2,
|
|
4697
|
+
SizeWithStars: SizeWithStars,
|
|
4695
4698
|
Star: Star,
|
|
4696
4699
|
StarEmpty: StarEmpty,
|
|
4697
4700
|
StarHalf: StarHalf,
|
|
@@ -4811,7 +4814,7 @@ var TAGS = {
|
|
|
4811
4814
|
hero2: newStyled.h2(templateObject_2$1C || (templateObject_2$1C = __makeTemplateObject([""], [""]))),
|
|
4812
4815
|
hero3: newStyled.h3(templateObject_3$1g || (templateObject_3$1g = __makeTemplateObject([""], [""]))),
|
|
4813
4816
|
display1: newStyled.h1(templateObject_4$10 || (templateObject_4$10 = __makeTemplateObject([""], [""]))),
|
|
4814
|
-
display2: newStyled.h2(templateObject_5$
|
|
4817
|
+
display2: newStyled.h2(templateObject_5$N || (templateObject_5$N = __makeTemplateObject([""], [""]))),
|
|
4815
4818
|
display3: newStyled.h3(templateObject_6$F || (templateObject_6$F = __makeTemplateObject([""], [""]))),
|
|
4816
4819
|
heading1: newStyled.h1(templateObject_7$w || (templateObject_7$w = __makeTemplateObject([""], [""]))),
|
|
4817
4820
|
heading2: newStyled.h2(templateObject_8$p || (templateObject_8$p = __makeTemplateObject([""], [""]))),
|
|
@@ -4947,13 +4950,13 @@ var DEFAULTS = {
|
|
|
4947
4950
|
size: 'regular',
|
|
4948
4951
|
},
|
|
4949
4952
|
};
|
|
4950
|
-
var templateObject_1$2d, templateObject_2$1C, templateObject_3$1g, templateObject_4$10, templateObject_5$
|
|
4953
|
+
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
4954
|
|
|
4952
4955
|
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
4956
|
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
4957
|
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
4958
|
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$
|
|
4959
|
+
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
4960
|
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
4961
|
var PackSelectorV2 = function (_a) {
|
|
4959
4962
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange, currencyCode = _a.currencyCode;
|
|
@@ -4979,7 +4982,7 @@ var PackCard$1 = function (_a) {
|
|
|
4979
4982
|
currency: currencyCode || 'USD',
|
|
4980
4983
|
}), ' ', "each", ')'] }), void 0)) : null] }, void 0)] }), void 0));
|
|
4981
4984
|
};
|
|
4982
|
-
var templateObject_1$2c, templateObject_2$1B, templateObject_3$1f, templateObject_4$$, templateObject_5$
|
|
4985
|
+
var templateObject_1$2c, templateObject_2$1B, templateObject_3$1f, templateObject_4$$, templateObject_5$M, templateObject_6$E;
|
|
4983
4986
|
|
|
4984
4987
|
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
4988
|
var DropContainer = newStyled.div(templateObject_2$1A || (templateObject_2$1A = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
@@ -5275,8 +5278,8 @@ var Container$1i = newStyled.div(templateObject_1$26 || (templateObject_1$26 = _
|
|
|
5275
5278
|
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
5279
|
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
5280
|
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$
|
|
5281
|
+
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"])));
|
|
5282
|
+
var templateObject_1$26, templateObject_2$1x, templateObject_3$1d, templateObject_4$_, templateObject_5$L;
|
|
5280
5283
|
|
|
5281
5284
|
var CouponCard = function (_a) {
|
|
5282
5285
|
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 +6055,7 @@ var TooltipText = newStyled.div(templateObject_4$Y || (templateObject_4$Y = __ma
|
|
|
6052
6055
|
var color = _a.color;
|
|
6053
6056
|
return color;
|
|
6054
6057
|
});
|
|
6055
|
-
var TopSection = newStyled.div(templateObject_5$
|
|
6058
|
+
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
6059
|
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
6060
|
var color = _a.color;
|
|
6058
6061
|
return color;
|
|
@@ -6062,7 +6065,7 @@ var CloseToolTip = newStyled.button(templateObject_8$o || (templateObject_8$o =
|
|
|
6062
6065
|
var _b = _a.right, right = _b === void 0 ? '.3rem' : _b;
|
|
6063
6066
|
return right;
|
|
6064
6067
|
});
|
|
6065
|
-
var templateObject_1$1$, templateObject_2$1s, templateObject_3$1a, templateObject_4$Y, templateObject_5$
|
|
6068
|
+
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
6069
|
|
|
6067
6070
|
var Tooltip = function (_a) {
|
|
6068
6071
|
var _b;
|
|
@@ -6125,7 +6128,7 @@ var SinglePurchaseContainer$3 = newStyled(ContainerBase$3)(templateObject_3$19 |
|
|
|
6125
6128
|
return (onClick ? 'cursor: pointer;' : '');
|
|
6126
6129
|
});
|
|
6127
6130
|
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$
|
|
6131
|
+
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
6132
|
var theme = _a.theme;
|
|
6130
6133
|
return theme.colors.shades[200].color;
|
|
6131
6134
|
}, function (_a) {
|
|
@@ -6143,7 +6146,7 @@ var StyledPrice$3 = newStyled(PriceLabelV2$1)(templateObject_12$4 || (templateOb
|
|
|
6143
6146
|
return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
|
|
6144
6147
|
});
|
|
6145
6148
|
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$
|
|
6149
|
+
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
6150
|
|
|
6148
6151
|
var radioIds$2 = {
|
|
6149
6152
|
oneTime: {
|
|
@@ -6235,7 +6238,7 @@ var SinglePurchaseContainer$2 = newStyled(ContainerBase$2)(templateObject_4$W ||
|
|
|
6235
6238
|
var onClick = _a.onClick;
|
|
6236
6239
|
return (onClick ? 'cursor: pointer;' : '');
|
|
6237
6240
|
});
|
|
6238
|
-
var SubscriptionContainer$2 = newStyled(ContainerBase$2)(templateObject_5$
|
|
6241
|
+
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
6242
|
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
6243
|
var theme = _a.theme;
|
|
6241
6244
|
return theme.colors.shades[200].color;
|
|
@@ -6256,7 +6259,7 @@ var TooltipWrapper$1 = newStyled.div(templateObject_13$3 || (templateObject_13$3
|
|
|
6256
6259
|
var theme = _a.theme;
|
|
6257
6260
|
return theme.component.autoship.tooltip.margin;
|
|
6258
6261
|
});
|
|
6259
|
-
var templateObject_1$1Z, templateObject_2$1q, templateObject_3$18, templateObject_4$W, templateObject_5$
|
|
6262
|
+
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
6263
|
|
|
6261
6264
|
var radioIds$1 = {
|
|
6262
6265
|
oneTime: {
|
|
@@ -6339,9 +6342,9 @@ var CustomerDetails = newStyled.div(templateObject_1$1Y || (templateObject_1$1Y
|
|
|
6339
6342
|
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
6343
|
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
6344
|
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$
|
|
6345
|
+
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
6346
|
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$
|
|
6347
|
+
var templateObject_1$1Y, templateObject_2$1p, templateObject_3$17, templateObject_4$V, templateObject_5$H, templateObject_6$A;
|
|
6345
6348
|
|
|
6346
6349
|
var NameWithStars = function (_a) {
|
|
6347
6350
|
var name = _a.name, size = _a.size;
|
|
@@ -6620,7 +6623,7 @@ var Container$17 = newStyled.div(templateObject_1$1L || (templateObject_1$1L = _
|
|
|
6620
6623
|
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
6624
|
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
6625
|
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$
|
|
6626
|
+
var MobileDollarPart = newStyled(DollarPart)(templateObject_5$G || (templateObject_5$G = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
6624
6627
|
var MobileClubMembersText = newStyled(ClubMembersText)(templateObject_6$z || (templateObject_6$z = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
6625
6628
|
var DesktopDollarPart = newStyled(DollarPart)(templateObject_7$s || (templateObject_7$s = __makeTemplateObject(["\n font-size: 13px;\n"], ["\n font-size: 13px;\n"])));
|
|
6626
6629
|
var DesktopClubMembersText = newStyled(ClubMembersText)(templateObject_8$l || (templateObject_8$l = __makeTemplateObject(["\n font-size: 13px;\n"], ["\n font-size: 13px;\n"])));
|
|
@@ -6629,7 +6632,7 @@ var ClubPriceLabel = function (_a) {
|
|
|
6629
6632
|
var isMobile = useWindowDimensions().isMobile;
|
|
6630
6633
|
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
6634
|
};
|
|
6632
|
-
var templateObject_1$1L, templateObject_2$1k, templateObject_3$12, templateObject_4$R, templateObject_5$
|
|
6635
|
+
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
6636
|
|
|
6634
6637
|
var Spacing = function (_a) {
|
|
6635
6638
|
var size = _a.size, _b = _a.type, type = _b === void 0 ? 'block' : _b, children = _a.children, styleProp = _a.style;
|
|
@@ -6787,7 +6790,10 @@ var Rating = function (_a) {
|
|
|
6787
6790
|
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
6791
|
};
|
|
6789
6792
|
|
|
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"])))
|
|
6793
|
+
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) {
|
|
6794
|
+
var width = _a.width;
|
|
6795
|
+
return width;
|
|
6796
|
+
});
|
|
6791
6797
|
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
6798
|
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
6799
|
var fontSize = _a.fontSize;
|
|
@@ -6796,8 +6802,8 @@ var RatingText = newStyled.span(templateObject_3$10 || (templateObject_3$10 = __
|
|
|
6796
6802
|
var templateObject_1$1F, templateObject_2$1h, templateObject_3$10;
|
|
6797
6803
|
|
|
6798
6804
|
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));
|
|
6805
|
+
var isMobile = _a.isMobile, src = _a.src, alt = _a.alt, rating = _a.rating, width = _a.width;
|
|
6806
|
+
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
6807
|
};
|
|
6802
6808
|
|
|
6803
6809
|
var OfferAtCartTitle = function (_a) {
|
|
@@ -6987,9 +6993,9 @@ var Container$12 = newStyled.div(templateObject_1$1z || (templateObject_1$1z = _
|
|
|
6987
6993
|
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
6994
|
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
6995
|
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$
|
|
6996
|
+
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
6997
|
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$
|
|
6998
|
+
var templateObject_1$1z, templateObject_2$1c, templateObject_3$_, templateObject_4$O, templateObject_5$F, templateObject_6$y;
|
|
6993
6999
|
|
|
6994
7000
|
var Video$1 = function (_a) {
|
|
6995
7001
|
var _b, _c, _d, _e;
|
|
@@ -7146,7 +7152,7 @@ var RegularPriceTagSpan = newStyled.span(templateObject_1$1w || (templateObject_
|
|
|
7146
7152
|
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
7153
|
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
7154
|
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$
|
|
7155
|
+
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
7156
|
var RegularPriceTag = function () {
|
|
7151
7157
|
return jsx$1(RegularPriceTagSpan, { children: "REGULAR PRICE" }, void 0);
|
|
7152
7158
|
};
|
|
@@ -7200,7 +7206,7 @@ var PriceLabelV4 = function (_a) {
|
|
|
7200
7206
|
? finalPriceArray[0]
|
|
7201
7207
|
: (_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
7208
|
};
|
|
7203
|
-
var templateObject_1$1w, templateObject_2$1a, templateObject_3$Z, templateObject_4$N, templateObject_5$
|
|
7209
|
+
var templateObject_1$1w, templateObject_2$1a, templateObject_3$Z, templateObject_4$N, templateObject_5$E;
|
|
7204
7210
|
|
|
7205
7211
|
var STYLES_BY_THEME = {
|
|
7206
7212
|
TheSpaDr: {
|
|
@@ -7327,7 +7333,7 @@ var getStylesBySize$b = function (size) {
|
|
|
7327
7333
|
};
|
|
7328
7334
|
}
|
|
7329
7335
|
};
|
|
7330
|
-
var TopTagContainer$9 = newStyled.div(templateObject_5$
|
|
7336
|
+
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
7337
|
var style = _a.style;
|
|
7332
7338
|
return style.width;
|
|
7333
7339
|
});
|
|
@@ -7337,7 +7343,7 @@ var BottomTagContainer$9 = newStyled.div(templateObject_6$x || (templateObject_6
|
|
|
7337
7343
|
});
|
|
7338
7344
|
var MarginTopContainer$1 = newStyled.div(templateObject_7$r || (templateObject_7$r = __makeTemplateObject(["\n margin-top: 8px;\n"], ["\n margin-top: 8px;\n"])));
|
|
7339
7345
|
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$
|
|
7346
|
+
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
7347
|
|
|
7342
7348
|
var ProductItemMobile = function (_a) {
|
|
7343
7349
|
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
|
|
@@ -7483,7 +7489,7 @@ var getStylesBySize$a = function (size) {
|
|
|
7483
7489
|
};
|
|
7484
7490
|
}
|
|
7485
7491
|
};
|
|
7486
|
-
var TopTagContainer$8 = newStyled.div(templateObject_5$
|
|
7492
|
+
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
7493
|
var style = _a.style;
|
|
7488
7494
|
return style.width;
|
|
7489
7495
|
});
|
|
@@ -7543,7 +7549,7 @@ var ProductItemTK = function (_a) {
|
|
|
7543
7549
|
marginTop: hasSpacing ? undefined : textContainerGap,
|
|
7544
7550
|
} }, { 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
7551
|
};
|
|
7546
|
-
var templateObject_1$1u, templateObject_2$18, templateObject_3$X, templateObject_4$L, templateObject_5$
|
|
7552
|
+
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
7553
|
|
|
7548
7554
|
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
7555
|
function withProductGrid(ProductItemComponent, data) {
|
|
@@ -7567,7 +7573,7 @@ var CustomRadioGroup = newStyled(lt)(templateObject_1$1s || (templateObject_1$1s
|
|
|
7567
7573
|
newStyled(lt.Label)(templateObject_2$17 || (templateObject_2$17 = __makeTemplateObject(["\n font-size: 0.88rem;\n"], ["\n font-size: 0.88rem;\n"])));
|
|
7568
7574
|
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
7575
|
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$
|
|
7576
|
+
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
7577
|
var Label$5 = function (_a) {
|
|
7572
7578
|
var label = _a.label, values = _a.values;
|
|
7573
7579
|
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 +7591,7 @@ var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
|
|
|
7585
7591
|
Option: Option,
|
|
7586
7592
|
OptionsContainer: OptionsContainer,
|
|
7587
7593
|
});
|
|
7588
|
-
var templateObject_1$1s, templateObject_2$17, templateObject_3$W, templateObject_4$K, templateObject_5$
|
|
7594
|
+
var templateObject_1$1s, templateObject_2$17, templateObject_3$W, templateObject_4$K, templateObject_5$B;
|
|
7589
7595
|
|
|
7590
7596
|
var OneColorSelector = function (_a) {
|
|
7591
7597
|
var color = _a.color, selected = _a.selected, testId = _a.testId, noStock = _a.noStock, _b = _a.showCross, showCross = _b === void 0 ? false : _b;
|
|
@@ -7716,14 +7722,14 @@ var Row$2 = newStyled.div(templateObject_3$V || (templateObject_3$V = __makeTemp
|
|
|
7716
7722
|
"\n flex-direction: row-reverse;\n justify-content: space-between;\n ";
|
|
7717
7723
|
});
|
|
7718
7724
|
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$
|
|
7725
|
+
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
7726
|
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
7727
|
var CrossSellCheckbox = function (_a) {
|
|
7722
7728
|
var imageURL = _a.imageURL, title = _a.title, description = _a.description, freeShippingText = _a.freeShippingText, rightToLeft = _a.rightToLeft, onChange = _a.onChange;
|
|
7723
7729
|
var theme = useTheme();
|
|
7724
7730
|
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
7731
|
};
|
|
7726
|
-
var templateObject_1$1p, templateObject_2$15, templateObject_3$V, templateObject_4$J, templateObject_5$
|
|
7732
|
+
var templateObject_1$1p, templateObject_2$15, templateObject_3$V, templateObject_4$J, templateObject_5$A, templateObject_6$v;
|
|
7727
7733
|
|
|
7728
7734
|
var index$1 = /*#__PURE__*/Object.freeze({
|
|
7729
7735
|
__proto__: null,
|
|
@@ -7895,7 +7901,7 @@ var Col = newStyled.div(templateObject_4$H || (templateObject_4$H = __makeTempla
|
|
|
7895
7901
|
textAlign: ['center', 'inherit'],
|
|
7896
7902
|
width: ['100%', 'inherit'],
|
|
7897
7903
|
}));
|
|
7898
|
-
var IconContainer$4 = newStyled.div(templateObject_5$
|
|
7904
|
+
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
7905
|
marginRight: ['0', '0.438rem'],
|
|
7900
7906
|
marginBottom: ['10px', '0'],
|
|
7901
7907
|
width: ['auto', '1.5rem'],
|
|
@@ -7923,7 +7929,7 @@ var DeliveryDetails = function (_a) {
|
|
|
7923
7929
|
var theme = useTheme();
|
|
7924
7930
|
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
7931
|
};
|
|
7926
|
-
var templateObject_1$1m, templateObject_2$12, templateObject_3$T, templateObject_4$H, templateObject_5$
|
|
7932
|
+
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
7933
|
|
|
7928
7934
|
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
7935
|
var top = _a.top;
|
|
@@ -7990,9 +7996,9 @@ var List = newStyled.ul(templateObject_1$1k || (templateObject_1$1k = __makeTemp
|
|
|
7990
7996
|
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
7997
|
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
7998
|
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$
|
|
7999
|
+
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
8000
|
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$
|
|
8001
|
+
var templateObject_1$1k, templateObject_2$10, templateObject_3$S, templateObject_4$G, templateObject_5$y, templateObject_6$t;
|
|
7996
8002
|
|
|
7997
8003
|
var DropdownListIcons = function (_a) {
|
|
7998
8004
|
var items = _a.items;
|
|
@@ -8009,9 +8015,9 @@ var DropdownContainer = newStyled.div(templateObject_1$1j || (templateObject_1$1
|
|
|
8009
8015
|
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
8016
|
var SizeLabel = newStyled.span(templateObject_3$R || (templateObject_3$R = __makeTemplateObject(["\n margin-right: 8px;\n"], ["\n margin-right: 8px;\n"])));
|
|
8011
8017
|
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$
|
|
8018
|
+
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
8019
|
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$
|
|
8020
|
+
var templateObject_1$1j, templateObject_2$$, templateObject_3$R, templateObject_4$F, templateObject_5$x, templateObject_6$s;
|
|
8015
8021
|
|
|
8016
8022
|
var SizeDropdown = function (_a) {
|
|
8017
8023
|
var options = _a.options, defaultLabel = _a.defaultLabel, onOptionSelect = _a.onOptionSelect;
|
|
@@ -8042,7 +8048,7 @@ var DialogDropdownListContainer = newStyled.ul(templateObject_3$Q || (templateOb
|
|
|
8042
8048
|
return props.containerPosRight ? "calc(".concat(props.containerPosRight, ")") : "calc(".concat(props.right, " - 23px)");
|
|
8043
8049
|
});
|
|
8044
8050
|
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$
|
|
8051
|
+
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
8052
|
var DropdownDialog = function (_a) {
|
|
8047
8053
|
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
8054
|
var theme = useTheme$1();
|
|
@@ -8051,7 +8057,7 @@ var DropdownDialog = function (_a) {
|
|
|
8051
8057
|
return (jsx$1(DialogDropdownListItem, { children: jsx$1(DialogDropdownLink, __assign$1({ href: value }, { children: label }), void 0) }, idx));
|
|
8052
8058
|
}) }), void 0) }), void 0));
|
|
8053
8059
|
};
|
|
8054
|
-
var templateObject_1$1i, templateObject_2$_, templateObject_3$Q, templateObject_4$E, templateObject_5$
|
|
8060
|
+
var templateObject_1$1i, templateObject_2$_, templateObject_3$Q, templateObject_4$E, templateObject_5$w;
|
|
8055
8061
|
|
|
8056
8062
|
function FilteringDropdown(_a) {
|
|
8057
8063
|
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 +8106,13 @@ var SectionContent = newStyled.div(templateObject_1$1g || (templateObject_1$1g =
|
|
|
8100
8106
|
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
8107
|
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
8108
|
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$
|
|
8109
|
+
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
8110
|
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
8111
|
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
8112
|
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
8113
|
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
8114
|
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$
|
|
8115
|
+
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
8116
|
|
|
8111
8117
|
var getStylesBySize$9 = function (size, theme) {
|
|
8112
8118
|
switch (size) {
|
|
@@ -12704,11 +12710,11 @@ var Container$U = newStyled.div(templateObject_3$M || (templateObject_3$M = __ma
|
|
|
12704
12710
|
"\n scroll-behavior: smooth;\n &::-webkit-scrollbar {\n visibility: hidden;\n }\n ";
|
|
12705
12711
|
});
|
|
12706
12712
|
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$
|
|
12713
|
+
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
12714
|
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
12715
|
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
12716
|
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$
|
|
12717
|
+
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
12718
|
|
|
12713
12719
|
var getLoadingProp = function (index, itemsOnViewport) {
|
|
12714
12720
|
var loading = 'eager';
|
|
@@ -14352,7 +14358,7 @@ var BottomTagContainer$7 = newStyled.div(templateObject_3$L || (templateObject_3
|
|
|
14352
14358
|
return (isCTAHidden ? '60px' : '120px');
|
|
14353
14359
|
});
|
|
14354
14360
|
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$
|
|
14361
|
+
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
14362
|
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
14363
|
var ImageStyled = newStyled(Image$3)(templateObject_7$m || (templateObject_7$m = __makeTemplateObject(["\n aspect-ratio: ", ";\n"], ["\n aspect-ratio: ", ";\n"])), function (_a) {
|
|
14358
14364
|
var theme = _a.theme, isRatioSquare = _a.isRatioSquare;
|
|
@@ -14362,7 +14368,7 @@ var InnerImageZoomStyled = newStyled(InnerImageZoom)(templateObject_8$f || (temp
|
|
|
14362
14368
|
var theme = _a.theme, isRatioSquare = _a.isRatioSquare;
|
|
14363
14369
|
return isRatioSquare ? '1 / 1' : theme.component.gallery.aspectRatio;
|
|
14364
14370
|
});
|
|
14365
|
-
var templateObject_1$19, templateObject_2$T, templateObject_3$L, templateObject_4$A, templateObject_5$
|
|
14371
|
+
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
14372
|
|
|
14367
14373
|
var ImageProductSlide$1 = function (_a) {
|
|
14368
14374
|
var _b;
|
|
@@ -14571,7 +14577,7 @@ var InputWrapper = newStyled.div(templateObject_4$z || (templateObject_4$z = __m
|
|
|
14571
14577
|
var size = _a.size, inlinePlaceholder = _a.inlinePlaceholder;
|
|
14572
14578
|
return !inlinePlaceholder ? (size === 'small' ? '36px' : '40px') : '48px';
|
|
14573
14579
|
});
|
|
14574
|
-
var AnimatedPlaceholder = newStyled.span(templateObject_5$
|
|
14580
|
+
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
14581
|
var theme = _a.theme;
|
|
14576
14582
|
return theme.component.input.placeholderColor;
|
|
14577
14583
|
}, function (_a) {
|
|
@@ -14585,7 +14591,7 @@ var AnimatedPlaceholder = newStyled.span(templateObject_5$r || (templateObject_5
|
|
|
14585
14591
|
return theme.component.input.lineHeight;
|
|
14586
14592
|
});
|
|
14587
14593
|
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$
|
|
14594
|
+
var templateObject_1$14, templateObject_2$Q, templateObject_3$J, templateObject_4$z, templateObject_5$s, templateObject_6$o;
|
|
14589
14595
|
|
|
14590
14596
|
var BaseInput = function (_a) {
|
|
14591
14597
|
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 +14847,7 @@ var transformStyle = function (_a) {
|
|
|
14841
14847
|
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
14848
|
var width = _a.width;
|
|
14843
14849
|
return width
|
|
14844
|
-
? css(templateObject_5$
|
|
14850
|
+
? css(templateObject_5$r || (templateObject_5$r = __makeTemplateObject(["\n width: ", ";\n "], ["\n width: ", ";\n "])), width) : mediaQueries({
|
|
14845
14851
|
minWidth: ['90%', 'var(--component-modal-minWidth)'],
|
|
14846
14852
|
});
|
|
14847
14853
|
}, visibleStyle, transformStyle);
|
|
@@ -14886,7 +14892,7 @@ var useModal = function (id) {
|
|
|
14886
14892
|
close: close,
|
|
14887
14893
|
}); }, [close, open, opened]);
|
|
14888
14894
|
};
|
|
14889
|
-
var templateObject_1$$, templateObject_2$M, templateObject_3$H, templateObject_4$y, templateObject_5$
|
|
14895
|
+
var templateObject_1$$, templateObject_2$M, templateObject_3$H, templateObject_4$y, templateObject_5$r, templateObject_6$n, templateObject_7$l;
|
|
14890
14896
|
|
|
14891
14897
|
var htmlReactParser = {exports: {}};
|
|
14892
14898
|
|
|
@@ -18768,7 +18774,7 @@ var Container$J = newStyled.div(templateObject_1$Y || (templateObject_1$Y = __ma
|
|
|
18768
18774
|
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
18775
|
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
18776
|
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$
|
|
18777
|
+
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
18778
|
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
18779
|
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
18780
|
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 +18807,7 @@ var PackCard = function (_a) {
|
|
|
18801
18807
|
currency: currencyCode || 'USD',
|
|
18802
18808
|
}), ' ', "each"] }), void 0)] }), void 0));
|
|
18803
18809
|
};
|
|
18804
|
-
var templateObject_1$Y, templateObject_2$J, templateObject_3$G, templateObject_4$x, templateObject_5$
|
|
18810
|
+
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
18811
|
|
|
18806
18812
|
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
18813
|
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 +18951,7 @@ var PriceContainer = newStyled.div(templateObject_4$v || (templateObject_4$v = _
|
|
|
18945
18951
|
})
|
|
18946
18952
|
: 'justify-content: end';
|
|
18947
18953
|
});
|
|
18948
|
-
var Quantity = newStyled.div(templateObject_5$
|
|
18954
|
+
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
18955
|
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
18956
|
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
18957
|
var theme = _a.theme;
|
|
@@ -18957,7 +18963,7 @@ var SimpleOrderItem = function (_a) {
|
|
|
18957
18963
|
var theme = useTheme();
|
|
18958
18964
|
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
18965
|
};
|
|
18960
|
-
var templateObject_1$V, templateObject_2$H, templateObject_3$E, templateObject_4$v, templateObject_5$
|
|
18966
|
+
var templateObject_1$V, templateObject_2$H, templateObject_3$E, templateObject_4$v, templateObject_5$p, templateObject_6$l, templateObject_7$j;
|
|
18961
18967
|
|
|
18962
18968
|
var P$1 = newStyled.p(function (_a) {
|
|
18963
18969
|
var color = _a.color;
|
|
@@ -19272,7 +19278,7 @@ var Container$B = newStyled.div(templateObject_1$Q || (templateObject_1$Q = __ma
|
|
|
19272
19278
|
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
19279
|
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
19280
|
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$
|
|
19281
|
+
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
19282
|
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
19283
|
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
19284
|
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 +19315,7 @@ var Review$1 = function (_a) {
|
|
|
19309
19315
|
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
19316
|
(!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
19317
|
};
|
|
19312
|
-
var templateObject_1$Q, templateObject_2$D, templateObject_3$A, templateObject_4$t, templateObject_5$
|
|
19318
|
+
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
19319
|
|
|
19314
19320
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_DESKTOP = 500;
|
|
19315
19321
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_MOBILE = 168;
|
|
@@ -19317,7 +19323,7 @@ var Container$A = newStyled.div(templateObject_1$P || (templateObject_1$P = __ma
|
|
|
19317
19323
|
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
19324
|
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
19325
|
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$
|
|
19326
|
+
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
19327
|
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
19328
|
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
19329
|
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 +19371,13 @@ var Review = function (_a) {
|
|
|
19365
19371
|
: description,
|
|
19366
19372
|
} }, 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
19373
|
};
|
|
19368
|
-
var templateObject_1$P, templateObject_2$C, templateObject_3$z, templateObject_4$s, templateObject_5$
|
|
19374
|
+
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
19375
|
|
|
19370
19376
|
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
19377
|
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
19378
|
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
19379
|
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$
|
|
19380
|
+
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
19381
|
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
19382
|
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
19383
|
var backgroundUrl = _a.backgroundUrl;
|
|
@@ -19383,7 +19389,7 @@ var ReviewsHeader = function (_a) {
|
|
|
19383
19389
|
var theme = useTheme();
|
|
19384
19390
|
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
19391
|
};
|
|
19386
|
-
var templateObject_1$O, templateObject_2$B, templateObject_3$y, templateObject_4$r, templateObject_5$
|
|
19392
|
+
var templateObject_1$O, templateObject_2$B, templateObject_3$y, templateObject_4$r, templateObject_5$m, templateObject_6$i, templateObject_7$g;
|
|
19387
19393
|
|
|
19388
19394
|
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
19395
|
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 +19607,8 @@ var Container$t = newStyled.div(templateObject_1$I || (templateObject_1$I = __ma
|
|
|
19601
19607
|
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
19608
|
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
19609
|
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$
|
|
19610
|
+
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"])));
|
|
19611
|
+
var templateObject_1$I, templateObject_2$y, templateObject_3$w, templateObject_4$q, templateObject_5$l;
|
|
19606
19612
|
|
|
19607
19613
|
var SearchNavigation = function (_a) {
|
|
19608
19614
|
var returnText = _a.returnText, returnUrl = _a.returnUrl, _b = _a.steps, steps = _b === void 0 ? [] : _b, returnAction = _a.returnAction;
|
|
@@ -19634,13 +19640,13 @@ var TableElement$3 = newStyled.table(templateObject_1$G || (templateObject_1$G =
|
|
|
19634
19640
|
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
19641
|
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
19642
|
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$
|
|
19643
|
+
var TopLabel$1 = newStyled(Label$2)(templateObject_5$k || (templateObject_5$k = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
19638
19644
|
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
19645
|
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
19646
|
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
19647
|
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
19648
|
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$
|
|
19649
|
+
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
19650
|
|
|
19645
19651
|
var getIsOdd$2 = function (number) { return number % 2 !== 0; };
|
|
19646
19652
|
var getCellColor$2 = function (index, cell) {
|
|
@@ -20011,12 +20017,12 @@ var ToastContent = newStyled.div(templateObject_4$l || (templateObject_4$l = __m
|
|
|
20011
20017
|
var distanceFromTop = _a.distanceFromTop;
|
|
20012
20018
|
return mobileSlideInAnimation(distanceFromTop);
|
|
20013
20019
|
});
|
|
20014
|
-
var ToastText = newStyled.p(templateObject_5$
|
|
20020
|
+
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
20021
|
var severity = _a.severity;
|
|
20016
20022
|
return (severity === 'error' ? '#C64844' : '#292929');
|
|
20017
20023
|
});
|
|
20018
20024
|
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$
|
|
20025
|
+
var templateObject_1$w, templateObject_2$p, templateObject_3$o, templateObject_4$l, templateObject_5$j, templateObject_6$g;
|
|
20020
20026
|
|
|
20021
20027
|
var Toast = React__default.forwardRef(function (_a, ref) {
|
|
20022
20028
|
var _b;
|
|
@@ -20057,7 +20063,7 @@ var Container$m = newStyled.div(templateObject_4$k || (templateObject_4$k = __ma
|
|
|
20057
20063
|
var highlightColor = _a.highlightColor;
|
|
20058
20064
|
return highlightColor;
|
|
20059
20065
|
});
|
|
20060
|
-
var TotalContainer = newStyled(Container$m)(templateObject_5$
|
|
20066
|
+
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
20067
|
var showTotalLabel = _a.showTotalLabel;
|
|
20062
20068
|
return (showTotalLabel ? 'space-between' : 'flex-end');
|
|
20063
20069
|
});
|
|
@@ -20067,7 +20073,7 @@ var DiscountAmount = newStyled.h3(templateObject_7$e || (templateObject_7$e = __
|
|
|
20067
20073
|
return theme.component.total.basicTotal.savings.amountFontWeight;
|
|
20068
20074
|
});
|
|
20069
20075
|
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$
|
|
20076
|
+
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
20077
|
|
|
20072
20078
|
var Total = function (_a) {
|
|
20073
20079
|
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 +20117,7 @@ var Container$l = newStyled.div(templateObject_1$t || (templateObject_1$t = __ma
|
|
|
20111
20117
|
var CheckpointContainer$1 = newStyled.div(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
20112
20118
|
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
20119
|
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$
|
|
20120
|
+
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
20121
|
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
20122
|
return props.finishedTrack
|
|
20117
20123
|
? props.finishedTrackColor
|
|
@@ -20159,13 +20165,13 @@ var TrackingProgressV2 = function (_a) {
|
|
|
20159
20165
|
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
20166
|
})] }), void 0));
|
|
20161
20167
|
};
|
|
20162
|
-
var templateObject_1$t, templateObject_2$m, templateObject_3$l, templateObject_4$i, templateObject_5$
|
|
20168
|
+
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
20169
|
|
|
20164
20170
|
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
20171
|
var CheckpointContainer = newStyled.div(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
20166
20172
|
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
20173
|
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$
|
|
20174
|
+
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
20175
|
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
20176
|
return props.firstElement ? '8px 8px 0 0' : props.lastElement ? '0 0 8px 8px' : '';
|
|
20171
20177
|
}, function (props) { return (props.firstElement ? '20px' : '0'); }, function (props) { return (props.firstElement ? '-20px' : '0'); });
|
|
@@ -20199,7 +20205,7 @@ var TrackingProgress = function (_a) {
|
|
|
20199
20205
|
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
20206
|
})] }), void 0));
|
|
20201
20207
|
};
|
|
20202
|
-
var templateObject_1$s, templateObject_2$l, templateObject_3$k, templateObject_4$h, templateObject_5$
|
|
20208
|
+
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
20209
|
|
|
20204
20210
|
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
20211
|
var checked = _a.checked;
|
|
@@ -20208,10 +20214,10 @@ var AutoShipCardContainerWrapper$1 = newStyled.div(templateObject_1$r || (templa
|
|
|
20208
20214
|
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
20215
|
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
20216
|
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$
|
|
20217
|
+
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
20218
|
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
20219
|
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$
|
|
20220
|
+
var templateObject_1$r, templateObject_2$k, templateObject_3$j, templateObject_4$g, templateObject_5$f, templateObject_6$c, templateObject_7$b;
|
|
20215
20221
|
|
|
20216
20222
|
function AutoshipOfferCard(_a) {
|
|
20217
20223
|
var showMore = _a.showMore, copyList = _a.copyList, copy = _a.copy, handleCheckBoxChange = _a.handleCheckBoxChange, _b = _a.isChecked, isChecked = _b === void 0 ? false : _b;
|
|
@@ -20242,11 +20248,11 @@ var AutoShipCardContainerWrapper = newStyled.div(templateObject_1$q || (template
|
|
|
20242
20248
|
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
20249
|
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
20250
|
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$
|
|
20251
|
+
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
20252
|
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
20253
|
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
20254
|
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$
|
|
20255
|
+
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
20256
|
|
|
20251
20257
|
function AutoshipOfferCardCta(_a) {
|
|
20252
20258
|
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 +20345,10 @@ var ContainerWrapper$1 = newStyled.div(templateObject_1$o || (templateObject_1$o
|
|
|
20339
20345
|
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
20346
|
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
20347
|
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$
|
|
20348
|
+
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
20349
|
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
20350
|
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$
|
|
20351
|
+
var templateObject_1$o, templateObject_2$h, templateObject_3$h, templateObject_4$e, templateObject_5$d, templateObject_6$a, templateObject_7$9;
|
|
20346
20352
|
|
|
20347
20353
|
function CartItemCard(_a) {
|
|
20348
20354
|
var style = _a.style, className = _a.className, children = _a.children;
|
|
@@ -20406,7 +20412,7 @@ var SinglePurchaseContainer$1 = newStyled(ContainerBase$1)(templateObject_4$d ||
|
|
|
20406
20412
|
var onClick = _a.onClick;
|
|
20407
20413
|
return (onClick ? 'cursor: pointer;' : '');
|
|
20408
20414
|
});
|
|
20409
|
-
var SubscriptionContainer$1 = newStyled(ContainerBase$1)(templateObject_5$
|
|
20415
|
+
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
20416
|
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
20417
|
var isSelected = _a.isSelected;
|
|
20412
20418
|
return (isSelected ? "1px solid ".concat(Shades200Color) : "none");
|
|
@@ -20431,7 +20437,7 @@ var StyledPrice$1 = newStyled(PriceLabelV2$1)(templateObject_10$4 || (templateOb
|
|
|
20431
20437
|
: Shades200Color;
|
|
20432
20438
|
});
|
|
20433
20439
|
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$
|
|
20440
|
+
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
20441
|
|
|
20436
20442
|
var ClubOfferSelector = function (_a) {
|
|
20437
20443
|
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 +20493,8 @@ var ContainerWrapper = newStyled.div(templateObject_1$m || (templateObject_1$m =
|
|
|
20487
20493
|
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
20494
|
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
20495
|
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$
|
|
20496
|
+
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"])));
|
|
20497
|
+
var templateObject_1$m, templateObject_2$f, templateObject_3$f, templateObject_4$c, templateObject_5$b;
|
|
20492
20498
|
|
|
20493
20499
|
function Card(_a) {
|
|
20494
20500
|
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 +20529,8 @@ var Benefits = newStyled.div(templateObject_4$b || (templateObject_4$b = __makeT
|
|
|
20523
20529
|
var theme = _a.theme, backgroundColor = _a.backgroundColor;
|
|
20524
20530
|
return backgroundColor !== null && backgroundColor !== void 0 ? backgroundColor : theme.colors.shades['10'].color;
|
|
20525
20531
|
});
|
|
20526
|
-
var Actions = newStyled.div(templateObject_5$
|
|
20527
|
-
var templateObject_1$k, templateObject_2$e, templateObject_3$e, templateObject_4$b, templateObject_5$
|
|
20532
|
+
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"])));
|
|
20533
|
+
var templateObject_1$k, templateObject_2$e, templateObject_3$e, templateObject_4$b, templateObject_5$a;
|
|
20528
20534
|
|
|
20529
20535
|
var getTitleProps = function (_a) {
|
|
20530
20536
|
var titleContent = _a.content, bold = _a.bold;
|
|
@@ -20583,9 +20589,10 @@ var ContainerV2 = newStyled.div(templateObject_1$j || (templateObject_1$j = __ma
|
|
|
20583
20589
|
return (variant === VariantType.V2 ? '#F7F7F7' : 'white');
|
|
20584
20590
|
});
|
|
20585
20591
|
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
|
|
20592
|
+
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"])));
|
|
20593
|
+
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"])));
|
|
20594
|
+
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"])));
|
|
20595
|
+
var templateObject_1$j, templateObject_2$d, templateObject_3$d, templateObject_4$a, templateObject_5$9;
|
|
20589
20596
|
|
|
20590
20597
|
var SizeOptions = function (_a) {
|
|
20591
20598
|
var onAddToCart = _a.onAddToCart, sizeOptions = _a.sizeOptions;
|
|
@@ -20602,7 +20609,7 @@ var OfferAtCartV2 = function (_a) {
|
|
|
20602
20609
|
var ActionsSection = (jsx$1(ActionsV2, { children: showButton ? (jsx$1(ButtonSecondary, { wide: true, text: ctaText, size: ComponentSize.Small, onClick: function () {
|
|
20603
20610
|
setShowButton(false);
|
|
20604
20611
|
} }, 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,
|
|
20612
|
+
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
20613
|
};
|
|
20607
20614
|
|
|
20608
20615
|
var ImageContainer$1 = newStyled.div(function (_a) {
|