@trafilea/afrodita-components 6.12.0 → 6.13.0
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 +4 -2
- package/build/index.esm.js +70 -68
- package/build/index.esm.js.map +1 -1
- package/build/index.js +70 -68
- package/build/index.js.map +1 -1
- package/build/theme/thespadr.theme.js +9 -1
- package/package.json +1 -1
package/build/index.d.ts
CHANGED
|
@@ -2586,6 +2586,7 @@ interface ProductGalleryProps {
|
|
|
2586
2586
|
images: ContentType[];
|
|
2587
2587
|
selectedValue?: ContentType;
|
|
2588
2588
|
topTag?: JSX.Element;
|
|
2589
|
+
topRightTag?: JSX.Element;
|
|
2589
2590
|
bottomTag?: JSX.Element;
|
|
2590
2591
|
productImageDataTestId?: string;
|
|
2591
2592
|
previewListDataTestId?: string;
|
|
@@ -2597,7 +2598,7 @@ interface ProductGalleryProps {
|
|
|
2597
2598
|
hideCTA?: boolean;
|
|
2598
2599
|
hasOverflowArrows?: boolean;
|
|
2599
2600
|
}
|
|
2600
|
-
declare const ProductGallery: ({ images, selectedValue, topTag, bottomTag, productImageDataTestId, previewListDataTestId, thumbnailPosition, borderRadiusVariant, previewImgBorderColor, ctaText, ctaAction, hideCTA, hasOverflowArrows, }: ProductGalleryProps) => JSX.Element;
|
|
2601
|
+
declare const ProductGallery: ({ images, selectedValue, topTag, topRightTag, bottomTag, productImageDataTestId, previewListDataTestId, thumbnailPosition, borderRadiusVariant, previewImgBorderColor, ctaText, ctaAction, hideCTA, hasOverflowArrows, }: ProductGalleryProps) => JSX.Element;
|
|
2601
2602
|
|
|
2602
2603
|
interface IconButtonProps {
|
|
2603
2604
|
children: React__default.ReactNode;
|
|
@@ -2712,12 +2713,13 @@ interface ProductGalleryMobileProps$2 {
|
|
|
2712
2713
|
images: ContentType[];
|
|
2713
2714
|
customClick?: boolean;
|
|
2714
2715
|
topTag?: JSX.Element;
|
|
2716
|
+
topRightTag?: JSX.Element;
|
|
2715
2717
|
bottomTag?: JSX.Element;
|
|
2716
2718
|
productImageDataTestId?: string;
|
|
2717
2719
|
borderRadiusVariant?: boolean;
|
|
2718
2720
|
selectedValue?: ContentType;
|
|
2719
2721
|
}
|
|
2720
|
-
declare const ProductGalleryMobile: ({ images, customClick, topTag, bottomTag, productImageDataTestId, borderRadiusVariant, selectedValue, }: ProductGalleryMobileProps$2) => JSX.Element;
|
|
2722
|
+
declare const ProductGalleryMobile: ({ images, customClick, topTag, topRightTag, bottomTag, productImageDataTestId, borderRadiusVariant, selectedValue, }: ProductGalleryMobileProps$2) => JSX.Element;
|
|
2721
2723
|
|
|
2722
2724
|
interface ProductGalleryMobileProps$1 {
|
|
2723
2725
|
images: ContentType[];
|
package/build/index.esm.js
CHANGED
|
@@ -4159,8 +4159,8 @@ var TAGS = {
|
|
|
4159
4159
|
hero2: newStyled.h2(templateObject_2$1g || (templateObject_2$1g = __makeTemplateObject([""], [""]))),
|
|
4160
4160
|
hero3: newStyled.h3(templateObject_3$Z || (templateObject_3$Z = __makeTemplateObject([""], [""]))),
|
|
4161
4161
|
display1: newStyled.h1(templateObject_4$K || (templateObject_4$K = __makeTemplateObject([""], [""]))),
|
|
4162
|
-
display2: newStyled.h2(templateObject_5$
|
|
4163
|
-
display3: newStyled.h3(templateObject_6$
|
|
4162
|
+
display2: newStyled.h2(templateObject_5$w || (templateObject_5$w = __makeTemplateObject([""], [""]))),
|
|
4163
|
+
display3: newStyled.h3(templateObject_6$r || (templateObject_6$r = __makeTemplateObject([""], [""]))),
|
|
4164
4164
|
heading1: newStyled.h1(templateObject_7$i || (templateObject_7$i = __makeTemplateObject([""], [""]))),
|
|
4165
4165
|
heading2: newStyled.h2(templateObject_8$g || (templateObject_8$g = __makeTemplateObject([""], [""]))),
|
|
4166
4166
|
heading3: newStyled.h3(templateObject_9$8 || (templateObject_9$8 = __makeTemplateObject([""], [""]))),
|
|
@@ -4291,14 +4291,14 @@ var DEFAULTS = {
|
|
|
4291
4291
|
size: 'regular',
|
|
4292
4292
|
},
|
|
4293
4293
|
};
|
|
4294
|
-
var templateObject_1$1U, templateObject_2$1g, templateObject_3$Z, templateObject_4$K, templateObject_5$
|
|
4294
|
+
var templateObject_1$1U, templateObject_2$1g, templateObject_3$Z, templateObject_4$K, templateObject_5$w, templateObject_6$r, templateObject_7$i, templateObject_8$g, templateObject_9$8, templateObject_10$7, templateObject_11$5, templateObject_12$4, templateObject_13$3, templateObject_14$2, templateObject_15$2, templateObject_16$2, templateObject_17$2, templateObject_18$2, templateObject_19$2, templateObject_20$1;
|
|
4295
4295
|
|
|
4296
4296
|
var Container$1b = newStyled.div(templateObject_1$1T || (templateObject_1$1T = __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"])));
|
|
4297
4297
|
var Card$3 = newStyled.div(templateObject_2$1f || (templateObject_2$1f = __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"])));
|
|
4298
4298
|
var Tag$2 = newStyled.div(templateObject_3$Y || (templateObject_3$Y = __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"])));
|
|
4299
4299
|
var Label$5 = newStyled.div(templateObject_4$J || (templateObject_4$J = __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"])));
|
|
4300
|
-
var Check$1 = newStyled.div(templateObject_5$
|
|
4301
|
-
var DiscountContainer$1 = newStyled.div(templateObject_6$
|
|
4300
|
+
var Check$1 = newStyled.div(templateObject_5$v || (templateObject_5$v = __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"])));
|
|
4301
|
+
var DiscountContainer$1 = newStyled.div(templateObject_6$q || (templateObject_6$q = __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"])));
|
|
4302
4302
|
var PackSelectorV2 = function (_a) {
|
|
4303
4303
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange, currencyCode = _a.currencyCode;
|
|
4304
4304
|
return (jsx$1(Container$1b, __assign$1({ role: "radiogroup" }, { children: packs.map(function (pack) {
|
|
@@ -4323,7 +4323,7 @@ var PackCard$1 = function (_a) {
|
|
|
4323
4323
|
currency: currencyCode || 'USD',
|
|
4324
4324
|
}), ' ', "each", ')'] }), void 0)) : null] }, void 0)] }), void 0));
|
|
4325
4325
|
};
|
|
4326
|
-
var templateObject_1$1T, templateObject_2$1f, templateObject_3$Y, templateObject_4$J, templateObject_5$
|
|
4326
|
+
var templateObject_1$1T, templateObject_2$1f, templateObject_3$Y, templateObject_4$J, templateObject_5$v, templateObject_6$q;
|
|
4327
4327
|
|
|
4328
4328
|
var Container$1a = newStyled.div(templateObject_1$1S || (templateObject_1$1S = __makeTemplateObject(["\n height: 32px;\n display: flex;\n align-items: center;\n"], ["\n height: 32px;\n display: flex;\n align-items: center;\n"])));
|
|
4329
4329
|
var DropContainer = newStyled.div(templateObject_2$1e || (templateObject_2$1e = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
@@ -5198,14 +5198,14 @@ var TooltipText = newStyled.div(templateObject_4$H || (templateObject_4$H = __ma
|
|
|
5198
5198
|
var color = _a.color;
|
|
5199
5199
|
return color;
|
|
5200
5200
|
});
|
|
5201
|
-
var TopSection = newStyled.div(templateObject_5$
|
|
5202
|
-
var Title$7 = newStyled.h1(templateObject_6$
|
|
5201
|
+
var TopSection = newStyled.div(templateObject_5$u || (templateObject_5$u = __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"])));
|
|
5202
|
+
var Title$7 = newStyled.h1(templateObject_6$p || (templateObject_6$p = __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) {
|
|
5203
5203
|
var color = _a.color;
|
|
5204
5204
|
return color;
|
|
5205
5205
|
});
|
|
5206
5206
|
var IconContainer$5 = newStyled.div(templateObject_7$h || (templateObject_7$h = __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"])));
|
|
5207
5207
|
var CloseToolTip = newStyled.button(templateObject_8$f || (templateObject_8$f = __makeTemplateObject(["\n position: absolute;\n background: none;\n border: none;\n cursor: pointer;\n right: 0.3rem;\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: 0.3rem;\n top: 0.25rem;\n padding: 0px;\n z-index: 2;\n"])));
|
|
5208
|
-
var templateObject_1$1I, templateObject_2$18, templateObject_3$V, templateObject_4$H, templateObject_5$
|
|
5208
|
+
var templateObject_1$1I, templateObject_2$18, templateObject_3$V, templateObject_4$H, templateObject_5$u, templateObject_6$p, templateObject_7$h, templateObject_8$f;
|
|
5209
5209
|
|
|
5210
5210
|
var useOnClickOutside = function (ref, handler) {
|
|
5211
5211
|
useEffect(function () {
|
|
@@ -5727,14 +5727,14 @@ var SinglePurchaseContainer$1 = newStyled(ContainerBase$1)(templateObject_3$S ||
|
|
|
5727
5727
|
return (onClick ? 'cursor: pointer;' : '');
|
|
5728
5728
|
});
|
|
5729
5729
|
var SubscriptionContainer$1 = newStyled(ContainerBase$1)(templateObject_4$G || (templateObject_4$G = __makeTemplateObject(["\n padding: 16px;\n"], ["\n padding: 16px;\n"])));
|
|
5730
|
-
var SubscriptionHeader$1 = newStyled.div(templateObject_5$
|
|
5730
|
+
var SubscriptionHeader$1 = newStyled.div(templateObject_5$t || (templateObject_5$t = __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) {
|
|
5731
5731
|
var theme = _a.theme;
|
|
5732
5732
|
return theme.colors.shades[200].color;
|
|
5733
5733
|
}, function (_a) {
|
|
5734
5734
|
var theme = _a.theme;
|
|
5735
5735
|
return theme.colors.pallete.primary.color;
|
|
5736
5736
|
});
|
|
5737
|
-
var BenefitsContainer$1 = newStyled.div(templateObject_6$
|
|
5737
|
+
var BenefitsContainer$1 = newStyled.div(templateObject_6$o || (templateObject_6$o = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
5738
5738
|
var Benefit$1 = newStyled.div(templateObject_7$g || (templateObject_7$g = __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"])));
|
|
5739
5739
|
var BenefitText$1 = newStyled(Text$7)(templateObject_8$e || (templateObject_8$e = __makeTemplateObject(["\n line-height: 20px;\n margin-left: 9px;\n"], ["\n line-height: 20px;\n margin-left: 9px;\n"])));
|
|
5740
5740
|
var SubscriptionDetails = newStyled(Text$7)(templateObject_9$7 || (templateObject_9$7 = __makeTemplateObject(["\n font-size: 16px;\n margin-right: 7px;\n"], ["\n font-size: 16px;\n margin-right: 7px;\n"])));
|
|
@@ -5745,7 +5745,7 @@ var StyledPrice$1 = newStyled(PriceLabelV2)(templateObject_12$3 || (templateObje
|
|
|
5745
5745
|
return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
|
|
5746
5746
|
});
|
|
5747
5747
|
var Container$11 = newStyled.div(templateObject_13$2 || (templateObject_13$2 = __makeTemplateObject([""], [""])));
|
|
5748
|
-
var templateObject_1$1C, templateObject_2$13, templateObject_3$S, templateObject_4$G, templateObject_5$
|
|
5748
|
+
var templateObject_1$1C, templateObject_2$13, templateObject_3$S, templateObject_4$G, templateObject_5$t, templateObject_6$o, templateObject_7$g, templateObject_8$e, templateObject_9$7, templateObject_10$6, templateObject_11$4, templateObject_12$3, templateObject_13$2;
|
|
5749
5749
|
|
|
5750
5750
|
var radioIds$1 = {
|
|
5751
5751
|
oneTime: {
|
|
@@ -5820,8 +5820,8 @@ var SinglePurchaseContainer = newStyled(ContainerBase)(templateObject_4$F || (te
|
|
|
5820
5820
|
var onClick = _a.onClick;
|
|
5821
5821
|
return (onClick ? 'cursor: pointer;' : '');
|
|
5822
5822
|
});
|
|
5823
|
-
var SubscriptionContainer = newStyled(ContainerBase)(templateObject_5$
|
|
5824
|
-
var SubscriptionHeader = newStyled.div(templateObject_6$
|
|
5823
|
+
var SubscriptionContainer = newStyled(ContainerBase)(templateObject_5$s || (templateObject_5$s = __makeTemplateObject(["\n padding: 16px;\n margin-bottom: 8px;\n position: relative;\n"], ["\n padding: 16px;\n margin-bottom: 8px;\n position: relative;\n"])));
|
|
5824
|
+
var SubscriptionHeader = newStyled.div(templateObject_6$n || (templateObject_6$n = __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) {
|
|
5825
5825
|
var theme = _a.theme;
|
|
5826
5826
|
return theme.colors.shades[200].color;
|
|
5827
5827
|
}, function (_a) {
|
|
@@ -5837,7 +5837,7 @@ var StyledPrice = newStyled(PriceLabelV2)(templateObject_11$3 || (templateObject
|
|
|
5837
5837
|
return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
|
|
5838
5838
|
});
|
|
5839
5839
|
var Container$10 = newStyled.div(templateObject_12$2 || (templateObject_12$2 = __makeTemplateObject(["\n margin-top: 20px;\n"], ["\n margin-top: 20px;\n"])));
|
|
5840
|
-
var templateObject_1$1B, templateObject_2$12, templateObject_3$R, templateObject_4$F, templateObject_5$
|
|
5840
|
+
var templateObject_1$1B, templateObject_2$12, templateObject_3$R, templateObject_4$F, templateObject_5$s, templateObject_6$n, templateObject_7$f, templateObject_8$d, templateObject_9$6, templateObject_10$5, templateObject_11$3, templateObject_12$2;
|
|
5841
5841
|
|
|
5842
5842
|
var radioIds = {
|
|
5843
5843
|
oneTime: {
|
|
@@ -5922,9 +5922,9 @@ var CustomerDetails = newStyled.div(templateObject_1$1A || (templateObject_1$1A
|
|
|
5922
5922
|
var CustomerInfo = newStyled.div(templateObject_2$11 || (templateObject_2$11 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n"], ["\n display: flex;\n justify-content: space-between;\n align-items: center;\n"])));
|
|
5923
5923
|
var Name = newStyled.h4(templateObject_3$Q || (templateObject_3$Q = __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"])));
|
|
5924
5924
|
var StarIconContainer = newStyled.div(templateObject_4$E || (templateObject_4$E = __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"])));
|
|
5925
|
-
var Description$2 = newStyled.p(templateObject_5$
|
|
5926
|
-
var ReviewDays = newStyled.span(templateObject_6$
|
|
5927
|
-
var templateObject_1$1A, templateObject_2$11, templateObject_3$Q, templateObject_4$E, templateObject_5$
|
|
5925
|
+
var Description$2 = newStyled.p(templateObject_5$r || (templateObject_5$r = __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"])));
|
|
5926
|
+
var ReviewDays = newStyled.span(templateObject_6$m || (templateObject_6$m = __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"])));
|
|
5927
|
+
var templateObject_1$1A, templateObject_2$11, templateObject_3$Q, templateObject_4$E, templateObject_5$r, templateObject_6$m;
|
|
5928
5928
|
|
|
5929
5929
|
var NameWithStars = function (_a) {
|
|
5930
5930
|
var name = _a.name, size = _a.size;
|
|
@@ -6188,8 +6188,8 @@ var Container$W = newStyled.div(templateObject_1$1n || (templateObject_1$1n = __
|
|
|
6188
6188
|
var MobileContainer = newStyled(Container$W)(templateObject_2$Y || (templateObject_2$Y = __makeTemplateObject(["\n padding: 2px 2px;\n gap: 3px;\n"], ["\n padding: 2px 2px;\n gap: 3px;\n"])));
|
|
6189
6189
|
var DollarPart = newStyled.span(templateObject_3$L || (templateObject_3$L = __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"])));
|
|
6190
6190
|
var ClubMembersText = newStyled.span(templateObject_4$A || (templateObject_4$A = __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"])));
|
|
6191
|
-
var MobileDollarPart = newStyled(DollarPart)(templateObject_5$
|
|
6192
|
-
var MobileClubMembersText = newStyled(ClubMembersText)(templateObject_6$
|
|
6191
|
+
var MobileDollarPart = newStyled(DollarPart)(templateObject_5$q || (templateObject_5$q = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
6192
|
+
var MobileClubMembersText = newStyled(ClubMembersText)(templateObject_6$l || (templateObject_6$l = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
6193
6193
|
var DesktopDollarPart = newStyled(DollarPart)(templateObject_7$e || (templateObject_7$e = __makeTemplateObject(["\n font-size: 13px;\n"], ["\n font-size: 13px;\n"])));
|
|
6194
6194
|
var DesktopClubMembersText = newStyled(ClubMembersText)(templateObject_8$c || (templateObject_8$c = __makeTemplateObject(["\n font-size: 13px;\n"], ["\n font-size: 13px;\n"])));
|
|
6195
6195
|
var ClubPriceLabel = function (_a) {
|
|
@@ -6197,7 +6197,7 @@ var ClubPriceLabel = function (_a) {
|
|
|
6197
6197
|
var isMobile = useWindowDimensions().isMobile;
|
|
6198
6198
|
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$W, { children: [jsx$1(DesktopDollarPart, { children: clubPrice }, void 0), jsx$1(DesktopClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) }, void 0));
|
|
6199
6199
|
};
|
|
6200
|
-
var templateObject_1$1n, templateObject_2$Y, templateObject_3$L, templateObject_4$A, templateObject_5$
|
|
6200
|
+
var templateObject_1$1n, templateObject_2$Y, templateObject_3$L, templateObject_4$A, templateObject_5$q, templateObject_6$l, templateObject_7$e, templateObject_8$c;
|
|
6201
6201
|
|
|
6202
6202
|
var Spacing = function (_a) {
|
|
6203
6203
|
var size = _a.size, _b = _a.type, type = _b === void 0 ? 'block' : _b, children = _a.children, styleProp = _a.style;
|
|
@@ -6225,7 +6225,7 @@ var RegularPriceTagSpan = newStyled.span(templateObject_1$1l || (templateObject_
|
|
|
6225
6225
|
var ClubPriceTagSpan = newStyled.span(templateObject_2$W || (templateObject_2$W = __makeTemplateObject(["\n background-color: #c64844;\n padding: 3px 4px;\n border-radius: 4px;\n gap: 10px;\n align-items: center;\n justify-content: center;\n color: white;\n font-weight: 600;\n font-size: 0.6rem;\n line-height: 1rem;\n text-align: center;\n margin-bottom: 0.5rem;\n"], ["\n background-color: #c64844;\n padding: 3px 4px;\n border-radius: 4px;\n gap: 10px;\n align-items: center;\n justify-content: center;\n color: white;\n font-weight: 600;\n font-size: 0.6rem;\n line-height: 1rem;\n text-align: center;\n margin-bottom: 0.5rem;\n"])));
|
|
6226
6226
|
var PriceContainer$1 = newStyled.span(templateObject_3$J || (templateObject_3$J = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
6227
6227
|
var PriceContainerV2 = newStyled.span(templateObject_4$y || (templateObject_4$y = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
6228
|
-
var PriceWithTagContainer = newStyled.span(templateObject_5$
|
|
6228
|
+
var PriceWithTagContainer = newStyled.span(templateObject_5$p || (templateObject_5$p = __makeTemplateObject(["\n display: flex;\n gap: 8px;\n"], ["\n display: flex;\n gap: 8px;\n"])));
|
|
6229
6229
|
var RegularPriceTag = function () {
|
|
6230
6230
|
return jsx$1(RegularPriceTagSpan, { children: "REGULAR PRICE" }, void 0);
|
|
6231
6231
|
};
|
|
@@ -6278,7 +6278,7 @@ var PriceLabelV4 = function (_a) {
|
|
|
6278
6278
|
? finalPriceArray[0]
|
|
6279
6279
|
: (_b = "".concat(productFinalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1], "."] }), void 0), jsx$1(Price, __assign$1({ finalPriceStyledSmall: true, style: { marginTop: '-6px', color: '#c64844' } }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }, void 0), jsx$1(ClubPriceTag, {}, void 0)] }, void 0)] }, void 0)), discount && (jsx$1(TagContainer, __assign$1({ size: size }, { children: jsx$1(DiscountTag$1, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
|
|
6280
6280
|
};
|
|
6281
|
-
var templateObject_1$1l, templateObject_2$W, templateObject_3$J, templateObject_4$y, templateObject_5$
|
|
6281
|
+
var templateObject_1$1l, templateObject_2$W, templateObject_3$J, templateObject_4$y, templateObject_5$p;
|
|
6282
6282
|
|
|
6283
6283
|
var Container$U = newStyled.div(templateObject_1$1k || (templateObject_1$1k = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
6284
6284
|
var templateObject_1$1k;
|
|
@@ -6423,11 +6423,11 @@ var getStylesBySize$9 = function (size) {
|
|
|
6423
6423
|
};
|
|
6424
6424
|
}
|
|
6425
6425
|
};
|
|
6426
|
-
var TopTagContainer$5 = newStyled.div(templateObject_5$
|
|
6426
|
+
var TopTagContainer$5 = newStyled.div(templateObject_5$o || (templateObject_5$o = __makeTemplateObject(["\n position: absolute;\n left: 0;\n top: 0;\n width: ", ";\n z-index: 1;\n"], ["\n position: absolute;\n left: 0;\n top: 0;\n width: ", ";\n z-index: 1;\n"])), function (_a) {
|
|
6427
6427
|
var style = _a.style;
|
|
6428
6428
|
return style.width;
|
|
6429
6429
|
});
|
|
6430
|
-
var BottomTagContainer$5 = newStyled.div(templateObject_6$
|
|
6430
|
+
var BottomTagContainer$5 = newStyled.div(templateObject_6$k || (templateObject_6$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) {
|
|
6431
6431
|
var style = _a.style;
|
|
6432
6432
|
return style.width;
|
|
6433
6433
|
});
|
|
@@ -6490,7 +6490,7 @@ var ProductItemMobile = function (_a) {
|
|
|
6490
6490
|
};
|
|
6491
6491
|
return (jsxs(ProdCardContainer$1, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$S, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', className: "picContainer", onClick: onClick }, { children: [!!topTag || !!bottomTag ? (jsxs(ImageContainer$4, __assign$1({ width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height, "data-testid": "tags-image-container" }, { children: [jsx(Image$3, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, width: "100%", height: "100%" }, void 0), jsx(TopTagContainer$5, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: topTag }), void 0), jsx(BottomTagContainer$5, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: bottomTag }), void 0)] }), void 0)) : (jsx(Image$3, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)), imageHover ? (jsx(ImageHoverContainer$1, { className: "hover__image", src: imageHover.src, srcSet: getSrcSet(imageHover.src, 180, 360, 720, 960), loading: "lazy", alt: imageHover.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)) : null] }), void 0), colorPicker.display && colorPicker.position === 'top' && (jsxs(Fragment, { children: [jsx(Spacing, { size: space }, void 0), colorPicker.component] }, void 0)), jsxs(Container$S, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', onClick: onClick, className: "textContainer", style: { alignItems: showClubPriceLabel ? 'flex-start' : 'center' } }, { children: [jsx(Spacing, { size: space }, void 0), jsx(Title$4, __assign$1({ theme: theme, align: showClubPriceLabel ? 'left' : alignName }, { children: title }), void 0), jsx(Spacing, { size: space }, void 0), hasStrength && 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: [jsx(RatingDisplay, {}, void 0), jsx(Spacing, { size: space }, void 0), jsx(MarginTopContainer$1, { children: priceLoading ? jsx(SkeletonBox, { height: "20px", width: "140px" }, void 0) : PriceLabelDisplay() }, void 0)] }, void 0)) : (jsxs(Fragment, { children: [priceLoading ? (jsx(SkeletonBox, { height: "20px", width: "140px" }, void 0)) : (jsxs(Fragment, { children: [PriceLabelDisplay(), 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), 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));
|
|
6492
6492
|
};
|
|
6493
|
-
var templateObject_1$1g, templateObject_2$V, templateObject_3$I, templateObject_4$x, templateObject_5$
|
|
6493
|
+
var templateObject_1$1g, templateObject_2$V, templateObject_3$I, templateObject_4$x, templateObject_5$o, templateObject_6$k, templateObject_7$d;
|
|
6494
6494
|
|
|
6495
6495
|
var ImageContainer$3 = newStyled.div(function (_a) {
|
|
6496
6496
|
var width = _a.width, height = _a.height;
|
|
@@ -6529,11 +6529,11 @@ var getStylesBySize$8 = function (size) {
|
|
|
6529
6529
|
};
|
|
6530
6530
|
}
|
|
6531
6531
|
};
|
|
6532
|
-
var TopTagContainer$4 = newStyled.div(templateObject_5$
|
|
6532
|
+
var TopTagContainer$4 = newStyled.div(templateObject_5$n || (templateObject_5$n = __makeTemplateObject(["\n position: absolute;\n left: 0;\n top: 0;\n width: ", ";\n z-index: 1;\n"], ["\n position: absolute;\n left: 0;\n top: 0;\n width: ", ";\n z-index: 1;\n"])), function (_a) {
|
|
6533
6533
|
var style = _a.style;
|
|
6534
6534
|
return style.width;
|
|
6535
6535
|
});
|
|
6536
|
-
var TopRightTagContainer = newStyled.div(templateObject_6$
|
|
6536
|
+
var TopRightTagContainer$2 = newStyled.div(templateObject_6$j || (templateObject_6$j = __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"])));
|
|
6537
6537
|
var BottomTagContainer$4 = newStyled.div(templateObject_7$c || (templateObject_7$c = __makeTemplateObject(["\n position: absolute;\n bottom: 10%;\n left: 0;\n width: ", ";\n z-index: 1;\n"], ["\n position: absolute;\n bottom: 10%;\n left: 0;\n width: ", ";\n z-index: 1;\n"])), function (_a) {
|
|
6538
6538
|
var style = _a.style;
|
|
6539
6539
|
return style.width;
|
|
@@ -6582,14 +6582,14 @@ var ProductItemTK = function (_a) {
|
|
|
6582
6582
|
: undefined }, void 0));
|
|
6583
6583
|
};
|
|
6584
6584
|
var RatingDisplay = function () { return (jsx(Rating, { size: size === ComponentSize.Large ? ComponentSize.Small : ComponentSize.XSmall, rating: rating.rating, reviews: rating.reviews, reviewsText: "", wrapWithParenthesis: true }, void 0)); };
|
|
6585
|
-
return (jsxs(ProdCardContainer, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$R, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', className: "picContainer", onClick: onClick }, { children: [!!topTag || !!bottomTag || !!topRightTag ? (jsxs(ImageContainer$3, __assign$1({ width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height, "data-testid": "tags-image-container" }, { children: [jsx(Image$3, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, borderRadius: ImageBorderRadius, width: "100%", height: "100%" }, void 0), jsx(TopTagContainer$4, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: topTag }), void 0), jsx(BottomTagContainer$4, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: bottomTag }), void 0), !!topRightTag && jsx(TopRightTagContainer, { children: topRightTag }, void 0)] }), void 0)) : (jsx(Image$3, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, borderRadius: ImageBorderRadius, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)), imageHover ? (jsx(ImageHoverContainer, { className: "hover__image", src: imageHover.src, srcSet: getSrcSet(imageHover.src, 180, 360, 720, 960), loading: "lazy", alt: imageHover.alt, borderRadius: ImageBorderRadius, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)) : null] }), void 0), colorPicker.display && colorPicker.position === 'top' && (jsxs(Fragment, { children: [hasSpacing && jsx(Spacing, { size: space }, void 0), colorPicker.component] }, void 0)), jsxs(Container$R, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', onClick: onClick, className: "textContainer", style: { alignItems: showClubPriceLabel ? 'flex-start' : 'center', gap: textContainerGap } }, { children: [hasSpacing && jsx(Spacing, { size: space }, void 0), titleStyle ? (
|
|
6585
|
+
return (jsxs(ProdCardContainer, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$R, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', className: "picContainer", onClick: onClick }, { children: [!!topTag || !!bottomTag || !!topRightTag ? (jsxs(ImageContainer$3, __assign$1({ width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height, "data-testid": "tags-image-container" }, { children: [jsx(Image$3, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, borderRadius: ImageBorderRadius, width: "100%", height: "100%" }, void 0), jsx(TopTagContainer$4, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: topTag }), void 0), jsx(BottomTagContainer$4, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: bottomTag }), void 0), !!topRightTag && jsx(TopRightTagContainer$2, { children: topRightTag }, void 0)] }), void 0)) : (jsx(Image$3, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, borderRadius: ImageBorderRadius, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)), imageHover ? (jsx(ImageHoverContainer, { className: "hover__image", src: imageHover.src, srcSet: getSrcSet(imageHover.src, 180, 360, 720, 960), loading: "lazy", alt: imageHover.alt, borderRadius: ImageBorderRadius, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)) : null] }), void 0), colorPicker.display && colorPicker.position === 'top' && (jsxs(Fragment, { children: [hasSpacing && jsx(Spacing, { size: space }, void 0), colorPicker.component] }, void 0)), jsxs(Container$R, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', onClick: onClick, className: "textContainer", style: { alignItems: showClubPriceLabel ? 'flex-start' : 'center', gap: textContainerGap } }, { children: [hasSpacing && jsx(Spacing, { size: space }, void 0), titleStyle ? (
|
|
6586
6586
|
// @ts-ignore
|
|
6587
6587
|
jsx(Text$7, __assign$1({ variant: titleStyle.variant, weight: titleStyle.weight, size: titleStyle.size, style: {
|
|
6588
6588
|
textAlign: showClubPriceLabel ? 'left' : alignName,
|
|
6589
6589
|
marginTop: hasSpacing ? undefined : textContainerGap,
|
|
6590
6590
|
} }, { children: title }), void 0)) : (jsx(Title$3, __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));
|
|
6591
6591
|
};
|
|
6592
|
-
var templateObject_1$1f, templateObject_2$U, templateObject_3$H, templateObject_4$w, templateObject_5$
|
|
6592
|
+
var templateObject_1$1f, templateObject_2$U, templateObject_3$H, templateObject_4$w, templateObject_5$n, templateObject_6$j, templateObject_7$c, templateObject_8$b;
|
|
6593
6593
|
|
|
6594
6594
|
var Container$Q = newStyled.div(templateObject_1$1e || (templateObject_1$1e = __makeTemplateObject(["\n display: flex;\n row-gap: 1.875rem;\n column-gap: 1.875rem;\n flex-wrap: wrap;\n"], ["\n display: flex;\n row-gap: 1.875rem;\n column-gap: 1.875rem;\n flex-wrap: wrap;\n"])));
|
|
6595
6595
|
function withProductGrid(ProductItemComponent, data) {
|
|
@@ -6652,7 +6652,7 @@ var CustomRadioGroup = newStyled(lt)(templateObject_1$1d || (templateObject_1$1d
|
|
|
6652
6652
|
newStyled(lt.Label)(templateObject_2$T || (templateObject_2$T = __makeTemplateObject(["\n font-size: 0.88rem;\n"], ["\n font-size: 0.88rem;\n"])));
|
|
6653
6653
|
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$G || (templateObject_3$G = __makeTemplateObject(["\n margin-right: 8px;\n\n svg {\n cursor: pointer;\n }\n"], ["\n margin-right: 8px;\n\n svg {\n cursor: pointer;\n }\n"])));
|
|
6654
6654
|
var Span = newStyled.span(templateObject_4$v || (templateObject_4$v = __makeTemplateObject(["\n font-weight: 600;\n"], ["\n font-weight: 600;\n"])));
|
|
6655
|
-
var OptionsContainer = newStyled.div(templateObject_5$
|
|
6655
|
+
var OptionsContainer = newStyled.div(templateObject_5$m || (templateObject_5$m = __makeTemplateObject(["\n display: flex;\n margin-top: 0.63rem;\n flex-wrap: wrap;\n"], ["\n display: flex;\n margin-top: 0.63rem;\n flex-wrap: wrap;\n"])));
|
|
6656
6656
|
var Label$3 = function (_a) {
|
|
6657
6657
|
var label = _a.label, values = _a.values;
|
|
6658
6658
|
return (jsxs$1(Text$7, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [label, " ", jsx$1(Span, { children: values }, void 0)] }), void 0));
|
|
@@ -6670,7 +6670,7 @@ var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
|
|
|
6670
6670
|
Option: Option,
|
|
6671
6671
|
OptionsContainer: OptionsContainer,
|
|
6672
6672
|
});
|
|
6673
|
-
var templateObject_1$1d, templateObject_2$T, templateObject_3$G, templateObject_4$v, templateObject_5$
|
|
6673
|
+
var templateObject_1$1d, templateObject_2$T, templateObject_3$G, templateObject_4$v, templateObject_5$m;
|
|
6674
6674
|
|
|
6675
6675
|
var Container$P = newStyled.div(templateObject_1$1c || (templateObject_1$1c = __makeTemplateObject(["\n width: 2rem;\n height: 2rem;\n border-radius: 50%;\n border: 0.081rem solid ", ";\n box-sizing: border-box;\n padding: 0.156rem;\n cursor: pointer;\n opacity: ", ";\n"], ["\n width: 2rem;\n height: 2rem;\n border-radius: 50%;\n border: 0.081rem solid ", ";\n box-sizing: border-box;\n padding: 0.156rem;\n cursor: pointer;\n opacity: ", ";\n"])), function (_a) {
|
|
6676
6676
|
var borderColor = _a.borderColor;
|
|
@@ -6752,14 +6752,14 @@ var Row$2 = newStyled.div(templateObject_3$F || (templateObject_3$F = __makeTemp
|
|
|
6752
6752
|
"\n flex-direction: row-reverse;\n justify-content: space-between;\n ";
|
|
6753
6753
|
});
|
|
6754
6754
|
var H5 = newStyled.h5(templateObject_4$u || (templateObject_4$u = __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; });
|
|
6755
|
-
var H3$1 = newStyled.h3(templateObject_5$
|
|
6756
|
-
var FreeShipping = newStyled.span(templateObject_6$
|
|
6755
|
+
var H3$1 = newStyled.h3(templateObject_5$l || (templateObject_5$l = __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; });
|
|
6756
|
+
var FreeShipping = newStyled.span(templateObject_6$i || (templateObject_6$i = __makeTemplateObject(["\n font-weight: 600;\n color: ", ";\n"], ["\n font-weight: 600;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
6757
6757
|
var CrossSellCheckbox = function (_a) {
|
|
6758
6758
|
var imageURL = _a.imageURL, title = _a.title, description = _a.description, freeShippingText = _a.freeShippingText, rightToLeft = _a.rightToLeft, onChange = _a.onChange;
|
|
6759
6759
|
var theme = useTheme();
|
|
6760
6760
|
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));
|
|
6761
6761
|
};
|
|
6762
|
-
var templateObject_1$1b, templateObject_2$R, templateObject_3$F, templateObject_4$u, templateObject_5$
|
|
6762
|
+
var templateObject_1$1b, templateObject_2$R, templateObject_3$F, templateObject_4$u, templateObject_5$l, templateObject_6$i;
|
|
6763
6763
|
|
|
6764
6764
|
var index$1 = /*#__PURE__*/Object.freeze({
|
|
6765
6765
|
__proto__: null,
|
|
@@ -6903,12 +6903,12 @@ var Col = newStyled.div(templateObject_4$s || (templateObject_4$s = __makeTempla
|
|
|
6903
6903
|
textAlign: ['center', 'inherit'],
|
|
6904
6904
|
width: ['100%', 'inherit'],
|
|
6905
6905
|
}));
|
|
6906
|
-
var IconContainer$3 = newStyled.div(templateObject_5$
|
|
6906
|
+
var IconContainer$3 = newStyled.div(templateObject_5$k || (templateObject_5$k = __makeTemplateObject(["\n width: 1.5rem;\n height: 1.5rem;\n ", "\n"], ["\n width: 1.5rem;\n height: 1.5rem;\n ", "\n"])), mediaQueries({
|
|
6907
6907
|
marginRight: ['0', '0.438rem'],
|
|
6908
6908
|
marginBottom: ['10px', '0'],
|
|
6909
6909
|
width: ['auto', '1.5rem'],
|
|
6910
6910
|
}));
|
|
6911
|
-
var SectionTitle = newStyled.h1(templateObject_6$
|
|
6911
|
+
var SectionTitle = newStyled.h1(templateObject_6$h || (templateObject_6$h = __makeTemplateObject(["\n ", "\n ", "\n margin: 0;\n text-transform: uppercase;\n"], ["\n ", "\n ", "\n margin: 0;\n text-transform: uppercase;\n"])), mediaQueries({
|
|
6912
6912
|
display: ['block', 'flex'],
|
|
6913
6913
|
}), function (_a) {
|
|
6914
6914
|
var theme = _a.theme;
|
|
@@ -6931,7 +6931,7 @@ var DeliveryDetails = function (_a) {
|
|
|
6931
6931
|
var theme = useTheme();
|
|
6932
6932
|
return (jsxs$1("div", __assign$1({ "data-testid": "DeliveryDetails" }, { children: [jsx$1(Title$2, __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));
|
|
6933
6933
|
};
|
|
6934
|
-
var templateObject_1$18, templateObject_2$O, templateObject_3$D, templateObject_4$s, templateObject_5$
|
|
6934
|
+
var templateObject_1$18, templateObject_2$O, templateObject_3$D, templateObject_4$s, templateObject_5$k, templateObject_6$h, templateObject_7$b, templateObject_8$a;
|
|
6935
6935
|
|
|
6936
6936
|
var Backdrop = newStyled.div(templateObject_1$17 || (templateObject_1$17 = __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) {
|
|
6937
6937
|
var top = _a.top;
|
|
@@ -6998,9 +6998,9 @@ var List = newStyled.ul(templateObject_1$16 || (templateObject_1$16 = __makeTemp
|
|
|
6998
6998
|
var Item$2 = newStyled.li(templateObject_2$M || (templateObject_2$M = __makeTemplateObject(["\n width: 1.25rem;\n list-style: none;\n margin-right: 1.5rem;\n position: relative;\n line-height: 0;\n\n &:last-child {\n margin-right: 0;\n }\n\n &:hover {\n .dropdownWrapper {\n visibility: visible;\n }\n }\n"], ["\n width: 1.25rem;\n list-style: none;\n margin-right: 1.5rem;\n position: relative;\n line-height: 0;\n\n &:last-child {\n margin-right: 0;\n }\n\n &:hover {\n .dropdownWrapper {\n visibility: visible;\n }\n }\n"])));
|
|
6999
6999
|
var DropdownWrapper = newStyled.div(templateObject_3$C || (templateObject_3$C = __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"])));
|
|
7000
7000
|
var ArrowContainer$1 = newStyled.div(templateObject_4$r || (templateObject_4$r = __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"])));
|
|
7001
|
-
var StyledDropdown = newStyled.ul(templateObject_5$
|
|
7002
|
-
var DropdownItem = newStyled.li(templateObject_6$
|
|
7003
|
-
var templateObject_1$16, templateObject_2$M, templateObject_3$C, templateObject_4$r, templateObject_5$
|
|
7001
|
+
var StyledDropdown = newStyled.ul(templateObject_5$j || (templateObject_5$j = __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; });
|
|
7002
|
+
var DropdownItem = newStyled.li(templateObject_6$g || (templateObject_6$g = __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; });
|
|
7003
|
+
var templateObject_1$16, templateObject_2$M, templateObject_3$C, templateObject_4$r, templateObject_5$j, templateObject_6$g;
|
|
7004
7004
|
|
|
7005
7005
|
var DropdownListIcons = function (_a) {
|
|
7006
7006
|
var items = _a.items;
|
|
@@ -7017,9 +7017,9 @@ var DropdownContainer = newStyled.div(templateObject_1$15 || (templateObject_1$1
|
|
|
7017
7017
|
var DropdownLabel = newStyled.div(templateObject_2$L || (templateObject_2$L = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n background: #fff;\n border: 1px solid #bbb;\n border-radius: 8px;\n padding: 8px 12px 8px 16px;\n cursor: pointer;\n gap: 16px;\n font-weight: 600;\n color: var(--colors-pallete-secondary-color);\n max-width: 337px;\n height: 36px;\n\n @media (max-width: 767px) {\n max-width: 100%;\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n background: #fff;\n border: 1px solid #bbb;\n border-radius: 8px;\n padding: 8px 12px 8px 16px;\n cursor: pointer;\n gap: 16px;\n font-weight: 600;\n color: var(--colors-pallete-secondary-color);\n max-width: 337px;\n height: 36px;\n\n @media (max-width: 767px) {\n max-width: 100%;\n }\n"])));
|
|
7018
7018
|
var SizeLabel = newStyled.span(templateObject_3$B || (templateObject_3$B = __makeTemplateObject(["\n margin-right: 8px;\n"], ["\n margin-right: 8px;\n"])));
|
|
7019
7019
|
var DetailLabel = newStyled.span(templateObject_4$q || (templateObject_4$q = __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"])));
|
|
7020
|
-
var DropdownOptions = newStyled.div(templateObject_5$
|
|
7021
|
-
var DropdownOption = newStyled.div(templateObject_6$
|
|
7022
|
-
var templateObject_1$15, templateObject_2$L, templateObject_3$B, templateObject_4$q, templateObject_5$
|
|
7020
|
+
var DropdownOptions = newStyled.div(templateObject_5$i || (templateObject_5$i = __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"])));
|
|
7021
|
+
var DropdownOption = newStyled.div(templateObject_6$f || (templateObject_6$f = __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"])));
|
|
7022
|
+
var templateObject_1$15, templateObject_2$L, templateObject_3$B, templateObject_4$q, templateObject_5$i, templateObject_6$f;
|
|
7023
7023
|
|
|
7024
7024
|
var SizeDropdown = function (_a) {
|
|
7025
7025
|
var options = _a.options, defaultLabel = _a.defaultLabel, onOptionSelect = _a.onOptionSelect;
|
|
@@ -7103,13 +7103,13 @@ var SectionContent = newStyled.div(templateObject_1$12 || (templateObject_1$12 =
|
|
|
7103
7103
|
var Header$1 = newStyled.div(templateObject_2$I || (templateObject_2$I = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 1.063rem;\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 1.063rem;\n"])));
|
|
7104
7104
|
var MobileHeader = newStyled.div(templateObject_3$y || (templateObject_3$y = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 2.25rem;\n margin-top: 1.063rem;\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 2.25rem;\n margin-top: 1.063rem;\n"])));
|
|
7105
7105
|
var MobileIconsContainer = newStyled.div(templateObject_4$n || (templateObject_4$n = __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"])));
|
|
7106
|
-
var H4 = newStyled.h4(templateObject_5$
|
|
7107
|
-
var FilterLink = newStyled.a(templateObject_6$
|
|
7106
|
+
var H4 = newStyled.h4(templateObject_5$h || (templateObject_5$h = __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; });
|
|
7107
|
+
var FilterLink = newStyled.a(templateObject_6$e || (templateObject_6$e = __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; });
|
|
7108
7108
|
var OptionContainer = newStyled.div(templateObject_7$a || (templateObject_7$a = __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'); });
|
|
7109
7109
|
var ClearAll = newStyled.span(templateObject_8$9 || (templateObject_8$9 = __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; });
|
|
7110
7110
|
var MobileFooter = newStyled.div(templateObject_9$5 || (templateObject_9$5 = __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"])));
|
|
7111
7111
|
var MobileClearContainer = newStyled.div(templateObject_10$4 || (templateObject_10$4 = __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"])));
|
|
7112
|
-
var templateObject_1$12, templateObject_2$I, templateObject_3$y, templateObject_4$n, templateObject_5$
|
|
7112
|
+
var templateObject_1$12, templateObject_2$I, templateObject_3$y, templateObject_4$n, templateObject_5$h, templateObject_6$e, templateObject_7$a, templateObject_8$9, templateObject_9$5, templateObject_10$4;
|
|
7113
7113
|
|
|
7114
7114
|
var getStylesBySize$7 = function (size, theme) {
|
|
7115
7115
|
switch (size) {
|
|
@@ -11695,8 +11695,8 @@ var Container$K = newStyled.div(templateObject_3$w || (templateObject_3$w = __ma
|
|
|
11695
11695
|
"\n scroll-behavior: smooth;\n &::-webkit-scrollbar {\n visibility: hidden;\n }\n ";
|
|
11696
11696
|
});
|
|
11697
11697
|
var Button$5 = newStyled.button(templateObject_4$m || (templateObject_4$m = __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"])));
|
|
11698
|
-
var ArrowsContainer = newStyled.div(templateObject_5$
|
|
11699
|
-
var ArrowBaseStyles = newStyled.div(templateObject_6$
|
|
11698
|
+
var ArrowsContainer = newStyled.div(templateObject_5$g || (templateObject_5$g = __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"])));
|
|
11699
|
+
var ArrowBaseStyles = newStyled.div(templateObject_6$d || (templateObject_6$d = __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"])));
|
|
11700
11700
|
var ArrowPrev = newStyled(ArrowBaseStyles)(templateObject_7$9 || (templateObject_7$9 = __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"])));
|
|
11701
11701
|
var ArrowNext = newStyled(ArrowBaseStyles)(templateObject_8$8 || (templateObject_8$8 = __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"])));
|
|
11702
11702
|
var ImagePreviewList = function (_a) {
|
|
@@ -11715,7 +11715,7 @@ var ImagePreviewList = function (_a) {
|
|
|
11715
11715
|
arrowPadding: 1.625,
|
|
11716
11716
|
}, adaptiveHeight: true, dots: false, slidesToShow: 4 }, { children: images.map(function (item) { return (jsx$1(Button$5, __assign$1({ onClick: function () { return onClick(item); } }, { 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 }, void 0) }), item.key)); }) }), void 0) }), void 0)) : (images.map(function (item) { return (jsx$1(Button$5, __assign$1({ onClick: function () { return onClick(item); } }, { 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 }, void 0) }), item.key)); })) }), void 0), hasOverflowArrows && (jsxs$1(ArrowsContainer, { children: [jsx$1(ArrowPrev, { onClick: handleScrollVerticalPrev }, void 0), jsx$1(ArrowNext, { onClick: handleScrollVerticalNext }, void 0)] }, void 0))] }, void 0));
|
|
11717
11717
|
};
|
|
11718
|
-
var templateObject_1$Y, templateObject_2$E, templateObject_3$w, templateObject_4$m, templateObject_5$
|
|
11718
|
+
var templateObject_1$Y, templateObject_2$E, templateObject_3$w, templateObject_4$m, templateObject_5$g, templateObject_6$d, templateObject_7$9, templateObject_8$8;
|
|
11719
11719
|
|
|
11720
11720
|
var propTypes = {exports: {}};
|
|
11721
11721
|
|
|
@@ -13321,8 +13321,8 @@ var Container$J = newStyled.div(templateObject_1$W || (templateObject_1$W = __ma
|
|
|
13321
13321
|
var HTMLVideo = newStyled.video(templateObject_2$C || (templateObject_2$C = __makeTemplateObject(["\n width: 100%;\n max-width: 530px;\n"], ["\n width: 100%;\n max-width: 530px;\n"])));
|
|
13322
13322
|
var PlayIcon = newStyled(Icon.PDP.PlayVideo)(templateObject_3$v || (templateObject_3$v = __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"])));
|
|
13323
13323
|
var PlayContainer = newStyled.div(templateObject_4$l || (templateObject_4$l = __makeTemplateObject(["\n z-index: 1;\n width: 100%;\n height: 92%;\n display: flex;\n position: absolute;\n align-items: center;\n justify-content: center;\n"], ["\n z-index: 1;\n width: 100%;\n height: 92%;\n display: flex;\n position: absolute;\n align-items: center;\n justify-content: center;\n"])));
|
|
13324
|
-
var PauseContainer = newStyled.div(templateObject_5$
|
|
13325
|
-
var templateObject_1$W, templateObject_2$C, templateObject_3$v, templateObject_4$l, templateObject_5$
|
|
13324
|
+
var PauseContainer = newStyled.div(templateObject_5$f || (templateObject_5$f = __makeTemplateObject(["\n z-index: 1;\n width: 100%;\n height: 92%;\n position: absolute;\n"], ["\n z-index: 1;\n width: 100%;\n height: 92%;\n position: absolute;\n"])));
|
|
13325
|
+
var templateObject_1$W, templateObject_2$C, templateObject_3$v, templateObject_4$l, templateObject_5$f;
|
|
13326
13326
|
|
|
13327
13327
|
var Video$1 = function (_a) {
|
|
13328
13328
|
var _b, _c, _d, _e;
|
|
@@ -13371,22 +13371,23 @@ var Container$I = newStyled.div(templateObject_1$V || (templateObject_1$V = __ma
|
|
|
13371
13371
|
});
|
|
13372
13372
|
var TopTagContainer$3 = newStyled.div(templateObject_2$B || (templateObject_2$B = __makeTemplateObject(["\n position: absolute;\n left: ", ";\n top: ", ";\n"], ["\n position: absolute;\n left: ", ";\n top: ", ";\n"])), function (props) { return (props.borderRadiusVariant ? '50px' : '0'); }, function (props) { return (props.borderRadiusVariant ? '10px' : '0'); });
|
|
13373
13373
|
var BottomTagContainer$3 = newStyled.div(templateObject_3$u || (templateObject_3$u = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
13374
|
-
var
|
|
13374
|
+
var TopRightTagContainer$1 = newStyled.div(templateObject_4$k || (templateObject_4$k = __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"])));
|
|
13375
|
+
var ButtonSecondaryOutlineWrapper = newStyled(ButtonSecondaryOutline)(templateObject_5$e || (templateObject_5$e = __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"])));
|
|
13375
13376
|
var ImageProductWithTags$1 = function (_a) {
|
|
13376
13377
|
var _b;
|
|
13377
|
-
var content = _a.content, topTag = _a.topTag, bottomTag = _a.bottomTag, testId = _a.testId, position = _a.position, borderRadiusVariant = _a.borderRadiusVariant, ctaText = _a.ctaText, ctaAction = _a.ctaAction, hideCTA = _a.hideCTA;
|
|
13378
|
+
var content = _a.content, topTag = _a.topTag, topRightTag = _a.topRightTag, bottomTag = _a.bottomTag, testId = _a.testId, position = _a.position, borderRadiusVariant = _a.borderRadiusVariant, ctaText = _a.ctaText, ctaAction = _a.ctaAction, hideCTA = _a.hideCTA;
|
|
13378
13379
|
var source = content === null || content === void 0 ? void 0 : content.url;
|
|
13379
13380
|
var isVideo = (_b = content === null || content === void 0 ? void 0 : content.isVideo) !== null && _b !== void 0 ? _b : false;
|
|
13380
13381
|
return (jsxs$1(Container$I, __assign$1({ "data-testid": testId, className: "stylefor".concat(position), borderRadiusVariant: borderRadiusVariant }, { children: [!isVideo && (jsxs$1(Fragment$2, { children: [jsx$1(InnerImageZoom, { src: source, zoomSrc: source, zoomType: "hover", imgAttributes: {
|
|
13381
13382
|
alt: content.alt,
|
|
13382
13383
|
style: { objectFit: 'cover', objectPosition: 'center' },
|
|
13383
|
-
}, width: position == 'horizontal' ? 360 : 530, height: position == 'horizontal' ? 480 : 720, hideHint: true }, void 0), jsx$1(TopTagContainer$3, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsx$1(BottomTagContainer$3, { children: bottomTag }, 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));
|
|
13384
|
+
}, width: position == 'horizontal' ? 360 : 530, height: position == 'horizontal' ? 480 : 720, hideHint: true }, void 0), jsx$1(TopTagContainer$3, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsx$1(BottomTagContainer$3, { 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));
|
|
13384
13385
|
};
|
|
13385
|
-
var templateObject_1$V, templateObject_2$B, templateObject_3$u, templateObject_4$k;
|
|
13386
|
+
var templateObject_1$V, templateObject_2$B, templateObject_3$u, templateObject_4$k, templateObject_5$e;
|
|
13386
13387
|
|
|
13387
13388
|
var Container$H = newStyled.div(templateObject_1$U || (templateObject_1$U = __makeTemplateObject(["\n display: grid;\n grid-template-columns: minmax(6rem, max-content) 1fr;\n grid-column-gap: 20px;\n max-height: 50rem;\n width: fit-content;\n"], ["\n display: grid;\n grid-template-columns: minmax(6rem, max-content) 1fr;\n grid-column-gap: 20px;\n max-height: 50rem;\n width: fit-content;\n"])));
|
|
13388
13389
|
var ProductGallery = function (_a) {
|
|
13389
|
-
var images = _a.images, selectedValue = _a.selectedValue, topTag = _a.topTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, previewListDataTestId = _a.previewListDataTestId, thumbnailPosition = _a.thumbnailPosition, _b = _a.borderRadiusVariant, borderRadiusVariant = _b === void 0 ? false : _b, previewImgBorderColor = _a.previewImgBorderColor, ctaText = _a.ctaText, ctaAction = _a.ctaAction, _c = _a.hideCTA, hideCTA = _c === void 0 ? false : _c, _d = _a.hasOverflowArrows, hasOverflowArrows = _d === void 0 ? false : _d;
|
|
13390
|
+
var images = _a.images, selectedValue = _a.selectedValue, topTag = _a.topTag, topRightTag = _a.topRightTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, previewListDataTestId = _a.previewListDataTestId, thumbnailPosition = _a.thumbnailPosition, _b = _a.borderRadiusVariant, borderRadiusVariant = _b === void 0 ? false : _b, previewImgBorderColor = _a.previewImgBorderColor, ctaText = _a.ctaText, ctaAction = _a.ctaAction, _c = _a.hideCTA, hideCTA = _c === void 0 ? false : _c, _d = _a.hasOverflowArrows, hasOverflowArrows = _d === void 0 ? false : _d;
|
|
13390
13391
|
var initialValue = selectedValue && images.includes(selectedValue) ? selectedValue : images[0];
|
|
13391
13392
|
var _e = useState(initialValue), selectedImage = _e[0], setSelectedImage = _e[1];
|
|
13392
13393
|
useEffect(function () {
|
|
@@ -13394,7 +13395,7 @@ var ProductGallery = function (_a) {
|
|
|
13394
13395
|
}, [initialValue]);
|
|
13395
13396
|
return (jsxs$1(Container$H, { children: [jsx$1(ImagePreviewList, { images: images, selectedImage: selectedImage, dataTestId: previewListDataTestId, onClick: function (value) {
|
|
13396
13397
|
setSelectedImage(value);
|
|
13397
|
-
}, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor, hasOverflowArrows: hasOverflowArrows }, void 0), jsx$1(ImageProductWithTags$1, { content: selectedImage, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant, ctaText: ctaText, ctaAction: ctaAction, hideCTA: hideCTA }, void 0)] }, void 0));
|
|
13398
|
+
}, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor, hasOverflowArrows: hasOverflowArrows }, void 0), jsx$1(ImageProductWithTags$1, { content: selectedImage, topTag: topTag, topRightTag: topRightTag, bottomTag: bottomTag, testId: productImageDataTestId, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant, ctaText: ctaText, ctaAction: ctaAction, hideCTA: hideCTA }, void 0)] }, void 0));
|
|
13398
13399
|
};
|
|
13399
13400
|
var templateObject_1$U;
|
|
13400
13401
|
|
|
@@ -13626,8 +13627,8 @@ var AnimatedPlaceholder = newStyled.span(templateObject_5$d || (templateObject_5
|
|
|
13626
13627
|
var theme = _a.theme;
|
|
13627
13628
|
return theme.component.input.lineHeight;
|
|
13628
13629
|
});
|
|
13629
|
-
var ClearInput = newStyled.div(templateObject_6$
|
|
13630
|
-
var templateObject_1$P, templateObject_2$y, templateObject_3$s, templateObject_4$j, templateObject_5$d, templateObject_6$
|
|
13630
|
+
var ClearInput = newStyled.div(templateObject_6$c || (templateObject_6$c = __makeTemplateObject(["\n right: 0.75rem;\n top: 1rem;\n position: absolute;\n cursor: pointer;\n"], ["\n right: 0.75rem;\n top: 1rem;\n position: absolute;\n cursor: pointer;\n"])));
|
|
13631
|
+
var templateObject_1$P, templateObject_2$y, templateObject_3$s, templateObject_4$j, templateObject_5$d, templateObject_6$c;
|
|
13631
13632
|
|
|
13632
13633
|
var BaseInput = function (_a) {
|
|
13633
13634
|
var value = _a.value, _b = _a.onChange, onChange = _b === void 0 ? function () { } : _b, label = _a.label, children = _a.children, required = _a.required, onValidation = _a.onValidation, size = _a.size, placeholder = _a.placeholder, inlinePlaceholder = _a.inlinePlaceholder, hasError = _a.hasError, _c = _a.inputType, inputType = _c === void 0 ? 'text' : _c, hideClear = _a.hideClear, innerRef = _a.innerRef, requiredPlaceholder = _a.requiredPlaceholder, rest = __rest(_a, ["value", "onChange", "label", "children", "required", "onValidation", "size", "placeholder", "inlinePlaceholder", "hasError", "inputType", "hideClear", "innerRef", "requiredPlaceholder"]);
|
|
@@ -13751,9 +13752,10 @@ var Container$A = newStyled.div(templateObject_1$K || (templateObject_1$K = __ma
|
|
|
13751
13752
|
});
|
|
13752
13753
|
// max-height: 31.875rem;
|
|
13753
13754
|
var TopTagContainer$2 = newStyled.div(templateObject_2$u || (templateObject_2$u = __makeTemplateObject(["\n position: absolute;\n left: ", ";\n top: ", ";\n"], ["\n position: absolute;\n left: ", ";\n top: ", ";\n"])), function (props) { return (props.borderRadiusVariant ? '13px' : '0'); }, function (props) { return (props.borderRadiusVariant ? '11px' : '0'); });
|
|
13754
|
-
var
|
|
13755
|
-
var
|
|
13756
|
-
var
|
|
13755
|
+
var TopRightTagContainer = newStyled.div(templateObject_3$q || (templateObject_3$q = __makeTemplateObject(["\n position: absolute;\n right: 0;\n top: 0;\n"], ["\n position: absolute;\n right: 0;\n top: 0;\n"])));
|
|
13756
|
+
var BottomTagContainer$2 = newStyled.div(templateObject_4$i || (templateObject_4$i = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
13757
|
+
var NavButtonContainer$1 = newStyled.div(templateObject_5$c || (templateObject_5$c = __makeTemplateObject(["\n height: 40px;\n width: 40px;\n"], ["\n height: 40px;\n width: 40px;\n"])));
|
|
13758
|
+
var Button$3 = newStyled.button(templateObject_6$b || (templateObject_6$b = __makeTemplateObject(["\n background: transparent;\n border: none;\n padding: 0.188rem 0.625rem;\n z-index: 5;\n height: 40px !important;\n cursor: pointer;\n"], ["\n background: transparent;\n border: none;\n padding: 0.188rem 0.625rem;\n z-index: 5;\n height: 40px !important;\n cursor: pointer;\n"])));
|
|
13757
13759
|
var settings$1 = {
|
|
13758
13760
|
dots: true,
|
|
13759
13761
|
infinite: false,
|
|
@@ -13763,7 +13765,7 @@ var settings$1 = {
|
|
|
13763
13765
|
initialSlide: 0,
|
|
13764
13766
|
};
|
|
13765
13767
|
var ImageProductWithTags = function (_a) {
|
|
13766
|
-
var contents = _a.contents, _b = _a.customClick, customClick = _b === void 0 ? false : _b, topTag = _a.topTag, bottomTag = _a.bottomTag, testId = _a.testId, borderRadiusVariant = _a.borderRadiusVariant, selectedValue = _a.selectedValue;
|
|
13768
|
+
var contents = _a.contents, _b = _a.customClick, customClick = _b === void 0 ? false : _b, topTag = _a.topTag, topRightTag = _a.topRightTag, bottomTag = _a.bottomTag, testId = _a.testId, borderRadiusVariant = _a.borderRadiusVariant, selectedValue = _a.selectedValue;
|
|
13767
13769
|
var slick = useRef(null);
|
|
13768
13770
|
var sliderWrapper = useRef(null);
|
|
13769
13771
|
useRef(null);
|
|
@@ -13808,7 +13810,7 @@ var ImageProductWithTags = function (_a) {
|
|
|
13808
13810
|
var _a;
|
|
13809
13811
|
var source = content === null || content === void 0 ? void 0 : content.url;
|
|
13810
13812
|
var isVideo = (_a = content === null || content === void 0 ? void 0 : content.isVideo) !== null && _a !== void 0 ? _a : false;
|
|
13811
|
-
return (jsx$1("div", { children: !isVideo ? (jsxs$1(Fragment$2, { children: [jsx$1(InnerImageZoom, { src: source, zoomSrc: source, zoomType: "hover", imgAttributes: { alt: content.alt, width: '100%', height: '510px' }, height: 510, fullscreenOnMobile: true, className: "zoomWrapper" }, void 0), jsx$1(TopTagContainer$2, __assign$1({ borderRadiusVariant: borderRadiusVariant, "data-testid": "topTag" }, { children: topTag }), void 0), jsx$1(BottomTagContainer$2, __assign$1({ "data-testid": "bottomTag" }, { children: bottomTag }), void 0)] }, void 0)) : (jsx$1(Video$1, { source: source, thumbnail: content === null || content === void 0 ? void 0 : content.thumbnailUrl }, void 0)) }, content.key));
|
|
13813
|
+
return (jsx$1("div", { children: !isVideo ? (jsxs$1(Fragment$2, { children: [jsx$1(InnerImageZoom, { src: source, zoomSrc: source, zoomType: "hover", imgAttributes: { alt: content.alt, width: '100%', height: '510px' }, height: 510, fullscreenOnMobile: true, className: "zoomWrapper" }, void 0), jsx$1(TopTagContainer$2, __assign$1({ borderRadiusVariant: borderRadiusVariant, "data-testid": "topTag" }, { children: topTag }), void 0), jsx$1(BottomTagContainer$2, __assign$1({ "data-testid": "bottomTag" }, { children: bottomTag }), void 0), !!topRightTag && jsx$1(TopRightTagContainer, { children: topRightTag }, void 0)] }, void 0)) : (jsx$1(Video$1, { source: source, thumbnail: content === null || content === void 0 ? void 0 : content.thumbnailUrl }, void 0)) }, content.key));
|
|
13812
13814
|
}) }), void 0) }), void 0)] }, void 0));
|
|
13813
13815
|
};
|
|
13814
13816
|
function usePreventVerticalScroll$1(ref, dragThreshold) {
|
|
@@ -13846,12 +13848,12 @@ function usePreventVerticalScroll$1(ref, dragThreshold) {
|
|
|
13846
13848
|
};
|
|
13847
13849
|
}, [preventTouch, ref, touchStart]);
|
|
13848
13850
|
}
|
|
13849
|
-
var templateObject_1$K, templateObject_2$u, templateObject_3$q, templateObject_4$i, templateObject_5$c;
|
|
13851
|
+
var templateObject_1$K, templateObject_2$u, templateObject_3$q, templateObject_4$i, templateObject_5$c, templateObject_6$b;
|
|
13850
13852
|
|
|
13851
13853
|
var Container$z = newStyled.div(templateObject_1$J || (templateObject_1$J = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n height: fit-content;\n position: relative;\n max-width: 450px;\n"], ["\n display: flex;\n flex-direction: column;\n height: fit-content;\n position: relative;\n max-width: 450px;\n"])));
|
|
13852
13854
|
var ProductGalleryMobile = function (_a) {
|
|
13853
|
-
var images = _a.images, customClick = _a.customClick, topTag = _a.topTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, _b = _a.borderRadiusVariant, borderRadiusVariant = _b === void 0 ? false : _b, selectedValue = _a.selectedValue;
|
|
13854
|
-
return (jsx$1(Container$z, __assign$1({ "data-testid": "product-gallery-mobile-v1" }, { children: jsx$1(ImageProductWithTags, { contents: images, customClick: customClick, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant, selectedValue: selectedValue }, void 0) }), void 0));
|
|
13855
|
+
var images = _a.images, customClick = _a.customClick, topTag = _a.topTag, topRightTag = _a.topRightTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, _b = _a.borderRadiusVariant, borderRadiusVariant = _b === void 0 ? false : _b, selectedValue = _a.selectedValue;
|
|
13856
|
+
return (jsx$1(Container$z, __assign$1({ "data-testid": "product-gallery-mobile-v1" }, { children: jsx$1(ImageProductWithTags, { contents: images, customClick: customClick, topTag: topTag, topRightTag: topRightTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant, selectedValue: selectedValue }, void 0) }), void 0));
|
|
13855
13857
|
};
|
|
13856
13858
|
var templateObject_1$J;
|
|
13857
13859
|
|