@trafilea/afrodita-components 6.22.0 → 6.23.1
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 +43 -35
- package/build/index.esm.js.map +1 -1
- package/build/index.js +43 -35
- package/build/index.js.map +1 -1
- package/build/theme/revel.theme.js +6 -2
- package/build/theme/shapermint.theme.js +1 -1
- package/build/theme/thebodcon.theme.js +1 -1
- package/build/theme/thespadr.theme.js +1 -1
- package/build/theme/truekind.theme.js +1 -1
- package/package.json +1 -1
package/build/index.js
CHANGED
|
@@ -4762,7 +4762,7 @@ var TAGS = {
|
|
|
4762
4762
|
hero3: newStyled.h3(templateObject_3$13 || (templateObject_3$13 = __makeTemplateObject([""], [""]))),
|
|
4763
4763
|
display1: newStyled.h1(templateObject_4$R || (templateObject_4$R = __makeTemplateObject([""], [""]))),
|
|
4764
4764
|
display2: newStyled.h2(templateObject_5$C || (templateObject_5$C = __makeTemplateObject([""], [""]))),
|
|
4765
|
-
display3: newStyled.h3(templateObject_6$
|
|
4765
|
+
display3: newStyled.h3(templateObject_6$x || (templateObject_6$x = __makeTemplateObject([""], [""]))),
|
|
4766
4766
|
heading1: newStyled.h1(templateObject_7$n || (templateObject_7$n = __makeTemplateObject([""], [""]))),
|
|
4767
4767
|
heading2: newStyled.h2(templateObject_8$j || (templateObject_8$j = __makeTemplateObject([""], [""]))),
|
|
4768
4768
|
heading3: newStyled.h3(templateObject_9$a || (templateObject_9$a = __makeTemplateObject([""], [""]))),
|
|
@@ -4893,14 +4893,14 @@ var DEFAULTS = {
|
|
|
4893
4893
|
size: 'regular',
|
|
4894
4894
|
},
|
|
4895
4895
|
};
|
|
4896
|
-
var templateObject_1$1Y, templateObject_2$1m, templateObject_3$13, templateObject_4$R, templateObject_5$C, templateObject_6$
|
|
4896
|
+
var templateObject_1$1Y, templateObject_2$1m, templateObject_3$13, templateObject_4$R, templateObject_5$C, templateObject_6$x, templateObject_7$n, templateObject_8$j, templateObject_9$a, templateObject_10$9, templateObject_11$6, 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;
|
|
4897
4897
|
|
|
4898
4898
|
var Container$1e = newStyled.div(templateObject_1$1X || (templateObject_1$1X = __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"])));
|
|
4899
4899
|
var Card$3 = newStyled.div(templateObject_2$1l || (templateObject_2$1l = __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"])));
|
|
4900
4900
|
var Tag$2 = newStyled.div(templateObject_3$12 || (templateObject_3$12 = __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"])));
|
|
4901
4901
|
var Label$6 = newStyled.div(templateObject_4$Q || (templateObject_4$Q = __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"])));
|
|
4902
4902
|
var Check$1 = newStyled.div(templateObject_5$B || (templateObject_5$B = __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"])));
|
|
4903
|
-
var DiscountContainer$1 = newStyled.div(templateObject_6$
|
|
4903
|
+
var DiscountContainer$1 = newStyled.div(templateObject_6$w || (templateObject_6$w = __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"])));
|
|
4904
4904
|
var PackSelectorV2 = function (_a) {
|
|
4905
4905
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange, currencyCode = _a.currencyCode;
|
|
4906
4906
|
return (jsxRuntime.jsx(Container$1e, __assign$1({ role: "radiogroup" }, { children: packs.map(function (pack) {
|
|
@@ -4925,7 +4925,7 @@ var PackCard$1 = function (_a) {
|
|
|
4925
4925
|
currency: currencyCode || 'USD',
|
|
4926
4926
|
}), ' ', "each", ')'] }), void 0)) : null] }, void 0)] }), void 0));
|
|
4927
4927
|
};
|
|
4928
|
-
var templateObject_1$1X, templateObject_2$1l, templateObject_3$12, templateObject_4$Q, templateObject_5$B, templateObject_6$
|
|
4928
|
+
var templateObject_1$1X, templateObject_2$1l, templateObject_3$12, templateObject_4$Q, templateObject_5$B, templateObject_6$w;
|
|
4929
4929
|
|
|
4930
4930
|
var Container$1d = newStyled.div(templateObject_1$1W || (templateObject_1$1W = __makeTemplateObject(["\n height: 32px;\n display: flex;\n align-items: center;\n"], ["\n height: 32px;\n display: flex;\n align-items: center;\n"])));
|
|
4931
4931
|
var DropContainer = newStyled.div(templateObject_2$1k || (templateObject_2$1k = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
@@ -5898,7 +5898,7 @@ var TooltipText = newStyled.div(templateObject_4$N || (templateObject_4$N = __ma
|
|
|
5898
5898
|
return color;
|
|
5899
5899
|
});
|
|
5900
5900
|
var TopSection = newStyled.div(templateObject_5$z || (templateObject_5$z = __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"])));
|
|
5901
|
-
var Title$a = newStyled.h1(templateObject_6$
|
|
5901
|
+
var Title$a = newStyled.h1(templateObject_6$v || (templateObject_6$v = __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) {
|
|
5902
5902
|
var color = _a.color;
|
|
5903
5903
|
return color;
|
|
5904
5904
|
});
|
|
@@ -5907,7 +5907,7 @@ var CloseToolTip = newStyled.button(templateObject_8$i || (templateObject_8$i =
|
|
|
5907
5907
|
var _b = _a.right, right = _b === void 0 ? '.3rem' : _b;
|
|
5908
5908
|
return right;
|
|
5909
5909
|
});
|
|
5910
|
-
var templateObject_1$1K, templateObject_2$1c, templateObject_3$Z, templateObject_4$N, templateObject_5$z, templateObject_6$
|
|
5910
|
+
var templateObject_1$1K, templateObject_2$1c, templateObject_3$Z, templateObject_4$N, templateObject_5$z, templateObject_6$v, templateObject_7$m, templateObject_8$i;
|
|
5911
5911
|
|
|
5912
5912
|
var Tooltip = function (_a) {
|
|
5913
5913
|
var _b;
|
|
@@ -5977,7 +5977,7 @@ var SubscriptionHeader$1 = newStyled.div(templateObject_5$y || (templateObject_5
|
|
|
5977
5977
|
var theme = _a.theme;
|
|
5978
5978
|
return theme.colors.pallete.primary.color;
|
|
5979
5979
|
});
|
|
5980
|
-
var BenefitsContainer$1 = newStyled.div(templateObject_6$
|
|
5980
|
+
var BenefitsContainer$1 = newStyled.div(templateObject_6$u || (templateObject_6$u = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
5981
5981
|
var Benefit$1 = newStyled.div(templateObject_7$l || (templateObject_7$l = __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"])));
|
|
5982
5982
|
var BenefitText$1 = newStyled(Text$7)(templateObject_8$h || (templateObject_8$h = __makeTemplateObject(["\n line-height: 20px;\n margin-left: 9px;\n"], ["\n line-height: 20px;\n margin-left: 9px;\n"])));
|
|
5983
5983
|
var SubscriptionDetails = newStyled(Text$7)(templateObject_9$9 || (templateObject_9$9 = __makeTemplateObject(["\n font-size: 16px;\n margin-right: 7px;\n"], ["\n font-size: 16px;\n margin-right: 7px;\n"])));
|
|
@@ -5988,7 +5988,7 @@ var StyledPrice$1 = newStyled(PriceLabelV2$1)(templateObject_12$3 || (templateOb
|
|
|
5988
5988
|
return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
|
|
5989
5989
|
});
|
|
5990
5990
|
var Container$16 = newStyled.div(templateObject_13$3 || (templateObject_13$3 = __makeTemplateObject([""], [""])));
|
|
5991
|
-
var templateObject_1$1J, templateObject_2$1b, templateObject_3$Y, templateObject_4$M, templateObject_5$y, templateObject_6$
|
|
5991
|
+
var templateObject_1$1J, templateObject_2$1b, templateObject_3$Y, templateObject_4$M, templateObject_5$y, templateObject_6$u, templateObject_7$l, templateObject_8$h, templateObject_9$9, templateObject_10$8, templateObject_11$5, templateObject_12$3, templateObject_13$3;
|
|
5992
5992
|
|
|
5993
5993
|
var radioIds$1 = {
|
|
5994
5994
|
oneTime: {
|
|
@@ -6081,7 +6081,7 @@ var SinglePurchaseContainer = newStyled(ContainerBase)(templateObject_4$L || (te
|
|
|
6081
6081
|
return (onClick ? 'cursor: pointer;' : '');
|
|
6082
6082
|
});
|
|
6083
6083
|
var SubscriptionContainer = newStyled(ContainerBase)(templateObject_5$x || (templateObject_5$x = __makeTemplateObject(["\n padding: 16px;\n margin-bottom: 8px;\n position: relative;\n"], ["\n padding: 16px;\n margin-bottom: 8px;\n position: relative;\n"])));
|
|
6084
|
-
var SubscriptionHeader = newStyled.div(templateObject_6$
|
|
6084
|
+
var SubscriptionHeader = newStyled.div(templateObject_6$t || (templateObject_6$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) {
|
|
6085
6085
|
var theme = _a.theme;
|
|
6086
6086
|
return theme.colors.shades[200].color;
|
|
6087
6087
|
}, function (_a) {
|
|
@@ -6101,7 +6101,7 @@ var TooltipWrapper = newStyled.div(templateObject_13$2 || (templateObject_13$2 =
|
|
|
6101
6101
|
var theme = _a.theme;
|
|
6102
6102
|
return theme.component.autoship.tooltip.margin;
|
|
6103
6103
|
});
|
|
6104
|
-
var templateObject_1$1I, templateObject_2$1a, templateObject_3$X, templateObject_4$L, templateObject_5$x, templateObject_6$
|
|
6104
|
+
var templateObject_1$1I, templateObject_2$1a, templateObject_3$X, templateObject_4$L, templateObject_5$x, templateObject_6$t, templateObject_7$k, templateObject_8$g, templateObject_9$8, templateObject_10$7, templateObject_11$4, templateObject_12$2, templateObject_13$2;
|
|
6105
6105
|
|
|
6106
6106
|
var radioIds = {
|
|
6107
6107
|
oneTime: {
|
|
@@ -6184,8 +6184,8 @@ var CustomerInfo = newStyled.div(templateObject_2$19 || (templateObject_2$19 = _
|
|
|
6184
6184
|
var Name = newStyled.h4(templateObject_3$W || (templateObject_3$W = __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"])));
|
|
6185
6185
|
var StarIconContainer = newStyled.div(templateObject_4$K || (templateObject_4$K = __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"])));
|
|
6186
6186
|
var Description$2 = newStyled.p(templateObject_5$w || (templateObject_5$w = __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"])));
|
|
6187
|
-
var ReviewDays = newStyled.span(templateObject_6$
|
|
6188
|
-
var templateObject_1$1H, templateObject_2$19, templateObject_3$W, templateObject_4$K, templateObject_5$w, templateObject_6$
|
|
6187
|
+
var ReviewDays = newStyled.span(templateObject_6$s || (templateObject_6$s = __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"])));
|
|
6188
|
+
var templateObject_1$1H, templateObject_2$19, templateObject_3$W, templateObject_4$K, templateObject_5$w, templateObject_6$s;
|
|
6189
6189
|
|
|
6190
6190
|
var NameWithStars = function (_a) {
|
|
6191
6191
|
var name = _a.name, size = _a.size;
|
|
@@ -6450,7 +6450,7 @@ var MobileContainer = newStyled(Container$$)(templateObject_2$14 || (templateObj
|
|
|
6450
6450
|
var DollarPart = newStyled.span(templateObject_3$R || (templateObject_3$R = __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"])));
|
|
6451
6451
|
var ClubMembersText = newStyled.span(templateObject_4$G || (templateObject_4$G = __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"])));
|
|
6452
6452
|
var MobileDollarPart = newStyled(DollarPart)(templateObject_5$v || (templateObject_5$v = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
6453
|
-
var MobileClubMembersText = newStyled(ClubMembersText)(templateObject_6$
|
|
6453
|
+
var MobileClubMembersText = newStyled(ClubMembersText)(templateObject_6$r || (templateObject_6$r = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
6454
6454
|
var DesktopDollarPart = newStyled(DollarPart)(templateObject_7$j || (templateObject_7$j = __makeTemplateObject(["\n font-size: 13px;\n"], ["\n font-size: 13px;\n"])));
|
|
6455
6455
|
var DesktopClubMembersText = newStyled(ClubMembersText)(templateObject_8$f || (templateObject_8$f = __makeTemplateObject(["\n font-size: 13px;\n"], ["\n font-size: 13px;\n"])));
|
|
6456
6456
|
var ClubPriceLabel = function (_a) {
|
|
@@ -6458,7 +6458,7 @@ var ClubPriceLabel = function (_a) {
|
|
|
6458
6458
|
var isMobile = useWindowDimensions().isMobile;
|
|
6459
6459
|
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: isMobile ? (jsxRuntime.jsxs(MobileContainer, { children: [jsxRuntime.jsx(MobileDollarPart, { children: clubPrice }, void 0), jsxRuntime.jsx(MobileClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) : (jsxRuntime.jsxs(Container$$, { children: [jsxRuntime.jsx(DesktopDollarPart, { children: clubPrice }, void 0), jsxRuntime.jsx(DesktopClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) }, void 0));
|
|
6460
6460
|
};
|
|
6461
|
-
var templateObject_1$1u, templateObject_2$14, templateObject_3$R, templateObject_4$G, templateObject_5$v, templateObject_6$
|
|
6461
|
+
var templateObject_1$1u, templateObject_2$14, templateObject_3$R, templateObject_4$G, templateObject_5$v, templateObject_6$r, templateObject_7$j, templateObject_8$f;
|
|
6462
6462
|
|
|
6463
6463
|
var Spacing = function (_a) {
|
|
6464
6464
|
var size = _a.size, _b = _a.type, type = _b === void 0 ? 'block' : _b, children = _a.children, styleProp = _a.style;
|
|
@@ -6688,7 +6688,7 @@ var TopTagContainer$8 = newStyled.div(templateObject_5$t || (templateObject_5$t
|
|
|
6688
6688
|
var style = _a.style;
|
|
6689
6689
|
return style.width;
|
|
6690
6690
|
});
|
|
6691
|
-
var BottomTagContainer$8 = newStyled.div(templateObject_6$
|
|
6691
|
+
var BottomTagContainer$8 = newStyled.div(templateObject_6$q || (templateObject_6$q = __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) {
|
|
6692
6692
|
var style = _a.style;
|
|
6693
6693
|
return style.width;
|
|
6694
6694
|
});
|
|
@@ -6751,7 +6751,7 @@ var ProductItemMobile = function (_a) {
|
|
|
6751
6751
|
};
|
|
6752
6752
|
return (jsxs(ProdCardContainer$4, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$X, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', className: "picContainer", onClick: onClick }, { children: [!!topTag || !!bottomTag ? (jsxs(ImageContainer$6, __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$8, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: topTag }), void 0), jsx(BottomTagContainer$8, __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$3, { 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$X, __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$7, __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));
|
|
6753
6753
|
};
|
|
6754
|
-
var templateObject_1$1n, templateObject_2$11, templateObject_3$O, templateObject_4$D, templateObject_5$t, templateObject_6$
|
|
6754
|
+
var templateObject_1$1n, templateObject_2$11, templateObject_3$O, templateObject_4$D, templateObject_5$t, templateObject_6$q, templateObject_7$i;
|
|
6755
6755
|
|
|
6756
6756
|
var ImageContainer$5 = newStyled.div(function (_a) {
|
|
6757
6757
|
var width = _a.width, height = _a.height;
|
|
@@ -6794,7 +6794,7 @@ var TopTagContainer$7 = newStyled.div(templateObject_5$s || (templateObject_5$s
|
|
|
6794
6794
|
var style = _a.style;
|
|
6795
6795
|
return style.width;
|
|
6796
6796
|
});
|
|
6797
|
-
var TopRightTagContainer$2 = newStyled.div(templateObject_6$
|
|
6797
|
+
var TopRightTagContainer$2 = newStyled.div(templateObject_6$p || (templateObject_6$p = __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"])));
|
|
6798
6798
|
var BottomTagContainer$7 = newStyled.div(templateObject_7$h || (templateObject_7$h = __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) {
|
|
6799
6799
|
var style = _a.style;
|
|
6800
6800
|
return style.width;
|
|
@@ -6850,7 +6850,7 @@ var ProductItemTK = function (_a) {
|
|
|
6850
6850
|
marginTop: hasSpacing ? undefined : textContainerGap,
|
|
6851
6851
|
} }, { 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));
|
|
6852
6852
|
};
|
|
6853
|
-
var templateObject_1$1m, templateObject_2$10, templateObject_3$N, templateObject_4$C, templateObject_5$s, templateObject_6$
|
|
6853
|
+
var templateObject_1$1m, templateObject_2$10, templateObject_3$N, templateObject_4$C, templateObject_5$s, templateObject_6$p, templateObject_7$h, templateObject_8$e;
|
|
6854
6854
|
|
|
6855
6855
|
var Container$V = newStyled.div(templateObject_1$1l || (templateObject_1$1l = __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"])));
|
|
6856
6856
|
function withProductGrid(ProductItemComponent, data) {
|
|
@@ -7014,13 +7014,13 @@ var Row$2 = newStyled.div(templateObject_3$L || (templateObject_3$L = __makeTemp
|
|
|
7014
7014
|
});
|
|
7015
7015
|
var H5 = newStyled.h5(templateObject_4$A || (templateObject_4$A = __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; });
|
|
7016
7016
|
var H3$1 = newStyled.h3(templateObject_5$q || (templateObject_5$q = __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; });
|
|
7017
|
-
var FreeShipping = newStyled.span(templateObject_6$
|
|
7017
|
+
var FreeShipping = newStyled.span(templateObject_6$o || (templateObject_6$o = __makeTemplateObject(["\n font-weight: 600;\n color: ", ";\n"], ["\n font-weight: 600;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
7018
7018
|
var CrossSellCheckbox = function (_a) {
|
|
7019
7019
|
var imageURL = _a.imageURL, title = _a.title, description = _a.description, freeShippingText = _a.freeShippingText, rightToLeft = _a.rightToLeft, onChange = _a.onChange;
|
|
7020
7020
|
var theme = useTheme();
|
|
7021
7021
|
return (jsxRuntime.jsxs(Wrapper$5, __assign$1({ backgroundColor: theme.colors.shades['10'].color, rightToLeft: Boolean(rightToLeft) }, { children: [jsxRuntime.jsx(Checkbox, { text: "", id: "checkbox", onChange: onChange, size: exports.ComponentSize.Small, variant: "secondary" }, void 0), jsxRuntime.jsxs(Row$2, __assign$1({ rightToLeft: Boolean(rightToLeft) }, { children: [jsxRuntime.jsx(Image$3, { src: imageURL, alt: "Cross sell image", borderRadius: "0.5rem" }, void 0), jsxRuntime.jsxs(Col$1, { children: [jsxRuntime.jsx(H5, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0), jsxRuntime.jsxs(H3$1, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: [description, jsxRuntime.jsxs(FreeShipping, __assign$1({ color: theme.colors.shades['700'].color }, { children: [' ', "+ ", freeShippingText] }), void 0)] }), void 0)] }, void 0)] }), void 0)] }), void 0));
|
|
7022
7022
|
};
|
|
7023
|
-
var templateObject_1$1i, templateObject_2$Z, templateObject_3$L, templateObject_4$A, templateObject_5$q, templateObject_6$
|
|
7023
|
+
var templateObject_1$1i, templateObject_2$Z, templateObject_3$L, templateObject_4$A, templateObject_5$q, templateObject_6$o;
|
|
7024
7024
|
|
|
7025
7025
|
var index$1 = /*#__PURE__*/Object.freeze({
|
|
7026
7026
|
__proto__: null,
|
|
@@ -7192,7 +7192,7 @@ var IconContainer$3 = newStyled.div(templateObject_5$p || (templateObject_5$p =
|
|
|
7192
7192
|
marginBottom: ['10px', '0'],
|
|
7193
7193
|
width: ['auto', '1.5rem'],
|
|
7194
7194
|
}));
|
|
7195
|
-
var SectionTitle = newStyled.h1(templateObject_6$
|
|
7195
|
+
var SectionTitle = newStyled.h1(templateObject_6$n || (templateObject_6$n = __makeTemplateObject(["\n ", "\n ", "\n margin: 0;\n text-transform: uppercase;\n"], ["\n ", "\n ", "\n margin: 0;\n text-transform: uppercase;\n"])), mediaQueries({
|
|
7196
7196
|
display: ['block', 'flex'],
|
|
7197
7197
|
}), function (_a) {
|
|
7198
7198
|
var theme = _a.theme;
|
|
@@ -7215,7 +7215,7 @@ var DeliveryDetails = function (_a) {
|
|
|
7215
7215
|
var theme = useTheme();
|
|
7216
7216
|
return (jsxRuntime.jsxs("div", __assign$1({ "data-testid": "DeliveryDetails" }, { children: [jsxRuntime.jsx(Title$5, __assign$1({ color: theme.colors.shades[700].color }, { children: deliveryDetailsText }), void 0), jsxRuntime.jsx(Line, { backgroundColor: theme.colors.shades['200'].color }, void 0), note && jsxRuntime.jsx(Note, __assign$1({}, note), void 0), jsxRuntime.jsxs(Row$1, __assign$1({ "data-testid": "DD-row", theme: theme }, { children: [jsxRuntime.jsxs(Col, __assign$1({ theme: theme }, { children: [jsxRuntime.jsxs(SectionTitle, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(IconContainer$3, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Icon.PDP.Clock, { width: 1.5 }, void 0) }), void 0), arrivingBy.title] }), void 0), jsxRuntime.jsx(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: arrivingBy.details }), void 0)] }), void 0), jsxRuntime.jsxs(Col, __assign$1({ theme: theme }, { children: [jsxRuntime.jsxs(SectionTitle, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(IconContainer$3, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Icon.Navigation.MapMarker, { width: 1.5 }, void 0) }), void 0), shippingTo.title] }), void 0), jsxRuntime.jsx(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: shippingTo.details }), void 0)] }), void 0), jsxRuntime.jsxs(Col, __assign$1({ theme: theme }, { children: [jsxRuntime.jsxs(SectionTitle, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(IconContainer$3, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Icon.Messaging.Messenger, { width: 1.5 }, void 0) }), void 0), instantOrderUpdate.title] }), void 0), jsxRuntime.jsx(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: instantOrderUpdate.details }), void 0), instantOrderUpdate.keepMeUpdated && (jsxRuntime.jsxs(KeepMeUpdated, __assign$1({ onClick: instantOrderUpdate.keepMeUpdated.onClick, borderColor: theme.colors.shades['150'].color }, { children: [jsxRuntime.jsx(Icon.Messaging.Messenger, { width: 1, height: 1, fill: "#0078FF" }, void 0), instantOrderUpdate.keepMeUpdated.title] }), void 0))] }), void 0)] }), void 0)] }), void 0));
|
|
7217
7217
|
};
|
|
7218
|
-
var templateObject_1$1f, templateObject_2$W, templateObject_3$J, templateObject_4$y, templateObject_5$p, templateObject_6$
|
|
7218
|
+
var templateObject_1$1f, templateObject_2$W, templateObject_3$J, templateObject_4$y, templateObject_5$p, templateObject_6$n, templateObject_7$g, templateObject_8$d;
|
|
7219
7219
|
|
|
7220
7220
|
var Backdrop = newStyled.div(templateObject_1$1e || (templateObject_1$1e = __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) {
|
|
7221
7221
|
var top = _a.top;
|
|
@@ -7283,8 +7283,8 @@ var Item$2 = newStyled.li(templateObject_2$U || (templateObject_2$U = __makeTemp
|
|
|
7283
7283
|
var DropdownWrapper = newStyled.div(templateObject_3$I || (templateObject_3$I = __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"])));
|
|
7284
7284
|
var ArrowContainer$1 = newStyled.div(templateObject_4$x || (templateObject_4$x = __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"])));
|
|
7285
7285
|
var StyledDropdown = newStyled.ul(templateObject_5$o || (templateObject_5$o = __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; });
|
|
7286
|
-
var DropdownItem = newStyled.li(templateObject_6$
|
|
7287
|
-
var templateObject_1$1d, templateObject_2$U, templateObject_3$I, templateObject_4$x, templateObject_5$o, templateObject_6$
|
|
7286
|
+
var DropdownItem = newStyled.li(templateObject_6$m || (templateObject_6$m = __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; });
|
|
7287
|
+
var templateObject_1$1d, templateObject_2$U, templateObject_3$I, templateObject_4$x, templateObject_5$o, templateObject_6$m;
|
|
7288
7288
|
|
|
7289
7289
|
var DropdownListIcons = function (_a) {
|
|
7290
7290
|
var items = _a.items;
|
|
@@ -7302,8 +7302,8 @@ var DropdownLabel = newStyled.div(templateObject_2$T || (templateObject_2$T = __
|
|
|
7302
7302
|
var SizeLabel = newStyled.span(templateObject_3$H || (templateObject_3$H = __makeTemplateObject(["\n margin-right: 8px;\n"], ["\n margin-right: 8px;\n"])));
|
|
7303
7303
|
var DetailLabel = newStyled.span(templateObject_4$w || (templateObject_4$w = __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"])));
|
|
7304
7304
|
var DropdownOptions = newStyled.div(templateObject_5$n || (templateObject_5$n = __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"])));
|
|
7305
|
-
var DropdownOption = newStyled.div(templateObject_6$
|
|
7306
|
-
var templateObject_1$1c, templateObject_2$T, templateObject_3$H, templateObject_4$w, templateObject_5$n, templateObject_6$
|
|
7305
|
+
var DropdownOption = newStyled.div(templateObject_6$l || (templateObject_6$l = __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"])));
|
|
7306
|
+
var templateObject_1$1c, templateObject_2$T, templateObject_3$H, templateObject_4$w, templateObject_5$n, templateObject_6$l;
|
|
7307
7307
|
|
|
7308
7308
|
var SizeDropdown = function (_a) {
|
|
7309
7309
|
var options = _a.options, defaultLabel = _a.defaultLabel, onOptionSelect = _a.onOptionSelect;
|
|
@@ -7388,12 +7388,12 @@ var Header$1 = newStyled.div(templateObject_2$Q || (templateObject_2$Q = __makeT
|
|
|
7388
7388
|
var MobileHeader = newStyled.div(templateObject_3$E || (templateObject_3$E = __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"])));
|
|
7389
7389
|
var MobileIconsContainer = newStyled.div(templateObject_4$t || (templateObject_4$t = __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"])));
|
|
7390
7390
|
var H4 = newStyled.h4(templateObject_5$m || (templateObject_5$m = __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; });
|
|
7391
|
-
var FilterLink = newStyled.a(templateObject_6$
|
|
7391
|
+
var FilterLink = newStyled.a(templateObject_6$k || (templateObject_6$k = __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; });
|
|
7392
7392
|
var OptionContainer = newStyled.div(templateObject_7$f || (templateObject_7$f = __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'); });
|
|
7393
7393
|
var ClearAll = newStyled.span(templateObject_8$c || (templateObject_8$c = __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; });
|
|
7394
7394
|
var MobileFooter = newStyled.div(templateObject_9$7 || (templateObject_9$7 = __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"])));
|
|
7395
7395
|
var MobileClearContainer = newStyled.div(templateObject_10$6 || (templateObject_10$6 = __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"])));
|
|
7396
|
-
var templateObject_1$19, templateObject_2$Q, templateObject_3$E, templateObject_4$t, templateObject_5$m, templateObject_6$
|
|
7396
|
+
var templateObject_1$19, templateObject_2$Q, templateObject_3$E, templateObject_4$t, templateObject_5$m, templateObject_6$k, templateObject_7$f, templateObject_8$c, templateObject_9$7, templateObject_10$6;
|
|
7397
7397
|
|
|
7398
7398
|
var getStylesBySize$a = function (size, theme) {
|
|
7399
7399
|
switch (size) {
|
|
@@ -11989,10 +11989,10 @@ var Container$P = newStyled.div(templateObject_3$C || (templateObject_3$C = __ma
|
|
|
11989
11989
|
});
|
|
11990
11990
|
var Button$6 = newStyled.button(templateObject_4$s || (templateObject_4$s = __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"])));
|
|
11991
11991
|
var ArrowsContainer = newStyled.div(templateObject_5$l || (templateObject_5$l = __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"])));
|
|
11992
|
-
var ArrowBaseStyles = newStyled.div(templateObject_6$
|
|
11992
|
+
var ArrowBaseStyles = newStyled.div(templateObject_6$j || (templateObject_6$j = __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"])));
|
|
11993
11993
|
var ArrowPrev = newStyled(ArrowBaseStyles)(templateObject_7$e || (templateObject_7$e = __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"])));
|
|
11994
11994
|
var ArrowNext = newStyled(ArrowBaseStyles)(templateObject_8$b || (templateObject_8$b = __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"])));
|
|
11995
|
-
var templateObject_1$13, templateObject_2$M, templateObject_3$C, templateObject_4$s, templateObject_5$l, templateObject_6$
|
|
11995
|
+
var templateObject_1$13, templateObject_2$M, templateObject_3$C, templateObject_4$s, templateObject_5$l, templateObject_6$j, templateObject_7$e, templateObject_8$b;
|
|
11996
11996
|
|
|
11997
11997
|
var ImagePreviewList = function (_a) {
|
|
11998
11998
|
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;
|
|
@@ -13616,16 +13616,18 @@ var HTMLVideo = newStyled.video(templateObject_2$K || (templateObject_2$K = __ma
|
|
|
13616
13616
|
var PlayIcon = newStyled(Icon.PDP.PlayVideo)(templateObject_3$B || (templateObject_3$B = __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"])));
|
|
13617
13617
|
var PlayContainer = newStyled.div(templateObject_4$r || (templateObject_4$r = __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"])));
|
|
13618
13618
|
var PauseContainer = newStyled.div(templateObject_5$k || (templateObject_5$k = __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"])));
|
|
13619
|
-
var
|
|
13619
|
+
var MuteButton = newStyled.button(templateObject_6$i || (templateObject_6$i = __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"])));
|
|
13620
|
+
var templateObject_1$11, templateObject_2$K, templateObject_3$B, templateObject_4$r, templateObject_5$k, templateObject_6$i;
|
|
13620
13621
|
|
|
13621
13622
|
var Video$1 = function (_a) {
|
|
13622
13623
|
var _b, _c, _d, _e;
|
|
13623
|
-
var source = _a.source, thumbnail = _a.thumbnail, height = _a.height, className = _a.className, _f = _a.withProgressBar, withProgressBar = _f === void 0 ? true : _f, rest = __rest(_a, ["source", "thumbnail", "height", "className", "withProgressBar"]);
|
|
13624
|
+
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, rest = __rest(_a, ["source", "thumbnail", "height", "className", "withProgressBar", "hasAudioControl"]);
|
|
13624
13625
|
var videoRef = React$2.useRef(null);
|
|
13625
13626
|
var _g = React$2.useState(true), isLoading = _g[0], setIsLoading = _g[1];
|
|
13626
13627
|
var _h = React$2.useState(false), isPlaying = _h[0], setIsPlaying = _h[1];
|
|
13627
|
-
var _j = React$2.useState(
|
|
13628
|
-
var _k = React$2.useState(
|
|
13628
|
+
var _j = React$2.useState(false), isMuted = _j[0], setIsMuted = _j[1];
|
|
13629
|
+
var _k = React$2.useState(0), videoProgress = _k[0], setVideoProgress = _k[1];
|
|
13630
|
+
var _l = React$2.useState(false), debouncePlay = _l[0], setDebouncePlay = _l[1];
|
|
13629
13631
|
var isStarted = videoProgress > 0;
|
|
13630
13632
|
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);
|
|
13631
13633
|
var hideProgressBar = videoProgress === ((_e = (_d = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _d === void 0 ? void 0 : _d.duration) !== null && _e !== void 0 ? _e : 0) || videoProgress === 0;
|
|
@@ -13650,12 +13652,18 @@ var Video$1 = function (_a) {
|
|
|
13650
13652
|
setIsPlaying(false);
|
|
13651
13653
|
}
|
|
13652
13654
|
};
|
|
13655
|
+
var handleMuteToggle = function () {
|
|
13656
|
+
if (videoRef.current) {
|
|
13657
|
+
videoRef.current.muted = !videoRef.current.muted;
|
|
13658
|
+
setIsMuted(function (prevState) { return !prevState; });
|
|
13659
|
+
}
|
|
13660
|
+
};
|
|
13653
13661
|
var onTimeUpdate = function () {
|
|
13654
13662
|
if (videoRef.current) {
|
|
13655
13663
|
setVideoProgress(videoRef.current.currentTime);
|
|
13656
13664
|
}
|
|
13657
13665
|
};
|
|
13658
|
-
return (jsxRuntime.jsxs(Container$O, __assign$1({ className: className }, { children: [!isLoading && withProgressBar && jsxRuntime.jsx(ProgressBar$1, { progress: progress, hide: hideProgressBar }, void 0), !isPlaying ? (jsxRuntime.jsx(PlayContainer, __assign$1({ "data-testid": "play", onClick: handlePlayClick }, { children: isStarted && jsxRuntime.jsx(PlayIcon, {}, void 0) }), void 0)) : (jsxRuntime.jsx(PauseContainer, { "data-testid": "pause", onClick: handlePauseClick }, void 0)), jsxRuntime.jsxs(HTMLVideo, __assign$1({}, rest, { "data-testid": "video", poster: thumbnail, playsInline: true, ref: videoRef, onTimeUpdate: onTimeUpdate, onCanPlay: function () { return setIsLoading(false); }, onLoadedData: function () { return setIsLoading(false); }, onPause: function () { return setIsPlaying(false); }, onPlaying: function () { return setIsPlaying(true); }, height: height || 'auto' }, { children: [jsxRuntime.jsx("track", { kind: "captions" }, void 0), jsxRuntime.jsx("source", { src: source }, void 0)] }), void 0)] }), void 0));
|
|
13666
|
+
return (jsxRuntime.jsxs(Container$O, __assign$1({ className: className }, { children: [!isLoading && withProgressBar && jsxRuntime.jsx(ProgressBar$1, { progress: progress, hide: hideProgressBar }, void 0), !isPlaying ? (jsxRuntime.jsx(PlayContainer, __assign$1({ "data-testid": "play", onClick: handlePlayClick }, { children: isStarted && jsxRuntime.jsx(PlayIcon, {}, void 0) }), void 0)) : (jsxRuntime.jsx(PauseContainer, { "data-testid": "pause", onClick: handlePauseClick }, void 0)), hasAudioControl && (jsxRuntime.jsxs(MuteButton, __assign$1({ onClick: handleMuteToggle }, { children: [isMuted && jsxRuntime.jsx(Icon$1, { name: "custom/sound_off" }, void 0), !isMuted && jsxRuntime.jsx(Icon$1, { name: "custom/sound_on" }, void 0)] }), void 0)), jsxRuntime.jsxs(HTMLVideo, __assign$1({}, rest, { "data-testid": "video", poster: thumbnail, playsInline: true, ref: videoRef, onTimeUpdate: onTimeUpdate, onCanPlay: function () { return setIsLoading(false); }, onLoadedData: function () { return setIsLoading(false); }, onPause: function () { return setIsPlaying(false); }, onPlaying: function () { return setIsPlaying(true); }, height: height || 'auto' }, { children: [jsxRuntime.jsx("track", { kind: "captions" }, void 0), jsxRuntime.jsx("source", { src: source }, void 0)] }), void 0)] }), void 0));
|
|
13659
13667
|
};
|
|
13660
13668
|
|
|
13661
13669
|
var Container$N = newStyled.div(templateObject_1$10 || (templateObject_1$10 = __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) {
|