@trafilea/afrodita-components 6.28.4 → 6.28.5

package/build/index.d.ts

@@ -3773,6 +3773,7 @@ interface DiscountTagProps {
 }
 interface ProductCardProps extends ProductItemProps {
     size: ComponentSize.Medium | ComponentSize.Small | ComponentSize.Large;
+    ratingPos?: 'top' | 'bottom';
     imageHover?: ImageProps;
     topTag?: JSX.Element;
     bottomTag?: JSX.Element;

package/build/index.esm.js

@@ -3692,10 +3692,10 @@ function ClubPriceMemberLabel(_a) {
 
 var Container$1g = newStyled.div(templateObject_1$23 || (templateObject_1$23 = __makeTemplateObject(["\n  @keyframes shimmer {\n    100% {\n      transform: translateX(100%);\n    }\n  }\n\n  display: inline-block;\n  height: ", ";\n  width: ", ";\n  position: relative;\n  overflow: hidden;\n  background-color: ", ";\n  border-radius: ", ";\n  box-sizing: border-box;\n\n  ::after {\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    transform: translateX(-100%);\n    background-image: linear-gradient(\n      90deg,\n      ", ",\n      ", ",\n      ", "\n    );\n    animation: shimmer 2s infinite;\n    content: '';\n    box-sizing: border-box;\n  }\n"], ["\n  @keyframes shimmer {\n    100% {\n      transform: translateX(100%);\n    }\n  }\n\n  display: inline-block;\n  height: ", ";\n  width: ", ";\n  position: relative;\n  overflow: hidden;\n  background-color: ", ";\n  border-radius: ", ";\n  box-sizing: border-box;\n\n  ::after {\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    transform: translateX(-100%);\n    background-image: linear-gradient(\n      90deg,\n      ", ",\n      ", ",\n      ", "\n    );\n    animation: shimmer 2s infinite;\n    content: '';\n    box-sizing: border-box;\n  }\n"])), function (_a) {
     var height = _a.height;
-    return (height ? height : '1.5em');
+    return height !== null && height !== void 0 ? height : '1.5em';
 }, function (_a) {
     var width = _a.width;
-    return (width ? width : '100%');
+    return width !== null && width !== void 0 ? width : '100%';
 }, function (_a) {
     var theme = _a.theme;
     return theme.colors.background.disabled;
@@ -20495,13 +20495,23 @@ newStyled.div(templateObject_7$4 || (templateObject_7$4 = __makeTemplateObject([
 var DiscountLabel$2 = newStyled.div(templateObject_8$2 || (templateObject_8$2 = __makeTemplateObject(["\n  background-color: #c64844;\n  color: white;\n  font-size: 10px;\n  line-height: 14px;\n  padding: 4px 6px 4px 6px;\n  font-weight: bold;\n  border-radius: 4px;\n  margin-top: 2px;\n  height: fit-content;\n  &:empty {\n    display: none;\n  }\n"], ["\n  background-color: #c64844;\n  color: white;\n  font-size: 10px;\n  line-height: 14px;\n  padding: 4px 6px 4px 6px;\n  font-weight: bold;\n  border-radius: 4px;\n  margin-top: 2px;\n  height: fit-content;\n  &:empty {\n    display: none;\n  }\n"])));
 var templateObject_1$5, templateObject_2$4, templateObject_3$4, templateObject_4$4, templateObject_5$4, templateObject_6$4, templateObject_7$4, templateObject_8$2;
 
+var PriceLabelDisplay = function (_a) {
+    var price = _a.price, discountTag = _a.discountTag;
+    return (jsxs$1(Fragment$2, { children: [jsxs$1("div", __assign$1({ style: { display: 'flex' } }, { children: [jsx$1(PriceLabel, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, finalPriceStyled: false, color: price.color, size: ComponentSize.Large, testId: "volume-discount" }, void 0), (discountTag === null || discountTag === void 0 ? void 0 : discountTag.pos) === 'next to price' && (jsx$1(DiscountLabel$2, __assign$1({ style: { marginLeft: '5px' } }, { children: discountTag === null || discountTag === void 0 ? void 0 : discountTag.value }), void 0))] }), void 0), jsx$1("div", __assign$1({ style: { display: 'flex' } }, { children: (discountTag === null || discountTag === void 0 ? void 0 : discountTag.pos) === 'below price' && (jsx$1(DiscountLabel$2, __assign$1({ style: { marginLeft: '5px' } }, { children: discountTag === null || discountTag === void 0 ? void 0 : discountTag.value }), void 0)) }), void 0)] }, void 0));
+};
+
+var RatingDisplay = function (_a) {
+    var rating = _a.rating, size = _a.size, isRatingLoading = _a.isRatingLoading;
+    if (isRatingLoading) {
+        return jsx$1(SkeletonBox, { "data-testid": "rating-skeleton", height: "20px", width: "80px" }, void 0);
+    }
+    if (!rating.reviews)
+        return jsx$1(Fragment$2, {}, void 0);
+    return (jsx$1(Rating, { size: size === ComponentSize.Large ? ComponentSize.Small : ComponentSize.XSmall, rating: rating.rating, reviews: rating.reviews, reviewsText: "", wrapWithParenthesis: true }, void 0));
+};
+
 var getStylesBySize$2 = function (size) {
     switch (size) {
-        case ComponentSize.Medium:
-            return {
-                width: '205px',
-                height: '274px',
-            };
         case ComponentSize.Small:
             return {
                 width: '167px',
@@ -20512,7 +20522,7 @@ var getStylesBySize$2 = function (size) {
                 width: '262px',
                 height: '350px',
             };
-        /* istanbul ignore next */
+        case ComponentSize.Medium:
         default:
             return {
                 width: '205px',
@@ -20525,7 +20535,7 @@ var TopTagContainer$2 = newStyled.div(templateObject_1$4 || (templateObject_1$4
     return style.width;
 });
 var ProductCard = function (_a) {
-    var title = _a.title, image = _a.image, imageHover = _a.imageHover, price = _a.price, rating = _a.rating, size = _a.size, _b = _a.alignName, alignName = _b === void 0 ? 'center' : _b, url = _a.url, className = _a.className, topTag = _a.topTag, bottomTag = _a.bottomTag, onClick = _a.onClick, priceLoading = _a.priceLoading, _c = _a.noFollow, noFollow = _c === void 0 ? false : _c, isRatingLoading = _a.isRatingLoading, discountTag = _a.discountTag;
+    var title = _a.title, image = _a.image, imageHover = _a.imageHover, price = _a.price, rating = _a.rating, ratingPos = _a.ratingPos, 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, priceLoading = _a.priceLoading, _c = _a.noFollow, noFollow = _c === void 0 ? false : _c, isRatingLoading = _a.isRatingLoading, discountTag = _a.discountTag;
     var theme = useTheme();
     var styles = getStylesBySize$2(size);
     var space = useMemo(function () {
@@ -20536,17 +20546,7 @@ var ProductCard = function (_a) {
             _a[ComponentSize.Small] = 2,
             _a)[size];
     }, [size]);
-    var PriceLabelDisplay = function () {
-        return (jsxs$1(Fragment$2, { children: [jsxs$1("div", __assign$1({ style: { display: 'flex' } }, { children: [jsx$1(PriceLabel, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, finalPriceStyled: false, color: price.color, size: ComponentSize.Large, testId: "volume-discount" }, void 0), (discountTag === null || discountTag === void 0 ? void 0 : discountTag.pos) === 'next to price' && (jsx$1(DiscountLabel$2, __assign$1({ style: { marginLeft: '5px' } }, { children: discountTag === null || discountTag === void 0 ? void 0 : discountTag.value }), void 0))] }), void 0), jsx$1("div", __assign$1({ style: { display: 'flex' } }, { children: (discountTag === null || discountTag === void 0 ? void 0 : discountTag.pos) === 'below price' && (jsx$1(DiscountLabel$2, __assign$1({ style: { marginLeft: '5px' } }, { children: discountTag === null || discountTag === void 0 ? void 0 : discountTag.value }), void 0)) }), void 0)] }, void 0));
-    };
-    var RatingDisplay = function () {
-        if (isRatingLoading)
-            return jsx$1(SkeletonBox, { "data-testid": "rating-skeleton", height: "20px", width: "80px" }, void 0);
-        if (!rating.reviews)
-            return jsx$1(Fragment$2, {}, void 0);
-        return (jsx$1(Rating, { size: size === ComponentSize.Large ? ComponentSize.Small : ComponentSize.XSmall, rating: rating.rating, reviews: rating.reviews, reviewsText: "", wrapWithParenthesis: true }, void 0));
-    };
-    return (jsxs$1(ProdCardContainer$2, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs$1(Container$4, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', className: "picContainer", onClick: onClick }, { children: [!!topTag || !!bottomTag ? (jsxs$1(ImageContainer$1, __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$1(Image$3, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, width: "100%", height: "100%" }, void 0), jsx$1(TopTagContainer$2, __assign$1({ style: { width: 'inherit' } }, { children: topTag }), void 0), jsx$1(BottomTagContainer$2, __assign$1({ style: { width: 'inherit' } }, { children: bottomTag }), void 0)] }), void 0)) : (jsx$1(Image$3, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)), imageHover ? (jsx$1(ImageHoverContainer$1, { className: "hover__image", src: imageHover.src, srcSet: getSrcSet(imageHover.src, 180, 360, 720, 960), loading: "lazy", alt: imageHover.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)) : null] }), void 0), jsxs$1(Container$4, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', onClick: onClick, className: "textContainer", style: { alignItems: "".concat(size === ComponentSize.Small ? 'start' : 'center') } }, { children: [jsx$1(Spacing, { size: space }, void 0), jsx$1(RatingDisplay, {}, void 0), jsx$1(Spacing, { size: space }, void 0), jsx$1(Title$2, __assign$1({ theme: theme, align: alignName }, { children: title }), void 0), jsx$1(Spacing, { size: space }, void 0), priceLoading ? jsx$1(SkeletonBox, { height: "20px", width: "140px" }, void 0) : PriceLabelDisplay(), jsx$1(Spacing, { size: space }, void 0)] }), void 0)] }), void 0));
+    return (jsxs$1(ProdCardContainer$2, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs$1(Container$4, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', className: "picContainer", onClick: onClick }, { children: [!!topTag || !!bottomTag ? (jsxs$1(ImageContainer$1, __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$1(Image$3, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, width: "100%", height: "100%" }, void 0), jsx$1(TopTagContainer$2, __assign$1({ style: { width: 'inherit' } }, { children: topTag }), void 0), jsx$1(BottomTagContainer$2, __assign$1({ style: { width: 'inherit' } }, { children: bottomTag }), void 0)] }), void 0)) : (jsx$1(Image$3, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)), imageHover ? (jsx$1(ImageHoverContainer$1, { className: "hover__image", src: imageHover.src, srcSet: getSrcSet(imageHover.src, 180, 360, 720, 960), loading: "lazy", alt: imageHover.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)) : null] }), void 0), jsxs$1(Container$4, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', onClick: onClick, className: "textContainer", style: { alignItems: "".concat(size === ComponentSize.Small ? 'start' : 'center') } }, { children: [jsx$1(Spacing, { size: space }, void 0), ratingPos !== 'bottom' && (jsx$1(RatingDisplay, { rating: rating, size: size, isRatingLoading: isRatingLoading }, void 0)), jsx$1(Spacing, { size: space }, void 0), jsx$1(Title$2, __assign$1({ theme: theme, align: alignName }, { children: title }), void 0), jsx$1(Spacing, { size: space }, void 0), priceLoading ? (jsx$1(SkeletonBox, { height: "20px", width: "140px" }, void 0)) : (jsx$1(PriceLabelDisplay, { price: price, discountTag: discountTag }, void 0)), jsx$1(Spacing, { size: space }, void 0), ratingPos === 'bottom' && (jsx$1(RatingDisplay, { rating: rating, size: size, isRatingLoading: isRatingLoading }, void 0))] }), void 0)] }), void 0));
 };
 var templateObject_1$4;
 

package/build/index.js

@@ -3718,10 +3718,10 @@ function ClubPriceMemberLabel(_a) {
 
 var Container$1g = newStyled.div(templateObject_1$23 || (templateObject_1$23 = __makeTemplateObject(["\n  @keyframes shimmer {\n    100% {\n      transform: translateX(100%);\n    }\n  }\n\n  display: inline-block;\n  height: ", ";\n  width: ", ";\n  position: relative;\n  overflow: hidden;\n  background-color: ", ";\n  border-radius: ", ";\n  box-sizing: border-box;\n\n  ::after {\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    transform: translateX(-100%);\n    background-image: linear-gradient(\n      90deg,\n      ", ",\n      ", ",\n      ", "\n    );\n    animation: shimmer 2s infinite;\n    content: '';\n    box-sizing: border-box;\n  }\n"], ["\n  @keyframes shimmer {\n    100% {\n      transform: translateX(100%);\n    }\n  }\n\n  display: inline-block;\n  height: ", ";\n  width: ", ";\n  position: relative;\n  overflow: hidden;\n  background-color: ", ";\n  border-radius: ", ";\n  box-sizing: border-box;\n\n  ::after {\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    transform: translateX(-100%);\n    background-image: linear-gradient(\n      90deg,\n      ", ",\n      ", ",\n      ", "\n    );\n    animation: shimmer 2s infinite;\n    content: '';\n    box-sizing: border-box;\n  }\n"])), function (_a) {
     var height = _a.height;
-    return (height ? height : '1.5em');
+    return height !== null && height !== void 0 ? height : '1.5em';
 }, function (_a) {
     var width = _a.width;
-    return (width ? width : '100%');
+    return width !== null && width !== void 0 ? width : '100%';
 }, function (_a) {
     var theme = _a.theme;
     return theme.colors.background.disabled;
@@ -20521,13 +20521,23 @@ newStyled.div(templateObject_7$4 || (templateObject_7$4 = __makeTemplateObject([
 var DiscountLabel$2 = newStyled.div(templateObject_8$2 || (templateObject_8$2 = __makeTemplateObject(["\n  background-color: #c64844;\n  color: white;\n  font-size: 10px;\n  line-height: 14px;\n  padding: 4px 6px 4px 6px;\n  font-weight: bold;\n  border-radius: 4px;\n  margin-top: 2px;\n  height: fit-content;\n  &:empty {\n    display: none;\n  }\n"], ["\n  background-color: #c64844;\n  color: white;\n  font-size: 10px;\n  line-height: 14px;\n  padding: 4px 6px 4px 6px;\n  font-weight: bold;\n  border-radius: 4px;\n  margin-top: 2px;\n  height: fit-content;\n  &:empty {\n    display: none;\n  }\n"])));
 var templateObject_1$5, templateObject_2$4, templateObject_3$4, templateObject_4$4, templateObject_5$4, templateObject_6$4, templateObject_7$4, templateObject_8$2;
 
+var PriceLabelDisplay = function (_a) {
+    var price = _a.price, discountTag = _a.discountTag;
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", __assign$1({ style: { display: 'flex' } }, { children: [jsxRuntime.jsx(PriceLabel, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, finalPriceStyled: false, color: price.color, size: exports.ComponentSize.Large, testId: "volume-discount" }, void 0), (discountTag === null || discountTag === void 0 ? void 0 : discountTag.pos) === 'next to price' && (jsxRuntime.jsx(DiscountLabel$2, __assign$1({ style: { marginLeft: '5px' } }, { children: discountTag === null || discountTag === void 0 ? void 0 : discountTag.value }), void 0))] }), void 0), jsxRuntime.jsx("div", __assign$1({ style: { display: 'flex' } }, { children: (discountTag === null || discountTag === void 0 ? void 0 : discountTag.pos) === 'below price' && (jsxRuntime.jsx(DiscountLabel$2, __assign$1({ style: { marginLeft: '5px' } }, { children: discountTag === null || discountTag === void 0 ? void 0 : discountTag.value }), void 0)) }), void 0)] }, void 0));
+};
+
+var RatingDisplay = function (_a) {
+    var rating = _a.rating, size = _a.size, isRatingLoading = _a.isRatingLoading;
+    if (isRatingLoading) {
+        return jsxRuntime.jsx(SkeletonBox, { "data-testid": "rating-skeleton", height: "20px", width: "80px" }, void 0);
+    }
+    if (!rating.reviews)
+        return jsxRuntime.jsx(jsxRuntime.Fragment, {}, void 0);
+    return (jsxRuntime.jsx(Rating, { size: size === exports.ComponentSize.Large ? exports.ComponentSize.Small : exports.ComponentSize.XSmall, rating: rating.rating, reviews: rating.reviews, reviewsText: "", wrapWithParenthesis: true }, void 0));
+};
+
 var getStylesBySize$2 = function (size) {
     switch (size) {
-        case exports.ComponentSize.Medium:
-            return {
-                width: '205px',
-                height: '274px',
-            };
         case exports.ComponentSize.Small:
             return {
                 width: '167px',
@@ -20538,7 +20548,7 @@ var getStylesBySize$2 = function (size) {
                 width: '262px',
                 height: '350px',
             };
-        /* istanbul ignore next */
+        case exports.ComponentSize.Medium:
         default:
             return {
                 width: '205px',
@@ -20551,7 +20561,7 @@ var TopTagContainer$2 = newStyled.div(templateObject_1$4 || (templateObject_1$4
     return style.width;
 });
 var ProductCard = function (_a) {
-    var title = _a.title, image = _a.image, imageHover = _a.imageHover, price = _a.price, rating = _a.rating, size = _a.size, _b = _a.alignName, alignName = _b === void 0 ? 'center' : _b, url = _a.url, className = _a.className, topTag = _a.topTag, bottomTag = _a.bottomTag, onClick = _a.onClick, priceLoading = _a.priceLoading, _c = _a.noFollow, noFollow = _c === void 0 ? false : _c, isRatingLoading = _a.isRatingLoading, discountTag = _a.discountTag;
+    var title = _a.title, image = _a.image, imageHover = _a.imageHover, price = _a.price, rating = _a.rating, ratingPos = _a.ratingPos, 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, priceLoading = _a.priceLoading, _c = _a.noFollow, noFollow = _c === void 0 ? false : _c, isRatingLoading = _a.isRatingLoading, discountTag = _a.discountTag;
     var theme = useTheme();
     var styles = getStylesBySize$2(size);
     var space = React$2.useMemo(function () {
@@ -20562,17 +20572,7 @@ var ProductCard = function (_a) {
             _a[exports.ComponentSize.Small] = 2,
             _a)[size];
     }, [size]);
-    var PriceLabelDisplay = function () {
-        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", __assign$1({ style: { display: 'flex' } }, { children: [jsxRuntime.jsx(PriceLabel, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, finalPriceStyled: false, color: price.color, size: exports.ComponentSize.Large, testId: "volume-discount" }, void 0), (discountTag === null || discountTag === void 0 ? void 0 : discountTag.pos) === 'next to price' && (jsxRuntime.jsx(DiscountLabel$2, __assign$1({ style: { marginLeft: '5px' } }, { children: discountTag === null || discountTag === void 0 ? void 0 : discountTag.value }), void 0))] }), void 0), jsxRuntime.jsx("div", __assign$1({ style: { display: 'flex' } }, { children: (discountTag === null || discountTag === void 0 ? void 0 : discountTag.pos) === 'below price' && (jsxRuntime.jsx(DiscountLabel$2, __assign$1({ style: { marginLeft: '5px' } }, { children: discountTag === null || discountTag === void 0 ? void 0 : discountTag.value }), void 0)) }), void 0)] }, void 0));
-    };
-    var RatingDisplay = function () {
-        if (isRatingLoading)
-            return jsxRuntime.jsx(SkeletonBox, { "data-testid": "rating-skeleton", height: "20px", width: "80px" }, void 0);
-        if (!rating.reviews)
-            return jsxRuntime.jsx(jsxRuntime.Fragment, {}, void 0);
-        return (jsxRuntime.jsx(Rating, { size: size === exports.ComponentSize.Large ? exports.ComponentSize.Small : exports.ComponentSize.XSmall, rating: rating.rating, reviews: rating.reviews, reviewsText: "", wrapWithParenthesis: true }, void 0));
-    };
-    return (jsxRuntime.jsxs(ProdCardContainer$2, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxRuntime.jsxs(Container$4, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', className: "picContainer", onClick: onClick }, { children: [!!topTag || !!bottomTag ? (jsxRuntime.jsxs(ImageContainer$1, __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: [jsxRuntime.jsx(Image$3, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, width: "100%", height: "100%" }, void 0), jsxRuntime.jsx(TopTagContainer$2, __assign$1({ style: { width: 'inherit' } }, { children: topTag }), void 0), jsxRuntime.jsx(BottomTagContainer$2, __assign$1({ style: { width: 'inherit' } }, { children: bottomTag }), void 0)] }), void 0)) : (jsxRuntime.jsx(Image$3, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)), imageHover ? (jsxRuntime.jsx(ImageHoverContainer$1, { className: "hover__image", src: imageHover.src, srcSet: getSrcSet(imageHover.src, 180, 360, 720, 960), loading: "lazy", alt: imageHover.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)) : null] }), void 0), jsxRuntime.jsxs(Container$4, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', onClick: onClick, className: "textContainer", style: { alignItems: "".concat(size === exports.ComponentSize.Small ? 'start' : 'center') } }, { children: [jsxRuntime.jsx(Spacing, { size: space }, void 0), jsxRuntime.jsx(RatingDisplay, {}, void 0), jsxRuntime.jsx(Spacing, { size: space }, void 0), jsxRuntime.jsx(Title$2, __assign$1({ theme: theme, align: alignName }, { children: title }), void 0), jsxRuntime.jsx(Spacing, { size: space }, void 0), priceLoading ? jsxRuntime.jsx(SkeletonBox, { height: "20px", width: "140px" }, void 0) : PriceLabelDisplay(), jsxRuntime.jsx(Spacing, { size: space }, void 0)] }), void 0)] }), void 0));
+    return (jsxRuntime.jsxs(ProdCardContainer$2, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxRuntime.jsxs(Container$4, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', className: "picContainer", onClick: onClick }, { children: [!!topTag || !!bottomTag ? (jsxRuntime.jsxs(ImageContainer$1, __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: [jsxRuntime.jsx(Image$3, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, width: "100%", height: "100%" }, void 0), jsxRuntime.jsx(TopTagContainer$2, __assign$1({ style: { width: 'inherit' } }, { children: topTag }), void 0), jsxRuntime.jsx(BottomTagContainer$2, __assign$1({ style: { width: 'inherit' } }, { children: bottomTag }), void 0)] }), void 0)) : (jsxRuntime.jsx(Image$3, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)), imageHover ? (jsxRuntime.jsx(ImageHoverContainer$1, { className: "hover__image", src: imageHover.src, srcSet: getSrcSet(imageHover.src, 180, 360, 720, 960), loading: "lazy", alt: imageHover.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)) : null] }), void 0), jsxRuntime.jsxs(Container$4, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', onClick: onClick, className: "textContainer", style: { alignItems: "".concat(size === exports.ComponentSize.Small ? 'start' : 'center') } }, { children: [jsxRuntime.jsx(Spacing, { size: space }, void 0), ratingPos !== 'bottom' && (jsxRuntime.jsx(RatingDisplay, { rating: rating, size: size, isRatingLoading: isRatingLoading }, void 0)), jsxRuntime.jsx(Spacing, { size: space }, void 0), jsxRuntime.jsx(Title$2, __assign$1({ theme: theme, align: alignName }, { children: title }), void 0), jsxRuntime.jsx(Spacing, { size: space }, void 0), priceLoading ? (jsxRuntime.jsx(SkeletonBox, { height: "20px", width: "140px" }, void 0)) : (jsxRuntime.jsx(PriceLabelDisplay, { price: price, discountTag: discountTag }, void 0)), jsxRuntime.jsx(Spacing, { size: space }, void 0), ratingPos === 'bottom' && (jsxRuntime.jsx(RatingDisplay, { rating: rating, size: size, isRatingLoading: isRatingLoading }, void 0))] }), void 0)] }), void 0));
 };
 var templateObject_1$4;
 

package/package.json

@@ -3,7 +3,7 @@
   "description": "Trafilea's Design System",
   "author": "Trafilea",
   "repository": "https://github.com/trafilea/afrodita-components",
-  "version": "6.28.4",
+  "version": "6.28.5",
   "private": false,
   "main": "build/index.js",
   "style": "build/index.css",