@trafilea/afrodita-components 3.0.8-beta.0 → 4.0.1-beta.2

package/build/index.d.ts

@@ -1,8 +1,111 @@
 /// <reference types="react" />
-import React, { ReactNode, FC, AriaAttributes, CSSProperties, AnchorHTMLAttributes, LabelHTMLAttributes, RefObject } from 'react';
+import React, { ReactNode, FC, AriaAttributes, CSSProperties, AnchorHTMLAttributes, LabelHTMLAttributes, ElementType, 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, Breakpoints as Breakpoints$1 } from 'src/types/types';
+import { SearchBarOptionItem as SearchBarOptionItem$1 } from 'src/types/types';
+import { ThemeBreakpoints as ThemeBreakpoints$1 } from 'src/core/theme/Theme';
+
+declare enum CardSectionType {
+    Header = 0,
+    Footer = 1
+}
+declare enum ComponentSize {
+    Large = "large",
+    Medium = "medium",
+    Small = "small",
+    XSmall = "xsmall"
+}
+declare enum ComponentPosition {
+    Top = 0,
+    Bottom = 1,
+    Left = 2,
+    Right = 3
+}
+declare enum InputValidationType {
+    Error = 0,
+    Valid = 1,
+    Empty = 2
+}
+
+interface IconProps {
+    width?: number;
+    height?: number;
+    fill?: string;
+    title?: string;
+}
+declare type ButtonType = 'button' | 'submit' | 'reset';
+interface CTAProps {
+    onClick: () => void;
+    disabled?: boolean;
+    wide?: boolean | false;
+    size?: ComponentSize;
+    text: string;
+    type?: ButtonType;
+    className?: string;
+}
+declare type DropdownOption<T> = {
+    key: string;
+    label: string;
+    value: T;
+    disabled: boolean;
+};
+declare type SizeOption = {
+    label: string;
+    description: string;
+    disabled?: boolean;
+};
+declare type Color = {
+    primaryColor: string;
+    secondaryColor?: string;
+    tertiaryColor?: string;
+};
+declare type Pattern = {
+    url: string;
+};
+declare type ColorPickerOption = {
+    label: string;
+    color?: Color;
+    pattern?: Pattern;
+};
+declare type RadioGroupOption = {
+    value: string;
+    label: string;
+};
+declare type ImageType = {
+    key: string;
+    imageUrl: string;
+    alt: string;
+};
+interface IconWithOpacityProps extends IconProps {
+    opacity?: number;
+}
+interface WithTestId {
+    dataTestId?: string;
+}
+declare type DropdownListIconsItem = {
+    Icon: IconType;
+    items: DropdownListIconsSubItem[];
+};
+declare type DropdownListIconsSubItem = {
+    description: string;
+    callback: () => void;
+};
+declare type Filter = {
+    title: string;
+    columns: number;
+    isOpenByDefault?: boolean;
+    items: string[];
+};
+declare type FilterChange = {
+    sectionIndex: number;
+    itemIndex: number;
+    checked?: boolean;
+};
+interface SearchBarOptionItem {
+    src: string;
+    price: string;
+    title: string;
+}
 
 declare const SixtyDaysGuarantee: ({ height, width, fill, title }: IconProps) => JSX.Element;
 
@@ -199,530 +302,101 @@ declare const Navigation_Search: typeof Search;
 declare const Navigation_User: typeof User;
 declare const Navigation_ShoppingBag: typeof ShoppingBag;
 declare const Navigation_MapMarker: typeof MapMarker;
-declare namespace Navigation {
-  export {
-    Navigation_Search as Search,
-    Navigation_User as User,
-    Navigation_ShoppingBag as ShoppingBag,
-    Navigation_MapMarker as MapMarker,
-  };
-}
-
-declare const QuestionCircle: ({ height, width, fill }: IconProps) => JSX.Element;
-
-declare const Messenger: ({ height, width, fill }: IconProps) => JSX.Element;
-
-declare const Comment: ({ height, width, fill }: IconProps) => JSX.Element;
-
-declare const Messaging_QuestionCircle: typeof QuestionCircle;
-declare const Messaging_Messenger: typeof Messenger;
-declare const Messaging_Comment: typeof Comment;
-declare namespace Messaging {
-  export {
-    Messaging_QuestionCircle as QuestionCircle,
-    Messaging_Messenger as Messenger,
-    Messaging_Comment as Comment,
-  };
-}
-
-declare const AppleStore: ({ height, width }: IconProps) => JSX.Element;
-
-declare const GooglePlay: ({ height, width }: IconProps) => JSX.Element;
-
-declare const Download_AppleStore: typeof AppleStore;
-declare const Download_GooglePlay: typeof GooglePlay;
-declare namespace Download {
-  export {
-    Download_AppleStore as AppleStore,
-    Download_GooglePlay as GooglePlay,
-  };
-}
-
-declare const Visa: ({ height, width }: IconProps) => JSX.Element;
-
-declare const MasterCard: ({ height, width }: IconProps) => JSX.Element;
-
-declare const AMEX: ({ height, width }: IconProps) => JSX.Element;
-
-declare const JCB: ({ height, width }: IconProps) => JSX.Element;
-
-declare const Paypal: ({ height, width }: IconProps) => JSX.Element;
-
-declare const Klarna: ({ height, width }: IconProps) => 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_JCB: typeof JCB;
-declare const Payment_Paypal: typeof Paypal;
-declare const Payment_Klarna: typeof Klarna;
-declare const Payment_Amazon: typeof Amazon;
-declare namespace Payment {
-  export {
-    Payment_Visa as Visa,
-    Payment_MasterCard as MasterCard,
-    Payment_AMEX as AMEX,
-    Payment_JCB as JCB,
-    Payment_Paypal as Paypal,
-    Payment_Klarna as Klarna,
-    Payment_Amazon as Amazon,
-  };
-}
-
-declare const SlideDot: ({ height, width, fill, opacity, dataTestId, }: IconWithOpacityProps & WithTestId) => JSX.Element;
-
-declare const SlideDots_SlideDot: typeof SlideDot;
-declare namespace SlideDots {
-  export {
-    SlideDots_SlideDot as SlideDot,
-  };
-}
-
-declare type IconType = ({ height, width, fill }: IconProps) => JSX.Element;
-declare const Icon: {
-    Custom: typeof Custom;
-    Arrows: typeof Arrows;
-    Actions: typeof Actions;
-    Other: typeof Other;
-    PDP: typeof PDP;
-    SocialMedia: typeof SocialMedia;
-    Navigation: typeof Navigation;
-    Messaging: typeof Messaging;
-    Download: typeof Download;
-    Payment: typeof Payment;
-    SlideDots: typeof SlideDots;
-};
-
-declare enum CardSectionType {
-    Header = 0,
-    Footer = 1
-}
-declare enum ComponentSize {
-    Large = "large",
-    Medium = "medium",
-    Small = "small",
-    XSmall = "xsmall"
-}
-declare enum ComponentPosition {
-    Top = 0,
-    Bottom = 1,
-    Left = 2,
-    Right = 3
-}
-declare enum InputValidationType {
-    Error = 0,
-    Valid = 1,
-    Empty = 2
-}
-
-interface Breakpoints {
-    mobile: number;
-    desktop: number;
-}
-interface Theme {
-    name: string;
-    fontSizes: number[];
-    fontWeights: number[];
-    lineHeights: number[];
-    mediaQueries: Breakpoints;
-    colors: {
-        primary: string;
-        secondary: string;
-        black: string;
-        white: string;
-        neutral10: string;
-        neutral50: string;
-        neutral100: string;
-        neutral150: string;
-        neutral200: string;
-        neutral250: string;
-        neutral300: string;
-        neutral350: string;
-        neutral400: string;
-        neutral450: string;
-        neutral500: string;
-        neutral550: string;
-        neutral600: string;
-        neutral650: string;
-        neutral700: string;
-        neutral750: string;
-        neutral800: string;
-        neutral850: string;
-        neutral900: string;
-        neutral950: string;
-        neutral990: string;
-        semantic: {
-            error: string;
-            success: string;
-        };
-        border: {
-            disabled: string;
-            highlight: string;
-        };
-        background: {
-            disabled: string;
-        };
-        text: {
-            body: string;
-            disabled: string;
-        };
-    };
-    text: {
-        weight: {
-            heavy: number;
-            bold: number;
-            demi: number;
-            medium: number;
-            regular: number;
-        };
-    };
-    component: {
-        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;
-                };
-            };
-        };
-        input: {
-            background: string;
-            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;
-        };
-        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;
-            };
-        };
-    };
-}
-interface IconProps {
-    width?: number;
-    height?: number;
-    fill?: string;
-    title?: string;
-}
-declare type ButtonType = 'button' | 'submit' | 'reset';
-interface CTAProps {
-    onClick: () => void;
-    disabled?: boolean;
-    wide?: boolean | false;
-    size?: ComponentSize;
-    text: string;
-    type?: ButtonType;
-    className?: string;
-}
-declare type DropdownOption<T> = {
-    key: string;
-    label: string;
-    value: T;
-    disabled: boolean;
-};
-declare type SizeOption = {
-    label: string;
-    description: string;
-    disabled?: boolean;
-};
-declare type Color = {
-    primaryColor: string;
-    secondaryColor?: string;
-    tertiaryColor?: string;
-};
-declare type Pattern = {
-    url: string;
-};
-declare type ColorPickerOption = {
-    label: string;
-    color?: Color;
-    pattern?: Pattern;
-};
-declare type RadioGroupOption = {
-    value: string;
-    label: string;
-};
-declare type ImageType = {
-    key: string;
-    imageUrl: string;
-    alt: string;
-};
-interface IconWithOpacityProps extends IconProps {
-    opacity?: number;
-}
-interface WithTestId {
-    dataTestId?: string;
-}
-declare type DropdownListIconsItem = {
-    Icon: IconType;
-    items: DropdownListIconsSubItem[];
-};
-declare type DropdownListIconsSubItem = {
-    description: string;
-    callback: () => void;
-};
-declare type Filter = {
-    title: string;
-    columns: number;
-    isOpenByDefault?: boolean;
-    items: string[];
-};
-declare type FilterChange = {
-    sectionIndex: number;
-    itemIndex: number;
-    checked?: boolean;
-};
-interface SearchBarOptionItem {
-    src: string;
-    price: string;
-    title: string;
+declare namespace Navigation {
+  export {
+    Navigation_Search as Search,
+    Navigation_User as User,
+    Navigation_ShoppingBag as ShoppingBag,
+    Navigation_MapMarker as MapMarker,
+  };
 }
 
-interface ThemeProviderProps {
-    theme: Theme;
-    children: ReactNode;
-}
-declare const ThemeProvider: ({ theme, children }: ThemeProviderProps) => JSX.Element;
+declare const QuestionCircle: ({ height, width, fill }: IconProps) => JSX.Element;
+
+declare const Messenger: ({ height, width, fill }: IconProps) => JSX.Element;
+
+declare const Comment: ({ height, width, fill }: IconProps) => JSX.Element;
+
+declare const Messaging_QuestionCircle: typeof QuestionCircle;
+declare const Messaging_Messenger: typeof Messenger;
+declare const Messaging_Comment: typeof Comment;
+declare namespace Messaging {
+  export {
+    Messaging_QuestionCircle as QuestionCircle,
+    Messaging_Messenger as Messenger,
+    Messaging_Comment as Comment,
+  };
+}
+
+declare const AppleStore: ({ height, width }: IconProps) => JSX.Element;
+
+declare const GooglePlay: ({ height, width }: IconProps) => JSX.Element;
+
+declare const Download_AppleStore: typeof AppleStore;
+declare const Download_GooglePlay: typeof GooglePlay;
+declare namespace Download {
+  export {
+    Download_AppleStore as AppleStore,
+    Download_GooglePlay as GooglePlay,
+  };
+}
+
+declare const Visa: ({ height, width }: IconProps) => JSX.Element;
+
+declare const MasterCard: ({ height, width }: IconProps) => JSX.Element;
+
+declare const AMEX: ({ height, width }: IconProps) => JSX.Element;
+
+declare const JCB: ({ height, width }: IconProps) => JSX.Element;
+
+declare const Paypal: ({ height, width }: IconProps) => JSX.Element;
+
+declare const Klarna: ({ height, width }: IconProps) => 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_JCB: typeof JCB;
+declare const Payment_Paypal: typeof Paypal;
+declare const Payment_Klarna: typeof Klarna;
+declare const Payment_Amazon: typeof Amazon;
+declare namespace Payment {
+  export {
+    Payment_Visa as Visa,
+    Payment_MasterCard as MasterCard,
+    Payment_AMEX as AMEX,
+    Payment_JCB as JCB,
+    Payment_Paypal as Paypal,
+    Payment_Klarna as Klarna,
+    Payment_Amazon as Amazon,
+  };
+}
+
+declare const SlideDot: ({ height, width, fill, opacity, dataTestId, }: IconWithOpacityProps & WithTestId) => JSX.Element;
+
+declare const SlideDots_SlideDot: typeof SlideDot;
+declare namespace SlideDots {
+  export {
+    SlideDots_SlideDot as SlideDot,
+  };
+}
+
+declare type IconType = ({ height, width, fill }: IconProps) => JSX.Element;
+declare const Icon: {
+    Custom: typeof Custom;
+    Arrows: typeof Arrows;
+    Actions: typeof Actions;
+    Other: typeof Other;
+    PDP: typeof PDP;
+    SocialMedia: typeof SocialMedia;
+    Navigation: typeof Navigation;
+    Messaging: typeof Messaging;
+    Download: typeof Download;
+    Payment: typeof Payment;
+    SlideDots: typeof SlideDots;
+};
 
 interface CardBodyProps {
     children: ReactNode;
@@ -1317,7 +991,7 @@ declare type TextDisplayProps = {
 };
 declare type TextHeadingProps = {
     variant: 'heading1' | 'heading2' | 'heading3' | 'heading4' | 'heading5' | 'heading6';
-    weight: 'bold' | 'demi' | 'regular';
+    weight?: 'bold' | 'demi' | 'regular';
     size?: 'regular';
     underline?: never;
     disabled?: never;
@@ -1408,9 +1082,390 @@ interface ProductGalleryMobileProps {
 }
 declare const ProductGalleryMobile: ({ images, selectedValue, DiscountTagElement, BestSellerTagElement, productImageDataTestId, slideDotsDataTestId, }: ProductGalleryMobileProps) => 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 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;
+    };
+    semantic: {
+        positive: ThemeBasicPallete;
+        urgent: ThemeBasicPallete;
+        attention: ThemeBasicPallete;
+        informative: ThemeBasicPallete;
+    };
+    border: {
+        color: string;
+        disabled: string;
+        highlight: string;
+    };
+    background: {
+        color: string;
+        disabled: string;
+    };
+    text: {
+        color: string;
+        disabled: 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;
+            };
+        };
+    };
+    input: {
+        background: string;
+        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;
+    };
+    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 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;
+};
+
 declare const useOnClickOutside: <T extends HTMLElement = HTMLElement>(ref: RefObject<T>, handler: (event: Event) => void) => void;
 
-declare const useWindowDimensions: (breakpoints: Breakpoints$1) => {
+declare const useWindowDimensions: (breakpoints: ThemeBreakpoints$1) => {
     isMobile: boolean;
     windowDimensions: {
         width: number;
@@ -1418,4 +1473,4 @@ declare const useWindowDimensions: (breakpoints: Breakpoints$1) => {
     };
 };
 
-export { Accordion, AmazonButton, Breakpoints, Bundle, ButtonPrimary, ButtonSecondary, ButtonSecondaryOutline, ButtonType, CTAProps, _default as Card, CardSectionType, CategoryTag, Checkbox, Collection, Color, ColorPickerOption, ComponentPosition, ComponentSize, index_d as CrossSell, DeliveryDetails, DiscountTag, Drawer, DropdownListIcons, DropdownListIconsItem, DropdownListIconsSubItem, DropdownOption, Filter, FilterChange, FilteringDropdown, Tags as FilteringTags, FitPredictor, Icon, IconButton, IconProps, IconWithOpacityProps, Image, ImageType, Input, InputValidationType, MultiColorPicker, OfferBanner, OrderBar, Pagination, Pattern, PaymentMethod, PaypalButton, PriceLabel, ProductGallery, ProductGalleryMobile, ProgressBar, RadioGroupInput, RadioGroupOption, Rating, Review, ScrollToTop, SearchBar, SearchBarOptionItem, SeasonOfferTag, SimpleDropdown, SimpleOrderItem, SingleColorPicker, SizeFitGuide, SizeOption, SizeSelector, SizeTable, SliderNavigation, Spinner, StarList, Text, TextButton, Theme, ThemeProvider, Timer, Tooltip, Totals, WithTestId, useOnClickOutside, useWindowDimensions };
+export { Accordion, AmazonButton, AssetsProvider, Bundle, ButtonPrimary, ButtonSecondary, ButtonSecondaryOutline, ButtonType, CTAProps, _default as Card, CardSectionType, CategoryTag, Checkbox, Collection, Color, ColorPickerOption, ComponentPosition, ComponentSize, index_d as CrossSell, DeliveryDetails, DiscountTag, Drawer, DropdownListIcons, DropdownListIconsItem, DropdownListIconsSubItem, DropdownOption, Filter, FilterChange, FilteringDropdown, Tags as FilteringTags, FitPredictor, Icon, IconButton, IconProps, IconWithOpacityProps, Image, ImageType, Input, InputValidationType, MultiColorPicker, OfferBanner, OrderBar, Pagination, Pattern, PaymentMethod, PaypalButton, 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 };