@trafilea/afrodita-components 5.0.0-beta.186 → 5.0.0-beta.188

package/build/index.esm.js

@@ -12642,7 +12642,7 @@ function formatDate(date) {
 var Container$v = newStyled.div(templateObject_1$G || (templateObject_1$G = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  width: auto;\n  color: #292929;\n"], ["\n  display: flex;\n  flex-direction: column;\n  width: auto;\n  color: #292929;\n"])));
 var Heading = newStyled.div(templateObject_2$r || (templateObject_2$r = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  width: 100%;\n  font-size: 14px;\n  line-height: 22px;\n  text-align: right;\n  margin-bottom: 10px;\n\n  @media (min-width: 768px) {\n    font-size: 16px;\n    line-height: 24px;\n  }\n"], ["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  width: 100%;\n  font-size: 14px;\n  line-height: 22px;\n  text-align: right;\n  margin-bottom: 10px;\n\n  @media (min-width: 768px) {\n    font-size: 16px;\n    line-height: 24px;\n  }\n"])));
 var Content$1 = newStyled.div(templateObject_3$p || (templateObject_3$p = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n"], ["\n  display: flex;\n  justify-content: space-between;\n"])));
-var ReviewContainer$1 = newStyled.div(templateObject_4$g || (templateObject_4$g = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  margin: 0 0 8px 0;\n\n  @media (min-width: 768px) {\n    margin: 0 0 50px 0;\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n  margin: 0 0 8px 0;\n\n  @media (min-width: 768px) {\n    margin: 0 0 50px 0;\n  }\n"])));
+var ReviewContainer$1 = newStyled.div(templateObject_4$g || (templateObject_4$g = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n"], ["\n  display: flex;\n  flex-direction: column;\n"])));
 var DateText$1 = newStyled.span(templateObject_5$b || (templateObject_5$b = __makeTemplateObject(["\n  font-weight: 400;\n  font-size: 12px;\n  line-height: 16px;\n\n  @media (min-width: 768px) {\n    font-size: 16px;\n    line-height: 24px;\n  }\n"], ["\n  font-weight: 400;\n  font-size: 12px;\n  line-height: 16px;\n\n  @media (min-width: 768px) {\n    font-size: 16px;\n    line-height: 24px;\n  }\n"])));
 var VariantText = newStyled.div(templateObject_6$a || (templateObject_6$a = __makeTemplateObject(["\n  font-weight: 400;\n  font-size: 14px;\n  line-height: 22px;\n\n  @media (min-width: 768px) {\n    font-size: 16px;\n    line-height: 24px;\n  }\n"], ["\n  font-weight: 400;\n  font-size: 14px;\n  line-height: 22px;\n\n  @media (min-width: 768px) {\n    font-size: 16px;\n    line-height: 24px;\n  }\n"])));
 var ReviewerName$1 = newStyled.h2(templateObject_7$6 || (templateObject_7$6 = __makeTemplateObject(["\n  font-weight: 600;\n  margin: 0;\n  font-size: 14px;\n  line-height: 22px;\n\n  @media (min-width: 768px) {\n    font-size: 18px;\n    line-height: 28px;\n  }\n"], ["\n  font-weight: 600;\n  margin: 0;\n  font-size: 14px;\n  line-height: 22px;\n\n  @media (min-width: 768px) {\n    font-size: 18px;\n    line-height: 28px;\n  }\n"])));
@@ -12652,8 +12652,8 @@ var ImagesContainer = newStyled.div(templateObject_10$2 || (templateObject_10$2
 var Images = newStyled.div(templateObject_11$1 || (templateObject_11$1 = __makeTemplateObject(["\n  display: flex;\n  justify-content: end;\n"], ["\n  display: flex;\n  justify-content: end;\n"])));
 var ImageSpace = newStyled.div(templateObject_12$1 || (templateObject_12$1 = __makeTemplateObject(["\n  width: 7.5rem;\n  height: 4.125rem;\n"], ["\n  width: 7.5rem;\n  height: 4.125rem;\n"])));
 var ImageWrapper$2 = newStyled.div(templateObject_13$1 || (templateObject_13$1 = __makeTemplateObject(["\n  cursor: zoom-in;\n  display: none;\n  margin-right: 4px;\n\n  &:first-child {\n    display: inline-block;\n  }\n\n  @media (min-width: 1024px) {\n    display: inline-block;\n  }\n"], ["\n  cursor: zoom-in;\n  display: none;\n  margin-right: 4px;\n\n  &:first-child {\n    display: inline-block;\n  }\n\n  @media (min-width: 1024px) {\n    display: inline-block;\n  }\n"])));
-var HelpfulContainerDesktop = newStyled.div(templateObject_14$1 || (templateObject_14$1 = __makeTemplateObject(["\n  margin-top: 12px;\n  display: flex;\n\n  @media (max-width: 768px) {\n    display: none;\n  }\n"], ["\n  margin-top: 12px;\n  display: flex;\n\n  @media (max-width: 768px) {\n    display: none;\n  }\n"])));
-var HelpfulContainerMobile = newStyled.div(templateObject_15$1 || (templateObject_15$1 = __makeTemplateObject(["\n  display: none;\n\n  @media (max-width: 768px) {\n    margin-top: 12px;\n    display: flex;\n  }\n"], ["\n  display: none;\n\n  @media (max-width: 768px) {\n    margin-top: 12px;\n    display: flex;\n  }\n"])));
+var HelpfulContainerDesktop = newStyled.div(templateObject_14$1 || (templateObject_14$1 = __makeTemplateObject(["\n  margin-top: 12px;\n  display: flex;\n  margin-top: 50px;\n\n  @media (max-width: 768px) {\n    display: none;\n  }\n"], ["\n  margin-top: 12px;\n  display: flex;\n  margin-top: 50px;\n\n  @media (max-width: 768px) {\n    display: none;\n  }\n"])));
+var HelpfulContainerMobile = newStyled.div(templateObject_15$1 || (templateObject_15$1 = __makeTemplateObject(["\n  display: none;\n\n  @media (max-width: 768px) {\n    margin-top: 10px;\n    display: flex;\n  }\n"], ["\n  display: none;\n\n  @media (max-width: 768px) {\n    margin-top: 10px;\n    display: flex;\n  }\n"])));
 var HelpfulText = newStyled.div(templateObject_16$1 || (templateObject_16$1 = __makeTemplateObject(["\n  font-size: 14px;\n  line-height: 34px;\n  font-weight: 600;\n  color: #d4605b;\n"], ["\n  font-size: 14px;\n  line-height: 34px;\n  font-weight: 600;\n  color: #d4605b;\n"])));
 var HelpfulTexti = newStyled.i(templateObject_17$1 || (templateObject_17$1 = __makeTemplateObject(["\n  content: '\f164';\n"], ["\n  content: '\\f164';\n"])));
 var ButtonSecondaryWrapper = newStyled(ButtonSecondary)(templateObject_18$1 || (templateObject_18$1 = __makeTemplateObject(["\n  margin-right: 15px;\n"], ["\n  margin-right: 15px;\n"])));
@@ -12787,8 +12787,14 @@ var getStylesBySize$1 = function (size) {
             };
     }
 };
-var TopTagContainer$2 = newStyled.div(templateObject_5$8 || (templateObject_5$8 = __makeTemplateObject(["\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: inherit;\n  z-index: 1;\n"], ["\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: inherit;\n  z-index: 1;\n"])));
-var BottomTagContainer$2 = newStyled.div(templateObject_6$7 || (templateObject_6$7 = __makeTemplateObject(["\n  position: absolute;\n  bottom: 15%;\n  left: 0;\n  width: inherit;\n  z-index: 1;\n"], ["\n  position: absolute;\n  bottom: 15%;\n  left: 0;\n  width: inherit;\n  z-index: 1;\n"])));
+var TopTagContainer$2 = newStyled.div(templateObject_5$8 || (templateObject_5$8 = __makeTemplateObject(["\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: ", ";\n  z-index: 1;\n"], ["\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: ", ";\n  z-index: 1;\n"])), function (_a) {
+    var style = _a.style;
+    return style.width;
+});
+var BottomTagContainer$2 = newStyled.div(templateObject_6$7 || (templateObject_6$7 = __makeTemplateObject(["\n  position: absolute;\n  bottom: 15%;\n  left: 0;\n  width: ", ";\n  z-index: 1;\n"], ["\n  position: absolute;\n  bottom: 15%;\n  left: 0;\n  width: ", ";\n  z-index: 1;\n"])), function (_a) {
+    var style = _a.style;
+    return style.width;
+});
 var MarginTopContainer = newStyled.div(templateObject_7$5 || (templateObject_7$5 = __makeTemplateObject(["\n  margin-top: 8px;\n"], ["\n  margin-top: 8px;\n"])));
 var ProductItemMobile = 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, _c = _a.priceDisplayType, priceDisplayType = _c === void 0 ? 'default' : _c, priceAtBottom = _a.priceAtBottom, priceLoading = _a.priceLoading, _d = _a.colorPicker, colorPicker = _d === void 0 ? {
@@ -12810,7 +12816,7 @@ var ProductItemMobile = function (_a) {
         return priceDisplayType === 'styled' ? (jsx(PriceLabelV2, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, finalPriceStyled: false, color: price.color, size: ComponentSize.Large, testId: "volume-discount" }, void 0)) : (jsx(PriceLabel, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, finalPriceStyled: false, color: price.color, size: ComponentSize.Medium, testId: "volume-discount" }, void 0));
     };
     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)); };
-    return (jsxs(ProdCardContainer, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$t, __assign$1({ as: url ? 'a' : 'div', href: url, 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, { src: image.src, alt: image.alt, width: "100%", height: "100%" }, void 0), jsx(TopTagContainer$2, { children: topTag }, void 0), jsx(BottomTagContainer$2, { 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)), imageHover ? (jsx(ImageHoverContainer, { className: "hover__image", src: imageHover.src, 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), colorPicker.display && colorPicker.position === 'top' && (jsxs(Fragment, { children: [jsx(Spacing, { size: space }, void 0), colorPicker.component] }, void 0)), jsxs(Container$t, __assign$1({ as: url ? 'a' : 'div', href: url, onClick: onClick, className: "textContainer" }, { children: [jsx(Spacing, { size: space }, void 0), jsx(Title$2, __assign$1({ theme: theme, align: alignName }, { children: title }), void 0), jsx(Spacing, { size: space }, void 0), priceAtBottom ? (jsxs(Fragment, { children: [jsx(RatingDisplay, {}, void 0), 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) : jsx(PriceLabelDisplay, {}, void 0), jsx(Spacing, { size: space }, void 0), jsx(RatingDisplay, {}, void 0)] }, void 0))] }), void 0), colorPicker.display && colorPicker.position === 'bottom' && (jsxs(Fragment, { children: [jsx(Spacing, { size: space }, void 0), colorPicker.component] }, void 0))] }), void 0));
+    return (jsxs(ProdCardContainer, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$t, __assign$1({ as: url ? 'a' : 'div', href: url, 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, { src: image.src, alt: image.alt, width: "100%", height: "100%" }, void 0), jsx(TopTagContainer$2, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: topTag }), void 0), jsx(BottomTagContainer$2, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { 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)), imageHover ? (jsx(ImageHoverContainer, { className: "hover__image", src: imageHover.src, 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), colorPicker.display && colorPicker.position === 'top' && (jsxs(Fragment, { children: [jsx(Spacing, { size: space }, void 0), colorPicker.component] }, void 0)), jsxs(Container$t, __assign$1({ as: url ? 'a' : 'div', href: url, onClick: onClick, className: "textContainer" }, { children: [jsx(Spacing, { size: space }, void 0), jsx(Title$2, __assign$1({ theme: theme, align: alignName }, { children: title }), void 0), jsx(Spacing, { size: space }, void 0), priceAtBottom ? (jsxs(Fragment, { children: [jsx(RatingDisplay, {}, void 0), 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) : jsx(PriceLabelDisplay, {}, void 0), jsx(Spacing, { size: space }, void 0), jsx(RatingDisplay, {}, void 0)] }, void 0))] }), void 0), colorPicker.display && colorPicker.position === 'bottom' && (jsxs(Fragment, { children: [jsx(Spacing, { size: space }, void 0), colorPicker.component] }, void 0))] }), void 0));
 };
 var templateObject_1$B, templateObject_2$o, templateObject_3$m, templateObject_4$d, templateObject_5$8, templateObject_6$7, templateObject_7$5;