@trafilea/afrodita-components 5.0.0-beta.75 → 5.0.0-beta.78

package/build/index.css

@@ -1,4 +1,4 @@
 .slick-slider{position:relative;display:block;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none;-khtml-user-select:none;-ms-touch-action:pan-y;touch-action:pan-y;-webkit-tap-highlight-color:transparent;}.slick-list{position:relative;display:block;overflow:hidden;margin:0;padding:0;}.slick-list:focus{outline:none;}.slick-list.dragging{cursor:pointer;cursor:hand;}.slick-slider .slick-track,.slick-slider .slick-list{-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);transform:translate3d(0,0,0);}.slick-track{position:relative;top:0;left:0;display:block;margin-left:auto;margin-right:auto;}.slick-track:before,.slick-track:after{display:table;content:'';}.slick-track:after{clear:both;}.slick-loading .slick-track{visibility:hidden;}.slick-slide{display:none;float:left;height:100%;min-height:0.063rem;}[dir='rtl'] .slick-slide{float:right;}.slick-slide img{display:block;}.slick-slide.slick-loading img{display:none;}.slick-slide.dragging img{pointer-events:none;}.slick-initialized .slick-slide{display:block;}.slick-loading .slick-slide{visibility:hidden;}.slick-vertical .slick-slide{display:block;height:auto;border:0.063rem solid transparent;}.slick-arrow.slick-hidden{display:none;}
 .slick-prev,.slick-next{font-size:0;line-height:0;position:absolute;top:50%;display:block;width:1.25rem;height:1.25rem;padding:0;-webkit-transform:translate(0,-50%);-ms-transform:translate(0,-50%);transform:translate(0,-50%);cursor:pointer;color:transparent;border:none;outline:none;background:transparent;}.slick-prev:hover,.slick-prev:focus,.slick-next:hover,.slick-next:focus{color:transparent;outline:none;background:transparent;}.slick-prev:hover:before,.slick-prev:focus:before,.slick-next:hover:before,.slick-next:focus:before{opacity:1;}.slick-prev.slick-disabled:before,.slick-next.slick-disabled:before{opacity:0.25;}.slick-prev:before,.slick-next:before{font-family:'slick';font-size:1.25rem;line-height:1;opacity:0.75;color:white;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}.slick-prev{left:-1.5rem;}[dir='rtl'] .slick-prev{right:-1.5rem;left:auto;}.slick-prev:before{content:'←';}[dir='rtl'] .slick-prev:before{content:'→';}.slick-next{right:-1.5rem;}[dir='rtl'] .slick-next{right:auto;left:-1.5rem;}.slick-next:before{content:'→';}[dir='rtl'] .slick-next:before{content:'←';}.slick-dotted.slick-slider{margin-bottom:1.875rem;}.slick-dots{position:absolute;bottom:-1.5rem;display:block;width:100%;padding:0;margin:0;list-style:none;text-align:center;}.slick-dots li{position:relative;display:inline-block;width:1.25rem;height:1.25rem;margin:0 0.313rem;padding:0;cursor:pointer;}.slick-dots li button{font-size:0;line-height:0;display:block;width:1.25rem;height:1.25rem;padding:0.313rem;cursor:pointer;color:transparent;border:0;outline:none;background:transparent;}.slick-dots li button:hover,.slick-dots li button:focus{outline:none;}.slick-dots li button:hover:before,.slick-dots li button:focus:before{opacity:1;}.slick-dots li button:before{font-family:'slick';font-size:0.375rem;line-height:1.25rem;position:absolute;top:0;left:0;width:1.25rem;height:1.25rem;content:'•';text-align:center;opacity:0.25;color:black;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}.slick-dots li.slick-active button:before{opacity:0.75;color:black;}
 .iiz{max-width:100%;margin:0;position:relative;overflow:hidden;display:inline-block;cursor:-webkit-zoom-in;cursor:zoom-in}.iiz--drag .iiz__zoom-img--visible{cursor:-webkit-grab;cursor:grab}.iiz__img{max-width:100%;height:auto;display:block;pointer-events:none;visibility:visible;opacity:1}.iiz__img--hidden{visibility:hidden;opacity:0}.iiz__img--abs{width:100%;height:100%;position:absolute;top:0;left:0;display:block}.iiz__zoom-img{width:auto!important;max-width:none!important;position:absolute;visibility:hidden;opacity:0;pointer-events:none;display:block}.iiz__zoom-img--visible{visibility:visible;opacity:1;pointer-events:auto;cursor:-webkit-zoom-out;cursor:zoom-out;-ms-touch-action:none;touch-action:none}.iiz__zoom-portal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:10000}.iiz__btn{background:rgba(255,255,255,.8);width:40px;height:40px;border:none;outline:0;padding:0;position:absolute;text-decoration:none;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-moz-appearance:none;-webkit-appearance:none;appearance:none}.iiz__btn:before{content:" ";background-position:center;background-repeat:no-repeat;display:block}.iiz__hint{bottom:10px;right:10px;pointer-events:none}.iiz__hint:before{content:" ";background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19.9 19.9'%3E%3Cpath d='M13.9 7.4C13.9 3.8 11 .9 7.4.9S.9 3.8.9 7.4s2.9 6.5 6.5 6.5 6.5-2.9 6.5-6.5zm5.3 12.5l-6.7-7.2c-1.4 1.3-3.2 2.1-5.1 2.1-4.1 0-7.4-3.3-7.4-7.4S3.3 0 7.4 0s7.4 3.3 7.4 7.4c0 1.7-.6 3.4-1.7 4.7l6.8 7.2-.7.6z' fill='%23000222'/%3E%3C/svg%3E");width:20px;height:20px}.iiz__close{top:10px;right:10px;visibility:hidden;opacity:0}.iiz__close--visible{visibility:visible;opacity:1;cursor:pointer}.iiz__close::before{content:" ";width:29px;height:29px;background-image:-webkit-gradient(linear,left top,left bottom,from(#222),to(#222)),-webkit-gradient(linear,left top,left bottom,from(#222),to(#222));background-image:linear-gradient(#222,#222),linear-gradient(#222,#222);background-size:100% 1px,1px 100%;-webkit-transform:rotate(45deg);transform:rotate(45deg)}
-.iiz{max-width:100%;margin:0;position:relative;overflow:hidden;display:inline-block;cursor:-webkit-zoom-in;cursor:zoom-in;}.zoomWrapper.iiz{max-height:510px;}.iiz--drag .iiz__zoom-img--visible{cursor:-webkit-grab;cursor:grab;}.iiz__img{max-width:100%;height:auto;display:block;pointer-events:none;visibility:visible;opacity:1;}.iiz__img--hidden{visibility:hidden;opacity:0;}.iiz__img--abs{width:100%;height:100%;position:absolute;top:0;left:0;display:block;}.iiz__zoom-img{width:auto!important;max-width:none!important;position:absolute;visibility:hidden;opacity:0;pointer-events:none;display:block;}.iiz__zoom-img--visible{visibility:visible;opacity:1;pointer-events:auto;cursor:-webkit-zoom-out;cursor:zoom-out;-ms-touch-action:none;touch-action:none;zoom:1.2;}.iiz__zoom-portal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:5;}.iiz__btn{background:rgba(255,255,255,0.8);max-width:95px;min-width:fit-content;height:32px;border:none;outline:none;padding:0 8px;position:absolute;z-index:5;text-decoration:none;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-moz-appearance:none;-webkit-appearance:none;appearance:none;}.iiz__btn:before{content:' ';background-position:center;background-repeat:no-repeat;display:block;}.iiz__hint{bottom:10%;right:0;pointer-events:none;border-radius:150px 0 0 150px;}.iiz__hint:before{content:'+';background-image:none;width:17px;height:17px;font-size:19px;border-radius:500px;border:2px solid #292929;display:inline-block;position:relative;text-align:center;line-height:17px;font-weight:600;}.iiz__hint:after{content:'Zoom in';font-size:14px;font-weight:600;display:inline-block;margin-left:5px;}.iiz__close{border-radius:150px;top:auto;right:0;left:0;margin:auto;bottom:20px;visibility:hidden;opacity:0;color:#292929;}.iiz__close--visible{visibility:visible;opacity:1;cursor:pointer;}.iiz__close::before{content:' ';width:16px;height:16px;background-image:-webkit-gradient(linear,left top,left bottom,from(#222),to(#222)),-webkit-gradient(linear,left top,left bottom,from(#222),to(#222));background-image:linear-gradient(#222,#222),linear-gradient(#222,#222);background-size:65% 2px,2px 65%;transform:rotate(45deg);border-radius:500px;border:2px solid #292929;}.iiz__close::after{content:'Close';font-size:14px;font-weight:600;display:inline-block;margin-left:5px;}
+.iiz{max-width:100%;margin:0;position:relative;overflow:hidden;display:inline-block;cursor:-webkit-zoom-in;cursor:zoom-in;}.zoomWrapper.iiz{max-height:510px;vertical-align:top;}.iiz--drag .iiz__zoom-img--visible{cursor:-webkit-grab;cursor:grab;}.iiz__img{max-width:100%;height:auto;display:block;pointer-events:none;visibility:visible;opacity:1;}.iiz__img--hidden{visibility:hidden;opacity:0;}.iiz__img--abs{width:100%;height:100%;position:absolute;top:0;left:0;display:block;}.iiz__zoom-img{width:auto!important;max-width:none!important;position:absolute;visibility:hidden;opacity:0;pointer-events:none;display:block;}.iiz__zoom-img--visible{visibility:visible;opacity:1;pointer-events:auto;cursor:-webkit-zoom-out;cursor:zoom-out;-ms-touch-action:none;touch-action:none;zoom:1.2;}.iiz__zoom-portal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:5;}.iiz__btn{background:rgba(255,255,255,0.8);max-width:95px;min-width:fit-content;height:32px;border:none;outline:none;padding:0 8px;position:absolute;z-index:5;text-decoration:none;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-moz-appearance:none;-webkit-appearance:none;appearance:none;}.iiz__btn:before{content:' ';background-position:center;background-repeat:no-repeat;display:block;}.iiz__hint{bottom:10%;right:0;pointer-events:none;border-radius:150px 0 0 150px;}.iiz__hint:before{content:'+';background-image:none;width:17px;height:17px;font-size:19px;border-radius:500px;border:2px solid #292929;display:inline-block;position:relative;text-align:center;line-height:17px;font-weight:600;}.iiz__hint:after{content:'Zoom in';font-size:14px;font-weight:600;display:inline-block;margin-left:5px;}.iiz__close{border-radius:150px;top:auto;right:0;left:0;margin:auto;bottom:20px;visibility:hidden;opacity:0;color:#292929;}.iiz__close--visible{visibility:visible;opacity:1;cursor:pointer;}.iiz__close::before{content:' ';width:16px;height:16px;background-image:-webkit-gradient(linear,left top,left bottom,from(#222),to(#222)),-webkit-gradient(linear,left top,left bottom,from(#222),to(#222));background-image:linear-gradient(#222,#222),linear-gradient(#222,#222);background-size:65% 2px,2px 65%;transform:rotate(45deg);border-radius:500px;border:2px solid #292929;}.iiz__close::after{content:'Close';font-size:14px;font-weight:600;display:inline-block;margin-left:5px;}

package/build/index.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { IconProps as IconProps$1 } from 'src/types/types';
-import React, { FC, ReactNode, ElementType, CSSProperties, AriaAttributes, AnchorHTMLAttributes, LabelHTMLAttributes, RefObject } from 'react';
+import React, { FC, ReactNode, ElementType, CSSProperties, AriaAttributes, HTMLAttributes, LabelHTMLAttributes, RefObject } from 'react';
 import * as _emotion_react_jsx_runtime from '@emotion/react/jsx-runtime';
 import * as _emotion_styled from '@emotion/styled';
 import { StyledComponent } from '@emotion/styled';
@@ -723,9 +723,11 @@ interface PriceLabelProps {
     size?: ComponentSize.Small | ComponentSize.Medium | ComponentSize.Large;
     discount?: DiscountTagProps;
     finalPriceStyled?: boolean;
+    finalPriceStyle?: React.CSSProperties;
+    originalPriceStyled?: boolean;
     testId?: string;
 }
-declare const PriceLabel: ({ finalPrice, originalPrice, discount, color, testId, finalPriceStyled, size, }: PriceLabelProps) => JSX.Element;
+declare const PriceLabel: ({ finalPrice, originalPrice, discount, color, testId, finalPriceStyled, finalPriceStyle, originalPriceStyled, size, }: PriceLabelProps) => JSX.Element;
 
 interface ColorPickerProps {
     options: ColorPickerOption[];
@@ -804,12 +806,13 @@ interface AccordionProps {
     defaultOpen?: boolean;
     variant: 'simple' | 'box';
     header: ReactNode;
+    headerOnOpen?: ReactNode;
     content: ReactNode;
     disabled?: boolean;
     openIcon: IconType;
     closeIcon: IconType;
 }
-declare const Accordion: ({ header, content, defaultOpen, variant, disabled, openIcon, closeIcon, }: AccordionProps) => JSX.Element;
+declare const Accordion: ({ header, headerOnOpen, content, defaultOpen, variant, disabled, openIcon, closeIcon, }: AccordionProps) => JSX.Element;
 
 declare const ThemeProvider: FC<{
     theme: Theme;
@@ -1494,8 +1497,9 @@ interface ProductOrderItemProps {
         text: string;
         backgroundColor: string;
     };
+    finalPriceStyle?: React.CSSProperties;
 }
-declare const SimpleOrderItem: ({ title, subtitle, image, price, tag, quantity, }: ProductOrderItemProps) => JSX.Element;
+declare const SimpleOrderItem: ({ title, subtitle, image, price, tag, quantity, finalPriceStyle, }: ProductOrderItemProps) => JSX.Element;
 
 interface ReviewProps {
     reviewerName: string;
@@ -1669,7 +1673,7 @@ interface PaginationProps {
 }
 declare const Pagination: ({ from, to, currentPage, onChange, underlineActive, boldActive, disabled, }: PaginationProps) => JSX.Element;
 
-declare const Text: FC<TextProps>;
+declare const Text: ({ variant, children, testId, ...allProps }: TextProps) => _emotion_react_jsx_runtime.JSX.Element;
 declare type TextHeroProps = {
     variant: 'hero1' | 'hero2' | 'hero3';
     weight?: 'heavy' | 'bold' | 'demi';
@@ -1679,6 +1683,7 @@ declare type TextHeroProps = {
     wide?: never;
     original?: never;
     allCaps?: never;
+    href: never;
 };
 declare type TextDisplayProps = {
     variant: 'display1' | 'display2';
@@ -1689,6 +1694,7 @@ declare type TextDisplayProps = {
     wide?: never;
     original?: never;
     allCaps?: never;
+    href: never;
 };
 declare type TextHeadingProps = {
     variant: 'heading1' | 'heading2' | 'heading3' | 'heading4' | 'heading5' | 'heading6';
@@ -1699,6 +1705,7 @@ declare type TextHeadingProps = {
     wide?: never;
     original?: never;
     allCaps?: never;
+    href?: never;
 };
 declare type TextBodyProps = {
     variant: 'body';
@@ -1709,6 +1716,7 @@ declare type TextBodyProps = {
     wide?: never;
     original?: never;
     allCaps?: never;
+    href?: never;
 };
 declare type TextButtonProps = {
     variant: 'button';
@@ -1719,6 +1727,7 @@ declare type TextButtonProps = {
     wide?: boolean;
     original?: never;
     allCaps?: never;
+    href?: never;
 };
 declare type TextPricingProps = {
     variant: 'pricing';
@@ -1729,6 +1738,7 @@ declare type TextPricingProps = {
     wide?: never;
     original?: boolean;
     allCaps?: never;
+    href?: never;
 };
 declare type TextLinkProps = {
     variant: 'link';
@@ -1739,7 +1749,8 @@ declare type TextLinkProps = {
     wide?: never;
     original?: never;
     allCaps?: never;
-} & AnchorHTMLAttributes<'a'>;
+    href?: string;
+};
 declare type TextLabelProps = {
     variant: 'label';
     weight?: 'regular' | 'demi';
@@ -1749,6 +1760,7 @@ declare type TextLabelProps = {
     wide?: never;
     original?: never;
     allCaps?: never;
+    href?: never;
 } & LabelHTMLAttributes<'label'>;
 declare type TextTagProps = {
     variant: 'tag';
@@ -1759,8 +1771,10 @@ declare type TextTagProps = {
     wide?: never;
     original?: never;
     allCaps?: boolean;
+    href?: never;
 };
-declare type TextProps = AriaAttributes & {
+declare type TextProps<T = Element> = AriaAttributes & HTMLAttributes<T> & {
+    children: ReactNode;
     style?: CSSProperties;
     className?: string;
     testId?: string;
@@ -1975,8 +1989,10 @@ interface TextWithImageProps {
     btnHoverBGColor?: string;
     imgVideo: imageVideoProps;
     contentAfterButton?: React.ReactNode;
+    titleStyle?: React.CSSProperties;
+    textStyle?: React.CSSProperties;
 }
-declare const TextWithImage: ({ title, text, buttomText, backgroundColor, imageLeftSide, ...props }: TextWithImageProps) => _emotion_react_jsx_runtime.JSX.Element;
+declare const TextWithImage: ({ title, text, buttomText, backgroundColor, imageLeftSide, titleStyle, textStyle, ...props }: TextWithImageProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 declare global {
     interface Events {

package/build/index.esm.css

@@ -1,4 +1,4 @@
 .slick-slider{position:relative;display:block;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none;-khtml-user-select:none;-ms-touch-action:pan-y;touch-action:pan-y;-webkit-tap-highlight-color:transparent;}.slick-list{position:relative;display:block;overflow:hidden;margin:0;padding:0;}.slick-list:focus{outline:none;}.slick-list.dragging{cursor:pointer;cursor:hand;}.slick-slider .slick-track,.slick-slider .slick-list{-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);transform:translate3d(0,0,0);}.slick-track{position:relative;top:0;left:0;display:block;margin-left:auto;margin-right:auto;}.slick-track:before,.slick-track:after{display:table;content:'';}.slick-track:after{clear:both;}.slick-loading .slick-track{visibility:hidden;}.slick-slide{display:none;float:left;height:100%;min-height:0.063rem;}[dir='rtl'] .slick-slide{float:right;}.slick-slide img{display:block;}.slick-slide.slick-loading img{display:none;}.slick-slide.dragging img{pointer-events:none;}.slick-initialized .slick-slide{display:block;}.slick-loading .slick-slide{visibility:hidden;}.slick-vertical .slick-slide{display:block;height:auto;border:0.063rem solid transparent;}.slick-arrow.slick-hidden{display:none;}
 .slick-prev,.slick-next{font-size:0;line-height:0;position:absolute;top:50%;display:block;width:1.25rem;height:1.25rem;padding:0;-webkit-transform:translate(0,-50%);-ms-transform:translate(0,-50%);transform:translate(0,-50%);cursor:pointer;color:transparent;border:none;outline:none;background:transparent;}.slick-prev:hover,.slick-prev:focus,.slick-next:hover,.slick-next:focus{color:transparent;outline:none;background:transparent;}.slick-prev:hover:before,.slick-prev:focus:before,.slick-next:hover:before,.slick-next:focus:before{opacity:1;}.slick-prev.slick-disabled:before,.slick-next.slick-disabled:before{opacity:0.25;}.slick-prev:before,.slick-next:before{font-family:'slick';font-size:1.25rem;line-height:1;opacity:0.75;color:white;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}.slick-prev{left:-1.5rem;}[dir='rtl'] .slick-prev{right:-1.5rem;left:auto;}.slick-prev:before{content:'←';}[dir='rtl'] .slick-prev:before{content:'→';}.slick-next{right:-1.5rem;}[dir='rtl'] .slick-next{right:auto;left:-1.5rem;}.slick-next:before{content:'→';}[dir='rtl'] .slick-next:before{content:'←';}.slick-dotted.slick-slider{margin-bottom:1.875rem;}.slick-dots{position:absolute;bottom:-1.5rem;display:block;width:100%;padding:0;margin:0;list-style:none;text-align:center;}.slick-dots li{position:relative;display:inline-block;width:1.25rem;height:1.25rem;margin:0 0.313rem;padding:0;cursor:pointer;}.slick-dots li button{font-size:0;line-height:0;display:block;width:1.25rem;height:1.25rem;padding:0.313rem;cursor:pointer;color:transparent;border:0;outline:none;background:transparent;}.slick-dots li button:hover,.slick-dots li button:focus{outline:none;}.slick-dots li button:hover:before,.slick-dots li button:focus:before{opacity:1;}.slick-dots li button:before{font-family:'slick';font-size:0.375rem;line-height:1.25rem;position:absolute;top:0;left:0;width:1.25rem;height:1.25rem;content:'•';text-align:center;opacity:0.25;color:black;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}.slick-dots li.slick-active button:before{opacity:0.75;color:black;}
 .iiz{max-width:100%;margin:0;position:relative;overflow:hidden;display:inline-block;cursor:-webkit-zoom-in;cursor:zoom-in}.iiz--drag .iiz__zoom-img--visible{cursor:-webkit-grab;cursor:grab}.iiz__img{max-width:100%;height:auto;display:block;pointer-events:none;visibility:visible;opacity:1}.iiz__img--hidden{visibility:hidden;opacity:0}.iiz__img--abs{width:100%;height:100%;position:absolute;top:0;left:0;display:block}.iiz__zoom-img{width:auto!important;max-width:none!important;position:absolute;visibility:hidden;opacity:0;pointer-events:none;display:block}.iiz__zoom-img--visible{visibility:visible;opacity:1;pointer-events:auto;cursor:-webkit-zoom-out;cursor:zoom-out;-ms-touch-action:none;touch-action:none}.iiz__zoom-portal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:10000}.iiz__btn{background:rgba(255,255,255,.8);width:40px;height:40px;border:none;outline:0;padding:0;position:absolute;text-decoration:none;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-moz-appearance:none;-webkit-appearance:none;appearance:none}.iiz__btn:before{content:" ";background-position:center;background-repeat:no-repeat;display:block}.iiz__hint{bottom:10px;right:10px;pointer-events:none}.iiz__hint:before{content:" ";background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19.9 19.9'%3E%3Cpath d='M13.9 7.4C13.9 3.8 11 .9 7.4.9S.9 3.8.9 7.4s2.9 6.5 6.5 6.5 6.5-2.9 6.5-6.5zm5.3 12.5l-6.7-7.2c-1.4 1.3-3.2 2.1-5.1 2.1-4.1 0-7.4-3.3-7.4-7.4S3.3 0 7.4 0s7.4 3.3 7.4 7.4c0 1.7-.6 3.4-1.7 4.7l6.8 7.2-.7.6z' fill='%23000222'/%3E%3C/svg%3E");width:20px;height:20px}.iiz__close{top:10px;right:10px;visibility:hidden;opacity:0}.iiz__close--visible{visibility:visible;opacity:1;cursor:pointer}.iiz__close::before{content:" ";width:29px;height:29px;background-image:-webkit-gradient(linear,left top,left bottom,from(#222),to(#222)),-webkit-gradient(linear,left top,left bottom,from(#222),to(#222));background-image:linear-gradient(#222,#222),linear-gradient(#222,#222);background-size:100% 1px,1px 100%;-webkit-transform:rotate(45deg);transform:rotate(45deg)}
-.iiz{max-width:100%;margin:0;position:relative;overflow:hidden;display:inline-block;cursor:-webkit-zoom-in;cursor:zoom-in;}.zoomWrapper.iiz{max-height:510px;}.iiz--drag .iiz__zoom-img--visible{cursor:-webkit-grab;cursor:grab;}.iiz__img{max-width:100%;height:auto;display:block;pointer-events:none;visibility:visible;opacity:1;}.iiz__img--hidden{visibility:hidden;opacity:0;}.iiz__img--abs{width:100%;height:100%;position:absolute;top:0;left:0;display:block;}.iiz__zoom-img{width:auto!important;max-width:none!important;position:absolute;visibility:hidden;opacity:0;pointer-events:none;display:block;}.iiz__zoom-img--visible{visibility:visible;opacity:1;pointer-events:auto;cursor:-webkit-zoom-out;cursor:zoom-out;-ms-touch-action:none;touch-action:none;zoom:1.2;}.iiz__zoom-portal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:5;}.iiz__btn{background:rgba(255,255,255,0.8);max-width:95px;min-width:fit-content;height:32px;border:none;outline:none;padding:0 8px;position:absolute;z-index:5;text-decoration:none;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-moz-appearance:none;-webkit-appearance:none;appearance:none;}.iiz__btn:before{content:' ';background-position:center;background-repeat:no-repeat;display:block;}.iiz__hint{bottom:10%;right:0;pointer-events:none;border-radius:150px 0 0 150px;}.iiz__hint:before{content:'+';background-image:none;width:17px;height:17px;font-size:19px;border-radius:500px;border:2px solid #292929;display:inline-block;position:relative;text-align:center;line-height:17px;font-weight:600;}.iiz__hint:after{content:'Zoom in';font-size:14px;font-weight:600;display:inline-block;margin-left:5px;}.iiz__close{border-radius:150px;top:auto;right:0;left:0;margin:auto;bottom:20px;visibility:hidden;opacity:0;color:#292929;}.iiz__close--visible{visibility:visible;opacity:1;cursor:pointer;}.iiz__close::before{content:' ';width:16px;height:16px;background-image:-webkit-gradient(linear,left top,left bottom,from(#222),to(#222)),-webkit-gradient(linear,left top,left bottom,from(#222),to(#222));background-image:linear-gradient(#222,#222),linear-gradient(#222,#222);background-size:65% 2px,2px 65%;transform:rotate(45deg);border-radius:500px;border:2px solid #292929;}.iiz__close::after{content:'Close';font-size:14px;font-weight:600;display:inline-block;margin-left:5px;}
+.iiz{max-width:100%;margin:0;position:relative;overflow:hidden;display:inline-block;cursor:-webkit-zoom-in;cursor:zoom-in;}.zoomWrapper.iiz{max-height:510px;vertical-align:top;}.iiz--drag .iiz__zoom-img--visible{cursor:-webkit-grab;cursor:grab;}.iiz__img{max-width:100%;height:auto;display:block;pointer-events:none;visibility:visible;opacity:1;}.iiz__img--hidden{visibility:hidden;opacity:0;}.iiz__img--abs{width:100%;height:100%;position:absolute;top:0;left:0;display:block;}.iiz__zoom-img{width:auto!important;max-width:none!important;position:absolute;visibility:hidden;opacity:0;pointer-events:none;display:block;}.iiz__zoom-img--visible{visibility:visible;opacity:1;pointer-events:auto;cursor:-webkit-zoom-out;cursor:zoom-out;-ms-touch-action:none;touch-action:none;zoom:1.2;}.iiz__zoom-portal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:5;}.iiz__btn{background:rgba(255,255,255,0.8);max-width:95px;min-width:fit-content;height:32px;border:none;outline:none;padding:0 8px;position:absolute;z-index:5;text-decoration:none;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-moz-appearance:none;-webkit-appearance:none;appearance:none;}.iiz__btn:before{content:' ';background-position:center;background-repeat:no-repeat;display:block;}.iiz__hint{bottom:10%;right:0;pointer-events:none;border-radius:150px 0 0 150px;}.iiz__hint:before{content:'+';background-image:none;width:17px;height:17px;font-size:19px;border-radius:500px;border:2px solid #292929;display:inline-block;position:relative;text-align:center;line-height:17px;font-weight:600;}.iiz__hint:after{content:'Zoom in';font-size:14px;font-weight:600;display:inline-block;margin-left:5px;}.iiz__close{border-radius:150px;top:auto;right:0;left:0;margin:auto;bottom:20px;visibility:hidden;opacity:0;color:#292929;}.iiz__close--visible{visibility:visible;opacity:1;cursor:pointer;}.iiz__close::before{content:' ';width:16px;height:16px;background-image:-webkit-gradient(linear,left top,left bottom,from(#222),to(#222)),-webkit-gradient(linear,left top,left bottom,from(#222),to(#222));background-image:linear-gradient(#222,#222),linear-gradient(#222,#222);background-size:65% 2px,2px 65%;transform:rotate(45deg);border-radius:500px;border:2px solid #292929;}.iiz__close::after{content:'Close';font-size:14px;font-weight:600;display:inline-block;margin-left:5px;}

package/build/index.esm.js

@@ -3700,7 +3700,7 @@ var transformFonts = function (fonts) {
         return inline("@font-face { ".concat(css.join(';\n'), "; }"));
     })
         .join('\n');
-    return inline("\n    ".concat(css, "\n    body {\n      font-family: \"").concat(fonts.config[0].family, "\";\n    }\n  "));
+    return inline("\n    ".concat(css, "\n    body, input {\n      font-family: \"").concat(fonts.config[0].family, "\";\n    }\n  "));
 };
 var inline = function (text) {
     return text.trim().replace(/\s+/g, ' ').replace(/\n/g, '');
@@ -4632,7 +4632,7 @@ 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, _c = _a.size, size = _c === void 0 ? ComponentSize.Medium : _c;
+    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 theme = useTheme();
     var finalPriceArray = typeof finalPrice === 'string' && finalPrice.includes('.') && finalPrice.includes('$')
         ? finalPrice.split('$')[1].split('.')
@@ -4643,8 +4643,8 @@ var PriceLabel = function (_a) {
         color: color || theme.colors.pallete.secondary.color,
         weight: 700,
     };
-    var OriginalPrice = function () { return (jsx$1(Price, __assign$1({ size: ComponentSize.Small, color: theme.colors.shades['300'].color, margin: true, underlined: true, "data-testid": getTestId(testId, 'discount') }, { children: originalPrice }), void 0)); };
-    return (jsxs$1(Container$G, { children: [availableFinalPriceStyled && originalPrice && jsx$1(OriginalPrice, {}, void 0), availableFinalPriceStyled ? (jsxs$1(FinalPriceStyledContainer, __assign$1({ "data-testid": getTestId(testId, 'price') }, { children: [jsx$1(Price, __assign$1({ margin: true, finalPriceStyledSmall: true }, priceCommonProps, { children: "$" }), void 0), jsx$1(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { children: finalPriceArray[0] }), void 0), jsx$1(Price, __assign$1({ finalPriceStyledSmall: true }, priceCommonProps, { children: finalPriceArray[1] }), void 0)] }), void 0)) : (jsxs$1(FinalPriceContainer, { children: [jsx$1(Price, __assign$1({ margin: true, "data-testid": getTestId(testId, 'price') }, priceCommonProps, { children: finalPrice }), void 0), originalPrice && jsx$1(OriginalPrice, {}, void 0)] }, 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 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, 'discount') }, { children: originalPrice }), void 0)); };
+    return (jsxs$1(Container$G, { children: [availableFinalPriceStyled && originalPrice && jsx$1(OriginalPrice, {}, void 0), availableFinalPriceStyled ? (jsxs$1(FinalPriceStyledContainer, __assign$1({ "data-testid": getTestId(testId, 'price') }, { children: [jsx$1(Price, __assign$1({ margin: true, finalPriceStyledSmall: true }, priceCommonProps, { children: "$" }), void 0), jsx$1(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { children: finalPriceArray[0] }), void 0), jsx$1(Price, __assign$1({ finalPriceStyledSmall: true }, priceCommonProps, { children: finalPriceArray[1] }), void 0)] }), void 0)) : (jsxs$1(FinalPriceContainer, { children: [jsx$1(Price, __assign$1({ margin: true, "data-testid": getTestId(testId, 'price') }, priceCommonProps, { style: finalPriceStyle }, { children: finalPrice }), void 0), originalPrice && jsx$1(OriginalPrice, {}, void 0)] }, 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$14, templateObject_2$H, templateObject_3$v, templateObject_4$n, templateObject_5$d;
 
@@ -11201,13 +11201,13 @@ 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)]; });
 var StyledPanel = newStyled(Ye.Panel)(AccordionDetailsStyles.baseStyles, function (props) { return [AccordionDetailsStyles[props.variant](props.theme)]; });
 var Accordion$1 = function (_a) {
-    var header = _a.header, content = _a.content, defaultOpen = _a.defaultOpen, variant = _a.variant, _b = _a.disabled, disabled = _b === void 0 ? false : _b, openIcon = _a.openIcon, closeIcon = _a.closeIcon;
+    var header = _a.header, headerOnOpen = _a.headerOnOpen, content = _a.content, defaultOpen = _a.defaultOpen, variant = _a.variant, _b = _a.disabled, disabled = _b === void 0 ? false : _b, openIcon = _a.openIcon, closeIcon = _a.closeIcon;
     var theme = useTheme();
     return (jsx$1(StyledDisclosure, __assign$1({ theme: theme, as: "div", defaultOpen: defaultOpen, variant: variant, disabled: disabled }, { children: function (_a) {
             var open = _a.open;
             var ControlIcon = disabled ? openIcon : open ? closeIcon : openIcon;
             var showPanel = open && !disabled;
-            return (jsxs$1(Fragment$1, { children: [jsxs$1(StyledButton$1, __assign$1({ theme: theme, variant: variant, disabled: disabled }, { children: [header, jsx$1(ControlIcon, { title: open ? '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 }, { children: [showPanel && headerOnOpen ? headerOnOpen : header, jsx$1(ControlIcon, { title: open ? '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));
         } }), void 0));
 };
 
@@ -11578,7 +11578,7 @@ var StyledInput = newStyled.input(templateObject_2$v || (templateObject_2$v = __
 });
 var InputWrapper = newStyled.div(templateObject_3$p || (templateObject_3$p = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  height: ", ";\n"], ["\n  position: relative;\n  display: flex;\n  height: ", ";\n"])), function (_a) {
     var size = _a.size, inlinePlaceholder = _a.inlinePlaceholder;
-    return !inlinePlaceholder ? (size === 'small' ? '36px' : '44px') : '48px';
+    return !inlinePlaceholder ? (size === 'small' ? '36px' : '40px') : '48px';
 });
 var AnimatedPlaceholder = newStyled.span(templateObject_4$i || (templateObject_4$i = __makeTemplateObject(["\n  color: #8b8b8b;\n  font-weight: 400;\n  left: 0.9375rem;\n  bottom: 0.9375rem;\n  transition: all 0.2s ease;\n  position: absolute;\n  pointer-events: none;\n  font-size: 0.875rem;\n"], ["\n  color: #8b8b8b;\n  font-weight: 400;\n  left: 0.9375rem;\n  bottom: 0.9375rem;\n  transition: all 0.2s ease;\n  position: absolute;\n  pointer-events: none;\n  font-size: 0.875rem;\n"])));
 var ClearInput = newStyled.div(templateObject_5$a || (templateObject_5$a = __makeTemplateObject(["\n  right: 0.75rem;\n  top: 1rem;\n  position: absolute;\n  cursor: pointer;\n"], ["\n  right: 0.75rem;\n  top: 1rem;\n  position: absolute;\n  cursor: pointer;\n"])));
@@ -11628,6 +11628,7 @@ var BaseInput = function (_a) {
         placeholderColor: theme.component.input.placeholderColor,
         disabledBackgroundColor: theme.colors.background.disabled,
         disabledColor: theme.colors.text.disabled,
+        fontFamily: theme.fonts.config[0].family,
         fontSize: inlinePlaceholder
             ? theme.component.inputPlaceholder.fontSize
             : theme.component.input.fontSize,
@@ -12010,9 +12011,9 @@ var PriceContainer = newStyled.div(templateObject_4$c || (templateObject_4$c = _
 });
 var Quantity = newStyled.div(templateObject_5$7 || (templateObject_5$7 = __makeTemplateObject(["\n  position: absolute;\n  right: 0;\n  top: 0;\n  transform: translate(30%, -30%);\n  border-radius: 50%;\n  width: 1.4rem;\n  height: 1.4rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--colors-shades-450-color);\n  color: var(--colors-shades-450-contrast);\n  font-size: 0.8rem;\n"], ["\n  position: absolute;\n  right: 0;\n  top: 0;\n  transform: translate(30%, -30%);\n  border-radius: 50%;\n  width: 1.4rem;\n  height: 1.4rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--colors-shades-450-color);\n  color: var(--colors-shades-450-contrast);\n  font-size: 0.8rem;\n"])));
 var SimpleOrderItem = function (_a) {
-    var title = _a.title, subtitle = _a.subtitle, image = _a.image, price = _a.price, tag = _a.tag, quantity = _a.quantity;
+    var title = _a.title, subtitle = _a.subtitle, image = _a.image, price = _a.price, tag = _a.tag, quantity = _a.quantity, finalPriceStyle = _a.finalPriceStyle;
     var theme = useTheme();
-    return (jsxs$1(Container$k, { children: [jsxs$1(ImageContainer$1, { children: [jsx$1(Image, { src: image.src, alt: image.alt, width: "4.063rem", height: "5.375rem", objectFit: "cover", objectPosition: "center" }, void 0), quantity ? jsx$1(Quantity, __assign$1({ "data-testid": "order-item-quantity" }, { children: quantity }), void 0) : null] }, void 0), jsxs$1(DescriptionContainer, __assign$1({ "data-testid": "order-item-description-container", theme: theme }, { children: [jsx$1(Title$3, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0), jsx$1(Subtitle, __assign$1({ color: theme.colors.shades['700'].color }, { children: subtitle }), void 0), jsxs$1(PriceContainer, __assign$1({ "data-testid": "order-item-price-container", withTag: !!tag, theme: theme }, { children: [tag && (jsx$1(OfferBanner, { discountAppliedText: tag === null || tag === void 0 ? void 0 : tag.text, backgroundColor: tag === null || tag === void 0 ? void 0 : tag.backgroundColor }, void 0)), jsx$1(PriceLabel, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, color: price.color || theme.colors.shades['700'].color, size: ComponentSize.Small }, void 0)] }), void 0)] }), void 0)] }, void 0));
+    return (jsxs$1(Container$k, { children: [jsxs$1(ImageContainer$1, { children: [jsx$1(Image, { src: image.src, alt: image.alt, width: "4.063rem", height: "5.375rem", objectFit: "cover", objectPosition: "center" }, void 0), quantity ? jsx$1(Quantity, __assign$1({ "data-testid": "order-item-quantity" }, { children: quantity }), void 0) : null] }, void 0), jsxs$1(DescriptionContainer, __assign$1({ "data-testid": "order-item-description-container", theme: theme }, { children: [jsx$1(Title$3, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0), jsx$1(Subtitle, __assign$1({ color: theme.colors.shades['700'].color }, { children: subtitle }), void 0), jsxs$1(PriceContainer, __assign$1({ "data-testid": "order-item-price-container", withTag: !!tag, theme: theme }, { children: [tag && (jsx$1(OfferBanner, { discountAppliedText: tag === null || tag === void 0 ? void 0 : tag.text, backgroundColor: tag === null || tag === void 0 ? void 0 : tag.backgroundColor }, void 0)), jsx$1(PriceLabel, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, color: price.color || theme.colors.shades['700'].color, size: ComponentSize.Small, finalPriceStyle: finalPriceStyle }, void 0)] }), void 0)] }), void 0)] }, void 0));
 };
 var templateObject_1$x, templateObject_2$k, templateObject_3$i, templateObject_4$c, templateObject_5$7;
 
@@ -17127,11 +17128,11 @@ var IconsWithTitle = function (_a) {
         console.error('Icon', iconName, 'not found');
         return null;
     }
-    return (jsx$1(Fragment$1, { children: jsxs$1(Container$1, { children: [jsx$1(IconWrapper, __assign$1({ backgroundColor: backgroundColor }, { children: jsx$1(IconComponent, { width: isMobile ? 3 : 4, height: isMobile ? 3 : 4, fill: iconColor }, void 0) }), void 0), jsx$1(Text$6, __assign$1({ variant: "heading6", style: {
+    return (jsx$1(Fragment$1, { children: jsxs$1(Container$1, { children: [jsx$1(IconWrapper, __assign$1({ backgroundColor: backgroundColor }, { children: jsx$1(IconComponent, { width: isMobile ? 3 : 4, height: isMobile ? 3 : 4, fill: iconColor }, void 0) }), void 0), jsx$1(Text$6, __assign$1({ variant: "heading6", weight: "demi", style: {
                         fontSize: '14px',
                         textTransform: 'uppercase',
                         textAlign: 'center',
-                        lineHeight: '16px',
+                        lineHeight: '18px',
                     } }, { children: iconTitle }), void 0)] }, void 0) }, void 0));
 };
 var templateObject_1$2;
@@ -17166,20 +17167,24 @@ var Container = newStyled.div(templateObject_3 || (templateObject_3 = __makeTemp
 var TextContainer = newStyled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 0 15px;\n  gap: 24px;\n  text-align: center;\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 0 15px;\n  gap: 24px;\n  text-align: center;\n"])));
 var TextWithImage = function (_a) {
     var _b, _c, _d, _e;
-    var title = _a.title, text = _a.text, buttomText = _a.buttomText, backgroundColor = _a.backgroundColor, imageLeftSide = _a.imageLeftSide, props = __rest(_a, ["title", "text", "buttomText", "backgroundColor", "imageLeftSide"]);
+    var title = _a.title, text = _a.text, buttomText = _a.buttomText, backgroundColor = _a.backgroundColor, imageLeftSide = _a.imageLeftSide, titleStyle = _a.titleStyle, textStyle = _a.textStyle, props = __rest(_a, ["title", "text", "buttomText", "backgroundColor", "imageLeftSide", "titleStyle", "textStyle"]);
     var isMobile = useWindowDimensions({ desktop: 768, mobile: 0 }).isMobile;
-    var ImageTitle = function () { return (jsxs(Fragment, { children: [!isMobile && (jsx(Text$6, __assign$1({ variant: "heading2", weight: "bold", style: {
+    var ImageTitle = function () { return (jsx(Fragment, { children: !isMobile ? (jsx(Text$6, __assign$1({ variant: "heading2", weight: "bold", style: titleStyle
+                ? titleStyle
+                : {
                     color: '#000000',
                     textAlign: 'center',
-                } }, { children: title }), void 0)), isMobile && (jsx(Text$6, __assign$1({ variant: "heading3", weight: "bold", style: {
+                } }, { children: title }), void 0)) : (jsx(Text$6, __assign$1({ variant: "heading3", weight: "bold", style: titleStyle
+                ? titleStyle
+                : {
                     color: '#000000',
                     textAlign: 'center',
-                } }, { children: title }), void 0))] }, void 0)); };
+                } }, { children: title }), void 0)) }, void 0)); };
     var buttonAction = function () {
         // @ts-ignore
         props.isRedirectionURL ? (window.location.href = props.URLLink) : props.onButtonClick;
     };
-    return (jsxs(Container, __assign$1({ style: { backgroundColor: backgroundColor } }, { children: [isMobile && jsx(ImageTitle, {}, void 0), (imageLeftSide || isMobile) && (jsx(ImageVideo, { imageLink: (_b = props.imgVideo) === null || _b === void 0 ? void 0 : _b.imageLink, isMobile: isMobile, isVideo: (_c = props.imgVideo) === null || _c === void 0 ? void 0 : _c.isVideo }, void 0)), jsxs(TextContainer, { children: [!isMobile && jsx(ImageTitle, {}, void 0), jsx(Text$6, __assign$1({ variant: "body", weight: "regular", style: { maxWidth: '450px' } }, { children: text }), void 0), jsx(BaseCTA, { text: buttomText, size: ComponentSize.Medium, wide: isMobile ? true : false, onClick: buttonAction, testId: buttomText, css: {
+    return (jsxs(Container, __assign$1({ style: { backgroundColor: backgroundColor } }, { children: [isMobile && jsx(ImageTitle, {}, void 0), (imageLeftSide || isMobile) && (jsx(ImageVideo, { imageLink: (_b = props.imgVideo) === null || _b === void 0 ? void 0 : _b.imageLink, isMobile: isMobile, isVideo: (_c = props.imgVideo) === null || _c === void 0 ? void 0 : _c.isVideo }, void 0)), jsxs(TextContainer, { children: [!isMobile && jsx(ImageTitle, {}, void 0), jsx(Text$6, __assign$1({ variant: "body", weight: "regular", style: textStyle ? textStyle : { maxWidth: '450px' } }, { children: text }), void 0), jsx(BaseCTA, { text: buttomText, size: ComponentSize.Medium, wide: isMobile ? true : false, onClick: buttonAction, testId: buttomText, css: {
                             backgroundColor: props.btnBGColor,
                             color: '#ffffff',
                             border: props.btnBGColor,