@trafilea/afrodita-components 6.55.0 → 6.55.2
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 +1 -10
- package/build/index.esm.js +145 -102
- package/build/index.esm.js.map +1 -1
- package/build/index.js +145 -102
- package/build/index.js.map +1 -1
- package/package.json +1 -1
package/build/index.js
CHANGED
|
@@ -4897,7 +4897,7 @@ var TAGS = {
|
|
|
4897
4897
|
hero3: newStyled.h3(templateObject_3$1q || (templateObject_3$1q = __makeTemplateObject([""], [""]))),
|
|
4898
4898
|
display1: newStyled.h1(templateObject_4$18 || (templateObject_4$18 = __makeTemplateObject([""], [""]))),
|
|
4899
4899
|
display2: newStyled.h2(templateObject_5$T || (templateObject_5$T = __makeTemplateObject([""], [""]))),
|
|
4900
|
-
display3: newStyled.h3(templateObject_6$
|
|
4900
|
+
display3: newStyled.h3(templateObject_6$K || (templateObject_6$K = __makeTemplateObject([""], [""]))),
|
|
4901
4901
|
heading1: newStyled.h1(templateObject_7$A || (templateObject_7$A = __makeTemplateObject([""], [""]))),
|
|
4902
4902
|
heading2: newStyled.h2(templateObject_8$t || (templateObject_8$t = __makeTemplateObject([""], [""]))),
|
|
4903
4903
|
heading3: newStyled.h3(templateObject_9$g || (templateObject_9$g = __makeTemplateObject([""], [""]))),
|
|
@@ -5032,14 +5032,14 @@ var DEFAULTS = {
|
|
|
5032
5032
|
size: 'regular',
|
|
5033
5033
|
},
|
|
5034
5034
|
};
|
|
5035
|
-
var templateObject_1$2r, templateObject_2$1N, templateObject_3$1q, templateObject_4$18, templateObject_5$T, templateObject_6$
|
|
5035
|
+
var templateObject_1$2r, templateObject_2$1N, templateObject_3$1q, templateObject_4$18, templateObject_5$T, templateObject_6$K, templateObject_7$A, templateObject_8$t, templateObject_9$g, templateObject_10$e, templateObject_11$a, templateObject_12$7, templateObject_13$6, templateObject_14$3, templateObject_15$2, templateObject_16$2, templateObject_17$2, templateObject_18$2, templateObject_19$2, templateObject_20$1;
|
|
5036
5036
|
|
|
5037
5037
|
var Container$1u = newStyled.div(templateObject_1$2q || (templateObject_1$2q = __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"])));
|
|
5038
5038
|
var Card$4 = newStyled.div(templateObject_2$1M || (templateObject_2$1M = __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"])));
|
|
5039
5039
|
var Tag$2 = newStyled.div(templateObject_3$1p || (templateObject_3$1p = __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"])));
|
|
5040
5040
|
var Label$7 = newStyled.div(templateObject_4$17 || (templateObject_4$17 = __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"])));
|
|
5041
5041
|
var Check$1 = newStyled.div(templateObject_5$S || (templateObject_5$S = __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"])));
|
|
5042
|
-
var DiscountContainer$1 = newStyled.div(templateObject_6$
|
|
5042
|
+
var DiscountContainer$1 = newStyled.div(templateObject_6$J || (templateObject_6$J = __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"])));
|
|
5043
5043
|
var PackSelectorV2 = function (_a) {
|
|
5044
5044
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange, currencyCode = _a.currencyCode;
|
|
5045
5045
|
return (jsxRuntime.jsx(Container$1u, __assign$1({ role: "radiogroup" }, { children: packs.map(function (pack) {
|
|
@@ -5064,7 +5064,7 @@ var PackCard$1 = function (_a) {
|
|
|
5064
5064
|
currency: currencyCode || 'USD',
|
|
5065
5065
|
}), ' ', "each", ')'] }), void 0)) : null] }, void 0)] }), void 0));
|
|
5066
5066
|
};
|
|
5067
|
-
var templateObject_1$2q, templateObject_2$1M, templateObject_3$1p, templateObject_4$17, templateObject_5$S, templateObject_6$
|
|
5067
|
+
var templateObject_1$2q, templateObject_2$1M, templateObject_3$1p, templateObject_4$17, templateObject_5$S, templateObject_6$J;
|
|
5068
5068
|
|
|
5069
5069
|
var Container$1t = newStyled.div(templateObject_1$2p || (templateObject_1$2p = __makeTemplateObject(["\n height: 32px;\n display: flex;\n align-items: center;\n"], ["\n height: 32px;\n display: flex;\n align-items: center;\n"])));
|
|
5070
5070
|
var DropContainer = newStyled.div(templateObject_2$1L || (templateObject_2$1L = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
@@ -6152,7 +6152,7 @@ var TooltipText = newStyled.div(templateObject_4$14 || (templateObject_4$14 = __
|
|
|
6152
6152
|
return color;
|
|
6153
6153
|
});
|
|
6154
6154
|
var TopSection = newStyled.div(templateObject_5$Q || (templateObject_5$Q = __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"])));
|
|
6155
|
-
var Title$a = newStyled.h1(templateObject_6$
|
|
6155
|
+
var Title$a = newStyled.h1(templateObject_6$I || (templateObject_6$I = __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) {
|
|
6156
6156
|
var color = _a.color;
|
|
6157
6157
|
return color;
|
|
6158
6158
|
});
|
|
@@ -6161,7 +6161,7 @@ var CloseToolTip = newStyled.button(templateObject_8$s || (templateObject_8$s =
|
|
|
6161
6161
|
var _b = _a.right, right = _b === void 0 ? '.3rem' : _b;
|
|
6162
6162
|
return right;
|
|
6163
6163
|
});
|
|
6164
|
-
var templateObject_1$2d, templateObject_2$1D, templateObject_3$1k, templateObject_4$14, templateObject_5$Q, templateObject_6$
|
|
6164
|
+
var templateObject_1$2d, templateObject_2$1D, templateObject_3$1k, templateObject_4$14, templateObject_5$Q, templateObject_6$I, templateObject_7$z, templateObject_8$s;
|
|
6165
6165
|
|
|
6166
6166
|
var Tooltip = function (_a) {
|
|
6167
6167
|
var _b;
|
|
@@ -6231,7 +6231,7 @@ var SubscriptionHeader$5 = newStyled.div(templateObject_5$P || (templateObject_5
|
|
|
6231
6231
|
var theme = _a.theme;
|
|
6232
6232
|
return theme.colors.pallete.primary.color;
|
|
6233
6233
|
});
|
|
6234
|
-
var BenefitsContainer$4 = newStyled.div(templateObject_6$
|
|
6234
|
+
var BenefitsContainer$4 = newStyled.div(templateObject_6$H || (templateObject_6$H = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
6235
6235
|
var Benefit$4 = newStyled.div(templateObject_7$y || (templateObject_7$y = __makeTemplateObject(["\n display: flex;\n padding: 8px 0px;\n svg {\n overflow: visible;\n }\n"], ["\n display: flex;\n padding: 8px 0px;\n svg {\n overflow: visible;\n }\n"])));
|
|
6236
6236
|
var BenefitText$4 = newStyled(Text$7)(templateObject_8$r || (templateObject_8$r = __makeTemplateObject(["\n line-height: 20px;\n margin-left: 9px;\n"], ["\n line-height: 20px;\n margin-left: 9px;\n"])));
|
|
6237
6237
|
var SubscriptionDetails = newStyled(Text$7)(templateObject_9$f || (templateObject_9$f = __makeTemplateObject(["\n font-size: 16px;\n margin-right: 7px;\n"], ["\n font-size: 16px;\n margin-right: 7px;\n"])));
|
|
@@ -6242,7 +6242,7 @@ var StyledPrice$4 = newStyled(PriceLabelV2$1)(templateObject_12$6 || (templateOb
|
|
|
6242
6242
|
return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
|
|
6243
6243
|
});
|
|
6244
6244
|
var Container$1m = newStyled.div(templateObject_13$5 || (templateObject_13$5 = __makeTemplateObject([""], [""])));
|
|
6245
|
-
var templateObject_1$2c, templateObject_2$1C, templateObject_3$1j, templateObject_4$13, templateObject_5$P, templateObject_6$
|
|
6245
|
+
var templateObject_1$2c, templateObject_2$1C, templateObject_3$1j, templateObject_4$13, templateObject_5$P, templateObject_6$H, templateObject_7$y, templateObject_8$r, templateObject_9$f, templateObject_10$d, templateObject_11$9, templateObject_12$6, templateObject_13$5;
|
|
6246
6246
|
|
|
6247
6247
|
var radioIds$3 = {
|
|
6248
6248
|
oneTime: {
|
|
@@ -6335,7 +6335,7 @@ var SinglePurchaseContainer$3 = newStyled(ContainerBase$4)(templateObject_4$12 |
|
|
|
6335
6335
|
return (onClick ? 'cursor: pointer;' : '');
|
|
6336
6336
|
});
|
|
6337
6337
|
var SubscriptionContainer$4 = newStyled(ContainerBase$4)(templateObject_5$O || (templateObject_5$O = __makeTemplateObject(["\n padding: 16px;\n margin-bottom: 8px;\n position: relative;\n"], ["\n padding: 16px;\n margin-bottom: 8px;\n position: relative;\n"])));
|
|
6338
|
-
var SubscriptionHeader$4 = newStyled.div(templateObject_6$
|
|
6338
|
+
var SubscriptionHeader$4 = newStyled.div(templateObject_6$G || (templateObject_6$G = __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) {
|
|
6339
6339
|
var theme = _a.theme;
|
|
6340
6340
|
return theme.colors.shades[200].color;
|
|
6341
6341
|
}, function (_a) {
|
|
@@ -6355,7 +6355,7 @@ var TooltipWrapper$1 = newStyled.div(templateObject_13$4 || (templateObject_13$4
|
|
|
6355
6355
|
var theme = _a.theme;
|
|
6356
6356
|
return theme.component.autoship.tooltip.margin;
|
|
6357
6357
|
});
|
|
6358
|
-
var templateObject_1$2b, templateObject_2$1B, templateObject_3$1i, templateObject_4$12, templateObject_5$O, templateObject_6$
|
|
6358
|
+
var templateObject_1$2b, templateObject_2$1B, templateObject_3$1i, templateObject_4$12, templateObject_5$O, templateObject_6$G, templateObject_7$x, templateObject_8$q, templateObject_9$e, templateObject_10$c, templateObject_11$8, templateObject_12$5, templateObject_13$4;
|
|
6359
6359
|
|
|
6360
6360
|
var radioIds$2 = {
|
|
6361
6361
|
oneTime: {
|
|
@@ -6439,8 +6439,8 @@ var CustomerInfo = newStyled.div(templateObject_2$1A || (templateObject_2$1A = _
|
|
|
6439
6439
|
var Name = newStyled.h4(templateObject_3$1h || (templateObject_3$1h = __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"])));
|
|
6440
6440
|
var StarIconContainer = newStyled.div(templateObject_4$11 || (templateObject_4$11 = __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"])));
|
|
6441
6441
|
var Description$2 = newStyled.p(templateObject_5$N || (templateObject_5$N = __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"])));
|
|
6442
|
-
var ReviewDays = newStyled.span(templateObject_6$
|
|
6443
|
-
var templateObject_1$2a, templateObject_2$1A, templateObject_3$1h, templateObject_4$11, templateObject_5$N, templateObject_6$
|
|
6442
|
+
var ReviewDays = newStyled.span(templateObject_6$F || (templateObject_6$F = __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"])));
|
|
6443
|
+
var templateObject_1$2a, templateObject_2$1A, templateObject_3$1h, templateObject_4$11, templateObject_5$N, templateObject_6$F;
|
|
6444
6444
|
|
|
6445
6445
|
var NameWithStars = function (_a) {
|
|
6446
6446
|
var name = _a.name, size = _a.size;
|
|
@@ -6739,7 +6739,7 @@ var MobileContainer = newStyled(Container$1e)(templateObject_2$1v || (templateOb
|
|
|
6739
6739
|
var DollarPart = newStyled.span(templateObject_3$1c || (templateObject_3$1c = __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"])));
|
|
6740
6740
|
var ClubMembersText = newStyled.span(templateObject_4$Z || (templateObject_4$Z = __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"])));
|
|
6741
6741
|
var MobileDollarPart = newStyled(DollarPart)(templateObject_5$M || (templateObject_5$M = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
6742
|
-
var MobileClubMembersText = newStyled(ClubMembersText)(templateObject_6$
|
|
6742
|
+
var MobileClubMembersText = newStyled(ClubMembersText)(templateObject_6$E || (templateObject_6$E = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
6743
6743
|
var DesktopDollarPart = newStyled(DollarPart)(templateObject_7$w || (templateObject_7$w = __makeTemplateObject(["\n font-size: 13px;\n"], ["\n font-size: 13px;\n"])));
|
|
6744
6744
|
var DesktopClubMembersText = newStyled(ClubMembersText)(templateObject_8$p || (templateObject_8$p = __makeTemplateObject(["\n font-size: 13px;\n"], ["\n font-size: 13px;\n"])));
|
|
6745
6745
|
var ClubPriceLabel = function (_a) {
|
|
@@ -6747,7 +6747,7 @@ var ClubPriceLabel = function (_a) {
|
|
|
6747
6747
|
var isMobile = useWindowDimensions().isMobile;
|
|
6748
6748
|
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: isMobile ? (jsxRuntime.jsxs(MobileContainer, { children: [jsxRuntime.jsx(MobileDollarPart, { children: clubPrice }, void 0), jsxRuntime.jsx(MobileClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) : (jsxRuntime.jsxs(Container$1e, { children: [jsxRuntime.jsx(DesktopDollarPart, { children: clubPrice }, void 0), jsxRuntime.jsx(DesktopClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) }, void 0));
|
|
6749
6749
|
};
|
|
6750
|
-
var templateObject_1$1X, templateObject_2$1v, templateObject_3$1c, templateObject_4$Z, templateObject_5$M, templateObject_6$
|
|
6750
|
+
var templateObject_1$1X, templateObject_2$1v, templateObject_3$1c, templateObject_4$Z, templateObject_5$M, templateObject_6$E, templateObject_7$w, templateObject_8$p;
|
|
6751
6751
|
|
|
6752
6752
|
var Spacing = function (_a) {
|
|
6753
6753
|
var size = _a.size, _b = _a.type, type = _b === void 0 ? 'block' : _b, children = _a.children, styleProp = _a.style;
|
|
@@ -7123,8 +7123,8 @@ var HTMLVideo = newStyled.video(templateObject_2$1n || (templateObject_2$1n = __
|
|
|
7123
7123
|
var PlayIcon = newStyled(Icon.PDP.PlayVideo)(templateObject_3$18 || (templateObject_3$18 = __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"])));
|
|
7124
7124
|
var PlayContainer = newStyled.div(templateObject_4$W || (templateObject_4$W = __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 &:hover {\n cursor: pointer;\n }\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\n &:hover {\n cursor: pointer;\n }\n"])));
|
|
7125
7125
|
var PauseContainer = newStyled.div(templateObject_5$L || (templateObject_5$L = __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"])));
|
|
7126
|
-
var MuteButton = newStyled.button(templateObject_6$
|
|
7127
|
-
var templateObject_1$1K, templateObject_2$1n, templateObject_3$18, templateObject_4$W, templateObject_5$L, templateObject_6$
|
|
7126
|
+
var MuteButton = newStyled.button(templateObject_6$D || (templateObject_6$D = __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"])));
|
|
7127
|
+
var templateObject_1$1K, templateObject_2$1n, templateObject_3$18, templateObject_4$W, templateObject_5$L, templateObject_6$D;
|
|
7128
7128
|
|
|
7129
7129
|
var Video$1 = function (_a) {
|
|
7130
7130
|
var _b, _c;
|
|
@@ -7462,13 +7462,13 @@ var TopTagContainer$9 = newStyled.div(templateObject_5$J || (templateObject_5$J
|
|
|
7462
7462
|
var style = _a.style;
|
|
7463
7463
|
return style.width;
|
|
7464
7464
|
});
|
|
7465
|
-
var BottomTagContainer$9 = newStyled.div(templateObject_6$
|
|
7465
|
+
var BottomTagContainer$9 = newStyled.div(templateObject_6$C || (templateObject_6$C = __makeTemplateObject(["\n position: absolute;\n bottom: 10%;\n left: 0;\n width: ", ";\n z-index: 1;\n"], ["\n position: absolute;\n bottom: 10%;\n left: 0;\n width: ", ";\n z-index: 1;\n"])), function (_a) {
|
|
7466
7466
|
var style = _a.style;
|
|
7467
7467
|
return style.width;
|
|
7468
7468
|
});
|
|
7469
7469
|
var MarginTopContainer$1 = newStyled.div(templateObject_7$v || (templateObject_7$v = __makeTemplateObject(["\n margin-top: 8px;\n"], ["\n margin-top: 8px;\n"])));
|
|
7470
7470
|
var ClubOfferPriceLabelWrapper = newStyled.div(templateObject_8$o || (templateObject_8$o = __makeTemplateObject(["\n margin-top: 2px;\n margin-bottom: 2px;\n"], ["\n margin-top: 2px;\n margin-bottom: 2px;\n"])));
|
|
7471
|
-
var templateObject_1$1G, templateObject_2$1k, templateObject_3$16, templateObject_4$U, templateObject_5$J, templateObject_6$
|
|
7471
|
+
var templateObject_1$1G, templateObject_2$1k, templateObject_3$16, templateObject_4$U, templateObject_5$J, templateObject_6$C, templateObject_7$v, templateObject_8$o;
|
|
7472
7472
|
|
|
7473
7473
|
var ProductItemMobile = function (_a) {
|
|
7474
7474
|
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
|
|
@@ -7618,7 +7618,7 @@ var TopTagContainer$8 = newStyled.div(templateObject_5$I || (templateObject_5$I
|
|
|
7618
7618
|
var style = _a.style;
|
|
7619
7619
|
return style.width;
|
|
7620
7620
|
});
|
|
7621
|
-
var TopRightTagContainer$3 = newStyled.div(templateObject_6$
|
|
7621
|
+
var TopRightTagContainer$3 = newStyled.div(templateObject_6$B || (templateObject_6$B = __makeTemplateObject(["\n position: absolute;\n right: 0;\n top: 0;\n z-index: 1;\n"], ["\n position: absolute;\n right: 0;\n top: 0;\n z-index: 1;\n"])));
|
|
7622
7622
|
var BottomTagContainer$8 = newStyled.div(templateObject_7$u || (templateObject_7$u = __makeTemplateObject(["\n position: absolute;\n bottom: 10%;\n left: 0;\n width: ", ";\n z-index: 1;\n"], ["\n position: absolute;\n bottom: 10%;\n left: 0;\n width: ", ";\n z-index: 1;\n"])), function (_a) {
|
|
7623
7623
|
var style = _a.style;
|
|
7624
7624
|
return style.width;
|
|
@@ -7696,7 +7696,7 @@ var ProductItemTK = function (_a) {
|
|
|
7696
7696
|
colorPicker.position === 'middle' &&
|
|
7697
7697
|
!colorPicker.shouldStopCardClick && 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));
|
|
7698
7698
|
};
|
|
7699
|
-
var templateObject_1$1F, templateObject_2$1j, templateObject_3$15, templateObject_4$T, templateObject_5$I, templateObject_6$
|
|
7699
|
+
var templateObject_1$1F, templateObject_2$1j, templateObject_3$15, templateObject_4$T, templateObject_5$I, templateObject_6$B, templateObject_7$u, templateObject_8$n;
|
|
7700
7700
|
|
|
7701
7701
|
var Container$15 = newStyled.div(templateObject_1$1E || (templateObject_1$1E = __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"])));
|
|
7702
7702
|
function withProductGrid(ProductItemComponent, data) {
|
|
@@ -7873,13 +7873,13 @@ var Row$2 = newStyled.div(templateObject_3$13 || (templateObject_3$13 = __makeTe
|
|
|
7873
7873
|
});
|
|
7874
7874
|
var H5 = newStyled.h5(templateObject_4$R || (templateObject_4$R = __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; });
|
|
7875
7875
|
var H3 = newStyled.h3(templateObject_5$G || (templateObject_5$G = __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; });
|
|
7876
|
-
var FreeShipping = newStyled.span(templateObject_6$
|
|
7876
|
+
var FreeShipping = newStyled.span(templateObject_6$A || (templateObject_6$A = __makeTemplateObject(["\n font-weight: 600;\n color: ", ";\n"], ["\n font-weight: 600;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
7877
7877
|
var CrossSellCheckbox = function (_a) {
|
|
7878
7878
|
var imageURL = _a.imageURL, title = _a.title, description = _a.description, freeShippingText = _a.freeShippingText, rightToLeft = _a.rightToLeft, onChange = _a.onChange;
|
|
7879
7879
|
var theme = useTheme();
|
|
7880
7880
|
return (jsxRuntime.jsxs(Wrapper$5, __assign$1({ backgroundColor: theme.colors.shades['10'].color, rightToLeft: Boolean(rightToLeft) }, { children: [jsxRuntime.jsx(Checkbox, { text: "", id: "checkbox", onChange: onChange, size: exports.ComponentSize.Small, variant: "secondary" }, void 0), jsxRuntime.jsxs(Row$2, __assign$1({ rightToLeft: Boolean(rightToLeft) }, { children: [jsxRuntime.jsx(Image$3, { src: imageURL, alt: "Cross sell image", borderRadius: "0.5rem" }, void 0), jsxRuntime.jsxs(Col$1, { children: [jsxRuntime.jsx(H5, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0), jsxRuntime.jsxs(H3, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: [description, jsxRuntime.jsxs(FreeShipping, __assign$1({ color: theme.colors.shades['700'].color }, { children: [' ', "+ ", freeShippingText] }), void 0)] }), void 0)] }, void 0)] }), void 0)] }), void 0));
|
|
7881
7881
|
};
|
|
7882
|
-
var templateObject_1$1A, templateObject_2$1f, templateObject_3$13, templateObject_4$R, templateObject_5$G, templateObject_6$
|
|
7882
|
+
var templateObject_1$1A, templateObject_2$1f, templateObject_3$13, templateObject_4$R, templateObject_5$G, templateObject_6$A;
|
|
7883
7883
|
|
|
7884
7884
|
var index$1 = /*#__PURE__*/Object.freeze({
|
|
7885
7885
|
__proto__: null,
|
|
@@ -8059,7 +8059,7 @@ var IconContainer$4 = newStyled.div(templateObject_5$F || (templateObject_5$F =
|
|
|
8059
8059
|
marginBottom: ['10px', '0'],
|
|
8060
8060
|
width: ['auto', '1.5rem'],
|
|
8061
8061
|
}));
|
|
8062
|
-
var SectionTitle = newStyled.h1(templateObject_6$
|
|
8062
|
+
var SectionTitle = newStyled.h1(templateObject_6$z || (templateObject_6$z = __makeTemplateObject(["\n ", "\n ", "\n margin: 0;\n text-transform: uppercase;\n"], ["\n ", "\n ", "\n margin: 0;\n text-transform: uppercase;\n"])), mediaQueries({
|
|
8063
8063
|
display: ['block', 'flex'],
|
|
8064
8064
|
}), function (_a) {
|
|
8065
8065
|
var theme = _a.theme;
|
|
@@ -8082,7 +8082,7 @@ var DeliveryDetails = function (_a) {
|
|
|
8082
8082
|
var theme = useTheme();
|
|
8083
8083
|
return (jsxRuntime.jsxs("div", __assign$1({ "data-testid": "DeliveryDetails" }, { children: [jsxRuntime.jsx(Title$5, __assign$1({ color: theme.colors.shades[700].color }, { children: deliveryDetailsText }), void 0), jsxRuntime.jsx(Line, { backgroundColor: theme.colors.shades['200'].color }, void 0), note && jsxRuntime.jsx(Note, __assign$1({}, note), void 0), jsxRuntime.jsxs(Row$1, __assign$1({ "data-testid": "DD-row", theme: theme }, { children: [jsxRuntime.jsxs(Col, __assign$1({ theme: theme }, { children: [jsxRuntime.jsxs(SectionTitle, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(IconContainer$4, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Icon.PDP.Clock, { width: 1.5 }, void 0) }), void 0), arrivingBy.title] }), void 0), jsxRuntime.jsx(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: arrivingBy.details }), void 0)] }), void 0), jsxRuntime.jsxs(Col, __assign$1({ theme: theme }, { children: [jsxRuntime.jsxs(SectionTitle, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(IconContainer$4, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Icon.Navigation.MapMarker, { width: 1.5 }, void 0) }), void 0), shippingTo.title] }), void 0), jsxRuntime.jsx(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: shippingTo.details }), void 0)] }), void 0), jsxRuntime.jsxs(Col, __assign$1({ theme: theme }, { children: [jsxRuntime.jsxs(SectionTitle, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(IconContainer$4, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Icon.Messaging.Messenger, { width: 1.5 }, void 0) }), void 0), instantOrderUpdate.title] }), void 0), jsxRuntime.jsx(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: instantOrderUpdate.details }), void 0), instantOrderUpdate.keepMeUpdated && (jsxRuntime.jsxs(KeepMeUpdated, __assign$1({ onClick: instantOrderUpdate.keepMeUpdated.onClick, borderColor: theme.colors.shades['150'].color }, { children: [jsxRuntime.jsx(Icon.Messaging.Messenger, { width: 1, height: 1, fill: "#0078FF" }, void 0), instantOrderUpdate.keepMeUpdated.title] }), void 0))] }), void 0)] }), void 0)] }), void 0));
|
|
8084
8084
|
};
|
|
8085
|
-
var templateObject_1$1x, templateObject_2$1c, templateObject_3$11, templateObject_4$P, templateObject_5$F, templateObject_6$
|
|
8085
|
+
var templateObject_1$1x, templateObject_2$1c, templateObject_3$11, templateObject_4$P, templateObject_5$F, templateObject_6$z, templateObject_7$t, templateObject_8$m;
|
|
8086
8086
|
|
|
8087
8087
|
var Backdrop = newStyled.div(templateObject_1$1w || (templateObject_1$1w = __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) {
|
|
8088
8088
|
var top = _a.top;
|
|
@@ -8150,8 +8150,8 @@ var Item$2 = newStyled.li(templateObject_2$1a || (templateObject_2$1a = __makeTe
|
|
|
8150
8150
|
var DropdownWrapper = newStyled.div(templateObject_3$10 || (templateObject_3$10 = __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"])));
|
|
8151
8151
|
var ArrowContainer$1 = newStyled.div(templateObject_4$O || (templateObject_4$O = __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"])));
|
|
8152
8152
|
var StyledDropdown = newStyled.ul(templateObject_5$E || (templateObject_5$E = __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; });
|
|
8153
|
-
var DropdownItem = newStyled.li(templateObject_6$
|
|
8154
|
-
var templateObject_1$1v, templateObject_2$1a, templateObject_3$10, templateObject_4$O, templateObject_5$E, templateObject_6$
|
|
8153
|
+
var DropdownItem = newStyled.li(templateObject_6$y || (templateObject_6$y = __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; });
|
|
8154
|
+
var templateObject_1$1v, templateObject_2$1a, templateObject_3$10, templateObject_4$O, templateObject_5$E, templateObject_6$y;
|
|
8155
8155
|
|
|
8156
8156
|
var DropdownListIcons = function (_a) {
|
|
8157
8157
|
var items = _a.items;
|
|
@@ -8169,8 +8169,8 @@ var DropdownLabel = newStyled.div(templateObject_2$19 || (templateObject_2$19 =
|
|
|
8169
8169
|
var SizeLabel = newStyled.span(templateObject_3$$ || (templateObject_3$$ = __makeTemplateObject(["\n margin-right: 8px;\n"], ["\n margin-right: 8px;\n"])));
|
|
8170
8170
|
var DetailLabel = newStyled.span(templateObject_4$N || (templateObject_4$N = __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"])));
|
|
8171
8171
|
var DropdownOptions = newStyled.div(templateObject_5$D || (templateObject_5$D = __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"])));
|
|
8172
|
-
var DropdownOption = newStyled.div(templateObject_6$
|
|
8173
|
-
var templateObject_1$1u, templateObject_2$19, templateObject_3$$, templateObject_4$N, templateObject_5$D, templateObject_6$
|
|
8172
|
+
var DropdownOption = newStyled.div(templateObject_6$x || (templateObject_6$x = __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"])));
|
|
8173
|
+
var templateObject_1$1u, templateObject_2$19, templateObject_3$$, templateObject_4$N, templateObject_5$D, templateObject_6$x;
|
|
8174
8174
|
|
|
8175
8175
|
var SizeDropdown = function (_a) {
|
|
8176
8176
|
var options = _a.options, defaultLabel = _a.defaultLabel, onOptionSelect = _a.onOptionSelect;
|
|
@@ -8323,12 +8323,12 @@ var Header$4 = newStyled.div(templateObject_2$16 || (templateObject_2$16 = __mak
|
|
|
8323
8323
|
var MobileHeader = newStyled.div(templateObject_3$Y || (templateObject_3$Y = __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"])));
|
|
8324
8324
|
var MobileIconsContainer = newStyled.div(templateObject_4$K || (templateObject_4$K = __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"])));
|
|
8325
8325
|
var H4 = newStyled.h4(templateObject_5$B || (templateObject_5$B = __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; });
|
|
8326
|
-
var FilterLink = newStyled.a(templateObject_6$
|
|
8326
|
+
var FilterLink = newStyled.a(templateObject_6$w || (templateObject_6$w = __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; });
|
|
8327
8327
|
var OptionContainer = newStyled.div(templateObject_7$s || (templateObject_7$s = __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'); });
|
|
8328
8328
|
var ClearAll = newStyled.span(templateObject_8$l || (templateObject_8$l = __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; });
|
|
8329
8329
|
var MobileFooter = newStyled.div(templateObject_9$d || (templateObject_9$d = __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"])));
|
|
8330
8330
|
var MobileClearContainer = newStyled.div(templateObject_10$b || (templateObject_10$b = __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"])));
|
|
8331
|
-
var templateObject_1$1r, templateObject_2$16, templateObject_3$Y, templateObject_4$K, templateObject_5$B, templateObject_6$
|
|
8331
|
+
var templateObject_1$1r, templateObject_2$16, templateObject_3$Y, templateObject_4$K, templateObject_5$B, templateObject_6$w, templateObject_7$s, templateObject_8$l, templateObject_9$d, templateObject_10$b;
|
|
8332
8332
|
|
|
8333
8333
|
var UL = newStyled.ul(templateObject_1$1q || (templateObject_1$1q = __makeTemplateObject(["\n margin: 0;\n padding: 0;\n flex-wrap: wrap;\n display: flex;\n max-width: 100%;\n"], ["\n margin: 0;\n padding: 0;\n flex-wrap: wrap;\n display: flex;\n max-width: 100%;\n"])));
|
|
8334
8334
|
var LI = newStyled.li(templateObject_2$15 || (templateObject_2$15 = __makeTemplateObject(["\n list-style: none;\n background-color: ", ";\n padding: 0.375rem 0.625rem;\n border-radius: 0.5rem;\n font-size: 0.875rem;\n line-height: 1.125rem;\n color: ", ";\n font-weight: 400;\n margin-right: 0.5rem;\n margin-bottom: 0.5rem;\n display: flex;\n align-items: center;\n"], ["\n list-style: none;\n background-color: ", ";\n padding: 0.375rem 0.625rem;\n border-radius: 0.5rem;\n font-size: 0.875rem;\n line-height: 1.125rem;\n color: ", ";\n font-weight: 400;\n margin-right: 0.5rem;\n margin-bottom: 0.5rem;\n display: flex;\n align-items: center;\n"])), function (props) { return props.backgroundColor; }, function (props) { return props.color; });
|
|
@@ -12866,10 +12866,10 @@ var Container$$ = newStyled.div(templateObject_3$W || (templateObject_3$W = __ma
|
|
|
12866
12866
|
});
|
|
12867
12867
|
var Button$7 = newStyled.button(templateObject_4$J || (templateObject_4$J = __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"])));
|
|
12868
12868
|
var ArrowsContainer = newStyled.div(templateObject_5$A || (templateObject_5$A = __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"])));
|
|
12869
|
-
var ArrowBaseStyles = newStyled.div(templateObject_6$
|
|
12869
|
+
var ArrowBaseStyles = newStyled.div(templateObject_6$v || (templateObject_6$v = __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"])));
|
|
12870
12870
|
var ArrowPrev = newStyled(ArrowBaseStyles)(templateObject_7$r || (templateObject_7$r = __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"])));
|
|
12871
12871
|
var ArrowNext = newStyled(ArrowBaseStyles)(templateObject_8$k || (templateObject_8$k = __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"])));
|
|
12872
|
-
var templateObject_1$1l, templateObject_2$12, templateObject_3$W, templateObject_4$J, templateObject_5$A, templateObject_6$
|
|
12872
|
+
var templateObject_1$1l, templateObject_2$12, templateObject_3$W, templateObject_4$J, templateObject_5$A, templateObject_6$v, templateObject_7$r, templateObject_8$k;
|
|
12873
12873
|
|
|
12874
12874
|
var getLoadingProp = function (index, itemsOnViewport) {
|
|
12875
12875
|
var loading = 'eager';
|
|
@@ -14514,7 +14514,7 @@ var BottomTagContainer$7 = newStyled.div(templateObject_3$V || (templateObject_3
|
|
|
14514
14514
|
});
|
|
14515
14515
|
var TopRightTagWrapper = newStyled.div(templateObject_4$I || (templateObject_4$I = __makeTemplateObject(["\n position: absolute;\n right: 0;\n top: 0;\n"], ["\n position: absolute;\n right: 0;\n top: 0;\n"])));
|
|
14516
14516
|
var TopRightTagContainer$2 = newStyled.div(templateObject_5$z || (templateObject_5$z = __makeTemplateObject(["\n white-space: pre-wrap;\n"], ["\n white-space: pre-wrap;\n"])));
|
|
14517
|
-
var ButtonSecondaryOutlineWrapper = newStyled(ButtonSecondaryOutline)(templateObject_6$
|
|
14517
|
+
var ButtonSecondaryOutlineWrapper = newStyled(ButtonSecondaryOutline)(templateObject_6$u || (templateObject_6$u = __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"])));
|
|
14518
14518
|
var ImageStyled = newStyled(Image$3)(templateObject_7$q || (templateObject_7$q = __makeTemplateObject(["\n aspect-ratio: ", ";\n"], ["\n aspect-ratio: ", ";\n"])), function (_a) {
|
|
14519
14519
|
var theme = _a.theme, isRatioSquare = _a.isRatioSquare;
|
|
14520
14520
|
return isRatioSquare ? '1 / 1' : theme.component.gallery.aspectRatio;
|
|
@@ -14523,7 +14523,7 @@ var InnerImageZoomStyled = newStyled(InnerImageZoom)(templateObject_8$j || (temp
|
|
|
14523
14523
|
var theme = _a.theme, isRatioSquare = _a.isRatioSquare;
|
|
14524
14524
|
return isRatioSquare ? '1 / 1' : theme.component.gallery.aspectRatio;
|
|
14525
14525
|
});
|
|
14526
|
-
var templateObject_1$1k, templateObject_2$11, templateObject_3$V, templateObject_4$I, templateObject_5$z, templateObject_6$
|
|
14526
|
+
var templateObject_1$1k, templateObject_2$11, templateObject_3$V, templateObject_4$I, templateObject_5$z, templateObject_6$u, templateObject_7$q, templateObject_8$j;
|
|
14527
14527
|
|
|
14528
14528
|
var ImageProductSlide$1 = function (_a) {
|
|
14529
14529
|
var _b;
|
|
@@ -14745,8 +14745,8 @@ var AnimatedPlaceholder = newStyled.span(templateObject_5$y || (templateObject_5
|
|
|
14745
14745
|
var theme = _a.theme;
|
|
14746
14746
|
return theme.component.input.lineHeight;
|
|
14747
14747
|
});
|
|
14748
|
-
var ClearInput = newStyled.div(templateObject_6$
|
|
14749
|
-
var templateObject_1$1f, templateObject_2$_, templateObject_3$T, templateObject_4$H, templateObject_5$y, templateObject_6$
|
|
14748
|
+
var ClearInput = newStyled.div(templateObject_6$t || (templateObject_6$t = __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"])));
|
|
14749
|
+
var templateObject_1$1f, templateObject_2$_, templateObject_3$T, templateObject_4$H, templateObject_5$y, templateObject_6$t;
|
|
14750
14750
|
|
|
14751
14751
|
var BaseInput = function (_a) {
|
|
14752
14752
|
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"]);
|
|
@@ -14999,7 +14999,7 @@ var transformStyle = function (_a) {
|
|
|
14999
14999
|
return opened
|
|
15000
15000
|
? css(templateObject_3$R || (templateObject_3$R = __makeTemplateObject(["\n transform: ", ";\n top: ", ";\n "], ["\n transform: ", ";\n top: ", ";\n "])), maxFullScreen ? 'translateY(0)' : 'translate(-50%, -50%)', maxFullScreen ? '0' : initialTop ? initialTop : '50%') : css(templateObject_4$G || (templateObject_4$G = __makeTemplateObject(["\n transform: ", ";\n top: ", ";\n "], ["\n transform: ", ";\n top: ", ";\n "])), maxFullScreen ? 'translateY(10%)' : 'translate(-50%, -40%)', maxFullScreen ? '0' : initialTop ? initialTop : '50%');
|
|
15001
15001
|
};
|
|
15002
|
-
var Container$T = newStyled.div(templateObject_6$
|
|
15002
|
+
var Container$T = newStyled.div(templateObject_6$s || (templateObject_6$s = __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) {
|
|
15003
15003
|
var width = _a.width;
|
|
15004
15004
|
return width
|
|
15005
15005
|
? css(templateObject_5$x || (templateObject_5$x = __makeTemplateObject(["\n width: ", ";\n "], ["\n width: ", ";\n "])), width) : mediaQueries({
|
|
@@ -15047,7 +15047,7 @@ var useModal = function (id) {
|
|
|
15047
15047
|
close: close,
|
|
15048
15048
|
}); }, [close, open, opened]);
|
|
15049
15049
|
};
|
|
15050
|
-
var templateObject_1$1a, templateObject_2$W, templateObject_3$R, templateObject_4$G, templateObject_5$x, templateObject_6$
|
|
15050
|
+
var templateObject_1$1a, templateObject_2$W, templateObject_3$R, templateObject_4$G, templateObject_5$x, templateObject_6$s, templateObject_7$p;
|
|
15051
15051
|
|
|
15052
15052
|
var htmlReactParser = {exports: {}};
|
|
15053
15053
|
|
|
@@ -18930,7 +18930,7 @@ var Card$1 = newStyled.div(templateObject_2$T || (templateObject_2$T = __makeTem
|
|
|
18930
18930
|
var Tag$1 = newStyled.div(templateObject_3$Q || (templateObject_3$Q = __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"])));
|
|
18931
18931
|
var Label$3 = newStyled.div(templateObject_4$F || (templateObject_4$F = __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"])));
|
|
18932
18932
|
var Check = newStyled.div(templateObject_5$w || (templateObject_5$w = __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"])));
|
|
18933
|
-
var IconContainer$2 = newStyled.div(templateObject_6$
|
|
18933
|
+
var IconContainer$2 = newStyled.div(templateObject_6$r || (templateObject_6$r = __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"])));
|
|
18934
18934
|
var IconPlaceholder = newStyled.div(templateObject_7$o || (templateObject_7$o = __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"])));
|
|
18935
18935
|
var DiscountContainer = newStyled.div(templateObject_8$i || (templateObject_8$i = __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"])));
|
|
18936
18936
|
var PackSelector = function (_a) {
|
|
@@ -18962,7 +18962,7 @@ var PackCard = function (_a) {
|
|
|
18962
18962
|
currency: currencyCode || 'USD',
|
|
18963
18963
|
}), ' ', "each"] }), void 0)] }), void 0));
|
|
18964
18964
|
};
|
|
18965
|
-
var templateObject_1$17, templateObject_2$T, templateObject_3$Q, templateObject_4$F, templateObject_5$w, templateObject_6$
|
|
18965
|
+
var templateObject_1$17, templateObject_2$T, templateObject_3$Q, templateObject_4$F, templateObject_5$w, templateObject_6$r, templateObject_7$o, templateObject_8$i;
|
|
18966
18966
|
|
|
18967
18967
|
var Container$P = newStyled.div(templateObject_1$16 || (templateObject_1$16 = __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"])));
|
|
18968
18968
|
var IconContainer$1 = newStyled.div(templateObject_2$S || (templateObject_2$S = __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"])));
|
|
@@ -19107,7 +19107,7 @@ var PriceContainer = newStyled.div(templateObject_4$D || (templateObject_4$D = _
|
|
|
19107
19107
|
: 'justify-content: end';
|
|
19108
19108
|
});
|
|
19109
19109
|
var Quantity = newStyled.div(templateObject_5$v || (templateObject_5$v = __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"])));
|
|
19110
|
-
var StyledSpan = newStyled.span(templateObject_6$
|
|
19110
|
+
var StyledSpan = newStyled.span(templateObject_6$q || (templateObject_6$q = __makeTemplateObject(["\n display: block;\n transform: translateY(1px);\n"], ["\n display: block;\n transform: translateY(1px);\n"])));
|
|
19111
19111
|
var Gift = newStyled.span(templateObject_7$n || (templateObject_7$n = __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) {
|
|
19112
19112
|
var theme = _a.theme;
|
|
19113
19113
|
return theme.colors.semantic.urgent.color;
|
|
@@ -19118,7 +19118,7 @@ var SimpleOrderItem = function (_a) {
|
|
|
19118
19118
|
var theme = useTheme();
|
|
19119
19119
|
return (jsxRuntime.jsxs(Container$N, __assign$1({ className: className }, { children: [jsxRuntime.jsxs(ImageContainer$3, { children: [jsxRuntime.jsx(Image$3, { src: image.src, alt: image.alt, width: "4.063rem", height: "5.375rem", objectFit: "cover", objectPosition: "center" }, void 0), quantity ? (jsxRuntime.jsx(Quantity, __assign$1({ "data-testid": "order-item-quantity" }, { children: jsxRuntime.jsx(StyledSpan, { children: quantity }, void 0) }), void 0)) : null] }, void 0), jsxRuntime.jsxs(DescriptionContainer$1, __assign$1({ "data-testid": "order-item-description-container", theme: theme }, { children: [jsxRuntime.jsx(Title$3, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "product-title" }, { children: title }), void 0), subtitle && (jsxRuntime.jsx(Subtitle, __assign$1({ color: ((_c = (_b = theme.component.pricing) === null || _b === void 0 ? void 0 : _b.subtitle) === null || _c === void 0 ? void 0 : _c.color) || theme.colors.shades['700'].color, fontSize: ((_e = (_d = theme.component.pricing) === null || _d === void 0 ? void 0 : _d.subtitle) === null || _e === void 0 ? void 0 : _e.fontSize) || '0.75rem', lineHeight: ((_g = (_f = theme.component.pricing) === null || _f === void 0 ? void 0 : _f.subtitle) === null || _g === void 0 ? void 0 : _g.lineHeight) || '1rem', fontWeight: ((_j = (_h = theme.component.pricing) === null || _h === void 0 ? void 0 : _h.subtitle) === null || _j === void 0 ? void 0 : _j.fontWeight) || 'normal', "data-testid": "product-variant-title", margin: "0.5rem 0 0 0" }, { children: subtitle }), void 0)), midElement, isGift && jsxRuntime.jsx(Gift, { children: "Limited Time Only" }, void 0), jsxRuntime.jsxs(PriceContainer, __assign$1({ "data-testid": "order-item-price-container", withTag: !!tag, theme: theme }, { children: [tag && (jsxRuntime.jsx(OfferBanner, { discountAppliedText: tag === null || tag === void 0 ? void 0 : tag.text, backgroundColor: tag === null || tag === void 0 ? void 0 : tag.backgroundColor }, void 0)), isGift ? (jsxRuntime.jsx(Gift, { children: "GIFT" }, void 0)) : (jsxRuntime.jsx(PriceLabel$1, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, color: price.color || theme.colors.shades['700'].color, size: theme.component.pricing.priceLabel.price.size, finalPriceStyle: finalPriceStyle, originalPriceStyled: true }, void 0))] }), void 0)] }), void 0)] }), void 0));
|
|
19120
19120
|
};
|
|
19121
|
-
var templateObject_1$14, templateObject_2$R, templateObject_3$O, templateObject_4$D, templateObject_5$v, templateObject_6$
|
|
19121
|
+
var templateObject_1$14, templateObject_2$R, templateObject_3$O, templateObject_4$D, templateObject_5$v, templateObject_6$q, templateObject_7$n;
|
|
19122
19122
|
|
|
19123
19123
|
var P$1 = newStyled.p(function (_a) {
|
|
19124
19124
|
var color = _a.color;
|
|
@@ -19434,7 +19434,7 @@ var Content$1 = newStyled.div(templateObject_2$N || (templateObject_2$N = __make
|
|
|
19434
19434
|
var StarsContent = newStyled.div(templateObject_3$K || (templateObject_3$K = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n"], ["\n display: flex;\n justify-content: space-between;\n"])));
|
|
19435
19435
|
var ReviewContainer$1 = newStyled.div(templateObject_4$B || (templateObject_4$B = __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"])));
|
|
19436
19436
|
var DateText$1 = newStyled.span(templateObject_5$u || (templateObject_5$u = __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"])));
|
|
19437
|
-
var ReviewerName$1 = newStyled.h1(templateObject_6$
|
|
19437
|
+
var ReviewerName$1 = newStyled.h1(templateObject_6$p || (templateObject_6$p = __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"])));
|
|
19438
19438
|
var VerifiedText = newStyled.h1(templateObject_7$m || (templateObject_7$m = __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"])));
|
|
19439
19439
|
var ReviewTitle$1 = newStyled.h2(templateObject_8$h || (templateObject_8$h = __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"])));
|
|
19440
19440
|
var ReviewDescription = newStyled.div(templateObject_9$c || (templateObject_9$c = __makeTemplateObject(["\n font-weight: normal;\n font-size: 16px;\n margin: 0;\n line-height: 25px;\n word-break: break-word;\n margin-top: 5px;\n white-space: pre-wrap;\n"], ["\n font-weight: normal;\n font-size: 16px;\n margin: 0;\n line-height: 25px;\n word-break: break-word;\n margin-top: 5px;\n white-space: pre-wrap;\n"])));
|
|
@@ -19470,7 +19470,7 @@ var Review$1 = function (_a) {
|
|
|
19470
19470
|
return (jsxRuntime.jsx(Modal, __assign$1({ id: modalId, maxFullScreen: maxFullScreen, padding: "0" }, { children: jsxRuntime.jsxs(Container$I, { children: [jsxRuntime.jsx(CloseButton, __assign$1({ onClick: close }, { children: "X" }), void 0), jsxRuntime.jsx(ImageContainer$2, { children: image &&
|
|
19471
19471
|
(!isVideo ? (jsxRuntime.jsx(ImageWrapper$3, { src: image.src, alt: image.alt }, void 0)) : (jsxRuntime.jsx(VideoWrapper, { ref: refVideo, src: image.src, width: "100%", controls: true }, void 0))) }, void 0), jsxRuntime.jsxs(DescriptionContainer, { children: [opened && (jsxRuntime.jsxs(ReviewerName$1, { children: [reviewerName, verified && jsxRuntime.jsx(VerifiedText, { children: "Verified Buyer" }, void 0)] }, void 0)), jsxRuntime.jsxs(Content$1, __assign$1({ "data-testid": "review-detail-content" }, { children: [jsxRuntime.jsxs(StarsContent, { children: [jsxRuntime.jsx(StarList, { starsNumber: 5, rating: rating, fill: stars.color, size: stars.size }, void 0), jsxRuntime.jsx(DateText$1, { children: formatDate(date) }, void 0)] }, void 0), jsxRuntime.jsxs(ReviewContainer$1, { children: [jsxRuntime.jsx(ReviewTitle$1, { children: title }, void 0), jsxRuntime.jsx(ReviewDescription, { dangerouslySetInnerHTML: { __html: description } }, void 0)] }, void 0), jsxRuntime.jsxs(HelpfulContainer, { children: [jsxRuntime.jsxs(HelpfulAction, __assign$1({ "data-testid": "helpful-action", onClick: function () { return (helpfulAction ? helpfulAction(reviewId) : undefined); } }, { children: [jsxRuntime.jsx(Icon.Custom.ThumbsUp, { width: 1, height: 1, fill: "#000" }, void 0), jsxRuntime.jsx(HelpfulCount, { children: helpfulCount }, void 0)] }), void 0), jsxRuntime.jsxs(NotHelpfulAction, __assign$1({ "data-testid": "not-helpful-action", onClick: function () { return (notHelpfulAction ? notHelpfulAction(reviewId) : undefined); } }, { children: [jsxRuntime.jsx(Icon.Custom.ThumbsDown, { width: 1, height: 1, fill: "#000" }, void 0), jsxRuntime.jsx(NotHelpfulCount, { children: notHelpfulCount }, void 0)] }), void 0)] }, void 0)] }), void 0), productImage && productLink && (jsxRuntime.jsxs(ProductContainer, __assign$1({ onClick: function () { return (window.location.href = productLink); } }, { children: [jsxRuntime.jsx(ProductImageWrapper, { children: jsxRuntime.jsx(ProductImage, { src: productImage, alt: "productImage" }, void 0) }, void 0), jsxRuntime.jsx(ProductTitle, { children: productTitle }, void 0)] }), void 0))] }, void 0)] }, void 0) }), void 0));
|
|
19472
19472
|
};
|
|
19473
|
-
var templateObject_1$$, templateObject_2$N, templateObject_3$K, templateObject_4$B, templateObject_5$u, templateObject_6$
|
|
19473
|
+
var templateObject_1$$, templateObject_2$N, templateObject_3$K, templateObject_4$B, templateObject_5$u, templateObject_6$p, templateObject_7$m, templateObject_8$h, templateObject_9$c, templateObject_10$a, templateObject_11$7, templateObject_12$4, templateObject_13$3, 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;
|
|
19474
19474
|
|
|
19475
19475
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_DESKTOP = 500;
|
|
19476
19476
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_MOBILE = 168;
|
|
@@ -19479,7 +19479,7 @@ var Heading = newStyled.div(templateObject_2$M || (templateObject_2$M = __makeTe
|
|
|
19479
19479
|
var Content = newStyled.div(templateObject_3$J || (templateObject_3$J = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n"], ["\n display: flex;\n justify-content: space-between;\n"])));
|
|
19480
19480
|
var ReviewContainer = newStyled.div(templateObject_4$A || (templateObject_4$A = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
19481
19481
|
var DateText = newStyled.span(templateObject_5$t || (templateObject_5$t = __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"])));
|
|
19482
|
-
var VariantText = newStyled.div(templateObject_6$
|
|
19482
|
+
var VariantText = newStyled.div(templateObject_6$o || (templateObject_6$o = __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"])));
|
|
19483
19483
|
var ReviewerName = newStyled.h2(templateObject_7$l || (templateObject_7$l = __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"])));
|
|
19484
19484
|
var ReviewTitle = newStyled.h3(templateObject_8$g || (templateObject_8$g = __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"])));
|
|
19485
19485
|
var ReviewDescriptionDesktop = newStyled.div(templateObject_9$b || (templateObject_9$b = __makeTemplateObject(["\n display: none;\n\n @media (min-width: 768px) {\n display: block;\n font-weight: normal;\n font-size: 16px;\n line-height: 24px;\n margin: 0;\n white-space: pre-wrap;\n\n a.see-more {\n color: var(--colors-semantic-informative-color);\n text-decoration: underline;\n cursor: pointer;\n font-weight: 600;\n white-space: nowrap;\n }\n }\n"], ["\n display: none;\n\n @media (min-width: 768px) {\n display: block;\n font-weight: normal;\n font-size: 16px;\n line-height: 24px;\n margin: 0;\n white-space: pre-wrap;\n\n a.see-more {\n color: var(--colors-semantic-informative-color);\n text-decoration: underline;\n cursor: pointer;\n font-weight: 600;\n white-space: nowrap;\n }\n }\n"])));
|
|
@@ -19526,14 +19526,14 @@ var Review = function (_a) {
|
|
|
19526
19526
|
: description,
|
|
19527
19527
|
} }, void 0), jsxRuntime.jsxs(HelpfulContainerDesktop, __assign$1({ showMoreDesktop: description.length > REVIEWS_DESCRIPTION_MAX_LENGTH_DESKTOP }, { children: [helpfulActionText && helpfulAction && (jsxRuntime.jsx(ButtonSecondaryWrapper, { onClick: function () { return helpfulAction(reviewId); }, text: helpfulActionText, size: exports.ComponentSize.Small }, void 0)), (helpfulCount || (hasTextWhenHelpfulCount0 && helpfulCount === 0)) && (jsxRuntime.jsxs(HelpfulText, { children: [helpfulCount, " people found this helpful"] }, void 0))] }), void 0)] }, void 0), jsxRuntime.jsxs(ImagesContainer, { children: [jsxRuntime.jsxs(Images, { children: [images === null || images === void 0 ? void 0 : images.map(function (image) { return (jsxRuntime.jsx(ImageWrapper$2, __assign$1({ onClick: function () { return onClickImage && onClickImage(image.src); } }, { children: jsxRuntime.jsx(Image$3, { src: image.src, alt: image.alt, height: "10rem", width: "7.5rem" }, void 0) }), image.src)); }), !images || (images.length === 0 && jsxRuntime.jsx(ImageSpace, {}, void 0))] }, void 0), jsxRuntime.jsx(VariantText, { children: reviewVariant }, void 0)] }, void 0)] }), void 0), jsxRuntime.jsx(HelpfulTexti, {}, void 0), jsxRuntime.jsxs(HelpfulContainerMobile, { children: [helpfulActionText && helpfulAction && (jsxRuntime.jsx(ButtonSecondaryWrapper, { onClick: function () { return helpfulAction(reviewId); }, text: helpfulActionText, size: exports.ComponentSize.Small }, void 0)), (helpfulCount || (hasTextWhenHelpfulCount0 && helpfulCount === 0)) && (jsxRuntime.jsxs(HelpfulText, { children: [helpfulCount, " people found this helpful"] }, void 0))] }, void 0)] }, void 0));
|
|
19528
19528
|
};
|
|
19529
|
-
var templateObject_1$_, templateObject_2$M, templateObject_3$J, templateObject_4$A, templateObject_5$t, templateObject_6$
|
|
19529
|
+
var templateObject_1$_, templateObject_2$M, templateObject_3$J, templateObject_4$A, templateObject_5$t, templateObject_6$o, templateObject_7$l, templateObject_8$g, templateObject_9$b, templateObject_10$9, templateObject_11$6, templateObject_12$3, templateObject_13$2, templateObject_14$1, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19;
|
|
19530
19530
|
|
|
19531
19531
|
var Container$G = newStyled.div(templateObject_1$Z || (templateObject_1$Z = __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"])));
|
|
19532
19532
|
var ReviewsContainer = newStyled.div(templateObject_2$L || (templateObject_2$L = __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"])));
|
|
19533
19533
|
var ReviewsCount = newStyled.div(templateObject_3$I || (templateObject_3$I = __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"])));
|
|
19534
19534
|
var ReviewsStars = newStyled.div(templateObject_4$z || (templateObject_4$z = __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"])));
|
|
19535
19535
|
var ReviewsTextCount = newStyled(Text$7)(templateObject_5$s || (templateObject_5$s = __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"])));
|
|
19536
|
-
var ReviewsImages = newStyled.div(templateObject_6$
|
|
19536
|
+
var ReviewsImages = newStyled.div(templateObject_6$n || (templateObject_6$n = __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"])));
|
|
19537
19537
|
var SummaryItem = newStyled.div(templateObject_7$k || (templateObject_7$k = __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) {
|
|
19538
19538
|
var backgroundUrl = _a.backgroundUrl;
|
|
19539
19539
|
return "url(".concat(backgroundUrl, ")");
|
|
@@ -19544,7 +19544,7 @@ var ReviewsHeader = function (_a) {
|
|
|
19544
19544
|
var theme = useTheme();
|
|
19545
19545
|
return (jsxRuntime.jsxs(Container$G, { children: [jsxRuntime.jsx(Text$7, __assign$1({ variant: "heading3", weight: "bold", style: { margin: '10px 0' } }, { children: title }), void 0), jsxRuntime.jsxs(ReviewsContainer, { children: [jsxRuntime.jsxs(ReviewsCount, { children: [jsxRuntime.jsxs(ReviewsStars, { children: [jsxRuntime.jsx(ReviewsTextCount, __assign$1({ variant: "heading3", weight: "bold" }, { children: rating }), void 0), jsxRuntime.jsx(StarList, { rating: rating, size: exports.ComponentSize.Medium, starsNumber: starsNumber, fill: theme.component.stars.element.color }, void 0)] }, void 0), jsxRuntime.jsxs(Text$7, __assign$1({ variant: "body", size: "small", weight: "regular", style: { marginBottom: '20px' } }, { children: [reviews, " ", reviewsText] }), void 0)] }, void 0), jsxRuntime.jsx(ReviewsImages, { children: reviewsSummary.map(function (summaryItem) { return (jsxRuntime.jsx(SummaryItem, { onClick: function () { return onClickReview(summaryItem); }, backgroundUrl: summaryItem, "data-testid": "summary-review-item" }, summaryItem)); }) }, void 0)] }, void 0)] }, void 0));
|
|
19546
19546
|
};
|
|
19547
|
-
var templateObject_1$Z, templateObject_2$L, templateObject_3$I, templateObject_4$z, templateObject_5$s, templateObject_6$
|
|
19547
|
+
var templateObject_1$Z, templateObject_2$L, templateObject_3$I, templateObject_4$z, templateObject_5$s, templateObject_6$n, templateObject_7$k;
|
|
19548
19548
|
|
|
19549
19549
|
var Container$F = newStyled.div(templateObject_1$Y || (templateObject_1$Y = __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"])));
|
|
19550
19550
|
var Text$1 = newStyled.p(templateObject_2$K || (templateObject_2$K = __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; });
|
|
@@ -19796,12 +19796,12 @@ var TableCell$3 = newStyled.td(templateObject_2$G || (templateObject_2$G = __mak
|
|
|
19796
19796
|
var TableHead$3 = newStyled.th(templateObject_3$E || (templateObject_3$E = __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; });
|
|
19797
19797
|
var Label$2 = newStyled('div')(templateObject_4$x || (templateObject_4$x = __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"])));
|
|
19798
19798
|
var TopLabel$1 = newStyled(Label$2)(templateObject_5$q || (templateObject_5$q = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
19799
|
-
var LeftLabel$1 = newStyled(Label$2)(templateObject_6$
|
|
19799
|
+
var LeftLabel$1 = newStyled(Label$2)(templateObject_6$m || (templateObject_6$m = __makeTemplateObject(["\n width: 20px;\n transform: rotate(270deg);\n"], ["\n width: 20px;\n transform: rotate(270deg);\n"])));
|
|
19800
19800
|
var Container$y = newStyled('div')(templateObject_7$j || (templateObject_7$j = __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"])));
|
|
19801
19801
|
var LabelText$1 = newStyled('span')(templateObject_8$f || (templateObject_8$f = __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"])));
|
|
19802
19802
|
var Column$2 = newStyled('div')(templateObject_9$a || (templateObject_9$a = __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"])));
|
|
19803
19803
|
var TableRow$3 = newStyled.tr(templateObject_10$8 || (templateObject_10$8 = __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; });
|
|
19804
|
-
var templateObject_1$R, templateObject_2$G, templateObject_3$E, templateObject_4$x, templateObject_5$q, templateObject_6$
|
|
19804
|
+
var templateObject_1$R, templateObject_2$G, templateObject_3$E, templateObject_4$x, templateObject_5$q, templateObject_6$m, templateObject_7$j, templateObject_8$f, templateObject_9$a, templateObject_10$8;
|
|
19805
19805
|
|
|
19806
19806
|
var getIsOdd$2 = function (number) { return number % 2 !== 0; };
|
|
19807
19807
|
var getCellColor$2 = function (index, cell) {
|
|
@@ -20176,8 +20176,8 @@ var ToastText = newStyled.p(templateObject_5$p || (templateObject_5$p = __makeTe
|
|
|
20176
20176
|
var severity = _a.severity;
|
|
20177
20177
|
return (severity === 'error' ? '#C64844' : '#292929');
|
|
20178
20178
|
});
|
|
20179
|
-
var CloseIcon = newStyled.div(templateObject_6$
|
|
20180
|
-
var templateObject_1$H, templateObject_2$z, templateObject_3$y, templateObject_4$t, templateObject_5$p, templateObject_6$
|
|
20179
|
+
var CloseIcon = newStyled.div(templateObject_6$l || (templateObject_6$l = __makeTemplateObject(["\n margin-inline-start: auto;\n cursor: pointer;\n"], ["\n margin-inline-start: auto;\n cursor: pointer;\n"])));
|
|
20180
|
+
var templateObject_1$H, templateObject_2$z, templateObject_3$y, templateObject_4$t, templateObject_5$p, templateObject_6$l;
|
|
20181
20181
|
|
|
20182
20182
|
var Toast = React__default["default"].forwardRef(function (_a, ref) {
|
|
20183
20183
|
var _b;
|
|
@@ -20222,13 +20222,13 @@ var TotalContainer = newStyled(Container$t)(templateObject_5$o || (templateObjec
|
|
|
20222
20222
|
var showTotalLabel = _a.showTotalLabel;
|
|
20223
20223
|
return (showTotalLabel ? 'space-between' : 'flex-end');
|
|
20224
20224
|
});
|
|
20225
|
-
var DiscountText = newStyled.h3(templateObject_6$
|
|
20225
|
+
var DiscountText = newStyled.h3(templateObject_6$k || (templateObject_6$k = __makeTemplateObject(["\n margin: 0;\n font-size: 14px;\n line-height: 22px;\n font-weight: 600;\n"], ["\n margin: 0;\n font-size: 14px;\n line-height: 22px;\n font-weight: 600;\n"])));
|
|
20226
20226
|
var DiscountAmount = newStyled.h3(templateObject_7$i || (templateObject_7$i = __makeTemplateObject(["\n margin: 0;\n font-size: 18px;\n line-height: 28px;\n font-weight: ", ";\n"], ["\n margin: 0;\n font-size: 18px;\n line-height: 28px;\n font-weight: ", ";\n"])), function (_a) {
|
|
20227
20227
|
var theme = _a.theme;
|
|
20228
20228
|
return theme.component.total.basicTotal.savings.amountFontWeight;
|
|
20229
20229
|
});
|
|
20230
20230
|
var TotalLabel = newStyled(Text$7)(templateObject_8$e || (templateObject_8$e = __makeTemplateObject(["\n font-size: 20px;\n"], ["\n font-size: 20px;\n"])));
|
|
20231
|
-
var templateObject_1$G, templateObject_2$y, templateObject_3$x, templateObject_4$s, templateObject_5$o, templateObject_6$
|
|
20231
|
+
var templateObject_1$G, templateObject_2$y, templateObject_3$x, templateObject_4$s, templateObject_5$o, templateObject_6$k, templateObject_7$i, templateObject_8$e;
|
|
20232
20232
|
|
|
20233
20233
|
var Total = function (_a) {
|
|
20234
20234
|
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;
|
|
@@ -20273,7 +20273,7 @@ var CheckpointContainer$1 = newStyled.div(templateObject_2$w || (templateObject_
|
|
|
20273
20273
|
var CheckpointDate$1 = newStyled.div(templateObject_3$v || (templateObject_3$v = __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; });
|
|
20274
20274
|
var CheckpointDateLabel$1 = newStyled.p(templateObject_4$q || (templateObject_4$q = __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'); });
|
|
20275
20275
|
var CheckpointDateAndDayLabel = newStyled.span(templateObject_5$n || (templateObject_5$n = __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"])));
|
|
20276
|
-
var CheckpointStatus$1 = newStyled.p(templateObject_6$
|
|
20276
|
+
var CheckpointStatus$1 = newStyled.p(templateObject_6$j || (templateObject_6$j = __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) {
|
|
20277
20277
|
return props.finishedTrack
|
|
20278
20278
|
? props.finishedTrackColor
|
|
20279
20279
|
: props.activeTrack
|
|
@@ -20320,14 +20320,14 @@ var TrackingProgressV2 = function (_a) {
|
|
|
20320
20320
|
return (jsxRuntime.jsxs(CheckpointContainer$1, __assign$1({ "data-testid": "empty-checkpoint-track" }, { children: [jsxRuntime.jsxs(CheckpointDate$1, __assign$1({ currentSpace: "90px" }, { children: [jsxRuntime.jsx(CheckpointDateLabel$1, { lastElement: index + 1 === emptySpaces.length }, void 0), jsxRuntime.jsx(CheckpointDateLabel$1, { lastElement: index + 1 === emptySpaces.length }, void 0)] }), void 0), index + 1 !== emptySpaces.length && (jsxRuntime.jsx(ActiveCheckpointTrack$1, __assign$1({ trackColor: theme.colors.shades['200'].color }, { children: jsxRuntime.jsx(ActiveCheckpointDot$1, { firstElement: false }, void 0) }), void 0)), index + 1 === emptySpaces.length && (jsxRuntime.jsx(LastActiveCheckpointDot, __assign$1({ trackColor: theme.colors.shades['200'].color }, { children: jsxRuntime.jsx(ActiveCheckpointDot$1, { firstElement: false }, void 0) }), void 0)), jsxRuntime.jsx(CheckpointStatus$1, __assign$1({ finishedTrack: false }, { children: statusMessage }), void 0)] }), index));
|
|
20321
20321
|
})] }), void 0));
|
|
20322
20322
|
};
|
|
20323
|
-
var templateObject_1$E, templateObject_2$w, templateObject_3$v, templateObject_4$q, templateObject_5$n, templateObject_6$
|
|
20323
|
+
var templateObject_1$E, templateObject_2$w, templateObject_3$v, templateObject_4$q, templateObject_5$n, templateObject_6$j, templateObject_7$h, templateObject_8$d, templateObject_9$9, templateObject_10$7, templateObject_11$5;
|
|
20324
20324
|
|
|
20325
20325
|
var Container$r = newStyled.div(templateObject_1$D || (templateObject_1$D = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
20326
20326
|
var CheckpointContainer = newStyled.div(templateObject_2$v || (templateObject_2$v = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
20327
20327
|
var CheckpointDate = newStyled.div(templateObject_3$u || (templateObject_3$u = __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; });
|
|
20328
20328
|
var CheckpointDateLabel = newStyled.p(templateObject_4$p || (templateObject_4$p = __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'); });
|
|
20329
20329
|
var CheckpointStatus = newStyled.p(templateObject_5$m || (templateObject_5$m = __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'); });
|
|
20330
|
-
var ActiveCheckpointTrack = newStyled.div(templateObject_6$
|
|
20330
|
+
var ActiveCheckpointTrack = newStyled.div(templateObject_6$i || (templateObject_6$i = __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) {
|
|
20331
20331
|
return props.firstElement ? '8px 8px 0 0' : props.lastElement ? '0 0 8px 8px' : '';
|
|
20332
20332
|
}, function (props) { return (props.firstElement ? '20px' : '0'); }, function (props) { return (props.firstElement ? '-20px' : '0'); });
|
|
20333
20333
|
var ActiveCheckpointDot = newStyled.div(templateObject_7$g || (templateObject_7$g = __makeTemplateObject(["\n &:after {\n content: ' ';\n position: absolute;\n width: 13px;\n height: 13px;\n background-color: #e5e5e5;\n z-index: 2;\n border-radius: 50%;\n transform: ", ";\n left: 0;\n }\n"], ["\n &:after {\n content: ' ';\n position: absolute;\n width: 13px;\n height: 13px;\n background-color: #e5e5e5;\n z-index: 2;\n border-radius: 50%;\n transform: ", ";\n left: 0;\n }\n"])), function (props) { return (props.firstElement ? 'translate(0, -0.5px)' : 'translate(0, -6.5px)'); });
|
|
@@ -20360,7 +20360,7 @@ var TrackingProgress = function (_a) {
|
|
|
20360
20360
|
return (jsxRuntime.jsxs(CheckpointContainer, __assign$1({ "data-testid": "empty-checkpoint-track" }, { children: [jsxRuntime.jsxs(CheckpointDate, __assign$1({ currentSpace: getCurrentSpace(index) }, { children: [jsxRuntime.jsx(CheckpointDateLabel, { lastElement: index + 1 === emptySpaces.length }, void 0), jsxRuntime.jsx(CheckpointDateLabel, { lastElement: index + 1 === emptySpaces.length }, void 0)] }), void 0), index + 1 !== emptySpaces.length && (jsxRuntime.jsx(ActiveCheckpointTrack, { trackColor: theme.colors.shades['200'].color, firstElement: false, lastElement: index + 2 === emptySpaces.length }, void 0)), jsxRuntime.jsx(CheckpointStatus, { finishedTrack: false }, void 0)] }), index));
|
|
20361
20361
|
})] }), void 0));
|
|
20362
20362
|
};
|
|
20363
|
-
var templateObject_1$D, templateObject_2$v, templateObject_3$u, templateObject_4$p, templateObject_5$m, templateObject_6$
|
|
20363
|
+
var templateObject_1$D, templateObject_2$v, templateObject_3$u, templateObject_4$p, templateObject_5$m, templateObject_6$i, templateObject_7$g, templateObject_8$c;
|
|
20364
20364
|
|
|
20365
20365
|
var AutoShipCardContainerWrapper$1 = newStyled.div(templateObject_1$C || (templateObject_1$C = __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) {
|
|
20366
20366
|
var checked = _a.checked;
|
|
@@ -20370,9 +20370,9 @@ var AutoShipHeaderBarWrapper$1 = newStyled.div(templateObject_2$u || (templateOb
|
|
|
20370
20370
|
var AutoShipBodyWrapper$1 = newStyled.div(templateObject_3$t || (templateObject_3$t = __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"])));
|
|
20371
20371
|
var AutoShipBodyTitle$1 = newStyled.div(templateObject_4$o || (templateObject_4$o = __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"])));
|
|
20372
20372
|
var AutoShipBodyListItem$1 = newStyled.div(templateObject_5$l || (templateObject_5$l = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n gap: 10px;\n"], ["\n display: flex;\n flex-direction: row;\n gap: 10px;\n"])));
|
|
20373
|
-
var AutoShipBodyListWrapper$1 = newStyled.div(templateObject_6$
|
|
20373
|
+
var AutoShipBodyListWrapper$1 = newStyled.div(templateObject_6$h || (templateObject_6$h = __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"])));
|
|
20374
20374
|
var CheckboxInput = newStyled.input(templateObject_7$f || (templateObject_7$f = __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"])));
|
|
20375
|
-
var templateObject_1$C, templateObject_2$u, templateObject_3$t, templateObject_4$o, templateObject_5$l, templateObject_6$
|
|
20375
|
+
var templateObject_1$C, templateObject_2$u, templateObject_3$t, templateObject_4$o, templateObject_5$l, templateObject_6$h, templateObject_7$f;
|
|
20376
20376
|
|
|
20377
20377
|
function AutoshipOfferCard(_a) {
|
|
20378
20378
|
var showMore = _a.showMore, copyList = _a.copyList, copy = _a.copy, handleCheckBoxChange = _a.handleCheckBoxChange, _b = _a.isChecked, isChecked = _b === void 0 ? false : _b;
|
|
@@ -20404,10 +20404,10 @@ var AutoShipHeaderBarWrapper = newStyled.div(templateObject_2$t || (templateObje
|
|
|
20404
20404
|
var AutoShipBodyWrapper = newStyled.div(templateObject_3$s || (templateObject_3$s = __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"])));
|
|
20405
20405
|
var AutoShipBodyTitle = newStyled.div(templateObject_4$n || (templateObject_4$n = __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"])));
|
|
20406
20406
|
var AutoShipBodyListItem = newStyled.div(templateObject_5$k || (templateObject_5$k = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n gap: 10px;\n"], ["\n display: flex;\n flex-direction: row;\n gap: 10px;\n"])));
|
|
20407
|
-
var AutoShipBodyListWrapper = newStyled.div(templateObject_6$
|
|
20407
|
+
var AutoShipBodyListWrapper = newStyled.div(templateObject_6$g || (templateObject_6$g = __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"])));
|
|
20408
20408
|
newStyled.input(templateObject_7$e || (templateObject_7$e = __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"])));
|
|
20409
20409
|
var ButtonRemoveWrapper = newStyled.div(templateObject_8$b || (templateObject_8$b = __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"])));
|
|
20410
|
-
var templateObject_1$B, templateObject_2$t, templateObject_3$s, templateObject_4$n, templateObject_5$k, templateObject_6$
|
|
20410
|
+
var templateObject_1$B, templateObject_2$t, templateObject_3$s, templateObject_4$n, templateObject_5$k, templateObject_6$g, templateObject_7$e, templateObject_8$b;
|
|
20411
20411
|
|
|
20412
20412
|
function AutoshipOfferCardCta(_a) {
|
|
20413
20413
|
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;
|
|
@@ -20430,13 +20430,13 @@ var SubscriptionContainer$3 = newStyled(ContainerBase$3)(templateObject_2$s || (
|
|
|
20430
20430
|
var SubscriptionHeader$3 = newStyled.div(templateObject_3$r || (templateObject_3$r = __makeTemplateObject(["\n display: flex;\n padding-bottom: 10px;\n margin-bottom: 8px;\n cursor: pointer;\n flex-direction: column;\n gap: 8px;\n"], ["\n display: flex;\n padding-bottom: 10px;\n margin-bottom: 8px;\n cursor: pointer;\n flex-direction: column;\n gap: 8px;\n"])));
|
|
20431
20431
|
newStyled.div(templateObject_4$m || (templateObject_4$m = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
20432
20432
|
newStyled.div(templateObject_5$j || (templateObject_5$j = __makeTemplateObject(["\n display: flex;\n padding: 8px 0;\n svg {\n overflow: visible;\n }\n"], ["\n display: flex;\n padding: 8px 0;\n svg {\n overflow: visible;\n }\n"])));
|
|
20433
|
-
newStyled(Text$7)(templateObject_6$
|
|
20433
|
+
newStyled(Text$7)(templateObject_6$f || (templateObject_6$f = __makeTemplateObject(["\n line-height: 20px;\n margin-left: 9px;\n"], ["\n line-height: 20px;\n margin-left: 9px;\n"])));
|
|
20434
20434
|
var Container$q = newStyled.div(templateObject_7$d || (templateObject_7$d = __makeTemplateObject(["\n margin-top: 20px;\n"], ["\n margin-top: 20px;\n"])));
|
|
20435
20435
|
var Benefits$2 = newStyled.div(templateObject_8$a || (templateObject_8$a = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n justify-content: space-around;\n gap: 8px;\n height: ", ";\n border-radius: 8px;\n"], ["\n display: flex;\n flex-direction: column;\n justify-content: space-around;\n gap: 8px;\n height: ", ";\n border-radius: 8px;\n"])), function (_a) {
|
|
20436
20436
|
var height = _a.height;
|
|
20437
20437
|
return height !== null && height !== void 0 ? height : '100%';
|
|
20438
20438
|
});
|
|
20439
|
-
var templateObject_1$A, templateObject_2$s, templateObject_3$r, templateObject_4$m, templateObject_5$j, templateObject_6$
|
|
20439
|
+
var templateObject_1$A, templateObject_2$s, templateObject_3$r, templateObject_4$m, templateObject_5$j, templateObject_6$f, templateObject_7$d, templateObject_8$a;
|
|
20440
20440
|
|
|
20441
20441
|
var renderCopy = function (copy) {
|
|
20442
20442
|
if (typeof copy === 'string') {
|
|
@@ -20530,9 +20530,9 @@ var ImageWrapper = newStyled.div(templateObject_2$q || (templateObject_2$q = __m
|
|
|
20530
20530
|
var ImageComponent = newStyled(Image$3)(templateObject_3$q || (templateObject_3$q = __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"])));
|
|
20531
20531
|
var RightComponentWrapper = newStyled.div(templateObject_4$l || (templateObject_4$l = __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"])));
|
|
20532
20532
|
var TitleWrapper$2 = newStyled.div(templateObject_5$i || (templateObject_5$i = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n"], ["\n display: flex;\n flex-direction: row;\n"])));
|
|
20533
|
-
var SubTitleWrapper = newStyled.div(templateObject_6$
|
|
20533
|
+
var SubTitleWrapper = newStyled.div(templateObject_6$e || (templateObject_6$e = __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"])));
|
|
20534
20534
|
var ButtonsWrapper = newStyled.div(templateObject_7$c || (templateObject_7$c = __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"])));
|
|
20535
|
-
var templateObject_1$y, templateObject_2$q, templateObject_3$q, templateObject_4$l, templateObject_5$i, templateObject_6$
|
|
20535
|
+
var templateObject_1$y, templateObject_2$q, templateObject_3$q, templateObject_4$l, templateObject_5$i, templateObject_6$e, templateObject_7$c;
|
|
20536
20536
|
|
|
20537
20537
|
function CartItemCard(_a) {
|
|
20538
20538
|
var style = _a.style, className = _a.className, children = _a.children;
|
|
@@ -20597,7 +20597,7 @@ var SinglePurchaseContainer$2 = newStyled(ContainerBase$2)(templateObject_4$k ||
|
|
|
20597
20597
|
return (onClick ? 'cursor: pointer;' : '');
|
|
20598
20598
|
});
|
|
20599
20599
|
var SubscriptionContainer$2 = newStyled(ContainerBase$2)(templateObject_5$h || (templateObject_5$h = __makeTemplateObject(["\n padding: 16px;\n margin-bottom: 8px;\n position: relative;\n"], ["\n padding: 16px;\n margin-bottom: 8px;\n position: relative;\n"])));
|
|
20600
|
-
var SubscriptionHeader$2 = newStyled.div(templateObject_6$
|
|
20600
|
+
var SubscriptionHeader$2 = newStyled.div(templateObject_6$d || (templateObject_6$d = __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) {
|
|
20601
20601
|
var isSelected = _a.isSelected;
|
|
20602
20602
|
return (isSelected ? "1px solid ".concat(Shades200Color$1) : "none");
|
|
20603
20603
|
}, function (_a) {
|
|
@@ -20621,7 +20621,7 @@ var StyledPrice$2 = newStyled(PriceLabelV2$1)(templateObject_10$6 || (templateOb
|
|
|
20621
20621
|
: Shades200Color$1;
|
|
20622
20622
|
});
|
|
20623
20623
|
var Container$p = newStyled.div(templateObject_11$4 || (templateObject_11$4 = __makeTemplateObject(["\n margin-top: 20px;\n"], ["\n margin-top: 20px;\n"])));
|
|
20624
|
-
var templateObject_1$x, templateObject_2$p, templateObject_3$p, templateObject_4$k, templateObject_5$h, templateObject_6$
|
|
20624
|
+
var templateObject_1$x, templateObject_2$p, templateObject_3$p, templateObject_4$k, templateObject_5$h, templateObject_6$d, templateObject_7$b, templateObject_8$9, templateObject_9$8, templateObject_10$6, templateObject_11$4;
|
|
20625
20625
|
|
|
20626
20626
|
var ClubOfferSelector = function (_a) {
|
|
20627
20627
|
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;
|
|
@@ -20700,7 +20700,7 @@ var SinglePurchaseContainer$1 = newStyled(ContainerBase$1)(templateObject_4$j ||
|
|
|
20700
20700
|
return (onClick ? 'cursor: pointer;' : '');
|
|
20701
20701
|
});
|
|
20702
20702
|
var SubscriptionContainer$1 = newStyled(ContainerBase$1)(templateObject_5$g || (templateObject_5$g = __makeTemplateObject(["\n padding: 16px;\n margin-bottom: 8px;\n position: relative;\n"], ["\n padding: 16px;\n margin-bottom: 8px;\n position: relative;\n"])));
|
|
20703
|
-
var SubscriptionHeader$1 = newStyled.div(templateObject_6$
|
|
20703
|
+
var SubscriptionHeader$1 = newStyled.div(templateObject_6$c || (templateObject_6$c = __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) {
|
|
20704
20704
|
var isSelected = _a.isSelected;
|
|
20705
20705
|
return (isSelected ? "1px solid ".concat(Shades200Color) : "none");
|
|
20706
20706
|
}, function (_a) {
|
|
@@ -20725,7 +20725,7 @@ var StyledPrice$1 = newStyled(PriceLabelV2$1)(templateObject_10$5 || (templateOb
|
|
|
20725
20725
|
});
|
|
20726
20726
|
var Container$o = newStyled.div(templateObject_11$3 || (templateObject_11$3 = __makeTemplateObject(["\n margin-top: 20px;\n"], ["\n margin-top: 20px;\n"])));
|
|
20727
20727
|
var TermsText = newStyled(Text$7)(templateObject_12$2 || (templateObject_12$2 = __makeTemplateObject(["\n font-size: 10px;\n line-height: 10px;\n margin-bottom: 8px;\n\n a {\n color: #292929;\n text-decoration: underline;\n }\n"], ["\n font-size: 10px;\n line-height: 10px;\n margin-bottom: 8px;\n\n a {\n color: #292929;\n text-decoration: underline;\n }\n"])));
|
|
20728
|
-
var templateObject_1$w, templateObject_2$o, templateObject_3$o, templateObject_4$j, templateObject_5$g, templateObject_6$
|
|
20728
|
+
var templateObject_1$w, templateObject_2$o, templateObject_3$o, templateObject_4$j, templateObject_5$g, templateObject_6$c, templateObject_7$a, templateObject_8$8, templateObject_9$7, templateObject_10$5, templateObject_11$3, templateObject_12$2;
|
|
20729
20729
|
|
|
20730
20730
|
var ClubOfferSelector2 = function (_a) {
|
|
20731
20731
|
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, termsTextLink = _a.termsTextLink;
|
|
@@ -20950,11 +20950,11 @@ var ProductImageContainer = newStyled.div(templateObject_2$i || (templateObject_
|
|
|
20950
20950
|
var Body = newStyled.div(templateObject_3$i || (templateObject_3$i = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n gap: 5px;\n"], ["\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n gap: 5px;\n"])));
|
|
20951
20951
|
var QuatityLabel = newStyled.div(templateObject_4$d || (templateObject_4$d = __makeTemplateObject(["\n background: #d4605b;\n border-radius: 50%;\n width: 33px;\n height: 33px;\n color: #fff;\n font-size: 16px;\n font-weight: 700;\n display: flex;\n align-items: center;\n justify-content: center;\n position: absolute;\n top: 5px;\n right: -16.5px;\n"], ["\n background: #d4605b;\n border-radius: 50%;\n width: 33px;\n height: 33px;\n color: #fff;\n font-size: 16px;\n font-weight: 700;\n display: flex;\n align-items: center;\n justify-content: center;\n position: absolute;\n top: 5px;\n right: -16.5px;\n"])));
|
|
20952
20952
|
newStyled.div(templateObject_5$b || (templateObject_5$b = __makeTemplateObject(["\n font-size: 14px;\n font-weight: 700;\n color: #292929;\n line-height: 20px;\n margin-top: 10px;\n"], ["\n font-size: 14px;\n font-weight: 700;\n color: #292929;\n line-height: 20px;\n margin-top: 10px;\n"])));
|
|
20953
|
-
var OfferTitle = newStyled(Text$7)(templateObject_6$
|
|
20953
|
+
var OfferTitle = newStyled(Text$7)(templateObject_6$b || (templateObject_6$b = __makeTemplateObject(["\n font-size: 20px;\n margin-top: 10px;\n @media (max-width: 768px) {\n font-size: 14px;\n }\n"], ["\n font-size: 20px;\n margin-top: 10px;\n @media (max-width: 768px) {\n font-size: 14px;\n }\n"])));
|
|
20954
20954
|
var OfferText = newStyled(Text$7)(templateObject_7$9 || (templateObject_7$9 = __makeTemplateObject(["\n font-size: 12px;\n line-height: 16px;\n display: inline;\n max-width: 190px;\n"], ["\n font-size: 12px;\n line-height: 16px;\n display: inline;\n max-width: 190px;\n"])));
|
|
20955
20955
|
var DiscountValueText = newStyled.span(templateObject_8$7 || (templateObject_8$7 = __makeTemplateObject(["\n font-weight: bold;\n"], ["\n font-weight: bold;\n"])));
|
|
20956
20956
|
var OfferButton = newStyled(ButtonSecondary)(templateObject_9$6 || (templateObject_9$6 = __makeTemplateObject(["\n font-size: 0.75rem;\n padding: 0.875rem 2rem;\n"], ["\n font-size: 0.75rem;\n padding: 0.875rem 2rem;\n"])));
|
|
20957
|
-
var templateObject_1$p, templateObject_2$i, templateObject_3$i, templateObject_4$d, templateObject_5$b, templateObject_6$
|
|
20957
|
+
var templateObject_1$p, templateObject_2$i, templateObject_3$i, templateObject_4$d, templateObject_5$b, templateObject_6$b, templateObject_7$9, templateObject_8$7, templateObject_9$6;
|
|
20958
20958
|
|
|
20959
20959
|
var VariantType;
|
|
20960
20960
|
(function (VariantType) {
|
|
@@ -20984,13 +20984,13 @@ newStyled.div(templateObject_5$a || (templateObject_5$a = __makeTemplateObject([
|
|
|
20984
20984
|
var style = _a.style;
|
|
20985
20985
|
return style.width;
|
|
20986
20986
|
});
|
|
20987
|
-
var BottomTagContainer$6 = newStyled.div(templateObject_6$
|
|
20987
|
+
var BottomTagContainer$6 = newStyled.div(templateObject_6$a || (templateObject_6$a = __makeTemplateObject(["\n position: absolute;\n bottom: ", ";\n z-index: 1;\n"], ["\n position: absolute;\n bottom: ", ";\n z-index: 1;\n"])), function (_a) {
|
|
20988
20988
|
var style = _a.style;
|
|
20989
20989
|
return style.bottom || '6%';
|
|
20990
20990
|
});
|
|
20991
20991
|
newStyled.div(templateObject_7$8 || (templateObject_7$8 = __makeTemplateObject(["\n margin-top: 8px;\n"], ["\n margin-top: 8px;\n"])));
|
|
20992
20992
|
var DiscountLabel$2 = newStyled.div(templateObject_8$6 || (templateObject_8$6 = __makeTemplateObject(["\n background-color: #c64844;\n color: white;\n font-size: 10px;\n line-height: 14px;\n padding: 4px 6px 4px 6px;\n font-weight: bold;\n border-radius: 4px;\n margin-top: 2px;\n height: fit-content;\n &:empty {\n display: none;\n }\n"], ["\n background-color: #c64844;\n color: white;\n font-size: 10px;\n line-height: 14px;\n padding: 4px 6px 4px 6px;\n font-weight: bold;\n border-radius: 4px;\n margin-top: 2px;\n height: fit-content;\n &:empty {\n display: none;\n }\n"])));
|
|
20993
|
-
var templateObject_1$o, templateObject_2$h, templateObject_3$h, templateObject_4$c, templateObject_5$a, templateObject_6$
|
|
20993
|
+
var templateObject_1$o, templateObject_2$h, templateObject_3$h, templateObject_4$c, templateObject_5$a, templateObject_6$a, templateObject_7$8, templateObject_8$6;
|
|
20994
20994
|
|
|
20995
20995
|
var PriceLabelDisplay = function (_a) {
|
|
20996
20996
|
var price = _a.price, discountTag = _a.discountTag;
|
|
@@ -21060,7 +21060,7 @@ var ImageHoverContainer = newStyled.img(templateObject_2$g || (templateObject_2$
|
|
|
21060
21060
|
var Container$i = newStyled.a(templateObject_3$g || (templateObject_3$g = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n width: 100%;\n text-decoration: none;\n\n &:hover .hover__image {\n opacity: 1;\n }\n"], ["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n width: 100%;\n text-decoration: none;\n\n &:hover .hover__image {\n opacity: 1;\n }\n"])));
|
|
21061
21061
|
var ProdCardContainer$1 = newStyled.div(templateObject_4$b || (templateObject_4$b = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: min-content;\n text-decoration: none;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: min-content;\n text-decoration: none;\n"])));
|
|
21062
21062
|
var Title$1 = newStyled.h2(templateObject_5$9 || (templateObject_5$9 = __makeTemplateObject(["\n font-size: 0.83rem;\n font-weight: normal;\n line-height: 1.375rem;\n min-height: 2.75rem;\n color: ", ";\n margin: 0.25rem 0;\n text-align: ", ";\n"], ["\n font-size: 0.83rem;\n font-weight: normal;\n line-height: 1.375rem;\n min-height: 2.75rem;\n color: ", ";\n margin: 0.25rem 0;\n text-align: ", ";\n"])), function (props) { return props.theme.colors.pallete.secondary.color; }, function (props) { return props.align; });
|
|
21063
|
-
var TopTagContainer$5 = newStyled.div(templateObject_6$
|
|
21063
|
+
var TopTagContainer$5 = newStyled.div(templateObject_6$9 || (templateObject_6$9 = __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) {
|
|
21064
21064
|
var style = _a.style;
|
|
21065
21065
|
return style.width;
|
|
21066
21066
|
});
|
|
@@ -21077,7 +21077,7 @@ var BottomTagContainer$5 = newStyled.div(templateObject_7$7 || (templateObject_7
|
|
|
21077
21077
|
var style = _a.style;
|
|
21078
21078
|
return (_b = style.width) !== null && _b !== void 0 ? _b : 'auto';
|
|
21079
21079
|
});
|
|
21080
|
-
var templateObject_1$m, templateObject_2$g, templateObject_3$g, templateObject_4$b, templateObject_5$9, templateObject_6$
|
|
21080
|
+
var templateObject_1$m, templateObject_2$g, templateObject_3$g, templateObject_4$b, templateObject_5$9, templateObject_6$9, templateObject_7$7;
|
|
21081
21081
|
|
|
21082
21082
|
var getStylesBySize$1 = function (size) {
|
|
21083
21083
|
switch (size) {
|
|
@@ -21158,7 +21158,7 @@ newStyled.img(templateObject_2$f || (templateObject_2$f = __makeTemplateObject([
|
|
|
21158
21158
|
var Container$h = newStyled.a(templateObject_3$f || (templateObject_3$f = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n width: 100%;\n text-decoration: none;\n\n &:hover .hover__image {\n opacity: 1;\n }\n"], ["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n width: 100%;\n text-decoration: none;\n\n &:hover .hover__image {\n opacity: 1;\n }\n"])));
|
|
21159
21159
|
var ProdCardContainer = newStyled.div(templateObject_4$a || (templateObject_4$a = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: flex-start;\n width: fit-content;\n text-decoration: none;\n"], ["\n display: flex;\n flex-direction: row;\n align-items: flex-start;\n width: fit-content;\n text-decoration: none;\n"])));
|
|
21160
21160
|
var Title = newStyled.h2(templateObject_5$8 || (templateObject_5$8 = __makeTemplateObject(["\n font-size: 0.83rem;\n font-weight: normal;\n line-height: 1.375rem;\n min-height: 2.75rem;\n color: ", ";\n margin: 0.25rem 0;\n text-align: ", ";\n"], ["\n font-size: 0.83rem;\n font-weight: normal;\n line-height: 1.375rem;\n min-height: 2.75rem;\n color: ", ";\n margin: 0.25rem 0;\n text-align: ", ";\n"])), function (props) { return props.theme.colors.pallete.secondary.color; }, function (props) { return props.align; });
|
|
21161
|
-
newStyled.div(templateObject_6$
|
|
21161
|
+
newStyled.div(templateObject_6$8 || (templateObject_6$8 = __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) {
|
|
21162
21162
|
var style = _a.style;
|
|
21163
21163
|
return style.width;
|
|
21164
21164
|
});
|
|
@@ -21175,7 +21175,7 @@ newStyled.div(templateObject_7$6 || (templateObject_7$6 = __makeTemplateObject([
|
|
|
21175
21175
|
var style = _a.style;
|
|
21176
21176
|
return (_b = style.width) !== null && _b !== void 0 ? _b : 'auto';
|
|
21177
21177
|
});
|
|
21178
|
-
var templateObject_1$l, templateObject_2$f, templateObject_3$f, templateObject_4$a, templateObject_5$8, templateObject_6$
|
|
21178
|
+
var templateObject_1$l, templateObject_2$f, templateObject_3$f, templateObject_4$a, templateObject_5$8, templateObject_6$8, templateObject_7$6;
|
|
21179
21179
|
|
|
21180
21180
|
var getStylesBySize = function (size) {
|
|
21181
21181
|
switch (size) {
|
|
@@ -21308,7 +21308,7 @@ var TopTagContainer$4 = newStyled.div(templateObject_2$e || (templateObject_2$e
|
|
|
21308
21308
|
var TopRightTagContainer$1 = newStyled.div(templateObject_3$e || (templateObject_3$e = __makeTemplateObject(["\n position: absolute;\n right: 0;\n top: 0;\n"], ["\n position: absolute;\n right: 0;\n top: 0;\n"])));
|
|
21309
21309
|
var BottomTagContainer$4 = newStyled.div(templateObject_4$9 || (templateObject_4$9 = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
21310
21310
|
var NavButtonContainer$3 = newStyled.div(templateObject_5$7 || (templateObject_5$7 = __makeTemplateObject(["\n height: 40px;\n width: 40px;\n"], ["\n height: 40px;\n width: 40px;\n"])));
|
|
21311
|
-
var Button$4 = newStyled.button(templateObject_6$
|
|
21311
|
+
var Button$4 = newStyled.button(templateObject_6$7 || (templateObject_6$7 = __makeTemplateObject(["\n background: transparent;\n border: none;\n padding: 0.188rem 0.625rem;\n z-index: 5;\n height: 40px !important;\n cursor: pointer;\n"], ["\n background: transparent;\n border: none;\n padding: 0.188rem 0.625rem;\n z-index: 5;\n height: 40px !important;\n cursor: pointer;\n"])));
|
|
21312
21312
|
var settings$4 = {
|
|
21313
21313
|
dots: true,
|
|
21314
21314
|
infinite: false,
|
|
@@ -21386,7 +21386,7 @@ var ImageProductSlide = function (_a) {
|
|
|
21386
21386
|
return (jsxRuntime.jsx("div", { children: !isVideo ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(InnerImageZoom, { src: source, zoomSrc: source, zoomType: "hover", imgAttributes: getImageAttributes$1(idx, itemsOnViewport, imgAttributes), height: 510, fullscreenOnMobile: true, className: "zoomWrapper" }, void 0), jsxRuntime.jsx(TopTagContainer$4, __assign$1({ borderRadiusVariant: borderRadiusVariant, "data-testid": "topTag" }, { children: topTag }), void 0), jsxRuntime.jsx(BottomTagContainer$4, __assign$1({ "data-testid": "bottomTag" }, { children: bottomTag }), void 0), !!topRightTag && jsxRuntime.jsx(TopRightTagContainer$1, { children: topRightTag }, void 0)] }, void 0)) : (jsxRuntime.jsx(Video$1, { source: source, thumbnail: content === null || content === void 0 ? void 0 : content.thumbnailUrl }, void 0)) }, content.key));
|
|
21387
21387
|
}) }), void 0) }), void 0)] }, void 0));
|
|
21388
21388
|
};
|
|
21389
|
-
var templateObject_1$k, templateObject_2$e, templateObject_3$e, templateObject_4$9, templateObject_5$7, templateObject_6$
|
|
21389
|
+
var templateObject_1$k, templateObject_2$e, templateObject_3$e, templateObject_4$9, templateObject_5$7, templateObject_6$7;
|
|
21390
21390
|
|
|
21391
21391
|
var Container$f = newStyled.div(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n height: fit-content;\n position: relative;\n max-width: 450px;\n"], ["\n display: flex;\n flex-direction: column;\n height: fit-content;\n position: relative;\n max-width: 450px;\n"])));
|
|
21392
21392
|
var ProductGalleryMobile = function (_a) {
|
|
@@ -21748,7 +21748,7 @@ var TopTagContainer$2 = newStyled.div(templateObject_2$b || (templateObject_2$b
|
|
|
21748
21748
|
var BottomTagContainer$2 = newStyled.div(templateObject_3$b || (templateObject_3$b = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
21749
21749
|
var VideoOverlay = newStyled.div(templateObject_4$8 || (templateObject_4$8 = __makeTemplateObject(["\n content: '';\n background: transparent;\n width: 100%;\n height: 100%;\n min-height: 1px;\n position: absolute;\n top: 0;\n"], ["\n content: '';\n background: transparent;\n width: 100%;\n height: 100%;\n min-height: 1px;\n position: absolute;\n top: 0;\n"])));
|
|
21750
21750
|
var Video = newStyled.div(templateObject_5$6 || (templateObject_5$6 = __makeTemplateObject(["\n position: relative;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n height: 510px;\n background: #efefef;\n\n & > iframe {\n border: none;\n }\n"], ["\n position: relative;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n height: 510px;\n background: #efefef;\n\n & > iframe {\n border: none;\n }\n"])));
|
|
21751
|
-
var VideoTag = newStyled.div(templateObject_6$
|
|
21751
|
+
var VideoTag = newStyled.div(templateObject_6$6 || (templateObject_6$6 = __makeTemplateObject(["\n gap: 8px;\n position: absolute;\n width: 100%;\n bottom: 50px;\n display: flex;\n padding: 8.6px 0;\n font-weight: 600;\n align-items: center;\n background: #f7f7f7;\n justify-content: center;\n"], ["\n gap: 8px;\n position: absolute;\n width: 100%;\n bottom: 50px;\n display: flex;\n padding: 8.6px 0;\n font-weight: 600;\n align-items: center;\n background: #f7f7f7;\n justify-content: center;\n"])));
|
|
21752
21752
|
var Text = newStyled.div(templateObject_7$5 || (templateObject_7$5 = __makeTemplateObject(["\n padding-top: 3px;\n"], ["\n padding-top: 3px;\n"])));
|
|
21753
21753
|
var NavButtonContainer$2 = newStyled.div(templateObject_8$5 || (templateObject_8$5 = __makeTemplateObject(["\n height: 40px;\n width: 40px;\n"], ["\n height: 40px;\n width: 40px;\n"])));
|
|
21754
21754
|
var Button$2 = newStyled.button(templateObject_9$5 || (templateObject_9$5 = __makeTemplateObject(["\n background: transparent;\n border: none;\n padding: 0.188rem 0.625rem;\n z-index: 5;\n height: 40px !important;\n cursor: pointer;\n"], ["\n background: transparent;\n border: none;\n padding: 0.188rem 0.625rem;\n z-index: 5;\n height: 40px !important;\n cursor: pointer;\n"])));
|
|
@@ -21811,7 +21811,7 @@ var ImageProductSlideV3 = function (_a) {
|
|
|
21811
21811
|
} }, void 0), jsxRuntime.jsxs(VideoTag, { children: [jsxRuntime.jsx(Icon.PDP.PlayMini, { width: 1.5 }, void 0), jsxRuntime.jsx(Text, { children: "VIDEO" }, void 0)] }, void 0)] }, void 0))] }, image.key));
|
|
21812
21812
|
}) }), void 0) }), void 0)] }, void 0));
|
|
21813
21813
|
};
|
|
21814
|
-
var templateObject_1$d, templateObject_2$b, templateObject_3$b, templateObject_4$8, templateObject_5$6, templateObject_6$
|
|
21814
|
+
var templateObject_1$d, templateObject_2$b, templateObject_3$b, templateObject_4$8, templateObject_5$6, templateObject_6$6, templateObject_7$5, templateObject_8$5, templateObject_9$5;
|
|
21815
21815
|
|
|
21816
21816
|
var Container$a = newStyled.div(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n height: fit-content;\n position: relative;\n max-width: 450px;\n"], ["\n display: flex;\n flex-direction: column;\n height: fit-content;\n position: relative;\n max-width: 450px;\n"])));
|
|
21817
21817
|
var ProductGalleryMobileV3 = function (_a) {
|
|
@@ -21915,7 +21915,7 @@ var ContentGallery = function (_a) {
|
|
|
21915
21915
|
|
|
21916
21916
|
var NavButtonContainer$1 = newStyled.div(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n height: 40px;\n width: 40px;\n"], ["\n height: 40px;\n width: 40px;\n"])));
|
|
21917
21917
|
var Button$1 = newStyled.button(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["\n background: transparent;\n border: none;\n padding: 0.188rem 0.625rem;\n z-index: 5;\n height: 40px !important;\n cursor: pointer;\n"], ["\n background: transparent;\n border: none;\n padding: 0.188rem 0.625rem;\n z-index: 5;\n height: 40px !important;\n cursor: pointer;\n"])));
|
|
21918
|
-
var Container$8 = newStyled.div(templateObject_3$9 || (templateObject_3$9 = __makeTemplateObject(["\n ", "\n position: relative;\n max-height:
|
|
21918
|
+
var Container$8 = newStyled.div(templateObject_3$9 || (templateObject_3$9 = __makeTemplateObject(["\n ", "\n position: relative;\n max-height: calc(100vh - 86px) !important;\n margin: 0 auto;\n\n max-width: 100%;\n overflow: hidden;\n\n @media screen and (min-width: 480px) {\n margin: 0 auto;\n }\n\n & .slick-dots li.slick-active button:before {\n background-color: ", ";\n }\n\n .iiz {\n max-width: 100%;\n margin: 0;\n position: relative;\n overflow: hidden;\n display: inline-block;\n cursor: -webkit-zoom-in;\n cursor: zoom-in;\n }\n\n .zoomWrapper.iiz {\n max-height: calc(100vh - 86px) !important;\n margin: 0 auto;\n vertical-align: top;\n }\n\n .iiz--drag .iiz__zoom-img--visible {\n cursor: -webkit-grab;\n cursor: grab;\n }\n\n .iiz__img {\n max-width: 100%;\n max-height: calc(100vh - 86px) !important;\n margin: 0 auto;\n display: block;\n pointer-events: none;\n visibility: visible;\n opacity: 1;\n }\n\n .iiz__img--hidden {\n visibility: hidden;\n opacity: 0;\n }\n\n .iiz__img--abs {\n width: 100%;\n max-height: calc(100vh - 86px) !important;\n position: absolute;\n top: 0;\n left: 0;\n display: block;\n }\n\n .iiz__zoom-img {\n width: auto !important;\n max-width: none !important;\n position: absolute;\n visibility: hidden;\n opacity: 0;\n pointer-events: none;\n display: block;\n }\n\n .iiz__zoom-img--visible {\n visibility: visible;\n opacity: 1;\n pointer-events: auto;\n cursor: -webkit-zoom-out;\n cursor: zoom-out;\n -ms-touch-action: none;\n touch-action: none;\n zoom: 1.2;\n }\n\n .iiz__zoom-portal {\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: 99999;\n }\n\n .iiz__btn {\n background: rgba(255, 255, 255, 0.8);\n max-width: 98px;\n min-width: fit-content;\n height: 32px;\n border: none;\n outline: none;\n padding: 0 8px;\n position: absolute;\n z-index: 5;\n text-decoration: none;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -moz-appearance: none;\n -webkit-appearance: none;\n appearance: none;\n }\n\n .iiz__btn:before {\n content: ' ';\n background-position: center;\n background-repeat: no-repeat;\n display: block;\n }\n\n .iiz__hint {\n bottom: 10%;\n right: 0;\n pointer-events: none;\n border-radius: 150px 0 0 150px;\n }\n\n .iiz__hint:before {\n content: '+';\n background-image: none;\n width: 17px;\n height: 17px;\n font-size: 19px;\n border-radius: 500px;\n border: 2px solid #292929;\n display: inline-block;\n position: relative;\n text-align: center;\n line-height: 17px;\n font-weight: 600;\n }\n\n .iiz__hint:after {\n content: 'Zoom in';\n font-size: 14px;\n font-weight: 600;\n display: inline-block;\n margin-left: 5px;\n }\n\n .iiz__close {\n border-radius: 150px;\n top: auto;\n right: 0;\n left: 0;\n margin: auto;\n bottom: 20px;\n visibility: hidden;\n opacity: 0;\n color: #292929;\n }\n\n .iiz__close--visible {\n visibility: visible;\n opacity: 1;\n cursor: pointer;\n }\n\n .iiz__close::before {\n content: ' ';\n width: 16px;\n height: 16px;\n background-image: -webkit-gradient(linear, left top, left bottom, from(#222), to(#222)),\n -webkit-gradient(linear, left top, left bottom, from(#222), to(#222));\n background-image: linear-gradient(#222, #222), linear-gradient(#222, #222);\n background-size: 65% 2px, 2px 65%;\n transform: rotate(45deg);\n border-radius: 500px;\n border: 2px solid #292929;\n }\n\n .iiz__close::after {\n content: 'Close';\n font-size: 14px;\n font-weight: 600;\n display: inline-block;\n margin-left: 5px;\n }\n"], ["\n ", "\n position: relative;\n max-height: calc(100vh - 86px) !important;\n margin: 0 auto;\n\n max-width: 100%;\n overflow: hidden;\n\n @media screen and (min-width: 480px) {\n margin: 0 auto;\n }\n\n & .slick-dots li.slick-active button:before {\n background-color: ", ";\n }\n\n .iiz {\n max-width: 100%;\n margin: 0;\n position: relative;\n overflow: hidden;\n display: inline-block;\n cursor: -webkit-zoom-in;\n cursor: zoom-in;\n }\n\n .zoomWrapper.iiz {\n max-height: calc(100vh - 86px) !important;\n margin: 0 auto;\n vertical-align: top;\n }\n\n .iiz--drag .iiz__zoom-img--visible {\n cursor: -webkit-grab;\n cursor: grab;\n }\n\n .iiz__img {\n max-width: 100%;\n max-height: calc(100vh - 86px) !important;\n margin: 0 auto;\n display: block;\n pointer-events: none;\n visibility: visible;\n opacity: 1;\n }\n\n .iiz__img--hidden {\n visibility: hidden;\n opacity: 0;\n }\n\n .iiz__img--abs {\n width: 100%;\n max-height: calc(100vh - 86px) !important;\n position: absolute;\n top: 0;\n left: 0;\n display: block;\n }\n\n .iiz__zoom-img {\n width: auto !important;\n max-width: none !important;\n position: absolute;\n visibility: hidden;\n opacity: 0;\n pointer-events: none;\n display: block;\n }\n\n .iiz__zoom-img--visible {\n visibility: visible;\n opacity: 1;\n pointer-events: auto;\n cursor: -webkit-zoom-out;\n cursor: zoom-out;\n -ms-touch-action: none;\n touch-action: none;\n zoom: 1.2;\n }\n\n .iiz__zoom-portal {\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: 99999;\n }\n\n .iiz__btn {\n background: rgba(255, 255, 255, 0.8);\n max-width: 98px;\n min-width: fit-content;\n height: 32px;\n border: none;\n outline: none;\n padding: 0 8px;\n position: absolute;\n z-index: 5;\n text-decoration: none;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -moz-appearance: none;\n -webkit-appearance: none;\n appearance: none;\n }\n\n .iiz__btn:before {\n content: ' ';\n background-position: center;\n background-repeat: no-repeat;\n display: block;\n }\n\n .iiz__hint {\n bottom: 10%;\n right: 0;\n pointer-events: none;\n border-radius: 150px 0 0 150px;\n }\n\n .iiz__hint:before {\n content: '+';\n background-image: none;\n width: 17px;\n height: 17px;\n font-size: 19px;\n border-radius: 500px;\n border: 2px solid #292929;\n display: inline-block;\n position: relative;\n text-align: center;\n line-height: 17px;\n font-weight: 600;\n }\n\n .iiz__hint:after {\n content: 'Zoom in';\n font-size: 14px;\n font-weight: 600;\n display: inline-block;\n margin-left: 5px;\n }\n\n .iiz__close {\n border-radius: 150px;\n top: auto;\n right: 0;\n left: 0;\n margin: auto;\n bottom: 20px;\n visibility: hidden;\n opacity: 0;\n color: #292929;\n }\n\n .iiz__close--visible {\n visibility: visible;\n opacity: 1;\n cursor: pointer;\n }\n\n .iiz__close::before {\n content: ' ';\n width: 16px;\n height: 16px;\n background-image: -webkit-gradient(linear, left top, left bottom, from(#222), to(#222)),\n -webkit-gradient(linear, left top, left bottom, from(#222), to(#222));\n background-image: linear-gradient(#222, #222), linear-gradient(#222, #222);\n background-size: 65% 2px, 2px 65%;\n transform: rotate(45deg);\n border-radius: 500px;\n border: 2px solid #292929;\n }\n\n .iiz__close::after {\n content: 'Close';\n font-size: 14px;\n font-weight: 600;\n display: inline-block;\n margin-left: 5px;\n }\n"])), function (_a) {
|
|
21919
21919
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
21920
21920
|
return borderRadiusVariant &&
|
|
21921
21921
|
"\n border-radius: 40px;\n ";
|
|
@@ -21971,17 +21971,16 @@ var MainContent = function (_a) {
|
|
|
21971
21971
|
setSelectedImageIndex: setSelectedImageIndex,
|
|
21972
21972
|
onChange: onChange,
|
|
21973
21973
|
});
|
|
21974
|
-
} }, settings$1, { nextArrow: arrowsVisible ? (jsxRuntime.jsx(NavButtonContainer$1, __assign$1({ "data-testid": "main-gallery-next-button" }, { children: jsxRuntime.jsx(Button$1, { children: jsxRuntime.jsx(Icon.Arrows.ChevronRight, { height: 2.125, width: 1.25, fill: "#292929" }, void 0) }, void 0) }), void 0)) : undefined, prevArrow: arrowsVisible ? (jsxRuntime.jsx(NavButtonContainer$1, { children: jsxRuntime.jsx(Button$1, { children: jsxRuntime.jsx(Icon.Arrows.ChevronLeft, { height: 2.125, width: 1.25, fill: "#292929" }, void 0) }, void 0) }, void 0)) : undefined, ref: slick }, { children: contents.map(function (content, idx) {
|
|
21974
|
+
} }, settings$1, { adaptiveHeight: true, nextArrow: arrowsVisible ? (jsxRuntime.jsx(NavButtonContainer$1, __assign$1({ "data-testid": "main-gallery-next-button" }, { children: jsxRuntime.jsx(Button$1, { children: jsxRuntime.jsx(Icon.Arrows.ChevronRight, { height: 2.125, width: 1.25, fill: "#292929" }, void 0) }, void 0) }), void 0)) : undefined, prevArrow: arrowsVisible ? (jsxRuntime.jsx(NavButtonContainer$1, { children: jsxRuntime.jsx(Button$1, { children: jsxRuntime.jsx(Icon.Arrows.ChevronLeft, { height: 2.125, width: 1.25, fill: "#292929" }, void 0) }, void 0) }, void 0)) : undefined, ref: slick }, { children: contents.map(function (content, idx) {
|
|
21975
21975
|
var _a;
|
|
21976
21976
|
var source = content === null || content === void 0 ? void 0 : content.url;
|
|
21977
21977
|
var isVideo = (_a = content === null || content === void 0 ? void 0 : content.isVideo) !== null && _a !== void 0 ? _a : false;
|
|
21978
21978
|
// default imgAttributes
|
|
21979
21979
|
var imgAttributes = {
|
|
21980
21980
|
alt: content.alt,
|
|
21981
|
-
|
|
21982
|
-
height: '510px',
|
|
21981
|
+
height: '512px',
|
|
21983
21982
|
};
|
|
21984
|
-
return (jsxRuntime.jsx("div", __assign$1({ "data-testid": "main-gallery-div-content-".concat(idx) }, { children: !isVideo ? (jsxRuntime.jsx(InnerImageZoom, { afterZoomIn: hideArrows, afterZoomOut: showArrows, src: source, zoomSrc: source, zoomType: "hover", imgAttributes: getImageAttributes(idx, itemsOnViewport, imgAttributes),
|
|
21983
|
+
return (jsxRuntime.jsx("div", __assign$1({ "data-testid": "main-gallery-div-content-".concat(idx) }, { children: !isVideo ? (jsxRuntime.jsx(InnerImageZoom, { afterZoomIn: hideArrows, afterZoomOut: showArrows, src: source, zoomSrc: source, zoomType: "hover", imgAttributes: getImageAttributes(idx, itemsOnViewport, imgAttributes), className: "zoomWrapper" }, void 0)) : (jsxRuntime.jsx(Video$1, { source: source, thumbnail: content === null || content === void 0 ? void 0 : content.thumbnailUrl }, void 0)) }), content.key));
|
|
21985
21984
|
}) }), void 0) }), void 0));
|
|
21986
21985
|
};
|
|
21987
21986
|
|
|
@@ -22048,7 +22047,7 @@ var Slider = function (_a) {
|
|
|
22048
22047
|
|
|
22049
22048
|
var Container$6 = newStyled.div({
|
|
22050
22049
|
background: 'var(--truekind-default-secondary, #292929)',
|
|
22051
|
-
|
|
22050
|
+
height: '100svh',
|
|
22052
22051
|
width: '100vw',
|
|
22053
22052
|
position: 'fixed',
|
|
22054
22053
|
overflowY: 'scroll',
|
|
@@ -22206,7 +22205,7 @@ var NavButtonContainer = newStyled.div(templateObject_5$5 || (templateObject_5$5
|
|
|
22206
22205
|
var theme = _a.theme;
|
|
22207
22206
|
return theme.colors.shades.white.color;
|
|
22208
22207
|
});
|
|
22209
|
-
var Button = newStyled.button(templateObject_6$
|
|
22208
|
+
var Button = newStyled.button(templateObject_6$5 || (templateObject_6$5 = __makeTemplateObject(["\n background: transparent;\n border: none;\n padding: 3px 8px;\n z-index: 5;\n height: 36px !important;\n cursor: pointer;\n"], ["\n background: transparent;\n border: none;\n padding: 3px 8px;\n z-index: 5;\n height: 36px !important;\n cursor: pointer;\n"])));
|
|
22210
22209
|
var SliderThumbnail = newStyled(Slider$1)(templateObject_7$4 || (templateObject_7$4 = __makeTemplateObject(["\n margin-top: 16px;\n padding-left: 16px;\n & .slick-slide {\n img {\n overflow: hidden;\n }\n }\n & .slick-current {\n img {\n border: 2px solid ", ";\n }\n }\n\n .slick-track {\n display: flex;\n }\n"], ["\n margin-top: 16px;\n padding-left: 16px;\n & .slick-slide {\n img {\n overflow: hidden;\n }\n }\n & .slick-current {\n img {\n border: 2px solid ", ";\n }\n }\n\n .slick-track {\n display: flex;\n }\n"])), function (_a) {
|
|
22211
22210
|
var theme = _a.theme;
|
|
22212
22211
|
return theme.colors.pallete.primary.color;
|
|
@@ -22229,7 +22228,7 @@ var ThumbnailImage = newStyled(Image$3)(templateObject_10$4 || (templateObject_1
|
|
|
22229
22228
|
var borderRadius = _a.borderRadius;
|
|
22230
22229
|
return borderRadius || '0px';
|
|
22231
22230
|
});
|
|
22232
|
-
var templateObject_1$9, templateObject_2$8, templateObject_3$8, templateObject_4$6, templateObject_5$5, templateObject_6$
|
|
22231
|
+
var templateObject_1$9, templateObject_2$8, templateObject_3$8, templateObject_4$6, templateObject_5$5, templateObject_6$5, templateObject_7$4, templateObject_8$4, templateObject_9$4, templateObject_10$4;
|
|
22233
22232
|
|
|
22234
22233
|
var ProductGalleryMobileV5 = function (_a) {
|
|
22235
22234
|
var images = _a.images, topTag = _a.topTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, imagesSliderConfig = _a.imagesSliderConfig, thumbnailSettings = _a.thumbnailSettings, _b = _a.isRatioSquare, isRatioSquare = _b === void 0 ? false : _b;
|
|
@@ -22377,13 +22376,13 @@ var TableElement$1 = newStyled.table(templateObject_2$5 || (templateObject_2$5 =
|
|
|
22377
22376
|
var TableCell$1 = newStyled.td(templateObject_3$5 || (templateObject_3$5 = __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; });
|
|
22378
22377
|
var TableHead$1 = newStyled.th(templateObject_4$4 || (templateObject_4$4 = __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; });
|
|
22379
22378
|
var Label$1 = newStyled('div')(templateObject_5$4 || (templateObject_5$4 = __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"])));
|
|
22380
|
-
var TopLabel = newStyled(Label$1)(templateObject_6$
|
|
22379
|
+
var TopLabel = newStyled(Label$1)(templateObject_6$4 || (templateObject_6$4 = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
22381
22380
|
var LeftLabel = newStyled(Label$1)(templateObject_7$3 || (templateObject_7$3 = __makeTemplateObject(["\n width: 20px;\n transform: rotate(270deg);\n"], ["\n width: 20px;\n transform: rotate(270deg);\n"])));
|
|
22382
22381
|
var Container$3 = newStyled('div')(templateObject_8$3 || (templateObject_8$3 = __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"])));
|
|
22383
22382
|
var LabelText = newStyled('span')(templateObject_9$3 || (templateObject_9$3 = __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"])));
|
|
22384
22383
|
var Column$1 = newStyled('div')(templateObject_10$3 || (templateObject_10$3 = __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"])));
|
|
22385
22384
|
var TableRow$1 = newStyled.tr(templateObject_11$2 || (templateObject_11$2 = __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; });
|
|
22386
|
-
var templateObject_1$5, templateObject_2$5, templateObject_3$5, templateObject_4$4, templateObject_5$4, templateObject_6$
|
|
22385
|
+
var templateObject_1$5, templateObject_2$5, templateObject_3$5, templateObject_4$4, templateObject_5$4, templateObject_6$4, templateObject_7$3, templateObject_8$3, templateObject_9$3, templateObject_10$3, templateObject_11$2;
|
|
22387
22386
|
|
|
22388
22387
|
var getIsOdd$1 = function (number) { return number % 2 !== 0; };
|
|
22389
22388
|
var getCellColor$1 = function (index, cell) {
|
|
@@ -22428,7 +22427,7 @@ var TableCell = newStyled.td(templateObject_2$4 || (templateObject_2$4 = __makeT
|
|
|
22428
22427
|
var TableHead = newStyled.th(templateObject_3$4 || (templateObject_3$4 = __makeTemplateObject(["\n border-bottom: 0.063rem solid var(--colors-shades-100-color);\n border-right: 0.063rem solid var(--colors-shades-100-color);\n font-weight: 600;\n line-height: normal;\n padding: 1rem;\n text-align: start;\n position: ", ";\n left: 0;\n z-index: ", ";\n background-color: ", ";\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n text-align: center;\n }\n"], ["\n border-bottom: 0.063rem solid var(--colors-shades-100-color);\n border-right: 0.063rem solid var(--colors-shades-100-color);\n font-weight: 600;\n line-height: normal;\n padding: 1rem;\n text-align: start;\n position: ", ";\n left: 0;\n z-index: ", ";\n background-color: ", ";\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n text-align: center;\n }\n"])), function (props) { return (props.isSticky ? 'sticky' : 'unset'); }, function (props) { return (props.isSticky ? 1 : 0); }, function (props) { return (props.isSticky ? '#fff6ef' : 'unset'); });
|
|
22429
22428
|
var Label = newStyled('div')(templateObject_4$3 || (templateObject_4$3 = __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"])));
|
|
22430
22429
|
newStyled(Label)(templateObject_5$3 || (templateObject_5$3 = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
22431
|
-
newStyled(Label)(templateObject_6$
|
|
22430
|
+
newStyled(Label)(templateObject_6$3 || (templateObject_6$3 = __makeTemplateObject(["\n width: 20px;\n transform: rotate(270deg);\n"], ["\n width: 20px;\n transform: rotate(270deg);\n"])));
|
|
22432
22431
|
var Container$2 = newStyled('div')(templateObject_7$2 || (templateObject_7$2 = __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"])));
|
|
22433
22432
|
newStyled('span')(templateObject_8$2 || (templateObject_8$2 = __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"])));
|
|
22434
22433
|
var Column = newStyled('div')(templateObject_9$2 || (templateObject_9$2 = __makeTemplateObject(["\n display: flex;\n min-width: 675px;\n align-items: flex-start;\n flex-direction: column;\n\n @media (max-width: 768px) {\n min-width: 100%;\n }\n"], ["\n display: flex;\n min-width: 675px;\n align-items: flex-start;\n flex-direction: column;\n\n @media (max-width: 768px) {\n min-width: 100%;\n }\n"])));
|
|
@@ -22439,7 +22438,7 @@ var Arrow = newStyled('div')(templateObject_13$1 || (templateObject_13$1 = __mak
|
|
|
22439
22438
|
var TableHeader = newStyled('thead')(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n background-color: ", ";\n"], ["\n background-color: ", ";\n"])), function (props) {
|
|
22440
22439
|
return props.isColored ? 'var(--colors-pallete-primary-80-color)' : 'unset';
|
|
22441
22440
|
});
|
|
22442
|
-
var templateObject_1$4, templateObject_2$4, templateObject_3$4, templateObject_4$3, templateObject_5$3, templateObject_6$
|
|
22441
|
+
var templateObject_1$4, templateObject_2$4, templateObject_3$4, templateObject_4$3, templateObject_5$3, templateObject_6$3, templateObject_7$2, templateObject_8$2, templateObject_9$2, templateObject_10$2, templateObject_11$1, templateObject_12$1, templateObject_13$1, templateObject_14;
|
|
22443
22442
|
|
|
22444
22443
|
var getIsOdd = function (number) { return number % 2 !== 0; };
|
|
22445
22444
|
// TODO: Refactor this color logic
|
|
@@ -22525,14 +22524,15 @@ var ArrowTip = function (_a) {
|
|
|
22525
22524
|
var trimLabel = function (label) { var _a, _b; return (_b = (_a = label === null || label === void 0 ? void 0 : label.trim()) === null || _a === void 0 ? void 0 : _a.split(' ')) === null || _b === void 0 ? void 0 : _b[0]; };
|
|
22526
22525
|
|
|
22527
22526
|
var Parent = newStyled('div')(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n max-width: 100%;\n position: relative;\n overflow-x: auto;\n width: 850px;\n &::-webkit-scrollbar {\n display: none;\n }\n @media (max-width: 768px) {\n -ms-overflow-style: none;\n }\n"], ["\n max-width: 100%;\n position: relative;\n overflow-x: auto;\n width: 850px;\n &::-webkit-scrollbar {\n display: none;\n }\n @media (max-width: 768px) {\n -ms-overflow-style: none;\n }\n"])));
|
|
22528
|
-
var Header = newStyled.
|
|
22529
|
-
var
|
|
22530
|
-
var
|
|
22527
|
+
var Header = newStyled.th(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject(["\n background: #f7ece4;\n padding: 12px 44px;\n width: 100%;\n text-align: left;\n border-radius: ", ";\n border: ", ";\n"], ["\n background: #f7ece4;\n padding: 12px 44px;\n width: 100%;\n text-align: left;\n border-radius: ", ";\n border: ", ";\n"])), function (props) { return (props.index === 0 ? '8px 8px 0 0' : 0); }, function (props) { return (props.index === 0 ? '0' : '0.5px solid #BBBBBB'); });
|
|
22528
|
+
var Table = newStyled.table(templateObject_3$3 || (templateObject_3$3 = __makeTemplateObject(["\n border-collapse: collapse;\n"], ["\n border-collapse: collapse;\n"])));
|
|
22529
|
+
var TableBody = newStyled.tbody(templateObject_4$2 || (templateObject_4$2 = __makeTemplateObject(["\n width: fit-content;\n border-collapse: collapse;\n"], ["\n width: fit-content;\n border-collapse: collapse;\n"])));
|
|
22530
|
+
var Cell = newStyled.td(templateObject_5$2 || (templateObject_5$2 = __makeTemplateObject(["\n text-align: center;\n padding: 20px;\n border: 0.5px solid #bbbbbb;\n background-color: ", ";\n white-space: nowrap;\n font-weight: 600;\n font-size: 14px;\n width: 85px;\n max-width: 85px;\n min-width: 85px;\n box-sizing: border-box;\n ", "\n"], ["\n text-align: center;\n padding: 20px;\n border: 0.5px solid #bbbbbb;\n background-color: ", ";\n white-space: nowrap;\n font-weight: 600;\n font-size: 14px;\n width: 85px;\n max-width: 85px;\n min-width: 85px;\n box-sizing: border-box;\n ", "\n"])), function (props) { return props.background; }, function (props) {
|
|
22531
22531
|
return props.isSticky &&
|
|
22532
|
-
"\n position: sticky;\n z-index: 3;\n left
|
|
22532
|
+
"\n position: sticky;\n z-index: 3;\n left:-0.5px;\n ";
|
|
22533
22533
|
});
|
|
22534
|
-
var SharedRowCell = newStyled(Cell)(
|
|
22535
|
-
var templateObject_1$3, templateObject_2$3, templateObject_3$3, templateObject_4$2, templateObject_5$2;
|
|
22534
|
+
var SharedRowCell = newStyled(Cell)(templateObject_6$2 || (templateObject_6$2 = __makeTemplateObject(["\n padding: 0 6px;\n p {\n text-align: center;\n font-weight: 600;\n font-size: 14px;\n }\n"], ["\n padding: 0 6px;\n p {\n text-align: center;\n font-weight: 600;\n font-size: 14px;\n }\n"])));
|
|
22535
|
+
var templateObject_1$3, templateObject_2$3, templateObject_3$3, templateObject_4$2, templateObject_5$2, templateObject_6$2;
|
|
22536
22536
|
|
|
22537
22537
|
var BACKGROUND_COLORS = [
|
|
22538
22538
|
'#FAFAFA',
|
|
@@ -22562,6 +22562,48 @@ var isDataCell = function (cell) {
|
|
|
22562
22562
|
function parseCellContent(content) {
|
|
22563
22563
|
var cellContentChunks = content.split(/ (=) /);
|
|
22564
22564
|
return (jsxRuntime.jsx(React$2.Fragment, { children: cellContentChunks.map(function (data, i) { return (jsxRuntime.jsx(Text$7, __assign$1({ variant: "body", style: i === cellContentChunks.length - 1 ? {} : { marginBottom: '5px' } }, { children: data }), "shared-cell-text-".concat(data, "-").concat(i))); }) }, void 0));
|
|
22565
|
+
}
|
|
22566
|
+
function isRowHeader(row) {
|
|
22567
|
+
return row[0].toLowerCase().includes('step');
|
|
22568
|
+
}
|
|
22569
|
+
function transformData(rawData) {
|
|
22570
|
+
var dataSet = [];
|
|
22571
|
+
var currentHeader = '';
|
|
22572
|
+
var currentData = [];
|
|
22573
|
+
for (var _i = 0, rawData_1 = rawData; _i < rawData_1.length; _i++) {
|
|
22574
|
+
var row = rawData_1[_i];
|
|
22575
|
+
if (isRowHeader(row)) {
|
|
22576
|
+
if (currentHeader) {
|
|
22577
|
+
dataSet.push({
|
|
22578
|
+
header: currentHeader,
|
|
22579
|
+
data: currentData,
|
|
22580
|
+
});
|
|
22581
|
+
currentData = [];
|
|
22582
|
+
}
|
|
22583
|
+
currentHeader = row[0];
|
|
22584
|
+
}
|
|
22585
|
+
else if (row[0] === 'Under Bust ') {
|
|
22586
|
+
currentData.push(__spreadArray([
|
|
22587
|
+
{
|
|
22588
|
+
rowSpan: 2,
|
|
22589
|
+
content: 'Under Bust = Band Size',
|
|
22590
|
+
}
|
|
22591
|
+
], row.slice(1), true));
|
|
22592
|
+
}
|
|
22593
|
+
else if (row[0] === 'Band Size') {
|
|
22594
|
+
currentData.push(row.slice(1));
|
|
22595
|
+
}
|
|
22596
|
+
else {
|
|
22597
|
+
currentData.push(row);
|
|
22598
|
+
}
|
|
22599
|
+
}
|
|
22600
|
+
if (currentHeader) {
|
|
22601
|
+
dataSet.push({
|
|
22602
|
+
header: currentHeader,
|
|
22603
|
+
data: currentData,
|
|
22604
|
+
});
|
|
22605
|
+
}
|
|
22606
|
+
return dataSet;
|
|
22565
22607
|
}
|
|
22566
22608
|
|
|
22567
22609
|
var SCROLL_END_THRESHOLD = 0.92;
|
|
@@ -22571,6 +22613,7 @@ var SizeChartTableV4 = function (_a) {
|
|
|
22571
22613
|
var containerRef = React$2.useRef(null);
|
|
22572
22614
|
var _b = React$2.useState(false), isAtScrollEnd = _b[0], setIsAtScrollEnd = _b[1];
|
|
22573
22615
|
var isMobile = useWindowDimensions().isMobile;
|
|
22616
|
+
var mappedData = transformData(data);
|
|
22574
22617
|
React$2.useEffect(function () {
|
|
22575
22618
|
var handleScroll = function () {
|
|
22576
22619
|
var _a = containerRef.current, scrollLeft = _a.scrollLeft, scrollWidth = _a.scrollWidth, clientWidth = _a.clientWidth;
|
|
@@ -22584,9 +22627,9 @@ var SizeChartTableV4 = function (_a) {
|
|
|
22584
22627
|
container === null || container === void 0 ? void 0 : container.removeEventListener('scroll', handleScroll);
|
|
22585
22628
|
};
|
|
22586
22629
|
}, []);
|
|
22587
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Parent, __assign$1({ ref: containerRef }, { children:
|
|
22630
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Parent, __assign$1({ ref: containerRef }, { children: mappedData.map(function (table, index) { return (jsxRuntime.jsxs(Table, { children: [jsxRuntime.jsx("thead", { children: jsxRuntime.jsx("tr", { children: jsxRuntime.jsx(Header, __assign$1({ index: index, colSpan: 10 }, { children: jsxRuntime.jsx(Text$7, __assign$1({ variant: "body", weight: "demi", size: "small" }, { children: table.header }), void 0) }), void 0) }, void 0) }, void 0), jsxRuntime.jsx(TableBody, { children: table.data.map(function (row, rowIndex) { return (jsxRuntime.jsx("tr", { children: row.map(function (cell, cellIndex) {
|
|
22588
22631
|
return isDataCell(cell) ? (jsxRuntime.jsx(SharedRowCell, __assign$1({ rowSpan: cell.rowSpan, background: getCellBackground(cellIndex, cell.content, row.length, theme), isSticky: getCellIsSticky(cellIndex, row.length) }, { children: parseCellContent(cell.content) }), "cell-".concat(index, "-").concat(rowIndex, "-").concat(cellIndex))) : (jsxRuntime.jsx(Cell, __assign$1({ background: getCellBackground(cellIndex, cell, row.length, theme), isSticky: getCellIsSticky(cellIndex, row.length) }, { children: cell }), "cell-".concat(index, "-").concat(rowIndex, "-").concat(cellIndex)));
|
|
22589
|
-
}) }, "row-".concat(index, "-").concat(rowIndex))); }) },
|
|
22632
|
+
}) }, "row-".concat(index, "-").concat(rowIndex))); }) }, "table-body-".concat(index))] }, "table-".concat(index))); }) }), void 0), isMobile && jsxRuntime.jsx(ArrowTip$1, { isRight: !isAtScrollEnd }, void 0)] }, void 0));
|
|
22590
22633
|
};
|
|
22591
22634
|
|
|
22592
22635
|
var FlexContainer = newStyled.div(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n display: flex;\n\n ", "\n"], ["\n display: flex;\n\n ", "\n"])), function (_a) {
|