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

package/build/index.esm.js/src/components/input/basePlusIcon/BasePlusIcon.js.map

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

package/build/index.esm.js/src/components/input/custom/Custom.js

@@ -0,0 +1,31 @@
+import { __makeTemplateObject, __rest, __assign } from '../../../../node_modules/tslib/tslib.es6.js';
+import { jsx } from 'react/jsx-runtime';
+import { useMemo } from 'react';
+import { BaseInput } from '../base/BaseInput.js';
+import newStyled from '../../../../node_modules/@emotion/styled/dist/emotion-styled.esm.js';
+import { useTheme } from '../../../core/theme/Theme.js';
+import { Button } from '../../shared/button/Button.js';
+
+var Container = newStyled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  overflow: hidden;\n\n  input {\n    border-radius: ", ";\n    border-top-right-radius: 0;\n    border-bottom-right-radius: 0;\n    border-right: none;\n    width: 100%;\n  }\n"], ["\n  overflow: hidden;\n\n  input {\n    border-radius: ", ";\n    border-top-right-radius: 0;\n    border-bottom-right-radius: 0;\n    border-right: none;\n    width: 100%;\n  }\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.component.inputCustom.input.borderRadius;
+});
+var ButtonContainer = newStyled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  max-width: 50%;\n  margin-left: -6px;\n\n  button {\n    width: 100%;\n    height: 100%;\n    border-radius: ", ";\n  }\n"], ["\n  max-width: 50%;\n  margin-left: -6px;\n\n  button {\n    width: 100%;\n    height: 100%;\n    border-radius: ", ";\n  }\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.component.inputCustom.button.borderRadius;
+});
+var Custom = function (_a) {
+    var onClick = _a.onClick, text = _a.text, variant = _a.variant, rest = __rest(_a, ["onClick", "text", "variant"]);
+    var theme = useTheme();
+    var props = useMemo(function () { return ({
+        variant: variant,
+        onClick: onClick,
+        text: text,
+        disabled: rest.disabled,
+    }); }, [variant, onClick, text, rest.disabled]);
+    return (jsx(Container, __assign({ theme: theme }, { children: jsx(BaseInput, __assign({}, rest, { children: jsx(ButtonContainer, __assign({ theme: theme }, { children: jsx(Button, __assign({}, props), void 0) }), void 0) }), void 0) }), void 0));
+};
+var templateObject_1, templateObject_2;
+
+export { Custom };
+//# sourceMappingURL=Custom.js.map

package/build/index.esm.js/src/components/input/custom/Custom.js.map

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

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

@@ -0,0 +1,14 @@
+import { BaseInput } from './base/BaseInput.js';
+import { Custom } from './custom/Custom.js';
+import { BasePlusButton } from './basePlusButton/BasePlusButton.js';
+import { BasePlusIcon } from './basePlusIcon/BasePlusIcon.js';
+
+var Input = {
+    Simple: BaseInput,
+    Custom: Custom,
+    SimplePlusButton: BasePlusButton,
+    SimplePlusIcon: BasePlusIcon,
+};
+
+export { Input };
+//# sourceMappingURL=index.js.map

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

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

package/build/index.esm.js/src/components/input/label/Label.js

@@ -0,0 +1,22 @@
+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 Label = newStyled.span(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  font-weight: 600;\n  color: ", ";\n  font-size: 1.125rem;\n  line-height: 1.75rem;\n"], ["\n  font-weight: 600;\n  color: ", ";\n  font-size: 1.125rem;\n  line-height: 1.75rem;\n"])), function (_a) {
+    var color = _a.color;
+    return color;
+});
+var MandatoryIcon = newStyled.span(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  color: ", ";\n  margin-left: 0.25rem;\n"], ["\n  color: ", ";\n  margin-left: 0.25rem;\n"])), function (_a) {
+    var color = _a.color;
+    return color;
+});
+var InputLabel = function (_a) {
+    var label = _a.label, isDisabled = _a.isDisabled, isRequired = _a.isRequired;
+    var theme = useTheme();
+    return (jsxs(Label, __assign({ color: isDisabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, { children: [label, isRequired && jsx(MandatoryIcon, __assign({ color: theme.colors.semantic.urgent.color }, { children: "*" }), void 0)] }), void 0));
+};
+var templateObject_1, templateObject_2;
+
+export { InputLabel, MandatoryIcon };
+//# sourceMappingURL=Label.js.map

package/build/index.esm.js/src/components/input/label/Label.js.map

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

package/build/index.esm.js/src/components/mobile/gallery/ImageProductWithTagsMobile.js

@@ -0,0 +1,121 @@
+import { __makeTemplateObject, __assign } from '../../../../node_modules/tslib/tslib.es6.js';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useRef, useState, useCallback, useEffect } from 'react';
+import newStyled from '../../../../node_modules/@emotion/styled/dist/emotion-styled.esm.js';
+import InnerImageZoom from '../../../../node_modules/react-inner-image-zoom/es/InnerImageZoom/InnerImageZoom.js';
+import Slider from '../../../../node_modules/@ant-design/react-slick/es/slider.js';
+import ButtonPrimary from '../../cta/primary/ButtonPrimary.js';
+import '../../../core/theme/Theme.js';
+import '../../../types/enums.js';
+import { Icon } from '../../icons/index.js';
+
+var Container = newStyled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n  position: relative;\n  max-height: 524px;\n  overflow: hidden;\n"], ["\n  ", "\n  position: relative;\n  max-height: 524px;\n  overflow: hidden;\n"])), function (_a) {
+    var borderRadiusVariant = _a.borderRadiusVariant;
+    return borderRadiusVariant &&
+        "\n    border-radius: 40px;\n  ";
+});
+// max-height: 31.875rem;
+var TopTagContainer = newStyled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: absolute;\n  left: ", ";\n  top: ", ";\n"], ["\n  position: absolute;\n  left: ", ";\n  top: ", ";\n"])), function (props) { return (props.borderRadiusVariant ? '13px' : '0'); }, function (props) { return (props.borderRadiusVariant ? '11px' : '0'); });
+var BottomTagContainer = newStyled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: absolute;\n  bottom: 3.75rem;\n  left: 0;\n"], ["\n  position: absolute;\n  bottom: 3.75rem;\n  left: 0;\n"])));
+var VideoOverlay = newStyled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  content: '';\n  background: transparent;\n  width: 100%;\n  height: 100%;\n  min-height: 1px;\n  position: absolute;\n  top: 0;\n"], ["\n  content: '';\n  background: transparent;\n  width: 100%;\n  height: 100%;\n  min-height: 1px;\n  position: absolute;\n  top: 0;\n"])));
+var Video = newStyled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  height: 510px;\n  background: #efefef;\n\n  & > iframe {\n    border: none;\n  }\n"], ["\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  height: 510px;\n  background: #efefef;\n\n  & > iframe {\n    border: none;\n  }\n"])));
+var VideoTag = newStyled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  gap: 8px;\n  position: absolute;\n  width: 100%;\n  bottom: 50px;\n  display: flex;\n  padding: 8.6px 0;\n  font-weight: 600;\n  align-items: center;\n  background: #f7f7f7;\n  justify-content: center;\n"], ["\n  gap: 8px;\n  position: absolute;\n  width: 100%;\n  bottom: 50px;\n  display: flex;\n  padding: 8.6px 0;\n  font-weight: 600;\n  align-items: center;\n  background: #f7f7f7;\n  justify-content: center;\n"])));
+var Text = newStyled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  padding-top: 3px;\n"], ["\n  padding-top: 3px;\n"])));
+var NavButtonContainer = newStyled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  height: 40px;\n  width: 40px;\n"], ["\n  height: 40px;\n  width: 40px;\n"])));
+var Button = newStyled.button(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  background: transparent;\n  border: none;\n  padding: 0.188rem 0.625rem;\n  z-index: 5;\n  height: 40px !important;\n  cursor: pointer;\n"], ["\n  background: transparent;\n  border: none;\n  padding: 0.188rem 0.625rem;\n  z-index: 5;\n  height: 40px !important;\n  cursor: pointer;\n"])));
+var settings = {
+    dots: true,
+    infinite: false,
+    speed: 200,
+    slidesToShow: 1,
+    slidesToScroll: 1,
+    initialSlide: 0,
+};
+var ImageProductWithTags = function (_a) {
+    var images = _a.images, _b = _a.customClick, customClick = _b === void 0 ? false : _b, topTag = _a.topTag, bottomTag = _a.bottomTag, testId = _a.testId, borderRadiusVariant = _a.borderRadiusVariant, selectedValue = _a.selectedValue;
+    var slick = useRef(null);
+    var sliderWrapper = useRef(null);
+    var iframeRef = useRef(null);
+    var _c = useState(false), isPlaying = _c[0], setIsPlaying = _c[1];
+    usePreventVerticalScroll(sliderWrapper);
+    var onButtonClick = useCallback(function (i) {
+        var _a;
+        (_a = slick.current) === null || _a === void 0 ? void 0 : _a.slickGoTo(i);
+    }, [slick]);
+    var _sendCommandToIframe = function (command) {
+        var iframe = document.getElementById('vwo-video');
+        (iframe === null || iframe === void 0 ? void 0 : iframe.contentWindow) &&
+            iframe.contentWindow.postMessage(JSON.stringify({
+                event: 'command',
+                func: command,
+            }), '*');
+    };
+    var _stopVideo = function () {
+        _sendCommandToIframe('stopVideo');
+        setIsPlaying(false);
+    };
+    var _playVideo = function () {
+        _sendCommandToIframe('playVideo');
+        setIsPlaying(true);
+    };
+    useEffect(function () {
+        var _a;
+        if (selectedValue) {
+            var matchingIndex = images.findIndex(function (image) { return image.imageUrl === selectedValue.imageUrl; });
+            if (matchingIndex !== -1) {
+                (_a = slick.current) === null || _a === void 0 ? void 0 : _a.slickGoTo(matchingIndex);
+            }
+        }
+    }, [images, selectedValue]);
+    return (jsxs(Fragment, { children: [customClick && (jsx("div", __assign({ style: { display: 'flex', marginBottom: '20px', gap: '10px' } }, { children: images.map(function (_, i) { return (jsx(ButtonPrimary, { onClick: function () { return onButtonClick(i); }, text: String(i + 1), inline: true }, i)); }) }), void 0)), jsx(Container, __assign({ "data-testid": testId, borderRadiusVariant: borderRadiusVariant, ref: sliderWrapper }, { children: jsx(Slider, __assign({ afterChange: function (e) {
+                        var _a;
+                        var activeSlide = images[e];
+                        // If autoplay is true and iframe is the active slide, play the video
+                        var autoplay = (_a = activeSlide === null || activeSlide === void 0 ? void 0 : activeSlide.imageUrl) === null || _a === void 0 ? void 0 : _a.includes('autoplay=1');
+                        autoplay ? _playVideo() : _stopVideo();
+                    } }, settings, { nextArrow: jsx(NavButtonContainer, { children: jsx(Button, { children: jsx(Icon.Arrows.ChevronRight, { height: 2.125, width: 1.25, fill: "#292929" }, void 0) }, void 0) }, void 0), prevArrow: jsx(NavButtonContainer, { children: jsx(Button, { children: jsx(Icon.Arrows.ChevronLeft, { height: 2.125, width: 1.25, fill: "#292929" }, void 0) }, void 0) }, void 0), ref: slick }, { children: images.map(function (image) {
+                        var _a, _b;
+                        return (jsxs("div", { children: [!((_a = image === null || image === void 0 ? void 0 : image.alt) === null || _a === void 0 ? void 0 : _a.includes('-video')) && (jsxs(Fragment, { children: [jsx(InnerImageZoom, { src: image.imageUrl, zoomSrc: image.imageUrl, zoomType: "hover", imgAttributes: { alt: image.alt, width: '100%', height: '510px' }, height: 510, fullscreenOnMobile: true, className: "zoomWrapper" }, void 0), jsx(TopTagContainer, __assign({ borderRadiusVariant: borderRadiusVariant, "data-testid": "topTag" }, { children: topTag }), void 0), jsx(BottomTagContainer, __assign({ "data-testid": "bottomTag" }, { children: bottomTag }), void 0)] }, void 0)), ((_b = image === null || image === void 0 ? void 0 : image.alt) === null || _b === void 0 ? void 0 : _b.includes('-video')) && (jsxs(Video, { children: [jsx("iframe", { id: "vwo-video", ref: iframeRef, allowFullScreen: true, title: image.alt, width: "100%", height: "220px", src: image === null || image === void 0 ? void 0 : image.imageUrl, allow: "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" }, void 0), jsx(VideoOverlay, { onClick: function () {
+                                                isPlaying ? _stopVideo() : _playVideo();
+                                            } }, void 0), jsxs(VideoTag, { children: [jsx(Icon.PDP.PlayMini, { width: 1.5 }, void 0), jsx(Text, { children: "VIDEO" }, void 0)] }, void 0)] }, void 0))] }, image.key));
+                    }) }), void 0) }), void 0)] }, void 0));
+};
+function usePreventVerticalScroll(ref, dragThreshold) {
+    if (dragThreshold === void 0) { dragThreshold = 5; }
+    var firstClientX = useRef(0);
+    var clientX = useRef(0);
+    var preventTouch = useCallback(function (e) {
+        clientX.current = e.touches[0].clientX - firstClientX.current;
+        // Vertical scrolling does not work when you start swiping horizontally.
+        if (Math.abs(clientX.current) > dragThreshold) {
+            if (e.cancelable) {
+                e.preventDefault();
+            }
+            e.returnValue = false;
+            return false;
+        }
+        return true;
+    }, [dragThreshold]);
+    var touchStart = useCallback(function (e) {
+        firstClientX.current = e.touches[0].clientX;
+    }, []);
+    useEffect(function () {
+        var current = ref.current;
+        if (current) {
+            current.addEventListener('touchstart', touchStart);
+            current.addEventListener('touchmove', preventTouch, { passive: false });
+        }
+        return function () {
+            if (current) {
+                current.removeEventListener('touchstart', touchStart);
+                // Had to change this line to prevent a typing error. You may not have the issue:
+                // current.removeEventListener('touchmove', preventTouch, { passive: false })
+                current.removeEventListener('touchmove', preventTouch);
+            }
+        };
+    }, [preventTouch, ref, touchStart]);
+}
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;
+
+export { ImageProductWithTags as default, usePreventVerticalScroll };
+//# sourceMappingURL=ImageProductWithTagsMobile.js.map

package/build/index.esm.js/src/components/mobile/gallery/ImageProductWithTagsMobile.js.map

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

package/build/index.esm.js/src/components/mobile/gallery/ProductGalleryMobile.js

@@ -0,0 +1,14 @@
+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 ImageProductWithTags from './ImageProductWithTagsMobile.js';
+
+var Container = newStyled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  height: fit-content;\n  position: relative;\n  max-width: 450px;\n"], ["\n  display: flex;\n  flex-direction: column;\n  height: fit-content;\n  position: relative;\n  max-width: 450px;\n"])));
+var ProductGalleryMobile = function (_a) {
+    var images = _a.images, customClick = _a.customClick, topTag = _a.topTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, _b = _a.borderRadiusVariant, borderRadiusVariant = _b === void 0 ? false : _b, selectedValue = _a.selectedValue;
+    return (jsx(Container, { children: jsx(ImageProductWithTags, { images: images, customClick: customClick, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant, selectedValue: selectedValue }, void 0) }, void 0));
+};
+var templateObject_1;
+
+export { ProductGalleryMobile as default };
+//# sourceMappingURL=ProductGalleryMobile.js.map

package/build/index.esm.js/src/components/mobile/gallery/ProductGalleryMobile.js.map

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

package/build/index.esm.js/src/components/mobile/gallery/ProductGalleryMobileV2/ImageProductWithTagsMobileV2.js

@@ -0,0 +1,22 @@
+import { __makeTemplateObject, __assign } from '../../../../../node_modules/tslib/tslib.es6.js';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import newStyled from '../../../../../node_modules/@emotion/styled/dist/emotion-styled.esm.js';
+import InnerImageZoom from '../../../../../node_modules/react-inner-image-zoom/es/InnerImageZoom/InnerImageZoom.js';
+
+var Container = newStyled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n  position: relative;\n  max-height: 31.875rem;\n  overflow: hidden;\n"], ["\n  ", "\n  position: relative;\n  max-height: 31.875rem;\n  overflow: hidden;\n"])), function (_a) {
+    var borderRadiusVariant = _a.borderRadiusVariant;
+    return borderRadiusVariant &&
+        "\n    border-radius: 40px;\n  ";
+});
+var TopTagContainer = newStyled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: absolute;\n  left: ", ";\n  top: ", ";\n"], ["\n  position: absolute;\n  left: ", ";\n  top: ", ";\n"])), function (props) { return (props.borderRadiusVariant ? '13px' : '0'); }, function (props) { return (props.borderRadiusVariant ? '11px' : '0'); });
+var BottomTagContainer = newStyled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: absolute;\n  bottom: 3.75rem;\n  left: 0;\n"], ["\n  position: absolute;\n  bottom: 3.75rem;\n  left: 0;\n"])));
+var ImageProductWithTagsMobileV2 = forwardRef(function ImageProductWithTags(_a, ref) {
+    var _b, _c;
+    var image = _a.image, topTag = _a.topTag, bottomTag = _a.bottomTag, testId = _a.testId, borderRadiusVariant = _a.borderRadiusVariant;
+    return (jsxs(Container, __assign({ "data-testid": testId, ref: ref, borderRadiusVariant: borderRadiusVariant }, { children: [!((_b = image === null || image === void 0 ? void 0 : image.alt) === null || _b === void 0 ? void 0 : _b.includes('-video')) && (jsxs(Fragment, { children: [jsx(InnerImageZoom, { src: image.imageUrl, zoomSrc: image.imageUrl, zoomType: "hover", imgAttributes: { alt: image.alt, width: '100%', height: '510px' }, height: 510, fullscreenOnMobile: true, className: "zoomWrapper" }, void 0), jsx(TopTagContainer, __assign({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsx(BottomTagContainer, { children: bottomTag }, void 0)] }, void 0)), ((_c = image === null || image === void 0 ? void 0 : image.alt) === null || _c === void 0 ? void 0 : _c.includes('-video')) && (jsx("iframe", { allowFullScreen: true, title: image.alt, width: "100%", height: 510, src: image === null || image === void 0 ? void 0 : image.imageUrl, allow: "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" }, void 0))] }), void 0));
+});
+var templateObject_1, templateObject_2, templateObject_3;
+
+export { ImageProductWithTagsMobileV2 as default };
+//# sourceMappingURL=ImageProductWithTagsMobileV2.js.map

package/build/index.esm.js/src/components/mobile/gallery/ProductGalleryMobileV2/ImageProductWithTagsMobileV2.js.map

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

package/build/index.esm.js/src/components/mobile/gallery/ProductGalleryMobileV2/ProductGalleryMobileV2.js

@@ -0,0 +1,36 @@
+import { __makeTemplateObject, __assign } from '../../../../../node_modules/tslib/tslib.es6.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useEffect, useCallback } from 'react';
+import newStyled from '../../../../../node_modules/@emotion/styled/dist/emotion-styled.esm.js';
+import { useSwipeable } from '../../../../../node_modules/react-swipeable/dist/react-swipeable.module.js';
+import ImageProductWithTagsMobileV2 from './ImageProductWithTagsMobileV2.js';
+import SlideNavigation from '../slide_navigation/SlideNavigation.js';
+
+var Container = newStyled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  height: fit-content;\n  position: relative;\n  max-width: 450px;\n"], ["\n  display: flex;\n  flex-direction: column;\n  height: fit-content;\n  position: relative;\n  max-width: 450px;\n"])));
+var ProductGalleryMobileV2 = function (_a) {
+    var images = _a.images, selectedValue = _a.selectedValue, topTag = _a.topTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, slideDotsDataTestId = _a.slideDotsDataTestId, _b = _a.borderRadiusVariant, borderRadiusVariant = _b === void 0 ? false : _b;
+    var _c = useState(0), index = _c[0], setIndex = _c[1];
+    useEffect(function () {
+        if (selectedValue == null) {
+            return;
+        }
+        setIndex(Math.max(0, images.indexOf(selectedValue)));
+    }, [selectedValue, images]);
+    var _d = useState(function () { return images[index]; }), selectedImage = _d[0], setSelectedImage = _d[1];
+    var handlers = useSwipeable({
+        onSwipedLeft: useCallback(function () {
+            setIndex(function (index) { return Math.min(index + 1, images.length - 1); });
+        }, [images.length]),
+        onSwipedRight: useCallback(function () {
+            setIndex(function (index) { return Math.max(index - 1, 0); });
+        }, []),
+    });
+    useEffect(function () {
+        setSelectedImage(images[index]);
+    }, [index, images]);
+    return (jsxs(Container, { children: [jsx(ImageProductWithTagsMobileV2, __assign({}, handlers, { image: selectedImage, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant }), void 0), jsx(SlideNavigation, { quantity: images.length, selectedIndex: images.indexOf(selectedImage), onNavigate: setIndex, testId: slideDotsDataTestId }, void 0)] }, void 0));
+};
+var templateObject_1;
+
+export { ProductGalleryMobileV2 as default };
+//# sourceMappingURL=ProductGalleryMobileV2.js.map

package/build/index.esm.js/src/components/mobile/gallery/ProductGalleryMobileV2/ProductGalleryMobileV2.js.map

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

package/build/index.esm.js/src/components/mobile/gallery/slide_navigation/ArrowButton.js

@@ -0,0 +1,13 @@
+import { __makeTemplateObject, __assign } from '../../../../../node_modules/tslib/tslib.es6.js';
+import { jsx } from 'react/jsx-runtime';
+import newStyled from '../../../../../node_modules/@emotion/styled/dist/emotion-styled.esm.js';
+
+var Button = newStyled.button(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background: transparent;\n  border: none;\n  padding: 0.188rem 0.625rem;\n  z-index: 5;\n  top: calc(50% - 40px);\n  height: 40px !important;\n"], ["\n  background: transparent;\n  border: none;\n  padding: 0.188rem 0.625rem;\n  z-index: 5;\n  top: calc(50% - 40px);\n  height: 40px !important;\n"])));
+var ArrowButton = function (_a) {
+    var Icon = _a.Icon, onClick = _a.onClick, className = _a.className;
+    return (jsx(Button, __assign({ className: className, type: "button", onClick: onClick }, { children: Icon }), void 0));
+};
+var templateObject_1;
+
+export { ArrowButton as default };
+//# sourceMappingURL=ArrowButton.js.map

package/build/index.esm.js/src/components/mobile/gallery/slide_navigation/ArrowButton.js.map

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

package/build/index.esm.js/src/components/mobile/gallery/slide_navigation/SlideDots.js

@@ -0,0 +1,19 @@
+import { __makeTemplateObject, __assign, __spreadArray } 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';
+import { Icon } from '../../../icons/index.js';
+
+var Container = newStyled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  bottom: 15px;\n  display: flex;\n  justify-content: center;\n  width: 100%;\n  svg {\n    padding: 0.125rem;\n    margin-left: 0.25rem;\n  }\n"], ["\n  position: absolute;\n  bottom: 15px;\n  display: flex;\n  justify-content: center;\n  width: 100%;\n  svg {\n    padding: 0.125rem;\n    margin-left: 0.25rem;\n  }\n"])));
+var range = function (limit) { return __spreadArray([], new Array(limit), true).map(function (_, index) { return index; }); };
+var SlideDots = function (_a) {
+    var quantity = _a.quantity, selectedIndex = _a.selectedIndex, containerDataTestId = _a.containerDataTestId;
+    var theme = useTheme();
+    return (jsx(Container, __assign({ "data-testid": containerDataTestId }, { children: range(quantity).map(function (index) { return (jsx(Icon.SlideDots.SlideDot, { height: 0.75, width: 0.75, fill: index === selectedIndex
+                ? theme.component.slideNavigation.slideDots.selectedDotColor
+                : theme.component.slideNavigation.slideDots.unselectedDotColor, opacity: theme.component.slideNavigation.slideDots.dotsOpacity, testId: "slide-dot-".concat(index) }, index)); }) }), void 0));
+};
+var templateObject_1;
+
+export { SlideDots as default };
+//# sourceMappingURL=SlideDots.js.map

package/build/index.esm.js/src/components/mobile/gallery/slide_navigation/SlideDots.js.map

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

package/build/index.esm.js/src/components/mobile/gallery/slide_navigation/SlideNavigation.js

@@ -0,0 +1,26 @@
+import { __makeTemplateObject } from '../../../../../node_modules/tslib/tslib.es6.js';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import newStyled from '../../../../../node_modules/@emotion/styled/dist/emotion-styled.esm.js';
+import { Icon } from '../../../icons/index.js';
+import ArrowButton from './ArrowButton.js';
+import SlideDots from './SlideDots.js';
+import { useTheme } from '../../../../core/theme/Theme.js';
+
+var NavigationButton = newStyled(ArrowButton)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n"], ["\n  position: absolute;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n"])));
+var RightButton = newStyled(NavigationButton)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  right: 0;\n"], ["\n  right: 0;\n"])));
+var LeftButton = newStyled(NavigationButton)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  left: 0;\n"], ["\n  left: 0;\n"])));
+var SlideNavigation = function (_a) {
+    var quantity = _a.quantity, selectedIndex = _a.selectedIndex, onNavigate = _a.onNavigate, testId = _a.testId;
+    var theme = useTheme();
+    var upperLimit = quantity - 1;
+    var lowerLimit = 0;
+    return (jsxs(Fragment, { children: [selectedIndex > lowerLimit && (jsx(LeftButton, { Icon: jsx(Icon.Arrows.ChevronLeft, { height: 2.125, width: 1.25, fill: theme.colors.shades['700'].color, opacity: 0.5 }, void 0), onClick: function () {
+                    onNavigate(selectedIndex - 1);
+                } }, void 0)), selectedIndex < upperLimit && (jsx(RightButton, { Icon: jsx(Icon.Arrows.ChevronRight, { height: 2.125, width: 1.25, fill: theme.colors.shades['700'].color, opacity: 0.5 }, void 0), onClick: function () {
+                    onNavigate(selectedIndex + 1);
+                } }, void 0)), jsx(SlideDots, { quantity: quantity, selectedIndex: selectedIndex, containerDataTestId: testId }, void 0)] }, void 0));
+};
+var templateObject_1, templateObject_2, templateObject_3;
+
+export { SlideNavigation as default };
+//# sourceMappingURL=SlideNavigation.js.map

package/build/index.esm.js/src/components/mobile/gallery/slide_navigation/SlideNavigation.js.map

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

package/build/index.esm.js/src/components/modal/Modal.js

@@ -0,0 +1,65 @@
+import { __makeTemplateObject, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import { jsxs, jsx } from '../../../node_modules/@emotion/react/jsx-runtime/dist/emotion-react-jsx-runtime.esm.js';
+import { css } from '../../../node_modules/@emotion/react/dist/emotion-react.esm.js';
+import newStyled from '../../../node_modules/@emotion/styled/dist/emotion-styled.esm.js';
+import events from '../../../node_modules/@ribeirolabs/events/index.js';
+import react from '../../../node_modules/@ribeirolabs/events/react/index.js';
+import { useMemo, useCallback, useState } from 'react';
+import { Portal } from '../shared/portal/Portal.js';
+import { mediaQueries } from '../../utils/media.js';
+
+var visibleStyle = function (_a) {
+    var opened = _a.opened;
+    return opened
+        ? css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        opacity: 1;\n        pointer-events: all;\n      "], ["\n        opacity: 1;\n        pointer-events: all;\n      "]))) : css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n        opacity: 0;\n        pointer-events: none;\n      "], ["\n        opacity: 0;\n        pointer-events: none;\n      "])));
+};
+var transformStyle = function (_a) {
+    var opened = _a.opened, maxFullScreen = _a.maxFullScreen;
+    return opened
+        ? css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n        transform: ", ";\n      "], ["\n        transform: ", ";\n      "])), maxFullScreen ? 'translateY(0)' : 'translate(-50%, -50%)') : css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n        transform: ", ";\n      "], ["\n        transform: ", ";\n      "])), maxFullScreen ? 'translateY(10%)' : 'translate(-50%, -40%)');
+};
+var Container = newStyled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  border: 1px solid var(--colors-pallete-primary-color);\n  border-radius: ", ";\n  padding: ", ";\n  position: fixed;\n  left: ", ";\n  top: ", ";\n  z-index: var(--zIndex-modal);\n  background-color: var(--colors-background-color);\n  transition: transform 0.3s, opacity 0.3s;\n  overflow-y: auto;\n  max-width: ", ";\n  max-height: ", ";\n  width: ", ";\n  height: ", ";\n  ", "\n\n  ", "\n  ", "\n"], ["\n  border: 1px solid var(--colors-pallete-primary-color);\n  border-radius: ", ";\n  padding: ", ";\n  position: fixed;\n  left: ", ";\n  top: ", ";\n  z-index: var(--zIndex-modal);\n  background-color: var(--colors-background-color);\n  transition: transform 0.3s, opacity 0.3s;\n  overflow-y: auto;\n  max-width: ", ";\n  max-height: ", ";\n  width: ", ";\n  height: ", ";\n  ", "\n\n  ", "\n  ", "\n"])), function (props) { return "".concat(props.maxFullScreen ? '0' : 'var(--radius-regular)'); }, function (props) { return "".concat(props.padding ? props.padding : '20px'); }, function (props) { return "".concat(props.maxFullScreen ? '0' : '50%'); }, function (props) { return "".concat(props.maxFullScreen ? '0' : '50%'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : '90vw'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : '90vh'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : 'auto'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : 'inherit'); }, mediaQueries({
+    minWidth: ['90%', 'var(--component-modal-minWidth)'],
+}), visibleStyle, transformStyle);
+var Overlay = newStyled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  position: fixed;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  background-color: rgba(0, 0, 0, 0.75);\n  z-index: var(--zIndex-overlay);\n  transition: opacity 0.3s;\n\n  ", "\n"], ["\n  position: fixed;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  background-color: rgba(0, 0, 0, 0.75);\n  z-index: var(--zIndex-overlay);\n  transition: opacity 0.3s;\n\n  ", "\n"])), visibleStyle);
+var Modal = function (_a) {
+    var id = _a.id, children = _a.children, _b = _a.dismissable, dismissable = _b === void 0 ? true : _b, _c = _a.maxFullScreen, maxFullScreen = _c === void 0 ? false : _c, padding = _a.padding;
+    var _d = useModal(id), opened = _d.opened, close = _d.close;
+    var onDismiss = function () {
+        if (!dismissable) {
+            return;
+        }
+        close();
+    };
+    return (jsxs(Portal, __assign({ id: id }, { children: [jsx(Container, __assign({ opened: opened, maxFullScreen: maxFullScreen, padding: padding }, { children: children }), void 0), jsx(Overlay, { opened: opened, onClick: onDismiss }, void 0)] }), void 0));
+};
+var modalEvent = function (id, detail) {
+    events.dispatchCustomEvent('modal', __assign({ id: id }, detail));
+};
+var useModalEvent = function (id, cb) {
+    react.useEvent('modal', useCallback(function (event) {
+        if (event.detail.id !== id) {
+            return;
+        }
+        cb(event);
+    }, [id, cb]));
+};
+var useModal = function (id) {
+    var _a = useState(false), opened = _a[0], setOpened = _a[1];
+    useModalEvent(id, useCallback(function (event) { return setOpened(event.detail.type === 'open'); }, []));
+    var open = useCallback(function () {
+        modalEvent(id, { type: 'open' });
+    }, [id]);
+    var close = useCallback(function () {
+        modalEvent(id, { type: 'close' });
+    }, [id]);
+    return useMemo(function () { return ({
+        opened: opened,
+        open: open,
+        close: close,
+    }); }, [close, open, opened]);
+};
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
+
+export { Modal, Overlay, modalEvent, useModal, useModalEvent };
+//# sourceMappingURL=Modal.js.map

package/build/index.esm.js/src/components/modal/Modal.js.map

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

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

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

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

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

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

@@ -0,0 +1,21 @@
+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.h3(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  margin: 0;\n  padding: 0.25rem 0.5rem;\n  font-size: 0.625rem;\n  font-weight: 700;\n  line-height: 0.875rem;\n  border-radius: 0.125rem;\n  display: initial;\n  color: ", ";\n"], ["\n  background-color: ", ";\n  margin: 0;\n  padding: 0.25rem 0.5rem;\n  font-size: 0.625rem;\n  font-weight: 700;\n  line-height: 0.875rem;\n  border-radius: 0.125rem;\n  display: initial;\n  color: ", ";\n"])), function (_a) {
+    var backgroundColor = _a.backgroundColor;
+    return backgroundColor;
+}, function (_a) {
+    var color = _a.color;
+    return color;
+});
+var OfferBanner = function (_a) {
+    var discountAppliedText = _a.discountAppliedText, backgroundColor = _a.backgroundColor;
+    var theme = useTheme();
+    return (jsx(Text, __assign({ backgroundColor: backgroundColor, color: theme.colors.shades['700'].color, "data-testid": "OfferBanner" }, { children: discountAppliedText }), void 0));
+};
+var templateObject_1;
+
+export { OfferBanner, Text };
+//# sourceMappingURL=OfferBanner.js.map

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

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

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

@@ -0,0 +1,20 @@
+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 { Icon } from '../icons/index.js';
+import { useTheme } from '../../core/theme/Theme.js';
+
+var Container = newStyled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: ", ";\n  padding: 0.75rem 0;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: ", ";\n  padding: 0.75rem 0;\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.component.orderBar.backgroundColor;
+});
+var H1 = newStyled.h1(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin: 0;\n  font-size: 1rem;\n  line-height: 1.5rem;\n  font-weight: 600;\n  color: ", ";\n  margin-left: 0.625rem;\n"], ["\n  margin: 0;\n  font-size: 1rem;\n  line-height: 1.5rem;\n  font-weight: 600;\n  color: ", ";\n  margin-left: 0.625rem;\n"])), function (props) { return props.color; });
+var OrderBar = function (_a) {
+    var message = _a.message, color = _a.color;
+    var theme = useTheme();
+    return (jsxs(Container, __assign({ color: color }, { children: [jsx(Icon.Actions.Check, { width: 1.25, height: 0.875, fill: "#2F806A" }, void 0), jsx(H1, __assign({ color: theme.component.orderBar.fontColor }, { children: message }), void 0)] }), void 0));
+};
+var templateObject_1, templateObject_2;
+
+export { Container, H1, OrderBar };
+//# sourceMappingURL=OrderBar.js.map

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

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