@trafilea/afrodita-components 5.0.0-beta.10 → 5.0.0-beta.11

package/build/index.d.ts

@@ -509,8 +509,9 @@ interface SizeFitGuideProps {
     title: string;
     fitPercentage?: number;
     onClick: () => void;
+    onClickFitPercentage?: () => void;
 }
-declare const SizeFitGuide: ({ title, fitPercentage, onClick }: SizeFitGuideProps) => JSX.Element;
+declare const SizeFitGuide: ({ title, fitPercentage, onClick, onClickFitPercentage, }: SizeFitGuideProps) => JSX.Element;
 
 interface BaseButtonProps {
     children: React.ReactNode;
@@ -1620,7 +1621,12 @@ declare const Overlay: _emotion_styled.StyledComponent<{
 }, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 declare const Modal: FC<ModalProps>;
 declare const modalEvent: (id: string, detail: Omit<Events['modal'], 'id'>) => void;
-declare const useModalEvent: (id: string, cb: (event: CustomEvent<Events['modal']>) => void) => void;
+declare const useModalEvent: (id: string, cb: (event: CustomEvent<Events['modal']>) => void) => void;
+declare const useModal: (id: string) => {
+    opened: boolean;
+    open: () => void;
+    close: () => void;
+};
 
 interface CloseButtonProps {
     onClick: () => void;
@@ -1741,4 +1747,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, Filters, FitPredictor, Icon, IconButton, IconProps, IconWithOpacityProps, Image, ImageType, Input, InputValidationType, Modal, MultiColorPicker, OfferBanner, OrderBar, Overlay, PackSelector, 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 };
+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, Filters, FitPredictor, Icon, IconButton, IconProps, IconWithOpacityProps, Image, ImageType, Input, InputValidationType, Modal, MultiColorPicker, OfferBanner, OrderBar, Overlay, PackSelector, 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, useModal, useModalEvent, useOnClickOutside, useTheme, useThemeAssets, useWindowDimensions };

package/build/index.esm.js

@@ -4255,10 +4255,10 @@ var templateObject_1$11;
 
 var Container$E = newStyled.div(templateObject_1$10 || (templateObject_1$10 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  font-size: 0.88rem;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  font-size: 0.88rem;\n"])));
 var P$3 = newStyled.p(templateObject_2$F || (templateObject_2$F = __makeTemplateObject(["\n  margin: 0;\n"], ["\n  margin: 0;\n"])));
-var PercentageSpan = newStyled.span(templateObject_3$q || (templateObject_3$q = __makeTemplateObject(["\n  font-weight: 700;\n  text-decoration-line: underline;\n"], ["\n  font-weight: 700;\n  text-decoration-line: underline;\n"])));
+var PercentageSpan = newStyled.span(templateObject_3$q || (templateObject_3$q = __makeTemplateObject(["\n  font-weight: 700;\n  text-decoration-line: underline;\n  cursor: pointer;\n"], ["\n  font-weight: 700;\n  text-decoration-line: underline;\n  cursor: pointer;\n"])));
 var SizeFitGuide = function (_a) {
-    var title = _a.title, fitPercentage = _a.fitPercentage, onClick = _a.onClick;
-    return (jsxs$1(Container$E, { children: [jsx$1(TextButton, { LeadingIcon: Icon.PDP.Rule, size: ComponentSize.Small, text: title, onClick: onClick }, void 0), !!fitPercentage && (jsxs$1(P$3, { children: ["Fit As Expected: ", jsxs$1(PercentageSpan, { children: [fitPercentage, "%"] }, void 0)] }, void 0))] }, void 0));
+    var title = _a.title, fitPercentage = _a.fitPercentage, onClick = _a.onClick, onClickFitPercentage = _a.onClickFitPercentage;
+    return (jsxs$1(Container$E, { children: [jsx$1(TextButton, { LeadingIcon: Icon.PDP.Rule, size: ComponentSize.Small, text: title, onClick: onClick }, void 0), !!fitPercentage && (jsxs$1(P$3, { children: ["Fit As Expected:", ' ', jsxs$1(PercentageSpan, __assign$1({ onClick: onClickFitPercentage, role: "button" }, { children: [fitPercentage, "%"] }), void 0)] }, void 0))] }, void 0));
 };
 var templateObject_1$10, templateObject_2$F, templateObject_3$q;
 
@@ -5702,41 +5702,29 @@ var index$2 = function (breakpoints) {
   };
 };
 
-var mediaQueries = function (_a) {
-    var theme = _a.theme;
-    return index$2([
-        "@media(min-width: ".concat(theme.mediaQueries.mobile, "px)"),
-        "@media(min-width: ".concat(theme.mediaQueries.desktop, "px)"),
-    ], { literal: true });
-};
+var mediaQueries = index$2(["@media(max-width: 900px)", "@media(min-width: 900px)"], {
+    literal: true,
+});
 
 var Title$3 = newStyled.h1(templateObject_1$w || (templateObject_1$w = __makeTemplateObject(["\n  color: ", ";\n  font-size: 1.25rem;\n  line-height: 1.75rem;\n  font-weight: 600;\n  margin: 0;\n  text-align: center;\n"], ["\n  color: ", ";\n  font-size: 1.25rem;\n  line-height: 1.75rem;\n  font-weight: 600;\n  margin: 0;\n  text-align: center;\n"])), function (props) { return props.color; });
 var Line = newStyled.div(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\n  width: 100%;\n  height: 0.063rem;\n  background-color: ", ";\n  margin: 0.938rem 0;\n"], ["\n  width: 100%;\n  height: 0.063rem;\n  background-color: ", ";\n  margin: 0.938rem 0;\n"])), function (props) { return props.backgroundColor; });
-var Row$1 = newStyled.div(templateObject_3$f || (templateObject_3$f = __makeTemplateObject(["\n  display: flex;\n  ", "\n  justify-content: space-between;\n  align-items: flex-start;\n"], ["\n  display: flex;\n  ", "\n  justify-content: space-between;\n  align-items: flex-start;\n"])), function (props) {
-    return mediaQueries(props)({
-        flexDirection: ['column', 'row'],
-    });
-});
-var Col$1 = newStyled.div(templateObject_4$a || (templateObject_4$a = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  flex: 1;\n  ", "\n"], ["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  flex: 1;\n  ", "\n"])), function (props) {
-    return mediaQueries(props)({
-        margin: ['0', '0 1.25rem'],
-        marginBottom: ['1.875rem', '0'],
-        alignItems: ['center', 'flex-start'],
-        textAlign: ['center', 'inherit'],
-        width: ['100%', 'inherit'],
-    });
-});
-var IconContainer$2 = newStyled.div(templateObject_5$6 || (templateObject_5$6 = __makeTemplateObject(["\n  width: 1.375rem;\n  height: 1.375rem;\n  margin-right: 0.438rem;\n  ", "\n"], ["\n  width: 1.375rem;\n  height: 1.375rem;\n  margin-right: 0.438rem;\n  ", "\n"])), function (props) {
-    return mediaQueries(props)({
-        marginBottom: ['1.875rem', '0'],
-        width: ['auto', '1.375rem'],
-    });
-});
-var SectionTitle = newStyled.h1(templateObject_6$5 || (templateObject_6$5 = __makeTemplateObject(["\n  ", "\n  color: ", ";\n  font-size: 1rem;\n  line-height: 1.25rem;\n  font-weight: 600;\n  margin: 0;\n"], ["\n  ", "\n  color: ", ";\n  font-size: 1rem;\n  line-height: 1.25rem;\n  font-weight: 600;\n  margin: 0;\n"])), function (props) {
-    return mediaQueries(props)({
-        display: ['block', 'flex'],
-    });
-}, function (_a) {
+var Row$1 = newStyled.div(templateObject_3$f || (templateObject_3$f = __makeTemplateObject(["\n  display: flex;\n  ", "\n  justify-content: space-between;\n  align-items: flex-start;\n"], ["\n  display: flex;\n  ", "\n  justify-content: space-between;\n  align-items: flex-start;\n"])), mediaQueries({
+    flexDirection: ['column', 'row'],
+}));
+var Col$1 = newStyled.div(templateObject_4$a || (templateObject_4$a = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  flex: 1;\n  ", "\n"], ["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  flex: 1;\n  ", "\n"])), mediaQueries({
+    margin: ['0', '0 1.25rem'],
+    marginBottom: ['1.875rem', '0'],
+    alignItems: ['center', 'flex-start'],
+    textAlign: ['center', 'inherit'],
+    width: ['100%', 'inherit'],
+}));
+var IconContainer$2 = newStyled.div(templateObject_5$6 || (templateObject_5$6 = __makeTemplateObject(["\n  width: 1.375rem;\n  height: 1.375rem;\n  margin-right: 0.438rem;\n  ", "\n"], ["\n  width: 1.375rem;\n  height: 1.375rem;\n  margin-right: 0.438rem;\n  ", "\n"])), mediaQueries({
+    marginBottom: ['1.875rem', '0'],
+    width: ['auto', '1.375rem'],
+}));
+var SectionTitle = newStyled.h1(templateObject_6$5 || (templateObject_6$5 = __makeTemplateObject(["\n  ", "\n  color: ", ";\n  font-size: 1rem;\n  line-height: 1.25rem;\n  font-weight: 600;\n  margin: 0;\n"], ["\n  ", "\n  color: ", ";\n  font-size: 1rem;\n  line-height: 1.25rem;\n  font-weight: 600;\n  margin: 0;\n"])), mediaQueries({
+    display: ['block', 'flex'],
+}), function (_a) {
     var theme = _a.theme;
     return theme.colors.shades['700'].color;
 });
@@ -5780,12 +5768,9 @@ var templateObject_1$t, templateObject_2$h, templateObject_3$e, templateObject_4
 
 var Container$g = newStyled.div(templateObject_1$s || (templateObject_1$s = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  width: auto;\n"], ["\n  display: flex;\n  flex-direction: row;\n  width: auto;\n"])));
 var ImageContainer$1 = newStyled.div(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n  position: relative;\n"], ["\n  position: relative;\n"])));
-var DescriptionContainer = newStyled.div(templateObject_3$d || (templateObject_3$d = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  ", ";\n  width: 100%;\n"], ["\n  display: flex;\n  flex-direction: column;\n  ", ";\n  width: 100%;\n"])), function (_a) {
-    var theme = _a.theme;
-    return mediaQueries({ theme: theme })({
-        marginLeft: ['0.938rem', '1.875rem'],
-    });
-});
+var DescriptionContainer = newStyled.div(templateObject_3$d || (templateObject_3$d = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  ", ";\n  width: 100%;\n"], ["\n  display: flex;\n  flex-direction: column;\n  ", ";\n  width: 100%;\n"])), mediaQueries({
+    marginLeft: ['0.938rem', '1.875rem'],
+}));
 var Title$2 = newStyled.h2(function (_a) {
     var color = _a.color;
     return ({
@@ -5807,9 +5792,9 @@ var Subtitle = newStyled.h3(function (_a) {
     });
 });
 var PriceContainer = newStyled.div(templateObject_4$8 || (templateObject_4$8 = __makeTemplateObject(["\n  display: flex;\n  ", ";\n  height: 100%;\n  align-items: end;\n  margin-top: 0.219rem;\n"], ["\n  display: flex;\n  ", ";\n  height: 100%;\n  align-items: end;\n  margin-top: 0.219rem;\n"])), function (_a) {
-    var withTag = _a.withTag, theme = _a.theme;
+    var withTag = _a.withTag; _a.theme;
     return withTag
-        ? mediaQueries({ theme: theme })({
+        ? mediaQueries({
             justifyContent: ['space-between', 'end'],
             flexDirection: ['row', 'column'],
         })
@@ -5831,39 +5816,24 @@ function formatDate(date) {
 }
 
 var Container$f = newStyled.div(templateObject_1$r || (templateObject_1$r = __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$f || (templateObject_2$f = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  width: 100%;\n  ", ";\n  text-align: right;\n  margin-bottom: 10px;\n"], ["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  width: 100%;\n  ", ";\n  text-align: right;\n  margin-bottom: 10px;\n"])), function (_a) {
-    var theme = _a.theme;
-    return mediaQueries({ theme: theme })({
-        fontSize: ['14px', '16px'],
-        lineHeight: ['22px', '24px'],
-    });
-});
-var Content = newStyled.div(templateObject_3$c || (templateObject_3$c = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  ", ";\n"], ["\n  display: flex;\n  justify-content: space-between;\n  ", ";\n"])), function (_a) {
-    var theme = _a.theme;
-    return mediaQueries({ theme: theme })({
-        flexDirection: ['column', 'row'],
-    });
-});
-var ReviewContainer = newStyled.div(templateObject_4$7 || (templateObject_4$7 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  ", ";\n"], ["\n  display: flex;\n  flex-direction: column;\n  ", ";\n"])), function (_a) {
-    var theme = _a.theme;
-    return mediaQueries({ theme: theme })({
-        margin: ['0 0 8px 0', '0 50px 0 0'],
-    });
-});
-var H2$1 = newStyled.h2(templateObject_5$4 || (templateObject_5$4 = __makeTemplateObject(["\n  font-weight: 600;\n  ", ";\n  margin: 0;\n"], ["\n  font-weight: 600;\n  ", ";\n  margin: 0;\n"])), function (_a) {
-    var theme = _a.theme;
-    return mediaQueries({ theme: theme })({
-        fontSize: ['16px', '18px'],
-        lineHeight: ['24px', '28px'],
-    });
-});
-var H3$1 = newStyled.h3(templateObject_6$4 || (templateObject_6$4 = __makeTemplateObject(["\n  font-size: 16px;\n  line-height: 24px;\n  ", ";\n  margin: 10px 0 8px;\n"], ["\n  font-size: 16px;\n  line-height: 24px;\n  ", ";\n  margin: 10px 0 8px;\n"])), function (_a) {
-    var theme = _a.theme;
-    return mediaQueries({ theme: theme })({
-        fontSize: ['14px', '16px'],
-        lineHeight: ['22px', '24px'],
-    });
-});
+var Heading = newStyled.div(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  width: 100%;\n  ", ";\n  text-align: right;\n  margin-bottom: 10px;\n"], ["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  width: 100%;\n  ", ";\n  text-align: right;\n  margin-bottom: 10px;\n"])), mediaQueries({
+    fontSize: ['14px', '16px'],
+    lineHeight: ['22px', '24px'],
+}));
+var Content = newStyled.div(templateObject_3$c || (templateObject_3$c = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  ", ";\n"], ["\n  display: flex;\n  justify-content: space-between;\n  ", ";\n"])), mediaQueries({
+    flexDirection: ['column', 'row'],
+}));
+var ReviewContainer = newStyled.div(templateObject_4$7 || (templateObject_4$7 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  ", ";\n"], ["\n  display: flex;\n  flex-direction: column;\n  ", ";\n"])), mediaQueries({
+    margin: ['0 0 8px 0', '0 50px 0 0'],
+}));
+var H2$1 = newStyled.h2(templateObject_5$4 || (templateObject_5$4 = __makeTemplateObject(["\n  font-weight: 600;\n  ", ";\n  margin: 0;\n"], ["\n  font-weight: 600;\n  ", ";\n  margin: 0;\n"])), mediaQueries({
+    fontSize: ['16px', '18px'],
+    lineHeight: ['24px', '28px'],
+}));
+var H3$1 = newStyled.h3(templateObject_6$4 || (templateObject_6$4 = __makeTemplateObject(["\n  font-size: 16px;\n  line-height: 24px;\n  ", ";\n  margin: 10px 0 8px;\n"], ["\n  font-size: 16px;\n  line-height: 24px;\n  ", ";\n  margin: 10px 0 8px;\n"])), mediaQueries({
+    fontSize: ['14px', '16px'],
+    lineHeight: ['22px', '24px'],
+}));
 var P$1 = newStyled.p(templateObject_7$2 || (templateObject_7$2 = __makeTemplateObject(["\n  font-weight: normal;\n  font-size: 16px;\n  line-height: 24px;\n  margin: 0;\n"], ["\n  font-weight: normal;\n  font-size: 16px;\n  line-height: 24px;\n  margin: 0;\n"])));
 var Review = function (_a) {
     var reviewerName = _a.reviewerName, date = _a.date, rating = _a.rating, stars = _a.stars, title = _a.title, description = _a.description, image = _a.image;
@@ -10413,12 +10383,9 @@ function FilteringDropdown(_a) {
 
 var Container$b = newStyled.div(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  user-select: none;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  user-select: none;\n"])));
 var IconContainer$1 = newStyled.div(templateObject_2$8 || (templateObject_2$8 = __makeTemplateObject(["\n  width: 0.531rem;\n  height: 0.875rem;\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n"], ["\n  width: 0.531rem;\n  height: 0.875rem;\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n"])));
-var PageNumbersContainer = newStyled.div(templateObject_3$8 || (templateObject_3$8 = __makeTemplateObject(["\n  display: flex;\n  ", ";\n"], ["\n  display: flex;\n  ", ";\n"])), function (_a) {
-    var theme = _a.theme;
-    return mediaQueries({ theme: theme })({
-        margin: ['0 0.75rem', '0 1.25rem'],
-    });
-});
+var PageNumbersContainer = newStyled.div(templateObject_3$8 || (templateObject_3$8 = __makeTemplateObject(["\n  display: flex;\n  ", ";\n"], ["\n  display: flex;\n  ", ";\n"])), mediaQueries({
+    margin: ['0 0.75rem', '0 1.25rem'],
+}));
 var PageNumber = newStyled.span(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject(["\n  font-weight: ", ";\n  color: ", ";\n  text-align: center;\n  cursor: pointer;\n  border-bottom: ", ";\n  ", ";\n"], ["\n  font-weight: ", ";\n  color: ", ";\n  text-align: center;\n  cursor: pointer;\n  border-bottom: ", ";\n  ", ";\n"])), function (_a) {
     var bold = _a.bold;
     return (bold ? '700' : '500');
@@ -10428,14 +10395,11 @@ var PageNumber = newStyled.span(templateObject_4$4 || (templateObject_4$4 = __ma
 }, function (_a) {
     var underline = _a.underline, borderColor = _a.borderColor;
     return underline ? "0.063rem solid ".concat(borderColor) : 'none';
-}, function (_a) {
-    var theme = _a.theme;
-    return mediaQueries({ theme: theme })({
-        fontSize: ['1rem', '1.25rem'],
-        lineHeight: ['1.5rem', '1.75rem'],
-        width: ['1.25rem', '1.875rem'],
-    });
-});
+}, mediaQueries({
+    fontSize: ['1rem', '1.25rem'],
+    lineHeight: ['1.5rem', '1.75rem'],
+    width: ['1.25rem', '1.875rem'],
+}));
 var templateObject_1$h, templateObject_2$8, templateObject_3$8, templateObject_4$4;
 
 var Pagination = function (_a) {
@@ -10452,11 +10416,9 @@ var Pagination = function (_a) {
     return (jsxs$1(Container$b, __assign$1({ "data-testid": "PaginationContainer" }, { children: [jsx$1(IconContainer$1, __assign$1({ onClick: function () { return handlePageChange(page - 1); }, "data-testid": "LeftChevron" }, { children: jsx$1(Icon.Arrows.ChevronLeft, { fill: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, void 0) }), void 0), jsx$1(PageNumbersContainer, __assign$1({ "data-testid": "PageNumbersContainer", theme: theme }, { children: new Array(to - from + 1).fill(0).map(function (_, i) { return (jsx$1(PageNumber, __assign$1({ onClick: function () { return handlePageChange(i + from); }, bold: boldActive && page === i + from, underline: underlineActive && page === i + from, role: 'button', color: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color, borderColor: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color, theme: theme }, { children: i + from }), i)); }) }), void 0), jsx$1(IconContainer$1, __assign$1({ onClick: function () { return handlePageChange(page + 1); }, "data-testid": "RightChevron" }, { children: jsx$1(Icon.Arrows.ChevronRight, { fill: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, void 0) }), void 0)] }), void 0));
 };
 
-var Container$a = newStyled.div(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  width: auto;\n  padding: 0.688rem 0rem;\n  ", ",\n"], ["\n  display: flex;\n  flex-direction: row;\n  width: auto;\n  padding: 0.688rem 0rem;\n  ", ",\n"])), function (props) {
-    return mediaQueries(props)({
-        borderTop: ["0.063rem solid ".concat(props.theme.colors.shades['100'].color), 'none'],
-    });
-});
+var Container$a = newStyled.div(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  width: auto;\n  padding: 0.688rem 0rem;\n  ", ",\n"], ["\n  display: flex;\n  flex-direction: row;\n  width: auto;\n  padding: 0.688rem 0rem;\n  ", ",\n"])), mediaQueries({
+    borderTop: ['0.063rem solid var(--colors-shades-100-color)', 'none'],
+}));
 var Description$1 = newStyled.div({
     display: 'flex',
     flexDirection: 'column',
@@ -10489,12 +10451,10 @@ var Ul = newStyled.ul({
     margin: '0px',
     padding: '0px',
 });
-var Li = newStyled.li(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n  width: 100%;\n  cursor: pointer;\n  list-style-type: none;\n  box-sizing: border-box;\n  &:hover {\n    background-color: ", ";\n  }\n  ", ",\n"], ["\n  width: 100%;\n  cursor: pointer;\n  list-style-type: none;\n  box-sizing: border-box;\n  &:hover {\n    background-color: ", ";\n  }\n  ", ",\n"])), function (props) { return props.theme.colors.shades['100'].color; }, function (props) {
-    return mediaQueries(props)({
-        padding: [0, '0rem 1rem'],
-        borderRadius: [0, '0.5rem'],
-    });
-});
+var Li = newStyled.li(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n  width: 100%;\n  cursor: pointer;\n  list-style-type: none;\n  box-sizing: border-box;\n  &:hover {\n    background-color: ", ";\n  }\n  ", ",\n"], ["\n  width: 100%;\n  cursor: pointer;\n  list-style-type: none;\n  box-sizing: border-box;\n  &:hover {\n    background-color: ", ";\n  }\n  ", ",\n"])), function (props) { return props.theme.colors.shades['100'].color; }, mediaQueries({
+    padding: [0, '0rem 1rem'],
+    borderRadius: [0, '0.5rem'],
+}));
 var Button$2 = newStyled.button({
     width: '100%',
     border: 'none',
@@ -10502,18 +10462,14 @@ var Button$2 = newStyled.button({
     cursor: 'pointer',
     padding: 0,
 });
-var Container$8 = newStyled.div(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  margin: 0rem;\n  padding: 0rem;\n  position: absolute;\n  width: 100%;\n  background-color: white;\n  box-sizing: border-box;\n  z-index: 2;\n  ", ",\n"], ["\n  display: flex;\n  flex-direction: column;\n  margin: 0rem;\n  padding: 0rem;\n  position: absolute;\n  width: 100%;\n  background-color: white;\n  box-sizing: border-box;\n  z-index: 2;\n  ", ",\n"])), function (props) {
-    return mediaQueries(props)({
-        border: ['none', "0.063rem solid ".concat(props.theme.colors.pallete.secondary.color)],
-        marginTop: ['1.25rem', '0.125rem'],
-        borderRadius: ['0', '0.5rem'],
-    });
-});
-var Header$1 = newStyled.div(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject(["\n  ", ",\n"], ["\n  ", ",\n"])), function (props) {
-    return mediaQueries(props)({
-        margin: ['0rem 0rem 1rem 0rem', '1rem'],
-    });
-});
+var Container$8 = newStyled.div(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  margin: 0rem;\n  padding: 0rem;\n  position: absolute;\n  width: 100%;\n  background-color: white;\n  box-sizing: border-box;\n  z-index: 2;\n  ", ",\n"], ["\n  display: flex;\n  flex-direction: column;\n  margin: 0rem;\n  padding: 0rem;\n  position: absolute;\n  width: 100%;\n  background-color: white;\n  box-sizing: border-box;\n  z-index: 2;\n  ", ",\n"])), mediaQueries({
+    border: ['none', '0.063rem solid var(--colors-pallete-secondary-color)'],
+    marginTop: ['1.25rem', '0.125rem'],
+    borderRadius: ['0', '0.5rem'],
+}));
+var Header$1 = newStyled.div(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject(["\n  ", ",\n"], ["\n  ", ",\n"])), mediaQueries({
+    margin: ['0rem 0rem 1rem 0rem', '1rem'],
+}));
 var ResultsPanel = function (_a) {
     var options = _a.options, header = _a.header, footer = _a.footer, onClick = _a.onClick, onViewAll = _a.onViewAll, testId = _a.testId;
     var theme = useTheme();
@@ -10550,12 +10506,10 @@ var Input = newStyled.input(function (props) { return ({
     },
 }); });
 
-var Button$1 = newStyled.button(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n  position: absolute;\n  right: 1rem;\n  background: white;\n  border: none;\n  align-self: center;\n  padding: 0;\n  ", ",\n"], ["\n  position: absolute;\n  right: 1rem;\n  background: white;\n  border: none;\n  align-self: center;\n  padding: 0;\n  ", ",\n"])), function (props) {
-    return mediaQueries(props)({
-        right: ['1rem', '-3.75rem'],
-        top: ['0.75rem', '0'],
-    });
-});
+var Button$1 = newStyled.button(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n  position: absolute;\n  right: 1rem;\n  background: white;\n  border: none;\n  align-self: center;\n  padding: 0;\n  ", ",\n"], ["\n  position: absolute;\n  right: 1rem;\n  background: white;\n  border: none;\n  align-self: center;\n  padding: 0;\n  ", ",\n"])), mediaQueries({
+    right: ['1rem', '-3.75rem'],
+    top: ['0.75rem', '0'],
+}));
 var ClearButton = function (_a) {
     var onClick = _a.onClick;
     var theme = useTheme();
@@ -11144,19 +11098,18 @@ var visibleStyle = function (_a) {
     return opened
         ? css(templateObject_1$8 || (templateObject_1$8 = __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$4 || (templateObject_2$4 = __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$3 = newStyled.div(templateObject_3$4 || (templateObject_3$4 = __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 Container$3 = newStyled.div(templateObject_3$4 || (templateObject_3$4 = __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  transition: transform 0.3s, opacity 0.3s;\n  max-width: 90vw;\n  max-height: 90vh;\n  ", "\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  transition: transform 0.3s, opacity 0.3s;\n  max-width: 90vw;\n  max-height: 90vh;\n  ", "\n\n  ", ";\n"])), mediaQueries({
+    minWidth: ['50%', 'var(--component-modal-minWidth)'],
+}), visibleStyle);
 var Overlay = newStyled.div(templateObject_4$3 || (templateObject_4$3 = __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];
-    useModalEvent(id, useCallback(function (e) {
-        setOpened(e.detail.type === 'open');
-    }, []));
+    var _c = useModal(id), opened = _c.opened, close = _c.close;
     var onDismiss = function () {
         if (!dismissable) {
             return;
         }
-        modalEvent(id, { type: 'close' });
+        close();
     };
     return (jsxs(Portal, __assign$1({ id: id }, { children: [jsx(Container$3, __assign$1({ opened: opened }, { children: children }), void 0), jsx(Overlay, { opened: opened, onClick: onDismiss }, void 0)] }), void 0));
 };
@@ -11171,6 +11124,21 @@ var useModalEvent = function (id, cb) {
         cb(event);
     }, [id, cb]));
 };
+var useModal = function (id) {
+    var _a = useState(false), opened = _a[0], setOpened = _a[1];
+    useModalEvent(id, useCallback(function (event) { return setOpened(event.detail.type === 'open'); }, []));
+    var open = useCallback(function () {
+        modalEvent(id, { type: 'open' });
+    }, [id]);
+    var close = useCallback(function () {
+        modalEvent(id, { type: 'close' });
+    }, [id]);
+    return useMemo(function () { return ({
+        opened: opened,
+        open: open,
+        close: close,
+    }); }, [close, open, opened]);
+};
 var templateObject_1$8, templateObject_2$4, templateObject_3$4, templateObject_4$3;
 
 var Text$2 = newStyled.span(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n  font-size: 0.875rem;\n  font-weight: 600;\n  line-height: 1.375rem;\n  color: ", ";\n  margin: 0;\n  padding: 0;\n"], ["\n  font-size: 0.875rem;\n  font-weight: 600;\n  line-height: 1.375rem;\n  color: ", ";\n  margin: 0;\n  padding: 0;\n"])), function (props) { return props.color; });
@@ -15104,5 +15072,5 @@ var FilterCheckbox = function (_a) {
     return (jsx$1(Checkbox, { onChange: onChange, text: text, id: "filter[".concat(sectionIndex, ",").concat(itemIndex, "]"), size: ComponentSize.Small, variant: "secondary" }, itemIndex));
 };
 
-export { Accordion$1 as Accordion, AmazonButton, AssetsProvider, Bundle, ButtonPrimary, ButtonSecondary, ButtonSecondaryOutline, Card$2 as Card, CardSectionType, CartProductItem, CategoryTag, Checkbox, Collection, ComponentPosition, ComponentSize, index as CrossSell, DeliveryDetails, DiscountTag, Drawer, DropdownListIcons, FilteringDropdown, Tags as FilteringTags, Filters, FitPredictor, Icon, IconButton, Image, Input$1 as Input, InputValidationType, Modal, MultiColorPicker, OfferBanner, OrderBar, Overlay, PackSelector, 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$1 as isNumber, isPhoneNumber, isValidDate, modalEvent, simulateMouseClick, sliceString, useModalEvent, useOnClickOutside, useTheme, useThemeAssets, useWindowDimensions };
+export { Accordion$1 as Accordion, AmazonButton, AssetsProvider, Bundle, ButtonPrimary, ButtonSecondary, ButtonSecondaryOutline, Card$2 as Card, CardSectionType, CartProductItem, CategoryTag, Checkbox, Collection, ComponentPosition, ComponentSize, index as CrossSell, DeliveryDetails, DiscountTag, Drawer, DropdownListIcons, FilteringDropdown, Tags as FilteringTags, Filters, FitPredictor, Icon, IconButton, Image, Input$1 as Input, InputValidationType, Modal, MultiColorPicker, OfferBanner, OrderBar, Overlay, PackSelector, 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$1 as isNumber, isPhoneNumber, isValidDate, modalEvent, simulateMouseClick, sliceString, useModal, useModalEvent, useOnClickOutside, useTheme, useThemeAssets, useWindowDimensions };
 //# sourceMappingURL=index.esm.js.map