@trafilea/afrodita-components 4.0.2-beta.6 → 4.1.0

package/build/index.d.ts

@@ -1,10 +1,9 @@
 /// <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, { FC, ReactNode, ElementType, CSSProperties, AriaAttributes, AnchorHTMLAttributes, LabelHTMLAttributes, RefObject } from 'react';
 import * as _emotion_react_jsx_runtime from '@emotion/react/jsx-runtime';
 import * as _emotion_react_types_jsx_namespace from '@emotion/react/types/jsx-namespace';
-import { SearchBarOptionItem as SearchBarOptionItem$1 } from 'src/types/types';
-import { ThemeBreakpoints as ThemeBreakpoints$1 } from 'src/core/theme/Theme';
+import * as _emotion_styled from '@emotion/styled';
+import * as _emotion_react from '@emotion/react';
 
 declare enum CardSectionType {
     Header = 0,
@@ -28,7 +27,7 @@ declare enum InputValidationType {
     Empty = 2
 }
 
-interface IconProps$1 {
+interface IconProps {
     width?: number;
     height?: number;
     fill?: string;
@@ -77,7 +76,7 @@ declare type ImageType = {
     imageUrl: string;
     alt: string;
 };
-interface IconWithOpacityProps extends IconProps$1 {
+interface IconWithOpacityProps extends IconProps {
     opacity?: number;
 }
 interface WithTestId {
@@ -108,7 +107,7 @@ interface SearchBarOptionItem {
     title: string;
 }
 
-declare const SixtyDaysGuarantee: ({ height, width, fill, title }: IconProps$1) => JSX.Element;
+declare const SixtyDaysGuarantee: ({ height, width, fill, title }: IconProps) => JSX.Element;
 
 declare const Custom_SixtyDaysGuarantee: typeof SixtyDaysGuarantee;
 declare namespace Custom {
@@ -117,22 +116,22 @@ declare namespace Custom {
   };
 }
 
-declare const Check: ({ height, width, fill }: IconProps$1) => JSX.Element;
+declare const Check: ({ height, width, fill }: IconProps) => JSX.Element;
 
-declare const ClearLight: ({ height, width, fill }: IconProps$1) => JSX.Element;
+declare const ClearLight: ({ height, width, fill }: IconProps) => JSX.Element;
 
-declare const LightExclamation: ({ height, width, fill }: IconProps$1) => JSX.Element;
+declare const LightExclamation: ({ height, width, fill }: IconProps) => JSX.Element;
 
-interface LightCheckProps extends IconProps$1 {
+interface LightCheckProps extends IconProps {
     strokeWidth?: number;
 }
 declare const LightCheck: ({ height, width, fill, strokeWidth }: LightCheckProps) => JSX.Element;
 
-declare const Question: ({ height, width, fill }: IconProps$1) => JSX.Element;
+declare const Question: ({ height, width, fill }: IconProps) => JSX.Element;
 
-declare const Close: ({ height, width, fill }: IconProps$1) => JSX.Element;
+declare const Close: ({ height, width, fill }: IconProps) => JSX.Element;
 
-declare const Trash: ({ height, width, fill }: IconProps$1) => JSX.Element;
+declare const Trash: ({ height, width, fill }: IconProps) => JSX.Element;
 
 declare const Actions_Check: typeof Check;
 declare const Actions_ClearLight: typeof ClearLight;
@@ -155,16 +154,16 @@ declare namespace Actions {
   };
 }
 
-declare const FitPredictor$1: ({ height, width, fill }: IconProps$1) => JSX.Element;
+declare const FitPredictor$1: ({ height, width, fill }: IconProps) => JSX.Element;
 
-interface LoadingProps extends IconProps$1 {
+interface LoadingProps extends IconProps {
     backgroundColor: string;
 }
 declare const Loading: ({ height, width, fill, backgroundColor }: LoadingProps) => JSX.Element;
 
-declare const Shapermint: ({ height, width }: IconProps$1) => JSX.Element;
+declare const Shapermint: ({ height, width }: IconProps) => JSX.Element;
 
-declare const McAfee: ({ height, width }: IconProps$1) => JSX.Element;
+declare const McAfee: ({ height, width }: IconProps) => JSX.Element;
 
 type Other_LoadingProps = LoadingProps;
 declare const Other_Loading: typeof Loading;
@@ -180,19 +179,19 @@ declare namespace Other {
   };
 }
 
-declare const ChevronDown: ({ height, width, fill }: IconProps$1) => JSX.Element;
+declare const ChevronDown: ({ height, width, fill }: IconProps) => JSX.Element;
 
 declare const ChevronLeft: ({ height, width, fill, opacity }: IconWithOpacityProps) => JSX.Element;
 
 declare const ChevronRight: ({ height, width, fill, opacity }: IconWithOpacityProps) => JSX.Element;
 
-declare const ChevronRightVariant: ({ height, width, fill }: IconProps$1) => JSX.Element;
+declare const ChevronRightVariant: ({ height, width, fill }: IconProps) => JSX.Element;
 
-declare const ChevronUp: ({ height, width, fill }: IconProps$1) => JSX.Element;
+declare const ChevronUp: ({ height, width, fill }: IconProps) => JSX.Element;
 
-declare const ChevronUpSolid: ({ height, width, fill }: IconProps$1) => JSX.Element;
+declare const ChevronUpSolid: ({ height, width, fill }: IconProps) => JSX.Element;
 
-declare const CircleUp: ({ width, height, fill }: IconProps$1) => JSX.Element;
+declare const CircleUp: ({ width, height, fill }: IconProps) => JSX.Element;
 
 declare const Arrows_ChevronDown: typeof ChevronDown;
 declare const Arrows_ChevronLeft: typeof ChevronLeft;
@@ -213,25 +212,25 @@ declare namespace Arrows {
   };
 }
 
-declare const Clock: ({ height, width, fill }: IconProps$1) => JSX.Element;
+declare const Clock: ({ height, width, fill }: IconProps) => JSX.Element;
 
-declare const FlagUSA: ({ height, width, fill }: IconProps$1) => JSX.Element;
+declare const FlagUSA: ({ height, width, fill }: IconProps) => JSX.Element;
 
-declare const Minus: ({ height, width, fill, title }: IconProps$1) => JSX.Element;
+declare const Minus: ({ height, width, fill, title }: IconProps) => JSX.Element;
 
-declare const Plus: ({ height, width, fill, title }: IconProps$1) => JSX.Element;
+declare const Plus: ({ height, width, fill, title }: IconProps) => JSX.Element;
 
-declare const Rule: ({ width, height, fill }: IconProps$1) => JSX.Element;
+declare const Rule: ({ width, height, fill }: IconProps) => JSX.Element;
 
-declare const Star: ({ height, width, fill }: IconProps$1) => JSX.Element;
+declare const Star: ({ height, width, fill }: IconProps) => JSX.Element;
 
-declare const StarEmpty: ({ height, width, fill }: IconProps$1) => JSX.Element;
+declare const StarEmpty: ({ height, width, fill }: IconProps) => JSX.Element;
 
-declare const StarHalf: ({ height, width, fill }: IconProps$1) => JSX.Element;
+declare const StarHalf: ({ height, width, fill }: IconProps) => JSX.Element;
 
-declare const Stopwatch: ({ height, width, fill, title }: IconProps$1) => JSX.Element;
+declare const Stopwatch: ({ height, width, fill, title }: IconProps) => JSX.Element;
 
-declare const Shipping: ({ height, width, fill }: IconProps$1) => JSX.Element;
+declare const Shipping: ({ height, width, fill }: IconProps) => JSX.Element;
 
 declare const PDP_Clock: typeof Clock;
 declare const PDP_FlagUSA: typeof FlagUSA;
@@ -258,19 +257,19 @@ declare namespace PDP {
   };
 }
 
-declare const Facebook: ({ height, width, fill }: IconProps$1) => JSX.Element;
+declare const Facebook: ({ height, width, fill }: IconProps) => JSX.Element;
 
-declare const FacebookSolid: ({ height, width, fill }: IconProps$1) => JSX.Element;
+declare const FacebookSolid: ({ height, width, fill }: IconProps) => JSX.Element;
 
-declare const Instagram: ({ height, width, fill }: IconProps$1) => JSX.Element;
+declare const Instagram: ({ height, width, fill }: IconProps) => JSX.Element;
 
-declare const InstagramSolid: ({ height, width, fill }: IconProps$1) => JSX.Element;
+declare const InstagramSolid: ({ height, width, fill }: IconProps) => JSX.Element;
 
-declare const Pinterest: ({ height, width, fill }: IconProps$1) => JSX.Element;
+declare const Pinterest: ({ height, width, fill }: IconProps) => JSX.Element;
 
-declare const Twitter: ({ height, width, fill }: IconProps$1) => JSX.Element;
+declare const Twitter: ({ height, width, fill }: IconProps) => JSX.Element;
 
-declare const Youtube: ({ height, width, fill }: IconProps$1) => JSX.Element;
+declare const Youtube: ({ height, width, fill }: IconProps) => JSX.Element;
 
 declare const SocialMedia_Facebook: typeof Facebook;
 declare const SocialMedia_FacebookSolid: typeof FacebookSolid;
@@ -291,61 +290,70 @@ declare namespace SocialMedia {
   };
 }
 
-declare const Search: ({ height, width, fill }: IconProps$1) => JSX.Element;
+declare const Search: ({ height, width, fill }: IconProps) => JSX.Element;
+
+declare const User: ({ height, width, fill }: IconProps) => JSX.Element;
 
-declare const User: ({ height, width, fill }: IconProps$1) => JSX.Element;
+declare const ShoppingBag: ({ height, width, fill }: IconProps) => JSX.Element;
 
-declare const ShoppingBag: ({ height, width, fill }: IconProps$1) => JSX.Element;
+declare const ShoppingCart: FC<IconProps>;
 
-declare const MapMarker: ({ height, width, fill }: IconProps$1) => JSX.Element;
+declare const MapMarker: ({ height, width, fill }: IconProps) => JSX.Element;
+
+declare const Hamburger: FC<IconProps>;
 
 declare const Navigation_Search: typeof Search;
 declare const Navigation_User: typeof User;
 declare const Navigation_ShoppingBag: typeof ShoppingBag;
+declare const Navigation_ShoppingCart: typeof ShoppingCart;
 declare const Navigation_MapMarker: typeof MapMarker;
+declare const Navigation_Hamburger: typeof Hamburger;
 declare namespace Navigation {
   export {
     Navigation_Search as Search,
     Navigation_User as User,
     Navigation_ShoppingBag as ShoppingBag,
+    Navigation_ShoppingCart as ShoppingCart,
     Navigation_MapMarker as MapMarker,
+    Navigation_Hamburger as Hamburger,
   };
 }
 
-declare const QuestionCircle: ({ height, width, fill }: IconProps$1) => JSX.Element;
+declare const QuestionCircle: ({ height, width, fill }: IconProps) => JSX.Element;
 
-declare const Messenger: ({ height, width, fill }: IconProps$1) => JSX.Element;
+declare const Messenger: ({ height, width, fill }: IconProps) => JSX.Element;
 
-declare const Comment: ({ height, width, fill }: IconProps$1) => JSX.Element;
+declare const Comment: ({ height, width, fill }: IconProps) => JSX.Element;
 
-interface IconProps {
+interface IconWrapperProps {
     width?: number;
     height?: number;
-    fill?: string;
     title?: string;
-}
-declare const Message: ({ height, width, fill }: IconProps) => JSX.Element;
+    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_Message: typeof Message;
 declare const Messaging_Mail: typeof Mail;
 declare namespace Messaging {
   export {
     Messaging_QuestionCircle as QuestionCircle,
     Messaging_Messenger as Messenger,
     Messaging_Comment as Comment,
-    Messaging_Message as Message,
     Messaging_Mail as Mail,
   };
 }
 
-declare const AppleStore: ({ height, width }: IconProps$1) => JSX.Element;
+declare const AppleStore: ({ height, width }: IconProps) => JSX.Element;
 
-declare const GooglePlay: ({ height, width }: IconProps$1) => JSX.Element;
+declare const GooglePlay: ({ height, width }: IconProps) => JSX.Element;
 
 declare const Download_AppleStore: typeof AppleStore;
 declare const Download_GooglePlay: typeof GooglePlay;
@@ -356,23 +364,23 @@ declare namespace Download {
   };
 }
 
-declare const Visa: ({ height, width }: IconProps$1) => JSX.Element;
+declare const Visa: ({ height, width }: IconProps) => JSX.Element;
 
-declare const MasterCard: ({ height, width }: IconProps$1) => JSX.Element;
+declare const MasterCard: ({ height, width }: IconProps) => JSX.Element;
 
-declare const AMEX: ({ height, width }: IconProps$1) => JSX.Element;
+declare const Amex: ({ height, width }: IconProps) => JSX.Element;
 
-declare const JCB: ({ height, width }: IconProps$1) => JSX.Element;
+declare const JCB: ({ height, width }: IconProps) => JSX.Element;
 
-declare const Paypal: ({ height, width }: IconProps$1) => JSX.Element;
+declare const Paypal: ({ height, width }: IconProps) => JSX.Element;
 
-declare const Klarna: ({ height, width }: IconProps$1) => JSX.Element;
+declare const Klarna: ({ height, width }: IconProps) => JSX.Element;
 
-declare const Amazon: ({ height, width }: IconProps$1) => JSX.Element;
+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;
@@ -381,7 +389,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,
@@ -398,7 +406,7 @@ declare namespace SlideDots {
   };
 }
 
-declare type IconType = ({ height, width, fill }: IconProps$1) => JSX.Element;
+declare type IconType = ({ height, width, fill }: IconProps) => JSX.Element;
 declare const Icon: {
     Custom: typeof Custom;
     Arrows: typeof Arrows;
@@ -444,23 +452,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;
@@ -487,6 +499,7 @@ interface BaseButtonProps {
     type?: ButtonType;
     onClick: () => void;
     className?: string;
+    inline?: boolean;
 }
 
 declare type BaseProps = Pick<BaseButtonProps, 'disabled' | 'type' | 'onClick'>;
@@ -599,892 +612,1005 @@ 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;
+    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 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;
-            };
-        };
+    quantity?: number;
+    price: Price;
+    tag?: {
+        text: string;
+        backgroundColor: string;
     };
-    input: {
-        background: string;
+}
+declare const SimpleOrderItem: ({ title, subtitle, image, price, tag, quantity, }: 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 type ModalProps = {
+    id: string;
+    dismissable?: boolean;
+};
+declare const Overlay: _emotion_styled.StyledComponent<{
+    theme?: _emotion_react.Theme | undefined;
+    as?: React.ElementType<any> | undefined;
+} & {
+    opened?: boolean | undefined;
+}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+declare const Modal: FC<ModalProps>;
+declare type ModalEventDetail = {
+    id: string;
+    type: 'open' | 'close';
+};
+declare const modalEvent: (id: string, detail: Omit<ModalEventDetail, 'id'>) => void;
+declare global {
+    interface WindowEventMap {
+        modal: CustomEvent<ModalEventDetail>;
+    }
+}
+
+interface CloseButtonProps {
+    onClick: () => void;
+}
+
+interface DescriptionProps {
+    text: string;
+}
+
+interface PromoProps {
+    text: string;
+}
+
+interface TitleProps {
+    title: string;
+}
+
+declare const CartProductItem: {
+    Title: ({ title }: TitleProps) => JSX.Element;
+    Tag: ({ discountAppliedText, backgroundColor }: OfferBannerProps) => JSX.Element;
+    Promo: ({ text }: PromoProps) => JSX.Element;
+    Description: ({ text }: DescriptionProps) => JSX.Element;
+    CloseButton: ({ onClick }: CloseButtonProps) => JSX.Element;
 };
 
+declare type QuantityPickerPropsOnChange = (value: number) => void;
+declare type QuantityPickerPropsControlled = {
+    value: number;
+    onChange: QuantityPickerPropsOnChange;
+};
+declare type QuantityPickerPropsUncontrolled = {
+    value?: never;
+    onChange?: QuantityPickerPropsOnChange;
+};
+declare type QuantityPickerProps = {
+    initialValue?: number;
+    maxValue?: number;
+} & (QuantityPickerPropsControlled | QuantityPickerPropsUncontrolled);
+declare const QuantityPicker: ({ initialValue, maxValue, value, onChange, }: QuantityPickerProps) => JSX.Element;
+
 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;
@@ -1492,4 +1618,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$1 as 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, CartProductItem, CategoryTag, Checkbox, Collection, Color, ColorPickerOption, ComponentPosition, ComponentSize, index_d as CrossSell, DeliveryDetails, DiscountTag, Drawer, DropdownListIcons, DropdownListIconsItem, DropdownListIconsSubItem, DropdownOption, Filter, FilterChange, FilteringDropdown, Tags as FilteringTags, FitPredictor, Icon, IconButton, IconProps, IconWithOpacityProps, Image, ImageType, Input, InputValidationType, Modal, MultiColorPicker, OfferBanner, OrderBar, Overlay, Pagination, Pattern, PaymentMethod, PaypalButton, Portal, PriceLabel, ProductGallery, ProductGalleryMobile, ProgressBar, QuantityPicker, RadioGroupInput, RadioGroupOption, RadioInput, Rating, Review, ScrollToTop, SearchBar, SearchBarOptionItem, SeasonOfferTag, SimpleDropdown, SimpleOrderItem, SingleColorPicker, SizeFitGuide, SizeOption, SizeSelector, SizeTable, SliderNavigation, Spinner, StarList, Text, TextButton, Theme, ThemeAssets, ThemeBasicPallete, ThemeBreakpoints, ThemeColorPallete, ThemeColors, ThemeComponent, ThemeFonts, ThemeProvider, ThemeTypography, ThemeVariables, Timer, Tooltip, Totals, WithTestId, modalEvent, useOnClickOutside, useTheme, useThemeAssets, useWindowDimensions };