@trafilea/afrodita-components 5.0.0-beta.272 → 5.0.0-beta.274

package/build/index.d.ts

@@ -2650,9 +2650,8 @@ interface ProductGalleryMobileProps$1 {
     productImageDataTestId?: string;
     borderRadiusVariant?: boolean;
     selectedValue?: ImageType;
-    navArrowBackground?: boolean;
 }
-declare const ProductGalleryMobile: ({ images, customClick, topTag, bottomTag, productImageDataTestId, borderRadiusVariant, selectedValue, navArrowBackground, }: ProductGalleryMobileProps$1) => JSX.Element;
+declare const ProductGalleryMobile: ({ images, customClick, topTag, bottomTag, productImageDataTestId, borderRadiusVariant, selectedValue, }: ProductGalleryMobileProps$1) => JSX.Element;
 
 interface RadioProps {
     name: string;

package/build/index.esm.js

@@ -5287,7 +5287,7 @@ var Price = newStyled.p(templateObject_2$X || (templateObject_2$X = __makeTempla
     var finalPriceStyledSmall = _a.finalPriceStyledSmall, size = _a.size;
     return finalPriceStyledSmall ? (size === 'large' ? '-10px' : '-7px') : '0';
 });
-var TagContainer = newStyled.p(templateObject_3$L || (templateObject_3$L = __makeTemplateObject(["\n  margin: ", ";\n  display: flex;\n  align-items: center;\n"], ["\n  margin: ", ";\n  display: flex;\n  align-items: center;\n"])), function (_a) {
+var TagContainer = newStyled.div(templateObject_3$L || (templateObject_3$L = __makeTemplateObject(["\n  margin: ", ";\n  display: flex;\n  align-items: center;\n"], ["\n  margin: ", ";\n  display: flex;\n  align-items: center;\n"])), function (_a) {
     var _b;
     var size = _a.size;
     return (_b = getStylesBySize$7(size)) === null || _b === void 0 ? void 0 : _b.margin;
@@ -13885,8 +13885,8 @@ var VideoOverlay$1 = newStyled.div(templateObject_4$e || (templateObject_4$e = _
 var Video = newStyled.div(templateObject_5$9 || (templateObject_5$9 = __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$8 || (templateObject_6$8 = __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$3 = newStyled.div(templateObject_7$6 || (templateObject_7$6 = __makeTemplateObject(["\n  padding-top: 3px;\n"], ["\n  padding-top: 3px;\n"])));
-var NavButtonContainer = newStyled.div(templateObject_8$5 || (templateObject_8$5 = __makeTemplateObject(["\n  height: 80px;\n  width: 40px;\n  background-color: ", ";\n"], ["\n  height: 80px;\n  width: 40px;\n  background-color: ", ";\n"])), function (props) { return (props.navArrowBackground ? 'rgba(0,0,0,0.1) !important' : ''); });
-var Button$1 = newStyled.button(templateObject_9$3 || (templateObject_9$3 = __makeTemplateObject(["\n  background: transparent;\n  border: none;\n  padding: 0.188rem 0.625rem;\n  z-index: 5;\n  height: 40px !important;\n  margin: 20px 0;\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  margin: 20px 0;\n  cursor: pointer;\n"])));
+var NavButtonContainer = newStyled.div(templateObject_8$5 || (templateObject_8$5 = __makeTemplateObject(["\n  height: 40px;\n  width: 40px;\n"], ["\n  height: 40px;\n  width: 40px;\n"])));
+var Button$1 = newStyled.button(templateObject_9$3 || (templateObject_9$3 = __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,
@@ -13896,7 +13896,7 @@ var settings = {
     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, navArrowBackground = _a.navArrowBackground;
+    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);
@@ -13937,7 +13937,7 @@ var ImageProductWithTags = function (_a) {
                         // 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$1(NavButtonContainer, __assign$1({ navArrowBackground: navArrowBackground }, { children: jsx$1(Button$1, { children: jsx$1(Icon.Arrows.ChevronRight, { height: 2.125, width: 1.25, fill: "#292929", opacity: 0.5 }, void 0) }, void 0) }), void 0), prevArrow: jsx$1(NavButtonContainer, __assign$1({ navArrowBackground: navArrowBackground }, { children: jsx$1(Button$1, { children: jsx$1(Icon.Arrows.ChevronLeft, { height: 2.125, width: 1.25, fill: "#292929", opacity: 0.5 }, void 0) }, void 0) }), void 0), ref: slick }, { children: images.map(function (image) {
+                    } }, settings, { nextArrow: jsx$1(NavButtonContainer, { children: jsx$1(Button$1, { children: jsx$1(Icon.Arrows.ChevronRight, { height: 2.125, width: 1.25, fill: "#292929" }, void 0) }, void 0) }, void 0), prevArrow: jsx$1(NavButtonContainer, { children: jsx$1(Button$1, { children: jsx$1(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$1("div", { children: [!((_a = image === null || image === void 0 ? void 0 : image.alt) === null || _a === void 0 ? void 0 : _a.includes('-video')) && (jsxs$1(Fragment$1, { children: [jsx$1(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$1(TopTagContainer$1, __assign$1({ borderRadiusVariant: borderRadiusVariant, "data-testid": "topTag" }, { children: topTag }), void 0), jsx$1(BottomTagContainer$1, __assign$1({ "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$1(Video, { children: [jsx$1("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$1(VideoOverlay$1, { onClick: function () {
                                                 isPlaying ? _stopVideo() : _playVideo();
@@ -13983,8 +13983,8 @@ var templateObject_1$w, templateObject_2$l, templateObject_3$k, templateObject_4
 
 var Container$n = newStyled.div(templateObject_1$v || (templateObject_1$v = __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, _c = _a.navArrowBackground, navArrowBackground = _c === void 0 ? false : _c;
-    return (jsx$1(Container$n, { children: jsx$1(ImageProductWithTags, { images: images, customClick: customClick, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant, selectedValue: selectedValue, navArrowBackground: navArrowBackground }, void 0) }, void 0));
+    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$1(Container$n, { children: jsx$1(ImageProductWithTags, { images: images, customClick: customClick, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant, selectedValue: selectedValue }, void 0) }, void 0));
 };
 var templateObject_1$v;
 

package/build/index.js

@@ -5313,7 +5313,7 @@ var Price = newStyled.p(templateObject_2$X || (templateObject_2$X = __makeTempla
     var finalPriceStyledSmall = _a.finalPriceStyledSmall, size = _a.size;
     return finalPriceStyledSmall ? (size === 'large' ? '-10px' : '-7px') : '0';
 });
-var TagContainer = newStyled.p(templateObject_3$L || (templateObject_3$L = __makeTemplateObject(["\n  margin: ", ";\n  display: flex;\n  align-items: center;\n"], ["\n  margin: ", ";\n  display: flex;\n  align-items: center;\n"])), function (_a) {
+var TagContainer = newStyled.div(templateObject_3$L || (templateObject_3$L = __makeTemplateObject(["\n  margin: ", ";\n  display: flex;\n  align-items: center;\n"], ["\n  margin: ", ";\n  display: flex;\n  align-items: center;\n"])), function (_a) {
     var _b;
     var size = _a.size;
     return (_b = getStylesBySize$7(size)) === null || _b === void 0 ? void 0 : _b.margin;
@@ -13911,8 +13911,8 @@ var VideoOverlay$1 = newStyled.div(templateObject_4$e || (templateObject_4$e = _
 var Video = newStyled.div(templateObject_5$9 || (templateObject_5$9 = __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$8 || (templateObject_6$8 = __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$3 = newStyled.div(templateObject_7$6 || (templateObject_7$6 = __makeTemplateObject(["\n  padding-top: 3px;\n"], ["\n  padding-top: 3px;\n"])));
-var NavButtonContainer = newStyled.div(templateObject_8$5 || (templateObject_8$5 = __makeTemplateObject(["\n  height: 80px;\n  width: 40px;\n  background-color: ", ";\n"], ["\n  height: 80px;\n  width: 40px;\n  background-color: ", ";\n"])), function (props) { return (props.navArrowBackground ? 'rgba(0,0,0,0.1) !important' : ''); });
-var Button$1 = newStyled.button(templateObject_9$3 || (templateObject_9$3 = __makeTemplateObject(["\n  background: transparent;\n  border: none;\n  padding: 0.188rem 0.625rem;\n  z-index: 5;\n  height: 40px !important;\n  margin: 20px 0;\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  margin: 20px 0;\n  cursor: pointer;\n"])));
+var NavButtonContainer = newStyled.div(templateObject_8$5 || (templateObject_8$5 = __makeTemplateObject(["\n  height: 40px;\n  width: 40px;\n"], ["\n  height: 40px;\n  width: 40px;\n"])));
+var Button$1 = newStyled.button(templateObject_9$3 || (templateObject_9$3 = __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,
@@ -13922,7 +13922,7 @@ var settings = {
     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, navArrowBackground = _a.navArrowBackground;
+    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 = React$2.useRef(null);
     var sliderWrapper = React$2.useRef(null);
     var iframeRef = React$2.useRef(null);
@@ -13963,7 +13963,7 @@ var ImageProductWithTags = function (_a) {
                         // 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: jsxRuntime.jsx(NavButtonContainer, __assign$1({ navArrowBackground: navArrowBackground }, { children: jsxRuntime.jsx(Button$1, { children: jsxRuntime.jsx(Icon.Arrows.ChevronRight, { height: 2.125, width: 1.25, fill: "#292929", opacity: 0.5 }, void 0) }, void 0) }), void 0), prevArrow: jsxRuntime.jsx(NavButtonContainer, __assign$1({ navArrowBackground: navArrowBackground }, { children: jsxRuntime.jsx(Button$1, { children: jsxRuntime.jsx(Icon.Arrows.ChevronLeft, { height: 2.125, width: 1.25, fill: "#292929", opacity: 0.5 }, void 0) }, void 0) }), void 0), ref: slick }, { children: images.map(function (image) {
+                    } }, settings, { nextArrow: jsxRuntime.jsx(NavButtonContainer, { children: jsxRuntime.jsx(Button$1, { children: jsxRuntime.jsx(Icon.Arrows.ChevronRight, { height: 2.125, width: 1.25, fill: "#292929" }, void 0) }, void 0) }, void 0), prevArrow: jsxRuntime.jsx(NavButtonContainer, { children: jsxRuntime.jsx(Button$1, { children: jsxRuntime.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 (jsxRuntime.jsxs("div", { children: [!((_a = image === null || image === void 0 ? void 0 : image.alt) === null || _a === void 0 ? void 0 : _a.includes('-video')) && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.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), jsxRuntime.jsx(TopTagContainer$1, __assign$1({ borderRadiusVariant: borderRadiusVariant, "data-testid": "topTag" }, { children: topTag }), void 0), jsxRuntime.jsx(BottomTagContainer$1, __assign$1({ "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')) && (jsxRuntime.jsxs(Video, { children: [jsxRuntime.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), jsxRuntime.jsx(VideoOverlay$1, { onClick: function () {
                                                 isPlaying ? _stopVideo() : _playVideo();
@@ -14009,8 +14009,8 @@ var templateObject_1$w, templateObject_2$l, templateObject_3$k, templateObject_4
 
 var Container$n = newStyled.div(templateObject_1$v || (templateObject_1$v = __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, _c = _a.navArrowBackground, navArrowBackground = _c === void 0 ? false : _c;
-    return (jsxRuntime.jsx(Container$n, { children: jsxRuntime.jsx(ImageProductWithTags, { images: images, customClick: customClick, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant, selectedValue: selectedValue, navArrowBackground: navArrowBackground }, void 0) }, void 0));
+    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 (jsxRuntime.jsx(Container$n, { children: jsxRuntime.jsx(ImageProductWithTags, { images: images, customClick: customClick, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant, selectedValue: selectedValue }, void 0) }, void 0));
 };
 var templateObject_1$v;
 

package/package.json

@@ -3,7 +3,7 @@
   "description": "Trafilea's Design System",
   "author": "Trafilea",
   "repository": "https://github.com/trafilea/afrodita-components",
-  "version": "5.0.0-beta.272",
+  "version": "5.0.0-beta.274",
   "private": false,
   "main": "build/index.js",
   "style": "build/index.css",