@trafilea/afrodita-components 5.0.0-beta.98 → 5.0.0

package/build/index.d.ts

@@ -7,6 +7,7 @@ import { StyledComponent } from '@emotion/styled';
 export { default as styled } from '@emotion/styled';
 import * as _emotion_react_types_jsx_namespace from '@emotion/react/types/jsx-namespace';
 import * as _emotion_react from '@emotion/react';
+import { ComponentSize as ComponentSize$1 } from 'src/types/enums';
 
 declare enum CardSectionType {
     Header = 0,
@@ -59,6 +60,7 @@ declare type SizeOption = {
     label: string;
     description: string;
     disabled?: boolean;
+    noStock?: boolean;
 };
 declare type Pattern = {
     url: string;
@@ -66,6 +68,7 @@ declare type Pattern = {
 declare type ColorPickerOption = {
     label: string;
     description: string;
+    noStock?: boolean;
     meta: {
         color?: string[];
         pattern?: Pattern;
@@ -109,6 +112,7 @@ declare type Filter = {
         link?: string;
         blockUncheck?: boolean;
     }>;
+    showInMobile: boolean;
 };
 declare type FilterChange = {
     sectionIndex: number;
@@ -144,12 +148,18 @@ declare const BulletTwo: ({ height, width, fill, title }: IconProps) => JSX.Elem
 
 declare const BulletThree: ({ height, width, fill, title }: IconProps) => JSX.Element;
 
+declare const ThumbsUp: ({ height, width, fill, title }: IconProps) => JSX.Element;
+
+declare const ThumbsDown: ({ height, width, fill, title }: IconProps) => JSX.Element;
+
 declare const Custom_SixtyDaysGuarantee: typeof SixtyDaysGuarantee;
 declare const Custom_Frown: typeof Frown;
 declare const Custom_Smiling: typeof Smiling;
 declare const Custom_BulletOne: typeof BulletOne;
 declare const Custom_BulletTwo: typeof BulletTwo;
 declare const Custom_BulletThree: typeof BulletThree;
+declare const Custom_ThumbsUp: typeof ThumbsUp;
+declare const Custom_ThumbsDown: typeof ThumbsDown;
 declare namespace Custom {
   export {
     Custom_SixtyDaysGuarantee as SixtyDaysGuarantee,
@@ -158,6 +168,8 @@ declare namespace Custom {
     Custom_BulletOne as BulletOne,
     Custom_BulletTwo as BulletTwo,
     Custom_BulletThree as BulletThree,
+    Custom_ThumbsUp as ThumbsUp,
+    Custom_ThumbsDown as ThumbsDown,
   };
 }
 
@@ -241,6 +253,8 @@ declare const CircleSolidQuestion: ({ height, width, fill }: IconProps) => JSX.E
 
 declare const CircleSolidWarning: ({ height, width, fill }: IconProps) => JSX.Element;
 
+declare const CircleSolidStyledCheck: ({ height, width, fill }: IconProps) => JSX.Element;
+
 declare const Actions_Check: typeof Check;
 declare const Actions_ClearLight: typeof ClearLight;
 declare const Actions_LightExclamation: typeof LightExclamation;
@@ -279,6 +293,7 @@ declare const Actions_CircleSolidMinus: typeof CircleSolidMinus;
 declare const Actions_CircleSolidPlus: typeof CircleSolidPlus;
 declare const Actions_CircleSolidQuestion: typeof CircleSolidQuestion;
 declare const Actions_CircleSolidWarning: typeof CircleSolidWarning;
+declare const Actions_CircleSolidStyledCheck: typeof CircleSolidStyledCheck;
 declare namespace Actions {
   export {
     Actions_Check as Check,
@@ -320,6 +335,7 @@ declare namespace Actions {
     Actions_CircleSolidPlus as CircleSolidPlus,
     Actions_CircleSolidQuestion as CircleSolidQuestion,
     Actions_CircleSolidWarning as CircleSolidWarning,
+    Actions_CircleSolidStyledCheck as CircleSolidStyledCheck,
   };
 }
 
@@ -911,7 +927,7 @@ interface borderProps {
 }
 interface CardProps {
     children: ReactNode;
-    backgroundColor: string;
+    backgroundColor?: string;
     widthAuto?: boolean;
     border?: borderProps;
     flex?: boolean;
@@ -951,6 +967,21 @@ declare type UncontrolledProps<T> = {
 declare type SimpleDropdownProps<T> = UncontrolledProps<T> | ControlledProps<T>;
 declare function SimpleDropdown<T>({ options, disabled, initialValue, placeHolder, label, wide, sort, onChange, value, testId, }: SimpleDropdownProps<T>): JSX.Element;
 
+interface DialogPositionProps {
+    top: string;
+    right: string;
+}
+interface DialogDropdownProps {
+    options: {
+        label: string;
+        value: string;
+    }[];
+    position: DialogPositionProps;
+    style?: React.CSSProperties;
+    className?: string;
+}
+declare const DropdownDialog: ({ options, position: { top, right }, style, className, }: DialogDropdownProps) => JSX.Element;
+
 interface SizeSelectorProps {
     label: string;
     sizes: SizeOption[];
@@ -1047,8 +1078,11 @@ interface ProductGalleryProps {
     previewListDataTestId?: string;
     thumbnailPosition?: 'vertical' | 'horizontal';
     borderRadiusVariant?: boolean;
+    previewImgBorderColor?: string;
+    ctaText?: string;
+    ctaAction?: () => void;
 }
-declare const ProductGallery: ({ images, selectedValue, topTag, bottomTag, productImageDataTestId, previewListDataTestId, thumbnailPosition, borderRadiusVariant, }: ProductGalleryProps) => JSX.Element;
+declare const ProductGallery: ({ images, selectedValue, topTag, bottomTag, productImageDataTestId, previewListDataTestId, thumbnailPosition, borderRadiusVariant, previewImgBorderColor, ctaText, ctaAction, }: ProductGalleryProps) => JSX.Element;
 
 interface RatingProps {
     rating: number;
@@ -1086,14 +1120,21 @@ interface TooltipProps {
     children: React.ReactNode;
     position: ComponentPosition;
     align?: 'start' | 'center' | 'end';
-    text: string;
+    content?: {
+        text: string;
+        color?: string;
+    };
+    backgroundColor?: string;
+    maxWidth?: string;
     header?: {
         title: string;
-        Icon: IconType;
+        titleColor?: string;
+        Icon?: IconType;
+        iconFill?: string;
     };
     onClick?: () => void;
 }
-declare const Tooltip: ({ children, position, text, align, onClick, header, }: TooltipProps) => JSX.Element;
+declare const Tooltip: ({ children, position, content, backgroundColor, align, maxWidth, onClick, header, }: TooltipProps) => JSX.Element;
 
 interface AccordionProps {
     defaultOpen?: boolean;
@@ -1105,11 +1146,12 @@ interface AccordionProps {
     headerOnOpen?: ReactNode;
     content: ReactNode;
     disabled?: boolean;
+    innerHTML?: boolean;
     openIcon: IconType;
     closeIcon: IconType;
     onClick?: (index: number) => void;
 }
-declare const Accordion: ({ header, headerOnOpen, content, defaultOpen, forceOpenHandler, forceOpenValue, titleColor, variant, disabled, openIcon, closeIcon, onClick, }: AccordionProps) => JSX.Element;
+declare const Accordion: ({ header, headerOnOpen, content, defaultOpen, forceOpenHandler, forceOpenValue, titleColor, variant, disabled, innerHTML, openIcon, closeIcon, onClick, }: AccordionProps) => JSX.Element;
 
 declare const ThemeProvider: FC<{
     theme: Theme;
@@ -1217,6 +1259,10 @@ declare type ThemeComponent = {
         border: string;
         borderRadius: string;
         fontWeight: number;
+        lineHeight: string;
+        letterSpacing: string;
+        minWidth: string;
+        minHeight: string;
         size: {
             small: {
                 fontSize: string;
@@ -1301,6 +1347,12 @@ declare type ThemeComponent = {
             border: string;
             color: string;
         };
+        noStock: {
+            fontWeight: number;
+            background: string;
+            border: string;
+            color: string;
+        };
         disabled: {
             border: string;
         };
@@ -1354,10 +1406,13 @@ declare type ThemeComponent = {
     };
     card: {
         borderRadius: string;
+        backgroundColor: string;
     };
     radio: {
         borderColor: string;
         background: string;
+        textSize: string;
+        lineHeight: string;
         size: {
             small: {
                 borderWidth: string;
@@ -1386,6 +1441,7 @@ declare type ThemeComponent = {
         };
     };
     label: {
+        color: string;
         fontSize: {
             small: string;
             medium: string;
@@ -1499,6 +1555,7 @@ declare type ThemeComponent = {
         options: {
             borderColor: string;
             color: string;
+            borderRadius: string;
         };
     };
     modal: {
@@ -1512,6 +1569,168 @@ declare type ThemeComponent = {
         selectedContrast: string;
         tagColor: string;
     };
+    slideNavigation: {
+        slideDots: {
+            unselectedDotColor: string;
+            selectedDotColor: string;
+            dotsOpacity: number;
+        };
+    };
+    beforeAfter: {
+        size: {
+            small: {
+                image: {
+                    minHeight: string;
+                    minWidth: string;
+                    mobile: {
+                        minHeight: string;
+                        minWidth: string;
+                    };
+                };
+                imageContainer: {
+                    maxWidth: string;
+                    padding: string;
+                    mobile: {
+                        maxWidth: string;
+                    };
+                };
+                userInfoText: {
+                    fontSize: string;
+                    mobile: {
+                        fontSize: string;
+                    };
+                };
+            };
+            medium: {
+                image: {
+                    minHeight: string;
+                    minWidth: string;
+                    mobile: {
+                        minHeight: string;
+                        minWidth: string;
+                    };
+                };
+                imageContainer: {
+                    maxWidth: string;
+                    padding: string;
+                    mobile: {
+                        maxWidth: string;
+                    };
+                };
+                userInfoText: {
+                    fontSize: string;
+                    mobile: {
+                        fontSize: string;
+                    };
+                };
+            };
+            large: {
+                image: {
+                    minHeight: string;
+                    minWidth: string;
+                    mobile: {
+                        minHeight: string;
+                        minWidth: string;
+                    };
+                };
+                imageContainer: {
+                    maxWidth: string;
+                    padding: string;
+                    mobile: {
+                        maxWidth: string;
+                    };
+                };
+                userInfoText: {
+                    fontSize: string;
+                    mobile: {
+                        fontSize: string;
+                    };
+                };
+            };
+        };
+    };
+    total: {
+        basicTotal: {
+            amount: {
+                color: string;
+                fontSize: string;
+            };
+            currency: {
+                color: string;
+                fontSize: string;
+                lineHeight: string;
+                alignSelf?: string;
+            };
+            savings: {
+                textFontSize: string;
+                textLineHeight: string;
+                amountFontSize: string;
+                amountFontWeight: number;
+                amountLineHeight: string;
+                color?: string;
+            };
+        };
+    };
+    subTotal: {
+        basicSubTotal: {
+            family: string;
+            size: string;
+            weight: number;
+            lineHeight: string;
+            color: string;
+        };
+    };
+    pricing: {
+        priceLabel: {
+            price: {
+                size: ComponentSize$1.Small | ComponentSize$1.Medium | ComponentSize$1.Large;
+                originalPriceColor: string;
+                actualPriceColor: string;
+            };
+        };
+    };
+    orderSummary: {
+        headingTextAlign: string;
+        backgroundColor: string;
+        maxWidth?: string;
+        padding?: string;
+        borderRadius?: string;
+        onMobile: {
+            maxWidth?: string;
+            padding?: string;
+            backgroundColor?: string;
+        };
+    };
+    expressCheckout: {
+        fontFamily: string;
+        fontWeight: number;
+        lineHeight: string;
+    };
+    copyrightText: {
+        fontSize: string;
+        fontWeight: number;
+        lineHeight: string;
+        color: string;
+    };
+    textButton: {
+        fontWeight: number;
+        lineHeight: string;
+    };
+    deliveryDetails: {
+        note: {
+            accentColor: string;
+            color: string;
+            backgroundColor: string;
+        };
+        SectionDetails?: {
+            marginLeft: string;
+        };
+    };
+    text: {
+        orderHeader: {
+            color: string;
+        };
+    };
 };
 declare type ThemeTypography = {
     config: {
@@ -1538,6 +1757,11 @@ declare type ThemeAssets = {
     images: {
         favicon: string;
         logo: string;
+        logoSize?: {
+            width: string;
+            height: string;
+        };
+        logoMobile?: string;
     };
     [key: string]: any;
 };
@@ -1744,7 +1968,7 @@ declare type detail = {
     details: string;
 };
 interface orderUpdate extends detail {
-    keepMeUpdated: {
+    keepMeUpdated?: {
         title: string;
         onClick: () => void;
     };
@@ -1757,9 +1981,9 @@ interface DeliveryDetailsProps {
     note?: {
         importantNoteText: string;
         text: string;
-        accentColor: string;
-        backgroundColor: string;
-        color: string;
+        accentColor?: string;
+        backgroundColor?: string;
+        color?: string;
     };
 }
 declare const DeliveryDetails: ({ deliveryDetailsText, arrivingBy, shippingTo, instantOrderUpdate, note, }: DeliveryDetailsProps) => JSX.Element;
@@ -1767,19 +1991,28 @@ declare const DeliveryDetails: ({ deliveryDetailsText, arrivingBy, shippingTo, i
 interface ScrollToTopProps {
     scrollToTopText: string;
     onClick: () => void;
+    fill?: string;
 }
-declare const ScrollToTop: ({ scrollToTopText, onClick }: ScrollToTopProps) => JSX.Element;
+declare const ScrollToTop: ({ scrollToTopText, onClick, fill }: ScrollToTopProps) => JSX.Element;
 
 interface OrderBarProps {
     message: string;
+    color?: string;
 }
-declare const OrderBar: ({ message }: OrderBarProps) => JSX.Element;
+declare const OrderBar: ({ message, color }: OrderBarProps) => JSX.Element;
+
+interface TableProps$1 {
+    headers: string[];
+    data: string[][];
+}
+declare const SizeTable: ({ headers, data }: TableProps$1) => JSX.Element;
 
 interface TableProps {
     headers: string[];
     data: string[][];
+    newSizeTableCss?: boolean;
 }
-declare const SizeTable: ({ headers, data }: TableProps) => JSX.Element;
+declare const SizeChartTable: ({ headers, data, newSizeTableCss }: TableProps) => JSX.Element;
 
 interface Price extends Pick<PriceLabelProps, 'finalPrice' | 'originalPrice'> {
     color?: string;
@@ -1787,6 +2020,7 @@ interface Price extends Pick<PriceLabelProps, 'finalPrice' | 'originalPrice'> {
 interface ProductOrderItemProps {
     title: string;
     subtitle: string;
+    className?: string;
     image: {
         src: string;
         alt: string;
@@ -1799,9 +2033,10 @@ interface ProductOrderItemProps {
     };
     finalPriceStyle?: React.CSSProperties;
 }
-declare const SimpleOrderItem: ({ title, subtitle, image, price, tag, quantity, finalPriceStyle, }: ProductOrderItemProps) => JSX.Element;
+declare const SimpleOrderItem: ({ title, className, subtitle, image, price, tag, quantity, finalPriceStyle, }: ProductOrderItemProps) => JSX.Element;
 
-interface ReviewProps {
+interface ReviewProps$1 {
+    reviewId: string;
     reviewerName: string;
     date: Date;
     rating: number;
@@ -1811,12 +2046,17 @@ interface ReviewProps {
     };
     title: string;
     description: string;
-    image: {
+    images?: {
         src: string;
         alt: string;
-    };
+    }[];
+    reviewVariant?: string;
+    onClickImage?: (image: string) => void;
+    helpfulActionText?: string;
+    helpfulAction?: (id: string) => void;
+    helpfulCount?: number;
 }
-declare const Review: ({ reviewerName, date, rating, stars, title, description, image }: ReviewProps) => JSX.Element;
+declare const Review$1: ({ reviewId, reviewerName, date, rating, stars, title, description, images, reviewVariant, onClickImage, helpfulActionText, helpfulAction, helpfulCount, }: ReviewProps$1) => JSX.Element;
 
 interface SliderNavigationProps {
     children: JSX.Element | JSX.Element[] | StyledComponent<any>;
@@ -1903,6 +2143,13 @@ interface ProductItemSmallMobileProps extends ProductItemProps {
     bottomTag?: JSX.Element;
     onClick?: () => void;
     priceDisplayType?: 'default' | 'styled';
+    priceAtBottom?: boolean;
+    priceLoading?: boolean;
+    colorPicker?: {
+        display: boolean;
+        position: string;
+        component: JSX.Element | JSX.Element[] | undefined;
+    };
 }
 
 declare function withProductGrid<P extends ProductItemProps>(ProductItemComponent: React.FC<P>, data: ProductItemProps[]): {
@@ -1911,7 +2158,7 @@ declare function withProductGrid<P extends ProductItemProps>(ProductItemComponen
 };
 
 declare const Collection: {
-    ProductItemMobile: ({ title, image, imageHover, price, rating, size, alignName, url, className, topTag, bottomTag, onClick, priceDisplayType, }: ProductItemSmallMobileProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+    ProductItemMobile: ({ title, image, imageHover, price, rating, size, alignName, url, className, topTag, bottomTag, onClick, priceDisplayType, priceAtBottom, priceLoading, colorPicker, }: ProductItemSmallMobileProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
     withProductGrid: typeof withProductGrid;
 };
 
@@ -1972,8 +2219,9 @@ interface PaginationProps {
     underlineActive?: boolean;
     boldActive?: boolean;
     disabled?: boolean;
+    showReducedPages?: boolean;
 }
-declare const Pagination: ({ from, to, currentPage, onChange, underlineActive, boldActive, disabled, }: PaginationProps) => JSX.Element;
+declare const Pagination: ({ from, to, currentPage, onChange, underlineActive, boldActive, disabled, showReducedPages, }: PaginationProps) => JSX.Element;
 
 declare const PaginatorBlog: ({ from, to, currentPage, onChange, }: Pick<PaginationProps, 'from' | 'to' | 'onChange' | 'currentPage'>) => JSX.Element;
 
@@ -2057,6 +2305,7 @@ declare type TextLinkProps = {
 };
 declare type TextLabelProps = {
     variant: 'label';
+    color?: string;
     weight?: 'regular' | 'demi';
     size?: 'regular' | 'small';
     underline?: never;
@@ -2095,19 +2344,23 @@ interface SearchBarProps {
     initialTerm?: string;
     shouldClear?: boolean;
     isBlogSearchBar?: boolean;
+    ariaLabel?: string;
+    placeholder?: string;
+    id?: string;
+    autoComplete?: string;
 }
-declare const SearchBar: ({ suggestions, resultOptions, onChange, onSearch, onClose, resultsPanelDataTestId, allResults, initialTerm, shouldClear, isBlogSearchBar, }: SearchBarProps) => JSX.Element;
+declare const SearchBar: ({ suggestions, resultOptions, onChange, onSearch, onClose, resultsPanelDataTestId, allResults, initialTerm, shouldClear, isBlogSearchBar, ariaLabel, placeholder, id, autoComplete, }: SearchBarProps) => JSX.Element;
 
-interface ProductGalleryMobileProps {
+interface ProductGalleryMobileProps$1 {
     images: ImageType[];
-    selectedValue?: ImageType;
+    customClick?: boolean;
     topTag?: JSX.Element;
     bottomTag?: JSX.Element;
     productImageDataTestId?: string;
-    slideDotsDataTestId?: string;
     borderRadiusVariant?: boolean;
+    selectedValue?: ImageType;
 }
-declare const ProductGalleryMobile: ({ images, selectedValue, topTag, bottomTag, productImageDataTestId, slideDotsDataTestId, borderRadiusVariant, }: ProductGalleryMobileProps) => JSX.Element;
+declare const ProductGalleryMobile: ({ images, customClick, topTag, bottomTag, productImageDataTestId, borderRadiusVariant, selectedValue, }: ProductGalleryMobileProps$1) => JSX.Element;
 
 interface RadioProps {
     name: string;
@@ -2133,10 +2386,12 @@ declare type ModalProps = {
     id: string;
     dismissable?: boolean;
     maxFullScreen?: boolean;
+    padding?: string;
 };
 interface ContainerProps {
     maxFullScreen: boolean;
     opened?: boolean;
+    padding?: string;
 }
 declare const Overlay: _emotion_styled.StyledComponent<{
     theme?: _emotion_react.Theme | undefined;
@@ -2215,6 +2470,7 @@ interface PackSelectorProps {
     packs: PackOption[];
     selectedValue: PackOption;
     onChange: (size: PackOption) => void;
+    currencyCode?: string;
 }
 declare const PackSelector: FC<PackSelectorProps>;
 
@@ -2280,9 +2536,9 @@ interface IconList {
 declare const IconsWithTitle: ({ iconName, iconTitle, backgroundColor, iconColor, iconSizeDesktop, iconSizeMobile, iconTitlePosition, iconTitleStyle, iconStyle, isTitleInnerHtml, }: IconList) => JSX.Element | null;
 
 interface NoteProps {
-    accentColor: string;
-    color: string;
-    backgroundColor: string;
+    accentColor?: string;
+    color?: string;
+    backgroundColor?: string;
     importantNoteText: string;
     text: string;
 }
@@ -2290,7 +2546,8 @@ declare const Note: ({ accentColor, color, backgroundColor, importantNoteText, t
 
 interface TextWithImageProps {
     title: string;
-    text: string;
+    text?: string;
+    children?: ReactNode;
     buttomText: string;
     backgroundColor: string;
     imageLeftSide?: boolean;
@@ -2305,7 +2562,7 @@ interface TextWithImageProps {
     textStyle?: React.CSSProperties;
     buttonWideOnMobile?: boolean;
 }
-declare const TextWithImage: ({ title, text, buttomText, backgroundColor, imageLeftSide, titleStyle, textStyle, buttonWideOnMobile, ...props }: TextWithImageProps) => _emotion_react_jsx_runtime.JSX.Element;
+declare const TextWithImage: ({ title, text, children, buttomText, backgroundColor, imageLeftSide, titleStyle, textStyle, buttonWideOnMobile, ...props }: TextWithImageProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 interface AccordionOptionsProps {
     titleColor: string;
@@ -2330,8 +2587,10 @@ interface BeforeAfterCardProps {
     beforeImage: string;
     afterImage: string;
     alignCenter?: boolean;
+    imageBorderRadius?: string;
+    size?: ComponentSize;
 }
-declare const BeforeAfterCard: ({ name, age, months, beforeImage, afterImage, alignCenter, }: BeforeAfterCardProps) => JSX.Element;
+declare const BeforeAfterCard: ({ name, age, months, beforeImage, afterImage, alignCenter, imageBorderRadius, size, }: BeforeAfterCardProps) => JSX.Element;
 
 interface ImageCardWithDescriptionProps {
     image: string;
@@ -2341,6 +2600,66 @@ interface ImageCardWithDescriptionProps {
 }
 declare const ImageCardWithDescription: ({ image, title, description, titlePosition, }: ImageCardWithDescriptionProps) => JSX.Element;
 
+interface Checkpoint {
+    day: string;
+    date: string;
+    statusMessage: string;
+}
+interface TrackingProgressProps {
+    checkPoints: Checkpoint[];
+    amountOfCheckPoints: number;
+}
+declare const TrackingProgress: ({ checkPoints, amountOfCheckPoints }: TrackingProgressProps) => JSX.Element;
+
+interface ReviewsHeaderProps {
+    title?: string;
+    rating: number;
+    reviews: number;
+    reviewsText: string;
+    reviewsSummary: string[];
+    onClickReview: (reveiw: string) => void;
+}
+declare const ReviewsHeader: ({ title, rating, reviews, reviewsText, reviewsSummary, onClickReview, }: ReviewsHeaderProps) => JSX.Element;
+
+interface ReviewProps {
+    reviewId: string;
+    reviewerName: string;
+    date: Date;
+    rating: number;
+    stars: {
+        color: string;
+        size: ComponentSize.Medium | ComponentSize.Small;
+    };
+    title: string;
+    description: string;
+    image?: {
+        src: string;
+        alt: string;
+    };
+    modalId: string;
+    maxFullScreen?: boolean;
+    verified?: boolean;
+    productImage?: string;
+    productTitle?: string;
+    productLink?: string;
+    helpfulCount?: number;
+    helpfulAction?: (id: string) => void;
+    notHelpfulCount?: number;
+    notHelpfulAction?: (id: string) => void;
+}
+declare const Review: ({ reviewId, reviewerName, date, rating, stars, title, description, image, modalId, maxFullScreen, verified, productImage, productTitle, productLink, helpfulCount, helpfulAction, notHelpfulCount, notHelpfulAction, }: ReviewProps) => JSX.Element;
+
+interface ProductGalleryMobileProps {
+    images: ImageType[];
+    selectedValue?: ImageType;
+    topTag?: JSX.Element;
+    bottomTag?: JSX.Element;
+    productImageDataTestId?: string;
+    slideDotsDataTestId?: string;
+    borderRadiusVariant?: boolean;
+}
+declare const ProductGalleryMobileV2: ({ images, selectedValue, topTag, bottomTag, productImageDataTestId, slideDotsDataTestId, borderRadiusVariant, }: ProductGalleryMobileProps) => JSX.Element;
+
 declare global {
     interface Events {
         modal: {
@@ -2380,4 +2699,4 @@ declare const formatPrice: (value: number, { locale, currency }?: {
     currency?: string | undefined;
 }) => string;
 
-export { Accordion, AccordionOptions, AmazonButton, AssetsProvider, BeforeAfterCard, Bundle, ButtonPrimary, ButtonSecondary, ButtonSecondaryOutline, ButtonType, CTAProps, _default as Card, CardSectionType, CartProductItem, CategoryTag, Checkbox, Collection, ColorPickerOption, ComponentPosition, ComponentSize, index_d as CrossSell, DeliveryDetails, DiscountTag, Drawer, DropdownListIcons, DropdownListIconsItem, DropdownListIconsSubItem, DropdownOption, Filter, FilterChange, FilteringDropdown, Tags as FilteringTags, Filters, FitPredictor, Icon, IconButton, IconProps, IconWithOpacityProps, IconsWithTitle, Image, ImageCardWithDescription, ImageType, Input, InputValidationType, Modal, MultiColorPicker, Note, OfferBanner, OrderBar, Overlay, PackSelector, Pagination, PaginatorBlog, Pattern, PaymentMethod, PaypalButton, Portal, PriceLabel, PriceLabelV2, ProductGallery, ProductGalleryMobile, ProgressBar, QuantityPicker, RadioGroupInput, RadioGroupOption, RadioInput, Rating, Review, ScrollToTop, SearchBar, SearchBarOptionItem, SearchNavigation, SeasonOfferTag, ShortBanner, SimpleDropdown, SimpleOrderItem, SingleColorPicker, SizeFitGuide, SizeOption, SizeSelector, SizeTable, SliderNavigation, Spacing, Spinner, StarList, Tab, Tabs, Text, TextButton, TextWithImage, Theme, ThemeAssets, ThemeBasicPallete, ThemeBreakpoints, ThemeColorPallete, ThemeColors, ThemeComponent, ThemeFonts, ThemeProvider, ThemeTypography, ThemeVariables, Timer, Tooltip, Totals, WithTestId, decimalFormat, formatPrice, imageVideoProps, isEmail, isEmpty, isNumber, isPhoneNumber, isValidDate, modalEvent, simulateMouseClick, sliceString, useModal, useModalEvent, useOnClickOutside, useTheme, useThemeAssets, useWindowDimensions };
+export { Accordion, AccordionOptions, AmazonButton, AssetsProvider, BeforeAfterCard, Bundle, ButtonPrimary, ButtonSecondary, ButtonSecondaryOutline, ButtonType, CTAProps, _default as Card, CardSectionType, CartProductItem, CategoryTag, Checkbox, Collection, ColorPickerOption, ComponentPosition, ComponentSize, index_d as CrossSell, DeliveryDetails, DiscountTag, Drawer, DropdownDialog, DropdownListIcons, DropdownListIconsItem, DropdownListIconsSubItem, DropdownOption, Filter, FilterChange, FilteringDropdown, Tags as FilteringTags, Filters, FitPredictor, Icon, IconButton, IconProps, IconWithOpacityProps, IconsWithTitle, Image, ImageCardWithDescription, ImageType, Input, InputValidationType, Modal, MultiColorPicker, Note, OfferBanner, OrderBar, Overlay, PackSelector, Pagination, PaginatorBlog, Pattern, PaymentMethod, PaypalButton, Portal, PriceLabel, PriceLabelV2, ProductGallery, ProductGalleryMobile, ProductGalleryMobileV2, ProgressBar, QuantityPicker, RadioGroupInput, RadioGroupOption, RadioInput, Rating, Review$1 as Review, Review as ReviewDetail, ReviewsHeader, ScrollToTop, SearchBar, SearchBarOptionItem, SearchNavigation, SeasonOfferTag, ShortBanner, SimpleDropdown, SimpleOrderItem, SingleColorPicker, SizeChartTable, SizeFitGuide, SizeOption, SizeSelector, SizeTable, SliderNavigation, Spacing, Spinner, StarList, Tab, Tabs, Text, TextButton, TextWithImage, Theme, ThemeAssets, ThemeBasicPallete, ThemeBreakpoints, ThemeColorPallete, ThemeColors, ThemeComponent, ThemeFonts, ThemeProvider, ThemeTypography, ThemeVariables, Timer, Tooltip, Totals, TrackingProgress, WithTestId, decimalFormat, formatPrice, imageVideoProps, isEmail, isEmpty, isNumber, isPhoneNumber, isValidDate, modalEvent, simulateMouseClick, sliceString, useModal, useModalEvent, useOnClickOutside, useTheme, useThemeAssets, useWindowDimensions };