@trafilea/afrodita-components 5.0.0-beta.5 → 5.0.0-beta.50

package/build/index.css

@@ -1,2 +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;}
+.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;}

package/build/index.d.ts

@@ -2,8 +2,9 @@
 import { IconProps as IconProps$1 } from 'src/types/types';
 import React, { FC, ReactNode, ElementType, CSSProperties, AriaAttributes, AnchorHTMLAttributes, LabelHTMLAttributes, RefObject } from 'react';
 import * as _emotion_react_jsx_runtime from '@emotion/react/jsx-runtime';
-import * as _emotion_react_types_jsx_namespace from '@emotion/react/types/jsx-namespace';
 import * as _emotion_styled from '@emotion/styled';
+import { StyledComponent } from '@emotion/styled';
+import * as _emotion_react_types_jsx_namespace from '@emotion/react/types/jsx-namespace';
 import * as _emotion_react from '@emotion/react';
 
 declare enum CardSectionType {
@@ -33,6 +34,7 @@ interface IconProps {
     height?: number;
     fill?: string;
     title?: string;
+    testId?: string;
 }
 declare type ButtonType = 'button' | 'submit' | 'reset';
 interface CTAProps {
@@ -100,7 +102,11 @@ declare type Filter = {
     title: string;
     columns: number;
     isOpenByDefault?: boolean;
-    items: string[];
+    isMultiselect: boolean;
+    items: Array<{
+        label: string;
+        checked?: boolean;
+    }>;
 };
 declare type FilterChange = {
     sectionIndex: number;
@@ -111,6 +117,7 @@ interface SearchBarOptionItem {
     src: string;
     price: string;
     title: string;
+    optionUrl: string;
 }
 
 declare const SixtyDaysGuarantee: ({ height, width, fill, title }: IconProps) => JSX.Element;
@@ -143,6 +150,12 @@ declare const Close: ({ height, width, fill }: IconProps) => JSX.Element;
 
 declare const Trash: ({ height, width, fill }: IconProps) => JSX.Element;
 
+declare const Warning: ({ height, width, fill }: IconProps) => JSX.Element;
+
+declare const Edit: ({ height, width, fill }: IconProps) => JSX.Element;
+
+declare const SignOut: ({ height, width, fill }: IconProps) => JSX.Element;
+
 declare const Actions_Check: typeof Check;
 declare const Actions_ClearLight: typeof ClearLight;
 declare const Actions_LightExclamation: typeof LightExclamation;
@@ -151,6 +164,9 @@ declare const Actions_LightCheck: typeof LightCheck;
 declare const Actions_Question: typeof Question;
 declare const Actions_Close: typeof Close;
 declare const Actions_Trash: typeof Trash;
+declare const Actions_Warning: typeof Warning;
+declare const Actions_Edit: typeof Edit;
+declare const Actions_SignOut: typeof SignOut;
 declare namespace Actions {
   export {
     Actions_Check as Check,
@@ -161,6 +177,9 @@ declare namespace Actions {
     Actions_Question as Question,
     Actions_Close as Close,
     Actions_Trash as Trash,
+    Actions_Warning as Warning,
+    Actions_Edit as Edit,
+    Actions_SignOut as SignOut,
   };
 }
 
@@ -175,10 +194,25 @@ declare const Shapermint: ({ height, width }: IconProps) => JSX.Element;
 
 declare const McAfee: ({ height, width }: IconProps) => JSX.Element;
 
+declare const GetDiscount: ({ height, width }: IconProps) => JSX.Element;
+
+declare const ShapermintLogo: ({ height, width, fill }: IconProps) => JSX.Element;
+
+declare const Chat: ({ height, width, fill, testId }: IconProps) => JSX.Element;
+
+declare const Email: ({ height, width, fill, testId }: IconProps) => JSX.Element;
+
+declare const CallUs: ({ height, width, fill, testId }: IconProps) => JSX.Element;
+
 type Other_LoadingProps = LoadingProps;
 declare const Other_Loading: typeof Loading;
 declare const Other_Shapermint: typeof Shapermint;
 declare const Other_McAfee: typeof McAfee;
+declare const Other_GetDiscount: typeof GetDiscount;
+declare const Other_ShapermintLogo: typeof ShapermintLogo;
+declare const Other_Chat: typeof Chat;
+declare const Other_Email: typeof Email;
+declare const Other_CallUs: typeof CallUs;
 declare namespace Other {
   export {
     FitPredictor$1 as FitPredictor,
@@ -186,14 +220,19 @@ declare namespace Other {
     Other_Loading as Loading,
     Other_Shapermint as Shapermint,
     Other_McAfee as McAfee,
+    Other_GetDiscount as GetDiscount,
+    Other_ShapermintLogo as ShapermintLogo,
+    Other_Chat as Chat,
+    Other_Email as Email,
+    Other_CallUs as CallUs,
   };
 }
 
 declare const ChevronDown: ({ height, width, fill }: IconProps) => JSX.Element;
 
-declare const ChevronLeft: ({ height, width, fill, opacity }: IconWithOpacityProps) => JSX.Element;
+declare const ChevronLeft: ({ height, width, fill, opacity, testId }: IconWithOpacityProps) => JSX.Element;
 
-declare const ChevronRight: ({ height, width, fill, opacity }: IconWithOpacityProps) => JSX.Element;
+declare const ChevronRight: ({ height, width, fill, opacity, testId }: IconWithOpacityProps) => JSX.Element;
 
 declare const ChevronRightVariant: ({ height, width, fill }: IconProps) => JSX.Element;
 
@@ -242,6 +281,10 @@ declare const Stopwatch: ({ height, width, fill, title }: IconProps) => JSX.Elem
 
 declare const Shipping: ({ height, width, fill }: IconProps) => JSX.Element;
 
+declare const LightBulb: ({ height, width, fill }: IconProps) => JSX.Element;
+
+declare const ErrorCross: ({ height, width, fill }: IconProps) => JSX.Element;
+
 declare const PDP_Clock: typeof Clock;
 declare const PDP_FlagUSA: typeof FlagUSA;
 declare const PDP_Minus: typeof Minus;
@@ -252,6 +295,8 @@ declare const PDP_StarEmpty: typeof StarEmpty;
 declare const PDP_StarHalf: typeof StarHalf;
 declare const PDP_Stopwatch: typeof Stopwatch;
 declare const PDP_Shipping: typeof Shipping;
+declare const PDP_LightBulb: typeof LightBulb;
+declare const PDP_ErrorCross: typeof ErrorCross;
 declare namespace PDP {
   export {
     PDP_Clock as Clock,
@@ -264,6 +309,8 @@ declare namespace PDP {
     PDP_StarHalf as StarHalf,
     PDP_Stopwatch as Stopwatch,
     PDP_Shipping as Shipping,
+    PDP_LightBulb as LightBulb,
+    PDP_ErrorCross as ErrorCross,
   };
 }
 
@@ -300,11 +347,11 @@ declare namespace SocialMedia {
   };
 }
 
-declare const Search: ({ height, width, fill }: IconProps) => JSX.Element;
+declare const Search: ({ height, width, fill, testId }: IconProps) => JSX.Element;
 
 declare const User: ({ height, width, fill }: IconProps) => JSX.Element;
 
-declare const ShoppingBag: ({ height, width, fill }: IconProps) => JSX.Element;
+declare const ShoppingBag: ({ height, width, fill, testId }: IconProps) => JSX.Element;
 
 declare const ShoppingCart: FC<IconProps>;
 
@@ -312,12 +359,21 @@ declare const MapMarker: ({ height, width, fill }: IconProps) => JSX.Element;
 
 declare const Hamburger: FC<IconProps>;
 
+declare const AddressInformation: ({ height, width, fill }: IconProps) => JSX.Element;
+
+declare const ClubMembership: ({ height, width, fill }: IconProps) => JSX.Element;
+
+declare const Benefits: ({ height, width, fill }: IconProps) => JSX.Element;
+
 declare const Navigation_Search: typeof Search;
 declare const Navigation_User: typeof User;
 declare const Navigation_ShoppingBag: typeof ShoppingBag;
 declare const Navigation_ShoppingCart: typeof ShoppingCart;
 declare const Navigation_MapMarker: typeof MapMarker;
 declare const Navigation_Hamburger: typeof Hamburger;
+declare const Navigation_AddressInformation: typeof AddressInformation;
+declare const Navigation_ClubMembership: typeof ClubMembership;
+declare const Navigation_Benefits: typeof Benefits;
 declare namespace Navigation {
   export {
     Navigation_Search as Search,
@@ -326,6 +382,9 @@ declare namespace Navigation {
     Navigation_ShoppingCart as ShoppingCart,
     Navigation_MapMarker as MapMarker,
     Navigation_Hamburger as Hamburger,
+    Navigation_AddressInformation as AddressInformation,
+    Navigation_ClubMembership as ClubMembership,
+    Navigation_Benefits as Benefits,
   };
 }
 
@@ -342,11 +401,11 @@ interface IconWrapperProps {
     viewBoxX: number;
     viewBoxY: number;
     children: React.ReactNode;
-    testid?: string;
+    testId?: string;
     fill?: string;
 }
 
-declare const Mail: ({ height, width }: IconWrapperProps) => JSX.Element;
+declare const Mail: ({ height, width, }: Pick<IconWrapperProps, 'width' | 'height'>) => JSX.Element;
 
 declare const Messaging_QuestionCircle: typeof QuestionCircle;
 declare const Messaging_Messenger: typeof Messenger;
@@ -416,7 +475,16 @@ declare namespace SlideDots {
   };
 }
 
-declare type IconType = ({ height, width, fill }: IconProps) => JSX.Element;
+declare const Thinking: ({ height, width }: IconProps$1) => JSX.Element;
+
+declare const Emoji_Thinking: typeof Thinking;
+declare namespace Emoji {
+  export {
+    Emoji_Thinking as Thinking,
+  };
+}
+
+declare type IconType = ({ height, width, fill, testId }: IconProps) => JSX.Element;
 declare const Icon: {
     Custom: typeof Custom;
     Arrows: typeof Arrows;
@@ -429,6 +497,7 @@ declare const Icon: {
     Download: typeof Download;
     Payment: typeof Payment;
     SlideDots: typeof SlideDots;
+    Emoji: typeof Emoji;
 };
 
 interface CardBodyProps {
@@ -499,8 +568,9 @@ interface SizeFitGuideProps {
     title: string;
     fitPercentage?: number;
     onClick: () => void;
+    onClickFitPercentage?: () => void;
 }
-declare const SizeFitGuide: ({ title, fitPercentage, onClick }: SizeFitGuideProps) => JSX.Element;
+declare const SizeFitGuide: ({ title, fitPercentage, onClick, onClickFitPercentage, }: SizeFitGuideProps) => JSX.Element;
 
 interface BaseButtonProps {
     children: React.ReactNode;
@@ -511,6 +581,7 @@ interface BaseButtonProps {
     onClick: () => void;
     className?: string;
     inline?: boolean;
+    uppercase?: boolean;
     testId?: string;
 }
 
@@ -521,8 +592,9 @@ interface TextButtonProps$1 extends BaseProps {
     TrailingIcon?: IconType;
     iconColor?: string;
     size?: ComponentSize;
+    uppercase?: boolean;
 }
-declare const TextButton: ({ text, LeadingIcon, TrailingIcon, iconColor, disabled, type, size, onClick, }: TextButtonProps$1) => _emotion_react_jsx_runtime.JSX.Element;
+declare const TextButton: ({ text, LeadingIcon, TrailingIcon, iconColor, disabled, type, size, uppercase, onClick, }: TextButtonProps$1) => _emotion_react_jsx_runtime.JSX.Element;
 
 interface DiscountTagProps {
     discount: number;
@@ -541,8 +613,9 @@ interface PriceLabelProps {
     color?: string;
     size?: ComponentSize.Small | ComponentSize.Medium | ComponentSize.Large;
     discount?: DiscountTagProps;
+    testId?: string;
 }
-declare const PriceLabel: ({ finalPrice, originalPrice, discount, color, size, }: PriceLabelProps) => JSX.Element;
+declare const PriceLabel: ({ finalPrice, originalPrice, discount, color, testId, size, }: PriceLabelProps) => JSX.Element;
 
 interface ColorPickerProps {
     options: ColorPickerOption[];
@@ -564,12 +637,13 @@ declare const MultiColorPicker: ({ options, label, selectedValue, onChange, }: M
 interface ProductGalleryProps {
     images: ImageType[];
     selectedValue?: ImageType;
-    DiscountTagElement?: JSX.Element;
-    BestSellerTagElement?: JSX.Element;
+    topTag?: JSX.Element;
+    bottomTag?: JSX.Element;
     productImageDataTestId?: string;
     previewListDataTestId?: string;
+    thumbnailPosition?: 'vertical' | 'horizontal';
 }
-declare const ProductGallery: ({ images, selectedValue, DiscountTagElement, BestSellerTagElement, productImageDataTestId, previewListDataTestId, }: ProductGalleryProps) => JSX.Element;
+declare const ProductGallery: ({ images, selectedValue, topTag, bottomTag, productImageDataTestId, previewListDataTestId, thumbnailPosition, }: ProductGalleryProps) => JSX.Element;
 
 interface RatingProps {
     rating: number;
@@ -577,8 +651,10 @@ interface RatingProps {
     reviews: number;
     reviewsText: string;
     wrapWithParenthesis?: boolean;
+    underline?: boolean;
+    reviewsContainerId?: string;
 }
-declare const Rating: ({ size, reviews, reviewsText, rating, wrapWithParenthesis, }: RatingProps) => JSX.Element;
+declare const Rating: ({ size, reviews, reviewsText, rating, wrapWithParenthesis, underline, reviewsContainerId, }: RatingProps) => JSX.Element;
 
 interface FitPredictorProps {
     onClick: () => void;
@@ -776,6 +852,12 @@ declare type ThemeComponent = {
         lineHeight: string;
         border: string;
         boxShadow: string;
+        errorBorder: string;
+    };
+    inputPlaceholder: {
+        fontSize: string;
+        padding: string;
+        focusBorder: string;
     };
     inputCustom: {
         button: {
@@ -1014,8 +1096,10 @@ declare type ThemeComponent = {
     packSelector: {
         borderRadius: string;
         borderColor: string;
-        highlight: string;
-        selected: string;
+        highlightColor: string;
+        selectedColor: string;
+        selectedContrast: string;
+        tagColor: string;
     };
 };
 declare type ThemeTypography = {
@@ -1090,10 +1174,11 @@ interface MinimalisticProps {
     discount: number;
     offText: string;
     widthAuto?: boolean;
+    testId?: string;
 }
 
 declare const Bundle: {
-    Minimalistic: ({ backgroundColor, borderColor, originalPrice, price, savingPrice, getMorePayLessText, youAreSavingText, getQtyForText, discount, offText, widthAuto, }: MinimalisticProps) => JSX.Element;
+    Minimalistic: ({ backgroundColor, borderColor, originalPrice, price, savingPrice, getMorePayLessText, youAreSavingText, getQtyForText, discount, offText, widthAuto, testId, }: MinimalisticProps) => JSX.Element;
     Simple: ({ title, freeShippingText, price, anyQtyForText, backgroundColor, widthAuto, }: SimpleProps) => JSX.Element;
 };
 
@@ -1133,6 +1218,9 @@ interface BaseInputCommmonProps {
     required?: string;
     children?: React.ReactNode;
     size?: 'regular' | 'small';
+    inlinePlaceholder?: boolean;
+    hasError?: boolean;
+    inputType?: 'text' | 'email' | 'password' | 'url';
 }
 interface BaseInputControlled extends BaseInputCommmonProps {
     value: string;
@@ -1166,6 +1254,7 @@ interface BaseCTAProps {
     size?: ComponentSize;
     text: string;
     type?: ButtonType;
+    inline?: boolean;
     testId?: string;
 }
 
@@ -1180,7 +1269,7 @@ declare type CustomProps = BaseInputProps & {
 };
 
 declare const Input: {
-    Simple: ({ value, onChange, defaultValue, label, children, required, onValidation, size, ...rest }: BaseInputProps) => JSX.Element;
+    Simple: ({ value, onChange, defaultValue, label, children, required, onValidation, size, placeholder, inlinePlaceholder, hasError, inputType, ...rest }: BaseInputProps) => JSX.Element;
     Custom: ({ onClick, text, variant, ...rest }: CustomProps) => JSX.Element;
     SimplePlusButton: ({ onClick, onClickEdit, text, success, editText, successText, ...rest }: BasePlusButtonProps) => JSX.Element;
     SimplePlusIcon: ({ Icon, ...rest }: BasePlusIconProps) => JSX.Element;
@@ -1314,19 +1403,22 @@ interface ReviewProps {
 declare const Review: ({ reviewerName, date, rating, stars, title, description, image }: ReviewProps) => JSX.Element;
 
 interface SliderNavigationProps {
-    children: JSX.Element[];
+    children: JSX.Element | JSX.Element[] | StyledComponent<any>;
     infinite: boolean;
     adaptiveHeight: boolean;
-    dotsSize: ComponentSize.Large | ComponentSize.Medium | ComponentSize.Small;
-    dotListMarginTop: number;
+    dotsSize?: ComponentSize.Large | ComponentSize.Medium | ComponentSize.Small;
+    dotListMarginTop?: number;
     initialSlide?: number;
     arrows?: {
         arrowWidth: number;
         arrowHeight: number;
         arrowPadding: number;
     };
+    dots?: boolean;
+    slidesToShow?: number;
+    speed?: number;
 }
-declare const SliderNavigation: ({ children, infinite, arrows, adaptiveHeight, dotsSize, dotListMarginTop, initialSlide, }: SliderNavigationProps) => _emotion_react_jsx_runtime.JSX.Element;
+declare const SliderNavigation: ({ children, infinite, arrows, adaptiveHeight, dotsSize, dotListMarginTop, initialSlide, dots, slidesToShow, speed, }: SliderNavigationProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 interface DropdownListIconsProps {
     items: DropdownListIconsItem[];
@@ -1380,8 +1472,8 @@ interface ProductItemProps {
     price: Pick<PriceLabelProps, 'finalPrice' | 'originalPrice' | 'color'>;
     rating: Pick<RatingProps, 'rating' | 'reviews'>;
     tags?: {
-        categoryTagText: string;
-        seasonOfferTagText: string;
+        categoryTagText?: string;
+        seasonOfferTagText?: string;
     };
     alignName?: 'left' | 'center';
     url?: string;
@@ -1390,6 +1482,9 @@ interface ProductItemProps {
 
 interface ProductItemSmallMobileProps extends ProductItemProps {
     size: ComponentSize.Medium | ComponentSize.Small | ComponentSize.Large;
+    topTag?: JSX.Element;
+    bottomTag?: JSX.Element;
+    onClick?: () => void;
 }
 
 declare function withProductGrid<P extends ProductItemProps>(ProductItemComponent: React.FC<P>, data: ProductItemProps[]): {
@@ -1398,7 +1493,7 @@ declare function withProductGrid<P extends ProductItemProps>(ProductItemComponen
 };
 
 declare const Collection: {
-    ProductItemMobile: ({ title, image, price, rating, size, tags, alignName, url, className, }: ProductItemSmallMobileProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+    ProductItemMobile: ({ title, image, price, rating, size, alignName, url, className, topTag, bottomTag, onClick, }: ProductItemSmallMobileProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
     withProductGrid: typeof withProductGrid;
 };
 
@@ -1556,6 +1651,7 @@ declare type TextTagProps = {
 declare type TextProps = AriaAttributes & {
     style?: CSSProperties;
     className?: string;
+    testId?: string;
 } & (TextHeroProps | TextDisplayProps | TextHeadingProps | TextBodyProps | TextLinkProps | TextButtonProps | TextPricingProps | TextLabelProps | TextTagProps);
 
 interface SearchBarProps {
@@ -1563,19 +1659,23 @@ interface SearchBarProps {
     resultOptions: SearchBarOptionItem[];
     onChange: (text: string) => void;
     onSearch: (term: string) => void;
+    onClose: () => void;
     resultsPanelDataTestId?: string;
+    allResults?: number;
+    initialTerm?: string;
+    shouldClear?: boolean;
 }
-declare const SearchBar: ({ suggestions, resultOptions, onChange, onSearch, resultsPanelDataTestId, }: SearchBarProps) => JSX.Element;
+declare const SearchBar: ({ suggestions, resultOptions, onChange, onSearch, onClose, resultsPanelDataTestId, allResults, initialTerm, shouldClear, }: SearchBarProps) => JSX.Element;
 
 interface ProductGalleryMobileProps {
     images: ImageType[];
     selectedValue?: ImageType;
-    DiscountTagElement?: JSX.Element;
-    BestSellerTagElement?: JSX.Element;
+    topTag?: JSX.Element;
+    bottomTag?: JSX.Element;
     productImageDataTestId?: string;
     slideDotsDataTestId?: string;
 }
-declare const ProductGalleryMobile: ({ images, selectedValue, DiscountTagElement, BestSellerTagElement, productImageDataTestId, slideDotsDataTestId, }: ProductGalleryMobileProps) => JSX.Element;
+declare const ProductGalleryMobile: ({ images, selectedValue, topTag, bottomTag, productImageDataTestId, slideDotsDataTestId, }: ProductGalleryMobileProps) => JSX.Element;
 
 interface RadioProps {
     name: string;
@@ -1592,22 +1692,32 @@ declare const RadioInput: ({ name, value, id, label, checked, disabled, onChange
 declare type PortalProps = {
     id: string;
     className?: string;
+    overflow?: boolean;
+    style?: CSSProperties;
 };
 declare const Portal: FC<PortalProps>;
 
 declare type ModalProps = {
     id: string;
     dismissable?: boolean;
+    maxFullScreen?: boolean;
 };
+interface ContainerProps {
+    maxFullScreen: boolean;
+    opened?: boolean;
+}
 declare const Overlay: _emotion_styled.StyledComponent<{
     theme?: _emotion_react.Theme | undefined;
     as?: React.ElementType<any> | undefined;
-} & {
-    opened?: boolean | undefined;
-}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+} & Pick<ContainerProps, "opened">, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 declare const Modal: FC<ModalProps>;
 declare const modalEvent: (id: string, detail: Omit<Events['modal'], 'id'>) => void;
-declare const useModalEvent: (id: string, cb: (event: CustomEvent<Events['modal']>) => void) => void;
+declare const useModalEvent: (id: string, cb: (event: CustomEvent<Events['modal']>) => void) => void;
+declare const useModal: (id: string) => {
+    opened: boolean;
+    open: () => void;
+    close: () => void;
+};
 
 interface CloseButtonProps {
     onClick: () => void;
@@ -1646,8 +1756,9 @@ declare type QuantityPickerPropsUncontrolled = {
 declare type QuantityPickerProps = {
     initialValue?: number;
     maxValue?: number;
+    testId?: string;
 } & (QuantityPickerPropsControlled | QuantityPickerPropsUncontrolled);
-declare const QuantityPicker: ({ initialValue, maxValue, value, onChange, }: QuantityPickerProps) => JSX.Element;
+declare const QuantityPicker: ({ initialValue, maxValue, value, testId, onChange, }: QuantityPickerProps) => JSX.Element;
 
 declare type SpacingProps = {
     size: number;
@@ -1675,6 +1786,53 @@ interface PackSelectorProps {
 }
 declare const PackSelector: FC<PackSelectorProps>;
 
+interface FiltersProps {
+    values: Filter[];
+    onChange: (newValues: Filter[], filtersState?: FilterChange) => void;
+    tagsColor?: string;
+    filterByText: string;
+    clearAllText: string;
+    filtersSelectText: string;
+    isMobile: boolean;
+    applyText: string;
+    mobileBackArrowClick: () => void;
+    mobileApplyButtonClick: () => void;
+    onResetValues: () => void;
+}
+declare const Filters: ({ values, onChange, tagsColor, filterByText, clearAllText, isMobile, filtersSelectText, applyText, mobileApplyButtonClick, mobileBackArrowClick, onResetValues, }: FiltersProps) => JSX.Element;
+
+interface SearchNavigationProps {
+    returnText?: string;
+    returnUrl?: string;
+    steps?: string[];
+    returnAction?: () => void;
+}
+declare const SearchNavigation: ({ returnText, returnUrl, steps, returnAction, }: SearchNavigationProps) => JSX.Element;
+
+interface TabProps$1 {
+    title: string;
+    content: ReactNode;
+}
+interface TabsProps {
+    backgroundColor?: string;
+    initialSelected?: string;
+    tabsMaxWidth?: string;
+    tabs: TabProps$1[];
+}
+declare const Tabs: ({ backgroundColor, tabs, initialSelected, tabsMaxWidth, }: TabsProps) => JSX.Element | null;
+
+interface TabProps {
+    title: string;
+    titleSize?: string;
+    selectedTitleWeight?: number;
+    height?: string;
+    selected?: boolean;
+    color?: string;
+    tabsMaxWidth?: string;
+    onClick: (clickedTab: string) => void;
+}
+declare const Tab: ({ title, titleSize, height, selectedTitleWeight, selected, onClick, color, tabsMaxWidth, }: TabProps) => JSX.Element;
+
 declare global {
     interface Events {
         modal: {
@@ -1714,4 +1872,4 @@ declare const formatPrice: (value: number, { locale, currency }?: {
     currency?: string | undefined;
 }) => string;
 
-export { Accordion, AmazonButton, AssetsProvider, Bundle, ButtonPrimary, ButtonSecondary, ButtonSecondaryOutline, ButtonType, CTAProps, _default as Card, CardSectionType, CartProductItem, CategoryTag, Checkbox, Collection, Color, ColorPickerOption, ComponentPosition, ComponentSize, index_d as CrossSell, DeliveryDetails, DiscountTag, Drawer, DropdownListIcons, DropdownListIconsItem, DropdownListIconsSubItem, DropdownOption, Filter, FilterChange, FilteringDropdown, Tags as FilteringTags, FitPredictor, Icon, IconButton, IconProps, IconWithOpacityProps, Image, ImageType, Input, InputValidationType, Modal, MultiColorPicker, OfferBanner, OrderBar, Overlay, PackSelector, Pagination, Pattern, PaymentMethod, PaypalButton, Portal, PriceLabel, ProductGallery, ProductGalleryMobile, ProgressBar, QuantityPicker, RadioGroupInput, RadioGroupOption, RadioInput, Rating, Review, ScrollToTop, SearchBar, SearchBarOptionItem, SeasonOfferTag, SimpleDropdown, SimpleOrderItem, SingleColorPicker, SizeFitGuide, SizeOption, SizeSelector, SizeTable, SliderNavigation, Spacing, Spinner, StarList, Text, TextButton, Theme, ThemeAssets, ThemeBasicPallete, ThemeBreakpoints, ThemeColorPallete, ThemeColors, ThemeComponent, ThemeFonts, ThemeProvider, ThemeTypography, ThemeVariables, Timer, Tooltip, Totals, WithTestId, decimalFormat, formatPrice, isEmail, isEmpty, isNumber, isPhoneNumber, isValidDate, modalEvent, simulateMouseClick, sliceString, useModalEvent, useOnClickOutside, useTheme, useThemeAssets, useWindowDimensions };
+export { Accordion, AmazonButton, AssetsProvider, Bundle, ButtonPrimary, ButtonSecondary, ButtonSecondaryOutline, ButtonType, CTAProps, _default as Card, CardSectionType, CartProductItem, CategoryTag, Checkbox, Collection, Color, ColorPickerOption, ComponentPosition, ComponentSize, index_d as CrossSell, DeliveryDetails, DiscountTag, Drawer, DropdownListIcons, DropdownListIconsItem, DropdownListIconsSubItem, DropdownOption, Filter, FilterChange, FilteringDropdown, Tags as FilteringTags, Filters, FitPredictor, Icon, IconButton, IconProps, IconWithOpacityProps, Image, ImageType, Input, InputValidationType, Modal, MultiColorPicker, OfferBanner, OrderBar, Overlay, PackSelector, Pagination, Pattern, PaymentMethod, PaypalButton, Portal, PriceLabel, ProductGallery, ProductGalleryMobile, ProgressBar, QuantityPicker, RadioGroupInput, RadioGroupOption, RadioInput, Rating, Review, ScrollToTop, SearchBar, SearchBarOptionItem, SearchNavigation, SeasonOfferTag, SimpleDropdown, SimpleOrderItem, SingleColorPicker, SizeFitGuide, SizeOption, SizeSelector, SizeTable, SliderNavigation, Spacing, Spinner, StarList, Tab, Tabs, Text, TextButton, Theme, ThemeAssets, ThemeBasicPallete, ThemeBreakpoints, ThemeColorPallete, ThemeColors, ThemeComponent, ThemeFonts, ThemeProvider, ThemeTypography, ThemeVariables, Timer, Tooltip, Totals, WithTestId, decimalFormat, formatPrice, isEmail, isEmpty, isNumber, isPhoneNumber, isValidDate, modalEvent, simulateMouseClick, sliceString, useModal, useModalEvent, useOnClickOutside, useTheme, useThemeAssets, useWindowDimensions };

package/build/index.esm.css

@@ -1,2 +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;}
+.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;}