@trafilea/afrodita-components 4.0.2-beta.10 → 4.0.2-beta.11

package/build/index.d.ts

@@ -1,11 +1,7 @@
 /// <reference types="react" />
-import { IconWrapperProps } from 'src/components/Icon-wrapper/IconWrapper';
-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 { ButtonProps } from 'src/components/shared/button/Button';
 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,
@@ -327,6 +323,17 @@ interface IconProps {
 }
 declare const Message: ({ 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;
@@ -601,929 +608,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 BaseInputCommmonProps {
-    defaultValue?: string;
-    maxLength?: number;
-    placeholder?: string;
-    label?: string;
-    onValidation?: (status: InputValidationType) => void;
-    disabled?: boolean;
-    required?: string;
-    children?: React.ReactNode;
-    size?: 'regular' | 'small';
-}
-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;
-};
-
-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 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;
-    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;
+    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;
+    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 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;
+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;
-}
-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;
+    variant: 'primary' | 'secondary';
 }
-declare const Spinner: ({ fill, background, animationDuration, complete, completeIconStroke, size, }: SpinnerProps) => JSX.Element;
+declare const Checkbox: ({ disabled, onChange, size, text, checked, id, variant, }: CheckboxProps) => JSX.Element;
 
-interface TagsProps {
-    color?: string;
-    items: string[];
-    onCloseClick: (index: number) => void;
+interface RadioGroupInputProps {
+    name: string;
+    options?: RadioGroupOption[];
+    value?: RadioGroupOption;
+    onChange: (value: RadioGroupOption) => void;
+    size?: ComponentSize.Small | ComponentSize.Medium | ComponentSize.Large;
+    disabled?: boolean;
 }
-declare const Tags: ({ color, items, onCloseClick }: TagsProps) => JSX.Element;
+declare const RadioGroupInput: ({ name, options, value, onChange, size, disabled, }: RadioGroupInputProps) => 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 function FilteringDropdown<T>({ options, disabled, placeHolder, wide, sliceAfter, filter, onChange, }: FilteringDropdownProps<T>): JSX.Element;
+interface SimpleProps {
+    title: string;
+    freeShippingText: string;
+    price: string;
+    anyQtyForText: string;
+    backgroundColor: string;
+    widthAuto?: boolean;
+}
 
-interface PaginationProps {
-    from: number;
-    to: number;
-    onChange: (page: number) => void;
-    currentPage?: number;
-    underlineActive?: boolean;
-    boldActive?: boolean;
-    disabled?: 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 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;
+    wide?: boolean;
     className?: string;
-} & (TextHeroProps | TextDisplayProps | TextHeadingProps | TextBodyProps | TextLinkProps | TextButtonProps | TextPricingProps | TextLabelProps | TextTagProps);
+    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 const SearchBar: ({ suggestions, resultOptions, onChange, onSearch, resultsPanelDataTestId, }: SearchBarProps) => JSX.Element;
+declare type ButtonProps = {
+    variant: 'primary' | 'secondary' | 'secondary-outline';
+} & BaseCTAProps;
 
-interface ProductGalleryMobileProps {
-    images: ImageType[];
-    selectedValue?: ImageType;
-    DiscountTagElement?: JSX.Element;
-    BestSellerTagElement?: JSX.Element;
-    productImageDataTestId?: string;
-    slideDotsDataTestId?: string;
+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 ProductGalleryMobile: ({ images, selectedValue, DiscountTagElement, BestSellerTagElement, productImageDataTestId, slideDotsDataTestId, }: ProductGalleryMobileProps) => JSX.Element;
+declare const PaymentMethod: ({ Icon, width, height, onClick }: PaymentMethodsProps) => 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;
+interface OfferBannerProps {
+    discountAppliedText: string;
+    backgroundColor: string;
 }
-declare const RadioInput: ({ name, value, id, label, checked, disabled, onChange, size, }: RadioProps) => JSX.Element;
+declare const OfferBanner: ({ discountAppliedText, backgroundColor }: OfferBannerProps) => JSX.Element;
 
-declare type PortalProps = {
-    id: string;
-    className?: string;
+declare type SubtotalOption = {
+    label: string;
+    value: string;
 };
-declare const Portal: FC<PortalProps>;
+declare type Coupon = {
+    code: string;
+    amount: string;
+};
+interface SubtotalProps {
+    subtotal: SubtotalOption;
+    shipping: SubtotalOption;
+    taxes: SubtotalOption;
+    highlightColor?: string;
+    coupon?: {
+        couponText: string;
+        appliedText: string;
+        coupons: Coupon[];
+    };
+}
 
-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;
-    radius: {
-        regular: string;
-    };
-    zIndex: {
-        modal: number;
-        overlay: number;
+interface TotalProps {
+    total: string;
+    currency: string;
+    highlightColor?: string;
+    saving?: {
+        amount: string;
+        savingText: string;
     };
-    colors: ThemeColors;
-    component: ThemeComponent;
-    typography: ThemeTypography;
-    fonts: ThemeFonts;
-    assets: ThemeAssets;
-};
-declare type ThemeBreakpoints = {
-    mobile: number;
-    desktop: number;
-};
-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 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 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;
-        };
+        size: ComponentSize.Medium | ComponentSize.Small;
     };
-    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;
+    title: string;
+    description: string;
+    image: {
+        src: string;
+        alt: 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;
-            };
-        };
-    };
-    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;
-        };
+}
+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;
     };
-    modal: {
-        minWidth: 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;