@trafilea/afrodita-components 5.0.0-beta.6 → 5.0.0-beta.62

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 {
@@ -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,14 @@ 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;
+    }>;
 };
 declare type FilterChange = {
     sectionIndex: number;
@@ -111,18 +115,31 @@ interface SearchBarOptionItem {
     src: string;
     price: string;
     title: string;
+    optionUrl: string;
 }
 
 declare const SixtyDaysGuarantee: ({ height, width, fill, title }: IconProps) => JSX.Element;
 
 declare const Frown: ({ 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_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_BulletOne as BulletOne,
+    Custom_BulletTwo as BulletTwo,
+    Custom_BulletThree as BulletThree,
   };
 }
 
@@ -143,6 +160,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 +181,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 +197,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 +217,31 @@ 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;
+
 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 namespace Other {
   export {
     FitPredictor$1 as FitPredictor,
@@ -186,14 +249,21 @@ 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,
   };
 }
 
 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 +312,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 +326,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 +340,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 +359,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 +368,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 +378,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 +394,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 +417,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 +436,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 +510,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 +569,8 @@ declare const Icon: {
     Download: typeof Download;
     Payment: typeof Payment;
     SlideDots: typeof SlideDots;
+    Emoji: typeof Emoji;
+    MyAccount: typeof MyAccount;
 };
 
 interface CardBodyProps {
@@ -499,8 +641,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 +654,7 @@ interface BaseButtonProps {
     onClick: () => void;
     className?: string;
     inline?: boolean;
+    uppercase?: boolean;
     testId?: string;
 }
 
@@ -521,8 +665,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 +686,10 @@ interface PriceLabelProps {
     color?: string;
     size?: ComponentSize.Small | ComponentSize.Medium | ComponentSize.Large;
     discount?: DiscountTagProps;
+    finalPriceStyled?: boolean;
+    testId?: string;
 }
-declare const PriceLabel: ({ finalPrice, originalPrice, discount, color, size, }: PriceLabelProps) => JSX.Element;
+declare const PriceLabel: ({ finalPrice, originalPrice, discount, color, testId, finalPriceStyled, size, }: PriceLabelProps) => JSX.Element;
 
 interface ColorPickerProps {
     options: ColorPickerOption[];
@@ -564,12 +711,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 +725,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 +926,12 @@ declare type ThemeComponent = {
         lineHeight: string;
         border: string;
         boxShadow: string;
+        errorBorder: string;
+    };
+    inputPlaceholder: {
+        fontSize: string;
+        padding: string;
+        focusBorder: string;
     };
     inputCustom: {
         button: {
@@ -1014,8 +1170,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 +1248,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 +1292,10 @@ interface BaseInputCommmonProps {
     required?: string;
     children?: React.ReactNode;
     size?: 'regular' | 'small';
+    inlinePlaceholder?: boolean;
+    hasError?: boolean;
+    inputType?: 'text' | 'email' | 'password' | 'url';
+    autoFocus?: boolean;
 }
 interface BaseInputControlled extends BaseInputCommmonProps {
     value: string;
@@ -1166,6 +1329,7 @@ interface BaseCTAProps {
     size?: ComponentSize;
     text: string;
     type?: ButtonType;
+    inline?: boolean;
     testId?: string;
 }
 
@@ -1180,7 +1344,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 +1478,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 +1547,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 +1557,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 +1568,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 +1726,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 +1734,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 +1767,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 +1831,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 +1861,61 @@ 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;
+
+interface IconList {
+    backgroundColor: string;
+    iconColor: string;
+    iconName: string;
+    iconTitle: string;
+}
+declare const IconsWithTitle: ({ iconName, iconTitle, backgroundColor, iconColor }: IconList) => JSX.Element | null;
+
 declare global {
     interface Events {
         modal: {
@@ -1714,4 +1955,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, 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, 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 };