@trafilea/afrodita-components 5.0.0-beta.30 → 5.0.0-beta.33

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 +3 -1
  2. package/build/index.esm.js +59 -57
  3. package/build/index.esm.js.map +1 -1
  4. package/build/index.js +59 -57
  5. package/build/index.js.map +1 -1
  6. package/package.json +1 -1
package/build/index.d.ts CHANGED
@@ -1418,6 +1418,8 @@ interface ProductItemProps {
1418
1418
 
1419
1419
  interface ProductItemSmallMobileProps extends ProductItemProps {
1420
1420
  size: ComponentSize.Medium | ComponentSize.Small | ComponentSize.Large;
1421
+ topTag?: JSX.Element;
1422
+ bottomTag?: JSX.Element;
1421
1423
  onClick?: () => void;
1422
1424
  }
1423
1425
 
@@ -1427,7 +1429,7 @@ declare function withProductGrid<P extends ProductItemProps>(ProductItemComponen
1427
1429
  };
1428
1430
 
1429
1431
  declare const Collection: {
1430
- ProductItemMobile: ({ title, image, price, rating, size, tags, alignName, url, className, onClick, }: ProductItemSmallMobileProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
1432
+ ProductItemMobile: ({ title, image, price, rating, size, alignName, url, className, topTag, bottomTag, onClick, }: ProductItemSmallMobileProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
1431
1433
  withProductGrid: typeof withProductGrid;
1432
1434
  };
1433
1435
 
package/build/index.esm.js CHANGED
@@ -4065,8 +4065,8 @@ var SelectorSecondary = function (_a) {
4065
4065
  var TAGS = {
4066
4066
  hero1: newStyled.h1(templateObject_1$14 || (templateObject_1$14 = __makeTemplateObject([""], [""]))),
4067
4067
  hero2: newStyled.h2(templateObject_2$H || (templateObject_2$H = __makeTemplateObject([""], [""]))),
4068
- hero3: newStyled.h3(templateObject_3$t || (templateObject_3$t = __makeTemplateObject([""], [""]))),
4069
- display1: newStyled.h1(templateObject_4$j || (templateObject_4$j = __makeTemplateObject([""], [""]))),
4068
+ hero3: newStyled.h3(templateObject_3$u || (templateObject_3$u = __makeTemplateObject([""], [""]))),
4069
+ display1: newStyled.h1(templateObject_4$k || (templateObject_4$k = __makeTemplateObject([""], [""]))),
4070
4070
  display2: newStyled.h2(templateObject_5$c || (templateObject_5$c = __makeTemplateObject([""], [""]))),
4071
4071
  heading1: newStyled.h1(templateObject_6$8 || (templateObject_6$8 = __makeTemplateObject([""], [""]))),
4072
4072
  heading2: newStyled.h2(templateObject_7$5 || (templateObject_7$5 = __makeTemplateObject([""], [""]))),
@@ -4186,7 +4186,7 @@ var DEFAULTS = {
4186
4186
  size: 'regular',
4187
4187
  },
4188
4188
  };
4189
- var templateObject_1$14, templateObject_2$H, templateObject_3$t, templateObject_4$j, templateObject_5$c, templateObject_6$8, templateObject_7$5, templateObject_8$2, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17;
4189
+ var templateObject_1$14, templateObject_2$H, templateObject_3$u, templateObject_4$k, templateObject_5$c, templateObject_6$8, templateObject_7$5, templateObject_8$2, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17;
4190
4190
 
4191
4191
  var ButtonsContainer = newStyled.div(templateObject_1$13 || (templateObject_1$13 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n margin: ", ";\n"], ["\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n margin: ", ";\n"])), function (_a) {
4192
4192
  var inline = _a.inline;
@@ -4255,12 +4255,12 @@ var templateObject_1$12;
4255
4255
 
4256
4256
  var Container$F = newStyled.div(templateObject_1$11 || (templateObject_1$11 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n font-size: 0.88rem;\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n font-size: 0.88rem;\n"])));
4257
4257
  var P$3 = newStyled.p(templateObject_2$G || (templateObject_2$G = __makeTemplateObject(["\n margin: 0;\n"], ["\n margin: 0;\n"])));
4258
- var PercentageSpan = newStyled.span(templateObject_3$s || (templateObject_3$s = __makeTemplateObject(["\n font-weight: 700;\n text-decoration-line: underline;\n cursor: pointer;\n"], ["\n font-weight: 700;\n text-decoration-line: underline;\n cursor: pointer;\n"])));
4258
+ var PercentageSpan = newStyled.span(templateObject_3$t || (templateObject_3$t = __makeTemplateObject(["\n font-weight: 700;\n text-decoration-line: underline;\n cursor: pointer;\n"], ["\n font-weight: 700;\n text-decoration-line: underline;\n cursor: pointer;\n"])));
4259
4259
  var SizeFitGuide = function (_a) {
4260
4260
  var title = _a.title, fitPercentage = _a.fitPercentage, onClick = _a.onClick, onClickFitPercentage = _a.onClickFitPercentage;
4261
4261
  return (jsxs$1(Container$F, { children: [jsx$1(TextButton, { LeadingIcon: Icon.PDP.Rule, size: ComponentSize.Small, text: title, onClick: onClick, uppercase: false }, void 0), !!fitPercentage && (jsxs$1(P$3, { children: ["Fit As Expected:", ' ', jsxs$1(PercentageSpan, __assign$1({ onClick: onClickFitPercentage, role: "button" }, { children: [fitPercentage, "%"] }), void 0)] }, void 0))] }, void 0));
4262
4262
  };
4263
- var templateObject_1$11, templateObject_2$G, templateObject_3$s;
4263
+ var templateObject_1$11, templateObject_2$G, templateObject_3$t;
4264
4264
 
4265
4265
  var getStylesBySize$6 = function (size) {
4266
4266
  switch (size) {
@@ -4376,7 +4376,7 @@ var Price = newStyled.h1(templateObject_2$E || (templateObject_2$E = __makeTempl
4376
4376
  var margin = _a.margin, size = _a.size;
4377
4377
  return (margin ? (_b = getStylesBySize$5(size)) === null || _b === void 0 ? void 0 : _b.margin : '0');
4378
4378
  });
4379
- var TagContainer = newStyled.h1(templateObject_3$r || (templateObject_3$r = __makeTemplateObject(["\n margin: ", ";\n display: flex;\n align-items: center;\n"], ["\n margin: ", ";\n display: flex;\n align-items: center;\n"])), function (_a) {
4379
+ var TagContainer = newStyled.h1(templateObject_3$s || (templateObject_3$s = __makeTemplateObject(["\n margin: ", ";\n display: flex;\n align-items: center;\n"], ["\n margin: ", ";\n display: flex;\n align-items: center;\n"])), function (_a) {
4380
4380
  var _b;
4381
4381
  var size = _a.size;
4382
4382
  return (_b = getStylesBySize$5(size)) === null || _b === void 0 ? void 0 : _b.margin;
@@ -4393,7 +4393,7 @@ var PriceLabel = function (_a) {
4393
4393
  var theme = useTheme();
4394
4394
  return (jsxs$1(Container$D, { children: [jsx$1(Price, __assign$1({ size: size, color: color || theme.colors.pallete.secondary.color, weight: 700, "data-testid": getTestId(testId, 'price') }, { children: finalPrice }), void 0), originalPrice && (jsx$1(Price, __assign$1({ size: size, color: theme.colors.shades['300'].color, margin: true, underlined: true, "data-testid": getTestId(testId, 'discount') }, { children: originalPrice }), void 0)), discount && (jsx$1(TagContainer, __assign$1({ size: size }, { children: jsx$1(DiscountTag, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }, void 0));
4395
4395
  };
4396
- var templateObject_1$$, templateObject_2$E, templateObject_3$r;
4396
+ var templateObject_1$$, templateObject_2$E, templateObject_3$s;
4397
4397
 
4398
4398
  var OneColorSelector = function (_a) {
4399
4399
  var color = _a.color, selected = _a.selected, testId = _a.testId;
@@ -4434,8 +4434,8 @@ var OutOfStock = function (_a) {
4434
4434
 
4435
4435
  var CustomRadioGroup = newStyled(lt)(templateObject_1$_ || (templateObject_1$_ = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
4436
4436
  newStyled(lt.Label)(templateObject_2$D || (templateObject_2$D = __makeTemplateObject(["\n font-size: 0.88rem;\n"], ["\n font-size: 0.88rem;\n"])));
4437
- var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$q || (templateObject_3$q = __makeTemplateObject(["\n margin-right: 8px;\n\n svg {\n cursor: pointer;\n }\n"], ["\n margin-right: 8px;\n\n svg {\n cursor: pointer;\n }\n"])));
4438
- var Span = newStyled.span(templateObject_4$i || (templateObject_4$i = __makeTemplateObject(["\n font-weight: 600;\n"], ["\n font-weight: 600;\n"])));
4437
+ var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$r || (templateObject_3$r = __makeTemplateObject(["\n margin-right: 8px;\n\n svg {\n cursor: pointer;\n }\n"], ["\n margin-right: 8px;\n\n svg {\n cursor: pointer;\n }\n"])));
4438
+ var Span = newStyled.span(templateObject_4$j || (templateObject_4$j = __makeTemplateObject(["\n font-weight: 600;\n"], ["\n font-weight: 600;\n"])));
4439
4439
  var OptionsContainer = newStyled.div(templateObject_5$b || (templateObject_5$b = __makeTemplateObject(["\n display: flex;\n margin-top: 0.63rem;\n flex-wrap: wrap;\n"], ["\n display: flex;\n margin-top: 0.63rem;\n flex-wrap: wrap;\n"])));
4440
4440
  var Label$2 = function (_a) {
4441
4441
  var label = _a.label, values = _a.values;
@@ -4454,7 +4454,7 @@ var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
4454
4454
  Option: Option,
4455
4455
  OptionsContainer: OptionsContainer,
4456
4456
  });
4457
- var templateObject_1$_, templateObject_2$D, templateObject_3$q, templateObject_4$i, templateObject_5$b;
4457
+ var templateObject_1$_, templateObject_2$D, templateObject_3$r, templateObject_4$j, templateObject_5$b;
4458
4458
 
4459
4459
  var Container$C = newStyled.div(templateObject_1$Z || (templateObject_1$Z = __makeTemplateObject(["\n width: 2rem;\n height: 2rem;\n border-radius: 50%;\n border: 0.081rem solid ", ";\n box-sizing: border-box;\n padding: 0.156rem;\n cursor: pointer;\n"], ["\n width: 2rem;\n height: 2rem;\n border-radius: 50%;\n border: 0.081rem solid ", ";\n box-sizing: border-box;\n padding: 0.156rem;\n cursor: pointer;\n"])), function (_a) {
4460
4460
  var borderColor = _a.borderColor;
@@ -8845,11 +8845,11 @@ var SliderNavigation = function (_a) {
8845
8845
 
8846
8846
  var horizontalStyles = css(templateObject_1$W || (templateObject_1$W = __makeTemplateObject(["\n grid-row: 2;\n grid-auto-flow: column;\n grid-column-gap: 6px;\n margin-top: 20px;\n max-width: 360px;\n overflow: auto;\n"], ["\n grid-row: 2;\n grid-auto-flow: column;\n grid-column-gap: 6px;\n margin-top: 20px;\n max-width: 360px;\n overflow: auto;\n"])));
8847
8847
  var verticalStyles = css(templateObject_2$B || (templateObject_2$B = __makeTemplateObject(["\n grid-row-gap: 20px;\n overflow: auto;\n"], ["\n grid-row-gap: 20px;\n overflow: auto;\n"])));
8848
- var Container$B = newStyled.div(templateObject_3$p || (templateObject_3$p = __makeTemplateObject(["\n display: grid;\n max-height: 45rem;\n height: min-content;\n align-items: flex-start;\n ", "\n"], ["\n display: grid;\n max-height: 45rem;\n height: min-content;\n align-items: flex-start;\n ", "\n"])), function (_a) {
8848
+ var Container$B = newStyled.div(templateObject_3$q || (templateObject_3$q = __makeTemplateObject(["\n display: grid;\n max-height: 45rem;\n height: min-content;\n align-items: flex-start;\n ", "\n"], ["\n display: grid;\n max-height: 45rem;\n height: min-content;\n align-items: flex-start;\n ", "\n"])), function (_a) {
8849
8849
  var position = _a.position;
8850
8850
  return (position == 'horizontal' ? horizontalStyles : verticalStyles);
8851
8851
  });
8852
- var Button$3 = newStyled.button(templateObject_4$h || (templateObject_4$h = __makeTemplateObject(["\n padding: 0;\n border: none;\n text-decoration: none;\n background: transparent;\n"], ["\n padding: 0;\n border: none;\n text-decoration: none;\n background: transparent;\n"])));
8852
+ var Button$3 = newStyled.button(templateObject_4$i || (templateObject_4$i = __makeTemplateObject(["\n padding: 0;\n border: none;\n text-decoration: none;\n background: transparent;\n"], ["\n padding: 0;\n border: none;\n text-decoration: none;\n background: transparent;\n"])));
8853
8853
  var ImagePreviewList = function (_a) {
8854
8854
  var images = _a.images, selectedImage = _a.selectedImage, onClick = _a.onClick, dataTestId = _a.dataTestId, position = _a.position;
8855
8855
  return (jsx$1(Container$B, __assign$1({ "data-testid": dataTestId, position: position, className: position }, { children: position == 'horizontal' ? (jsx$1("div", __assign$1({ style: { maxWidth: '360px' } }, { children: jsx$1(SliderNavigation, __assign$1({ speed: 200, infinite: false, arrows: {
@@ -8858,7 +8858,7 @@ var ImagePreviewList = function (_a) {
8858
8858
  arrowPadding: 1.625,
8859
8859
  }, adaptiveHeight: true, dots: false, slidesToShow: 4 }, { children: images.map(function (item) { return (jsx$1(Button$3, __assign$1({ onClick: function () { return onClick(item); } }, { children: jsx$1(ImageSmallPreview, { imageUrl: item.imageUrl, alt: item.alt, selected: item.key === selectedImage.key }, void 0) }), item.key)); }) }), void 0) }), void 0)) : (images.map(function (item) { return (jsx$1(Button$3, __assign$1({ onClick: function () { return onClick(item); } }, { children: jsx$1(ImageSmallPreview, { imageUrl: item.imageUrl, alt: item.alt, selected: item.key === selectedImage.key }, void 0) }), item.key)); })) }), void 0));
8860
8860
  };
8861
- var templateObject_1$W, templateObject_2$B, templateObject_3$p, templateObject_4$h;
8861
+ var templateObject_1$W, templateObject_2$B, templateObject_3$q, templateObject_4$i;
8862
8862
 
8863
8863
  var Img = newStyled.img(templateObject_1$V || (templateObject_1$V = __makeTemplateObject(["\n height: ", ";\n width: ", ";\n border-radius: ", ";\n object-fit: ", ";\n object-position: ", ";\n"], ["\n height: ", ";\n width: ", ";\n border-radius: ", ";\n object-fit: ", ";\n object-position: ", ";\n"])), function (props) { return props.height; }, function (props) { return props.width; }, function (props) { return props.borderRadius; }, function (props) { return props.objectFit; }, function (props) { return props.objectPosition; });
8864
8864
  var Image = function (_a) {
@@ -8868,13 +8868,13 @@ var Image = function (_a) {
8868
8868
  var templateObject_1$V;
8869
8869
 
8870
8870
  var Container$A = newStyled.div(templateObject_1$U || (templateObject_1$U = __makeTemplateObject(["\n position: relative;\n height: '45rem' &.styleforhorizontal {\n height: '30rem';\n }\n"], ["\n position: relative;\n height: '45rem' &.styleforhorizontal {\n height: '30rem';\n }\n"])));
8871
- var TopTagContainer$1 = newStyled.div(templateObject_2$A || (templateObject_2$A = __makeTemplateObject(["\n position: absolute;\n left: 0;\n top: 0;\n"], ["\n position: absolute;\n left: 0;\n top: 0;\n"])));
8872
- var BottomTagContainer$1 = newStyled.div(templateObject_3$o || (templateObject_3$o = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
8871
+ var TopTagContainer$2 = newStyled.div(templateObject_2$A || (templateObject_2$A = __makeTemplateObject(["\n position: absolute;\n left: 0;\n top: 0;\n"], ["\n position: absolute;\n left: 0;\n top: 0;\n"])));
8872
+ var BottomTagContainer$2 = newStyled.div(templateObject_3$p || (templateObject_3$p = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
8873
8873
  var ImageProductWithTags$1 = function (_a) {
8874
8874
  var image = _a.image, DiscountTagElement = _a.DiscountTagElement, BestSellerTagElement = _a.BestSellerTagElement, testId = _a.testId, position = _a.position;
8875
- return (jsxs$1(Container$A, __assign$1({ "data-testid": testId, className: "stylefor".concat(position) }, { children: [jsx$1(Image, { src: image.imageUrl, alt: image.alt, objectFit: "cover", objectPosition: "center", width: position == 'horizontal' ? '360px' : '530px', height: position == 'horizontal' ? 'auto' : '720px' }, void 0), jsx$1(TopTagContainer$1, { children: DiscountTagElement }, void 0), jsx$1(BottomTagContainer$1, { children: BestSellerTagElement }, void 0)] }), void 0));
8875
+ return (jsxs$1(Container$A, __assign$1({ "data-testid": testId, className: "stylefor".concat(position) }, { children: [jsx$1(Image, { src: image.imageUrl, alt: image.alt, objectFit: "cover", objectPosition: "center", width: position == 'horizontal' ? '360px' : '530px', height: position == 'horizontal' ? 'auto' : '720px' }, void 0), jsx$1(TopTagContainer$2, { children: DiscountTagElement }, void 0), jsx$1(BottomTagContainer$2, { children: BestSellerTagElement }, void 0)] }), void 0));
8876
8876
  };
8877
- var templateObject_1$U, templateObject_2$A, templateObject_3$o;
8877
+ var templateObject_1$U, templateObject_2$A, templateObject_3$p;
8878
8878
 
8879
8879
  var Container$z = newStyled.div(templateObject_1$T || (templateObject_1$T = __makeTemplateObject(["\n display: grid;\n grid-template-columns: auto auto;\n grid-column-gap: 20px;\n max-height: 45rem;\n width: fit-content;\n"], ["\n display: grid;\n grid-template-columns: auto auto;\n grid-column-gap: 20px;\n max-height: 45rem;\n width: fit-content;\n"])));
8880
8880
  var ProductGallery = function (_a) {
@@ -9250,7 +9250,7 @@ var ContentWrapper = newStyled.div(templateObject_2$y || (templateObject_2$y = _
9250
9250
  var borderColor = _a.borderColor;
9251
9251
  return borderColor;
9252
9252
  });
9253
- var TooltipArrowContainer = newStyled.div(templateObject_3$n || (templateObject_3$n = __makeTemplateObject(["\n width: 1.25rem;\n height: 0.75rem;\n display: flex;\n transform: rotate(", ");\n padding: ", ";\n margin: ", ";\n"], ["\n width: 1.25rem;\n height: 0.75rem;\n display: flex;\n transform: rotate(", ");\n padding: ", ";\n margin: ", ";\n"])), function (_a) {
9253
+ var TooltipArrowContainer = newStyled.div(templateObject_3$o || (templateObject_3$o = __makeTemplateObject(["\n width: 1.25rem;\n height: 0.75rem;\n display: flex;\n transform: rotate(", ");\n padding: ", ";\n margin: ", ";\n"], ["\n width: 1.25rem;\n height: 0.75rem;\n display: flex;\n transform: rotate(", ");\n padding: ", ";\n margin: ", ";\n"])), function (_a) {
9254
9254
  var position = _a.position;
9255
9255
  return getArrowRotation(position);
9256
9256
  }, function (_a) {
@@ -9260,7 +9260,7 @@ var TooltipArrowContainer = newStyled.div(templateObject_3$n || (templateObject_
9260
9260
  var position = _a.position;
9261
9261
  return getArrowContainerMargin(position);
9262
9262
  });
9263
- var TooltipText = newStyled.div(templateObject_4$g || (templateObject_4$g = __makeTemplateObject(["\n font-style: normal;\n font-weight: normal;\n font-size: 0.875rem;\n line-height: 1.125rem;\n margin: 0;\n color: ", ";\n"], ["\n font-style: normal;\n font-weight: normal;\n font-size: 0.875rem;\n line-height: 1.125rem;\n margin: 0;\n color: ", ";\n"])), function (_a) {
9263
+ var TooltipText = newStyled.div(templateObject_4$h || (templateObject_4$h = __makeTemplateObject(["\n font-style: normal;\n font-weight: normal;\n font-size: 0.875rem;\n line-height: 1.125rem;\n margin: 0;\n color: ", ";\n"], ["\n font-style: normal;\n font-weight: normal;\n font-size: 0.875rem;\n line-height: 1.125rem;\n margin: 0;\n color: ", ";\n"])), function (_a) {
9264
9264
  var color = _a.color;
9265
9265
  return color;
9266
9266
  });
@@ -9270,7 +9270,7 @@ var Title$5 = newStyled.h1(templateObject_6$7 || (templateObject_6$7 = __makeTem
9270
9270
  return color;
9271
9271
  });
9272
9272
  var IconContainer$5 = newStyled.div(templateObject_7$4 || (templateObject_7$4 = __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"])));
9273
- var templateObject_1$N, templateObject_2$y, templateObject_3$n, templateObject_4$g, templateObject_5$a, templateObject_6$7, templateObject_7$4;
9273
+ var templateObject_1$N, templateObject_2$y, templateObject_3$o, templateObject_4$h, templateObject_5$a, templateObject_6$7, templateObject_7$4;
9274
9274
 
9275
9275
  var Tooltip = function (_a) {
9276
9276
  var children = _a.children, position = _a.position, text = _a.text, _b = _a.align, align = _b === void 0 ? 'center' : _b, onClick = _a.onClick, header = _a.header;
@@ -9466,14 +9466,14 @@ var templateObject_1$L, templateObject_2$w;
9466
9466
 
9467
9467
  var Container$r = newStyled.div(templateObject_1$K || (templateObject_1$K = __makeTemplateObject(["\n padding: 0.625rem 1.5rem;\n"], ["\n padding: 0.625rem 1.5rem;\n"])));
9468
9468
  var Title$4 = newStyled.h1(templateObject_2$v || (templateObject_2$v = __makeTemplateObject(["\n font-weight: 700;\n font-size: 1rem;\n line-height: 1.25rem;\n color: ", ";\n margin: 0;\n margin-bottom: 0.125rem;\n text-align: center;\n"], ["\n font-weight: 700;\n font-size: 1rem;\n line-height: 1.25rem;\n color: ", ";\n margin: 0;\n margin-bottom: 0.125rem;\n text-align: center;\n"])), function (props) { return props.color; });
9469
- var Details$1 = newStyled.span(templateObject_3$m || (templateObject_3$m = __makeTemplateObject(["\n display: flex;\n align-items: center;\n font-weight: 400;\n font-size: 1rem;\n margin: 0;\n line-height: 1.5rem;\n justify-content: center;\n color: ", ";\n"], ["\n display: flex;\n align-items: center;\n font-weight: 400;\n font-size: 1rem;\n margin: 0;\n line-height: 1.5rem;\n justify-content: center;\n color: ", ";\n"])), function (props) { return props.color; });
9470
- var PriceContainer$1 = newStyled.span(templateObject_4$f || (templateObject_4$f = __makeTemplateObject(["\n margin: 0 0.313rem;\n display: flex;\n align-items: center;\n"], ["\n margin: 0 0.313rem;\n display: flex;\n align-items: center;\n"])));
9469
+ var Details$1 = newStyled.span(templateObject_3$n || (templateObject_3$n = __makeTemplateObject(["\n display: flex;\n align-items: center;\n font-weight: 400;\n font-size: 1rem;\n margin: 0;\n line-height: 1.5rem;\n justify-content: center;\n color: ", ";\n"], ["\n display: flex;\n align-items: center;\n font-weight: 400;\n font-size: 1rem;\n margin: 0;\n line-height: 1.5rem;\n justify-content: center;\n color: ", ";\n"])), function (props) { return props.color; });
9470
+ var PriceContainer$1 = newStyled.span(templateObject_4$g || (templateObject_4$g = __makeTemplateObject(["\n margin: 0 0.313rem;\n display: flex;\n align-items: center;\n"], ["\n margin: 0 0.313rem;\n display: flex;\n align-items: center;\n"])));
9471
9471
  var Simple = function (_a) {
9472
9472
  var title = _a.title, freeShippingText = _a.freeShippingText, price = _a.price, anyQtyForText = _a.anyQtyForText, backgroundColor = _a.backgroundColor, _b = _a.widthAuto, widthAuto = _b === void 0 ? false : _b;
9473
9473
  var theme = useTheme();
9474
9474
  return (jsx$1(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxs$1(Container$r, { children: [jsx$1(Title$4, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Title" }, { children: title }), void 0), jsxs$1(Details$1, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Details" }, { children: [anyQtyForText, jsx$1(PriceContainer$1, __assign$1({ "data-testid": "Price" }, { children: jsx$1(PriceLabel, { finalPrice: price, color: "#d3373c", size: ComponentSize.Small }, void 0) }), void 0), "+ ", freeShippingText] }), void 0)] }, void 0) }), void 0));
9475
9475
  };
9476
- var templateObject_1$K, templateObject_2$v, templateObject_3$m, templateObject_4$f;
9476
+ var templateObject_1$K, templateObject_2$v, templateObject_3$n, templateObject_4$g;
9477
9477
 
9478
9478
  var Bundle = {
9479
9479
  Minimalistic: Minimalistic,
@@ -9711,11 +9711,11 @@ var StyledInput = newStyled.input(templateObject_2$s || (templateObject_2$s = __
9711
9711
  var disabledColor = _a.disabledColor;
9712
9712
  return disabledColor;
9713
9713
  });
9714
- var InputWrapper = newStyled.div(templateObject_3$l || (templateObject_3$l = __makeTemplateObject(["\n position: relative;\n display: flex;\n height: ", ";\n"], ["\n position: relative;\n display: flex;\n height: ", ";\n"])), function (_a) {
9714
+ var InputWrapper = newStyled.div(templateObject_3$m || (templateObject_3$m = __makeTemplateObject(["\n position: relative;\n display: flex;\n height: ", ";\n"], ["\n position: relative;\n display: flex;\n height: ", ";\n"])), function (_a) {
9715
9715
  var size = _a.size;
9716
9716
  return (size === 'small' ? '36px' : '44px');
9717
9717
  });
9718
- var templateObject_1$G, templateObject_2$s, templateObject_3$l;
9718
+ var templateObject_1$G, templateObject_2$s, templateObject_3$m;
9719
9719
 
9720
9720
  var BaseInput = function (_a) {
9721
9721
  var _b;
@@ -9815,12 +9815,12 @@ var SuccessContainer = newStyled.div(templateObject_1$E || (templateObject_1$E =
9815
9815
  return (size === 'small' ? '36px' : '');
9816
9816
  });
9817
9817
  var SuccessMessage = newStyled.div(templateObject_2$q || (templateObject_2$q = __makeTemplateObject(["\n background-color: #dfefe0;\n border: 0.063rem solid #5ead63;\n border-radius: 0.5rem;\n width: 100%;\n flex: 1;\n display: flex;\n align-items: center;\n padding: 0 1rem;\n box-sizing: border-box;\n"], ["\n background-color: #dfefe0;\n border: 0.063rem solid #5ead63;\n border-radius: 0.5rem;\n width: 100%;\n flex: 1;\n display: flex;\n align-items: center;\n padding: 0 1rem;\n box-sizing: border-box;\n"])));
9818
- var SuccessText = newStyled.span(templateObject_3$k || (templateObject_3$k = __makeTemplateObject(["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 600;\n margin-left: 0.313rem;\n"], ["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 600;\n margin-left: 0.313rem;\n"])));
9818
+ var SuccessText = newStyled.span(templateObject_3$l || (templateObject_3$l = __makeTemplateObject(["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 600;\n margin-left: 0.313rem;\n"], ["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 600;\n margin-left: 0.313rem;\n"])));
9819
9819
  var Success = function (_a) {
9820
9820
  var children = _a.children, successText = _a.successText, size = _a.size;
9821
9821
  return (jsxs$1(SuccessContainer, __assign$1({ size: size }, { children: [jsxs$1(SuccessMessage, { children: [jsx$1(Icon.Actions.Check, { fill: "#5EAD63", width: 1.375, height: 1.063 }, void 0), jsx$1(SuccessText, { children: successText }, void 0)] }, void 0), children] }), void 0));
9822
9822
  };
9823
- var templateObject_1$E, templateObject_2$q, templateObject_3$k;
9823
+ var templateObject_1$E, templateObject_2$q, templateObject_3$l;
9824
9824
 
9825
9825
  var ButtonContainer = newStyled.div(templateObject_1$D || (templateObject_1$D = __makeTemplateObject(["\n margin-left: 0.625rem;\n\n button {\n width: 100%;\n height: 100%;\n background-color: ", ";\n }\n"], ["\n margin-left: 0.625rem;\n\n button {\n width: 100%;\n height: 100%;\n background-color: ", ";\n }\n"])), function (_a) {
9826
9826
  var status = _a.status, type = _a.type, theme = _a.theme;
@@ -9898,23 +9898,23 @@ var templateObject_1$A;
9898
9898
 
9899
9899
  var Wrapper$2 = newStyled.div(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n"])));
9900
9900
  var GrandTotal = newStyled.h1(templateObject_2$o || (templateObject_2$o = __makeTemplateObject(["\n margin: 0;\n font-size: 1.5rem;\n line-height: 2rem;\n font-weight: 700;\n color: ", ";\n display: flex;\n align-items: center;\n"], ["\n margin: 0;\n font-size: 1.5rem;\n line-height: 2rem;\n font-weight: 700;\n color: ", ";\n display: flex;\n align-items: center;\n"])), function (props) { return props.color; });
9901
- var Currency = newStyled.span(templateObject_3$j || (templateObject_3$j = __makeTemplateObject(["\n margin: 0;\n margin-right: 0.625rem;\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 600;\n"], ["\n margin: 0;\n margin-right: 0.625rem;\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 600;\n"])));
9902
- var Container$l = newStyled.div(templateObject_4$e || (templateObject_4$e = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n width: 100%;\n margin-top: 0.625rem;\n color: ", ";\n"], ["\n display: flex;\n justify-content: space-between;\n width: 100%;\n margin-top: 0.625rem;\n color: ", ";\n"])), function (props) { return props.highlightColor; });
9901
+ var Currency = newStyled.span(templateObject_3$k || (templateObject_3$k = __makeTemplateObject(["\n margin: 0;\n margin-right: 0.625rem;\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 600;\n"], ["\n margin: 0;\n margin-right: 0.625rem;\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 600;\n"])));
9902
+ var Container$l = newStyled.div(templateObject_4$f || (templateObject_4$f = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n width: 100%;\n margin-top: 0.625rem;\n color: ", ";\n"], ["\n display: flex;\n justify-content: space-between;\n width: 100%;\n margin-top: 0.625rem;\n color: ", ";\n"])), function (props) { return props.highlightColor; });
9903
9903
  var Discount = newStyled.h3(templateObject_5$9 || (templateObject_5$9 = __makeTemplateObject(["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 600;\n"], ["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 600;\n"])));
9904
9904
  var Total = function (_a) {
9905
9905
  var total = _a.total, currency = _a.currency, saving = _a.saving, _b = _a.highlightColor, highlightColor = _b === void 0 ? '#2f806a' : _b;
9906
9906
  var theme = useTheme();
9907
9907
  return (jsxs$1(Wrapper$2, __assign$1({ "data-testid": "total-wrapper" }, { children: [jsxs$1(GrandTotal, __assign$1({ color: theme.colors.shades['550'].color }, { children: [jsx$1(Currency, { children: currency }, void 0), total] }), void 0), saving && (jsxs$1(Container$l, __assign$1({ "data-testid": "subtotal-container", highlightColor: highlightColor }, { children: [jsx$1(Discount, { children: saving.savingText }, void 0), jsx$1(Discount, { children: saving.amount }, void 0)] }), void 0))] }), void 0));
9908
9908
  };
9909
- var templateObject_1$z, templateObject_2$o, templateObject_3$j, templateObject_4$e, templateObject_5$9;
9909
+ var templateObject_1$z, templateObject_2$o, templateObject_3$k, templateObject_4$f, templateObject_5$9;
9910
9910
 
9911
9911
  var Wrapper$1 = newStyled.div(templateObject_1$y || (templateObject_1$y = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
9912
9912
  var color = _a.color;
9913
9913
  return color;
9914
9914
  });
9915
9915
  var ItemContainer = newStyled.div(templateObject_2$n || (templateObject_2$n = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n margin-bottom: 0.625rem;\n\n &:last-child {\n margin-bottom: 0;\n }\n"], ["\n display: flex;\n justify-content: space-between;\n margin-bottom: 0.625rem;\n\n &:last-child {\n margin-bottom: 0;\n }\n"])));
9916
- var Item$2 = newStyled.h4(templateObject_3$i || (templateObject_3$i = __makeTemplateObject(["\n margin: 0;\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 600;\n"], ["\n margin: 0;\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 600;\n"])));
9917
- var CouponItem = newStyled(Item$2)(templateObject_4$d || (templateObject_4$d = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
9916
+ var Item$2 = newStyled.h4(templateObject_3$j || (templateObject_3$j = __makeTemplateObject(["\n margin: 0;\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 600;\n"], ["\n margin: 0;\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 600;\n"])));
9917
+ var CouponItem = newStyled(Item$2)(templateObject_4$e || (templateObject_4$e = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
9918
9918
  var color = _a.color;
9919
9919
  return color;
9920
9920
  });
@@ -9926,7 +9926,7 @@ var Subtotal = function (_a) {
9926
9926
  return (jsxs$1(ItemContainer, { children: [jsxs$1(CouponItem, __assign$1({ color: highlightColor }, { children: [coupon.couponText, " ", c.code, " ", coupon.appliedText] }), void 0), jsx$1(CouponItem, __assign$1({ color: highlightColor }, { children: c.amount }), void 0)] }, i));
9927
9927
  })] }), void 0));
9928
9928
  };
9929
- var templateObject_1$y, templateObject_2$n, templateObject_3$i, templateObject_4$d;
9929
+ var templateObject_1$y, templateObject_2$n, templateObject_3$j, templateObject_4$e;
9930
9930
 
9931
9931
  var Totals = {
9932
9932
  Total: Total,
@@ -9935,13 +9935,13 @@ var Totals = {
9935
9935
 
9936
9936
  var Container$k = newStyled.div(templateObject_1$x || (templateObject_1$x = __makeTemplateObject(["\n padding: 0.625rem 1.25rem;\n background-color: ", ";\n border-radius: 0.313rem;\n display: flex;\n margin-bottom: 0.938rem;\n"], ["\n padding: 0.625rem 1.25rem;\n background-color: ", ";\n border-radius: 0.313rem;\n display: flex;\n margin-bottom: 0.938rem;\n"])), function (props) { return props.color; });
9937
9937
  var IconContainer$3 = newStyled.div(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["\n width: 1rem;\n height: 0.875rem;\n margin-right: 0.5rem;\n margin-top: 0.125rem;\n"], ["\n width: 1rem;\n height: 0.875rem;\n margin-right: 0.5rem;\n margin-top: 0.125rem;\n"])));
9938
- var Text$3 = newStyled.p(templateObject_3$h || (templateObject_3$h = __makeTemplateObject(["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 400;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 400;\n margin: 0;\n color: ", ";\n"])), function (props) { return props.color; });
9939
- var Details = newStyled.span(templateObject_4$c || (templateObject_4$c = __makeTemplateObject(["\n color: ", ";\n font-weight: 700;\n"], ["\n color: ", ";\n font-weight: 700;\n"])), function (props) { return props.color; });
9938
+ var Text$3 = newStyled.p(templateObject_3$i || (templateObject_3$i = __makeTemplateObject(["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 400;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 400;\n margin: 0;\n color: ", ";\n"])), function (props) { return props.color; });
9939
+ var Details = newStyled.span(templateObject_4$d || (templateObject_4$d = __makeTemplateObject(["\n color: ", ";\n font-weight: 700;\n"], ["\n color: ", ";\n font-weight: 700;\n"])), function (props) { return props.color; });
9940
9940
  var Note = function (_a) {
9941
9941
  var accentColor = _a.accentColor, color = _a.color, backgroundColor = _a.backgroundColor, importantNoteText = _a.importantNoteText, text = _a.text;
9942
9942
  return (jsxs$1(Container$k, __assign$1({ color: backgroundColor, "data-testid": "Container" }, { children: [jsx$1(IconContainer$3, { children: jsx$1(Icon.Actions.LightExclamation, { fill: accentColor }, void 0) }, void 0), jsx$1("div", { children: jsxs$1(Text$3, __assign$1({ color: color }, { children: [jsxs$1(Details, __assign$1({ color: accentColor }, { children: [importantNoteText, ":"] }), void 0), " ", text] }), void 0) }, void 0)] }), void 0));
9943
9943
  };
9944
- var templateObject_1$x, templateObject_2$m, templateObject_3$h, templateObject_4$c;
9944
+ var templateObject_1$x, templateObject_2$m, templateObject_3$i, templateObject_4$d;
9945
9945
 
9946
9946
  /* eslint-disable no-param-reassign */
9947
9947
  var index$1 = function (breakpoints) {
@@ -10029,10 +10029,10 @@ var mediaQueries = index$1(["@media(max-width: 900px)", "@media(min-width: 900px
10029
10029
 
10030
10030
  var Title$3 = newStyled.h1(templateObject_1$w || (templateObject_1$w = __makeTemplateObject(["\n color: ", ";\n font-size: 1.25rem;\n line-height: 1.75rem;\n font-weight: 600;\n margin: 0;\n text-align: center;\n"], ["\n color: ", ";\n font-size: 1.25rem;\n line-height: 1.75rem;\n font-weight: 600;\n margin: 0;\n text-align: center;\n"])), function (props) { return props.color; });
10031
10031
  var Line = newStyled.div(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n width: 100%;\n height: 0.063rem;\n background-color: ", ";\n margin: 0.938rem 0;\n"], ["\n width: 100%;\n height: 0.063rem;\n background-color: ", ";\n margin: 0.938rem 0;\n"])), function (props) { return props.backgroundColor; });
10032
- var Row$1 = newStyled.div(templateObject_3$g || (templateObject_3$g = __makeTemplateObject(["\n display: flex;\n ", "\n justify-content: space-between;\n align-items: flex-start;\n"], ["\n display: flex;\n ", "\n justify-content: space-between;\n align-items: flex-start;\n"])), mediaQueries({
10032
+ var Row$1 = newStyled.div(templateObject_3$h || (templateObject_3$h = __makeTemplateObject(["\n display: flex;\n ", "\n justify-content: space-between;\n align-items: flex-start;\n"], ["\n display: flex;\n ", "\n justify-content: space-between;\n align-items: flex-start;\n"])), mediaQueries({
10033
10033
  flexDirection: ['column', 'row'],
10034
10034
  }));
10035
- var Col$1 = newStyled.div(templateObject_4$b || (templateObject_4$b = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n justify-content: center;\n flex: 1;\n ", "\n"], ["\n display: flex;\n flex-direction: column;\n justify-content: center;\n flex: 1;\n ", "\n"])), mediaQueries({
10035
+ var Col$1 = newStyled.div(templateObject_4$c || (templateObject_4$c = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n justify-content: center;\n flex: 1;\n ", "\n"], ["\n display: flex;\n flex-direction: column;\n justify-content: center;\n flex: 1;\n ", "\n"])), mediaQueries({
10036
10036
  margin: ['0', '0 1.25rem'],
10037
10037
  marginBottom: ['1.875rem', '0'],
10038
10038
  alignItems: ['center', 'flex-start'],
@@ -10056,7 +10056,7 @@ var DeliveryDetails = function (_a) {
10056
10056
  var theme = useTheme();
10057
10057
  return (jsxs$1("div", __assign$1({ "data-testid": "DeliveryDetails" }, { children: [jsx$1(Title$3, __assign$1({ color: theme.colors.pallete.secondary.color }, { children: deliveryDetailsText }), void 0), jsx$1(Line, { backgroundColor: theme.colors.shades['100'].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$1, __assign$1({ theme: theme }, { children: [jsxs$1(SectionTitle, __assign$1({ theme: theme }, { children: [jsx$1(IconContainer$2, __assign$1({ theme: theme }, { children: jsx$1(Icon.PDP.Clock, {}, 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$1, __assign$1({ theme: theme }, { children: [jsxs$1(SectionTitle, __assign$1({ theme: theme }, { children: [jsx$1(IconContainer$2, __assign$1({ theme: theme }, { children: jsx$1(Icon.Navigation.MapMarker, {}, 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$1, __assign$1({ theme: theme }, { children: [jsxs$1(SectionTitle, __assign$1({ theme: theme }, { children: [jsx$1(IconContainer$2, __assign$1({ theme: theme }, { children: jsx$1(Icon.Messaging.Messenger, {}, void 0) }), void 0), instantOrderUpdate.title] }), void 0), jsx$1(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: instantOrderUpdate.details }), void 0), 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));
10058
10058
  };
10059
- var templateObject_1$w, templateObject_2$l, templateObject_3$g, templateObject_4$b, templateObject_5$8, templateObject_6$6, templateObject_7$3, templateObject_8$1;
10059
+ var templateObject_1$w, templateObject_2$l, templateObject_3$h, templateObject_4$c, templateObject_5$8, templateObject_6$6, templateObject_7$3, templateObject_8$1;
10060
10060
 
10061
10061
  var Container$j = newStyled.div(templateObject_1$v || (templateObject_1$v = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n cursor: pointer;\n user-select: none;\n"], ["\n display: inline-flex;\n align-items: center;\n cursor: pointer;\n user-select: none;\n"])));
10062
10062
  var H1$2 = newStyled.h1(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 700;\n color: ", ";\n margin-right: 0.313rem;\n"], ["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 700;\n color: ", ";\n margin-right: 0.313rem;\n"])), function (props) { return props.color; });
@@ -10078,18 +10078,18 @@ var templateObject_1$u, templateObject_2$j;
10078
10078
 
10079
10079
  var TableElement = newStyled.table(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n box-sizing: border-box;\n border-radius: 0.5rem;\n border: 0.063rem solid ", ";\n border-spacing: 0;\n font-size: 0.875rem;\n line-height: 3.125rem;\n width: 100%;\n color: ", ";\n"], ["\n box-sizing: border-box;\n border-radius: 0.5rem;\n border: 0.063rem solid ", ";\n border-spacing: 0;\n font-size: 0.875rem;\n line-height: 3.125rem;\n width: 100%;\n color: ", ";\n"])), function (props) { return props.borderColor; }, function (props) { return props.color; });
10080
10080
  var TableCell = newStyled.td(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n padding: 0 1.25rem;\n text-align: center;\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n font-weight: 700;\n }\n"], ["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n padding: 0 1.25rem;\n text-align: center;\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n font-weight: 700;\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.borderColor; });
10081
- var TableHead = newStyled.th(templateObject_3$f || (templateObject_3$f = __makeTemplateObject(["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n font-weight: 700;\n\n &:last-child {\n border-right: none;\n }\n"], ["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n font-weight: 700;\n\n &:last-child {\n border-right: none;\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.borderColor; });
10082
- var TableRow = newStyled.tr(templateObject_4$a || (templateObject_4$a = __makeTemplateObject(["\n &:last-child {\n td {\n border-bottom: none;\n }\n }\n\n &.background {\n background-color: ", ";\n }\n"], ["\n &:last-child {\n td {\n border-bottom: none;\n }\n }\n\n &.background {\n background-color: ", ";\n }\n"])), function (props) { return props.backgroundColor; });
10081
+ var TableHead = newStyled.th(templateObject_3$g || (templateObject_3$g = __makeTemplateObject(["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n font-weight: 700;\n\n &:last-child {\n border-right: none;\n }\n"], ["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n font-weight: 700;\n\n &:last-child {\n border-right: none;\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.borderColor; });
10082
+ var TableRow = newStyled.tr(templateObject_4$b || (templateObject_4$b = __makeTemplateObject(["\n &:last-child {\n td {\n border-bottom: none;\n }\n }\n\n &.background {\n background-color: ", ";\n }\n"], ["\n &:last-child {\n td {\n border-bottom: none;\n }\n }\n\n &.background {\n background-color: ", ";\n }\n"])), function (props) { return props.backgroundColor; });
10083
10083
  var SizeTable = function (_a) {
10084
10084
  var headers = _a.headers, data = _a.data;
10085
10085
  var theme = useTheme();
10086
10086
  return (jsxs$1(TableElement, __assign$1({ color: theme.colors.shades['700'].color, borderColor: theme.colors.shades['100'].color }, { children: [jsx$1("thead", { children: jsx$1(TableRow, __assign$1({ backgroundColor: theme.colors.shades['10'].color }, { children: headers.map(function (header, index) { return (jsx$1(TableHead, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: header }), index)); }) }), void 0) }, void 0), jsx$1("tbody", { children: data.map(function (row, index) { return (jsx$1(TableRow, __assign$1({ className: index % 2 !== 0 ? '' : 'background', backgroundColor: theme.colors.shades['10'].color }, { children: row.map(function (cell, index) { return (jsx$1(TableCell, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }), index)); }) }, void 0)] }), void 0));
10087
10087
  };
10088
- var templateObject_1$t, templateObject_2$i, templateObject_3$f, templateObject_4$a;
10088
+ var templateObject_1$t, templateObject_2$i, templateObject_3$g, templateObject_4$b;
10089
10089
 
10090
10090
  var Container$h = newStyled.div(templateObject_1$s || (templateObject_1$s = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n width: auto;\n"], ["\n display: flex;\n flex-direction: row;\n width: auto;\n"])));
10091
10091
  var ImageContainer$1 = newStyled.div(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
10092
- var DescriptionContainer = newStyled.div(templateObject_3$e || (templateObject_3$e = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n ", ";\n width: 100%;\n"], ["\n display: flex;\n flex-direction: column;\n ", ";\n width: 100%;\n"])), mediaQueries({
10092
+ var DescriptionContainer = newStyled.div(templateObject_3$f || (templateObject_3$f = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n ", ";\n width: 100%;\n"], ["\n display: flex;\n flex-direction: column;\n ", ";\n width: 100%;\n"])), mediaQueries({
10093
10093
  marginLeft: ['0.938rem', '1.875rem'],
10094
10094
  }));
10095
10095
  var Title$2 = newStyled.h2(function (_a) {
@@ -10112,7 +10112,7 @@ var Subtitle = newStyled.h3(function (_a) {
10112
10112
  margin: '0.063rem 0',
10113
10113
  });
10114
10114
  });
10115
- var PriceContainer = newStyled.div(templateObject_4$9 || (templateObject_4$9 = __makeTemplateObject(["\n display: flex;\n ", ";\n height: 100%;\n align-items: end;\n margin-top: 0.219rem;\n"], ["\n display: flex;\n ", ";\n height: 100%;\n align-items: end;\n margin-top: 0.219rem;\n"])), function (_a) {
10115
+ var PriceContainer = newStyled.div(templateObject_4$a || (templateObject_4$a = __makeTemplateObject(["\n display: flex;\n ", ";\n height: 100%;\n align-items: end;\n margin-top: 0.219rem;\n"], ["\n display: flex;\n ", ";\n height: 100%;\n align-items: end;\n margin-top: 0.219rem;\n"])), function (_a) {
10116
10116
  var withTag = _a.withTag; _a.theme;
10117
10117
  return withTag
10118
10118
  ? mediaQueries({
@@ -10127,7 +10127,7 @@ var SimpleOrderItem = function (_a) {
10127
10127
  var theme = useTheme();
10128
10128
  return (jsxs$1(Container$h, { children: [jsxs$1(ImageContainer$1, { children: [jsx$1(Image, { 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: quantity }), void 0) : null] }, void 0), jsxs$1(DescriptionContainer, __assign$1({ "data-testid": "order-item-description-container", theme: theme }, { children: [jsx$1(Title$2, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0), jsx$1(Subtitle, __assign$1({ color: theme.colors.shades['700'].color }, { children: subtitle }), 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)), jsx$1(PriceLabel, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, color: price.color || theme.colors.shades['700'].color, size: ComponentSize.Small }, void 0)] }), void 0)] }), void 0)] }, void 0));
10129
10129
  };
10130
- var templateObject_1$s, templateObject_2$h, templateObject_3$e, templateObject_4$9, templateObject_5$7;
10130
+ var templateObject_1$s, templateObject_2$h, templateObject_3$f, templateObject_4$a, templateObject_5$7;
10131
10131
 
10132
10132
  function formatDate(date) {
10133
10133
  var day = date.getDate();
@@ -10141,10 +10141,10 @@ var Heading = newStyled.div(templateObject_2$g || (templateObject_2$g = __makeTe
10141
10141
  fontSize: ['14px', '16px'],
10142
10142
  lineHeight: ['22px', '24px'],
10143
10143
  }));
10144
- var Content = newStyled.div(templateObject_3$d || (templateObject_3$d = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n ", ";\n"], ["\n display: flex;\n justify-content: space-between;\n ", ";\n"])), mediaQueries({
10144
+ var Content = newStyled.div(templateObject_3$e || (templateObject_3$e = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n ", ";\n"], ["\n display: flex;\n justify-content: space-between;\n ", ";\n"])), mediaQueries({
10145
10145
  flexDirection: ['column', 'row'],
10146
10146
  }));
10147
- var ReviewContainer = newStyled.div(templateObject_4$8 || (templateObject_4$8 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n ", ";\n"], ["\n display: flex;\n flex-direction: column;\n ", ";\n"])), mediaQueries({
10147
+ var ReviewContainer = newStyled.div(templateObject_4$9 || (templateObject_4$9 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n ", ";\n"], ["\n display: flex;\n flex-direction: column;\n ", ";\n"])), mediaQueries({
10148
10148
  margin: ['0 0 8px 0', '0 50px 0 0'],
10149
10149
  }));
10150
10150
  var H2$1 = newStyled.h2(templateObject_5$6 || (templateObject_5$6 = __makeTemplateObject(["\n font-weight: 600;\n ", ";\n margin: 0;\n"], ["\n font-weight: 600;\n ", ";\n margin: 0;\n"])), mediaQueries({
@@ -10161,15 +10161,15 @@ var Review = function (_a) {
10161
10161
  var theme = useTheme();
10162
10162
  return (jsxs$1(Container$g, { children: [jsxs$1(Heading, __assign$1({ theme: theme }, { children: [jsx$1(H2$1, __assign$1({ theme: theme }, { children: reviewerName }), void 0), formatDate(date)] }), void 0), jsx$1(StarList, { starsNumber: 5, rating: rating, fill: stars.color, size: stars.size }, void 0), jsxs$1(Content, __assign$1({ "data-testid": "review-content", theme: theme }, { children: [jsxs$1(ReviewContainer, __assign$1({ theme: theme }, { children: [jsx$1(H3$1, __assign$1({ theme: theme }, { children: title }), void 0), jsx$1(P$1, { children: description }, void 0)] }), void 0), jsx$1(Image, { src: image.src, alt: image.alt, width: "7.5rem", height: "10rem" }, void 0)] }), void 0)] }, void 0));
10163
10163
  };
10164
- var templateObject_1$r, templateObject_2$g, templateObject_3$d, templateObject_4$8, templateObject_5$6, templateObject_6$5, templateObject_7$2;
10164
+ var templateObject_1$r, templateObject_2$g, templateObject_3$e, templateObject_4$9, templateObject_5$6, templateObject_6$5, templateObject_7$2;
10165
10165
 
10166
10166
  var List = newStyled.ul(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n display: flex;\n margin: 0;\n padding: 0;\n"], ["\n display: flex;\n margin: 0;\n padding: 0;\n"])));
10167
10167
  var Item$1 = newStyled.li(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n width: 1.25rem;\n list-style: none;\n margin-right: 1.5rem;\n position: relative;\n line-height: 0;\n\n &:last-child {\n margin-right: 0;\n }\n\n &:hover {\n .dropdownWrapper {\n visibility: visible;\n }\n }\n"], ["\n width: 1.25rem;\n list-style: none;\n margin-right: 1.5rem;\n position: relative;\n line-height: 0;\n\n &:last-child {\n margin-right: 0;\n }\n\n &:hover {\n .dropdownWrapper {\n visibility: visible;\n }\n }\n"])));
10168
- var DropdownWrapper = newStyled.div(templateObject_3$c || (templateObject_3$c = __makeTemplateObject(["\n right: -0.938rem;\n min-width: 9.375rem;\n position: absolute;\n padding-top: 0.625rem;\n margin-top: -0.188rem;\n width: max-content;\n visibility: hidden;\n"], ["\n right: -0.938rem;\n min-width: 9.375rem;\n position: absolute;\n padding-top: 0.625rem;\n margin-top: -0.188rem;\n width: max-content;\n visibility: hidden;\n"])));
10169
- var ArrowContainer$1 = newStyled.div(templateObject_4$7 || (templateObject_4$7 = __makeTemplateObject(["\n transform: rotate(180deg);\n display: flex;\n justify-content: flex-start;\n margin-bottom: -0.063rem;\n padding-left: 0.938rem;\n"], ["\n transform: rotate(180deg);\n display: flex;\n justify-content: flex-start;\n margin-bottom: -0.063rem;\n padding-left: 0.938rem;\n"])));
10168
+ var DropdownWrapper = newStyled.div(templateObject_3$d || (templateObject_3$d = __makeTemplateObject(["\n right: -0.938rem;\n min-width: 9.375rem;\n position: absolute;\n padding-top: 0.625rem;\n margin-top: -0.188rem;\n width: max-content;\n visibility: hidden;\n"], ["\n right: -0.938rem;\n min-width: 9.375rem;\n position: absolute;\n padding-top: 0.625rem;\n margin-top: -0.188rem;\n width: max-content;\n visibility: hidden;\n"])));
10169
+ var ArrowContainer$1 = newStyled.div(templateObject_4$8 || (templateObject_4$8 = __makeTemplateObject(["\n transform: rotate(180deg);\n display: flex;\n justify-content: flex-start;\n margin-bottom: -0.063rem;\n padding-left: 0.938rem;\n"], ["\n transform: rotate(180deg);\n display: flex;\n justify-content: flex-start;\n margin-bottom: -0.063rem;\n padding-left: 0.938rem;\n"])));
10170
10170
  var StyledDropdown = newStyled.ul(templateObject_5$5 || (templateObject_5$5 = __makeTemplateObject(["\n margin: 0;\n padding: 0;\n border: 0.063rem solid ", ";\n border-radius: 0.5rem;\n display: flex;\n flex-direction: column;\n background-color: #ffffff;\n"], ["\n margin: 0;\n padding: 0;\n border: 0.063rem solid ", ";\n border-radius: 0.5rem;\n display: flex;\n flex-direction: column;\n background-color: #ffffff;\n"])), function (props) { return props.borderColor; });
10171
10171
  var DropdownItem = newStyled.li(templateObject_6$4 || (templateObject_6$4 = __makeTemplateObject(["\n list-style: none;\n padding: 0.813rem;\n border-bottom: 0.063rem solid ", ";\n font-size: 0.875rem;\n line-height: 1.125rem;\n font-weight: 400;\n color: ", ";\n cursor: pointer;\n user-select: none;\n\n &:hover {\n background-color: ", ";\n }\n\n &:last-child {\n border-bottom: none;\n border-radius: 0 0 0.5rem 0.5rem;\n }\n\n &:first-of-type {\n border-radius: 0.5rem 0.5rem 0 0;\n }\n\n &:only-child {\n border-radius: 0.5rem;\n }\n"], ["\n list-style: none;\n padding: 0.813rem;\n border-bottom: 0.063rem solid ", ";\n font-size: 0.875rem;\n line-height: 1.125rem;\n font-weight: 400;\n color: ", ";\n cursor: pointer;\n user-select: none;\n\n &:hover {\n background-color: ", ";\n }\n\n &:last-child {\n border-bottom: none;\n border-radius: 0 0 0.5rem 0.5rem;\n }\n\n &:first-of-type {\n border-radius: 0.5rem 0.5rem 0 0;\n }\n\n &:only-child {\n border-radius: 0.5rem;\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.color; }, function (props) { return props.hoverColor; });
10172
- var templateObject_1$q, templateObject_2$f, templateObject_3$c, templateObject_4$7, templateObject_5$5, templateObject_6$4;
10172
+ var templateObject_1$q, templateObject_2$f, templateObject_3$d, templateObject_4$8, templateObject_5$5, templateObject_6$4;
10173
10173
 
10174
10174
  var DropdownListIcons = function (_a) {
10175
10175
  var items = _a.items;
@@ -10195,11 +10195,11 @@ var templateObject_1$p;
10195
10195
 
10196
10196
  var Wrapper = newStyled.div(templateObject_1$o || (templateObject_1$o = __makeTemplateObject(["\n display: flex;\n align-items: center;\n padding: 0.625rem 1.25rem;\n background-color: ", ";\n width: 36.875rem;\n max-width: 100%;\n border-radius: 0.5rem;\n\n img {\n margin-right: ", ";\n }\n"], ["\n display: flex;\n align-items: center;\n padding: 0.625rem 1.25rem;\n background-color: ", ";\n width: 36.875rem;\n max-width: 100%;\n border-radius: 0.5rem;\n\n img {\n margin-right: ", ";\n }\n"])), function (props) { return props.backgroundColor; }, function (props) { return (props.rightToLeft ? '0' : '1.25rem'); });
10197
10197
  var Col = newStyled.div(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
10198
- var Row = newStyled.div(templateObject_3$b || (templateObject_3$b = __makeTemplateObject(["\n display: flex;\n align-items: center;\n width: 100%;\n margin-left: 10px;\n\n ", "};\n"], ["\n display: flex;\n align-items: center;\n width: 100%;\n margin-left: 10px;\n\n ", "};\n"])), function (props) {
10198
+ var Row = newStyled.div(templateObject_3$c || (templateObject_3$c = __makeTemplateObject(["\n display: flex;\n align-items: center;\n width: 100%;\n margin-left: 10px;\n\n ", "};\n"], ["\n display: flex;\n align-items: center;\n width: 100%;\n margin-left: 10px;\n\n ", "};\n"])), function (props) {
10199
10199
  return props.rightToLeft &&
10200
10200
  "\n flex-direction: row-reverse;\n justify-content: space-between;\n ";
10201
10201
  });
10202
- var H5 = newStyled.h5(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject(["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 500;\n margin-bottom: 0.125rem;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 500;\n margin-bottom: 0.125rem;\n margin: 0;\n color: ", ";\n"])), function (props) { return props.color; });
10202
+ var H5 = newStyled.h5(templateObject_4$7 || (templateObject_4$7 = __makeTemplateObject(["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 500;\n margin-bottom: 0.125rem;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 500;\n margin-bottom: 0.125rem;\n margin: 0;\n color: ", ";\n"])), function (props) { return props.color; });
10203
10203
  var H3 = newStyled.h3(templateObject_5$4 || (templateObject_5$4 = __makeTemplateObject(["\n font-size: 1.125rem;\n line-height: 1.75rem;\n font-weight: 700;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 1.125rem;\n line-height: 1.75rem;\n font-weight: 700;\n margin: 0;\n color: ", ";\n"])), function (props) { return props.color; });
10204
10204
  var FreeShipping = newStyled.span(templateObject_6$3 || (templateObject_6$3 = __makeTemplateObject(["\n font-weight: 600;\n color: ", ";\n"], ["\n font-weight: 600;\n color: ", ";\n"])), function (props) { return props.color; });
10205
10205
  var CrossSellCheckbox = function (_a) {
@@ -10207,7 +10207,7 @@ var CrossSellCheckbox = function (_a) {
10207
10207
  var theme = useTheme();
10208
10208
  return (jsxs$1(Wrapper, __assign$1({ backgroundColor: theme.colors.shades['10'].color, rightToLeft: Boolean(rightToLeft) }, { children: [jsx$1(Checkbox, { text: "", id: "checkbox", onChange: onChange, size: ComponentSize.Small, variant: "secondary" }, void 0), jsxs$1(Row, __assign$1({ rightToLeft: Boolean(rightToLeft) }, { children: [jsx$1(Image, { src: imageURL, alt: "Cross sell image", borderRadius: "0.5rem" }, void 0), jsxs$1(Col, { children: [jsx$1(H5, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0), jsxs$1(H3, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: [description, jsxs$1(FreeShipping, __assign$1({ color: theme.colors.shades['700'].color }, { children: [' ', "+ ", freeShippingText] }), void 0)] }), void 0)] }, void 0)] }), void 0)] }), void 0));
10209
10209
  };
10210
- var templateObject_1$o, templateObject_2$e, templateObject_3$b, templateObject_4$6, templateObject_5$4, templateObject_6$3;
10210
+ var templateObject_1$o, templateObject_2$e, templateObject_3$c, templateObject_4$7, templateObject_5$4, templateObject_6$3;
10211
10211
 
10212
10212
  var index = /*#__PURE__*/Object.freeze({
10213
10213
  __proto__: null,
@@ -10255,8 +10255,10 @@ var getStylesBySize = function (size) {
10255
10255
  };
10256
10256
  }
10257
10257
  };
10258
+ var TopTagContainer$1 = newStyled.div(templateObject_3$b || (templateObject_3$b = __makeTemplateObject(["\n position: absolute;\n left: 0;\n top: 0;\n width: inherit;\n"], ["\n position: absolute;\n left: 0;\n top: 0;\n width: inherit;\n"])));
10259
+ var BottomTagContainer$1 = newStyled.div(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject(["\n position: absolute;\n bottom: 15%;\n left: 0;\n width: inherit;\n"], ["\n position: absolute;\n bottom: 15%;\n left: 0;\n width: inherit;\n"])));
10258
10260
  var ProductItemMobile = function (_a) {
10259
- var title = _a.title, image = _a.image, price = _a.price, rating = _a.rating, size = _a.size, tags = _a.tags, _b = _a.alignName, alignName = _b === void 0 ? 'center' : _b, url = _a.url, className = _a.className, onClick = _a.onClick;
10261
+ var title = _a.title, image = _a.image, 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;
10260
10262
  var theme = useTheme();
10261
10263
  var styles = getStylesBySize(size);
10262
10264
  var space = useMemo(function () {
@@ -10267,9 +10269,9 @@ var ProductItemMobile = function (_a) {
10267
10269
  _a[ComponentSize.Small] = 2,
10268
10270
  _a)[size];
10269
10271
  }, [size]);
10270
- return (jsxs(Container$f, __assign$1({ as: url ? 'a' : 'div', href: url, className: className, onClick: onClick }, { children: [tags ? (jsxs(ImageContainer, __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, { src: image.src, alt: image.alt, width: "100%", height: "100%" }, void 0), (tags === null || tags === void 0 ? void 0 : tags.seasonOfferTagText) && (jsx(SeasonOfferTag, { text: tags.seasonOfferTagText, size: ComponentSize.Small, css: { position: 'absolute', top: 0, left: 0 } }, void 0)), (tags === null || tags === void 0 ? void 0 : tags.categoryTagText) && (jsx(CategoryTag, { text: tags.categoryTagText, size: ComponentSize.Small, css: { position: 'absolute', bottom: '1rem', left: 0 } }, void 0))] }), void 0)) : (jsx(Image, { src: image.src, 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)), jsx(Spacing, { size: space }, void 0), jsx(H1, __assign$1({ theme: theme, align: alignName }, { children: title }), void 0), jsx(Spacing, { size: space }, void 0), jsx(PriceLabel, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, color: price.color, size: ComponentSize.Small, testId: "volume-discount" }, void 0), jsx(Spacing, { size: space }, void 0), jsx(Rating, { size: size === ComponentSize.Large ? ComponentSize.Small : ComponentSize.XSmall, rating: rating.rating, reviews: rating.reviews, reviewsText: "", wrapWithParenthesis: true }, void 0)] }), void 0));
10272
+ return (jsxs(Container$f, __assign$1({ as: url ? 'a' : 'div', href: url, className: className, onClick: onClick }, { children: [!!topTag || !!bottomTag ? (jsxs(ImageContainer, __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, { src: image.src, alt: image.alt, width: "100%", height: "100%" }, void 0), jsx(TopTagContainer$1, { children: topTag }, void 0), jsx(BottomTagContainer$1, { children: bottomTag }, void 0)] }), void 0)) : (jsx(Image, { src: image.src, 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)), jsx(Spacing, { size: space }, void 0), jsx(H1, __assign$1({ theme: theme, align: alignName }, { children: title }), void 0), jsx(Spacing, { size: space }, void 0), jsx(PriceLabel, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, color: price.color, size: ComponentSize.Small, testId: "volume-discount" }, void 0), jsx(Spacing, { size: space }, void 0), jsx(Rating, { size: size === ComponentSize.Large ? ComponentSize.Small : ComponentSize.XSmall, rating: rating.rating, reviews: rating.reviews, reviewsText: "", wrapWithParenthesis: true }, void 0)] }), void 0));
10271
10273
  };
10272
- var templateObject_1$n, templateObject_2$d;
10274
+ var templateObject_1$n, templateObject_2$d, templateObject_3$b, templateObject_4$6;
10273
10275
 
10274
10276
  var Container$e = newStyled.div(templateObject_1$m || (templateObject_1$m = __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"])));
10275
10277
  function withProductGrid(ProductItemComponent, data) {