@trafilea/afrodita-components 6.36.0 → 6.36.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/index.css +0 -1
- package/build/index.d.ts +2 -1
- package/build/index.esm.css +0 -1
- package/build/index.esm.js +33 -29
- package/build/index.esm.js.map +1 -1
- package/build/index.js +33 -29
- package/build/index.js.map +1 -1
- package/package.json +1 -1
package/build/index.js
CHANGED
|
@@ -4804,7 +4804,7 @@ var TAGS = {
|
|
|
4804
4804
|
display1: newStyled.h1(templateObject_4$Y || (templateObject_4$Y = __makeTemplateObject([""], [""]))),
|
|
4805
4805
|
display2: newStyled.h2(templateObject_5$J || (templateObject_5$J = __makeTemplateObject([""], [""]))),
|
|
4806
4806
|
display3: newStyled.h3(templateObject_6$E || (templateObject_6$E = __makeTemplateObject([""], [""]))),
|
|
4807
|
-
heading1: newStyled.h1(templateObject_7$
|
|
4807
|
+
heading1: newStyled.h1(templateObject_7$v || (templateObject_7$v = __makeTemplateObject([""], [""]))),
|
|
4808
4808
|
heading2: newStyled.h2(templateObject_8$n || (templateObject_8$n = __makeTemplateObject([""], [""]))),
|
|
4809
4809
|
heading3: newStyled.h3(templateObject_9$d || (templateObject_9$d = __makeTemplateObject([""], [""]))),
|
|
4810
4810
|
heading4: newStyled.h4(templateObject_10$c || (templateObject_10$c = __makeTemplateObject([""], [""]))),
|
|
@@ -4934,7 +4934,7 @@ var DEFAULTS = {
|
|
|
4934
4934
|
size: 'regular',
|
|
4935
4935
|
},
|
|
4936
4936
|
};
|
|
4937
|
-
var templateObject_1$25, templateObject_2$1w, templateObject_3$1b, templateObject_4$Y, templateObject_5$J, templateObject_6$E, templateObject_7$
|
|
4937
|
+
var templateObject_1$25, templateObject_2$1w, templateObject_3$1b, templateObject_4$Y, templateObject_5$J, templateObject_6$E, templateObject_7$v, templateObject_8$n, templateObject_9$d, templateObject_10$c, templateObject_11$8, templateObject_12$5, templateObject_13$5, templateObject_14$3, templateObject_15$2, templateObject_16$2, templateObject_17$2, templateObject_18$2, templateObject_19$2, templateObject_20$1;
|
|
4938
4938
|
|
|
4939
4939
|
var Container$1j = newStyled.div(templateObject_1$24 || (templateObject_1$24 = __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"])));
|
|
4940
4940
|
var Card$4 = newStyled.div(templateObject_2$1v || (templateObject_2$1v = __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"])));
|
|
@@ -5947,12 +5947,12 @@ var Title$a = newStyled.h1(templateObject_6$C || (templateObject_6$C = __makeTem
|
|
|
5947
5947
|
var color = _a.color;
|
|
5948
5948
|
return color;
|
|
5949
5949
|
});
|
|
5950
|
-
var IconContainer$6 = newStyled.div(templateObject_7$
|
|
5950
|
+
var IconContainer$6 = newStyled.div(templateObject_7$u || (templateObject_7$u = __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"])));
|
|
5951
5951
|
var CloseToolTip = newStyled.button(templateObject_8$m || (templateObject_8$m = __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) {
|
|
5952
5952
|
var _b = _a.right, right = _b === void 0 ? '.3rem' : _b;
|
|
5953
5953
|
return right;
|
|
5954
5954
|
});
|
|
5955
|
-
var templateObject_1$1T, templateObject_2$1m, templateObject_3$15, templateObject_4$U, templateObject_5$G, templateObject_6$C, templateObject_7$
|
|
5955
|
+
var templateObject_1$1T, templateObject_2$1m, templateObject_3$15, templateObject_4$U, templateObject_5$G, templateObject_6$C, templateObject_7$u, templateObject_8$m;
|
|
5956
5956
|
|
|
5957
5957
|
var Tooltip = function (_a) {
|
|
5958
5958
|
var _b;
|
|
@@ -6023,7 +6023,7 @@ var SubscriptionHeader$3 = newStyled.div(templateObject_5$F || (templateObject_5
|
|
|
6023
6023
|
return theme.colors.pallete.primary.color;
|
|
6024
6024
|
});
|
|
6025
6025
|
var BenefitsContainer$3 = newStyled.div(templateObject_6$B || (templateObject_6$B = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
6026
|
-
var Benefit$3 = newStyled.div(templateObject_7$
|
|
6026
|
+
var Benefit$3 = newStyled.div(templateObject_7$t || (templateObject_7$t = __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"])));
|
|
6027
6027
|
var BenefitText$3 = newStyled(Text$7)(templateObject_8$l || (templateObject_8$l = __makeTemplateObject(["\n line-height: 20px;\n margin-left: 9px;\n"], ["\n line-height: 20px;\n margin-left: 9px;\n"])));
|
|
6028
6028
|
var SubscriptionDetails = newStyled(Text$7)(templateObject_9$c || (templateObject_9$c = __makeTemplateObject(["\n font-size: 16px;\n margin-right: 7px;\n"], ["\n font-size: 16px;\n margin-right: 7px;\n"])));
|
|
6029
6029
|
var SubscriptionDetailsContainer = newStyled.div(templateObject_10$b || (templateObject_10$b = __makeTemplateObject(["\n margin-top: 18px;\n display: flex;\n"], ["\n margin-top: 18px;\n display: flex;\n"])));
|
|
@@ -6033,7 +6033,7 @@ var StyledPrice$3 = newStyled(PriceLabelV2$1)(templateObject_12$4 || (templateOb
|
|
|
6033
6033
|
return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
|
|
6034
6034
|
});
|
|
6035
6035
|
var Container$1b = newStyled.div(templateObject_13$4 || (templateObject_13$4 = __makeTemplateObject([""], [""])));
|
|
6036
|
-
var templateObject_1$1S, templateObject_2$1l, templateObject_3$14, templateObject_4$T, templateObject_5$F, templateObject_6$B, templateObject_7$
|
|
6036
|
+
var templateObject_1$1S, templateObject_2$1l, templateObject_3$14, templateObject_4$T, templateObject_5$F, templateObject_6$B, templateObject_7$t, templateObject_8$l, templateObject_9$c, templateObject_10$b, templateObject_11$7, templateObject_12$4, templateObject_13$4;
|
|
6037
6037
|
|
|
6038
6038
|
var radioIds$2 = {
|
|
6039
6039
|
oneTime: {
|
|
@@ -6133,7 +6133,7 @@ var SubscriptionHeader$2 = newStyled.div(templateObject_6$A || (templateObject_6
|
|
|
6133
6133
|
var theme = _a.theme;
|
|
6134
6134
|
return theme.colors.pallete.primary.color;
|
|
6135
6135
|
});
|
|
6136
|
-
var BenefitsContainer$2 = newStyled.div(templateObject_7$
|
|
6136
|
+
var BenefitsContainer$2 = newStyled.div(templateObject_7$s || (templateObject_7$s = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
6137
6137
|
var Benefit$2 = newStyled.div(templateObject_8$k || (templateObject_8$k = __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"])));
|
|
6138
6138
|
var BenefitText$2 = newStyled(Text$7)(templateObject_9$b || (templateObject_9$b = __makeTemplateObject(["\n line-height: 20px;\n margin-left: 9px;\n"], ["\n line-height: 20px;\n margin-left: 9px;\n"])));
|
|
6139
6139
|
var DeliveryFrequencyLabel = newStyled(Text$7)(templateObject_10$a || (templateObject_10$a = __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"])));
|
|
@@ -6146,7 +6146,7 @@ var TooltipWrapper$1 = newStyled.div(templateObject_13$3 || (templateObject_13$3
|
|
|
6146
6146
|
var theme = _a.theme;
|
|
6147
6147
|
return theme.component.autoship.tooltip.margin;
|
|
6148
6148
|
});
|
|
6149
|
-
var templateObject_1$1R, templateObject_2$1k, templateObject_3$13, templateObject_4$S, templateObject_5$E, templateObject_6$A, templateObject_7$
|
|
6149
|
+
var templateObject_1$1R, templateObject_2$1k, templateObject_3$13, templateObject_4$S, templateObject_5$E, templateObject_6$A, templateObject_7$s, templateObject_8$k, templateObject_9$b, templateObject_10$a, templateObject_11$6, templateObject_12$3, templateObject_13$3;
|
|
6150
6150
|
|
|
6151
6151
|
var radioIds$1 = {
|
|
6152
6152
|
oneTime: {
|
|
@@ -6496,14 +6496,14 @@ var DollarPart = newStyled.span(templateObject_3$Z || (templateObject_3$Z = __ma
|
|
|
6496
6496
|
var ClubMembersText = newStyled.span(templateObject_4$N || (templateObject_4$N = __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"])));
|
|
6497
6497
|
var MobileDollarPart = newStyled(DollarPart)(templateObject_5$C || (templateObject_5$C = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
6498
6498
|
var MobileClubMembersText = newStyled(ClubMembersText)(templateObject_6$y || (templateObject_6$y = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
6499
|
-
var DesktopDollarPart = newStyled(DollarPart)(templateObject_7$
|
|
6499
|
+
var DesktopDollarPart = newStyled(DollarPart)(templateObject_7$r || (templateObject_7$r = __makeTemplateObject(["\n font-size: 13px;\n"], ["\n font-size: 13px;\n"])));
|
|
6500
6500
|
var DesktopClubMembersText = newStyled(ClubMembersText)(templateObject_8$j || (templateObject_8$j = __makeTemplateObject(["\n font-size: 13px;\n"], ["\n font-size: 13px;\n"])));
|
|
6501
6501
|
var ClubPriceLabel = function (_a) {
|
|
6502
6502
|
var clubPrice = _a.clubPrice;
|
|
6503
6503
|
var isMobile = useWindowDimensions().isMobile;
|
|
6504
6504
|
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$14, { children: [jsxRuntime.jsx(DesktopDollarPart, { children: clubPrice }, void 0), jsxRuntime.jsx(DesktopClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) }, void 0));
|
|
6505
6505
|
};
|
|
6506
|
-
var templateObject_1$1D, templateObject_2$1e, templateObject_3$Z, templateObject_4$N, templateObject_5$C, templateObject_6$y, templateObject_7$
|
|
6506
|
+
var templateObject_1$1D, templateObject_2$1e, templateObject_3$Z, templateObject_4$N, templateObject_5$C, templateObject_6$y, templateObject_7$r, templateObject_8$j;
|
|
6507
6507
|
|
|
6508
6508
|
var Spacing = function (_a) {
|
|
6509
6509
|
var size = _a.size, _b = _a.type, type = _b === void 0 ? 'block' : _b, children = _a.children, styleProp = _a.style;
|
|
@@ -6825,9 +6825,9 @@ var BottomTagContainer$9 = newStyled.div(templateObject_6$x || (templateObject_6
|
|
|
6825
6825
|
var style = _a.style;
|
|
6826
6826
|
return style.width;
|
|
6827
6827
|
});
|
|
6828
|
-
var MarginTopContainer$1 = newStyled.div(templateObject_7$
|
|
6828
|
+
var MarginTopContainer$1 = newStyled.div(templateObject_7$q || (templateObject_7$q = __makeTemplateObject(["\n margin-top: 8px;\n"], ["\n margin-top: 8px;\n"])));
|
|
6829
6829
|
var ClubOfferPriceLabelWrapper = newStyled.div(templateObject_8$i || (templateObject_8$i = __makeTemplateObject(["\n margin-top: 2px;\n margin-bottom: 2px;\n"], ["\n margin-top: 2px;\n margin-bottom: 2px;\n"])));
|
|
6830
|
-
var templateObject_1$1x, templateObject_2$1a, templateObject_3$W, templateObject_4$K, templateObject_5$A, templateObject_6$x, templateObject_7$
|
|
6830
|
+
var templateObject_1$1x, templateObject_2$1a, templateObject_3$W, templateObject_4$K, templateObject_5$A, templateObject_6$x, templateObject_7$q, templateObject_8$i;
|
|
6831
6831
|
|
|
6832
6832
|
var ProductItemMobile = function (_a) {
|
|
6833
6833
|
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 ? {
|
|
@@ -6936,7 +6936,7 @@ var TopTagContainer$8 = newStyled.div(templateObject_5$z || (templateObject_5$z
|
|
|
6936
6936
|
return style.width;
|
|
6937
6937
|
});
|
|
6938
6938
|
var TopRightTagContainer$3 = newStyled.div(templateObject_6$w || (templateObject_6$w = __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"])));
|
|
6939
|
-
var BottomTagContainer$8 = newStyled.div(templateObject_7$
|
|
6939
|
+
var BottomTagContainer$8 = newStyled.div(templateObject_7$p || (templateObject_7$p = __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) {
|
|
6940
6940
|
var style = _a.style;
|
|
6941
6941
|
return style.width;
|
|
6942
6942
|
});
|
|
@@ -6991,7 +6991,7 @@ var ProductItemTK = function (_a) {
|
|
|
6991
6991
|
marginTop: hasSpacing ? undefined : textContainerGap,
|
|
6992
6992
|
} }, { 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));
|
|
6993
6993
|
};
|
|
6994
|
-
var templateObject_1$1w, templateObject_2$19, templateObject_3$V, templateObject_4$J, templateObject_5$z, templateObject_6$w, templateObject_7$
|
|
6994
|
+
var templateObject_1$1w, templateObject_2$19, templateObject_3$V, templateObject_4$J, templateObject_5$z, templateObject_6$w, templateObject_7$p, templateObject_8$h;
|
|
6995
6995
|
|
|
6996
6996
|
var Container$_ = newStyled.div(templateObject_1$1v || (templateObject_1$1v = __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"])));
|
|
6997
6997
|
function withProductGrid(ProductItemComponent, data) {
|
|
@@ -7348,7 +7348,7 @@ var SectionTitle = newStyled.h1(templateObject_6$u || (templateObject_6$u = __ma
|
|
|
7348
7348
|
var theme = _a.theme;
|
|
7349
7349
|
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 ");
|
|
7350
7350
|
});
|
|
7351
|
-
var SectionDetails = newStyled.p(templateObject_7$
|
|
7351
|
+
var SectionDetails = newStyled.p(templateObject_7$o || (templateObject_7$o = __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) {
|
|
7352
7352
|
var theme = _a.theme;
|
|
7353
7353
|
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 ");
|
|
7354
7354
|
}, function (_a) {
|
|
@@ -7365,7 +7365,7 @@ var DeliveryDetails = function (_a) {
|
|
|
7365
7365
|
var theme = useTheme();
|
|
7366
7366
|
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$4, __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$4, __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$4, __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));
|
|
7367
7367
|
};
|
|
7368
|
-
var templateObject_1$1o, templateObject_2$13, templateObject_3$R, templateObject_4$F, templateObject_5$w, templateObject_6$u, templateObject_7$
|
|
7368
|
+
var templateObject_1$1o, templateObject_2$13, templateObject_3$R, templateObject_4$F, templateObject_5$w, templateObject_6$u, templateObject_7$o, templateObject_8$g;
|
|
7369
7369
|
|
|
7370
7370
|
var Backdrop = newStyled.div(templateObject_1$1n || (templateObject_1$1n = __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) {
|
|
7371
7371
|
var top = _a.top;
|
|
@@ -7539,11 +7539,11 @@ var MobileHeader = newStyled.div(templateObject_3$M || (templateObject_3$M = __m
|
|
|
7539
7539
|
var MobileIconsContainer = newStyled.div(templateObject_4$A || (templateObject_4$A = __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"])));
|
|
7540
7540
|
var H4 = newStyled.h4(templateObject_5$t || (templateObject_5$t = __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; });
|
|
7541
7541
|
var FilterLink = newStyled.a(templateObject_6$r || (templateObject_6$r = __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; });
|
|
7542
|
-
var OptionContainer = newStyled.div(templateObject_7$
|
|
7542
|
+
var OptionContainer = newStyled.div(templateObject_7$n || (templateObject_7$n = __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'); });
|
|
7543
7543
|
var ClearAll = newStyled.span(templateObject_8$f || (templateObject_8$f = __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; });
|
|
7544
7544
|
var MobileFooter = newStyled.div(templateObject_9$a || (templateObject_9$a = __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"])));
|
|
7545
7545
|
var MobileClearContainer = newStyled.div(templateObject_10$9 || (templateObject_10$9 = __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"])));
|
|
7546
|
-
var templateObject_1$1i, templateObject_2$Z, templateObject_3$M, templateObject_4$A, templateObject_5$t, templateObject_6$r, templateObject_7$
|
|
7546
|
+
var templateObject_1$1i, templateObject_2$Z, templateObject_3$M, templateObject_4$A, templateObject_5$t, templateObject_6$r, templateObject_7$n, templateObject_8$f, templateObject_9$a, templateObject_10$9;
|
|
7547
7547
|
|
|
7548
7548
|
var getStylesBySize$a = function (size, theme) {
|
|
7549
7549
|
switch (size) {
|
|
@@ -12143,9 +12143,9 @@ var Container$U = newStyled.div(templateObject_3$K || (templateObject_3$K = __ma
|
|
|
12143
12143
|
var Button$6 = newStyled.button(templateObject_4$z || (templateObject_4$z = __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"])));
|
|
12144
12144
|
var ArrowsContainer = newStyled.div(templateObject_5$s || (templateObject_5$s = __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"])));
|
|
12145
12145
|
var ArrowBaseStyles = newStyled.div(templateObject_6$q || (templateObject_6$q = __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"])));
|
|
12146
|
-
var ArrowPrev = newStyled(ArrowBaseStyles)(templateObject_7$
|
|
12146
|
+
var ArrowPrev = newStyled(ArrowBaseStyles)(templateObject_7$m || (templateObject_7$m = __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"])));
|
|
12147
12147
|
var ArrowNext = newStyled(ArrowBaseStyles)(templateObject_8$e || (templateObject_8$e = __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"])));
|
|
12148
|
-
var templateObject_1$1c, templateObject_2$V, templateObject_3$K, templateObject_4$z, templateObject_5$s, templateObject_6$q, templateObject_7$
|
|
12148
|
+
var templateObject_1$1c, templateObject_2$V, templateObject_3$K, templateObject_4$z, templateObject_5$s, templateObject_6$q, templateObject_7$m, templateObject_8$e;
|
|
12149
12149
|
|
|
12150
12150
|
var getLoadingProp = function (index, itemsOnViewport) {
|
|
12151
12151
|
var loading = 'eager';
|
|
@@ -13862,11 +13862,11 @@ var ImageStyled = newStyled(Image$3)(templateObject_6$o || (templateObject_6$o =
|
|
|
13862
13862
|
var theme = _a.theme, isRatioSquare = _a.isRatioSquare;
|
|
13863
13863
|
return isRatioSquare ? '1 / 1' : theme.component.gallery.aspectRatio;
|
|
13864
13864
|
});
|
|
13865
|
-
var InnerImageZoomStyled = newStyled(InnerImageZoom)(templateObject_7$
|
|
13865
|
+
var InnerImageZoomStyled = newStyled(InnerImageZoom)(templateObject_7$l || (templateObject_7$l = __makeTemplateObject(["\n aspect-ratio: ", ";\n"], ["\n aspect-ratio: ", ";\n"])), function (_a) {
|
|
13866
13866
|
var theme = _a.theme, isRatioSquare = _a.isRatioSquare;
|
|
13867
13867
|
return isRatioSquare ? '1 / 1' : theme.component.gallery.aspectRatio;
|
|
13868
13868
|
});
|
|
13869
|
-
var templateObject_1$19, templateObject_2$S, templateObject_3$I, templateObject_4$x, templateObject_5$q, templateObject_6$o, templateObject_7$
|
|
13869
|
+
var templateObject_1$19, templateObject_2$S, templateObject_3$I, templateObject_4$x, templateObject_5$q, templateObject_6$o, templateObject_7$l;
|
|
13870
13870
|
|
|
13871
13871
|
var ImageProductSlide$1 = function (_a) {
|
|
13872
13872
|
var _b;
|
|
@@ -14399,7 +14399,7 @@ var Container$K = newStyled.div(templateObject_6$m || (templateObject_6$m = __ma
|
|
|
14399
14399
|
minWidth: ['90%', 'var(--component-modal-minWidth)'],
|
|
14400
14400
|
});
|
|
14401
14401
|
}, visibleStyle, transformStyle);
|
|
14402
|
-
var Overlay = newStyled.div(templateObject_7$
|
|
14402
|
+
var Overlay = newStyled.div(templateObject_7$k || (templateObject_7$k = __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 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"])), visibleStyle);
|
|
14403
14403
|
var Modal = function (_a) {
|
|
14404
14404
|
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, _d = _a.initialTop, initialTop = _d === void 0 ? '50%' : _d;
|
|
14405
14405
|
var _e = useModal(id), opened = _e.opened, close = _e.close;
|
|
@@ -14440,7 +14440,7 @@ var useModal = function (id) {
|
|
|
14440
14440
|
close: close,
|
|
14441
14441
|
}); }, [close, open, opened]);
|
|
14442
14442
|
};
|
|
14443
|
-
var templateObject_1$_, templateObject_2$L, templateObject_3$E, templateObject_4$v, templateObject_5$o, templateObject_6$m, templateObject_7$
|
|
14443
|
+
var templateObject_1$_, templateObject_2$L, templateObject_3$E, templateObject_4$v, templateObject_5$o, templateObject_6$m, templateObject_7$k;
|
|
14444
14444
|
|
|
14445
14445
|
var htmlReactParser = {exports: {}};
|
|
14446
14446
|
|
|
@@ -18324,7 +18324,7 @@ var Tag$1 = newStyled.div(templateObject_3$D || (templateObject_3$D = __makeTemp
|
|
|
18324
18324
|
var Label$3 = newStyled.div(templateObject_4$u || (templateObject_4$u = __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"])));
|
|
18325
18325
|
var Check = newStyled.div(templateObject_5$n || (templateObject_5$n = __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"])));
|
|
18326
18326
|
var IconContainer$2 = newStyled.div(templateObject_6$l || (templateObject_6$l = __makeTemplateObject(["\n height: 56px;\n display: flex;\n align-items: center;\n justify-content: center;\n\n [aria-checked='true'] & * {\n fill: var(--color);\n }\n"], ["\n height: 56px;\n display: flex;\n align-items: center;\n justify-content: center;\n\n [aria-checked='true'] & * {\n fill: var(--color);\n }\n"])));
|
|
18327
|
-
var IconPlaceholder = newStyled.div(templateObject_7$
|
|
18327
|
+
var IconPlaceholder = newStyled.div(templateObject_7$j || (templateObject_7$j = __makeTemplateObject(["\n height: 100%;\n width: 100%;\n background-color: var(--colors-shades-100-color);\n"], ["\n height: 100%;\n width: 100%;\n background-color: var(--colors-shades-100-color);\n"])));
|
|
18328
18328
|
var DiscountContainer = newStyled.div(templateObject_8$d || (templateObject_8$d = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n"], ["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n"])));
|
|
18329
18329
|
var PackSelector = function (_a) {
|
|
18330
18330
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange, currencyCode = _a.currencyCode;
|
|
@@ -18355,7 +18355,7 @@ var PackCard = function (_a) {
|
|
|
18355
18355
|
currency: currencyCode || 'USD',
|
|
18356
18356
|
}), ' ', "each"] }), void 0)] }), void 0));
|
|
18357
18357
|
};
|
|
18358
|
-
var templateObject_1$X, templateObject_2$I, templateObject_3$D, templateObject_4$u, templateObject_5$n, templateObject_6$l, templateObject_7$
|
|
18358
|
+
var templateObject_1$X, templateObject_2$I, templateObject_3$D, templateObject_4$u, templateObject_5$n, templateObject_6$l, templateObject_7$j, templateObject_8$d;
|
|
18359
18359
|
|
|
18360
18360
|
var Container$G = newStyled.div(templateObject_1$W || (templateObject_1$W = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n user-select: none;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n user-select: none;\n"])));
|
|
18361
18361
|
var IconContainer$1 = newStyled.div(templateObject_2$H || (templateObject_2$H = __makeTemplateObject(["\n width: 0.531rem;\n height: 0.875rem;\n display: flex;\n align-items: center;\n cursor: pointer;\n"], ["\n width: 0.531rem;\n height: 0.875rem;\n display: flex;\n align-items: center;\n cursor: pointer;\n"])));
|
|
@@ -18501,13 +18501,17 @@ var PriceContainer = newStyled.div(templateObject_4$s || (templateObject_4$s = _
|
|
|
18501
18501
|
});
|
|
18502
18502
|
var Quantity = newStyled.div(templateObject_5$m || (templateObject_5$m = __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"])));
|
|
18503
18503
|
var StyledSpan = newStyled.span(templateObject_6$k || (templateObject_6$k = __makeTemplateObject(["\n display: block;\n transform: translateY(1px);\n"], ["\n display: block;\n transform: translateY(1px);\n"])));
|
|
18504
|
+
var Gift = newStyled.span(templateObject_7$i || (templateObject_7$i = __makeTemplateObject(["\n color: ", ";\n font-weight: 600;\n font-size: 14px;\n line-height: 22px;\n"], ["\n color: ", ";\n font-weight: 600;\n font-size: 14px;\n line-height: 22px;\n"])), function (_a) {
|
|
18505
|
+
var theme = _a.theme;
|
|
18506
|
+
return theme.colors.semantic.urgent.color;
|
|
18507
|
+
});
|
|
18504
18508
|
var SimpleOrderItem = function (_a) {
|
|
18505
18509
|
var _b, _c, _d, _e, _f, _g, _h, _j;
|
|
18506
|
-
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;
|
|
18510
|
+
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, isGift = _a.isGift;
|
|
18507
18511
|
var theme = useTheme();
|
|
18508
|
-
return (jsxRuntime.jsxs(Container$E, __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: ((_c = (_b = theme.component.pricing) === null || _b === void 0 ? void 0 : _b.subtitle) === null || _c === void 0 ? void 0 : _c.color) || theme.colors.shades['700'].color, fontSize: ((_e = (_d = theme.component.pricing) === null || _d === void 0 ? void 0 : _d.subtitle) === null || _e === void 0 ? void 0 : _e.fontSize) || '0.75rem', lineHeight: ((_g = (_f = theme.component.pricing) === null || _f === void 0 ? void 0 : _f.subtitle) === null || _g === void 0 ? void 0 : _g.lineHeight) || '1rem', fontWeight: ((_j = (_h = theme.component.pricing) === null || _h === void 0 ? void 0 : _h.subtitle) === null || _j === void 0 ? void 0 : _j.fontWeight) || 'normal', "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));
|
|
18512
|
+
return (jsxRuntime.jsxs(Container$E, __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), subtitle && (jsxRuntime.jsx(Subtitle, __assign$1({ color: ((_c = (_b = theme.component.pricing) === null || _b === void 0 ? void 0 : _b.subtitle) === null || _c === void 0 ? void 0 : _c.color) || theme.colors.shades['700'].color, fontSize: ((_e = (_d = theme.component.pricing) === null || _d === void 0 ? void 0 : _d.subtitle) === null || _e === void 0 ? void 0 : _e.fontSize) || '0.75rem', lineHeight: ((_g = (_f = theme.component.pricing) === null || _f === void 0 ? void 0 : _f.subtitle) === null || _g === void 0 ? void 0 : _g.lineHeight) || '1rem', fontWeight: ((_j = (_h = theme.component.pricing) === null || _h === void 0 ? void 0 : _h.subtitle) === null || _j === void 0 ? void 0 : _j.fontWeight) || 'normal', "data-testid": "product-variant-title", margin: "0" }, { children: subtitle }), void 0)), midElement, isGift && jsxRuntime.jsx(Gift, { children: "Limited Time Only" }, 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)), isGift ? (jsxRuntime.jsx(Gift, { children: "GIFT" }, 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));
|
|
18509
18513
|
};
|
|
18510
|
-
var templateObject_1$U, templateObject_2$G, templateObject_3$B, templateObject_4$s, templateObject_5$m, templateObject_6$k;
|
|
18514
|
+
var templateObject_1$U, templateObject_2$G, templateObject_3$B, templateObject_4$s, templateObject_5$m, templateObject_6$k, templateObject_7$i;
|
|
18511
18515
|
|
|
18512
18516
|
var P$1 = newStyled.p(function (_a) {
|
|
18513
18517
|
var color = _a.color;
|