@trafilea/afrodita-components 4.4.0-beta.0 → 4.4.0-beta.3

package/build/index.d.ts

@@ -573,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;
@@ -830,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;
     };
@@ -1571,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;
@@ -1628,6 +1646,15 @@ declare type SpacingProps = {
 };
 declare const Spacing: FC<SpacingProps>;
 
+declare global {
+    interface Events {
+        modal: {
+            id: string;
+            type: 'open' | 'close';
+        };
+    }
+}
+
 declare const useOnClickOutside: <T extends HTMLElement = HTMLElement>(ref: RefObject<T>, handler: (event: Event) => void) => void;
 
 declare const useWindowDimensions: (breakpoints: ThemeBreakpoints) => {
@@ -1658,4 +1685,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

@@ -6845,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 = {
@@ -6892,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));
 };
 
@@ -6940,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"])));
@@ -12529,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;
 
@@ -13301,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;
 
@@ -13408,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