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

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

@@ -0,0 +1,51 @@
+import { __makeTemplateObject, __assign } from '../../../../node_modules/tslib/tslib.es6.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import newStyled from '../../../../node_modules/@emotion/styled/dist/emotion-styled.esm.js';
+import { useState, useEffect } from 'react';
+import '../../../../node_modules/html-react-parser/index.mjs.js';
+import { formatPrice } from '../../../utils/formatPrice/formatPrice.js';
+import { Spacing } from '../../shared/spacing/Spacing.js';
+import { Text } from '../../text/Text.js';
+import { Icon } from '../../icons/index.js';
+import HTMLReactParser from '../../../../node_modules/html-react-parser/index.js';
+
+var Container = newStyled.div(templateObject_1 || (templateObject_1 = __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 = newStyled.div(templateObject_2 || (templateObject_2 = __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 = newStyled.div(templateObject_3 || (templateObject_3 = __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 = newStyled.div(templateObject_4 || (templateObject_4 = __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 = newStyled.div(templateObject_5 || (templateObject_5 = __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 = newStyled.div(templateObject_6 || (templateObject_6 = __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 = newStyled.div(templateObject_7 || (templateObject_7 = __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 = newStyled.div(templateObject_8 || (templateObject_8 = __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 (jsx(Container, __assign({ role: "radiogroup" }, { children: packs.map(function (pack) {
+            return (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 = useState(null), icon = _b[0], setIcon = _b[1];
+    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 (jsxs(Card, __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 ? (jsx(Tag, __assign({ "data-testid": "pack-selector-tag" }, { children: jsx(Text, __assign({ variant: "tag", weight: "bold", size: "small", "data-keep-color": true }, { children: pack.meta.tag.toUpperCase() }), void 0) }), void 0)) : null, jsxs(Label, { children: [jsx(Text, __assign({ variant: "body", weight: selected || pack.meta.tag ? 'bold' : 'regular' }, { children: pack.label }), void 0), jsx(Check, __assign({ "data-visible": selected, "data-testid": "pack-selector-check" }, { children: jsx(Icon.Actions.Check, { width: 0.6, fill: "var(--background)" }, void 0) }), void 0)] }, void 0), jsxs(Text, __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), jsx(Spacing, { type: "block", size: 12 }, void 0), jsx(IconContainer, { children: icon ? HTMLReactParser(icon) : jsx(IconPlaceholder, {}, void 0) }, void 0), jsx(Spacing, { type: "block", size: 12 }, void 0), jsxs(DiscountContainer, { children: [jsx(Text, __assign({ variant: "label", size: "small", style: { textDecoration: 'line-through' } }, { children: formatPrice(pack.meta.originalPrice, {
+                            locale: 'en-US',
+                            currency: currencyCode || 'USD',
+                        }) }), void 0), jsxs(Text, __assign({ variant: "label", size: "small" }, { children: [' - ', ' ', formatPrice(pack.meta.price, {
+                                locale: 'en-US',
+                                currency: currencyCode || 'USD',
+                            })] }), void 0)] }, void 0), jsxs(Text, __assign({ variant: "body", weight: "demi", size: "small" }, { children: [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;
+
+export { PackSelector as default };
+//# sourceMappingURL=PackSelector.js.map

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

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

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

@@ -0,0 +1,56 @@
+import { __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useMemo } from 'react';
+import { useTheme } from '../../core/theme/Theme.js';
+import { Icon } from '../icons/index.js';
+import { Container, IconContainer, PageNumbersContainer, PageNumber } from './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 = useTheme();
+    var _g = 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 = 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 (jsxs(Container, __assign({ "data-testid": "PaginationContainer" }, { children: [jsx(IconContainer, __assign({ onClick: function () { return handlePageChange(page - 1); }, "data-testid": "LeftChevron" }, { children: jsx(Icon.Arrows.ChevronLeft, { fill: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, void 0) }), void 0), !showReducedPages && (jsx(PageNumbersContainer, __assign({ "data-testid": "PageNumbersContainer", theme: theme }, { children: new Array(to - from + 1).fill(0).map(function (_, i) { return (jsx(PageNumber, __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 && (jsx(PageNumbersContainer, __assign({ "data-testid": "PageNumbersContainer", theme: theme }, { children: reducedPages.map(function (reducedPage, index) { return (jsx(PageNumber, __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)), jsx(IconContainer, __assign({ onClick: function () { return handlePageChange(page + 1); }, "data-testid": "RightChevron" }, { children: jsx(Icon.Arrows.ChevronRight, { fill: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, void 0) }), void 0)] }), void 0));
+};
+
+export { Pagination };
+//# sourceMappingURL=Pagination.js.map

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

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

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

@@ -0,0 +1,25 @@
+import { __assign } from '../../../../node_modules/tslib/tslib.es6.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React__default from 'react';
+import { useTheme } from '../../../core/theme/Theme.js';
+import { Icon } from '../../icons/index.js';
+import { Container, IconContainer, PageNumbersContainer, PageNumber } from '../styles.js';
+
+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 = useTheme();
+    var _c = React__default.useState(currentPage), page = _c[0], setPage = _c[1];
+    var handlePageChange = function (page) {
+        if (page < from || page > to) {
+            return;
+        }
+        setPage(page);
+        onChange(page);
+    };
+    return (jsxs(Container, __assign({ "data-testid": "PaginatorBlogContainer" }, { children: [jsx(IconContainer, __assign({ onClick: function () { return handlePageChange(page - 1); }, "data-testid": "PaginatorBlogLeftChevron" }, { children: jsx(Icon.Arrows.ChevronLeft, { fill: page === 1 ? theme.colors.shades['white'].color : theme.colors.shades['700'].color }, void 0) }), void 0), jsx(PageNumbersContainer, __assign({ "data-testid": "PaginatorBlogPageNumbersContainer", theme: theme }, { children: new Array(to - from + 1).fill(0).map(function (_, i) { return (jsx(PageNumber, __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), jsx(IconContainer, __assign({ onClick: function () { return handlePageChange(page + 1); }, "data-testid": "PaginatorBlogRightChevron" }, { children: jsx(Icon.Arrows.ChevronRight, { fill: page === to ? theme.colors.shades['white'].color : theme.colors.shades['700'].color }, void 0) }), void 0)] }), void 0));
+};
+
+export { PaginatorBlog };
+//# sourceMappingURL=PaginatorBlog.js.map

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

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

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

@@ -0,0 +1,30 @@
+import { __makeTemplateObject } from '../../../node_modules/tslib/tslib.es6.js';
+import newStyled from '../../../node_modules/@emotion/styled/dist/emotion-styled.esm.js';
+import { mediaQueries } from '../../utils/media.js';
+
+var Container = newStyled.div(templateObject_1 || (templateObject_1 = __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 = newStyled.div(templateObject_2 || (templateObject_2 = __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 = newStyled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  ", ";\n"], ["\n  display: flex;\n  ", ";\n"])), mediaQueries({
+    margin: ['0 0.75rem', '0 1.25rem'],
+}));
+var PageNumber = newStyled.span(templateObject_4 || (templateObject_4 = __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';
+}, 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;
+
+export { Container, IconContainer, PageNumber, PageNumbersContainer };
+//# sourceMappingURL=styles.js.map

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

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

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

@@ -0,0 +1,28 @@
+import { __makeTemplateObject, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import { jsx } from 'react/jsx-runtime';
+import { createElement } from 'react';
+import newStyled from '../../../node_modules/@emotion/styled/dist/emotion-styled.esm.js';
+import { useTheme } from '../../core/theme/Theme.js';
+
+var Container = newStyled.div(templateObject_1 || (templateObject_1 = __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 = useTheme();
+    return (jsx(Container, __assign({ width: width, height: height, borderColor: theme.colors.shades['100'].color, isClickable: Boolean(onClick), onClick: onClick, "data-testid": "payment-method-container" }, { children: createElement(Icon) }), void 0));
+};
+var templateObject_1;
+
+export { Container, PaymentMethod };
+//# sourceMappingURL=PaymentMethod.js.map

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

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

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

@@ -0,0 +1,77 @@
+import { __makeTemplateObject, __assign } from '../../../../node_modules/tslib/tslib.es6.js';
+import { jsx } from 'react/jsx-runtime';
+import newStyled from '../../../../node_modules/@emotion/styled/dist/emotion-styled.esm.js';
+import { ComponentSize } from '../../../types/enums.js';
+import { useTheme } from '../../../core/theme/Theme.js';
+
+var getStylesBySize = function (size) {
+    switch (size) {
+        case ComponentSize.Large:
+            return {
+                borderRadius: '0.375rem',
+                padding: '0 0.75rem',
+                fontSize: '0.875rem',
+                lineHeight: '1.125rem',
+                height: '1.75rem',
+            };
+        case ComponentSize.Medium:
+            return {
+                borderRadius: '0.25rem',
+                padding: '0 0.5rem',
+                fontSize: '0.75rem',
+                lineHeight: '1rem',
+                height: '1.375rem',
+            };
+        case ComponentSize.Small:
+            return {
+                borderRadius: '0.25rem',
+                padding: '0',
+                fontSize: '0.625rem',
+                lineHeight: '0.75rem',
+                height: '2rem',
+            };
+    }
+};
+var Container = newStyled.div(templateObject_1 || (templateObject_1 = __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 === 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 = newStyled.h3(templateObject_2 || (templateObject_2 = __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 ? ComponentSize.Medium : _e, style = _a.style;
+    var theme = useTheme();
+    return (jsx(Container, __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: jsx(H3, __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;
+
+export { ClubOfferTag };
+//# sourceMappingURL=ClubOfferTag.js.map

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

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

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

@@ -0,0 +1,78 @@
+import { __makeTemplateObject, __assign } from '../../../../node_modules/tslib/tslib.es6.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import newStyled from '../../../../node_modules/@emotion/styled/dist/emotion-styled.esm.js';
+import { ComponentSize } from '../../../types/enums.js';
+import { useTheme } from '../../../core/theme/Theme.js';
+
+var getStylesBySize = function (size) {
+    switch (size) {
+        case ComponentSize.Large:
+            return {
+                borderRadius: '0.375rem',
+                padding: '0 0.75rem',
+                fontSize: '0.875rem',
+                lineHeight: '1.125rem',
+                height: '1.75rem',
+            };
+        case ComponentSize.Medium:
+            return {
+                borderRadius: '0.25rem',
+                padding: '0 0.5rem',
+                fontSize: '0.75rem',
+                lineHeight: '1rem',
+                height: '1.375rem',
+            };
+        case ComponentSize.Small:
+            return {
+                borderRadius: '0.25rem',
+                padding: '0',
+                fontSize: '0.625rem',
+                lineHeight: '0.75rem',
+                height: '2rem',
+            };
+    }
+};
+var Container = newStyled.div(templateObject_1 || (templateObject_1 = __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 === 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 = newStyled.h3(templateObject_2 || (templateObject_2 = __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 = newStyled(H3)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: none;\n  margin-right: 0.25rem;\n"], ["\n  display: none;\n  margin-right: 0.25rem;\n"])));
+var DiscountTag = function (_a) {
+    var discount = _a.discount, offText = _a.offText, disabled = _a.disabled, _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#fff' : _b, _c = _a.borderColor, borderColor = _c === void 0 ? 'transparent' : _c, _d = _a.textColor, textColor = _d === void 0 ? '#fff' : _d, _e = _a.size, size = _e === void 0 ? ComponentSize.Medium : _e, style = _a.style;
+    var theme = useTheme();
+    return (jsxs(Container, __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: [jsx(Now, __assign({ "data-testid": "vwo-discount-now", textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size, style: style }, { children: "Now:" }), void 0), jsxs(H3, __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;
+
+export { DiscountTag };
+//# sourceMappingURL=DiscountTag.js.map

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

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

package/build/index.esm.js/src/components/pricing/price/PriceLabel.js

@@ -0,0 +1,92 @@
+import { __makeTemplateObject, __assign } from '../../../../node_modules/tslib/tslib.es6.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import newStyled from '../../../../node_modules/@emotion/styled/dist/emotion-styled.esm.js';
+import { DiscountTag } from '../discount/DiscountTag.js';
+import { ComponentSize } from '../../../types/enums.js';
+import { useTheme } from '../../../core/theme/Theme.js';
+
+var getStylesBySize = function (size) {
+    switch (size) {
+        case ComponentSize.Large:
+            return {
+                fontSize: '1.5rem',
+                finalPricefontSize: '36px',
+                finalPricefontSizeSmall: '18px',
+                margin: '0 0 0 0.75rem',
+                lineHeight: '2rem',
+            };
+        case ComponentSize.Medium:
+            return {
+                fontSize: '1.125rem',
+                finalPricefontSize: '32px',
+                finalPricefontSizeSmall: '16px',
+                margin: '0 0 0 0.5rem',
+                lineHeight: '1.25rem',
+            };
+        case ComponentSize.Small:
+            return {
+                fontSize: '14px',
+                finalPricefontSize: '20px',
+                finalPricefontSizeSmall: '12px',
+                margin: '0 0 0 0.5rem',
+                lineHeight: '1.25rem',
+            };
+    }
+};
+var Container = newStyled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n"], ["\n  display: flex;\n  align-items: center;\n"])));
+var Price = newStyled.p(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  font-weight: ", ";\n  font-size: ", ";\n  line-height: ", ";\n  color: ", ";\n  text-decoration: ", ";\n  margin: ", ";\n  margin-top: ", ";\n"], ["\n  font-weight: ", ";\n  font-size: ", ";\n  line-height: ", ";\n  color: ", ";\n  text-decoration: ", ";\n  margin: ", ";\n  margin-top: ", ";\n"])), function (_a) {
+    var weight = _a.weight;
+    return (weight ? weight : '400');
+}, function (_a) {
+    var _b, _c, _d;
+    var size = _a.size, finalPriceStyled = _a.finalPriceStyled, finalPriceStyledSmall = _a.finalPriceStyledSmall;
+    return finalPriceStyled || finalPriceStyledSmall
+        ? finalPriceStyledSmall
+            ? (_b = getStylesBySize(size)) === null || _b === void 0 ? void 0 : _b.finalPricefontSizeSmall
+            : (_c = getStylesBySize(size)) === null || _c === void 0 ? void 0 : _c.finalPricefontSize
+        : (_d = getStylesBySize(size)) === null || _d === void 0 ? void 0 : _d.fontSize;
+}, function (_a) {
+    var _b;
+    var size = _a.size;
+    return (_b = getStylesBySize(size)) === null || _b === void 0 ? void 0 : _b.lineHeight;
+}, function (_a) {
+    var color = _a.color;
+    return color;
+}, function (_a) {
+    var underlined = _a.underlined;
+    return (underlined ? 'line-through' : 'none');
+}, function (_a) {
+    var _b;
+    var margin = _a.margin, size = _a.size;
+    return (margin ? (_b = getStylesBySize(size)) === null || _b === void 0 ? void 0 : _b.margin : '0');
+}, function (_a) {
+    var finalPriceStyledSmall = _a.finalPriceStyledSmall, size = _a.size;
+    return finalPriceStyledSmall ? (size === 'large' ? '-10px' : '-7px') : '0';
+});
+var TagContainer = newStyled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  margin: ", ";\n  display: flex;\n  align-items: center;\n"], ["\n  margin: ", ";\n  display: flex;\n  align-items: center;\n"])), function (_a) {
+    var _b;
+    var size = _a.size;
+    return (_b = getStylesBySize(size)) === null || _b === void 0 ? void 0 : _b.margin;
+});
+function getTestId() {
+    var args = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+        args[_i] = arguments[_i];
+    }
+    return args.filter(Boolean).join('-');
+}
+var PriceLabel = function (_a) {
+    var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, discount = _a.discount, color = _a.color, testId = _a.testId, _b = _a.finalPriceStyled, finalPriceStyled = _b === void 0 ? false : _b, finalPriceStyle = _a.finalPriceStyle, _c = _a.originalPriceStyled, originalPriceStyled = _c === void 0 ? false : _c, _d = _a.originalPriceUnderlined, originalPriceUnderlined = _d === void 0 ? true : _d, _e = _a.size, size = _e === void 0 ? ComponentSize.Medium : _e;
+    var theme = useTheme();
+    var priceCommonProps = {
+        size: finalPriceStyled ? ComponentSize.Small : size,
+        color: color || theme.colors.pallete.secondary.color,
+        weight: 700,
+    };
+    var OriginalPrice = function () { return (jsx(Price, __assign({ size: originalPriceStyled ? size : ComponentSize.Small, color: theme.component.pricing.priceLabel.price.originalPriceColor, margin: true, underlined: originalPriceUnderlined, "data-testid": getTestId(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
+    return (jsxs(Container, { children: [jsx(Price, __assign({ margin: true, "data-testid": getTestId(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle }, { children: finalPrice }), void 0), !!originalPrice && jsx(OriginalPrice, {}, void 0), discount && (jsx(TagContainer, __assign({ size: size }, { children: jsx(DiscountTag, __assign({}, discount, { size: size }), void 0) }), void 0))] }, void 0));
+};
+var templateObject_1, templateObject_2, templateObject_3;
+
+export { Container, Price, PriceLabel, TagContainer, getStylesBySize, getTestId };
+//# sourceMappingURL=PriceLabel.js.map

package/build/index.esm.js/src/components/pricing/price/PriceLabel.js.map

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

package/build/index.esm.js/src/components/pricing/priceLabelV2/PriceLabelV2.js

@@ -0,0 +1,54 @@
+import { __makeTemplateObject, __assign } from '../../../../node_modules/tslib/tslib.es6.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { DiscountTag } from '../discount/DiscountTag.js';
+import { ComponentSize } from '../../../types/enums.js';
+import { useTheme } from '../../../core/theme/Theme.js';
+import { Container, getTestId, Price, TagContainer } from '../price/PriceLabel.js';
+import newStyled from '../../../../node_modules/@emotion/styled/dist/emotion-styled.esm.js';
+import { ClubOfferTag } from '../clubOffer/ClubOfferTag.js';
+
+var FinalPriceStyledContainer = newStyled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
+var PriceLabelV2 = function (_a) {
+    var _b;
+    var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, discount = _a.discount, clubOffer = _a.clubOffer, color = _a.color, testId = _a.testId, _c = _a.originalPriceStyled, originalPriceStyled = _c === void 0 ? false : _c, _d = _a.originalPriceUnderlined, originalPriceUnderlined = _d === void 0 ? true : _d, _e = _a.size, size = _e === void 0 ? ComponentSize.Medium : _e;
+    var theme = useTheme();
+    var isDiffFinalAndOriginalPrice = originalPrice !== finalPrice;
+    var isOriginalPrice = originalPrice && isDiffFinalAndOriginalPrice;
+    var isDiscount = discount && isDiffFinalAndOriginalPrice;
+    var isClubOffer = clubOffer && isDiffFinalAndOriginalPrice;
+    var supportedCurrencies = ['A$', 'CA$', '£'];
+    var currencySymbol = '$';
+    if (typeof finalPrice === 'string') {
+        supportedCurrencies.forEach(function (availableCurrency) {
+            if (finalPrice.includes(availableCurrency)) {
+                currencySymbol = availableCurrency;
+            }
+        });
+    }
+    var finalPriceArray = typeof finalPrice === 'string' &&
+        finalPrice.includes('.') &&
+        finalPrice.includes(currencySymbol)
+        ? finalPrice.split(currencySymbol)[1].split('.')
+        : ['', ''];
+    var priceCommonProps = {
+        size: ComponentSize.Small,
+        color: isClubOffer
+            ? 'var(--colors-pallete-wine-color)'
+            : color || theme.colors.pallete.secondary.color,
+        weight: 700,
+    };
+    var OriginalPrice = function () { return (jsx(Price, __assign({ size: originalPriceStyled ? size : ComponentSize.Small, color: theme.colors.shades['300'].color, margin: true, underlined: originalPriceUnderlined, "data-testid": getTestId(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
+    return (jsxs(Container, { children: [isOriginalPrice && jsx(OriginalPrice, {}, void 0), jsxs(FinalPriceStyledContainer, __assign({ "data-testid": getTestId(testId, 'final-product-price') }, { children: [jsx(Price, __assign({ margin: true, finalPriceStyledSmall: true, style: { fontSize: '14px', marginTop: '-5px' } }, priceCommonProps, { children: currencySymbol }), void 0), jsx(Price, __assign({ finalPriceStyled: true }, priceCommonProps, { children: finalPriceArray[0] ? finalPriceArray[0] : (_b = "".concat(finalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1] }), void 0), jsx(Price, __assign({ finalPriceStyledSmall: true, style: { fontSize: '14px', marginTop: '-6px' } }, priceCommonProps, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }), void 0), isDiscount && (jsx(TagContainer, __assign({ size: ComponentSize.Small }, { children: discount && (jsx(DiscountTag, __assign({}, discount, { size: ComponentSize.Medium, style: { fontSize: '14px', letterSpacing: '-0.05rem' } }), void 0)) }), void 0)), isClubOffer && (jsx(TagContainer, __assign({ size: ComponentSize.Medium }, { children: clubOffer && (jsx(ClubOfferTag, __assign({}, clubOffer, { size: ComponentSize.Small, style: {
+                        borderRadius: '8px',
+                        width: '107px',
+                        height: '28px',
+                        alignItems: 'center',
+                        padding: '3px 8px 3px 8px',
+                        fontSize: '14px',
+                        lineHeight: '22px',
+                    } }), void 0)) }), void 0))] }, void 0));
+};
+var templateObject_1;
+
+export { PriceLabelV2 };
+//# sourceMappingURL=PriceLabelV2.js.map

package/build/index.esm.js/src/components/pricing/priceLabelV2/PriceLabelV2.js.map

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

package/build/index.esm.js/src/components/product/order/item/SimpleOrderItem.js

@@ -0,0 +1,58 @@
+import { __makeTemplateObject, __assign } from '../../../../../node_modules/tslib/tslib.es6.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import newStyled from '../../../../../node_modules/@emotion/styled/dist/emotion-styled.esm.js';
+import '../../../pricing/discount/DiscountTag.js';
+import { PriceLabel } from '../../../pricing/price/PriceLabel.js';
+import '../../../pricing/priceLabelV2/PriceLabelV2.js';
+import '../../../pricing/clubOffer/ClubOfferTag.js';
+import { OfferBanner } from '../../../offer-banner/OfferBanner.js';
+import { mediaQueries } from '../../../../utils/media.js';
+import Image from '../../../shared/image/Image.js';
+import { useTheme } from '../../../../core/theme/Theme.js';
+
+var Container = newStyled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  width: auto;\n  padding: 10px 0;\n"], ["\n  display: flex;\n  flex-direction: row;\n  width: auto;\n  padding: 10px 0;\n"])));
+var IMAGE_WIDTH = '63px';
+var ImageContainer = newStyled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: relative;\n  width: ", ";\n  img {\n    display: block;\n  }\n"], ["\n  position: relative;\n  width: ", ";\n  img {\n    display: block;\n  }\n"])), IMAGE_WIDTH);
+var DescriptionContainer = newStyled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  ", ";\n  width: calc(100% - ", ");\n"], ["\n  display: flex;\n  flex-direction: column;\n  ", ";\n  width: calc(100% - ", ");\n"])), mediaQueries({
+    paddingLeft: ['0.938rem', '1.875rem'],
+}), IMAGE_WIDTH);
+var Title = newStyled.h2(function (_a) {
+    var color = _a.color;
+    return ({
+        fontWeight: 600,
+        fontSize: '1rem',
+        lineHeight: '1.5rem',
+        color: color,
+        margin: '0.063rem 0',
+    });
+});
+var Subtitle = newStyled.h3(function (_a) {
+    var color = _a.color;
+    return ({
+        fontWeight: 'normal',
+        fontSize: '0.75rem',
+        lineHeight: '1rem',
+        color: color,
+        margin: '0.063rem 0',
+    });
+});
+var PriceContainer = newStyled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  ", ";\n  height: 100%;\n  align-items: end;\n  margin-top: 0.219rem;\n"], ["\n  display: flex;\n  ", ";\n  height: 100%;\n  align-items: end;\n  margin-top: 0.219rem;\n"])), function (_a) {
+    var withTag = _a.withTag; _a.theme;
+    return withTag
+        ? mediaQueries({
+            justifyContent: ['space-between', 'end'],
+            flexDirection: ['row', 'column'],
+        })
+        : 'justify-content: end';
+});
+var Quantity = newStyled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  position: absolute;\n  right: 0;\n  top: 0;\n  transform: translate(30%, -30%);\n  border-radius: 50%;\n  width: 1rem;\n  height: 1rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--colors-shades-300-color);\n  color: var(--colors-shades-white-color);\n  font-size: 0.75rem;\n  font-weight: 600;\n  line-height: 24px;\n"], ["\n  position: absolute;\n  right: 0;\n  top: 0;\n  transform: translate(30%, -30%);\n  border-radius: 50%;\n  width: 1rem;\n  height: 1rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--colors-shades-300-color);\n  color: var(--colors-shades-white-color);\n  font-size: 0.75rem;\n  font-weight: 600;\n  line-height: 24px;\n"])));
+var StyledSpan = newStyled.span(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: block;\n  transform: translateY(1px);\n"], ["\n  display: block;\n  transform: translateY(1px);\n"])));
+var SimpleOrderItem = function (_a) {
+    var title = _a.title, className = _a.className, subtitle = _a.subtitle, image = _a.image, price = _a.price, tag = _a.tag, quantity = _a.quantity, finalPriceStyle = _a.finalPriceStyle;
+    var theme = useTheme();
+    return (jsxs(Container, __assign({ className: className }, { children: [jsxs(ImageContainer, { children: [jsx(Image, { src: image.src, alt: image.alt, width: "4.063rem", height: "5.375rem", objectFit: "cover", objectPosition: "center" }, void 0), quantity ? (jsx(Quantity, __assign({ "data-testid": "order-item-quantity" }, { children: jsx(StyledSpan, { children: quantity }, void 0) }), void 0)) : null] }, void 0), jsxs(DescriptionContainer, __assign({ "data-testid": "order-item-description-container", theme: theme }, { children: [jsx(Title, __assign({ color: theme.colors.shades['700'].color, "data-testid": "product-title" }, { children: title }), void 0), jsx(Subtitle, __assign({ color: theme.colors.shades['700'].color, "data-testid": "product-variant-title" }, { children: subtitle }), void 0), jsxs(PriceContainer, __assign({ "data-testid": "order-item-price-container", withTag: !!tag, theme: theme }, { children: [tag && (jsx(OfferBanner, { discountAppliedText: tag === null || tag === void 0 ? void 0 : tag.text, backgroundColor: tag === null || tag === void 0 ? void 0 : tag.backgroundColor }, void 0)), jsx(PriceLabel, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, color: price.color || theme.colors.shades['700'].color, size: theme.component.pricing.priceLabel.price.size, finalPriceStyle: finalPriceStyle, originalPriceStyled: true }, void 0)] }), void 0)] }), void 0)] }), void 0));
+};
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
+
+export { SimpleOrderItem as default };
+//# sourceMappingURL=SimpleOrderItem.js.map

package/build/index.esm.js/src/components/product/order/item/SimpleOrderItem.js.map

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