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

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

@@ -0,0 +1,77 @@
+import { ComponentPosition } from '../../types/enums.js';
+
+var getWrapperFlexDirection = function (position) {
+    switch (position) {
+        case ComponentPosition.Top:
+            return 'column';
+        case ComponentPosition.Bottom:
+            return 'column-reverse';
+        case ComponentPosition.Left:
+            return 'row-reverse';
+        case ComponentPosition.Right:
+            return 'row';
+    }
+};
+var getContainerFlexDirection = function (position) {
+    switch (position) {
+        case ComponentPosition.Top:
+            return 'column';
+        case ComponentPosition.Bottom:
+            return 'column-reverse';
+        case ComponentPosition.Left:
+            return 'row';
+        case ComponentPosition.Right:
+            return 'row-reverse';
+    }
+};
+var getArrowRotation = function (position) {
+    switch (position) {
+        case ComponentPosition.Top:
+            return '0deg';
+        case ComponentPosition.Bottom:
+            return '180deg';
+        case ComponentPosition.Left:
+            return '270deg';
+        case ComponentPosition.Right:
+            return '90deg';
+    }
+};
+var getArrowContainerPadding = function (position) {
+    switch (position) {
+        case ComponentPosition.Top:
+            return '0 1.25rem';
+        case ComponentPosition.Bottom:
+            return '0 1.25rem';
+        case ComponentPosition.Left:
+            return '0 0 0.625rem 0';
+        case ComponentPosition.Right:
+            return '0 0 0.625rem 0';
+    }
+};
+var getArrowContainerMargin = function (position) {
+    switch (position) {
+        case ComponentPosition.Top:
+            return '-1px 0 0 0';
+        case ComponentPosition.Bottom:
+            return '0 0 -1px 0';
+        case ComponentPosition.Left:
+            return '0';
+        case ComponentPosition.Right:
+            return '0';
+    }
+};
+var getTooltipAlignItems = function (position, align) {
+    switch (position) {
+        case ComponentPosition.Top:
+            return align;
+        case ComponentPosition.Bottom:
+            return align;
+        case ComponentPosition.Left:
+            return 'center';
+        case ComponentPosition.Right:
+            return 'center';
+    }
+};
+
+export { getArrowContainerMargin, getArrowContainerPadding, getArrowRotation, getContainerFlexDirection, getTooltipAlignItems, getWrapperFlexDirection };
+//# sourceMappingURL=utils.js.map

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

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

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

@@ -0,0 +1,10 @@
+import { Total } from './total/Total.js';
+import { Subtotal } from './subtotal/Subtotal.js';
+
+var Totals = {
+    Total: Total,
+    Subtotal: Subtotal,
+};
+
+export { Totals };
+//# sourceMappingURL=index.js.map

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

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

package/build/index.esm.js/src/components/totals/subtotal/Subtotal.js

@@ -0,0 +1,34 @@
+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 { useTheme } from '../../../core/theme/Theme.js';
+
+var Wrapper = newStyled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), function (_a) {
+    var color = _a.color;
+    return color;
+});
+var ItemContainer = newStyled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: 0.625rem;\n\n  &:last-child {\n    margin-bottom: 0;\n  }\n"], ["\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: 0.625rem;\n\n  &:last-child {\n    margin-bottom: 0;\n  }\n"])));
+var Item = newStyled.h4(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  margin: 0;\n  font-size: 0.875rem;\n  line-height: ", ";\n  font-weight: ", ";\n"], ["\n  margin: 0;\n  font-size: 0.875rem;\n  line-height: ", ";\n  font-weight: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.component.subTotal.basicSubTotal.lineHeight;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.component.subTotal.basicSubTotal.weight;
+});
+var CouponItem = newStyled(Item)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), function (_a) {
+    var color = _a.color;
+    return color;
+});
+var Subtotal = function (_a) {
+    var subtotal = _a.subtotal, shipping = _a.shipping, taxes = _a.taxes, coupon = _a.coupon, _b = _a.highlightColor, highlightColor = _b === void 0 ? '#2f806a' : _b;
+    var theme = useTheme();
+    return (jsxs(Wrapper, __assign({ color: theme.colors.shades['700'].color, "data-testid": "subtotal-wrapper" }, { children: [jsxs(ItemContainer, { children: [jsx(Item, __assign({ "data-testid": "subtotal-title" }, { children: subtotal.label }), void 0), jsx(Item, __assign({ "data-testid": "subtotal-price" }, { children: subtotal.value }), void 0)] }, void 0), jsxs(ItemContainer, { children: [jsx(Item, __assign({ "data-testid": "shipping-title" }, { children: shipping.label }), void 0), jsx(Item, __assign({ "data-testid": "shipping-price" }, { children: shipping.value }), void 0)] }, void 0), jsxs(ItemContainer, { children: [jsx(Item, __assign({ "data-testid": "taxes-title" }, { children: taxes.label }), void 0), jsx(Item, __assign({ "data-testid": "taxes-price" }, { children: taxes.value }), void 0)] }, void 0), coupon &&
+                coupon.coupons.map(function (_a) {
+                    var code = _a.code, amount = _a.amount;
+                    return (jsxs(ItemContainer, { children: [jsxs(CouponItem, __assign({ color: highlightColor, "data-testid": "discount-title" }, { children: [coupon.couponText, " ", code, " ", coupon.appliedText] }), void 0), jsx(CouponItem, __assign({ color: highlightColor, "data-testid": "discount-price" }, { children: amount }), void 0)] }, code));
+                })] }), void 0));
+};
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+
+export { Subtotal };
+//# sourceMappingURL=Subtotal.js.map

package/build/index.esm.js/src/components/totals/subtotal/Subtotal.js.map

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

package/build/index.esm.js/src/components/totals/total/Total.js

@@ -0,0 +1,35 @@
+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 { useTheme } from '../../../core/theme/Theme.js';
+
+var Wrapper = newStyled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-end;\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-end;\n"])));
+var GrandTotal = newStyled.h1(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin: 0;\n  font-size: 1.5rem;\n  line-height: 2rem;\n  font-weight: 700;\n  color: ", ";\n  display: block;\n  align-items: center;\n"], ["\n  margin: 0;\n  font-size: 1.5rem;\n  line-height: 2rem;\n  font-weight: 700;\n  color: ", ";\n  display: block;\n  align-items: center;\n"])), function (props) { return props.color; });
+var Currency = newStyled.span(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  margin: 0;\n  margin-right: 0.625rem;\n  font-weight: 600;\n  color: ", ";\n  font-size: ", ";\n  line-height: ", ";\n  align-self: ", ";\n"], ["\n  margin: 0;\n  margin-right: 0.625rem;\n  font-weight: 600;\n  color: ", ";\n  font-size: ", ";\n  line-height: ", ";\n  align-self: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.component.total.basicTotal.currency.color;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.component.total.basicTotal.currency.fontSize;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.component.total.basicTotal.currency.lineHeight;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.component.total.basicTotal.currency.alignSelf;
+});
+var Container = newStyled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  width: 100%;\n  margin-top: 0.625rem;\n  color: ", ";\n"], ["\n  display: flex;\n  justify-content: space-between;\n  width: 100%;\n  margin-top: 0.625rem;\n  color: ", ";\n"])), function (props) { return props.highlightColor; });
+var DiscountText = newStyled.h3(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  margin: 0;\n  font-size: 14px;\n  line-height: 22px;\n  font-weight: 600;\n"], ["\n  margin: 0;\n  font-size: 14px;\n  line-height: 22px;\n  font-weight: 600;\n"])));
+var DiscountAmount = newStyled.h3(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  margin: 0;\n  font-size: 18px;\n  line-height: 28px;\n  font-weight: ", ";\n"], ["\n  margin: 0;\n  font-size: 18px;\n  line-height: 28px;\n  font-weight: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.component.total.basicTotal.savings.amountFontWeight;
+});
+var Total = function (_a) {
+    var total = _a.total, currency = _a.currency, saving = _a.saving, _b = _a.highlightColor, highlightColor = _b === void 0 ? '#2f806a' : _b;
+    var theme = useTheme();
+    return (jsxs(Wrapper, __assign({ "data-testid": "total-wrapper" }, { children: [jsxs(GrandTotal, __assign({ color: theme.component.total.basicTotal.amount.color, "data-testid": "total-price" }, { children: [jsx(Currency, { children: currency }, void 0), total] }), void 0), saving && (jsxs(Container, __assign({ "data-testid": "subtotal-container", highlightColor: highlightColor }, { children: [jsx(DiscountText, __assign({ "data-testid": "saving-title" }, { children: saving.savingText }), void 0), jsx(DiscountAmount, __assign({ "data-testid": "saving-price" }, { children: saving.amount }), void 0)] }), void 0))] }), void 0));
+};
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
+
+export { Container, Currency, DiscountAmount, DiscountText, GrandTotal, Total, Wrapper };
+//# sourceMappingURL=Total.js.map

package/build/index.esm.js/src/components/totals/total/Total.js.map

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

package/build/index.esm.js/src/components/tracking-progress/TrackingProgress.js

@@ -0,0 +1,47 @@
+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 { useTheme } from '../../core/theme/Theme.js';
+
+var Container = newStyled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n"], ["\n  display: flex;\n  flex-direction: column;\n"])));
+var CheckpointContainer = newStyled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
+var CheckpointDate = newStyled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  justify-content: flex-start;\n  flex-direction: column;\n  padding-bottom: ", ";\n  width: 60px;\n  min-width: 60px;\n  margin-right: 10px;\n"], ["\n  display: flex;\n  justify-content: flex-start;\n  flex-direction: column;\n  padding-bottom: ", ";\n  width: 60px;\n  min-width: 60px;\n  margin-right: 10px;\n"])), function (props) { return props.currentSpace; });
+var CheckpointDateLabel = newStyled.p(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  font-size: 14px;\n  line-height: 22px;\n  margin: 0;\n  font-weight: ", ";\n"], ["\n  font-size: 14px;\n  line-height: 22px;\n  margin: 0;\n  font-weight: ", ";\n"])), function (props) { return (props.lastElement ? '600' : '400'); });
+var CheckpointStatus = newStyled.p(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  font-size: 14px;\n  line-height: 22px;\n  transform: translate(0, 22px);\n  margin: 0;\n  margin-left: 9px;\n  color: ", ";\n  font-weight: ", ";\n  text-align: left;\n"], ["\n  font-size: 14px;\n  line-height: 22px;\n  transform: translate(0, 22px);\n  margin: 0;\n  margin-left: 9px;\n  color: ", ";\n  font-weight: ", ";\n  text-align: left;\n"])), function (props) { return (props.finishedTrack ? props.finishedTrackColor : ''); }, function (props) { return (props.finishedTrack ? '600' : '400'); });
+var ActiveCheckpointTrack = newStyled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  width: 13px;\n  min-width: 13px;\n  background-color: ", ";\n  transform: ", ";\n  position: relative;\n  border-radius: ", ";\n  margin-top: -1px;\n  padding-bottom: ", ";\n  margin-bottom: ", ";\n"], ["\n  width: 13px;\n  min-width: 13px;\n  background-color: ", ";\n  transform: ", ";\n  position: relative;\n  border-radius: ", ";\n  margin-top: -1px;\n  padding-bottom: ", ";\n  margin-bottom: ", ";\n"])), function (props) { return props.trackColor; }, function (props) { return (props.firstElement ? 'translate(0, 22px)' : 'translate(0, 33px)'); }, function (props) {
+    return props.firstElement ? '8px 8px 0 0' : props.lastElement ? '0 0 8px 8px' : '';
+}, function (props) { return (props.firstElement ? '20px' : '0'); }, function (props) { return (props.firstElement ? '-20px' : '0'); });
+var ActiveCheckpointDot = newStyled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  &:after {\n    content: ' ';\n    position: absolute;\n    width: 13px;\n    height: 13px;\n    background-color: #e5e5e5;\n    z-index: 2;\n    border-radius: 50%;\n    transform: ", ";\n    left: 0;\n  }\n"], ["\n  &:after {\n    content: ' ';\n    position: absolute;\n    width: 13px;\n    height: 13px;\n    background-color: #e5e5e5;\n    z-index: 2;\n    border-radius: 50%;\n    transform: ", ";\n    left: 0;\n  }\n"])), function (props) { return (props.firstElement ? 'translate(0, -0.5px)' : 'translate(0, -6.5px)'); });
+var LastCheckpointTrack = newStyled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  width: 13px;\n  min-width: 13px;\n  background-color: ", ";\n  position: relative;\n  border-radius: 0 0 8px 8px;\n  margin-top: -1px;\n"], ["\n  width: 13px;\n  min-width: 13px;\n  background-color: ", ";\n  position: relative;\n  border-radius: 0 0 8px 8px;\n  margin-top: -1px;\n"])), function (props) { return props.backgroundColor; });
+var TrackingProgress = function (_a) {
+    var checkPoints = _a.checkPoints, amountOfCheckPoints = _a.amountOfCheckPoints;
+    var theme = useTheme();
+    var fillSpaces = amountOfCheckPoints - checkPoints.length;
+    if (fillSpaces < 0) {
+        console.error('Invalid amount of total checkpoints', amountOfCheckPoints, checkPoints.length);
+        fillSpaces = 0;
+    }
+    var statusSpaces = [47, 39, 31, 30];
+    var emptySpaces = !fillSpaces ? [] : new Array(fillSpaces).fill({});
+    var getCurrentSpace = function (index) {
+        if (!fillSpaces && index + 1 === checkPoints.length) {
+            return '0';
+        }
+        if (statusSpaces[index]) {
+            return "".concat(statusSpaces[index], "px");
+        }
+        return '30px';
+    };
+    return (jsxs(Container, __assign({ "data-testid": "tracking-progress" }, { children: [checkPoints.map(function (_a, index) {
+                var day = _a.day, date = _a.date, statusMessage = _a.statusMessage;
+                return (jsxs(CheckpointContainer, __assign({ "data-testid": "checkpoint-track" }, { children: [jsxs(CheckpointDate, __assign({ currentSpace: getCurrentSpace(index) }, { children: [jsx(CheckpointDateLabel, __assign({ lastElement: index + 1 === checkPoints.length }, { children: day }), void 0), jsx(CheckpointDateLabel, __assign({ lastElement: index + 1 === checkPoints.length }, { children: date }), void 0)] }), void 0), index + 1 !== checkPoints.length && (jsx(ActiveCheckpointTrack, __assign({ trackColor: fillSpaces
+                                ? theme.colors.semantic.informative.color
+                                : theme.colors.semantic.positive.color, firstElement: index === 0 }, { children: jsx(ActiveCheckpointDot, { firstElement: index === 0 }, void 0) }), void 0)), index + 1 === checkPoints.length && !fillSpaces && (jsx(LastCheckpointTrack, { backgroundColor: theme.colors.semantic.positive.color }, void 0)), index + 1 === checkPoints.length && !!fillSpaces && (jsx(ActiveCheckpointTrack, __assign({ trackColor: theme.colors.shades['200'].color, firstElement: index === 0, lastElement: fillSpaces === 1 }, { children: jsx(ActiveCheckpointDot, { firstElement: index === 0 }, void 0) }), void 0)), jsx(CheckpointStatus, __assign({ finishedTrack: !fillSpaces && index + 1 === checkPoints.length, finishedTrackColor: theme.colors.semantic.positive.color }, { children: statusMessage }), void 0)] }), statusMessage));
+            }), emptySpaces.map(function (element, index) {
+                return (jsxs(CheckpointContainer, __assign({ "data-testid": "empty-checkpoint-track" }, { children: [jsxs(CheckpointDate, __assign({ currentSpace: getCurrentSpace(index) }, { children: [jsx(CheckpointDateLabel, { lastElement: index + 1 === emptySpaces.length }, void 0), jsx(CheckpointDateLabel, { lastElement: index + 1 === emptySpaces.length }, void 0)] }), void 0), index + 1 !== emptySpaces.length && (jsx(ActiveCheckpointTrack, { trackColor: theme.colors.shades['200'].color, firstElement: false, lastElement: index + 2 === emptySpaces.length }, void 0)), jsx(CheckpointStatus, { finishedTrack: false }, void 0)] }), index));
+            })] }), void 0));
+};
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
+
+export { TrackingProgress as default };
+//# sourceMappingURL=TrackingProgress.js.map

package/build/index.esm.js/src/components/tracking-progress/TrackingProgress.js.map

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

package/build/index.esm.js/src/components/tracking-progress-v2/TrackingProgressV2.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 { useTheme } from '../../core/theme/Theme.js';
+import { Icon } from '../icons/index.js';
+
+var Container = newStyled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n"], ["\n  display: flex;\n  flex-direction: column;\n"])));
+var CheckpointContainer = newStyled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
+var CheckpointDate = newStyled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  justify-content: flex-start;\n  flex-direction: column;\n  padding-bottom: ", ";\n  width: 60px;\n  min-width: 60px;\n  margin-right: 10px;\n"], ["\n  display: flex;\n  justify-content: flex-start;\n  flex-direction: column;\n  padding-bottom: ", ";\n  width: 60px;\n  min-width: 60px;\n  margin-right: 10px;\n"])), function (props) { return props.currentSpace; });
+var CheckpointDateLabel = newStyled.p(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  font-size: 14px;\n  line-height: 22px;\n  margin: 0;\n  font-weight: ", ";\n"], ["\n  font-size: 14px;\n  line-height: 22px;\n  margin: 0;\n  font-weight: ", ";\n"])), function (props) { return (props.lastElement ? '600' : '400'); });
+var CheckpointStatus = newStyled.p(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  gap: 4px;\n  font-size: 14px;\n  line-height: 22px;\n  transform: translate(0, 22px);\n  margin: 0;\n  margin-left: 9px;\n  color: ", ";\n  font-weight: ", ";\n  text-align: left;\n"], ["\n  display: flex;\n  gap: 4px;\n  font-size: 14px;\n  line-height: 22px;\n  transform: translate(0, 22px);\n  margin: 0;\n  margin-left: 9px;\n  color: ", ";\n  font-weight: ", ";\n  text-align: left;\n"])), function (props) {
+    return props.finishedTrack
+        ? props.finishedTrackColor
+        : props.activeTrack
+            ? props.activeTrackColor
+            : '';
+}, function (props) { return (props.finishedTrack || props.activeTrack ? '600' : '400'); });
+var ActiveCheckpointTrack = newStyled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  width: 13px;\n  min-width: 13px;\n  background-color: ", ";\n  transform: ", ";\n  position: relative;\n  border-radius: ", ";\n  margin-top: -1px;\n  padding-bottom: ", ";\n  margin-bottom: ", ";\n"], ["\n  width: 13px;\n  min-width: 13px;\n  background-color: ", ";\n  transform: ", ";\n  position: relative;\n  border-radius: ", ";\n  margin-top: -1px;\n  padding-bottom: ", ";\n  margin-bottom: ", ";\n"])), function (props) { return props.trackColor; }, function (props) { return (props.firstElement ? 'translate(0, 22px)' : 'translate(0, 33px)'); }, function (props) {
+    return props.firstElement ? '8px 8px 0 0' : props.lastElement ? '0 0 8px 8px' : '';
+}, function (props) { return (props.firstElement ? '20px' : '0'); }, function (props) { return (props.firstElement ? '-20px' : '0'); });
+var ActiveCheckpointDot = newStyled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  &:after {\n    content: ' ';\n    position: absolute;\n    width: 13px;\n    height: 13px;\n    background-color: #e5e5e5;\n    z-index: 2;\n    border-radius: 50%;\n    transform: ", ";\n    left: 0;\n  }\n"], ["\n  &:after {\n    content: ' ';\n    position: absolute;\n    width: 13px;\n    height: 13px;\n    background-color: #e5e5e5;\n    z-index: 2;\n    border-radius: 50%;\n    transform: ", ";\n    left: 0;\n  }\n"])), function (props) { return (props.firstElement ? 'translate(0, -0.5px)' : 'translate(0, -6.5px)'); });
+var LastActiveCheckpointDot = newStyled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  width: 13px;\n  min-width: 13px;\n  background-color: ", ";\n  transform: translate(0, 33px);\n  position: relative;\n  border-radius: 0 0 8px 8px;\n  margin-top: -1px;\n  height: 8px;\n"], ["\n  width: 13px;\n  min-width: 13px;\n  background-color: ", ";\n  transform: translate(0, 33px);\n  position: relative;\n  border-radius: 0 0 8px 8px;\n  margin-top: -1px;\n  height: 8px;\n"])), function (props) { return props.trackColor; });
+var WarningIconWrapper = newStyled.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  > svg {\n    height: 28px;\n    padding-bottom: 10px;\n  }\n"], ["\n  > svg {\n    height: 28px;\n    padding-bottom: 10px;\n  }\n"])));
+var TrackingProgressV2 = function (_a) {
+    var checkPoints = _a.checkPoints, amountOfCheckPoints = _a.amountOfCheckPoints, warning = _a.warning;
+    var theme = useTheme();
+    var fillSpaces = amountOfCheckPoints - checkPoints.length;
+    var POSSIBLES_CHECKPOINT = ['Order placed', 'Order Processed', 'In transit', 'Delivered'];
+    if (fillSpaces < 0) {
+        console.error('Invalid amount of total checkpoints', amountOfCheckPoints, checkPoints.length);
+        fillSpaces = 0;
+    }
+    var statusSpaces = [47, 39, 31, 30];
+    var emptySpaces = !fillSpaces
+        ? []
+        : POSSIBLES_CHECKPOINT.splice(checkPoints.length, fillSpaces);
+    var getCurrentSpace = function (index) {
+        if (!fillSpaces && index + 1 === checkPoints.length) {
+            return '0';
+        }
+        if (statusSpaces[index]) {
+            return "".concat(statusSpaces[index], "px");
+        }
+        return '30px';
+    };
+    return (jsxs(Container, __assign({ "data-testid": "tracking-progress" }, { children: [checkPoints.map(function (_a, index) {
+                var day = _a.day, date = _a.date, statusMessage = _a.statusMessage;
+                return (jsxs(CheckpointContainer, __assign({ "data-testid": "checkpoint-track" }, { children: [jsxs(CheckpointDate, __assign({ currentSpace: getCurrentSpace(index) }, { children: [jsx(CheckpointDateLabel, __assign({ lastElement: index + 1 === checkPoints.length }, { children: day }), void 0), jsx(CheckpointDateLabel, __assign({ lastElement: index + 1 === checkPoints.length }, { children: date }), void 0)] }), void 0), index + 1 !== checkPoints.length && (jsx(ActiveCheckpointTrack, __assign({ trackColor: fillSpaces
+                                ? theme.colors.semantic.informative.color
+                                : theme.colors.semantic.positive.color, firstElement: index === 0 }, { children: jsx(ActiveCheckpointDot, { firstElement: index === 0 }, void 0) }), void 0)), index + 1 === checkPoints.length && !fillSpaces && (jsx(LastActiveCheckpointDot, __assign({ trackColor: theme.colors.semantic.positive.color }, { children: jsx(ActiveCheckpointDot, { firstElement: false }, void 0) }), void 0)), index + 1 === checkPoints.length && !!fillSpaces && (jsx(ActiveCheckpointTrack, __assign({ trackColor: theme.colors.shades['200'].color, firstElement: index === 0, lastElement: fillSpaces === 1 }, { children: jsx(ActiveCheckpointDot, { firstElement: index === 0 }, void 0) }), void 0)), jsxs(CheckpointStatus, __assign({ finishedTrack: !fillSpaces && index + 1 === checkPoints.length, activeTrack: !!fillSpaces && index + 1 === checkPoints.length, finishedTrackColor: theme.colors.semantic.positive.color, activeTrackColor: theme.colors.semantic.informative.color }, { children: [statusMessage, ' ', warning && index + 1 === checkPoints.length && (jsx(WarningIconWrapper, { children: jsx(Icon.Actions.Warning, { width: 1.25, height: 1.25, fill: theme.colors.semantic.urgent.color }, void 0) }, void 0))] }), void 0)] }), statusMessage));
+            }), emptySpaces.map(function (statusMessage, index) {
+                return (jsxs(CheckpointContainer, __assign({ "data-testid": "empty-checkpoint-track" }, { children: [jsxs(CheckpointDate, __assign({ currentSpace: "90px" }, { children: [jsx(CheckpointDateLabel, { lastElement: index + 1 === emptySpaces.length }, void 0), jsx(CheckpointDateLabel, { lastElement: index + 1 === emptySpaces.length }, void 0)] }), void 0), index + 1 !== emptySpaces.length && (jsx(ActiveCheckpointTrack, __assign({ trackColor: theme.colors.shades['200'].color }, { children: jsx(ActiveCheckpointDot, { firstElement: false }, void 0) }), void 0)), index + 1 === emptySpaces.length && (jsx(LastActiveCheckpointDot, __assign({ trackColor: theme.colors.shades['200'].color }, { children: jsx(ActiveCheckpointDot, { firstElement: false }, void 0) }), void 0)), jsx(CheckpointStatus, __assign({ finishedTrack: false }, { children: statusMessage }), void 0)] }), index));
+            })] }), void 0));
+};
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;
+
+export { TrackingProgressV2 as default };
+//# sourceMappingURL=TrackingProgressV2.js.map

package/build/index.esm.js/src/components/tracking-progress-v2/TrackingProgressV2.js.map

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

package/build/index.esm.js/src/core/theme/Theme.js

@@ -0,0 +1,38 @@
+import { __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import { jsx } from 'react/jsx-runtime';
+import { createContext, useMemo, useState, useEffect, useContext } from 'react';
+export { default as styled } from '../../../node_modules/@emotion/styled/dist/emotion-styled.esm.js';
+import { applyVariablesIntoTheme, transformThemeIntoVariables } from './theme.helpers.js';
+import { b as ThemeProvider$1, a as useTheme$1 } from '../../../node_modules/@emotion/react/dist/emotion-element-570fe3bb.esm.js';
+
+var ThemeProvider = function (_a) {
+    var theme = _a.theme, children = _a.children;
+    var parsedTheme = useMemo(function () { return applyVariablesIntoTheme(theme); }, [theme]);
+    return (jsx(ThemeProvider$1, __assign({ theme: parsedTheme }, { children: jsx(AssetsProvider, __assign({ assets: parsedTheme.assets }, { children: children }), void 0) }), void 0));
+};
+var useTheme = function () { return useTheme$1(); };
+var DefaultContainer = function (props) { return jsx("div", __assign({}, props), void 0); };
+var ThemeVariables = function (_a) {
+    var _b;
+    var theme = _a.theme, _c = _a.Container, Container = _c === void 0 ? DefaultContainer : _c;
+    var _d = useState(function () { return transformThemeIntoVariables(theme); }), variables = _d[0], setVariables = _d[1];
+    useEffect(function () {
+        setVariables(transformThemeIntoVariables(theme));
+    }, [theme]);
+    return (jsx(Container, { children: jsx("style", { "data-theme-name": ((_b = theme.name) === null || _b === void 0 ? void 0 : _b.toLowerCase()) || 'unamed-theme', dangerouslySetInnerHTML: { __html: variables } }, void 0) }, void 0));
+};
+var AssetsContext = createContext({
+    images: {
+        favicon: '',
+        logo: '',
+    },
+});
+var AssetsProvider = function (_a) {
+    var assets = _a.assets, children = _a.children;
+    var context = useMemo(function () { return assets; }, [assets]);
+    return jsx(AssetsContext.Provider, __assign({ value: context }, { children: children }), void 0);
+};
+var useThemeAssets = function () { return useContext(AssetsContext); };
+
+export { AssetsProvider, ThemeProvider, ThemeVariables, useTheme, useThemeAssets };
+//# sourceMappingURL=Theme.js.map

package/build/index.esm.js/src/core/theme/Theme.js.map

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

package/build/index.esm.js/src/core/theme/theme.helpers.js

@@ -0,0 +1,118 @@
+import { __assign, __rest } from '../../../node_modules/tslib/tslib.es6.js';
+
+var IGNORED_KEYS = ['typography', 'fonts'];
+var applyVariablesIntoTheme = function (theme) {
+    var variables = {};
+    var pending = {};
+    transformToVariables('-', variables, __assign({}, theme), pending);
+    for (var key in pending) {
+        var valueKey = pending[key];
+        if (valueKey in variables === false) {
+            delete variables[key];
+            continue;
+        }
+        variables[key] = variables[valueKey];
+    }
+    for (var _i = 0, IGNORED_KEYS_1 = IGNORED_KEYS; _i < IGNORED_KEYS_1.length; _i++) {
+        var key = IGNORED_KEYS_1[_i];
+        // @ts-ignore
+        variables[key] = theme[key];
+    }
+    return variablesToObject(variables, {});
+};
+var variablesToObject = function (variables, theme) {
+    for (var key in variables) {
+        var target = theme;
+        var path = key.replace(/^--/, '').split('-');
+        for (var i = 0; i < path.length; i++) {
+            var segment = path[i];
+            var isLast = i === path.length - 1;
+            var isArray = new RegExp("".concat(segment, "-0[-\\w]*$")).test(key);
+            var segmentValue = isLast ? variables[key] : isArray ? [] : {};
+            if (segment in target === false) {
+                // @ts-ignore
+                target[segment] = segmentValue;
+            }
+            // @ts-ignore
+            target = target[segment];
+        }
+        target = theme;
+    }
+    return theme;
+};
+var transformToVariables = function (prefix, variables, theme, pending) {
+    for (var key in theme) {
+        /* istanbul ignore next */
+        var fullKey = key === '$root' ? prefix : "".concat(prefix, "-").concat(key);
+        var value = theme[key];
+        if (IGNORED_KEYS.includes(key)) {
+            continue;
+        }
+        if (value == null) {
+            continue;
+        }
+        if (typeof value === 'object') {
+            transformToVariables(fullKey, variables, value, pending);
+        }
+        else {
+            if (typeof value === 'string' && value.startsWith('--')) {
+                pending[fullKey] = value;
+            }
+            variables[fullKey] = value;
+        }
+    }
+};
+var stringify = function (variables) {
+    return inline("\n    :root {\n      ".concat(Object.entries(variables)
+        .map(function (_a) {
+        var key = _a[0], value = _a[1];
+        return "".concat(key, ": ").concat(value, ";");
+    })
+        .join('\n'), "\n    }\n  "));
+};
+var transformThemeIntoVariables = function (_a) {
+    // eslint-disable-next-line
+    _a.name; var _b = _a.fonts, fonts = _b === void 0 ? { url: '', config: [] } : _b, theme = __rest(_a, ["name", "fonts"]);
+    var variables = {};
+    var pending = {};
+    transformToVariables('-', variables, __assign({}, theme), pending);
+    for (var key in pending) {
+        var valueKey = pending[key];
+        if (valueKey in variables === false) {
+            delete variables[key];
+            continue;
+        }
+        variables[key] = "var(".concat(valueKey, ")");
+    }
+    return stringify(variables) + transformFonts(fonts);
+};
+var transformFonts = function (fonts) {
+    if (fonts.config.length === 0) {
+        return '';
+    }
+    var css = fonts.config
+        .map(function (font) {
+        var css = [
+            "font-family: \"".concat(font.family, "\""),
+            "src: url(\"".concat(fonts.url, "/").concat(font.src, "\") format(\"opentype\")"),
+        ];
+        if (font.weight) {
+            css.push("font-weight: ".concat(font.weight));
+        }
+        if (font.stretch) {
+            css.push("font-stretch: ".concat(font.stretch));
+        }
+        if (font.style) {
+            css.push("font-style: ".concat(font.style));
+        }
+        return inline("@font-face { ".concat(css.join(';\n'), "; }"));
+    })
+        .join('\n');
+    return inline("\n    ".concat(css, "\n    body, input {\n      font-family: \"").concat(fonts.config[0].family, "\";\n    }\n  "));
+};
+var inline = function (text) {
+    return text.trim().replace(/\s+/g, ' ').replace(/\n/g, '');
+};
+
+export { applyVariablesIntoTheme, inline, stringify, transformFonts, transformThemeIntoVariables, transformToVariables, variablesToObject };
+//# sourceMappingURL=theme.helpers.js.map

package/build/index.esm.js/src/core/theme/theme.helpers.js.map

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

package/build/index.esm.js/src/hooks/WindowDimensions.js

@@ -0,0 +1,28 @@
+import { useState, useEffect } from 'react';
+
+function getWindowDimensions() {
+    var width = window.innerWidth, height = window.innerHeight;
+    return {
+        width: width,
+        height: height,
+    };
+}
+var useWindowDimensions = function (breakpoints) {
+    var _a = useState({ width: 0, height: 0 }), windowDimensions = _a[0], setWindowDimensions = _a[1];
+    useEffect(function () {
+        function handleResize() {
+            setWindowDimensions(getWindowDimensions());
+        }
+        // calling it here updates the dimensions on first render
+        handleResize();
+        window.addEventListener('resize', handleResize);
+        return function () { return window.removeEventListener('resize', handleResize); };
+    }, []);
+    return {
+        isMobile: windowDimensions.width < breakpoints.desktop,
+        windowDimensions: windowDimensions,
+    };
+};
+
+export { useWindowDimensions };
+//# sourceMappingURL=WindowDimensions.js.map

package/build/index.esm.js/src/hooks/WindowDimensions.js.map

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

package/build/index.esm.js/src/hooks/click-outside.js

@@ -0,0 +1,23 @@
+import { useEffect } from 'react';
+
+var useOnClickOutside = function (ref, handler) {
+    useEffect(function () {
+        var listener = function (event) {
+            // Do nothing if clicking ref's element or descendent elements
+            var el = ref === null || ref === void 0 ? void 0 : ref.current;
+            if (!el || el.contains((event === null || event === void 0 ? void 0 : event.target) || null)) {
+                return;
+            }
+            handler(event);
+        };
+        document.addEventListener('mousedown', listener);
+        document.addEventListener('touchstart', listener);
+        return function () {
+            document.removeEventListener('mousedown', listener);
+            document.removeEventListener('touchstart', listener);
+        };
+    }, [ref, handler]);
+};
+
+export { useOnClickOutside as default };
+//# sourceMappingURL=click-outside.js.map

package/build/index.esm.js/src/hooks/click-outside.js.map

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