@trafilea/afrodita-components 5.0.0-beta.8 → 5.0.0-beta.80

package/build/index.d.ts

@@ -1,9 +1,10 @@
 /// <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_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 {
@@ -57,11 +59,6 @@ declare type SizeOption = {
     description: string;
     disabled?: boolean;
 };
-declare type Color = {
-    primaryColor: string;
-    secondaryColor?: string;
-    tertiaryColor?: string;
-};
 declare type Pattern = {
     url: string;
 };
@@ -69,7 +66,7 @@ declare type ColorPickerOption = {
     label: string;
     description: string;
     meta: {
-        color?: Color;
+        color?: string[];
         pattern?: Pattern;
     };
 };
@@ -100,7 +97,17 @@ declare type Filter = {
     title: string;
     columns: number;
     isOpenByDefault?: boolean;
-    items: string[];
+    isLinkOption?: boolean;
+    link?: string;
+    color?: string;
+    isMultiselect: boolean;
+    items: Array<{
+        label: string;
+        checked?: boolean;
+        isLinkItem?: boolean;
+        link?: string;
+        uncheckedLink?: string;
+    }>;
 };
 declare type FilterChange = {
     sectionIndex: number;
@@ -111,18 +118,45 @@ interface SearchBarOptionItem {
     src: string;
     price: string;
     title: string;
+    optionUrl: string;
+}
+interface imageVideoProps {
+    imageLink: string;
+    isVideo?: {
+        videoTitle?: string;
+        videoSubtitle?: string;
+        textColor?: string;
+        videoLink?: string;
+    };
+    isMobile?: boolean;
 }
 
 declare const SixtyDaysGuarantee: ({ height, width, fill, title }: IconProps) => JSX.Element;
 
 declare const Frown: ({ height, width, fill, title }: IconProps$1) => JSX.Element;
 
+declare const Smiling: ({ height, width, fill, title }: IconProps$1) => JSX.Element;
+
+declare const BulletOne: ({ height, width, fill, title }: IconProps) => JSX.Element;
+
+declare const BulletTwo: ({ height, width, fill, title }: IconProps) => JSX.Element;
+
+declare const BulletThree: ({ height, width, fill, title }: IconProps) => JSX.Element;
+
 declare const Custom_SixtyDaysGuarantee: typeof SixtyDaysGuarantee;
 declare const Custom_Frown: typeof Frown;
+declare const Custom_Smiling: typeof Smiling;
+declare const Custom_BulletOne: typeof BulletOne;
+declare const Custom_BulletTwo: typeof BulletTwo;
+declare const Custom_BulletThree: typeof BulletThree;
 declare namespace Custom {
   export {
     Custom_SixtyDaysGuarantee as SixtyDaysGuarantee,
     Custom_Frown as Frown,
+    Custom_Smiling as Smiling,
+    Custom_BulletOne as BulletOne,
+    Custom_BulletTwo as BulletTwo,
+    Custom_BulletThree as BulletThree,
   };
 }
 
@@ -143,6 +177,19 @@ 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 Add: ({ height, width, fill }: IconProps) => JSX.Element;
+
+interface CopyProps extends IconProps {
+    stroke?: string;
+}
+declare const Copy: ({ height, width, fill, stroke }: CopyProps) => JSX.Element;
+
 declare const Actions_Check: typeof Check;
 declare const Actions_ClearLight: typeof ClearLight;
 declare const Actions_LightExclamation: typeof LightExclamation;
@@ -151,6 +198,12 @@ 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 const Actions_Add: typeof Add;
+type Actions_CopyProps = CopyProps;
+declare const Actions_Copy: typeof Copy;
 declare namespace Actions {
   export {
     Actions_Check as Check,
@@ -161,6 +214,12 @@ 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,
+    Actions_Add as Add,
+    Actions_CopyProps as CopyProps,
+    Actions_Copy as Copy,
   };
 }
 
@@ -175,10 +234,46 @@ 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;
+
+declare const SignForm: ({ height, width, fill }: IconProps) => JSX.Element;
+
+declare const QrCode: ({ height, width, fill }: IconProps) => JSX.Element;
+
+declare const FreeExchange: ({ height, width, fill, testId }: IconProps) => JSX.Element;
+
+declare const ShopNow: ({ height, width, fill, testId }: IconProps) => JSX.Element;
+
+declare const HasselFreeReturns: ({ height, width, fill, testId }: IconProps) => JSX.Element;
+
+declare const Play: ({ height, width, fill, testId }: IconProps) => JSX.Element;
+
+declare const FitGuarantee: ({ 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 const Other_SignForm: typeof SignForm;
+declare const Other_QrCode: typeof QrCode;
+declare const Other_FreeExchange: typeof FreeExchange;
+declare const Other_ShopNow: typeof ShopNow;
+declare const Other_HasselFreeReturns: typeof HasselFreeReturns;
+declare const Other_Play: typeof Play;
+declare const Other_FitGuarantee: typeof FitGuarantee;
 declare namespace Other {
   export {
     FitPredictor$1 as FitPredictor,
@@ -186,14 +281,26 @@ 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,
+    Other_SignForm as SignForm,
+    Other_QrCode as QrCode,
+    Other_FreeExchange as FreeExchange,
+    Other_ShopNow as ShopNow,
+    Other_HasselFreeReturns as HasselFreeReturns,
+    Other_Play as Play,
+    Other_FitGuarantee as FitGuarantee,
   };
 }
 
 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 +349,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 +363,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 +377,8 @@ declare namespace PDP {
     PDP_StarHalf as StarHalf,
     PDP_Stopwatch as Stopwatch,
     PDP_Shipping as Shipping,
+    PDP_LightBulb as LightBulb,
+    PDP_ErrorCross as ErrorCross,
   };
 }
 
@@ -281,6 +396,8 @@ declare const Twitter: ({ height, width, fill }: IconProps) => JSX.Element;
 
 declare const Youtube: ({ height, width, fill }: IconProps) => JSX.Element;
 
+declare const Interaction: ({ height, width, fill }: IconProps) => JSX.Element;
+
 declare const SocialMedia_Facebook: typeof Facebook;
 declare const SocialMedia_FacebookSolid: typeof FacebookSolid;
 declare const SocialMedia_Instagram: typeof Instagram;
@@ -288,6 +405,7 @@ declare const SocialMedia_InstagramSolid: typeof InstagramSolid;
 declare const SocialMedia_Pinterest: typeof Pinterest;
 declare const SocialMedia_Twitter: typeof Twitter;
 declare const SocialMedia_Youtube: typeof Youtube;
+declare const SocialMedia_Interaction: typeof Interaction;
 declare namespace SocialMedia {
   export {
     SocialMedia_Facebook as Facebook,
@@ -297,14 +415,15 @@ declare namespace SocialMedia {
     SocialMedia_Pinterest as Pinterest,
     SocialMedia_Twitter as Twitter,
     SocialMedia_Youtube as Youtube,
+    SocialMedia_Interaction as Interaction,
   };
 }
 
-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 +431,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 +454,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 +473,13 @@ 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 Community$1: ({ height, width, fill }: IconProps) => JSX.Element;
 
 declare const Messaging_QuestionCircle: typeof QuestionCircle;
 declare const Messaging_Messenger: typeof Messenger;
@@ -358,6 +491,7 @@ declare namespace Messaging {
     Messaging_Messenger as Messenger,
     Messaging_Comment as Comment,
     Messaging_Mail as Mail,
+    Community$1 as Community,
   };
 }
 
@@ -416,7 +550,53 @@ 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 const FreeShipping: ({ height, width, fill }: IconProps) => JSX.Element;
+
+declare const PersonalStylist: ({ height, width, fill }: IconProps) => JSX.Element;
+
+declare const Community: ({ height, width, fill }: IconProps) => JSX.Element;
+
+declare const VIP: ({ height, width, fill }: IconProps) => JSX.Element;
+
+declare const DealsOffers: ({ height, width, fill }: IconProps) => JSX.Element;
+
+declare const StyleFashionContent: ({ height, width, fill }: IconProps) => JSX.Element;
+
+declare const MembersOnlyDiscount: ({ height, width, fill }: IconProps) => JSX.Element;
+
+declare const Profile: ({ height, width, fill, testId }: IconProps) => JSX.Element;
+
+declare const MyAccount_FreeShipping: typeof FreeShipping;
+declare const MyAccount_PersonalStylist: typeof PersonalStylist;
+declare const MyAccount_Community: typeof Community;
+declare const MyAccount_VIP: typeof VIP;
+declare const MyAccount_DealsOffers: typeof DealsOffers;
+declare const MyAccount_StyleFashionContent: typeof StyleFashionContent;
+declare const MyAccount_MembersOnlyDiscount: typeof MembersOnlyDiscount;
+declare const MyAccount_Profile: typeof Profile;
+declare namespace MyAccount {
+  export {
+    MyAccount_FreeShipping as FreeShipping,
+    MyAccount_PersonalStylist as PersonalStylist,
+    MyAccount_Community as Community,
+    MyAccount_VIP as VIP,
+    MyAccount_DealsOffers as DealsOffers,
+    MyAccount_StyleFashionContent as StyleFashionContent,
+    MyAccount_MembersOnlyDiscount as MembersOnlyDiscount,
+    MyAccount_Profile as Profile,
+  };
+}
+
+declare type IconType = ({ height, width, fill, testId }: IconProps) => JSX.Element;
 declare const Icon: {
     Custom: typeof Custom;
     Arrows: typeof Arrows;
@@ -429,6 +609,8 @@ declare const Icon: {
     Download: typeof Download;
     Payment: typeof Payment;
     SlideDots: typeof SlideDots;
+    Emoji: typeof Emoji;
+    MyAccount: typeof MyAccount;
 };
 
 interface CardBodyProps {
@@ -499,8 +681,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 +694,7 @@ interface BaseButtonProps {
     onClick: () => void;
     className?: string;
     inline?: boolean;
+    uppercase?: boolean;
     testId?: string;
 }
 
@@ -521,8 +705,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 +726,12 @@ interface PriceLabelProps {
     color?: string;
     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, size, }: PriceLabelProps) => JSX.Element;
+declare const PriceLabel: ({ finalPrice, originalPrice, discount, color, testId, finalPriceStyled, finalPriceStyle, originalPriceStyled, size, }: PriceLabelProps) => JSX.Element;
 
 interface ColorPickerProps {
     options: ColorPickerOption[];
@@ -564,12 +753,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 +767,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;
@@ -618,12 +810,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;
@@ -776,6 +969,12 @@ declare type ThemeComponent = {
         lineHeight: string;
         border: string;
         boxShadow: string;
+        errorBorder: string;
+    };
+    inputPlaceholder: {
+        fontSize: string;
+        padding: string;
+        focusBorder: string;
     };
     inputCustom: {
         button: {
@@ -1092,10 +1291,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;
 };
 
@@ -1135,6 +1335,11 @@ interface BaseInputCommmonProps {
     required?: string;
     children?: React.ReactNode;
     size?: 'regular' | 'small';
+    inlinePlaceholder?: boolean;
+    hasError?: boolean;
+    inputType?: 'text' | 'email' | 'password' | 'url';
+    name?: string;
+    autoFocus?: boolean;
 }
 interface BaseInputControlled extends BaseInputCommmonProps {
     value: string;
@@ -1168,6 +1373,7 @@ interface BaseCTAProps {
     size?: ComponentSize;
     text: string;
     type?: ButtonType;
+    inline?: boolean;
     testId?: string;
 }
 
@@ -1182,7 +1388,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;
@@ -1295,8 +1501,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;
@@ -1316,19 +1523,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[];
@@ -1382,8 +1592,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;
@@ -1392,6 +1602,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[]): {
@@ -1400,7 +1613,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;
 };
 
@@ -1464,7 +1677,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';
@@ -1474,6 +1687,7 @@ declare type TextHeroProps = {
     wide?: never;
     original?: never;
     allCaps?: never;
+    href: never;
 };
 declare type TextDisplayProps = {
     variant: 'display1' | 'display2';
@@ -1484,6 +1698,7 @@ declare type TextDisplayProps = {
     wide?: never;
     original?: never;
     allCaps?: never;
+    href: never;
 };
 declare type TextHeadingProps = {
     variant: 'heading1' | 'heading2' | 'heading3' | 'heading4' | 'heading5' | 'heading6';
@@ -1494,6 +1709,7 @@ declare type TextHeadingProps = {
     wide?: never;
     original?: never;
     allCaps?: never;
+    href?: never;
 };
 declare type TextBodyProps = {
     variant: 'body';
@@ -1504,6 +1720,7 @@ declare type TextBodyProps = {
     wide?: never;
     original?: never;
     allCaps?: never;
+    href?: never;
 };
 declare type TextButtonProps = {
     variant: 'button';
@@ -1514,6 +1731,7 @@ declare type TextButtonProps = {
     wide?: boolean;
     original?: never;
     allCaps?: never;
+    href?: never;
 };
 declare type TextPricingProps = {
     variant: 'pricing';
@@ -1524,6 +1742,7 @@ declare type TextPricingProps = {
     wide?: never;
     original?: boolean;
     allCaps?: never;
+    href?: never;
 };
 declare type TextLinkProps = {
     variant: 'link';
@@ -1534,7 +1753,8 @@ declare type TextLinkProps = {
     wide?: never;
     original?: never;
     allCaps?: never;
-} & AnchorHTMLAttributes<'a'>;
+    href?: string;
+};
 declare type TextLabelProps = {
     variant: 'label';
     weight?: 'regular' | 'demi';
@@ -1544,6 +1764,7 @@ declare type TextLabelProps = {
     wide?: never;
     original?: never;
     allCaps?: never;
+    href?: never;
 } & LabelHTMLAttributes<'label'>;
 declare type TextTagProps = {
     variant: 'tag';
@@ -1554,10 +1775,13 @@ 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;
 } & (TextHeroProps | TextDisplayProps | TextHeadingProps | TextBodyProps | TextLinkProps | TextButtonProps | TextPricingProps | TextLabelProps | TextTagProps);
 
 interface SearchBarProps {
@@ -1565,19 +1789,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;
@@ -1594,22 +1822,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;
@@ -1648,8 +1886,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;
@@ -1678,8 +1917,8 @@ interface PackSelectorProps {
 declare const PackSelector: FC<PackSelectorProps>;
 
 interface FiltersProps {
-    filters: Filter[];
-    onChange: (update: FilterChange) => void;
+    values: Filter[];
+    onChange: (newValues: Filter[], filtersState?: FilterChange) => void;
     tagsColor?: string;
     filterByText: string;
     clearAllText: string;
@@ -1688,8 +1927,76 @@ interface FiltersProps {
     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;
+
+interface IconList {
+    backgroundColor: string;
+    iconColor: string;
+    iconName: string;
+    iconTitle: string;
+}
+declare const IconsWithTitle: ({ iconName, iconTitle, backgroundColor, iconColor }: IconList) => JSX.Element | null;
+
+interface NoteProps {
+    accentColor: string;
+    color: string;
+    backgroundColor: string;
+    importantNoteText: string;
+    text: string;
+}
+declare const Note: ({ accentColor, color, backgroundColor, importantNoteText, text, }: NoteProps) => JSX.Element;
+
+interface TextWithImageProps {
+    title: string;
+    text: string;
+    buttomText: string;
+    backgroundColor: string;
+    imageLeftSide?: boolean;
+    URLLink?: string;
+    onButtonClick?: () => void;
+    isRedirectionURL: boolean;
+    btnBGColor?: string;
+    btnHoverBGColor?: string;
+    imgVideo: imageVideoProps;
+    contentAfterButton?: React.ReactNode;
+    titleStyle?: React.CSSProperties;
+    textStyle?: React.CSSProperties;
 }
-declare const Filters: ({ filters, onChange, tagsColor, filterByText, clearAllText, isMobile, filtersSelectText, applyText, mobileApplyButtonClick, mobileBackArrowClick, }: FiltersProps) => JSX.Element;
+declare const TextWithImage: ({ title, text, buttomText, backgroundColor, imageLeftSide, titleStyle, textStyle, ...props }: TextWithImageProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 declare global {
     interface Events {
@@ -1730,4 +2037,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, 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, 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, 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, IconsWithTitle, Image, ImageType, Input, InputValidationType, Modal, MultiColorPicker, Note, 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, TextWithImage, Theme, ThemeAssets, ThemeBasicPallete, ThemeBreakpoints, ThemeColorPallete, ThemeColors, ThemeComponent, ThemeFonts, ThemeProvider, ThemeTypography, ThemeVariables, Timer, Tooltip, Totals, WithTestId, decimalFormat, formatPrice, imageVideoProps, isEmail, isEmpty, isNumber, isPhoneNumber, isValidDate, modalEvent, simulateMouseClick, sliceString, useModal, useModalEvent, useOnClickOutside, useTheme, useThemeAssets, useWindowDimensions };