@trafilea/afrodita-components 5.0.0-beta.231 → 5.0.0-beta.233

package/build/index.esm.js

@@ -4839,7 +4839,7 @@ var templateObject_1$1v, templateObject_2$$;
 
 var DialogDropdownWrapper = newStyled.div(templateObject_1$1u || (templateObject_1$1u = __makeTemplateObject(["\n  position: relative;\n  display: none;\n  ::before,\n  ::after {\n    content: '';\n    position: absolute;\n    border: 11px solid transparent;\n    margin-left: -10px;\n    border-bottom-color: #e9e9e9;\n    top: calc(", " - 5px);\n    right: calc(", " + 21px);\n    z-index: 50 !important;\n  }\n  ::after {\n    border-bottom-color: #fff;\n    top: calc(", " - 4px);\n    right: calc(", " + 21px);\n    z-index: 50 !important;\n  }\n"], ["\n  position: relative;\n  display: none;\n  ::before,\n  ::after {\n    content: '';\n    position: absolute;\n    border: 11px solid transparent;\n    margin-left: -10px;\n    border-bottom-color: #e9e9e9;\n    top: calc(", " - 5px);\n    right: calc(", " + 21px);\n    z-index: 50 !important;\n  }\n  ::after {\n    border-bottom-color: #fff;\n    top: calc(", " - 4px);\n    right: calc(", " + 21px);\n    z-index: 50 !important;\n  }\n"])), function (props) { return props.top; }, function (props) { return props.right; }, function (props) { return props.top; }, function (props) { return props.right; });
 var DialogDropdownListContainer = newStyled.ul(templateObject_2$_ || (templateObject_2$_ = __makeTemplateObject(["\n  position: absolute;\n  list-style: none;\n  width: max-content;\n  min-width: 100px;\n  background: #fff;\n  border: 1px solid #e9e9e9;\n  top: calc(", " + 15px);\n  right: calc(", " - 23px);\n  z-index: 50 !important;\n  margin-bottom: 1rem;\n\n  font-family: inherit;\n  font-size: 100%;\n  font-style: inherit;\n  font-variant: inherit;\n  font-weight: inherit;\n  line-height: inherit;\n  margin: 0;\n  padding: 0;\n  vertical-align: inherit;\n"], ["\n  position: absolute;\n  list-style: none;\n  width: max-content;\n  min-width: 100px;\n  background: #fff;\n  border: 1px solid #e9e9e9;\n  top: calc(", " + 15px);\n  right: calc(", " - 23px);\n  z-index: 50 !important;\n  margin-bottom: 1rem;\n\n  font-family: inherit;\n  font-size: 100%;\n  font-style: inherit;\n  font-variant: inherit;\n  font-weight: inherit;\n  line-height: inherit;\n  margin: 0;\n  padding: 0;\n  vertical-align: inherit;\n"])), function (props) { return props.top; }, function (props) { return props.right; });
-var DialogDropdownListItem = newStyled.li(templateObject_3$M || (templateObject_3$M = __makeTemplateObject(["\n  border-bottom: 1px solid #e9e9e9;\n  margin: 0;\n  padding: 0;\n  font-style: normal;\n  font-weight: 400;\n  font-size: 14px;\n  line-height: 17px;\n  color: var(--colors-shades-550-color);\n  vertical-align: inherit;\n"], ["\n  border-bottom: 1px solid #e9e9e9;\n  margin: 0;\n  padding: 0;\n  font-style: normal;\n  font-weight: 400;\n  font-size: 14px;\n  line-height: 17px;\n  color: var(--colors-shades-550-color);\n  vertical-align: inherit;\n"])));
+var DialogDropdownListItem = newStyled.li(templateObject_3$N || (templateObject_3$N = __makeTemplateObject(["\n  border-bottom: 1px solid #e9e9e9;\n  margin: 0;\n  padding: 0;\n  font-style: normal;\n  font-weight: 400;\n  font-size: 14px;\n  line-height: 17px;\n  color: var(--colors-shades-550-color);\n  vertical-align: inherit;\n"], ["\n  border-bottom: 1px solid #e9e9e9;\n  margin: 0;\n  padding: 0;\n  font-style: normal;\n  font-weight: 400;\n  font-size: 14px;\n  line-height: 17px;\n  color: var(--colors-shades-550-color);\n  vertical-align: inherit;\n"])));
 var DialogDropdownLink = newStyled.a(templateObject_4$y || (templateObject_4$y = __makeTemplateObject(["\n  display: inline-block;\n  text-decoration: none;\n  width: 100%;\n  background-color: transparent;\n  border: 0;\n  margin: 0;\n  padding: 12px;\n  cursor: pointer;\n  transition: all 0.2s;\n  color: var(--colors-shades-700-color);\n  font-size: 1.125rem;\n  font-style: inherit;\n  font-variant: inherit;\n  font-weight: inherit;\n  line-height: inherit;\n  vertical-align: inherit;\n"], ["\n  display: inline-block;\n  text-decoration: none;\n  width: 100%;\n  background-color: transparent;\n  border: 0;\n  margin: 0;\n  padding: 12px;\n  cursor: pointer;\n  transition: all 0.2s;\n  color: var(--colors-shades-700-color);\n  font-size: 1.125rem;\n  font-style: inherit;\n  font-variant: inherit;\n  font-weight: inherit;\n  line-height: inherit;\n  vertical-align: inherit;\n"])));
 var DropdownDialog = function (_a) {
     var options = _a.options, _b = _a.position, top = _b.top, right = _b.right, style = _a.style, className = _a.className;
@@ -4848,7 +4848,7 @@ var DropdownDialog = function (_a) {
                 return (jsx$1(DialogDropdownListItem, { children: jsx$1(DialogDropdownLink, __assign$1({ href: value }, { children: label }), void 0) }, idx));
             }) }), void 0) }), void 0));
 };
-var templateObject_1$1u, templateObject_2$_, templateObject_3$M, templateObject_4$y;
+var templateObject_1$1u, templateObject_2$_, templateObject_3$N, templateObject_4$y;
 
 var getStylesBySize$a = function (size, theme) {
     switch (size) {
@@ -4918,7 +4918,7 @@ var SelectorSecondary = function (_a) {
 var TAGS = {
     hero1: newStyled.h1(templateObject_1$1t || (templateObject_1$1t = __makeTemplateObject([""], [""]))),
     hero2: newStyled.h2(templateObject_2$Z || (templateObject_2$Z = __makeTemplateObject([""], [""]))),
-    hero3: newStyled.h3(templateObject_3$L || (templateObject_3$L = __makeTemplateObject([""], [""]))),
+    hero3: newStyled.h3(templateObject_3$M || (templateObject_3$M = __makeTemplateObject([""], [""]))),
     display1: newStyled.h1(templateObject_4$x || (templateObject_4$x = __makeTemplateObject([""], [""]))),
     display2: newStyled.h2(templateObject_5$j || (templateObject_5$j = __makeTemplateObject([""], [""]))),
     heading1: newStyled.h1(templateObject_6$g || (templateObject_6$g = __makeTemplateObject([""], [""]))),
@@ -5040,7 +5040,7 @@ var DEFAULTS = {
         size: 'regular',
     },
 };
-var templateObject_1$1t, templateObject_2$Z, templateObject_3$L, templateObject_4$x, templateObject_5$j, templateObject_6$g, templateObject_7$a, templateObject_8$7, templateObject_9$4, templateObject_10$3, templateObject_11$2, templateObject_12$2, templateObject_13$2, templateObject_14$2, templateObject_15$2, templateObject_16$2, templateObject_17$2;
+var templateObject_1$1t, templateObject_2$Z, templateObject_3$M, templateObject_4$x, templateObject_5$j, templateObject_6$g, templateObject_7$a, templateObject_8$7, templateObject_9$4, templateObject_10$3, templateObject_11$2, templateObject_12$2, templateObject_13$2, templateObject_14$2, templateObject_15$2, templateObject_16$2, templateObject_17$2;
 
 var ButtonsContainer = newStyled.div(templateObject_1$1s || (templateObject_1$1s = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  margin: ", ";\n"], ["\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  margin: ", ";\n"])), function (_a) {
     var inline = _a.inline;
@@ -5108,12 +5108,12 @@ var templateObject_1$1r;
 
 var Container$$ = newStyled.div(templateObject_1$1q || (templateObject_1$1q = __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$Y || (templateObject_2$Y = __makeTemplateObject(["\n  margin: 0;\n"], ["\n  margin: 0;\n"])));
-var PercentageSpan = newStyled.span(templateObject_3$K || (templateObject_3$K = __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 PercentageSpan = newStyled.span(templateObject_3$L || (templateObject_3$L = __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, onClickFitPercentage = _a.onClickFitPercentage;
     return (jsxs$1(Container$$, { children: [jsx$1(TextButton, { LeadingIcon: Icon.PDP.Rule, size: ComponentSize.Small, text: title, onClick: onClick, uppercase: false }, 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$1q, templateObject_2$Y, templateObject_3$K;
+var templateObject_1$1q, templateObject_2$Y, templateObject_3$L;
 
 var getStylesBySize$8 = function (size) {
     switch (size) {
@@ -5177,12 +5177,13 @@ var H3$3 = newStyled.h3(templateObject_2$X || (templateObject_2$X = __makeTempla
     var size = _a.size;
     return (_b = getStylesBySize$8(size)) === null || _b === void 0 ? void 0 : _b.lineHeight;
 });
+var Now = newStyled(H3$3)(templateObject_3$K || (templateObject_3$K = __makeTemplateObject(["\n  display: none;\n  margin-right: 0.25rem;\n"], ["\n  display: none;\n  margin-right: 0.25rem;\n"])));
 var DiscountTag = function (_a) {
     var discount = _a.discount, offText = _a.offText, disabled = _a.disabled, _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#fff' : _b, _c = _a.borderColor, borderColor = _c === void 0 ? 'transparent' : _c, _d = _a.textColor, textColor = _d === void 0 ? '#fff' : _d, _e = _a.size, size = _e === void 0 ? ComponentSize.Medium : _e, style = _a.style;
     var theme = useTheme();
-    return (jsx$1(Container$_, __assign$1({ backgroundColor: disabled ? theme.colors.shades['50'].color : backgroundColor, borderColor: disabled ? theme.colors.shades['50'].color : borderColor, size: size, "data-testid": "discount-container", style: style }, { children: jsxs$1(H3$3, __assign$1({ textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size, style: style }, { children: [discount, "% ", offText] }), void 0) }), void 0));
+    return (jsxs$1(Container$_, __assign$1({ backgroundColor: disabled ? theme.colors.shades['50'].color : backgroundColor, borderColor: disabled ? theme.colors.shades['50'].color : borderColor, size: size, "data-testid": "discount-container", style: style }, { children: [jsx$1(Now, __assign$1({ "data-testid": "vwo-discount-now", textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size, style: style }, { children: "Now:" }), void 0), jsxs$1(H3$3, __assign$1({ textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size, style: style }, { children: [discount, "% ", offText] }), void 0)] }), void 0));
 };
-var templateObject_1$1p, templateObject_2$X;
+var templateObject_1$1p, templateObject_2$X, templateObject_3$K;
 
 var getStylesBySize$7 = function (size) {
     switch (size) {
@@ -11754,7 +11755,9 @@ var Rating = function (_a) {
     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, _d = _a.underline, underline = _d === void 0 ? false : _d, reviewsContainerId = _a.reviewsContainerId;
     function handleAnchorClick(e) {
         var _a;
-        e.preventDefault();
+        if (e.cancelable) {
+            e.preventDefault();
+        }
         if (reviewsContainerId) {
             (_a = document.querySelector(reviewsContainerId)) === null || _a === void 0 ? void 0 : _a.scrollIntoView({
                 behavior: 'smooth',
@@ -13616,9 +13619,15 @@ var SearchBar = function (_a) {
             onClose();
         }
     };
-    return (jsxs$1("form", __assign$1({ role: "search", onSubmit: function (e) { return e.preventDefault(); }, ref: ref, style: { position: 'relative' } }, { children: [jsxs$1(Container$p, __assign$1({ theme: theme }, { children: [jsx$1(Input, { value: state.term, placeholder: placeholder, onChange: function (e) { return dispatch({ type: 'UPDATE_TERM', payload: { term: e.target.value } }); }, onFocus: function () { return dispatch({ type: 'TOGGLE_PANEL', payload: { open: true } }); }, id: id, autoComplete: autoComplete, theme: theme, "aria-label": ariaLabel, onKeyDown: function (e) {
+    return (jsxs$1("form", __assign$1({ role: "search", onSubmit: function (e) {
+            if (e.cancelable) {
+                e.preventDefault();
+            }
+        }, ref: ref, style: { position: 'relative' } }, { children: [jsxs$1(Container$p, __assign$1({ theme: theme }, { children: [jsx$1(Input, { value: state.term, placeholder: placeholder, onChange: function (e) { return dispatch({ type: 'UPDATE_TERM', payload: { term: e.target.value } }); }, onFocus: function () { return dispatch({ type: 'TOGGLE_PANEL', payload: { open: true } }); }, id: id, autoComplete: autoComplete, theme: theme, "aria-label": ariaLabel, onKeyDown: function (e) {
                             if (e.key === 'Enter') {
-                                e.preventDefault();
+                                if (e.cancelable) {
+                                    e.preventDefault();
+                                }
                                 e.stopPropagation();
                                 onSearch(state.term);
                             }
@@ -13671,7 +13680,9 @@ function usePreventVerticalScroll(ref, dragThreshold) {
         clientX.current = e.touches[0].clientX - firstClientX.current;
         // Vertical scrolling does not work when you start swiping horizontally.
         if (Math.abs(clientX.current) > dragThreshold) {
-            e.preventDefault();
+            if (e.cancelable) {
+                e.preventDefault();
+            }
             e.returnValue = false;
             return false;
         }