@trafilea/afrodita-components 5.0.0-beta.291 → 5.0.0-beta.293

package/build/index.esm.js/src/components/dropdown/variants/filtering/FilteringDropdown.js

@@ -0,0 +1,41 @@
+import { __assign, __spreadArray } from '../../../../../node_modules/tslib/tslib.es6.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import { Icon } from '../../../icons/index.js';
+import BaseDropdown from '../../base/BaseDropdown.js';
+import { sliceString } from '../../../../utils/sliceString/sliceString.js';
+import '../../../../utils/media.js';
+
+function FilteringDropdown(_a) {
+    var options = _a.options, _b = _a.disabled, disabled = _b === void 0 ? false : _b, placeHolder = _a.placeHolder, _c = _a.wide, wide = _c === void 0 ? false : _c, _d = _a.sliceAfter, sliceAfter = _d === void 0 ? 100 : _d, _e = _a.filter, filter = _e === void 0 ? false : _e, onChange = _a.onChange;
+    var _f = useState([]), selectedValues = _f[0], setSelectedValues = _f[1];
+    var getFilterLabel = function () {
+        return selectedValues.length === 0
+            ? placeHolder
+            : "(".concat(selectedValues.length, ") ").concat(selectedValues.map(function (_a) {
+                var label = _a.label;
+                return label;
+            }).join(', '));
+    };
+    var onChangeHandler = function (value) {
+        setSelectedValues(function (prevState) {
+            var newState = [];
+            if (prevState.find(function (item) { return item.key === value.key; })) {
+                newState = prevState.filter(function (item) { return item.key !== value.key; });
+            }
+            else {
+                newState = __spreadArray(__spreadArray([], prevState, true), [value], false);
+            }
+            onChange(newState);
+            return newState;
+        });
+    };
+    var Button = BaseDropdown.Button;
+    return (jsxs(BaseDropdown, __assign({ onChange: onChangeHandler, disabled: disabled, wide: wide }, { children: [jsx(Button, __assign({ OpenIcon: Icon.Arrows.ChevronDown, CloseIcon: Icon.Arrows.ChevronUp, wide: wide, isSortOrFilter: filter }, { children: sliceString(getFilterLabel(), sliceAfter) }), void 0), jsx(BaseDropdown.Options, { children: options.map(function (item) {
+                    var isSelected = selectedValues.find(function (selectedItem) { return selectedItem.key === item.key; });
+                    return (jsx(BaseDropdown.Option, __assign({ value: item, disabled: false, hasCheckbox: true, isSelected: Boolean(isSelected === null || isSelected === void 0 ? void 0 : isSelected.key) }, { children: item.label }), item.key));
+                }) }, void 0)] }), void 0));
+}
+
+export { FilteringDropdown as default };
+//# sourceMappingURL=FilteringDropdown.js.map

package/build/index.esm.js/src/components/dropdown/variants/filtering/FilteringDropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilteringDropdown.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/index.esm.js/src/components/dropdown/variants/simple/SimpleDropdown.js

@@ -0,0 +1,47 @@
+import { __makeTemplateObject, __assign } from '../../../../../node_modules/tslib/tslib.es6.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState, useMemo, useEffect, Fragment } from 'react';
+import { Icon } from '../../../icons/index.js';
+import { withLabel } from '../../base/BaseDropdownButton.js';
+import { Error } from '../../../input/base/Error.js';
+import BaseDropdown from '../../base/BaseDropdown.js';
+import newStyled from '../../../../../node_modules/@emotion/styled/dist/emotion-styled.esm.js';
+
+var Container = newStyled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));
+var RequiredPlaceholder = newStyled.p(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin: unset;\n  &:after {\n    content: '*';\n    color: var(--colors-semantic-urgent-color);\n  }\n"], ["\n  margin: unset;\n  &:after {\n    content: '*';\n    color: var(--colors-semantic-urgent-color);\n  }\n"])));
+function SimpleDropdown(_a) {
+    var options = _a.options, _b = _a.disabled, disabled = _b === void 0 ? false : _b, initialValue = _a.initialValue, placeHolder = _a.placeHolder, label = _a.label, _c = _a.wide, wide = _c === void 0 ? false : _c, _d = _a.sort, sort = _d === void 0 ? false : _d, onChange = _a.onChange, value = _a.value, _e = _a.testId, testId = _e === void 0 ? 'simple-dropdown' : _e, required = _a.required, showRequiredPlaceholder = _a.showRequiredPlaceholder;
+    var _f = useState(value || initialValue), selectedValue = _f[0], setSelectedValue = _f[1];
+    var selectedOptionLabel = useMemo(function () {
+        if (selectedValue) {
+            return selectedValue.label;
+        }
+        return showRequiredPlaceholder ? (jsx(RequiredPlaceholder, { children: placeHolder }, void 0)) : (placeHolder);
+    }, [selectedValue, showRequiredPlaceholder, placeHolder]);
+    var onChangeHandler = function (value) {
+        if (onChange) {
+            onChange(value);
+        }
+        setSelectedValue(value);
+    };
+    useEffect(function () {
+        if (value == null) {
+            if (!initialValue) {
+                setSelectedValue(undefined);
+            }
+            return;
+        }
+        if (options.findIndex(function (option) { return option.value === value.value; }) < 0) {
+            setSelectedValue(undefined);
+            return;
+        }
+        setSelectedValue(value);
+    }, [value, options, initialValue]);
+    var Button = label ? withLabel(BaseDropdown.Button, label) : BaseDropdown.Button;
+    var DropdownContainer = showRequiredPlaceholder ? Container : Fragment;
+    return (jsxs(DropdownContainer, { children: [jsxs(BaseDropdown, __assign({ value: selectedValue, onChange: onChangeHandler, disabled: disabled, wide: wide }, { children: [jsx(Button, __assign({ OpenIcon: Icon.Arrows.ChevronDown, CloseIcon: Icon.Arrows.ChevronUp, wide: wide, isSortOrFilter: sort, "data-testid": testId }, { children: selectedOptionLabel }), void 0), jsx(BaseDropdown.Options, { children: options.map(function (item) { return (jsx(BaseDropdown.Option, __assign({ value: item, disabled: item.disabled }, { children: item.label }), item.key)); }) }, void 0)] }), void 0), !!required && jsx(Error, { error: required }, void 0)] }, void 0));
+}
+var templateObject_1, templateObject_2;
+
+export { SimpleDropdown as default };
+//# sourceMappingURL=SimpleDropdown.js.map

package/build/index.esm.js/src/components/dropdown/variants/simple/SimpleDropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SimpleDropdown.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/index.esm.js/src/components/dropdown-list-icons/DropdownListIcons.js

@@ -0,0 +1,20 @@
+import { __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { createElement } from 'react';
+import { useTheme } from '../../core/theme/Theme.js';
+import { TooltipArrow } from '../tooltip/Arrow.js';
+import { List, Item, DropdownWrapper, ArrowContainer, StyledDropdown, DropdownItem } from './Styled.js';
+
+var DropdownListIcons = function (_a) {
+    var items = _a.items;
+    var theme = useTheme();
+    return (jsx(List, __assign({ "data-testid": "Icons-list" }, { children: items.map(function (item, index) { return (jsxs(Item, { children: [createElement(item.Icon, { fill: theme.colors.shades['700'].color }), jsx(Dropdown, { items: item.items }, void 0)] }, index)); }) }), void 0));
+};
+var Dropdown = function (_a) {
+    var items = _a.items;
+    var theme = useTheme();
+    return (jsxs(DropdownWrapper, __assign({ className: "dropdownWrapper", "data-testid": "Dropdown-wrapper" }, { children: [jsx(ArrowContainer, { children: jsx(TooltipArrow, { stroke: theme.colors.shades['200'].color, fill: "#fff", width: 1.25, height: 0.75 }, void 0) }, void 0), jsx(StyledDropdown, __assign({ borderColor: theme.colors.shades['200'].color }, { children: items.map(function (item, index) { return (jsx(DropdownItem, __assign({ onClick: item.callback, borderColor: theme.colors.shades['200'].color, color: theme.colors.shades['550'].color, hoverColor: theme.colors.shades['10'].color }, { children: item.description }), index)); }) }), void 0)] }), void 0));
+};
+
+export { DropdownListIcons };
+//# sourceMappingURL=DropdownListIcons.js.map

package/build/index.esm.js/src/components/dropdown-list-icons/DropdownListIcons.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownListIcons.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;"}

package/build/index.esm.js/src/components/dropdown-list-icons/Styled.js

@@ -0,0 +1,13 @@
+import { __makeTemplateObject } from '../../../node_modules/tslib/tslib.es6.js';
+import newStyled from '../../../node_modules/@emotion/styled/dist/emotion-styled.esm.js';
+
+var List = newStyled.ul(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  margin: 0;\n  padding: 0;\n"], ["\n  display: flex;\n  margin: 0;\n  padding: 0;\n"])));
+var Item = newStyled.li(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  width: 1.25rem;\n  list-style: none;\n  margin-right: 1.5rem;\n  position: relative;\n  line-height: 0;\n\n  &:last-child {\n    margin-right: 0;\n  }\n\n  &:hover {\n    .dropdownWrapper {\n      visibility: visible;\n    }\n  }\n"], ["\n  width: 1.25rem;\n  list-style: none;\n  margin-right: 1.5rem;\n  position: relative;\n  line-height: 0;\n\n  &:last-child {\n    margin-right: 0;\n  }\n\n  &:hover {\n    .dropdownWrapper {\n      visibility: visible;\n    }\n  }\n"])));
+var DropdownWrapper = newStyled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  right: -0.938rem;\n  min-width: 9.375rem;\n  position: absolute;\n  padding-top: 0.625rem;\n  margin-top: -0.188rem;\n  width: max-content;\n  visibility: hidden;\n"], ["\n  right: -0.938rem;\n  min-width: 9.375rem;\n  position: absolute;\n  padding-top: 0.625rem;\n  margin-top: -0.188rem;\n  width: max-content;\n  visibility: hidden;\n"])));
+var ArrowContainer = newStyled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  transform: rotate(180deg);\n  display: flex;\n  justify-content: flex-start;\n  margin-bottom: -0.063rem;\n  padding-left: 0.938rem;\n"], ["\n  transform: rotate(180deg);\n  display: flex;\n  justify-content: flex-start;\n  margin-bottom: -0.063rem;\n  padding-left: 0.938rem;\n"])));
+var StyledDropdown = newStyled.ul(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  margin: 0;\n  padding: 0;\n  border: 0.063rem solid ", ";\n  border-radius: 0.5rem;\n  display: flex;\n  flex-direction: column;\n  background-color: #ffffff;\n"], ["\n  margin: 0;\n  padding: 0;\n  border: 0.063rem solid ", ";\n  border-radius: 0.5rem;\n  display: flex;\n  flex-direction: column;\n  background-color: #ffffff;\n"])), function (props) { return props.borderColor; });
+var DropdownItem = newStyled.li(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  list-style: none;\n  padding: 0.813rem;\n  border-bottom: 0.063rem solid ", ";\n  font-size: 0.875rem;\n  line-height: 1.125rem;\n  font-weight: 400;\n  color: ", ";\n  cursor: pointer;\n  user-select: none;\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  &:last-child {\n    border-bottom: none;\n    border-radius: 0 0 0.5rem 0.5rem;\n  }\n\n  &:first-of-type {\n    border-radius: 0.5rem 0.5rem 0 0;\n  }\n\n  &:only-child {\n    border-radius: 0.5rem;\n  }\n"], ["\n  list-style: none;\n  padding: 0.813rem;\n  border-bottom: 0.063rem solid ", ";\n  font-size: 0.875rem;\n  line-height: 1.125rem;\n  font-weight: 400;\n  color: ", ";\n  cursor: pointer;\n  user-select: none;\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  &:last-child {\n    border-bottom: none;\n    border-radius: 0 0 0.5rem 0.5rem;\n  }\n\n  &:first-of-type {\n    border-radius: 0.5rem 0.5rem 0 0;\n  }\n\n  &:only-child {\n    border-radius: 0.5rem;\n  }\n"])), function (props) { return props.borderColor; }, function (props) { return props.color; }, function (props) { return props.hoverColor; });
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
+
+export { ArrowContainer, DropdownItem, DropdownWrapper, Item, List, StyledDropdown };
+//# sourceMappingURL=Styled.js.map

package/build/index.esm.js/src/components/dropdown-list-icons/Styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Styled.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;"}

package/build/index.esm.js/src/components/filtering/Accordion.js

@@ -0,0 +1,21 @@
+import { __makeTemplateObject, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React__default from 'react';
+import newStyled from '../../../node_modules/@emotion/styled/dist/emotion-styled.esm.js';
+import { Icon } from '../icons/index.js';
+import { useTheme } from '../../core/theme/Theme.js';
+
+var Title = newStyled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  border-bottom: 0.063rem solid ", ";\n  user-select: none;\n  cursor: pointer;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  border-bottom: 0.063rem solid ", ";\n  user-select: none;\n  cursor: pointer;\n"])), function (props) { return props.borderColor; });
+var H3 = newStyled.h3(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  font-size: 1rem;\n  font-weight: 700;\n  line-height: 1.5rem;\n  color: ", ";\n  margin: 0.75rem 0;\n"], ["\n  font-size: 1rem;\n  font-weight: 700;\n  line-height: 1.5rem;\n  color: ", ";\n  margin: 0.75rem 0;\n"])), function (props) { return props.color; });
+var ArrowContainer = newStyled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  width: 1rem;\n  height: 1rem;\n"], ["\n  width: 1rem;\n  height: 1rem;\n"])));
+var Container = newStyled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  @media (max-width: 768px) {\n    display: ", ";\n  }\n"], ["\n  @media (max-width: 768px) {\n    display: ", ";\n  }\n"])), function (props) { return (props.showInMobile ? 'block' : 'none'); });
+var Accordion = function (_a) {
+    var title = _a.title, children = _a.children, _b = _a.isOpenByDefault, isOpenByDefault = _b === void 0 ? false : _b, _c = _a.showInMobile, showInMobile = _c === void 0 ? true : _c;
+    var theme = useTheme();
+    var _d = React__default.useState(isOpenByDefault), isOpen = _d[0], setIsOpen = _d[1];
+    return (jsxs(Container, __assign({ "data-testid": "FiltersAccordion", showInMobile: showInMobile }, { children: [jsxs(Title, __assign({ onClick: function () { return setIsOpen(function (state) { return !state; }); }, borderColor: theme.colors.shades['100'].color, "data-testid": "accordion-title" }, { children: [jsx(H3, __assign({ color: theme.colors.shades['550'].color }, { children: title }), void 0), jsx(ArrowContainer, { children: isOpen ? (jsx(Icon.Arrows.ChevronUp, { fill: theme.colors.shades['700'].color }, void 0)) : (jsx(Icon.Arrows.ChevronDown, { fill: theme.colors.shades['700'].color }, void 0)) }, void 0)] }), void 0), jsx("div", __assign({ style: { display: isOpen ? 'block' : 'none' }, "data-testid": "accordion-children-container" }, { children: children }), void 0)] }), void 0));
+};
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+
+export { Accordion };
+//# sourceMappingURL=Accordion.js.map

package/build/index.esm.js/src/components/filtering/Accordion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;"}

package/build/index.esm.js/src/components/filtering/Filters.js

@@ -0,0 +1,132 @@
+import { __spreadArray, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useState, useEffect, useCallback } from 'react';
+import { Checkbox } from '../checkbox/Checkbox.js';
+import { ComponentSize } from '../../types/enums.js';
+import { Accordion } from './Accordion.js';
+import { Icon } from '../icons/index.js';
+import { Header, H4, ClearAll, MobileHeader, MobileIconsContainer, OptionContainer, FilterLink, SectionContent, MobileFooter, MobileClearContainer } from './FiltersStyled.js';
+import { simulateMouseClick } from '../../utils/simulateClick/simulateClick.js';
+import '../../utils/media.js';
+import { useTheme } from '../../core/theme/Theme.js';
+import ButtonSecondary from '../cta/secondary/ButtonSecondary.js';
+import SelectorSecondary from '../selector/simple/SelectorSecondary.js';
+import { Tags } from './Tags/Tags.js';
+
+var Filters = function (_a) {
+    var values = _a.values, onChange = _a.onChange, _b = _a.tagsColor, tagsColor = _b === void 0 ? '#fff6ef' : _b, filterByText = _a.filterByText, clearAllText = _a.clearAllText, isMobile = _a.isMobile, filtersSelectText = _a.filtersSelectText, applyText = _a.applyText, mobileApplyButtonClick = _a.mobileApplyButtonClick, mobileBackArrowClick = _a.mobileBackArrowClick, onResetValues = _a.onResetValues;
+    var getInitialCheckedItems = function () {
+        var checkedItems = [];
+        values.forEach(function (filter, sectionIndex) {
+            filter.items.forEach(function (item, itemIndex) {
+                if (item.checked && !item.blockUncheck) {
+                    checkedItems.push({
+                        sectionIndex: sectionIndex,
+                        itemIndex: itemIndex,
+                        label: item.label,
+                    });
+                }
+            });
+        });
+        return checkedItems;
+    };
+    var theme = useTheme();
+    var _c = useState(values), filters = _c[0], setFilter = _c[1];
+    var _d = useState(getInitialCheckedItems()), checkedItems = _d[0], setCheckedItems = _d[1];
+    var _e = useState(), filterState = _e[0], setFilterSection = _e[1];
+    useEffect(function () {
+        if (filters.length && filterState) {
+            onChange(filters, filterState);
+        }
+    }, [filterState, filters, onChange]);
+    var resetCheckedItems = useCallback(function (items) {
+        items.forEach(function (item) {
+            var sectionIndex = item.sectionIndex, itemIndex = item.itemIndex;
+            handleCloseClick({ sectionIndex: sectionIndex, itemIndex: itemIndex });
+        });
+    }, []);
+    var handleCheckboxClick = useCallback(function (_a) {
+        var sectionIndex = _a.sectionIndex, itemIndex = _a.itemIndex, checked = _a.checked;
+        setFilterSection({ sectionIndex: sectionIndex, itemIndex: itemIndex, checked: checked });
+        var currentFilter = filters[sectionIndex];
+        var currentFilterItem = currentFilter === null || currentFilter === void 0 ? void 0 : currentFilter.items[itemIndex];
+        if ((currentFilterItem === null || currentFilterItem === void 0 ? void 0 : currentFilterItem.isLinkItem) && (currentFilterItem === null || currentFilterItem === void 0 ? void 0 : currentFilterItem.link)) {
+            if (checked) {
+                window.location.assign(currentFilterItem.link);
+            }
+            return;
+        }
+        setCheckedItems(function (prev) {
+            if (!currentFilter.isMultiselect) {
+                resetCheckedItems(__spreadArray([], prev, true));
+            }
+            return checked
+                ? __spreadArray(__spreadArray([], (currentFilter.isMultiselect ? prev : []), true), [
+                    { sectionIndex: sectionIndex, itemIndex: itemIndex, label: filters[sectionIndex].items[itemIndex].label },
+                ], false) : prev.filter(function (item) { return item.sectionIndex !== sectionIndex || item.itemIndex !== itemIndex; });
+        });
+        setFilter(function (prev) {
+            return prev.map(function (filter, indexSection) {
+                if (sectionIndex !== indexSection) {
+                    return filter;
+                }
+                return __assign(__assign({}, filter), { items: filter.items.map(function (value, indexItems) {
+                        return __assign(__assign({}, value), { label: value.label, checked: itemIndex === indexItems ? checked : filter.isMultiselect ? value.checked : false });
+                    }) });
+            });
+        });
+    }, [filters, resetCheckedItems]);
+    var handleCloseClick = function (_a) {
+        var sectionIndex = _a.sectionIndex, itemIndex = _a.itemIndex;
+        var element = document.getElementById("filter[".concat(sectionIndex, ",").concat(itemIndex, "]"));
+        simulateMouseClick(element);
+    };
+    var handleClearAllClick = function () {
+        resetCheckedItems(checkedItems);
+        setCheckedItems([]);
+        setFilter(function (prev) {
+            return prev.map(function (filter) {
+                return __assign(__assign({}, filter), { items: filter.items.map(function (value) {
+                        return __assign(__assign({}, value), { checked: !value.blockUncheck ? false : value.checked });
+                    }) });
+            });
+        });
+        onResetValues();
+    };
+    return (jsxs(Fragment, { children: [!isMobile ? (jsx("div", __assign({ "data-testid": "DesktopHeader" }, { children: !!checkedItems.length && (jsxs(Fragment, { children: [jsxs(Header, { children: [jsxs(H4, __assign({ color: theme.colors.shades['700'].color }, { children: [filterByText, " (", checkedItems.length, ")"] }), void 0), jsx(ClearAll, __assign({ onClick: handleClearAllClick, color: theme.colors.shades['700'].color, "data-testid": "desktop-clear-all" }, { children: clearAllText }), void 0)] }, void 0), jsx(Tags, { color: tagsColor, items: checkedItems.map(function (item) {
+                                return item.label === '$75 And Above' ? '+$75' : item.label;
+                            }), onCloseClick: function (index) { return handleCloseClick(checkedItems[index]); } }, void 0)] }, void 0)) }), void 0)) : (jsxs(MobileHeader, __assign({ "data-testid": "MobileHeader" }, { children: [jsx(MobileIconsContainer, __assign({ onClick: mobileBackArrowClick, "data-testid": "mobileBackArrow" }, { children: jsx(Icon.Arrows.ChevronRightVariant, { fill: theme.colors.shades['700'].color }, void 0) }), void 0), !!checkedItems.length && (jsxs(H4, __assign({ color: theme.colors.shades['700'].color }, { children: [filtersSelectText, " (", checkedItems.length, ")"] }), void 0))] }), void 0)), filters
+                .filter(function (filter) { return filter.isLinkOption; })
+                .map(function (option, index) { return (jsx(OptionContainer, __assign({ showInMobile: option.showInMobile, "data-testid": "linkOption" }, { children: jsx(FilterLink, __assign({ color: option.color || theme.colors.shades['550'].color, href: option.link }, { children: option.title }), void 0) }), index)); }), filters
+                .filter(function (filter) { return !filter.isLinkOption; })
+                .map(function (filter) { return (jsx(Accordion, __assign({ title: filter.title, isOpenByDefault: filter.isOpenByDefault, showInMobile: filter.showInMobile }, { children: jsxs(SectionContent, __assign({ cols: filter.columns }, { children: [filter.type === 'size' &&
+                            filter.items.map(function (item, itemIndex) {
+                                var calculatedSectionIndex = filters.findIndex(function (filt) { return filt.title === filter.title; });
+                                return (jsx(SelectorSecondary, { size: ComponentSize.Medium, text: item.label, active: item.checked, disabled: item.blockUncheck, onClick: function () {
+                                        return handleCheckboxClick({
+                                            sectionIndex: calculatedSectionIndex,
+                                            itemIndex: itemIndex,
+                                            checked: !item.checked,
+                                        });
+                                    }, width: "50px", id: "filter[".concat(calculatedSectionIndex, ",").concat(itemIndex, "]") }, item.label));
+                            }), filter.type === 'color' &&
+                            filter.items.map(function (item, itemIndex) { return (jsx(FilterCheckboxColor, { onChange: handleCheckboxClick, text: item.label, checked: item.checked, itemIndex: itemIndex, sectionIndex: filters.findIndex(function (filt) { return filt.title === filter.title; }), blockUncheck: item.blockUncheck, color: item.value || '' }, "".concat(item.checked, "-").concat(item.label))); }), !filter.type &&
+                            filter.items.map(function (item, itemIndex) { return (jsx(FilterCheckbox, { onChange: handleCheckboxClick, text: item.label === '$75 And Above' ? '+$75' : item.label, checked: item.checked, itemIndex: itemIndex, sectionIndex: filters.findIndex(function (filt) { return filt.title === filter.title; }), blockUncheck: item.blockUncheck }, "".concat(item.checked, "-").concat(item.label))); })] }), void 0) }), filters.findIndex(function (filt) { return filt.title === filter.title; }))); }), isMobile && (jsxs(MobileFooter, __assign({ "data-testid": "MobileFooter" }, { children: [jsxs(MobileClearContainer, __assign({ onClick: handleClearAllClick }, { children: [jsx(MobileIconsContainer, { children: jsx(Icon.Actions.Trash, { fill: theme.colors.shades['700'].color }, void 0) }, void 0), jsx(ClearAll, __assign({ color: theme.colors.shades['700'].color }, { children: clearAllText }), void 0)] }), void 0), jsx(ButtonSecondary, { text: applyText, onClick: mobileApplyButtonClick }, void 0)] }), void 0))] }, void 0));
+};
+var FilterCheckbox = function (_a) {
+    var sectionIndex = _a.sectionIndex, text = _a.text, itemIndex = _a.itemIndex, onChangeProp = _a.onChange, checked = _a.checked, blockUncheck = _a.blockUncheck;
+    var onChange = useCallback(function (checked) {
+        onChangeProp({ sectionIndex: sectionIndex, itemIndex: itemIndex, checked: checked });
+    }, [onChangeProp, sectionIndex, itemIndex]);
+    return (jsx(Checkbox, { onChange: onChange, checked: checked, text: text, id: "filter[".concat(sectionIndex, ",").concat(itemIndex, "]"), size: ComponentSize.Small, variant: "secondary", blockUncheck: blockUncheck }, itemIndex));
+};
+var FilterCheckboxColor = function (_a) {
+    var sectionIndex = _a.sectionIndex, text = _a.text, itemIndex = _a.itemIndex, onChangeProp = _a.onChange, checked = _a.checked, blockUncheck = _a.blockUncheck, color = _a.color;
+    var onChange = useCallback(function (checked) {
+        onChangeProp({ sectionIndex: sectionIndex, itemIndex: itemIndex, checked: checked });
+    }, [onChangeProp, sectionIndex, itemIndex]);
+    return (jsx(Checkbox, { onChange: onChange, checked: checked, text: text, id: "filter[".concat(sectionIndex, ",").concat(itemIndex, "]"), size: ComponentSize.Medium, variant: "color", blockUncheck: blockUncheck, backgroundColor: color }, itemIndex));
+};
+
+export { Filters };
+//# sourceMappingURL=Filters.js.map

package/build/index.esm.js/src/components/filtering/Filters.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Filters.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/index.esm.js/src/components/filtering/FiltersStyled.js

@@ -0,0 +1,17 @@
+import { __makeTemplateObject } from '../../../node_modules/tslib/tslib.es6.js';
+import newStyled from '../../../node_modules/@emotion/styled/dist/emotion-styled.esm.js';
+
+var SectionContent = newStyled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: grid;\n  grid-template-columns: repeat(", ", 1fr);\n  grid-gap: 10px;\n  margin: 1.25rem 0;\n"], ["\n  display: grid;\n  grid-template-columns: repeat(", ", 1fr);\n  grid-gap: 10px;\n  margin: 1.25rem 0;\n"])), function (props) { return props.cols; });
+var Header = newStyled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-bottom: 1.063rem;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-bottom: 1.063rem;\n"])));
+var MobileHeader = newStyled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-bottom: 2.25rem;\n  margin-top: 1.063rem;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-bottom: 2.25rem;\n  margin-top: 1.063rem;\n"])));
+var MobileIconsContainer = newStyled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  width: 1.5rem;\n  height: 1.5rem;\n  cursor: pointer;\n"], ["\n  width: 1.5rem;\n  height: 1.5rem;\n  cursor: pointer;\n"])));
+var H4 = newStyled.h4(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  font-size: 0.875rem;\n  font-weight: 400;\n  line-height: 1.375rem;\n  margin: 0;\n  color: ", ";\n"], ["\n  font-size: 0.875rem;\n  font-weight: 400;\n  line-height: 1.375rem;\n  margin: 0;\n  color: ", ";\n"])), function (props) { return props.color; });
+var FilterLink = newStyled.a(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  font-size: 1rem;\n  font-weight: 700;\n  line-height: 1.5rem;\n  color: ", ";\n  text-decoration: none;\n"], ["\n  font-size: 1rem;\n  font-weight: 700;\n  line-height: 1.5rem;\n  color: ", ";\n  text-decoration: none;\n"])), function (props) { return props.color; });
+var OptionContainer = newStyled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  margin-bottom: 1.25rem;\n  &:last-child {\n    margin-bottom: 0;\n  }\n  @media (max-width: 768px) {\n    display: ", ";\n  }\n"], ["\n  margin-bottom: 1.25rem;\n  &:last-child {\n    margin-bottom: 0;\n  }\n  @media (max-width: 768px) {\n    display: ", ";\n  }\n"])), function (props) { return (props.showInMobile ? 'block' : 'none'); });
+var ClearAll = newStyled.span(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  font-size: 0.875rem;\n  font-weight: 600;\n  line-height: 1.375rem;\n  margin: 0;\n  color: ", ";\n  text-decoration: underline;\n  cursor: pointer;\n"], ["\n  font-size: 0.875rem;\n  font-weight: 600;\n  line-height: 1.375rem;\n  margin: 0;\n  color: ", ";\n  text-decoration: underline;\n  cursor: pointer;\n"])), function (props) { return props.color; });
+var MobileFooter = newStyled.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  background-color: #fff;\n  padding: 0.75rem 0.938rem;\n  position: sticky;\n  bottom: 0;\n  z-index: 1;\n  margin-top: 5.625rem;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n"], ["\n  background-color: #fff;\n  padding: 0.75rem 0.938rem;\n  position: sticky;\n  bottom: 0;\n  z-index: 1;\n  margin-top: 5.625rem;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n"])));
+var MobileClearContainer = newStyled.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n\n  span {\n    margin-left: 0.5rem;\n    user-select: none;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n\n  span {\n    margin-left: 0.5rem;\n    user-select: none;\n  }\n"])));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10;
+
+export { ClearAll, FilterLink, H4, Header, MobileClearContainer, MobileFooter, MobileHeader, MobileIconsContainer, OptionContainer, SectionContent };
+//# sourceMappingURL=FiltersStyled.js.map

package/build/index.esm.js/src/components/filtering/FiltersStyled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FiltersStyled.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;"}

package/build/index.esm.js/src/components/filtering/Tags/Tags.js

@@ -0,0 +1,20 @@
+import { __makeTemplateObject, __assign } from '../../../../node_modules/tslib/tslib.es6.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import newStyled from '../../../../node_modules/@emotion/styled/dist/emotion-styled.esm.js';
+import { Icon } from '../../icons/index.js';
+import { useTheme } from '../../../core/theme/Theme.js';
+
+var UL = newStyled.ul(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin: 0;\n  padding: 0;\n  flex-wrap: wrap;\n  display: flex;\n  max-width: 100%;\n"], ["\n  margin: 0;\n  padding: 0;\n  flex-wrap: wrap;\n  display: flex;\n  max-width: 100%;\n"])));
+var LI = newStyled.li(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  list-style: none;\n  background-color: ", ";\n  padding: 0.375rem 0.625rem;\n  border-radius: 0.5rem;\n  font-size: 0.875rem;\n  line-height: 1.125rem;\n  color: ", ";\n  font-weight: 400;\n  margin-right: 0.5rem;\n  margin-bottom: 0.5rem;\n  display: flex;\n  align-items: center;\n"], ["\n  list-style: none;\n  background-color: ", ";\n  padding: 0.375rem 0.625rem;\n  border-radius: 0.5rem;\n  font-size: 0.875rem;\n  line-height: 1.125rem;\n  color: ", ";\n  font-weight: 400;\n  margin-right: 0.5rem;\n  margin-bottom: 0.5rem;\n  display: flex;\n  align-items: center;\n"])), function (props) { return props.backgroundColor; }, function (props) { return props.color; });
+var CloseIconContainer = newStyled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  width: 0.656rem;\n  height: 0.656rem;\n  display: flex;\n  align-items: center;\n  margin-left: 0.5rem;\n  cursor: pointer;\n"], ["\n  width: 0.656rem;\n  height: 0.656rem;\n  display: flex;\n  align-items: center;\n  margin-left: 0.5rem;\n  cursor: pointer;\n"])));
+var Tags = function (_a) {
+    var _b = _a.color, color = _b === void 0 ? '#fff6ef' : _b, items = _a.items, onCloseClick = _a.onCloseClick;
+    var theme = useTheme();
+    return (jsx(UL, __assign({ "data-testid": "tags-ul" }, { children: items.map(function (item, index) {
+            return (jsxs(LI, __assign({ color: theme.colors.shades['700'].color, backgroundColor: color }, { children: [item, jsx(CloseIconContainer, __assign({ "data-testid": "li-close-icon", onClick: function () { return onCloseClick(index); } }, { children: jsx(Icon.Actions.Close, { fill: theme.colors.shades['700'].color }, void 0) }), void 0)] }), index));
+        }) }), void 0));
+};
+var templateObject_1, templateObject_2, templateObject_3;
+
+export { CloseIconContainer, LI, Tags, UL };
+//# sourceMappingURL=Tags.js.map

package/build/index.esm.js/src/components/filtering/Tags/Tags.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tags.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;"}

package/build/index.esm.js/src/components/fit/FitPredictor.js

@@ -0,0 +1,27 @@
+import { __makeTemplateObject, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import { jsxs, jsx } from '../../../node_modules/@emotion/react/jsx-runtime/dist/emotion-react-jsx-runtime.esm.js';
+import newStyled from '../../../node_modules/@emotion/styled/dist/emotion-styled.esm.js';
+import { useTheme } from '../../core/theme/Theme.js';
+import { Icon } from '../icons/index.js';
+import BaseButton from '../shared/button/BaseButton.js';
+
+var Container = newStyled.div(templateObject_1 || (templateObject_1 = __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"])));
+var P = newStyled.p(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin: 0 0.25rem;\n  font-weight: 700;\n  color: ", ";\n"], ["\n  margin: 0 0.25rem;\n  font-weight: 700;\n  color: ", ";\n"])), function (props) { return props.theme.colors.shades['550'].color; });
+var textButtonStyles = function (theme) { return ({
+    border: 'none',
+    background: 'transparent',
+    padding: 0,
+    textDecoration: 'underline',
+    color: theme.colors.shades['400'].color,
+    lineHeight: '1.13rem',
+    cursor: 'pointer',
+}); };
+var FitPredictor = function (_a) {
+    var onClick = _a.onClick;
+    var theme = useTheme();
+    return (jsxs(Container, __assign({ theme: theme }, { children: [jsx(Container, { children: jsx(Icon.Other.FitPredictor, { width: 1.125, height: 1.125, fill: theme.colors.shades['550'].color }, void 0) }, void 0), jsx(P, __assign({ theme: theme }, { children: "FIT PREDICTOR" }), void 0), jsx(BaseButton, __assign({ css: textButtonStyles(theme), onClick: onClick }, { children: "Calculate your size" }), void 0)] }), void 0));
+};
+var templateObject_1, templateObject_2;
+
+export { FitPredictor, FitPredictor as default };
+//# sourceMappingURL=FitPredictor.js.map

package/build/index.esm.js/src/components/fit/FitPredictor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FitPredictor.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/index.esm.js/src/components/gallery/ImagePreviewList.js

@@ -0,0 +1,26 @@
+import { __makeTemplateObject, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import { jsx } from 'react/jsx-runtime';
+import newStyled from '../../../node_modules/@emotion/styled/dist/emotion-styled.esm.js';
+import ImageSmallPreview from './ImageSmallPreview.js';
+import { css } from '../../../node_modules/@emotion/react/dist/emotion-react.esm.js';
+import SliderNavigation from '../slider/SliderNavigation.js';
+
+var horizontalStyles = css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  grid-row: 2;\n  grid-auto-flow: column;\n  grid-column-gap: 6px;\n  margin-top: 20px;\n  max-width: 360px;\n  overflow: auto;\n"], ["\n  grid-row: 2;\n  grid-auto-flow: column;\n  grid-column-gap: 6px;\n  margin-top: 20px;\n  max-width: 360px;\n  overflow: auto;\n"])));
+var verticalStyles = css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  grid-row-gap: 20px;\n  overflow: auto;\n  grid-area: 1/1;\n"], ["\n  grid-row-gap: 20px;\n  overflow: auto;\n  grid-area: 1/1;\n"])));
+var Container = newStyled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: grid;\n  max-height: 45rem;\n  height: min-content;\n  align-items: flex-start;\n  ", "\n"], ["\n  display: grid;\n  max-height: 45rem;\n  height: min-content;\n  align-items: flex-start;\n  ", "\n"])), function (_a) {
+    var position = _a.position;
+    return (position == 'horizontal' ? horizontalStyles : verticalStyles);
+});
+var Button = newStyled.button(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  padding: 0;\n  border: none;\n  text-decoration: none;\n  background: transparent;\n  outline: none;\n"], ["\n  padding: 0;\n  border: none;\n  text-decoration: none;\n  background: transparent;\n  outline: none;\n"])));
+var ImagePreviewList = function (_a) {
+    var images = _a.images, selectedImage = _a.selectedImage, onClick = _a.onClick, dataTestId = _a.dataTestId, position = _a.position, borderRadiusVariant = _a.borderRadiusVariant, previewImgBorderColor = _a.previewImgBorderColor;
+    return (jsx(Container, __assign({ "data-testid": dataTestId, position: position, className: position }, { children: position == 'horizontal' ? (jsx("div", __assign({ style: { maxWidth: '360px' } }, { children: jsx(SliderNavigation, __assign({ speed: 200, infinite: false, arrows: {
+                    arrowWidth: 0.75,
+                    arrowHeight: 1.25,
+                    arrowPadding: 1.625,
+                }, adaptiveHeight: true, dots: false, slidesToShow: 4 }, { children: images.map(function (item) { return (jsx(Button, __assign({ onClick: function () { return onClick(item); } }, { children: jsx(ImageSmallPreview, { imageUrl: (item === null || item === void 0 ? void 0 : item.alt.includes('-video')) ? item === null || item === void 0 ? void 0 : item.thumbnailUrl : item === null || item === void 0 ? void 0 : item.imageUrl, alt: item.alt, selected: item.key === selectedImage.key, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0) }), item.key)); }) }), void 0) }), void 0)) : (images.map(function (item) { return (jsx(Button, __assign({ onClick: function () { return onClick(item); } }, { children: jsx(ImageSmallPreview, { imageUrl: (item === null || item === void 0 ? void 0 : item.alt.includes('-video')) ? item === null || item === void 0 ? void 0 : item.thumbnailUrl : item === null || item === void 0 ? void 0 : item.imageUrl, alt: item.alt, selected: item.key === selectedImage.key, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0) }), item.key)); })) }), void 0));
+};
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+
+export { ImagePreviewList as default };
+//# sourceMappingURL=ImagePreviewList.js.map

package/build/index.esm.js/src/components/gallery/ImagePreviewList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImagePreviewList.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/index.esm.js/src/components/gallery/ImageProductWithTags.js

@@ -0,0 +1,32 @@
+import { __makeTemplateObject, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import newStyled from '../../../node_modules/@emotion/styled/dist/emotion-styled.esm.js';
+import InnerImageZoom from '../../../node_modules/react-inner-image-zoom/es/InnerImageZoom/InnerImageZoom.js';
+import '../../core/theme/Theme.js';
+import '../../types/enums.js';
+import ButtonSecondaryOutline from '../cta/secondary/ButtonSecondaryOutline.js';
+import { Icon } from '../icons/index.js';
+
+var Container = newStyled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n  position: relative;\n  height: '45rem' &.styleforhorizontal {\n    height: '30rem';\n  }\n  display: block;\n  height: fit-content;\n  overflow: hidden;\n  white-space: nowrap;\n  grid-area: 1/2;\n"], ["\n  ", "\n  position: relative;\n  height: '45rem' &.styleforhorizontal {\n    height: '30rem';\n  }\n  display: block;\n  height: fit-content;\n  overflow: hidden;\n  white-space: nowrap;\n  grid-area: 1/2;\n"])), function (_a) {
+    var borderRadiusVariant = _a.borderRadiusVariant;
+    return borderRadiusVariant &&
+        "\n    border-radius: 40px;\n  ";
+});
+var TopTagContainer = newStyled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: absolute;\n  left: ", ";\n  top: ", ";\n"], ["\n  position: absolute;\n  left: ", ";\n  top: ", ";\n"])), function (props) { return (props.borderRadiusVariant ? '50px' : '0'); }, function (props) { return (props.borderRadiusVariant ? '10px' : '0'); });
+var BottomTagContainer = newStyled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: absolute;\n  bottom: 3.75rem;\n  left: 0;\n"], ["\n  position: absolute;\n  bottom: 3.75rem;\n  left: 0;\n"])));
+var ButtonSecondaryOutlineWrapper = newStyled(ButtonSecondaryOutline)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  text-transform: capitalize;\n  margin-top: 12px;\n\n  @media (max-width: 992px) {\n    margin-top: 4px;\n  }\n"], ["\n  text-transform: capitalize;\n  margin-top: 12px;\n\n  @media (max-width: 992px) {\n    margin-top: 4px;\n  }\n"])));
+var Video = newStyled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 666px;\n  background: #efefef;\n\n  & > iframe {\n    border: none;\n  }\n\n  @media (max-width: 768px) {\n    height: 506px;\n  }\n"], ["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 666px;\n  background: #efefef;\n\n  & > iframe {\n    border: none;\n  }\n\n  @media (max-width: 768px) {\n    height: 506px;\n  }\n"])));
+var VideoTag = newStyled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  gap: 8px;\n  display: flex;\n  padding: 8.6px 0;\n  font-weight: 600;\n  align-items: center;\n  background: #f7f7f7;\n  justify-content: center;\n"], ["\n  gap: 8px;\n  display: flex;\n  padding: 8.6px 0;\n  font-weight: 600;\n  align-items: center;\n  background: #f7f7f7;\n  justify-content: center;\n"])));
+var Text = newStyled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  padding-top: 3px;\n"], ["\n  padding-top: 3px;\n"])));
+var ImageProductWithTags = function (_a) {
+    var _b, _c;
+    var image = _a.image, topTag = _a.topTag, bottomTag = _a.bottomTag, testId = _a.testId, position = _a.position, borderRadiusVariant = _a.borderRadiusVariant, ctaText = _a.ctaText, ctaAction = _a.ctaAction, hideCTA = _a.hideCTA;
+    return (jsxs(Container, __assign({ "data-testid": testId, className: "stylefor".concat(position), borderRadiusVariant: borderRadiusVariant }, { children: [!((_b = image === null || image === void 0 ? void 0 : image.alt) === null || _b === void 0 ? void 0 : _b.includes('-video')) && (jsxs(Fragment, { children: [jsx(InnerImageZoom, { src: image.imageUrl, zoomSrc: image.imageUrl, zoomType: "hover", imgAttributes: {
+                            alt: image.alt,
+                            style: { objectFit: 'cover', objectPosition: 'center' },
+                        }, width: position == 'horizontal' ? 360 : 530, height: position == 'horizontal' ? 480 : 720, hideHint: true }, void 0), jsx(TopTagContainer, __assign({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsx(BottomTagContainer, { children: bottomTag }, void 0)] }, void 0)), ((_c = image === null || image === void 0 ? void 0 : image.alt) === null || _c === void 0 ? void 0 : _c.includes('-video')) && (jsxs(Fragment, { children: [jsx(Video, { children: jsx("iframe", { allowFullScreen: true, title: image.alt, width: position == 'horizontal' ? 360 : 530, height: position == 'horizontal' ? 480 : 300, src: image === null || image === void 0 ? void 0 : image.imageUrl, allow: "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" }, void 0) }, void 0), jsxs(VideoTag, { children: [jsx(Icon.PDP.PlayMini, { width: 1.4 }, void 0), jsx(Text, { children: "VIDEO" }, void 0)] }, void 0)] }, void 0)), ctaText && ctaAction && (jsx("div", __assign({ style: { display: hideCTA ? 'none' : 'block' } }, { children: jsx(ButtonSecondaryOutlineWrapper, { wide: true, onClick: ctaAction, text: ctaText }, void 0) }), void 0))] }), void 0));
+};
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
+
+export { ImageProductWithTags as default };
+//# sourceMappingURL=ImageProductWithTags.js.map

package/build/index.esm.js/src/components/gallery/ImageProductWithTags.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageProductWithTags.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/index.esm.js/src/components/gallery/ImageSmallPreview.js

@@ -0,0 +1,26 @@
+import { __makeTemplateObject } from '../../../node_modules/tslib/tslib.es6.js';
+import { jsx } from 'react/jsx-runtime';
+import newStyled from '../../../node_modules/@emotion/styled/dist/emotion-styled.esm.js';
+import { useTheme } from '../../core/theme/Theme.js';
+import { getSrcSet } from '../../utils/getSrcSet/getSrcSet.js';
+import '../../utils/media.js';
+
+var Image = newStyled.img(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n\n  width: 4.063rem;\n  height: 5.375rem;\n  box-sizing: border-box;\n  cursor: pointer;\n  border: ", ";\n"], ["\n  ", "\n\n  width: 4.063rem;\n  height: 5.375rem;\n  box-sizing: border-box;\n  cursor: pointer;\n  border: ", ";\n"])), function (_a) {
+    var borderRadiusVariant = _a.borderRadiusVariant;
+    return borderRadiusVariant &&
+        "\nborder-radius: 20px;\n";
+}, function (_a) {
+    var selected = _a.selected, theme = _a.theme, previewImgBorderColor = _a.previewImgBorderColor;
+    return selected
+        ? "0.1rem solid ".concat(previewImgBorderColor ? previewImgBorderColor : theme.colors.shades['700'].color)
+        : 'inherit';
+});
+var ImageSmallPreview = function (_a) {
+    var imageUrl = _a.imageUrl, alt = _a.alt, _b = _a.selected, selected = _b === void 0 ? false : _b, className = _a.className, borderRadiusVariant = _a.borderRadiusVariant, previewImgBorderColor = _a.previewImgBorderColor;
+    var theme = useTheme();
+    return (jsx(Image, { className: className, src: imageUrl, srcSet: getSrcSet(imageUrl, 180, 360), alt: alt, selected: selected, theme: theme, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0));
+};
+var templateObject_1;
+
+export { ImageSmallPreview as default };
+//# sourceMappingURL=ImageSmallPreview.js.map

package/build/index.esm.js/src/components/gallery/ImageSmallPreview.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageSmallPreview.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/index.esm.js/src/components/gallery/ProductGallery.js

@@ -0,0 +1,23 @@
+import { __makeTemplateObject } from '../../../node_modules/tslib/tslib.es6.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
+import newStyled from '../../../node_modules/@emotion/styled/dist/emotion-styled.esm.js';
+import ImagePreviewList from './ImagePreviewList.js';
+import ImageProductWithTags from './ImageProductWithTags.js';
+
+var Container = newStyled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: grid;\n  grid-template-columns: max-content 1fr;\n  grid-column-gap: 20px;\n  max-height: 45rem;\n  width: fit-content;\n"], ["\n  display: grid;\n  grid-template-columns: max-content 1fr;\n  grid-column-gap: 20px;\n  max-height: 45rem;\n  width: fit-content;\n"])));
+var ProductGallery = function (_a) {
+    var images = _a.images, selectedValue = _a.selectedValue, topTag = _a.topTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, previewListDataTestId = _a.previewListDataTestId, thumbnailPosition = _a.thumbnailPosition, _b = _a.borderRadiusVariant, borderRadiusVariant = _b === void 0 ? false : _b, previewImgBorderColor = _a.previewImgBorderColor, ctaText = _a.ctaText, ctaAction = _a.ctaAction, _c = _a.hideCTA, hideCTA = _c === void 0 ? false : _c;
+    var initialValue = selectedValue && images.includes(selectedValue) ? selectedValue : images[0];
+    var _d = useState(initialValue), selectedImage = _d[0], setSelectedImage = _d[1];
+    useEffect(function () {
+        setSelectedImage(initialValue);
+    }, [initialValue]);
+    return (jsxs(Container, { children: [jsx(ImagePreviewList, { images: images, selectedImage: selectedImage, dataTestId: previewListDataTestId, onClick: function (value) {
+                    setSelectedImage(value);
+                }, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0), jsx(ImageProductWithTags, { image: selectedImage, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant, ctaText: ctaText, ctaAction: ctaAction, hideCTA: hideCTA }, void 0)] }, void 0));
+};
+var templateObject_1;
+
+export { ProductGallery as default };
+//# sourceMappingURL=ProductGallery.js.map

package/build/index.esm.js/src/components/gallery/ProductGallery.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProductGallery.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;"}

package/build/index.esm.js/src/components/icon-button/IconButton.js

@@ -0,0 +1,59 @@
+import { __makeTemplateObject, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import { jsx } from 'react/jsx-runtime';
+import newStyled from '../../../node_modules/@emotion/styled/dist/emotion-styled.esm.js';
+import { ComponentSize } from '../../types/enums.js';
+import { useTheme } from '../../core/theme/Theme.js';
+
+var getStylesBySize = function (size) {
+    switch (size) {
+        case ComponentSize.Large:
+            return {
+                widthHeight: '4.25rem',
+                margin: '0.938rem',
+            };
+        case ComponentSize.Medium:
+            return {
+                widthHeight: '2.5rem',
+                margin: '0.625rem',
+            };
+        case ComponentSize.Small:
+            return {
+                widthHeight: '1.5rem',
+                margin: '0.375rem',
+            };
+    }
+};
+var Container = newStyled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  width: ", ";\n  height: ", ";\n  border-radius: 50%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  transition: background-color 0.1s ease;\n\n  svg {\n    margin: ", ";\n  }\n\n  &:hover {\n    background-color: ", ";\n    cursor: pointer;\n  }\n\n  &.disabled {\n    background-color: ", ";\n    cursor: not-allowed;\n\n    svg path {\n      fill: ", ";\n    }\n  }\n"], ["\n  background-color: ", ";\n  width: ", ";\n  height: ", ";\n  border-radius: 50%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  transition: background-color 0.1s ease;\n\n  svg {\n    margin: ", ";\n  }\n\n  &:hover {\n    background-color: ", ";\n    cursor: pointer;\n  }\n\n  &.disabled {\n    background-color: ", ";\n    cursor: not-allowed;\n\n    svg path {\n      fill: ", ";\n    }\n  }\n"])), function (_a) {
+    var backgroundColor = _a.backgroundColor;
+    return backgroundColor;
+}, function (_a) {
+    var _b;
+    var size = _a.size;
+    return (_b = getStylesBySize(size)) === null || _b === void 0 ? void 0 : _b.widthHeight;
+}, function (_a) {
+    var _b;
+    var size = _a.size;
+    return (_b = getStylesBySize(size)) === null || _b === void 0 ? void 0 : _b.widthHeight;
+}, function (_a) {
+    var _b;
+    var size = _a.size;
+    return (_b = getStylesBySize(size)) === null || _b === void 0 ? void 0 : _b.margin;
+}, function (_a) {
+    var hoverBackgroundColor = _a.hoverBackgroundColor;
+    return hoverBackgroundColor;
+}, function (_a) {
+    var disabledColor = _a.disabledColor;
+    return disabledColor;
+}, function (_a) {
+    var disabledIconColor = _a.disabledIconColor;
+    return disabledIconColor;
+});
+var IconButton = function (_a) {
+    var children = _a.children, disabled = _a.disabled, _b = _a.size, size = _b === void 0 ? ComponentSize.Medium : _b, onClick = _a.onClick;
+    var theme = useTheme();
+    return (jsx(Container, __assign({ className: disabled ? 'disabled' : '', backgroundColor: theme.component.button.primary.active.backgroundColor, hoverBackgroundColor: theme.component.button.secondary.active.backgroundColor, disabledColor: theme.colors.shades['50'].color, disabledIconColor: theme.colors.shades['200'].color, size: size, "data-testid": "Container", onClick: disabled ? function () { } : onClick }, { children: children }), void 0));
+};
+var templateObject_1;
+
+export { IconButton };
+//# sourceMappingURL=IconButton.js.map

package/build/index.esm.js/src/components/icon-button/IconButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconButton.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}