@trafilea/afrodita-components 5.0.0-beta.133 → 5.0.0-beta.134

package/build/index.d.ts

@@ -1128,11 +1128,12 @@ interface AccordionProps {
     headerOnOpen?: ReactNode;
     content: ReactNode;
     disabled?: boolean;
+    innerHTML?: boolean;
     openIcon: IconType;
     closeIcon: IconType;
     onClick?: (index: number) => void;
 }
-declare const Accordion: ({ header, headerOnOpen, content, defaultOpen, forceOpenHandler, forceOpenValue, titleColor, variant, disabled, openIcon, closeIcon, onClick, }: AccordionProps) => JSX.Element;
+declare const Accordion: ({ header, headerOnOpen, content, defaultOpen, forceOpenHandler, forceOpenValue, titleColor, variant, disabled, innerHTML, openIcon, closeIcon, onClick, }: AccordionProps) => JSX.Element;
 
 declare const ThemeProvider: FC<{
     theme: Theme;
@@ -1549,6 +1550,79 @@ declare type ThemeComponent = {
             dotsOpacity: number;
         };
     };
+    beforeAfter: {
+        size: {
+            small: {
+                image: {
+                    minHeight: string;
+                    minWidth: string;
+                    mobile: {
+                        minHeight: string;
+                        minWidth: string;
+                    };
+                };
+                imageContainer: {
+                    maxWidth: string;
+                    padding: string;
+                    mobile: {
+                        maxWidth: string;
+                    };
+                };
+                userInfoText: {
+                    fontSize: string;
+                    mobile: {
+                        fontSize: string;
+                    };
+                };
+            };
+            medium: {
+                image: {
+                    minHeight: string;
+                    minWidth: string;
+                    mobile: {
+                        minHeight: string;
+                        minWidth: string;
+                    };
+                };
+                imageContainer: {
+                    maxWidth: string;
+                    padding: string;
+                    mobile: {
+                        maxWidth: string;
+                    };
+                };
+                userInfoText: {
+                    fontSize: string;
+                    mobile: {
+                        fontSize: string;
+                    };
+                };
+            };
+            large: {
+                image: {
+                    minHeight: string;
+                    minWidth: string;
+                    mobile: {
+                        minHeight: string;
+                        minWidth: string;
+                    };
+                };
+                imageContainer: {
+                    maxWidth: string;
+                    padding: string;
+                    mobile: {
+                        maxWidth: string;
+                    };
+                };
+                userInfoText: {
+                    fontSize: string;
+                    mobile: {
+                        fontSize: string;
+                    };
+                };
+            };
+        };
+    };
 };
 declare type ThemeTypography = {
     config: {
@@ -2379,8 +2453,10 @@ interface BeforeAfterCardProps {
     beforeImage: string;
     afterImage: string;
     alignCenter?: boolean;
+    imageBorderRadius?: string;
+    size?: ComponentSize;
 }
-declare const BeforeAfterCard: ({ name, age, months, beforeImage, afterImage, alignCenter, }: BeforeAfterCardProps) => JSX.Element;
+declare const BeforeAfterCard: ({ name, age, months, beforeImage, afterImage, alignCenter, imageBorderRadius, size, }: BeforeAfterCardProps) => JSX.Element;
 
 interface ImageCardWithDescriptionProps {
     image: string;

package/build/index.esm.js

@@ -4231,7 +4231,7 @@ var BaseButton = function (_a) {
         } }, { children: [renderLeading, children, renderTrailing] }), void 0));
 };
 
-var getStylesBySize$9 = function (size, theme) {
+var getStylesBySize$a = function (size, theme) {
     switch (size) {
         case ComponentSize.Large:
             return {
@@ -4258,7 +4258,7 @@ var getStylesBySize$9 = function (size, theme) {
 var BaseCTA = function (_a) {
     var text = _a.text, _b = _a.wide, wide = _b === void 0 ? false : _b, _c = _a.size, size = _c === void 0 ? ComponentSize.Medium : _c, props = __rest(_a, ["text", "wide", "size"]);
     var theme = useTheme();
-    var stylesBySize = getStylesBySize$9(size, theme);
+    var stylesBySize = getStylesBySize$a(size, theme);
     return (jsx(BaseButton, __assign$1({}, props, { css: __assign$1(__assign$1({ width: wide ? '100%' : 'fit-content' }, stylesBySize), { fontWeight: theme.component.button.fontWeight, borderRadius: "".concat(theme.component.button.borderRadius), cursor: 'pointer', '&:disabled': {
                 backgroundColor: theme.colors.background.disabled,
                 color: theme.colors.text.disabled,
@@ -4694,7 +4694,7 @@ var DropdownDialog = function (_a) {
 };
 var templateObject_1$1g, templateObject_2$P, templateObject_3$C, templateObject_4$q;
 
-var getStylesBySize$8 = function (size, theme) {
+var getStylesBySize$9 = function (size, theme) {
     switch (size) {
         case ComponentSize.Medium:
             return {
@@ -4711,7 +4711,7 @@ var getStylesBySize$8 = function (size, theme) {
 var SimpleSelector = function (_a) {
     var text = _a.text, className = _a.className, _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.size, size = _c === void 0 ? ComponentSize.Medium : _c, _d = _a.active, active = _d === void 0 ? false : _d, _e = _a.testId, testId = _e === void 0 ? 'base-button' : _e, _f = _a.width, width = _f === void 0 ? '' : _f, onClick = _a.onClick;
     var theme = useTheme();
-    var stylesBySize = getStylesBySize$8(size, theme);
+    var stylesBySize = getStylesBySize$9(size, theme);
     var activeStyles = active
         ? { fontWeight: theme.component.selector.hover.fontWeight }
         : { fontWeight: theme.component.selector.default.fontWeight };
@@ -4906,7 +4906,7 @@ var SizeSelector = function (_a) {
 };
 var templateObject_1$1e;
 
-var getStylesBySize$7 = function (size) {
+var getStylesBySize$8 = function (size) {
     switch (size) {
         case ComponentSize.Large:
         case ComponentSize.Medium:
@@ -4924,7 +4924,7 @@ var getStylesBySize$7 = function (size) {
     }
 };
 var textButtonStyles$1 = function (theme, size) {
-    var stylesBySize = getStylesBySize$7(size);
+    var stylesBySize = getStylesBySize$8(size);
     return __assign$1(__assign$1({ border: 'none', background: 'transparent', padding: 0, color: theme.colors.shades['550'].color, alignItems: 'center', fontWeight: 500, textDecorationLine: 'underline' }, stylesBySize), { '&:disabled': {
             color: theme.colors.shades['250'].color,
             textDecorationLine: 'none',
@@ -4958,7 +4958,7 @@ var SizeFitGuide = function (_a) {
 };
 var templateObject_1$1c, templateObject_2$N, templateObject_3$A;
 
-var getStylesBySize$6 = function (size) {
+var getStylesBySize$7 = function (size) {
     switch (size) {
         case ComponentSize.Large:
             return {
@@ -4995,18 +4995,18 @@ var Container$O = newStyled.div(templateObject_1$1b || (templateObject_1$1b = __
 }, function (_a) {
     var _b;
     var size = _a.size;
-    return (_b = getStylesBySize$6(size)) === null || _b === void 0 ? void 0 : _b.borderRadius;
+    return (_b = getStylesBySize$7(size)) === null || _b === void 0 ? void 0 : _b.borderRadius;
 }, function (_a) {
     var _b;
     var size = _a.size;
-    return (_b = getStylesBySize$6(size)) === null || _b === void 0 ? void 0 : _b.padding;
+    return (_b = getStylesBySize$7(size)) === null || _b === void 0 ? void 0 : _b.padding;
 }, function (_a) {
     var size = _a.size;
     return (size === ComponentSize.Small ? '2rem' : 'unset');
 }, function (_a) {
     var _b;
     var size = _a.size;
-    return (_b = getStylesBySize$6(size)) === null || _b === void 0 ? void 0 : _b.height;
+    return (_b = getStylesBySize$7(size)) === null || _b === void 0 ? void 0 : _b.height;
 });
 var H3$2 = newStyled.h3(templateObject_2$M || (templateObject_2$M = __makeTemplateObject(["\n  color: ", ";\n  font-weight: bold;\n  margin: 0;\n  font-size: ", ";\n  line-height: ", ";\n"], ["\n  color: ", ";\n  font-weight: bold;\n  margin: 0;\n  font-size: ", ";\n  line-height: ", ";\n"])), function (_a) {
     var textColor = _a.textColor;
@@ -5014,11 +5014,11 @@ var H3$2 = newStyled.h3(templateObject_2$M || (templateObject_2$M = __makeTempla
 }, function (_a) {
     var _b;
     var size = _a.size;
-    return (_b = getStylesBySize$6(size)) === null || _b === void 0 ? void 0 : _b.fontSize;
+    return (_b = getStylesBySize$7(size)) === null || _b === void 0 ? void 0 : _b.fontSize;
 }, function (_a) {
     var _b;
     var size = _a.size;
-    return (_b = getStylesBySize$6(size)) === null || _b === void 0 ? void 0 : _b.lineHeight;
+    return (_b = getStylesBySize$7(size)) === null || _b === void 0 ? void 0 : _b.lineHeight;
 });
 var DiscountTag = function (_a) {
     var discount = _a.discount, offText = _a.offText, disabled = _a.disabled, _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#fff' : _b, _c = _a.borderColor, borderColor = _c === void 0 ? 'transparent' : _c, _d = _a.textColor, textColor = _d === void 0 ? '#fff' : _d, _e = _a.size, size = _e === void 0 ? ComponentSize.Medium : _e, style = _a.style;
@@ -5027,7 +5027,7 @@ var DiscountTag = function (_a) {
 };
 var templateObject_1$1b, templateObject_2$M;
 
-var getStylesBySize$5 = function (size) {
+var getStylesBySize$6 = function (size) {
     switch (size) {
         case ComponentSize.Large:
             return {
@@ -5064,13 +5064,13 @@ var Price = newStyled.p(templateObject_2$L || (templateObject_2$L = __makeTempla
     var size = _a.size, finalPriceStyled = _a.finalPriceStyled, finalPriceStyledSmall = _a.finalPriceStyledSmall;
     return finalPriceStyled || finalPriceStyledSmall
         ? finalPriceStyledSmall
-            ? (_b = getStylesBySize$5(size)) === null || _b === void 0 ? void 0 : _b.finalPricefontSizeSmall
-            : (_c = getStylesBySize$5(size)) === null || _c === void 0 ? void 0 : _c.finalPricefontSize
-        : (_d = getStylesBySize$5(size)) === null || _d === void 0 ? void 0 : _d.fontSize;
+            ? (_b = getStylesBySize$6(size)) === null || _b === void 0 ? void 0 : _b.finalPricefontSizeSmall
+            : (_c = getStylesBySize$6(size)) === null || _c === void 0 ? void 0 : _c.finalPricefontSize
+        : (_d = getStylesBySize$6(size)) === null || _d === void 0 ? void 0 : _d.fontSize;
 }, function (_a) {
     var _b;
     var size = _a.size;
-    return (_b = getStylesBySize$5(size)) === null || _b === void 0 ? void 0 : _b.lineHeight;
+    return (_b = getStylesBySize$6(size)) === null || _b === void 0 ? void 0 : _b.lineHeight;
 }, function (_a) {
     var color = _a.color;
     return color;
@@ -5080,7 +5080,7 @@ var Price = newStyled.p(templateObject_2$L || (templateObject_2$L = __makeTempla
 }, function (_a) {
     var _b;
     var margin = _a.margin, size = _a.size;
-    return (margin ? (_b = getStylesBySize$5(size)) === null || _b === void 0 ? void 0 : _b.margin : '0');
+    return (margin ? (_b = getStylesBySize$6(size)) === null || _b === void 0 ? void 0 : _b.margin : '0');
 }, function (_a) {
     var finalPriceStyledSmall = _a.finalPriceStyledSmall, size = _a.size;
     return finalPriceStyledSmall ? (size === 'large' ? '-10px' : '-7px') : '0';
@@ -5088,7 +5088,7 @@ var Price = newStyled.p(templateObject_2$L || (templateObject_2$L = __makeTempla
 var TagContainer = newStyled.p(templateObject_3$z || (templateObject_3$z = __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$5(size)) === null || _b === void 0 ? void 0 : _b.margin;
+    return (_b = getStylesBySize$6(size)) === null || _b === void 0 ? void 0 : _b.margin;
 });
 function getTestId() {
     var args = [];
@@ -9544,7 +9544,7 @@ var StyledSlider = newStyled(Slider)(templateObject_1$15 || (templateObject_1$15
 });
 var templateObject_1$15;
 
-var getStylesBySize$4 = function (size) {
+var getStylesBySize$5 = function (size) {
     // rem units
     switch (size) {
         case ComponentSize.Large:
@@ -9576,7 +9576,7 @@ var getStylesBySize$4 = function (size) {
 var SliderNavigation = function (_a) {
     var children = _a.children, infinite = _a.infinite, arrows = _a.arrows, adaptiveHeight = _a.adaptiveHeight, dotsSize = _a.dotsSize, dotListMarginTop = _a.dotListMarginTop, _b = _a.initialSlide, initialSlide = _b === void 0 ? 0 : _b, _c = _a.dots, dots = _c === void 0 ? true : _c, _d = _a.slidesToShow, slidesToShow = _d === void 0 ? 1 : _d, _e = _a.speed, speed = _e === void 0 ? 500 : _e;
     var _f = useState(0), activeIndex = _f[0], setActiveIndex = _f[1];
-    var styles = dotsSize && getStylesBySize$4(dotsSize);
+    var styles = dotsSize && getStylesBySize$5(dotsSize);
     var theme = useTheme();
     var nextArrow = arrows && (jsx(ArrowButton$1, { direction: "right", width: arrows.arrowWidth, height: arrows.arrowHeight }, void 0));
     var prevArrow = arrows && (jsx(ArrowButton$1, { direction: "left", width: arrows.arrowWidth, height: arrows.arrowHeight }, void 0));
@@ -11459,7 +11459,7 @@ var ProgressBar = function (_a) {
 };
 var templateObject_1$_;
 
-var getStylesBySize$3 = function (size) {
+var getStylesBySize$4 = function (size) {
     switch (size) {
         case ComponentSize.Large:
             return {
@@ -11484,15 +11484,15 @@ var Container$E = newStyled.div(templateObject_1$Z || (templateObject_1$Z = __ma
 }, function (_a) {
     var _b;
     var size = _a.size;
-    return (_b = getStylesBySize$3(size)) === null || _b === void 0 ? void 0 : _b.widthHeight;
+    return (_b = getStylesBySize$4(size)) === null || _b === void 0 ? void 0 : _b.widthHeight;
 }, function (_a) {
     var _b;
     var size = _a.size;
-    return (_b = getStylesBySize$3(size)) === null || _b === void 0 ? void 0 : _b.widthHeight;
+    return (_b = getStylesBySize$4(size)) === null || _b === void 0 ? void 0 : _b.widthHeight;
 }, function (_a) {
     var _b;
     var size = _a.size;
-    return (_b = getStylesBySize$3(size)) === null || _b === void 0 ? void 0 : _b.margin;
+    return (_b = getStylesBySize$4(size)) === null || _b === void 0 ? void 0 : _b.margin;
 }, function (_a) {
     var hoverBackgroundColor = _a.hoverBackgroundColor;
     return hoverBackgroundColor;
@@ -11720,14 +11720,14 @@ var StyledDisclosure = newStyled(Ye)(AccordionStyles.baseStyles, function (props
 var StyledButton$1 = newStyled(Ye.Button)(AccordionSummaryStyles.baseStyles, function (props) { return [AccordionSummaryStyles[props.variant](props.theme, props.disabled)]; }, function (props) { return [AccordionSummaryStyles.title(props.titlecolor)]; });
 var StyledPanel = newStyled(Ye.Panel)(AccordionDetailsStyles.baseStyles, function (props) { return [AccordionDetailsStyles[props.variant](props.theme)]; });
 var Accordion$1 = function (_a) {
-    var header = _a.header, headerOnOpen = _a.headerOnOpen, content = _a.content, defaultOpen = _a.defaultOpen, _b = _a.forceOpenHandler, forceOpenHandler = _b === void 0 ? false : _b, _c = _a.forceOpenValue, forceOpenValue = _c === void 0 ? false : _c, titleColor = _a.titleColor, variant = _a.variant, _d = _a.disabled, disabled = _d === void 0 ? false : _d, openIcon = _a.openIcon, closeIcon = _a.closeIcon, onClick = _a.onClick;
+    var header = _a.header, headerOnOpen = _a.headerOnOpen, content = _a.content, defaultOpen = _a.defaultOpen, _b = _a.forceOpenHandler, forceOpenHandler = _b === void 0 ? false : _b, _c = _a.forceOpenValue, forceOpenValue = _c === void 0 ? false : _c, titleColor = _a.titleColor, variant = _a.variant, _d = _a.disabled, disabled = _d === void 0 ? false : _d, _e = _a.innerHTML, innerHTML = _e === void 0 ? false : _e, openIcon = _a.openIcon, closeIcon = _a.closeIcon, onClick = _a.onClick;
     var theme = useTheme();
     return (jsx$1(StyledDisclosure, __assign$1({ theme: theme, as: "div", defaultOpen: defaultOpen, variant: variant, disabled: disabled, onClick: onClick }, { children: function (_a) {
             var open = _a.open;
             var openWithForce = forceOpenHandler ? forceOpenValue : open;
             var ControlIcon = disabled ? openIcon : openWithForce ? closeIcon : openIcon;
             var showPanel = openWithForce && !disabled;
-            return (jsxs$1(Fragment$1, { children: [jsxs$1(StyledButton$1, __assign$1({ theme: theme, variant: variant, disabled: disabled, titlecolor: titleColor }, { children: [showPanel && headerOnOpen ? headerOnOpen : header, jsx$1(ControlIcon, { title: openWithForce ? 'close icon' : 'open icon', height: theme.component.accordion.variant[variant].icon.height, width: theme.component.accordion.variant[variant].icon.width, fill: theme.component.accordion.variant[variant].icon.color }, void 0)] }), void 0), showPanel && (jsx$1(StyledPanel, __assign$1({ static: true, variant: variant, theme: theme }, { children: content }), void 0))] }, void 0));
+            return (jsxs$1(Fragment$1, { children: [jsxs$1(StyledButton$1, __assign$1({ theme: theme, variant: variant, disabled: disabled, titlecolor: titleColor }, { children: [showPanel && headerOnOpen ? headerOnOpen : header, jsx$1(ControlIcon, { title: openWithForce ? 'close icon' : 'open icon', height: theme.component.accordion.variant[variant].icon.height, width: theme.component.accordion.variant[variant].icon.width, fill: theme.component.accordion.variant[variant].icon.color }, void 0)] }), void 0), showPanel && !innerHTML && (jsx$1(StyledPanel, __assign$1({ static: true, variant: variant, theme: theme }, { children: content }), void 0)), showPanel && innerHTML && (jsx$1("div", { dangerouslySetInnerHTML: { __html: content } }, void 0))] }, void 0));
         } }), void 0));
 };
 
@@ -11859,7 +11859,7 @@ var Tag$1 = function (_a) {
 };
 var templateObject_1$U;
 
-var getStylesBySize$2 = function (size, styledBorder) {
+var getStylesBySize$3 = function (size, styledBorder) {
     switch (size) {
         case ComponentSize.Large:
             return {
@@ -11890,11 +11890,11 @@ var getStylesBySize$2 = function (size, styledBorder) {
 var CategoryTag = function (_a) {
     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, styledBorder);
+    var stylesBySize = getStylesBySize$3(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, styledBorder) {
+var getStylesBySize$2 = function (size, styledBorder) {
     switch (size) {
         case ComponentSize.Large:
             return {
@@ -11924,7 +11924,7 @@ var getStylesBySize$1 = function (size, styledBorder) {
 };
 var SeasonOfferTag = function (_a) {
     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);
+    var stylesBySize = getStylesBySize$2(size, styledBorder);
     return (jsx(Tag$1, { css: __assign$1({ backgroundColor: backgroundColor, fontWeight: 700, color: '#FFFFFF' }, stylesBySize), text: text, className: className }, void 0));
 };
 
@@ -12636,7 +12636,7 @@ var ImageContainer$2 = newStyled.div(function (_a) {
 var ImageHoverContainer = newStyled.img(templateObject_1$w || (templateObject_1$w = __makeTemplateObject(["\n  opacity: 0;\n  position: absolute;\n  transition: all 0.4s ease-in-out;\n"], ["\n  opacity: 0;\n  position: absolute;\n  transition: all 0.4s ease-in-out;\n"])));
 var Container$o = newStyled.a(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  width: min-content;\n  text-decoration: none;\n\n  &:hover .hover__image {\n    opacity: 1;\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  width: min-content;\n  text-decoration: none;\n\n  &:hover .hover__image {\n    opacity: 1;\n  }\n"])));
 var Title$2 = newStyled.p(templateObject_3$i || (templateObject_3$i = __makeTemplateObject(["\n  font-size: 0.83rem;\n  font-weight: normal;\n  line-height: 1.375rem;\n  min-height: 2.75rem;\n  text-align: center;\n  color: ", ";\n  margin: 0.25rem 0;\n  text-align: ", ";\n"], ["\n  font-size: 0.83rem;\n  font-weight: normal;\n  line-height: 1.375rem;\n  min-height: 2.75rem;\n  text-align: center;\n  color: ", ";\n  margin: 0.25rem 0;\n  text-align: ", ";\n"])), function (props) { return props.theme.colors.pallete.secondary.color; }, function (props) { return props.align; });
-var getStylesBySize = function (size) {
+var getStylesBySize$1 = function (size) {
     switch (size) {
         case ComponentSize.Medium:
             return {
@@ -12667,7 +12667,7 @@ var MarginTopContainer = newStyled.div(templateObject_6$4 || (templateObject_6$4
 var ProductItemMobile = function (_a) {
     var title = _a.title, image = _a.image, imageHover = _a.imageHover, price = _a.price, rating = _a.rating, size = _a.size, _b = _a.alignName, alignName = _b === void 0 ? 'center' : _b, url = _a.url, className = _a.className, topTag = _a.topTag, bottomTag = _a.bottomTag, onClick = _a.onClick, _c = _a.priceDisplayType, priceDisplayType = _c === void 0 ? 'default' : _c, priceAtBottom = _a.priceAtBottom, priceLoading = _a.priceLoading;
     var theme = useTheme();
-    var styles = getStylesBySize(size);
+    var styles = getStylesBySize$1(size);
     var space = useMemo(function () {
         var _a;
         return (_a = {},
@@ -17865,32 +17865,95 @@ var templateObject_1$3, templateObject_2$3, templateObject_3$3;
 
 /* base styles & size variants */
 var UserInfoTextStyles = {
-    baseStyles: function (theme, isMobile, alignCenter) {
+    baseStyles: function (theme, fontSize, alignCenter) {
         return css({
             margin: '0',
             color: theme.colors.pallete.secondary.color,
-            fontWeight: '600',
-            fontSize: isMobile ? '16px' : '24px',
+            fontWeight: '400',
+            fontSize: fontSize,
             lineHeight: '130%',
             textAlign: alignCenter ? 'center' : 'left',
         });
     },
+};
+var getStylesBySize = function (size, theme) {
+    switch (size) {
+        case ComponentSize.Large:
+            return {
+                imageMinHeight: theme.component.beforeAfter.size.large.image.minHeight,
+                imageMinWidth: theme.component.beforeAfter.size.large.image.minWidth,
+                mobileImageMinHeight: theme.component.beforeAfter.size.large.image.mobile.minHeight,
+                mobileImageMinWidth: theme.component.beforeAfter.size.large.image.mobile.minWidth,
+                imageContainerMaxWidth: theme.component.beforeAfter.size.large.imageContainer.maxWidth,
+                imageContainerMobileMaxWidth: theme.component.beforeAfter.size.large.imageContainer.mobile.maxWidth,
+                imageContainerPadding: theme.component.beforeAfter.size.large.imageContainer.padding,
+                userInfoTextFontSize: theme.component.beforeAfter.size.large.userInfoText.fontSize,
+                userInfoTextMobileFontSize: theme.component.beforeAfter.size.large.userInfoText.mobile.fontSize,
+            };
+        case ComponentSize.Medium:
+            return {
+                imageMinHeight: theme.component.beforeAfter.size.medium.image.minHeight,
+                imageMinWidth: theme.component.beforeAfter.size.medium.image.minWidth,
+                mobileImageMinHeight: theme.component.beforeAfter.size.medium.image.mobile.minHeight,
+                mobileImageMinWidth: theme.component.beforeAfter.size.medium.image.mobile.minWidth,
+                imageContainerMaxWidth: theme.component.beforeAfter.size.medium.imageContainer.maxWidth,
+                imageContainerMobileMaxWidth: theme.component.beforeAfter.size.medium.imageContainer.mobile.maxWidth,
+                imageContainerPadding: theme.component.beforeAfter.size.medium.imageContainer.padding,
+                userInfoTextFontSize: theme.component.beforeAfter.size.medium.userInfoText.fontSize,
+                userInfoTextMobileFontSize: theme.component.beforeAfter.size.medium.userInfoText.mobile.fontSize,
+            };
+        case ComponentSize.Small:
+            return {
+                imageMinHeight: theme.component.beforeAfter.size.small.image.minHeight,
+                imageMinWidth: theme.component.beforeAfter.size.small.image.minWidth,
+                mobileImageMinHeight: theme.component.beforeAfter.size.small.image.mobile.minHeight,
+                mobileImageMinWidth: theme.component.beforeAfter.size.small.image.mobile.minWidth,
+                imageContainerMaxWidth: theme.component.beforeAfter.size.small.imageContainer.maxWidth,
+                imageContainerMobileMaxWidth: theme.component.beforeAfter.size.small.imageContainer.mobile.maxWidth,
+                imageContainerPadding: theme.component.beforeAfter.size.small.imageContainer.padding,
+                userInfoTextFontSize: theme.component.beforeAfter.size.small.userInfoText.fontSize,
+                userInfoTextMobileFontSize: theme.component.beforeAfter.size.small.userInfoText.mobile.fontSize,
+            };
+        default:
+            return {
+                imageMinHeight: theme.component.beforeAfter.size.small.image.minHeight,
+                imageMinWidth: theme.component.beforeAfter.size.small.image.minWidth,
+                mobileImageMinHeight: theme.component.beforeAfter.size.small.image.mobile.minHeight,
+                mobileImageMinWidth: theme.component.beforeAfter.size.small.image.mobile.minWidth,
+                imageContainerMaxWidth: theme.component.beforeAfter.size.small.imageContainer.maxWidth,
+                imageContainerMobileMaxWidth: theme.component.beforeAfter.size.small.imageContainer.mobile.maxWidth,
+                imageContainerPadding: theme.component.beforeAfter.size.small.imageContainer.padding,
+                userInfoTextFontSize: theme.component.beforeAfter.size.small.userInfoText.fontSize,
+                userInfoTextMobileFontSize: theme.component.beforeAfter.size.small.userInfoText.mobile.fontSize,
+            };
+    }
 };
 
-var Container$2 = newStyled.div(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  row-gap: ", ";\n  background: var(--colors-shades-white-color);\n  border: 1px solid var(--colors-shades-50-color);\n  box-sizing: border-box;\n  filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.25));\n  border-radius: 10px;\n  max-width: ", ";\n  width: 100%;\n  height: 100%;\n  padding: ", ";\n  flex-wrap: wrap;\n"], ["\n  display: flex;\n  flex-direction: column;\n  row-gap: ", ";\n  background: var(--colors-shades-white-color);\n  border: 1px solid var(--colors-shades-50-color);\n  box-sizing: border-box;\n  filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.25));\n  border-radius: 10px;\n  max-width: ", ";\n  width: 100%;\n  height: 100%;\n  padding: ", ";\n  flex-wrap: wrap;\n"])), function (props) { return (props.isMobile ? '12px' : '15px'); }, function (props) { return (props.isMobile ? '241px' : '378px'); }, function (props) { return (props.isMobile ? '20px 20px 18px;' : '35px 35px 25px;'); });
-var ImageContainer$1 = newStyled.div(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  max-height: ", ";\n  max-width: ", ";\n  width: 100%;\n  height: 100%;\n  column-gap: 4px;\n"], ["\n  display: flex;\n  flex-direction: row;\n  max-height: ", ";\n  max-width: ", ";\n  width: 100%;\n  height: 100%;\n  column-gap: 4px;\n"])), function (props) { return (props.isMobile ? '120px' : '180px'); }, function (props) { return (props.isMobile ? '200px' : '320px'); });
-var ImageCard = newStyled.div(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject(["\n  display: flex;\n  min-height: ", ";\n  width: ", ";\n  flex-wrap: wrap;\n"], ["\n  display: flex;\n  min-height: ", ";\n  width: ", ";\n  flex-wrap: wrap;\n"])), function (props) { return (props.isMobile ? '120px' : '180px'); }, function (props) { return (props.isMobile ? '100px' : '160px'); });
+var Container$2 = newStyled.div(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  row-gap: ", ";\n  background: var(--colors-shades-white-color);\n  border: 1px solid var(--colors-shades-50-color);\n  box-sizing: border-box;\n  border-radius: 10px;\n  max-width: ", ";\n  width: 100%;\n  height: 100%;\n  padding: ", ";\n  flex-wrap: wrap;\n"], ["\n  display: flex;\n  flex-direction: column;\n  row-gap: ", ";\n  background: var(--colors-shades-white-color);\n  border: 1px solid var(--colors-shades-50-color);\n  box-sizing: border-box;\n  border-radius: 10px;\n  max-width: ", ";\n  width: 100%;\n  height: 100%;\n  padding: ", ";\n  flex-wrap: wrap;\n"])), function (props) { return (props.isMobile ? '12px' : '15px'); }, function (props) {
+    return props.isMobile
+        ? props.styles.imageContainerMobileMaxWidth
+        : props.styles.imageContainerMaxWidth;
+}, function (props) { return props.styles.imageContainerPadding; });
+var ImageContainer$1 = newStyled.div(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  width: 100%;\n  height: 100%;\n  column-gap: 4px;\n"], ["\n  display: flex;\n  flex-direction: row;\n  width: 100%;\n  height: 100%;\n  column-gap: 4px;\n"])));
+var ImageCard = newStyled.div(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject(["\n  display: flex;\n  min-height: ", ";\n  min-width: ", ";\n  width: ", ";\n  flex-wrap: wrap;\n"], ["\n  display: flex;\n  min-height: ", ";\n  min-width: ", ";\n  width: ", ";\n  flex-wrap: wrap;\n"])), function (props) {
+    return props.isMobile ? props.styles.mobileImageMinHeight : props.styles.imageMinHeight;
+}, function (props) {
+    return props.isMobile ? props.styles.mobileImageMinWidth : props.styles.imageMinWidth;
+}, function (props) {
+    return props.isMobile ? props.styles.mobileImageMinWidth : props.styles.imageMinWidth;
+});
 var UserInfoText = newStyled.div(function (_a) {
-    var theme = _a.theme, isMobile = _a.isMobile, alignCenter = _a.alignCenter;
+    var theme = _a.theme, fontSize = _a.fontSize, alignCenter = _a.alignCenter;
     return [
-        UserInfoTextStyles.baseStyles(theme, isMobile, alignCenter),
+        UserInfoTextStyles.baseStyles(theme, fontSize, alignCenter),
     ];
 });
 var BeforeAfterCard = function (_a) {
-    var name = _a.name, age = _a.age, months = _a.months, beforeImage = _a.beforeImage, afterImage = _a.afterImage, _b = _a.alignCenter, alignCenter = _b === void 0 ? true : _b;
+    var name = _a.name, age = _a.age, months = _a.months, beforeImage = _a.beforeImage, afterImage = _a.afterImage, _b = _a.alignCenter, alignCenter = _b === void 0 ? true : _b, _c = _a.imageBorderRadius, imageBorderRadius = _c === void 0 ? '' : _c, _d = _a.size, size = _d === void 0 ? ComponentSize.Small : _d;
     var theme = useTheme();
     var isMobile = useWindowDimensions({ desktop: 768, mobile: 0 }).isMobile;
-    return (jsxs$1(Container$2, __assign$1({ "data-testid": "Container", isMobile: isMobile }, { children: [jsxs$1(ImageContainer$1, __assign$1({ "data-testid": "ImageContainer", isMobile: isMobile }, { children: [jsx$1(ImageCard, __assign$1({ "data-testid": "ImageCard", isMobile: isMobile }, { children: jsx$1(Image, { borderRadius: "20px", src: beforeImage, alt: "before", height: "100%", width: "100%" }, void 0) }), void 0), jsx$1(ImageCard, __assign$1({ isMobile: isMobile }, { children: jsx$1(Image, { borderRadius: "20px", src: afterImage, alt: "after", height: "100%", width: "100%" }, void 0) }), void 0)] }), void 0), jsx$1(UserInfoText, __assign$1({ "data-testid": "UserInfoText", theme: theme, isMobile: isMobile, alignCenter: alignCenter }, { children: "".concat(name, ", ").concat(age, "  |  ").concat(months, " months") }), void 0)] }), void 0));
+    var stylesBySize = getStylesBySize(size, theme);
+    return (jsxs$1(Container$2, __assign$1({ "data-testid": "Container", isMobile: isMobile, styles: stylesBySize }, { children: [jsxs$1(ImageContainer$1, __assign$1({ "data-testid": "ImageContainer", isMobile: isMobile }, { children: [jsx$1(ImageCard, __assign$1({ "data-testid": "ImageCard", isMobile: isMobile, styles: stylesBySize }, { children: jsx$1(Image, { borderRadius: imageBorderRadius, src: beforeImage, alt: "before", height: "100%", width: "100%" }, void 0) }), void 0), jsx$1(ImageCard, __assign$1({ isMobile: isMobile, styles: stylesBySize }, { children: jsx$1(Image, { borderRadius: imageBorderRadius, src: afterImage, alt: "after", height: "100%", width: "100%" }, void 0) }), void 0)] }), void 0), jsx$1(UserInfoText, __assign$1({ "data-testid": "UserInfoText", theme: theme, alignCenter: alignCenter, fontSize: isMobile ? stylesBySize.userInfoTextMobileFontSize : stylesBySize.userInfoTextFontSize }, { children: "".concat(name, ", ").concat(age, "  |  ").concat(months, " months") }), void 0)] }), void 0));
 };
 var templateObject_1$2, templateObject_2$2, templateObject_3$2;