@trafilea/afrodita-components 4.3.1-beta.9 → 4.4.0-beta.2

package/build/index.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import { IconProps as IconProps$1 } from 'src/types/types';
 import React, { FC, ReactNode, ElementType, CSSProperties, AriaAttributes, AnchorHTMLAttributes, LabelHTMLAttributes, RefObject } from 'react';
 import * as _emotion_react_jsx_runtime from '@emotion/react/jsx-runtime';
 import * as _emotion_react_types_jsx_namespace from '@emotion/react/types/jsx-namespace';
@@ -111,10 +112,14 @@ interface SearchBarOptionItem {
 
 declare const SixtyDaysGuarantee: ({ height, width, fill, title }: IconProps) => JSX.Element;
 
+declare const Frown: ({ height, width, fill, title }: IconProps$1) => JSX.Element;
+
 declare const Custom_SixtyDaysGuarantee: typeof SixtyDaysGuarantee;
+declare const Custom_Frown: typeof Frown;
 declare namespace Custom {
   export {
     Custom_SixtyDaysGuarantee as SixtyDaysGuarantee,
+    Custom_Frown as Frown,
   };
 }
 
@@ -568,8 +573,9 @@ interface RatingProps {
     size?: ComponentSize;
     reviews: number;
     reviewsText: string;
+    wrapWithParenthesis?: boolean;
 }
-declare const Rating: ({ size, reviews, reviewsText, rating, }: RatingProps) => JSX.Element;
+declare const Rating: ({ size, reviews, reviewsText, rating, wrapWithParenthesis, }: RatingProps) => JSX.Element;
 
 interface FitPredictorProps {
     onClick: () => void;
@@ -825,6 +831,31 @@ declare type ThemeComponent = {
             };
         };
     };
+    stars: {
+        element: {
+            color: string;
+            xsmall: {
+                width: string;
+                height: string;
+                marginRight: string;
+            };
+            small: {
+                width: string;
+                height: string;
+                marginRight: string;
+            };
+            medium: {
+                width: string;
+                height: string;
+                marginRight: string;
+            };
+            large: {
+                width: string;
+                height: string;
+                marginRight: string;
+            };
+        };
+    };
     card: {
         borderRadius: string;
     };
@@ -1566,16 +1597,8 @@ declare const Overlay: _emotion_styled.StyledComponent<{
     opened?: boolean | undefined;
 }, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 declare const Modal: FC<ModalProps>;
-declare type ModalEventDetail = {
-    id: string;
-    type: 'open' | 'close';
-};
-declare const modalEvent: (id: string, detail: Omit<ModalEventDetail, 'id'>) => void;
-declare global {
-    interface WindowEventMap {
-        modal: CustomEvent<ModalEventDetail>;
-    }
-}
+declare const modalEvent: (id: string, detail: Omit<Events['modal'], 'id'>) => void;
+declare const useModalEvent: (id: string, cb: (event: CustomEvent<Events['modal']>) => void) => void;
 
 interface CloseButtonProps {
     onClick: () => void;
@@ -1653,4 +1676,4 @@ declare const formatPrice: (value: number, { locale, currency }?: {
     currency?: string | undefined;
 }) => string;
 
-export { Accordion, AmazonButton, AssetsProvider, Bundle, ButtonPrimary, ButtonSecondary, ButtonSecondaryOutline, ButtonType, CTAProps, _default as Card, CardSectionType, CartProductItem, CategoryTag, Checkbox, Collection, Color, ColorPickerOption, ComponentPosition, ComponentSize, index_d as CrossSell, DeliveryDetails, DiscountTag, Drawer, DropdownListIcons, DropdownListIconsItem, DropdownListIconsSubItem, DropdownOption, Filter, FilterChange, FilteringDropdown, Tags as FilteringTags, FitPredictor, Icon, IconButton, IconProps, IconWithOpacityProps, Image, ImageType, Input, InputValidationType, Modal, MultiColorPicker, OfferBanner, OrderBar, Overlay, Pagination, Pattern, PaymentMethod, PaypalButton, Portal, PriceLabel, ProductGallery, ProductGalleryMobile, ProgressBar, QuantityPicker, RadioGroupInput, RadioGroupOption, RadioInput, Rating, Review, ScrollToTop, SearchBar, SearchBarOptionItem, SeasonOfferTag, SimpleDropdown, SimpleOrderItem, SingleColorPicker, SizeFitGuide, SizeOption, SizeSelector, SizeTable, SliderNavigation, Spacing, Spinner, StarList, Text, TextButton, Theme, ThemeAssets, ThemeBasicPallete, ThemeBreakpoints, ThemeColorPallete, ThemeColors, ThemeComponent, ThemeFonts, ThemeProvider, ThemeTypography, ThemeVariables, Timer, Tooltip, Totals, WithTestId, decimalFormat, formatPrice, isEmail, isEmpty, isNumber, isPhoneNumber, isValidDate, modalEvent, simulateMouseClick, sliceString, useOnClickOutside, useTheme, useThemeAssets, useWindowDimensions };
+export { Accordion, AmazonButton, AssetsProvider, Bundle, ButtonPrimary, ButtonSecondary, ButtonSecondaryOutline, ButtonType, CTAProps, _default as Card, CardSectionType, CartProductItem, CategoryTag, Checkbox, Collection, Color, ColorPickerOption, ComponentPosition, ComponentSize, index_d as CrossSell, DeliveryDetails, DiscountTag, Drawer, DropdownListIcons, DropdownListIconsItem, DropdownListIconsSubItem, DropdownOption, Filter, FilterChange, FilteringDropdown, Tags as FilteringTags, FitPredictor, Icon, IconButton, IconProps, IconWithOpacityProps, Image, ImageType, Input, InputValidationType, Modal, MultiColorPicker, OfferBanner, OrderBar, Overlay, Pagination, Pattern, PaymentMethod, PaypalButton, Portal, PriceLabel, ProductGallery, ProductGalleryMobile, ProgressBar, QuantityPicker, RadioGroupInput, RadioGroupOption, RadioInput, Rating, Review, ScrollToTop, SearchBar, SearchBarOptionItem, SeasonOfferTag, SimpleDropdown, SimpleOrderItem, SingleColorPicker, SizeFitGuide, SizeOption, SizeSelector, SizeTable, SliderNavigation, Spacing, Spinner, StarList, Text, TextButton, Theme, ThemeAssets, ThemeBasicPallete, ThemeBreakpoints, ThemeColorPallete, ThemeColors, ThemeComponent, ThemeFonts, ThemeProvider, ThemeTypography, ThemeVariables, Timer, Tooltip, Totals, WithTestId, decimalFormat, formatPrice, isEmail, isEmpty, isNumber, isPhoneNumber, isValidDate, modalEvent, simulateMouseClick, sliceString, useModalEvent, useOnClickOutside, useTheme, useThemeAssets, useWindowDimensions };

package/build/index.esm.js

@@ -66,9 +66,15 @@ var SixtyDaysGuarantee = function (_a) {
     return (jsx$1(IconWrapper, __assign({ width: width, height: height, viewBoxX: 68, viewBoxY: 60, title: title }, { children: jsxs$1(Fragment$1, { children: [jsx$1("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M7.12893 20.0377C6.95506 20.5703 7.22866 21.1476 7.74181 21.3283L7.74182 21.3283C8.25436 21.509 8.80986 21.2242 8.98374 20.6916C13.6669 6.34132 28.7093 -1.37319 42.5168 3.49389C53.5644 7.38818 60.8041 18.2973 60.4618 30.3023L56.7328 26.3617C56.3533 25.9601 55.7341 25.9548 55.3486 26.3495C55.1556 26.5462 55.0573 26.8058 55.0552 27.0667C55.0531 27.3271 55.1473 27.5882 55.3369 27.7882L60.7689 33.5285C60.9627 33.7336 61.2191 33.8353 61.4749 33.8331C61.7301 33.8391 61.9872 33.7419 62.1837 33.5407L67.7069 27.8953C68.0931 27.5012 68.0983 26.8576 67.7186 26.4565C67.5294 26.2561 67.2796 26.1542 67.0285 26.1521C66.778 26.1499 66.5266 26.2475 66.3342 26.4445L62.4178 30.4475C62.8212 17.5178 55.0381 5.75829 43.146 1.56628C28.3162 -3.6612 12.1587 4.62531 7.12893 20.0377ZM5.31341 29.5826C4.92323 42.5 12.7034 54.245 24.5866 58.4339C39.4157 63.6612 55.5738 55.3744 60.6034 39.9626C60.7775 39.4292 60.5032 38.8523 59.9908 38.6717C59.4776 38.4907 58.9228 38.7753 58.7488 39.3086C54.0657 53.6582 39.0226 61.3731 25.2156 56.5061C14.0119 52.5567 6.72506 41.3935 7.28932 29.1894L11.2678 33.394C11.647 33.7951 12.2662 33.8007 12.652 33.4058C12.845 33.2091 12.9431 32.9497 12.9451 32.6888C12.9472 32.4285 12.8533 32.167 12.6637 31.9671L7.2316 26.2268C7.03598 26.0197 6.77654 25.918 6.51822 25.9223C6.26536 25.9181 6.01109 26.0154 5.81628 26.2147L0.293184 31.8604C-0.0932236 32.2545 -0.0982397 32.8981 0.28148 33.2988C0.470773 33.4992 0.72026 33.6014 0.971555 33.6035C1.22211 33.6058 1.47331 33.508 1.66576 33.3109L5.31341 29.5826Z", fill: fill }, void 0), jsx$1("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M7.12893 20.0377C6.95506 20.5703 7.22866 21.1476 7.74181 21.3283L7.74182 21.3283C8.25436 21.509 8.80986 21.2242 8.98374 20.6916C13.6669 6.34132 28.7093 -1.37319 42.5168 3.49389C53.5644 7.38818 60.8041 18.2973 60.4618 30.3023L56.7328 26.3617C56.3533 25.9601 55.7341 25.9548 55.3486 26.3495C55.1556 26.5462 55.0573 26.8058 55.0552 27.0667C55.0531 27.3271 55.1473 27.5882 55.3369 27.7882L60.7689 33.5285C60.9627 33.7336 61.2191 33.8353 61.4749 33.8331C61.7301 33.8391 61.9872 33.7419 62.1837 33.5407L67.7069 27.8953C68.0931 27.5012 68.0983 26.8576 67.7186 26.4565C67.5294 26.2561 67.2796 26.1542 67.0285 26.1521C66.778 26.1499 66.5266 26.2475 66.3342 26.4445L62.4178 30.4475C62.8212 17.5178 55.0381 5.75829 43.146 1.56628C28.3162 -3.6612 12.1587 4.62531 7.12893 20.0377ZM5.31341 29.5826C4.92323 42.5 12.7034 54.245 24.5866 58.4339C39.4157 63.6612 55.5738 55.3744 60.6034 39.9626C60.7775 39.4292 60.5032 38.8523 59.9908 38.6717C59.4776 38.4907 58.9228 38.7753 58.7488 39.3086C54.0657 53.6582 39.0226 61.3731 25.2156 56.5061C14.0119 52.5567 6.72506 41.3935 7.28932 29.1894L11.2678 33.394C11.647 33.7951 12.2662 33.8007 12.652 33.4058C12.845 33.2091 12.9431 32.9497 12.9451 32.6888C12.9472 32.4285 12.8533 32.167 12.6637 31.9671L7.2316 26.2268C7.03598 26.0197 6.77654 25.918 6.51822 25.9223C6.26536 25.9181 6.01109 26.0154 5.81628 26.2147L0.293184 31.8604C-0.0932235 32.2545 -0.0982397 32.8981 0.28148 33.2988C0.470773 33.4992 0.72026 33.6014 0.971555 33.6035C1.22211 33.6058 1.47331 33.508 1.66576 33.3109L5.31341 29.5826Z", fill: fill }, void 0), jsx$1("path", { d: "M26.4316 13.008L22.1836 19.584C21.0796 21.336 20.4316 22.656 20.4316 24.6C20.4316 27.888 23.0956 30.432 26.6476 30.432C30.1276 30.432 32.8396 28.08 32.8396 24.48C32.8396 21.384 30.4156 19.032 27.4156 19.032C26.8396 19.032 26.0716 19.128 25.6156 19.32L25.5916 19.296L29.9356 13.008H26.4316ZM23.3596 24.672C23.3596 22.68 24.7276 21.312 26.6716 21.312C28.5916 21.312 29.8876 22.704 29.8876 24.624C29.8876 26.64 28.5676 27.984 26.6236 27.984C24.6316 27.984 23.3596 26.448 23.3596 24.672ZM47.32 21.504C47.32 16.008 45.184 12.576 41.344 12.576C37.48 12.576 35.32 16.008 35.32 21.504C35.32 27 37.48 30.432 41.344 30.432C45.184 30.432 47.32 27 47.32 21.504ZM44.368 21.504C44.368 23.88 43.912 27.984 41.344 27.984C38.752 27.984 38.272 23.88 38.272 21.504C38.272 19.128 38.752 14.976 41.344 14.976C43.912 14.976 44.368 19.128 44.368 21.504Z", fill: fill }, void 0), jsx$1("path", { d: "M21.0373 46H24.5513C27.1413 46 30.0253 44.516 30.0253 41.044C30.0253 37.32 27.1413 36.088 24.5513 36.088H21.0373V46ZM22.8013 44.46V37.6H24.2713C26.0913 37.6 28.1353 38.202 28.1353 41.044C28.1353 43.718 26.0913 44.46 24.2713 44.46H22.8013ZM30.1829 46H32.1569L33.0529 43.732H37.3509L38.2749 46H40.2909L36.0209 36.088H34.4949L30.1829 46ZM33.6549 42.22L35.2089 38.188L36.7349 42.22H33.6549ZM42.8317 46H44.5957V41.702L48.3197 36.088H46.2757L43.7557 40.26L41.2637 36.088H39.1077L42.8317 41.702V46Z", fill: fill }, void 0)] }, void 0) }), void 0));
 };
 
+var Frown = function (_a) {
+    var height = _a.height, width = _a.width, fill = _a.fill, title = _a.title;
+    return (jsxs$1(IconWrapper, __assign({ width: width, height: height, viewBoxX: 68, viewBoxY: 68, title: title, fill: "none" }, { children: [jsx$1("path", { d: "M34 64C50.5685 64 64 50.5685 64 34C64 17.4315 50.5685 4 34 4C17.4315 4 4 17.4315 4 34C4 50.5685 17.4315 64 34 64Z", fill: "".concat(fill, "b6") }, void 0), jsx$1("path", { d: "M64 34.0296C64.0064 29.5175 62.9753 25.0627 60.9841 21C59.9702 30.9185 58.3731 39.7073 49.0635 48.6699C39.8271 57.5622 25.9923 57.4947 9 50.0686C14.4495 58.1257 23.0411 64 33.6008 64C41.6631 64 49.3953 60.8424 55.0963 55.2219C60.7972 49.6013 64 41.9783 64 34.0296Z", fill: fill }, void 0), jsx$1("path", { d: "M34 64C50.5685 64 64 50.5685 64 34C64 17.4315 50.5685 4 34 4C17.4315 4 4 17.4315 4 34C4 50.5685 17.4315 64 34 64Z", stroke: "#292929", strokeWidth: "2", strokeLinejoin: "round" }, void 0), jsx$1("path", { d: "M44.1292 48.8737C44.1292 48.8737 41.7372 42.8737 34.1292 42.8737C26.5212 42.8737 24.1292 48.8737 24.1292 48.8737", stroke: "#292929", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, void 0), jsx$1("path", { d: "M24.6292 32.1304C24.6292 33.5111 23.5099 34.6304 22.1292 34.6304C20.7485 34.6304 19.6292 33.5111 19.6292 32.1304C19.6292 30.7497 20.7485 29.6304 22.1292 29.6304C23.5099 29.6304 24.6292 30.7497 24.6292 32.1304Z", fill: "#292929", stroke: "#292929" }, void 0), jsx$1("path", { d: "M48.6292 32.1304C48.6292 33.5111 47.5099 34.6304 46.1292 34.6304C44.7485 34.6304 43.6292 33.5111 43.6292 32.1304C43.6292 30.7497 44.7485 29.6304 46.1292 29.6304C47.5099 29.6304 48.6292 30.7497 48.6292 32.1304Z", fill: "#292929", stroke: "#292929" }, void 0), jsx$1("path", { d: "M14.7553 23.6181C16.5344 19.9142 19.3229 16.7876 22.8 14.5982C26.2771 12.4087 30.3017 11.2452 34.4107 11.2415", stroke: "white", strokeWidth: "6", strokeLinecap: "round", strokeLinejoin: "round" }, void 0)] }), void 0));
+};
+
 var Custom$1 = /*#__PURE__*/Object.freeze({
     __proto__: null,
-    SixtyDaysGuarantee: SixtyDaysGuarantee
+    SixtyDaysGuarantee: SixtyDaysGuarantee,
+    Frown: Frown
 });
 
 var Check = function (_a) {
@@ -6839,43 +6845,51 @@ var StarStyles = {
             display: 'flex',
         });
     },
-    xsmall: function () {
+    xsmall: function (theme) {
         return css({
-            width: '0.656rem',
-            height: '0.656rem',
-            marginRight: '0.156rem',
+            svg: {
+                width: theme.component.stars.element.xsmall.width,
+                height: theme.component.stars.element.xsmall.height,
+                marginRight: theme.component.stars.element.xsmall.marginRight,
+            },
         });
     },
-    small: function () {
+    small: function (theme) {
         return css({
-            width: '0.875rem',
-            height: '0.875rem',
-            marginRight: '0.25rem',
+            svg: {
+                width: theme.component.stars.element.small.width,
+                height: theme.component.stars.element.small.height,
+                marginRight: theme.component.stars.element.small.marginRight,
+            },
         });
     },
-    medium: function () {
+    medium: function (theme) {
         return css({
-            width: '1.375rem',
-            height: '1.375rem',
-            marginRight: '0.375rem',
+            svg: {
+                width: theme.component.stars.element.medium.width,
+                height: theme.component.stars.element.medium.height,
+                marginRight: theme.component.stars.element.medium.marginRight,
+            },
         });
     },
-    large: function () {
+    large: function (theme) {
         return css({
-            width: '2.375rem',
-            height: '2.375rem',
-            marginRight: '0.375rem',
+            svg: {
+                width: theme.component.stars.element.large.width,
+                height: theme.component.stars.element.large.height,
+                marginRight: theme.component.stars.element.large.marginRight,
+            },
         });
     },
 };
-var Container$w = newStyled.div(templateObject_1$P || (templateObject_1$P = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
+var Container$w = newStyled.div(templateObject_1$P || (templateObject_1$P = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n"], ["\n  display: flex;\n  align-items: center;\n"])));
 var templateObject_1$P;
 
 var StarContainer = newStyled.div(function (_a) {
-    var size = _a.size;
+    var size = _a.size, theme = _a.theme;
     return [
         StarStyles.baseStyles(),
-        StarStyles[size],
+        StarStyles[size](theme),
     ];
 });
 var sizes = {
@@ -6886,8 +6900,9 @@ var sizes = {
 };
 var StarList = function (_a) {
     var rating = _a.rating, starsNumber = _a.starsNumber, fill = _a.fill, _b = _a.size, size = _b === void 0 ? ComponentSize.Medium : _b;
+    var theme = useTheme();
     return (jsx$1(Container$w, { children: __spreadArray([], new Array(starsNumber), true).map(function (_, index) {
-            return (jsx$1(StarContainer, __assign({ "data-testid": "star-container", size: size }, { children: index < Math.floor(rating) ? (jsx$1(Icon.PDP.Star, __assign({}, sizes[size], { fill: fill }), void 0)) : index === Math.floor(rating) && rating % 1 != 0 ? (jsx$1(Icon.PDP.StarHalf, __assign({}, sizes[size], { fill: fill }), void 0)) : (jsx$1(Icon.PDP.StarEmpty, __assign({}, sizes[size], { fill: fill }), void 0)) }), index));
+            return (jsx$1(StarContainer, __assign({ "data-testid": "star-container", size: size, theme: theme }, { children: index < Math.floor(rating) ? (jsx$1(Icon.PDP.Star, __assign({}, sizes[size], { fill: fill }), void 0)) : index === Math.floor(rating) && rating % 1 != 0 ? (jsx$1(Icon.PDP.StarHalf, __assign({}, sizes[size], { fill: fill }), void 0)) : (jsx$1(Icon.PDP.StarEmpty, __assign({}, sizes[size], { fill: fill }), void 0)) }), index));
         }) }, void 0));
 };
 
@@ -6934,17 +6949,25 @@ var Container$v = newStyled.div(templateObject_1$O || (templateObject_1$O = __ma
 var templateObject_1$O;
 
 var CustomLabel = newStyled.div(function (_a) {
-    var theme = _a.theme, size = _a.size;
+    var theme = _a.theme, size = _a.size, wrapWithParenthesis = _a.wrapWithParenthesis;
     return [
         LabelStyles.baseStyles(theme),
         LabelStyles[size](theme),
+        {
+            ':before': {
+                content: wrapWithParenthesis ? '"("' : '""',
+            },
+            ':after': {
+                content: wrapWithParenthesis ? '")"' : '""',
+            },
+        },
     ];
 });
 var starsNumber = 5;
 var Rating = function (_a) {
-    var _b = _a.size, size = _b === void 0 ? ComponentSize.Medium : _b, reviews = _a.reviews, reviewsText = _a.reviewsText, rating = _a.rating;
+    var _b = _a.size, size = _b === void 0 ? ComponentSize.Medium : _b, reviews = _a.reviews, reviewsText = _a.reviewsText, rating = _a.rating, _c = _a.wrapWithParenthesis, wrapWithParenthesis = _c === void 0 ? false : _c;
     var theme = useTheme();
-    return (jsxs$1(Container$v, { children: [jsx$1(StarList, { rating: rating, size: size, starsNumber: starsNumber, fill: theme.colors.pallete.primary.color }, void 0), jsxs$1(CustomLabel, __assign({ theme: theme, size: size, "data-testid": "CustomLabel" }, { children: [reviews, " ", reviewsText] }), void 0)] }, void 0));
+    return (jsxs$1(Container$v, { children: [jsx$1(StarList, { rating: rating, size: size, starsNumber: starsNumber, fill: theme.component.stars.element.color }, void 0), jsxs$1(CustomLabel, __assign({ theme: theme, size: size, wrapWithParenthesis: wrapWithParenthesis, "data-testid": "CustomLabel" }, { children: [reviews, " ", reviewsText] }), void 0)] }, void 0));
 };
 
 var Container$u = newStyled.div(templateObject_1$N || (templateObject_1$N = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  font-size: 0.88rem;\n"], ["\n  display: flex;\n  align-items: center;\n  font-size: 0.88rem;\n"])));
@@ -12523,21 +12546,15 @@ var ProductItemMobile = function (_a) {
     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;
     var theme = useTheme();
     var styles = getStylesBySize(size);
-    var spaces = useMemo(function () {
-        var _a, _b;
-        var first = (_a = {},
-            _a[ComponentSize.Large] = 20,
-            _a[ComponentSize.Medium] = 12,
-            _a[ComponentSize.Small] = 6,
+    var space = useMemo(function () {
+        var _a;
+        return (_a = {},
+            _a[ComponentSize.Large] = 8,
+            _a[ComponentSize.Medium] = 4,
+            _a[ComponentSize.Small] = 2,
             _a)[size];
-        var second = (_b = {},
-            _b[ComponentSize.Large] = 12,
-            _b[ComponentSize.Medium] = 6,
-            _b[ComponentSize.Small] = 4,
-            _b)[size];
-        return [first, second];
     }, [size]);
-    return (jsxs(Container$d, __assign({ as: url ? 'a' : 'div', href: url, className: className }, { children: [tags ? (jsxs(ImageContainer, __assign({ 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(SeasonOfferTag, { text: tags.seasonOfferTagText, size: ComponentSize.Small, css: { position: 'absolute', top: 0, left: 0 } }, void 0), 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: spaces[0] }, void 0), jsx(H1, __assign({ theme: theme, align: alignName }, { children: title }), void 0), jsx(Spacing, { size: spaces[1] }, void 0), jsx(PriceLabel, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, color: price.color, size: ComponentSize.Small }, void 0), jsx(Rating, { size: size === ComponentSize.Large ? ComponentSize.Small : ComponentSize.XSmall, rating: rating.rating, reviews: rating.reviews, reviewsText: "" }, void 0)] }), void 0));
+    return (jsxs(Container$d, __assign({ as: url ? 'a' : 'div', href: url, className: className }, { children: [tags ? (jsxs(ImageContainer, __assign({ 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(SeasonOfferTag, { text: tags.seasonOfferTagText, size: ComponentSize.Small, css: { position: 'absolute', top: 0, left: 0 } }, void 0), 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({ 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 }, 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));
 };
 var templateObject_1$j, templateObject_2$9;
 
@@ -13295,40 +13312,126 @@ var Portal = function (_a) {
     return createPortal(children, container.current, id);
 };
 
+var __defProp$1 = Object.defineProperty;
+var __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames$1 = Object.getOwnPropertyNames;
+var __hasOwnProp$1 = Object.prototype.hasOwnProperty;
+var __markAsModule$1 = (target) => __defProp$1(target, "__esModule", { value: true });
+var __export$1 = (target, all) => {
+  for (var name in all)
+    __defProp$1(target, name, { get: all[name], enumerable: true });
+};
+var __reExport$1 = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames$1(module2))
+      if (!__hasOwnProp$1.call(target, key) && (copyDefault || key !== "default"))
+        __defProp$1(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc$1(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toCommonJS$1 = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport$1(__markAsModule$1({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+
+// src/index.ts
+var src_exports = {};
+__export$1(src_exports, {
+  dispatchCustomEvent: () => dispatchCustomEvent,
+  listenEvent: () => listenEvent$1,
+  unlistenEvent: () => unlistenEvent$1
+});
+function listenEvent$1(event, handler) {
+  window.addEventListener(event, handler);
+  return () => unlistenEvent$1(event, handler);
+}
+function unlistenEvent$1(event, handler) {
+  window.removeEventListener(event, handler);
+}
+function dispatchCustomEvent(event, detail) {
+  window.dispatchEvent(new CustomEvent(event, { detail }));
+}
+var events = __toCommonJS$1(src_exports);
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+
+// src/react/index.ts
+var react_exports = {};
+__export(react_exports, {
+  useEvent: () => useEvent
+});
+var import_react = React__default;
+
+// src/index.ts
+function listenEvent(event, handler) {
+  window.addEventListener(event, handler);
+  return () => unlistenEvent(event, handler);
+}
+function unlistenEvent(event, handler) {
+  window.removeEventListener(event, handler);
+}
+
+// src/react/index.ts
+function useEvent(event, handler) {
+  (0, import_react.useEffect)(() => {
+    return listenEvent(event, handler);
+  }, [event, handler]);
+}
+var react = __toCommonJS(react_exports);
+
 var visibleStyle = function (_a) {
     var opened = _a.opened;
     return opened
         ? css(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n        opacity: 1;\n        pointer-events: all;\n        transform: translate(-50%, -50%);\n      "], ["\n        opacity: 1;\n        pointer-events: all;\n        transform: translate(-50%, -50%);\n      "]))) : css(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n        opacity: 0;\n        pointer-events: none;\n        transform: translate(-50%, -40%);\n      "], ["\n        opacity: 0;\n        pointer-events: none;\n        transform: translate(-50%, -40%);\n      "])));
 };
-var Container$2 = newStyled.div(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n  border: 1px solid var(--colors-pallete-primary-color);\n  border-radius: var(--radius-regular);\n  padding: 20px;\n  position: fixed;\n  left: 50%;\n  top: 50%;\n  z-index: var(--zIndex-modal);\n  background-color: var(--colors-background-color);\n  min-width: var(--component-modal-minWidth);\n  transition: transform 0.3s, opacity 0.3s;\n\n  ", ";\n"], ["\n  border: 1px solid var(--colors-pallete-primary-color);\n  border-radius: var(--radius-regular);\n  padding: 20px;\n  position: fixed;\n  left: 50%;\n  top: 50%;\n  z-index: var(--zIndex-modal);\n  background-color: var(--colors-background-color);\n  min-width: var(--component-modal-minWidth);\n  transition: transform 0.3s, opacity 0.3s;\n\n  ", ";\n"])), visibleStyle);
+var Container$2 = newStyled.div(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n  border: 1px solid var(--colors-pallete-primary-color);\n  border-radius: var(--radius-regular);\n  padding: 20px;\n  position: fixed;\n  left: 50%;\n  top: 50%;\n  z-index: var(--zIndex-modal);\n  background-color: var(--colors-background-color);\n  min-width: var(--component-modal-minWidth);\n  transition: transform 0.3s, opacity 0.3s;\n  max-width: 90vw;\n  max-height: 90vh;\n\n  ", ";\n"], ["\n  border: 1px solid var(--colors-pallete-primary-color);\n  border-radius: var(--radius-regular);\n  padding: 20px;\n  position: fixed;\n  left: 50%;\n  top: 50%;\n  z-index: var(--zIndex-modal);\n  background-color: var(--colors-background-color);\n  min-width: var(--component-modal-minWidth);\n  transition: transform 0.3s, opacity 0.3s;\n  max-width: 90vw;\n  max-height: 90vh;\n\n  ", ";\n"])), visibleStyle);
 var Overlay = newStyled.div(templateObject_4$1 || (templateObject_4$1 = __makeTemplateObject(["\n  position: fixed;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  background-color: rgba(0, 0, 0, 0.75);\n  z-index: var(--zIndex-overlay);\n  transition: transform 0.3s, opacity 0.3s;\n\n  ", "\n\n  transform: none;\n"], ["\n  position: fixed;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  background-color: rgba(0, 0, 0, 0.75);\n  z-index: var(--zIndex-overlay);\n  transition: transform 0.3s, opacity 0.3s;\n\n  ", "\n\n  transform: none;\n"])), visibleStyle);
 var Modal = function (_a) {
     var id = _a.id, children = _a.children, _b = _a.dismissable, dismissable = _b === void 0 ? true : _b;
     var _c = useState(false), opened = _c[0], setOpened = _c[1];
-    useEffect(function () {
-        var onModal = function (e) {
-            if (e.detail.id !== id) {
-                return;
-            }
-            setOpened(e.detail.type === 'open');
-        };
-        window.addEventListener('modal', onModal);
-        return function () {
-            window.removeEventListener('modal', onModal);
-        };
-    }, [id]);
+    useModalEvent(id, useCallback(function (e) {
+        setOpened(e.detail.type === 'open');
+    }, []));
     var onDismiss = function () {
         if (!dismissable) {
             return;
         }
-        setOpened(false);
+        modalEvent(id, { type: 'close' });
     };
     return (jsxs(Portal, __assign({ id: id }, { children: [jsx(Container$2, __assign({ opened: opened }, { children: children }), void 0), jsx(Overlay, { opened: opened, onClick: onDismiss }, void 0)] }), void 0));
 };
 var modalEvent = function (id, detail) {
-    window.dispatchEvent(new CustomEvent('modal', {
-        detail: __assign(__assign({}, detail), { id: id }),
-    }));
+    events.dispatchCustomEvent('modal', __assign({ id: id }, detail));
+};
+var useModalEvent = function (id, cb) {
+    react.useEvent('modal', useCallback(function (event) {
+        if (event.detail.id !== id) {
+            return;
+        }
+        cb(event);
+    }, [id, cb]));
 };
 var templateObject_1$5, templateObject_2$1, templateObject_3$1, templateObject_4$1;
 
@@ -13402,5 +13505,5 @@ var QuantityPicker = function (_a) {
 };
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
 
-export { Accordion, AmazonButton, AssetsProvider, Bundle, ButtonPrimary, ButtonSecondary, ButtonSecondaryOutline, Card$1 as Card, CardSectionType, CartProductItem, CategoryTag, Checkbox, Collection, ComponentPosition, ComponentSize, index as CrossSell, DeliveryDetails, DiscountTag, Drawer, DropdownListIcons, FilteringDropdown, Tags as FilteringTags, FitPredictor, Icon, IconButton, Image, Input$1 as Input, InputValidationType, Modal, MultiColorPicker, OfferBanner, OrderBar, Overlay, Pagination, PaymentMethod, PaypalButton, Portal, PriceLabel, ProductGallery, ProductGalleryMobile, ProgressBar, QuantityPicker, RadioGroupInput, RadioInput, Rating, Review, ScrollToTop, SearchBar, SeasonOfferTag, SimpleDropdown, SimpleOrderItem, SingleColorPicker, SizeFitGuide, SizeSelector, SizeTable, SliderNavigation, Spacing, Spinner, StarList, Text$5 as Text, TextButton, ThemeProvider, ThemeVariables, Timer, Tooltip, Totals, decimalFormat, formatPrice, isEmail, isEmpty, isNumber, isPhoneNumber, isValidDate, modalEvent, simulateMouseClick, sliceString, useOnClickOutside, useTheme, useThemeAssets, useWindowDimensions };
+export { Accordion, AmazonButton, AssetsProvider, Bundle, ButtonPrimary, ButtonSecondary, ButtonSecondaryOutline, Card$1 as Card, CardSectionType, CartProductItem, CategoryTag, Checkbox, Collection, ComponentPosition, ComponentSize, index as CrossSell, DeliveryDetails, DiscountTag, Drawer, DropdownListIcons, FilteringDropdown, Tags as FilteringTags, FitPredictor, Icon, IconButton, Image, Input$1 as Input, InputValidationType, Modal, MultiColorPicker, OfferBanner, OrderBar, Overlay, Pagination, PaymentMethod, PaypalButton, Portal, PriceLabel, ProductGallery, ProductGalleryMobile, ProgressBar, QuantityPicker, RadioGroupInput, RadioInput, Rating, Review, ScrollToTop, SearchBar, SeasonOfferTag, SimpleDropdown, SimpleOrderItem, SingleColorPicker, SizeFitGuide, SizeSelector, SizeTable, SliderNavigation, Spacing, Spinner, StarList, Text$5 as Text, TextButton, ThemeProvider, ThemeVariables, Timer, Tooltip, Totals, decimalFormat, formatPrice, isEmail, isEmpty, isNumber, isPhoneNumber, isValidDate, modalEvent, simulateMouseClick, sliceString, useModalEvent, useOnClickOutside, useTheme, useThemeAssets, useWindowDimensions };
 //# sourceMappingURL=index.esm.js.map