@trafilea/afrodita-components 5.0.0-beta.321 → 5.0.0-beta.322

package/build/index.d.ts

@@ -1,18 +1,55 @@
 /// <reference types="react" />
-import * as React from 'react';
-import React__default, { ReactFragment, FC, ReactNode, ElementType, CSSProperties, AriaAttributes, HTMLAttributes, LabelHTMLAttributes, RefObject } from 'react';
+import * as React$1 from 'react';
+import React__default, { FC, ReactFragment, ReactNode, ElementType, CSSProperties, AriaAttributes, HTMLAttributes, LabelHTMLAttributes, RefObject } from 'react';
 import { IconProps as IconProps$1 } from 'src/types/types';
+import { ComponentSize as ComponentSize$1 } from 'src/types/enums';
+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_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 * 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';
 import facepaint from 'facepaint';
 
+interface HurryUpProps {
+    hurryUpText: string;
+    backgroundColor?: string;
+    showTimer?: boolean;
+    iconSize?: number;
+    textPosition?: 'left' | 'right' | 'center';
+}
+declare const HurryUp: ({ hurryUpText, backgroundColor, iconSize, textPosition, showTimer, }: HurryUpProps) => JSX.Element;
+
+interface PackOption$1 {
+    label: string;
+    description: string;
+    meta: {
+        discountPercentage: number;
+        originalPrice: number;
+        price: number;
+        quantity: number;
+        icon: string;
+        tag?: string;
+    };
+}
+interface PackSelectorProps$1 {
+    packs: PackOption$1[];
+    selectedValue: PackOption$1;
+    onChange: (size: PackOption$1) => void;
+    currencyCode?: string;
+}
+declare const PackSelectorV2: FC<PackSelectorProps$1>;
+
+interface AbsorbencyLevelProps {
+    dropTotal: number;
+    drops: number;
+    absorbencyTitle: string;
+    absorbencyDescription: string;
+}
+declare const AbsorbencyLevel: ({ dropTotal, drops, absorbencyTitle, absorbencyDescription, }: AbsorbencyLevelProps) => JSX.Element;
+
 declare enum CardSectionType {
     Header = 0,
     Footer = 1
@@ -1115,305 +1152,156 @@ declare const Icon: {
     MyAccount: typeof MyAccount;
 };
 
-interface CardBodyProps {
-    children: ReactNode;
-}
-
-interface CardSectionProps {
-    children: ReactNode;
-}
+interface AccordionProps {
+    defaultOpen?: boolean;
+    forceOpenHandler?: boolean;
+    forceOpenValue?: boolean;
+    titleColor?: string;
+    variant: 'simple' | 'box';
+    header: ReactNode;
+    headerOnOpen?: ReactNode;
+    content: ReactNode;
+    disabled?: boolean;
+    innerHTML?: boolean;
+    controlIconPos?: 'right' | 'bottom';
+    backgroundCover?: {
+        value: boolean;
+        iconBgColor?: string;
+    };
+    openIcon: IconType;
+    closeIcon: IconType;
+    onClick?: (index: number) => void;
+}
+declare const Accordion: ({ header, headerOnOpen, content, defaultOpen, forceOpenHandler, forceOpenValue, titleColor, variant, disabled, innerHTML, backgroundCover, controlIconPos, openIcon, closeIcon, onClick, }: AccordionProps) => JSX.Element;
 
-interface borderProps {
-    borderColor: string;
-    borderWidth: string;
+interface AccordionOptionsProps {
+    titleColor: string;
+    accordions: AccordionProps[];
 }
-interface CardProps {
-    children: ReactNode;
-    backgroundColor?: string;
-    widthAuto?: boolean;
-    border?: borderProps;
-    flex?: boolean;
+declare const AccordionOptions: ({ titleColor, accordions }: AccordionOptionsProps) => JSX.Element;
+
+declare type AutoshipProps = {
+    singlePurchaseLabel: string;
+    subscriptionLabel: string;
+    tooltipContent?: {
+        text: string;
+        color?: string;
+    };
+    tooltipHeader?: {
+        title: string;
+    };
+    pricing?: {
+        originalPrice: number;
+        discountedPrice: number;
+        discountPercentage: number;
+    };
+    frequencyValues?: Array<number>;
+    frequencyUnit?: string;
+    autoshipBenefits: string[];
+    onChange: (values: {
+        subscriptionPeriod: number;
+        autoship: boolean;
+        originalPrice: number;
+        discountedPrice: number;
+    }) => void;
+};
+declare const Autoship: React.FC<AutoshipProps>;
+
+declare enum BeforeAfterVariant {
+    UserInfoText = "UserInfoText",
+    ResultFeedback = "ResultFeedback"
 }
-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;
+declare type NewSize = 'small' | 'medium' | 'large';
+declare const componentSizeMapper: {
+    [size in ComponentSize$1]: NewSize;
 };
 
-declare const ButtonPrimary: ({ testId, ...props }: CTAProps) => _emotion_react_jsx_runtime.JSX.Element;
-
-declare const ButtonSecondary: (props: CTAProps) => _emotion_react_jsx_runtime.JSX.Element;
+declare type BeforeAfterCardProps = {
+    name: string;
+    age?: string;
+    months?: string;
+    beforeImage: string;
+    afterImage: string;
+    alignCenter?: boolean;
+    imageBorderRadius?: string;
+    size?: ComponentSize$1;
+    variant?: BeforeAfterVariant;
+    description?: string;
+    reviewDays?: string;
+};
+declare const BeforeAfterCard: React__default.FC<BeforeAfterCardProps>;
 
-declare const ButtonSecondaryOutline: (props: CTAProps) => _emotion_react_jsx_runtime.JSX.Element;
+interface SimpleProps {
+    title: string;
+    freeShippingText: string;
+    price: string;
+    anyQtyForText: string;
+    backgroundColor: string;
+    widthAuto?: boolean;
+}
 
-declare type Value<T> = DropdownOption<T>;
-declare type OnChange<T> = (option: Value<T>) => void;
-declare type CommonProps<T> = {
-    options: Value<T>[];
-    disabled?: boolean;
-    wide?: boolean;
-    label?: string;
-    sort?: boolean;
-    initialValue?: Value<T>;
-    placeHolder: string;
+interface MinimalisticProps {
+    backgroundColor?: string;
+    borderColor?: string;
+    originalPrice: string;
+    price: string;
+    savingPrice: string;
+    getMorePayLessText: string;
+    youAreSavingText: string;
+    getQtyForText: string;
+    discount: number;
+    offText: string;
+    widthAuto?: boolean;
     testId?: string;
-    required?: string;
-    showRequiredPlaceholder?: boolean;
-};
-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, testId, required, showRequiredPlaceholder, }: SimpleDropdownProps<T>): JSX.Element;
+}
 
-interface DialogPositionProps {
-    top: string;
-    right: string;
-}
-interface DialogDropdownProps {
-    options: {
-        label: string;
-        value: string;
-    }[];
-    position: DialogPositionProps;
-    style?: React__default.CSSProperties;
-    className?: string;
-}
-declare const DropdownDialog: ({ options, position: { top, right }, style, className, }: DialogDropdownProps) => JSX.Element;
+declare const Bundle: {
+    Minimalistic: ({ backgroundColor, borderColor, originalPrice, price, savingPrice, getMorePayLessText, youAreSavingText, getQtyForText, discount, offText, widthAuto, testId, }: MinimalisticProps) => JSX.Element;
+    Simple: ({ title, freeShippingText, price, anyQtyForText, backgroundColor, widthAuto, }: SimpleProps) => JSX.Element;
+};
 
-interface SizeSelectorProps {
-    label: string;
-    sizes: SizeOption[];
-    selectedValue: SizeOption;
-    onChange: (size: SizeOption) => void;
-    inline?: boolean;
-    width?: string;
+interface BuyNowPayLaterProps {
+    displayBNPL: boolean;
+    installments: number;
+    installmentPrice: string;
+    iconFolder?: string;
+    iconName: string;
+    showLogo?: boolean;
+    iconColor?: string;
+    fontSize?: string;
 }
-declare const SizeSelector: ({ label, sizes, selectedValue, onChange, inline, width, }: SizeSelectorProps) => _emotion_react_jsx_runtime.JSX.Element;
+declare const BuyNowPayLater: ({ displayBNPL, installments, installmentPrice, iconFolder, iconName, showLogo, iconColor, fontSize, }: BuyNowPayLaterProps) => JSX.Element | null;
 
-interface SizeFitGuideProps {
-    title: string;
-    fitPercentage?: number;
+interface CloseButtonProps {
     onClick: () => void;
-    onClickFitPercentage?: () => void;
-}
-declare const SizeFitGuide: ({ title, fitPercentage, onClick, onClickFitPercentage, }: SizeFitGuideProps) => JSX.Element;
+    size: number;
+}
 
-interface BaseButtonProps {
-    children: React__default.ReactNode;
-    renderLeading?: React__default.ReactNode;
-    renderTrailing?: React__default.ReactNode;
-    disabled?: boolean;
-    type?: ButtonType;
-    onClick: () => void;
-    className?: string;
-    inline?: boolean;
-    uppercase?: boolean;
-    testId?: string;
-    id?: string;
+interface DescriptionProps {
+    text: string;
 }
 
-declare type BaseProps = Pick<BaseButtonProps, 'disabled' | 'type' | 'onClick'>;
-interface TextButtonProps$1 extends BaseProps {
+interface PromoProps {
     text: string;
-    LeadingIcon?: IconType;
-    TrailingIcon?: IconType;
-    iconColor?: string;
-    size?: ComponentSize;
-    uppercase?: boolean;
+}
+
+interface OfferBannerProps {
+    discountAppliedText: string;
+    backgroundColor: string;
 }
-declare const TextButton: ({ text, LeadingIcon, TrailingIcon, iconColor, disabled, type, size, uppercase, onClick, }: TextButtonProps$1) => _emotion_react_jsx_runtime.JSX.Element;
+declare const OfferBanner: ({ discountAppliedText, backgroundColor }: OfferBannerProps) => JSX.Element;
 
-interface DiscountTagProps {
-    discount: number;
-    offText: string;
-    savings?: string;
-    showSavings?: boolean;
-    disabled?: boolean;
-    backgroundColor?: string;
-    borderColor?: string;
-    textColor?: string;
-    size?: ComponentSize.Small | ComponentSize.Medium | ComponentSize.Large;
-    style?: React__default.CSSProperties;
-    bordersRounded?: boolean;
-}
-declare const DiscountTag: ({ discount, offText, savings, showSavings, disabled, backgroundColor, borderColor, textColor, size, style, bordersRounded, }: DiscountTagProps) => JSX.Element;
-
-interface ClubOfferTagProps {
-    clubOfferText?: string;
-    className?: string;
-    disabled?: boolean;
-    backgroundColor?: string;
-    borderColor?: string;
-    textColor?: string;
-    size?: ComponentSize.Small | ComponentSize.Medium | ComponentSize.Large;
-    style?: React__default.CSSProperties;
-}
-declare const ClubOfferTag: ({ clubOfferText, className, disabled, backgroundColor, borderColor, textColor, size, style, }: ClubOfferTagProps) => JSX.Element;
-
-interface PriceLabelProps {
-    finalPrice: string | number;
-    originalPrice?: string | number;
-    color?: string;
-    size?: ComponentSize.Small | ComponentSize.Medium | ComponentSize.Large;
-    discount?: DiscountTagProps;
-    clubOffer?: ClubOfferTagProps;
-    finalPriceStyled?: boolean;
-    finalPriceStyle?: React__default.CSSProperties;
-    originalPriceStyled?: boolean;
-    originalPriceUnderlined?: boolean;
-    testId?: string;
-    clubStyle?: boolean;
-    bordersRounded?: boolean;
-}
-declare const PriceLabel: React__default.FC<PriceLabelProps>;
-
-declare type Props = PriceLabelProps & {
-    savingsDisplay?: boolean;
-};
-declare const PriceLabelV2: React__default.FC<Props>;
-
-interface ColorPickerProps {
-    options: ColorPickerOption[];
-    selectedValue?: ColorPickerOption;
-    label: string;
-    onChange: (color: ColorPickerOption) => void;
-    inline?: boolean;
-}
-declare const SingleColorPicker: ({ options, selectedValue, label, onChange, inline, }: ColorPickerProps) => _emotion_react_jsx_runtime.JSX.Element;
-
-interface MultiColorPickerProps {
-    options?: ColorPickerOption[];
-    label: string;
-    selectedValue?: ColorPickerOption;
-    onChange: (color: Set<ColorPickerOption>) => void;
-}
-declare const MultiColorPicker: ({ options, label, selectedValue, onChange, }: MultiColorPickerProps) => JSX.Element;
-
-interface ProductGalleryProps {
-    images: ImageType[];
-    selectedValue?: ImageType;
-    topTag?: JSX.Element;
-    bottomTag?: JSX.Element;
-    productImageDataTestId?: string;
-    previewListDataTestId?: string;
-    thumbnailPosition?: 'vertical' | 'horizontal';
-    borderRadiusVariant?: boolean;
-    previewImgBorderColor?: string;
-    ctaText?: string;
-    ctaAction?: () => void;
-    hideCTA?: boolean;
-    hasOverflowArrows?: boolean;
-}
-declare const ProductGallery: ({ images, selectedValue, topTag, bottomTag, productImageDataTestId, previewListDataTestId, thumbnailPosition, borderRadiusVariant, previewImgBorderColor, ctaText, ctaAction, hideCTA, hasOverflowArrows, }: ProductGalleryProps) => JSX.Element;
-
-interface RatingProps {
-    rating: number;
-    size?: ComponentSize;
-    reviews?: number;
-    reviewsText?: string;
-    wrapWithParenthesis?: boolean;
-    underline?: boolean;
-    reviewsContainerId?: string;
-}
-declare const Rating: ({ size, reviews, reviewsText, rating, wrapWithParenthesis, underline, reviewsContainerId, }: RatingProps) => JSX.Element;
-
-interface FitPredictorProps {
-    onClick: () => void;
-}
-declare const FitPredictor: ({ onClick }: FitPredictorProps) => _emotion_react_jsx_runtime.JSX.Element;
-
-interface FitGuaranteeProps {
-    backgroundColor?: string;
-    borderColor?: string;
+interface TitleProps {
     title: string;
-    description: string;
-    widthAuto?: boolean;
-    testId?: string;
-    iconFolder?: string;
-    iconName?: string;
-    iconWidth?: number;
-    iconHeight?: number;
-}
-declare const FitGuarantee: ({ backgroundColor, borderColor, title, description, widthAuto, testId, iconFolder, iconName, iconWidth, iconHeight, }: FitGuaranteeProps) => JSX.Element | null;
-
-interface ProgressBarProps {
-    description?: string;
-    fillColor: string;
-    widthAuto?: boolean;
-    percent?: number;
-    height?: string;
-    backgroundColor?: string;
-    borderRadius?: string;
-}
-declare const ProgressBar: ({ description, fillColor, widthAuto, percent, height, backgroundColor, borderRadius, }: ProgressBarProps) => JSX.Element;
-
-interface MotivatorProgressBarProps {
-    fillColor?: string;
-    currentAmount?: number;
-    backgroundColor?: string;
-    unfilledColor?: string;
-    borderRadius?: string;
-    rewardUnlockedMessage: string;
-    endingValue?: number;
-    currencyCode?: string;
-}
-declare const MotivatorProgressBar: ({ fillColor, backgroundColor, unfilledColor, currencyCode, endingValue, currentAmount, rewardUnlockedMessage, }: MotivatorProgressBarProps) => JSX.Element;
-
-interface IconButtonProps {
-    children: React__default.ReactNode;
-    disabled?: boolean;
-    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__default.ReactNode;
-    position: ComponentPosition;
-    align?: 'start' | 'center' | 'end';
-    content?: {
-        text: string;
-        color?: string;
-    };
-    backgroundColor?: string;
-    maxWidth?: string;
-    header?: {
-        title: string;
-        titleColor?: string;
-        Icon?: IconType;
-        iconFill?: string;
-    };
-    onClick?: () => void;
-}
-declare const Tooltip: ({ children, position, content, backgroundColor, align, maxWidth, onClick, header, }: TooltipProps) => JSX.Element;
+}
 
-interface AccordionProps {
-    defaultOpen?: boolean;
-    forceOpenHandler?: boolean;
-    forceOpenValue?: boolean;
-    titleColor?: string;
-    variant: 'simple' | 'box';
-    header: ReactNode;
-    headerOnOpen?: ReactNode;
-    content: ReactNode;
-    disabled?: boolean;
-    innerHTML?: boolean;
-    controlIconPos?: 'right' | 'bottom';
-    backgroundCover?: {
-        value: boolean;
-        iconBgColor?: string;
-    };
-    openIcon: IconType;
-    closeIcon: IconType;
-    onClick?: (index: number) => void;
-}
-declare const Accordion: ({ header, headerOnOpen, content, defaultOpen, forceOpenHandler, forceOpenValue, titleColor, variant, disabled, innerHTML, backgroundCover, controlIconPos, openIcon, closeIcon, onClick, }: AccordionProps) => JSX.Element;
+declare const CartProductItem: {
+    Title: ({ title }: TitleProps) => JSX.Element;
+    Tag: ({ discountAppliedText, backgroundColor }: OfferBannerProps) => JSX.Element;
+    Promo: ({ text }: PromoProps) => JSX.Element;
+    Description: ({ text }: DescriptionProps) => JSX.Element;
+    CloseButton: ({ onClick, size }: CloseButtonProps) => JSX.Element;
+};
 
 declare const ThemeProvider: FC<{
     theme: Theme;
@@ -2187,119 +2075,434 @@ interface CheckboxProps {
 }
 declare const Checkbox: React__default.FC<CheckboxProps>;
 
-interface RadioProps$1 {
-    name: string;
-    value: string;
-    id: string;
-    label: string | ReactFragment;
-    size?: ComponentSize.Small | ComponentSize.Medium | ComponentSize.Large;
-    checked?: boolean;
-    disabled?: boolean;
-    onChange: (option: RadioGroupOption) => void;
-    style?: React__default.CSSProperties;
+interface ImageStyleProps {
+    height?: string;
+    width?: string;
+    borderRadius?: string;
+    objectFit?: string;
+    objectPosition?: string;
+    className?: string;
 }
-declare const RadioPrimary: ({ style, name, value, id, label, checked, disabled, onChange, size, }: RadioProps$1) => JSX.Element;
+interface ImageProps extends ImageStyleProps {
+    src: string;
+    alt: string;
+    srcSet?: string;
+    sizes?: string;
+    loading?: 'lazy' | 'eager';
+}
+declare const Image: ({ src, srcSet, sizes, loading, alt, height, width, borderRadius, objectFit, objectPosition, className, }: ImageProps) => JSX.Element;
 
-interface RadioGroupInputProps {
-    name: string;
-    options?: RadioGroupOption[];
-    value?: RadioGroupOption;
-    onChange: (value: RadioGroupOption) => void;
-    size?: ComponentSize.Small | ComponentSize.Medium | ComponentSize.Large;
+interface DiscountTagProps {
+    discount: number;
+    offText: string;
+    savings?: string;
+    showSavings?: boolean;
     disabled?: boolean;
+    backgroundColor?: string;
+    borderColor?: string;
+    textColor?: string;
+    size?: ComponentSize.Small | ComponentSize.Medium | ComponentSize.Large;
     style?: React__default.CSSProperties;
+    bordersRounded?: boolean;
 }
-declare const RadioGroupInput: ({ style, name, options, value, onChange, size, disabled, }: RadioGroupInputProps) => JSX.Element;
+declare const DiscountTag: ({ discount, offText, savings, showSavings, disabled, backgroundColor, borderColor, textColor, size, style, bordersRounded, }: DiscountTagProps) => JSX.Element;
 
-interface ClubRadioGroupInputProps {
-    name: string;
-    options?: RadioGroupOption[];
-    value?: RadioGroupOption;
-    onChange: (value: RadioGroupOption) => void;
-    size?: ComponentSize.Small | ComponentSize.Medium | ComponentSize.Large;
+interface ClubOfferTagProps {
+    clubOfferText?: string;
+    className?: string;
     disabled?: boolean;
+    backgroundColor?: string;
+    borderColor?: string;
+    textColor?: string;
+    size?: ComponentSize.Small | ComponentSize.Medium | ComponentSize.Large;
     style?: React__default.CSSProperties;
 }
-declare const ClubRadioGroupInput: ({ style, name, options, value, onChange, size, disabled, }: ClubRadioGroupInputProps) => JSX.Element;
+declare const ClubOfferTag: ({ clubOfferText, className, disabled, backgroundColor, borderColor, textColor, size, style, }: ClubOfferTagProps) => JSX.Element;
 
-interface SimpleProps {
-    title: string;
-    freeShippingText: string;
-    price: string;
-    anyQtyForText: string;
-    backgroundColor: string;
-    widthAuto?: boolean;
+interface PriceLabelProps {
+    finalPrice: string | number;
+    originalPrice?: string | number;
+    color?: string;
+    size?: ComponentSize.Small | ComponentSize.Medium | ComponentSize.Large;
+    discount?: DiscountTagProps;
+    clubOffer?: ClubOfferTagProps;
+    finalPriceStyled?: boolean;
+    finalPriceStyle?: React__default.CSSProperties;
+    originalPriceStyled?: boolean;
+    originalPriceUnderlined?: boolean;
+    testId?: string;
+    clubStyle?: boolean;
+    bordersRounded?: boolean;
+}
+declare const PriceLabel: React__default.FC<PriceLabelProps>;
+
+declare type Props = PriceLabelProps & {
+    savingsDisplay?: boolean;
+};
+declare const PriceLabelV2: React__default.FC<Props>;
+
+interface RatingProps {
+    rating: number;
+    size?: ComponentSize;
+    reviews?: number;
+    reviewsText?: string;
+    wrapWithParenthesis?: boolean;
+    underline?: boolean;
+    reviewsContainerId?: string;
+}
+declare const Rating: ({ size, reviews, reviewsText, rating, wrapWithParenthesis, underline, reviewsContainerId, }: RatingProps) => JSX.Element;
+
+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';
+    url?: string;
+    className?: string;
 }
 
-interface MinimalisticProps {
+interface ProductItemSmallMobileProps$1 extends ProductItemProps {
+    titleStyle?: Pick<TextProps$1, 'variant' | 'weight' | 'size'>;
+    ImageBorderRadius?: string;
+    hasSpacing?: boolean;
+    textContainerGap?: string;
+    customSizeRating?: ComponentSize.XSmall | ComponentSize.Small | ComponentSize.Medium | ComponentSize.Large | '';
+    size: ComponentSize.Medium | ComponentSize.Small | ComponentSize.Large;
+    imageHover?: ImageProps;
+    topTag?: JSX.Element;
+    bottomTag?: JSX.Element;
+    onClick?: () => void;
+    originalPriceStyled?: boolean;
+    priceDisplayType?: 'default' | 'styled';
+    priceAtBottom?: boolean;
+    priceLoading?: boolean;
+    noFollow?: boolean;
+    colorPicker?: {
+        display: boolean;
+        position: string;
+        component: JSX.Element | JSX.Element[] | undefined;
+    };
+    isBNPL?: {
+        displayBNPL: boolean;
+        installments: number;
+        installmentPrice: string;
+        iconFolder?: string;
+        iconName: string;
+        showLogo?: boolean;
+        iconColor: string;
+        fontSize: string;
+    };
+    hasStrength?: {
+        strength: number;
+        description: string;
+    };
+    clubPrice?: string;
+    showClubPriceLabel?: boolean;
+}
+
+interface ProductItemSmallMobileProps extends ProductItemProps {
+    size: ComponentSize.Medium | ComponentSize.Small | ComponentSize.Large;
+    imageHover?: ImageProps;
+    topTag?: JSX.Element;
+    bottomTag?: JSX.Element;
+    onClick?: () => void;
+    priceDisplayType?: 'default' | 'styled';
+    priceAtBottom?: boolean;
+    priceLoading?: boolean;
+    noFollow?: boolean;
+    colorPicker?: {
+        display: boolean;
+        position: string;
+        component: JSX.Element | JSX.Element[] | undefined;
+    };
+    isBNPL?: {
+        displayBNPL: boolean;
+        installments: number;
+        installmentPrice: string;
+        iconFolder?: string;
+        iconName: string;
+        showLogo?: boolean;
+        iconColor: string;
+        fontSize: string;
+    };
+    hasStrength?: {
+        strength: number;
+        description: string;
+    };
+    clubPrice?: string;
+    showClubPriceLabel?: boolean;
+    isRatingLoading?: boolean;
+}
+
+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: React$1.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;
+};
+
+interface MultiColorPickerProps {
+    options?: ColorPickerOption[];
+    label: string;
+    selectedValue?: ColorPickerOption;
+    onChange: (color: Set<ColorPickerOption>) => void;
+}
+declare const MultiColorPicker: ({ options, label, selectedValue, onChange, }: MultiColorPickerProps) => JSX.Element;
+
+interface ColorPickerProps {
+    options: ColorPickerOption[];
+    selectedValue?: ColorPickerOption;
+    label: string;
+    onChange: (color: ColorPickerOption) => void;
+    inline?: boolean;
+}
+declare const SingleColorPicker: ({ options, selectedValue, label, onChange, inline, }: ColorPickerProps) => _emotion_react_jsx_runtime.JSX.Element;
+
+interface CrossSellCheckboxProps extends rightToLeftProps {
+    imageURL: string;
+    title: string;
+    description: string;
+    freeShippingText: string;
+    onChange: (checked: Boolean) => void;
+}
+interface rightToLeftProps {
+    rightToLeft: boolean;
+}
+declare const CrossSellCheckbox: ({ imageURL, title, description, freeShippingText, rightToLeft, onChange, }: CrossSellCheckboxProps) => JSX.Element;
+
+type index_d_CrossSellCheckboxProps = CrossSellCheckboxProps;
+declare const index_d_CrossSellCheckbox: typeof CrossSellCheckbox;
+declare namespace index_d {
+  export {
+    index_d_CrossSellCheckboxProps as CrossSellCheckboxProps,
+    index_d_CrossSellCheckbox as CrossSellCheckbox,
+  };
+}
+
+declare const ButtonPrimary: ({ testId, ...props }: CTAProps) => _emotion_react_jsx_runtime.JSX.Element;
+
+declare const ButtonSecondary: (props: CTAProps) => _emotion_react_jsx_runtime.JSX.Element;
+
+declare const ButtonSecondaryOutline: (props: CTAProps) => _emotion_react_jsx_runtime.JSX.Element;
+
+declare type detail = {
+    title: string;
+    details: string;
+};
+interface orderUpdate extends detail {
+    keepMeUpdated?: {
+        title: string;
+        onClick: () => void;
+    };
+}
+interface DeliveryDetailsProps {
+    deliveryDetailsText: string;
+    arrivingBy: detail;
+    shippingTo: detail;
+    instantOrderUpdate: orderUpdate;
+    note?: {
+        importantNoteText: string;
+        text: string;
+        accentColor?: string;
+        backgroundColor?: string;
+        color?: string;
+    };
+}
+declare const DeliveryDetails: ({ deliveryDetailsText, arrivingBy, shippingTo, instantOrderUpdate, note, }: DeliveryDetailsProps) => JSX.Element;
+
+interface NoteProps {
+    accentColor?: string;
+    color?: string;
+    backgroundColor?: string;
+    importantNoteText: string;
+    text: string;
+}
+declare const Note: ({ accentColor, color, backgroundColor, importantNoteText, text, }: NoteProps) => JSX.Element;
+
+interface DrawerProps {
+    children: React__default.ReactNode;
+    isOpen: boolean;
+    onClose?: () => void;
+    onOpen?: () => void;
+    onClickOutside?: (event: React__default.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 DropdownListIconsProps {
+    items: DropdownListIconsItem[];
+}
+declare const DropdownListIcons: ({ items }: DropdownListIconsProps) => JSX.Element;
+
+interface DropdownProps {
+    options: SelectedOption[];
+    defaultLabel: string;
+    onOptionSelect: (option: string) => void;
+}
+interface SelectedOption {
+    size: string;
+    detail: string;
+}
+declare const SizeDropdown: React__default.FC<DropdownProps>;
+
+interface DialogPositionProps {
+    top: string;
+    right: string;
+}
+interface DialogDropdownProps {
+    options: {
+        label: string;
+        value: string;
+    }[];
+    position: DialogPositionProps;
+    style?: React__default.CSSProperties;
+    className?: string;
+}
+declare const DropdownDialog: ({ options, position: { top, right }, style, className, }: DialogDropdownProps) => 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;
+
+declare type Value<T> = DropdownOption<T>;
+declare type OnChange<T> = (option: Value<T>) => void;
+declare type CommonProps<T> = {
+    options: Value<T>[];
+    disabled?: boolean;
+    wide?: boolean;
+    label?: string;
+    sort?: boolean;
+    initialValue?: Value<T>;
+    placeHolder: string;
+    testId?: string;
+    required?: string;
+    showRequiredPlaceholder?: boolean;
+};
+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, testId, required, showRequiredPlaceholder, }: SimpleDropdownProps<T>): JSX.Element;
+
+interface FiltersProps {
+    values: Filter[];
+    onChange: (newValues: Filter[], filtersState?: FilterChange) => void;
+    tagsColor?: string;
+    filterByText: string;
+    clearAllText: string;
+    filtersSelectText: string;
+    isMobile: boolean;
+    applyText: string;
+    mobileBackArrowClick: () => void;
+    mobileApplyButtonClick: () => void;
+    onResetValues: () => void;
+}
+declare const Filters: ({ values, onChange, tagsColor, filterByText, clearAllText, isMobile, filtersSelectText, applyText, mobileApplyButtonClick, mobileBackArrowClick, onResetValues, }: FiltersProps) => JSX.Element;
+
+interface TagsProps {
+    color?: string;
+    items: string[];
+    onCloseClick: (index: number) => void;
+}
+declare const Tags: ({ color, items, onCloseClick }: TagsProps) => JSX.Element;
+
+interface FitGuaranteeProps {
     backgroundColor?: string;
     borderColor?: string;
-    originalPrice: string;
-    price: string;
-    savingPrice: string;
-    getMorePayLessText: string;
-    youAreSavingText: string;
-    getQtyForText: string;
-    discount: number;
-    offText: string;
+    title: string;
+    description: string;
     widthAuto?: boolean;
     testId?: string;
-}
-
-declare const Bundle: {
-    Minimalistic: ({ backgroundColor, borderColor, originalPrice, price, savingPrice, getMorePayLessText, youAreSavingText, getQtyForText, discount, offText, widthAuto, testId, }: MinimalisticProps) => JSX.Element;
-    Simple: ({ title, freeShippingText, price, anyQtyForText, backgroundColor, widthAuto, }: SimpleProps) => JSX.Element;
-};
+    iconFolder?: string;
+    iconName?: string;
+    iconWidth?: number;
+    iconHeight?: number;
+}
+declare const FitGuarantee: ({ backgroundColor, borderColor, title, description, widthAuto, testId, iconFolder, iconName, iconWidth, iconHeight, }: FitGuaranteeProps) => JSX.Element | null;
 
-interface CategoryTagProps {
-    text: string;
-    size: ComponentSize.Large | ComponentSize.Medium | ComponentSize.Small;
-    className?: string;
-    styledBorder?: boolean;
+interface FitPredictorProps {
+    onClick: () => void;
 }
-declare const CategoryTag: ({ text, size, className, styledBorder }: CategoryTagProps) => _emotion_react_jsx_runtime.JSX.Element;
+declare const FitPredictor: ({ onClick }: FitPredictorProps) => _emotion_react_jsx_runtime.JSX.Element;
 
-interface CategorySquareTagProps {
-    text: string;
-    size: ComponentSize.Large | ComponentSize.Medium | ComponentSize.Small;
-    className?: string;
-    styledBorder?: boolean;
+interface ProductGalleryProps {
+    images: ImageType[];
+    selectedValue?: ImageType;
+    topTag?: JSX.Element;
+    bottomTag?: JSX.Element;
+    productImageDataTestId?: string;
+    previewListDataTestId?: string;
+    thumbnailPosition?: 'vertical' | 'horizontal';
+    borderRadiusVariant?: boolean;
+    previewImgBorderColor?: string;
+    ctaText?: string;
+    ctaAction?: () => void;
+    hideCTA?: boolean;
+    hasOverflowArrows?: boolean;
 }
-declare const CategorySquareTag: ({ text, size, className, styledBorder, }: CategorySquareTagProps) => _emotion_react_jsx_runtime.JSX.Element;
+declare const ProductGallery: ({ images, selectedValue, topTag, bottomTag, productImageDataTestId, previewListDataTestId, thumbnailPosition, borderRadiusVariant, previewImgBorderColor, ctaText, ctaAction, hideCTA, hasOverflowArrows, }: ProductGalleryProps) => JSX.Element;
 
-interface SeasonOfferTagProps {
-    text: string;
-    backgroundColor?: string;
-    size: ComponentSize.Large | ComponentSize.Medium | ComponentSize.Small;
-    className?: string;
-    styledBorder?: boolean;
-    bottomRightBorderRounded?: string;
-    allBordersRounded?: {
-        value: string;
-        size?: ComponentSize;
-    };
-    color?: string;
+interface IconButtonProps {
+    children: React__default.ReactNode;
+    disabled?: boolean;
+    onClick?: (event: React__default.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    size?: ComponentSize.Small | ComponentSize.Medium | ComponentSize.Large;
 }
-declare const SeasonOfferTag: ({ text, backgroundColor, size, className, styledBorder, bottomRightBorderRounded, allBordersRounded, color, }: SeasonOfferTagProps) => _emotion_react_jsx_runtime.JSX.Element;
+declare const IconButton: ({ children, disabled, size, onClick, }: IconButtonProps) => JSX.Element;
 
-interface SeasonOfferRoundedTagProps {
-    text: string;
-    backgroundColor?: string;
-    size: ComponentSize;
-    className?: string;
+interface AmazonPaypalBtnProps {
+    onClick: () => void;
 }
-declare const SeasonOfferRoundedTag: ({ text, backgroundColor, size, className, }: SeasonOfferRoundedTagProps) => _emotion_react_jsx_runtime.JSX.Element;
+declare const AmazonButton: ({ onClick }: AmazonPaypalBtnProps) => JSX.Element;
+declare const PaypalButton: ({ onClick }: AmazonPaypalBtnProps) => JSX.Element;
 
-interface TimeProps {
-    hours: number;
-    minutes: number;
-    seconds: number;
+interface IconsWithTitleProps {
+    backgroundColor: string;
+    iconColor: string;
+    iconName: string;
+    iconFolder?: string;
+    withWrapper?: boolean;
+    iconTitle: string;
+    iconSizeDesktop?: number;
+    iconSizeMobile?: number;
+    iconTitlePosition?: 'top' | 'bottom' | 'left' | 'right';
+    iconTitleStyle?: string;
+    iconStyle?: string;
+    isTitleInnerHtml?: boolean;
 }
-interface TimerProps extends TimeProps {
-    onTimeUp: () => void;
-    displayZeroValues?: boolean;
+declare const IconsWithTitle: ({ iconName, iconTitle, iconFolder, withWrapper, backgroundColor, iconColor, iconSizeDesktop, iconSizeMobile, iconTitlePosition, iconTitleStyle, iconStyle, isTitleInnerHtml, }: IconsWithTitleProps) => JSX.Element | null;
+
+interface ImageCardWithDescriptionProps {
+    image: string;
+    title?: string;
+    description?: string;
+    titlePosition?: 'center' | 'left';
 }
-declare const Timer: ({ onTimeUp, displayZeroValues, ...rest }: TimerProps) => JSX.Element;
+declare const ImageCardWithDescription: ({ image, title, description, titlePosition, }: ImageCardWithDescriptionProps) => JSX.Element;
 
 interface BaseInputCommonProps {
     id?: string;
@@ -2371,87 +2574,64 @@ declare const Input: {
     SimplePlusIcon: ({ Icon, ...rest }: BasePlusIconProps) => JSX.Element;
 };
 
-interface PaymentMethodsProps {
-    Icon: IconType;
-    width: string;
-    height: string;
-    onClick?: () => void;
+interface ProductGalleryMobileProps$1 {
+    images: ImageType[];
+    customClick?: boolean;
+    topTag?: JSX.Element;
+    bottomTag?: JSX.Element;
+    productImageDataTestId?: string;
+    borderRadiusVariant?: boolean;
+    selectedValue?: ImageType;
 }
-declare const PaymentMethod: ({ Icon, width, height, onClick }: PaymentMethodsProps) => JSX.Element;
+declare const ProductGalleryMobile: ({ images, customClick, topTag, bottomTag, productImageDataTestId, borderRadiusVariant, selectedValue, }: ProductGalleryMobileProps$1) => JSX.Element;
 
-interface OfferBannerProps {
-    discountAppliedText: string;
-    backgroundColor: string;
+interface ProductGalleryMobileProps {
+    images: ImageType[];
+    selectedValue?: ImageType;
+    topTag?: JSX.Element;
+    bottomTag?: JSX.Element;
+    productImageDataTestId?: string;
+    slideDotsDataTestId?: string;
+    borderRadiusVariant?: boolean;
 }
-declare const OfferBanner: ({ discountAppliedText, backgroundColor }: OfferBannerProps) => JSX.Element;
-
-declare type SubtotalOption = {
-    label: string;
-    value: string;
-};
-declare type Coupon = {
-    code: string;
-    amount: string;
-};
-interface SubtotalProps {
-    subtotal: SubtotalOption;
-    shipping: SubtotalOption;
-    taxes: SubtotalOption;
-    highlightColor?: string;
-    coupon?: {
-        couponText: string;
-        appliedText: string;
-        coupons: Coupon[];
-    };
-}
-
-interface TotalProps {
-    total: string;
-    currency: string;
-    highlightColor?: string;
-    saving?: {
-        amount: string;
-        savingText: string;
-    };
-}
-
-declare const Totals: {
-    Total: ({ total, currency, saving, highlightColor }: TotalProps) => JSX.Element;
-    Subtotal: ({ subtotal, shipping, taxes, coupon, highlightColor, }: SubtotalProps) => JSX.Element;
-};
+declare const ProductGalleryMobileV2: ({ images, selectedValue, topTag, bottomTag, productImageDataTestId, slideDotsDataTestId, borderRadiusVariant, }: ProductGalleryMobileProps) => JSX.Element;
 
-declare type detail = {
-    title: string;
-    details: string;
+declare type ModalProps = {
+    id: string;
+    dismissable?: boolean;
+    maxFullScreen?: boolean;
+    padding?: string;
+    children: React__default.ReactNode;
 };
-interface orderUpdate extends detail {
-    keepMeUpdated?: {
-        title: string;
-        onClick: () => void;
-    };
-}
-interface DeliveryDetailsProps {
-    deliveryDetailsText: string;
-    arrivingBy: detail;
-    shippingTo: detail;
-    instantOrderUpdate: orderUpdate;
-    note?: {
-        importantNoteText: string;
-        text: string;
-        accentColor?: string;
-        backgroundColor?: string;
-        color?: string;
-    };
+interface ContainerProps {
+    maxFullScreen: boolean;
+    opened?: boolean;
+    padding?: string;
 }
-declare const DeliveryDetails: ({ deliveryDetailsText, arrivingBy, shippingTo, instantOrderUpdate, note, }: DeliveryDetailsProps) => JSX.Element;
+declare const Overlay: _emotion_styled.StyledComponent<{
+    theme?: _emotion_react.Theme | undefined;
+    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;
+declare const useModal: (id: string) => {
+    opened: boolean;
+    open: () => void;
+    close: () => void;
+};
 
-interface ScrollToTopProps {
-    scrollToTopText: string;
-    onClick: () => void;
-    fill?: string;
-    Icon?: React__default.FC<IconProps$1>;
+interface MotivatorProgressBarProps {
+    fillColor?: string;
+    currentAmount?: number;
+    backgroundColor?: string;
+    unfilledColor?: string;
+    borderRadius?: string;
+    rewardUnlockedMessage: string;
+    endingValue?: number;
+    currencyCode?: string;
 }
-declare const ScrollToTop: ({ scrollToTopText, onClick, fill, Icon, }: ScrollToTopProps) => JSX.Element;
+declare const MotivatorProgressBar: ({ fillColor, backgroundColor, unfilledColor, currencyCode, endingValue, currentAmount, rewardUnlockedMessage, }: MotivatorProgressBarProps) => JSX.Element;
 
 interface OrderBarProps {
     message: string;
@@ -2459,19 +2639,47 @@ interface OrderBarProps {
 }
 declare const OrderBar: ({ message, color }: OrderBarProps) => JSX.Element;
 
-interface TableProps$1 {
-    headers: string[];
-    data: string[][];
-    className?: string;
+interface PackOption {
+    label: string;
+    description: string;
+    meta: {
+        discountPercentage: number;
+        originalPrice: number;
+        price: number;
+        quantity: number;
+        icon: string;
+        tag?: string;
+    };
+}
+interface PackSelectorProps {
+    packs: PackOption[];
+    selectedValue: PackOption;
+    onChange: (size: PackOption) => void;
+    currencyCode?: string;
 }
-declare const SizeTable: ({ headers, data, className }: TableProps$1) => JSX.Element;
+declare const PackSelector: FC<PackSelectorProps>;
 
-interface TableProps {
-    headers: string[];
-    data: string[][];
-    newSizeTableCss?: boolean;
+interface PaginationProps {
+    from: number;
+    to: number;
+    onChange: (page: number) => void;
+    currentPage?: number;
+    underlineActive?: boolean;
+    boldActive?: boolean;
+    disabled?: boolean;
+    showReducedPages?: boolean;
+}
+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;
+
+interface PaymentMethodsProps {
+    Icon: IconType;
+    width: string;
+    height: string;
+    onClick?: () => void;
 }
-declare const SizeChartTable: ({ headers, data, newSizeTableCss }: TableProps) => JSX.Element;
+declare const PaymentMethod: ({ Icon, width, height, onClick }: PaymentMethodsProps) => JSX.Element;
 
 interface Price extends Pick<PriceLabelProps, 'finalPrice' | 'originalPrice'> {
     color?: string;
@@ -2494,7 +2702,118 @@ interface ProductOrderItemProps {
 }
 declare const SimpleOrderItem: ({ title, className, subtitle, image, price, tag, quantity, finalPriceStyle, }: ProductOrderItemProps) => JSX.Element;
 
+interface ProgressBarProps {
+    description?: string;
+    fillColor: string;
+    widthAuto?: boolean;
+    percent?: number;
+    height?: string;
+    backgroundColor?: string;
+    borderRadius?: string;
+}
+declare const ProgressBar: ({ description, fillColor, widthAuto, percent, height, backgroundColor, borderRadius, }: ProgressBarProps) => JSX.Element;
+
+declare type QuantityPickerPropsOnChange = (value: number) => void;
+declare type QuantityPickerPropsControlled = {
+    value: number;
+    onChange: QuantityPickerPropsOnChange;
+};
+declare type QuantityPickerPropsUncontrolled = {
+    value?: never;
+    onChange?: QuantityPickerPropsOnChange;
+};
+declare type QuantityPickerProps = {
+    initialValue?: number;
+    maxValue?: number;
+    testId?: string;
+} & (QuantityPickerPropsControlled | QuantityPickerPropsUncontrolled);
+declare const QuantityPicker: ({ initialValue, maxValue, value, testId, onChange, }: QuantityPickerProps) => JSX.Element;
+
+interface RadioProps$1 {
+    name: string;
+    value: string;
+    id: string;
+    label: string | ReactFragment;
+    size?: ComponentSize.Small | ComponentSize.Medium | ComponentSize.Large;
+    checked?: boolean;
+    disabled?: boolean;
+    onChange: (option: RadioGroupOption) => void;
+    style?: React__default.CSSProperties;
+}
+declare const RadioPrimary: ({ style, name, value, id, label, checked, disabled, onChange, size, }: RadioProps$1) => JSX.Element;
+
+interface RadioGroupInputProps {
+    name: string;
+    options?: RadioGroupOption[];
+    value?: RadioGroupOption;
+    onChange: (value: RadioGroupOption) => void;
+    size?: ComponentSize.Small | ComponentSize.Medium | ComponentSize.Large;
+    disabled?: boolean;
+    style?: React__default.CSSProperties;
+}
+declare const RadioGroupInput: ({ style, name, options, value, onChange, size, disabled, }: RadioGroupInputProps) => JSX.Element;
+
+interface ClubRadioGroupInputProps {
+    name: string;
+    options?: RadioGroupOption[];
+    value?: RadioGroupOption;
+    onChange: (value: RadioGroupOption) => void;
+    size?: ComponentSize.Small | ComponentSize.Medium | ComponentSize.Large;
+    disabled?: boolean;
+    style?: React__default.CSSProperties;
+}
+declare const ClubRadioGroupInput: ({ style, name, options, value, onChange, size, disabled, }: ClubRadioGroupInputProps) => JSX.Element;
+
+interface RadioProps {
+    name: string;
+    value: string;
+    id: string;
+    label: string | ReactFragment;
+    size?: ComponentSize.Small | ComponentSize.Medium | ComponentSize.Large;
+    checked?: boolean;
+    disabled?: boolean;
+    onChange: (option: RadioGroupOption) => void;
+    style?: React__default.CSSProperties;
+}
+declare const RadioInput: ({ style, name, value, id, label, checked, disabled, onChange, size, }: RadioProps) => JSX.Element;
+
+interface StarListProps {
+    rating: number;
+    size?: ComponentSize;
+    starsNumber: number;
+    fill: string;
+}
+declare const StarList: ({ rating, starsNumber, fill, size, }: StarListProps) => JSX.Element;
+
 interface ReviewProps$1 {
+    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$1: ({ reviewId, reviewerName, date, rating, stars, title, description, image, modalId, maxFullScreen, verified, productImage, productTitle, productLink, helpfulCount, helpfulAction, notHelpfulCount, notHelpfulAction, }: ReviewProps$1) => JSX.Element;
+
+interface ReviewProps {
     reviewId: string;
     reviewerName: string;
     date: Date;
@@ -2515,193 +2834,151 @@ interface ReviewProps$1 {
     helpfulAction?: (id: string) => void;
     helpfulCount?: number;
 }
-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>;
-    infinite: boolean;
-    adaptiveHeight: boolean;
-    dotsSize?: ComponentSize.Large | ComponentSize.Medium | ComponentSize.Small;
-    dotListMarginTop?: number;
-    initialSlide?: number;
-    arrows?: {
-        arrowWidth: number;
-        arrowHeight: number;
-        arrowPadding: number;
-    };
-    dots?: boolean;
-    slidesToShow?: number;
-    speed?: number;
-}
-declare const SliderNavigation: ({ children, infinite, arrows, adaptiveHeight, dotsSize, dotListMarginTop, initialSlide, dots, slidesToShow, speed, }: SliderNavigationProps) => _emotion_react_jsx_runtime.JSX.Element;
-
-interface DropdownListIconsProps {
-    items: DropdownListIconsItem[];
-}
-declare const DropdownListIcons: ({ items }: DropdownListIconsProps) => JSX.Element;
+declare const Review: ({ reviewId, reviewerName, date, rating, stars, title, description, images, reviewVariant, onClickImage, helpfulActionText, helpfulAction, helpfulCount, }: ReviewProps) => JSX.Element;
 
-interface ImageStyleProps {
-    height?: string;
-    width?: string;
-    borderRadius?: string;
-    objectFit?: string;
-    objectPosition?: string;
-    className?: string;
-}
-interface ImageProps extends ImageStyleProps {
-    src: string;
-    alt: string;
-    srcSet?: string;
-    sizes?: string;
-    loading?: 'lazy' | 'eager';
+interface ReviewsHeaderProps {
+    title?: string;
+    rating: number;
+    reviews: number;
+    reviewsText: string;
+    reviewsSummary: string[];
+    onClickReview: (reveiw: string) => void;
 }
-declare const Image: ({ src, srcSet, sizes, loading, alt, height, width, borderRadius, objectFit, objectPosition, className, }: ImageProps) => JSX.Element;
+declare const ReviewsHeader: ({ title, rating, reviews, reviewsText, reviewsSummary, onClickReview, }: ReviewsHeaderProps) => JSX.Element;
 
-interface AmazonPaypalBtnProps {
+interface ScrollToTopProps {
+    scrollToTopText: string;
     onClick: () => void;
+    fill?: string;
+    Icon?: React__default.FC<IconProps$1>;
 }
-declare const AmazonButton: ({ onClick }: AmazonPaypalBtnProps) => JSX.Element;
-declare const PaypalButton: ({ onClick }: AmazonPaypalBtnProps) => JSX.Element;
-
-interface CrossSellCheckboxProps extends rightToLeftProps {
-    imageURL: string;
-    title: string;
-    description: string;
-    freeShippingText: string;
-    onChange: (checked: Boolean) => void;
-}
-interface rightToLeftProps {
-    rightToLeft: boolean;
-}
-declare const CrossSellCheckbox: ({ imageURL, title, description, freeShippingText, rightToLeft, onChange, }: CrossSellCheckboxProps) => JSX.Element;
-
-type index_d_CrossSellCheckboxProps = CrossSellCheckboxProps;
-declare const index_d_CrossSellCheckbox: typeof CrossSellCheckbox;
-declare namespace index_d {
-  export {
-    index_d_CrossSellCheckboxProps as CrossSellCheckboxProps,
-    index_d_CrossSellCheckbox as CrossSellCheckbox,
-  };
-}
-
-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';
-    url?: string;
-    className?: string;
-}
+declare const ScrollToTop: ({ scrollToTopText, onClick, fill, Icon, }: ScrollToTopProps) => JSX.Element;
 
-interface ProductItemSmallMobileProps$1 extends ProductItemProps {
-    titleStyle?: Pick<TextProps$1, 'variant' | 'weight' | 'size'>;
-    ImageBorderRadius?: string;
-    hasSpacing?: boolean;
-    textContainerGap?: string;
-    customSizeRating?: ComponentSize.XSmall | ComponentSize.Small | ComponentSize.Medium | ComponentSize.Large | '';
-    size: ComponentSize.Medium | ComponentSize.Small | ComponentSize.Large;
-    imageHover?: ImageProps;
-    topTag?: JSX.Element;
-    bottomTag?: JSX.Element;
-    onClick?: () => void;
-    originalPriceStyled?: boolean;
-    priceDisplayType?: 'default' | 'styled';
-    priceAtBottom?: boolean;
-    priceLoading?: boolean;
-    noFollow?: boolean;
-    colorPicker?: {
-        display: boolean;
-        position: string;
-        component: JSX.Element | JSX.Element[] | undefined;
-    };
-    isBNPL?: {
-        displayBNPL: boolean;
-        installments: number;
-        installmentPrice: string;
-        iconFolder?: string;
-        iconName: string;
-        showLogo?: boolean;
-        iconColor: string;
-        fontSize: string;
-    };
-    hasStrength?: {
-        strength: number;
-        description: string;
-    };
-    clubPrice?: string;
-    showClubPriceLabel?: boolean;
+interface SearchBarProps {
+    suggestions: SearchBarOptionItem[];
+    resultOptions: SearchBarOptionItem[];
+    onChange: (text: string) => void;
+    onSearch: (term: string) => void;
+    onClose: () => void;
+    resultsPanelDataTestId?: string;
+    allResults?: number;
+    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, ariaLabel, placeholder, id, autoComplete, }: SearchBarProps) => JSX.Element;
+
+interface SearchNavigationProps {
+    returnText?: string;
+    returnUrl?: string;
+    steps?: string[];
+    returnAction?: () => void;
+}
+declare const SearchNavigation: ({ returnText, returnUrl, steps, returnAction, }: SearchNavigationProps) => JSX.Element;
+
+interface CardBodyProps {
+    children: ReactNode;
 }
 
-interface ProductItemSmallMobileProps extends ProductItemProps {
-    size: ComponentSize.Medium | ComponentSize.Small | ComponentSize.Large;
-    imageHover?: ImageProps;
-    topTag?: JSX.Element;
-    bottomTag?: JSX.Element;
-    onClick?: () => void;
-    priceDisplayType?: 'default' | 'styled';
-    priceAtBottom?: boolean;
-    priceLoading?: boolean;
-    noFollow?: boolean;
-    colorPicker?: {
-        display: boolean;
-        position: string;
-        component: JSX.Element | JSX.Element[] | undefined;
-    };
-    isBNPL?: {
-        displayBNPL: boolean;
-        installments: number;
-        installmentPrice: string;
-        iconFolder?: string;
-        iconName: string;
-        showLogo?: boolean;
-        iconColor: string;
-        fontSize: string;
-    };
-    hasStrength?: {
-        strength: number;
-        description: string;
-    };
-    clubPrice?: string;
-    showClubPriceLabel?: boolean;
-    isRatingLoading?: boolean;
+interface CardSectionProps {
+    children: ReactNode;
 }
 
-declare function withProductGrid<P extends ProductItemProps>(ProductItemComponent: React__default.FC<P>, data: ProductItemProps[]): {
-    (props: Omit<P, 'title' | 'image' | 'price' | 'rating'>): JSX.Element;
-    displayName: string;
+interface borderProps {
+    borderColor: string;
+    borderWidth: string;
+}
+interface CardProps {
+    children: ReactNode;
+    backgroundColor?: string;
+    widthAuto?: boolean;
+    border?: borderProps;
+    flex?: boolean;
+}
+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;
 };
 
-declare const Collection: {
-    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;
-};
+declare type PortalProps = {
+    id: string;
+    className?: string;
+    overflow?: boolean;
+    style?: CSSProperties;
+};
+declare const Portal: FC<PortalProps>;
 
-interface StarListProps {
-    rating: number;
-    size?: ComponentSize;
-    starsNumber: number;
-    fill: string;
+declare type SpacingProps = {
+    size: number;
+    type?: 'block' | 'inline';
+    style?: CSSProperties;
+};
+declare const Spacing: FC<SpacingProps>;
+
+interface ShortBannerProps {
+    title: string;
+    bannerText: string;
+    backgroundColor: string;
+    alignCenter?: boolean;
+    widthAuto?: boolean;
+    textColor: string;
 }
-declare const StarList: ({ rating, starsNumber, fill, size, }: StarListProps) => JSX.Element;
+declare const ShortBanner: ({ textColor, title, bannerText, backgroundColor, alignCenter, widthAuto, }: ShortBannerProps) => JSX.Element;
 
-interface DrawerProps {
-    children: React__default.ReactNode;
-    isOpen: boolean;
-    onClose?: () => void;
-    onOpen?: () => void;
-    onClickOutside?: (event: React__default.MouseEvent<HTMLDivElement, MouseEvent>) => void;
-    backgroundColor?: string;
-    backdropColor?: string;
-    position?: 'left' | 'right';
+interface TableProps$1 {
+    headers: string[];
+    data: string[][];
+    newSizeTableCss?: boolean;
+}
+declare const SizeChartTable: ({ headers, data, newSizeTableCss }: TableProps$1) => JSX.Element;
+
+interface TableProps {
+    headers: string[];
+    data: string[][];
+    className?: string;
+}
+declare const SizeTable: ({ headers, data, className }: TableProps) => JSX.Element;
+
+interface SizeFitGuideProps {
+    title: string;
+    fitPercentage?: number;
+    onClick: () => void;
+    onClickFitPercentage?: () => void;
+}
+declare const SizeFitGuide: ({ title, fitPercentage, onClick, onClickFitPercentage, }: SizeFitGuideProps) => JSX.Element;
+
+interface SizeSelectorProps {
+    label: string;
+    sizes: SizeOption[];
+    selectedValue: SizeOption;
+    onChange: (size: SizeOption) => void;
+    inline?: boolean;
     width?: string;
 }
-declare const Drawer: ({ children, isOpen, onClose, onOpen, backgroundColor, backdropColor, position, width, onClickOutside, }: DrawerProps) => JSX.Element | null;
+declare const SizeSelector: ({ label, sizes, selectedValue, onChange, inline, width, }: SizeSelectorProps) => _emotion_react_jsx_runtime.JSX.Element;
+
+interface SliderNavigationProps {
+    children: JSX.Element | JSX.Element[] | StyledComponent<any>;
+    infinite: boolean;
+    adaptiveHeight: boolean;
+    dotsSize?: ComponentSize.Large | ComponentSize.Medium | ComponentSize.Small;
+    dotListMarginTop?: number;
+    initialSlide?: number;
+    arrows?: {
+        arrowWidth: number;
+        arrowHeight: number;
+        arrowPadding: number;
+    };
+    dots?: boolean;
+    slidesToShow?: number;
+    speed?: number;
+}
+declare const SliderNavigation: ({ children, infinite, arrows, adaptiveHeight, dotsSize, dotListMarginTop, initialSlide, dots, slidesToShow, speed, }: SliderNavigationProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 interface SpinnerProps {
     fill: string;
@@ -2713,37 +2990,99 @@ interface SpinnerProps {
 }
 declare const Spinner: ({ fill, background, animationDuration, complete, completeIconStroke, size, }: SpinnerProps) => JSX.Element;
 
-interface TagsProps {
+interface StrengthBarProps {
+    barsFilled?: number;
+    supportText?: string;
+}
+declare const StrengthBars: ({ barsFilled, supportText }: StrengthBarProps) => JSX.Element;
+
+interface TabProps$1 {
+    title: string;
+    titleSize?: string;
+    selectedTitleWeight?: number;
+    height?: string;
+    selected?: boolean;
     color?: string;
-    items: string[];
-    onCloseClick: (index: number) => void;
+    tabsMaxWidth?: string;
+    onClick: (clickedTab: string) => void;
 }
-declare const Tags: ({ color, items, onCloseClick }: TagsProps) => JSX.Element;
+declare const Tab: ({ title, titleSize, height, selectedTitleWeight, selected, onClick, color, tabsMaxWidth, }: TabProps$1) => 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;
+interface TabProps {
+    title: string;
+    content: ReactNode;
+}
+interface TabsProps {
+    backgroundColor?: string;
+    initialSelected?: string;
+    tabsMaxWidth?: string;
+    tabs: TabProps[];
+}
+declare const Tabs: ({ backgroundColor, tabs, initialSelected, tabsMaxWidth, }: TabsProps) => JSX.Element | null;
 
-interface PaginationProps {
-    from: number;
-    to: number;
-    onChange: (page: number) => void;
-    currentPage?: number;
-    underlineActive?: boolean;
-    boldActive?: boolean;
+interface CategoryTagProps {
+    text: string;
+    size: ComponentSize.Large | ComponentSize.Medium | ComponentSize.Small;
+    className?: string;
+    styledBorder?: boolean;
+}
+declare const CategoryTag: ({ text, size, className, styledBorder }: CategoryTagProps) => _emotion_react_jsx_runtime.JSX.Element;
+
+interface CategorySquareTagProps {
+    text: string;
+    size: ComponentSize.Large | ComponentSize.Medium | ComponentSize.Small;
+    className?: string;
+    styledBorder?: boolean;
+}
+declare const CategorySquareTag: ({ text, size, className, styledBorder, }: CategorySquareTagProps) => _emotion_react_jsx_runtime.JSX.Element;
+
+interface SeasonOfferTagProps {
+    text: string;
+    backgroundColor?: string;
+    size: ComponentSize.Large | ComponentSize.Medium | ComponentSize.Small;
+    className?: string;
+    styledBorder?: boolean;
+    bottomRightBorderRounded?: string;
+    allBordersRounded?: {
+        value: string;
+        size?: ComponentSize;
+    };
+    color?: string;
+}
+declare const SeasonOfferTag: ({ text, backgroundColor, size, className, styledBorder, bottomRightBorderRounded, allBordersRounded, color, }: SeasonOfferTagProps) => _emotion_react_jsx_runtime.JSX.Element;
+
+interface SeasonOfferRoundedTagProps {
+    text: string;
+    backgroundColor?: string;
+    size: ComponentSize;
+    className?: string;
+}
+declare const SeasonOfferRoundedTag: ({ text, backgroundColor, size, className, }: SeasonOfferRoundedTagProps) => _emotion_react_jsx_runtime.JSX.Element;
+
+interface BaseButtonProps {
+    children: React__default.ReactNode;
+    renderLeading?: React__default.ReactNode;
+    renderTrailing?: React__default.ReactNode;
     disabled?: boolean;
-    showReducedPages?: boolean;
+    type?: ButtonType;
+    onClick: () => void;
+    className?: string;
+    inline?: boolean;
+    uppercase?: boolean;
+    testId?: string;
+    id?: string;
+}
+
+declare type BaseProps = Pick<BaseButtonProps, 'disabled' | 'type' | 'onClick'>;
+interface TextButtonProps$1 extends BaseProps {
+    text: string;
+    LeadingIcon?: IconType;
+    TrailingIcon?: IconType;
+    iconColor?: string;
+    size?: ComponentSize;
+    uppercase?: boolean;
 }
-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;
+declare const TextButton: ({ text, LeadingIcon, TrailingIcon, iconColor, disabled, type, size, uppercase, onClick, }: TextButtonProps$1) => _emotion_react_jsx_runtime.JSX.Element;
 
 declare const Text: ({ variant, children, testId, asSpan, ...allProps }: TextProps) => _emotion_react_jsx_runtime.JSX.Element;
 declare type TextHeroProps = {
@@ -2829,266 +3168,31 @@ declare type TextLabelProps = {
     weight?: 'regular' | 'demi';
     size?: 'large' | 'regular' | 'small';
     underline?: never;
-    disabled?: boolean;
-    wide?: never;
-    original?: never;
-    allCaps?: never;
-    href?: never;
-} & LabelHTMLAttributes<'label'>;
-declare type TextTagProps = {
-    variant: 'tag';
-    size?: 'regular' | 'small' | 'x-small';
-    weight?: 'regular' | 'demi' | 'bold';
-    underline?: never;
-    disabled?: boolean;
-    wide?: never;
-    original?: never;
-    allCaps?: boolean;
-    href?: never;
-};
-declare type TextProps<T = Element> = AriaAttributes & HTMLAttributes<T> & {
-    children: ReactNode;
-    style?: CSSProperties;
-    className?: string;
-    testId?: string;
-    asSpan?: boolean;
-    color?: string;
-} & (TextHeroProps | TextDisplayProps | TextHeadingProps | TextBodyProps | TextLinkProps | TextButtonProps | TextPricingProps | TextLabelProps | TextTagProps);
-
-interface SearchBarProps {
-    suggestions: SearchBarOptionItem[];
-    resultOptions: SearchBarOptionItem[];
-    onChange: (text: string) => void;
-    onSearch: (term: string) => void;
-    onClose: () => void;
-    resultsPanelDataTestId?: string;
-    allResults?: number;
-    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, ariaLabel, placeholder, id, autoComplete, }: SearchBarProps) => JSX.Element;
-
-interface ProductGalleryMobileProps$1 {
-    images: ImageType[];
-    customClick?: boolean;
-    topTag?: JSX.Element;
-    bottomTag?: JSX.Element;
-    productImageDataTestId?: string;
-    borderRadiusVariant?: boolean;
-    selectedValue?: ImageType;
-}
-declare const ProductGalleryMobile: ({ images, customClick, topTag, bottomTag, productImageDataTestId, borderRadiusVariant, selectedValue, }: ProductGalleryMobileProps$1) => JSX.Element;
-
-interface RadioProps {
-    name: string;
-    value: string;
-    id: string;
-    label: string | ReactFragment;
-    size?: ComponentSize.Small | ComponentSize.Medium | ComponentSize.Large;
-    checked?: boolean;
-    disabled?: boolean;
-    onChange: (option: RadioGroupOption) => void;
-    style?: React__default.CSSProperties;
-}
-declare const RadioInput: ({ style, name, value, id, label, checked, disabled, onChange, size, }: RadioProps) => JSX.Element;
-
-declare type PortalProps = {
-    id: string;
-    className?: string;
-    overflow?: boolean;
-    style?: CSSProperties;
-};
-declare const Portal: FC<PortalProps>;
-
-declare type ModalProps = {
-    id: string;
-    dismissable?: boolean;
-    maxFullScreen?: boolean;
-    padding?: string;
-    children: React__default.ReactNode;
-};
-interface ContainerProps {
-    maxFullScreen: boolean;
-    opened?: boolean;
-    padding?: string;
-}
-declare const Overlay: _emotion_styled.StyledComponent<{
-    theme?: _emotion_react.Theme | undefined;
-    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;
-declare const useModal: (id: string) => {
-    opened: boolean;
-    open: () => void;
-    close: () => void;
-};
-
-interface CloseButtonProps {
-    onClick: () => void;
-    size: number;
-}
-
-interface DescriptionProps {
-    text: string;
-}
-
-interface PromoProps {
-    text: string;
-}
-
-interface TitleProps {
-    title: string;
-}
-
-declare const CartProductItem: {
-    Title: ({ title }: TitleProps) => JSX.Element;
-    Tag: ({ discountAppliedText, backgroundColor }: OfferBannerProps) => JSX.Element;
-    Promo: ({ text }: PromoProps) => JSX.Element;
-    Description: ({ text }: DescriptionProps) => JSX.Element;
-    CloseButton: ({ onClick, size }: CloseButtonProps) => JSX.Element;
-};
-
-declare type QuantityPickerPropsOnChange = (value: number) => void;
-declare type QuantityPickerPropsControlled = {
-    value: number;
-    onChange: QuantityPickerPropsOnChange;
-};
-declare type QuantityPickerPropsUncontrolled = {
-    value?: never;
-    onChange?: QuantityPickerPropsOnChange;
-};
-declare type QuantityPickerProps = {
-    initialValue?: number;
-    maxValue?: number;
-    testId?: string;
-} & (QuantityPickerPropsControlled | QuantityPickerPropsUncontrolled);
-declare const QuantityPicker: ({ initialValue, maxValue, value, testId, onChange, }: QuantityPickerProps) => JSX.Element;
-
-declare type SpacingProps = {
-    size: number;
-    type?: 'block' | 'inline';
-    style?: CSSProperties;
-};
-declare const Spacing: FC<SpacingProps>;
-
-interface PackOption$1 {
-    label: string;
-    description: string;
-    meta: {
-        discountPercentage: number;
-        originalPrice: number;
-        price: number;
-        quantity: number;
-        icon: string;
-        tag?: string;
-    };
-}
-interface PackSelectorProps$1 {
-    packs: PackOption$1[];
-    selectedValue: PackOption$1;
-    onChange: (size: PackOption$1) => void;
-    currencyCode?: string;
-}
-declare const PackSelector: FC<PackSelectorProps$1>;
-
-interface PackOption {
-    label: string;
-    description: string;
-    meta: {
-        discountPercentage: number;
-        originalPrice: number;
-        price: number;
-        quantity: number;
-        icon: string;
-        tag?: string;
-    };
-}
-interface PackSelectorProps {
-    packs: PackOption[];
-    selectedValue: PackOption;
-    onChange: (size: PackOption) => void;
-    currencyCode?: string;
-}
-declare const PackSelectorV2: FC<PackSelectorProps>;
-
-interface FiltersProps {
-    values: Filter[];
-    onChange: (newValues: Filter[], filtersState?: FilterChange) => void;
-    tagsColor?: string;
-    filterByText: string;
-    clearAllText: string;
-    filtersSelectText: string;
-    isMobile: boolean;
-    applyText: string;
-    mobileBackArrowClick: () => void;
-    mobileApplyButtonClick: () => void;
-    onResetValues: () => void;
-}
-declare const Filters: ({ values, onChange, tagsColor, filterByText, clearAllText, isMobile, filtersSelectText, applyText, mobileApplyButtonClick, mobileBackArrowClick, onResetValues, }: FiltersProps) => JSX.Element;
-
-interface SearchNavigationProps {
-    returnText?: string;
-    returnUrl?: string;
-    steps?: string[];
-    returnAction?: () => void;
-}
-declare const SearchNavigation: ({ returnText, returnUrl, steps, returnAction, }: SearchNavigationProps) => JSX.Element;
-
-interface TabProps$1 {
-    title: string;
-    content: ReactNode;
-}
-interface TabsProps {
-    backgroundColor?: string;
-    initialSelected?: string;
-    tabsMaxWidth?: string;
-    tabs: TabProps$1[];
-}
-declare const Tabs: ({ backgroundColor, tabs, initialSelected, tabsMaxWidth, }: TabsProps) => JSX.Element | null;
-
-interface TabProps {
-    title: string;
-    titleSize?: string;
-    selectedTitleWeight?: number;
-    height?: string;
-    selected?: boolean;
-    color?: string;
-    tabsMaxWidth?: string;
-    onClick: (clickedTab: string) => void;
-}
-declare const Tab: ({ title, titleSize, height, selectedTitleWeight, selected, onClick, color, tabsMaxWidth, }: TabProps) => JSX.Element;
-
-interface IconsWithTitleProps {
-    backgroundColor: string;
-    iconColor: string;
-    iconName: string;
-    iconFolder?: string;
-    withWrapper?: boolean;
-    iconTitle: string;
-    iconSizeDesktop?: number;
-    iconSizeMobile?: number;
-    iconTitlePosition?: 'top' | 'bottom' | 'left' | 'right';
-    iconTitleStyle?: string;
-    iconStyle?: string;
-    isTitleInnerHtml?: boolean;
-}
-declare const IconsWithTitle: ({ iconName, iconTitle, iconFolder, withWrapper, backgroundColor, iconColor, iconSizeDesktop, iconSizeMobile, iconTitlePosition, iconTitleStyle, iconStyle, isTitleInnerHtml, }: IconsWithTitleProps) => JSX.Element | null;
-
-interface NoteProps {
-    accentColor?: string;
+    disabled?: boolean;
+    wide?: never;
+    original?: never;
+    allCaps?: never;
+    href?: never;
+} & LabelHTMLAttributes<'label'>;
+declare type TextTagProps = {
+    variant: 'tag';
+    size?: 'regular' | 'small' | 'x-small';
+    weight?: 'regular' | 'demi' | 'bold';
+    underline?: never;
+    disabled?: boolean;
+    wide?: never;
+    original?: never;
+    allCaps?: boolean;
+    href?: never;
+};
+declare type TextProps<T = Element> = AriaAttributes & HTMLAttributes<T> & {
+    children: ReactNode;
+    style?: CSSProperties;
+    className?: string;
+    testId?: string;
+    asSpan?: boolean;
     color?: string;
-    backgroundColor?: string;
-    importantNoteText: string;
-    text: string;
-}
-declare const Note: ({ accentColor, color, backgroundColor, importantNoteText, text, }: NoteProps) => JSX.Element;
+} & (TextHeroProps | TextDisplayProps | TextHeadingProps | TextBodyProps | TextLinkProps | TextButtonProps | TextPricingProps | TextLabelProps | TextTagProps);
 
 interface TextWithImageProps {
     title: string;
@@ -3110,198 +3214,94 @@ interface TextWithImageProps {
 }
 declare const TextWithImage: ({ title, text, children, buttomText, backgroundColor, imageLeftSide, titleStyle, textStyle, buttonWideOnMobile, ...props }: TextWithImageProps) => _emotion_react_jsx_runtime.JSX.Element;
 
-interface AccordionOptionsProps {
-    titleColor: string;
-    accordions: AccordionProps[];
+interface TimeProps {
+    hours: number;
+    minutes: number;
+    seconds: number;
 }
-declare const AccordionOptions: ({ titleColor, accordions }: AccordionOptionsProps) => JSX.Element;
-
-interface ShortBannerProps {
-    title: string;
-    bannerText: string;
-    backgroundColor: string;
-    alignCenter?: boolean;
-    widthAuto?: boolean;
-    textColor: string;
+interface TimerProps extends TimeProps {
+    onTimeUp: () => void;
+    displayZeroValues?: boolean;
 }
-declare const ShortBanner: ({ textColor, title, bannerText, backgroundColor, alignCenter, widthAuto, }: ShortBannerProps) => JSX.Element;
+declare const Timer: ({ onTimeUp, displayZeroValues, ...rest }: TimerProps) => JSX.Element;
 
-declare enum BeforeAfterVariant {
-    UserInfoText = "UserInfoText",
-    ResultFeedback = "ResultFeedback"
+interface TooltipProps {
+    children: React__default.ReactNode;
+    position: ComponentPosition;
+    align?: 'start' | 'center' | 'end';
+    content?: {
+        text: string;
+        color?: string;
+    };
+    backgroundColor?: string;
+    maxWidth?: string;
+    header?: {
+        title: string;
+        titleColor?: string;
+        Icon?: IconType;
+        iconFill?: string;
+    };
+    onClick?: () => void;
 }
-declare type NewSize = 'small' | 'medium' | 'large';
-declare const componentSizeMapper: {
-    [size in ComponentSize$1]: NewSize;
-};
+declare const Tooltip: ({ children, position, content, backgroundColor, align, maxWidth, onClick, header, }: TooltipProps) => JSX.Element;
 
-declare type BeforeAfterCardProps = {
-    name: string;
-    age?: string;
-    months?: string;
-    beforeImage: string;
-    afterImage: string;
-    alignCenter?: boolean;
-    imageBorderRadius?: string;
-    size?: ComponentSize$1;
-    variant?: BeforeAfterVariant;
-    description?: string;
-    reviewDays?: string;
+declare type SubtotalOption = {
+    label: string;
+    value: string;
 };
-declare const BeforeAfterCard: React__default.FC<BeforeAfterCardProps>;
+declare type Coupon = {
+    code: string;
+    amount: string;
+};
+interface SubtotalProps {
+    subtotal: SubtotalOption;
+    shipping: SubtotalOption;
+    taxes: SubtotalOption;
+    highlightColor?: string;
+    coupon?: {
+        couponText: string;
+        appliedText: string;
+        coupons: Coupon[];
+    };
+}
 
-interface ImageCardWithDescriptionProps {
-    image: string;
-    title?: string;
-    description?: string;
-    titlePosition?: 'center' | 'left';
-}
-declare const ImageCardWithDescription: ({ image, title, description, titlePosition, }: ImageCardWithDescriptionProps) => JSX.Element;
+interface TotalProps {
+    total: string;
+    currency: string;
+    highlightColor?: string;
+    saving?: {
+        amount: string;
+        savingText: string;
+    };
+}
+
+declare const Totals: {
+    Total: ({ total, currency, saving, highlightColor }: TotalProps) => JSX.Element;
+    Subtotal: ({ subtotal, shipping, taxes, coupon, highlightColor, }: SubtotalProps) => JSX.Element;
+};
 
 interface Checkpoint$1 {
     day: string;
     date: string;
     statusMessage: string;
 }
-interface TrackingProgressProps {
+interface TrackingProgressV2Props {
     checkPoints: Checkpoint$1[];
     amountOfCheckPoints: number;
+    warning?: boolean;
 }
-declare const TrackingProgress: ({ checkPoints, amountOfCheckPoints }: TrackingProgressProps) => JSX.Element;
+declare const TrackingProgressV2: ({ checkPoints, amountOfCheckPoints, warning, }: TrackingProgressV2Props) => JSX.Element;
 
 interface Checkpoint {
     day: string;
     date: string;
     statusMessage: string;
 }
-interface TrackingProgressV2Props {
+interface TrackingProgressProps {
     checkPoints: Checkpoint[];
     amountOfCheckPoints: number;
-    warning?: boolean;
-}
-declare const TrackingProgressV2: ({ checkPoints, amountOfCheckPoints, warning, }: TrackingProgressV2Props) => 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;
-
-interface AbsorbencyLevelProps {
-    dropTotal: number;
-    drops: number;
-    absorbencyTitle: string;
-    absorbencyDescription: string;
-}
-declare const AbsorbencyLevel: ({ dropTotal, drops, absorbencyTitle, absorbencyDescription, }: AbsorbencyLevelProps) => JSX.Element;
-
-interface HurryUpProps {
-    hurryUpText: string;
-    backgroundColor?: string;
-    showTimer?: boolean;
-    iconSize?: number;
-    textPosition?: 'left' | 'right' | 'center';
-}
-declare const HurryUp: ({ hurryUpText, backgroundColor, iconSize, textPosition, showTimer, }: HurryUpProps) => JSX.Element;
-
-interface BuyNowPayLaterProps {
-    displayBNPL: boolean;
-    installments: number;
-    installmentPrice: string;
-    iconFolder?: string;
-    iconName: string;
-    showLogo?: boolean;
-    iconColor?: string;
-    fontSize?: string;
-}
-declare const BuyNowPayLater: ({ displayBNPL, installments, installmentPrice, iconFolder, iconName, showLogo, iconColor, fontSize, }: BuyNowPayLaterProps) => JSX.Element | null;
-
-interface StrengthBarProps {
-    barsFilled?: number;
-    supportText?: string;
-}
-declare const StrengthBars: ({ barsFilled, supportText }: StrengthBarProps) => JSX.Element;
-
-interface DropdownProps {
-    options: SelectedOption[];
-    defaultLabel: string;
-    onOptionSelect: (option: string) => void;
-}
-interface SelectedOption {
-    size: string;
-    detail: string;
-}
-declare const SizeDropdown: React__default.FC<DropdownProps>;
-
-interface IAutoshipProps {
-    singlePurchaseLabel: string;
-    subscriptionLabel: string;
-    tooltipContent?: {
-        text: string;
-        color?: string;
-    };
-    tooltipHeader?: {
-        title: string;
-    };
-    pricing?: {
-        originalPrice: number;
-        discountedPrice: number;
-        discountPercentage: number;
-    };
-    frequencyValues?: Array<number>;
-    frequencyUnit?: string;
-    autoshipBenefits: string[];
-    onChange: (values: {
-        subscriptionPeriod: number;
-        autoship: boolean;
-        originalPrice: number;
-        discountedPrice: number;
-    }) => void;
 }
-declare const Autoship: ({ tooltipContent, tooltipHeader, pricing, frequencyValues, frequencyUnit, autoshipBenefits, onChange, singlePurchaseLabel, subscriptionLabel, }: IAutoshipProps) => JSX.Element;
+declare const TrackingProgress: ({ checkPoints, amountOfCheckPoints }: TrackingProgressProps) => JSX.Element;
 
 declare const useOnClickOutside: <T extends HTMLElement = HTMLElement>(ref: RefObject<T>, handler: (event: Event) => void) => void;
 
@@ -3346,4 +3346,4 @@ declare const getSrcSet: (imgLink: string, ...breakpoints: number[]) => string;
 
 declare const mediaQueries: facepaint.DynamicStyleFunction;
 
-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 };
+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, Review$1 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 };