@trafilea/afrodita-components 6.25.1 → 6.25.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 +2 -1
- package/build/index.esm.js +129 -118
- package/build/index.esm.js.map +1 -1
- package/build/index.js +129 -118
- package/build/index.js.map +1 -1
- package/package.json +1 -1
package/build/index.js
CHANGED
|
@@ -4776,8 +4776,8 @@ var TAGS = {
|
|
|
4776
4776
|
hero3: newStyled.h3(templateObject_3$17 || (templateObject_3$17 = __makeTemplateObject([""], [""]))),
|
|
4777
4777
|
display1: newStyled.h1(templateObject_4$U || (templateObject_4$U = __makeTemplateObject([""], [""]))),
|
|
4778
4778
|
display2: newStyled.h2(templateObject_5$F || (templateObject_5$F = __makeTemplateObject([""], [""]))),
|
|
4779
|
-
display3: newStyled.h3(templateObject_6$
|
|
4780
|
-
heading1: newStyled.h1(templateObject_7$
|
|
4779
|
+
display3: newStyled.h3(templateObject_6$A || (templateObject_6$A = __makeTemplateObject([""], [""]))),
|
|
4780
|
+
heading1: newStyled.h1(templateObject_7$q || (templateObject_7$q = __makeTemplateObject([""], [""]))),
|
|
4781
4781
|
heading2: newStyled.h2(templateObject_8$k || (templateObject_8$k = __makeTemplateObject([""], [""]))),
|
|
4782
4782
|
heading3: newStyled.h3(templateObject_9$b || (templateObject_9$b = __makeTemplateObject([""], [""]))),
|
|
4783
4783
|
heading4: newStyled.h4(templateObject_10$a || (templateObject_10$a = __makeTemplateObject([""], [""]))),
|
|
@@ -4907,14 +4907,14 @@ var DEFAULTS = {
|
|
|
4907
4907
|
size: 'regular',
|
|
4908
4908
|
},
|
|
4909
4909
|
};
|
|
4910
|
-
var templateObject_1$20, templateObject_2$1q, templateObject_3$17, templateObject_4$U, templateObject_5$F, templateObject_6$
|
|
4910
|
+
var templateObject_1$20, templateObject_2$1q, templateObject_3$17, templateObject_4$U, templateObject_5$F, templateObject_6$A, templateObject_7$q, templateObject_8$k, templateObject_9$b, templateObject_10$a, templateObject_11$7, templateObject_12$4, templateObject_13$4, templateObject_14$2, templateObject_15$2, templateObject_16$2, templateObject_17$2, templateObject_18$2, templateObject_19$2, templateObject_20$1;
|
|
4911
4911
|
|
|
4912
4912
|
var Container$1f = newStyled.div(templateObject_1$1$ || (templateObject_1$1$ = __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"])));
|
|
4913
4913
|
var Card$4 = newStyled.div(templateObject_2$1p || (templateObject_2$1p = __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"])));
|
|
4914
4914
|
var Tag$2 = newStyled.div(templateObject_3$16 || (templateObject_3$16 = __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"])));
|
|
4915
4915
|
var Label$6 = newStyled.div(templateObject_4$T || (templateObject_4$T = __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"])));
|
|
4916
4916
|
var Check$1 = newStyled.div(templateObject_5$E || (templateObject_5$E = __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"])));
|
|
4917
|
-
var DiscountContainer$1 = newStyled.div(templateObject_6$
|
|
4917
|
+
var DiscountContainer$1 = newStyled.div(templateObject_6$z || (templateObject_6$z = __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"])));
|
|
4918
4918
|
var PackSelectorV2 = function (_a) {
|
|
4919
4919
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange, currencyCode = _a.currencyCode;
|
|
4920
4920
|
return (jsxRuntime.jsx(Container$1f, __assign$1({ role: "radiogroup" }, { children: packs.map(function (pack) {
|
|
@@ -4939,7 +4939,7 @@ var PackCard$1 = function (_a) {
|
|
|
4939
4939
|
currency: currencyCode || 'USD',
|
|
4940
4940
|
}), ' ', "each", ')'] }), void 0)) : null] }, void 0)] }), void 0));
|
|
4941
4941
|
};
|
|
4942
|
-
var templateObject_1$1$, templateObject_2$1p, templateObject_3$16, templateObject_4$T, templateObject_5$E, templateObject_6$
|
|
4942
|
+
var templateObject_1$1$, templateObject_2$1p, templateObject_3$16, templateObject_4$T, templateObject_5$E, templateObject_6$z;
|
|
4943
4943
|
|
|
4944
4944
|
var Container$1e = newStyled.div(templateObject_1$1_ || (templateObject_1$1_ = __makeTemplateObject(["\n height: 32px;\n display: flex;\n align-items: center;\n"], ["\n height: 32px;\n display: flex;\n align-items: center;\n"])));
|
|
4945
4945
|
var DropContainer = newStyled.div(templateObject_2$1o || (templateObject_2$1o = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
@@ -5912,16 +5912,16 @@ var TooltipText = newStyled.div(templateObject_4$Q || (templateObject_4$Q = __ma
|
|
|
5912
5912
|
return color;
|
|
5913
5913
|
});
|
|
5914
5914
|
var TopSection = newStyled.div(templateObject_5$C || (templateObject_5$C = __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"])));
|
|
5915
|
-
var Title$a = newStyled.h1(templateObject_6$
|
|
5915
|
+
var Title$a = newStyled.h1(templateObject_6$y || (templateObject_6$y = __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) {
|
|
5916
5916
|
var color = _a.color;
|
|
5917
5917
|
return color;
|
|
5918
5918
|
});
|
|
5919
|
-
var IconContainer$5 = newStyled.div(templateObject_7$
|
|
5919
|
+
var IconContainer$5 = newStyled.div(templateObject_7$p || (templateObject_7$p = __makeTemplateObject(["\n width: 1.375rem;\n height: 1.125rem;\n margin-right: 0.563rem;\n"], ["\n width: 1.375rem;\n height: 1.125rem;\n margin-right: 0.563rem;\n"])));
|
|
5920
5920
|
var CloseToolTip = newStyled.button(templateObject_8$j || (templateObject_8$j = __makeTemplateObject(["\n position: absolute;\n background: none;\n border: none;\n cursor: pointer;\n right: ", ";\n top: 0.25rem;\n padding: 0px;\n z-index: 2;\n"], ["\n position: absolute;\n background: none;\n border: none;\n cursor: pointer;\n right: ", ";\n top: 0.25rem;\n padding: 0px;\n z-index: 2;\n"])), function (_a) {
|
|
5921
5921
|
var _b = _a.right, right = _b === void 0 ? '.3rem' : _b;
|
|
5922
5922
|
return right;
|
|
5923
5923
|
});
|
|
5924
|
-
var templateObject_1$1O, templateObject_2$1g, templateObject_3$11, templateObject_4$Q, templateObject_5$C, templateObject_6$
|
|
5924
|
+
var templateObject_1$1O, templateObject_2$1g, templateObject_3$11, templateObject_4$Q, templateObject_5$C, templateObject_6$y, templateObject_7$p, templateObject_8$j;
|
|
5925
5925
|
|
|
5926
5926
|
var Tooltip = function (_a) {
|
|
5927
5927
|
var _b;
|
|
@@ -5991,8 +5991,8 @@ var SubscriptionHeader$2 = newStyled.div(templateObject_5$B || (templateObject_5
|
|
|
5991
5991
|
var theme = _a.theme;
|
|
5992
5992
|
return theme.colors.pallete.primary.color;
|
|
5993
5993
|
});
|
|
5994
|
-
var BenefitsContainer$2 = newStyled.div(templateObject_6$
|
|
5995
|
-
var Benefit$2 = newStyled.div(templateObject_7$
|
|
5994
|
+
var BenefitsContainer$2 = newStyled.div(templateObject_6$x || (templateObject_6$x = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
5995
|
+
var Benefit$2 = newStyled.div(templateObject_7$o || (templateObject_7$o = __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"])));
|
|
5996
5996
|
var BenefitText$2 = newStyled(Text$7)(templateObject_8$i || (templateObject_8$i = __makeTemplateObject(["\n line-height: 20px;\n margin-left: 9px;\n"], ["\n line-height: 20px;\n margin-left: 9px;\n"])));
|
|
5997
5997
|
var SubscriptionDetails = newStyled(Text$7)(templateObject_9$a || (templateObject_9$a = __makeTemplateObject(["\n font-size: 16px;\n margin-right: 7px;\n"], ["\n font-size: 16px;\n margin-right: 7px;\n"])));
|
|
5998
5998
|
var SubscriptionDetailsContainer = newStyled.div(templateObject_10$9 || (templateObject_10$9 = __makeTemplateObject(["\n margin-top: 18px;\n display: flex;\n"], ["\n margin-top: 18px;\n display: flex;\n"])));
|
|
@@ -6002,7 +6002,7 @@ var StyledPrice$2 = newStyled(PriceLabelV2$1)(templateObject_12$3 || (templateOb
|
|
|
6002
6002
|
return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
|
|
6003
6003
|
});
|
|
6004
6004
|
var Container$17 = newStyled.div(templateObject_13$3 || (templateObject_13$3 = __makeTemplateObject([""], [""])));
|
|
6005
|
-
var templateObject_1$1N, templateObject_2$1f, templateObject_3$10, templateObject_4$P, templateObject_5$B, templateObject_6$
|
|
6005
|
+
var templateObject_1$1N, templateObject_2$1f, templateObject_3$10, templateObject_4$P, templateObject_5$B, templateObject_6$x, templateObject_7$o, templateObject_8$i, templateObject_9$a, templateObject_10$9, templateObject_11$6, templateObject_12$3, templateObject_13$3;
|
|
6006
6006
|
|
|
6007
6007
|
var radioIds$2 = {
|
|
6008
6008
|
oneTime: {
|
|
@@ -6095,14 +6095,14 @@ var SinglePurchaseContainer$1 = newStyled(ContainerBase$1)(templateObject_4$O ||
|
|
|
6095
6095
|
return (onClick ? 'cursor: pointer;' : '');
|
|
6096
6096
|
});
|
|
6097
6097
|
var SubscriptionContainer$1 = newStyled(ContainerBase$1)(templateObject_5$A || (templateObject_5$A = __makeTemplateObject(["\n padding: 16px;\n margin-bottom: 8px;\n position: relative;\n"], ["\n padding: 16px;\n margin-bottom: 8px;\n position: relative;\n"])));
|
|
6098
|
-
var SubscriptionHeader$1 = newStyled.div(templateObject_6$
|
|
6098
|
+
var SubscriptionHeader$1 = newStyled.div(templateObject_6$w || (templateObject_6$w = __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) {
|
|
6099
6099
|
var theme = _a.theme;
|
|
6100
6100
|
return theme.colors.shades[200].color;
|
|
6101
6101
|
}, function (_a) {
|
|
6102
6102
|
var theme = _a.theme;
|
|
6103
6103
|
return theme.colors.pallete.primary.color;
|
|
6104
6104
|
});
|
|
6105
|
-
var BenefitsContainer$1 = newStyled.div(templateObject_7$
|
|
6105
|
+
var BenefitsContainer$1 = newStyled.div(templateObject_7$n || (templateObject_7$n = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
6106
6106
|
var Benefit$1 = newStyled.div(templateObject_8$h || (templateObject_8$h = __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"])));
|
|
6107
6107
|
var BenefitText$1 = newStyled(Text$7)(templateObject_9$9 || (templateObject_9$9 = __makeTemplateObject(["\n line-height: 20px;\n margin-left: 9px;\n"], ["\n line-height: 20px;\n margin-left: 9px;\n"])));
|
|
6108
6108
|
var DeliveryFrequencyLabel = newStyled(Text$7)(templateObject_10$8 || (templateObject_10$8 = __makeTemplateObject(["\n line-height: 35px;\n margin-right: 8px;\n align-self: center;\n"], ["\n line-height: 35px;\n margin-right: 8px;\n align-self: center;\n"])));
|
|
@@ -6115,7 +6115,7 @@ var TooltipWrapper = newStyled.div(templateObject_13$2 || (templateObject_13$2 =
|
|
|
6115
6115
|
var theme = _a.theme;
|
|
6116
6116
|
return theme.component.autoship.tooltip.margin;
|
|
6117
6117
|
});
|
|
6118
|
-
var templateObject_1$1M, templateObject_2$1e, templateObject_3$$, templateObject_4$O, templateObject_5$A, templateObject_6$
|
|
6118
|
+
var templateObject_1$1M, templateObject_2$1e, templateObject_3$$, templateObject_4$O, templateObject_5$A, templateObject_6$w, templateObject_7$n, templateObject_8$h, templateObject_9$9, templateObject_10$8, templateObject_11$5, templateObject_12$2, templateObject_13$2;
|
|
6119
6119
|
|
|
6120
6120
|
var radioIds$1 = {
|
|
6121
6121
|
oneTime: {
|
|
@@ -6198,8 +6198,8 @@ var CustomerInfo = newStyled.div(templateObject_2$1d || (templateObject_2$1d = _
|
|
|
6198
6198
|
var Name = newStyled.h4(templateObject_3$_ || (templateObject_3$_ = __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"])));
|
|
6199
6199
|
var StarIconContainer = newStyled.div(templateObject_4$N || (templateObject_4$N = __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"])));
|
|
6200
6200
|
var Description$2 = newStyled.p(templateObject_5$z || (templateObject_5$z = __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"])));
|
|
6201
|
-
var ReviewDays = newStyled.span(templateObject_6$
|
|
6202
|
-
var templateObject_1$1L, templateObject_2$1d, templateObject_3$_, templateObject_4$N, templateObject_5$z, templateObject_6$
|
|
6201
|
+
var ReviewDays = newStyled.span(templateObject_6$v || (templateObject_6$v = __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"])));
|
|
6202
|
+
var templateObject_1$1L, templateObject_2$1d, templateObject_3$_, templateObject_4$N, templateObject_5$z, templateObject_6$v;
|
|
6203
6203
|
|
|
6204
6204
|
var NameWithStars = function (_a) {
|
|
6205
6205
|
var name = _a.name, size = _a.size;
|
|
@@ -6464,15 +6464,15 @@ var MobileContainer = newStyled(Container$10)(templateObject_2$18 || (templateOb
|
|
|
6464
6464
|
var DollarPart = newStyled.span(templateObject_3$V || (templateObject_3$V = __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"])));
|
|
6465
6465
|
var ClubMembersText = newStyled.span(templateObject_4$J || (templateObject_4$J = __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"])));
|
|
6466
6466
|
var MobileDollarPart = newStyled(DollarPart)(templateObject_5$y || (templateObject_5$y = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
6467
|
-
var MobileClubMembersText = newStyled(ClubMembersText)(templateObject_6$
|
|
6468
|
-
var DesktopDollarPart = newStyled(DollarPart)(templateObject_7$
|
|
6467
|
+
var MobileClubMembersText = newStyled(ClubMembersText)(templateObject_6$u || (templateObject_6$u = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
6468
|
+
var DesktopDollarPart = newStyled(DollarPart)(templateObject_7$m || (templateObject_7$m = __makeTemplateObject(["\n font-size: 13px;\n"], ["\n font-size: 13px;\n"])));
|
|
6469
6469
|
var DesktopClubMembersText = newStyled(ClubMembersText)(templateObject_8$g || (templateObject_8$g = __makeTemplateObject(["\n font-size: 13px;\n"], ["\n font-size: 13px;\n"])));
|
|
6470
6470
|
var ClubPriceLabel = function (_a) {
|
|
6471
6471
|
var clubPrice = _a.clubPrice;
|
|
6472
6472
|
var isMobile = useWindowDimensions().isMobile;
|
|
6473
6473
|
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: isMobile ? (jsxRuntime.jsxs(MobileContainer, { children: [jsxRuntime.jsx(MobileDollarPart, { children: clubPrice }, void 0), jsxRuntime.jsx(MobileClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) : (jsxRuntime.jsxs(Container$10, { children: [jsxRuntime.jsx(DesktopDollarPart, { children: clubPrice }, void 0), jsxRuntime.jsx(DesktopClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) }, void 0));
|
|
6474
6474
|
};
|
|
6475
|
-
var templateObject_1$1y, templateObject_2$18, templateObject_3$V, templateObject_4$J, templateObject_5$y, templateObject_6$
|
|
6475
|
+
var templateObject_1$1y, templateObject_2$18, templateObject_3$V, templateObject_4$J, templateObject_5$y, templateObject_6$u, templateObject_7$m, templateObject_8$g;
|
|
6476
6476
|
|
|
6477
6477
|
var Spacing = function (_a) {
|
|
6478
6478
|
var size = _a.size, _b = _a.type, type = _b === void 0 ? 'block' : _b, children = _a.children, styleProp = _a.style;
|
|
@@ -6702,11 +6702,11 @@ var TopTagContainer$8 = newStyled.div(templateObject_5$w || (templateObject_5$w
|
|
|
6702
6702
|
var style = _a.style;
|
|
6703
6703
|
return style.width;
|
|
6704
6704
|
});
|
|
6705
|
-
var BottomTagContainer$8 = newStyled.div(templateObject_6$
|
|
6705
|
+
var BottomTagContainer$8 = newStyled.div(templateObject_6$t || (templateObject_6$t = __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) {
|
|
6706
6706
|
var style = _a.style;
|
|
6707
6707
|
return style.width;
|
|
6708
6708
|
});
|
|
6709
|
-
var MarginTopContainer$1 = newStyled.div(templateObject_7$
|
|
6709
|
+
var MarginTopContainer$1 = newStyled.div(templateObject_7$l || (templateObject_7$l = __makeTemplateObject(["\n margin-top: 8px;\n"], ["\n margin-top: 8px;\n"])));
|
|
6710
6710
|
var ProductItemMobile = function (_a) {
|
|
6711
6711
|
var title = _a.title, image = _a.image, imageHover = _a.imageHover, price = _a.price, rating = _a.rating, size = _a.size, _b = _a.alignName, alignName = _b === void 0 ? 'center' : _b, url = _a.url, className = _a.className, topTag = _a.topTag, bottomTag = _a.bottomTag, onClick = _a.onClick, _c = _a.priceDisplayType, priceDisplayType = _c === void 0 ? 'default' : _c, priceAtBottom = _a.priceAtBottom, priceLoading = _a.priceLoading, _d = _a.noFollow, noFollow = _d === void 0 ? false : _d, _e = _a.colorPicker, colorPicker = _e === void 0 ? {
|
|
6712
6712
|
display: false,
|
|
@@ -6767,7 +6767,7 @@ var ProductItemMobile = function (_a) {
|
|
|
6767
6767
|
letterSpacing: '-0.05rem',
|
|
6768
6768
|
} }), void 0)) }), void 0)), jsx(Spacing, { size: space }, void 0), jsx(RatingDisplay, {}, void 0)] }, void 0))] }), void 0), colorPicker.display && colorPicker.position === 'bottom' && (jsxs(Fragment, { children: [jsx(Spacing, { size: space }, void 0), colorPicker.component] }, void 0))] }), void 0));
|
|
6769
6769
|
};
|
|
6770
|
-
var templateObject_1$1r, templateObject_2$15, templateObject_3$S, templateObject_4$G, templateObject_5$w, templateObject_6$
|
|
6770
|
+
var templateObject_1$1r, templateObject_2$15, templateObject_3$S, templateObject_4$G, templateObject_5$w, templateObject_6$t, templateObject_7$l;
|
|
6771
6771
|
|
|
6772
6772
|
var ImageContainer$5 = newStyled.div(function (_a) {
|
|
6773
6773
|
var width = _a.width, height = _a.height;
|
|
@@ -6810,8 +6810,8 @@ var TopTagContainer$7 = newStyled.div(templateObject_5$v || (templateObject_5$v
|
|
|
6810
6810
|
var style = _a.style;
|
|
6811
6811
|
return style.width;
|
|
6812
6812
|
});
|
|
6813
|
-
var TopRightTagContainer$2 = newStyled.div(templateObject_6$
|
|
6814
|
-
var BottomTagContainer$7 = newStyled.div(templateObject_7$
|
|
6813
|
+
var TopRightTagContainer$2 = newStyled.div(templateObject_6$s || (templateObject_6$s = __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"])));
|
|
6814
|
+
var BottomTagContainer$7 = newStyled.div(templateObject_7$k || (templateObject_7$k = __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) {
|
|
6815
6815
|
var style = _a.style;
|
|
6816
6816
|
return style.width;
|
|
6817
6817
|
});
|
|
@@ -6866,7 +6866,7 @@ var ProductItemTK = function (_a) {
|
|
|
6866
6866
|
marginTop: hasSpacing ? undefined : textContainerGap,
|
|
6867
6867
|
} }, { children: title }), void 0)) : (jsx(Title$6, __assign$1({ theme: theme, align: showClubPriceLabel ? 'left' : alignName }, { children: title }), void 0)), hasSpacing && jsx(Spacing, { size: space }, void 0), colorPicker.display && colorPicker.position === 'middle' && jsx(Fragment, { children: colorPicker.component }, void 0), (hasStrength === null || hasStrength === void 0 ? void 0 : hasStrength.strength) !== -1 && (jsxs(Fragment, { children: [jsx(StrengthBars, { barsFilled: hasStrength.strength, supportText: hasStrength.description }, void 0), jsx(Spacing, { size: 10 }, void 0)] }, void 0)), priceAtBottom ? (jsxs(Fragment, { children: [customSizeRating ? (jsx(Rating, { size: customSizeRating, rating: rating.rating, reviews: rating.reviews, reviewsText: "", wrapWithParenthesis: true }, void 0)) : (jsx(RatingDisplay, {}, void 0)), hasSpacing && jsx(Spacing, { size: space }, void 0), jsx(MarginTopContainer, { children: priceLoading ? jsx(SkeletonBox, { height: "20px", width: "140px" }, void 0) : jsx(PriceLabelDisplay, {}, void 0) }, void 0)] }, void 0)) : (jsxs(Fragment, { children: [priceLoading ? (jsx(SkeletonBox, { height: "20px", width: "140px" }, void 0)) : (jsxs(Fragment, { children: [jsx(PriceLabelDisplay, {}, void 0), jsx(BuyNowPayLater, { displayBNPL: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.displayBNPL, installments: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.installments) || 0, installmentPrice: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.installmentPrice) || '', iconFolder: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconFolder, iconName: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconName) || '', showLogo: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.showLogo, iconColor: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconColor, fontSize: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.fontSize }, void 0)] }, void 0)), showClubPriceLabel && jsx(ClubPriceLabel, { clubPrice: clubPrice }, void 0), hasSpacing && jsx(Spacing, { size: space }, void 0), jsx(RatingDisplay, {}, void 0)] }, void 0))] }), void 0), colorPicker.display && colorPicker.position === 'bottom' && (jsxs(Fragment, { children: [hasSpacing && jsx(Spacing, { size: space }, void 0), colorPicker.component] }, void 0))] }), void 0));
|
|
6868
6868
|
};
|
|
6869
|
-
var templateObject_1$1q, templateObject_2$14, templateObject_3$R, templateObject_4$F, templateObject_5$v, templateObject_6$
|
|
6869
|
+
var templateObject_1$1q, templateObject_2$14, templateObject_3$R, templateObject_4$F, templateObject_5$v, templateObject_6$s, templateObject_7$k, templateObject_8$f;
|
|
6870
6870
|
|
|
6871
6871
|
var Container$W = newStyled.div(templateObject_1$1p || (templateObject_1$1p = __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"])));
|
|
6872
6872
|
function withProductGrid(ProductItemComponent, data) {
|
|
@@ -7030,13 +7030,13 @@ var Row$2 = newStyled.div(templateObject_3$P || (templateObject_3$P = __makeTemp
|
|
|
7030
7030
|
});
|
|
7031
7031
|
var H5 = newStyled.h5(templateObject_4$D || (templateObject_4$D = __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; });
|
|
7032
7032
|
var H3$1 = newStyled.h3(templateObject_5$t || (templateObject_5$t = __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; });
|
|
7033
|
-
var FreeShipping = newStyled.span(templateObject_6$
|
|
7033
|
+
var FreeShipping = newStyled.span(templateObject_6$r || (templateObject_6$r = __makeTemplateObject(["\n font-weight: 600;\n color: ", ";\n"], ["\n font-weight: 600;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
7034
7034
|
var CrossSellCheckbox = function (_a) {
|
|
7035
7035
|
var imageURL = _a.imageURL, title = _a.title, description = _a.description, freeShippingText = _a.freeShippingText, rightToLeft = _a.rightToLeft, onChange = _a.onChange;
|
|
7036
7036
|
var theme = useTheme();
|
|
7037
7037
|
return (jsxRuntime.jsxs(Wrapper$5, __assign$1({ backgroundColor: theme.colors.shades['10'].color, rightToLeft: Boolean(rightToLeft) }, { children: [jsxRuntime.jsx(Checkbox, { text: "", id: "checkbox", onChange: onChange, size: exports.ComponentSize.Small, variant: "secondary" }, void 0), jsxRuntime.jsxs(Row$2, __assign$1({ rightToLeft: Boolean(rightToLeft) }, { children: [jsxRuntime.jsx(Image$3, { src: imageURL, alt: "Cross sell image", borderRadius: "0.5rem" }, void 0), jsxRuntime.jsxs(Col$1, { children: [jsxRuntime.jsx(H5, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0), jsxRuntime.jsxs(H3$1, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: [description, jsxRuntime.jsxs(FreeShipping, __assign$1({ color: theme.colors.shades['700'].color }, { children: [' ', "+ ", freeShippingText] }), void 0)] }), void 0)] }, void 0)] }), void 0)] }), void 0));
|
|
7038
7038
|
};
|
|
7039
|
-
var templateObject_1$1m, templateObject_2$11, templateObject_3$P, templateObject_4$D, templateObject_5$t, templateObject_6$
|
|
7039
|
+
var templateObject_1$1m, templateObject_2$11, templateObject_3$P, templateObject_4$D, templateObject_5$t, templateObject_6$r;
|
|
7040
7040
|
|
|
7041
7041
|
var index$1 = /*#__PURE__*/Object.freeze({
|
|
7042
7042
|
__proto__: null,
|
|
@@ -7208,13 +7208,13 @@ var IconContainer$3 = newStyled.div(templateObject_5$s || (templateObject_5$s =
|
|
|
7208
7208
|
marginBottom: ['10px', '0'],
|
|
7209
7209
|
width: ['auto', '1.5rem'],
|
|
7210
7210
|
}));
|
|
7211
|
-
var SectionTitle = newStyled.h1(templateObject_6$
|
|
7211
|
+
var SectionTitle = newStyled.h1(templateObject_6$q || (templateObject_6$q = __makeTemplateObject(["\n ", "\n ", "\n margin: 0;\n text-transform: uppercase;\n"], ["\n ", "\n ", "\n margin: 0;\n text-transform: uppercase;\n"])), mediaQueries({
|
|
7212
7212
|
display: ['block', 'flex'],
|
|
7213
7213
|
}), function (_a) {
|
|
7214
7214
|
var theme = _a.theme;
|
|
7215
7215
|
return "\n color: ".concat(theme.colors.shades['700'].color, ";\n font-size: ").concat(theme.component.deliveryDetails.sectionTitle.fontSize, ";\n line-height: ").concat(theme.component.deliveryDetails.sectionTitle.lineHeight, ";\n font-weight: ").concat(theme.component.deliveryDetails.sectionTitle.fontWeight, ";\n ");
|
|
7216
7216
|
});
|
|
7217
|
-
var SectionDetails = newStyled.p(templateObject_7$
|
|
7217
|
+
var SectionDetails = newStyled.p(templateObject_7$j || (templateObject_7$j = __makeTemplateObject(["\n color: ", ";\n ", "\n margin: 0;\n margin-top: 0.625rem;\n ", ";\n"], ["\n color: ", ";\n ", "\n margin: 0;\n margin-top: 0.625rem;\n ", ";\n"])), function (props) { return props.color; }, function (_a) {
|
|
7218
7218
|
var theme = _a.theme;
|
|
7219
7219
|
return "\n font-size: ".concat(theme.component.deliveryDetails.sectionDetails.fontSize, ";\n line-height: ").concat(theme.component.deliveryDetails.sectionDetails.lineHeight, ";\n font-weight: ").concat(theme.component.deliveryDetails.sectionDetails.fontWeight, ";\n ");
|
|
7220
7220
|
}, function (_a) {
|
|
@@ -7231,7 +7231,7 @@ var DeliveryDetails = function (_a) {
|
|
|
7231
7231
|
var theme = useTheme();
|
|
7232
7232
|
return (jsxRuntime.jsxs("div", __assign$1({ "data-testid": "DeliveryDetails" }, { children: [jsxRuntime.jsx(Title$5, __assign$1({ color: theme.colors.shades[700].color }, { children: deliveryDetailsText }), void 0), jsxRuntime.jsx(Line, { backgroundColor: theme.colors.shades['200'].color }, void 0), note && jsxRuntime.jsx(Note, __assign$1({}, note), void 0), jsxRuntime.jsxs(Row$1, __assign$1({ "data-testid": "DD-row", theme: theme }, { children: [jsxRuntime.jsxs(Col, __assign$1({ theme: theme }, { children: [jsxRuntime.jsxs(SectionTitle, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(IconContainer$3, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Icon.PDP.Clock, { width: 1.5 }, void 0) }), void 0), arrivingBy.title] }), void 0), jsxRuntime.jsx(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: arrivingBy.details }), void 0)] }), void 0), jsxRuntime.jsxs(Col, __assign$1({ theme: theme }, { children: [jsxRuntime.jsxs(SectionTitle, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(IconContainer$3, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Icon.Navigation.MapMarker, { width: 1.5 }, void 0) }), void 0), shippingTo.title] }), void 0), jsxRuntime.jsx(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: shippingTo.details }), void 0)] }), void 0), jsxRuntime.jsxs(Col, __assign$1({ theme: theme }, { children: [jsxRuntime.jsxs(SectionTitle, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(IconContainer$3, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Icon.Messaging.Messenger, { width: 1.5 }, void 0) }), void 0), instantOrderUpdate.title] }), void 0), jsxRuntime.jsx(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: instantOrderUpdate.details }), void 0), instantOrderUpdate.keepMeUpdated && (jsxRuntime.jsxs(KeepMeUpdated, __assign$1({ onClick: instantOrderUpdate.keepMeUpdated.onClick, borderColor: theme.colors.shades['150'].color }, { children: [jsxRuntime.jsx(Icon.Messaging.Messenger, { width: 1, height: 1, fill: "#0078FF" }, void 0), instantOrderUpdate.keepMeUpdated.title] }), void 0))] }), void 0)] }), void 0)] }), void 0));
|
|
7233
7233
|
};
|
|
7234
|
-
var templateObject_1$1j, templateObject_2$_, templateObject_3$N, templateObject_4$B, templateObject_5$s, templateObject_6$
|
|
7234
|
+
var templateObject_1$1j, templateObject_2$_, templateObject_3$N, templateObject_4$B, templateObject_5$s, templateObject_6$q, templateObject_7$j, templateObject_8$e;
|
|
7235
7235
|
|
|
7236
7236
|
var Backdrop = newStyled.div(templateObject_1$1i || (templateObject_1$1i = __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) {
|
|
7237
7237
|
var top = _a.top;
|
|
@@ -7299,8 +7299,8 @@ var Item$2 = newStyled.li(templateObject_2$Y || (templateObject_2$Y = __makeTemp
|
|
|
7299
7299
|
var DropdownWrapper = newStyled.div(templateObject_3$M || (templateObject_3$M = __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"])));
|
|
7300
7300
|
var ArrowContainer$1 = newStyled.div(templateObject_4$A || (templateObject_4$A = __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"])));
|
|
7301
7301
|
var StyledDropdown = newStyled.ul(templateObject_5$r || (templateObject_5$r = __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; });
|
|
7302
|
-
var DropdownItem = newStyled.li(templateObject_6$
|
|
7303
|
-
var templateObject_1$1h, templateObject_2$Y, templateObject_3$M, templateObject_4$A, templateObject_5$r, templateObject_6$
|
|
7302
|
+
var DropdownItem = newStyled.li(templateObject_6$p || (templateObject_6$p = __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; });
|
|
7303
|
+
var templateObject_1$1h, templateObject_2$Y, templateObject_3$M, templateObject_4$A, templateObject_5$r, templateObject_6$p;
|
|
7304
7304
|
|
|
7305
7305
|
var DropdownListIcons = function (_a) {
|
|
7306
7306
|
var items = _a.items;
|
|
@@ -7318,8 +7318,8 @@ var DropdownLabel = newStyled.div(templateObject_2$X || (templateObject_2$X = __
|
|
|
7318
7318
|
var SizeLabel = newStyled.span(templateObject_3$L || (templateObject_3$L = __makeTemplateObject(["\n margin-right: 8px;\n"], ["\n margin-right: 8px;\n"])));
|
|
7319
7319
|
var DetailLabel = newStyled.span(templateObject_4$z || (templateObject_4$z = __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"])));
|
|
7320
7320
|
var DropdownOptions = newStyled.div(templateObject_5$q || (templateObject_5$q = __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"])));
|
|
7321
|
-
var DropdownOption = newStyled.div(templateObject_6$
|
|
7322
|
-
var templateObject_1$1g, templateObject_2$X, templateObject_3$L, templateObject_4$z, templateObject_5$q, templateObject_6$
|
|
7321
|
+
var DropdownOption = newStyled.div(templateObject_6$o || (templateObject_6$o = __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"])));
|
|
7322
|
+
var templateObject_1$1g, templateObject_2$X, templateObject_3$L, templateObject_4$z, templateObject_5$q, templateObject_6$o;
|
|
7323
7323
|
|
|
7324
7324
|
var SizeDropdown = function (_a) {
|
|
7325
7325
|
var options = _a.options, defaultLabel = _a.defaultLabel, onOptionSelect = _a.onOptionSelect;
|
|
@@ -7404,12 +7404,12 @@ var Header$1 = newStyled.div(templateObject_2$U || (templateObject_2$U = __makeT
|
|
|
7404
7404
|
var MobileHeader = newStyled.div(templateObject_3$I || (templateObject_3$I = __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"])));
|
|
7405
7405
|
var MobileIconsContainer = newStyled.div(templateObject_4$w || (templateObject_4$w = __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"])));
|
|
7406
7406
|
var H4 = newStyled.h4(templateObject_5$p || (templateObject_5$p = __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; });
|
|
7407
|
-
var FilterLink = newStyled.a(templateObject_6$
|
|
7408
|
-
var OptionContainer = newStyled.div(templateObject_7$
|
|
7407
|
+
var FilterLink = newStyled.a(templateObject_6$n || (templateObject_6$n = __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; });
|
|
7408
|
+
var OptionContainer = newStyled.div(templateObject_7$i || (templateObject_7$i = __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'); });
|
|
7409
7409
|
var ClearAll = newStyled.span(templateObject_8$d || (templateObject_8$d = __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; });
|
|
7410
7410
|
var MobileFooter = newStyled.div(templateObject_9$8 || (templateObject_9$8 = __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"])));
|
|
7411
7411
|
var MobileClearContainer = newStyled.div(templateObject_10$7 || (templateObject_10$7 = __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"])));
|
|
7412
|
-
var templateObject_1$1d, templateObject_2$U, templateObject_3$I, templateObject_4$w, templateObject_5$p, templateObject_6$
|
|
7412
|
+
var templateObject_1$1d, templateObject_2$U, templateObject_3$I, templateObject_4$w, templateObject_5$p, templateObject_6$n, templateObject_7$i, templateObject_8$d, templateObject_9$8, templateObject_10$7;
|
|
7413
7413
|
|
|
7414
7414
|
var getStylesBySize$a = function (size, theme) {
|
|
7415
7415
|
switch (size) {
|
|
@@ -12005,10 +12005,10 @@ var Container$Q = newStyled.div(templateObject_3$G || (templateObject_3$G = __ma
|
|
|
12005
12005
|
});
|
|
12006
12006
|
var Button$6 = newStyled.button(templateObject_4$v || (templateObject_4$v = __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"])));
|
|
12007
12007
|
var ArrowsContainer = newStyled.div(templateObject_5$o || (templateObject_5$o = __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"])));
|
|
12008
|
-
var ArrowBaseStyles = newStyled.div(templateObject_6$
|
|
12009
|
-
var ArrowPrev = newStyled(ArrowBaseStyles)(templateObject_7$
|
|
12008
|
+
var ArrowBaseStyles = newStyled.div(templateObject_6$m || (templateObject_6$m = __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"])));
|
|
12009
|
+
var ArrowPrev = newStyled(ArrowBaseStyles)(templateObject_7$h || (templateObject_7$h = __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"])));
|
|
12010
12010
|
var ArrowNext = newStyled(ArrowBaseStyles)(templateObject_8$c || (templateObject_8$c = __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"])));
|
|
12011
|
-
var templateObject_1$17, templateObject_2$Q, templateObject_3$G, templateObject_4$v, templateObject_5$o, templateObject_6$
|
|
12011
|
+
var templateObject_1$17, templateObject_2$Q, templateObject_3$G, templateObject_4$v, templateObject_5$o, templateObject_6$m, templateObject_7$h, templateObject_8$c;
|
|
12012
12012
|
|
|
12013
12013
|
var ImagePreviewList = function (_a) {
|
|
12014
12014
|
var images = _a.images, selectedImage = _a.selectedImage, onClick = _a.onClick, dataTestId = _a.dataTestId, position = _a.position, borderRadiusVariant = _a.borderRadiusVariant, previewImgBorderColor = _a.previewImgBorderColor, hasOverflowArrows = _a.hasOverflowArrows, isRatioSquare = _a.isRatioSquare;
|
|
@@ -12027,6 +12027,70 @@ var ImagePreviewList = function (_a) {
|
|
|
12027
12027
|
}, adaptiveHeight: true, dots: false, slidesToShow: 4 }, { children: images.map(function (item, index) { return (jsxRuntime.jsx(Button$6, __assign$1({ onClick: function () { return onClick(index); } }, { children: jsxRuntime.jsx(ImageSmallPreview, { imageUrl: (item === null || item === void 0 ? void 0 : item.alt.includes('-video')) ? item === null || item === void 0 ? void 0 : item.thumbnailUrl : item === null || item === void 0 ? void 0 : item.url, alt: item.alt, selected: item.key === selectedImage.key, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor, isRatioSquare: isRatioSquare }, void 0) }), item.key)); }) }), void 0) }), void 0)) : (images.map(function (item, index) { return (jsxRuntime.jsx(Button$6, __assign$1({ onClick: function () { return onClick(index); } }, { children: jsxRuntime.jsx(ImageSmallPreview, { imageUrl: (item === null || item === void 0 ? void 0 : item.alt.includes('-video')) ? item === null || item === void 0 ? void 0 : item.thumbnailUrl : item === null || item === void 0 ? void 0 : item.url, alt: item.alt, selected: item.key === selectedImage.key, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor, isRatioSquare: isRatioSquare }, void 0) }), item.key)); })) }), void 0), hasOverflowArrows && (jsxRuntime.jsxs(ArrowsContainer, __assign$1({ role: "navigation" }, { children: [jsxRuntime.jsx(ArrowPrev, { onClick: handleScrollVerticalPrev }, void 0), jsxRuntime.jsx(ArrowNext, { onClick: handleScrollVerticalNext }, void 0)] }), void 0))] }, void 0));
|
|
12028
12028
|
};
|
|
12029
12029
|
|
|
12030
|
+
var ProgressContainer = newStyled.div(templateObject_1$16 || (templateObject_1$16 = __makeTemplateObject(["\n top: 20px;\n left: 10px;\n border-radius: 10px;\n position: absolute;\n height: 5px;\n width: 95%;\n background: rgba(0, 0, 0, 0.3);\n transition: opacity 0.3s ease-in-out;\n opacity: ", ";\n"], ["\n top: 20px;\n left: 10px;\n border-radius: 10px;\n position: absolute;\n height: 5px;\n width: 95%;\n background: rgba(0, 0, 0, 0.3);\n transition: opacity 0.3s ease-in-out;\n opacity: ", ";\n"])), function (props) { return (props.hide ? 0 : 1); });
|
|
12031
|
+
var ProgressFiller = newStyled.div(templateObject_2$P || (templateObject_2$P = __makeTemplateObject(["\n height: 100%;\n width: ", "%;\n background-color: white;\n border-radius: 10px;\n transition: width 0.3s ease-in-out;\n"], ["\n height: 100%;\n width: ", "%;\n background-color: white;\n border-radius: 10px;\n transition: width 0.3s ease-in-out;\n"])), function (props) { return props.progress * 100; });
|
|
12032
|
+
var templateObject_1$16, templateObject_2$P;
|
|
12033
|
+
|
|
12034
|
+
var ProgressBar$1 = function (_a) {
|
|
12035
|
+
var progress = _a.progress, hide = _a.hide;
|
|
12036
|
+
return (jsxRuntime.jsx(ProgressContainer, __assign$1({ "data-testid": "progress-bar", hide: hide }, { children: jsxRuntime.jsx(ProgressFiller, { progress: progress }, void 0) }), void 0));
|
|
12037
|
+
};
|
|
12038
|
+
|
|
12039
|
+
var Container$P = newStyled.div(templateObject_1$15 || (templateObject_1$15 = __makeTemplateObject(["\n max-width: 530px;\n position: relative;\n"], ["\n max-width: 530px;\n position: relative;\n"])));
|
|
12040
|
+
var HTMLVideo = newStyled.video(templateObject_2$O || (templateObject_2$O = __makeTemplateObject(["\n width: 100%;\n max-width: 530px;\n height: ", ";\n"], ["\n width: 100%;\n max-width: 530px;\n height: ", ";\n"])), function (props) { return props.height; });
|
|
12041
|
+
var PlayIcon = newStyled(Icon.PDP.PlayVideo)(templateObject_3$F || (templateObject_3$F = __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"])));
|
|
12042
|
+
var PlayContainer = newStyled.div(templateObject_4$u || (templateObject_4$u = __makeTemplateObject(["\n z-index: 1;\n width: 100%;\n height: 100%;\n display: flex;\n position: absolute;\n align-items: center;\n justify-content: center;\n"], ["\n z-index: 1;\n width: 100%;\n height: 100%;\n display: flex;\n position: absolute;\n align-items: center;\n justify-content: center;\n"])));
|
|
12043
|
+
var PauseContainer = newStyled.div(templateObject_5$n || (templateObject_5$n = __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"])));
|
|
12044
|
+
var MuteButton = newStyled.button(templateObject_6$l || (templateObject_6$l = __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"])));
|
|
12045
|
+
var templateObject_1$15, templateObject_2$O, templateObject_3$F, templateObject_4$u, templateObject_5$n, templateObject_6$l;
|
|
12046
|
+
|
|
12047
|
+
var Video$1 = function (_a) {
|
|
12048
|
+
var _b, _c, _d, _e;
|
|
12049
|
+
var source = _a.source, thumbnail = _a.thumbnail, height = _a.height, className = _a.className, _f = _a.withProgressBar, withProgressBar = _f === void 0 ? true : _f, hasAudioControl = _a.hasAudioControl, muted = _a.muted, rest = __rest(_a, ["source", "thumbnail", "height", "className", "withProgressBar", "hasAudioControl", "muted"]);
|
|
12050
|
+
var videoRef = React$2.useRef(null);
|
|
12051
|
+
var _g = React$2.useState(true), isLoading = _g[0], setIsLoading = _g[1];
|
|
12052
|
+
var _h = React$2.useState(false), isPlaying = _h[0], setIsPlaying = _h[1];
|
|
12053
|
+
var _j = React$2.useState(muted), isMuted = _j[0], setIsMuted = _j[1];
|
|
12054
|
+
var _k = React$2.useState(0), videoProgress = _k[0], setVideoProgress = _k[1];
|
|
12055
|
+
var _l = React$2.useState(false), debouncePlay = _l[0], setDebouncePlay = _l[1];
|
|
12056
|
+
var isStarted = videoProgress > 0;
|
|
12057
|
+
var progress = videoProgress / ((_c = (_b = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _b === void 0 ? void 0 : _b.duration) !== null && _c !== void 0 ? _c : 0);
|
|
12058
|
+
var hideProgressBar = videoProgress === ((_e = (_d = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _d === void 0 ? void 0 : _d.duration) !== null && _e !== void 0 ? _e : 0) || videoProgress === 0;
|
|
12059
|
+
var handlePlayClick = function () {
|
|
12060
|
+
if (videoRef.current && !debouncePlay) {
|
|
12061
|
+
setDebouncePlay(true);
|
|
12062
|
+
videoRef.current
|
|
12063
|
+
.play()
|
|
12064
|
+
.then(function () {
|
|
12065
|
+
setIsPlaying(true);
|
|
12066
|
+
setDebouncePlay(false);
|
|
12067
|
+
})
|
|
12068
|
+
.catch(function (error) {
|
|
12069
|
+
console.error('Error playing video:', error);
|
|
12070
|
+
setDebouncePlay(false);
|
|
12071
|
+
});
|
|
12072
|
+
}
|
|
12073
|
+
};
|
|
12074
|
+
var handlePauseClick = function () {
|
|
12075
|
+
if (videoRef.current && isPlaying) {
|
|
12076
|
+
videoRef.current.pause();
|
|
12077
|
+
setIsPlaying(false);
|
|
12078
|
+
}
|
|
12079
|
+
};
|
|
12080
|
+
var handleMuteToggle = function () {
|
|
12081
|
+
if (videoRef.current) {
|
|
12082
|
+
videoRef.current.muted = !videoRef.current.muted;
|
|
12083
|
+
setIsMuted(function (prevState) { return !prevState; });
|
|
12084
|
+
}
|
|
12085
|
+
};
|
|
12086
|
+
var onTimeUpdate = function () {
|
|
12087
|
+
if (videoRef.current) {
|
|
12088
|
+
setVideoProgress(videoRef.current.currentTime);
|
|
12089
|
+
}
|
|
12090
|
+
};
|
|
12091
|
+
return (jsxRuntime.jsxs(Container$P, __assign$1({ className: className }, { children: [!isLoading && withProgressBar && jsxRuntime.jsx(ProgressBar$1, { progress: progress, hide: hideProgressBar }, void 0), !isPlaying ? (jsxRuntime.jsx(PlayContainer, __assign$1({ "data-testid": "play", onClick: handlePlayClick }, { children: isStarted && jsxRuntime.jsx(PlayIcon, {}, void 0) }), void 0)) : (jsxRuntime.jsx(PauseContainer, { "data-testid": "pause", onClick: handlePauseClick }, void 0)), hasAudioControl && (jsxRuntime.jsxs(MuteButton, __assign$1({ onClick: handleMuteToggle }, { children: [isMuted && jsxRuntime.jsx(Icon$1, { name: "custom/sound_off" }, void 0), !isMuted && jsxRuntime.jsx(Icon$1, { name: "custom/sound_on" }, void 0)] }), void 0)), jsxRuntime.jsxs(HTMLVideo, __assign$1({}, rest, { muted: true, "data-testid": "video", poster: thumbnail, playsInline: true, ref: videoRef, onTimeUpdate: onTimeUpdate, onCanPlay: function () { return setIsLoading(false); }, onLoadedData: function () { return setIsLoading(false); }, onPause: function () { return setIsPlaying(false); }, onPlaying: function () { return setIsPlaying(true); }, height: height || 'auto' }, { children: [jsxRuntime.jsx("track", { kind: "captions" }, void 0), jsxRuntime.jsx("source", { src: source }, void 0)] }), void 0)] }), void 0));
|
|
12092
|
+
};
|
|
12093
|
+
|
|
12030
12094
|
var propTypes = {exports: {}};
|
|
12031
12095
|
|
|
12032
12096
|
var reactIs = {exports: {}};
|
|
@@ -13618,70 +13682,6 @@ InnerImageZoom.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
13618
13682
|
afterZoomOut: PropTypes.func
|
|
13619
13683
|
} : {};
|
|
13620
13684
|
|
|
13621
|
-
var ProgressContainer = newStyled.div(templateObject_1$16 || (templateObject_1$16 = __makeTemplateObject(["\n top: 20px;\n left: 10px;\n border-radius: 10px;\n position: absolute;\n height: 5px;\n width: 95%;\n background: rgba(0, 0, 0, 0.3);\n transition: opacity 0.3s ease-in-out;\n opacity: ", ";\n"], ["\n top: 20px;\n left: 10px;\n border-radius: 10px;\n position: absolute;\n height: 5px;\n width: 95%;\n background: rgba(0, 0, 0, 0.3);\n transition: opacity 0.3s ease-in-out;\n opacity: ", ";\n"])), function (props) { return (props.hide ? 0 : 1); });
|
|
13622
|
-
var ProgressFiller = newStyled.div(templateObject_2$P || (templateObject_2$P = __makeTemplateObject(["\n height: 100%;\n width: ", "%;\n background-color: white;\n border-radius: 10px;\n transition: width 0.3s ease-in-out;\n"], ["\n height: 100%;\n width: ", "%;\n background-color: white;\n border-radius: 10px;\n transition: width 0.3s ease-in-out;\n"])), function (props) { return props.progress * 100; });
|
|
13623
|
-
var templateObject_1$16, templateObject_2$P;
|
|
13624
|
-
|
|
13625
|
-
var ProgressBar$1 = function (_a) {
|
|
13626
|
-
var progress = _a.progress, hide = _a.hide;
|
|
13627
|
-
return (jsxRuntime.jsx(ProgressContainer, __assign$1({ "data-testid": "progress-bar", hide: hide }, { children: jsxRuntime.jsx(ProgressFiller, { progress: progress }, void 0) }), void 0));
|
|
13628
|
-
};
|
|
13629
|
-
|
|
13630
|
-
var Container$P = newStyled.div(templateObject_1$15 || (templateObject_1$15 = __makeTemplateObject(["\n max-width: 530px;\n position: relative;\n"], ["\n max-width: 530px;\n position: relative;\n"])));
|
|
13631
|
-
var HTMLVideo = newStyled.video(templateObject_2$O || (templateObject_2$O = __makeTemplateObject(["\n width: 100%;\n max-width: 530px;\n height: ", ";\n"], ["\n width: 100%;\n max-width: 530px;\n height: ", ";\n"])), function (props) { return props.height; });
|
|
13632
|
-
var PlayIcon = newStyled(Icon.PDP.PlayVideo)(templateObject_3$F || (templateObject_3$F = __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"])));
|
|
13633
|
-
var PlayContainer = newStyled.div(templateObject_4$u || (templateObject_4$u = __makeTemplateObject(["\n z-index: 1;\n width: 100%;\n height: 100%;\n display: flex;\n position: absolute;\n align-items: center;\n justify-content: center;\n"], ["\n z-index: 1;\n width: 100%;\n height: 100%;\n display: flex;\n position: absolute;\n align-items: center;\n justify-content: center;\n"])));
|
|
13634
|
-
var PauseContainer = newStyled.div(templateObject_5$n || (templateObject_5$n = __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"])));
|
|
13635
|
-
var MuteButton = newStyled.button(templateObject_6$k || (templateObject_6$k = __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"])));
|
|
13636
|
-
var templateObject_1$15, templateObject_2$O, templateObject_3$F, templateObject_4$u, templateObject_5$n, templateObject_6$k;
|
|
13637
|
-
|
|
13638
|
-
var Video$1 = function (_a) {
|
|
13639
|
-
var _b, _c, _d, _e;
|
|
13640
|
-
var source = _a.source, thumbnail = _a.thumbnail, height = _a.height, className = _a.className, _f = _a.withProgressBar, withProgressBar = _f === void 0 ? true : _f, hasAudioControl = _a.hasAudioControl, muted = _a.muted, rest = __rest(_a, ["source", "thumbnail", "height", "className", "withProgressBar", "hasAudioControl", "muted"]);
|
|
13641
|
-
var videoRef = React$2.useRef(null);
|
|
13642
|
-
var _g = React$2.useState(true), isLoading = _g[0], setIsLoading = _g[1];
|
|
13643
|
-
var _h = React$2.useState(false), isPlaying = _h[0], setIsPlaying = _h[1];
|
|
13644
|
-
var _j = React$2.useState(muted), isMuted = _j[0], setIsMuted = _j[1];
|
|
13645
|
-
var _k = React$2.useState(0), videoProgress = _k[0], setVideoProgress = _k[1];
|
|
13646
|
-
var _l = React$2.useState(false), debouncePlay = _l[0], setDebouncePlay = _l[1];
|
|
13647
|
-
var isStarted = videoProgress > 0;
|
|
13648
|
-
var progress = videoProgress / ((_c = (_b = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _b === void 0 ? void 0 : _b.duration) !== null && _c !== void 0 ? _c : 0);
|
|
13649
|
-
var hideProgressBar = videoProgress === ((_e = (_d = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _d === void 0 ? void 0 : _d.duration) !== null && _e !== void 0 ? _e : 0) || videoProgress === 0;
|
|
13650
|
-
var handlePlayClick = function () {
|
|
13651
|
-
if (videoRef.current && !debouncePlay) {
|
|
13652
|
-
setDebouncePlay(true);
|
|
13653
|
-
videoRef.current
|
|
13654
|
-
.play()
|
|
13655
|
-
.then(function () {
|
|
13656
|
-
setIsPlaying(true);
|
|
13657
|
-
setDebouncePlay(false);
|
|
13658
|
-
})
|
|
13659
|
-
.catch(function (error) {
|
|
13660
|
-
console.error('Error playing video:', error);
|
|
13661
|
-
setDebouncePlay(false);
|
|
13662
|
-
});
|
|
13663
|
-
}
|
|
13664
|
-
};
|
|
13665
|
-
var handlePauseClick = function () {
|
|
13666
|
-
if (videoRef.current && isPlaying) {
|
|
13667
|
-
videoRef.current.pause();
|
|
13668
|
-
setIsPlaying(false);
|
|
13669
|
-
}
|
|
13670
|
-
};
|
|
13671
|
-
var handleMuteToggle = function () {
|
|
13672
|
-
if (videoRef.current) {
|
|
13673
|
-
videoRef.current.muted = !videoRef.current.muted;
|
|
13674
|
-
setIsMuted(function (prevState) { return !prevState; });
|
|
13675
|
-
}
|
|
13676
|
-
};
|
|
13677
|
-
var onTimeUpdate = function () {
|
|
13678
|
-
if (videoRef.current) {
|
|
13679
|
-
setVideoProgress(videoRef.current.currentTime);
|
|
13680
|
-
}
|
|
13681
|
-
};
|
|
13682
|
-
return (jsxRuntime.jsxs(Container$P, __assign$1({ className: className }, { children: [!isLoading && withProgressBar && jsxRuntime.jsx(ProgressBar$1, { progress: progress, hide: hideProgressBar }, void 0), !isPlaying ? (jsxRuntime.jsx(PlayContainer, __assign$1({ "data-testid": "play", onClick: handlePlayClick }, { children: isStarted && jsxRuntime.jsx(PlayIcon, {}, void 0) }), void 0)) : (jsxRuntime.jsx(PauseContainer, { "data-testid": "pause", onClick: handlePauseClick }, void 0)), hasAudioControl && (jsxRuntime.jsxs(MuteButton, __assign$1({ onClick: handleMuteToggle }, { children: [isMuted && jsxRuntime.jsx(Icon$1, { name: "custom/sound_off" }, void 0), !isMuted && jsxRuntime.jsx(Icon$1, { name: "custom/sound_on" }, void 0)] }), void 0)), jsxRuntime.jsxs(HTMLVideo, __assign$1({}, rest, { muted: true, "data-testid": "video", poster: thumbnail, playsInline: true, ref: videoRef, onTimeUpdate: onTimeUpdate, onCanPlay: function () { return setIsLoading(false); }, onLoadedData: function () { return setIsLoading(false); }, onPause: function () { return setIsPlaying(false); }, onPlaying: function () { return setIsPlaying(true); }, height: height || 'auto' }, { children: [jsxRuntime.jsx("track", { kind: "captions" }, void 0), jsxRuntime.jsx("source", { src: source }, void 0)] }), void 0)] }), void 0));
|
|
13683
|
-
};
|
|
13684
|
-
|
|
13685
13685
|
var Container$O = newStyled.div(templateObject_1$14 || (templateObject_1$14 = __makeTemplateObject(["\n ", "\n z-index: 0;\n position: relative;\n height: fit-content;\n /* &.styleforhorizontal {\n height: 30rem;\n } */\n display: block;\n overflow: hidden;\n white-space: nowrap;\n grid-area: 1/2;\n width: 100%;\n max-width: max-content;\n"], ["\n ", "\n z-index: 0;\n position: relative;\n height: fit-content;\n /* &.styleforhorizontal {\n height: 30rem;\n } */\n display: block;\n overflow: hidden;\n white-space: nowrap;\n grid-area: 1/2;\n width: 100%;\n max-width: max-content;\n"])), function (_a) {
|
|
13686
13686
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
13687
13687
|
return borderRadiusVariant && "border-radius: 40px;";
|
|
@@ -13699,17 +13699,25 @@ var BottomTagContainer$6 = newStyled.div(templateObject_3$E || (templateObject_3
|
|
|
13699
13699
|
});
|
|
13700
13700
|
var TopRightTagContainer$1 = newStyled.div(templateObject_4$t || (templateObject_4$t = __makeTemplateObject(["\n position: absolute;\n right: 0;\n top: 0;\n white-space: pre-wrap;\n"], ["\n position: absolute;\n right: 0;\n top: 0;\n white-space: pre-wrap;\n"])));
|
|
13701
13701
|
var ButtonSecondaryOutlineWrapper = newStyled(ButtonSecondaryOutline)(templateObject_5$m || (templateObject_5$m = __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"])));
|
|
13702
|
-
var
|
|
13702
|
+
var ImageStyled = newStyled(Image$3)(templateObject_6$k || (templateObject_6$k = __makeTemplateObject(["\n aspect-ratio: ", ";\n"], ["\n aspect-ratio: ", ";\n"])), function (_a) {
|
|
13703
|
+
var theme = _a.theme, isRatioSquare = _a.isRatioSquare;
|
|
13704
|
+
return isRatioSquare ? '1 / 1' : theme.component.gallery.aspectRatio;
|
|
13705
|
+
});
|
|
13706
|
+
var InnerImageZoomStyled = newStyled(InnerImageZoom)(templateObject_7$g || (templateObject_7$g = __makeTemplateObject(["\n aspect-ratio: ", ";\n"], ["\n aspect-ratio: ", ";\n"])), function (_a) {
|
|
13707
|
+
var theme = _a.theme, isRatioSquare = _a.isRatioSquare;
|
|
13708
|
+
return isRatioSquare ? '1 / 1' : theme.component.gallery.aspectRatio;
|
|
13709
|
+
});
|
|
13710
|
+
var templateObject_1$14, templateObject_2$N, templateObject_3$E, templateObject_4$t, templateObject_5$m, templateObject_6$k, templateObject_7$g;
|
|
13703
13711
|
|
|
13704
13712
|
var ImageProductSlide$1 = function (_a) {
|
|
13705
13713
|
var _b;
|
|
13706
|
-
var content = _a.content, topTag = _a.topTag, topRightTag = _a.topRightTag, bottomTag = _a.bottomTag, testId = _a.testId, _c = _a.position, position = _c === void 0 ? 'vertical' : _c, borderRadiusVariant = _a.borderRadiusVariant, ctaText = _a.ctaText, ctaAction = _a.ctaAction, hideCTA = _a.hideCTA, withZoom = _a.withZoom;
|
|
13714
|
+
var content = _a.content, topTag = _a.topTag, topRightTag = _a.topRightTag, bottomTag = _a.bottomTag, testId = _a.testId, _c = _a.position, position = _c === void 0 ? 'vertical' : _c, borderRadiusVariant = _a.borderRadiusVariant, ctaText = _a.ctaText, ctaAction = _a.ctaAction, hideCTA = _a.hideCTA, withZoom = _a.withZoom, isRatioSquare = _a.isRatioSquare;
|
|
13707
13715
|
var source = content === null || content === void 0 ? void 0 : content.url;
|
|
13708
13716
|
var isVideo = (_b = content === null || content === void 0 ? void 0 : content.isVideo) !== null && _b !== void 0 ? _b : false;
|
|
13709
|
-
return (jsxRuntime.jsxs(Container$O, __assign$1({ "data-testid": testId, className: "stylefor".concat(position), borderRadiusVariant: borderRadiusVariant }, { children: [!isVideo && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [withZoom ? (jsxRuntime.jsx(
|
|
13717
|
+
return (jsxRuntime.jsxs(Container$O, __assign$1({ "data-testid": testId, className: "stylefor".concat(position), borderRadiusVariant: borderRadiusVariant }, { children: [!isVideo && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [withZoom ? (jsxRuntime.jsx(InnerImageZoomStyled, { src: source, zoomSrc: source, zoomType: "hover", imgAttributes: {
|
|
13710
13718
|
alt: content.alt,
|
|
13711
13719
|
style: { objectFit: 'cover', objectPosition: 'center' },
|
|
13712
|
-
}, width: position == 'horizontal' ? 360 : 530, height: position == 'horizontal' ? 480 : 720, hideHint: true }, void 0)) : (jsxRuntime.jsx(
|
|
13720
|
+
}, width: position == 'horizontal' ? 360 : 530, height: position == 'horizontal' ? 480 : 720, hideHint: true, isRatioSquare: isRatioSquare }, void 0)) : (jsxRuntime.jsx(ImageStyled, { width: position == 'horizontal' ? '360px' : '530px', height: "auto", src: source, alt: content.alt, objectFit: "cover", loading: "eager", isRatioSquare: isRatioSquare }, void 0)), jsxRuntime.jsx(TopTagContainer$6, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsxRuntime.jsx(BottomTagContainer$6, __assign$1({ isCTAHidden: hideCTA }, { children: bottomTag }), void 0), !!topRightTag && jsxRuntime.jsx(TopRightTagContainer$1, { children: topRightTag }, void 0)] }, void 0)), isVideo && jsxRuntime.jsx(Video$1, { source: source, thumbnail: content === null || content === void 0 ? void 0 : content.thumbnailUrl }, void 0), ctaText && ctaAction && (jsxRuntime.jsx("div", __assign$1({ style: { display: hideCTA ? 'none' : 'block' } }, { children: jsxRuntime.jsx(ButtonSecondaryOutlineWrapper, { wide: true, onClick: ctaAction, text: ctaText }, void 0) }), void 0))] }), void 0));
|
|
13713
13721
|
};
|
|
13714
13722
|
|
|
13715
13723
|
var Container$N = newStyled.div(templateObject_1$13 || (templateObject_1$13 = __makeTemplateObject(["\n display: grid;\n grid-template-columns: minmax(6rem, max-content) 1fr;\n grid-column-gap: 20px;\n max-height: 50rem;\n width: 100%;\n"], ["\n display: grid;\n grid-template-columns: minmax(6rem, max-content) 1fr;\n grid-column-gap: 20px;\n max-height: 50rem;\n width: 100%;\n"])));
|
|
@@ -13739,7 +13747,7 @@ var ProductGallery = function (_a) {
|
|
|
13739
13747
|
setActiveIndex(index);
|
|
13740
13748
|
};
|
|
13741
13749
|
var selectedImage = images[activeIndex];
|
|
13742
|
-
return (jsxRuntime.jsxs(Container$N, { children: [jsxRuntime.jsx(ImagePreviewList, { images: images, selectedImage: selectedImage, dataTestId: previewListDataTestId, onClick: onContentChange, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor, hasOverflowArrows: hasOverflowArrows, isRatioSquare: isRatioSquare }, void 0), jsxRuntime.jsx(ImageProductSlide$1, { content: selectedImage, topTag: topTag, topRightTag: topRightTag, bottomTag: bottomTag, testId: productImageDataTestId, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant, ctaText: ctaText, ctaAction: ctaAction, hideCTA: hideCTA, withZoom: withZoom }, void 0)] }, void 0));
|
|
13750
|
+
return (jsxRuntime.jsxs(Container$N, { children: [jsxRuntime.jsx(ImagePreviewList, { images: images, selectedImage: selectedImage, dataTestId: previewListDataTestId, onClick: onContentChange, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor, hasOverflowArrows: hasOverflowArrows, isRatioSquare: isRatioSquare }, void 0), jsxRuntime.jsx(ImageProductSlide$1, { content: selectedImage, topTag: topTag, topRightTag: topRightTag, bottomTag: bottomTag, testId: productImageDataTestId, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant, ctaText: ctaText, ctaAction: ctaAction, hideCTA: hideCTA, withZoom: withZoom, isRatioSquare: isRatioSquare }, void 0)] }, void 0));
|
|
13743
13751
|
};
|
|
13744
13752
|
|
|
13745
13753
|
var getStylesBySize$8 = function (size) {
|
|
@@ -20783,17 +20791,20 @@ var SliderThumbnail = newStyled(Slider)(templateObject_7$1 || (templateObject_7$
|
|
|
20783
20791
|
var theme = _a.theme;
|
|
20784
20792
|
return theme.colors.pallete.primary.color;
|
|
20785
20793
|
});
|
|
20786
|
-
var StyledImage = newStyled(Image$3)(templateObject_8$1 || (templateObject_8$1 = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n"], ["\n width: 100%;\n height: 100%;\n"])))
|
|
20794
|
+
var StyledImage = newStyled(Image$3)(templateObject_8$1 || (templateObject_8$1 = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n aspect-ratio: ", ";\n"], ["\n width: 100%;\n height: 100%;\n aspect-ratio: ", ";\n"])), function (_a) {
|
|
20795
|
+
var theme = _a.theme, isRatioSquare = _a.isRatioSquare;
|
|
20796
|
+
return isRatioSquare ? '1/1' : theme.component.gallery.aspectRatio;
|
|
20797
|
+
});
|
|
20787
20798
|
var SlideItem = newStyled.div(templateObject_9$1 || (templateObject_9$1 = __makeTemplateObject(["\n padding-right: ", ";\n"], ["\n padding-right: ", ";\n"])), function (_a) {
|
|
20788
20799
|
var paddingRight = _a.paddingRight;
|
|
20789
20800
|
return paddingRight || '12px';
|
|
20790
20801
|
});
|
|
20791
|
-
var ThumbnailImage = newStyled(Image$3)(templateObject_10$1 || (templateObject_10$1 = __makeTemplateObject(["\n object-fit: cover;\n width: ", ";\n
|
|
20802
|
+
var ThumbnailImage = newStyled(Image$3)(templateObject_10$1 || (templateObject_10$1 = __makeTemplateObject(["\n object-fit: cover;\n width: ", ";\n aspect-ratio: ", ";\n border-radius: ", ";\n"], ["\n object-fit: cover;\n width: ", ";\n aspect-ratio: ", ";\n border-radius: ", ";\n"])), function (_a) {
|
|
20792
20803
|
var width = _a.width, theme = _a.theme;
|
|
20793
20804
|
return width || theme.component.gallery.thumbnail.mobile.width;
|
|
20794
20805
|
}, function (_a) {
|
|
20795
|
-
var
|
|
20796
|
-
return
|
|
20806
|
+
var theme = _a.theme, isRatioSquare = _a.isRatioSquare;
|
|
20807
|
+
return isRatioSquare ? '1/1' : theme.component.gallery.aspectRatio;
|
|
20797
20808
|
}, function (_a) {
|
|
20798
20809
|
var borderRadius = _a.borderRadius;
|
|
20799
20810
|
return borderRadius || '0px';
|
|
@@ -20801,10 +20812,10 @@ var ThumbnailImage = newStyled(Image$3)(templateObject_10$1 || (templateObject_1
|
|
|
20801
20812
|
var templateObject_1$1, templateObject_2$1, templateObject_3$1, templateObject_4$1, templateObject_5$1, templateObject_6$1, templateObject_7$1, templateObject_8$1, templateObject_9$1, templateObject_10$1;
|
|
20802
20813
|
|
|
20803
20814
|
var ProductGalleryMobileV4 = function (_a) {
|
|
20804
|
-
var images = _a.images, topTag = _a.topTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, imagesSliderConfig = _a.imagesSliderConfig, thumbnailSettings = _a.thumbnailSettings;
|
|
20815
|
+
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;
|
|
20805
20816
|
var colors = useTheme$1().colors;
|
|
20806
|
-
var
|
|
20807
|
-
var
|
|
20817
|
+
var _c = React$2.useState(undefined), nav1 = _c[0], setNav1 = _c[1];
|
|
20818
|
+
var _d = React$2.useState(undefined), nav2 = _d[0], setNav2 = _d[1];
|
|
20808
20819
|
var slick = React$2.useRef(null);
|
|
20809
20820
|
var thumbnailRef = React$2.useRef(null);
|
|
20810
20821
|
var sliderWrapper = React$2.useRef(null);
|
|
@@ -20818,10 +20829,10 @@ var ProductGalleryMobileV4 = function (_a) {
|
|
|
20818
20829
|
}, []);
|
|
20819
20830
|
return (jsxRuntime.jsx(Container$1, __assign$1({ "data-testid": "product-gallery-mobile" }, { children: jsxRuntime.jsxs(SliderContainer, __assign$1({ "data-testid": productImageDataTestId, ref: sliderWrapper }, { children: [jsxRuntime.jsx(Slider, __assign$1({}, SETTINGS, { lazyLoad: "progressive", nextArrow: jsxRuntime.jsx(NavButtonContainer, { children: jsxRuntime.jsx(Button, { children: jsxRuntime.jsx(Icon.Arrows.ChevronRight, { height: "21px", width: "21px", fill: colors.shades[700].color }, void 0) }, void 0) }, void 0), prevArrow: jsxRuntime.jsx(NavButtonContainer, { children: jsxRuntime.jsx(Button, { children: jsxRuntime.jsx(Icon.Arrows.ChevronLeft, { height: "21px", width: "21px", fill: colors.shades[700].color }, void 0) }, void 0) }, void 0), asNavFor: nav2, ref: function (slider) { return (slick.current = slider); } }, { children: images.map(function (_a) {
|
|
20820
20831
|
var url = _a.url, key = _a.key, alt = _a.alt;
|
|
20821
|
-
return (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(StyledImage, { alt: alt, src: url, objectFit: "cover", width: theme.component.gallery.mainImgWidth, height: theme.component.gallery.mainImgHeight, loading: "eager" }, void 0), jsxRuntime.jsx(TopTagContainer, __assign$1({ "data-testid": "topTag" }, { children: topTag }), void 0), jsxRuntime.jsx(BottomTagContainer, __assign$1({ "data-testid": "bottomTag" }, { children: bottomTag }), void 0)] }, key));
|
|
20832
|
+
return (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(StyledImage, { alt: alt, src: url, objectFit: "cover", width: theme.component.gallery.mainImgWidth, height: theme.component.gallery.mainImgHeight, loading: "eager", isRatioSquare: isRatioSquare }, void 0), jsxRuntime.jsx(TopTagContainer, __assign$1({ "data-testid": "topTag" }, { children: topTag }), void 0), jsxRuntime.jsx(BottomTagContainer, __assign$1({ "data-testid": "bottomTag" }, { children: bottomTag }), void 0)] }, key));
|
|
20822
20833
|
}) }), void 0), jsxRuntime.jsx(SliderThumbnail, __assign$1({ asNavFor: nav1, ref: function (slider) { return (thumbnailRef.current = slider); } }, (thumbnailSettings || THUMBNAIL_SETTINGS), { lazyLoad: "progressive" }, { children: images.map(function (_a) {
|
|
20823
20834
|
var url = _a.url, key = _a.key, alt = _a.alt;
|
|
20824
|
-
return (jsxRuntime.jsx(SlideItem, __assign$1({ paddingRight: imagesSliderConfig === null || imagesSliderConfig === void 0 ? void 0 : imagesSliderConfig.spacesBetweenImages }, { children: jsxRuntime.jsx(ThumbnailImage, __assign$1({ alt: "".concat(alt, "-thumbnail"), src: url }, imagesSliderConfig, { loading: "eager" }), void 0) }), key));
|
|
20835
|
+
return (jsxRuntime.jsx(SlideItem, __assign$1({ paddingRight: imagesSliderConfig === null || imagesSliderConfig === void 0 ? void 0 : imagesSliderConfig.spacesBetweenImages }, { children: jsxRuntime.jsx(ThumbnailImage, __assign$1({ alt: "".concat(alt, "-thumbnail"), src: url }, imagesSliderConfig, { loading: "eager", isRatioSquare: isRatioSquare }), void 0) }), key));
|
|
20825
20836
|
}) }), void 0)] }), void 0) }), void 0));
|
|
20826
20837
|
};
|
|
20827
20838
|
|