@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.esm.js
CHANGED
|
@@ -4750,8 +4750,8 @@ var TAGS = {
|
|
|
4750
4750
|
hero3: newStyled.h3(templateObject_3$17 || (templateObject_3$17 = __makeTemplateObject([""], [""]))),
|
|
4751
4751
|
display1: newStyled.h1(templateObject_4$U || (templateObject_4$U = __makeTemplateObject([""], [""]))),
|
|
4752
4752
|
display2: newStyled.h2(templateObject_5$F || (templateObject_5$F = __makeTemplateObject([""], [""]))),
|
|
4753
|
-
display3: newStyled.h3(templateObject_6$
|
|
4754
|
-
heading1: newStyled.h1(templateObject_7$
|
|
4753
|
+
display3: newStyled.h3(templateObject_6$A || (templateObject_6$A = __makeTemplateObject([""], [""]))),
|
|
4754
|
+
heading1: newStyled.h1(templateObject_7$q || (templateObject_7$q = __makeTemplateObject([""], [""]))),
|
|
4755
4755
|
heading2: newStyled.h2(templateObject_8$k || (templateObject_8$k = __makeTemplateObject([""], [""]))),
|
|
4756
4756
|
heading3: newStyled.h3(templateObject_9$b || (templateObject_9$b = __makeTemplateObject([""], [""]))),
|
|
4757
4757
|
heading4: newStyled.h4(templateObject_10$a || (templateObject_10$a = __makeTemplateObject([""], [""]))),
|
|
@@ -4881,14 +4881,14 @@ var DEFAULTS = {
|
|
|
4881
4881
|
size: 'regular',
|
|
4882
4882
|
},
|
|
4883
4883
|
};
|
|
4884
|
-
var templateObject_1$20, templateObject_2$1q, templateObject_3$17, templateObject_4$U, templateObject_5$F, templateObject_6$
|
|
4884
|
+
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;
|
|
4885
4885
|
|
|
4886
4886
|
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"])));
|
|
4887
4887
|
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"])));
|
|
4888
4888
|
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"])));
|
|
4889
4889
|
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"])));
|
|
4890
4890
|
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"])));
|
|
4891
|
-
var DiscountContainer$1 = newStyled.div(templateObject_6$
|
|
4891
|
+
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"])));
|
|
4892
4892
|
var PackSelectorV2 = function (_a) {
|
|
4893
4893
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange, currencyCode = _a.currencyCode;
|
|
4894
4894
|
return (jsx$1(Container$1f, __assign$1({ role: "radiogroup" }, { children: packs.map(function (pack) {
|
|
@@ -4913,7 +4913,7 @@ var PackCard$1 = function (_a) {
|
|
|
4913
4913
|
currency: currencyCode || 'USD',
|
|
4914
4914
|
}), ' ', "each", ')'] }), void 0)) : null] }, void 0)] }), void 0));
|
|
4915
4915
|
};
|
|
4916
|
-
var templateObject_1$1$, templateObject_2$1p, templateObject_3$16, templateObject_4$T, templateObject_5$E, templateObject_6$
|
|
4916
|
+
var templateObject_1$1$, templateObject_2$1p, templateObject_3$16, templateObject_4$T, templateObject_5$E, templateObject_6$z;
|
|
4917
4917
|
|
|
4918
4918
|
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"])));
|
|
4919
4919
|
var DropContainer = newStyled.div(templateObject_2$1o || (templateObject_2$1o = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
@@ -5886,16 +5886,16 @@ var TooltipText = newStyled.div(templateObject_4$Q || (templateObject_4$Q = __ma
|
|
|
5886
5886
|
return color;
|
|
5887
5887
|
});
|
|
5888
5888
|
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"])));
|
|
5889
|
-
var Title$a = newStyled.h1(templateObject_6$
|
|
5889
|
+
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) {
|
|
5890
5890
|
var color = _a.color;
|
|
5891
5891
|
return color;
|
|
5892
5892
|
});
|
|
5893
|
-
var IconContainer$5 = newStyled.div(templateObject_7$
|
|
5893
|
+
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"])));
|
|
5894
5894
|
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) {
|
|
5895
5895
|
var _b = _a.right, right = _b === void 0 ? '.3rem' : _b;
|
|
5896
5896
|
return right;
|
|
5897
5897
|
});
|
|
5898
|
-
var templateObject_1$1O, templateObject_2$1g, templateObject_3$11, templateObject_4$Q, templateObject_5$C, templateObject_6$
|
|
5898
|
+
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;
|
|
5899
5899
|
|
|
5900
5900
|
var Tooltip = function (_a) {
|
|
5901
5901
|
var _b;
|
|
@@ -5965,8 +5965,8 @@ var SubscriptionHeader$2 = newStyled.div(templateObject_5$B || (templateObject_5
|
|
|
5965
5965
|
var theme = _a.theme;
|
|
5966
5966
|
return theme.colors.pallete.primary.color;
|
|
5967
5967
|
});
|
|
5968
|
-
var BenefitsContainer$2 = newStyled.div(templateObject_6$
|
|
5969
|
-
var Benefit$2 = newStyled.div(templateObject_7$
|
|
5968
|
+
var BenefitsContainer$2 = newStyled.div(templateObject_6$x || (templateObject_6$x = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
5969
|
+
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"])));
|
|
5970
5970
|
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"])));
|
|
5971
5971
|
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"])));
|
|
5972
5972
|
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"])));
|
|
@@ -5976,7 +5976,7 @@ var StyledPrice$2 = newStyled(PriceLabelV2$1)(templateObject_12$3 || (templateOb
|
|
|
5976
5976
|
return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
|
|
5977
5977
|
});
|
|
5978
5978
|
var Container$17 = newStyled.div(templateObject_13$3 || (templateObject_13$3 = __makeTemplateObject([""], [""])));
|
|
5979
|
-
var templateObject_1$1N, templateObject_2$1f, templateObject_3$10, templateObject_4$P, templateObject_5$B, templateObject_6$
|
|
5979
|
+
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;
|
|
5980
5980
|
|
|
5981
5981
|
var radioIds$2 = {
|
|
5982
5982
|
oneTime: {
|
|
@@ -6069,14 +6069,14 @@ var SinglePurchaseContainer$1 = newStyled(ContainerBase$1)(templateObject_4$O ||
|
|
|
6069
6069
|
return (onClick ? 'cursor: pointer;' : '');
|
|
6070
6070
|
});
|
|
6071
6071
|
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"])));
|
|
6072
|
-
var SubscriptionHeader$1 = newStyled.div(templateObject_6$
|
|
6072
|
+
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) {
|
|
6073
6073
|
var theme = _a.theme;
|
|
6074
6074
|
return theme.colors.shades[200].color;
|
|
6075
6075
|
}, function (_a) {
|
|
6076
6076
|
var theme = _a.theme;
|
|
6077
6077
|
return theme.colors.pallete.primary.color;
|
|
6078
6078
|
});
|
|
6079
|
-
var BenefitsContainer$1 = newStyled.div(templateObject_7$
|
|
6079
|
+
var BenefitsContainer$1 = newStyled.div(templateObject_7$n || (templateObject_7$n = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
6080
6080
|
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"])));
|
|
6081
6081
|
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"])));
|
|
6082
6082
|
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"])));
|
|
@@ -6089,7 +6089,7 @@ var TooltipWrapper = newStyled.div(templateObject_13$2 || (templateObject_13$2 =
|
|
|
6089
6089
|
var theme = _a.theme;
|
|
6090
6090
|
return theme.component.autoship.tooltip.margin;
|
|
6091
6091
|
});
|
|
6092
|
-
var templateObject_1$1M, templateObject_2$1e, templateObject_3$$, templateObject_4$O, templateObject_5$A, templateObject_6$
|
|
6092
|
+
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;
|
|
6093
6093
|
|
|
6094
6094
|
var radioIds$1 = {
|
|
6095
6095
|
oneTime: {
|
|
@@ -6172,8 +6172,8 @@ var CustomerInfo = newStyled.div(templateObject_2$1d || (templateObject_2$1d = _
|
|
|
6172
6172
|
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"])));
|
|
6173
6173
|
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"])));
|
|
6174
6174
|
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"])));
|
|
6175
|
-
var ReviewDays = newStyled.span(templateObject_6$
|
|
6176
|
-
var templateObject_1$1L, templateObject_2$1d, templateObject_3$_, templateObject_4$N, templateObject_5$z, templateObject_6$
|
|
6175
|
+
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"])));
|
|
6176
|
+
var templateObject_1$1L, templateObject_2$1d, templateObject_3$_, templateObject_4$N, templateObject_5$z, templateObject_6$v;
|
|
6177
6177
|
|
|
6178
6178
|
var NameWithStars = function (_a) {
|
|
6179
6179
|
var name = _a.name, size = _a.size;
|
|
@@ -6438,15 +6438,15 @@ var MobileContainer = newStyled(Container$10)(templateObject_2$18 || (templateOb
|
|
|
6438
6438
|
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"])));
|
|
6439
6439
|
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"])));
|
|
6440
6440
|
var MobileDollarPart = newStyled(DollarPart)(templateObject_5$y || (templateObject_5$y = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
6441
|
-
var MobileClubMembersText = newStyled(ClubMembersText)(templateObject_6$
|
|
6442
|
-
var DesktopDollarPart = newStyled(DollarPart)(templateObject_7$
|
|
6441
|
+
var MobileClubMembersText = newStyled(ClubMembersText)(templateObject_6$u || (templateObject_6$u = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
6442
|
+
var DesktopDollarPart = newStyled(DollarPart)(templateObject_7$m || (templateObject_7$m = __makeTemplateObject(["\n font-size: 13px;\n"], ["\n font-size: 13px;\n"])));
|
|
6443
6443
|
var DesktopClubMembersText = newStyled(ClubMembersText)(templateObject_8$g || (templateObject_8$g = __makeTemplateObject(["\n font-size: 13px;\n"], ["\n font-size: 13px;\n"])));
|
|
6444
6444
|
var ClubPriceLabel = function (_a) {
|
|
6445
6445
|
var clubPrice = _a.clubPrice;
|
|
6446
6446
|
var isMobile = useWindowDimensions().isMobile;
|
|
6447
6447
|
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$10, { children: [jsx$1(DesktopDollarPart, { children: clubPrice }, void 0), jsx$1(DesktopClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) }, void 0));
|
|
6448
6448
|
};
|
|
6449
|
-
var templateObject_1$1y, templateObject_2$18, templateObject_3$V, templateObject_4$J, templateObject_5$y, templateObject_6$
|
|
6449
|
+
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;
|
|
6450
6450
|
|
|
6451
6451
|
var Spacing = function (_a) {
|
|
6452
6452
|
var size = _a.size, _b = _a.type, type = _b === void 0 ? 'block' : _b, children = _a.children, styleProp = _a.style;
|
|
@@ -6676,11 +6676,11 @@ var TopTagContainer$8 = newStyled.div(templateObject_5$w || (templateObject_5$w
|
|
|
6676
6676
|
var style = _a.style;
|
|
6677
6677
|
return style.width;
|
|
6678
6678
|
});
|
|
6679
|
-
var BottomTagContainer$8 = newStyled.div(templateObject_6$
|
|
6679
|
+
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) {
|
|
6680
6680
|
var style = _a.style;
|
|
6681
6681
|
return style.width;
|
|
6682
6682
|
});
|
|
6683
|
-
var MarginTopContainer$1 = newStyled.div(templateObject_7$
|
|
6683
|
+
var MarginTopContainer$1 = newStyled.div(templateObject_7$l || (templateObject_7$l = __makeTemplateObject(["\n margin-top: 8px;\n"], ["\n margin-top: 8px;\n"])));
|
|
6684
6684
|
var ProductItemMobile = function (_a) {
|
|
6685
6685
|
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 ? {
|
|
6686
6686
|
display: false,
|
|
@@ -6741,7 +6741,7 @@ var ProductItemMobile = function (_a) {
|
|
|
6741
6741
|
letterSpacing: '-0.05rem',
|
|
6742
6742
|
} }), 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));
|
|
6743
6743
|
};
|
|
6744
|
-
var templateObject_1$1r, templateObject_2$15, templateObject_3$S, templateObject_4$G, templateObject_5$w, templateObject_6$
|
|
6744
|
+
var templateObject_1$1r, templateObject_2$15, templateObject_3$S, templateObject_4$G, templateObject_5$w, templateObject_6$t, templateObject_7$l;
|
|
6745
6745
|
|
|
6746
6746
|
var ImageContainer$5 = newStyled.div(function (_a) {
|
|
6747
6747
|
var width = _a.width, height = _a.height;
|
|
@@ -6784,8 +6784,8 @@ var TopTagContainer$7 = newStyled.div(templateObject_5$v || (templateObject_5$v
|
|
|
6784
6784
|
var style = _a.style;
|
|
6785
6785
|
return style.width;
|
|
6786
6786
|
});
|
|
6787
|
-
var TopRightTagContainer$2 = newStyled.div(templateObject_6$
|
|
6788
|
-
var BottomTagContainer$7 = newStyled.div(templateObject_7$
|
|
6787
|
+
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"])));
|
|
6788
|
+
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) {
|
|
6789
6789
|
var style = _a.style;
|
|
6790
6790
|
return style.width;
|
|
6791
6791
|
});
|
|
@@ -6840,7 +6840,7 @@ var ProductItemTK = function (_a) {
|
|
|
6840
6840
|
marginTop: hasSpacing ? undefined : textContainerGap,
|
|
6841
6841
|
} }, { 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));
|
|
6842
6842
|
};
|
|
6843
|
-
var templateObject_1$1q, templateObject_2$14, templateObject_3$R, templateObject_4$F, templateObject_5$v, templateObject_6$
|
|
6843
|
+
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;
|
|
6844
6844
|
|
|
6845
6845
|
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"])));
|
|
6846
6846
|
function withProductGrid(ProductItemComponent, data) {
|
|
@@ -7004,13 +7004,13 @@ var Row$2 = newStyled.div(templateObject_3$P || (templateObject_3$P = __makeTemp
|
|
|
7004
7004
|
});
|
|
7005
7005
|
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; });
|
|
7006
7006
|
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; });
|
|
7007
|
-
var FreeShipping = newStyled.span(templateObject_6$
|
|
7007
|
+
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; });
|
|
7008
7008
|
var CrossSellCheckbox = function (_a) {
|
|
7009
7009
|
var imageURL = _a.imageURL, title = _a.title, description = _a.description, freeShippingText = _a.freeShippingText, rightToLeft = _a.rightToLeft, onChange = _a.onChange;
|
|
7010
7010
|
var theme = useTheme();
|
|
7011
7011
|
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$1, __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));
|
|
7012
7012
|
};
|
|
7013
|
-
var templateObject_1$1m, templateObject_2$11, templateObject_3$P, templateObject_4$D, templateObject_5$t, templateObject_6$
|
|
7013
|
+
var templateObject_1$1m, templateObject_2$11, templateObject_3$P, templateObject_4$D, templateObject_5$t, templateObject_6$r;
|
|
7014
7014
|
|
|
7015
7015
|
var index$1 = /*#__PURE__*/Object.freeze({
|
|
7016
7016
|
__proto__: null,
|
|
@@ -7182,13 +7182,13 @@ var IconContainer$3 = newStyled.div(templateObject_5$s || (templateObject_5$s =
|
|
|
7182
7182
|
marginBottom: ['10px', '0'],
|
|
7183
7183
|
width: ['auto', '1.5rem'],
|
|
7184
7184
|
}));
|
|
7185
|
-
var SectionTitle = newStyled.h1(templateObject_6$
|
|
7185
|
+
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({
|
|
7186
7186
|
display: ['block', 'flex'],
|
|
7187
7187
|
}), function (_a) {
|
|
7188
7188
|
var theme = _a.theme;
|
|
7189
7189
|
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 ");
|
|
7190
7190
|
});
|
|
7191
|
-
var SectionDetails = newStyled.p(templateObject_7$
|
|
7191
|
+
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) {
|
|
7192
7192
|
var theme = _a.theme;
|
|
7193
7193
|
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 ");
|
|
7194
7194
|
}, function (_a) {
|
|
@@ -7205,7 +7205,7 @@ var DeliveryDetails = function (_a) {
|
|
|
7205
7205
|
var theme = useTheme();
|
|
7206
7206
|
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$3, __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$3, __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$3, __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));
|
|
7207
7207
|
};
|
|
7208
|
-
var templateObject_1$1j, templateObject_2$_, templateObject_3$N, templateObject_4$B, templateObject_5$s, templateObject_6$
|
|
7208
|
+
var templateObject_1$1j, templateObject_2$_, templateObject_3$N, templateObject_4$B, templateObject_5$s, templateObject_6$q, templateObject_7$j, templateObject_8$e;
|
|
7209
7209
|
|
|
7210
7210
|
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) {
|
|
7211
7211
|
var top = _a.top;
|
|
@@ -7273,8 +7273,8 @@ var Item$2 = newStyled.li(templateObject_2$Y || (templateObject_2$Y = __makeTemp
|
|
|
7273
7273
|
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"])));
|
|
7274
7274
|
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"])));
|
|
7275
7275
|
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; });
|
|
7276
|
-
var DropdownItem = newStyled.li(templateObject_6$
|
|
7277
|
-
var templateObject_1$1h, templateObject_2$Y, templateObject_3$M, templateObject_4$A, templateObject_5$r, templateObject_6$
|
|
7276
|
+
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; });
|
|
7277
|
+
var templateObject_1$1h, templateObject_2$Y, templateObject_3$M, templateObject_4$A, templateObject_5$r, templateObject_6$p;
|
|
7278
7278
|
|
|
7279
7279
|
var DropdownListIcons = function (_a) {
|
|
7280
7280
|
var items = _a.items;
|
|
@@ -7292,8 +7292,8 @@ var DropdownLabel = newStyled.div(templateObject_2$X || (templateObject_2$X = __
|
|
|
7292
7292
|
var SizeLabel = newStyled.span(templateObject_3$L || (templateObject_3$L = __makeTemplateObject(["\n margin-right: 8px;\n"], ["\n margin-right: 8px;\n"])));
|
|
7293
7293
|
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"])));
|
|
7294
7294
|
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"])));
|
|
7295
|
-
var DropdownOption = newStyled.div(templateObject_6$
|
|
7296
|
-
var templateObject_1$1g, templateObject_2$X, templateObject_3$L, templateObject_4$z, templateObject_5$q, templateObject_6$
|
|
7295
|
+
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"])));
|
|
7296
|
+
var templateObject_1$1g, templateObject_2$X, templateObject_3$L, templateObject_4$z, templateObject_5$q, templateObject_6$o;
|
|
7297
7297
|
|
|
7298
7298
|
var SizeDropdown = function (_a) {
|
|
7299
7299
|
var options = _a.options, defaultLabel = _a.defaultLabel, onOptionSelect = _a.onOptionSelect;
|
|
@@ -7378,12 +7378,12 @@ var Header$1 = newStyled.div(templateObject_2$U || (templateObject_2$U = __makeT
|
|
|
7378
7378
|
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"])));
|
|
7379
7379
|
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"])));
|
|
7380
7380
|
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; });
|
|
7381
|
-
var FilterLink = newStyled.a(templateObject_6$
|
|
7382
|
-
var OptionContainer = newStyled.div(templateObject_7$
|
|
7381
|
+
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; });
|
|
7382
|
+
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'); });
|
|
7383
7383
|
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; });
|
|
7384
7384
|
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"])));
|
|
7385
7385
|
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"])));
|
|
7386
|
-
var templateObject_1$1d, templateObject_2$U, templateObject_3$I, templateObject_4$w, templateObject_5$p, templateObject_6$
|
|
7386
|
+
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;
|
|
7387
7387
|
|
|
7388
7388
|
var getStylesBySize$a = function (size, theme) {
|
|
7389
7389
|
switch (size) {
|
|
@@ -11979,10 +11979,10 @@ var Container$Q = newStyled.div(templateObject_3$G || (templateObject_3$G = __ma
|
|
|
11979
11979
|
});
|
|
11980
11980
|
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"])));
|
|
11981
11981
|
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"])));
|
|
11982
|
-
var ArrowBaseStyles = newStyled.div(templateObject_6$
|
|
11983
|
-
var ArrowPrev = newStyled(ArrowBaseStyles)(templateObject_7$
|
|
11982
|
+
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"])));
|
|
11983
|
+
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"])));
|
|
11984
11984
|
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"])));
|
|
11985
|
-
var templateObject_1$17, templateObject_2$Q, templateObject_3$G, templateObject_4$v, templateObject_5$o, templateObject_6$
|
|
11985
|
+
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;
|
|
11986
11986
|
|
|
11987
11987
|
var ImagePreviewList = function (_a) {
|
|
11988
11988
|
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;
|
|
@@ -12001,6 +12001,70 @@ var ImagePreviewList = function (_a) {
|
|
|
12001
12001
|
}, adaptiveHeight: true, dots: false, slidesToShow: 4 }, { children: images.map(function (item, index) { return (jsx$1(Button$6, __assign$1({ onClick: function () { return onClick(index); } }, { children: jsx$1(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 (jsx$1(Button$6, __assign$1({ onClick: function () { return onClick(index); } }, { children: jsx$1(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 && (jsxs$1(ArrowsContainer, __assign$1({ role: "navigation" }, { children: [jsx$1(ArrowPrev, { onClick: handleScrollVerticalPrev }, void 0), jsx$1(ArrowNext, { onClick: handleScrollVerticalNext }, void 0)] }), void 0))] }, void 0));
|
|
12002
12002
|
};
|
|
12003
12003
|
|
|
12004
|
+
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); });
|
|
12005
|
+
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; });
|
|
12006
|
+
var templateObject_1$16, templateObject_2$P;
|
|
12007
|
+
|
|
12008
|
+
var ProgressBar$1 = function (_a) {
|
|
12009
|
+
var progress = _a.progress, hide = _a.hide;
|
|
12010
|
+
return (jsx$1(ProgressContainer, __assign$1({ "data-testid": "progress-bar", hide: hide }, { children: jsx$1(ProgressFiller, { progress: progress }, void 0) }), void 0));
|
|
12011
|
+
};
|
|
12012
|
+
|
|
12013
|
+
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"])));
|
|
12014
|
+
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; });
|
|
12015
|
+
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"])));
|
|
12016
|
+
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"])));
|
|
12017
|
+
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"])));
|
|
12018
|
+
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"])));
|
|
12019
|
+
var templateObject_1$15, templateObject_2$O, templateObject_3$F, templateObject_4$u, templateObject_5$n, templateObject_6$l;
|
|
12020
|
+
|
|
12021
|
+
var Video$1 = function (_a) {
|
|
12022
|
+
var _b, _c, _d, _e;
|
|
12023
|
+
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"]);
|
|
12024
|
+
var videoRef = useRef(null);
|
|
12025
|
+
var _g = useState(true), isLoading = _g[0], setIsLoading = _g[1];
|
|
12026
|
+
var _h = useState(false), isPlaying = _h[0], setIsPlaying = _h[1];
|
|
12027
|
+
var _j = useState(muted), isMuted = _j[0], setIsMuted = _j[1];
|
|
12028
|
+
var _k = useState(0), videoProgress = _k[0], setVideoProgress = _k[1];
|
|
12029
|
+
var _l = useState(false), debouncePlay = _l[0], setDebouncePlay = _l[1];
|
|
12030
|
+
var isStarted = videoProgress > 0;
|
|
12031
|
+
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);
|
|
12032
|
+
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;
|
|
12033
|
+
var handlePlayClick = function () {
|
|
12034
|
+
if (videoRef.current && !debouncePlay) {
|
|
12035
|
+
setDebouncePlay(true);
|
|
12036
|
+
videoRef.current
|
|
12037
|
+
.play()
|
|
12038
|
+
.then(function () {
|
|
12039
|
+
setIsPlaying(true);
|
|
12040
|
+
setDebouncePlay(false);
|
|
12041
|
+
})
|
|
12042
|
+
.catch(function (error) {
|
|
12043
|
+
console.error('Error playing video:', error);
|
|
12044
|
+
setDebouncePlay(false);
|
|
12045
|
+
});
|
|
12046
|
+
}
|
|
12047
|
+
};
|
|
12048
|
+
var handlePauseClick = function () {
|
|
12049
|
+
if (videoRef.current && isPlaying) {
|
|
12050
|
+
videoRef.current.pause();
|
|
12051
|
+
setIsPlaying(false);
|
|
12052
|
+
}
|
|
12053
|
+
};
|
|
12054
|
+
var handleMuteToggle = function () {
|
|
12055
|
+
if (videoRef.current) {
|
|
12056
|
+
videoRef.current.muted = !videoRef.current.muted;
|
|
12057
|
+
setIsMuted(function (prevState) { return !prevState; });
|
|
12058
|
+
}
|
|
12059
|
+
};
|
|
12060
|
+
var onTimeUpdate = function () {
|
|
12061
|
+
if (videoRef.current) {
|
|
12062
|
+
setVideoProgress(videoRef.current.currentTime);
|
|
12063
|
+
}
|
|
12064
|
+
};
|
|
12065
|
+
return (jsxs$1(Container$P, __assign$1({ className: className }, { children: [!isLoading && withProgressBar && jsx$1(ProgressBar$1, { progress: progress, hide: hideProgressBar }, void 0), !isPlaying ? (jsx$1(PlayContainer, __assign$1({ "data-testid": "play", onClick: handlePlayClick }, { children: isStarted && jsx$1(PlayIcon, {}, void 0) }), void 0)) : (jsx$1(PauseContainer, { "data-testid": "pause", onClick: handlePauseClick }, void 0)), hasAudioControl && (jsxs$1(MuteButton, __assign$1({ onClick: handleMuteToggle }, { children: [isMuted && jsx$1(Icon$1, { name: "custom/sound_off" }, void 0), !isMuted && jsx$1(Icon$1, { name: "custom/sound_on" }, void 0)] }), void 0)), jsxs$1(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: [jsx$1("track", { kind: "captions" }, void 0), jsx$1("source", { src: source }, void 0)] }), void 0)] }), void 0));
|
|
12066
|
+
};
|
|
12067
|
+
|
|
12004
12068
|
var propTypes = {exports: {}};
|
|
12005
12069
|
|
|
12006
12070
|
var reactIs = {exports: {}};
|
|
@@ -13592,70 +13656,6 @@ InnerImageZoom.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
13592
13656
|
afterZoomOut: PropTypes.func
|
|
13593
13657
|
} : {};
|
|
13594
13658
|
|
|
13595
|
-
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); });
|
|
13596
|
-
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; });
|
|
13597
|
-
var templateObject_1$16, templateObject_2$P;
|
|
13598
|
-
|
|
13599
|
-
var ProgressBar$1 = function (_a) {
|
|
13600
|
-
var progress = _a.progress, hide = _a.hide;
|
|
13601
|
-
return (jsx$1(ProgressContainer, __assign$1({ "data-testid": "progress-bar", hide: hide }, { children: jsx$1(ProgressFiller, { progress: progress }, void 0) }), void 0));
|
|
13602
|
-
};
|
|
13603
|
-
|
|
13604
|
-
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"])));
|
|
13605
|
-
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; });
|
|
13606
|
-
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"])));
|
|
13607
|
-
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"])));
|
|
13608
|
-
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"])));
|
|
13609
|
-
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"])));
|
|
13610
|
-
var templateObject_1$15, templateObject_2$O, templateObject_3$F, templateObject_4$u, templateObject_5$n, templateObject_6$k;
|
|
13611
|
-
|
|
13612
|
-
var Video$1 = function (_a) {
|
|
13613
|
-
var _b, _c, _d, _e;
|
|
13614
|
-
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"]);
|
|
13615
|
-
var videoRef = useRef(null);
|
|
13616
|
-
var _g = useState(true), isLoading = _g[0], setIsLoading = _g[1];
|
|
13617
|
-
var _h = useState(false), isPlaying = _h[0], setIsPlaying = _h[1];
|
|
13618
|
-
var _j = useState(muted), isMuted = _j[0], setIsMuted = _j[1];
|
|
13619
|
-
var _k = useState(0), videoProgress = _k[0], setVideoProgress = _k[1];
|
|
13620
|
-
var _l = useState(false), debouncePlay = _l[0], setDebouncePlay = _l[1];
|
|
13621
|
-
var isStarted = videoProgress > 0;
|
|
13622
|
-
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);
|
|
13623
|
-
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;
|
|
13624
|
-
var handlePlayClick = function () {
|
|
13625
|
-
if (videoRef.current && !debouncePlay) {
|
|
13626
|
-
setDebouncePlay(true);
|
|
13627
|
-
videoRef.current
|
|
13628
|
-
.play()
|
|
13629
|
-
.then(function () {
|
|
13630
|
-
setIsPlaying(true);
|
|
13631
|
-
setDebouncePlay(false);
|
|
13632
|
-
})
|
|
13633
|
-
.catch(function (error) {
|
|
13634
|
-
console.error('Error playing video:', error);
|
|
13635
|
-
setDebouncePlay(false);
|
|
13636
|
-
});
|
|
13637
|
-
}
|
|
13638
|
-
};
|
|
13639
|
-
var handlePauseClick = function () {
|
|
13640
|
-
if (videoRef.current && isPlaying) {
|
|
13641
|
-
videoRef.current.pause();
|
|
13642
|
-
setIsPlaying(false);
|
|
13643
|
-
}
|
|
13644
|
-
};
|
|
13645
|
-
var handleMuteToggle = function () {
|
|
13646
|
-
if (videoRef.current) {
|
|
13647
|
-
videoRef.current.muted = !videoRef.current.muted;
|
|
13648
|
-
setIsMuted(function (prevState) { return !prevState; });
|
|
13649
|
-
}
|
|
13650
|
-
};
|
|
13651
|
-
var onTimeUpdate = function () {
|
|
13652
|
-
if (videoRef.current) {
|
|
13653
|
-
setVideoProgress(videoRef.current.currentTime);
|
|
13654
|
-
}
|
|
13655
|
-
};
|
|
13656
|
-
return (jsxs$1(Container$P, __assign$1({ className: className }, { children: [!isLoading && withProgressBar && jsx$1(ProgressBar$1, { progress: progress, hide: hideProgressBar }, void 0), !isPlaying ? (jsx$1(PlayContainer, __assign$1({ "data-testid": "play", onClick: handlePlayClick }, { children: isStarted && jsx$1(PlayIcon, {}, void 0) }), void 0)) : (jsx$1(PauseContainer, { "data-testid": "pause", onClick: handlePauseClick }, void 0)), hasAudioControl && (jsxs$1(MuteButton, __assign$1({ onClick: handleMuteToggle }, { children: [isMuted && jsx$1(Icon$1, { name: "custom/sound_off" }, void 0), !isMuted && jsx$1(Icon$1, { name: "custom/sound_on" }, void 0)] }), void 0)), jsxs$1(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: [jsx$1("track", { kind: "captions" }, void 0), jsx$1("source", { src: source }, void 0)] }), void 0)] }), void 0));
|
|
13657
|
-
};
|
|
13658
|
-
|
|
13659
13659
|
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) {
|
|
13660
13660
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
13661
13661
|
return borderRadiusVariant && "border-radius: 40px;";
|
|
@@ -13673,17 +13673,25 @@ var BottomTagContainer$6 = newStyled.div(templateObject_3$E || (templateObject_3
|
|
|
13673
13673
|
});
|
|
13674
13674
|
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"])));
|
|
13675
13675
|
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"])));
|
|
13676
|
-
var
|
|
13676
|
+
var ImageStyled = newStyled(Image$3)(templateObject_6$k || (templateObject_6$k = __makeTemplateObject(["\n aspect-ratio: ", ";\n"], ["\n aspect-ratio: ", ";\n"])), function (_a) {
|
|
13677
|
+
var theme = _a.theme, isRatioSquare = _a.isRatioSquare;
|
|
13678
|
+
return isRatioSquare ? '1 / 1' : theme.component.gallery.aspectRatio;
|
|
13679
|
+
});
|
|
13680
|
+
var InnerImageZoomStyled = newStyled(InnerImageZoom)(templateObject_7$g || (templateObject_7$g = __makeTemplateObject(["\n aspect-ratio: ", ";\n"], ["\n aspect-ratio: ", ";\n"])), function (_a) {
|
|
13681
|
+
var theme = _a.theme, isRatioSquare = _a.isRatioSquare;
|
|
13682
|
+
return isRatioSquare ? '1 / 1' : theme.component.gallery.aspectRatio;
|
|
13683
|
+
});
|
|
13684
|
+
var templateObject_1$14, templateObject_2$N, templateObject_3$E, templateObject_4$t, templateObject_5$m, templateObject_6$k, templateObject_7$g;
|
|
13677
13685
|
|
|
13678
13686
|
var ImageProductSlide$1 = function (_a) {
|
|
13679
13687
|
var _b;
|
|
13680
|
-
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;
|
|
13688
|
+
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;
|
|
13681
13689
|
var source = content === null || content === void 0 ? void 0 : content.url;
|
|
13682
13690
|
var isVideo = (_b = content === null || content === void 0 ? void 0 : content.isVideo) !== null && _b !== void 0 ? _b : false;
|
|
13683
|
-
return (jsxs$1(Container$O, __assign$1({ "data-testid": testId, className: "stylefor".concat(position), borderRadiusVariant: borderRadiusVariant }, { children: [!isVideo && (jsxs$1(Fragment$2, { children: [withZoom ? (jsx$1(
|
|
13691
|
+
return (jsxs$1(Container$O, __assign$1({ "data-testid": testId, className: "stylefor".concat(position), borderRadiusVariant: borderRadiusVariant }, { children: [!isVideo && (jsxs$1(Fragment$2, { children: [withZoom ? (jsx$1(InnerImageZoomStyled, { src: source, zoomSrc: source, zoomType: "hover", imgAttributes: {
|
|
13684
13692
|
alt: content.alt,
|
|
13685
13693
|
style: { objectFit: 'cover', objectPosition: 'center' },
|
|
13686
|
-
}, width: position == 'horizontal' ? 360 : 530, height: position == 'horizontal' ? 480 : 720, hideHint: true }, void 0)) : (jsx$1(
|
|
13694
|
+
}, width: position == 'horizontal' ? 360 : 530, height: position == 'horizontal' ? 480 : 720, hideHint: true, isRatioSquare: isRatioSquare }, void 0)) : (jsx$1(ImageStyled, { width: position == 'horizontal' ? '360px' : '530px', height: "auto", src: source, alt: content.alt, objectFit: "cover", loading: "eager", isRatioSquare: isRatioSquare }, void 0)), jsx$1(TopTagContainer$6, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsx$1(BottomTagContainer$6, __assign$1({ isCTAHidden: hideCTA }, { children: bottomTag }), void 0), !!topRightTag && jsx$1(TopRightTagContainer$1, { children: topRightTag }, void 0)] }, void 0)), isVideo && jsx$1(Video$1, { source: source, thumbnail: content === null || content === void 0 ? void 0 : content.thumbnailUrl }, void 0), ctaText && ctaAction && (jsx$1("div", __assign$1({ style: { display: hideCTA ? 'none' : 'block' } }, { children: jsx$1(ButtonSecondaryOutlineWrapper, { wide: true, onClick: ctaAction, text: ctaText }, void 0) }), void 0))] }), void 0));
|
|
13687
13695
|
};
|
|
13688
13696
|
|
|
13689
13697
|
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"])));
|
|
@@ -13713,7 +13721,7 @@ var ProductGallery = function (_a) {
|
|
|
13713
13721
|
setActiveIndex(index);
|
|
13714
13722
|
};
|
|
13715
13723
|
var selectedImage = images[activeIndex];
|
|
13716
|
-
return (jsxs$1(Container$N, { children: [jsx$1(ImagePreviewList, { images: images, selectedImage: selectedImage, dataTestId: previewListDataTestId, onClick: onContentChange, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor, hasOverflowArrows: hasOverflowArrows, isRatioSquare: isRatioSquare }, void 0), jsx$1(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));
|
|
13724
|
+
return (jsxs$1(Container$N, { children: [jsx$1(ImagePreviewList, { images: images, selectedImage: selectedImage, dataTestId: previewListDataTestId, onClick: onContentChange, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor, hasOverflowArrows: hasOverflowArrows, isRatioSquare: isRatioSquare }, void 0), jsx$1(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));
|
|
13717
13725
|
};
|
|
13718
13726
|
|
|
13719
13727
|
var getStylesBySize$8 = function (size) {
|
|
@@ -20757,17 +20765,20 @@ var SliderThumbnail = newStyled(Slider)(templateObject_7$1 || (templateObject_7$
|
|
|
20757
20765
|
var theme = _a.theme;
|
|
20758
20766
|
return theme.colors.pallete.primary.color;
|
|
20759
20767
|
});
|
|
20760
|
-
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"])))
|
|
20768
|
+
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) {
|
|
20769
|
+
var theme = _a.theme, isRatioSquare = _a.isRatioSquare;
|
|
20770
|
+
return isRatioSquare ? '1/1' : theme.component.gallery.aspectRatio;
|
|
20771
|
+
});
|
|
20761
20772
|
var SlideItem = newStyled.div(templateObject_9$1 || (templateObject_9$1 = __makeTemplateObject(["\n padding-right: ", ";\n"], ["\n padding-right: ", ";\n"])), function (_a) {
|
|
20762
20773
|
var paddingRight = _a.paddingRight;
|
|
20763
20774
|
return paddingRight || '12px';
|
|
20764
20775
|
});
|
|
20765
|
-
var ThumbnailImage = newStyled(Image$3)(templateObject_10$1 || (templateObject_10$1 = __makeTemplateObject(["\n object-fit: cover;\n width: ", ";\n
|
|
20776
|
+
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) {
|
|
20766
20777
|
var width = _a.width, theme = _a.theme;
|
|
20767
20778
|
return width || theme.component.gallery.thumbnail.mobile.width;
|
|
20768
20779
|
}, function (_a) {
|
|
20769
|
-
var
|
|
20770
|
-
return
|
|
20780
|
+
var theme = _a.theme, isRatioSquare = _a.isRatioSquare;
|
|
20781
|
+
return isRatioSquare ? '1/1' : theme.component.gallery.aspectRatio;
|
|
20771
20782
|
}, function (_a) {
|
|
20772
20783
|
var borderRadius = _a.borderRadius;
|
|
20773
20784
|
return borderRadius || '0px';
|
|
@@ -20775,10 +20786,10 @@ var ThumbnailImage = newStyled(Image$3)(templateObject_10$1 || (templateObject_1
|
|
|
20775
20786
|
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;
|
|
20776
20787
|
|
|
20777
20788
|
var ProductGalleryMobileV4 = function (_a) {
|
|
20778
|
-
var images = _a.images, topTag = _a.topTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, imagesSliderConfig = _a.imagesSliderConfig, thumbnailSettings = _a.thumbnailSettings;
|
|
20789
|
+
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;
|
|
20779
20790
|
var colors = useTheme$1().colors;
|
|
20780
|
-
var
|
|
20781
|
-
var
|
|
20791
|
+
var _c = useState(undefined), nav1 = _c[0], setNav1 = _c[1];
|
|
20792
|
+
var _d = useState(undefined), nav2 = _d[0], setNav2 = _d[1];
|
|
20782
20793
|
var slick = useRef(null);
|
|
20783
20794
|
var thumbnailRef = useRef(null);
|
|
20784
20795
|
var sliderWrapper = useRef(null);
|
|
@@ -20792,10 +20803,10 @@ var ProductGalleryMobileV4 = function (_a) {
|
|
|
20792
20803
|
}, []);
|
|
20793
20804
|
return (jsx$1(Container$1, __assign$1({ "data-testid": "product-gallery-mobile" }, { children: jsxs$1(SliderContainer, __assign$1({ "data-testid": productImageDataTestId, ref: sliderWrapper }, { children: [jsx$1(Slider, __assign$1({}, SETTINGS, { lazyLoad: "progressive", nextArrow: jsx$1(NavButtonContainer, { children: jsx$1(Button, { children: jsx$1(Icon.Arrows.ChevronRight, { height: "21px", width: "21px", fill: colors.shades[700].color }, void 0) }, void 0) }, void 0), prevArrow: jsx$1(NavButtonContainer, { children: jsx$1(Button, { children: jsx$1(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) {
|
|
20794
20805
|
var url = _a.url, key = _a.key, alt = _a.alt;
|
|
20795
|
-
return (jsxs$1("div", { children: [jsx$1(StyledImage, { alt: alt, src: url, objectFit: "cover", width: theme.component.gallery.mainImgWidth, height: theme.component.gallery.mainImgHeight, loading: "eager" }, void 0), jsx$1(TopTagContainer, __assign$1({ "data-testid": "topTag" }, { children: topTag }), void 0), jsx$1(BottomTagContainer, __assign$1({ "data-testid": "bottomTag" }, { children: bottomTag }), void 0)] }, key));
|
|
20806
|
+
return (jsxs$1("div", { children: [jsx$1(StyledImage, { alt: alt, src: url, objectFit: "cover", width: theme.component.gallery.mainImgWidth, height: theme.component.gallery.mainImgHeight, loading: "eager", isRatioSquare: isRatioSquare }, void 0), jsx$1(TopTagContainer, __assign$1({ "data-testid": "topTag" }, { children: topTag }), void 0), jsx$1(BottomTagContainer, __assign$1({ "data-testid": "bottomTag" }, { children: bottomTag }), void 0)] }, key));
|
|
20796
20807
|
}) }), void 0), jsx$1(SliderThumbnail, __assign$1({ asNavFor: nav1, ref: function (slider) { return (thumbnailRef.current = slider); } }, (thumbnailSettings || THUMBNAIL_SETTINGS), { lazyLoad: "progressive" }, { children: images.map(function (_a) {
|
|
20797
20808
|
var url = _a.url, key = _a.key, alt = _a.alt;
|
|
20798
|
-
return (jsx$1(SlideItem, __assign$1({ paddingRight: imagesSliderConfig === null || imagesSliderConfig === void 0 ? void 0 : imagesSliderConfig.spacesBetweenImages }, { children: jsx$1(ThumbnailImage, __assign$1({ alt: "".concat(alt, "-thumbnail"), src: url }, imagesSliderConfig, { loading: "eager" }), void 0) }), key));
|
|
20809
|
+
return (jsx$1(SlideItem, __assign$1({ paddingRight: imagesSliderConfig === null || imagesSliderConfig === void 0 ? void 0 : imagesSliderConfig.spacesBetweenImages }, { children: jsx$1(ThumbnailImage, __assign$1({ alt: "".concat(alt, "-thumbnail"), src: url }, imagesSliderConfig, { loading: "eager", isRatioSquare: isRatioSquare }), void 0) }), key));
|
|
20799
20810
|
}) }), void 0)] }), void 0) }), void 0));
|
|
20800
20811
|
};
|
|
20801
20812
|
|