@trafilea/afrodita-components 5.0.0-beta.92 → 5.0.0-beta.93

package/build/index.d.ts

@@ -734,11 +734,12 @@ interface PriceLabelProps {
     finalPriceStyled?: boolean;
     finalPriceStyle?: React.CSSProperties;
     originalPriceStyled?: boolean;
+    originalPriceUnderlined?: boolean;
     testId?: string;
 }
-declare const PriceLabel: ({ finalPrice, originalPrice, discount, color, testId, finalPriceStyled, finalPriceStyle, originalPriceStyled, size, }: PriceLabelProps) => JSX.Element;
+declare const PriceLabel: ({ finalPrice, originalPrice, discount, color, testId, finalPriceStyled, finalPriceStyle, originalPriceStyled, originalPriceUnderlined, size, }: PriceLabelProps) => JSX.Element;
 
-declare const PriceLabelV2: ({ finalPrice, originalPrice, discount, color, testId, originalPriceStyled, size, }: PriceLabelProps) => JSX.Element;
+declare const PriceLabelV2: ({ finalPrice, originalPrice, discount, color, testId, originalPriceStyled, originalPriceUnderlined, size, }: PriceLabelProps) => JSX.Element;
 
 interface ColorPickerProps {
     options: ColorPickerOption[];
@@ -765,8 +766,9 @@ interface ProductGalleryProps {
     productImageDataTestId?: string;
     previewListDataTestId?: string;
     thumbnailPosition?: 'vertical' | 'horizontal';
+    borderRadiusVariant?: boolean;
 }
-declare const ProductGallery: ({ images, selectedValue, topTag, bottomTag, productImageDataTestId, previewListDataTestId, thumbnailPosition, }: ProductGalleryProps) => JSX.Element;
+declare const ProductGallery: ({ images, selectedValue, topTag, bottomTag, productImageDataTestId, previewListDataTestId, thumbnailPosition, borderRadiusVariant, }: ProductGalleryProps) => JSX.Element;
 
 interface RatingProps {
     rating: number;
@@ -1314,16 +1316,18 @@ interface CategoryTagProps {
     text: string;
     size: ComponentSize.Large | ComponentSize.Medium | ComponentSize.Small;
     className?: string;
+    styledBorder?: boolean;
 }
-declare const CategoryTag: ({ text, size, className }: CategoryTagProps) => _emotion_react_jsx_runtime.JSX.Element;
+declare const CategoryTag: ({ text, size, className, styledBorder }: CategoryTagProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 interface SeasonOfferTagProps {
     text: string;
     backgroundColor?: string;
     size: ComponentSize.Large | ComponentSize.Medium | ComponentSize.Small;
     className?: string;
+    styledBorder?: boolean;
 }
-declare const SeasonOfferTag: ({ text, backgroundColor, size, className, }: SeasonOfferTagProps) => _emotion_react_jsx_runtime.JSX.Element;
+declare const SeasonOfferTag: ({ text, backgroundColor, size, className, styledBorder, }: SeasonOfferTagProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 interface TimeProps {
     hours: number;
@@ -1823,8 +1827,9 @@ interface ProductGalleryMobileProps {
     bottomTag?: JSX.Element;
     productImageDataTestId?: string;
     slideDotsDataTestId?: string;
+    borderRadiusVariant?: boolean;
 }
-declare const ProductGalleryMobile: ({ images, selectedValue, topTag, bottomTag, productImageDataTestId, slideDotsDataTestId, }: ProductGalleryMobileProps) => JSX.Element;
+declare const ProductGalleryMobile: ({ images, selectedValue, topTag, bottomTag, productImageDataTestId, slideDotsDataTestId, borderRadiusVariant, }: ProductGalleryMobileProps) => JSX.Element;
 
 interface RadioProps {
     name: string;

package/build/index.esm.js

@@ -4642,14 +4642,14 @@ function getTestId() {
     return args.filter(Boolean).join('-');
 }
 var PriceLabel = function (_a) {
-    var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, discount = _a.discount, color = _a.color, testId = _a.testId, _b = _a.finalPriceStyled, finalPriceStyled = _b === void 0 ? false : _b, finalPriceStyle = _a.finalPriceStyle, _c = _a.originalPriceStyled, originalPriceStyled = _c === void 0 ? false : _c, _d = _a.size, size = _d === void 0 ? ComponentSize.Medium : _d;
+    var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, discount = _a.discount, color = _a.color, testId = _a.testId, _b = _a.finalPriceStyled, finalPriceStyled = _b === void 0 ? false : _b, finalPriceStyle = _a.finalPriceStyle, _c = _a.originalPriceStyled, originalPriceStyled = _c === void 0 ? false : _c, _d = _a.originalPriceUnderlined, originalPriceUnderlined = _d === void 0 ? true : _d, _e = _a.size, size = _e === void 0 ? ComponentSize.Medium : _e;
     var theme = useTheme();
     var priceCommonProps = {
         size: finalPriceStyled ? ComponentSize.Small : size,
         color: color || theme.colors.pallete.secondary.color,
         weight: 700,
     };
-    var OriginalPrice = function () { return (jsx$1(Price, __assign$1({ size: originalPriceStyled ? size : ComponentSize.Small, color: theme.colors.shades['300'].color, margin: true, underlined: true, "data-testid": getTestId(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
+    var OriginalPrice = function () { return (jsx$1(Price, __assign$1({ size: originalPriceStyled ? size : ComponentSize.Small, color: theme.colors.shades['300'].color, margin: true, underlined: originalPriceUnderlined, "data-testid": getTestId(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
     return (jsxs$1(Container$H, { children: [jsx$1(Price, __assign$1({ margin: true, "data-testid": getTestId(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle }, { children: finalPrice }), void 0), originalPrice && jsx$1(OriginalPrice, {}, void 0), discount && (jsx$1(TagContainer, __assign$1({ size: size }, { children: jsx$1(DiscountTag, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }, void 0));
 };
 var templateObject_1$15, templateObject_2$H, templateObject_3$v;
@@ -4657,7 +4657,7 @@ var templateObject_1$15, templateObject_2$H, templateObject_3$v;
 var FinalPriceStyledContainer = newStyled.div(templateObject_1$14 || (templateObject_1$14 = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
 var PriceLabelV2 = function (_a) {
     var _b;
-    var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, discount = _a.discount, color = _a.color, testId = _a.testId, _c = _a.originalPriceStyled, originalPriceStyled = _c === void 0 ? false : _c, _d = _a.size, size = _d === void 0 ? ComponentSize.Medium : _d;
+    var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, discount = _a.discount, color = _a.color, testId = _a.testId, _c = _a.originalPriceStyled, originalPriceStyled = _c === void 0 ? false : _c, _d = _a.originalPriceUnderlined, originalPriceUnderlined = _d === void 0 ? true : _d, _e = _a.size, size = _e === void 0 ? ComponentSize.Medium : _e;
     var theme = useTheme();
     var isDiffFinalAndOriginalPrice = originalPrice !== finalPrice;
     var isOriginalPrice = originalPrice && isDiffFinalAndOriginalPrice;
@@ -4670,7 +4670,7 @@ var PriceLabelV2 = function (_a) {
         color: color || theme.colors.pallete.secondary.color,
         weight: 700,
     };
-    var OriginalPrice = function () { return (jsx$1(Price, __assign$1({ size: originalPriceStyled ? size : ComponentSize.Small, color: theme.colors.shades['300'].color, margin: true, underlined: true, "data-testid": getTestId(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
+    var OriginalPrice = function () { return (jsx$1(Price, __assign$1({ size: originalPriceStyled ? size : ComponentSize.Small, color: theme.colors.shades['300'].color, margin: true, underlined: originalPriceUnderlined, "data-testid": getTestId(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
     return (jsxs$1(Container$H, { children: [isOriginalPrice && jsx$1(OriginalPrice, {}, void 0), jsxs$1(FinalPriceStyledContainer, __assign$1({ "data-testid": getTestId(testId, 'final-product-price') }, { children: [jsx$1(Price, __assign$1({ margin: true, finalPriceStyledSmall: true, style: { fontSize: '14px', marginTop: '-5px' } }, priceCommonProps, { children: "$" }), void 0), jsx$1(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { children: finalPriceArray[0] ? finalPriceArray[0] : (_b = "".concat(finalPrice)) === null || _b === void 0 ? void 0 : _b.split('$')[1] }), void 0), jsx$1(Price, __assign$1({ finalPriceStyledSmall: true, style: { fontSize: '14px', marginTop: '-6px' } }, priceCommonProps, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }), void 0), isDiscount && (jsx$1(TagContainer, __assign$1({ size: ComponentSize.Small }, { children: discount && (jsx$1(DiscountTag, __assign$1({}, discount, { size: ComponentSize.Medium, style: { fontSize: '14px', letterSpacing: '-0.05rem' } }), void 0)) }), void 0))] }, void 0));
 };
 var templateObject_1$14;
@@ -4807,14 +4807,18 @@ var MultiColorPicker = function (_a) {
     return (jsxs$1(ColorRadioGroup$1, __assign$1({ value: selectedColor, onChange: onChangeHandler }, { children: [jsx$1(ColorRadioGroup$1.Label, { label: label, values: valueLabels }, void 0), jsx$1(ColorRadioGroup$1.OptionsContainer, { children: renderOptions(selectedColor, options) }, void 0)] }), void 0));
 };
 
-var Image$2 = newStyled.img(templateObject_1$11 || (templateObject_1$11 = __makeTemplateObject(["\n  width: 4.063rem;\n  height: 5.375rem;\n  box-sizing: border-box;\n  cursor: pointer;\n  border: ", ";\n"], ["\n  width: 4.063rem;\n  height: 5.375rem;\n  box-sizing: border-box;\n  cursor: pointer;\n  border: ", ";\n"])), function (_a) {
+var Image$2 = newStyled.img(templateObject_1$11 || (templateObject_1$11 = __makeTemplateObject(["\n  ", "\n\n  width: 4.063rem;\n  height: 5.375rem;\n  box-sizing: border-box;\n  cursor: pointer;\n  border: ", ";\n"], ["\n  ", "\n\n  width: 4.063rem;\n  height: 5.375rem;\n  box-sizing: border-box;\n  cursor: pointer;\n  border: ", ";\n"])), function (_a) {
+    var borderRadiusVariant = _a.borderRadiusVariant;
+    return borderRadiusVariant &&
+        "\nborder-radius: 20px;\n";
+}, function (_a) {
     var selected = _a.selected, theme = _a.theme;
     return selected ? "0.063rem solid ".concat(theme.colors.shades['700'].color) : 'inherit';
 });
 var ImageSmallPreview = function (_a) {
-    var imageUrl = _a.imageUrl, alt = _a.alt, _b = _a.selected, selected = _b === void 0 ? false : _b, className = _a.className;
+    var imageUrl = _a.imageUrl, alt = _a.alt, _b = _a.selected, selected = _b === void 0 ? false : _b, className = _a.className, borderRadiusVariant = _a.borderRadiusVariant;
     var theme = useTheme();
-    return jsx$1(Image$2, { className: className, src: imageUrl, alt: alt, selected: selected, theme: theme }, void 0);
+    return (jsx$1(Image$2, { className: className, src: imageUrl, alt: alt, selected: selected, theme: theme, borderRadiusVariant: borderRadiusVariant }, void 0));
 };
 var templateObject_1$11;
 
@@ -9133,12 +9137,12 @@ var Container$F = newStyled.div(templateObject_3$t || (templateObject_3$t = __ma
 });
 var Button$3 = newStyled.button(templateObject_4$l || (templateObject_4$l = __makeTemplateObject(["\n  padding: 0;\n  border: none;\n  text-decoration: none;\n  background: transparent;\n  outline: none;\n"], ["\n  padding: 0;\n  border: none;\n  text-decoration: none;\n  background: transparent;\n  outline: none;\n"])));
 var ImagePreviewList = function (_a) {
-    var images = _a.images, selectedImage = _a.selectedImage, onClick = _a.onClick, dataTestId = _a.dataTestId, position = _a.position;
+    var images = _a.images, selectedImage = _a.selectedImage, onClick = _a.onClick, dataTestId = _a.dataTestId, position = _a.position, borderRadiusVariant = _a.borderRadiusVariant;
     return (jsx$1(Container$F, __assign$1({ "data-testid": dataTestId, position: position, className: position }, { children: position == 'horizontal' ? (jsx$1("div", __assign$1({ style: { maxWidth: '360px' } }, { children: jsx$1(SliderNavigation, __assign$1({ speed: 200, infinite: false, arrows: {
                     arrowWidth: 0.75,
                     arrowHeight: 1.25,
                     arrowPadding: 1.625,
-                }, adaptiveHeight: true, dots: false, slidesToShow: 4 }, { children: images.map(function (item) { return (jsx$1(Button$3, __assign$1({ onClick: function () { return onClick(item); } }, { children: jsx$1(ImageSmallPreview, { imageUrl: item.imageUrl, alt: item.alt, selected: item.key === selectedImage.key }, void 0) }), item.key)); }) }), void 0) }), void 0)) : (images.map(function (item) { return (jsx$1(Button$3, __assign$1({ onClick: function () { return onClick(item); } }, { children: jsx$1(ImageSmallPreview, { imageUrl: item.imageUrl, alt: item.alt, selected: item.key === selectedImage.key }, void 0) }), item.key)); })) }), void 0));
+                }, adaptiveHeight: true, dots: false, slidesToShow: 4 }, { children: images.map(function (item) { return (jsx$1(Button$3, __assign$1({ onClick: function () { return onClick(item); } }, { children: jsx$1(ImageSmallPreview, { imageUrl: item.imageUrl, alt: item.alt, selected: item.key === selectedImage.key, borderRadiusVariant: borderRadiusVariant }, void 0) }), item.key)); }) }), void 0) }), void 0)) : (images.map(function (item) { return (jsx$1(Button$3, __assign$1({ onClick: function () { return onClick(item); } }, { children: jsx$1(ImageSmallPreview, { imageUrl: item.imageUrl, alt: item.alt, selected: item.key === selectedImage.key, borderRadiusVariant: borderRadiusVariant }, void 0) }), item.key)); })) }), void 0));
 };
 var templateObject_1$$, templateObject_2$E, templateObject_3$t, templateObject_4$l;
 
@@ -10726,29 +10730,33 @@ InnerImageZoom.propTypes = process.env.NODE_ENV !== "production" ? {
   afterZoomOut: PropTypes.func
 } : {};
 
-var Container$E = newStyled.div(templateObject_1$_ || (templateObject_1$_ = __makeTemplateObject(["\n  position: relative;\n  height: '45rem' &.styleforhorizontal {\n    height: '30rem';\n  }\n  display: block;\n  height: fit-content;\n  overflow: hidden;\n  white-space: nowrap;\n  grid-area: 1/2;\n"], ["\n  position: relative;\n  height: '45rem' &.styleforhorizontal {\n    height: '30rem';\n  }\n  display: block;\n  height: fit-content;\n  overflow: hidden;\n  white-space: nowrap;\n  grid-area: 1/2;\n"])));
-var TopTagContainer$2 = newStyled.div(templateObject_2$D || (templateObject_2$D = __makeTemplateObject(["\n  position: absolute;\n  left: 0;\n  top: 0;\n"], ["\n  position: absolute;\n  left: 0;\n  top: 0;\n"])));
+var Container$E = newStyled.div(templateObject_1$_ || (templateObject_1$_ = __makeTemplateObject(["\n  ", "\n  position: relative;\n  height: '45rem' &.styleforhorizontal {\n    height: '30rem';\n  }\n  display: block;\n  height: fit-content;\n  overflow: hidden;\n  white-space: nowrap;\n  grid-area: 1/2;\n"], ["\n  ", "\n  position: relative;\n  height: '45rem' &.styleforhorizontal {\n    height: '30rem';\n  }\n  display: block;\n  height: fit-content;\n  overflow: hidden;\n  white-space: nowrap;\n  grid-area: 1/2;\n"])), function (_a) {
+    var borderRadiusVariant = _a.borderRadiusVariant;
+    return borderRadiusVariant &&
+        "\n    border-radius: 40px;\n  ";
+});
+var TopTagContainer$2 = newStyled.div(templateObject_2$D || (templateObject_2$D = __makeTemplateObject(["\n  position: absolute;\n  left: ", ";\n  top: ", ";\n"], ["\n  position: absolute;\n  left: ", ";\n  top: ", ";\n"])), function (props) { return (props.borderRadiusVariant ? '50px' : '0'); }, function (props) { return (props.borderRadiusVariant ? '10px' : '0'); });
 var BottomTagContainer$2 = newStyled.div(templateObject_3$s || (templateObject_3$s = __makeTemplateObject(["\n  position: absolute;\n  bottom: 3.75rem;\n  left: 0;\n"], ["\n  position: absolute;\n  bottom: 3.75rem;\n  left: 0;\n"])));
 var ImageProductWithTags$1 = function (_a) {
-    var image = _a.image, topTag = _a.topTag, bottomTag = _a.bottomTag, testId = _a.testId, position = _a.position;
-    return (jsxs$1(Container$E, __assign$1({ "data-testid": testId, className: "stylefor".concat(position) }, { children: [jsx$1(InnerImageZoom, { src: image.imageUrl, zoomSrc: image.imageUrl, zoomType: "hover", imgAttributes: {
+    var image = _a.image, topTag = _a.topTag, bottomTag = _a.bottomTag, testId = _a.testId, position = _a.position, borderRadiusVariant = _a.borderRadiusVariant;
+    return (jsxs$1(Container$E, __assign$1({ "data-testid": testId, className: "stylefor".concat(position), borderRadiusVariant: borderRadiusVariant }, { children: [jsx$1(InnerImageZoom, { src: image.imageUrl, zoomSrc: image.imageUrl, zoomType: "hover", imgAttributes: {
                     alt: image.alt,
                     style: { objectFit: 'cover', objectPosition: 'center' },
-                }, width: position == 'horizontal' ? 360 : 530, height: position == 'horizontal' ? 480 : 720, hideHint: true }, void 0), jsx$1(TopTagContainer$2, { children: topTag }, void 0), jsx$1(BottomTagContainer$2, { children: bottomTag }, void 0)] }), void 0));
+                }, width: position == 'horizontal' ? 360 : 530, height: position == 'horizontal' ? 480 : 720, hideHint: true }, void 0), jsx$1(TopTagContainer$2, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsx$1(BottomTagContainer$2, { children: bottomTag }, void 0)] }), void 0));
 };
 var templateObject_1$_, templateObject_2$D, templateObject_3$s;
 
 var Container$D = newStyled.div(templateObject_1$Z || (templateObject_1$Z = __makeTemplateObject(["\n  display: grid;\n  grid-template-columns: max-content 1fr;\n  grid-column-gap: 20px;\n  max-height: 45rem;\n  width: fit-content;\n"], ["\n  display: grid;\n  grid-template-columns: max-content 1fr;\n  grid-column-gap: 20px;\n  max-height: 45rem;\n  width: fit-content;\n"])));
 var ProductGallery = function (_a) {
-    var images = _a.images, selectedValue = _a.selectedValue, topTag = _a.topTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, previewListDataTestId = _a.previewListDataTestId, thumbnailPosition = _a.thumbnailPosition;
+    var images = _a.images, selectedValue = _a.selectedValue, topTag = _a.topTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, previewListDataTestId = _a.previewListDataTestId, thumbnailPosition = _a.thumbnailPosition, _b = _a.borderRadiusVariant, borderRadiusVariant = _b === void 0 ? false : _b;
     var initialValue = selectedValue && images.includes(selectedValue) ? selectedValue : images[0];
-    var _b = useState(initialValue), selectedImage = _b[0], setSelectedImage = _b[1];
+    var _c = useState(initialValue), selectedImage = _c[0], setSelectedImage = _c[1];
     useEffect(function () {
         setSelectedImage(initialValue);
     }, [initialValue]);
     return (jsxs$1(Container$D, { children: [jsx$1(ImagePreviewList, { images: images, selectedImage: selectedImage, dataTestId: previewListDataTestId, onClick: function (value) {
                     setSelectedImage(value);
-                }, position: thumbnailPosition }, void 0), jsx$1(ImageProductWithTags$1, { image: selectedImage, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, position: thumbnailPosition }, void 0)] }, void 0));
+                }, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant }, void 0), jsx$1(ImageProductWithTags$1, { image: selectedImage, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant }, void 0)] }, void 0));
 };
 var templateObject_1$Z;
 
@@ -11372,12 +11380,12 @@ var Tag$1 = function (_a) {
 };
 var templateObject_1$P;
 
-var getStylesBySize$2 = function (size) {
+var getStylesBySize$2 = function (size, styledBorder) {
     switch (size) {
         case ComponentSize.Large:
             return {
                 padding: '0.125rem 1.25rem 0 1.25rem',
-                borderRadius: '0 0.25rem 0.25rem 0',
+                borderRadius: styledBorder ? '20px' : '0 0.25rem 0.25rem 0',
                 fontSize: '0.875rem',
                 lineHeight: '0.875rem',
                 height: '1.5rem',
@@ -11385,7 +11393,7 @@ var getStylesBySize$2 = function (size) {
         case ComponentSize.Medium:
             return {
                 padding: '0.063rem 0.625rem',
-                borderRadius: '0 0.25rem 0.25rem 0',
+                borderRadius: styledBorder ? '20px' : '0 0.25rem 0.25rem 0',
                 fontSize: '0.625rem',
                 lineHeight: '0.625rem',
                 height: '1rem',
@@ -11393,7 +11401,7 @@ var getStylesBySize$2 = function (size) {
         case ComponentSize.Small:
             return {
                 padding: '0.125rem 0.625rem',
-                borderRadius: '0 0.125em 0.125rem 0',
+                borderRadius: styledBorder ? '20px' : '0 0.125em 0.125rem 0',
                 fontSize: '0.5rem',
                 lineHeight: '0.75rem',
                 height: '0.875rem',
@@ -11401,18 +11409,18 @@ var getStylesBySize$2 = function (size) {
     }
 };
 var CategoryTag = function (_a) {
-    var text = _a.text, size = _a.size, className = _a.className;
+    var text = _a.text, size = _a.size, className = _a.className, _b = _a.styledBorder, styledBorder = _b === void 0 ? false : _b;
     var theme = useTheme();
-    var stylesBySize = getStylesBySize$2(size);
+    var stylesBySize = getStylesBySize$2(size, styledBorder);
     return (jsx(Tag$1, { css: __assign$1({ backgroundColor: theme.colors.shades.white.color, fontWeight: 600, color: theme.colors.shades['700'].color }, stylesBySize), text: text, className: className }, void 0));
 };
 
-var getStylesBySize$1 = function (size) {
+var getStylesBySize$1 = function (size, styledBorder) {
     switch (size) {
         case ComponentSize.Large:
             return {
                 padding: '0.5rem 1rem',
-                borderRadius: '0 0 0.25rem 0',
+                borderRadius: styledBorder ? '20px' : '0 0 0.25rem 0',
                 fontSize: '0.75rem',
                 lineHeight: '1rem',
                 letterSpacing: '0.16em',
@@ -11420,7 +11428,7 @@ var getStylesBySize$1 = function (size) {
         case ComponentSize.Medium:
             return {
                 padding: '0.375rem 0.625rem 0.25rem',
-                borderRadius: '0 0 0.25rem 0',
+                borderRadius: styledBorder ? '20px' : '0 0 0.25rem 0',
                 fontSize: '0.625rem',
                 lineHeight: '0.875rem',
                 letterSpacing: '0.16em',
@@ -11428,7 +11436,7 @@ var getStylesBySize$1 = function (size) {
         case ComponentSize.Small:
             return {
                 padding: '0.125rem 0.5rem',
-                borderRadius: '0 0 0.25rem 0',
+                borderRadius: styledBorder ? '20px' : '0 0 0.25rem 0',
                 fontSize: '0.5rem',
                 lineHeight: '0.875rem',
                 letterSpacing: '0.16em',
@@ -11436,8 +11444,8 @@ var getStylesBySize$1 = function (size) {
     }
 };
 var SeasonOfferTag = function (_a) {
-    var text = _a.text, _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#C64844' : _b, size = _a.size, className = _a.className;
-    var stylesBySize = getStylesBySize$1(size);
+    var text = _a.text, _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#C64844' : _b, size = _a.size, className = _a.className, _c = _a.styledBorder, styledBorder = _c === void 0 ? false : _c;
+    var stylesBySize = getStylesBySize$1(size, styledBorder);
     return (jsx(Tag$1, { css: __assign$1({ backgroundColor: backgroundColor, fontWeight: 700, color: '#FFFFFF' }, stylesBySize), text: text, className: className }, void 0));
 };
 
@@ -12872,12 +12880,16 @@ function useSwipeable(options) {
   return handlers;
 }
 
-var Container$b = newStyled.div(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n  position: relative;\n  max-height: 31.875rem;\n  overflow: hidden;\n"], ["\n  position: relative;\n  max-height: 31.875rem;\n  overflow: hidden;\n"])));
-var TopTagContainer = newStyled.div(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n  position: absolute;\n  left: 0;\n  top: 0;\n"], ["\n  position: absolute;\n  left: 0;\n  top: 0;\n"])));
+var Container$b = newStyled.div(templateObject_1$j || (templateObject_1$j = __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$a || (templateObject_2$a = __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$a || (templateObject_3$a = __makeTemplateObject(["\n  position: absolute;\n  bottom: 3.75rem;\n  left: 0;\n"], ["\n  position: absolute;\n  bottom: 3.75rem;\n  left: 0;\n"])));
 var ImageProductWithTags = forwardRef(function ImageProductWithTags(_a, ref) {
-    var image = _a.image, topTag = _a.topTag, bottomTag = _a.bottomTag, testId = _a.testId;
-    return (jsxs$1(Container$b, __assign$1({ "data-testid": testId, ref: ref }, { 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, { children: topTag }, void 0), jsx$1(BottomTagContainer, { children: bottomTag }, void 0)] }), void 0));
+    var image = _a.image, topTag = _a.topTag, bottomTag = _a.bottomTag, testId = _a.testId, borderRadiusVariant = _a.borderRadiusVariant;
+    return (jsxs$1(Container$b, __assign$1({ "data-testid": testId, ref: ref, borderRadiusVariant: borderRadiusVariant }, { 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, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsx$1(BottomTagContainer, { children: bottomTag }, void 0)] }), void 0));
 });
 var templateObject_1$j, templateObject_2$a, templateObject_3$a;
 
@@ -12917,15 +12929,15 @@ var templateObject_1$g, templateObject_2$9, templateObject_3$9;
 
 var Container$9 = newStyled.div(templateObject_1$f || (templateObject_1$f = __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, selectedValue = _a.selectedValue, topTag = _a.topTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, slideDotsDataTestId = _a.slideDotsDataTestId;
-    var _b = useState(0), index = _b[0], setIndex = _b[1];
+    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 _c = useState(function () { return images[index]; }), selectedImage = _c[0], setSelectedImage = _c[1];
+    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); });
@@ -12937,7 +12949,7 @@ var ProductGalleryMobile = function (_a) {
     useEffect(function () {
         setSelectedImage(images[index]);
     }, [index, images]);
-    return (jsxs$1(Container$9, { children: [jsx$1(ImageProductWithTags, __assign$1({}, handlers, { image: selectedImage, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId }), void 0), jsx$1(SlideNavigation, { quantity: images.length, selectedIndex: images.indexOf(selectedImage), onNavigate: setIndex, testId: slideDotsDataTestId }, void 0)] }, void 0));
+    return (jsxs$1(Container$9, { children: [jsx$1(ImageProductWithTags, __assign$1({}, handlers, { image: selectedImage, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant }), void 0), jsx$1(SlideNavigation, { quantity: images.length, selectedIndex: images.indexOf(selectedImage), onNavigate: setIndex, testId: slideDotsDataTestId }, void 0)] }, void 0));
 };
 var templateObject_1$f;