@trafilea/afrodita-components 6.11.1 → 6.12.0

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 -2
  2. package/build/index.esm.js +19 -18
  3. package/build/index.esm.js.map +1 -1
  4. package/build/index.js +19 -18
  5. package/build/index.js.map +1 -1
  6. package/package.json +1 -1
package/build/index.d.ts CHANGED
@@ -2189,6 +2189,7 @@ interface ProductItemSmallMobileProps$1 extends ProductItemProps {
2189
2189
  size: ComponentSize.Medium | ComponentSize.Small | ComponentSize.Large;
2190
2190
  imageHover?: ImageProps;
2191
2191
  topTag?: JSX.Element;
2192
+ topRightTag?: JSX.Element;
2192
2193
  bottomTag?: JSX.Element;
2193
2194
  onClick?: () => void;
2194
2195
  originalPriceStyled?: boolean;
@@ -2262,7 +2263,7 @@ declare function withProductGrid<P extends ProductItemProps>(ProductItemComponen
2262
2263
  declare const Collection: {
2263
2264
  ProductItemMobile: React$1.FC<ProductItemSmallMobileProps>;
2264
2265
  withProductGrid: typeof withProductGrid;
2265
- ProductItemTK: ({ title, titleStyle, hasSpacing, textContainerGap, customSizeRating, image, ImageBorderRadius, imageHover, price, rating, size, alignName, url, className, topTag, bottomTag, onClick, priceDisplayType, originalPriceStyled, priceAtBottom, priceLoading, noFollow, colorPicker, isBNPL, hasStrength, clubPrice, showClubPriceLabel, }: ProductItemSmallMobileProps$1) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
2266
+ ProductItemTK: ({ title, titleStyle, hasSpacing, textContainerGap, customSizeRating, image, ImageBorderRadius, imageHover, price, rating, size, alignName, url, className, topTag, topRightTag, bottomTag, onClick, priceDisplayType, originalPriceStyled, priceAtBottom, priceLoading, noFollow, colorPicker, isBNPL, hasStrength, clubPrice, showClubPriceLabel, }: ProductItemSmallMobileProps$1) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
2266
2267
  };
2267
2268
 
2268
2269
  interface IconProps {
@@ -3178,7 +3179,7 @@ declare const CategoryTag: ({ text, size, className, styledBorder }: CategoryTag
3178
3179
 
3179
3180
  interface CategorySquareTagProps {
3180
3181
  text: string;
3181
- size: ComponentSize.Large | ComponentSize.Medium | ComponentSize.Small;
3182
+ size: ComponentSize.Large | ComponentSize.Medium | ComponentSize.Small | ComponentSize.XSmall;
3182
3183
  className?: string;
3183
3184
  styledBorder?: boolean;
3184
3185
  }
package/build/index.esm.js CHANGED
@@ -4162,7 +4162,7 @@ var TAGS = {
4162
4162
  display2: newStyled.h2(templateObject_5$v || (templateObject_5$v = __makeTemplateObject([""], [""]))),
4163
4163
  display3: newStyled.h3(templateObject_6$q || (templateObject_6$q = __makeTemplateObject([""], [""]))),
4164
4164
  heading1: newStyled.h1(templateObject_7$i || (templateObject_7$i = __makeTemplateObject([""], [""]))),
4165
- heading2: newStyled.h2(templateObject_8$f || (templateObject_8$f = __makeTemplateObject([""], [""]))),
4165
+ heading2: newStyled.h2(templateObject_8$g || (templateObject_8$g = __makeTemplateObject([""], [""]))),
4166
4166
  heading3: newStyled.h3(templateObject_9$8 || (templateObject_9$8 = __makeTemplateObject([""], [""]))),
4167
4167
  heading4: newStyled.h4(templateObject_10$7 || (templateObject_10$7 = __makeTemplateObject([""], [""]))),
4168
4168
  heading5: newStyled.h5(templateObject_11$5 || (templateObject_11$5 = __makeTemplateObject([""], [""]))),
@@ -4291,7 +4291,7 @@ var DEFAULTS = {
4291
4291
  size: 'regular',
4292
4292
  },
4293
4293
  };
4294
- var templateObject_1$1U, templateObject_2$1g, templateObject_3$Z, templateObject_4$K, templateObject_5$v, templateObject_6$q, templateObject_7$i, templateObject_8$f, templateObject_9$8, templateObject_10$7, templateObject_11$5, templateObject_12$4, templateObject_13$3, templateObject_14$2, templateObject_15$2, templateObject_16$2, templateObject_17$2, templateObject_18$2, templateObject_19$2, templateObject_20$1;
4294
+ var templateObject_1$1U, templateObject_2$1g, templateObject_3$Z, templateObject_4$K, templateObject_5$v, templateObject_6$q, templateObject_7$i, templateObject_8$g, templateObject_9$8, templateObject_10$7, templateObject_11$5, templateObject_12$4, templateObject_13$3, templateObject_14$2, templateObject_15$2, templateObject_16$2, templateObject_17$2, templateObject_18$2, templateObject_19$2, templateObject_20$1;
4295
4295
 
4296
4296
  var Container$1b = newStyled.div(templateObject_1$1T || (templateObject_1$1T = __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"])));
4297
4297
  var Card$3 = newStyled.div(templateObject_2$1f || (templateObject_2$1f = __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"])));
@@ -5204,8 +5204,8 @@ var Title$7 = newStyled.h1(templateObject_6$o || (templateObject_6$o = __makeTem
5204
5204
  return color;
5205
5205
  });
5206
5206
  var IconContainer$5 = newStyled.div(templateObject_7$h || (templateObject_7$h = __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"])));
5207
- var CloseToolTip = newStyled.button(templateObject_8$e || (templateObject_8$e = __makeTemplateObject(["\n position: absolute;\n background: none;\n border: none;\n cursor: pointer;\n right: 0.3rem;\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: 0.3rem;\n top: 0.25rem;\n padding: 0px;\n z-index: 2;\n"])));
5208
- var templateObject_1$1I, templateObject_2$18, templateObject_3$V, templateObject_4$H, templateObject_5$t, templateObject_6$o, templateObject_7$h, templateObject_8$e;
5207
+ var CloseToolTip = newStyled.button(templateObject_8$f || (templateObject_8$f = __makeTemplateObject(["\n position: absolute;\n background: none;\n border: none;\n cursor: pointer;\n right: 0.3rem;\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: 0.3rem;\n top: 0.25rem;\n padding: 0px;\n z-index: 2;\n"])));
5208
+ var templateObject_1$1I, templateObject_2$18, templateObject_3$V, templateObject_4$H, templateObject_5$t, templateObject_6$o, templateObject_7$h, templateObject_8$f;
5209
5209
 
5210
5210
  var useOnClickOutside = function (ref, handler) {
5211
5211
  useEffect(function () {
@@ -5736,7 +5736,7 @@ var SubscriptionHeader$1 = newStyled.div(templateObject_5$s || (templateObject_5
5736
5736
  });
5737
5737
  var BenefitsContainer$1 = newStyled.div(templateObject_6$n || (templateObject_6$n = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
5738
5738
  var Benefit$1 = newStyled.div(templateObject_7$g || (templateObject_7$g = __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"])));
5739
- var BenefitText$1 = newStyled(Text$7)(templateObject_8$d || (templateObject_8$d = __makeTemplateObject(["\n line-height: 20px;\n margin-left: 9px;\n"], ["\n line-height: 20px;\n margin-left: 9px;\n"])));
5739
+ var BenefitText$1 = newStyled(Text$7)(templateObject_8$e || (templateObject_8$e = __makeTemplateObject(["\n line-height: 20px;\n margin-left: 9px;\n"], ["\n line-height: 20px;\n margin-left: 9px;\n"])));
5740
5740
  var SubscriptionDetails = newStyled(Text$7)(templateObject_9$7 || (templateObject_9$7 = __makeTemplateObject(["\n font-size: 16px;\n margin-right: 7px;\n"], ["\n font-size: 16px;\n margin-right: 7px;\n"])));
5741
5741
  var SubscriptionDetailsContainer = newStyled.div(templateObject_10$6 || (templateObject_10$6 = __makeTemplateObject(["\n margin-top: 18px;\n display: flex;\n"], ["\n margin-top: 18px;\n display: flex;\n"])));
5742
5742
  var DeliveryFrequencyLabel$1 = newStyled(Text$7)(templateObject_11$4 || (templateObject_11$4 = __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"])));
@@ -5745,7 +5745,7 @@ var StyledPrice$1 = newStyled(PriceLabelV2)(templateObject_12$3 || (templateObje
5745
5745
  return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
5746
5746
  });
5747
5747
  var Container$11 = newStyled.div(templateObject_13$2 || (templateObject_13$2 = __makeTemplateObject([""], [""])));
5748
- var templateObject_1$1C, templateObject_2$13, templateObject_3$S, templateObject_4$G, templateObject_5$s, templateObject_6$n, templateObject_7$g, templateObject_8$d, templateObject_9$7, templateObject_10$6, templateObject_11$4, templateObject_12$3, templateObject_13$2;
5748
+ var templateObject_1$1C, templateObject_2$13, templateObject_3$S, templateObject_4$G, templateObject_5$s, templateObject_6$n, templateObject_7$g, templateObject_8$e, templateObject_9$7, templateObject_10$6, templateObject_11$4, templateObject_12$3, templateObject_13$2;
5749
5749
 
5750
5750
  var radioIds$1 = {
5751
5751
  oneTime: {
@@ -5829,7 +5829,7 @@ var SubscriptionHeader = newStyled.div(templateObject_6$m || (templateObject_6$m
5829
5829
  return theme.colors.pallete.primary.color;
5830
5830
  });
5831
5831
  var BenefitsContainer = newStyled.div(templateObject_7$f || (templateObject_7$f = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
5832
- var Benefit = newStyled.div(templateObject_8$c || (templateObject_8$c = __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"])));
5832
+ var Benefit = newStyled.div(templateObject_8$d || (templateObject_8$d = __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"])));
5833
5833
  var BenefitText = newStyled(Text$7)(templateObject_9$6 || (templateObject_9$6 = __makeTemplateObject(["\n line-height: 20px;\n margin-left: 9px;\n"], ["\n line-height: 20px;\n margin-left: 9px;\n"])));
5834
5834
  var DeliveryFrequencyLabel = newStyled(Text$7)(templateObject_10$5 || (templateObject_10$5 = __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"])));
5835
5835
  var StyledPrice = newStyled(PriceLabelV2)(templateObject_11$3 || (templateObject_11$3 = __makeTemplateObject(["\n div p {\n color: ", ";\n }\n"], ["\n div p {\n color: ", ";\n }\n"])), function (_a) {
@@ -5837,7 +5837,7 @@ var StyledPrice = newStyled(PriceLabelV2)(templateObject_11$3 || (templateObject
5837
5837
  return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
5838
5838
  });
5839
5839
  var Container$10 = newStyled.div(templateObject_12$2 || (templateObject_12$2 = __makeTemplateObject(["\n margin-top: 20px;\n"], ["\n margin-top: 20px;\n"])));
5840
- var templateObject_1$1B, templateObject_2$12, templateObject_3$R, templateObject_4$F, templateObject_5$r, templateObject_6$m, templateObject_7$f, templateObject_8$c, templateObject_9$6, templateObject_10$5, templateObject_11$3, templateObject_12$2;
5840
+ var templateObject_1$1B, templateObject_2$12, templateObject_3$R, templateObject_4$F, templateObject_5$r, templateObject_6$m, templateObject_7$f, templateObject_8$d, templateObject_9$6, templateObject_10$5, templateObject_11$3, templateObject_12$2;
5841
5841
 
5842
5842
  var radioIds = {
5843
5843
  oneTime: {
@@ -6191,13 +6191,13 @@ var ClubMembersText = newStyled.span(templateObject_4$A || (templateObject_4$A =
6191
6191
  var MobileDollarPart = newStyled(DollarPart)(templateObject_5$p || (templateObject_5$p = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
6192
6192
  var MobileClubMembersText = newStyled(ClubMembersText)(templateObject_6$k || (templateObject_6$k = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
6193
6193
  var DesktopDollarPart = newStyled(DollarPart)(templateObject_7$e || (templateObject_7$e = __makeTemplateObject(["\n font-size: 13px;\n"], ["\n font-size: 13px;\n"])));
6194
- var DesktopClubMembersText = newStyled(ClubMembersText)(templateObject_8$b || (templateObject_8$b = __makeTemplateObject(["\n font-size: 13px;\n"], ["\n font-size: 13px;\n"])));
6194
+ var DesktopClubMembersText = newStyled(ClubMembersText)(templateObject_8$c || (templateObject_8$c = __makeTemplateObject(["\n font-size: 13px;\n"], ["\n font-size: 13px;\n"])));
6195
6195
  var ClubPriceLabel = function (_a) {
6196
6196
  var clubPrice = _a.clubPrice;
6197
6197
  var isMobile = useWindowDimensions().isMobile;
6198
6198
  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$W, { children: [jsx$1(DesktopDollarPart, { children: clubPrice }, void 0), jsx$1(DesktopClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) }, void 0));
6199
6199
  };
6200
- var templateObject_1$1n, templateObject_2$Y, templateObject_3$L, templateObject_4$A, templateObject_5$p, templateObject_6$k, templateObject_7$e, templateObject_8$b;
6200
+ var templateObject_1$1n, templateObject_2$Y, templateObject_3$L, templateObject_4$A, templateObject_5$p, templateObject_6$k, templateObject_7$e, templateObject_8$c;
6201
6201
 
6202
6202
  var Spacing = function (_a) {
6203
6203
  var size = _a.size, _b = _a.type, type = _b === void 0 ? 'block' : _b, children = _a.children, styleProp = _a.style;
@@ -6533,13 +6533,14 @@ var TopTagContainer$4 = newStyled.div(templateObject_5$m || (templateObject_5$m
6533
6533
  var style = _a.style;
6534
6534
  return style.width;
6535
6535
  });
6536
- var BottomTagContainer$4 = newStyled.div(templateObject_6$i || (templateObject_6$i = __makeTemplateObject(["\n position: absolute;\n bottom: 10%;\n left: 0;\n width: ", ";\n z-index: 1;\n"], ["\n position: absolute;\n bottom: 10%;\n left: 0;\n width: ", ";\n z-index: 1;\n"])), function (_a) {
6536
+ var TopRightTagContainer = newStyled.div(templateObject_6$i || (templateObject_6$i = __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"])));
6537
+ var BottomTagContainer$4 = newStyled.div(templateObject_7$c || (templateObject_7$c = __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) {
6537
6538
  var style = _a.style;
6538
6539
  return style.width;
6539
6540
  });
6540
- var MarginTopContainer = newStyled.div(templateObject_7$c || (templateObject_7$c = __makeTemplateObject(["\n margin-top: 8px;\n"], ["\n margin-top: 8px;\n"])));
6541
+ var MarginTopContainer = newStyled.div(templateObject_8$b || (templateObject_8$b = __makeTemplateObject(["\n margin-top: 8px;\n"], ["\n margin-top: 8px;\n"])));
6541
6542
  var ProductItemTK = function (_a) {
6542
- var title = _a.title, titleStyle = _a.titleStyle, _b = _a.hasSpacing, hasSpacing = _b === void 0 ? true : _b, textContainerGap = _a.textContainerGap, customSizeRating = _a.customSizeRating, image = _a.image, ImageBorderRadius = _a.ImageBorderRadius, imageHover = _a.imageHover, price = _a.price, rating = _a.rating, size = _a.size, _c = _a.alignName, alignName = _c === void 0 ? 'center' : _c, url = _a.url, className = _a.className, topTag = _a.topTag, bottomTag = _a.bottomTag, onClick = _a.onClick, _d = _a.priceDisplayType, priceDisplayType = _d === void 0 ? 'default' : _d, originalPriceStyled = _a.originalPriceStyled, priceAtBottom = _a.priceAtBottom, priceLoading = _a.priceLoading, _e = _a.noFollow, noFollow = _e === void 0 ? false : _e, _f = _a.colorPicker, colorPicker = _f === void 0 ? {
6543
+ var title = _a.title, titleStyle = _a.titleStyle, _b = _a.hasSpacing, hasSpacing = _b === void 0 ? true : _b, textContainerGap = _a.textContainerGap, customSizeRating = _a.customSizeRating, image = _a.image, ImageBorderRadius = _a.ImageBorderRadius, imageHover = _a.imageHover, price = _a.price, rating = _a.rating, size = _a.size, _c = _a.alignName, alignName = _c === void 0 ? 'center' : _c, url = _a.url, className = _a.className, topTag = _a.topTag, topRightTag = _a.topRightTag, bottomTag = _a.bottomTag, onClick = _a.onClick, _d = _a.priceDisplayType, priceDisplayType = _d === void 0 ? 'default' : _d, originalPriceStyled = _a.originalPriceStyled, priceAtBottom = _a.priceAtBottom, priceLoading = _a.priceLoading, _e = _a.noFollow, noFollow = _e === void 0 ? false : _e, _f = _a.colorPicker, colorPicker = _f === void 0 ? {
6543
6544
  display: false,
6544
6545
  position: 'top',
6545
6546
  component: undefined,
@@ -6581,14 +6582,14 @@ var ProductItemTK = function (_a) {
6581
6582
  : undefined }, void 0));
6582
6583
  };
6583
6584
  var RatingDisplay = function () { return (jsx(Rating, { size: size === ComponentSize.Large ? ComponentSize.Small : ComponentSize.XSmall, rating: rating.rating, reviews: rating.reviews, reviewsText: "", wrapWithParenthesis: true }, void 0)); };
6584
- return (jsxs(ProdCardContainer, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$R, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', className: "picContainer", onClick: onClick }, { children: [!!topTag || !!bottomTag ? (jsxs(ImageContainer$3, __assign$1({ width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height, "data-testid": "tags-image-container" }, { children: [jsx(Image$3, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, borderRadius: ImageBorderRadius, width: "100%", height: "100%" }, void 0), jsx(TopTagContainer$4, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: topTag }), void 0), jsx(BottomTagContainer$4, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: bottomTag }), void 0)] }), void 0)) : (jsx(Image$3, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, borderRadius: ImageBorderRadius, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)), imageHover ? (jsx(ImageHoverContainer, { className: "hover__image", src: imageHover.src, srcSet: getSrcSet(imageHover.src, 180, 360, 720, 960), loading: "lazy", alt: imageHover.alt, borderRadius: ImageBorderRadius, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)) : null] }), void 0), colorPicker.display && colorPicker.position === 'top' && (jsxs(Fragment, { children: [hasSpacing && jsx(Spacing, { size: space }, void 0), colorPicker.component] }, void 0)), jsxs(Container$R, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', onClick: onClick, className: "textContainer", style: { alignItems: showClubPriceLabel ? 'flex-start' : 'center', gap: textContainerGap } }, { children: [hasSpacing && jsx(Spacing, { size: space }, void 0), titleStyle ? (
6585
+ return (jsxs(ProdCardContainer, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$R, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', className: "picContainer", onClick: onClick }, { children: [!!topTag || !!bottomTag || !!topRightTag ? (jsxs(ImageContainer$3, __assign$1({ width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height, "data-testid": "tags-image-container" }, { children: [jsx(Image$3, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, borderRadius: ImageBorderRadius, width: "100%", height: "100%" }, void 0), jsx(TopTagContainer$4, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: topTag }), void 0), jsx(BottomTagContainer$4, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: bottomTag }), void 0), !!topRightTag && jsx(TopRightTagContainer, { children: topRightTag }, void 0)] }), void 0)) : (jsx(Image$3, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, borderRadius: ImageBorderRadius, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)), imageHover ? (jsx(ImageHoverContainer, { className: "hover__image", src: imageHover.src, srcSet: getSrcSet(imageHover.src, 180, 360, 720, 960), loading: "lazy", alt: imageHover.alt, borderRadius: ImageBorderRadius, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)) : null] }), void 0), colorPicker.display && colorPicker.position === 'top' && (jsxs(Fragment, { children: [hasSpacing && jsx(Spacing, { size: space }, void 0), colorPicker.component] }, void 0)), jsxs(Container$R, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', onClick: onClick, className: "textContainer", style: { alignItems: showClubPriceLabel ? 'flex-start' : 'center', gap: textContainerGap } }, { children: [hasSpacing && jsx(Spacing, { size: space }, void 0), titleStyle ? (
6585
6586
  // @ts-ignore
6586
6587
  jsx(Text$7, __assign$1({ variant: titleStyle.variant, weight: titleStyle.weight, size: titleStyle.size, style: {
6587
6588
  textAlign: showClubPriceLabel ? 'left' : alignName,
6588
6589
  marginTop: hasSpacing ? undefined : textContainerGap,
6589
6590
  } }, { children: title }), void 0)) : (jsx(Title$3, __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));
6590
6591
  };
6591
- var templateObject_1$1f, templateObject_2$U, templateObject_3$H, templateObject_4$w, templateObject_5$m, templateObject_6$i, templateObject_7$c;
6592
+ var templateObject_1$1f, templateObject_2$U, templateObject_3$H, templateObject_4$w, templateObject_5$m, templateObject_6$i, templateObject_7$c, templateObject_8$b;
6592
6593
 
6593
6594
  var Container$Q = newStyled.div(templateObject_1$1e || (templateObject_1$1e = __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"])));
6594
6595
  function withProductGrid(ProductItemComponent, data) {
@@ -19432,9 +19433,9 @@ var CategoryTag = function (_a) {
19432
19433
  var getStylesBySize$2 = function (size) {
19433
19434
  switch (size) {
19434
19435
  case ComponentSize.XSmall:
19435
- return { width: '50px', height: '46px', fontSize: '10px', lineHeight: '12.63px' };
19436
+ return { width: '55px', height: '40px', fontSize: '14px', lineHeight: '14.68px' };
19436
19437
  case ComponentSize.Small:
19437
- return { width: '54px', height: '50px', fontSize: '12px', lineHeight: '15.16px' };
19438
+ return { width: '54px', height: '50px', fontSize: '14px', lineHeight: '15.16px' };
19438
19439
  case ComponentSize.Medium:
19439
19440
  return { width: '60px', height: '56px', fontSize: '14px', lineHeight: '17.68px' };
19440
19441
  default:
@@ -19446,7 +19447,7 @@ var CategorySquareTag = function (_a) {
19446
19447
  var text = _a.text, size = _a.size, className = _a.className, _b = _a.styledBorder, styledBorder = _b === void 0 ? true : _b;
19447
19448
  var theme = useTheme();
19448
19449
  var stylesBySize = getStylesBySize$2(size);
19449
- return (jsx(Tag, { css: __assign$1({ backgroundColor: theme.colors.shades.white.color, color: theme.colors.shades['700'].color, borderRadius: styledBorder ? '0 0 0 20px' : 'unset', fontFamily: theme.fonts.config[3].family, fontStyle: theme.fonts.config[3].style, fontWeight: 500, textAlign: 'center' }, stylesBySize), text: text, className: className }, void 0));
19450
+ return (jsx(Tag, { css: __assign$1({ backgroundColor: theme.colors.shades.white.color, color: theme.colors.shades['700'].color, borderRadius: styledBorder ? '0 0 0 10px' : 'unset', fontFamily: theme.fonts.config[3].family, fontStyle: theme.fonts.config[3].style, fontWeight: 500, textAlign: 'center' }, stylesBySize), text: text, className: className }, void 0));
19450
19451
  };
19451
19452
 
19452
19453
  var getStylesBySize$1 = function (size, styledBorder, bottomRightBorderRounded, allBordersRounded) {