@trafilea/afrodita-components 2.3.2 → 3.0.1-beta.0

package/build/index.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import React, { ReactNode, ElementType } from 'react';
+import React, { ReactNode } 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';
 
@@ -25,12 +25,18 @@ declare const LightCheck: ({ height, width, fill, strokeWidth }: LightCheckProps
 
 declare const Question: ({ height, width, fill }: IconProps) => JSX.Element;
 
+declare const Close: ({ height, width, fill }: IconProps) => JSX.Element;
+
+declare const Trash: ({ height, width, fill }: IconProps) => JSX.Element;
+
 declare const Actions_Check: typeof Check;
 declare const Actions_ClearLight: typeof ClearLight;
 declare const Actions_LightExclamation: typeof LightExclamation;
 type Actions_LightCheckProps = LightCheckProps;
 declare const Actions_LightCheck: typeof LightCheck;
 declare const Actions_Question: typeof Question;
+declare const Actions_Close: typeof Close;
+declare const Actions_Trash: typeof Trash;
 declare namespace Actions {
   export {
     Actions_Check as Check,
@@ -39,6 +45,8 @@ declare namespace Actions {
     Actions_LightCheckProps as LightCheckProps,
     Actions_LightCheck as LightCheck,
     Actions_Question as Question,
+    Actions_Close as Close,
+    Actions_Trash as Trash,
   };
 }
 
@@ -51,15 +59,19 @@ declare const Loading: ({ height, width, fill, backgroundColor }: LoadingProps)
 
 declare const Shapermint: ({ height, width }: IconProps) => JSX.Element;
 
+declare const McAfee: ({ height, width }: IconProps) => JSX.Element;
+
 type Other_LoadingProps = LoadingProps;
 declare const Other_Loading: typeof Loading;
 declare const Other_Shapermint: typeof Shapermint;
+declare const Other_McAfee: typeof McAfee;
 declare namespace Other {
   export {
     FitPredictor$1 as FitPredictor,
     Other_LoadingProps as LoadingProps,
     Other_Loading as Loading,
     Other_Shapermint as Shapermint,
+    Other_McAfee as McAfee,
   };
 }
 
@@ -69,6 +81,8 @@ declare const ChevronLeft: ({ height, width, fill, opacity }: IconWithOpacityPro
 
 declare const ChevronRight: ({ height, width, fill, opacity }: IconWithOpacityProps) => JSX.Element;
 
+declare const ChevronRightVariant: ({ height, width, fill }: IconProps) => JSX.Element;
+
 declare const ChevronUp: ({ height, width, fill }: IconProps) => JSX.Element;
 
 declare const ChevronUpSolid: ({ height, width, fill }: IconProps) => JSX.Element;
@@ -78,6 +92,7 @@ declare const CircleUp: ({ width, height, fill }: IconProps) => JSX.Element;
 declare const Arrows_ChevronDown: typeof ChevronDown;
 declare const Arrows_ChevronLeft: typeof ChevronLeft;
 declare const Arrows_ChevronRight: typeof ChevronRight;
+declare const Arrows_ChevronRightVariant: typeof ChevronRightVariant;
 declare const Arrows_ChevronUp: typeof ChevronUp;
 declare const Arrows_ChevronUpSolid: typeof ChevronUpSolid;
 declare const Arrows_CircleUp: typeof CircleUp;
@@ -86,6 +101,7 @@ declare namespace Arrows {
     Arrows_ChevronDown as ChevronDown,
     Arrows_ChevronLeft as ChevronLeft,
     Arrows_ChevronRight as ChevronRight,
+    Arrows_ChevronRightVariant as ChevronRightVariant,
     Arrows_ChevronUp as ChevronUp,
     Arrows_ChevronUpSolid as ChevronUpSolid,
     Arrows_CircleUp as CircleUp,
@@ -283,10 +299,10 @@ declare enum CardSectionType {
     Footer = 1
 }
 declare enum ComponentSize {
-    Large = 0,
-    Medium = 1,
-    Small = 2,
-    XSmall = 3
+    Large = "large",
+    Medium = "medium",
+    Small = "small",
+    XSmall = "xsmall"
 }
 declare enum ComponentPosition {
     Top = 0,
@@ -301,45 +317,318 @@ declare enum InputValidationType {
 }
 
 interface Theme {
-    palette: {
-        primary: {
-            default: string;
-            hover: string;
-            pressed: string;
+    name: string;
+    fontSizes: number[];
+    fontWeights: number[];
+    lineHeights: number[];
+    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;
         };
-        secondary: {
-            default: string;
-            hover: string;
-            pressed: string;
+        border: {
+            disabled: string;
+            highlight: string;
+        };
+        background: {
+            disabled: string;
+        };
+        text: {
+            body: string;
+            disabled: string;
         };
-    };
-    shades: {
-        white: string;
-        gray010: string;
-        gray050: string;
-        gray100: string;
-        gray150: string;
-        gray200: string;
-        gray250: string;
-        gray300: string;
-        gray350: string;
-        gray400: string;
-        gray450: string;
-        gray500: string;
-        gray550: string;
-        gray600: string;
-        gray650: string;
-        gray700: string;
-        gray750: string;
-        gray800: string;
-        gray850: string;
-        gray900: string;
-        gray950: string;
-        gray990: 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;
+            };
         };
     };
 }
@@ -405,6 +694,17 @@ declare type DropdownListIconsItem = {
 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 ThemeProviderProps {
@@ -432,7 +732,7 @@ interface CardProps {
     border?: borderProps;
     flex?: boolean;
 }
-declare const _default$1: (({ children, backgroundColor, widthAuto, border, flex }: CardProps) => JSX.Element) & {
+declare const _default: (({ children, backgroundColor, widthAuto, border, flex }: CardProps) => JSX.Element) & {
     Header: ({ children }: CardSectionProps) => JSX.Element;
     Footer: ({ children }: CardSectionProps) => JSX.Element;
     Body: ({ children }: CardBodyProps) => JSX.Element;
@@ -444,12 +744,13 @@ declare const ButtonSecondary: ({ text, onClick, disabled, wide, size }: CTAProp
 
 declare const ButtonSecondaryOutline: ({ text, onClick, disabled, wide, size, className, }: CTAProps) => _emotion_react_jsx_runtime.JSX.Element;
 
-declare type CommonProps$2<T> = {
+declare type CommonProps<T> = {
     options: DropdownOption<T>[];
     disabled?: boolean;
     wide?: boolean;
     onChange: (option: DropdownOption<T>) => void;
     label?: string;
+    sort?: boolean;
 };
 declare type ConditionalProps<T> = {
     initialValue: DropdownOption<T>;
@@ -458,8 +759,8 @@ declare type ConditionalProps<T> = {
     initialValue?: undefined;
     placeHolder: string;
 };
-declare type SimpleDropdownProps<T> = CommonProps$2<T> & ConditionalProps<T>;
-declare function SimpleDropdown<T>({ options, disabled, initialValue, placeHolder, label, wide, onChange, }: SimpleDropdownProps<T>): JSX.Element;
+declare type SimpleDropdownProps<T> = CommonProps<T> & ConditionalProps<T>;
+declare function SimpleDropdown<T>({ options, disabled, initialValue, placeHolder, label, wide, sort, onChange, }: SimpleDropdownProps<T>): JSX.Element;
 
 interface SizeSelectorProps {
     sizes: SizeOption[];
@@ -548,7 +849,7 @@ interface RatingProps {
     reviews: number;
     reviewsText: string;
 }
-declare const Rating: ({ size, reviews, reviewsText, rating, }: RatingProps) => _emotion_react_jsx_runtime.JSX.Element;
+declare const Rating: ({ size, reviews, reviewsText, rating, }: RatingProps) => JSX.Element;
 
 interface FitPredictorProps {
     onClick: () => void;
@@ -584,65 +885,16 @@ interface TooltipProps {
 }
 declare const Tooltip: ({ children, position, text, align, onClick, header, }: TooltipProps) => JSX.Element;
 
-interface CommonProps$1 {
-    children: React.ReactNode;
-}
-declare type InternalProps = {
-    staticProp?: boolean;
-    unmount?: never;
-} | {
-    staticProp?: never;
-    unmount?: boolean;
-};
-declare type StyleProps$1 = {
-    as: ElementType<any>;
-    className?: string;
-} | {
-    as?: undefined;
-    className?: never;
-};
-declare type AccordionPanelProps = CommonProps$1 & InternalProps & StyleProps$1;
-
-interface AccordionButtonProps {
-    disabled?: boolean;
-    as?: ElementType<any>;
-    className?: string;
-    children: ReactNode;
-}
-
-interface CommonProps {
-    children: React.ReactNode;
-    defaultOpen?: boolean;
-}
-declare type StyleProps = {
-    as: ElementType<any>;
-    className?: string;
-} | {
-    as?: undefined;
-    className?: never;
-};
-declare type AccordionProps = CommonProps & StyleProps;
-declare const _default: (({ defaultOpen, as, className, children }: AccordionProps) => _emotion_react_jsx_runtime.JSX.Element) & {
-    Button: ({ disabled, as, className, children }: AccordionButtonProps) => _emotion_react_jsx_runtime.JSX.Element;
-    Panel: ({ as, staticProp, unmount, children, className }: AccordionPanelProps) => _emotion_react_jsx_runtime.JSX.Element;
-};
-
-interface AccordionBoxProps {
-    title: string;
-    text: string;
+interface AccordionProps {
     defaultOpen?: boolean;
+    variant: 'simple' | 'box';
+    header: ReactNode;
+    content: ReactNode;
     disabled?: boolean;
+    openIcon: IconType;
+    closeIcon: IconType;
 }
-declare const AccordionBox: ({ title, text, defaultOpen, disabled }: AccordionBoxProps) => JSX.Element;
-
-interface AccordionIconProps {
-    title: string;
-    text: string;
-    leadingIcon: React.ReactNode;
-    defaultOpen?: boolean;
-    disabled?: boolean;
-}
-declare const AccordionIcon: ({ title, text, leadingIcon, defaultOpen, disabled, }: AccordionIconProps) => JSX.Element;
+declare const Accordion: ({ header, content, defaultOpen, variant, disabled, openIcon, closeIcon, }: AccordionProps) => JSX.Element;
 
 interface CheckboxProps {
     disabled?: boolean;
@@ -651,8 +903,10 @@ interface CheckboxProps {
     text: string;
     checked?: boolean;
     id: string;
+    backgroundColor?: string;
+    variant: 'primary' | 'secondary';
 }
-declare const Checkbox: ({ disabled, onChange, size, text, checked, id, }: CheckboxProps) => JSX.Element;
+declare const Checkbox: ({ disabled, onChange, size, text, checked, id, variant, }: CheckboxProps) => JSX.Element;
 
 interface RadioGroupInputProps {
     name: string;
@@ -986,4 +1240,53 @@ declare const Collection: {
     withProductGrid: typeof withProductGrid;
 };
 
-export { _default as Accordion, AccordionBox, AccordionIcon, AmazonPaypalButtons_d as AmazonAndPaypalButtons, Bundle, ButtonPrimary, ButtonSecondary, ButtonSecondaryOutline, ButtonType, CTAProps, _default$1 as Card, CardSectionType, CategoryTag, Checkbox, Collection, Color, ColorPickerOption, ComponentPosition, ComponentSize, index_d as CrossSell, DeliveryDetails, DiscountTag, DropdownListIcons, DropdownListIconsItem, DropdownListIconsSubItem, DropdownOption, FitPredictor, Icon, IconButton, IconProps, IconWithOpacityProps, Image, ImageType, index_d$1 as Input, InputValidationType, MultiColorPicker, OfferBanner, OrderBar, Pattern, PaymentMethod, PriceLabel, ProductGallery, ProgressBar, RadioGroupInput, RadioGroupOption, Rating, Review, ScrollToTop, SeasonOfferTag, SimpleDropdown, SimpleOrderItem, SingleColorPicker, SizeFitGuide, SizeOption, SizeSelector, SizeTable, SliderNavigation, TextButton, Theme, ThemeProvider, Timer, Tooltip, Totals, WithTestId };
+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 function FilteringDropdown<T>({ options, disabled, placeHolder, wide, sliceAfter, filter, onChange, }: FilteringDropdownProps<T>): JSX.Element;
+
+export { Accordion, AmazonPaypalButtons_d as AmazonAndPaypalButtons, 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, index_d$1 as Input, InputValidationType, MultiColorPicker, OfferBanner, OrderBar, Pattern, PaymentMethod, PriceLabel, ProductGallery, ProgressBar, RadioGroupInput, RadioGroupOption, Rating, Review, ScrollToTop, SeasonOfferTag, SimpleDropdown, SimpleOrderItem, SingleColorPicker, SizeFitGuide, SizeOption, SizeSelector, SizeTable, SliderNavigation, Spinner, StarList, TextButton, Theme, ThemeProvider, Timer, Tooltip, Totals, WithTestId };