@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.esm.js
CHANGED
|
@@ -4871,7 +4871,7 @@ var TAGS = {
|
|
|
4871
4871
|
hero3: newStyled.h3(templateObject_3$1q || (templateObject_3$1q = __makeTemplateObject([""], [""]))),
|
|
4872
4872
|
display1: newStyled.h1(templateObject_4$18 || (templateObject_4$18 = __makeTemplateObject([""], [""]))),
|
|
4873
4873
|
display2: newStyled.h2(templateObject_5$T || (templateObject_5$T = __makeTemplateObject([""], [""]))),
|
|
4874
|
-
display3: newStyled.h3(templateObject_6$
|
|
4874
|
+
display3: newStyled.h3(templateObject_6$K || (templateObject_6$K = __makeTemplateObject([""], [""]))),
|
|
4875
4875
|
heading1: newStyled.h1(templateObject_7$A || (templateObject_7$A = __makeTemplateObject([""], [""]))),
|
|
4876
4876
|
heading2: newStyled.h2(templateObject_8$t || (templateObject_8$t = __makeTemplateObject([""], [""]))),
|
|
4877
4877
|
heading3: newStyled.h3(templateObject_9$g || (templateObject_9$g = __makeTemplateObject([""], [""]))),
|
|
@@ -5006,14 +5006,14 @@ var DEFAULTS = {
|
|
|
5006
5006
|
size: 'regular',
|
|
5007
5007
|
},
|
|
5008
5008
|
};
|
|
5009
|
-
var templateObject_1$2r, templateObject_2$1N, templateObject_3$1q, templateObject_4$18, templateObject_5$T, templateObject_6$
|
|
5009
|
+
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;
|
|
5010
5010
|
|
|
5011
5011
|
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"])));
|
|
5012
5012
|
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"])));
|
|
5013
5013
|
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"])));
|
|
5014
5014
|
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"])));
|
|
5015
5015
|
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"])));
|
|
5016
|
-
var DiscountContainer$1 = newStyled.div(templateObject_6$
|
|
5016
|
+
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"])));
|
|
5017
5017
|
var PackSelectorV2 = function (_a) {
|
|
5018
5018
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange, currencyCode = _a.currencyCode;
|
|
5019
5019
|
return (jsx$1(Container$1u, __assign$1({ role: "radiogroup" }, { children: packs.map(function (pack) {
|
|
@@ -5038,7 +5038,7 @@ var PackCard$1 = function (_a) {
|
|
|
5038
5038
|
currency: currencyCode || 'USD',
|
|
5039
5039
|
}), ' ', "each", ')'] }), void 0)) : null] }, void 0)] }), void 0));
|
|
5040
5040
|
};
|
|
5041
|
-
var templateObject_1$2q, templateObject_2$1M, templateObject_3$1p, templateObject_4$17, templateObject_5$S, templateObject_6$
|
|
5041
|
+
var templateObject_1$2q, templateObject_2$1M, templateObject_3$1p, templateObject_4$17, templateObject_5$S, templateObject_6$J;
|
|
5042
5042
|
|
|
5043
5043
|
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"])));
|
|
5044
5044
|
var DropContainer = newStyled.div(templateObject_2$1L || (templateObject_2$1L = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
@@ -6126,7 +6126,7 @@ var TooltipText = newStyled.div(templateObject_4$14 || (templateObject_4$14 = __
|
|
|
6126
6126
|
return color;
|
|
6127
6127
|
});
|
|
6128
6128
|
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"])));
|
|
6129
|
-
var Title$a = newStyled.h1(templateObject_6$
|
|
6129
|
+
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) {
|
|
6130
6130
|
var color = _a.color;
|
|
6131
6131
|
return color;
|
|
6132
6132
|
});
|
|
@@ -6135,7 +6135,7 @@ var CloseToolTip = newStyled.button(templateObject_8$s || (templateObject_8$s =
|
|
|
6135
6135
|
var _b = _a.right, right = _b === void 0 ? '.3rem' : _b;
|
|
6136
6136
|
return right;
|
|
6137
6137
|
});
|
|
6138
|
-
var templateObject_1$2d, templateObject_2$1D, templateObject_3$1k, templateObject_4$14, templateObject_5$Q, templateObject_6$
|
|
6138
|
+
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;
|
|
6139
6139
|
|
|
6140
6140
|
var Tooltip = function (_a) {
|
|
6141
6141
|
var _b;
|
|
@@ -6205,7 +6205,7 @@ var SubscriptionHeader$5 = newStyled.div(templateObject_5$P || (templateObject_5
|
|
|
6205
6205
|
var theme = _a.theme;
|
|
6206
6206
|
return theme.colors.pallete.primary.color;
|
|
6207
6207
|
});
|
|
6208
|
-
var BenefitsContainer$4 = newStyled.div(templateObject_6$
|
|
6208
|
+
var BenefitsContainer$4 = newStyled.div(templateObject_6$H || (templateObject_6$H = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
6209
6209
|
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"])));
|
|
6210
6210
|
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"])));
|
|
6211
6211
|
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"])));
|
|
@@ -6216,7 +6216,7 @@ var StyledPrice$4 = newStyled(PriceLabelV2$1)(templateObject_12$6 || (templateOb
|
|
|
6216
6216
|
return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
|
|
6217
6217
|
});
|
|
6218
6218
|
var Container$1m = newStyled.div(templateObject_13$5 || (templateObject_13$5 = __makeTemplateObject([""], [""])));
|
|
6219
|
-
var templateObject_1$2c, templateObject_2$1C, templateObject_3$1j, templateObject_4$13, templateObject_5$P, templateObject_6$
|
|
6219
|
+
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;
|
|
6220
6220
|
|
|
6221
6221
|
var radioIds$3 = {
|
|
6222
6222
|
oneTime: {
|
|
@@ -6309,7 +6309,7 @@ var SinglePurchaseContainer$3 = newStyled(ContainerBase$4)(templateObject_4$12 |
|
|
|
6309
6309
|
return (onClick ? 'cursor: pointer;' : '');
|
|
6310
6310
|
});
|
|
6311
6311
|
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"])));
|
|
6312
|
-
var SubscriptionHeader$4 = newStyled.div(templateObject_6$
|
|
6312
|
+
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) {
|
|
6313
6313
|
var theme = _a.theme;
|
|
6314
6314
|
return theme.colors.shades[200].color;
|
|
6315
6315
|
}, function (_a) {
|
|
@@ -6329,7 +6329,7 @@ var TooltipWrapper$1 = newStyled.div(templateObject_13$4 || (templateObject_13$4
|
|
|
6329
6329
|
var theme = _a.theme;
|
|
6330
6330
|
return theme.component.autoship.tooltip.margin;
|
|
6331
6331
|
});
|
|
6332
|
-
var templateObject_1$2b, templateObject_2$1B, templateObject_3$1i, templateObject_4$12, templateObject_5$O, templateObject_6$
|
|
6332
|
+
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;
|
|
6333
6333
|
|
|
6334
6334
|
var radioIds$2 = {
|
|
6335
6335
|
oneTime: {
|
|
@@ -6413,8 +6413,8 @@ var CustomerInfo = newStyled.div(templateObject_2$1A || (templateObject_2$1A = _
|
|
|
6413
6413
|
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"])));
|
|
6414
6414
|
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"])));
|
|
6415
6415
|
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"])));
|
|
6416
|
-
var ReviewDays = newStyled.span(templateObject_6$
|
|
6417
|
-
var templateObject_1$2a, templateObject_2$1A, templateObject_3$1h, templateObject_4$11, templateObject_5$N, templateObject_6$
|
|
6416
|
+
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"])));
|
|
6417
|
+
var templateObject_1$2a, templateObject_2$1A, templateObject_3$1h, templateObject_4$11, templateObject_5$N, templateObject_6$F;
|
|
6418
6418
|
|
|
6419
6419
|
var NameWithStars = function (_a) {
|
|
6420
6420
|
var name = _a.name, size = _a.size;
|
|
@@ -6713,7 +6713,7 @@ var MobileContainer = newStyled(Container$1e)(templateObject_2$1v || (templateOb
|
|
|
6713
6713
|
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"])));
|
|
6714
6714
|
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"])));
|
|
6715
6715
|
var MobileDollarPart = newStyled(DollarPart)(templateObject_5$M || (templateObject_5$M = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
6716
|
-
var MobileClubMembersText = newStyled(ClubMembersText)(templateObject_6$
|
|
6716
|
+
var MobileClubMembersText = newStyled(ClubMembersText)(templateObject_6$E || (templateObject_6$E = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
6717
6717
|
var DesktopDollarPart = newStyled(DollarPart)(templateObject_7$w || (templateObject_7$w = __makeTemplateObject(["\n font-size: 13px;\n"], ["\n font-size: 13px;\n"])));
|
|
6718
6718
|
var DesktopClubMembersText = newStyled(ClubMembersText)(templateObject_8$p || (templateObject_8$p = __makeTemplateObject(["\n font-size: 13px;\n"], ["\n font-size: 13px;\n"])));
|
|
6719
6719
|
var ClubPriceLabel = function (_a) {
|
|
@@ -6721,7 +6721,7 @@ var ClubPriceLabel = function (_a) {
|
|
|
6721
6721
|
var isMobile = useWindowDimensions().isMobile;
|
|
6722
6722
|
return (jsx$1(Fragment$2, { children: isMobile ? (jsxs$1(MobileContainer, { children: [jsx$1(MobileDollarPart, { children: clubPrice }, void 0), jsx$1(MobileClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) : (jsxs$1(Container$1e, { children: [jsx$1(DesktopDollarPart, { children: clubPrice }, void 0), jsx$1(DesktopClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) }, void 0));
|
|
6723
6723
|
};
|
|
6724
|
-
var templateObject_1$1X, templateObject_2$1v, templateObject_3$1c, templateObject_4$Z, templateObject_5$M, templateObject_6$
|
|
6724
|
+
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;
|
|
6725
6725
|
|
|
6726
6726
|
var Spacing = function (_a) {
|
|
6727
6727
|
var size = _a.size, _b = _a.type, type = _b === void 0 ? 'block' : _b, children = _a.children, styleProp = _a.style;
|
|
@@ -7097,8 +7097,8 @@ var HTMLVideo = newStyled.video(templateObject_2$1n || (templateObject_2$1n = __
|
|
|
7097
7097
|
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"])));
|
|
7098
7098
|
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"])));
|
|
7099
7099
|
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"])));
|
|
7100
|
-
var MuteButton = newStyled.button(templateObject_6$
|
|
7101
|
-
var templateObject_1$1K, templateObject_2$1n, templateObject_3$18, templateObject_4$W, templateObject_5$L, templateObject_6$
|
|
7100
|
+
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"])));
|
|
7101
|
+
var templateObject_1$1K, templateObject_2$1n, templateObject_3$18, templateObject_4$W, templateObject_5$L, templateObject_6$D;
|
|
7102
7102
|
|
|
7103
7103
|
var Video$1 = function (_a) {
|
|
7104
7104
|
var _b, _c;
|
|
@@ -7436,13 +7436,13 @@ var TopTagContainer$9 = newStyled.div(templateObject_5$J || (templateObject_5$J
|
|
|
7436
7436
|
var style = _a.style;
|
|
7437
7437
|
return style.width;
|
|
7438
7438
|
});
|
|
7439
|
-
var BottomTagContainer$9 = newStyled.div(templateObject_6$
|
|
7439
|
+
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) {
|
|
7440
7440
|
var style = _a.style;
|
|
7441
7441
|
return style.width;
|
|
7442
7442
|
});
|
|
7443
7443
|
var MarginTopContainer$1 = newStyled.div(templateObject_7$v || (templateObject_7$v = __makeTemplateObject(["\n margin-top: 8px;\n"], ["\n margin-top: 8px;\n"])));
|
|
7444
7444
|
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"])));
|
|
7445
|
-
var templateObject_1$1G, templateObject_2$1k, templateObject_3$16, templateObject_4$U, templateObject_5$J, templateObject_6$
|
|
7445
|
+
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;
|
|
7446
7446
|
|
|
7447
7447
|
var ProductItemMobile = function (_a) {
|
|
7448
7448
|
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
|
|
@@ -7592,7 +7592,7 @@ var TopTagContainer$8 = newStyled.div(templateObject_5$I || (templateObject_5$I
|
|
|
7592
7592
|
var style = _a.style;
|
|
7593
7593
|
return style.width;
|
|
7594
7594
|
});
|
|
7595
|
-
var TopRightTagContainer$3 = newStyled.div(templateObject_6$
|
|
7595
|
+
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"])));
|
|
7596
7596
|
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) {
|
|
7597
7597
|
var style = _a.style;
|
|
7598
7598
|
return style.width;
|
|
@@ -7670,7 +7670,7 @@ var ProductItemTK = function (_a) {
|
|
|
7670
7670
|
colorPicker.position === 'middle' &&
|
|
7671
7671
|
!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));
|
|
7672
7672
|
};
|
|
7673
|
-
var templateObject_1$1F, templateObject_2$1j, templateObject_3$15, templateObject_4$T, templateObject_5$I, templateObject_6$
|
|
7673
|
+
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;
|
|
7674
7674
|
|
|
7675
7675
|
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"])));
|
|
7676
7676
|
function withProductGrid(ProductItemComponent, data) {
|
|
@@ -7847,13 +7847,13 @@ var Row$2 = newStyled.div(templateObject_3$13 || (templateObject_3$13 = __makeTe
|
|
|
7847
7847
|
});
|
|
7848
7848
|
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; });
|
|
7849
7849
|
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; });
|
|
7850
|
-
var FreeShipping = newStyled.span(templateObject_6$
|
|
7850
|
+
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; });
|
|
7851
7851
|
var CrossSellCheckbox = function (_a) {
|
|
7852
7852
|
var imageURL = _a.imageURL, title = _a.title, description = _a.description, freeShippingText = _a.freeShippingText, rightToLeft = _a.rightToLeft, onChange = _a.onChange;
|
|
7853
7853
|
var theme = useTheme();
|
|
7854
7854
|
return (jsxs$1(Wrapper$5, __assign$1({ backgroundColor: theme.colors.shades['10'].color, rightToLeft: Boolean(rightToLeft) }, { children: [jsx$1(Checkbox, { text: "", id: "checkbox", onChange: onChange, size: ComponentSize.Small, variant: "secondary" }, void 0), jsxs$1(Row$2, __assign$1({ rightToLeft: Boolean(rightToLeft) }, { children: [jsx$1(Image$3, { src: imageURL, alt: "Cross sell image", borderRadius: "0.5rem" }, void 0), jsxs$1(Col$1, { children: [jsx$1(H5, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0), jsxs$1(H3, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: [description, jsxs$1(FreeShipping, __assign$1({ color: theme.colors.shades['700'].color }, { children: [' ', "+ ", freeShippingText] }), void 0)] }), void 0)] }, void 0)] }), void 0)] }), void 0));
|
|
7855
7855
|
};
|
|
7856
|
-
var templateObject_1$1A, templateObject_2$1f, templateObject_3$13, templateObject_4$R, templateObject_5$G, templateObject_6$
|
|
7856
|
+
var templateObject_1$1A, templateObject_2$1f, templateObject_3$13, templateObject_4$R, templateObject_5$G, templateObject_6$A;
|
|
7857
7857
|
|
|
7858
7858
|
var index$1 = /*#__PURE__*/Object.freeze({
|
|
7859
7859
|
__proto__: null,
|
|
@@ -8033,7 +8033,7 @@ var IconContainer$4 = newStyled.div(templateObject_5$F || (templateObject_5$F =
|
|
|
8033
8033
|
marginBottom: ['10px', '0'],
|
|
8034
8034
|
width: ['auto', '1.5rem'],
|
|
8035
8035
|
}));
|
|
8036
|
-
var SectionTitle = newStyled.h1(templateObject_6$
|
|
8036
|
+
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({
|
|
8037
8037
|
display: ['block', 'flex'],
|
|
8038
8038
|
}), function (_a) {
|
|
8039
8039
|
var theme = _a.theme;
|
|
@@ -8056,7 +8056,7 @@ var DeliveryDetails = function (_a) {
|
|
|
8056
8056
|
var theme = useTheme();
|
|
8057
8057
|
return (jsxs$1("div", __assign$1({ "data-testid": "DeliveryDetails" }, { children: [jsx$1(Title$5, __assign$1({ color: theme.colors.shades[700].color }, { children: deliveryDetailsText }), void 0), jsx$1(Line, { backgroundColor: theme.colors.shades['200'].color }, void 0), note && jsx$1(Note, __assign$1({}, note), void 0), jsxs$1(Row$1, __assign$1({ "data-testid": "DD-row", theme: theme }, { children: [jsxs$1(Col, __assign$1({ theme: theme }, { children: [jsxs$1(SectionTitle, __assign$1({ theme: theme }, { children: [jsx$1(IconContainer$4, __assign$1({ theme: theme }, { children: jsx$1(Icon.PDP.Clock, { width: 1.5 }, void 0) }), void 0), arrivingBy.title] }), void 0), jsx$1(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: arrivingBy.details }), void 0)] }), void 0), jsxs$1(Col, __assign$1({ theme: theme }, { children: [jsxs$1(SectionTitle, __assign$1({ theme: theme }, { children: [jsx$1(IconContainer$4, __assign$1({ theme: theme }, { children: jsx$1(Icon.Navigation.MapMarker, { width: 1.5 }, void 0) }), void 0), shippingTo.title] }), void 0), jsx$1(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: shippingTo.details }), void 0)] }), void 0), jsxs$1(Col, __assign$1({ theme: theme }, { children: [jsxs$1(SectionTitle, __assign$1({ theme: theme }, { children: [jsx$1(IconContainer$4, __assign$1({ theme: theme }, { children: jsx$1(Icon.Messaging.Messenger, { width: 1.5 }, void 0) }), void 0), instantOrderUpdate.title] }), void 0), jsx$1(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: instantOrderUpdate.details }), void 0), instantOrderUpdate.keepMeUpdated && (jsxs$1(KeepMeUpdated, __assign$1({ onClick: instantOrderUpdate.keepMeUpdated.onClick, borderColor: theme.colors.shades['150'].color }, { children: [jsx$1(Icon.Messaging.Messenger, { width: 1, height: 1, fill: "#0078FF" }, void 0), instantOrderUpdate.keepMeUpdated.title] }), void 0))] }), void 0)] }), void 0)] }), void 0));
|
|
8058
8058
|
};
|
|
8059
|
-
var templateObject_1$1x, templateObject_2$1c, templateObject_3$11, templateObject_4$P, templateObject_5$F, templateObject_6$
|
|
8059
|
+
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;
|
|
8060
8060
|
|
|
8061
8061
|
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) {
|
|
8062
8062
|
var top = _a.top;
|
|
@@ -8124,8 +8124,8 @@ var Item$2 = newStyled.li(templateObject_2$1a || (templateObject_2$1a = __makeTe
|
|
|
8124
8124
|
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"])));
|
|
8125
8125
|
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"])));
|
|
8126
8126
|
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; });
|
|
8127
|
-
var DropdownItem = newStyled.li(templateObject_6$
|
|
8128
|
-
var templateObject_1$1v, templateObject_2$1a, templateObject_3$10, templateObject_4$O, templateObject_5$E, templateObject_6$
|
|
8127
|
+
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; });
|
|
8128
|
+
var templateObject_1$1v, templateObject_2$1a, templateObject_3$10, templateObject_4$O, templateObject_5$E, templateObject_6$y;
|
|
8129
8129
|
|
|
8130
8130
|
var DropdownListIcons = function (_a) {
|
|
8131
8131
|
var items = _a.items;
|
|
@@ -8143,8 +8143,8 @@ var DropdownLabel = newStyled.div(templateObject_2$19 || (templateObject_2$19 =
|
|
|
8143
8143
|
var SizeLabel = newStyled.span(templateObject_3$$ || (templateObject_3$$ = __makeTemplateObject(["\n margin-right: 8px;\n"], ["\n margin-right: 8px;\n"])));
|
|
8144
8144
|
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"])));
|
|
8145
8145
|
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"])));
|
|
8146
|
-
var DropdownOption = newStyled.div(templateObject_6$
|
|
8147
|
-
var templateObject_1$1u, templateObject_2$19, templateObject_3$$, templateObject_4$N, templateObject_5$D, templateObject_6$
|
|
8146
|
+
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"])));
|
|
8147
|
+
var templateObject_1$1u, templateObject_2$19, templateObject_3$$, templateObject_4$N, templateObject_5$D, templateObject_6$x;
|
|
8148
8148
|
|
|
8149
8149
|
var SizeDropdown = function (_a) {
|
|
8150
8150
|
var options = _a.options, defaultLabel = _a.defaultLabel, onOptionSelect = _a.onOptionSelect;
|
|
@@ -8297,12 +8297,12 @@ var Header$4 = newStyled.div(templateObject_2$16 || (templateObject_2$16 = __mak
|
|
|
8297
8297
|
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"])));
|
|
8298
8298
|
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"])));
|
|
8299
8299
|
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; });
|
|
8300
|
-
var FilterLink = newStyled.a(templateObject_6$
|
|
8300
|
+
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; });
|
|
8301
8301
|
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'); });
|
|
8302
8302
|
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; });
|
|
8303
8303
|
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"])));
|
|
8304
8304
|
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"])));
|
|
8305
|
-
var templateObject_1$1r, templateObject_2$16, templateObject_3$Y, templateObject_4$K, templateObject_5$B, templateObject_6$
|
|
8305
|
+
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;
|
|
8306
8306
|
|
|
8307
8307
|
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"])));
|
|
8308
8308
|
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; });
|
|
@@ -12840,10 +12840,10 @@ var Container$$ = newStyled.div(templateObject_3$W || (templateObject_3$W = __ma
|
|
|
12840
12840
|
});
|
|
12841
12841
|
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"])));
|
|
12842
12842
|
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"])));
|
|
12843
|
-
var ArrowBaseStyles = newStyled.div(templateObject_6$
|
|
12843
|
+
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"])));
|
|
12844
12844
|
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"])));
|
|
12845
12845
|
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"])));
|
|
12846
|
-
var templateObject_1$1l, templateObject_2$12, templateObject_3$W, templateObject_4$J, templateObject_5$A, templateObject_6$
|
|
12846
|
+
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;
|
|
12847
12847
|
|
|
12848
12848
|
var getLoadingProp = function (index, itemsOnViewport) {
|
|
12849
12849
|
var loading = 'eager';
|
|
@@ -14488,7 +14488,7 @@ var BottomTagContainer$7 = newStyled.div(templateObject_3$V || (templateObject_3
|
|
|
14488
14488
|
});
|
|
14489
14489
|
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"])));
|
|
14490
14490
|
var TopRightTagContainer$2 = newStyled.div(templateObject_5$z || (templateObject_5$z = __makeTemplateObject(["\n white-space: pre-wrap;\n"], ["\n white-space: pre-wrap;\n"])));
|
|
14491
|
-
var ButtonSecondaryOutlineWrapper = newStyled(ButtonSecondaryOutline)(templateObject_6$
|
|
14491
|
+
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"])));
|
|
14492
14492
|
var ImageStyled = newStyled(Image$3)(templateObject_7$q || (templateObject_7$q = __makeTemplateObject(["\n aspect-ratio: ", ";\n"], ["\n aspect-ratio: ", ";\n"])), function (_a) {
|
|
14493
14493
|
var theme = _a.theme, isRatioSquare = _a.isRatioSquare;
|
|
14494
14494
|
return isRatioSquare ? '1 / 1' : theme.component.gallery.aspectRatio;
|
|
@@ -14497,7 +14497,7 @@ var InnerImageZoomStyled = newStyled(InnerImageZoom)(templateObject_8$j || (temp
|
|
|
14497
14497
|
var theme = _a.theme, isRatioSquare = _a.isRatioSquare;
|
|
14498
14498
|
return isRatioSquare ? '1 / 1' : theme.component.gallery.aspectRatio;
|
|
14499
14499
|
});
|
|
14500
|
-
var templateObject_1$1k, templateObject_2$11, templateObject_3$V, templateObject_4$I, templateObject_5$z, templateObject_6$
|
|
14500
|
+
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;
|
|
14501
14501
|
|
|
14502
14502
|
var ImageProductSlide$1 = function (_a) {
|
|
14503
14503
|
var _b;
|
|
@@ -14719,8 +14719,8 @@ var AnimatedPlaceholder = newStyled.span(templateObject_5$y || (templateObject_5
|
|
|
14719
14719
|
var theme = _a.theme;
|
|
14720
14720
|
return theme.component.input.lineHeight;
|
|
14721
14721
|
});
|
|
14722
|
-
var ClearInput = newStyled.div(templateObject_6$
|
|
14723
|
-
var templateObject_1$1f, templateObject_2$_, templateObject_3$T, templateObject_4$H, templateObject_5$y, templateObject_6$
|
|
14722
|
+
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"])));
|
|
14723
|
+
var templateObject_1$1f, templateObject_2$_, templateObject_3$T, templateObject_4$H, templateObject_5$y, templateObject_6$t;
|
|
14724
14724
|
|
|
14725
14725
|
var BaseInput = function (_a) {
|
|
14726
14726
|
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"]);
|
|
@@ -14973,7 +14973,7 @@ var transformStyle = function (_a) {
|
|
|
14973
14973
|
return opened
|
|
14974
14974
|
? 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%');
|
|
14975
14975
|
};
|
|
14976
|
-
var Container$T = newStyled.div(templateObject_6$
|
|
14976
|
+
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) {
|
|
14977
14977
|
var width = _a.width;
|
|
14978
14978
|
return width
|
|
14979
14979
|
? css(templateObject_5$x || (templateObject_5$x = __makeTemplateObject(["\n width: ", ";\n "], ["\n width: ", ";\n "])), width) : mediaQueries({
|
|
@@ -15021,7 +15021,7 @@ var useModal = function (id) {
|
|
|
15021
15021
|
close: close,
|
|
15022
15022
|
}); }, [close, open, opened]);
|
|
15023
15023
|
};
|
|
15024
|
-
var templateObject_1$1a, templateObject_2$W, templateObject_3$R, templateObject_4$G, templateObject_5$x, templateObject_6$
|
|
15024
|
+
var templateObject_1$1a, templateObject_2$W, templateObject_3$R, templateObject_4$G, templateObject_5$x, templateObject_6$s, templateObject_7$p;
|
|
15025
15025
|
|
|
15026
15026
|
var htmlReactParser = {exports: {}};
|
|
15027
15027
|
|
|
@@ -18904,7 +18904,7 @@ var Card$1 = newStyled.div(templateObject_2$T || (templateObject_2$T = __makeTem
|
|
|
18904
18904
|
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"])));
|
|
18905
18905
|
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"])));
|
|
18906
18906
|
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"])));
|
|
18907
|
-
var IconContainer$2 = newStyled.div(templateObject_6$
|
|
18907
|
+
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"])));
|
|
18908
18908
|
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"])));
|
|
18909
18909
|
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"])));
|
|
18910
18910
|
var PackSelector = function (_a) {
|
|
@@ -18936,7 +18936,7 @@ var PackCard = function (_a) {
|
|
|
18936
18936
|
currency: currencyCode || 'USD',
|
|
18937
18937
|
}), ' ', "each"] }), void 0)] }), void 0));
|
|
18938
18938
|
};
|
|
18939
|
-
var templateObject_1$17, templateObject_2$T, templateObject_3$Q, templateObject_4$F, templateObject_5$w, templateObject_6$
|
|
18939
|
+
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;
|
|
18940
18940
|
|
|
18941
18941
|
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"])));
|
|
18942
18942
|
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"])));
|
|
@@ -19081,7 +19081,7 @@ var PriceContainer = newStyled.div(templateObject_4$D || (templateObject_4$D = _
|
|
|
19081
19081
|
: 'justify-content: end';
|
|
19082
19082
|
});
|
|
19083
19083
|
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"])));
|
|
19084
|
-
var StyledSpan = newStyled.span(templateObject_6$
|
|
19084
|
+
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"])));
|
|
19085
19085
|
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) {
|
|
19086
19086
|
var theme = _a.theme;
|
|
19087
19087
|
return theme.colors.semantic.urgent.color;
|
|
@@ -19092,7 +19092,7 @@ var SimpleOrderItem = function (_a) {
|
|
|
19092
19092
|
var theme = useTheme();
|
|
19093
19093
|
return (jsxs$1(Container$N, __assign$1({ className: className }, { children: [jsxs$1(ImageContainer$3, { children: [jsx$1(Image$3, { src: image.src, alt: image.alt, width: "4.063rem", height: "5.375rem", objectFit: "cover", objectPosition: "center" }, void 0), quantity ? (jsx$1(Quantity, __assign$1({ "data-testid": "order-item-quantity" }, { children: jsx$1(StyledSpan, { children: quantity }, void 0) }), void 0)) : null] }, void 0), jsxs$1(DescriptionContainer$1, __assign$1({ "data-testid": "order-item-description-container", theme: theme }, { children: [jsx$1(Title$3, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "product-title" }, { children: title }), void 0), subtitle && (jsx$1(Subtitle, __assign$1({ color: ((_c = (_b = theme.component.pricing) === null || _b === void 0 ? void 0 : _b.subtitle) === null || _c === void 0 ? void 0 : _c.color) || theme.colors.shades['700'].color, fontSize: ((_e = (_d = theme.component.pricing) === null || _d === void 0 ? void 0 : _d.subtitle) === null || _e === void 0 ? void 0 : _e.fontSize) || '0.75rem', lineHeight: ((_g = (_f = theme.component.pricing) === null || _f === void 0 ? void 0 : _f.subtitle) === null || _g === void 0 ? void 0 : _g.lineHeight) || '1rem', fontWeight: ((_j = (_h = theme.component.pricing) === null || _h === void 0 ? void 0 : _h.subtitle) === null || _j === void 0 ? void 0 : _j.fontWeight) || 'normal', "data-testid": "product-variant-title", margin: "0.5rem 0 0 0" }, { children: subtitle }), void 0)), midElement, isGift && jsx$1(Gift, { children: "Limited Time Only" }, void 0), jsxs$1(PriceContainer, __assign$1({ "data-testid": "order-item-price-container", withTag: !!tag, theme: theme }, { children: [tag && (jsx$1(OfferBanner, { discountAppliedText: tag === null || tag === void 0 ? void 0 : tag.text, backgroundColor: tag === null || tag === void 0 ? void 0 : tag.backgroundColor }, void 0)), isGift ? (jsx$1(Gift, { children: "GIFT" }, void 0)) : (jsx$1(PriceLabel$1, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, color: price.color || theme.colors.shades['700'].color, size: theme.component.pricing.priceLabel.price.size, finalPriceStyle: finalPriceStyle, originalPriceStyled: true }, void 0))] }), void 0)] }), void 0)] }), void 0));
|
|
19094
19094
|
};
|
|
19095
|
-
var templateObject_1$14, templateObject_2$R, templateObject_3$O, templateObject_4$D, templateObject_5$v, templateObject_6$
|
|
19095
|
+
var templateObject_1$14, templateObject_2$R, templateObject_3$O, templateObject_4$D, templateObject_5$v, templateObject_6$q, templateObject_7$n;
|
|
19096
19096
|
|
|
19097
19097
|
var P$1 = newStyled.p(function (_a) {
|
|
19098
19098
|
var color = _a.color;
|
|
@@ -19408,7 +19408,7 @@ var Content$1 = newStyled.div(templateObject_2$N || (templateObject_2$N = __make
|
|
|
19408
19408
|
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"])));
|
|
19409
19409
|
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"])));
|
|
19410
19410
|
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"])));
|
|
19411
|
-
var ReviewerName$1 = newStyled.h1(templateObject_6$
|
|
19411
|
+
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"])));
|
|
19412
19412
|
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"])));
|
|
19413
19413
|
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"])));
|
|
19414
19414
|
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"])));
|
|
@@ -19444,7 +19444,7 @@ var Review$1 = function (_a) {
|
|
|
19444
19444
|
return (jsx$1(Modal, __assign$1({ id: modalId, maxFullScreen: maxFullScreen, padding: "0" }, { children: jsxs$1(Container$I, { children: [jsx$1(CloseButton, __assign$1({ onClick: close }, { children: "X" }), void 0), jsx$1(ImageContainer$2, { children: image &&
|
|
19445
19445
|
(!isVideo ? (jsx$1(ImageWrapper$3, { src: image.src, alt: image.alt }, void 0)) : (jsx$1(VideoWrapper, { ref: refVideo, src: image.src, width: "100%", controls: true }, void 0))) }, void 0), jsxs$1(DescriptionContainer, { children: [opened && (jsxs$1(ReviewerName$1, { children: [reviewerName, verified && jsx$1(VerifiedText, { children: "Verified Buyer" }, void 0)] }, void 0)), jsxs$1(Content$1, __assign$1({ "data-testid": "review-detail-content" }, { children: [jsxs$1(StarsContent, { children: [jsx$1(StarList, { starsNumber: 5, rating: rating, fill: stars.color, size: stars.size }, void 0), jsx$1(DateText$1, { children: formatDate(date) }, void 0)] }, void 0), jsxs$1(ReviewContainer$1, { children: [jsx$1(ReviewTitle$1, { children: title }, void 0), jsx$1(ReviewDescription, { dangerouslySetInnerHTML: { __html: description } }, void 0)] }, void 0), jsxs$1(HelpfulContainer, { children: [jsxs$1(HelpfulAction, __assign$1({ "data-testid": "helpful-action", onClick: function () { return (helpfulAction ? helpfulAction(reviewId) : undefined); } }, { children: [jsx$1(Icon.Custom.ThumbsUp, { width: 1, height: 1, fill: "#000" }, void 0), jsx$1(HelpfulCount, { children: helpfulCount }, void 0)] }), void 0), jsxs$1(NotHelpfulAction, __assign$1({ "data-testid": "not-helpful-action", onClick: function () { return (notHelpfulAction ? notHelpfulAction(reviewId) : undefined); } }, { children: [jsx$1(Icon.Custom.ThumbsDown, { width: 1, height: 1, fill: "#000" }, void 0), jsx$1(NotHelpfulCount, { children: notHelpfulCount }, void 0)] }), void 0)] }, void 0)] }), void 0), productImage && productLink && (jsxs$1(ProductContainer, __assign$1({ onClick: function () { return (window.location.href = productLink); } }, { children: [jsx$1(ProductImageWrapper, { children: jsx$1(ProductImage, { src: productImage, alt: "productImage" }, void 0) }, void 0), jsx$1(ProductTitle, { children: productTitle }, void 0)] }), void 0))] }, void 0)] }, void 0) }), void 0));
|
|
19446
19446
|
};
|
|
19447
|
-
var templateObject_1$$, templateObject_2$N, templateObject_3$K, templateObject_4$B, templateObject_5$u, templateObject_6$
|
|
19447
|
+
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;
|
|
19448
19448
|
|
|
19449
19449
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_DESKTOP = 500;
|
|
19450
19450
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_MOBILE = 168;
|
|
@@ -19453,7 +19453,7 @@ var Heading = newStyled.div(templateObject_2$M || (templateObject_2$M = __makeTe
|
|
|
19453
19453
|
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"])));
|
|
19454
19454
|
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"])));
|
|
19455
19455
|
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"])));
|
|
19456
|
-
var VariantText = newStyled.div(templateObject_6$
|
|
19456
|
+
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"])));
|
|
19457
19457
|
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"])));
|
|
19458
19458
|
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"])));
|
|
19459
19459
|
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"])));
|
|
@@ -19500,14 +19500,14 @@ var Review = function (_a) {
|
|
|
19500
19500
|
: description,
|
|
19501
19501
|
} }, void 0), jsxs$1(HelpfulContainerDesktop, __assign$1({ showMoreDesktop: description.length > REVIEWS_DESCRIPTION_MAX_LENGTH_DESKTOP }, { children: [helpfulActionText && helpfulAction && (jsx$1(ButtonSecondaryWrapper, { onClick: function () { return helpfulAction(reviewId); }, text: helpfulActionText, size: ComponentSize.Small }, void 0)), (helpfulCount || (hasTextWhenHelpfulCount0 && helpfulCount === 0)) && (jsxs$1(HelpfulText, { children: [helpfulCount, " people found this helpful"] }, void 0))] }), void 0)] }, void 0), jsxs$1(ImagesContainer, { children: [jsxs$1(Images, { children: [images === null || images === void 0 ? void 0 : images.map(function (image) { return (jsx$1(ImageWrapper$2, __assign$1({ onClick: function () { return onClickImage && onClickImage(image.src); } }, { children: jsx$1(Image$3, { src: image.src, alt: image.alt, height: "10rem", width: "7.5rem" }, void 0) }), image.src)); }), !images || (images.length === 0 && jsx$1(ImageSpace, {}, void 0))] }, void 0), jsx$1(VariantText, { children: reviewVariant }, void 0)] }, void 0)] }), void 0), jsx$1(HelpfulTexti, {}, void 0), jsxs$1(HelpfulContainerMobile, { children: [helpfulActionText && helpfulAction && (jsx$1(ButtonSecondaryWrapper, { onClick: function () { return helpfulAction(reviewId); }, text: helpfulActionText, size: ComponentSize.Small }, void 0)), (helpfulCount || (hasTextWhenHelpfulCount0 && helpfulCount === 0)) && (jsxs$1(HelpfulText, { children: [helpfulCount, " people found this helpful"] }, void 0))] }, void 0)] }, void 0));
|
|
19502
19502
|
};
|
|
19503
|
-
var templateObject_1$_, templateObject_2$M, templateObject_3$J, templateObject_4$A, templateObject_5$t, templateObject_6$
|
|
19503
|
+
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;
|
|
19504
19504
|
|
|
19505
19505
|
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"])));
|
|
19506
19506
|
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"])));
|
|
19507
19507
|
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"])));
|
|
19508
19508
|
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"])));
|
|
19509
19509
|
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"])));
|
|
19510
|
-
var ReviewsImages = newStyled.div(templateObject_6$
|
|
19510
|
+
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"])));
|
|
19511
19511
|
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) {
|
|
19512
19512
|
var backgroundUrl = _a.backgroundUrl;
|
|
19513
19513
|
return "url(".concat(backgroundUrl, ")");
|
|
@@ -19518,7 +19518,7 @@ var ReviewsHeader = function (_a) {
|
|
|
19518
19518
|
var theme = useTheme();
|
|
19519
19519
|
return (jsxs$1(Container$G, { children: [jsx$1(Text$7, __assign$1({ variant: "heading3", weight: "bold", style: { margin: '10px 0' } }, { children: title }), void 0), jsxs$1(ReviewsContainer, { children: [jsxs$1(ReviewsCount, { children: [jsxs$1(ReviewsStars, { children: [jsx$1(ReviewsTextCount, __assign$1({ variant: "heading3", weight: "bold" }, { children: rating }), void 0), jsx$1(StarList, { rating: rating, size: ComponentSize.Medium, starsNumber: starsNumber, fill: theme.component.stars.element.color }, void 0)] }, void 0), jsxs$1(Text$7, __assign$1({ variant: "body", size: "small", weight: "regular", style: { marginBottom: '20px' } }, { children: [reviews, " ", reviewsText] }), void 0)] }, void 0), jsx$1(ReviewsImages, { children: reviewsSummary.map(function (summaryItem) { return (jsx$1(SummaryItem, { onClick: function () { return onClickReview(summaryItem); }, backgroundUrl: summaryItem, "data-testid": "summary-review-item" }, summaryItem)); }) }, void 0)] }, void 0)] }, void 0));
|
|
19520
19520
|
};
|
|
19521
|
-
var templateObject_1$Z, templateObject_2$L, templateObject_3$I, templateObject_4$z, templateObject_5$s, templateObject_6$
|
|
19521
|
+
var templateObject_1$Z, templateObject_2$L, templateObject_3$I, templateObject_4$z, templateObject_5$s, templateObject_6$n, templateObject_7$k;
|
|
19522
19522
|
|
|
19523
19523
|
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"])));
|
|
19524
19524
|
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; });
|
|
@@ -19770,12 +19770,12 @@ var TableCell$3 = newStyled.td(templateObject_2$G || (templateObject_2$G = __mak
|
|
|
19770
19770
|
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; });
|
|
19771
19771
|
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"])));
|
|
19772
19772
|
var TopLabel$1 = newStyled(Label$2)(templateObject_5$q || (templateObject_5$q = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
19773
|
-
var LeftLabel$1 = newStyled(Label$2)(templateObject_6$
|
|
19773
|
+
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"])));
|
|
19774
19774
|
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"])));
|
|
19775
19775
|
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"])));
|
|
19776
19776
|
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"])));
|
|
19777
19777
|
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; });
|
|
19778
|
-
var templateObject_1$R, templateObject_2$G, templateObject_3$E, templateObject_4$x, templateObject_5$q, templateObject_6$
|
|
19778
|
+
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;
|
|
19779
19779
|
|
|
19780
19780
|
var getIsOdd$2 = function (number) { return number % 2 !== 0; };
|
|
19781
19781
|
var getCellColor$2 = function (index, cell) {
|
|
@@ -20150,8 +20150,8 @@ var ToastText = newStyled.p(templateObject_5$p || (templateObject_5$p = __makeTe
|
|
|
20150
20150
|
var severity = _a.severity;
|
|
20151
20151
|
return (severity === 'error' ? '#C64844' : '#292929');
|
|
20152
20152
|
});
|
|
20153
|
-
var CloseIcon = newStyled.div(templateObject_6$
|
|
20154
|
-
var templateObject_1$H, templateObject_2$z, templateObject_3$y, templateObject_4$t, templateObject_5$p, templateObject_6$
|
|
20153
|
+
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"])));
|
|
20154
|
+
var templateObject_1$H, templateObject_2$z, templateObject_3$y, templateObject_4$t, templateObject_5$p, templateObject_6$l;
|
|
20155
20155
|
|
|
20156
20156
|
var Toast = React__default.forwardRef(function (_a, ref) {
|
|
20157
20157
|
var _b;
|
|
@@ -20196,13 +20196,13 @@ var TotalContainer = newStyled(Container$t)(templateObject_5$o || (templateObjec
|
|
|
20196
20196
|
var showTotalLabel = _a.showTotalLabel;
|
|
20197
20197
|
return (showTotalLabel ? 'space-between' : 'flex-end');
|
|
20198
20198
|
});
|
|
20199
|
-
var DiscountText = newStyled.h3(templateObject_6$
|
|
20199
|
+
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"])));
|
|
20200
20200
|
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) {
|
|
20201
20201
|
var theme = _a.theme;
|
|
20202
20202
|
return theme.component.total.basicTotal.savings.amountFontWeight;
|
|
20203
20203
|
});
|
|
20204
20204
|
var TotalLabel = newStyled(Text$7)(templateObject_8$e || (templateObject_8$e = __makeTemplateObject(["\n font-size: 20px;\n"], ["\n font-size: 20px;\n"])));
|
|
20205
|
-
var templateObject_1$G, templateObject_2$y, templateObject_3$x, templateObject_4$s, templateObject_5$o, templateObject_6$
|
|
20205
|
+
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;
|
|
20206
20206
|
|
|
20207
20207
|
var Total = function (_a) {
|
|
20208
20208
|
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;
|
|
@@ -20247,7 +20247,7 @@ var CheckpointContainer$1 = newStyled.div(templateObject_2$w || (templateObject_
|
|
|
20247
20247
|
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; });
|
|
20248
20248
|
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'); });
|
|
20249
20249
|
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"])));
|
|
20250
|
-
var CheckpointStatus$1 = newStyled.p(templateObject_6$
|
|
20250
|
+
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) {
|
|
20251
20251
|
return props.finishedTrack
|
|
20252
20252
|
? props.finishedTrackColor
|
|
20253
20253
|
: props.activeTrack
|
|
@@ -20294,14 +20294,14 @@ var TrackingProgressV2 = function (_a) {
|
|
|
20294
20294
|
return (jsxs$1(CheckpointContainer$1, __assign$1({ "data-testid": "empty-checkpoint-track" }, { children: [jsxs$1(CheckpointDate$1, __assign$1({ currentSpace: "90px" }, { children: [jsx$1(CheckpointDateLabel$1, { lastElement: index + 1 === emptySpaces.length }, void 0), jsx$1(CheckpointDateLabel$1, { lastElement: index + 1 === emptySpaces.length }, void 0)] }), void 0), index + 1 !== emptySpaces.length && (jsx$1(ActiveCheckpointTrack$1, __assign$1({ trackColor: theme.colors.shades['200'].color }, { children: jsx$1(ActiveCheckpointDot$1, { firstElement: false }, void 0) }), void 0)), index + 1 === emptySpaces.length && (jsx$1(LastActiveCheckpointDot, __assign$1({ trackColor: theme.colors.shades['200'].color }, { children: jsx$1(ActiveCheckpointDot$1, { firstElement: false }, void 0) }), void 0)), jsx$1(CheckpointStatus$1, __assign$1({ finishedTrack: false }, { children: statusMessage }), void 0)] }), index));
|
|
20295
20295
|
})] }), void 0));
|
|
20296
20296
|
};
|
|
20297
|
-
var templateObject_1$E, templateObject_2$w, templateObject_3$v, templateObject_4$q, templateObject_5$n, templateObject_6$
|
|
20297
|
+
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;
|
|
20298
20298
|
|
|
20299
20299
|
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"])));
|
|
20300
20300
|
var CheckpointContainer = newStyled.div(templateObject_2$v || (templateObject_2$v = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
20301
20301
|
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; });
|
|
20302
20302
|
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'); });
|
|
20303
20303
|
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'); });
|
|
20304
|
-
var ActiveCheckpointTrack = newStyled.div(templateObject_6$
|
|
20304
|
+
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) {
|
|
20305
20305
|
return props.firstElement ? '8px 8px 0 0' : props.lastElement ? '0 0 8px 8px' : '';
|
|
20306
20306
|
}, function (props) { return (props.firstElement ? '20px' : '0'); }, function (props) { return (props.firstElement ? '-20px' : '0'); });
|
|
20307
20307
|
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)'); });
|
|
@@ -20334,7 +20334,7 @@ var TrackingProgress = function (_a) {
|
|
|
20334
20334
|
return (jsxs$1(CheckpointContainer, __assign$1({ "data-testid": "empty-checkpoint-track" }, { children: [jsxs$1(CheckpointDate, __assign$1({ currentSpace: getCurrentSpace(index) }, { children: [jsx$1(CheckpointDateLabel, { lastElement: index + 1 === emptySpaces.length }, void 0), jsx$1(CheckpointDateLabel, { lastElement: index + 1 === emptySpaces.length }, void 0)] }), void 0), index + 1 !== emptySpaces.length && (jsx$1(ActiveCheckpointTrack, { trackColor: theme.colors.shades['200'].color, firstElement: false, lastElement: index + 2 === emptySpaces.length }, void 0)), jsx$1(CheckpointStatus, { finishedTrack: false }, void 0)] }), index));
|
|
20335
20335
|
})] }), void 0));
|
|
20336
20336
|
};
|
|
20337
|
-
var templateObject_1$D, templateObject_2$v, templateObject_3$u, templateObject_4$p, templateObject_5$m, templateObject_6$
|
|
20337
|
+
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;
|
|
20338
20338
|
|
|
20339
20339
|
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) {
|
|
20340
20340
|
var checked = _a.checked;
|
|
@@ -20344,9 +20344,9 @@ var AutoShipHeaderBarWrapper$1 = newStyled.div(templateObject_2$u || (templateOb
|
|
|
20344
20344
|
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"])));
|
|
20345
20345
|
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"])));
|
|
20346
20346
|
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"])));
|
|
20347
|
-
var AutoShipBodyListWrapper$1 = newStyled.div(templateObject_6$
|
|
20347
|
+
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"])));
|
|
20348
20348
|
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"])));
|
|
20349
|
-
var templateObject_1$C, templateObject_2$u, templateObject_3$t, templateObject_4$o, templateObject_5$l, templateObject_6$
|
|
20349
|
+
var templateObject_1$C, templateObject_2$u, templateObject_3$t, templateObject_4$o, templateObject_5$l, templateObject_6$h, templateObject_7$f;
|
|
20350
20350
|
|
|
20351
20351
|
function AutoshipOfferCard(_a) {
|
|
20352
20352
|
var showMore = _a.showMore, copyList = _a.copyList, copy = _a.copy, handleCheckBoxChange = _a.handleCheckBoxChange, _b = _a.isChecked, isChecked = _b === void 0 ? false : _b;
|
|
@@ -20378,10 +20378,10 @@ var AutoShipHeaderBarWrapper = newStyled.div(templateObject_2$t || (templateObje
|
|
|
20378
20378
|
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"])));
|
|
20379
20379
|
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"])));
|
|
20380
20380
|
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"])));
|
|
20381
|
-
var AutoShipBodyListWrapper = newStyled.div(templateObject_6$
|
|
20381
|
+
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"])));
|
|
20382
20382
|
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"])));
|
|
20383
20383
|
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"])));
|
|
20384
|
-
var templateObject_1$B, templateObject_2$t, templateObject_3$s, templateObject_4$n, templateObject_5$k, templateObject_6$
|
|
20384
|
+
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;
|
|
20385
20385
|
|
|
20386
20386
|
function AutoshipOfferCardCta(_a) {
|
|
20387
20387
|
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;
|
|
@@ -20404,13 +20404,13 @@ var SubscriptionContainer$3 = newStyled(ContainerBase$3)(templateObject_2$s || (
|
|
|
20404
20404
|
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"])));
|
|
20405
20405
|
newStyled.div(templateObject_4$m || (templateObject_4$m = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
20406
20406
|
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"])));
|
|
20407
|
-
newStyled(Text$7)(templateObject_6$
|
|
20407
|
+
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"])));
|
|
20408
20408
|
var Container$q = newStyled.div(templateObject_7$d || (templateObject_7$d = __makeTemplateObject(["\n margin-top: 20px;\n"], ["\n margin-top: 20px;\n"])));
|
|
20409
20409
|
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) {
|
|
20410
20410
|
var height = _a.height;
|
|
20411
20411
|
return height !== null && height !== void 0 ? height : '100%';
|
|
20412
20412
|
});
|
|
20413
|
-
var templateObject_1$A, templateObject_2$s, templateObject_3$r, templateObject_4$m, templateObject_5$j, templateObject_6$
|
|
20413
|
+
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;
|
|
20414
20414
|
|
|
20415
20415
|
var renderCopy = function (copy) {
|
|
20416
20416
|
if (typeof copy === 'string') {
|
|
@@ -20504,9 +20504,9 @@ var ImageWrapper = newStyled.div(templateObject_2$q || (templateObject_2$q = __m
|
|
|
20504
20504
|
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"])));
|
|
20505
20505
|
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"])));
|
|
20506
20506
|
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"])));
|
|
20507
|
-
var SubTitleWrapper = newStyled.div(templateObject_6$
|
|
20507
|
+
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"])));
|
|
20508
20508
|
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"])));
|
|
20509
|
-
var templateObject_1$y, templateObject_2$q, templateObject_3$q, templateObject_4$l, templateObject_5$i, templateObject_6$
|
|
20509
|
+
var templateObject_1$y, templateObject_2$q, templateObject_3$q, templateObject_4$l, templateObject_5$i, templateObject_6$e, templateObject_7$c;
|
|
20510
20510
|
|
|
20511
20511
|
function CartItemCard(_a) {
|
|
20512
20512
|
var style = _a.style, className = _a.className, children = _a.children;
|
|
@@ -20571,7 +20571,7 @@ var SinglePurchaseContainer$2 = newStyled(ContainerBase$2)(templateObject_4$k ||
|
|
|
20571
20571
|
return (onClick ? 'cursor: pointer;' : '');
|
|
20572
20572
|
});
|
|
20573
20573
|
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"])));
|
|
20574
|
-
var SubscriptionHeader$2 = newStyled.div(templateObject_6$
|
|
20574
|
+
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) {
|
|
20575
20575
|
var isSelected = _a.isSelected;
|
|
20576
20576
|
return (isSelected ? "1px solid ".concat(Shades200Color$1) : "none");
|
|
20577
20577
|
}, function (_a) {
|
|
@@ -20595,7 +20595,7 @@ var StyledPrice$2 = newStyled(PriceLabelV2$1)(templateObject_10$6 || (templateOb
|
|
|
20595
20595
|
: Shades200Color$1;
|
|
20596
20596
|
});
|
|
20597
20597
|
var Container$p = newStyled.div(templateObject_11$4 || (templateObject_11$4 = __makeTemplateObject(["\n margin-top: 20px;\n"], ["\n margin-top: 20px;\n"])));
|
|
20598
|
-
var templateObject_1$x, templateObject_2$p, templateObject_3$p, templateObject_4$k, templateObject_5$h, templateObject_6$
|
|
20598
|
+
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;
|
|
20599
20599
|
|
|
20600
20600
|
var ClubOfferSelector = function (_a) {
|
|
20601
20601
|
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;
|
|
@@ -20674,7 +20674,7 @@ var SinglePurchaseContainer$1 = newStyled(ContainerBase$1)(templateObject_4$j ||
|
|
|
20674
20674
|
return (onClick ? 'cursor: pointer;' : '');
|
|
20675
20675
|
});
|
|
20676
20676
|
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"])));
|
|
20677
|
-
var SubscriptionHeader$1 = newStyled.div(templateObject_6$
|
|
20677
|
+
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) {
|
|
20678
20678
|
var isSelected = _a.isSelected;
|
|
20679
20679
|
return (isSelected ? "1px solid ".concat(Shades200Color) : "none");
|
|
20680
20680
|
}, function (_a) {
|
|
@@ -20699,7 +20699,7 @@ var StyledPrice$1 = newStyled(PriceLabelV2$1)(templateObject_10$5 || (templateOb
|
|
|
20699
20699
|
});
|
|
20700
20700
|
var Container$o = newStyled.div(templateObject_11$3 || (templateObject_11$3 = __makeTemplateObject(["\n margin-top: 20px;\n"], ["\n margin-top: 20px;\n"])));
|
|
20701
20701
|
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"])));
|
|
20702
|
-
var templateObject_1$w, templateObject_2$o, templateObject_3$o, templateObject_4$j, templateObject_5$g, templateObject_6$
|
|
20702
|
+
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;
|
|
20703
20703
|
|
|
20704
20704
|
var ClubOfferSelector2 = function (_a) {
|
|
20705
20705
|
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;
|
|
@@ -20924,11 +20924,11 @@ var ProductImageContainer = newStyled.div(templateObject_2$i || (templateObject_
|
|
|
20924
20924
|
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"])));
|
|
20925
20925
|
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"])));
|
|
20926
20926
|
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"])));
|
|
20927
|
-
var OfferTitle = newStyled(Text$7)(templateObject_6$
|
|
20927
|
+
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"])));
|
|
20928
20928
|
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"])));
|
|
20929
20929
|
var DiscountValueText = newStyled.span(templateObject_8$7 || (templateObject_8$7 = __makeTemplateObject(["\n font-weight: bold;\n"], ["\n font-weight: bold;\n"])));
|
|
20930
20930
|
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"])));
|
|
20931
|
-
var templateObject_1$p, templateObject_2$i, templateObject_3$i, templateObject_4$d, templateObject_5$b, templateObject_6$
|
|
20931
|
+
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;
|
|
20932
20932
|
|
|
20933
20933
|
var VariantType;
|
|
20934
20934
|
(function (VariantType) {
|
|
@@ -20958,13 +20958,13 @@ newStyled.div(templateObject_5$a || (templateObject_5$a = __makeTemplateObject([
|
|
|
20958
20958
|
var style = _a.style;
|
|
20959
20959
|
return style.width;
|
|
20960
20960
|
});
|
|
20961
|
-
var BottomTagContainer$6 = newStyled.div(templateObject_6$
|
|
20961
|
+
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) {
|
|
20962
20962
|
var style = _a.style;
|
|
20963
20963
|
return style.bottom || '6%';
|
|
20964
20964
|
});
|
|
20965
20965
|
newStyled.div(templateObject_7$8 || (templateObject_7$8 = __makeTemplateObject(["\n margin-top: 8px;\n"], ["\n margin-top: 8px;\n"])));
|
|
20966
20966
|
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"])));
|
|
20967
|
-
var templateObject_1$o, templateObject_2$h, templateObject_3$h, templateObject_4$c, templateObject_5$a, templateObject_6$
|
|
20967
|
+
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;
|
|
20968
20968
|
|
|
20969
20969
|
var PriceLabelDisplay = function (_a) {
|
|
20970
20970
|
var price = _a.price, discountTag = _a.discountTag;
|
|
@@ -21034,7 +21034,7 @@ var ImageHoverContainer = newStyled.img(templateObject_2$g || (templateObject_2$
|
|
|
21034
21034
|
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"])));
|
|
21035
21035
|
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"])));
|
|
21036
21036
|
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; });
|
|
21037
|
-
var TopTagContainer$5 = newStyled.div(templateObject_6$
|
|
21037
|
+
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) {
|
|
21038
21038
|
var style = _a.style;
|
|
21039
21039
|
return style.width;
|
|
21040
21040
|
});
|
|
@@ -21051,7 +21051,7 @@ var BottomTagContainer$5 = newStyled.div(templateObject_7$7 || (templateObject_7
|
|
|
21051
21051
|
var style = _a.style;
|
|
21052
21052
|
return (_b = style.width) !== null && _b !== void 0 ? _b : 'auto';
|
|
21053
21053
|
});
|
|
21054
|
-
var templateObject_1$m, templateObject_2$g, templateObject_3$g, templateObject_4$b, templateObject_5$9, templateObject_6$
|
|
21054
|
+
var templateObject_1$m, templateObject_2$g, templateObject_3$g, templateObject_4$b, templateObject_5$9, templateObject_6$9, templateObject_7$7;
|
|
21055
21055
|
|
|
21056
21056
|
var getStylesBySize$1 = function (size) {
|
|
21057
21057
|
switch (size) {
|
|
@@ -21132,7 +21132,7 @@ newStyled.img(templateObject_2$f || (templateObject_2$f = __makeTemplateObject([
|
|
|
21132
21132
|
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"])));
|
|
21133
21133
|
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"])));
|
|
21134
21134
|
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; });
|
|
21135
|
-
newStyled.div(templateObject_6$
|
|
21135
|
+
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) {
|
|
21136
21136
|
var style = _a.style;
|
|
21137
21137
|
return style.width;
|
|
21138
21138
|
});
|
|
@@ -21149,7 +21149,7 @@ newStyled.div(templateObject_7$6 || (templateObject_7$6 = __makeTemplateObject([
|
|
|
21149
21149
|
var style = _a.style;
|
|
21150
21150
|
return (_b = style.width) !== null && _b !== void 0 ? _b : 'auto';
|
|
21151
21151
|
});
|
|
21152
|
-
var templateObject_1$l, templateObject_2$f, templateObject_3$f, templateObject_4$a, templateObject_5$8, templateObject_6$
|
|
21152
|
+
var templateObject_1$l, templateObject_2$f, templateObject_3$f, templateObject_4$a, templateObject_5$8, templateObject_6$8, templateObject_7$6;
|
|
21153
21153
|
|
|
21154
21154
|
var getStylesBySize = function (size) {
|
|
21155
21155
|
switch (size) {
|
|
@@ -21282,7 +21282,7 @@ var TopTagContainer$4 = newStyled.div(templateObject_2$e || (templateObject_2$e
|
|
|
21282
21282
|
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"])));
|
|
21283
21283
|
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"])));
|
|
21284
21284
|
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"])));
|
|
21285
|
-
var Button$4 = newStyled.button(templateObject_6$
|
|
21285
|
+
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"])));
|
|
21286
21286
|
var settings$4 = {
|
|
21287
21287
|
dots: true,
|
|
21288
21288
|
infinite: false,
|
|
@@ -21360,7 +21360,7 @@ var ImageProductSlide = function (_a) {
|
|
|
21360
21360
|
return (jsx$1("div", { children: !isVideo ? (jsxs$1(Fragment$2, { children: [jsx$1(InnerImageZoom, { src: source, zoomSrc: source, zoomType: "hover", imgAttributes: getImageAttributes$1(idx, itemsOnViewport, imgAttributes), height: 510, fullscreenOnMobile: true, className: "zoomWrapper" }, void 0), jsx$1(TopTagContainer$4, __assign$1({ borderRadiusVariant: borderRadiusVariant, "data-testid": "topTag" }, { children: topTag }), void 0), jsx$1(BottomTagContainer$4, __assign$1({ "data-testid": "bottomTag" }, { children: bottomTag }), void 0), !!topRightTag && jsx$1(TopRightTagContainer$1, { children: topRightTag }, void 0)] }, void 0)) : (jsx$1(Video$1, { source: source, thumbnail: content === null || content === void 0 ? void 0 : content.thumbnailUrl }, void 0)) }, content.key));
|
|
21361
21361
|
}) }), void 0) }), void 0)] }, void 0));
|
|
21362
21362
|
};
|
|
21363
|
-
var templateObject_1$k, templateObject_2$e, templateObject_3$e, templateObject_4$9, templateObject_5$7, templateObject_6$
|
|
21363
|
+
var templateObject_1$k, templateObject_2$e, templateObject_3$e, templateObject_4$9, templateObject_5$7, templateObject_6$7;
|
|
21364
21364
|
|
|
21365
21365
|
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"])));
|
|
21366
21366
|
var ProductGalleryMobile = function (_a) {
|
|
@@ -21722,7 +21722,7 @@ var TopTagContainer$2 = newStyled.div(templateObject_2$b || (templateObject_2$b
|
|
|
21722
21722
|
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"])));
|
|
21723
21723
|
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"])));
|
|
21724
21724
|
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"])));
|
|
21725
|
-
var VideoTag = newStyled.div(templateObject_6$
|
|
21725
|
+
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"])));
|
|
21726
21726
|
var Text = newStyled.div(templateObject_7$5 || (templateObject_7$5 = __makeTemplateObject(["\n padding-top: 3px;\n"], ["\n padding-top: 3px;\n"])));
|
|
21727
21727
|
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"])));
|
|
21728
21728
|
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"])));
|
|
@@ -21785,7 +21785,7 @@ var ImageProductSlideV3 = function (_a) {
|
|
|
21785
21785
|
} }, void 0), jsxs$1(VideoTag, { children: [jsx$1(Icon.PDP.PlayMini, { width: 1.5 }, void 0), jsx$1(Text, { children: "VIDEO" }, void 0)] }, void 0)] }, void 0))] }, image.key));
|
|
21786
21786
|
}) }), void 0) }), void 0)] }, void 0));
|
|
21787
21787
|
};
|
|
21788
|
-
var templateObject_1$d, templateObject_2$b, templateObject_3$b, templateObject_4$8, templateObject_5$6, templateObject_6$
|
|
21788
|
+
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;
|
|
21789
21789
|
|
|
21790
21790
|
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"])));
|
|
21791
21791
|
var ProductGalleryMobileV3 = function (_a) {
|
|
@@ -21889,7 +21889,7 @@ var ContentGallery = function (_a) {
|
|
|
21889
21889
|
|
|
21890
21890
|
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"])));
|
|
21891
21891
|
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"])));
|
|
21892
|
-
var Container$8 = newStyled.div(templateObject_3$9 || (templateObject_3$9 = __makeTemplateObject(["\n ", "\n position: relative;\n max-height:
|
|
21892
|
+
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) {
|
|
21893
21893
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
21894
21894
|
return borderRadiusVariant &&
|
|
21895
21895
|
"\n border-radius: 40px;\n ";
|
|
@@ -21945,17 +21945,16 @@ var MainContent = function (_a) {
|
|
|
21945
21945
|
setSelectedImageIndex: setSelectedImageIndex,
|
|
21946
21946
|
onChange: onChange,
|
|
21947
21947
|
});
|
|
21948
|
-
} }, settings$1, { nextArrow: arrowsVisible ? (jsx$1(NavButtonContainer$1, __assign$1({ "data-testid": "main-gallery-next-button" }, { children: jsx$1(Button$1, { children: jsx$1(Icon.Arrows.ChevronRight, { height: 2.125, width: 1.25, fill: "#292929" }, void 0) }, void 0) }), void 0)) : undefined, prevArrow: arrowsVisible ? (jsx$1(NavButtonContainer$1, { children: jsx$1(Button$1, { children: jsx$1(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) {
|
|
21948
|
+
} }, settings$1, { adaptiveHeight: true, nextArrow: arrowsVisible ? (jsx$1(NavButtonContainer$1, __assign$1({ "data-testid": "main-gallery-next-button" }, { children: jsx$1(Button$1, { children: jsx$1(Icon.Arrows.ChevronRight, { height: 2.125, width: 1.25, fill: "#292929" }, void 0) }, void 0) }), void 0)) : undefined, prevArrow: arrowsVisible ? (jsx$1(NavButtonContainer$1, { children: jsx$1(Button$1, { children: jsx$1(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) {
|
|
21949
21949
|
var _a;
|
|
21950
21950
|
var source = content === null || content === void 0 ? void 0 : content.url;
|
|
21951
21951
|
var isVideo = (_a = content === null || content === void 0 ? void 0 : content.isVideo) !== null && _a !== void 0 ? _a : false;
|
|
21952
21952
|
// default imgAttributes
|
|
21953
21953
|
var imgAttributes = {
|
|
21954
21954
|
alt: content.alt,
|
|
21955
|
-
|
|
21956
|
-
height: '510px',
|
|
21955
|
+
height: '512px',
|
|
21957
21956
|
};
|
|
21958
|
-
return (jsx$1("div", __assign$1({ "data-testid": "main-gallery-div-content-".concat(idx) }, { children: !isVideo ? (jsx$1(InnerImageZoom, { afterZoomIn: hideArrows, afterZoomOut: showArrows, src: source, zoomSrc: source, zoomType: "hover", imgAttributes: getImageAttributes(idx, itemsOnViewport, imgAttributes),
|
|
21957
|
+
return (jsx$1("div", __assign$1({ "data-testid": "main-gallery-div-content-".concat(idx) }, { children: !isVideo ? (jsx$1(InnerImageZoom, { afterZoomIn: hideArrows, afterZoomOut: showArrows, src: source, zoomSrc: source, zoomType: "hover", imgAttributes: getImageAttributes(idx, itemsOnViewport, imgAttributes), className: "zoomWrapper" }, void 0)) : (jsx$1(Video$1, { source: source, thumbnail: content === null || content === void 0 ? void 0 : content.thumbnailUrl }, void 0)) }), content.key));
|
|
21959
21958
|
}) }), void 0) }), void 0));
|
|
21960
21959
|
};
|
|
21961
21960
|
|
|
@@ -22022,7 +22021,7 @@ var Slider = function (_a) {
|
|
|
22022
22021
|
|
|
22023
22022
|
var Container$6 = newStyled.div({
|
|
22024
22023
|
background: 'var(--truekind-default-secondary, #292929)',
|
|
22025
|
-
|
|
22024
|
+
height: '100svh',
|
|
22026
22025
|
width: '100vw',
|
|
22027
22026
|
position: 'fixed',
|
|
22028
22027
|
overflowY: 'scroll',
|
|
@@ -22180,7 +22179,7 @@ var NavButtonContainer = newStyled.div(templateObject_5$5 || (templateObject_5$5
|
|
|
22180
22179
|
var theme = _a.theme;
|
|
22181
22180
|
return theme.colors.shades.white.color;
|
|
22182
22181
|
});
|
|
22183
|
-
var Button = newStyled.button(templateObject_6$
|
|
22182
|
+
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"])));
|
|
22184
22183
|
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) {
|
|
22185
22184
|
var theme = _a.theme;
|
|
22186
22185
|
return theme.colors.pallete.primary.color;
|
|
@@ -22203,7 +22202,7 @@ var ThumbnailImage = newStyled(Image$3)(templateObject_10$4 || (templateObject_1
|
|
|
22203
22202
|
var borderRadius = _a.borderRadius;
|
|
22204
22203
|
return borderRadius || '0px';
|
|
22205
22204
|
});
|
|
22206
|
-
var templateObject_1$9, templateObject_2$8, templateObject_3$8, templateObject_4$6, templateObject_5$5, templateObject_6$
|
|
22205
|
+
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;
|
|
22207
22206
|
|
|
22208
22207
|
var ProductGalleryMobileV5 = function (_a) {
|
|
22209
22208
|
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;
|
|
@@ -22351,13 +22350,13 @@ var TableElement$1 = newStyled.table(templateObject_2$5 || (templateObject_2$5 =
|
|
|
22351
22350
|
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; });
|
|
22352
22351
|
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; });
|
|
22353
22352
|
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"])));
|
|
22354
|
-
var TopLabel = newStyled(Label$1)(templateObject_6$
|
|
22353
|
+
var TopLabel = newStyled(Label$1)(templateObject_6$4 || (templateObject_6$4 = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
22355
22354
|
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"])));
|
|
22356
22355
|
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"])));
|
|
22357
22356
|
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"])));
|
|
22358
22357
|
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"])));
|
|
22359
22358
|
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; });
|
|
22360
|
-
var templateObject_1$5, templateObject_2$5, templateObject_3$5, templateObject_4$4, templateObject_5$4, templateObject_6$
|
|
22359
|
+
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;
|
|
22361
22360
|
|
|
22362
22361
|
var getIsOdd$1 = function (number) { return number % 2 !== 0; };
|
|
22363
22362
|
var getCellColor$1 = function (index, cell) {
|
|
@@ -22402,7 +22401,7 @@ var TableCell = newStyled.td(templateObject_2$4 || (templateObject_2$4 = __makeT
|
|
|
22402
22401
|
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'); });
|
|
22403
22402
|
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"])));
|
|
22404
22403
|
newStyled(Label)(templateObject_5$3 || (templateObject_5$3 = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
22405
|
-
newStyled(Label)(templateObject_6$
|
|
22404
|
+
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"])));
|
|
22406
22405
|
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"])));
|
|
22407
22406
|
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"])));
|
|
22408
22407
|
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"])));
|
|
@@ -22413,7 +22412,7 @@ var Arrow = newStyled('div')(templateObject_13$1 || (templateObject_13$1 = __mak
|
|
|
22413
22412
|
var TableHeader = newStyled('thead')(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n background-color: ", ";\n"], ["\n background-color: ", ";\n"])), function (props) {
|
|
22414
22413
|
return props.isColored ? 'var(--colors-pallete-primary-80-color)' : 'unset';
|
|
22415
22414
|
});
|
|
22416
|
-
var templateObject_1$4, templateObject_2$4, templateObject_3$4, templateObject_4$3, templateObject_5$3, templateObject_6$
|
|
22415
|
+
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;
|
|
22417
22416
|
|
|
22418
22417
|
var getIsOdd = function (number) { return number % 2 !== 0; };
|
|
22419
22418
|
// TODO: Refactor this color logic
|
|
@@ -22499,14 +22498,15 @@ var ArrowTip = function (_a) {
|
|
|
22499
22498
|
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]; };
|
|
22500
22499
|
|
|
22501
22500
|
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"])));
|
|
22502
|
-
var Header = newStyled.
|
|
22503
|
-
var
|
|
22504
|
-
var
|
|
22501
|
+
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'); });
|
|
22502
|
+
var Table = newStyled.table(templateObject_3$3 || (templateObject_3$3 = __makeTemplateObject(["\n border-collapse: collapse;\n"], ["\n border-collapse: collapse;\n"])));
|
|
22503
|
+
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"])));
|
|
22504
|
+
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) {
|
|
22505
22505
|
return props.isSticky &&
|
|
22506
|
-
"\n position: sticky;\n z-index: 3;\n left
|
|
22506
|
+
"\n position: sticky;\n z-index: 3;\n left:-0.5px;\n ";
|
|
22507
22507
|
});
|
|
22508
|
-
var SharedRowCell = newStyled(Cell)(
|
|
22509
|
-
var templateObject_1$3, templateObject_2$3, templateObject_3$3, templateObject_4$2, templateObject_5$2;
|
|
22508
|
+
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"])));
|
|
22509
|
+
var templateObject_1$3, templateObject_2$3, templateObject_3$3, templateObject_4$2, templateObject_5$2, templateObject_6$2;
|
|
22510
22510
|
|
|
22511
22511
|
var BACKGROUND_COLORS = [
|
|
22512
22512
|
'#FAFAFA',
|
|
@@ -22536,6 +22536,48 @@ var isDataCell = function (cell) {
|
|
|
22536
22536
|
function parseCellContent(content) {
|
|
22537
22537
|
var cellContentChunks = content.split(/ (=) /);
|
|
22538
22538
|
return (jsx$1(Fragment$1, { children: cellContentChunks.map(function (data, i) { return (jsx$1(Text$7, __assign$1({ variant: "body", style: i === cellContentChunks.length - 1 ? {} : { marginBottom: '5px' } }, { children: data }), "shared-cell-text-".concat(data, "-").concat(i))); }) }, void 0));
|
|
22539
|
+
}
|
|
22540
|
+
function isRowHeader(row) {
|
|
22541
|
+
return row[0].toLowerCase().includes('step');
|
|
22542
|
+
}
|
|
22543
|
+
function transformData(rawData) {
|
|
22544
|
+
var dataSet = [];
|
|
22545
|
+
var currentHeader = '';
|
|
22546
|
+
var currentData = [];
|
|
22547
|
+
for (var _i = 0, rawData_1 = rawData; _i < rawData_1.length; _i++) {
|
|
22548
|
+
var row = rawData_1[_i];
|
|
22549
|
+
if (isRowHeader(row)) {
|
|
22550
|
+
if (currentHeader) {
|
|
22551
|
+
dataSet.push({
|
|
22552
|
+
header: currentHeader,
|
|
22553
|
+
data: currentData,
|
|
22554
|
+
});
|
|
22555
|
+
currentData = [];
|
|
22556
|
+
}
|
|
22557
|
+
currentHeader = row[0];
|
|
22558
|
+
}
|
|
22559
|
+
else if (row[0] === 'Under Bust ') {
|
|
22560
|
+
currentData.push(__spreadArray([
|
|
22561
|
+
{
|
|
22562
|
+
rowSpan: 2,
|
|
22563
|
+
content: 'Under Bust = Band Size',
|
|
22564
|
+
}
|
|
22565
|
+
], row.slice(1), true));
|
|
22566
|
+
}
|
|
22567
|
+
else if (row[0] === 'Band Size') {
|
|
22568
|
+
currentData.push(row.slice(1));
|
|
22569
|
+
}
|
|
22570
|
+
else {
|
|
22571
|
+
currentData.push(row);
|
|
22572
|
+
}
|
|
22573
|
+
}
|
|
22574
|
+
if (currentHeader) {
|
|
22575
|
+
dataSet.push({
|
|
22576
|
+
header: currentHeader,
|
|
22577
|
+
data: currentData,
|
|
22578
|
+
});
|
|
22579
|
+
}
|
|
22580
|
+
return dataSet;
|
|
22539
22581
|
}
|
|
22540
22582
|
|
|
22541
22583
|
var SCROLL_END_THRESHOLD = 0.92;
|
|
@@ -22545,6 +22587,7 @@ var SizeChartTableV4 = function (_a) {
|
|
|
22545
22587
|
var containerRef = useRef(null);
|
|
22546
22588
|
var _b = useState(false), isAtScrollEnd = _b[0], setIsAtScrollEnd = _b[1];
|
|
22547
22589
|
var isMobile = useWindowDimensions().isMobile;
|
|
22590
|
+
var mappedData = transformData(data);
|
|
22548
22591
|
useEffect(function () {
|
|
22549
22592
|
var handleScroll = function () {
|
|
22550
22593
|
var _a = containerRef.current, scrollLeft = _a.scrollLeft, scrollWidth = _a.scrollWidth, clientWidth = _a.clientWidth;
|
|
@@ -22558,9 +22601,9 @@ var SizeChartTableV4 = function (_a) {
|
|
|
22558
22601
|
container === null || container === void 0 ? void 0 : container.removeEventListener('scroll', handleScroll);
|
|
22559
22602
|
};
|
|
22560
22603
|
}, []);
|
|
22561
|
-
return (jsxs$1(Fragment$2, { children: [jsx$1(Parent, __assign$1({ ref: containerRef }, { children:
|
|
22604
|
+
return (jsxs$1(Fragment$2, { children: [jsx$1(Parent, __assign$1({ ref: containerRef }, { children: mappedData.map(function (table, index) { return (jsxs$1(Table, { children: [jsx$1("thead", { children: jsx$1("tr", { children: jsx$1(Header, __assign$1({ index: index, colSpan: 10 }, { children: jsx$1(Text$7, __assign$1({ variant: "body", weight: "demi", size: "small" }, { children: table.header }), void 0) }), void 0) }, void 0) }, void 0), jsx$1(TableBody, { children: table.data.map(function (row, rowIndex) { return (jsx$1("tr", { children: row.map(function (cell, cellIndex) {
|
|
22562
22605
|
return isDataCell(cell) ? (jsx$1(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))) : (jsx$1(Cell, __assign$1({ background: getCellBackground(cellIndex, cell, row.length, theme), isSticky: getCellIsSticky(cellIndex, row.length) }, { children: cell }), "cell-".concat(index, "-").concat(rowIndex, "-").concat(cellIndex)));
|
|
22563
|
-
}) }, "row-".concat(index, "-").concat(rowIndex))); }) },
|
|
22606
|
+
}) }, "row-".concat(index, "-").concat(rowIndex))); }) }, "table-body-".concat(index))] }, "table-".concat(index))); }) }), void 0), isMobile && jsx$1(ArrowTip$1, { isRight: !isAtScrollEnd }, void 0)] }, void 0));
|
|
22564
22607
|
};
|
|
22565
22608
|
|
|
22566
22609
|
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) {
|