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

package/build/index.js/src/components/motivator-progress-bar/MotivatorProgressBar.js

@@ -0,0 +1,85 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib_es6 = require('../../../node_modules/tslib/tslib.es6.js');
+var jsxRuntime = require('react/jsx-runtime');
+var emotionStyled_esm = require('../../../node_modules/@emotion/styled/dist/emotion-styled.esm.js');
+var Theme = require('../../core/theme/Theme.js');
+
+var Bar = emotionStyled_esm.div(templateObject_1 || (templateObject_1 = tslib_es6.__makeTemplateObject(["\n  @keyframes loading {\n    0% {\n      transform: translateX(0);\n    }\n    to {\n      transform: translateX(400%);\n    }\n  }\n\n  height: ", ";\n  background-color: ", ";\n  width: ", ";\n  border-radius: ", ";\n  left: ", ";\n  animation: ", ";\n"], ["\n  @keyframes loading {\n    0% {\n      transform: translateX(0);\n    }\n    to {\n      transform: translateX(400%);\n    }\n  }\n\n  height: ", ";\n  background-color: ", ";\n  width: ", ";\n  border-radius: ", ";\n  left: ", ";\n  animation: ", ";\n"])), function (_a) {
+    var height = _a.height;
+    return height || '0.5rem';
+}, function (_a) {
+    var backgroundColor = _a.backgroundColor;
+    return backgroundColor;
+}, function (_a) {
+    var percent = _a.percent;
+    return (percent ? getBarWithBasedOnPercent(percent) : '50%');
+}, function (_a) {
+    var borderRadius = _a.borderRadius;
+    return borderRadius || '0.25rem';
+}, function (_a) {
+    var percent = _a.percent;
+    return (percent ? '0' : '-50%');
+}, function (_a) {
+    var percent = _a.percent;
+    return (percent ? 'none' : 'loading 1s ease-in 0.5s infinite');
+});
+var Background = emotionStyled_esm.div(function (_a) {
+    var backgroundColor = _a.backgroundColor, height = _a.height, borderRadius = _a.borderRadius;
+    return ({
+        height: height || '0.5rem',
+        width: '100%',
+        backgroundColor: backgroundColor,
+        borderRadius: borderRadius || '0.25rem',
+    });
+});
+var BarContainer = emotionStyled_esm.div({
+    display: 'grid',
+    gridTemplateColumns: '1fr 10fr 1fr',
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: '416px',
+    gap: '8px',
+    maxWidth: '100%',
+    padding: '0 16px',
+    position: 'relative',
+});
+var Container = emotionStyled_esm.div(function (_a) {
+    var backgroundColor = _a.backgroundColor;
+    return ({
+        width: '475px',
+        maxWidth: '100%',
+        display: 'flex',
+        gap: '13px',
+        padding: '16px 0',
+        flexDirection: 'column',
+        alignItems: 'center',
+        background: backgroundColor,
+    });
+});
+var getBarWithBasedOnPercent = function (percent) {
+    return percent <= 100 && percent >= 0 ? "".concat(percent, "%") : '0%';
+};
+var Value = emotionStyled_esm.div(function (_a) {
+    var isBold = _a.isBold;
+    return ({
+        fontWeight: isBold ? 600 : 400,
+    });
+});
+var _calculatePercentage = function (currentAmount, endingValue) {
+    var percentage = currentAmount / endingValue;
+    return percentage > 1 ? 100 : percentage * 100;
+};
+var MotivatorProgressBar = function (_a) {
+    var _b = _a.fillColor, fillColor = _b === void 0 ? '#F7A08B' : _b, _c = _a.backgroundColor, backgroundColor = _c === void 0 ? '#F7F7F7' : _c, _d = _a.unfilledColor, unfilledColor = _d === void 0 ? '#EEBFBD' : _d, _e = _a.currencyCode, currencyCode = _e === void 0 ? '$' : _e, _f = _a.endingValue, endingValue = _f === void 0 ? 70 : _f, _g = _a.currentAmount, currentAmount = _g === void 0 ? 0 : _g, rewardUnlockedMessage = _a.rewardUnlockedMessage;
+    var theme = Theme.useTheme();
+    var isRewardUnlocked = currentAmount >= endingValue;
+    var progress = _calculatePercentage(currentAmount, endingValue);
+    return (jsxRuntime.jsxs(Container, tslib_es6.__assign({ backgroundColor: backgroundColor }, { children: [jsxRuntime.jsxs(BarContainer, tslib_es6.__assign({ "data-testid": "MPBContainer" }, { children: [jsxRuntime.jsxs(Value, { children: [currencyCode, currentAmount] }, void 0), jsxRuntime.jsx(Background, tslib_es6.__assign({ backgroundColor: unfilledColor || theme.colors.shades['100'].color, "data-testid": "MPBBackground" }, { children: jsxRuntime.jsx(Bar, { "data-testid": "MPBBar", backgroundColor: fillColor, percent: progress }, void 0) }), void 0), jsxRuntime.jsxs(Value, tslib_es6.__assign({ isBold: true }, { children: [currencyCode, endingValue] }), void 0)] }), void 0), isRewardUnlocked ? (jsxRuntime.jsx("div", { dangerouslySetInnerHTML: { __html: rewardUnlockedMessage } }, void 0)) : (jsxRuntime.jsxs("div", { children: ["Spend ", currencyCode, Math.round((endingValue - currentAmount) * 100) / 100, " more to get", ' ', jsxRuntime.jsx("strong", { children: "Free Shipping" }, void 0)] }, void 0))] }), void 0));
+};
+var templateObject_1;
+
+exports.MotivatorProgressBar = MotivatorProgressBar;
+//# sourceMappingURL=MotivatorProgressBar.js.map

package/build/index.js/src/components/motivator-progress-bar/MotivatorProgressBar.js.map

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

package/build/index.js/src/components/offer-banner/OfferBanner.js

@@ -0,0 +1,26 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib_es6 = require('../../../node_modules/tslib/tslib.es6.js');
+var jsxRuntime = require('react/jsx-runtime');
+var emotionStyled_esm = require('../../../node_modules/@emotion/styled/dist/emotion-styled.esm.js');
+var Theme = require('../../core/theme/Theme.js');
+
+var Text = emotionStyled_esm.h3(templateObject_1 || (templateObject_1 = tslib_es6.__makeTemplateObject(["\n  background-color: ", ";\n  margin: 0;\n  padding: 0.25rem 0.5rem;\n  font-size: 0.625rem;\n  font-weight: 700;\n  line-height: 0.875rem;\n  border-radius: 0.125rem;\n  display: initial;\n  color: ", ";\n"], ["\n  background-color: ", ";\n  margin: 0;\n  padding: 0.25rem 0.5rem;\n  font-size: 0.625rem;\n  font-weight: 700;\n  line-height: 0.875rem;\n  border-radius: 0.125rem;\n  display: initial;\n  color: ", ";\n"])), function (_a) {
+    var backgroundColor = _a.backgroundColor;
+    return backgroundColor;
+}, function (_a) {
+    var color = _a.color;
+    return color;
+});
+var OfferBanner = function (_a) {
+    var discountAppliedText = _a.discountAppliedText, backgroundColor = _a.backgroundColor;
+    var theme = Theme.useTheme();
+    return (jsxRuntime.jsx(Text, tslib_es6.__assign({ backgroundColor: backgroundColor, color: theme.colors.shades['700'].color, "data-testid": "OfferBanner" }, { children: discountAppliedText }), void 0));
+};
+var templateObject_1;
+
+exports.OfferBanner = OfferBanner;
+exports.Text = Text;
+//# sourceMappingURL=OfferBanner.js.map

package/build/index.js/src/components/offer-banner/OfferBanner.js.map

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

package/build/index.js/src/components/order-bar/OrderBar.js

@@ -0,0 +1,26 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib_es6 = require('../../../node_modules/tslib/tslib.es6.js');
+var jsxRuntime = require('react/jsx-runtime');
+var emotionStyled_esm = require('../../../node_modules/@emotion/styled/dist/emotion-styled.esm.js');
+var index = require('../icons/index.js');
+var Theme = require('../../core/theme/Theme.js');
+
+var Container = emotionStyled_esm.div(templateObject_1 || (templateObject_1 = tslib_es6.__makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: ", ";\n  padding: 0.75rem 0;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: ", ";\n  padding: 0.75rem 0;\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.component.orderBar.backgroundColor;
+});
+var H1 = emotionStyled_esm.h1(templateObject_2 || (templateObject_2 = tslib_es6.__makeTemplateObject(["\n  margin: 0;\n  font-size: 1rem;\n  line-height: 1.5rem;\n  font-weight: 600;\n  color: ", ";\n  margin-left: 0.625rem;\n"], ["\n  margin: 0;\n  font-size: 1rem;\n  line-height: 1.5rem;\n  font-weight: 600;\n  color: ", ";\n  margin-left: 0.625rem;\n"])), function (props) { return props.color; });
+var OrderBar = function (_a) {
+    var message = _a.message, color = _a.color;
+    var theme = Theme.useTheme();
+    return (jsxRuntime.jsxs(Container, tslib_es6.__assign({ color: color }, { children: [jsxRuntime.jsx(index.Icon.Actions.Check, { width: 1.25, height: 0.875, fill: "#2F806A" }, void 0), jsxRuntime.jsx(H1, tslib_es6.__assign({ color: theme.component.orderBar.fontColor }, { children: message }), void 0)] }), void 0));
+};
+var templateObject_1, templateObject_2;
+
+exports.Container = Container;
+exports.H1 = H1;
+exports.OrderBar = OrderBar;
+//# sourceMappingURL=OrderBar.js.map

package/build/index.js/src/components/order-bar/OrderBar.js.map

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

package/build/index.js/src/components/packs/selector/PackSelector.js

@@ -0,0 +1,53 @@
+'use strict';
+
+var tslib_es6 = require('../../../../node_modules/tslib/tslib.es6.js');
+var jsxRuntime = require('react/jsx-runtime');
+var emotionStyled_esm = require('../../../../node_modules/@emotion/styled/dist/emotion-styled.esm.js');
+var React = require('react');
+require('../../../../node_modules/html-react-parser/index.mjs.js');
+var formatPrice = require('../../../utils/formatPrice/formatPrice.js');
+var Spacing = require('../../shared/spacing/Spacing.js');
+var Text = require('../../text/Text.js');
+var index = require('../../icons/index.js');
+var index$1 = require('../../../../node_modules/html-react-parser/index.js');
+
+var Container = emotionStyled_esm.div(templateObject_1 || (templateObject_1 = tslib_es6.__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 = emotionStyled_esm.div(templateObject_2 || (templateObject_2 = tslib_es6.__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: 20px 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      color: var(--color);\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: 20px 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      color: var(--color);\n    }\n  }\n"])));
+var Tag = emotionStyled_esm.div(templateObject_3 || (templateObject_3 = tslib_es6.__makeTemplateObject(["\n  position: absolute;\n  width: 100%;\n  left: 50%;\n  top: 0;\n  transform: translateX(-50%);\n  background-color: var(--component-packSelector-tagColor);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 1px 0;\n\n  [aria-checked='true'] & {\n    background-color: var(--component-packSelector-selectedColor);\n\n    & * {\n      color: var(--component-packSelector-selectedContrast) !important;\n    }\n  }\n"], ["\n  position: absolute;\n  width: 100%;\n  left: 50%;\n  top: 0;\n  transform: translateX(-50%);\n  background-color: var(--component-packSelector-tagColor);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 1px 0;\n\n  [aria-checked='true'] & {\n    background-color: var(--component-packSelector-selectedColor);\n\n    & * {\n      color: var(--component-packSelector-selectedContrast) !important;\n    }\n  }\n"])));
+var Label = emotionStyled_esm.div(templateObject_4 || (templateObject_4 = tslib_es6.__makeTemplateObject(["\n  position: relative;\n  width: fit-content;\n  margin: 0 auto;\n"], ["\n  position: relative;\n  width: fit-content;\n  margin: 0 auto;\n"])));
+var Check = emotionStyled_esm.div(templateObject_5 || (templateObject_5 = tslib_es6.__makeTemplateObject(["\n  position: absolute;\n  width: 20px;\n  height: 20px;\n  background-color: var(--color);\n  border-radius: 50%;\n  left: 100%;\n  top: 50%;\n  transform: translate(6px, -50%) scale(0.5);\n  opacity: 0;\n  transition: opacity 0.3s, transform 0.3s;\n\n  &[data-visible='true'] {\n    transform: translate(6px, -50%) scale(1);\n    opacity: 1;\n  }\n"], ["\n  position: absolute;\n  width: 20px;\n  height: 20px;\n  background-color: var(--color);\n  border-radius: 50%;\n  left: 100%;\n  top: 50%;\n  transform: translate(6px, -50%) scale(0.5);\n  opacity: 0;\n  transition: opacity 0.3s, transform 0.3s;\n\n  &[data-visible='true'] {\n    transform: translate(6px, -50%) scale(1);\n    opacity: 1;\n  }\n"])));
+var IconContainer = emotionStyled_esm.div(templateObject_6 || (templateObject_6 = tslib_es6.__makeTemplateObject(["\n  height: 56px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  [aria-checked='true'] & * {\n    fill: var(--color);\n  }\n"], ["\n  height: 56px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  [aria-checked='true'] & * {\n    fill: var(--color);\n  }\n"])));
+var IconPlaceholder = emotionStyled_esm.div(templateObject_7 || (templateObject_7 = tslib_es6.__makeTemplateObject(["\n  height: 100%;\n  width: 100%;\n  background-color: var(--colors-shades-100-color);\n"], ["\n  height: 100%;\n  width: 100%;\n  background-color: var(--colors-shades-100-color);\n"])));
+var DiscountContainer = emotionStyled_esm.div(templateObject_8 || (templateObject_8 = tslib_es6.__makeTemplateObject(["\n  display: flex,\n  flex-direction: row,\n  align-items: center;\n  justify-content: center;\n"], ["\n  display: flex,\n  flex-direction: row,\n  align-items: center;\n  justify-content: center;\n"])));
+var PackSelector = function (_a) {
+    var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange, currencyCode = _a.currencyCode;
+    return (jsxRuntime.jsx(Container, tslib_es6.__assign({ role: "radiogroup" }, { children: packs.map(function (pack) {
+            return (jsxRuntime.jsx(PackCard, { pack: pack, onChange: onChange, selected: selectedValue === pack, currencyCode: currencyCode }, pack.label));
+        }) }), void 0));
+};
+var PackCard = function (_a) {
+    var pack = _a.pack, onChange = _a.onChange, selected = _a.selected, currencyCode = _a.currencyCode;
+    var _b = React.useState(null), icon = _b[0], setIcon = _b[1];
+    React.useEffect(function () {
+        fetch(pack.meta.icon)
+            .then(function (res) { return res.text(); })
+            .then(function (icon) { return setIcon(icon); })
+            .catch(function (e) { return console.error('Error getting icon', pack.meta.icon, e); });
+    }, [pack.meta.icon]);
+    return (jsxRuntime.jsxs(Card, tslib_es6.__assign({ onClick: function () { return onChange(pack); }, role: "radio", "aria-checked": selected, tabIndex: 0, "data-highlight": pack.meta.tag != null, "data-testid": "pack-selector" }, { children: [pack.meta.tag ? (jsxRuntime.jsx(Tag, tslib_es6.__assign({ "data-testid": "pack-selector-tag" }, { children: jsxRuntime.jsx(Text.Text, tslib_es6.__assign({ variant: "tag", weight: "bold", size: "small", "data-keep-color": true }, { children: pack.meta.tag.toUpperCase() }), void 0) }), void 0)) : null, jsxRuntime.jsxs(Label, { children: [jsxRuntime.jsx(Text.Text, tslib_es6.__assign({ variant: "body", weight: selected || pack.meta.tag ? 'bold' : 'regular' }, { children: pack.label }), void 0), jsxRuntime.jsx(Check, tslib_es6.__assign({ "data-visible": selected, "data-testid": "pack-selector-check" }, { children: jsxRuntime.jsx(index.Icon.Actions.Check, { width: 0.6, fill: "var(--background)" }, void 0) }), void 0)] }, void 0), jsxRuntime.jsxs(Text.Text, tslib_es6.__assign({ variant: "body", size: "small", weight: "bold", "data-keep-color": true, style: {
+                    color: 'var(--colors-semantic-urgent-color)',
+                } }, { children: ["Save ", pack.meta.discountPercentage, "%"] }), void 0), jsxRuntime.jsx(Spacing.Spacing, { type: "block", size: 12 }, void 0), jsxRuntime.jsx(IconContainer, { children: icon ? index$1(icon) : jsxRuntime.jsx(IconPlaceholder, {}, void 0) }, void 0), jsxRuntime.jsx(Spacing.Spacing, { type: "block", size: 12 }, void 0), jsxRuntime.jsxs(DiscountContainer, { children: [jsxRuntime.jsx(Text.Text, tslib_es6.__assign({ variant: "label", size: "small", style: { textDecoration: 'line-through' } }, { children: formatPrice.formatPrice(pack.meta.originalPrice, {
+                            locale: 'en-US',
+                            currency: currencyCode || 'USD',
+                        }) }), void 0), jsxRuntime.jsxs(Text.Text, tslib_es6.__assign({ variant: "label", size: "small" }, { children: [' - ', ' ', formatPrice.formatPrice(pack.meta.price, {
+                                locale: 'en-US',
+                                currency: currencyCode || 'USD',
+                            })] }), void 0)] }, void 0), jsxRuntime.jsxs(Text.Text, tslib_es6.__assign({ variant: "body", weight: "demi", size: "small" }, { children: [formatPrice.formatPrice(pack.meta.price / pack.meta.quantity, {
+                        locale: 'en-US',
+                        currency: currencyCode || 'USD',
+                    }), ' ', "each"] }), void 0)] }), void 0));
+};
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
+
+module.exports = PackSelector;
+//# sourceMappingURL=PackSelector.js.map

package/build/index.js/src/components/packs/selector/PackSelector.js.map

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

package/build/index.js/src/components/pagination/Pagination.js

@@ -0,0 +1,60 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib_es6 = require('../../../node_modules/tslib/tslib.es6.js');
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var Theme = require('../../core/theme/Theme.js');
+var index = require('../icons/index.js');
+var styles = require('./styles.js');
+
+var Pagination = function (_a) {
+    var from = _a.from, to = _a.to, _b = _a.currentPage, currentPage = _b === void 0 ? from : _b, onChange = _a.onChange, _c = _a.underlineActive, underlineActive = _c === void 0 ? true : _c, _d = _a.boldActive, boldActive = _d === void 0 ? true : _d, _e = _a.disabled, disabled = _e === void 0 ? false : _e, _f = _a.showReducedPages, showReducedPages = _f === void 0 ? false : _f;
+    var RANGE_OF_PAGES = 3;
+    var theme = Theme.useTheme();
+    var _g = React.useState(currentPage), page = _g[0], setPage = _g[1];
+    var handlePageChange = function (page) {
+        if (disabled || page < from || page > to) {
+            return;
+        }
+        setPage(page);
+        onChange(page);
+    };
+    var reducedPages = React.useMemo(function () {
+        if (!showReducedPages) {
+            return [];
+        }
+        var pages = [];
+        new Array(to - from + 1).fill(0).map(function (_, i) {
+            var initialRange = page - RANGE_OF_PAGES;
+            var finalRange = page + RANGE_OF_PAGES;
+            if (from + i > initialRange && from + i < finalRange) {
+                pages.push(from + i);
+            }
+        });
+        if (pages[0] === from + RANGE_OF_PAGES - 1) {
+            pages = [from, from + 1].concat(pages);
+        }
+        else if (pages[0] > from + RANGE_OF_PAGES - 1) {
+            pages = [from, -2].concat(pages);
+        }
+        else if (pages[0] === from + 1) {
+            pages = [from].concat(pages);
+        }
+        if (pages[pages.length - 1] === to - RANGE_OF_PAGES + 1) {
+            pages = pages.concat([to - 1, to]);
+        }
+        else if (pages[pages.length - 1] < to - RANGE_OF_PAGES + 1) {
+            pages = pages.concat([-2, to]);
+        }
+        else if (pages[pages.length - 1] === to - 1) {
+            pages = pages.concat([to]);
+        }
+        return pages;
+    }, [from, page, showReducedPages, to]);
+    return (jsxRuntime.jsxs(styles.Container, tslib_es6.__assign({ "data-testid": "PaginationContainer" }, { children: [jsxRuntime.jsx(styles.IconContainer, tslib_es6.__assign({ onClick: function () { return handlePageChange(page - 1); }, "data-testid": "LeftChevron" }, { children: jsxRuntime.jsx(index.Icon.Arrows.ChevronLeft, { fill: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, void 0) }), void 0), !showReducedPages && (jsxRuntime.jsx(styles.PageNumbersContainer, tslib_es6.__assign({ "data-testid": "PageNumbersContainer", theme: theme }, { children: new Array(to - from + 1).fill(0).map(function (_, i) { return (jsxRuntime.jsx(styles.PageNumber, tslib_es6.__assign({ onClick: function () { return handlePageChange(i + from); }, bold: boldActive && page === i + from, underline: underlineActive && page === i + from, role: 'button', color: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color, borderColor: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color, theme: theme }, { children: i + from }), i)); }) }), void 0)), showReducedPages && (jsxRuntime.jsx(styles.PageNumbersContainer, tslib_es6.__assign({ "data-testid": "PageNumbersContainer", theme: theme }, { children: reducedPages.map(function (reducedPage, index) { return (jsxRuntime.jsx(styles.PageNumber, tslib_es6.__assign({ onClick: function () { return handlePageChange(reducedPage); }, bold: boldActive && page === reducedPage, underline: underlineActive && page === reducedPage, role: 'button', color: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color, borderColor: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color, theme: theme }, { children: reducedPage !== -2 ? reducedPage : '...' }), index)); }) }), void 0)), jsxRuntime.jsx(styles.IconContainer, tslib_es6.__assign({ onClick: function () { return handlePageChange(page + 1); }, "data-testid": "RightChevron" }, { children: jsxRuntime.jsx(index.Icon.Arrows.ChevronRight, { fill: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, void 0) }), void 0)] }), void 0));
+};
+
+exports.Pagination = Pagination;
+//# sourceMappingURL=Pagination.js.map

package/build/index.js/src/components/pagination/Pagination.js.map

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

package/build/index.js/src/components/pagination/blogPaginator/PaginatorBlog.js

@@ -0,0 +1,33 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib_es6 = require('../../../../node_modules/tslib/tslib.es6.js');
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var Theme = require('../../../core/theme/Theme.js');
+var index = require('../../icons/index.js');
+var styles = require('../styles.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var PaginatorBlog = function (_a) {
+    var from = _a.from, to = _a.to, _b = _a.currentPage, currentPage = _b === void 0 ? from : _b, onChange = _a.onChange;
+    var theme = Theme.useTheme();
+    var _c = React__default["default"].useState(currentPage), page = _c[0], setPage = _c[1];
+    var handlePageChange = function (page) {
+        if (page < from || page > to) {
+            return;
+        }
+        setPage(page);
+        onChange(page);
+    };
+    return (jsxRuntime.jsxs(styles.Container, tslib_es6.__assign({ "data-testid": "PaginatorBlogContainer" }, { children: [jsxRuntime.jsx(styles.IconContainer, tslib_es6.__assign({ onClick: function () { return handlePageChange(page - 1); }, "data-testid": "PaginatorBlogLeftChevron" }, { children: jsxRuntime.jsx(index.Icon.Arrows.ChevronLeft, { fill: page === 1 ? theme.colors.shades['white'].color : theme.colors.shades['700'].color }, void 0) }), void 0), jsxRuntime.jsx(styles.PageNumbersContainer, tslib_es6.__assign({ "data-testid": "PaginatorBlogPageNumbersContainer", theme: theme }, { children: new Array(to - from + 1).fill(0).map(function (_, i) { return (jsxRuntime.jsx(styles.PageNumber, tslib_es6.__assign({ onClick: function () { return handlePageChange(i + from); }, background: page === i + from ? 'black' : '', role: 'button', color: page === i + from
+                        ? theme.colors.shades['white'].color
+                        : theme.colors.shades['700'].color, borderColor: theme.colors.shades['700'].color, theme: theme, bold: false, underline: false }, { children: i + from }), i)); }) }), void 0), jsxRuntime.jsx(styles.IconContainer, tslib_es6.__assign({ onClick: function () { return handlePageChange(page + 1); }, "data-testid": "PaginatorBlogRightChevron" }, { children: jsxRuntime.jsx(index.Icon.Arrows.ChevronRight, { fill: page === to ? theme.colors.shades['white'].color : theme.colors.shades['700'].color }, void 0) }), void 0)] }), void 0));
+};
+
+exports.PaginatorBlog = PaginatorBlog;
+//# sourceMappingURL=PaginatorBlog.js.map

package/build/index.js/src/components/pagination/blogPaginator/PaginatorBlog.js.map

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

package/build/index.js/src/components/pagination/styles.js

@@ -0,0 +1,37 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib_es6 = require('../../../node_modules/tslib/tslib.es6.js');
+var emotionStyled_esm = require('../../../node_modules/@emotion/styled/dist/emotion-styled.esm.js');
+var media = require('../../utils/media.js');
+
+var Container = emotionStyled_esm.div(templateObject_1 || (templateObject_1 = tslib_es6.__makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  user-select: none;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  user-select: none;\n"])));
+var IconContainer = emotionStyled_esm.div(templateObject_2 || (templateObject_2 = tslib_es6.__makeTemplateObject(["\n  width: 0.531rem;\n  height: 0.875rem;\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n"], ["\n  width: 0.531rem;\n  height: 0.875rem;\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n"])));
+var PageNumbersContainer = emotionStyled_esm.div(templateObject_3 || (templateObject_3 = tslib_es6.__makeTemplateObject(["\n  display: flex;\n  ", ";\n"], ["\n  display: flex;\n  ", ";\n"])), media.mediaQueries({
+    margin: ['0 0.75rem', '0 1.25rem'],
+}));
+var PageNumber = emotionStyled_esm.span(templateObject_4 || (templateObject_4 = tslib_es6.__makeTemplateObject(["\n  font-weight: ", ";\n  color: ", ";\n  text-align: center;\n  cursor: pointer;\n  margin: 0 2px;\n  border-bottom: ", ";\n  ", ";\n  background: ", ";\n"], ["\n  font-weight: ", ";\n  color: ", ";\n  text-align: center;\n  cursor: pointer;\n  margin: 0 2px;\n  border-bottom: ", ";\n  ", ";\n  background: ", ";\n"])), function (_a) {
+    var bold = _a.bold;
+    return (bold ? '700' : '500');
+}, function (_a) {
+    var color = _a.color;
+    return color;
+}, function (_a) {
+    var underline = _a.underline, borderColor = _a.borderColor;
+    return underline ? "0.063rem solid ".concat(borderColor) : 'none';
+}, media.mediaQueries({
+    fontSize: ['1rem', '1.25rem'],
+    lineHeight: ['1.5rem', '1.75rem'],
+    minWidth: ['1.5rem', '1.875rem'],
+}), function (_a) {
+    var background = _a.background;
+    return background || 'unset';
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+
+exports.Container = Container;
+exports.IconContainer = IconContainer;
+exports.PageNumber = PageNumber;
+exports.PageNumbersContainer = PageNumbersContainer;
+//# sourceMappingURL=styles.js.map

package/build/index.js/src/components/pagination/styles.js.map

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

package/build/index.js/src/components/payment-methods/PaymentMethod.js

@@ -0,0 +1,33 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib_es6 = require('../../../node_modules/tslib/tslib.es6.js');
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var emotionStyled_esm = require('../../../node_modules/@emotion/styled/dist/emotion-styled.esm.js');
+var Theme = require('../../core/theme/Theme.js');
+
+var Container = emotionStyled_esm.div(templateObject_1 || (templateObject_1 = tslib_es6.__makeTemplateObject(["\n  width: ", ";\n  height: ", ";\n  border: 0.063rem solid ", ";\n  border-radius: 0.25rem;\n  padding: 0.375rem;\n  cursor: ", ";\n"], ["\n  width: ", ";\n  height: ", ";\n  border: 0.063rem solid ", ";\n  border-radius: 0.25rem;\n  padding: 0.375rem;\n  cursor: ", ";\n"])), function (_a) {
+    var width = _a.width;
+    return width;
+}, function (_a) {
+    var height = _a.height;
+    return height;
+}, function (_a) {
+    var borderColor = _a.borderColor;
+    return borderColor;
+}, function (_a) {
+    var isClickable = _a.isClickable;
+    return (isClickable ? 'pointer' : 'default');
+});
+var PaymentMethod = function (_a) {
+    var Icon = _a.Icon, width = _a.width, height = _a.height, onClick = _a.onClick;
+    var theme = Theme.useTheme();
+    return (jsxRuntime.jsx(Container, tslib_es6.__assign({ width: width, height: height, borderColor: theme.colors.shades['100'].color, isClickable: Boolean(onClick), onClick: onClick, "data-testid": "payment-method-container" }, { children: React.createElement(Icon) }), void 0));
+};
+var templateObject_1;
+
+exports.Container = Container;
+exports.PaymentMethod = PaymentMethod;
+//# sourceMappingURL=PaymentMethod.js.map

package/build/index.js/src/components/payment-methods/PaymentMethod.js.map

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

package/build/index.js/src/components/pricing/clubOffer/ClubOfferTag.js

@@ -0,0 +1,81 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib_es6 = require('../../../../node_modules/tslib/tslib.es6.js');
+var jsxRuntime = require('react/jsx-runtime');
+var emotionStyled_esm = require('../../../../node_modules/@emotion/styled/dist/emotion-styled.esm.js');
+var enums = require('../../../types/enums.js');
+var Theme = require('../../../core/theme/Theme.js');
+
+var getStylesBySize = function (size) {
+    switch (size) {
+        case enums.ComponentSize.Large:
+            return {
+                borderRadius: '0.375rem',
+                padding: '0 0.75rem',
+                fontSize: '0.875rem',
+                lineHeight: '1.125rem',
+                height: '1.75rem',
+            };
+        case enums.ComponentSize.Medium:
+            return {
+                borderRadius: '0.25rem',
+                padding: '0 0.5rem',
+                fontSize: '0.75rem',
+                lineHeight: '1rem',
+                height: '1.375rem',
+            };
+        case enums.ComponentSize.Small:
+            return {
+                borderRadius: '0.25rem',
+                padding: '0',
+                fontSize: '0.625rem',
+                lineHeight: '0.75rem',
+                height: '2rem',
+            };
+    }
+};
+var Container = emotionStyled_esm.div(templateObject_1 || (templateObject_1 = tslib_es6.__makeTemplateObject(["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: ", ";\n  padding: ", ";\n  display: inline-flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  width: ", ";\n  height: ", ";\n  text-align: center;\n  cursor: default;\n"], ["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: ", ";\n  padding: ", ";\n  display: inline-flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  width: ", ";\n  height: ", ";\n  text-align: center;\n  cursor: default;\n"])), function (_a) {
+    var backgroundColor = _a.backgroundColor;
+    return backgroundColor;
+}, function (_a) {
+    var borderColor = _a.borderColor;
+    return borderColor;
+}, function (_a) {
+    var _b;
+    var size = _a.size;
+    return (_b = getStylesBySize(size)) === null || _b === void 0 ? void 0 : _b.borderRadius;
+}, function (_a) {
+    var _b;
+    var size = _a.size;
+    return (_b = getStylesBySize(size)) === null || _b === void 0 ? void 0 : _b.padding;
+}, function (_a) {
+    var size = _a.size;
+    return (size === enums.ComponentSize.Small ? '2rem' : 'unset');
+}, function (_a) {
+    var _b;
+    var size = _a.size;
+    return (_b = getStylesBySize(size)) === null || _b === void 0 ? void 0 : _b.height;
+});
+var H3 = emotionStyled_esm.h3(templateObject_2 || (templateObject_2 = tslib_es6.__makeTemplateObject(["\n  color: ", ";\n  font-weight: bold;\n  margin: 0;\n  font-size: ", ";\n  line-height: ", ";\n"], ["\n  color: ", ";\n  font-weight: bold;\n  margin: 0;\n  font-size: ", ";\n  line-height: ", ";\n"])), function (_a) {
+    var textColor = _a.textColor;
+    return textColor;
+}, function (_a) {
+    var _b;
+    var size = _a.size;
+    return (_b = getStylesBySize(size)) === null || _b === void 0 ? void 0 : _b.fontSize;
+}, function (_a) {
+    var _b;
+    var size = _a.size;
+    return (_b = getStylesBySize(size)) === null || _b === void 0 ? void 0 : _b.lineHeight;
+});
+var ClubOfferTag = function (_a) {
+    var clubOfferText = _a.clubOfferText, className = _a.className, disabled = _a.disabled, _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#882A2B' : _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 ? enums.ComponentSize.Medium : _e, style = _a.style;
+    var theme = Theme.useTheme();
+    return (jsxRuntime.jsx(Container, tslib_es6.__assign({ backgroundColor: disabled ? theme.colors.shades['50'].color : backgroundColor, borderColor: disabled ? theme.colors.shades['50'].color : borderColor, size: size, "data-testid": "cluboffer-container", style: style, className: className }, { children: jsxRuntime.jsx(H3, tslib_es6.__assign({ textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size, style: { fontSize: '0.875rem', lineHeight: '18px' } }, { children: clubOfferText }), void 0) }), void 0));
+};
+var templateObject_1, templateObject_2;
+
+exports.ClubOfferTag = ClubOfferTag;
+//# sourceMappingURL=ClubOfferTag.js.map

package/build/index.js/src/components/pricing/clubOffer/ClubOfferTag.js.map

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

package/build/index.js/src/components/pricing/discount/DiscountTag.js

@@ -0,0 +1,82 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib_es6 = require('../../../../node_modules/tslib/tslib.es6.js');
+var jsxRuntime = require('react/jsx-runtime');
+var emotionStyled_esm = require('../../../../node_modules/@emotion/styled/dist/emotion-styled.esm.js');
+var enums = require('../../../types/enums.js');
+var Theme = require('../../../core/theme/Theme.js');
+
+var getStylesBySize = function (size) {
+    switch (size) {
+        case enums.ComponentSize.Large:
+            return {
+                borderRadius: '0.375rem',
+                padding: '0 0.75rem',
+                fontSize: '0.875rem',
+                lineHeight: '1.125rem',
+                height: '1.75rem',
+            };
+        case enums.ComponentSize.Medium:
+            return {
+                borderRadius: '0.25rem',
+                padding: '0 0.5rem',
+                fontSize: '0.75rem',
+                lineHeight: '1rem',
+                height: '1.375rem',
+            };
+        case enums.ComponentSize.Small:
+            return {
+                borderRadius: '0.25rem',
+                padding: '0',
+                fontSize: '0.625rem',
+                lineHeight: '0.75rem',
+                height: '2rem',
+            };
+    }
+};
+var Container = emotionStyled_esm.div(templateObject_1 || (templateObject_1 = tslib_es6.__makeTemplateObject(["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: ", ";\n  padding: ", ";\n  display: inline-flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  width: ", ";\n  height: ", ";\n  text-align: center;\n  cursor: default;\n"], ["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: ", ";\n  padding: ", ";\n  display: inline-flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  width: ", ";\n  height: ", ";\n  text-align: center;\n  cursor: default;\n"])), function (_a) {
+    var backgroundColor = _a.backgroundColor;
+    return backgroundColor;
+}, function (_a) {
+    var borderColor = _a.borderColor;
+    return borderColor;
+}, function (_a) {
+    var _b;
+    var size = _a.size;
+    return (_b = getStylesBySize(size)) === null || _b === void 0 ? void 0 : _b.borderRadius;
+}, function (_a) {
+    var _b;
+    var size = _a.size;
+    return (_b = getStylesBySize(size)) === null || _b === void 0 ? void 0 : _b.padding;
+}, function (_a) {
+    var size = _a.size;
+    return (size === enums.ComponentSize.Small ? '2rem' : 'unset');
+}, function (_a) {
+    var _b;
+    var size = _a.size;
+    return (_b = getStylesBySize(size)) === null || _b === void 0 ? void 0 : _b.height;
+});
+var H3 = emotionStyled_esm.h3(templateObject_2 || (templateObject_2 = tslib_es6.__makeTemplateObject(["\n  color: ", ";\n  font-weight: bold;\n  margin: 0;\n  font-size: ", ";\n  line-height: ", ";\n"], ["\n  color: ", ";\n  font-weight: bold;\n  margin: 0;\n  font-size: ", ";\n  line-height: ", ";\n"])), function (_a) {
+    var textColor = _a.textColor;
+    return textColor;
+}, function (_a) {
+    var _b;
+    var size = _a.size;
+    return (_b = getStylesBySize(size)) === null || _b === void 0 ? void 0 : _b.fontSize;
+}, function (_a) {
+    var _b;
+    var size = _a.size;
+    return (_b = getStylesBySize(size)) === null || _b === void 0 ? void 0 : _b.lineHeight;
+});
+var Now = emotionStyled_esm(H3)(templateObject_3 || (templateObject_3 = tslib_es6.__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 ? enums.ComponentSize.Medium : _e, style = _a.style;
+    var theme = Theme.useTheme();
+    return (jsxRuntime.jsxs(Container, tslib_es6.__assign({ 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: [jsxRuntime.jsx(Now, tslib_es6.__assign({ "data-testid": "vwo-discount-now", textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size, style: style }, { children: "Now:" }), void 0), jsxRuntime.jsxs(H3, tslib_es6.__assign({ textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size, style: style }, { children: [discount, "% ", offText] }), void 0)] }), void 0));
+};
+var templateObject_1, templateObject_2, templateObject_3;
+
+exports.DiscountTag = DiscountTag;
+//# sourceMappingURL=DiscountTag.js.map

package/build/index.js/src/components/pricing/discount/DiscountTag.js.map

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