@trafilea/afrodita-components 6.42.0 → 6.42.3

package/build/index.esm.js

@@ -3120,11 +3120,23 @@ var formatPrice = function (value, _a) {
     // this prevents `Intl.NumberFormat` from rounding the number
     var valueToFormat = parseFloat("".concat(integer, ".").concat((_b = fraction === null || fraction === void 0 ? void 0 : fraction.slice(0, 2)) !== null && _b !== void 0 ? _b : 0));
     var overridedLocale = (_c = localeOverrideByCurrency[currency]) !== null && _c !== void 0 ? _c : locale;
-    return new Intl.NumberFormat(overridedLocale, {
+    var result = new Intl.NumberFormat(overridedLocale, {
         style: 'currency',
         currency: currency,
         maximumFractionDigits: 3,
     }).format(valueToFormat);
+    if (currency === 'NZD') {
+        // intlFormat does not support NZD$ currency format
+        var resultOverridden = result.replace('NZ$', 'NZD$');
+        return resultOverridden;
+    }
+    if (currency === 'SGD') {
+        // intlFormat does not support singapure currency
+        var onlyValue = result.slice(result.indexOf('SGD') + 4);
+        var resultOverridden = "SGD$".concat(onlyValue);
+        return resultOverridden;
+    }
+    return result;
 };
 
 var CardSectionType;
@@ -7031,7 +7043,7 @@ var LikeCount = newStyled.span(templateObject_1$1v || (templateObject_1$1v = __m
     var theme = _a.theme;
     return theme.colors.shades.black.color;
 });
-var LikeBtnContainer = newStyled.button(templateObject_2$19 || (templateObject_2$19 = __makeTemplateObject(["\n  position: ", ";\n  top: ", ";\n  right: ", ";\n  z-index: ", ";\n  padding: ", ";\n  box-sizing: ", ";\n  background-color: transparent;\n  border: none;\n\n  &:hover {\n    .like-count {\n      color: ", ";\n    }\n  }\n"], ["\n  position: ", ";\n  top: ", ";\n  right: ", ";\n  z-index: ", ";\n  padding: ", ";\n  box-sizing: ", ";\n  background-color: transparent;\n  border: none;\n\n  &:hover {\n    .like-count {\n      color: ", ";\n    }\n  }\n"])), function (_a) {
+var LikeBtnContainer = newStyled.button(templateObject_2$19 || (templateObject_2$19 = __makeTemplateObject(["\n  position: ", ";\n  top: ", ";\n  right: ", ";\n  z-index: ", ";\n  padding: ", ";\n  box-sizing: ", ";\n  background-color: transparent;\n  border: none;\n"], ["\n  position: ", ";\n  top: ", ";\n  right: ", ";\n  z-index: ", ";\n  padding: ", ";\n  box-sizing: ", ";\n  background-color: transparent;\n  border: none;\n"])), function (_a) {
     var _b = _a.position, position = _b === void 0 ? 'absolute' : _b;
     return position;
 }, function (_a) {
@@ -7049,9 +7061,6 @@ var LikeBtnContainer = newStyled.button(templateObject_2$19 || (templateObject_2
 }, function (_a) {
     var _b = _a.boxSizing, boxSizing = _b === void 0 ? 'border-box' : _b;
     return boxSizing;
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.colors.shades.white.color;
 });
 var templateObject_1$1v, templateObject_2$19;
 
@@ -7127,7 +7136,7 @@ var LikeButton = function (_a) {
         regular: theme.colors.shades.black.color,
         solid: theme.colors.semantic.urgent.color,
     } : _e, background = _d.background;
-    return (jsx$1(LikeBtnContainer, __assign$1({ className: className }, containerProps, { children: jsxs$1(IconButton, __assign$1({ onClick: onClick, backgroundColor: background, hasText: !!likes, boxShadow: "0 6px 16px rgba(0, 0, 0, 0.12)" }, { children: [jsx$1(Icon$1, { name: isLiked ? 'actions/like_solid' : 'actions/like', fill: isLiked ? iconFill.solid : (_b = iconFill.regular) !== null && _b !== void 0 ? _b : iconFill.solid, width: "24px", height: "24px" }, isLiked.toString()), !!likes && jsx$1(LikeCount, __assign$1({ className: "like-count" }, { children: likes }), void 0)] }), void 0) }), void 0));
+    return (jsx$1(LikeBtnContainer, __assign$1({ className: className }, containerProps, { children: jsxs$1(IconButton, __assign$1({ onClick: onClick, backgroundColor: background, hasText: !!likes, boxShadow: "0 6px 16px rgba(0, 0, 0, 0.12)" }, { children: [jsx$1(Icon$1, { name: isLiked ? 'actions/like_solid' : 'actions/like', fill: isLiked ? iconFill.solid : (_b = iconFill.regular) !== null && _b !== void 0 ? _b : iconFill.solid, width: "24px", height: "24px" }, void 0), !!likes && jsx$1(LikeCount, __assign$1({ className: "like-count" }, { children: likes }), void 0)] }), isLiked.toString()) }), void 0));
 };
 
 var STYLES_BY_THEME = {
@@ -7268,12 +7277,12 @@ var ClubOfferPriceLabelWrapper = newStyled.div(templateObject_8$l || (templateOb
 var templateObject_1$1t, templateObject_2$18, templateObject_3$X, templateObject_4$L, templateObject_5$C, templateObject_6$y, templateObject_7$s, templateObject_8$l;
 
 var ProductItemMobile = function (_a) {
-    var _b, _c;
-    var title = _a.title, image = _a.image, imageHover = _a.imageHover, price = _a.price, rating = _a.rating, size = _a.size, _d = _a.alignName, alignName = _d === void 0 ? 'center' : _d, url = _a.url, className = _a.className, topTag = _a.topTag, bottomTag = _a.bottomTag, onClick = _a.onClick, _e = _a.priceDisplayType, priceDisplayType = _e === void 0 ? 'default' : _e, priceAtBottom = _a.priceAtBottom, ratingOnTop = _a.ratingOnTop, priceLoading = _a.priceLoading, _f = _a.noFollow, noFollow = _f === void 0 ? false : _f, _g = _a.colorPicker, colorPicker = _g === void 0 ? {
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+    var title = _a.title, image = _a.image, imageHover = _a.imageHover, price = _a.price, rating = _a.rating, size = _a.size, _o = _a.alignName, alignName = _o === void 0 ? 'center' : _o, url = _a.url, className = _a.className, topTag = _a.topTag, bottomTag = _a.bottomTag, onClick = _a.onClick, _p = _a.priceDisplayType, priceDisplayType = _p === void 0 ? 'default' : _p, priceAtBottom = _a.priceAtBottom, ratingOnTop = _a.ratingOnTop, priceLoading = _a.priceLoading, _q = _a.noFollow, noFollow = _q === void 0 ? false : _q, _r = _a.colorPicker, colorPicker = _r === void 0 ? {
         display: false,
         position: 'top',
         component: undefined,
-    } : _g, _h = _a.isBNPL, isBNPL = _h === void 0 ? {
+    } : _r, _s = _a.isBNPL, isBNPL = _s === void 0 ? {
         displayBNPL: false,
         installments: 4,
         installmentPrice: '',
@@ -7282,10 +7291,10 @@ var ProductItemMobile = function (_a) {
         showLogo: true,
         iconColor: '#292929',
         fontSize: '12px',
-    } : _h, _j = _a.hasStrength, hasStrength = _j === void 0 ? {
+    } : _s, _t = _a.hasStrength, hasStrength = _t === void 0 ? {
         strength: -1,
         description: '',
-    } : _j, _k = _a.clubPrice, clubPrice = _k === void 0 ? '' : _k, _l = _a.showClubPriceLabel, showClubPriceLabel = _l === void 0 ? false : _l, isRatingLoading = _a.isRatingLoading, _m = _a.version, version = _m === void 0 ? 1 : _m, _o = _a.showDiscountPercentageTag, showDiscountPercentageTag = _o === void 0 ? false : _o, discountTagLoading = _a.discountTagLoading, discountTag = _a.discountTag, _p = _a.isOnViewport, isOnViewport = _p === void 0 ? false : _p, _q = _a.hasDefaultSize, hasDefaultSize = _q === void 0 ? false : _q, clubOffer = _a.clubOffer, likeBtn = _a.likeBtn, onClickBottomButton = _a.onClickBottomButton;
+    } : _t, _u = _a.clubPrice, clubPrice = _u === void 0 ? '' : _u, _v = _a.showClubPriceLabel, showClubPriceLabel = _v === void 0 ? false : _v, isRatingLoading = _a.isRatingLoading, _w = _a.version, version = _w === void 0 ? 1 : _w, _x = _a.showDiscountPercentageTag, showDiscountPercentageTag = _x === void 0 ? false : _x, discountTagLoading = _a.discountTagLoading, discountTag = _a.discountTag, _y = _a.isOnViewport, isOnViewport = _y === void 0 ? false : _y, _z = _a.hasDefaultSize, hasDefaultSize = _z === void 0 ? false : _z, clubOffer = _a.clubOffer, likeBtn = _a.likeBtn, onClickBottomButton = _a.onClickBottomButton;
     var theme = useTheme();
     var styles = getStylesBySize$b(size);
     var isMobile = useWindowDimensions().isMobile;
@@ -7328,8 +7337,8 @@ var ProductItemMobile = function (_a) {
             return jsx(Fragment, {}, void 0);
         return (jsx(Rating, { size: size === ComponentSize.Large ? ComponentSize.Small : ComponentSize.XSmall, rating: rating.rating, reviews: rating.reviews, reviewsText: "", wrapWithParenthesis: true }, void 0));
     };
-    var _r = useState((_b = likeBtn === null || likeBtn === void 0 ? void 0 : likeBtn.isLiked) !== null && _b !== void 0 ? _b : false), isLiked = _r[0], setIsLiked = _r[1];
-    var _s = useState((_c = likeBtn === null || likeBtn === void 0 ? void 0 : likeBtn.likes) !== null && _c !== void 0 ? _c : 0), likesCount = _s[0], setLikesCount = _s[1];
+    var _0 = useState((_b = likeBtn === null || likeBtn === void 0 ? void 0 : likeBtn.isLiked) !== null && _b !== void 0 ? _b : false), isLiked = _0[0], setIsLiked = _0[1];
+    var _1 = useState((_c = likeBtn === null || likeBtn === void 0 ? void 0 : likeBtn.likes) !== null && _c !== void 0 ? _c : 0), likesCount = _1[0], setLikesCount = _1[1];
     var handleLikeClick = function (e) {
         e.stopPropagation();
         if (isLiked) {
@@ -7343,7 +7352,8 @@ var ProductItemMobile = function (_a) {
     };
     return (jsxs(ProdCardContainer$4, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$10, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', className: "picContainer", onClick: onClick }, { children: [!!likeBtn && (jsx(LikeButton, { isLiked: isLiked, likes: likesCount, onClick: handleLikeClick, colors: {
                             background: {
-                                active: theme.colors.shades.white.color,
+                                active: (_f = (_e = (_d = likeBtn.colors) === null || _d === void 0 ? void 0 : _d.background) === null || _e === void 0 ? void 0 : _e.active) !== null && _f !== void 0 ? _f : theme.colors.shades.white.color,
+                                hover: (_m = (_j = (_h = (_g = likeBtn.colors) === null || _g === void 0 ? void 0 : _g.background) === null || _h === void 0 ? void 0 : _h.hover) !== null && _j !== void 0 ? _j : (_l = (_k = likeBtn.colors) === null || _k === void 0 ? void 0 : _k.background) === null || _l === void 0 ? void 0 : _l.active) !== null && _m !== void 0 ? _m : theme.colors.shades.white.color,
                             },
                         } }, void 0)), !!topTag || !!bottomTag ? (jsxs(ImageContainer$6, __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, width: hasDefaultSize ? styles === null || styles === void 0 ? void 0 : styles.width : '100%', height: hasDefaultSize ? styles === null || styles === void 0 ? void 0 : styles.height : '100%', loading: isOnViewport ? 'eager' : 'lazy', decoding: isOnViewport ? 'sync' : 'async', borderRadius: STYLES_BY_THEME[theme.name].image.borderRadius }, void 0), jsx(TopTagContainer$9, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: topTag }), void 0), jsx(BottomTagContainer$9, __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, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height, loading: isOnViewport ? 'eager' : 'lazy', decoding: isOnViewport ? 'sync' : 'async', borderRadius: STYLES_BY_THEME[theme.name].image.borderRadius }, void 0)), imageHover ? (jsx(ImageHoverContainer$3, { className: "hover__image", src: imageHover.src, srcSet: getSrcSet(imageHover.src, 180, 360, 720, 960), loading: "lazy", decoding: "async", 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)), ratingOnTop && (jsxs(Fragment, { children: [jsx(Spacing, { size: space }, void 0), jsx(Spacing, { size: space }, void 0), jsx(RatingDisplay, {}, void 0)] }, void 0)), jsxs(Container$10, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', onClick: onClick, className: "textContainer", style: { alignItems: showClubPriceLabel ? 'flex-start' : 'center' } }, { children: [jsx(Spacing, { size: space }, void 0), jsx(Title$8, __assign$1({ theme: theme, align: showClubPriceLabel ? 'left' : alignName, "data-testid": "product-card-title" }, { children: title }), void 0), jsx(Spacing, { size: space }, void 0), hasStrength && 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 && !ratingOnTop ? (jsxs(Fragment, { children: [jsx(RatingDisplay, {}, void 0), jsx(Spacing, { size: space }, void 0), jsxs(MarginTopContainer$1, __assign$1({ style: { marginTop: (clubOffer === null || clubOffer === void 0 ? void 0 : clubOffer.isClubOffer) ? 0 : 8 } }, { children: [priceLoading ? jsx(SkeletonBox, { height: "20px", width: "140px" }, void 0) : PriceLabelDisplay(), (clubOffer === null || clubOffer === void 0 ? void 0 : clubOffer.isClubOffer) && PriceLabelDisplay(5)] }), void 0)] }, void 0)) : (jsxs(Fragment, { children: [priceLoading ? (jsx(SkeletonBox, { height: "20px", width: "140px" }, void 0)) : (jsxs(Fragment, { children: [!(clubOffer === null || clubOffer === void 0 ? void 0 : clubOffer.isClubMember) && PriceLabelDisplay(), (clubOffer === null || clubOffer === void 0 ? void 0 : clubOffer.isClubOffer) && PriceLabelDisplay(5), 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), discountTagLoading ? (jsx(SkeletonBox, { height: "22px", width: "75px" }, void 0)) : (showDiscountPercentageTag && (jsx(TagContainer, __assign$1({ size: ComponentSize.Small }, { children: discountTag && (jsx(DiscountTag$3, __assign$1({}, discountTag, { size: ComponentSize.Medium, style: {
                                         letterSpacing: '-0.05rem',
@@ -7729,9 +7739,11 @@ var ButtonPrimary = function (_a) {
             letterSpacing: theme.component.button.letterSpacing,
             minWidth: theme.component.button.minWidth,
             minHeight: theme.component.button.minHeight,
-            '&:hover': {
-                backgroundColor: theme.component.button.primary.hover.backgroundColor,
-                color: theme.component.button.primary.hover.color,
+            '@media (hover: hover) and (pointer: fine)': {
+                '&:hover': {
+                    backgroundColor: theme.component.button.primary.hover.backgroundColor,
+                    color: theme.component.button.primary.hover.color,
+                },
             },
             '&:disabled': {
                 backgroundColor: theme.colors.background.disabled,
@@ -7747,8 +7759,10 @@ var ButtonSecondary = function (props) {
             color: theme.component.button.secondary.active.color,
             border: theme.component.button.border,
             fontFamily: 'inherit',
-            '&:hover': {
-                backgroundColor: theme.component.button.secondary.hover.backgroundColor,
+            '@media (hover: hover) and (pointer: fine)': {
+                '&:hover': {
+                    backgroundColor: theme.component.button.secondary.hover.backgroundColor,
+                },
             },
             '&:disabled': {
                 backgroundColor: theme.colors.shades['50'].color,