@trafilea/afrodita-components 5.0.0-beta.316 → 5.0.0-beta.318

package/build/index.d.ts

@@ -1,12 +1,13 @@
 /// <reference types="react" />
-import React, { ReactFragment, FC, ReactNode, ElementType, CSSProperties, AriaAttributes, HTMLAttributes, LabelHTMLAttributes, RefObject } from 'react';
+import * as React from 'react';
+import React__default, { ReactFragment, FC, ReactNode, ElementType, CSSProperties, AriaAttributes, HTMLAttributes, LabelHTMLAttributes, RefObject } from 'react';
 import { IconProps as IconProps$1 } from 'src/types/types';
 import * as _emotion_react_jsx_runtime from '@emotion/react/jsx-runtime';
 import * as _emotion_styled from '@emotion/styled';
 import { StyledComponent } from '@emotion/styled';
 export { default as styled } from '@emotion/styled';
-import { TextProps as TextProps$1 } from 'src/components/text/Text';
 import * as _emotion_react_types_jsx_namespace from '@emotion/react/types/jsx-namespace';
+import { TextProps as TextProps$1 } from 'src/components/text/Text';
 import * as _emotion_react from '@emotion/react';
 export { Global, css } from '@emotion/react';
 import { ComponentSize as ComponentSize$1 } from 'src/types/enums';
@@ -35,8 +36,8 @@ declare enum InputValidationType {
 }
 
 interface IconProps {
-    width?: number;
-    height?: number;
+    width?: number | string;
+    height?: number | string;
     fill?: string;
     title?: string;
     testId?: string;
@@ -865,16 +866,16 @@ declare const Messenger: ({ height, width, fill }: IconProps) => JSX.Element;
 
 declare const Comment: ({ height, width, fill }: IconProps) => JSX.Element;
 
-interface IconWrapperProps {
-    width?: number;
-    height?: number;
+declare type IconWrapperProps = {
+    width?: number | string;
+    height?: number | string;
     title?: string;
     viewBoxX: number;
     viewBoxY: number;
-    children: React.ReactNode;
+    children: React__default.ReactNode;
     testId?: string;
     fill?: string;
-}
+};
 
 declare const Mail: ({ height, width, }: Pick<IconWrapperProps, 'width' | 'height'>) => JSX.Element;
 
@@ -1168,7 +1169,7 @@ interface DialogDropdownProps {
         value: string;
     }[];
     position: DialogPositionProps;
-    style?: React.CSSProperties;
+    style?: React__default.CSSProperties;
     className?: string;
 }
 declare const DropdownDialog: ({ options, position: { top, right }, style, className, }: DialogDropdownProps) => JSX.Element;
@@ -1192,9 +1193,9 @@ interface SizeFitGuideProps {
 declare const SizeFitGuide: ({ title, fitPercentage, onClick, onClickFitPercentage, }: SizeFitGuideProps) => JSX.Element;
 
 interface BaseButtonProps {
-    children: React.ReactNode;
-    renderLeading?: React.ReactNode;
-    renderTrailing?: React.ReactNode;
+    children: React__default.ReactNode;
+    renderLeading?: React__default.ReactNode;
+    renderTrailing?: React__default.ReactNode;
     disabled?: boolean;
     type?: ButtonType;
     onClick: () => void;
@@ -1226,7 +1227,7 @@ interface DiscountTagProps {
     borderColor?: string;
     textColor?: string;
     size?: ComponentSize.Small | ComponentSize.Medium | ComponentSize.Large;
-    style?: React.CSSProperties;
+    style?: React__default.CSSProperties;
     bordersRounded?: boolean;
 }
 declare const DiscountTag: ({ discount, offText, savings, showSavings, disabled, backgroundColor, borderColor, textColor, size, style, bordersRounded, }: DiscountTagProps) => JSX.Element;
@@ -1239,7 +1240,7 @@ interface ClubOfferTagProps {
     borderColor?: string;
     textColor?: string;
     size?: ComponentSize.Small | ComponentSize.Medium | ComponentSize.Large;
-    style?: React.CSSProperties;
+    style?: React__default.CSSProperties;
 }
 declare const ClubOfferTag: ({ clubOfferText, className, disabled, backgroundColor, borderColor, textColor, size, style, }: ClubOfferTagProps) => JSX.Element;
 
@@ -1251,18 +1252,19 @@ interface PriceLabelProps {
     discount?: DiscountTagProps;
     clubOffer?: ClubOfferTagProps;
     finalPriceStyled?: boolean;
-    finalPriceStyle?: React.CSSProperties;
+    finalPriceStyle?: React__default.CSSProperties;
     originalPriceStyled?: boolean;
     originalPriceUnderlined?: boolean;
     testId?: string;
     clubStyle?: boolean;
     bordersRounded?: boolean;
 }
-declare const PriceLabel: ({ finalPrice, originalPrice, discount, color, testId, finalPriceStyled, finalPriceStyle, originalPriceStyled, originalPriceUnderlined, size, clubStyle, }: PriceLabelProps) => JSX.Element;
+declare const PriceLabel: React__default.FC<PriceLabelProps>;
 
-declare const PriceLabelV2: ({ finalPrice, originalPrice, discount, clubOffer, color, testId, originalPriceStyled, originalPriceUnderlined, size, bordersRounded, savingsDisplay, }: PriceLabelProps & {
-    savingsDisplay?: boolean | undefined;
-}) => JSX.Element;
+declare type Props = PriceLabelProps & {
+    savingsDisplay?: boolean;
+};
+declare const PriceLabelV2: React__default.FC<Props>;
 
 interface ColorPickerProps {
     options: ColorPickerOption[];
@@ -1348,15 +1350,15 @@ interface MotivatorProgressBarProps {
 declare const MotivatorProgressBar: ({ fillColor, backgroundColor, unfilledColor, currencyCode, endingValue, currentAmount, rewardUnlockedMessage, }: MotivatorProgressBarProps) => JSX.Element;
 
 interface IconButtonProps {
-    children: React.ReactNode;
+    children: React__default.ReactNode;
     disabled?: boolean;
-    onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    onClick?: (event: React__default.MouseEvent<HTMLDivElement, MouseEvent>) => void;
     size?: ComponentSize.Small | ComponentSize.Medium | ComponentSize.Large;
 }
 declare const IconButton: ({ children, disabled, size, onClick, }: IconButtonProps) => JSX.Element;
 
 interface TooltipProps {
-    children: React.ReactNode;
+    children: React__default.ReactNode;
     position: ComponentPosition;
     align?: 'start' | 'center' | 'end';
     content?: {
@@ -2145,7 +2147,7 @@ interface CheckboxProps {
     backgroundColor?: string;
     variant: 'primary' | 'secondary' | 'color';
 }
-declare const Checkbox: React.FC<CheckboxProps>;
+declare const Checkbox: React__default.FC<CheckboxProps>;
 
 interface RadioProps$1 {
     name: string;
@@ -2156,7 +2158,7 @@ interface RadioProps$1 {
     checked?: boolean;
     disabled?: boolean;
     onChange: (option: RadioGroupOption) => void;
-    style?: React.CSSProperties;
+    style?: React__default.CSSProperties;
 }
 declare const RadioPrimary: ({ style, name, value, id, label, checked, disabled, onChange, size, }: RadioProps$1) => JSX.Element;
 
@@ -2167,7 +2169,7 @@ interface RadioGroupInputProps {
     onChange: (value: RadioGroupOption) => void;
     size?: ComponentSize.Small | ComponentSize.Medium | ComponentSize.Large;
     disabled?: boolean;
-    style?: React.CSSProperties;
+    style?: React__default.CSSProperties;
 }
 declare const RadioGroupInput: ({ style, name, options, value, onChange, size, disabled, }: RadioGroupInputProps) => JSX.Element;
 
@@ -2178,7 +2180,7 @@ interface ClubRadioGroupInputProps {
     onChange: (value: RadioGroupOption) => void;
     size?: ComponentSize.Small | ComponentSize.Medium | ComponentSize.Large;
     disabled?: boolean;
-    style?: React.CSSProperties;
+    style?: React__default.CSSProperties;
 }
 declare const ClubRadioGroupInput: ({ style, name, options, value, onChange, size, disabled, }: ClubRadioGroupInputProps) => JSX.Element;
 
@@ -2263,7 +2265,7 @@ declare const Timer: ({ onTimeUp, displayZeroValues, ...rest }: TimerProps) => J
 interface BaseInputCommonProps {
     id?: string;
     value?: string;
-    innerRef?: React.Ref<HTMLInputElement>;
+    innerRef?: React__default.Ref<HTMLInputElement>;
     onBlur?: () => void;
     onFocus?: () => void;
     onChange?: (value: string, event: any) => void;
@@ -2275,7 +2277,7 @@ interface BaseInputCommonProps {
     onValidation?: (status: InputValidationType) => void;
     disabled?: boolean;
     required?: string;
-    children?: React.ReactNode;
+    children?: React__default.ReactNode;
     size?: 'regular' | 'small';
     inlinePlaceholder?: boolean;
     hasError?: boolean;
@@ -2408,7 +2410,7 @@ interface ScrollToTopProps {
     scrollToTopText: string;
     onClick: () => void;
     fill?: string;
-    Icon?: React.FC<IconProps$1>;
+    Icon?: React__default.FC<IconProps$1>;
 }
 declare const ScrollToTop: ({ scrollToTopText, onClick, fill, Icon, }: ScrollToTopProps) => JSX.Element;
 
@@ -2436,7 +2438,7 @@ interface Price extends Pick<PriceLabelProps, 'finalPrice' | 'originalPrice'> {
     color?: string;
 }
 interface ProductOrderItemProps {
-    title: React.ReactNode | string;
+    title: React__default.ReactNode | string;
     subtitle: string;
     className?: string;
     image: {
@@ -2449,7 +2451,7 @@ interface ProductOrderItemProps {
         text: string;
         backgroundColor: string;
     };
-    finalPriceStyle?: React.CSSProperties;
+    finalPriceStyle?: React__default.CSSProperties;
 }
 declare const SimpleOrderItem: ({ title, className, subtitle, image, price, tag, quantity, finalPriceStyle, }: ProductOrderItemProps) => JSX.Element;
 
@@ -2627,15 +2629,16 @@ interface ProductItemSmallMobileProps extends ProductItemProps {
     };
     clubPrice?: string;
     showClubPriceLabel?: boolean;
+    isRatingLoading?: boolean;
 }
 
-declare function withProductGrid<P extends ProductItemProps>(ProductItemComponent: React.FC<P>, data: ProductItemProps[]): {
+declare function withProductGrid<P extends ProductItemProps>(ProductItemComponent: React__default.FC<P>, data: ProductItemProps[]): {
     (props: Omit<P, 'title' | 'image' | 'price' | 'rating'>): JSX.Element;
     displayName: string;
 };
 
 declare const Collection: {
-    ProductItemMobile: ({ title, image, imageHover, price, rating, size, alignName, url, className, topTag, bottomTag, onClick, priceDisplayType, priceAtBottom, priceLoading, noFollow, colorPicker, isBNPL, hasStrength, clubPrice, showClubPriceLabel, }: ProductItemSmallMobileProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+    ProductItemMobile: React.FC<ProductItemSmallMobileProps>;
     withProductGrid: typeof withProductGrid;
     ProductItemTK: ({ title, titleStyle, hasSpacing, textContainerGap, customSizeRating, image, ImageBorderRadius, imageHover, price, rating, size, alignName, url, className, topTag, bottomTag, onClick, priceDisplayType, originalPriceStyled, priceAtBottom, priceLoading, noFollow, colorPicker, isBNPL, hasStrength, clubPrice, showClubPriceLabel, }: ProductItemSmallMobileProps$1) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 };
@@ -2649,11 +2652,11 @@ interface StarListProps {
 declare const StarList: ({ rating, starsNumber, fill, size, }: StarListProps) => JSX.Element;
 
 interface DrawerProps {
-    children: React.ReactNode;
+    children: React__default.ReactNode;
     isOpen: boolean;
     onClose?: () => void;
     onOpen?: () => void;
-    onClickOutside?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    onClickOutside?: (event: React__default.MouseEvent<HTMLDivElement, MouseEvent>) => void;
     backgroundColor?: string;
     backdropColor?: string;
     position?: 'left' | 'right';
@@ -2716,7 +2719,7 @@ declare type TextHeroProps = {
     href: never;
 };
 declare type TextDisplayProps = {
-    variant: 'display1' | 'display2';
+    variant: 'display1' | 'display2' | 'display3';
     weight?: 'bold' | 'demi';
     size?: 'regular' | 'xsmall';
     underline?: never;
@@ -2739,7 +2742,7 @@ declare type TextHeadingProps = {
 };
 declare type TextBodyProps = {
     variant: 'body';
-    size?: 'regular' | 'small' | 'xsmall';
+    size?: 'large' | 'regular' | 'small' | 'xsmall';
     weight?: 'bold' | 'demi' | 'regular';
     underline?: never;
     disabled?: never;
@@ -2785,7 +2788,7 @@ declare type TextLabelProps = {
     variant: 'label';
     color?: string;
     weight?: 'regular' | 'demi';
-    size?: 'regular' | 'small';
+    size?: 'large' | 'regular' | 'small';
     underline?: never;
     disabled?: boolean;
     wide?: never;
@@ -2851,7 +2854,7 @@ interface RadioProps {
     checked?: boolean;
     disabled?: boolean;
     onChange: (option: RadioGroupOption) => void;
-    style?: React.CSSProperties;
+    style?: React__default.CSSProperties;
 }
 declare const RadioInput: ({ style, name, value, id, label, checked, disabled, onChange, size, }: RadioProps) => JSX.Element;
 
@@ -2868,7 +2871,7 @@ declare type ModalProps = {
     dismissable?: boolean;
     maxFullScreen?: boolean;
     padding?: string;
-    children: React.ReactNode;
+    children: React__default.ReactNode;
 };
 interface ContainerProps {
     maxFullScreen: boolean;
@@ -2877,8 +2880,8 @@ interface ContainerProps {
 }
 declare const Overlay: _emotion_styled.StyledComponent<{
     theme?: _emotion_react.Theme | undefined;
-    as?: React.ElementType<any> | undefined;
-} & Pick<ContainerProps, "opened">, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+    as?: React__default.ElementType<any> | undefined;
+} & Pick<ContainerProps, "opened">, React__default.DetailedHTMLProps<React__default.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 declare const Modal: FC<ModalProps>;
 declare const modalEvent: (id: string, detail: Omit<Events['modal'], 'id'>) => void;
 declare const useModalEvent: (id: string, cb: (event: CustomEvent<Events['modal']>) => void) => void;
@@ -3061,9 +3064,9 @@ interface TextWithImageProps {
     btnBGColor?: string;
     btnHoverBGColor?: string;
     imgVideo: imageVideoProps;
-    contentAfterButton?: React.ReactNode;
-    titleStyle?: React.CSSProperties;
-    textStyle?: React.CSSProperties;
+    contentAfterButton?: React__default.ReactNode;
+    titleStyle?: React__default.CSSProperties;
+    textStyle?: React__default.CSSProperties;
     buttonWideOnMobile?: boolean;
 }
 declare const TextWithImage: ({ title, text, children, buttomText, backgroundColor, imageLeftSide, titleStyle, textStyle, buttonWideOnMobile, ...props }: TextWithImageProps) => _emotion_react_jsx_runtime.JSX.Element;
@@ -3084,7 +3087,16 @@ interface ShortBannerProps {
 }
 declare const ShortBanner: ({ textColor, title, bannerText, backgroundColor, alignCenter, widthAuto, }: ShortBannerProps) => JSX.Element;
 
-interface BeforeAfterCardProps {
+declare enum BeforeAfterVariant {
+    UserInfoText = "UserInfoText",
+    ResultFeedback = "ResultFeedback"
+}
+declare type NewSize = 'small' | 'medium' | 'large';
+declare const componentSizeMapper: {
+    [size in ComponentSize$1]: NewSize;
+};
+
+declare type BeforeAfterCardProps = {
     name: string;
     age?: string;
     months?: string;
@@ -3092,9 +3104,12 @@ interface BeforeAfterCardProps {
     afterImage: string;
     alignCenter?: boolean;
     imageBorderRadius?: string;
-    size?: ComponentSize;
-}
-declare const BeforeAfterCard: ({ name, age, months, beforeImage, afterImage, alignCenter, imageBorderRadius, size, }: BeforeAfterCardProps) => JSX.Element;
+    size?: ComponentSize$1;
+    variant?: BeforeAfterVariant;
+    description?: string;
+    reviewDays?: string;
+};
+declare const BeforeAfterCard: React__default.FC<BeforeAfterCardProps>;
 
 interface ImageCardWithDescriptionProps {
     image: string;
@@ -3220,7 +3235,7 @@ interface SelectedOption {
     size: string;
     detail: string;
 }
-declare const SizeDropdown: React.FC<DropdownProps>;
+declare const SizeDropdown: React__default.FC<DropdownProps>;
 
 interface IAutoshipProps {
     singlePurchaseLabel: string;
@@ -3249,15 +3264,6 @@ interface IAutoshipProps {
 }
 declare const Autoship: ({ tooltipContent, tooltipHeader, pricing, frequencyValues, frequencyUnit, autoshipBenefits, onChange, singlePurchaseLabel, subscriptionLabel, }: IAutoshipProps) => JSX.Element;
 
-declare global {
-    interface Events {
-        modal: {
-            id: string;
-            type: 'open' | 'close';
-        };
-    }
-}
-
 declare const useOnClickOutside: <T extends HTMLElement = HTMLElement>(ref: RefObject<T>, handler: (event: Event) => void) => void;
 
 declare const useWindowDimensions: (breakpoints: ThemeBreakpoints) => {
@@ -3268,6 +3274,15 @@ declare const useWindowDimensions: (breakpoints: ThemeBreakpoints) => {
     };
 };
 
+declare global {
+    interface Events {
+        modal: {
+            id: string;
+            type: 'open' | 'close';
+        };
+    }
+}
+
 /**
  * @returns number formatted with "," and 2 decimals as string
  */
@@ -3292,4 +3307,4 @@ declare const getSrcSet: (imgLink: string, ...breakpoints: number[]) => string;
 
 declare const mediaQueries: facepaint.DynamicStyleFunction;
 
-export { AbsorbencyLevel, Accordion, AccordionOptions, AmazonButton, AssetsProvider, Autoship, BeforeAfterCard, Bundle, ButtonPrimary, ButtonSecondary, ButtonSecondaryOutline, ButtonType, BuyNowPayLater, CTAProps, _default as Card, CardSectionType, CartProductItem, CategorySquareTag, CategoryTag, Checkbox, ClubOfferTag, ClubRadioGroupInput, Collection, ColorPickerOption, ComponentPosition, ComponentSize, index_d as CrossSell, DeliveryDetails, DiscountTag, Drawer, DropdownDialog, DropdownListIcons, DropdownListIconsItem, DropdownListIconsSubItem, DropdownOption, Filter, FilterChange, FilteringDropdown, Tags as FilteringTags, Filters, FitGuarantee, FitPredictor, HurryUp, Icon, IconButton, IconProps, IconWithOpacityProps, IconsWithTitle, Image, ImageCardWithDescription, ImageType, Input, InputValidationType, Modal, MotivatorProgressBar, MultiColorPicker, Note, OfferBanner, OrderBar, Overlay, PackSelector, PackSelectorV2, Pagination, PaginatorBlog, Pattern, PaymentMethod, PaypalButton, Portal, PriceLabel, PriceLabelV2, ProductGallery, ProductGalleryMobile, ProductGalleryMobileV2, ProgressBar, QuantityPicker, RadioGroupInput, RadioGroupOption, RadioInput, RadioPrimary, Rating, Review$1 as Review, Review as ReviewDetail, ReviewsHeader, ScrollToTop, SearchBar, SearchBarOptionItem, SearchNavigation, SeasonOfferTag, ShortBanner, SimpleDropdown, SimpleOrderItem, SingleColorPicker, SizeChartTable, SizeDropdown, SizeFitGuide, SizeOption, SizeSelector, SizeTable, SliderNavigation, Spacing, Spinner, StarList, StrengthBars, Tab, Tabs, Text, TextButton, TextWithImage, Theme, ThemeAssets, ThemeBasicPallete, ThemeBreakpoints, ThemeColorPallete, ThemeColors, ThemeComponent, ThemeFonts, ThemeProvider, ThemeTypography, ThemeVariables, Timer, Tooltip, Totals, TrackingProgress, TrackingProgressV2, WithTestId, decimalFormat, formatPrice, getSrcSet, imageVideoProps, isEmail, isEmpty, isNumber, isPhoneNumber, isValidDate, mediaQueries, modalEvent, SeasonOfferRoundedTag as seasonOfferRoundedTag, simulateMouseClick, sliceString, useModal, useModalEvent, useOnClickOutside, useTheme, useThemeAssets, useWindowDimensions };
+export { AbsorbencyLevel, Accordion, AccordionOptions, AmazonButton, AssetsProvider, Autoship, BeforeAfterCard, BeforeAfterVariant, Bundle, ButtonPrimary, ButtonSecondary, ButtonSecondaryOutline, ButtonType, BuyNowPayLater, CTAProps, _default as Card, CardSectionType, CartProductItem, CategorySquareTag, CategoryTag, Checkbox, ClubOfferTag, ClubRadioGroupInput, Collection, ColorPickerOption, ComponentPosition, ComponentSize, index_d as CrossSell, DeliveryDetails, DiscountTag, Drawer, DropdownDialog, DropdownListIcons, DropdownListIconsItem, DropdownListIconsSubItem, DropdownOption, Filter, FilterChange, FilteringDropdown, Tags as FilteringTags, Filters, FitGuarantee, FitPredictor, HurryUp, Icon, IconButton, IconProps, IconWithOpacityProps, IconsWithTitle, Image, ImageCardWithDescription, ImageType, Input, InputValidationType, Modal, MotivatorProgressBar, MultiColorPicker, Note, OfferBanner, OrderBar, Overlay, PackSelector, PackSelectorV2, Pagination, PaginatorBlog, Pattern, PaymentMethod, PaypalButton, Portal, PriceLabel, PriceLabelV2, ProductGallery, ProductGalleryMobile, ProductGalleryMobileV2, ProgressBar, QuantityPicker, RadioGroupInput, RadioGroupOption, RadioInput, RadioPrimary, Rating, Review$1 as Review, Review as ReviewDetail, ReviewsHeader, ScrollToTop, SearchBar, SearchBarOptionItem, SearchNavigation, SeasonOfferTag, ShortBanner, SimpleDropdown, SimpleOrderItem, SingleColorPicker, SizeChartTable, SizeDropdown, SizeFitGuide, SizeOption, SizeSelector, SizeTable, SliderNavigation, Spacing, Spinner, StarList, StrengthBars, Tab, Tabs, Text, TextButton, TextWithImage, Theme, ThemeAssets, ThemeBasicPallete, ThemeBreakpoints, ThemeColorPallete, ThemeColors, ThemeComponent, ThemeFonts, ThemeProvider, ThemeTypography, ThemeVariables, Timer, Tooltip, Totals, TrackingProgress, TrackingProgressV2, WithTestId, componentSizeMapper, decimalFormat, formatPrice, getSrcSet, imageVideoProps, isEmail, isEmpty, isNumber, isPhoneNumber, isValidDate, mediaQueries, modalEvent, SeasonOfferRoundedTag as seasonOfferRoundedTag, simulateMouseClick, sliceString, useModal, useModalEvent, useOnClickOutside, useTheme, useThemeAssets, useWindowDimensions };