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

package/build/index.esm.js/src/components/tag/Tag.js

@@ -0,0 +1,13 @@
+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';
+
+var Container = newStyled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: fit-content;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: fit-content;\n"])));
+var Tag = function (_a) {
+    var text = _a.text, className = _a.className;
+    return jsx(Container, __assign({ className: className }, { children: text }), void 0);
+};
+var templateObject_1;
+
+export { Tag as default };
+//# sourceMappingURL=Tag.js.map

package/build/index.esm.js/src/components/tag/Tag.js.map

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

package/build/index.esm.js/src/components/tag/variants/pdp/category/CategoryTag.js

@@ -0,0 +1,43 @@
+import { __assign } from '../../../../../../node_modules/tslib/tslib.es6.js';
+import { jsx } from '../../../../../../node_modules/@emotion/react/jsx-runtime/dist/emotion-react-jsx-runtime.esm.js';
+import { useTheme } from '../../../../../core/theme/Theme.js';
+import { ComponentSize } from '../../../../../types/enums.js';
+import Tag from '../../../Tag.js';
+
+var getStylesBySize = function (size, styledBorder) {
+    switch (size) {
+        case ComponentSize.Large:
+            return {
+                padding: '0.125rem 1.25rem 0 1.25rem',
+                borderRadius: styledBorder ? '20px' : '0 0.25rem 0.25rem 0',
+                fontSize: '0.875rem',
+                lineHeight: '0.875rem',
+                height: '1.5rem',
+            };
+        case ComponentSize.Medium:
+            return {
+                padding: '0.063rem 0.625rem',
+                borderRadius: styledBorder ? '20px' : '0 0.25rem 0.25rem 0',
+                fontSize: '0.625rem',
+                lineHeight: '0.625rem',
+                height: '1rem',
+            };
+        case ComponentSize.Small:
+            return {
+                padding: '0.125rem 0.625rem',
+                borderRadius: styledBorder ? '20px' : '0 0.125em 0.125rem 0',
+                fontSize: '0.5rem',
+                lineHeight: '0.75rem',
+                height: '0.875rem',
+            };
+    }
+};
+var CategoryTag = function (_a) {
+    var text = _a.text, size = _a.size, className = _a.className, _b = _a.styledBorder, styledBorder = _b === void 0 ? false : _b;
+    var theme = useTheme();
+    var stylesBySize = getStylesBySize(size, styledBorder);
+    return (jsx(Tag, { css: __assign({ backgroundColor: theme.colors.shades.white.color, fontWeight: 600, color: theme.colors.shades['700'].color }, stylesBySize), text: text, className: className }, void 0));
+};
+
+export { CategoryTag as default };
+//# sourceMappingURL=CategoryTag.js.map

package/build/index.esm.js/src/components/tag/variants/pdp/category/CategoryTag.js.map

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

package/build/index.esm.js/src/components/tag/variants/pdp/season-offer/SeasonOfferTag.js

@@ -0,0 +1,41 @@
+import { __assign } from '../../../../../../node_modules/tslib/tslib.es6.js';
+import { jsx } from '../../../../../../node_modules/@emotion/react/jsx-runtime/dist/emotion-react-jsx-runtime.esm.js';
+import { ComponentSize } from '../../../../../types/enums.js';
+import Tag from '../../../Tag.js';
+
+var getStylesBySize = function (size, styledBorder) {
+    switch (size) {
+        case ComponentSize.Large:
+            return {
+                padding: '0.5rem 1rem',
+                borderRadius: styledBorder ? '20px' : '0 0 0.25rem 0',
+                fontSize: '0.75rem',
+                lineHeight: '1rem',
+                letterSpacing: '0.16em',
+            };
+        case ComponentSize.Medium:
+            return {
+                padding: '0.375rem 0.625rem 0.25rem',
+                borderRadius: styledBorder ? '20px' : '0 0 0.25rem 0',
+                fontSize: '0.625rem',
+                lineHeight: '0.875rem',
+                letterSpacing: '0.16em',
+            };
+        case ComponentSize.Small:
+            return {
+                padding: '0.125rem 0.5rem',
+                borderRadius: styledBorder ? '20px' : '0 0 0.25rem 0',
+                fontSize: '0.5rem',
+                lineHeight: '0.875rem',
+                letterSpacing: '0.16em',
+            };
+    }
+};
+var SeasonOfferTag = function (_a) {
+    var text = _a.text, _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#C64844' : _b, size = _a.size, className = _a.className, _c = _a.styledBorder, styledBorder = _c === void 0 ? false : _c;
+    var stylesBySize = getStylesBySize(size, styledBorder);
+    return (jsx(Tag, { css: __assign({ backgroundColor: backgroundColor, fontWeight: 700, color: '#FFFFFF' }, stylesBySize), text: text, className: className }, void 0));
+};
+
+export { SeasonOfferTag as default };
+//# sourceMappingURL=SeasonOfferTag.js.map

package/build/index.esm.js/src/components/tag/variants/pdp/season-offer/SeasonOfferTag.js.map

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

package/build/index.esm.js/src/components/text/Text.js

@@ -0,0 +1,145 @@
+import { __makeTemplateObject, __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import { jsx } from '../../../node_modules/@emotion/react/jsx-runtime/dist/emotion-react-jsx-runtime.esm.js';
+import { useMemo } from 'react';
+import newStyled from '../../../node_modules/@emotion/styled/dist/emotion-styled.esm.js';
+import { useTheme } from '../../core/theme/Theme.js';
+
+// This defines which HTML tag to render for each `variant`, it also defines
+// `variants` styles that are consistent through all themes.
+var TAGS = {
+    hero1: newStyled.h1(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""]))),
+    hero2: newStyled.h2(templateObject_2 || (templateObject_2 = __makeTemplateObject([""], [""]))),
+    hero3: newStyled.h3(templateObject_3 || (templateObject_3 = __makeTemplateObject([""], [""]))),
+    display1: newStyled.h1(templateObject_4 || (templateObject_4 = __makeTemplateObject([""], [""]))),
+    display2: newStyled.h2(templateObject_5 || (templateObject_5 = __makeTemplateObject([""], [""]))),
+    heading1: newStyled.h1(templateObject_6 || (templateObject_6 = __makeTemplateObject([""], [""]))),
+    heading2: newStyled.h2(templateObject_7 || (templateObject_7 = __makeTemplateObject([""], [""]))),
+    heading3: newStyled.h3(templateObject_8 || (templateObject_8 = __makeTemplateObject([""], [""]))),
+    heading4: newStyled.h4(templateObject_9 || (templateObject_9 = __makeTemplateObject([""], [""]))),
+    heading5: newStyled.h5(templateObject_10 || (templateObject_10 = __makeTemplateObject([""], [""]))),
+    heading6: newStyled.h6(templateObject_11 || (templateObject_11 = __makeTemplateObject([""], [""]))),
+    heading7: newStyled.h1(templateObject_12 || (templateObject_12 = __makeTemplateObject([""], [""]))),
+    heading8: newStyled.h1(templateObject_13 || (templateObject_13 = __makeTemplateObject([""], [""]))),
+    body: newStyled.p(templateObject_14 || (templateObject_14 = __makeTemplateObject([""], [""]))),
+    link: newStyled.a(templateObject_15 || (templateObject_15 = __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'); }),
+    button: newStyled.span(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n    display: inline-block;\n  "], ["\n    display: inline-block;\n  "]))),
+    pricing: newStyled.span(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n    display: inline-block;\n    font-weight: ", ";\n    text-decoration: ", ";\n  "], ["\n    display: inline-block;\n    font-weight: ", ";\n    text-decoration: ", ";\n  "])), function (props) { return (props.original ? 'normal' : 'bold'); }, function (props) { return (props.original ? 'line-through' : 'bold'); }),
+    label: newStyled.label(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n    color: ", " !important;\n  "], ["\n    color: ", " !important;\n  "])), function (_a) {
+        var theme = _a.theme;
+        return theme.component.label.color;
+    }),
+    tag: newStyled.span(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n    display: inline-block;\n    text-transform: ", ";\n  "], ["\n    display: inline-block;\n    text-transform: ", ";\n  "])), function (props) { return (props.allCaps ? 'uppercase' : ''); }),
+};
+var Text = function (_a) {
+    var _b;
+    var variant = _a.variant, children = _a.children, testId = _a.testId, asSpan = _a.asSpan, allProps = __rest(_a, ["variant", "children", "testId", "asSpan"]);
+    var theme = useTheme();
+    var Tag = asSpan ? 'span' : TAGS[variant] || 'p';
+    var _c = __assign(__assign({}, ((_b = DEFAULTS === null || DEFAULTS === void 0 ? void 0 : DEFAULTS[variant]) !== null && _b !== void 0 ? _b : {})), allProps), size = _c.size, weight = _c.weight, props = __rest(_c, ["size", "weight"]);
+    var commonCSS = useMemo(function () {
+        var _a, _b;
+        // These are the common style inside a `variant`.
+        // E.g.: Common styles for all "button".
+        var variantstyle = (_a = theme.typography.variants[variant]) !== null && _a !== void 0 ? _a : {
+            fontSize: 14,
+            lineHeight: 1,
+        };
+        // This allow us to define different styles for different `sizes` inside a `variant`
+        // E.g.: "button-small", "button-regular"
+        //
+        // We use .filter(Boolean) to ignore the `size` on the `variants` that don't have it.
+        // E.g.: "hero1", "display1"
+        var variantName = [variant, size].filter(Boolean).join('-');
+        // These are styles specific to `variation-size`.
+        var variantSizeStyle = (_b = theme.typography.variants[variantName]) !== null && _b !== void 0 ? _b : {};
+        var style = __assign(__assign(__assign({ margin: 0, color: theme.colors.text.color }, variantstyle), variantSizeStyle), { fontFamily: theme.fonts.config[0].family });
+        if (weight) {
+            style.fontWeight = theme.typography.config.weight[weight];
+        }
+        if (props.disabled) {
+            style.opacity = 0.5;
+            style.cursor = 'not-allowed';
+            style.color = theme.colors.text.disabled;
+        }
+        return style;
+    }, [theme, variant, weight, size, props.disabled]);
+    // This is to make TS happy, because `href` doesn't exists on other `variants`
+    var propsHref = props.href;
+    var href = useMemo(function () {
+        // We could use `pointer-events: none` but it prevents us from using
+        // `cursor: not-allowed`, so we're changing the `href` for `disabled` links.
+        if (propsHref != null && props.disabled) {
+            return 'javascript:void(0)';
+        }
+        return propsHref;
+    }, [props.disabled, propsHref]);
+    return (jsx(Tag, __assign({}, props, { css: commonCSS, href: href, "data-testid": testId }, { children: children }), void 0));
+};
+var DEFAULTS = {
+    heading1: {
+        weight: 'bold',
+    },
+    heading2: {
+        weight: 'bold',
+    },
+    heading3: {
+        weight: 'bold',
+    },
+    heading4: {
+        weight: 'bold',
+    },
+    heading5: {
+        weight: 'bold',
+    },
+    heading6: {
+        weight: 'bold',
+    },
+    heading7: {
+        weight: 'bold',
+    },
+    heading8: {
+        weight: 'bold',
+    },
+    hero1: {
+        weight: 'heavy',
+    },
+    hero2: {
+        weight: 'heavy',
+    },
+    hero3: {
+        weight: 'heavy',
+    },
+    display1: {
+        weight: 'bold',
+    },
+    display2: {
+        weight: 'bold',
+    },
+    body: {
+        size: 'regular',
+        weight: 'regular',
+    },
+    button: {
+        size: 'regular',
+        weight: 'bold',
+    },
+    tag: {
+        size: 'regular',
+        weight: 'regular',
+    },
+    label: {
+        size: 'regular',
+        weight: 'regular',
+    },
+    link: {
+        size: 'regular',
+        weight: 'regular',
+    },
+    pricing: {
+        size: 'regular',
+    },
+};
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19;
+
+export { Text };
+//# sourceMappingURL=Text.js.map

package/build/index.esm.js/src/components/text/Text.js.map

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

package/build/index.esm.js/src/components/text-button/TextButton.js

@@ -0,0 +1,52 @@
+import { __assign, __makeTemplateObject } from '../../../node_modules/tslib/tslib.es6.js';
+import { jsx } from '../../../node_modules/@emotion/react/jsx-runtime/dist/emotion-react-jsx-runtime.esm.js';
+import { css } from '../../../node_modules/@emotion/react/dist/emotion-react.esm.js';
+import { useTheme } from '../../core/theme/Theme.js';
+import { ComponentSize } from '../../types/enums.js';
+import BaseButton from '../shared/button/BaseButton.js';
+
+var getStylesBySize = function (size) {
+    switch (size) {
+        case ComponentSize.Large:
+        case ComponentSize.Medium:
+            return {
+                fontSize: '1rem',
+            };
+        case ComponentSize.Small:
+            return {
+                fontSize: '14px',
+            };
+        default:
+            return {
+                fontSize: '14px',
+            };
+    }
+};
+var textButtonStyles = function (theme, size) {
+    var stylesBySize = getStylesBySize(size);
+    return __assign(__assign({ border: 'none', background: 'transparent', padding: 0, color: theme.colors.shades['550'].color, alignItems: 'center', fontFamily: theme.fonts.config[0].family, lineHeight: theme.component.textButton.lineHeight, fontWeight: theme.component.textButton.fontWeight, textDecorationLine: 'underline' }, stylesBySize), { '&:disabled': {
+            color: theme.colors.shades['250'].color,
+            textDecorationLine: 'none',
+        } });
+};
+var withContainer = function (iconFill, isLeading, Icon) {
+    return Icon && (jsx("span", __assign({ css: css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        display: flex;\n        align-items: center;\n        ", "\n      "], ["\n        display: flex;\n        align-items: center;\n        ", "\n      "])), isLeading ? 'margin-right: 5px' : 'margin-left: 5px') }, { children: jsx(Icon, { width: 1.25, height: 1.25, fill: iconFill }, void 0) }), void 0));
+};
+var getIconFill = function (theme, disabled, iconColor) {
+    if (disabled)
+        return theme.colors.shades['250'].color;
+    else if (iconColor)
+        return iconColor;
+    else
+        return theme.colors.shades['550'].color;
+};
+var TextButton = function (_a) {
+    var text = _a.text, LeadingIcon = _a.LeadingIcon, TrailingIcon = _a.TrailingIcon, iconColor = _a.iconColor, disabled = _a.disabled, type = _a.type, _b = _a.size, size = _b === void 0 ? ComponentSize.Medium : _b, _c = _a.uppercase, uppercase = _c === void 0 ? true : _c, onClick = _a.onClick;
+    var theme = useTheme();
+    var iconFill = getIconFill(theme, disabled, iconColor);
+    return (jsx(BaseButton, __assign({ renderLeading: withContainer(iconFill, true, LeadingIcon), renderTrailing: withContainer(iconFill, false, TrailingIcon), disabled: disabled, type: type, onClick: onClick, css: textButtonStyles(theme, size), uppercase: uppercase }, { children: text }), void 0));
+};
+var templateObject_1;
+
+export { TextButton as default };
+//# sourceMappingURL=TextButton.js.map

package/build/index.esm.js/src/components/text-button/TextButton.js.map

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

package/build/index.esm.js/src/components/textWithImage/imageVideo.js

@@ -0,0 +1,34 @@
+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 { useRef, useState } from 'react';
+import { Icon } from '../icons/index.js';
+import Image from '../shared/image/Image.js';
+import { Text } from '../text/Text.js';
+
+var ImageWrapper = newStyled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  max-height: fit-content;\n"], ["\n  position: relative;\n  display: flex;\n  max-height: fit-content;\n"])));
+var VideoOverlay = newStyled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  background-color: rgba(247, 160, 139, 0.1);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: column;\n  top: 0;\n  left: 0;\n  border-radius: 25px;\n  color: #ffffff;\n  gap: 15px;\n  cursor: pointer;\n  text-align: center;\n  @media (max-width: 768px) {\n    justify-content: end;\n    gap: 10px;\n    padding-bottom: 20px;\n    text-align: center;\n  }\n"], ["\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  background-color: rgba(247, 160, 139, 0.1);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: column;\n  top: 0;\n  left: 0;\n  border-radius: 25px;\n  color: #ffffff;\n  gap: 15px;\n  cursor: pointer;\n  text-align: center;\n  @media (max-width: 768px) {\n    justify-content: end;\n    gap: 10px;\n    padding-bottom: 20px;\n    text-align: center;\n  }\n"])));
+var FullscreenVideo = newStyled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: rgba(0, 0, 0, 0.7);\n  z-index: 9999;\n"], ["\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: rgba(0, 0, 0, 0.7);\n  z-index: 9999;\n"])));
+var ImageVideo = function (_a) {
+    var imageLink = _a.imageLink, isVideo = _a.isVideo, isMobile = _a.isMobile;
+    var video = useRef(null);
+    var _b = useState(false), opened = _b[0], setOpened = _b[1];
+    var handleOnClick = function () {
+        setOpened(true);
+    };
+    return (jsxs(Fragment, { children: [jsxs(ImageWrapper, { children: [jsx(Image, { src: imageLink, alt: "#", width: "100%", height: isMobile ? '400px' : '100%', borderRadius: "16px", objectFit: "cover" }, void 0), isVideo && (jsx(Text, __assign({ variant: "link", onClick: handleOnClick }, { children: jsxs(VideoOverlay, { children: [jsx(Text, __assign({ variant: "heading3", style: { color: isVideo.textColor, fontSize: isMobile ? '42px' : '56px' } }, { children: isVideo.videoTitle }), void 0), jsx(Text, __assign({ variant: "body", weight: "demi", style: { color: isVideo.textColor } }, { children: isVideo.videoSubtitle }), void 0), jsx(Icon.Other.Play, { fill: "#ffffff", width: 6.125, height: 6.125 }, void 0)] }, void 0) }), void 0))] }, void 0), opened && (jsxs(FullscreenVideo, { children: [jsx(Text, __assign({ variant: "link", style: {
+                            position: 'absolute',
+                            top: '10px',
+                            right: '10px',
+                            zIndex: 99,
+                            cursor: 'pointer',
+                        }, onClick: function () { return setOpened(false); } }, { children: jsx(Icon.Actions.Close, { fill: "#292929" }, void 0) }), void 0), jsx("iframe", { ref: video, title: "shapermint_frame_vide", width: "100%", height: "100%", src: isVideo === null || isVideo === void 0 ? void 0 : isVideo.videoLink, allow: "autoplay; fullscreen; picture-in-picture", allowFullScreen: true, style: {
+                            position: 'absolute',
+                            width: '100%',
+                            height: '100%',
+                        } }, void 0)] }, void 0))] }, void 0));
+};
+var templateObject_1, templateObject_2, templateObject_3;
+
+export { ImageVideo as default };
+//# sourceMappingURL=imageVideo.js.map

package/build/index.esm.js/src/components/textWithImage/imageVideo.js.map

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

package/build/index.esm.js/src/components/textWithImage/index.js

@@ -0,0 +1,48 @@
+import { __makeTemplateObject, __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import { jsxs, jsx, Fragment } from '../../../node_modules/@emotion/react/jsx-runtime/dist/emotion-react-jsx-runtime.esm.js';
+import { css } from '../../../node_modules/@emotion/react/dist/emotion-react.esm.js';
+import 'react';
+import { useWindowDimensions } from '../../hooks/WindowDimensions.js';
+import { ComponentSize } from '../../types/enums.js';
+import BaseCTA from '../cta/BaseCTA.js';
+import { Text } from '../text/Text.js';
+import ImageVideo from './imageVideo.js';
+import newStyled from '../../../node_modules/@emotion/styled/dist/emotion-styled.esm.js';
+
+var ContainerDesktop = css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  flex: 0 0 50%;\n  justify-content: space-around;\n  height: 574px;\n"], ["\n  flex: 0 0 50%;\n  justify-content: space-around;\n  height: 574px;\n"])));
+var ContainerMobile = css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 16px;\n  height: auto;\n  @media (max-width: 768px) {\n    max-height: fit-content;\n    padding: 50px 15px;\n  }\n"], ["\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 16px;\n  height: auto;\n  @media (max-width: 768px) {\n    max-height: fit-content;\n    padding: 50px 15px;\n  }\n"])));
+var Container = newStyled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  padding: 60px 34px 40px 34px;\n  display: flex;\n  @media (min-width: 769px) {\n    ", "\n  }\n  @media (max-width: 768px) {\n    ", "\n  }\n"], ["\n  padding: 60px 34px 40px 34px;\n  display: flex;\n  @media (min-width: 769px) {\n    ", "\n  }\n  @media (max-width: 768px) {\n    ", "\n  }\n"])), ContainerDesktop, ContainerMobile);
+var TextContainer = newStyled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 0 15px;\n  gap: 24px;\n  text-align: center;\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 0 15px;\n  gap: 24px;\n  text-align: center;\n"])));
+var TextWithImage = function (_a) {
+    var _b, _c, _d, _e;
+    var title = _a.title, text = _a.text, children = _a.children, buttomText = _a.buttomText, backgroundColor = _a.backgroundColor, imageLeftSide = _a.imageLeftSide, titleStyle = _a.titleStyle, textStyle = _a.textStyle, _f = _a.buttonWideOnMobile, buttonWideOnMobile = _f === void 0 ? false : _f, props = __rest(_a, ["title", "text", "children", "buttomText", "backgroundColor", "imageLeftSide", "titleStyle", "textStyle", "buttonWideOnMobile"]);
+    var isMobile = useWindowDimensions({ desktop: 768, mobile: 0 }).isMobile;
+    var ImageTitle = function () { return (jsx(Fragment, { children: !isMobile ? (jsx(Text, __assign({ variant: "heading2", weight: "bold", style: titleStyle
+                ? titleStyle
+                : {
+                    color: '#000000',
+                    textAlign: 'center',
+                } }, { children: title }), void 0)) : (jsx(Text, __assign({ variant: "heading3", weight: "bold", style: titleStyle
+                ? titleStyle
+                : {
+                    color: '#000000',
+                    textAlign: 'center',
+                } }, { children: title }), void 0)) }, void 0)); };
+    var buttonAction = function () {
+        // @ts-ignore
+        props.isRedirectionURL ? (window.location.href = props.URLLink) : props.onButtonClick();
+    };
+    return (jsxs(Container, __assign({ style: { backgroundColor: backgroundColor } }, { children: [isMobile && jsx(ImageTitle, {}, void 0), (imageLeftSide || isMobile) && (jsx(ImageVideo, { imageLink: (_b = props.imgVideo) === null || _b === void 0 ? void 0 : _b.imageLink, isMobile: isMobile, isVideo: (_c = props.imgVideo) === null || _c === void 0 ? void 0 : _c.isVideo }, void 0)), jsxs(TextContainer, { children: [!isMobile && jsx(ImageTitle, {}, void 0), jsx(Text, __assign({ variant: "body", weight: "regular", style: textStyle ? textStyle : { maxWidth: '450px' } }, { children: text }), void 0), children, jsx(BaseCTA, { text: buttomText, size: ComponentSize.Medium, wide: isMobile && buttonWideOnMobile ? true : false, onClick: buttonAction, testId: buttomText, css: {
+                            backgroundColor: props.btnBGColor,
+                            color: '#ffffff',
+                            border: props.btnBGColor,
+                            transition: '0.3s linear',
+                            '&:hover': {
+                                backgroundColor: props.btnHoverBGColor,
+                            },
+                        } }, void 0), jsx("div", { children: props.contentAfterButton }, void 0)] }, void 0), !imageLeftSide && !isMobile && (jsx(ImageVideo, { imageLink: (_d = props.imgVideo) === null || _d === void 0 ? void 0 : _d.imageLink, isMobile: isMobile, isVideo: (_e = props.imgVideo) === null || _e === void 0 ? void 0 : _e.isVideo }, void 0))] }), void 0));
+};
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+
+export { TextWithImage as default };
+//# sourceMappingURL=index.js.map

package/build/index.esm.js/src/components/textWithImage/index.js.map

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

package/build/index.esm.js/src/components/timer/Timer.js

@@ -0,0 +1,38 @@
+import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import { jsxs } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
+
+var timeToSeconds = function (_a) {
+    var hours = _a.hours, minutes = _a.minutes, seconds = _a.seconds;
+    return hours * 3600 + minutes * 60 + seconds;
+};
+var secondsToTime = function (secs) {
+    var hours = Math.floor(secs / 3600);
+    var minutes = Math.floor((secs - hours * 3600) / 60);
+    var seconds = secs - hours * 3600 - minutes * 60;
+    return { hours: hours, minutes: minutes, seconds: seconds };
+};
+var Timer = function (_a) {
+    var onTimeUp = _a.onTimeUp, _b = _a.displayZeroValues, displayZeroValues = _b === void 0 ? false : _b, rest = __rest(_a, ["onTimeUp", "displayZeroValues"]);
+    var _c = useState(timeToSeconds(rest)), secs = _c[0], setSecs = _c[1];
+    useEffect(function () {
+        var timer = setInterval(function () {
+            setSecs(function (seconds) {
+                if (seconds === 1) {
+                    clearInterval(timer);
+                    onTimeUp();
+                    return 0;
+                }
+                return seconds - 1;
+            });
+        }, 1000);
+        if (secs <= 0)
+            clearInterval(timer);
+        return function () { return clearInterval(timer); };
+    }, [onTimeUp, secs]);
+    var _d = secondsToTime(secs), hours = _d.hours, minutes = _d.minutes, seconds = _d.seconds;
+    return (jsxs("div", __assign({ "data-testid": "Time" }, { children: [(hours || displayZeroValues) && "".concat(hours, "h "), (minutes || displayZeroValues) && "".concat(minutes, "m "), seconds, "s"] }), void 0));
+};
+
+export { Timer, secondsToTime, timeToSeconds };
+//# sourceMappingURL=Timer.js.map

package/build/index.esm.js/src/components/timer/Timer.js.map

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

package/build/index.esm.js/src/components/tooltip/Arrow.js

@@ -0,0 +1,10 @@
+import { __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var TooltipArrow = function (_a) {
+    var height = _a.height, width = _a.width, fill = _a.fill, stroke = _a.stroke;
+    return (jsxs("svg", __assign({ width: "".concat(width, "rem"), height: "".concat(height, "rem"), viewBox: "0 0 20 12", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsx("title", { children: "Tooltip Arrow" }, void 0), jsx("path", { d: "M11.1523 8.83618L18.9325 -0.500001L1.06752 -0.500001L8.84767 8.83618C9.44736 9.55581 10.5526 9.55581 11.1523 8.83618Z", fill: fill, stroke: stroke }, void 0)] }), void 0));
+};
+
+export { TooltipArrow };
+//# sourceMappingURL=Arrow.js.map

package/build/index.esm.js/src/components/tooltip/Arrow.js.map

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

package/build/index.esm.js/src/components/tooltip/Styled.js

@@ -0,0 +1,61 @@
+import { __makeTemplateObject } from '../../../node_modules/tslib/tslib.es6.js';
+import newStyled from '../../../node_modules/@emotion/styled/dist/emotion-styled.esm.js';
+import { ComponentPosition } from '../../types/enums.js';
+import { getWrapperFlexDirection, getContainerFlexDirection, getTooltipAlignItems, getArrowRotation, getArrowContainerPadding, getArrowContainerMargin } from './utils.js';
+
+var Wrapper = newStyled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: ", ";\n  align-items: center;\n  cursor: pointer;\n\n  &:hover {\n    .tooltip-container {\n      visibility: visible;\n      opacity: 1;\n    }\n  }\n"], ["\n  display: flex;\n  flex-direction: ", ";\n  align-items: center;\n  cursor: pointer;\n\n  &:hover {\n    .tooltip-container {\n      visibility: visible;\n      opacity: 1;\n    }\n  }\n"])), function (_a) {
+    var position = _a.position;
+    return getWrapperFlexDirection(position);
+});
+var TooltipContainer = newStyled.div(function (_a) {
+    var position = _a.position, childrenWidth = _a.childrenWidth, tooltipHeight = _a.tooltipHeight, align = _a.align, maxWidth = _a.maxWidth;
+    return ({
+        position: 'absolute',
+        display: 'flex',
+        flexDirection: getContainerFlexDirection(position),
+        alignItems: getTooltipAlignItems(position, align),
+        marginLeft: getTooltipMargin(position, ComponentPosition.Right, "".concat(childrenWidth, "px")),
+        marginRight: getTooltipMargin(position, ComponentPosition.Left, "".concat(childrenWidth, "px")),
+        marginTop: getTooltipMargin(position, ComponentPosition.Top, "-".concat(tooltipHeight, "px")),
+        marginBottom: getTooltipMargin(position, ComponentPosition.Bottom, "-".concat(tooltipHeight, "px")),
+        maxWidth: maxWidth ? "".concat(maxWidth) : 'none',
+        transition: 'opacity 0.2s ease',
+        userSelect: 'none',
+        opacity: 0,
+        visibility: 'hidden',
+    });
+});
+var getTooltipMargin = function (actual, expected, margin) {
+    return actual === expected ? margin : '0';
+};
+var ContentWrapper = newStyled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border: 0.063rem solid ", ";\n  padding: 0.563rem 0.75rem;\n  border-radius: 0.5rem;\n  background-color: ", ";\n  z-index: 999;\n"], ["\n  border: 0.063rem solid ", ";\n  padding: 0.563rem 0.75rem;\n  border-radius: 0.5rem;\n  background-color: ", ";\n  z-index: 999;\n"])), function (_a) {
+    var borderColor = _a.borderColor;
+    return borderColor;
+}, function (_a) {
+    var backgroundColor = _a.backgroundColor;
+    return backgroundColor;
+});
+var TooltipArrowContainer = newStyled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  width: 1.25rem;\n  height: 0.75rem;\n  display: flex;\n  transform: rotate(", ");\n  padding: ", ";\n  margin: ", ";\n"], ["\n  width: 1.25rem;\n  height: 0.75rem;\n  display: flex;\n  transform: rotate(", ");\n  padding: ", ";\n  margin: ", ";\n"])), function (_a) {
+    var position = _a.position;
+    return getArrowRotation(position);
+}, function (_a) {
+    var position = _a.position;
+    return getArrowContainerPadding(position);
+}, function (_a) {
+    var position = _a.position;
+    return getArrowContainerMargin(position);
+});
+var TooltipText = newStyled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  font-style: normal;\n  font-weight: normal;\n  font-size: 0.875rem;\n  line-height: 1.125rem;\n  margin: 0;\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  color: ", ";\n"])), function (_a) {
+    var color = _a.color;
+    return color;
+});
+var TopSection = newStyled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-bottom: 0.688rem;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-bottom: 0.688rem;\n"])));
+var Title = newStyled.h1(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  font-size: 0.875rem;\n  font-weight: 600;\n  line-height: 1.375rem;\n  margin: 0;\n  color: ", ";\n"], ["\n  font-size: 0.875rem;\n  font-weight: 600;\n  line-height: 1.375rem;\n  margin: 0;\n  color: ", ";\n"])), function (_a) {
+    var color = _a.color;
+    return color;
+});
+var IconContainer = newStyled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  width: 1.375rem;\n  height: 1.125rem;\n  margin-right: 0.563rem;\n"], ["\n  width: 1.375rem;\n  height: 1.125rem;\n  margin-right: 0.563rem;\n"])));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
+
+export { ContentWrapper, IconContainer, Title, TooltipArrowContainer, TooltipContainer, TooltipText, TopSection, Wrapper };
+//# sourceMappingURL=Styled.js.map

package/build/index.esm.js/src/components/tooltip/Styled.js.map

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

package/build/index.esm.js/src/components/tooltip/Tooltip.js

@@ -0,0 +1,31 @@
+import { __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React__default, { useState, createRef, useLayoutEffect } from 'react';
+import { TooltipArrow } from './Arrow.js';
+import { Wrapper, TooltipContainer, ContentWrapper, TopSection, IconContainer, Title, TooltipText, TooltipArrowContainer } from './Styled.js';
+import { useTheme } from '../../core/theme/Theme.js';
+
+var Tooltip = function (_a) {
+    var children = _a.children, position = _a.position, content = _a.content, backgroundColor = _a.backgroundColor, _b = _a.align, align = _b === void 0 ? 'center' : _b, maxWidth = _a.maxWidth, onClick = _a.onClick, header = _a.header;
+    var theme = useTheme();
+    var _c = useState(0), childrenWidth = _c[0], setChildrenWidth = _c[1];
+    var childrenRef = createRef();
+    var _d = useState(0), tooltipHeight = _d[0], setTooltipHeight = _d[1];
+    var tooltipRef = createRef();
+    useLayoutEffect(function () {
+        var ref = childrenRef.current;
+        setChildrenWidth((ref === null || ref === void 0 ? void 0 : ref.offsetWidth) || 0);
+    }, [childrenRef]);
+    useLayoutEffect(function () {
+        var ref = tooltipRef.current;
+        setTooltipHeight((ref === null || ref === void 0 ? void 0 : ref.offsetHeight) || 0);
+    }, [tooltipRef]);
+    return (jsxs(Wrapper, __assign({ position: position, "data-testid": "TooltipWrapper" }, { children: [jsx("div", __assign({ ref: childrenRef }, { children: children }), void 0), jsxs(TooltipContainer, __assign({ position: position, align: align, maxWidth: maxWidth, childrenWidth: childrenWidth, tooltipHeight: tooltipHeight, ref: tooltipRef, onClick: onClick, "data-testid": "TooltipContainer", className: "tooltip-container" }, { children: [jsxs(ContentWrapper, __assign({ className: "tooltip-wrapper", borderColor: theme.colors.shades['200'].color, backgroundColor: backgroundColor ? backgroundColor : theme.colors.shades.white.color }, { children: [header && (jsxs(TopSection, __assign({ "data-testid": "TooltipHeader" }, { children: [(header === null || header === void 0 ? void 0 : header.Icon) && (jsx(IconContainer, { children: React__default.createElement(header.Icon, {
+                                            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(Title, __assign({ 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(TooltipText, __assign({ 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" }, { children: content.text }), void 0))] }), void 0), jsx(TooltipArrowContainer, __assign({ position: position, "data-testid": "TooltipArrow" }, { children: jsx(TooltipArrow, { width: 1.25, height: 0.75, fill: theme.colors.shades.white.color, stroke: theme.colors.shades['10'].color }, void 0) }), void 0)] }), void 0)] }), void 0));
+};
+
+export { Tooltip };
+//# sourceMappingURL=Tooltip.js.map

package/build/index.esm.js/src/components/tooltip/Tooltip.js.map

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