@trafilea/afrodita-components 6.23.3 → 6.23.5
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 -1
- package/build/index.esm.js +35 -31
- package/build/index.esm.js.map +1 -1
- package/build/index.js +35 -31
- package/build/index.js.map +1 -1
- package/package.json +1 -1
package/build/index.js
CHANGED
|
@@ -4763,7 +4763,7 @@ var TAGS = {
|
|
|
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
4765
|
display3: newStyled.h3(templateObject_6$x || (templateObject_6$x = __makeTemplateObject([""], [""]))),
|
|
4766
|
-
heading1: newStyled.h1(templateObject_7$
|
|
4766
|
+
heading1: newStyled.h1(templateObject_7$o || (templateObject_7$o = __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([""], [""]))),
|
|
4769
4769
|
heading4: newStyled.h4(templateObject_10$9 || (templateObject_10$9 = __makeTemplateObject([""], [""]))),
|
|
@@ -4893,7 +4893,7 @@ 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$x, templateObject_7$
|
|
4896
|
+
var templateObject_1$1Y, templateObject_2$1m, templateObject_3$13, templateObject_4$R, templateObject_5$C, templateObject_6$x, templateObject_7$o, 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"])));
|
|
@@ -5902,12 +5902,12 @@ var Title$a = newStyled.h1(templateObject_6$v || (templateObject_6$v = __makeTem
|
|
|
5902
5902
|
var color = _a.color;
|
|
5903
5903
|
return color;
|
|
5904
5904
|
});
|
|
5905
|
-
var IconContainer$5 = newStyled.div(templateObject_7$
|
|
5905
|
+
var IconContainer$5 = newStyled.div(templateObject_7$n || (templateObject_7$n = __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"])));
|
|
5906
5906
|
var CloseToolTip = newStyled.button(templateObject_8$i || (templateObject_8$i = __makeTemplateObject(["\n position: absolute;\n background: none;\n border: none;\n cursor: pointer;\n right: ", ";\n top: 0.25rem;\n padding: 0px;\n z-index: 2;\n"], ["\n position: absolute;\n background: none;\n border: none;\n cursor: pointer;\n right: ", ";\n top: 0.25rem;\n padding: 0px;\n z-index: 2;\n"])), function (_a) {
|
|
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$v, templateObject_7$
|
|
5910
|
+
var templateObject_1$1K, templateObject_2$1c, templateObject_3$Z, templateObject_4$N, templateObject_5$z, templateObject_6$v, templateObject_7$n, templateObject_8$i;
|
|
5911
5911
|
|
|
5912
5912
|
var Tooltip = function (_a) {
|
|
5913
5913
|
var _b;
|
|
@@ -5978,7 +5978,7 @@ var SubscriptionHeader$1 = newStyled.div(templateObject_5$y || (templateObject_5
|
|
|
5978
5978
|
return theme.colors.pallete.primary.color;
|
|
5979
5979
|
});
|
|
5980
5980
|
var BenefitsContainer$1 = newStyled.div(templateObject_6$u || (templateObject_6$u = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
5981
|
-
var Benefit$1 = newStyled.div(templateObject_7$
|
|
5981
|
+
var Benefit$1 = newStyled.div(templateObject_7$m || (templateObject_7$m = __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"])));
|
|
5984
5984
|
var SubscriptionDetailsContainer = newStyled.div(templateObject_10$8 || (templateObject_10$8 = __makeTemplateObject(["\n margin-top: 18px;\n display: flex;\n"], ["\n margin-top: 18px;\n display: flex;\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$u, templateObject_7$
|
|
5991
|
+
var templateObject_1$1J, templateObject_2$1b, templateObject_3$Y, templateObject_4$M, templateObject_5$y, templateObject_6$u, templateObject_7$m, 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: {
|
|
@@ -6088,7 +6088,7 @@ var SubscriptionHeader = newStyled.div(templateObject_6$t || (templateObject_6$t
|
|
|
6088
6088
|
var theme = _a.theme;
|
|
6089
6089
|
return theme.colors.pallete.primary.color;
|
|
6090
6090
|
});
|
|
6091
|
-
var BenefitsContainer = newStyled.div(templateObject_7$
|
|
6091
|
+
var BenefitsContainer = newStyled.div(templateObject_7$l || (templateObject_7$l = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
6092
6092
|
var Benefit = newStyled.div(templateObject_8$g || (templateObject_8$g = __makeTemplateObject(["\n display: flex;\n padding: 8px 0;\n svg {\n overflow: visible;\n }\n"], ["\n display: flex;\n padding: 8px 0;\n svg {\n overflow: visible;\n }\n"])));
|
|
6093
6093
|
var BenefitText = newStyled(Text$7)(templateObject_9$8 || (templateObject_9$8 = __makeTemplateObject(["\n line-height: 20px;\n margin-left: 9px;\n"], ["\n line-height: 20px;\n margin-left: 9px;\n"])));
|
|
6094
6094
|
var DeliveryFrequencyLabel = newStyled(Text$7)(templateObject_10$7 || (templateObject_10$7 = __makeTemplateObject(["\n line-height: 35px;\n margin-right: 8px;\n align-self: center;\n"], ["\n line-height: 35px;\n margin-right: 8px;\n align-self: center;\n"])));
|
|
@@ -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$t, templateObject_7$
|
|
6104
|
+
var templateObject_1$1I, templateObject_2$1a, templateObject_3$X, templateObject_4$L, templateObject_5$x, templateObject_6$t, templateObject_7$l, 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: {
|
|
@@ -6451,14 +6451,14 @@ var DollarPart = newStyled.span(templateObject_3$R || (templateObject_3$R = __ma
|
|
|
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
6453
|
var MobileClubMembersText = newStyled(ClubMembersText)(templateObject_6$r || (templateObject_6$r = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
6454
|
-
var DesktopDollarPart = newStyled(DollarPart)(templateObject_7$
|
|
6454
|
+
var DesktopDollarPart = newStyled(DollarPart)(templateObject_7$k || (templateObject_7$k = __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) {
|
|
6457
6457
|
var clubPrice = _a.clubPrice;
|
|
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$r, templateObject_7$
|
|
6461
|
+
var templateObject_1$1u, templateObject_2$14, templateObject_3$R, templateObject_4$G, templateObject_5$v, templateObject_6$r, templateObject_7$k, 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;
|
|
@@ -6692,7 +6692,7 @@ var BottomTagContainer$8 = newStyled.div(templateObject_6$q || (templateObject_6
|
|
|
6692
6692
|
var style = _a.style;
|
|
6693
6693
|
return style.width;
|
|
6694
6694
|
});
|
|
6695
|
-
var MarginTopContainer$1 = newStyled.div(templateObject_7$
|
|
6695
|
+
var MarginTopContainer$1 = newStyled.div(templateObject_7$j || (templateObject_7$j = __makeTemplateObject(["\n margin-top: 8px;\n"], ["\n margin-top: 8px;\n"])));
|
|
6696
6696
|
var ProductItemMobile = function (_a) {
|
|
6697
6697
|
var title = _a.title, image = _a.image, imageHover = _a.imageHover, price = _a.price, rating = _a.rating, size = _a.size, _b = _a.alignName, alignName = _b === void 0 ? 'center' : _b, url = _a.url, className = _a.className, topTag = _a.topTag, bottomTag = _a.bottomTag, onClick = _a.onClick, _c = _a.priceDisplayType, priceDisplayType = _c === void 0 ? 'default' : _c, priceAtBottom = _a.priceAtBottom, priceLoading = _a.priceLoading, _d = _a.noFollow, noFollow = _d === void 0 ? false : _d, _e = _a.colorPicker, colorPicker = _e === void 0 ? {
|
|
6698
6698
|
display: false,
|
|
@@ -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$q, templateObject_7$
|
|
6754
|
+
var templateObject_1$1n, templateObject_2$11, templateObject_3$O, templateObject_4$D, templateObject_5$t, templateObject_6$q, templateObject_7$j;
|
|
6755
6755
|
|
|
6756
6756
|
var ImageContainer$5 = newStyled.div(function (_a) {
|
|
6757
6757
|
var width = _a.width, height = _a.height;
|
|
@@ -6795,7 +6795,7 @@ var TopTagContainer$7 = newStyled.div(templateObject_5$s || (templateObject_5$s
|
|
|
6795
6795
|
return style.width;
|
|
6796
6796
|
});
|
|
6797
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
|
-
var BottomTagContainer$7 = newStyled.div(templateObject_7$
|
|
6798
|
+
var BottomTagContainer$7 = newStyled.div(templateObject_7$i || (templateObject_7$i = __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;
|
|
6801
6801
|
});
|
|
@@ -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$p, templateObject_7$
|
|
6853
|
+
var templateObject_1$1m, templateObject_2$10, templateObject_3$N, templateObject_4$C, templateObject_5$s, templateObject_6$p, templateObject_7$i, 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) {
|
|
@@ -7198,7 +7198,7 @@ var SectionTitle = newStyled.h1(templateObject_6$n || (templateObject_6$n = __ma
|
|
|
7198
7198
|
var theme = _a.theme;
|
|
7199
7199
|
return "\n color: ".concat(theme.colors.shades['700'].color, ";\n font-size: ").concat(theme.component.deliveryDetails.sectionTitle.fontSize, ";\n line-height: ").concat(theme.component.deliveryDetails.sectionTitle.lineHeight, ";\n font-weight: ").concat(theme.component.deliveryDetails.sectionTitle.fontWeight, ";\n ");
|
|
7200
7200
|
});
|
|
7201
|
-
var SectionDetails = newStyled.p(templateObject_7$
|
|
7201
|
+
var SectionDetails = newStyled.p(templateObject_7$h || (templateObject_7$h = __makeTemplateObject(["\n color: ", ";\n ", "\n margin: 0;\n margin-top: 0.625rem;\n ", ";\n"], ["\n color: ", ";\n ", "\n margin: 0;\n margin-top: 0.625rem;\n ", ";\n"])), function (props) { return props.color; }, function (_a) {
|
|
7202
7202
|
var theme = _a.theme;
|
|
7203
7203
|
return "\n font-size: ".concat(theme.component.deliveryDetails.sectionDetails.fontSize, ";\n line-height: ").concat(theme.component.deliveryDetails.sectionDetails.lineHeight, ";\n font-weight: ").concat(theme.component.deliveryDetails.sectionDetails.fontWeight, ";\n ");
|
|
7204
7204
|
}, function (_a) {
|
|
@@ -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$n, templateObject_7$
|
|
7218
|
+
var templateObject_1$1f, templateObject_2$W, templateObject_3$J, templateObject_4$y, templateObject_5$p, templateObject_6$n, templateObject_7$h, 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;
|
|
@@ -7389,11 +7389,11 @@ var MobileHeader = newStyled.div(templateObject_3$E || (templateObject_3$E = __m
|
|
|
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
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
|
-
var OptionContainer = newStyled.div(templateObject_7$
|
|
7392
|
+
var OptionContainer = newStyled.div(templateObject_7$g || (templateObject_7$g = __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$k, templateObject_7$
|
|
7396
|
+
var templateObject_1$19, templateObject_2$Q, templateObject_3$E, templateObject_4$t, templateObject_5$m, templateObject_6$k, templateObject_7$g, templateObject_8$c, templateObject_9$7, templateObject_10$6;
|
|
7397
7397
|
|
|
7398
7398
|
var getStylesBySize$a = function (size, theme) {
|
|
7399
7399
|
switch (size) {
|
|
@@ -11990,9 +11990,9 @@ var Container$P = newStyled.div(templateObject_3$C || (templateObject_3$C = __ma
|
|
|
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
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
|
-
var ArrowPrev = newStyled(ArrowBaseStyles)(templateObject_7$
|
|
11993
|
+
var ArrowPrev = newStyled(ArrowBaseStyles)(templateObject_7$f || (templateObject_7$f = __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$j, templateObject_7$
|
|
11995
|
+
var templateObject_1$13, templateObject_2$M, templateObject_3$C, templateObject_4$s, templateObject_5$l, templateObject_6$j, templateObject_7$f, 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;
|
|
@@ -14541,7 +14541,7 @@ var BottomTagContainer$3 = newStyled.div(templateObject_3$t || (templateObject_3
|
|
|
14541
14541
|
var VideoOverlay$1 = newStyled.div(templateObject_4$n || (templateObject_4$n = __makeTemplateObject(["\n content: '';\n background: transparent;\n width: 100%;\n height: 100%;\n min-height: 1px;\n position: absolute;\n top: 0;\n"], ["\n content: '';\n background: transparent;\n width: 100%;\n height: 100%;\n min-height: 1px;\n position: absolute;\n top: 0;\n"])));
|
|
14542
14542
|
var Video = newStyled.div(templateObject_5$g || (templateObject_5$g = __makeTemplateObject(["\n position: relative;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n height: 510px;\n background: #efefef;\n\n & > iframe {\n border: none;\n }\n"], ["\n position: relative;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n height: 510px;\n background: #efefef;\n\n & > iframe {\n border: none;\n }\n"])));
|
|
14543
14543
|
var VideoTag = newStyled.div(templateObject_6$f || (templateObject_6$f = __makeTemplateObject(["\n gap: 8px;\n position: absolute;\n width: 100%;\n bottom: 50px;\n display: flex;\n padding: 8.6px 0;\n font-weight: 600;\n align-items: center;\n background: #f7f7f7;\n justify-content: center;\n"], ["\n gap: 8px;\n position: absolute;\n width: 100%;\n bottom: 50px;\n display: flex;\n padding: 8.6px 0;\n font-weight: 600;\n align-items: center;\n background: #f7f7f7;\n justify-content: center;\n"])));
|
|
14544
|
-
var Text$2 = newStyled.div(templateObject_7$
|
|
14544
|
+
var Text$2 = newStyled.div(templateObject_7$e || (templateObject_7$e = __makeTemplateObject(["\n padding-top: 3px;\n"], ["\n padding-top: 3px;\n"])));
|
|
14545
14545
|
var NavButtonContainer$1 = newStyled.div(templateObject_8$a || (templateObject_8$a = __makeTemplateObject(["\n height: 40px;\n width: 40px;\n"], ["\n height: 40px;\n width: 40px;\n"])));
|
|
14546
14546
|
var Button$2 = newStyled.button(templateObject_9$6 || (templateObject_9$6 = __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"])));
|
|
14547
14547
|
var settings = {
|
|
@@ -14601,7 +14601,7 @@ var ImageProductSlideV3 = function (_a) {
|
|
|
14601
14601
|
} }, void 0), jsxRuntime.jsxs(VideoTag, { children: [jsxRuntime.jsx(Icon.PDP.PlayMini, { width: 1.5 }, void 0), jsxRuntime.jsx(Text$2, { children: "VIDEO" }, void 0)] }, void 0)] }, void 0))] }, image.key));
|
|
14602
14602
|
}) }), void 0) }), void 0)] }, void 0));
|
|
14603
14603
|
};
|
|
14604
|
-
var templateObject_1$K, templateObject_2$z, templateObject_3$t, templateObject_4$n, templateObject_5$g, templateObject_6$f, templateObject_7$
|
|
14604
|
+
var templateObject_1$K, templateObject_2$z, templateObject_3$t, templateObject_4$n, templateObject_5$g, templateObject_6$f, templateObject_7$e, templateObject_8$a, templateObject_9$6;
|
|
14605
14605
|
|
|
14606
14606
|
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"])));
|
|
14607
14607
|
var ProductGalleryMobileV3 = function (_a) {
|
|
@@ -14748,12 +14748,16 @@ var transformStyle = function (_a) {
|
|
|
14748
14748
|
return opened
|
|
14749
14749
|
? css(templateObject_3$s || (templateObject_3$s = __makeTemplateObject(["\n transform: ", ";\n "], ["\n transform: ", ";\n "])), maxFullScreen ? 'translateY(0)' : 'translate(-50%, -50%)') : css(templateObject_4$m || (templateObject_4$m = __makeTemplateObject(["\n transform: ", ";\n "], ["\n transform: ", ";\n "])), maxFullScreen ? 'translateY(10%)' : 'translate(-50%, -40%)');
|
|
14750
14750
|
};
|
|
14751
|
-
var Container$y = newStyled.div(
|
|
14752
|
-
|
|
14753
|
-
|
|
14754
|
-
|
|
14751
|
+
var Container$y = newStyled.div(templateObject_6$e || (templateObject_6$e = __makeTemplateObject(["\n border: 1px solid var(--colors-pallete-primary-color);\n border-radius: ", ";\n padding: ", ";\n position: fixed;\n left: ", ";\n top: ", ";\n z-index: var(--zIndex-modal);\n background-color: var(--colors-background-color);\n transition: transform 0.3s, opacity 0.3s;\n overflow-y: auto;\n max-width: ", ";\n max-height: ", ";\n width: ", ";\n height: ", ";\n ", "\n ", "\n ", "\n"], ["\n border: 1px solid var(--colors-pallete-primary-color);\n border-radius: ", ";\n padding: ", ";\n position: fixed;\n left: ", ";\n top: ", ";\n z-index: var(--zIndex-modal);\n background-color: var(--colors-background-color);\n transition: transform 0.3s, opacity 0.3s;\n overflow-y: auto;\n max-width: ", ";\n max-height: ", ";\n width: ", ";\n height: ", ";\n ", "\n ", "\n ", "\n"])), function (props) { return "".concat(props.maxFullScreen ? '0' : 'var(--radius-regular)'); }, function (props) { return "".concat(props.padding ? props.padding : '20px 10px'); }, function (props) { return "".concat(props.maxFullScreen ? '0' : '50%'); }, function (props) { return "".concat(props.maxFullScreen ? '0' : '50%'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : '90vw'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : '90vh'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : 'auto'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : 'inherit'); }, function (_a) {
|
|
14752
|
+
var width = _a.width;
|
|
14753
|
+
return width
|
|
14754
|
+
? css(templateObject_5$f || (templateObject_5$f = __makeTemplateObject(["\n width: ", ";\n "], ["\n width: ", ";\n "])), width) : mediaQueries({
|
|
14755
|
+
minWidth: ['90%', 'var(--component-modal-minWidth)'],
|
|
14756
|
+
});
|
|
14757
|
+
}, visibleStyle, transformStyle);
|
|
14758
|
+
var Overlay = newStyled.div(templateObject_7$d || (templateObject_7$d = __makeTemplateObject(["\n position: fixed;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.75);\n z-index: var(--zIndex-overlay);\n transition: opacity 0.3s;\n\n ", "\n"], ["\n position: fixed;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.75);\n z-index: var(--zIndex-overlay);\n transition: opacity 0.3s;\n\n ", "\n"])), visibleStyle);
|
|
14755
14759
|
var Modal = function (_a) {
|
|
14756
|
-
var id = _a.id, children = _a.children, _b = _a.dismissable, dismissable = _b === void 0 ? true : _b, _c = _a.maxFullScreen, maxFullScreen = _c === void 0 ? false : _c, padding = _a.padding, onClickOverlayHandler = _a.onClickOverlayHandler;
|
|
14760
|
+
var id = _a.id, children = _a.children, _b = _a.dismissable, dismissable = _b === void 0 ? true : _b, _c = _a.maxFullScreen, maxFullScreen = _c === void 0 ? false : _c, padding = _a.padding, onClickOverlayHandler = _a.onClickOverlayHandler, width = _a.width;
|
|
14757
14761
|
var _d = useModal(id), opened = _d.opened, close = _d.close;
|
|
14758
14762
|
var onDismiss = function () {
|
|
14759
14763
|
if (!dismissable) {
|
|
@@ -14761,7 +14765,7 @@ var Modal = function (_a) {
|
|
|
14761
14765
|
}
|
|
14762
14766
|
close();
|
|
14763
14767
|
};
|
|
14764
|
-
return (jsxs(Portal, __assign$1({ id: id }, { children: [jsx(Container$y, __assign$1({ opened: opened, maxFullScreen: maxFullScreen, padding: padding }, { children: children }), void 0), jsx(Overlay, { opened: opened, onClick: function () {
|
|
14768
|
+
return (jsxs(Portal, __assign$1({ id: id }, { children: [jsx(Container$y, __assign$1({ opened: opened, maxFullScreen: maxFullScreen, padding: padding, width: width }, { children: children }), void 0), jsx(Overlay, { opened: opened, onClick: function () {
|
|
14765
14769
|
onClickOverlayHandler === null || onClickOverlayHandler === void 0 ? void 0 : onClickOverlayHandler();
|
|
14766
14770
|
onDismiss();
|
|
14767
14771
|
} }, void 0)] }), void 0));
|
|
@@ -14792,7 +14796,7 @@ var useModal = function (id) {
|
|
|
14792
14796
|
close: close,
|
|
14793
14797
|
}); }, [close, open, opened]);
|
|
14794
14798
|
};
|
|
14795
|
-
var templateObject_1$I, templateObject_2$y, templateObject_3$s, templateObject_4$m, templateObject_5$f, templateObject_6$e;
|
|
14799
|
+
var templateObject_1$I, templateObject_2$y, templateObject_3$s, templateObject_4$m, templateObject_5$f, templateObject_6$e, templateObject_7$d;
|
|
14796
14800
|
|
|
14797
14801
|
var Bar$1 = newStyled.div(templateObject_1$H || (templateObject_1$H = __makeTemplateObject(["\n @keyframes loading {\n 0% {\n transform: translateX(0);\n }\n to {\n transform: translateX(400%);\n }\n }\n\n height: ", ";\n background-color: ", ";\n width: ", ";\n border-radius: ", ";\n left: ", ";\n animation: ", ";\n"], ["\n @keyframes loading {\n 0% {\n transform: translateX(0);\n }\n to {\n transform: translateX(400%);\n }\n }\n\n height: ", ";\n background-color: ", ";\n width: ", ";\n border-radius: ", ";\n left: ", ";\n animation: ", ";\n"])), function (_a) {
|
|
14798
14802
|
var height = _a.height;
|
|
@@ -18914,9 +18918,9 @@ var PriceContainer = newStyled.div(templateObject_4$j || (templateObject_4$j = _
|
|
|
18914
18918
|
var Quantity = newStyled.div(templateObject_5$d || (templateObject_5$d = __makeTemplateObject(["\n position: absolute;\n right: 0;\n top: 0;\n transform: translate(30%, -30%);\n border-radius: 50%;\n width: 1rem;\n height: 1rem;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: var(--colors-shades-300-color);\n color: var(--colors-shades-white-color);\n font-size: 0.75rem;\n font-weight: 600;\n line-height: 24px;\n"], ["\n position: absolute;\n right: 0;\n top: 0;\n transform: translate(30%, -30%);\n border-radius: 50%;\n width: 1rem;\n height: 1rem;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: var(--colors-shades-300-color);\n color: var(--colors-shades-white-color);\n font-size: 0.75rem;\n font-weight: 600;\n line-height: 24px;\n"])));
|
|
18915
18919
|
var StyledSpan = newStyled.span(templateObject_6$c || (templateObject_6$c = __makeTemplateObject(["\n display: block;\n transform: translateY(1px);\n"], ["\n display: block;\n transform: translateY(1px);\n"])));
|
|
18916
18920
|
var SimpleOrderItem = function (_a) {
|
|
18917
|
-
var title = _a.title, className = _a.className, subtitle = _a.subtitle, image = _a.image, price = _a.price, tag = _a.tag, quantity = _a.quantity, finalPriceStyle = _a.finalPriceStyle;
|
|
18921
|
+
var title = _a.title, className = _a.className, subtitle = _a.subtitle, midElement = _a.midElement, image = _a.image, price = _a.price, tag = _a.tag, quantity = _a.quantity, finalPriceStyle = _a.finalPriceStyle;
|
|
18918
18922
|
var theme = useTheme();
|
|
18919
|
-
return (jsxRuntime.jsxs(Container$s, __assign$1({ className: className }, { children: [jsxRuntime.jsxs(ImageContainer$3, { children: [jsxRuntime.jsx(Image$3, { src: image.src, alt: image.alt, width: "4.063rem", height: "5.375rem", objectFit: "cover", objectPosition: "center" }, void 0), quantity ? (jsxRuntime.jsx(Quantity, __assign$1({ "data-testid": "order-item-quantity" }, { children: jsxRuntime.jsx(StyledSpan, { children: quantity }, void 0) }), void 0)) : null] }, void 0), jsxRuntime.jsxs(DescriptionContainer$1, __assign$1({ "data-testid": "order-item-description-container", theme: theme }, { children: [jsxRuntime.jsx(Title$3, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "product-title" }, { children: title }), void 0), jsxRuntime.jsx(Subtitle, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "product-variant-title" }, { children: subtitle }), void 0), jsxRuntime.jsxs(PriceContainer, __assign$1({ "data-testid": "order-item-price-container", withTag: !!tag, theme: theme }, { children: [tag && (jsxRuntime.jsx(OfferBanner, { discountAppliedText: tag === null || tag === void 0 ? void 0 : tag.text, backgroundColor: tag === null || tag === void 0 ? void 0 : tag.backgroundColor }, void 0)), jsxRuntime.jsx(PriceLabel$1, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, color: price.color || theme.colors.shades['700'].color, size: theme.component.pricing.priceLabel.price.size, finalPriceStyle: finalPriceStyle, originalPriceStyled: true }, void 0)] }), void 0)] }), void 0)] }), void 0));
|
|
18923
|
+
return (jsxRuntime.jsxs(Container$s, __assign$1({ className: className }, { children: [jsxRuntime.jsxs(ImageContainer$3, { children: [jsxRuntime.jsx(Image$3, { src: image.src, alt: image.alt, width: "4.063rem", height: "5.375rem", objectFit: "cover", objectPosition: "center" }, void 0), quantity ? (jsxRuntime.jsx(Quantity, __assign$1({ "data-testid": "order-item-quantity" }, { children: jsxRuntime.jsx(StyledSpan, { children: quantity }, void 0) }), void 0)) : null] }, void 0), jsxRuntime.jsxs(DescriptionContainer$1, __assign$1({ "data-testid": "order-item-description-container", theme: theme }, { children: [jsxRuntime.jsx(Title$3, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "product-title" }, { children: title }), void 0), jsxRuntime.jsx(Subtitle, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "product-variant-title" }, { children: subtitle }), void 0), midElement, jsxRuntime.jsxs(PriceContainer, __assign$1({ "data-testid": "order-item-price-container", withTag: !!tag, theme: theme }, { children: [tag && (jsxRuntime.jsx(OfferBanner, { discountAppliedText: tag === null || tag === void 0 ? void 0 : tag.text, backgroundColor: tag === null || tag === void 0 ? void 0 : tag.backgroundColor }, void 0)), jsxRuntime.jsx(PriceLabel$1, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, color: price.color || theme.colors.shades['700'].color, size: theme.component.pricing.priceLabel.price.size, finalPriceStyle: finalPriceStyle, originalPriceStyled: true }, void 0)] }), void 0)] }), void 0)] }), void 0));
|
|
18920
18924
|
};
|
|
18921
18925
|
var templateObject_1$B, templateObject_2$t, templateObject_3$p, templateObject_4$j, templateObject_5$d, templateObject_6$c;
|
|
18922
18926
|
|