@trafilea/afrodita-components 6.36.1 → 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.
Files changed (6) hide show
  1. package/build/index.d.ts +2 -1
  2. package/build/index.esm.js +33 -29
  3. package/build/index.esm.js.map +1 -1
  4. package/build/index.js +33 -29
  5. package/build/index.js.map +1 -1
  6. package/package.json +1 -1
package/build/index.d.ts CHANGED
@@ -3041,8 +3041,9 @@ interface ProductOrderItemProps {
3041
3041
  backgroundColor: string;
3042
3042
  };
3043
3043
  finalPriceStyle?: react__default.CSSProperties;
3044
+ isGift?: boolean;
3044
3045
  }
3045
- declare const SimpleOrderItem: ({ title, className, subtitle, midElement, image, price, tag, quantity, finalPriceStyle, }: ProductOrderItemProps) => JSX.Element;
3046
+ declare const SimpleOrderItem: ({ title, className, subtitle, midElement, image, price, tag, quantity, finalPriceStyle, isGift, }: ProductOrderItemProps) => JSX.Element;
3046
3047
 
3047
3048
  interface ProgressBarProps {
3048
3049
  description?: string;
package/build/index.esm.js CHANGED
@@ -4778,7 +4778,7 @@ var TAGS = {
4778
4778
  display1: newStyled.h1(templateObject_4$Y || (templateObject_4$Y = __makeTemplateObject([""], [""]))),
4779
4779
  display2: newStyled.h2(templateObject_5$J || (templateObject_5$J = __makeTemplateObject([""], [""]))),
4780
4780
  display3: newStyled.h3(templateObject_6$E || (templateObject_6$E = __makeTemplateObject([""], [""]))),
4781
- heading1: newStyled.h1(templateObject_7$u || (templateObject_7$u = __makeTemplateObject([""], [""]))),
4781
+ heading1: newStyled.h1(templateObject_7$v || (templateObject_7$v = __makeTemplateObject([""], [""]))),
4782
4782
  heading2: newStyled.h2(templateObject_8$n || (templateObject_8$n = __makeTemplateObject([""], [""]))),
4783
4783
  heading3: newStyled.h3(templateObject_9$d || (templateObject_9$d = __makeTemplateObject([""], [""]))),
4784
4784
  heading4: newStyled.h4(templateObject_10$c || (templateObject_10$c = __makeTemplateObject([""], [""]))),
@@ -4908,7 +4908,7 @@ var DEFAULTS = {
4908
4908
  size: 'regular',
4909
4909
  },
4910
4910
  };
4911
- var templateObject_1$25, templateObject_2$1w, templateObject_3$1b, templateObject_4$Y, templateObject_5$J, templateObject_6$E, templateObject_7$u, 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;
4911
+ 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;
4912
4912
 
4913
4913
  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"])));
4914
4914
  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"])));
@@ -5921,12 +5921,12 @@ var Title$a = newStyled.h1(templateObject_6$C || (templateObject_6$C = __makeTem
5921
5921
  var color = _a.color;
5922
5922
  return color;
5923
5923
  });
5924
- var IconContainer$6 = newStyled.div(templateObject_7$t || (templateObject_7$t = __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"])));
5924
+ 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"])));
5925
5925
  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) {
5926
5926
  var _b = _a.right, right = _b === void 0 ? '.3rem' : _b;
5927
5927
  return right;
5928
5928
  });
5929
- var templateObject_1$1T, templateObject_2$1m, templateObject_3$15, templateObject_4$U, templateObject_5$G, templateObject_6$C, templateObject_7$t, templateObject_8$m;
5929
+ 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;
5930
5930
 
5931
5931
  var Tooltip = function (_a) {
5932
5932
  var _b;
@@ -5997,7 +5997,7 @@ var SubscriptionHeader$3 = newStyled.div(templateObject_5$F || (templateObject_5
5997
5997
  return theme.colors.pallete.primary.color;
5998
5998
  });
5999
5999
  var BenefitsContainer$3 = newStyled.div(templateObject_6$B || (templateObject_6$B = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
6000
- var Benefit$3 = newStyled.div(templateObject_7$s || (templateObject_7$s = __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"])));
6000
+ 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"])));
6001
6001
  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"])));
6002
6002
  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"])));
6003
6003
  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"])));
@@ -6007,7 +6007,7 @@ var StyledPrice$3 = newStyled(PriceLabelV2$1)(templateObject_12$4 || (templateOb
6007
6007
  return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
6008
6008
  });
6009
6009
  var Container$1b = newStyled.div(templateObject_13$4 || (templateObject_13$4 = __makeTemplateObject([""], [""])));
6010
- var templateObject_1$1S, templateObject_2$1l, templateObject_3$14, templateObject_4$T, templateObject_5$F, templateObject_6$B, templateObject_7$s, templateObject_8$l, templateObject_9$c, templateObject_10$b, templateObject_11$7, templateObject_12$4, templateObject_13$4;
6010
+ 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;
6011
6011
 
6012
6012
  var radioIds$2 = {
6013
6013
  oneTime: {
@@ -6107,7 +6107,7 @@ var SubscriptionHeader$2 = newStyled.div(templateObject_6$A || (templateObject_6
6107
6107
  var theme = _a.theme;
6108
6108
  return theme.colors.pallete.primary.color;
6109
6109
  });
6110
- var BenefitsContainer$2 = newStyled.div(templateObject_7$r || (templateObject_7$r = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
6110
+ var BenefitsContainer$2 = newStyled.div(templateObject_7$s || (templateObject_7$s = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
6111
6111
  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"])));
6112
6112
  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"])));
6113
6113
  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"])));
@@ -6120,7 +6120,7 @@ var TooltipWrapper$1 = newStyled.div(templateObject_13$3 || (templateObject_13$3
6120
6120
  var theme = _a.theme;
6121
6121
  return theme.component.autoship.tooltip.margin;
6122
6122
  });
6123
- var templateObject_1$1R, templateObject_2$1k, templateObject_3$13, templateObject_4$S, templateObject_5$E, templateObject_6$A, templateObject_7$r, templateObject_8$k, templateObject_9$b, templateObject_10$a, templateObject_11$6, templateObject_12$3, templateObject_13$3;
6123
+ 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;
6124
6124
 
6125
6125
  var radioIds$1 = {
6126
6126
  oneTime: {
@@ -6470,14 +6470,14 @@ var DollarPart = newStyled.span(templateObject_3$Z || (templateObject_3$Z = __ma
6470
6470
  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"])));
6471
6471
  var MobileDollarPart = newStyled(DollarPart)(templateObject_5$C || (templateObject_5$C = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
6472
6472
  var MobileClubMembersText = newStyled(ClubMembersText)(templateObject_6$y || (templateObject_6$y = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
6473
- var DesktopDollarPart = newStyled(DollarPart)(templateObject_7$q || (templateObject_7$q = __makeTemplateObject(["\n font-size: 13px;\n"], ["\n font-size: 13px;\n"])));
6473
+ var DesktopDollarPart = newStyled(DollarPart)(templateObject_7$r || (templateObject_7$r = __makeTemplateObject(["\n font-size: 13px;\n"], ["\n font-size: 13px;\n"])));
6474
6474
  var DesktopClubMembersText = newStyled(ClubMembersText)(templateObject_8$j || (templateObject_8$j = __makeTemplateObject(["\n font-size: 13px;\n"], ["\n font-size: 13px;\n"])));
6475
6475
  var ClubPriceLabel = function (_a) {
6476
6476
  var clubPrice = _a.clubPrice;
6477
6477
  var isMobile = useWindowDimensions().isMobile;
6478
6478
  return (jsx$1(Fragment$2, { children: isMobile ? (jsxs$1(MobileContainer, { children: [jsx$1(MobileDollarPart, { children: clubPrice }, void 0), jsx$1(MobileClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) : (jsxs$1(Container$14, { children: [jsx$1(DesktopDollarPart, { children: clubPrice }, void 0), jsx$1(DesktopClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) }, void 0));
6479
6479
  };
6480
- var templateObject_1$1D, templateObject_2$1e, templateObject_3$Z, templateObject_4$N, templateObject_5$C, templateObject_6$y, templateObject_7$q, templateObject_8$j;
6480
+ 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;
6481
6481
 
6482
6482
  var Spacing = function (_a) {
6483
6483
  var size = _a.size, _b = _a.type, type = _b === void 0 ? 'block' : _b, children = _a.children, styleProp = _a.style;
@@ -6799,9 +6799,9 @@ var BottomTagContainer$9 = newStyled.div(templateObject_6$x || (templateObject_6
6799
6799
  var style = _a.style;
6800
6800
  return style.width;
6801
6801
  });
6802
- var MarginTopContainer$1 = newStyled.div(templateObject_7$p || (templateObject_7$p = __makeTemplateObject(["\n margin-top: 8px;\n"], ["\n margin-top: 8px;\n"])));
6802
+ var MarginTopContainer$1 = newStyled.div(templateObject_7$q || (templateObject_7$q = __makeTemplateObject(["\n margin-top: 8px;\n"], ["\n margin-top: 8px;\n"])));
6803
6803
  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"])));
6804
- var templateObject_1$1x, templateObject_2$1a, templateObject_3$W, templateObject_4$K, templateObject_5$A, templateObject_6$x, templateObject_7$p, templateObject_8$i;
6804
+ 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;
6805
6805
 
6806
6806
  var ProductItemMobile = function (_a) {
6807
6807
  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 ? {
@@ -6910,7 +6910,7 @@ var TopTagContainer$8 = newStyled.div(templateObject_5$z || (templateObject_5$z
6910
6910
  return style.width;
6911
6911
  });
6912
6912
  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"])));
6913
- var BottomTagContainer$8 = newStyled.div(templateObject_7$o || (templateObject_7$o = __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) {
6913
+ 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) {
6914
6914
  var style = _a.style;
6915
6915
  return style.width;
6916
6916
  });
@@ -6965,7 +6965,7 @@ var ProductItemTK = function (_a) {
6965
6965
  marginTop: hasSpacing ? undefined : textContainerGap,
6966
6966
  } }, { 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));
6967
6967
  };
6968
- var templateObject_1$1w, templateObject_2$19, templateObject_3$V, templateObject_4$J, templateObject_5$z, templateObject_6$w, templateObject_7$o, templateObject_8$h;
6968
+ 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;
6969
6969
 
6970
6970
  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"])));
6971
6971
  function withProductGrid(ProductItemComponent, data) {
@@ -7322,7 +7322,7 @@ var SectionTitle = newStyled.h1(templateObject_6$u || (templateObject_6$u = __ma
7322
7322
  var theme = _a.theme;
7323
7323
  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 ");
7324
7324
  });
7325
- var SectionDetails = newStyled.p(templateObject_7$n || (templateObject_7$n = __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) {
7325
+ 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) {
7326
7326
  var theme = _a.theme;
7327
7327
  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 ");
7328
7328
  }, function (_a) {
@@ -7339,7 +7339,7 @@ var DeliveryDetails = function (_a) {
7339
7339
  var theme = useTheme();
7340
7340
  return (jsxs$1("div", __assign$1({ "data-testid": "DeliveryDetails" }, { children: [jsx$1(Title$5, __assign$1({ color: theme.colors.shades[700].color }, { children: deliveryDetailsText }), void 0), jsx$1(Line, { backgroundColor: theme.colors.shades['200'].color }, void 0), note && jsx$1(Note, __assign$1({}, note), void 0), jsxs$1(Row$1, __assign$1({ "data-testid": "DD-row", theme: theme }, { children: [jsxs$1(Col, __assign$1({ theme: theme }, { children: [jsxs$1(SectionTitle, __assign$1({ theme: theme }, { children: [jsx$1(IconContainer$4, __assign$1({ theme: theme }, { children: jsx$1(Icon.PDP.Clock, { width: 1.5 }, void 0) }), void 0), arrivingBy.title] }), void 0), jsx$1(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: arrivingBy.details }), void 0)] }), void 0), jsxs$1(Col, __assign$1({ theme: theme }, { children: [jsxs$1(SectionTitle, __assign$1({ theme: theme }, { children: [jsx$1(IconContainer$4, __assign$1({ theme: theme }, { children: jsx$1(Icon.Navigation.MapMarker, { width: 1.5 }, void 0) }), void 0), shippingTo.title] }), void 0), jsx$1(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: shippingTo.details }), void 0)] }), void 0), jsxs$1(Col, __assign$1({ theme: theme }, { children: [jsxs$1(SectionTitle, __assign$1({ theme: theme }, { children: [jsx$1(IconContainer$4, __assign$1({ theme: theme }, { children: jsx$1(Icon.Messaging.Messenger, { width: 1.5 }, void 0) }), void 0), instantOrderUpdate.title] }), void 0), jsx$1(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: instantOrderUpdate.details }), void 0), instantOrderUpdate.keepMeUpdated && (jsxs$1(KeepMeUpdated, __assign$1({ onClick: instantOrderUpdate.keepMeUpdated.onClick, borderColor: theme.colors.shades['150'].color }, { children: [jsx$1(Icon.Messaging.Messenger, { width: 1, height: 1, fill: "#0078FF" }, void 0), instantOrderUpdate.keepMeUpdated.title] }), void 0))] }), void 0)] }), void 0)] }), void 0));
7341
7341
  };
7342
- var templateObject_1$1o, templateObject_2$13, templateObject_3$R, templateObject_4$F, templateObject_5$w, templateObject_6$u, templateObject_7$n, templateObject_8$g;
7342
+ 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;
7343
7343
 
7344
7344
  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) {
7345
7345
  var top = _a.top;
@@ -7513,11 +7513,11 @@ var MobileHeader = newStyled.div(templateObject_3$M || (templateObject_3$M = __m
7513
7513
  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"])));
7514
7514
  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; });
7515
7515
  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; });
7516
- var OptionContainer = newStyled.div(templateObject_7$m || (templateObject_7$m = __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'); });
7516
+ 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'); });
7517
7517
  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; });
7518
7518
  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"])));
7519
7519
  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"])));
7520
- var templateObject_1$1i, templateObject_2$Z, templateObject_3$M, templateObject_4$A, templateObject_5$t, templateObject_6$r, templateObject_7$m, templateObject_8$f, templateObject_9$a, templateObject_10$9;
7520
+ 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;
7521
7521
 
7522
7522
  var getStylesBySize$a = function (size, theme) {
7523
7523
  switch (size) {
@@ -12117,9 +12117,9 @@ var Container$U = newStyled.div(templateObject_3$K || (templateObject_3$K = __ma
12117
12117
  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"])));
12118
12118
  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"])));
12119
12119
  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"])));
12120
- var ArrowPrev = newStyled(ArrowBaseStyles)(templateObject_7$l || (templateObject_7$l = __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"])));
12120
+ 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"])));
12121
12121
  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"])));
12122
- var templateObject_1$1c, templateObject_2$V, templateObject_3$K, templateObject_4$z, templateObject_5$s, templateObject_6$q, templateObject_7$l, templateObject_8$e;
12122
+ 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;
12123
12123
 
12124
12124
  var getLoadingProp = function (index, itemsOnViewport) {
12125
12125
  var loading = 'eager';
@@ -13836,11 +13836,11 @@ var ImageStyled = newStyled(Image$3)(templateObject_6$o || (templateObject_6$o =
13836
13836
  var theme = _a.theme, isRatioSquare = _a.isRatioSquare;
13837
13837
  return isRatioSquare ? '1 / 1' : theme.component.gallery.aspectRatio;
13838
13838
  });
13839
- var InnerImageZoomStyled = newStyled(InnerImageZoom)(templateObject_7$k || (templateObject_7$k = __makeTemplateObject(["\n aspect-ratio: ", ";\n"], ["\n aspect-ratio: ", ";\n"])), function (_a) {
13839
+ var InnerImageZoomStyled = newStyled(InnerImageZoom)(templateObject_7$l || (templateObject_7$l = __makeTemplateObject(["\n aspect-ratio: ", ";\n"], ["\n aspect-ratio: ", ";\n"])), function (_a) {
13840
13840
  var theme = _a.theme, isRatioSquare = _a.isRatioSquare;
13841
13841
  return isRatioSquare ? '1 / 1' : theme.component.gallery.aspectRatio;
13842
13842
  });
13843
- var templateObject_1$19, templateObject_2$S, templateObject_3$I, templateObject_4$x, templateObject_5$q, templateObject_6$o, templateObject_7$k;
13843
+ var templateObject_1$19, templateObject_2$S, templateObject_3$I, templateObject_4$x, templateObject_5$q, templateObject_6$o, templateObject_7$l;
13844
13844
 
13845
13845
  var ImageProductSlide$1 = function (_a) {
13846
13846
  var _b;
@@ -14373,7 +14373,7 @@ var Container$K = newStyled.div(templateObject_6$m || (templateObject_6$m = __ma
14373
14373
  minWidth: ['90%', 'var(--component-modal-minWidth)'],
14374
14374
  });
14375
14375
  }, visibleStyle, transformStyle);
14376
- var Overlay = newStyled.div(templateObject_7$j || (templateObject_7$j = __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);
14376
+ 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);
14377
14377
  var Modal = function (_a) {
14378
14378
  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;
14379
14379
  var _e = useModal(id), opened = _e.opened, close = _e.close;
@@ -14414,7 +14414,7 @@ var useModal = function (id) {
14414
14414
  close: close,
14415
14415
  }); }, [close, open, opened]);
14416
14416
  };
14417
- var templateObject_1$_, templateObject_2$L, templateObject_3$E, templateObject_4$v, templateObject_5$o, templateObject_6$m, templateObject_7$j;
14417
+ var templateObject_1$_, templateObject_2$L, templateObject_3$E, templateObject_4$v, templateObject_5$o, templateObject_6$m, templateObject_7$k;
14418
14418
 
14419
14419
  var htmlReactParser = {exports: {}};
14420
14420
 
@@ -18298,7 +18298,7 @@ var Tag$1 = newStyled.div(templateObject_3$D || (templateObject_3$D = __makeTemp
18298
18298
  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"])));
18299
18299
  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"])));
18300
18300
  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"])));
18301
- var IconPlaceholder = newStyled.div(templateObject_7$i || (templateObject_7$i = __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"])));
18301
+ 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"])));
18302
18302
  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"])));
18303
18303
  var PackSelector = function (_a) {
18304
18304
  var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange, currencyCode = _a.currencyCode;
@@ -18329,7 +18329,7 @@ var PackCard = function (_a) {
18329
18329
  currency: currencyCode || 'USD',
18330
18330
  }), ' ', "each"] }), void 0)] }), void 0));
18331
18331
  };
18332
- var templateObject_1$X, templateObject_2$I, templateObject_3$D, templateObject_4$u, templateObject_5$n, templateObject_6$l, templateObject_7$i, templateObject_8$d;
18332
+ 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;
18333
18333
 
18334
18334
  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"])));
18335
18335
  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"])));
@@ -18475,13 +18475,17 @@ var PriceContainer = newStyled.div(templateObject_4$s || (templateObject_4$s = _
18475
18475
  });
18476
18476
  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"])));
18477
18477
  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"])));
18478
+ 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) {
18479
+ var theme = _a.theme;
18480
+ return theme.colors.semantic.urgent.color;
18481
+ });
18478
18482
  var SimpleOrderItem = function (_a) {
18479
18483
  var _b, _c, _d, _e, _f, _g, _h, _j;
18480
- 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;
18484
+ 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;
18481
18485
  var theme = useTheme();
18482
- return (jsxs$1(Container$E, __assign$1({ className: className }, { children: [jsxs$1(ImageContainer$3, { children: [jsx$1(Image$3, { src: image.src, alt: image.alt, width: "4.063rem", height: "5.375rem", objectFit: "cover", objectPosition: "center" }, void 0), quantity ? (jsx$1(Quantity, __assign$1({ "data-testid": "order-item-quantity" }, { children: jsx$1(StyledSpan, { children: quantity }, void 0) }), void 0)) : null] }, void 0), jsxs$1(DescriptionContainer$1, __assign$1({ "data-testid": "order-item-description-container", theme: theme }, { children: [jsx$1(Title$3, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "product-title" }, { children: title }), void 0), jsx$1(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, jsxs$1(PriceContainer, __assign$1({ "data-testid": "order-item-price-container", withTag: !!tag, theme: theme }, { children: [tag && (jsx$1(OfferBanner, { discountAppliedText: tag === null || tag === void 0 ? void 0 : tag.text, backgroundColor: tag === null || tag === void 0 ? void 0 : tag.backgroundColor }, void 0)), jsx$1(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));
18486
+ return (jsxs$1(Container$E, __assign$1({ className: className }, { children: [jsxs$1(ImageContainer$3, { children: [jsx$1(Image$3, { src: image.src, alt: image.alt, width: "4.063rem", height: "5.375rem", objectFit: "cover", objectPosition: "center" }, void 0), quantity ? (jsx$1(Quantity, __assign$1({ "data-testid": "order-item-quantity" }, { children: jsx$1(StyledSpan, { children: quantity }, void 0) }), void 0)) : null] }, void 0), jsxs$1(DescriptionContainer$1, __assign$1({ "data-testid": "order-item-description-container", theme: theme }, { children: [jsx$1(Title$3, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "product-title" }, { children: title }), void 0), subtitle && (jsx$1(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 && jsx$1(Gift, { children: "Limited Time Only" }, void 0), jsxs$1(PriceContainer, __assign$1({ "data-testid": "order-item-price-container", withTag: !!tag, theme: theme }, { children: [tag && (jsx$1(OfferBanner, { discountAppliedText: tag === null || tag === void 0 ? void 0 : tag.text, backgroundColor: tag === null || tag === void 0 ? void 0 : tag.backgroundColor }, void 0)), isGift ? (jsx$1(Gift, { children: "GIFT" }, void 0)) : (jsx$1(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));
18483
18487
  };
18484
- var templateObject_1$U, templateObject_2$G, templateObject_3$B, templateObject_4$s, templateObject_5$m, templateObject_6$k;
18488
+ var templateObject_1$U, templateObject_2$G, templateObject_3$B, templateObject_4$s, templateObject_5$m, templateObject_6$k, templateObject_7$i;
18485
18489
 
18486
18490
  var P$1 = newStyled.p(function (_a) {
18487
18491
  var color = _a.color;