@trafilea/afrodita-components 6.17.2 → 6.17.3

package/build/index.d.ts

@@ -2064,6 +2064,13 @@ declare type ThemeComponent = {
             backgroundColor: string;
             borderRadius: string;
         };
+        tooltip: {
+            margin: string;
+            text: {
+                alignment: string;
+                maxWidth: string;
+            };
+        };
     };
 };
 declare type ThemeTypography = {

package/build/index.esm.js

@@ -4185,7 +4185,7 @@ var TAGS = {
     heading4: newStyled.h4(templateObject_10$8 || (templateObject_10$8 = __makeTemplateObject([""], [""]))),
     heading5: newStyled.h5(templateObject_11$5 || (templateObject_11$5 = __makeTemplateObject([""], [""]))),
     heading6: newStyled.h6(templateObject_12$4 || (templateObject_12$4 = __makeTemplateObject([""], [""]))),
-    heading7: newStyled.h1(templateObject_13$3 || (templateObject_13$3 = __makeTemplateObject([""], [""]))),
+    heading7: newStyled.h1(templateObject_13$4 || (templateObject_13$4 = __makeTemplateObject([""], [""]))),
     heading8: newStyled.h1(templateObject_14$2 || (templateObject_14$2 = __makeTemplateObject([""], [""]))),
     body: newStyled.p(templateObject_15$2 || (templateObject_15$2 = __makeTemplateObject([""], [""]))),
     link: newStyled.a(templateObject_16$2 || (templateObject_16$2 = __makeTemplateObject(["\n    cursor: pointer;\n    color: inherit;\n    text-decoration: ", ";\n  "], ["\n    cursor: pointer;\n    color: inherit;\n    text-decoration: ", ";\n  "])), function (props) { return (props.underline ? 'underline' : 'none'); }),
@@ -4309,7 +4309,7 @@ var DEFAULTS = {
         size: 'regular',
     },
 };
-var templateObject_1$1Y, templateObject_2$1k, templateObject_3$10, templateObject_4$M, templateObject_5$y, templateObject_6$s, templateObject_7$j, templateObject_8$h, templateObject_9$9, templateObject_10$8, templateObject_11$5, templateObject_12$4, templateObject_13$3, templateObject_14$2, templateObject_15$2, templateObject_16$2, templateObject_17$2, templateObject_18$2, templateObject_19$2, templateObject_20$1;
+var templateObject_1$1Y, templateObject_2$1k, templateObject_3$10, templateObject_4$M, templateObject_5$y, templateObject_6$s, templateObject_7$j, templateObject_8$h, templateObject_9$9, templateObject_10$8, templateObject_11$5, templateObject_12$4, templateObject_13$4, templateObject_14$2, templateObject_15$2, templateObject_16$2, templateObject_17$2, templateObject_18$2, templateObject_19$2, templateObject_20$1;
 
 var Container$1d = newStyled.div(templateObject_1$1X || (templateObject_1$1X = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  border-radius: 6px;\n  gap: 6px;\n"], ["\n  position: relative;\n  display: flex;\n  border-radius: 6px;\n  gap: 6px;\n"])));
 var Card$3 = newStyled.div(templateObject_2$1j || (templateObject_2$1j = __makeTemplateObject(["\n  --background: var(--colors-background-color);\n\n  flex: 1;\n  position: relative;\n  overflow: hidden;\n  cursor: pointer;\n  border: 2px solid var(--component-packSelector-borderColor);\n  padding: 16px 7px 7px;\n  text-align: center;\n  background-color: var(--background);\n  border-radius: var(--component-packSelector-borderRadius);\n\n  &[aria-checked='true'] {\n    --color: var(--component-packSelector-selectedColor);\n\n    border-color: var(--color);\n\n    & * {\n      p {\n        color: var(--color);\n      }\n    }\n  }\n"], ["\n  --background: var(--colors-background-color);\n\n  flex: 1;\n  position: relative;\n  overflow: hidden;\n  cursor: pointer;\n  border: 2px solid var(--component-packSelector-borderColor);\n  padding: 16px 7px 7px;\n  text-align: center;\n  background-color: var(--background);\n  border-radius: var(--component-packSelector-borderRadius);\n\n  &[aria-checked='true'] {\n    --color: var(--component-packSelector-selectedColor);\n\n    border-color: var(--color);\n\n    & * {\n      p {\n        color: var(--color);\n      }\n    }\n  }\n"])));
@@ -5192,6 +5192,101 @@ var RadioInput = function (_a) {
 };
 var templateObject_1$1L, templateObject_2$1b, templateObject_3$X, templateObject_4$J;
 
+var useOnClickOutside = function (ref, handler) {
+    useEffect(function () {
+        var listener = function (event) {
+            // Do nothing if clicking ref's element or descendent elements
+            var el = ref === null || ref === void 0 ? void 0 : ref.current;
+            if (!el || el.contains((event === null || event === void 0 ? void 0 : event.target) || null)) {
+                return;
+            }
+            handler(event);
+        };
+        document.addEventListener('mousedown', listener);
+        document.addEventListener('touchstart', listener);
+        return function () {
+            document.removeEventListener('mousedown', listener);
+            document.removeEventListener('touchstart', listener);
+        };
+    }, [ref, handler]);
+};
+
+function getWindowDimensions() {
+    if (typeof window === 'undefined')
+        return { width: 0, height: 0 };
+    var width = window.innerWidth, height = window.innerHeight;
+    return {
+        width: width,
+        height: height,
+    };
+}
+var getViewport = function (breakpoints, width) {
+    if (width <= breakpoints.mobile)
+        return Viewports.mobile;
+    if (width <= breakpoints.tablet)
+        return Viewports.tablet;
+    if (width <= breakpoints.desktop)
+        return Viewports.desktop;
+    return Viewports.desktopLarge;
+};
+var useWindowDimensions = function (breakpoints, _a) {
+    if (breakpoints === void 0) { breakpoints = DEFAULT_BREAKPOINTS; }
+    var _b = _a === void 0 ? {} : _a, shouldListenChanges = _b.shouldListenChanges;
+    var _c = useState(function () {
+        var dimension = getWindowDimensions();
+        return {
+            windowDimensions: dimension,
+            viewport: getViewport(breakpoints, dimension.width),
+        };
+    }), state = _c[0], setState = _c[1];
+    useEffect(function () {
+        function handleResize() {
+            var newDimension = getWindowDimensions();
+            var newViewport = getViewport(breakpoints, newDimension.width);
+            setState(function (oldState) {
+                if (shouldListenChanges || oldState.viewport !== newViewport) {
+                    return {
+                        windowDimensions: newDimension,
+                        viewport: newViewport,
+                    };
+                }
+                return oldState;
+            });
+        }
+        handleResize();
+        window.addEventListener('resize', handleResize);
+        return function () { return window.removeEventListener('resize', handleResize); };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [shouldListenChanges]);
+    var isMobile = state.viewport === Viewports.mobile;
+    var isTablet = state.viewport === Viewports.tablet;
+    var isDesktop = state.viewport === Viewports.desktop || state.viewport === Viewports.desktopLarge;
+    return __assign$1(__assign$1({}, state), { isMobile: isMobile, isTablet: isTablet, isDesktop: isDesktop });
+};
+
+var useDeviceType = function () {
+    var mobileBreakpoint = 768;
+    var tabletBreakpoint = 1024;
+    var _a = useState('desktop'), deviceType = _a[0], setDeviceType = _a[1];
+    var handleResize = function () {
+        if (window.innerWidth < mobileBreakpoint) {
+            setDeviceType('mobile');
+        }
+        else if (window.innerWidth < tabletBreakpoint) {
+            setDeviceType('tablet');
+        }
+        else {
+            setDeviceType('desktop');
+        }
+    };
+    useLayoutEffect(function () {
+        window.addEventListener('resize', handleResize);
+        handleResize();
+        return function () { return window.removeEventListener('resize', handleResize); };
+    }, []);
+    return deviceType;
+};
+
 var getWrapperFlexDirection = function (position) {
     switch (position) {
         case ComponentPosition.Top:
@@ -5286,7 +5381,13 @@ var ContentWrapper = newStyled.div(templateObject_3$W || (templateObject_3$W = _
     var backgroundColor = _a.backgroundColor;
     return backgroundColor;
 });
-var TooltipText = newStyled.div(templateObject_4$I || (templateObject_4$I = __makeTemplateObject(["\n  font-style: normal;\n  font-weight: normal;\n  font-size: 0.875rem;\n  line-height: 1.125rem;\n  margin: 0;\n  text-align: center;\n  color: ", ";\n"], ["\n  font-style: normal;\n  font-weight: normal;\n  font-size: 0.875rem;\n  line-height: 1.125rem;\n  margin: 0;\n  text-align: center;\n  color: ", ";\n"])), function (_a) {
+var TooltipText = newStyled.div(templateObject_4$I || (templateObject_4$I = __makeTemplateObject(["\n  font-style: normal;\n  font-weight: normal;\n  font-size: 0.875rem;\n  line-height: 1.125rem;\n  margin: 0;\n  text-align: ", ";\n  max-width: ", ";\n  color: ", ";\n"], ["\n  font-style: normal;\n  font-weight: normal;\n  font-size: 0.875rem;\n  line-height: 1.125rem;\n  margin: 0;\n  text-align: ", ";\n  max-width: ", ";\n  color: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.component.autoship.tooltip.text.alignment;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.component.autoship.tooltip.text.maxWidth;
+}, function (_a) {
     var color = _a.color;
     return color;
 });
@@ -5302,101 +5403,6 @@ var CloseToolTip = newStyled.button(templateObject_8$g || (templateObject_8$g =
 });
 var templateObject_1$1K, templateObject_2$1a, templateObject_3$W, templateObject_4$I, templateObject_5$v, templateObject_6$q, templateObject_7$i, templateObject_8$g;
 
-var useOnClickOutside = function (ref, handler) {
-    useEffect(function () {
-        var listener = function (event) {
-            // Do nothing if clicking ref's element or descendent elements
-            var el = ref === null || ref === void 0 ? void 0 : ref.current;
-            if (!el || el.contains((event === null || event === void 0 ? void 0 : event.target) || null)) {
-                return;
-            }
-            handler(event);
-        };
-        document.addEventListener('mousedown', listener);
-        document.addEventListener('touchstart', listener);
-        return function () {
-            document.removeEventListener('mousedown', listener);
-            document.removeEventListener('touchstart', listener);
-        };
-    }, [ref, handler]);
-};
-
-function getWindowDimensions() {
-    if (typeof window === 'undefined')
-        return { width: 0, height: 0 };
-    var width = window.innerWidth, height = window.innerHeight;
-    return {
-        width: width,
-        height: height,
-    };
-}
-var getViewport = function (breakpoints, width) {
-    if (width <= breakpoints.mobile)
-        return Viewports.mobile;
-    if (width <= breakpoints.tablet)
-        return Viewports.tablet;
-    if (width <= breakpoints.desktop)
-        return Viewports.desktop;
-    return Viewports.desktopLarge;
-};
-var useWindowDimensions = function (breakpoints, _a) {
-    if (breakpoints === void 0) { breakpoints = DEFAULT_BREAKPOINTS; }
-    var _b = _a === void 0 ? {} : _a, shouldListenChanges = _b.shouldListenChanges;
-    var _c = useState(function () {
-        var dimension = getWindowDimensions();
-        return {
-            windowDimensions: dimension,
-            viewport: getViewport(breakpoints, dimension.width),
-        };
-    }), state = _c[0], setState = _c[1];
-    useEffect(function () {
-        function handleResize() {
-            var newDimension = getWindowDimensions();
-            var newViewport = getViewport(breakpoints, newDimension.width);
-            setState(function (oldState) {
-                if (shouldListenChanges || oldState.viewport !== newViewport) {
-                    return {
-                        windowDimensions: newDimension,
-                        viewport: newViewport,
-                    };
-                }
-                return oldState;
-            });
-        }
-        handleResize();
-        window.addEventListener('resize', handleResize);
-        return function () { return window.removeEventListener('resize', handleResize); };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [shouldListenChanges]);
-    var isMobile = state.viewport === Viewports.mobile;
-    var isTablet = state.viewport === Viewports.tablet;
-    var isDesktop = state.viewport === Viewports.desktop || state.viewport === Viewports.desktopLarge;
-    return __assign$1(__assign$1({}, state), { isMobile: isMobile, isTablet: isTablet, isDesktop: isDesktop });
-};
-
-var useDeviceType = function () {
-    var mobileBreakpoint = 768;
-    var tabletBreakpoint = 1024;
-    var _a = useState('desktop'), deviceType = _a[0], setDeviceType = _a[1];
-    var handleResize = function () {
-        if (window.innerWidth < mobileBreakpoint) {
-            setDeviceType('mobile');
-        }
-        else if (window.innerWidth < tabletBreakpoint) {
-            setDeviceType('tablet');
-        }
-        else {
-            setDeviceType('desktop');
-        }
-    };
-    useLayoutEffect(function () {
-        window.addEventListener('resize', handleResize);
-        handleResize();
-        return function () { return window.removeEventListener('resize', handleResize); };
-    }, []);
-    return deviceType;
-};
-
 var Tooltip = function (_a) {
     var _b;
     var children = _a.children, position = _a.position, content = _a.content, backgroundColor = _a.backgroundColor, showCloseIcon = _a.showCloseIcon, _c = _a.align, align = _c === void 0 ? 'center' : _c, maxWidth = _a.maxWidth, onClick = _a.onClick, header = _a.header, _d = _a.withArrow, withArrow = _d === void 0 ? false : _d, _e = _a.closeBtnSize, closeBtnSize = _e === void 0 ? 0.5 : _e;
@@ -5420,7 +5426,7 @@ var Tooltip = function (_a) {
                                             fill: (header === null || header === void 0 ? void 0 : header.iconFill)
                                                 ? header === null || header === void 0 ? void 0 : header.iconFill
                                                 : theme.colors.pallete.secondary.color,
-                                        }) }, void 0)), jsx$1(Title$7, __assign$1({ color: (header === null || header === void 0 ? void 0 : header.titleColor) ? header === null || header === void 0 ? void 0 : header.titleColor : theme.colors.pallete.secondary.color }, { children: header.title }), void 0)] }), void 0)), content && (content === null || content === void 0 ? void 0 : content.text) && (jsx$1(TooltipText, { color: (content === null || content === void 0 ? void 0 : content.color) ? content === null || content === void 0 ? void 0 : content.color : theme.colors.pallete.secondary.color, style: { textAlign: 'left', maxWidth: '243px' }, "data-testid": "TooltipText", dangerouslySetInnerHTML: { __html: content.text } }, void 0))] }), void 0)] }), void 0)] }), void 0));
+                                        }) }, void 0)), jsx$1(Title$7, __assign$1({ color: (header === null || header === void 0 ? void 0 : header.titleColor) ? header === null || header === void 0 ? void 0 : header.titleColor : theme.colors.pallete.secondary.color }, { children: header.title }), void 0)] }), void 0)), content && (content === null || content === void 0 ? void 0 : content.text) && (jsx$1(TooltipText, { color: (content === null || content === void 0 ? void 0 : content.color) ? content === null || content === void 0 ? void 0 : content.color : theme.colors.pallete.secondary.color, "data-testid": "TooltipText", dangerouslySetInnerHTML: { __html: content.text } }, void 0))] }), void 0)] }), void 0)] }), void 0));
 };
 
 var colorsMapper = function (colors) { return ({
@@ -5862,8 +5868,8 @@ var StyledPrice$1 = newStyled(PriceLabelV2)(templateObject_12$3 || (templateObje
     var selected = _a.selected, theme = _a.theme;
     return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
 });
-var Container$12 = newStyled.div(templateObject_13$2 || (templateObject_13$2 = __makeTemplateObject([""], [""])));
-var templateObject_1$1E, templateObject_2$15, templateObject_3$T, templateObject_4$H, templateObject_5$u, templateObject_6$p, templateObject_7$h, templateObject_8$f, templateObject_9$8, templateObject_10$7, templateObject_11$4, templateObject_12$3, templateObject_13$2;
+var Container$12 = newStyled.div(templateObject_13$3 || (templateObject_13$3 = __makeTemplateObject([""], [""])));
+var templateObject_1$1E, templateObject_2$15, templateObject_3$T, templateObject_4$H, templateObject_5$u, templateObject_6$p, templateObject_7$h, templateObject_8$f, templateObject_9$8, templateObject_10$7, templateObject_11$4, templateObject_12$3, templateObject_13$3;
 
 var radioIds$1 = {
     oneTime: {
@@ -5972,7 +5978,11 @@ var StyledPrice = newStyled(PriceLabelV2)(templateObject_11$3 || (templateObject
     return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
 });
 var Container$11 = newStyled.div(templateObject_12$2 || (templateObject_12$2 = __makeTemplateObject(["\n  margin-top: 20px;\n"], ["\n  margin-top: 20px;\n"])));
-var templateObject_1$1D, templateObject_2$14, templateObject_3$S, templateObject_4$G, templateObject_5$t, templateObject_6$o, templateObject_7$g, templateObject_8$e, templateObject_9$7, templateObject_10$6, templateObject_11$3, templateObject_12$2;
+var TooltipWrapper = newStyled.div(templateObject_13$2 || (templateObject_13$2 = __makeTemplateObject(["\n  margin: ", ";\n"], ["\n  margin: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.component.autoship.tooltip.margin;
+});
+var templateObject_1$1D, templateObject_2$14, templateObject_3$S, templateObject_4$G, templateObject_5$t, templateObject_6$o, templateObject_7$g, templateObject_8$e, templateObject_9$7, templateObject_10$6, templateObject_11$3, templateObject_12$2, templateObject_13$2;
 
 var radioIds = {
     oneTime: {
@@ -6032,7 +6042,7 @@ var AutoshipV2 = function (_a) {
         onChange(__assign$1(__assign$1({}, dataObj), { subscriptionPeriod: value }));
     };
     var benefitsColor = benefitsColorMapper(theme);
-    return (jsxs$1(Container$11, __assign$1({ className: className }, { children: [jsxs$1(SubscriptionContainer, __assign$1({ onClick: function () { return handleChange(radioIds.autoship, 'radio'); }, "data-testid": "subscription-purchase-block", selected: radioIds.autoship.id === radioCheck.id }, { children: [jsx$1(DiscountTag, __assign$1({ isSelected: radioIds.autoship.id === radioCheck.id }, { children: discountLabel !== null && discountLabel !== void 0 ? discountLabel : "".concat(autoShipPctOverListPriceRounded, "% OFF - SAVE ").concat(currencySymbol).concat(autoShipSaving.toFixed(2)) }), void 0), jsxs$1(SubscriptionHeader, { children: [jsxs$1(FlexContainer, { children: [jsx$1(RadioInput, { label: subscriptionLabel, name: radioIds.autoship.id, id: radioIds.autoship.id, value: radioIds.autoship.id, checked: radioIds.autoship.id === radioCheck.id, size: ComponentSize.Medium, style: { marginRight: '10px' }, useV2Style: true, onChange: function () { }, disabled: disabledInputs && disabledInputs.includes(radioIds.autoship.id) }, void 0), jsx$1("div", __assign$1({ style: { marginTop: '5px', marginLeft: '5px' } }, { children: jsx$1(Tooltip, __assign$1({ position: 0, content: tooltipContent, header: tooltipHeader, maxWidth: "248px", showCloseIcon: closeIcon, closeBtnSize: 0.7 }, { children: jsx$1(Icon.Actions.CircleQuestion, { width: 1 }, void 0) }), void 0) }), void 0)] }, void 0), jsx$1(StyledPrice, { testId: "subscription", finalPrice: "$".concat(decimalFormat(Number(autoshipFinalPrice))), selected: radioIds.autoship.id === radioCheck.id, size: ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(listPrice))) }, void 0)] }, void 0), jsx$1(BenefitsContainer, { children: updatedAutoshipBenefits.map(function (benefit) { return (jsxs$1(Benefit, { children: [jsx$1(Icon.Actions.Check, { width: 1.2, height: 1.2, fill: radioIds.autoship.id === radioCheck.id
+    return (jsxs$1(Container$11, __assign$1({ className: className }, { children: [jsxs$1(SubscriptionContainer, __assign$1({ onClick: function () { return handleChange(radioIds.autoship, 'radio'); }, "data-testid": "subscription-purchase-block", selected: radioIds.autoship.id === radioCheck.id }, { children: [jsx$1(DiscountTag, __assign$1({ isSelected: radioIds.autoship.id === radioCheck.id }, { children: discountLabel !== null && discountLabel !== void 0 ? discountLabel : "".concat(autoShipPctOverListPriceRounded, "% OFF - SAVE ").concat(currencySymbol).concat(autoShipSaving.toFixed(2)) }), void 0), jsxs$1(SubscriptionHeader, { children: [jsxs$1(FlexContainer, { children: [jsx$1(RadioInput, { label: subscriptionLabel, name: radioIds.autoship.id, id: radioIds.autoship.id, value: radioIds.autoship.id, checked: radioIds.autoship.id === radioCheck.id, size: ComponentSize.Medium, style: { marginRight: '10px' }, useV2Style: true, onChange: function () { }, disabled: disabledInputs && disabledInputs.includes(radioIds.autoship.id) }, void 0), jsx$1(TooltipWrapper, { children: jsx$1(Tooltip, __assign$1({ position: 0, content: tooltipContent, header: tooltipHeader, maxWidth: "248px", showCloseIcon: closeIcon, closeBtnSize: 0.7 }, { children: jsx$1(Icon.Actions.CircleQuestion, { width: 1 }, void 0) }), void 0) }, void 0)] }, void 0), jsx$1(StyledPrice, { testId: "subscription", finalPrice: "$".concat(decimalFormat(Number(autoshipFinalPrice))), selected: radioIds.autoship.id === radioCheck.id, size: ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(listPrice))) }, void 0)] }, void 0), jsx$1(BenefitsContainer, { children: updatedAutoshipBenefits.map(function (benefit) { return (jsxs$1(Benefit, { children: [jsx$1(Icon.Actions.Check, { width: 1.2, height: 1.2, fill: radioIds.autoship.id === radioCheck.id
                                         ? benefitsColor.selected
                                         : benefitsColor.base }, void 0), jsx$1(BenefitText, { variant: "body", dangerouslySetInnerHTML: { __html: benefit } }, void 0)] }, benefit)); }) }, void 0), jsx$1(Fragment$2, { children: dropdownOptions.length > 1 ? (jsxs$1(FlexContainer, __assign$1({ onClick: function (e) { return e.stopPropagation(); } }, { children: [jsx$1(DeliveryFrequencyLabel, __assign$1({ variant: "body" }, { children: "Deliver every:" }), void 0), jsx$1(SimpleDropdown, { testId: "subscription-frequency", initialValue: dropdownOptions[0], options: dropdownOptions, onChange: function (value) { return handleChange(value.value, 'dropdown'); }, placeHolder: "" }, void 0)] }), void 0)) : (jsxs$1(DeliveryFrequencyLabel, __assign$1({ variant: "body" }, { children: ["Deliver every ", dropdownOptions[0].label.toLowerCase()] }), void 0)) }, void 0)] }), void 0), jsxs$1(SinglePurchaseContainer, __assign$1({ "data-testid": "single-purchase-block", selected: radioIds.oneTime.id === radioCheck.id, onClick: function () { return handleChange(radioIds.oneTime, 'radio'); } }, { children: [jsx$1(RadioInput, { label: singlePurchaseLabel, name: radioIds.oneTime.id, id: radioIds.oneTime.id, value: radioIds.oneTime.id, checked: radioIds.oneTime.id === radioCheck.id, size: ComponentSize.Medium, onChange: function () { }, useV2Style: true, disabled: disabledInputs && disabledInputs.includes(radioIds.oneTime.id) }, void 0), jsx$1(StyledPrice, { testId: "single-purchase", finalPrice: "$".concat(decimalFormat(Number(discountedPrice))), selected: radioIds.oneTime.id === radioCheck.id, size: ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(listPrice))) }, void 0)] }), void 0)] }), void 0));
 };