@trafilea/afrodita-components 4.0.2-beta.1 → 4.0.2-beta.13

package/build/index.d.ts

@@ -1,9 +1,7 @@
 /// <reference types="react" />
-import React, { ReactNode, FC, AriaAttributes, CSSProperties, AnchorHTMLAttributes, LabelHTMLAttributes, ElementType, RefObject } from 'react';
+import React, { ReactNode, FC, 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 { SearchBarOptionItem as SearchBarOptionItem$1 } from 'src/types/types';
-import { ThemeBreakpoints as ThemeBreakpoints$1 } from 'src/core/theme/Theme';
 
 declare enum CardSectionType {
     Header = 0,
@@ -317,14 +315,29 @@ declare const Messenger: ({ height, width, fill }: IconProps) => JSX.Element;
 
 declare const Comment: ({ height, width, fill }: IconProps) => JSX.Element;
 
+interface IconWrapperProps {
+    width?: number;
+    height?: number;
+    title?: string;
+    viewBoxX: number;
+    viewBoxY: number;
+    children: React.ReactNode;
+    testid?: string;
+    fill?: string;
+}
+
+declare const Mail: ({ height, width }: IconWrapperProps) => JSX.Element;
+
 declare const Messaging_QuestionCircle: typeof QuestionCircle;
 declare const Messaging_Messenger: typeof Messenger;
 declare const Messaging_Comment: typeof Comment;
+declare const Messaging_Mail: typeof Mail;
 declare namespace Messaging {
   export {
     Messaging_QuestionCircle as QuestionCircle,
     Messaging_Messenger as Messenger,
     Messaging_Comment as Comment,
+    Messaging_Mail as Mail,
   };
 }
 
@@ -345,7 +358,7 @@ declare const Visa: ({ height, width }: IconProps) => JSX.Element;
 
 declare const MasterCard: ({ height, width }: IconProps) => JSX.Element;
 
-declare const AMEX: ({ height, width }: IconProps) => JSX.Element;
+declare const Amex: ({ height, width }: IconProps) => JSX.Element;
 
 declare const JCB: ({ height, width }: IconProps) => JSX.Element;
 
@@ -357,7 +370,7 @@ declare const Amazon: ({ height, width }: IconProps) => JSX.Element;
 
 declare const Payment_Visa: typeof Visa;
 declare const Payment_MasterCard: typeof MasterCard;
-declare const Payment_AMEX: typeof AMEX;
+declare const Payment_Amex: typeof Amex;
 declare const Payment_JCB: typeof JCB;
 declare const Payment_Paypal: typeof Paypal;
 declare const Payment_Klarna: typeof Klarna;
@@ -366,7 +379,7 @@ declare namespace Payment {
   export {
     Payment_Visa as Visa,
     Payment_MasterCard as MasterCard,
-    Payment_AMEX as AMEX,
+    Payment_Amex as Amex,
     Payment_JCB as JCB,
     Payment_Paypal as Paypal,
     Payment_Klarna as Klarna,
@@ -429,23 +442,27 @@ declare const ButtonSecondary: ({ text, onClick, disabled, wide, size, className
 
 declare const ButtonSecondaryOutline: ({ text, onClick, disabled, wide, size, className, }: CTAProps) => _emotion_react_jsx_runtime.JSX.Element;
 
+declare type Value<T> = DropdownOption<T>;
+declare type OnChange<T> = (option: Value<T>) => void;
 declare type CommonProps<T> = {
-    options: DropdownOption<T>[];
+    options: Value<T>[];
     disabled?: boolean;
     wide?: boolean;
-    onChange: (option: DropdownOption<T>) => void;
     label?: string;
     sort?: boolean;
-};
-declare type ConditionalProps<T> = {
-    initialValue: DropdownOption<T>;
-    placeHolder?: string;
-} | {
-    initialValue?: undefined;
+    initialValue?: Value<T>;
     placeHolder: string;
 };
-declare type SimpleDropdownProps<T> = CommonProps<T> & ConditionalProps<T>;
-declare function SimpleDropdown<T>({ options, disabled, initialValue, placeHolder, label, wide, sort, onChange, }: SimpleDropdownProps<T>): JSX.Element;
+declare type ControlledProps<T> = {
+    value: Value<T>;
+    onChange: OnChange<T>;
+} & CommonProps<T>;
+declare type UncontrolledProps<T> = {
+    value?: never;
+    onChange?: OnChange<T>;
+} & CommonProps<T>;
+declare type SimpleDropdownProps<T> = UncontrolledProps<T> | ControlledProps<T>;
+declare function SimpleDropdown<T>({ options, disabled, initialValue, placeHolder, label, wide, sort, onChange, value, }: SimpleDropdownProps<T>): JSX.Element;
 
 interface SizeSelectorProps {
     label: string;
@@ -472,6 +489,7 @@ interface BaseButtonProps {
     type?: ButtonType;
     onClick: () => void;
     className?: string;
+    inline?: boolean;
 }
 
 declare type BaseProps = Pick<BaseButtonProps, 'disabled' | 'type' | 'onClick'>;
@@ -584,891 +602,943 @@ interface AccordionProps {
 }
 declare const Accordion: ({ header, content, defaultOpen, variant, disabled, openIcon, closeIcon, }: AccordionProps) => JSX.Element;
 
-interface CheckboxProps {
-    disabled?: boolean;
-    onChange: (checked: boolean) => void;
-    size?: ComponentSize.Large | ComponentSize.Medium | ComponentSize.Small;
-    text: string;
-    checked?: boolean;
-    id: string;
-    backgroundColor?: string;
-    variant: 'primary' | 'secondary';
-}
-declare const Checkbox: ({ disabled, onChange, size, text, checked, id, variant, }: CheckboxProps) => JSX.Element;
-
-interface RadioGroupInputProps {
+declare const ThemeProvider: FC<{
+    theme: Theme;
+    children: ReactNode;
+}>;
+declare const useTheme: () => Theme;
+declare const ThemeVariables: FC<{
+    theme: Theme;
+    Container?: ElementType;
+}>;
+declare const AssetsProvider: FC<{
+    assets: ThemeAssets;
+}>;
+declare const useThemeAssets: () => ThemeAssets;
+declare type Theme = {
     name: string;
-    options?: RadioGroupOption[];
-    value?: RadioGroupOption;
-    onChange: (value: RadioGroupOption) => void;
-    size?: ComponentSize.Small | ComponentSize.Medium | ComponentSize.Large;
-    disabled?: boolean;
-}
-declare const RadioGroupInput: ({ name, options, value, onChange, size, disabled, }: RadioGroupInputProps) => JSX.Element;
-
-interface SimpleProps {
-    title: string;
-    freeShippingText: string;
-    price: string;
-    anyQtyForText: string;
-    backgroundColor: string;
-    widthAuto?: boolean;
-}
-
-interface MinimalisticProps {
-    backgroundColor?: string;
-    borderColor?: string;
-    originalPrice: string;
-    price: string;
-    savingPrice: string;
-    getMorePayLessText: string;
-    youAreSavingText: string;
-    getQtyForText: string;
-    discount: number;
-    offText: string;
-    widthAuto?: boolean;
-}
-
-declare const Bundle: {
-    Minimalistic: ({ backgroundColor, borderColor, originalPrice, price, savingPrice, getMorePayLessText, youAreSavingText, getQtyForText, discount, offText, widthAuto, }: MinimalisticProps) => JSX.Element;
-    Simple: ({ title, freeShippingText, price, anyQtyForText, backgroundColor, widthAuto, }: SimpleProps) => JSX.Element;
-};
-
-interface CategoryTagProps {
-    text: string;
-    size: ComponentSize.Large | ComponentSize.Medium | ComponentSize.Small;
-    className?: string;
-}
-declare const CategoryTag: ({ text, size, className }: CategoryTagProps) => _emotion_react_jsx_runtime.JSX.Element;
-
-interface SeasonOfferTagProps {
-    text: string;
-    backgroundColor?: string;
-    size: ComponentSize.Large | ComponentSize.Medium | ComponentSize.Small;
-    className?: string;
-}
-declare const SeasonOfferTag: ({ text, backgroundColor, size, className, }: SeasonOfferTagProps) => _emotion_react_jsx_runtime.JSX.Element;
-
-interface TimeProps {
-    hours: number;
-    minutes: number;
-    seconds: number;
-}
-interface TimerProps extends TimeProps {
-    onTimeUp: () => void;
-}
-declare const Timer: ({ onTimeUp, ...rest }: TimerProps) => JSX.Element;
-
-interface BaseInputProps {
-    defaultValue?: string;
-    maxLength?: number;
-    placeholder?: string;
-    label?: string;
-    onChange?: (value: string) => void;
-    onValidation?: (status: InputValidationType) => void;
-    disabled?: boolean;
-    required?: string;
-    children?: React.ReactNode;
-}
-
-interface BasePlusIconProps extends BaseInputProps {
-    Icon: IconType;
-}
-
-declare type BaseInputPropsWithoutLabel = Omit<BaseInputProps, 'label'>;
-interface BasePlusButtonProps extends BaseInputPropsWithoutLabel {
-    onClick: () => void;
-    onClickEdit: () => void;
-    text: string;
-    success: boolean;
-    editText: string;
-    successText: string;
-}
-
-interface CustomProps extends BaseInputProps {
-    onClick: () => void;
-    text: string;
-    type: 'primary' | 'secondary';
-}
-
-declare const Input: {
-    Simple: ({ onChange, defaultValue, label, children, required, onValidation, ...rest }: BaseInputProps) => JSX.Element;
-    Custom: ({ onClick, text, type, ...rest }: CustomProps) => JSX.Element;
-    SimplePlusButton: ({ onClick, onClickEdit, text, success, editText, successText, ...rest }: BasePlusButtonProps) => JSX.Element;
-    SimplePlusIcon: ({ Icon, ...rest }: BasePlusIconProps) => JSX.Element;
-};
-
-interface PaymentMethodsProps {
-    Icon: IconType;
-    width: string;
-    height: string;
-    onClick?: () => void;
-}
-declare const PaymentMethod: ({ Icon, width, height, onClick }: PaymentMethodsProps) => JSX.Element;
-
-interface OfferBannerProps {
-    discountAppliedText: string;
-    backgroundColor: string;
-}
-declare const OfferBanner: ({ discountAppliedText, backgroundColor }: OfferBannerProps) => JSX.Element;
-
-declare type SubtotalOption = {
-    label: string;
-    value: string;
+    fontSizes: number[];
+    fontWeights: number[];
+    lineHeights: number[];
+    mediaQueries: ThemeBreakpoints;
+    radius: {
+        regular: string;
+    };
+    zIndex: {
+        modal: number;
+        overlay: number;
+    };
+    colors: ThemeColors;
+    component: ThemeComponent;
+    typography: ThemeTypography;
+    fonts: ThemeFonts;
+    assets: ThemeAssets;
 };
-declare type Coupon = {
-    code: string;
-    amount: string;
+declare type ThemeBreakpoints = {
+    mobile: number;
+    desktop: number;
 };
-interface SubtotalProps {
-    subtotal: SubtotalOption;
-    shipping: SubtotalOption;
-    taxes: SubtotalOption;
-    highlightColor?: string;
-    coupon?: {
-        couponText: string;
-        appliedText: string;
-        coupons: Coupon[];
+declare type ThemeBasicPallete = {
+    color: string;
+    contrast: string;
+};
+declare type ThemeColorPallete = ThemeBasicPallete & {
+    soft: ThemeBasicPallete;
+};
+declare type ThemeColorPrimaryPallete = ThemeColorPallete & {
+    20: ThemeColorPallete;
+    40: ThemeColorPallete;
+    60: ThemeColorPallete;
+    80: ThemeColorPallete;
+};
+declare type ThemeColors = {
+    pallete: {
+        primary: ThemeColorPrimaryPallete;
+        secondary: ThemeColorPrimaryPallete;
+    } & Partial<Record<string, ThemeColorPallete>>;
+    shades: {
+        black: ThemeBasicPallete;
+        white: ThemeBasicPallete;
+        5: ThemeBasicPallete;
+        10: ThemeBasicPallete;
+        50: ThemeBasicPallete;
+        100: ThemeBasicPallete;
+        150: ThemeBasicPallete;
+        200: ThemeBasicPallete;
+        250: ThemeBasicPallete;
+        300: ThemeBasicPallete;
+        350: ThemeBasicPallete;
+        400: ThemeBasicPallete;
+        450: ThemeBasicPallete;
+        500: ThemeBasicPallete;
+        550: ThemeBasicPallete;
+        600: ThemeBasicPallete;
+        650: ThemeBasicPallete;
+        700: ThemeBasicPallete;
+        750: ThemeBasicPallete;
+        800: ThemeBasicPallete;
+        850: ThemeBasicPallete;
+        900: ThemeBasicPallete;
+        950: ThemeBasicPallete;
+        990: ThemeBasicPallete;
     };
-}
-
-interface TotalProps {
-    total: string;
-    currency: string;
-    highlightColor?: string;
-    saving?: {
-        amount: string;
-        savingText: string;
+    semantic: {
+        positive: ThemeBasicPallete;
+        urgent: ThemeBasicPallete;
+        attention: ThemeBasicPallete;
+        informative: ThemeBasicPallete;
     };
-}
-
-declare const Totals: {
-    Total: ({ total, currency, saving, highlightColor }: TotalProps) => JSX.Element;
-    Subtotal: ({ subtotal, shipping, taxes, coupon, highlightColor, }: SubtotalProps) => JSX.Element;
-};
-
-declare type detail = {
-    title: string;
-    details: string;
-};
-interface orderUpdate extends detail {
-    keepMeUpdated: {
-        title: string;
-        onClick: () => void;
+    border: {
+        color: string;
+        disabled: string;
+        highlight: string;
     };
-}
-interface DeliveryDetailsProps {
-    deliveryDetailsText: string;
-    arrivingBy: detail;
-    shippingTo: detail;
-    instantOrderUpdate: orderUpdate;
-    note?: {
-        importantNoteText: string;
-        text: string;
-        accentColor: string;
-        backgroundColor: string;
+    background: {
         color: string;
+        disabled: string;
     };
-}
-declare const DeliveryDetails: ({ deliveryDetailsText, arrivingBy, shippingTo, instantOrderUpdate, note, }: DeliveryDetailsProps) => JSX.Element;
-
-interface ScrollToTopProps {
-    scrollToTopText: string;
-    onClick: () => void;
-}
-declare const ScrollToTop: ({ scrollToTopText, onClick }: ScrollToTopProps) => JSX.Element;
-
-interface OrderBarProps {
-    message: string;
-}
-declare const OrderBar: ({ message }: OrderBarProps) => JSX.Element;
-
-interface TableProps {
-    headers: string[];
-    data: string[][];
-}
-declare const SizeTable: ({ headers, data }: TableProps) => JSX.Element;
-
-interface Price extends Pick<PriceLabelProps, 'finalPrice' | 'originalPrice'> {
-    color?: string;
-}
-interface ProductOrderItemProps {
-    title: string;
-    subtitle: string;
-    image: {
-        src: string;
-        alt: string;
+    text: {
+        color: string;
+        disabled: string;
     };
-    price: Price;
-    tag?: {
-        text: string;
-        backgroundColor: string;
+};
+declare type ThemeComponent = {
+    button: {
+        border: string;
+        borderRadius: string;
+        fontWeight: number;
+        size: {
+            small: {
+                fontSize: string;
+                padding: string;
+            };
+            medium: {
+                fontSize: string;
+                padding: string;
+            };
+            large: {
+                fontSize: string;
+                padding: string;
+            };
+        };
+        primary: {
+            active: {
+                backgroundColor: string;
+                color: string;
+            };
+            hover: {
+                backgroundColor: string;
+                color: string;
+            };
+        };
+        secondary: {
+            active: {
+                backgroundColor: string;
+                color: string;
+            };
+            hover: {
+                backgroundColor: string;
+                color: string;
+            };
+        };
     };
-}
-declare const SimpleOrderItem: ({ title, subtitle, image, price, tag }: ProductOrderItemProps) => JSX.Element;
-
-interface ReviewProps {
-    reviewerName: string;
-    date: Date;
-    rating: number;
-    stars: {
+    input: {
+        background: string;
         color: string;
-        size: ComponentSize.Medium | ComponentSize.Small;
+        placeholderColor: string;
+        borderRadius: string;
+        fontSize: string;
+        fontWeight: number;
+        padding: string;
+        lineHeight: string;
+        border: string;
+        boxShadow: string;
     };
-    title: string;
-    description: string;
-    image: {
-        src: string;
-        alt: string;
+    inputCustom: {
+        button: {
+            borderRadius: string;
+        };
+        input: {
+            borderRadius: string;
+        };
     };
-}
-declare const Review: ({ reviewerName, date, rating, stars, title, description, image }: ReviewProps) => JSX.Element;
-
-interface SliderNavigationProps {
-    children: JSX.Element[];
-    infinite: boolean;
-    adaptiveHeight: boolean;
-    dotsSize: ComponentSize.Large | ComponentSize.Medium | ComponentSize.Small;
-    dotListMarginTop: number;
-    initialSlide?: number;
-    arrows?: {
-        arrowWidth: number;
-        arrowHeight: number;
-        arrowPadding: number;
+    selector: {
+        size: {
+            small: {
+                padding: string;
+                borderRadius: string;
+            };
+            medium: {
+                padding: string;
+                borderRadius: string;
+            };
+        };
+        default: {
+            fontWeight: number;
+            border: string;
+            background: string;
+            color: string;
+        };
+        hover: {
+            fontWeight: number;
+            background: string;
+            border: string;
+            color: string;
+        };
+        disabled: {
+            border: string;
+        };
+        fontSize: string;
     };
-}
-declare const SliderNavigation: ({ children, infinite, arrows, adaptiveHeight, dotsSize, dotListMarginTop, initialSlide, }: SliderNavigationProps) => _emotion_react_jsx_runtime.JSX.Element;
-
-interface DropdownListIconsProps {
-    items: DropdownListIconsItem[];
-}
-declare const DropdownListIcons: ({ items }: DropdownListIconsProps) => JSX.Element;
-
-interface ImageStyleProps {
-    height?: string;
-    width?: string;
-    borderRadius?: string;
-    objectFit?: string;
-    objectPosition?: string;
-}
-interface ImageProps extends ImageStyleProps {
-    src: string;
-    alt: string;
-}
-declare const Image: ({ src, alt, height, width, borderRadius, objectFit, objectPosition, }: ImageProps) => JSX.Element;
-
-interface AmazonPaypalBtnProps {
-    onClick: () => void;
-}
-declare const AmazonButton: ({ onClick }: AmazonPaypalBtnProps) => JSX.Element;
-declare const PaypalButton: ({ onClick }: AmazonPaypalBtnProps) => JSX.Element;
-
-interface CrossSellCheckboxProps extends rightToLeftProps {
-    imageURL: string;
-    title: string;
-    description: string;
-    freeShippingText: string;
-    onChange: (checked: Boolean) => void;
-}
-interface rightToLeftProps {
-    rightToLeft: boolean;
-}
-declare const CrossSellCheckbox: ({ imageURL, title, description, freeShippingText, rightToLeft, onChange, }: CrossSellCheckboxProps) => JSX.Element;
-
-type index_d_CrossSellCheckboxProps = CrossSellCheckboxProps;
-declare const index_d_CrossSellCheckbox: typeof CrossSellCheckbox;
-declare namespace index_d {
-  export {
-    index_d_CrossSellCheckboxProps as CrossSellCheckboxProps,
-    index_d_CrossSellCheckbox as CrossSellCheckbox,
-  };
-}
-
-interface ProductItemProps {
-    title: string;
-    image: ImageProps;
-    price: Pick<PriceLabelProps, 'finalPrice' | 'originalPrice' | 'color'>;
-    rating: Pick<RatingProps, 'rating' | 'reviews'>;
-    tags?: {
-        categoryTagText: string;
-        seasonOfferTagText: string;
+    rating: {
+        fontWeight: number;
+        size: {
+            xsmall: {
+                fontSize: string;
+                lineHeight: string;
+            };
+            small: {
+                fontSize: string;
+                lineHeight: string;
+            };
+            medium: {
+                fontSize: string;
+                lineHeight: string;
+            };
+            large: {
+                fontSize: string;
+                lineHeight: string;
+            };
+        };
     };
-    alignName?: 'left' | 'center';
-}
-
-interface ProductItemSmallMobileProps extends ProductItemProps {
-    size: ComponentSize.Medium | ComponentSize.Small;
-}
-
-declare function withProductGrid<P extends ProductItemProps>(ProductItemComponent: React.FC<P>, data: ProductItemProps[]): {
-    (props: Omit<P, 'title' | 'image' | 'price' | 'rating'>): JSX.Element;
-    displayName: string;
-};
-
-declare const Collection: {
-    ProductItemMobile: ({ title, image, price, rating, size, tags, alignName, }: ProductItemSmallMobileProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
-    withProductGrid: typeof withProductGrid;
-};
-
-interface StarListProps {
-    rating: number;
-    size?: ComponentSize;
-    starsNumber: number;
-    fill: string;
-}
-declare const StarList: ({ rating, starsNumber, fill, size, }: StarListProps) => JSX.Element;
-
-interface DrawerProps {
-    children: React.ReactNode;
-    isOpen: boolean;
-    onClose?: () => void;
-    onOpen?: () => void;
-    onClickOutside?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    card: {
+        borderRadius: string;
+    };
+    radio: {
+        borderColor: string;
+        background: string;
+        size: {
+            small: {
+                borderWidth: string;
+                margin: string;
+                height: string;
+                active: {
+                    borderWidth: string;
+                };
+            };
+            medium: {
+                borderWidth: string;
+                margin: string;
+                height: string;
+                active: {
+                    borderWidth: string;
+                };
+            };
+            large: {
+                borderWidth: string;
+                margin: string;
+                height: string;
+                active: {
+                    borderWidth: string;
+                };
+            };
+        };
+    };
+    label: {
+        fontSize: {
+            small: string;
+            medium: string;
+            large: string;
+        };
+        lineHeight: {
+            small: string;
+            medium: string;
+            large: string;
+        };
+    };
+    checkbox: {
+        background: string;
+        borderColor: string;
+        active: {
+            background: string;
+        };
+        size: {
+            large: {
+                width: string;
+                height: string;
+                borderRadius: string;
+                borderWidth: string;
+                margin: string;
+                icon: {
+                    width: string;
+                    height: string;
+                };
+            };
+            medium: {
+                width: string;
+                height: string;
+                borderRadius: string;
+                borderWidth: string;
+                margin: string;
+                icon: {
+                    width: string;
+                    height: string;
+                };
+            };
+            small: {
+                width: string;
+                height: string;
+                borderRadius: string;
+                borderWidth: string;
+                margin: string;
+                icon: {
+                    width: string;
+                    height: string;
+                };
+            };
+        };
+    };
+    accordion: {
+        variant: {
+            box: {
+                container: {
+                    border: string;
+                    borderColor: string;
+                    borderRadius: string;
+                    padding: string;
+                };
+                summary: {
+                    fontWeight: number;
+                    fontSize: string;
+                    lineHeight: string;
+                    color: string;
+                };
+                details: {
+                    margin: string;
+                };
+                icon: {
+                    width: number;
+                    height: number;
+                    color: string;
+                };
+            };
+            simple: {
+                container: {
+                    borderTop: string;
+                    borderBottom: string;
+                    borderColor: string;
+                    borderRadius: string;
+                    padding: string;
+                };
+                summary: {
+                    fontWeight: number;
+                    fontSize: string;
+                    lineHeight: string;
+                    color: string;
+                };
+                details: {
+                    margin: string;
+                };
+                icon: {
+                    width: number;
+                    height: number;
+                    color: string;
+                };
+            };
+        };
+    };
+    dropdown: {
+        borderRadius: string;
+        fontSize: string;
+        fontWeight: number;
+        lineHeight: string;
+        padding: string;
+        color: string;
+        fill: string;
+        options: {
+            borderColor: string;
+            color: string;
+        };
+    };
+    modal: {
+        minWidth: string;
+    };
+};
+declare type ThemeTypography = {
+    config: {
+        weight: {
+            heavy: number;
+            bold: number;
+            demi: number;
+            regular: number;
+        };
+    };
+    variants: Record<string, CSSProperties>;
+};
+declare type ThemeFonts = {
+    url: string;
+    config: Array<{
+        src: string;
+        family: string;
+        weight?: number | string;
+        style?: string;
+        stretch?: string;
+    }>;
+};
+declare type ThemeAssets = {
+    images: {
+        favicon: string;
+        logo: string;
+    };
+    [key: string]: any;
+};
+
+interface CheckboxProps {
+    disabled?: boolean;
+    onChange: (checked: boolean) => void;
+    size?: ComponentSize.Large | ComponentSize.Medium | ComponentSize.Small;
+    text: string;
+    checked?: boolean;
+    id: string;
     backgroundColor?: string;
-    backdropColor?: string;
-    position?: 'left' | 'right';
-    width?: string;
+    variant: 'primary' | 'secondary';
 }
-declare const Drawer: ({ children, isOpen, onClose, onOpen, backgroundColor, backdropColor, position, width, onClickOutside, }: DrawerProps) => JSX.Element | null;
+declare const Checkbox: ({ disabled, onChange, size, text, checked, id, variant, }: CheckboxProps) => JSX.Element;
 
-interface SpinnerProps {
-    fill: string;
-    background: string;
-    animationDuration?: number;
-    complete?: boolean;
-    completeIconStroke?: number;
-    size?: string;
+interface RadioGroupInputProps {
+    name: string;
+    options?: RadioGroupOption[];
+    value?: RadioGroupOption;
+    onChange: (value: RadioGroupOption) => void;
+    size?: ComponentSize.Small | ComponentSize.Medium | ComponentSize.Large;
+    disabled?: boolean;
 }
-declare const Spinner: ({ fill, background, animationDuration, complete, completeIconStroke, size, }: SpinnerProps) => JSX.Element;
+declare const RadioGroupInput: ({ name, options, value, onChange, size, disabled, }: RadioGroupInputProps) => JSX.Element;
 
-interface TagsProps {
-    color?: string;
-    items: string[];
-    onCloseClick: (index: number) => void;
-}
-declare const Tags: ({ color, items, onCloseClick }: TagsProps) => JSX.Element;
+interface SimpleProps {
+    title: string;
+    freeShippingText: string;
+    price: string;
+    anyQtyForText: string;
+    backgroundColor: string;
+    widthAuto?: boolean;
+}
 
-declare type FilteringDropdownProps<T> = {
-    options: DropdownOption<T>[];
-    disabled?: boolean;
-    wide?: boolean;
-    onChange: (options: DropdownOption<T>[]) => void;
-    filter?: boolean;
-    sliceAfter?: number;
-    placeHolder: string;
-};
-declare function FilteringDropdown<T>({ options, disabled, placeHolder, wide, sliceAfter, filter, onChange, }: FilteringDropdownProps<T>): JSX.Element;
+interface MinimalisticProps {
+    backgroundColor?: string;
+    borderColor?: string;
+    originalPrice: string;
+    price: string;
+    savingPrice: string;
+    getMorePayLessText: string;
+    youAreSavingText: string;
+    getQtyForText: string;
+    discount: number;
+    offText: string;
+    widthAuto?: boolean;
+}
 
-interface PaginationProps {
-    from: number;
-    to: number;
-    onChange: (page: number) => void;
-    currentPage?: number;
-    underlineActive?: boolean;
-    boldActive?: boolean;
-    disabled?: boolean;
+declare const Bundle: {
+    Minimalistic: ({ backgroundColor, borderColor, originalPrice, price, savingPrice, getMorePayLessText, youAreSavingText, getQtyForText, discount, offText, widthAuto, }: MinimalisticProps) => JSX.Element;
+    Simple: ({ title, freeShippingText, price, anyQtyForText, backgroundColor, widthAuto, }: SimpleProps) => JSX.Element;
+};
+
+interface CategoryTagProps {
+    text: string;
+    size: ComponentSize.Large | ComponentSize.Medium | ComponentSize.Small;
+    className?: string;
 }
-declare const Pagination: ({ from, to, currentPage, onChange, underlineActive, boldActive, disabled, }: PaginationProps) => JSX.Element;
+declare const CategoryTag: ({ text, size, className }: CategoryTagProps) => _emotion_react_jsx_runtime.JSX.Element;
 
-declare const Text: FC<TextProps>;
-
-declare type TextHeroProps = {
-    variant: 'hero1' | 'hero2' | 'hero3';
-    weight?: 'heavy' | 'bold' | 'demi';
-    size?: 'regular';
-    underline?: never;
-    disabled?: never;
-    wide?: never;
-    original?: never;
-    allCaps?: never;
-};
-declare type TextDisplayProps = {
-    variant: 'display1' | 'display2';
-    weight?: 'bold' | 'demi';
-    size?: 'regular';
-    underline?: never;
-    disabled?: never;
-    wide?: never;
-    original?: never;
-    allCaps?: never;
-};
-declare type TextHeadingProps = {
-    variant: 'heading1' | 'heading2' | 'heading3' | 'heading4' | 'heading5' | 'heading6';
-    weight?: 'bold' | 'demi' | 'regular';
-    size?: 'regular';
-    underline?: never;
-    disabled?: never;
-    wide?: never;
-    original?: never;
-    allCaps?: never;
-};
-declare type TextBodyProps = {
-    variant: 'body';
-    size?: 'regular' | 'small';
-    weight?: 'bold' | 'demi' | 'regular';
-    underline?: never;
-    disabled?: never;
-    wide?: never;
-    original?: never;
-    allCaps?: never;
-};
-declare type TextButtonProps = {
-    variant: 'button';
-    size: 'large' | 'regular' | 'small';
-    weight: 'bold' | 'demi';
-    underline?: never;
-    disabled?: never;
-    wide?: boolean;
-    original?: never;
-    allCaps?: never;
-};
-declare type TextPricingProps = {
-    variant: 'pricing';
-    size: 'large' | 'medium' | 'regular' | 'small';
-    weight?: never;
-    underline?: never;
-    disabled?: never;
-    wide?: never;
-    original?: boolean;
-    allCaps?: never;
-};
-declare type TextLinkProps = {
-    variant: 'link';
-    weight?: 'demi' | 'regular';
-    size?: 'regular' | 'small';
-    underline?: boolean;
+interface SeasonOfferTagProps {
+    text: string;
+    backgroundColor?: string;
+    size: ComponentSize.Large | ComponentSize.Medium | ComponentSize.Small;
+    className?: string;
+}
+declare const SeasonOfferTag: ({ text, backgroundColor, size, className, }: SeasonOfferTagProps) => _emotion_react_jsx_runtime.JSX.Element;
+
+interface TimeProps {
+    hours: number;
+    minutes: number;
+    seconds: number;
+}
+interface TimerProps extends TimeProps {
+    onTimeUp: () => void;
+}
+declare const Timer: ({ onTimeUp, ...rest }: TimerProps) => JSX.Element;
+
+interface BaseInputCommmonProps {
+    defaultValue?: string;
+    maxLength?: number;
+    placeholder?: string;
+    label?: string;
+    onValidation?: (status: InputValidationType) => void;
     disabled?: boolean;
-    wide?: never;
-    original?: never;
-    allCaps?: never;
-} & AnchorHTMLAttributes<'a'>;
-declare type TextLabelProps = {
-    variant: 'label';
-    weight?: 'regular' | 'demi';
+    required?: string;
+    children?: React.ReactNode;
     size?: 'regular' | 'small';
-    underline?: never;
-    disabled?: boolean;
-    wide?: never;
-    original?: never;
-    allCaps?: never;
-} & LabelHTMLAttributes<'label'>;
-declare type TextTagProps = {
-    variant: 'tag';
-    size: 'regular' | 'small' | 'x-small';
-    weight?: 'regular' | 'demi' | 'bold';
-    underline?: never;
+}
+interface BaseInputControlled extends BaseInputCommmonProps {
+    value: string;
+    onChange: (value: string) => void;
+}
+interface BaseInputUncontrolled extends BaseInputCommmonProps {
+    value?: never;
+    onChange?: (value: string) => void;
+}
+declare type BaseInputProps = BaseInputControlled | BaseInputUncontrolled;
+
+declare type BasePlusIconProps = BaseInputProps & {
+    Icon: IconType;
+};
+
+declare type BasePlusButtonProps = BaseInputProps & {
+    label?: undefined;
+    onClick: (value: string) => void;
+    onClickEdit: () => void;
+    text: string;
+    success: boolean;
+    editText: string;
+    successText: string;
+};
+
+interface BaseCTAProps {
+    onClick: () => void;
     disabled?: boolean;
-    wide?: never;
-    original?: never;
-    allCaps?: boolean;
-};
-declare type TextProps = AriaAttributes & {
-    style?: CSSProperties;
-} & (TextHeroProps | TextDisplayProps | TextHeadingProps | TextBodyProps | TextLinkProps | TextButtonProps | TextPricingProps | TextLabelProps | TextTagProps);
+    wide?: boolean;
+    className?: string;
+    size?: ComponentSize;
+    text: string;
+    type?: ButtonType;
+}
 
-interface SearchBarProps {
-    suggestions: SearchBarOptionItem$1[];
-    resultOptions: SearchBarOptionItem$1[];
-    onChange: (text: string) => void;
-    onSearch: (term: string) => void;
-    resultsPanelDataTestId?: string;
+declare type ButtonProps = {
+    variant: 'primary' | 'secondary' | 'secondary-outline';
+} & BaseCTAProps;
+
+declare type CustomProps = BaseInputProps & {
+    onClick: () => void;
+    text: string;
+    variant: ButtonProps['variant'];
+};
+
+declare const Input: {
+    Simple: ({ value, onChange, defaultValue, label, children, required, onValidation, size, ...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;
+};
+
+interface PaymentMethodsProps {
+    Icon: IconType;
+    width: string;
+    height: string;
+    onClick?: () => void;
 }
-declare const SearchBar: ({ suggestions, resultOptions, onChange, onSearch, resultsPanelDataTestId, }: SearchBarProps) => JSX.Element;
+declare const PaymentMethod: ({ Icon, width, height, onClick }: PaymentMethodsProps) => JSX.Element;
 
-interface ProductGalleryMobileProps {
-    images: ImageType[];
-    selectedValue?: ImageType;
-    DiscountTagElement?: JSX.Element;
-    BestSellerTagElement?: JSX.Element;
-    productImageDataTestId?: string;
-    slideDotsDataTestId?: string;
+interface OfferBannerProps {
+    discountAppliedText: string;
+    backgroundColor: string;
 }
-declare const ProductGalleryMobile: ({ images, selectedValue, DiscountTagElement, BestSellerTagElement, productImageDataTestId, slideDotsDataTestId, }: ProductGalleryMobileProps) => JSX.Element;
+declare const OfferBanner: ({ discountAppliedText, backgroundColor }: OfferBannerProps) => JSX.Element;
 
-declare const ThemeProvider: FC<{
-    theme: Theme;
-    children: ReactNode;
-}>;
-declare const useTheme: () => Theme;
-declare const ThemeVariables: FC<{
-    theme: Theme;
-    Container?: ElementType;
-}>;
-declare const AssetsProvider: FC<{
-    assets: ThemeAssets;
-}>;
-declare const useThemeAssets: () => ThemeAssets;
-declare type Theme = {
-    name: string;
-    fontSizes: number[];
-    fontWeights: number[];
-    lineHeights: number[];
-    mediaQueries: ThemeBreakpoints;
-    colors: ThemeColors;
-    component: ThemeComponent;
-    typography: ThemeTypography;
-    fonts: ThemeFonts;
-    assets: ThemeAssets;
-};
-declare type ThemeBreakpoints = {
-    mobile: number;
-    desktop: number;
+declare type SubtotalOption = {
+    label: string;
+    value: string;
 };
-declare type ThemeBasicPallete = {
-    color: string;
-    contrast: string;
+declare type Coupon = {
+    code: string;
+    amount: string;
 };
-declare type ThemeColorPallete = ThemeBasicPallete & {
-    soft: ThemeBasicPallete;
+interface SubtotalProps {
+    subtotal: SubtotalOption;
+    shipping: SubtotalOption;
+    taxes: SubtotalOption;
+    highlightColor?: string;
+    coupon?: {
+        couponText: string;
+        appliedText: string;
+        coupons: Coupon[];
+    };
+}
+
+interface TotalProps {
+    total: string;
+    currency: string;
+    highlightColor?: string;
+    saving?: {
+        amount: string;
+        savingText: string;
+    };
+}
+
+declare const Totals: {
+    Total: ({ total, currency, saving, highlightColor }: TotalProps) => JSX.Element;
+    Subtotal: ({ subtotal, shipping, taxes, coupon, highlightColor, }: SubtotalProps) => JSX.Element;
+};
+
+declare type detail = {
+    title: string;
+    details: string;
 };
-declare type ThemeColorPrimaryPallete = ThemeColorPallete & {
-    20: ThemeColorPallete;
-    40: ThemeColorPallete;
-    60: ThemeColorPallete;
-    80: ThemeColorPallete;
-};
-declare type ThemeColors = {
-    pallete: {
-        primary: ThemeColorPrimaryPallete;
-        secondary: ThemeColorPrimaryPallete;
-    } & Partial<Record<string, ThemeColorPallete>>;
-    shades: {
-        black: ThemeBasicPallete;
-        white: ThemeBasicPallete;
-        5: ThemeBasicPallete;
-        10: ThemeBasicPallete;
-        50: ThemeBasicPallete;
-        100: ThemeBasicPallete;
-        150: ThemeBasicPallete;
-        200: ThemeBasicPallete;
-        250: ThemeBasicPallete;
-        300: ThemeBasicPallete;
-        350: ThemeBasicPallete;
-        400: ThemeBasicPallete;
-        450: ThemeBasicPallete;
-        500: ThemeBasicPallete;
-        550: ThemeBasicPallete;
-        600: ThemeBasicPallete;
-        650: ThemeBasicPallete;
-        700: ThemeBasicPallete;
-        750: ThemeBasicPallete;
-        800: ThemeBasicPallete;
-        850: ThemeBasicPallete;
-        900: ThemeBasicPallete;
-        950: ThemeBasicPallete;
-        990: ThemeBasicPallete;
-    };
-    semantic: {
-        positive: ThemeBasicPallete;
-        urgent: ThemeBasicPallete;
-        attention: ThemeBasicPallete;
-        informative: ThemeBasicPallete;
-    };
-    border: {
-        color: string;
-        disabled: string;
-        highlight: string;
+interface orderUpdate extends detail {
+    keepMeUpdated: {
+        title: string;
+        onClick: () => void;
     };
-    background: {
+}
+interface DeliveryDetailsProps {
+    deliveryDetailsText: string;
+    arrivingBy: detail;
+    shippingTo: detail;
+    instantOrderUpdate: orderUpdate;
+    note?: {
+        importantNoteText: string;
+        text: string;
+        accentColor: string;
+        backgroundColor: string;
         color: string;
-        disabled: string;
     };
-    text: {
-        color: string;
-        disabled: string;
+}
+declare const DeliveryDetails: ({ deliveryDetailsText, arrivingBy, shippingTo, instantOrderUpdate, note, }: DeliveryDetailsProps) => JSX.Element;
+
+interface ScrollToTopProps {
+    scrollToTopText: string;
+    onClick: () => void;
+}
+declare const ScrollToTop: ({ scrollToTopText, onClick }: ScrollToTopProps) => JSX.Element;
+
+interface OrderBarProps {
+    message: string;
+}
+declare const OrderBar: ({ message }: OrderBarProps) => JSX.Element;
+
+interface TableProps {
+    headers: string[];
+    data: string[][];
+}
+declare const SizeTable: ({ headers, data }: TableProps) => JSX.Element;
+
+interface Price extends Pick<PriceLabelProps, 'finalPrice' | 'originalPrice'> {
+    color?: string;
+}
+interface ProductOrderItemProps {
+    title: string;
+    subtitle: string;
+    image: {
+        src: string;
+        alt: string;
     };
-};
-declare type ThemeComponent = {
-    button: {
-        border: string;
-        borderRadius: string;
-        fontWeight: number;
-        size: {
-            small: {
-                fontSize: string;
-                padding: string;
-            };
-            medium: {
-                fontSize: string;
-                padding: string;
-            };
-            large: {
-                fontSize: string;
-                padding: string;
-            };
-        };
-        primary: {
-            active: {
-                backgroundColor: string;
-                color: string;
-            };
-            hover: {
-                backgroundColor: string;
-                color: string;
-            };
-        };
-        secondary: {
-            active: {
-                backgroundColor: string;
-                color: string;
-            };
-            hover: {
-                backgroundColor: string;
-                color: string;
-            };
-        };
+    price: Price;
+    tag?: {
+        text: string;
+        backgroundColor: string;
     };
-    input: {
-        background: string;
+}
+declare const SimpleOrderItem: ({ title, subtitle, image, price, tag }: ProductOrderItemProps) => JSX.Element;
+
+interface ReviewProps {
+    reviewerName: string;
+    date: Date;
+    rating: number;
+    stars: {
         color: string;
-        placeholderColor: string;
-        borderRadius: string;
-        fontSize: string;
-        fontWeight: number;
-        padding: string;
-        lineHeight: string;
-        border: string;
-        boxShadow: string;
-    };
-    inputCustom: {
-        button: {
-            borderRadius: string;
-        };
-        input: {
-            borderRadius: string;
-        };
-    };
-    selector: {
-        size: {
-            small: {
-                padding: string;
-                borderRadius: string;
-            };
-            medium: {
-                padding: string;
-                borderRadius: string;
-            };
-        };
-        default: {
-            fontWeight: number;
-            border: string;
-            background: string;
-            color: string;
-        };
-        hover: {
-            fontWeight: number;
-            background: string;
-            border: string;
-            color: string;
-        };
-        disabled: {
-            border: string;
-        };
-        fontSize: string;
+        size: ComponentSize.Medium | ComponentSize.Small;
     };
-    rating: {
-        fontWeight: number;
-        size: {
-            xsmall: {
-                fontSize: string;
-                lineHeight: string;
-            };
-            small: {
-                fontSize: string;
-                lineHeight: string;
-            };
-            medium: {
-                fontSize: string;
-                lineHeight: string;
-            };
-            large: {
-                fontSize: string;
-                lineHeight: string;
-            };
-        };
+    title: string;
+    description: string;
+    image: {
+        src: string;
+        alt: string;
     };
-    card: {
-        borderRadius: string;
+}
+declare const Review: ({ reviewerName, date, rating, stars, title, description, image }: ReviewProps) => JSX.Element;
+
+interface SliderNavigationProps {
+    children: JSX.Element[];
+    infinite: boolean;
+    adaptiveHeight: boolean;
+    dotsSize: ComponentSize.Large | ComponentSize.Medium | ComponentSize.Small;
+    dotListMarginTop: number;
+    initialSlide?: number;
+    arrows?: {
+        arrowWidth: number;
+        arrowHeight: number;
+        arrowPadding: number;
     };
-    radio: {
-        borderColor: string;
-        background: string;
-        size: {
-            small: {
-                borderWidth: string;
-                margin: string;
-                height: string;
-                active: {
-                    borderWidth: string;
-                };
-            };
-            medium: {
-                borderWidth: string;
-                margin: string;
-                height: string;
-                active: {
-                    borderWidth: string;
-                };
-            };
-            large: {
-                borderWidth: string;
-                margin: string;
-                height: string;
-                active: {
-                    borderWidth: string;
-                };
-            };
-        };
-    };
-    label: {
-        fontSize: {
-            small: string;
-            medium: string;
-            large: string;
-        };
-        lineHeight: {
-            small: string;
-            medium: string;
-            large: string;
-        };
-    };
-    checkbox: {
-        background: string;
-        borderColor: string;
-        active: {
-            background: string;
-        };
-        size: {
-            large: {
-                width: string;
-                height: string;
-                borderRadius: string;
-                borderWidth: string;
-                margin: string;
-                icon: {
-                    width: string;
-                    height: string;
-                };
-            };
-            medium: {
-                width: string;
-                height: string;
-                borderRadius: string;
-                borderWidth: string;
-                margin: string;
-                icon: {
-                    width: string;
-                    height: string;
-                };
-            };
-            small: {
-                width: string;
-                height: string;
-                borderRadius: string;
-                borderWidth: string;
-                margin: string;
-                icon: {
-                    width: string;
-                    height: string;
-                };
-            };
-        };
-    };
-    accordion: {
-        variant: {
-            box: {
-                container: {
-                    border: string;
-                    borderColor: string;
-                    borderRadius: string;
-                    padding: string;
-                };
-                summary: {
-                    fontWeight: number;
-                    fontSize: string;
-                    lineHeight: string;
-                    color: string;
-                };
-                details: {
-                    margin: string;
-                };
-                icon: {
-                    width: number;
-                    height: number;
-                    color: string;
-                };
-            };
-            simple: {
-                container: {
-                    borderTop: string;
-                    borderBottom: string;
-                    borderColor: string;
-                    borderRadius: string;
-                    padding: string;
-                };
-                summary: {
-                    fontWeight: number;
-                    fontSize: string;
-                    lineHeight: string;
-                    color: string;
-                };
-                details: {
-                    margin: string;
-                };
-                icon: {
-                    width: number;
-                    height: number;
-                    color: string;
-                };
-            };
-        };
-    };
-    dropdown: {
-        borderRadius: string;
-        fontSize: string;
-        fontWeight: number;
-        lineHeight: string;
-        padding: string;
-        color: string;
-        fill: string;
-        options: {
-            borderColor: string;
-            color: string;
-        };
+}
+declare const SliderNavigation: ({ children, infinite, arrows, adaptiveHeight, dotsSize, dotListMarginTop, initialSlide, }: SliderNavigationProps) => _emotion_react_jsx_runtime.JSX.Element;
+
+interface DropdownListIconsProps {
+    items: DropdownListIconsItem[];
+}
+declare const DropdownListIcons: ({ items }: DropdownListIconsProps) => JSX.Element;
+
+interface ImageStyleProps {
+    height?: string;
+    width?: string;
+    borderRadius?: string;
+    objectFit?: string;
+    objectPosition?: string;
+    className?: string;
+}
+interface ImageProps extends ImageStyleProps {
+    src: string;
+    alt: string;
+}
+declare const Image: ({ src, alt, height, width, borderRadius, objectFit, objectPosition, className, }: ImageProps) => JSX.Element;
+
+interface AmazonPaypalBtnProps {
+    onClick: () => void;
+}
+declare const AmazonButton: ({ onClick }: AmazonPaypalBtnProps) => JSX.Element;
+declare const PaypalButton: ({ onClick }: AmazonPaypalBtnProps) => JSX.Element;
+
+interface CrossSellCheckboxProps extends rightToLeftProps {
+    imageURL: string;
+    title: string;
+    description: string;
+    freeShippingText: string;
+    onChange: (checked: Boolean) => void;
+}
+interface rightToLeftProps {
+    rightToLeft: boolean;
+}
+declare const CrossSellCheckbox: ({ imageURL, title, description, freeShippingText, rightToLeft, onChange, }: CrossSellCheckboxProps) => JSX.Element;
+
+type index_d_CrossSellCheckboxProps = CrossSellCheckboxProps;
+declare const index_d_CrossSellCheckbox: typeof CrossSellCheckbox;
+declare namespace index_d {
+  export {
+    index_d_CrossSellCheckboxProps as CrossSellCheckboxProps,
+    index_d_CrossSellCheckbox as CrossSellCheckbox,
+  };
+}
+
+interface ProductItemProps {
+    title: string;
+    image: ImageProps;
+    price: Pick<PriceLabelProps, 'finalPrice' | 'originalPrice' | 'color'>;
+    rating: Pick<RatingProps, 'rating' | 'reviews'>;
+    tags?: {
+        categoryTagText: string;
+        seasonOfferTagText: string;
     };
+    alignName?: 'left' | 'center';
+}
+
+interface ProductItemSmallMobileProps extends ProductItemProps {
+    size: ComponentSize.Medium | ComponentSize.Small;
+}
+
+declare function withProductGrid<P extends ProductItemProps>(ProductItemComponent: React.FC<P>, data: ProductItemProps[]): {
+    (props: Omit<P, 'title' | 'image' | 'price' | 'rating'>): JSX.Element;
+    displayName: string;
+};
+
+declare const Collection: {
+    ProductItemMobile: ({ title, image, price, rating, size, tags, alignName, }: ProductItemSmallMobileProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+    withProductGrid: typeof withProductGrid;
+};
+
+interface StarListProps {
+    rating: number;
+    size?: ComponentSize;
+    starsNumber: number;
+    fill: string;
+}
+declare const StarList: ({ rating, starsNumber, fill, size, }: StarListProps) => JSX.Element;
+
+interface DrawerProps {
+    children: React.ReactNode;
+    isOpen: boolean;
+    onClose?: () => void;
+    onOpen?: () => void;
+    onClickOutside?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    backgroundColor?: string;
+    backdropColor?: string;
+    position?: 'left' | 'right';
+    width?: string;
+}
+declare const Drawer: ({ children, isOpen, onClose, onOpen, backgroundColor, backdropColor, position, width, onClickOutside, }: DrawerProps) => JSX.Element | null;
+
+interface SpinnerProps {
+    fill: string;
+    background: string;
+    animationDuration?: number;
+    complete?: boolean;
+    completeIconStroke?: number;
+    size?: string;
+}
+declare const Spinner: ({ fill, background, animationDuration, complete, completeIconStroke, size, }: SpinnerProps) => JSX.Element;
+
+interface TagsProps {
+    color?: string;
+    items: string[];
+    onCloseClick: (index: number) => void;
+}
+declare const Tags: ({ color, items, onCloseClick }: TagsProps) => JSX.Element;
+
+declare type FilteringDropdownProps<T> = {
+    options: DropdownOption<T>[];
+    disabled?: boolean;
+    wide?: boolean;
+    onChange: (options: DropdownOption<T>[]) => void;
+    filter?: boolean;
+    sliceAfter?: number;
+    placeHolder: string;
 };
-declare type ThemeTypography = {
-    config: {
-        weight: {
-            heavy: number;
-            bold: number;
-            demi: number;
-            regular: number;
-        };
-    };
-    variants: Record<string, CSSProperties>;
+declare function FilteringDropdown<T>({ options, disabled, placeHolder, wide, sliceAfter, filter, onChange, }: FilteringDropdownProps<T>): JSX.Element;
+
+interface PaginationProps {
+    from: number;
+    to: number;
+    onChange: (page: number) => void;
+    currentPage?: number;
+    underlineActive?: boolean;
+    boldActive?: boolean;
+    disabled?: boolean;
+}
+declare const Pagination: ({ from, to, currentPage, onChange, underlineActive, boldActive, disabled, }: PaginationProps) => JSX.Element;
+
+declare const Text: FC<TextProps>;
+declare type TextHeroProps = {
+    variant: 'hero1' | 'hero2' | 'hero3';
+    weight?: 'heavy' | 'bold' | 'demi';
+    size?: 'regular';
+    underline?: never;
+    disabled?: never;
+    wide?: never;
+    original?: never;
+    allCaps?: never;
 };
-declare type ThemeFonts = {
-    url: string;
-    config: Array<{
-        src: string;
-        family: string;
-        weight?: number | string;
-        style?: string;
-        stretch?: string;
-    }>;
+declare type TextDisplayProps = {
+    variant: 'display1' | 'display2';
+    weight?: 'bold' | 'demi';
+    size?: 'regular';
+    underline?: never;
+    disabled?: never;
+    wide?: never;
+    original?: never;
+    allCaps?: never;
 };
-declare type ThemeAssets = {
-    images: {
-        favicon: string;
-        logo: string;
-    };
-    [key: string]: any;
-};
+declare type TextHeadingProps = {
+    variant: 'heading1' | 'heading2' | 'heading3' | 'heading4' | 'heading5' | 'heading6';
+    weight?: 'bold' | 'demi' | 'regular';
+    size?: 'regular';
+    underline?: never;
+    disabled?: never;
+    wide?: never;
+    original?: never;
+    allCaps?: never;
+};
+declare type TextBodyProps = {
+    variant: 'body';
+    size?: 'regular' | 'small';
+    weight?: 'bold' | 'demi' | 'regular';
+    underline?: never;
+    disabled?: never;
+    wide?: never;
+    original?: never;
+    allCaps?: never;
+};
+declare type TextButtonProps = {
+    variant: 'button';
+    size: 'large' | 'regular' | 'small';
+    weight: 'bold' | 'demi';
+    underline?: never;
+    disabled?: never;
+    wide?: boolean;
+    original?: never;
+    allCaps?: never;
+};
+declare type TextPricingProps = {
+    variant: 'pricing';
+    size: 'large' | 'medium' | 'regular' | 'small';
+    weight?: never;
+    underline?: never;
+    disabled?: never;
+    wide?: never;
+    original?: boolean;
+    allCaps?: never;
+};
+declare type TextLinkProps = {
+    variant: 'link';
+    weight?: 'demi' | 'regular';
+    size?: 'regular' | 'small';
+    underline?: boolean;
+    disabled?: boolean;
+    wide?: never;
+    original?: never;
+    allCaps?: never;
+} & AnchorHTMLAttributes<'a'>;
+declare type TextLabelProps = {
+    variant: 'label';
+    weight?: 'regular' | 'demi';
+    size?: 'regular' | 'small';
+    underline?: never;
+    disabled?: boolean;
+    wide?: never;
+    original?: never;
+    allCaps?: never;
+} & LabelHTMLAttributes<'label'>;
+declare type TextTagProps = {
+    variant: 'tag';
+    size?: 'regular' | 'small' | 'x-small';
+    weight?: 'regular' | 'demi' | 'bold';
+    underline?: never;
+    disabled?: boolean;
+    wide?: never;
+    original?: never;
+    allCaps?: boolean;
+};
+declare type TextProps = AriaAttributes & {
+    style?: CSSProperties;
+    className?: string;
+} & (TextHeroProps | TextDisplayProps | TextHeadingProps | TextBodyProps | TextLinkProps | TextButtonProps | TextPricingProps | TextLabelProps | TextTagProps);
+
+interface SearchBarProps {
+    suggestions: SearchBarOptionItem[];
+    resultOptions: SearchBarOptionItem[];
+    onChange: (text: string) => void;
+    onSearch: (term: string) => void;
+    resultsPanelDataTestId?: string;
+}
+declare const SearchBar: ({ suggestions, resultOptions, onChange, onSearch, resultsPanelDataTestId, }: SearchBarProps) => JSX.Element;
+
+interface ProductGalleryMobileProps {
+    images: ImageType[];
+    selectedValue?: ImageType;
+    DiscountTagElement?: JSX.Element;
+    BestSellerTagElement?: JSX.Element;
+    productImageDataTestId?: string;
+    slideDotsDataTestId?: string;
+}
+declare const ProductGalleryMobile: ({ images, selectedValue, DiscountTagElement, BestSellerTagElement, productImageDataTestId, slideDotsDataTestId, }: ProductGalleryMobileProps) => JSX.Element;
+
+interface RadioProps {
+    name: string;
+    value: string;
+    id: string;
+    label: string;
+    size?: ComponentSize.Small | ComponentSize.Medium | ComponentSize.Large;
+    checked?: boolean;
+    disabled?: boolean;
+    onChange: (option: RadioGroupOption) => void;
+}
+declare const RadioInput: ({ name, value, id, label, checked, disabled, onChange, size, }: RadioProps) => JSX.Element;
+
+declare type PortalProps = {
+    id: string;
+    className?: string;
+};
+declare const Portal: FC<PortalProps>;
 
 declare const useOnClickOutside: <T extends HTMLElement = HTMLElement>(ref: RefObject<T>, handler: (event: Event) => void) => void;
 
-declare const useWindowDimensions: (breakpoints: ThemeBreakpoints$1) => {
+declare const useWindowDimensions: (breakpoints: ThemeBreakpoints) => {
     isMobile: boolean;
     windowDimensions: {
         width: number;
@@ -1476,4 +1546,4 @@ declare const useWindowDimensions: (breakpoints: ThemeBreakpoints$1) => {
     };
 };
 
-export { Accordion, AmazonButton, AssetsProvider, Bundle, ButtonPrimary, ButtonSecondary, ButtonSecondaryOutline, ButtonType, CTAProps, _default as Card, CardSectionType, 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, MultiColorPicker, OfferBanner, OrderBar, Pagination, Pattern, PaymentMethod, PaypalButton, PriceLabel, ProductGallery, ProductGalleryMobile, ProgressBar, RadioGroupInput, RadioGroupOption, Rating, Review, ScrollToTop, SearchBar, SearchBarOptionItem, SeasonOfferTag, SimpleDropdown, SimpleOrderItem, SingleColorPicker, SizeFitGuide, SizeOption, SizeSelector, SizeTable, SliderNavigation, Spinner, StarList, Text, TextButton, Theme, ThemeAssets, ThemeBasicPallete, ThemeBreakpoints, ThemeColorPallete, ThemeColors, ThemeComponent, ThemeFonts, ThemeProvider, ThemeTypography, ThemeVariables, Timer, Tooltip, Totals, WithTestId, useOnClickOutside, useTheme, useThemeAssets, useWindowDimensions };
+export { Accordion, AmazonButton, AssetsProvider, Bundle, ButtonPrimary, ButtonSecondary, ButtonSecondaryOutline, ButtonType, CTAProps, _default as Card, CardSectionType, 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, MultiColorPicker, OfferBanner, OrderBar, Pagination, Pattern, PaymentMethod, PaypalButton, Portal, PriceLabel, ProductGallery, ProductGalleryMobile, ProgressBar, RadioGroupInput, RadioGroupOption, RadioInput, Rating, Review, ScrollToTop, SearchBar, SearchBarOptionItem, SeasonOfferTag, SimpleDropdown, SimpleOrderItem, SingleColorPicker, SizeFitGuide, SizeOption, SizeSelector, SizeTable, SliderNavigation, Spinner, StarList, Text, TextButton, Theme, ThemeAssets, ThemeBasicPallete, ThemeBreakpoints, ThemeColorPallete, ThemeColors, ThemeComponent, ThemeFonts, ThemeProvider, ThemeTypography, ThemeVariables, Timer, Tooltip, Totals, WithTestId, useOnClickOutside, useTheme, useThemeAssets, useWindowDimensions };