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

package/build/index.d.ts

@@ -2,6 +2,8 @@
 import React, { ReactNode, FC, 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 * as _emotion_styled from '@emotion/styled';
+import * as _emotion_react from '@emotion/react';
 
 declare enum CardSectionType {
     Header = 0,
@@ -25,7 +27,7 @@ declare enum InputValidationType {
     Empty = 2
 }
 
-interface IconProps$1 {
+interface IconProps {
     width?: number;
     height?: number;
     fill?: string;
@@ -74,7 +76,7 @@ declare type ImageType = {
     imageUrl: string;
     alt: string;
 };
-interface IconWithOpacityProps extends IconProps$1 {
+interface IconWithOpacityProps extends IconProps {
     opacity?: number;
 }
 interface WithTestId {
@@ -105,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 {
@@ -114,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;
@@ -152,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;
@@ -177,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;
@@ -210,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;
@@ -255,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;
@@ -288,13 +290,13 @@ 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$1) => JSX.Element;
+declare const User: ({ height, width, fill }: IconProps) => JSX.Element;
 
-declare const ShoppingBag: ({ height, width, fill }: IconProps$1) => JSX.Element;
+declare const ShoppingBag: ({ height, width, fill }: IconProps) => JSX.Element;
 
-declare const MapMarker: ({ height, width, fill }: IconProps$1) => JSX.Element;
+declare const MapMarker: ({ height, width, fill }: IconProps) => JSX.Element;
 
 declare const Navigation_Search: typeof Search;
 declare const Navigation_User: typeof User;
@@ -309,19 +311,11 @@ declare namespace Navigation {
   };
 }
 
-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;
-
-interface IconProps {
-    width?: number;
-    height?: number;
-    fill?: string;
-    title?: string;
-}
-declare const Message: ({ height, width, fill }: IconProps) => JSX.Element;
+declare const Comment: ({ height, width, fill }: IconProps) => JSX.Element;
 
 interface IconWrapperProps {
     width?: number;
@@ -339,21 +333,19 @@ 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;
@@ -364,23 +356,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;
@@ -389,7 +381,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,
@@ -406,7 +398,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;
@@ -452,23 +444,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;
@@ -1542,6 +1538,27 @@ declare type PortalProps = {
 };
 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 global {
+    interface WindowEventMap {
+        modal: CustomEvent<ModalEventDetail>;
+    }
+}
+
 declare const useOnClickOutside: <T extends HTMLElement = HTMLElement>(ref: RefObject<T>, handler: (event: Event) => void) => void;
 
 declare const useWindowDimensions: (breakpoints: ThemeBreakpoints) => {
@@ -1552,4 +1569,4 @@ declare const useWindowDimensions: (breakpoints: ThemeBreakpoints) => {
     };
 };
 
-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, Portal, PriceLabel, ProductGallery, ProductGalleryMobile, ProgressBar, 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, useOnClickOutside, useTheme, useThemeAssets, 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, Modal, MultiColorPicker, OfferBanner, OrderBar, Overlay, Pagination, Pattern, PaymentMethod, PaypalButton, Portal, PriceLabel, ProductGallery, ProductGalleryMobile, ProgressBar, 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, useOnClickOutside, useTheme, useThemeAssets, useWindowDimensions };