@trafilea/afrodita-components 2.3.1 → 3.0.0

package/build/index.css

@@ -1,324 +1,2 @@
-/* Slider */
-.slick-slider
-{
-    position: relative;
-
-    display: block;
-    box-sizing: border-box;
-
-    -webkit-user-select: none;
-       -moz-user-select: none;
-        -ms-user-select: none;
-            user-select: none;
-
-    -webkit-touch-callout: none;
-    -khtml-user-select: none;
-    -ms-touch-action: pan-y;
-        touch-action: pan-y;
-    -webkit-tap-highlight-color: transparent;
-}
-
-.slick-list
-{
-    position: relative;
-
-    display: block;
-    overflow: hidden;
-
-    margin: 0;
-    padding: 0;
-}
-.slick-list:focus
-{
-    outline: none;
-}
-.slick-list.dragging
-{
-    cursor: pointer;
-    cursor: hand;
-}
-
-.slick-slider .slick-track,
-.slick-slider .slick-list
-{
-    -webkit-transform: translate3d(0, 0, 0);
-       -moz-transform: translate3d(0, 0, 0);
-        -ms-transform: translate3d(0, 0, 0);
-         -o-transform: translate3d(0, 0, 0);
-            transform: translate3d(0, 0, 0);
-}
-
-.slick-track
-{
-    position: relative;
-    top: 0;
-    left: 0;
-
-    display: block;
-    margin-left: auto;
-    margin-right: auto;
-}
-.slick-track:before,
-.slick-track:after
-{
-    display: table;
-
-    content: '';
-}
-.slick-track:after
-{
-    clear: both;
-}
-.slick-loading .slick-track
-{
-    visibility: hidden;
-}
-
-.slick-slide
-{
-    display: none;
-    float: left;
-
-    height: 100%;
-    min-height: 1px;
-}
-[dir='rtl'] .slick-slide
-{
-    float: right;
-}
-.slick-slide img
-{
-    display: block;
-}
-.slick-slide.slick-loading img
-{
-    display: none;
-}
-.slick-slide.dragging img
-{
-    pointer-events: none;
-}
-.slick-initialized .slick-slide
-{
-    display: block;
-}
-.slick-loading .slick-slide
-{
-    visibility: hidden;
-}
-.slick-vertical .slick-slide
-{
-    display: block;
-
-    height: auto;
-
-    border: 1px solid transparent;
-}
-.slick-arrow.slick-hidden {
-    display: none;
-}
-
-@charset 'UTF-8';
-/* Slider */
-.slick-loading .slick-list
-{
-    background: #fff url('./ajax-loader.gif') center center no-repeat;
-}
-
-/* Icons */
-@font-face
-{
-    font-family: 'slick';
-    font-weight: normal;
-    font-style: normal;
-
-    src: url('./fonts/slick.eot');
-    src: url('./fonts/slick.eot?#iefix') format('embedded-opentype'), url('./fonts/slick.woff') format('woff'), url('./fonts/slick.ttf') format('truetype'), url('./fonts/slick.svg#slick') format('svg');
-}
-/* Arrows */
-.slick-prev,
-.slick-next
-{
-    font-size: 0;
-    line-height: 0;
-
-    position: absolute;
-    top: 50%;
-
-    display: block;
-
-    width: 20px;
-    height: 20px;
-    padding: 0;
-    -webkit-transform: translate(0, -50%);
-    -ms-transform: translate(0, -50%);
-    transform: translate(0, -50%);
-
-    cursor: pointer;
-
-    color: transparent;
-    border: none;
-    outline: none;
-    background: transparent;
-}
-.slick-prev:hover,
-.slick-prev:focus,
-.slick-next:hover,
-.slick-next:focus
-{
-    color: transparent;
-    outline: none;
-    background: transparent;
-}
-.slick-prev:hover:before,
-.slick-prev:focus:before,
-.slick-next:hover:before,
-.slick-next:focus:before
-{
-    opacity: 1;
-}
-.slick-prev.slick-disabled:before,
-.slick-next.slick-disabled:before
-{
-    opacity: .25;
-}
-
-.slick-prev:before,
-.slick-next:before
-{
-    font-family: 'slick';
-    font-size: 20px;
-    line-height: 1;
-
-    opacity: .75;
-    color: white;
-
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-}
-
-.slick-prev
-{
-    left: -25px;
-}
-[dir='rtl'] .slick-prev
-{
-    right: -25px;
-    left: auto;
-}
-.slick-prev:before
-{
-    content: '←';
-}
-[dir='rtl'] .slick-prev:before
-{
-    content: '→';
-}
-
-.slick-next
-{
-    right: -25px;
-}
-[dir='rtl'] .slick-next
-{
-    right: auto;
-    left: -25px;
-}
-.slick-next:before
-{
-    content: '→';
-}
-[dir='rtl'] .slick-next:before
-{
-    content: '←';
-}
-
-/* Dots */
-.slick-dotted.slick-slider
-{
-    margin-bottom: 30px;
-}
-
-.slick-dots
-{
-    position: absolute;
-    bottom: -25px;
-
-    display: block;
-
-    width: 100%;
-    padding: 0;
-    margin: 0;
-
-    list-style: none;
-
-    text-align: center;
-}
-.slick-dots li
-{
-    position: relative;
-
-    display: inline-block;
-
-    width: 20px;
-    height: 20px;
-    margin: 0 5px;
-    padding: 0;
-
-    cursor: pointer;
-}
-.slick-dots li button
-{
-    font-size: 0;
-    line-height: 0;
-
-    display: block;
-
-    width: 20px;
-    height: 20px;
-    padding: 5px;
-
-    cursor: pointer;
-
-    color: transparent;
-    border: 0;
-    outline: none;
-    background: transparent;
-}
-.slick-dots li button:hover,
-.slick-dots li button:focus
-{
-    outline: none;
-}
-.slick-dots li button:hover:before,
-.slick-dots li button:focus:before
-{
-    opacity: 1;
-}
-.slick-dots li button:before
-{
-    font-family: 'slick';
-    font-size: 6px;
-    line-height: 20px;
-
-    position: absolute;
-    top: 0;
-    left: 0;
-
-    width: 20px;
-    height: 20px;
-
-    content: '•';
-    text-align: center;
-
-    opacity: .25;
-    color: black;
-
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-}
-.slick-dots li.slick-active button:before
-{
-    opacity: .75;
-    color: black;
-}
+.slick-slider{position:relative;display:block;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none;-khtml-user-select:none;-ms-touch-action:pan-y;touch-action:pan-y;-webkit-tap-highlight-color:transparent;}.slick-list{position:relative;display:block;overflow:hidden;margin:0;padding:0;}.slick-list:focus{outline:none;}.slick-list.dragging{cursor:pointer;cursor:hand;}.slick-slider .slick-track,.slick-slider .slick-list{-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);transform:translate3d(0,0,0);}.slick-track{position:relative;top:0;left:0;display:block;margin-left:auto;margin-right:auto;}.slick-track:before,.slick-track:after{display:table;content:'';}.slick-track:after{clear:both;}.slick-loading .slick-track{visibility:hidden;}.slick-slide{display:none;float:left;height:100%;min-height:0.063rem;}[dir='rtl'] .slick-slide{float:right;}.slick-slide img{display:block;}.slick-slide.slick-loading img{display:none;}.slick-slide.dragging img{pointer-events:none;}.slick-initialized .slick-slide{display:block;}.slick-loading .slick-slide{visibility:hidden;}.slick-vertical .slick-slide{display:block;height:auto;border:0.063rem solid transparent;}.slick-arrow.slick-hidden{display:none;}
+.slick-prev,.slick-next{font-size:0;line-height:0;position:absolute;top:50%;display:block;width:1.25rem;height:1.25rem;padding:0;-webkit-transform:translate(0,-50%);-ms-transform:translate(0,-50%);transform:translate(0,-50%);cursor:pointer;color:transparent;border:none;outline:none;background:transparent;}.slick-prev:hover,.slick-prev:focus,.slick-next:hover,.slick-next:focus{color:transparent;outline:none;background:transparent;}.slick-prev:hover:before,.slick-prev:focus:before,.slick-next:hover:before,.slick-next:focus:before{opacity:1;}.slick-prev.slick-disabled:before,.slick-next.slick-disabled:before{opacity:0.25;}.slick-prev:before,.slick-next:before{font-family:'slick';font-size:1.25rem;line-height:1;opacity:0.75;color:white;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}.slick-prev{left:-1.5rem;}[dir='rtl'] .slick-prev{right:-1.5rem;left:auto;}.slick-prev:before{content:'←';}[dir='rtl'] .slick-prev:before{content:'→';}.slick-next{right:-1.5rem;}[dir='rtl'] .slick-next{right:auto;left:-1.5rem;}.slick-next:before{content:'→';}[dir='rtl'] .slick-next:before{content:'←';}.slick-dotted.slick-slider{margin-bottom:1.875rem;}.slick-dots{position:absolute;bottom:-1.5rem;display:block;width:100%;padding:0;margin:0;list-style:none;text-align:center;}.slick-dots li{position:relative;display:inline-block;width:1.25rem;height:1.25rem;margin:0 0.313rem;padding:0;cursor:pointer;}.slick-dots li button{font-size:0;line-height:0;display:block;width:1.25rem;height:1.25rem;padding:0.313rem;cursor:pointer;color:transparent;border:0;outline:none;background:transparent;}.slick-dots li button:hover,.slick-dots li button:focus{outline:none;}.slick-dots li button:hover:before,.slick-dots li button:focus:before{opacity:1;}.slick-dots li button:before{font-family:'slick';font-size:0.375rem;line-height:1.25rem;position:absolute;top:0;left:0;width:1.25rem;height:1.25rem;content:'•';text-align:center;opacity:0.25;color:black;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}.slick-dots li.slick-active button:before{opacity:0.75;color:black;}

package/build/index.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 import React, { ReactNode, ElementType } 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';
 
 declare const SixtyDaysGuarantee: ({ height, width, fill, title }: IconProps) => JSX.Element;
 
@@ -24,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,
@@ -38,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,
   };
 }
 
@@ -50,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,
   };
 }
 
@@ -68,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;
@@ -77,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;
@@ -85,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,
@@ -300,47 +317,114 @@ declare enum InputValidationType {
 }
 
 interface Theme {
-    palette: {
-        primary: {
-            default: string;
-            hover: string;
-            pressed: string;
+    name: string;
+    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: {
+            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: {
             bold: 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;
+            };
+        };
+    };
 }
 interface IconProps {
     width?: number;
@@ -404,6 +488,17 @@ declare type DropdownListIconsItem = {
 declare type DropdownListIconsSubItem = {
     description: string;
     callback: () => void;
+};
+declare type Filter = {
+    title: string;
+    columns: number;
+    isOpenByDefault?: boolean;
+    items: Array<string>;
+};
+declare type FilterChange = {
+    sectionIndex: number;
+    itemIndex: number;
+    checked?: boolean;
 };
 
 interface ThemeProviderProps {
@@ -959,4 +1054,61 @@ declare namespace index_d {
   };
 }
 
-export { _default as Accordion, AccordionBox, AccordionIcon, AmazonPaypalButtons_d as AmazonAndPaypalButtons, Bundle, ButtonPrimary, ButtonSecondary, ButtonSecondaryOutline, ButtonType, CTAProps, _default$1 as Card, CardSectionType, CategoryTag, Checkbox, 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 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) => _emotion_react_jsx_runtime.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;
+
+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, Drawer, DropdownListIcons, DropdownListIconsItem, DropdownListIconsSubItem, DropdownOption, Filter, FilterChange, 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 };