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

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

@@ -0,0 +1,40 @@
+import { __makeTemplateObject, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React__default from 'react';
+import newStyled from '../../../node_modules/@emotion/styled/dist/emotion-styled.esm.js';
+import { useTheme } from '../../core/theme/Theme.js';
+import { Icon } from '../icons/index.js';
+import { Text } from '../text/Text.js';
+import { Timer } from '../timer/Timer.js';
+
+var TimerContainer = newStyled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  justify-content: ", ";\n  align-items: center;\n  background-color: ", ";\n  width: 100%;\n  padding: 5px 24px;\n  height: 40px;\n  line-height: 14px;\n  border-radius: 0px;\n\n  & [data-testid='HurryUpText'] {\n    font-size: 12px !important;\n    line-height: 12px !important;\n  }\n\n  & [data-testid='Time'] {\n    font-size: 14px !important;\n    line-height: 14px !important;\n  }\n\n  @media (min-width: 330px) {\n    & [data-testid='HurryUpText'] {\n      font-size: 14px !important;\n      line-height: 14px !important;\n    }\n\n    & [data-testid='Time'] {\n      font-size: 16px !important;\n      line-height: 16px !important;\n    }\n  }\n\n  @media (min-width: 767px) {\n    border-radius: 8px;\n  }\n"], ["\n  display: flex;\n  flex-direction: row;\n  justify-content: ", ";\n  align-items: center;\n  background-color: ", ";\n  width: 100%;\n  padding: 5px 24px;\n  height: 40px;\n  line-height: 14px;\n  border-radius: 0px;\n\n  & [data-testid='HurryUpText'] {\n    font-size: 12px !important;\n    line-height: 12px !important;\n  }\n\n  & [data-testid='Time'] {\n    font-size: 14px !important;\n    line-height: 14px !important;\n  }\n\n  @media (min-width: 330px) {\n    & [data-testid='HurryUpText'] {\n      font-size: 14px !important;\n      line-height: 14px !important;\n    }\n\n    & [data-testid='Time'] {\n      font-size: 16px !important;\n      line-height: 16px !important;\n    }\n  }\n\n  @media (min-width: 767px) {\n    border-radius: 8px;\n  }\n"])), function (_a) {
+    var textPosition = _a.textPosition;
+    return textPosition;
+}, function (_a) {
+    var backgroundColor = _a.backgroundColor;
+    return backgroundColor;
+});
+var HurryUp = function (_a) {
+    var hurryUpText = _a.hurryUpText, backgroundColor = _a.backgroundColor, _b = _a.iconSize, iconSize = _b === void 0 ? 1.5 : _b, _c = _a.textPosition, textPosition = _c === void 0 ? 'center' : _c, _d = _a.showTimer, showTimer = _d === void 0 ? false : _d;
+    var theme = useTheme();
+    var _e = React__default.useMemo(function () {
+        var tomorrowDate = new Date();
+        tomorrowDate.setDate(tomorrowDate.getDate() + 1);
+        tomorrowDate.setHours(0, 0, 0, 0);
+        var totalSeconds = (tomorrowDate.getTime() - new Date().getTime()) / 1000;
+        var hours = Math.floor(totalSeconds / 3600);
+        var restOfHour = Math.floor(totalSeconds % 3600);
+        var minutes = Math.floor(restOfHour / 60);
+        var seconds = Math.floor(totalSeconds % 60);
+        return {
+            hours: hours,
+            minutes: minutes,
+            seconds: seconds,
+        };
+    }, []), hours = _e.hours, minutes = _e.minutes, seconds = _e.seconds;
+    return (jsxs(TimerContainer, __assign({ backgroundColor: backgroundColor || theme.component.card.backgroundColor, textPosition: textPosition, "data-testid": "HurryUp" }, { children: [jsx(Icon.PDP.Stopwatch, { width: iconSize, height: iconSize, fill: theme.colors.pallete.secondary.color }, void 0), "\u00A0", jsx(Text, __assign({ testId: "HurryUpText", variant: "body", size: "small", weight: "demi" }, { children: hurryUpText }), void 0), "\u00A0", showTimer && jsx(Timer, { hours: hours, minutes: minutes, seconds: seconds, onTimeUp: function () { } }, void 0)] }), void 0));
+};
+var templateObject_1;
+
+export { HurryUp };
+//# sourceMappingURL=HurryUp.js.map

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

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

package/build/index.esm.js/src/components/Icon-wrapper/IconWrapper.js

@@ -0,0 +1,10 @@
+import { __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var IconWrapper = function (_a) {
+    var height = _a.height, _b = _a.width, width = _b === void 0 ? 1 : _b, title = _a.title, viewBoxX = _a.viewBoxX, viewBoxY = _a.viewBoxY, children = _a.children, testId = _a.testId, fill = _a.fill;
+    return (jsxs("svg", __assign({ style: { display: 'inline-block', verticalAlign: 'middle' }, width: width ? "".concat(width, "rem") : '100%', height: height ? "".concat(height, "rem") : width ? "".concat(width, "rem") : '100%', viewBox: "0 0 ".concat(viewBoxX, " ").concat(viewBoxY), xmlns: "http://www.w3.org/2000/svg", "data-testid": testId ? testId : 'IconWrapper', fill: fill }, { children: [jsx("title", { children: "".concat(title, " icon") }, void 0), children] }), void 0));
+};
+
+export { IconWrapper };
+//# sourceMappingURL=IconWrapper.js.map

package/build/index.esm.js/src/components/Icon-wrapper/IconWrapper.js.map

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

package/build/index.esm.js/src/components/PackSelectorV2/PackSelectoV2.js

@@ -0,0 +1,41 @@
+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 { formatPrice } from '../../utils/formatPrice/formatPrice.js';
+import { Text } from '../text/Text.js';
+import { Icon } from '../icons/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: 16px 7px 7px;\n  text-align: center;\n  background-color: var(--background);\n  border-radius: var(--component-packSelector-borderRadius);\n\n  &[aria-checked='true'] {\n    --color: var(--component-packSelector-selectedColor);\n\n    border-color: var(--color);\n\n    & * {\n      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: 16px 7px 7px;\n  text-align: center;\n  background-color: var(--background);\n  border-radius: var(--component-packSelector-borderRadius);\n\n  &[aria-checked='true'] {\n    --color: var(--component-packSelector-selectedColor);\n\n    border-color: var(--color);\n\n    & * {\n      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 DiscountContainer = newStyled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row,\n  align-items: center;\n  justify-content: center;\n  flex-wrap: wrap;\n"], ["\n  display: flex;\n  flex-direction: row,\n  align-items: center;\n  justify-content: center;\n  flex-wrap: wrap;\n"])));
+var PackSelectorV2 = 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); _b[0]; var 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: "bold" }, { 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(DiscountContainer, { children: [jsx(Text, __assign({ variant: "label", style: { fontWeight: 600, lineHeight: '24px', marginRight: '4px' }, size: "small" }, { children: formatPrice(pack.meta.price, {
+                            locale: 'en-US',
+                            currency: currencyCode || 'USD',
+                        }) }), void 0), pack.meta.quantity > 1 ? (jsxs(Text, __assign({ variant: "body", style: { fontWeight: 600 }, size: "small" }, { children: ['(', formatPrice(pack.meta.price / pack.meta.quantity, {
+                                locale: 'en-US',
+                                currency: currencyCode || 'USD',
+                            }), ' ', "each", ')'] }), void 0)) : null] }, void 0)] }), void 0));
+};
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
+
+export { PackSelectorV2 as default };
+//# sourceMappingURL=PackSelectoV2.js.map

package/build/index.esm.js/src/components/PackSelectorV2/PackSelectoV2.js.map

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

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

@@ -0,0 +1,36 @@
+import { __makeTemplateObject } 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 { useTheme } from '../../core/theme/Theme.js';
+
+var Container = newStyled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  @keyframes shimmer {\n    100% {\n      transform: translateX(100%);\n    }\n  }\n\n  display: inline-block;\n  height: ", ";\n  width: ", ";\n  position: relative;\n  overflow: hidden;\n  background-color: ", ";\n  border-radius: ", ";\n  box-sizing: border-box;\n\n  ::after {\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    transform: translateX(-100%);\n    background-image: linear-gradient(\n      90deg,\n      ", ",\n      ", ",\n      ", "\n    );\n    animation: shimmer 2s infinite;\n    content: '';\n    box-sizing: border-box;\n  }\n"], ["\n  @keyframes shimmer {\n    100% {\n      transform: translateX(100%);\n    }\n  }\n\n  display: inline-block;\n  height: ", ";\n  width: ", ";\n  position: relative;\n  overflow: hidden;\n  background-color: ", ";\n  border-radius: ", ";\n  box-sizing: border-box;\n\n  ::after {\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    transform: translateX(-100%);\n    background-image: linear-gradient(\n      90deg,\n      ", ",\n      ", ",\n      ", "\n    );\n    animation: shimmer 2s infinite;\n    content: '';\n    box-sizing: border-box;\n  }\n"])), function (_a) {
+    var height = _a.height;
+    return (height ? height : '1.5em');
+}, function (_a) {
+    var width = _a.width;
+    return (width ? width : '100%');
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.colors.background.disabled;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.radius.regular;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.colors.shades['10'].color;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.colors.background.disabled;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.colors.shades['10'].color;
+});
+var SkeletonBox = function (_a) {
+    var width = _a.width, height = _a.height;
+    var theme = useTheme();
+    return jsx(Container, { "data-testid": "skeleton-container", width: width, height: height, theme: theme }, void 0);
+};
+var templateObject_1;
+
+export { SkeletonBox as default };
+//# sourceMappingURL=SkeletonBox.js.map

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

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

package/build/index.esm.js/src/components/absorbency-level/AbsorbencyLevel.js

@@ -0,0 +1,17 @@
+import { __makeTemplateObject } from '../../../node_modules/tslib/tslib.es6.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { DropList } from './drop-list/DropList.js';
+import newStyled from '../../../node_modules/@emotion/styled/dist/emotion-styled.esm.js';
+
+var DROPS_TOTAL = 5;
+var Container = newStyled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 32px;\n  display: flex;\n"], ["\n  height: 32px;\n  display: flex;\n"])));
+var Title = newStyled.p(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: 32px;\n  font-size: 14px;\n  line-height: 22px;\n  margin: 0;\n  display: flex;\n  align-items: center;\n  font-weight: 600;\n  margin-right: 7px;\n"], ["\n  height: 32px;\n  font-size: 14px;\n  line-height: 22px;\n  margin: 0;\n  display: flex;\n  align-items: center;\n  font-weight: 600;\n  margin-right: 7px;\n"])));
+var Description = newStyled.p(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  height: 32px;\n  font-size: 14px;\n  line-height: 22px;\n  margin: 0;\n  display: flex;\n  align-items: center;\n  font-weight: 600;\n  margin-left: 7px;\n"], ["\n  height: 32px;\n  font-size: 14px;\n  line-height: 22px;\n  margin: 0;\n  display: flex;\n  align-items: center;\n  font-weight: 600;\n  margin-left: 7px;\n"])));
+var AbsorbencyLevel = function (_a) {
+    var dropTotal = _a.dropTotal, drops = _a.drops, absorbencyTitle = _a.absorbencyTitle, absorbencyDescription = _a.absorbencyDescription;
+    return (jsxs(Container, { children: [jsx(Title, { children: absorbencyTitle }, void 0), jsx(DropList, { dropTotal: dropTotal || DROPS_TOTAL, drops: drops }, void 0), jsx(Description, { children: absorbencyDescription }, void 0)] }, void 0));
+};
+var templateObject_1, templateObject_2, templateObject_3;
+
+export { AbsorbencyLevel };
+//# sourceMappingURL=AbsorbencyLevel.js.map

package/build/index.esm.js/src/components/absorbency-level/AbsorbencyLevel.js.map

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

package/build/index.esm.js/src/components/absorbency-level/drop-list/DropList.js

@@ -0,0 +1,17 @@
+import { __makeTemplateObject, __spreadArray, __assign } from '../../../../node_modules/tslib/tslib.es6.js';
+import { jsx } from 'react/jsx-runtime';
+import { Icon } from '../../icons/index.js';
+import newStyled from '../../../../node_modules/@emotion/styled/dist/emotion-styled.esm.js';
+
+var Container = newStyled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 32px;\n  display: flex;\n  align-items: center;\n"], ["\n  height: 32px;\n  display: flex;\n  align-items: center;\n"])));
+var DropContainer = newStyled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
+var DropList = function (_a) {
+    var dropTotal = _a.dropTotal, drops = _a.drops;
+    return (jsx(Container, { children: __spreadArray([], new Array(dropTotal), true).map(function (_, index) {
+            return (jsx(DropContainer, __assign({ "data-testid": "star-container" }, { children: index < Math.floor(drops) ? (jsx(Icon.PDP.Drop, { width: 0.875, height: 0.875 }, void 0)) : (jsx(Icon.PDP.DropEmpty, { width: 0.875, height: 0.875 }, void 0)) }), index));
+        }) }, void 0));
+};
+var templateObject_1, templateObject_2;
+
+export { DropList };
+//# sourceMappingURL=DropList.js.map

package/build/index.esm.js/src/components/absorbency-level/drop-list/DropList.js.map

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

package/build/index.esm.js/src/components/accordion/Accordion.js

@@ -0,0 +1,26 @@
+import { __makeTemplateObject, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { Disclosure as Ye } from '../../../node_modules/@headlessui/react/dist/headlessui.esm.js';
+import newStyled from '../../../node_modules/@emotion/styled/dist/emotion-styled.esm.js';
+import { AccordionStyles, AccordionSummaryStyles, AccordionDetailsStyles } from './styles.js';
+import { useTheme } from '../../core/theme/Theme.js';
+
+var StyledDisclosure = newStyled(Ye)(AccordionStyles.baseStyles, function (props) { return [AccordionStyles[props.variant](props.theme, props.disabled)]; });
+var StyledButton = newStyled(Ye.Button)(AccordionSummaryStyles.baseStyles, function (props) { return [AccordionSummaryStyles[props.variant](props.theme, props.disabled)]; }, function (props) { return [AccordionSummaryStyles.title(props.titlecolor)]; });
+var StyledPanel = newStyled(Ye.Panel)(AccordionDetailsStyles.baseStyles, function (props) { return [AccordionDetailsStyles[props.variant](props.theme)]; });
+var StyledContent = newStyled.button(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  appearance: none;\n  padding: 0;\n  margin: 0;\n  border: none;\n  background: none;\n  font-size: inherit;\n  line-height: inherit;\n  color: inherit;\n  cursor: auto;\n  user-select: text;\n  writing-mode: unset;\n  font-family: inherit;\n"], ["\n  appearance: none;\n  padding: 0;\n  margin: 0;\n  border: none;\n  background: none;\n  font-size: inherit;\n  line-height: inherit;\n  color: inherit;\n  cursor: auto;\n  user-select: text;\n  writing-mode: unset;\n  font-family: inherit;\n"])));
+var Accordion = function (_a) {
+    var header = _a.header, headerOnOpen = _a.headerOnOpen, content = _a.content, defaultOpen = _a.defaultOpen, _b = _a.forceOpenHandler, forceOpenHandler = _b === void 0 ? false : _b, _c = _a.forceOpenValue, forceOpenValue = _c === void 0 ? false : _c, titleColor = _a.titleColor, variant = _a.variant, _d = _a.disabled, disabled = _d === void 0 ? false : _d, _e = _a.innerHTML, innerHTML = _e === void 0 ? false : _e, openIcon = _a.openIcon, closeIcon = _a.closeIcon, onClick = _a.onClick;
+    var theme = useTheme();
+    return (jsx(StyledDisclosure, __assign({ theme: theme, as: "div", defaultOpen: defaultOpen, variant: variant, disabled: disabled, onClick: onClick }, { children: function (_a) {
+            var open = _a.open;
+            var openWithForce = forceOpenHandler ? forceOpenValue : open;
+            var ControlIcon = disabled ? openIcon : openWithForce ? closeIcon : openIcon;
+            var showPanel = openWithForce && !disabled;
+            return (jsxs(Fragment, { children: [jsxs(StyledButton, __assign({ theme: theme, variant: variant, disabled: disabled, titlecolor: titleColor }, { children: [showPanel && headerOnOpen ? headerOnOpen : header, jsx(ControlIcon, { title: openWithForce ? 'close icon' : 'open icon', height: theme.component.accordion.variant[variant].icon.height, width: theme.component.accordion.variant[variant].icon.width, fill: theme.component.accordion.variant[variant].icon.color }, void 0)] }), void 0), showPanel && (jsx(StyledContent, __assign({ onClick: function (e) { return e.stopPropagation(); } }, { children: !innerHTML ? (jsx(StyledPanel, __assign({ static: true, variant: variant, theme: theme }, { children: content }), void 0)) : (jsx("div", { dangerouslySetInnerHTML: { __html: content } }, void 0)) }), void 0))] }, void 0));
+        } }), void 0));
+};
+var templateObject_1;
+
+export { Accordion as default };
+//# sourceMappingURL=Accordion.js.map

package/build/index.esm.js/src/components/accordion/Accordion.js.map

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

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

@@ -0,0 +1,65 @@
+import { __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import { css } from '../../../node_modules/@emotion/react/dist/emotion-react.esm.js';
+
+/* base styles & variants */
+var AccordionStyles = {
+    baseStyles: css({
+        background: 'transparent',
+        width: 'auto',
+    }),
+    simple: function (theme, disabled) {
+        return css(__assign(__assign({}, theme.component.accordion.variant.simple.container), { borderColor: disabled
+                ? theme.colors.border.disabled
+                : theme.component.accordion.variant.simple.container.borderColor }));
+    },
+    box: function (theme, disabled) {
+        return css(__assign(__assign({}, theme.component.accordion.variant.box.container), { borderColor: disabled
+                ? theme.colors.border.disabled
+                : theme.component.accordion.variant.box.container.borderColor }));
+    },
+};
+/* base styles & size variants */
+var AccordionSummaryStyles = {
+    baseStyles: css({
+        background: 'transparent',
+        width: '100%',
+        border: 'none',
+        display: 'flex',
+        cursor: 'pointer',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        padding: '0',
+    }),
+    simple: function (theme, disabled) {
+        return css(__assign(__assign({}, theme.component.accordion.variant.simple.summary), { color: disabled
+                ? theme.colors.text.disabled
+                : theme.component.accordion.variant.simple.summary.color, fontFamily: theme.fonts.config[0].family }));
+    },
+    box: function (theme, disabled) {
+        return css(__assign(__assign({}, theme.component.accordion.variant.box.summary), { color: disabled
+                ? theme.colors.text.disabled
+                : theme.component.accordion.variant.box.summary.color, fontFamily: theme.fonts.config[0].family }));
+    },
+    title: function (titleColor) {
+        return css({
+            color: titleColor ? titleColor : '',
+        });
+    },
+};
+/* base styles & size variants */
+var AccordionDetailsStyles = {
+    baseStyles: css({
+        width: '100%',
+        background: 'transparent',
+        border: 'none',
+    }),
+    simple: function (theme) {
+        return css(__assign({}, theme.component.accordion.variant.simple.details));
+    },
+    box: function (theme) {
+        return css(__assign({}, theme.component.accordion.variant.box.details));
+    },
+};
+
+export { AccordionDetailsStyles, AccordionStyles, AccordionSummaryStyles };
+//# sourceMappingURL=styles.js.map

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

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

package/build/index.esm.js/src/components/accordion-options/AccordionOptions.js

@@ -0,0 +1,34 @@
+import { __makeTemplateObject, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import { jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import newStyled from '../../../node_modules/@emotion/styled/dist/emotion-styled.esm.js';
+import Accordion from '../accordion/Accordion.js';
+
+var Container = newStyled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n"], ["\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n"])));
+var AccordionOptions = function (_a) {
+    var titleColor = _a.titleColor, accordions = _a.accordions;
+    var _b = useState({
+        index: -1,
+        open: false,
+    }), openAccordionIndex = _b[0], setOpenAccordionIndex = _b[1];
+    var getForceOpen = function (index) {
+        if (openAccordionIndex.index === index) {
+            return openAccordionIndex.open;
+        }
+        return false;
+    };
+    return (jsx(Container, { children: accordions.map(function (accordion, index) {
+            var forceOpenValue = getForceOpen(index);
+            var accordionTitleColor = forceOpenValue && openAccordionIndex.open ? titleColor : undefined;
+            return (jsx(Accordion, __assign({ onClick: function () {
+                    return setOpenAccordionIndex(function (prevState) { return ({
+                        index: index,
+                        open: prevState.index === index ? !prevState.open : true,
+                    }); });
+                } }, accordion, { forceOpenHandler: true, forceOpenValue: getForceOpen(index), titleColor: accordionTitleColor }), "accordion-".concat(index)));
+        }) }, void 0));
+};
+var templateObject_1;
+
+export { AccordionOptions as default };
+//# sourceMappingURL=AccordionOptions.js.map

package/build/index.esm.js/src/components/accordion-options/AccordionOptions.js.map

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

package/build/index.esm.js/src/components/before-after/BeforeAfter.js

@@ -0,0 +1,24 @@
+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 { getStylesBySize } from './styles.js';
+import { useTheme } from '../../core/theme/Theme.js';
+import { ComponentSize } from '../../types/enums.js';
+import Image from '../shared/image/Image.js';
+
+var Container = newStyled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  row-gap: 15px;\n  background: var(--colors-shades-white-color);\n  border: 1px solid var(--colors-shades-50-color);\n  box-sizing: border-box;\n  border-radius: 10px;\n  max-width: ", ";\n  width: 100%;\n  height: 100%;\n  padding: ", ";\n  flex-wrap: wrap;\n\n  @media (max-width: 768px) {\n    row-gap: 12px;\n    max-width: ", ";\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n  row-gap: 15px;\n  background: var(--colors-shades-white-color);\n  border: 1px solid var(--colors-shades-50-color);\n  box-sizing: border-box;\n  border-radius: 10px;\n  max-width: ", ";\n  width: 100%;\n  height: 100%;\n  padding: ", ";\n  flex-wrap: wrap;\n\n  @media (max-width: 768px) {\n    row-gap: 12px;\n    max-width: ", ";\n  }\n"])), function (props) { return props.styles.imageContainerMaxWidth; }, function (props) { return props.styles.imageContainerPadding; }, function (props) { return props.styles.imageContainerMobileMaxWidth; });
+var ImageContainer = newStyled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  width: 100%;\n  height: 100%;\n  column-gap: 4px;\n"], ["\n  display: flex;\n  flex-direction: row;\n  width: 100%;\n  height: 100%;\n  column-gap: 4px;\n"])));
+var ImageCard = newStyled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  min-height: ", ";\n  min-width: ", ";\n  width: ", ";\n  flex-wrap: wrap;\n\n  @media (max-width: 768px) {\n    min-height: ", ";\n    min-width: ", ";\n    width: ", ";\n  }\n"], ["\n  display: flex;\n  min-height: ", ";\n  min-width: ", ";\n  width: ", ";\n  flex-wrap: wrap;\n\n  @media (max-width: 768px) {\n    min-height: ", ";\n    min-width: ", ";\n    width: ", ";\n  }\n"])), function (props) { return props.styles.imageMinHeight; }, function (props) { return props.styles.imageMinWidth; }, function (props) { return props.styles.imageMinWidth; }, function (props) { return props.styles.mobileImageMinHeight; }, function (props) { return props.styles.mobileImageMinWidth; }, function (props) { return props.styles.mobileImageMinWidth; });
+var UserInfoText = newStyled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  color: ", ";\n  font-size: ", ";\n  text-align: ", ";\n  margin: 0;\n  font-weight: 400;\n  line-height: 130%;\n\n  @media (max-width: 768px) {\n    font-size: ", ";\n  }\n"], ["\n  color: ", ";\n  font-size: ", ";\n  text-align: ", ";\n  margin: 0;\n  font-weight: 400;\n  line-height: 130%;\n\n  @media (max-width: 768px) {\n    font-size: ", ";\n  }\n"])), function (props) { return props.color; }, function (props) { return props.styles.userInfoTextFontSize; }, function (props) { return (props.alignCenter ? 'center' : 'left'); }, function (props) { return props.styles.userInfoTextMobileFontSize; });
+var BeforeAfterCard = function (_a) {
+    var name = _a.name, age = _a.age, months = _a.months, beforeImage = _a.beforeImage, afterImage = _a.afterImage, _b = _a.alignCenter, alignCenter = _b === void 0 ? true : _b, _c = _a.imageBorderRadius, imageBorderRadius = _c === void 0 ? '' : _c, _d = _a.size, size = _d === void 0 ? ComponentSize.Small : _d;
+    var theme = useTheme();
+    var stylesBySize = getStylesBySize(size, theme);
+    var infoText = age ? "".concat(name, ", ").concat(age) : name;
+    infoText = months ? "".concat(infoText, "  |  ").concat(months, " months") : infoText;
+    return (jsxs(Container, __assign({ "data-testid": "Container", styles: stylesBySize }, { children: [jsxs(ImageContainer, __assign({ "data-testid": "ImageContainer" }, { children: [jsx(ImageCard, __assign({ "data-testid": "ImageCard", styles: stylesBySize }, { children: jsx(Image, { borderRadius: imageBorderRadius, src: beforeImage, alt: "before", height: "100%", width: "100%" }, void 0) }), void 0), jsx(ImageCard, __assign({ styles: stylesBySize }, { children: jsx(Image, { borderRadius: imageBorderRadius, src: afterImage, alt: "after", height: "100%", width: "100%" }, void 0) }), void 0)] }), void 0), jsx(UserInfoText, __assign({ "data-testid": "UserInfoText", alignCenter: alignCenter, color: theme.colors.pallete.secondary.color, styles: stylesBySize }, { children: infoText }), void 0)] }), void 0));
+};
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+
+export { BeforeAfterCard };
+//# sourceMappingURL=BeforeAfter.js.map

package/build/index.esm.js/src/components/before-after/BeforeAfter.js.map

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

package/build/index.esm.js/src/components/before-after/styles.js

@@ -0,0 +1,58 @@
+import { ComponentSize } from '../../types/enums.js';
+
+/* base styles & size variants */
+var getStylesBySize = function (size, theme) {
+    switch (size) {
+        case ComponentSize.Large:
+            return {
+                imageMinHeight: theme.component.beforeAfter.size.large.image.minHeight,
+                imageMinWidth: theme.component.beforeAfter.size.large.image.minWidth,
+                mobileImageMinHeight: theme.component.beforeAfter.size.large.image.mobile.minHeight,
+                mobileImageMinWidth: theme.component.beforeAfter.size.large.image.mobile.minWidth,
+                imageContainerMaxWidth: theme.component.beforeAfter.size.large.imageContainer.maxWidth,
+                imageContainerMobileMaxWidth: theme.component.beforeAfter.size.large.imageContainer.mobile.maxWidth,
+                imageContainerPadding: theme.component.beforeAfter.size.large.imageContainer.padding,
+                userInfoTextFontSize: theme.component.beforeAfter.size.large.userInfoText.fontSize,
+                userInfoTextMobileFontSize: theme.component.beforeAfter.size.large.userInfoText.mobile.fontSize,
+            };
+        case ComponentSize.Medium:
+            return {
+                imageMinHeight: theme.component.beforeAfter.size.medium.image.minHeight,
+                imageMinWidth: theme.component.beforeAfter.size.medium.image.minWidth,
+                mobileImageMinHeight: theme.component.beforeAfter.size.medium.image.mobile.minHeight,
+                mobileImageMinWidth: theme.component.beforeAfter.size.medium.image.mobile.minWidth,
+                imageContainerMaxWidth: theme.component.beforeAfter.size.medium.imageContainer.maxWidth,
+                imageContainerMobileMaxWidth: theme.component.beforeAfter.size.medium.imageContainer.mobile.maxWidth,
+                imageContainerPadding: theme.component.beforeAfter.size.medium.imageContainer.padding,
+                userInfoTextFontSize: theme.component.beforeAfter.size.medium.userInfoText.fontSize,
+                userInfoTextMobileFontSize: theme.component.beforeAfter.size.medium.userInfoText.mobile.fontSize,
+            };
+        case ComponentSize.Small:
+            return {
+                imageMinHeight: theme.component.beforeAfter.size.small.image.minHeight,
+                imageMinWidth: theme.component.beforeAfter.size.small.image.minWidth,
+                mobileImageMinHeight: theme.component.beforeAfter.size.small.image.mobile.minHeight,
+                mobileImageMinWidth: theme.component.beforeAfter.size.small.image.mobile.minWidth,
+                imageContainerMaxWidth: theme.component.beforeAfter.size.small.imageContainer.maxWidth,
+                imageContainerMobileMaxWidth: theme.component.beforeAfter.size.small.imageContainer.mobile.maxWidth,
+                imageContainerPadding: theme.component.beforeAfter.size.small.imageContainer.padding,
+                userInfoTextFontSize: theme.component.beforeAfter.size.small.userInfoText.fontSize,
+                userInfoTextMobileFontSize: theme.component.beforeAfter.size.small.userInfoText.mobile.fontSize,
+            };
+        default:
+            return {
+                imageMinHeight: theme.component.beforeAfter.size.small.image.minHeight,
+                imageMinWidth: theme.component.beforeAfter.size.small.image.minWidth,
+                mobileImageMinHeight: theme.component.beforeAfter.size.small.image.mobile.minHeight,
+                mobileImageMinWidth: theme.component.beforeAfter.size.small.image.mobile.minWidth,
+                imageContainerMaxWidth: theme.component.beforeAfter.size.small.imageContainer.maxWidth,
+                imageContainerMobileMaxWidth: theme.component.beforeAfter.size.small.imageContainer.mobile.maxWidth,
+                imageContainerPadding: theme.component.beforeAfter.size.small.imageContainer.padding,
+                userInfoTextFontSize: theme.component.beforeAfter.size.small.userInfoText.fontSize,
+                userInfoTextMobileFontSize: theme.component.beforeAfter.size.small.userInfoText.mobile.fontSize,
+            };
+    }
+};
+
+export { getStylesBySize };
+//# sourceMappingURL=styles.js.map

package/build/index.esm.js/src/components/before-after/styles.js.map

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

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

@@ -0,0 +1,10 @@
+import { Minimalistic } from './minimalistic/Minimalistic.js';
+import { Simple } from './simple/Simple.js';
+
+var Bundle = {
+    Minimalistic: Minimalistic,
+    Simple: Simple,
+};
+
+export { Bundle };
+//# sourceMappingURL=index.js.map

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

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

package/build/index.esm.js/src/components/bundle/minimalistic/Minimalistic.js

@@ -0,0 +1,23 @@
+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 Card from '../../shared/card/Card.js';
+import '../../pricing/discount/DiscountTag.js';
+import { PriceLabel } from '../../pricing/price/PriceLabel.js';
+import '../../pricing/priceLabelV2/PriceLabelV2.js';
+import '../../pricing/clubOffer/ClubOfferTag.js';
+import { ComponentSize } from '../../../types/enums.js';
+import { useTheme } from '../../../core/theme/Theme.js';
+import { Text } from '../../text/Text.js';
+
+var Wrapper = newStyled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding: 12px 58px;\n  @media (max-width: 768px) {\n    padding: 0.625rem 1.5rem;\n  }\n"], ["\n  padding: 12px 58px;\n  @media (max-width: 768px) {\n    padding: 0.625rem 1.5rem;\n  }\n"])));
+var Container = newStyled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n"], ["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n"])));
+var Minimalistic = function (_a) {
+    var _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#FFF6EF' : _b, _c = _a.borderColor, borderColor = _c === void 0 ? '#E7C9B2' : _c, originalPrice = _a.originalPrice, price = _a.price, savingPrice = _a.savingPrice, getMorePayLessText = _a.getMorePayLessText, youAreSavingText = _a.youAreSavingText, getQtyForText = _a.getQtyForText, discount = _a.discount, offText = _a.offText, _d = _a.widthAuto, widthAuto = _d === void 0 ? false : _d, _e = _a.testId, testId = _e === void 0 ? 'minimalistic' : _e;
+    var theme = useTheme();
+    return (jsx(Card, __assign({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxs(Wrapper, { children: [jsxs(Container, __assign({ "data-testid": "".concat(testId, "-section") }, { children: [jsx(Text, __assign({ variant: "body", weight: "demi", size: "small", style: { margin: '0.1rem 0' } }, { children: getMorePayLessText }), void 0), jsx(PriceLabel, { finalPrice: price, originalPrice: originalPrice, color: theme.colors.pallete.secondary.color, size: ComponentSize.Small, testId: testId }, void 0)] }), void 0), jsxs(Container, __assign({ "data-testid": "".concat(testId, "-section-bottom") }, { children: [jsxs(Text, __assign({ variant: "body", weight: "demi", style: { color: '#d3373c', margin: '0.1rem 0' }, size: "small" }, { children: [getQtyForText, " ", discount, "% ", offText.toLocaleUpperCase()] }), void 0), jsxs(Text, __assign({ variant: "body", weight: "regular", size: "small" }, { children: [youAreSavingText, ": ", savingPrice] }), void 0)] }), void 0)] }, void 0) }), void 0));
+};
+var templateObject_1, templateObject_2;
+
+export { Minimalistic };
+//# sourceMappingURL=Minimalistic.js.map

package/build/index.esm.js/src/components/bundle/minimalistic/Minimalistic.js.map

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

package/build/index.esm.js/src/components/bundle/simple/Simple.js

@@ -0,0 +1,24 @@
+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 Card from '../../shared/card/Card.js';
+import '../../pricing/discount/DiscountTag.js';
+import { PriceLabel } from '../../pricing/price/PriceLabel.js';
+import '../../pricing/priceLabelV2/PriceLabelV2.js';
+import '../../pricing/clubOffer/ClubOfferTag.js';
+import { ComponentSize } from '../../../types/enums.js';
+import { useTheme } from '../../../core/theme/Theme.js';
+
+var Container = newStyled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding: 0.625rem 1.5rem;\n"], ["\n  padding: 0.625rem 1.5rem;\n"])));
+var Title = newStyled.h1(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  font-weight: 700;\n  font-size: 1rem;\n  line-height: 1.25rem;\n  color: ", ";\n  margin: 0;\n  margin-bottom: 0.125rem;\n  text-align: center;\n"], ["\n  font-weight: 700;\n  font-size: 1rem;\n  line-height: 1.25rem;\n  color: ", ";\n  margin: 0;\n  margin-bottom: 0.125rem;\n  text-align: center;\n"])), function (props) { return props.color; });
+var Details = newStyled.span(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  font-weight: 400;\n  font-size: 1rem;\n  margin: 0;\n  line-height: 1.5rem;\n  justify-content: center;\n  color: ", ";\n"], ["\n  display: flex;\n  align-items: center;\n  font-weight: 400;\n  font-size: 1rem;\n  margin: 0;\n  line-height: 1.5rem;\n  justify-content: center;\n  color: ", ";\n"])), function (props) { return props.color; });
+var PriceContainer = newStyled.span(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  margin: 0 0.313rem;\n  display: flex;\n  align-items: center;\n"], ["\n  margin: 0 0.313rem;\n  display: flex;\n  align-items: center;\n"])));
+var Simple = function (_a) {
+    var title = _a.title, freeShippingText = _a.freeShippingText, price = _a.price, anyQtyForText = _a.anyQtyForText, backgroundColor = _a.backgroundColor, _b = _a.widthAuto, widthAuto = _b === void 0 ? false : _b;
+    var theme = useTheme();
+    return (jsx(Card, __assign({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxs(Container, { children: [jsx(Title, __assign({ color: theme.colors.pallete.secondary.color, "data-testid": "Title" }, { children: title }), void 0), jsxs(Details, __assign({ color: theme.colors.pallete.secondary.color, "data-testid": "Details" }, { children: [anyQtyForText, jsx(PriceContainer, __assign({ "data-testid": "Price" }, { children: jsx(PriceLabel, { finalPrice: price, color: "#d3373c", size: ComponentSize.Small }, void 0) }), void 0), "+ ", freeShippingText] }), void 0)] }, void 0) }), void 0));
+};
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+
+export { Simple };
+//# sourceMappingURL=Simple.js.map

package/build/index.esm.js/src/components/bundle/simple/Simple.js.map

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

package/build/index.esm.js/src/components/buynowpaylater/BuyNowPayLater.js

@@ -0,0 +1,27 @@
+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 { Icon } from '../icons/index.js';
+import { Text } from '../text/Text.js';
+
+var Container = newStyled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: ", ";\n  align-items: center;\n  font-size: 0.88rem;\n"], ["\n  display: ", ";\n  align-items: center;\n  font-size: 0.88rem;\n"])), function (_a) {
+    var displayBNPL = _a.displayBNPL;
+    return (displayBNPL ? 'flex' : 'none');
+});
+var TextContainer = newStyled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  font-size: 14px;\n  margin: 0;\n  line-height: 24px;\n  font-weight: 400;\n  color: #292929;\n"], ["\n  font-size: 14px;\n  margin: 0;\n  line-height: 24px;\n  font-weight: 400;\n  color: #292929;\n"])));
+var IconWrapper = newStyled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: inline;\n  top: -1px;\n  position: relative;\n"], ["\n  display: inline;\n  top: -1px;\n  position: relative;\n"])));
+var BuyNowPayLater = function (_a) {
+    var _b;
+    var displayBNPL = _a.displayBNPL, installments = _a.installments, installmentPrice = _a.installmentPrice, _c = _a.iconFolder, iconFolder = _c === void 0 ? 'PDP' : _c, iconName = _a.iconName, _d = _a.showLogo, showLogo = _d === void 0 ? true : _d, _e = _a.iconColor, iconColor = _e === void 0 ? '#292929' : _e, fontSize = _a.fontSize;
+    // @ts-ignore
+    var IconComponent = (_b = Icon === null || Icon === void 0 ? void 0 : Icon[iconFolder]) === null || _b === void 0 ? void 0 : _b[iconName];
+    if (!IconComponent) {
+        console.error('Icon', iconName, 'not found');
+        return null;
+    }
+    return (jsx(Container, __assign({ displayBNPL: displayBNPL }, { children: jsxs(TextContainer, __assign({ style: { fontSize: fontSize }, "data-testid": "mainText" }, { children: ["Or ".concat(installments, " payments of "), jsx(Text, __assign({ variant: "heading6", style: { display: 'inline', fontSize: fontSize }, testId: "InstallmentPriceId" }, { children: installmentPrice }), void 0), showLogo ? ' with' : '', showLogo && (jsx(IconWrapper, { children: jsx(IconComponent, { width: 3.2, height: 2, fill: iconColor, style: { top: '-3px', position: 'relative' } }, void 0) }, void 0))] }), void 0) }), void 0));
+};
+var templateObject_1, templateObject_2, templateObject_3;
+
+export { BuyNowPayLater };
+//# sourceMappingURL=BuyNowPayLater.js.map

package/build/index.esm.js/src/components/buynowpaylater/BuyNowPayLater.js.map

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

package/build/index.esm.js/src/components/cartProductItem/CloseIcon/CloseButton.js

@@ -0,0 +1,16 @@
+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 { Icon } from '../../icons/index.js';
+import { useTheme } from '../../../core/theme/Theme.js';
+
+var Container = newStyled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin: 0;\n  padding: 0.25rem;\n  background-color: ", ";\n  display: inline-flex;\n  border-radius: 50%;\n  cursor: pointer;\n  width: ", ";\n  height: ", ";\n  justify-content: center;\n  align-items: center;\n"], ["\n  margin: 0;\n  padding: 0.25rem;\n  background-color: ", ";\n  display: inline-flex;\n  border-radius: 50%;\n  cursor: pointer;\n  width: ", ";\n  height: ", ";\n  justify-content: center;\n  align-items: center;\n"])), function (props) { return props.backgroundColor; }, function (props) { return "".concat(props.size, "em"); }, function (props) { return "".concat(props.size, "em"); });
+var CloseButton = function (_a) {
+    var onClick = _a.onClick, size = _a.size;
+    var theme = useTheme();
+    return (jsx(Container, __assign({ backgroundColor: theme.colors.shades['700'].color, onClick: onClick, "data-testid": "CartProductItemCloseBtn", size: size }, { children: jsx(Icon.Actions.Close, { width: size - 1, height: size - 1, fill: "#fff" }, void 0) }), void 0));
+};
+var templateObject_1;
+
+export { CloseButton };
+//# sourceMappingURL=CloseButton.js.map

package/build/index.esm.js/src/components/cartProductItem/CloseIcon/CloseButton.js.map

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

package/build/index.esm.js/src/components/cartProductItem/Description/Description.js

@@ -0,0 +1,15 @@
+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 { useTheme } from '../../../core/theme/Theme.js';
+
+var Text = newStyled.span(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  font-size: 0.875rem;\n  font-weight: 400;\n  line-height: 1.125rem;\n  color: ", ";\n  margin: 0;\n  padding: 0;\n"], ["\n  font-size: 0.875rem;\n  font-weight: 400;\n  line-height: 1.125rem;\n  color: ", ";\n  margin: 0;\n  padding: 0;\n"])), function (props) { return props.color; });
+var Description = function (_a) {
+    var text = _a.text;
+    var theme = useTheme();
+    return jsx(Text, __assign({ color: theme.colors.shades['400'].color }, { children: text }), void 0);
+};
+var templateObject_1;
+
+export { Description };
+//# sourceMappingURL=Description.js.map

package/build/index.esm.js/src/components/cartProductItem/Description/Description.js.map

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