@trafilea/afrodita-components 5.0.0-beta.27 → 5.0.0-beta.271

package/build/index.d.ts

@@ -1,10 +1,14 @@
 /// <reference types="react" />
+import React, { ReactFragment, FC, ReactNode, ElementType, CSSProperties, AriaAttributes, HTMLAttributes, LabelHTMLAttributes, RefObject } from 'react';
 import { IconProps as IconProps$1 } from 'src/types/types';
-import React, { FC, ReactNode, ElementType, CSSProperties, AriaAttributes, AnchorHTMLAttributes, LabelHTMLAttributes, RefObject } from 'react';
 import * as _emotion_react_jsx_runtime from '@emotion/react/jsx-runtime';
-import * as _emotion_react_types_jsx_namespace from '@emotion/react/types/jsx-namespace';
 import * as _emotion_styled from '@emotion/styled';
+import { 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';
+import facepaint from 'facepaint';
 
 declare enum CardSectionType {
     Header = 0,
@@ -57,11 +61,7 @@ declare type SizeOption = {
     label: string;
     description: string;
     disabled?: boolean;
-};
-declare type Color = {
-    primaryColor: string;
-    secondaryColor?: string;
-    tertiaryColor?: string;
+    noStock?: boolean;
 };
 declare type Pattern = {
     url: string;
@@ -69,19 +69,21 @@ declare type Pattern = {
 declare type ColorPickerOption = {
     label: string;
     description: string;
+    noStock?: boolean;
     meta: {
-        color?: Color;
+        color?: string[];
         pattern?: Pattern;
     };
 };
 declare type RadioGroupOption = {
     value: string;
-    label: string;
+    label: string | ReactFragment;
 };
 declare type ImageType = {
     key: string;
     imageUrl: string;
     alt: string;
+    thumbnailUrl?: string;
 };
 interface IconWithOpacityProps extends IconProps {
     opacity?: number;
@@ -101,10 +103,20 @@ declare type Filter = {
     title: string;
     columns: number;
     isOpenByDefault?: boolean;
+    isLinkOption?: boolean;
+    link?: string;
+    color?: string;
+    isMultiselect: boolean;
+    type?: string;
     items: Array<{
         label: string;
         checked?: boolean;
+        isLinkItem?: boolean;
+        link?: string;
+        blockUncheck?: boolean;
+        value?: string;
     }>;
+    showInMobile: boolean;
 };
 declare type FilterChange = {
     sectionIndex: number;
@@ -116,18 +128,84 @@ interface SearchBarOptionItem {
     price: string;
     title: string;
     optionUrl: string;
+}
+interface imageVideoProps {
+    imageLink: string;
+    isVideo?: {
+        videoTitle?: string;
+        videoSubtitle?: string;
+        textColor?: string;
+        videoLink?: string;
+    };
+    isMobile?: boolean;
 }
 
 declare const SixtyDaysGuarantee: ({ height, width, fill, title }: IconProps) => JSX.Element;
 
 declare const Frown: ({ height, width, fill, title }: IconProps$1) => JSX.Element;
 
+declare const Smiling: ({ height, width, fill, title }: IconProps$1) => JSX.Element;
+
+declare const BulletOne: ({ height, width, fill, title }: IconProps) => JSX.Element;
+
+declare const BulletTwo: ({ height, width, fill, title }: IconProps) => JSX.Element;
+
+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 Atom: ({ height, width, fill, testId }: IconProps) => JSX.Element;
+
+declare const Bubbles: ({ height, width, fill, testId }: IconProps) => JSX.Element;
+
+declare const FairAdvantages: ({ height, width, fill, testId }: IconProps) => JSX.Element;
+
+declare const MoneyFlow: ({ height, width, fill, testId }: IconProps) => JSX.Element;
+
+declare const ClinicallyTested: ({ height, width, fill, testId }: IconProps) => JSX.Element;
+
+declare const CrueltyFree: ({ height, width, fill, testId }: IconProps) => JSX.Element;
+
+declare const Certified: ({ height, width, fill, testId }: IconProps) => JSX.Element;
+
+declare const NewSixtyDaysGuarantee: ({ height, width, fill, testId }: 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 const Custom_Atom: typeof Atom;
+declare const Custom_Bubbles: typeof Bubbles;
+declare const Custom_FairAdvantages: typeof FairAdvantages;
+declare const Custom_MoneyFlow: typeof MoneyFlow;
+declare const Custom_ClinicallyTested: typeof ClinicallyTested;
+declare const Custom_CrueltyFree: typeof CrueltyFree;
+declare const Custom_Certified: typeof Certified;
+declare const Custom_NewSixtyDaysGuarantee: typeof NewSixtyDaysGuarantee;
 declare namespace Custom {
   export {
     Custom_SixtyDaysGuarantee as SixtyDaysGuarantee,
     Custom_Frown as Frown,
+    Custom_Smiling as Smiling,
+    Custom_BulletOne as BulletOne,
+    Custom_BulletTwo as BulletTwo,
+    Custom_BulletThree as BulletThree,
+    Custom_ThumbsUp as ThumbsUp,
+    Custom_ThumbsDown as ThumbsDown,
+    Custom_Atom as Atom,
+    Custom_Bubbles as Bubbles,
+    Custom_FairAdvantages as FairAdvantages,
+    Custom_MoneyFlow as MoneyFlow,
+    Custom_ClinicallyTested as ClinicallyTested,
+    Custom_CrueltyFree as CrueltyFree,
+    Custom_Certified as Certified,
+    Custom_NewSixtyDaysGuarantee as NewSixtyDaysGuarantee,
   };
 }
 
@@ -148,6 +226,73 @@ declare const Close: ({ height, width, fill }: IconProps) => JSX.Element;
 
 declare const Trash: ({ height, width, fill }: IconProps) => JSX.Element;
 
+declare const Warning: ({ height, width, fill }: IconProps) => JSX.Element;
+
+declare const Edit: ({ height, width, fill }: IconProps) => JSX.Element;
+
+declare const SignOut: ({ height, width, fill }: IconProps) => JSX.Element;
+
+declare const Add: ({ height, width, fill }: IconProps) => JSX.Element;
+
+interface CopyProps extends IconProps {
+    stroke?: string;
+}
+declare const Copy: ({ height, width, fill, stroke }: CopyProps) => JSX.Element;
+
+declare const CopyOutlined: ({ height, width, fill }: IconProps) => JSX.Element;
+
+declare const CheckboxEmpty: ({ height, width, fill }: IconProps) => JSX.Element;
+
+declare const CheckboxLight: ({ height, width, fill }: IconProps) => JSX.Element;
+
+declare const CheckboxSolid: ({ height, width, fill }: IconProps) => JSX.Element;
+
+declare const Like: ({ height, width, fill }: IconProps) => JSX.Element;
+
+declare const LikeSolid: ({ height, width, fill }: IconProps) => JSX.Element;
+
+declare const NotAllowed: ({ height, width, fill }: IconProps) => JSX.Element;
+
+declare const RadioEmpty: ({ height, width, fill }: IconProps) => JSX.Element;
+
+declare const RadioFilled: ({ height, width, fill }: IconProps) => JSX.Element;
+
+declare const Minus$1: ({ height, width, fill }: IconProps) => JSX.Element;
+
+declare const SettingsSolid: ({ height, width, fill }: IconProps) => JSX.Element;
+
+declare const Settings: ({ height, width, fill }: IconProps) => JSX.Element;
+
+declare const Share: ({ height, width, fill }: IconProps) => JSX.Element;
+
+declare const CircleCheck: ({ height, width, fill }: IconProps) => JSX.Element;
+
+declare const CircleClear: ({ height, width, fill }: IconProps) => JSX.Element;
+
+declare const CircleInfo: ({ height, width, fill }: IconProps) => JSX.Element;
+
+declare const CircleMinus: ({ height, width, fill }: IconProps) => JSX.Element;
+
+declare const CirclePlus: ({ height, width, fill }: IconProps) => JSX.Element;
+
+declare const CircleQuestion: ({ height, width, fill }: IconProps) => JSX.Element;
+
+declare const CircleWarning: ({ height, width, fill }: IconProps) => JSX.Element;
+
+declare const CircleSolidCheck: ({ height, width, fill }: IconProps) => JSX.Element;
+
+declare const CircleSolidClear: ({ height, width, fill }: IconProps) => JSX.Element;
+
+declare const CircleSolidMinus: ({ height, width, fill }: IconProps) => JSX.Element;
+
+declare const CircleSolidPlus: ({ height, width, fill }: IconProps) => JSX.Element;
+
+declare const CircleSolidQuestion: ({ height, width, fill }: IconProps) => JSX.Element;
+
+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;
@@ -156,6 +301,38 @@ declare const Actions_LightCheck: typeof LightCheck;
 declare const Actions_Question: typeof Question;
 declare const Actions_Close: typeof Close;
 declare const Actions_Trash: typeof Trash;
+declare const Actions_Warning: typeof Warning;
+declare const Actions_Edit: typeof Edit;
+declare const Actions_SignOut: typeof SignOut;
+declare const Actions_Add: typeof Add;
+type Actions_CopyProps = CopyProps;
+declare const Actions_Copy: typeof Copy;
+declare const Actions_CopyOutlined: typeof CopyOutlined;
+declare const Actions_CheckboxEmpty: typeof CheckboxEmpty;
+declare const Actions_CheckboxLight: typeof CheckboxLight;
+declare const Actions_CheckboxSolid: typeof CheckboxSolid;
+declare const Actions_Like: typeof Like;
+declare const Actions_LikeSolid: typeof LikeSolid;
+declare const Actions_NotAllowed: typeof NotAllowed;
+declare const Actions_RadioEmpty: typeof RadioEmpty;
+declare const Actions_RadioFilled: typeof RadioFilled;
+declare const Actions_SettingsSolid: typeof SettingsSolid;
+declare const Actions_Settings: typeof Settings;
+declare const Actions_Share: typeof Share;
+declare const Actions_CircleCheck: typeof CircleCheck;
+declare const Actions_CircleClear: typeof CircleClear;
+declare const Actions_CircleInfo: typeof CircleInfo;
+declare const Actions_CircleMinus: typeof CircleMinus;
+declare const Actions_CirclePlus: typeof CirclePlus;
+declare const Actions_CircleQuestion: typeof CircleQuestion;
+declare const Actions_CircleWarning: typeof CircleWarning;
+declare const Actions_CircleSolidCheck: typeof CircleSolidCheck;
+declare const Actions_CircleSolidClear: typeof CircleSolidClear;
+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,
@@ -166,6 +343,39 @@ declare namespace Actions {
     Actions_Question as Question,
     Actions_Close as Close,
     Actions_Trash as Trash,
+    Actions_Warning as Warning,
+    Actions_Edit as Edit,
+    Actions_SignOut as SignOut,
+    Actions_Add as Add,
+    Actions_CopyProps as CopyProps,
+    Actions_Copy as Copy,
+    Actions_CopyOutlined as CopyOutlined,
+    Actions_CheckboxEmpty as CheckboxEmpty,
+    Actions_CheckboxLight as CheckboxLight,
+    Actions_CheckboxSolid as CheckboxSolid,
+    Actions_Like as Like,
+    Actions_LikeSolid as LikeSolid,
+    Actions_NotAllowed as NotAllowed,
+    Actions_RadioEmpty as RadioEmpty,
+    Actions_RadioFilled as RadioFilled,
+    Minus$1 as Minus,
+    Actions_SettingsSolid as SettingsSolid,
+    Actions_Settings as Settings,
+    Actions_Share as Share,
+    Actions_CircleCheck as CircleCheck,
+    Actions_CircleClear as CircleClear,
+    Actions_CircleInfo as CircleInfo,
+    Actions_CircleMinus as CircleMinus,
+    Actions_CirclePlus as CirclePlus,
+    Actions_CircleQuestion as CircleQuestion,
+    Actions_CircleWarning as CircleWarning,
+    Actions_CircleSolidCheck as CircleSolidCheck,
+    Actions_CircleSolidClear as CircleSolidClear,
+    Actions_CircleSolidMinus as CircleSolidMinus,
+    Actions_CircleSolidPlus as CircleSolidPlus,
+    Actions_CircleSolidQuestion as CircleSolidQuestion,
+    Actions_CircleSolidWarning as CircleSolidWarning,
+    Actions_CircleSolidStyledCheck as CircleSolidStyledCheck,
   };
 }
 
@@ -174,23 +384,98 @@ declare const FitPredictor$1: ({ height, width, fill }: IconProps) => JSX.Elemen
 interface LoadingProps extends IconProps {
     backgroundColor: string;
 }
-declare const Loading: ({ height, width, fill, backgroundColor }: LoadingProps) => JSX.Element;
+declare const Loading$1: ({ height, width, fill, backgroundColor }: LoadingProps) => JSX.Element;
 
 declare const Shapermint: ({ height, width }: IconProps) => JSX.Element;
 
 declare const McAfee: ({ height, width }: IconProps) => JSX.Element;
 
+declare const GetDiscount: ({ height, width }: IconProps) => JSX.Element;
+
+declare const ShapermintLogo: ({ height, width, fill }: IconProps) => JSX.Element;
+
+declare const Chat: ({ height, width, fill, testId }: IconProps) => JSX.Element;
+
+declare const Email: ({ height, width, fill, testId }: IconProps) => JSX.Element;
+
+declare const CallUs: ({ height, width, fill, testId }: IconProps) => JSX.Element;
+
+declare const SignForm: ({ height, width, fill }: IconProps) => JSX.Element;
+
+declare const QrCode: ({ height, width, fill }: IconProps) => JSX.Element;
+
+declare const FreeExchange: ({ height, width, fill, testId }: IconProps) => JSX.Element;
+
+declare const ShopNow: ({ height, width, fill, testId }: IconProps) => JSX.Element;
+
+declare const HasselFreeReturns: ({ height, width, fill, testId }: IconProps) => JSX.Element;
+
+declare const Play: ({ height, width, fill, testId }: IconProps) => JSX.Element;
+
+declare const FitGuarantee: ({ height, width, fill, testId }: IconProps) => JSX.Element;
+
+declare const QuestionWithCircle: ({ height, width, fill, testId }: IconProps) => JSX.Element;
+
+declare const ExpressShipping: ({ height, width, fill, testId }: IconProps) => JSX.Element;
+
+declare const ShapermintClubLabel: ({ height, width }: IconProps) => JSX.Element;
+
+declare const ShapermintClubMobileLabel: ({ height, width }: IconProps) => JSX.Element;
+
+declare const ShapermintClubIcon: ({ height, width }: IconProps) => JSX.Element;
+
+declare const BodConLabel: ({ height, width }: IconProps) => JSX.Element;
+
+declare const BodConMobileLabel: ({ height, width }: IconProps) => JSX.Element;
+
 type Other_LoadingProps = LoadingProps;
-declare const Other_Loading: typeof Loading;
 declare const Other_Shapermint: typeof Shapermint;
 declare const Other_McAfee: typeof McAfee;
+declare const Other_GetDiscount: typeof GetDiscount;
+declare const Other_ShapermintLogo: typeof ShapermintLogo;
+declare const Other_Chat: typeof Chat;
+declare const Other_Email: typeof Email;
+declare const Other_CallUs: typeof CallUs;
+declare const Other_SignForm: typeof SignForm;
+declare const Other_QrCode: typeof QrCode;
+declare const Other_FreeExchange: typeof FreeExchange;
+declare const Other_ShopNow: typeof ShopNow;
+declare const Other_HasselFreeReturns: typeof HasselFreeReturns;
+declare const Other_Play: typeof Play;
+declare const Other_FitGuarantee: typeof FitGuarantee;
+declare const Other_QuestionWithCircle: typeof QuestionWithCircle;
+declare const Other_ExpressShipping: typeof ExpressShipping;
+declare const Other_ShapermintClubLabel: typeof ShapermintClubLabel;
+declare const Other_ShapermintClubMobileLabel: typeof ShapermintClubMobileLabel;
+declare const Other_ShapermintClubIcon: typeof ShapermintClubIcon;
+declare const Other_BodConLabel: typeof BodConLabel;
+declare const Other_BodConMobileLabel: typeof BodConMobileLabel;
 declare namespace Other {
   export {
     FitPredictor$1 as FitPredictor,
     Other_LoadingProps as LoadingProps,
-    Other_Loading as Loading,
+    Loading$1 as Loading,
     Other_Shapermint as Shapermint,
     Other_McAfee as McAfee,
+    Other_GetDiscount as GetDiscount,
+    Other_ShapermintLogo as ShapermintLogo,
+    Other_Chat as Chat,
+    Other_Email as Email,
+    Other_CallUs as CallUs,
+    Other_SignForm as SignForm,
+    Other_QrCode as QrCode,
+    Other_FreeExchange as FreeExchange,
+    Other_ShopNow as ShopNow,
+    Other_HasselFreeReturns as HasselFreeReturns,
+    Other_Play as Play,
+    Other_FitGuarantee as FitGuarantee,
+    Other_QuestionWithCircle as QuestionWithCircle,
+    Other_ExpressShipping as ExpressShipping,
+    Other_ShapermintClubLabel as ShapermintClubLabel,
+    Other_ShapermintClubMobileLabel as ShapermintClubMobileLabel,
+    Other_ShapermintClubIcon as ShapermintClubIcon,
+    Other_BodConLabel as BodConLabel,
+    Other_BodConMobileLabel as BodConMobileLabel,
   };
 }
 
@@ -208,6 +493,28 @@ declare const ChevronUpSolid: ({ height, width, fill }: IconProps) => JSX.Elemen
 
 declare const CircleUp: ({ width, height, fill }: IconProps) => JSX.Element;
 
+declare const CircleChevronLeft: ({ width, height, fill }: IconProps) => JSX.Element;
+
+declare const CircleChevronRight: ({ width, height, fill }: IconProps) => JSX.Element;
+
+declare const CircleChevronDown: ({ width, height, fill }: IconProps) => JSX.Element;
+
+declare const CircleChevronUp: ({ width, height, fill }: IconProps) => JSX.Element;
+
+declare const ChevronDownVariant: ({ width, height, fill }: IconProps) => JSX.Element;
+
+declare const ChevronUpVariant: ({ width, height, fill }: IconProps) => JSX.Element;
+
+declare const ChevronLeftVariant: ({ width, height, fill }: IconProps) => JSX.Element;
+
+declare const CircleLineUp: ({ width, height, fill }: IconProps) => JSX.Element;
+
+declare const CircleLineDown: ({ width, height, fill }: IconProps) => JSX.Element;
+
+declare const CircleLineLeft: ({ width, height, fill }: IconProps) => JSX.Element;
+
+declare const CircleLineRight: ({ width, height, fill }: IconProps) => JSX.Element;
+
 declare const Arrows_ChevronDown: typeof ChevronDown;
 declare const Arrows_ChevronLeft: typeof ChevronLeft;
 declare const Arrows_ChevronRight: typeof ChevronRight;
@@ -215,6 +522,17 @@ declare const Arrows_ChevronRightVariant: typeof ChevronRightVariant;
 declare const Arrows_ChevronUp: typeof ChevronUp;
 declare const Arrows_ChevronUpSolid: typeof ChevronUpSolid;
 declare const Arrows_CircleUp: typeof CircleUp;
+declare const Arrows_CircleChevronLeft: typeof CircleChevronLeft;
+declare const Arrows_CircleChevronRight: typeof CircleChevronRight;
+declare const Arrows_CircleChevronDown: typeof CircleChevronDown;
+declare const Arrows_CircleChevronUp: typeof CircleChevronUp;
+declare const Arrows_ChevronDownVariant: typeof ChevronDownVariant;
+declare const Arrows_ChevronUpVariant: typeof ChevronUpVariant;
+declare const Arrows_ChevronLeftVariant: typeof ChevronLeftVariant;
+declare const Arrows_CircleLineUp: typeof CircleLineUp;
+declare const Arrows_CircleLineDown: typeof CircleLineDown;
+declare const Arrows_CircleLineLeft: typeof CircleLineLeft;
+declare const Arrows_CircleLineRight: typeof CircleLineRight;
 declare namespace Arrows {
   export {
     Arrows_ChevronDown as ChevronDown,
@@ -224,6 +542,17 @@ declare namespace Arrows {
     Arrows_ChevronUp as ChevronUp,
     Arrows_ChevronUpSolid as ChevronUpSolid,
     Arrows_CircleUp as CircleUp,
+    Arrows_CircleChevronLeft as CircleChevronLeft,
+    Arrows_CircleChevronRight as CircleChevronRight,
+    Arrows_CircleChevronDown as CircleChevronDown,
+    Arrows_CircleChevronUp as CircleChevronUp,
+    Arrows_ChevronDownVariant as ChevronDownVariant,
+    Arrows_ChevronUpVariant as ChevronUpVariant,
+    Arrows_ChevronLeftVariant as ChevronLeftVariant,
+    Arrows_CircleLineUp as CircleLineUp,
+    Arrows_CircleLineDown as CircleLineDown,
+    Arrows_CircleLineLeft as CircleLineLeft,
+    Arrows_CircleLineRight as CircleLineRight,
   };
 }
 
@@ -247,6 +576,32 @@ declare const Stopwatch: ({ height, width, fill, title }: IconProps) => JSX.Elem
 
 declare const Shipping: ({ height, width, fill }: IconProps) => JSX.Element;
 
+declare const LightBulb$1: ({ height, width, fill }: IconProps) => JSX.Element;
+
+declare const ErrorCross: ({ height, width, fill }: IconProps) => JSX.Element;
+
+declare const CircleNumber: ({ height, width, fill }: IconProps) => JSX.Element;
+
+declare const SizeEmpty: ({ height, width, fill }: IconProps) => JSX.Element;
+
+declare const PlayMini: ({ height, width, fill }: IconProps) => JSX.Element;
+
+declare const ShippingEmpty: ({ height, width, fill }: IconProps) => JSX.Element;
+
+declare const Drop: ({ height, width, fill }: IconProps) => JSX.Element;
+
+declare const DropEmpty: ({ height, width, fill }: IconProps) => JSX.Element;
+
+declare const Stars: ({ height, width, fill }: IconProps) => JSX.Element;
+
+declare const Moon: ({ height, width, fill }: IconProps) => JSX.Element;
+
+declare const Hours: ({ height, width, fill }: IconProps) => JSX.Element;
+
+declare const NewClock: ({ height, width, fill }: IconProps) => JSX.Element;
+
+declare const KlarnaLogo: ({ height, width }: IconProps) => JSX.Element;
+
 declare const PDP_Clock: typeof Clock;
 declare const PDP_FlagUSA: typeof FlagUSA;
 declare const PDP_Minus: typeof Minus;
@@ -257,6 +612,18 @@ declare const PDP_StarEmpty: typeof StarEmpty;
 declare const PDP_StarHalf: typeof StarHalf;
 declare const PDP_Stopwatch: typeof Stopwatch;
 declare const PDP_Shipping: typeof Shipping;
+declare const PDP_ErrorCross: typeof ErrorCross;
+declare const PDP_CircleNumber: typeof CircleNumber;
+declare const PDP_SizeEmpty: typeof SizeEmpty;
+declare const PDP_PlayMini: typeof PlayMini;
+declare const PDP_ShippingEmpty: typeof ShippingEmpty;
+declare const PDP_Drop: typeof Drop;
+declare const PDP_DropEmpty: typeof DropEmpty;
+declare const PDP_Stars: typeof Stars;
+declare const PDP_Moon: typeof Moon;
+declare const PDP_Hours: typeof Hours;
+declare const PDP_NewClock: typeof NewClock;
+declare const PDP_KlarnaLogo: typeof KlarnaLogo;
 declare namespace PDP {
   export {
     PDP_Clock as Clock,
@@ -269,6 +636,19 @@ declare namespace PDP {
     PDP_StarHalf as StarHalf,
     PDP_Stopwatch as Stopwatch,
     PDP_Shipping as Shipping,
+    LightBulb$1 as LightBulb,
+    PDP_ErrorCross as ErrorCross,
+    PDP_CircleNumber as CircleNumber,
+    PDP_SizeEmpty as SizeEmpty,
+    PDP_PlayMini as PlayMini,
+    PDP_ShippingEmpty as ShippingEmpty,
+    PDP_Drop as Drop,
+    PDP_DropEmpty as DropEmpty,
+    PDP_Stars as Stars,
+    PDP_Moon as Moon,
+    PDP_Hours as Hours,
+    PDP_NewClock as NewClock,
+    PDP_KlarnaLogo as KlarnaLogo,
   };
 }
 
@@ -286,6 +666,8 @@ declare const Twitter: ({ height, width, fill }: IconProps) => JSX.Element;
 
 declare const Youtube: ({ height, width, fill }: IconProps) => JSX.Element;
 
+declare const Interaction: ({ height, width, fill }: IconProps) => JSX.Element;
+
 declare const SocialMedia_Facebook: typeof Facebook;
 declare const SocialMedia_FacebookSolid: typeof FacebookSolid;
 declare const SocialMedia_Instagram: typeof Instagram;
@@ -293,6 +675,7 @@ declare const SocialMedia_InstagramSolid: typeof InstagramSolid;
 declare const SocialMedia_Pinterest: typeof Pinterest;
 declare const SocialMedia_Twitter: typeof Twitter;
 declare const SocialMedia_Youtube: typeof Youtube;
+declare const SocialMedia_Interaction: typeof Interaction;
 declare namespace SocialMedia {
   export {
     SocialMedia_Facebook as Facebook,
@@ -302,14 +685,15 @@ declare namespace SocialMedia {
     SocialMedia_Pinterest as Pinterest,
     SocialMedia_Twitter as Twitter,
     SocialMedia_Youtube as Youtube,
+    SocialMedia_Interaction as Interaction,
   };
 }
 
-declare const Search: ({ height, width, fill }: IconProps) => JSX.Element;
+declare const Search: ({ height, width, fill, testId }: IconProps) => JSX.Element;
 
 declare const User: ({ height, width, fill }: IconProps) => JSX.Element;
 
-declare const ShoppingBag: ({ height, width, fill }: IconProps) => JSX.Element;
+declare const ShoppingBag: ({ height, width, fill, testId }: IconProps) => JSX.Element;
 
 declare const ShoppingCart: FC<IconProps>;
 
@@ -317,12 +701,64 @@ declare const MapMarker: ({ height, width, fill }: IconProps) => JSX.Element;
 
 declare const Hamburger: FC<IconProps>;
 
+declare const AddressInformation: ({ height, width, fill }: IconProps) => JSX.Element;
+
+declare const ClubMembership: ({ height, width, fill }: IconProps) => JSX.Element;
+
+declare const Benefits: ({ height, width, fill }: IconProps) => JSX.Element;
+
+declare const Home: ({ height, width, fill }: IconProps) => JSX.Element;
+
+declare const HomeSolid: ({ height, width, fill }: IconProps) => JSX.Element;
+
+declare const ShoppingBagV2: ({ height, width, fill, testId }: IconProps) => JSX.Element;
+
+declare const UserSolid: ({ height, width, fill }: IconProps) => JSX.Element;
+
+declare const SlideDot$1: ({ height, width, fill }: IconProps) => JSX.Element;
+
+declare const SlideDotSolid: ({ height, width, fill }: IconProps) => JSX.Element;
+
+declare const Ellipsis: ({ height, width, fill }: IconProps) => JSX.Element;
+
+declare const EllipsisHorizontal: ({ height, width, fill }: IconProps) => JSX.Element;
+
+declare const Filters$1: ({ height, width, fill }: IconProps) => JSX.Element;
+
+declare const Lock: ({ height, width, fill }: IconProps) => JSX.Element;
+
+declare const LockSolid: ({ height, width, fill }: IconProps) => JSX.Element;
+
+declare const Loading: ({ height, width, fill }: IconProps) => JSX.Element;
+
+declare const MapSolid: ({ height, width, fill }: IconProps) => JSX.Element;
+
+declare const UserV2: ({ height, width, fill }: IconProps) => JSX.Element;
+
+declare const ShoppingCartV2: ({ height, width, fill }: IconProps) => JSX.Element;
+
 declare const Navigation_Search: typeof Search;
 declare const Navigation_User: typeof User;
 declare const Navigation_ShoppingBag: typeof ShoppingBag;
 declare const Navigation_ShoppingCart: typeof ShoppingCart;
 declare const Navigation_MapMarker: typeof MapMarker;
 declare const Navigation_Hamburger: typeof Hamburger;
+declare const Navigation_AddressInformation: typeof AddressInformation;
+declare const Navigation_ClubMembership: typeof ClubMembership;
+declare const Navigation_Benefits: typeof Benefits;
+declare const Navigation_Home: typeof Home;
+declare const Navigation_HomeSolid: typeof HomeSolid;
+declare const Navigation_ShoppingBagV2: typeof ShoppingBagV2;
+declare const Navigation_UserSolid: typeof UserSolid;
+declare const Navigation_SlideDotSolid: typeof SlideDotSolid;
+declare const Navigation_Ellipsis: typeof Ellipsis;
+declare const Navigation_EllipsisHorizontal: typeof EllipsisHorizontal;
+declare const Navigation_Lock: typeof Lock;
+declare const Navigation_LockSolid: typeof LockSolid;
+declare const Navigation_Loading: typeof Loading;
+declare const Navigation_MapSolid: typeof MapSolid;
+declare const Navigation_UserV2: typeof UserV2;
+declare const Navigation_ShoppingCartV2: typeof ShoppingCartV2;
 declare namespace Navigation {
   export {
     Navigation_Search as Search,
@@ -331,6 +767,24 @@ declare namespace Navigation {
     Navigation_ShoppingCart as ShoppingCart,
     Navigation_MapMarker as MapMarker,
     Navigation_Hamburger as Hamburger,
+    Navigation_AddressInformation as AddressInformation,
+    Navigation_ClubMembership as ClubMembership,
+    Navigation_Benefits as Benefits,
+    Navigation_Home as Home,
+    Navigation_HomeSolid as HomeSolid,
+    Navigation_ShoppingBagV2 as ShoppingBagV2,
+    Navigation_UserSolid as UserSolid,
+    SlideDot$1 as SlideDot,
+    Navigation_SlideDotSolid as SlideDotSolid,
+    Navigation_Ellipsis as Ellipsis,
+    Navigation_EllipsisHorizontal as EllipsisHorizontal,
+    Filters$1 as Filters,
+    Navigation_Lock as Lock,
+    Navigation_LockSolid as LockSolid,
+    Navigation_Loading as Loading,
+    Navigation_MapSolid as MapSolid,
+    Navigation_UserV2 as UserV2,
+    Navigation_ShoppingCartV2 as ShoppingCartV2,
   };
 }
 
@@ -351,18 +805,61 @@ interface IconWrapperProps {
     fill?: string;
 }
 
-declare const Mail: ({ height, width }: IconWrapperProps) => JSX.Element;
+declare const Mail: ({ height, width, }: Pick<IconWrapperProps, 'width' | 'height'>) => JSX.Element;
+
+declare const Community$1: ({ height, width, fill }: IconProps) => JSX.Element;
+
+declare const QuoteLeft: ({ height, width, fill }: IconProps) => JSX.Element;
+
+declare const QuoteRight: ({ height, width, fill }: IconProps) => JSX.Element;
+
+declare const QuoteSolidLeft: ({ height, width, fill }: IconProps) => JSX.Element;
+
+declare const QuoteSolidRight: ({ height, width, fill }: IconProps) => JSX.Element;
+
+declare const Light: ({ height, width, fill }: IconProps) => JSX.Element;
+
+declare const LightBulb: ({ height, width, fill }: IconProps) => JSX.Element;
+
+declare const LightBulbSolid: ({ height, width, fill }: IconProps) => JSX.Element;
+
+declare const CommentDots: ({ height, width, fill }: IconProps) => JSX.Element;
+
+declare const CommentLight: ({ height, width, fill }: IconProps) => JSX.Element;
+
+declare const CommentMoney: ({ height, width, fill }: IconProps) => JSX.Element;
 
 declare const Messaging_QuestionCircle: typeof QuestionCircle;
 declare const Messaging_Messenger: typeof Messenger;
 declare const Messaging_Comment: typeof Comment;
 declare const Messaging_Mail: typeof Mail;
+declare const Messaging_QuoteLeft: typeof QuoteLeft;
+declare const Messaging_QuoteRight: typeof QuoteRight;
+declare const Messaging_QuoteSolidLeft: typeof QuoteSolidLeft;
+declare const Messaging_QuoteSolidRight: typeof QuoteSolidRight;
+declare const Messaging_Light: typeof Light;
+declare const Messaging_LightBulb: typeof LightBulb;
+declare const Messaging_LightBulbSolid: typeof LightBulbSolid;
+declare const Messaging_CommentDots: typeof CommentDots;
+declare const Messaging_CommentLight: typeof CommentLight;
+declare const Messaging_CommentMoney: typeof CommentMoney;
 declare namespace Messaging {
   export {
     Messaging_QuestionCircle as QuestionCircle,
     Messaging_Messenger as Messenger,
     Messaging_Comment as Comment,
     Messaging_Mail as Mail,
+    Community$1 as Community,
+    Messaging_QuoteLeft as QuoteLeft,
+    Messaging_QuoteRight as QuoteRight,
+    Messaging_QuoteSolidLeft as QuoteSolidLeft,
+    Messaging_QuoteSolidRight as QuoteSolidRight,
+    Messaging_Light as Light,
+    Messaging_LightBulb as LightBulb,
+    Messaging_LightBulbSolid as LightBulbSolid,
+    Messaging_CommentDots as CommentDots,
+    Messaging_CommentLight as CommentLight,
+    Messaging_CommentMoney as CommentMoney,
   };
 }
 
@@ -423,10 +920,83 @@ declare namespace SlideDots {
 
 declare const Thinking: ({ height, width }: IconProps$1) => JSX.Element;
 
+declare const SmilingV2: ({ height, width }: IconProps$1) => JSX.Element;
+
+declare const Grinning: ({ height, width }: IconProps$1) => JSX.Element;
+
+declare const GrinningWithSweat: ({ height, width }: IconProps$1) => JSX.Element;
+
+declare const BlowingKiss: ({ height, width }: IconProps$1) => JSX.Element;
+
+declare const Frowning: ({ height, width }: IconProps$1) => JSX.Element;
+
+declare const Relieved: ({ height, width }: IconProps$1) => JSX.Element;
+
 declare const Emoji_Thinking: typeof Thinking;
+declare const Emoji_SmilingV2: typeof SmilingV2;
+declare const Emoji_Grinning: typeof Grinning;
+declare const Emoji_GrinningWithSweat: typeof GrinningWithSweat;
+declare const Emoji_BlowingKiss: typeof BlowingKiss;
+declare const Emoji_Frowning: typeof Frowning;
+declare const Emoji_Relieved: typeof Relieved;
 declare namespace Emoji {
   export {
     Emoji_Thinking as Thinking,
+    Emoji_SmilingV2 as SmilingV2,
+    Emoji_Grinning as Grinning,
+    Emoji_GrinningWithSweat as GrinningWithSweat,
+    Emoji_BlowingKiss as BlowingKiss,
+    Emoji_Frowning as Frowning,
+    Emoji_Relieved as Relieved,
+  };
+}
+
+declare const FreeShipping: ({ height, width, fill }: IconProps) => JSX.Element;
+
+declare const PersonalStylist: ({ height, width, fill }: IconProps) => JSX.Element;
+
+declare const Community: ({ height, width, fill }: IconProps) => JSX.Element;
+
+declare const VIP: ({ height, width, fill }: IconProps) => JSX.Element;
+
+declare const DealsOffers: ({ height, width, fill }: IconProps) => JSX.Element;
+
+declare const StyleFashionContent: ({ height, width, fill }: IconProps) => JSX.Element;
+
+declare const MembersOnlyDiscount: ({ height, width, fill }: IconProps) => JSX.Element;
+
+declare const Profile: ({ height, width, fill, testId }: IconProps) => JSX.Element;
+
+declare const MembersOnlyDiscountOpposite: ({ height, width, fill }: IconProps) => JSX.Element;
+
+declare const PriorityShipping: ({ height, width, fill }: IconProps) => JSX.Element;
+
+declare const Guard: ({ height, width, fill }: IconProps) => JSX.Element;
+
+declare const MyAccount_FreeShipping: typeof FreeShipping;
+declare const MyAccount_PersonalStylist: typeof PersonalStylist;
+declare const MyAccount_Community: typeof Community;
+declare const MyAccount_VIP: typeof VIP;
+declare const MyAccount_DealsOffers: typeof DealsOffers;
+declare const MyAccount_StyleFashionContent: typeof StyleFashionContent;
+declare const MyAccount_MembersOnlyDiscount: typeof MembersOnlyDiscount;
+declare const MyAccount_Profile: typeof Profile;
+declare const MyAccount_MembersOnlyDiscountOpposite: typeof MembersOnlyDiscountOpposite;
+declare const MyAccount_PriorityShipping: typeof PriorityShipping;
+declare const MyAccount_Guard: typeof Guard;
+declare namespace MyAccount {
+  export {
+    MyAccount_FreeShipping as FreeShipping,
+    MyAccount_PersonalStylist as PersonalStylist,
+    MyAccount_Community as Community,
+    MyAccount_VIP as VIP,
+    MyAccount_DealsOffers as DealsOffers,
+    MyAccount_StyleFashionContent as StyleFashionContent,
+    MyAccount_MembersOnlyDiscount as MembersOnlyDiscount,
+    MyAccount_Profile as Profile,
+    MyAccount_MembersOnlyDiscountOpposite as MembersOnlyDiscountOpposite,
+    MyAccount_PriorityShipping as PriorityShipping,
+    MyAccount_Guard as Guard,
   };
 }
 
@@ -444,6 +1014,7 @@ declare const Icon: {
     Payment: typeof Payment;
     SlideDots: typeof SlideDots;
     Emoji: typeof Emoji;
+    MyAccount: typeof MyAccount;
 };
 
 interface CardBodyProps {
@@ -460,7 +1031,7 @@ interface borderProps {
 }
 interface CardProps {
     children: ReactNode;
-    backgroundColor: string;
+    backgroundColor?: string;
     widthAuto?: boolean;
     border?: borderProps;
     flex?: boolean;
@@ -488,6 +1059,8 @@ declare type CommonProps<T> = {
     initialValue?: Value<T>;
     placeHolder: string;
     testId?: string;
+    required?: string;
+    showRequiredPlaceholder?: boolean;
 };
 declare type ControlledProps<T> = {
     value: Value<T>;
@@ -498,7 +1071,22 @@ declare type UncontrolledProps<T> = {
     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, }: SimpleDropdownProps<T>): JSX.Element;
+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.CSSProperties;
+    className?: string;
+}
+declare const DropdownDialog: ({ options, position: { top, right }, style, className, }: DialogDropdownProps) => JSX.Element;
 
 interface SizeSelectorProps {
     label: string;
@@ -529,6 +1117,7 @@ interface BaseButtonProps {
     inline?: boolean;
     uppercase?: boolean;
     testId?: string;
+    id?: string;
 }
 
 declare type BaseProps = Pick<BaseButtonProps, 'disabled' | 'type' | 'onClick'>;
@@ -550,8 +1139,21 @@ interface DiscountTagProps {
     borderColor?: string;
     textColor?: string;
     size?: ComponentSize.Small | ComponentSize.Medium | ComponentSize.Large;
+    style?: React.CSSProperties;
 }
-declare const DiscountTag: ({ discount, offText, disabled, backgroundColor, borderColor, textColor, size, }: DiscountTagProps) => JSX.Element;
+declare const DiscountTag: ({ discount, offText, disabled, backgroundColor, borderColor, textColor, size, style, }: 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.CSSProperties;
+}
+declare const ClubOfferTag: ({ clubOfferText, className, disabled, backgroundColor, borderColor, textColor, size, style, }: ClubOfferTagProps) => JSX.Element;
 
 interface PriceLabelProps {
     finalPrice: string | number;
@@ -559,9 +1161,16 @@ interface PriceLabelProps {
     color?: string;
     size?: ComponentSize.Small | ComponentSize.Medium | ComponentSize.Large;
     discount?: DiscountTagProps;
+    clubOffer?: ClubOfferTagProps;
+    finalPriceStyled?: boolean;
+    finalPriceStyle?: React.CSSProperties;
+    originalPriceStyled?: boolean;
+    originalPriceUnderlined?: boolean;
     testId?: string;
 }
-declare const PriceLabel: ({ finalPrice, originalPrice, discount, color, testId, size, }: PriceLabelProps) => JSX.Element;
+declare const PriceLabel: ({ finalPrice, originalPrice, discount, color, testId, finalPriceStyled, finalPriceStyle, originalPriceStyled, originalPriceUnderlined, size, }: PriceLabelProps) => JSX.Element;
+
+declare const PriceLabelV2: ({ finalPrice, originalPrice, discount, clubOffer, color, testId, originalPriceStyled, originalPriceUnderlined, size, }: PriceLabelProps) => JSX.Element;
 
 interface ColorPickerProps {
     options: ColorPickerOption[];
@@ -583,21 +1192,29 @@ declare const MultiColorPicker: ({ options, label, selectedValue, onChange, }: M
 interface ProductGalleryProps {
     images: ImageType[];
     selectedValue?: ImageType;
-    DiscountTagElement?: JSX.Element;
-    BestSellerTagElement?: JSX.Element;
+    topTag?: JSX.Element;
+    bottomTag?: JSX.Element;
     productImageDataTestId?: string;
     previewListDataTestId?: string;
+    thumbnailPosition?: 'vertical' | 'horizontal';
+    borderRadiusVariant?: boolean;
+    previewImgBorderColor?: string;
+    ctaText?: string;
+    ctaAction?: () => void;
+    hideCTA?: boolean;
 }
-declare const ProductGallery: ({ images, selectedValue, DiscountTagElement, BestSellerTagElement, productImageDataTestId, previewListDataTestId, }: ProductGalleryProps) => JSX.Element;
+declare const ProductGallery: ({ images, selectedValue, topTag, bottomTag, productImageDataTestId, previewListDataTestId, thumbnailPosition, borderRadiusVariant, previewImgBorderColor, ctaText, ctaAction, hideCTA, }: ProductGalleryProps) => JSX.Element;
 
 interface RatingProps {
     rating: number;
     size?: ComponentSize;
-    reviews: number;
-    reviewsText: string;
+    reviews?: number;
+    reviewsText?: string;
     wrapWithParenthesis?: boolean;
+    underline?: boolean;
+    reviewsContainerId?: string;
 }
-declare const Rating: ({ size, reviews, reviewsText, rating, wrapWithParenthesis, }: RatingProps) => JSX.Element;
+declare const Rating: ({ size, reviews, reviewsText, rating, wrapWithParenthesis, underline, reviewsContainerId, }: RatingProps) => JSX.Element;
 
 interface FitPredictorProps {
     onClick: () => void;
@@ -609,8 +1226,23 @@ interface ProgressBarProps {
     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 ProgressBar: ({ description, fillColor, widthAuto, percent, }: ProgressBarProps) => JSX.Element;
+declare const MotivatorProgressBar: ({ fillColor, backgroundColor, unfilledColor, currencyCode, endingValue, currentAmount, rewardUnlockedMessage, }: MotivatorProgressBarProps) => JSX.Element;
 
 interface IconButtonProps {
     children: React.ReactNode;
@@ -624,31 +1256,45 @@ 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;
+    forceOpenHandler?: boolean;
+    forceOpenValue?: boolean;
+    titleColor?: string;
     variant: 'simple' | 'box';
     header: ReactNode;
+    headerOnOpen?: ReactNode;
     content: ReactNode;
     disabled?: boolean;
+    innerHTML?: boolean;
     openIcon: IconType;
     closeIcon: IconType;
+    onClick?: (index: number) => void;
 }
-declare const Accordion: ({ header, content, defaultOpen, variant, disabled, openIcon, closeIcon, }: 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;
     children: ReactNode;
 }>;
 declare const useTheme: () => Theme;
+
 declare const ThemeVariables: FC<{
     theme: Theme;
     Container?: ElementType;
@@ -678,6 +1324,7 @@ declare type Theme = {
 };
 declare type ThemeBreakpoints = {
     mobile: number;
+    tablet?: number;
     desktop: number;
 };
 declare type ThemeBasicPallete = {
@@ -685,7 +1332,7 @@ declare type ThemeBasicPallete = {
     contrast: string;
 };
 declare type ThemeColorPallete = ThemeBasicPallete & {
-    soft: ThemeBasicPallete;
+    soft?: ThemeBasicPallete;
 };
 declare type ThemeColorPrimaryPallete = ThemeColorPallete & {
     20: ThemeColorPallete;
@@ -697,6 +1344,7 @@ declare type ThemeColors = {
     pallete: {
         primary: ThemeColorPrimaryPallete;
         secondary: ThemeColorPrimaryPallete;
+        tertiary?: ThemeColorPrimaryPallete;
     } & Partial<Record<string, ThemeColorPallete>>;
     shades: {
         black: ThemeBasicPallete;
@@ -706,6 +1354,7 @@ declare type ThemeColors = {
         50: ThemeBasicPallete;
         100: ThemeBasicPallete;
         150: ThemeBasicPallete;
+        175: ThemeBasicPallete;
         200: ThemeBasicPallete;
         250: ThemeBasicPallete;
         300: ThemeBasicPallete;
@@ -734,6 +1383,8 @@ declare type ThemeColors = {
         color: string;
         disabled: string;
         highlight: string;
+        shadow?: string;
+        isChecked?: string;
     };
     background: {
         color: string;
@@ -749,6 +1400,10 @@ declare type ThemeComponent = {
         border: string;
         borderRadius: string;
         fontWeight: number;
+        lineHeight: string;
+        letterSpacing: string;
+        minWidth: string;
+        minHeight: string;
         size: {
             small: {
                 fontSize: string;
@@ -795,6 +1450,12 @@ declare type ThemeComponent = {
         lineHeight: string;
         border: string;
         boxShadow: string;
+        errorBorder: string;
+    };
+    inputPlaceholder: {
+        fontSize: string;
+        padding: string;
+        focusBorder: string;
     };
     inputCustom: {
         button: {
@@ -827,6 +1488,12 @@ declare type ThemeComponent = {
             border: string;
             color: string;
         };
+        noStock: {
+            fontWeight: number;
+            background: string;
+            border: string;
+            color: string;
+        };
         disabled: {
             border: string;
         };
@@ -880,10 +1547,13 @@ declare type ThemeComponent = {
     };
     card: {
         borderRadius: string;
+        backgroundColor: string;
     };
     radio: {
         borderColor: string;
         background: string;
+        textSize: string;
+        lineHeight: string;
         size: {
             small: {
                 borderWidth: string;
@@ -912,6 +1582,7 @@ declare type ThemeComponent = {
         };
     };
     label: {
+        color: string;
         fontSize: {
             small: string;
             medium: string;
@@ -1020,11 +1691,13 @@ declare type ThemeComponent = {
         fontWeight: number;
         lineHeight: string;
         padding: string;
+        optionPadding: string;
         color: string;
         fill: string;
         options: {
             borderColor: string;
             color: string;
+            borderRadius: string;
         };
     };
     modal: {
@@ -1038,6 +1711,256 @@ 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;
+        padding?: string;
+        borderRadius?: string;
+        maxWidth?: string;
+        onMobile: {
+            maxWidth?: string;
+            padding?: string;
+            backgroundColor?: string;
+        };
+    };
+    expressCheckout: {
+        button: {
+            borderRadius: string;
+        };
+    };
+    copyrightText: {
+        fontSize: string;
+        fontWeight: number;
+        lineHeight: string;
+        color: string;
+    };
+    thankyouFooterText: {
+        fontSize: string;
+        fontWeight: string;
+        lineHeight: string;
+    };
+    textButton: {
+        fontWeight: number;
+        lineHeight: string;
+    };
+    deliveryDetails: {
+        title: {
+            fontSize: string;
+            lineHeight: string;
+            fontWeight: number;
+        };
+        note: {
+            accentColor: string;
+            color: string;
+            backgroundColor: string;
+        };
+        sectionTitle: {
+            fontSize: string;
+            lineHeight: string;
+            fontWeight: number;
+        };
+        sectionDetails: {
+            fontSize: string;
+            lineHeight: string;
+            fontWeight: number;
+            marginLeft?: string;
+        };
+    };
+    text: {
+        orderHeader: {
+            color: string;
+        };
+    };
+    orderBar: {
+        backgroundColor: string;
+        fontColor: string;
+    };
+    banner: {
+        outlineColor: string;
+        filledColor: string;
+        fontColor: string;
+    };
+    offerTitleText: {
+        size: string;
+        weight: number;
+        lineHeight: string;
+    };
+    linePrice: {
+        color: string;
+        badge: {
+            color: string;
+            borderRadius: string;
+        };
+    };
+    divider: {
+        color: string;
+    };
+    checkout: {
+        paymentInformation: {
+            borderRadius?: string;
+        };
+        creditCardSection: {
+            borderRadius?: string;
+        };
+    };
+    upsell: {
+        banner: {
+            outlined: {
+                color?: string;
+            };
+        };
+        price: {
+            colors: {
+                regular: string;
+                deal: string;
+                each: string;
+                badgeBG: string;
+                badgeColor: string;
+            };
+        };
+        hurryTimeCard: {
+            backgroundColor: string;
+        };
+        guaranteedFit?: {
+            backgroundColor: string;
+        };
+    };
+    thankyou: {
+        orderBanner?: {
+            text: {
+                left: string;
+            };
+        };
+        emailSection: {
+            backgroundColor?: string;
+        };
+        socialIcon: {
+            color?: string;
+        };
+        orderId: {
+            color: string;
+        };
+    };
 };
 declare type ThemeTypography = {
     config: {
@@ -1064,6 +1987,26 @@ declare type ThemeAssets = {
     images: {
         favicon: string;
         logo: string;
+        logoSize?: {
+            width: string;
+            height: string;
+        };
+        logoMobile?: string;
+        checkoutLogo?: {
+            url: string;
+            width: string;
+            height: string;
+        };
+        upsellLogo?: {
+            url: string;
+            width: string;
+            height: string;
+        };
+        tyLogo?: {
+            url: string;
+            width: string;
+            height: string;
+        };
     };
     [key: string]: any;
 };
@@ -1074,11 +2017,25 @@ interface CheckboxProps {
     size?: ComponentSize.Large | ComponentSize.Medium | ComponentSize.Small;
     text: string;
     checked?: boolean;
+    blockUncheck?: boolean;
     id: string;
     backgroundColor?: string;
-    variant: 'primary' | 'secondary';
+    variant: 'primary' | 'secondary' | 'color';
 }
-declare const Checkbox: ({ disabled, onChange, size, text, checked, id, variant, }: CheckboxProps) => JSX.Element;
+declare const Checkbox: ({ disabled, onChange, size, text, checked, id, variant, blockUncheck, backgroundColor, }: CheckboxProps) => 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.CSSProperties;
+}
+declare const RadioPrimary: ({ style, name, value, id, label, checked, disabled, onChange, size, }: RadioProps$1) => JSX.Element;
 
 interface RadioGroupInputProps {
     name: string;
@@ -1087,8 +2044,20 @@ interface RadioGroupInputProps {
     onChange: (value: RadioGroupOption) => void;
     size?: ComponentSize.Small | ComponentSize.Medium | ComponentSize.Large;
     disabled?: boolean;
+    style?: React.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.CSSProperties;
 }
-declare const RadioGroupInput: ({ name, options, value, onChange, size, disabled, }: RadioGroupInputProps) => JSX.Element;
+declare const ClubRadioGroupInput: ({ style, name, options, value, onChange, size, disabled, }: ClubRadioGroupInputProps) => JSX.Element;
 
 interface SimpleProps {
     title: string;
@@ -1123,16 +2092,18 @@ interface CategoryTagProps {
     text: string;
     size: ComponentSize.Large | ComponentSize.Medium | ComponentSize.Small;
     className?: string;
+    styledBorder?: boolean;
 }
-declare const CategoryTag: ({ text, size, className }: CategoryTagProps) => _emotion_react_jsx_runtime.JSX.Element;
+declare const CategoryTag: ({ text, size, className, styledBorder }: CategoryTagProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 interface SeasonOfferTagProps {
     text: string;
     backgroundColor?: string;
     size: ComponentSize.Large | ComponentSize.Medium | ComponentSize.Small;
     className?: string;
+    styledBorder?: boolean;
 }
-declare const SeasonOfferTag: ({ text, backgroundColor, size, className, }: SeasonOfferTagProps) => _emotion_react_jsx_runtime.JSX.Element;
+declare const SeasonOfferTag: ({ text, backgroundColor, size, className, styledBorder, }: SeasonOfferTagProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 interface TimeProps {
     hours: number;
@@ -1145,7 +2116,14 @@ interface TimerProps extends TimeProps {
 }
 declare const Timer: ({ onTimeUp, displayZeroValues, ...rest }: TimerProps) => JSX.Element;
 
-interface BaseInputCommmonProps {
+interface BaseInputCommonProps {
+    id?: string;
+    value?: string;
+    innerRef?: React.Ref<HTMLInputElement>;
+    onBlur?: () => void;
+    onFocus?: () => void;
+    onChange?: (value: string, event: any) => void;
+    hideClear?: boolean;
     defaultValue?: string;
     maxLength?: number;
     placeholder?: string;
@@ -1155,16 +2133,14 @@ interface BaseInputCommmonProps {
     required?: string;
     children?: React.ReactNode;
     size?: 'regular' | 'small';
+    inlinePlaceholder?: boolean;
+    hasError?: boolean;
+    inputType?: 'text' | 'email' | 'password' | 'url';
+    name?: string;
+    autoFocus?: boolean;
+    requiredPlaceholder?: string;
 }
-interface BaseInputControlled extends BaseInputCommmonProps {
-    value: string;
-    onChange: (value: string) => void;
-}
-interface BaseInputUncontrolled extends BaseInputCommmonProps {
-    value?: never;
-    onChange?: (value: string) => void;
-}
-declare type BaseInputProps = BaseInputControlled | BaseInputUncontrolled;
+declare type BaseInputProps = BaseInputCommonProps;
 
 declare type BasePlusIconProps = BaseInputProps & {
     Icon: IconType;
@@ -1203,7 +2179,7 @@ declare type CustomProps = BaseInputProps & {
 };
 
 declare const Input: {
-    Simple: ({ value, onChange, defaultValue, label, children, required, onValidation, size, ...rest }: BaseInputProps) => JSX.Element;
+    Simple: ({ value, onChange, label, children, required, onValidation, size, placeholder, inlinePlaceholder, hasError, inputType, hideClear, innerRef, requiredPlaceholder, ...rest }: BaseInputCommonProps) => JSX.Element;
     Custom: ({ onClick, text, variant, ...rest }: CustomProps) => JSX.Element;
     SimplePlusButton: ({ onClick, onClickEdit, text, success, editText, successText, ...rest }: BasePlusButtonProps) => JSX.Element;
     SimplePlusIcon: ({ Icon, ...rest }: BasePlusIconProps) => JSX.Element;
@@ -1263,7 +2239,7 @@ declare type detail = {
     details: string;
 };
 interface orderUpdate extends detail {
-    keepMeUpdated: {
+    keepMeUpdated?: {
         title: string;
         onClick: () => void;
     };
@@ -1276,9 +2252,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;
@@ -1286,26 +2262,37 @@ 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[][];
+    className?: string;
+}
+declare const SizeTable: ({ headers, data, className }: 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;
 }
 interface ProductOrderItemProps {
-    title: string;
+    title: React.ReactNode | string;
     subtitle: string;
+    className?: string;
     image: {
         src: string;
         alt: string;
@@ -1316,10 +2303,12 @@ interface ProductOrderItemProps {
         text: string;
         backgroundColor: string;
     };
+    finalPriceStyle?: React.CSSProperties;
 }
-declare const SimpleOrderItem: ({ title, subtitle, image, price, tag, quantity, }: 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;
@@ -1329,27 +2318,35 @@ 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[];
+    children: JSX.Element | JSX.Element[] | StyledComponent<any>;
     infinite: boolean;
     adaptiveHeight: boolean;
-    dotsSize: ComponentSize.Large | ComponentSize.Medium | ComponentSize.Small;
-    dotListMarginTop: number;
+    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, }: SliderNavigationProps) => _emotion_react_jsx_runtime.JSX.Element;
+declare const SliderNavigation: ({ children, infinite, arrows, adaptiveHeight, dotsSize, dotListMarginTop, initialSlide, dots, slidesToShow, speed, }: SliderNavigationProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 interface DropdownListIconsProps {
     items: DropdownListIconsItem[];
@@ -1367,8 +2364,11 @@ interface ImageStyleProps {
 interface ImageProps extends ImageStyleProps {
     src: string;
     alt: string;
+    srcSet?: string;
+    sizes?: string;
+    loading?: 'lazy' | 'eager';
 }
-declare const Image: ({ src, alt, height, width, borderRadius, objectFit, objectPosition, className, }: ImageProps) => JSX.Element;
+declare const Image: ({ src, srcSet, sizes, loading, alt, height, width, borderRadius, objectFit, objectPosition, className, }: ImageProps) => JSX.Element;
 
 interface AmazonPaypalBtnProps {
     onClick: () => void;
@@ -1413,7 +2413,32 @@ interface ProductItemProps {
 
 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;
+    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;
+    };
 }
 
 declare function withProductGrid<P extends ProductItemProps>(ProductItemComponent: React.FC<P>, data: ProductItemProps[]): {
@@ -1422,7 +2447,7 @@ declare function withProductGrid<P extends ProductItemProps>(ProductItemComponen
 };
 
 declare const Collection: {
-    ProductItemMobile: ({ title, image, price, rating, size, tags, alignName, url, className, onClick, }: 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, isBNPL, hasStrength, }: ProductItemSmallMobileProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
     withProductGrid: typeof withProductGrid;
 };
 
@@ -1483,49 +2508,56 @@ 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 Text: FC<TextProps>;
+declare const PaginatorBlog: ({ from, to, currentPage, onChange, }: Pick<PaginationProps, 'from' | 'to' | 'onChange' | 'currentPage'>) => JSX.Element;
+
+declare const Text: ({ variant, children, testId, asSpan, ...allProps }: TextProps) => _emotion_react_jsx_runtime.JSX.Element;
 declare type TextHeroProps = {
     variant: 'hero1' | 'hero2' | 'hero3';
     weight?: 'heavy' | 'bold' | 'demi';
-    size?: 'regular';
+    size?: 'regular' | 'xsmall';
     underline?: never;
     disabled?: never;
     wide?: never;
     original?: never;
     allCaps?: never;
+    href: never;
 };
 declare type TextDisplayProps = {
     variant: 'display1' | 'display2';
     weight?: 'bold' | 'demi';
-    size?: 'regular';
+    size?: 'regular' | 'xsmall';
     underline?: never;
     disabled?: never;
     wide?: never;
     original?: never;
     allCaps?: never;
+    href: never;
 };
 declare type TextHeadingProps = {
-    variant: 'heading1' | 'heading2' | 'heading3' | 'heading4' | 'heading5' | 'heading6';
+    variant: 'heading1' | 'heading2' | 'heading3' | 'heading4' | 'heading5' | 'heading6' | 'heading7' | 'heading8';
     weight?: 'bold' | 'demi' | 'regular';
-    size?: 'regular';
+    size?: 'regular' | 'xsmall';
     underline?: never;
     disabled?: never;
     wide?: never;
     original?: never;
     allCaps?: never;
+    href?: never;
 };
 declare type TextBodyProps = {
     variant: 'body';
-    size?: 'regular' | 'small';
+    size?: 'regular' | 'small' | 'xsmall';
     weight?: 'bold' | 'demi' | 'regular';
     underline?: never;
     disabled?: never;
     wide?: never;
     original?: never;
     allCaps?: never;
+    href?: never;
 };
 declare type TextButtonProps = {
     variant: 'button';
@@ -1536,6 +2568,7 @@ declare type TextButtonProps = {
     wide?: boolean;
     original?: never;
     allCaps?: never;
+    href?: never;
 };
 declare type TextPricingProps = {
     variant: 'pricing';
@@ -1546,6 +2579,7 @@ declare type TextPricingProps = {
     wide?: never;
     original?: boolean;
     allCaps?: never;
+    href?: never;
 };
 declare type TextLinkProps = {
     variant: 'link';
@@ -1556,9 +2590,11 @@ declare type TextLinkProps = {
     wide?: never;
     original?: never;
     allCaps?: never;
-} & AnchorHTMLAttributes<'a'>;
+    href?: string;
+};
 declare type TextLabelProps = {
     variant: 'label';
+    color?: string;
     weight?: 'regular' | 'demi';
     size?: 'regular' | 'small';
     underline?: never;
@@ -1566,6 +2602,7 @@ declare type TextLabelProps = {
     wide?: never;
     original?: never;
     allCaps?: never;
+    href?: never;
 } & LabelHTMLAttributes<'label'>;
 declare type TextTagProps = {
     variant: 'tag';
@@ -1576,11 +2613,15 @@ declare type TextTagProps = {
     wide?: never;
     original?: never;
     allCaps?: boolean;
+    href?: never;
 };
-declare type TextProps = AriaAttributes & {
+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 {
@@ -1593,34 +2634,43 @@ interface SearchBarProps {
     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, }: 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;
-    DiscountTagElement?: JSX.Element;
-    BestSellerTagElement?: JSX.Element;
+    customClick?: boolean;
+    topTag?: JSX.Element;
+    bottomTag?: JSX.Element;
     productImageDataTestId?: string;
-    slideDotsDataTestId?: string;
+    borderRadiusVariant?: boolean;
+    selectedValue?: ImageType;
 }
-declare const ProductGalleryMobile: ({ images, selectedValue, DiscountTagElement, BestSellerTagElement, productImageDataTestId, slideDotsDataTestId, }: ProductGalleryMobileProps) => JSX.Element;
+declare const ProductGalleryMobile: ({ images, customClick, topTag, bottomTag, productImageDataTestId, borderRadiusVariant, selectedValue, }: ProductGalleryMobileProps$1) => JSX.Element;
 
 interface RadioProps {
     name: string;
     value: string;
     id: string;
-    label: string;
+    label: string | ReactFragment;
     size?: ComponentSize.Small | ComponentSize.Medium | ComponentSize.Large;
     checked?: boolean;
     disabled?: boolean;
     onChange: (option: RadioGroupOption) => void;
+    style?: React.CSSProperties;
 }
-declare const RadioInput: ({ name, value, id, label, checked, disabled, onChange, size, }: RadioProps) => JSX.Element;
+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>;
 
@@ -1628,10 +2678,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;
@@ -1694,6 +2746,26 @@ declare type SpacingProps = {
 };
 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;
@@ -1710,8 +2782,9 @@ interface PackSelectorProps {
     packs: PackOption[];
     selectedValue: PackOption;
     onChange: (size: PackOption) => void;
+    currencyCode?: string;
 }
-declare const PackSelector: FC<PackSelectorProps>;
+declare const PackSelectorV2: FC<PackSelectorProps>;
 
 interface FiltersProps {
     values: Filter[];
@@ -1736,6 +2809,218 @@ interface SearchNavigationProps {
 }
 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;
+    color?: string;
+    backgroundColor?: string;
+    importantNoteText: string;
+    text: string;
+}
+declare const Note: ({ accentColor, color, backgroundColor, importantNoteText, text, }: NoteProps) => JSX.Element;
+
+interface TextWithImageProps {
+    title: string;
+    text?: string;
+    children?: ReactNode;
+    buttomText: string;
+    backgroundColor: string;
+    imageLeftSide?: boolean;
+    URLLink?: string;
+    onButtonClick?: () => void;
+    isRedirectionURL: boolean;
+    btnBGColor?: string;
+    btnHoverBGColor?: string;
+    imgVideo: imageVideoProps;
+    contentAfterButton?: React.ReactNode;
+    titleStyle?: React.CSSProperties;
+    textStyle?: React.CSSProperties;
+    buttonWideOnMobile?: boolean;
+}
+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[];
+}
+declare const AccordionOptions: ({ titleColor, accordions }: AccordionOptionsProps) => JSX.Element;
+
+interface ShortBannerProps {
+    title: string;
+    bannerText: string;
+    backgroundColor: string;
+    alignCenter?: boolean;
+    widthAuto?: boolean;
+    textColor: string;
+}
+declare const ShortBanner: ({ textColor, title, bannerText, backgroundColor, alignCenter, widthAuto, }: ShortBannerProps) => JSX.Element;
+
+interface BeforeAfterCardProps {
+    name: string;
+    age?: string;
+    months?: string;
+    beforeImage: string;
+    afterImage: string;
+    alignCenter?: boolean;
+    imageBorderRadius?: string;
+    size?: ComponentSize;
+}
+declare const BeforeAfterCard: ({ name, age, months, beforeImage, afterImage, alignCenter, imageBorderRadius, size, }: BeforeAfterCardProps) => JSX.Element;
+
+interface ImageCardWithDescriptionProps {
+    image: string;
+    title?: string;
+    description?: string;
+    titlePosition?: 'center' | 'left';
+}
+declare const ImageCardWithDescription: ({ image, title, description, titlePosition, }: ImageCardWithDescriptionProps) => JSX.Element;
+
+interface Checkpoint$1 {
+    day: string;
+    date: string;
+    statusMessage: string;
+}
+interface TrackingProgressProps {
+    checkPoints: Checkpoint$1[];
+    amountOfCheckPoints: number;
+}
+declare const TrackingProgress: ({ checkPoints, amountOfCheckPoints }: TrackingProgressProps) => JSX.Element;
+
+interface Checkpoint {
+    day: string;
+    date: string;
+    statusMessage: string;
+}
+interface TrackingProgressV2Props {
+    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;
+
 declare global {
     interface Events {
         modal: {
@@ -1775,4 +3060,8 @@ declare const formatPrice: (value: number, { locale, currency }?: {
     currency?: string | undefined;
 }) => string;
 
-export { Accordion, AmazonButton, AssetsProvider, Bundle, ButtonPrimary, ButtonSecondary, ButtonSecondaryOutline, ButtonType, CTAProps, _default as Card, CardSectionType, CartProductItem, CategoryTag, Checkbox, Collection, Color, 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, Image, ImageType, Input, InputValidationType, Modal, MultiColorPicker, OfferBanner, OrderBar, Overlay, PackSelector, Pagination, Pattern, PaymentMethod, PaypalButton, Portal, PriceLabel, ProductGallery, ProductGalleryMobile, ProgressBar, QuantityPicker, RadioGroupInput, RadioGroupOption, RadioInput, Rating, Review, ScrollToTop, SearchBar, SearchBarOptionItem, SearchNavigation, SeasonOfferTag, SimpleDropdown, SimpleOrderItem, SingleColorPicker, SizeFitGuide, SizeOption, SizeSelector, SizeTable, SliderNavigation, Spacing, Spinner, StarList, Text, TextButton, Theme, ThemeAssets, ThemeBasicPallete, ThemeBreakpoints, ThemeColorPallete, ThemeColors, ThemeComponent, ThemeFonts, ThemeProvider, ThemeTypography, ThemeVariables, Timer, Tooltip, Totals, WithTestId, decimalFormat, formatPrice, isEmail, isEmpty, isNumber, isPhoneNumber, isValidDate, modalEvent, simulateMouseClick, sliceString, useModal, useModalEvent, useOnClickOutside, useTheme, useThemeAssets, useWindowDimensions };
+declare const getSrcSet: (imgLink: string, ...breakpoints: number[]) => string;
+
+declare const mediaQueries: facepaint.DynamicStyleFunction;
+
+export { AbsorbencyLevel, Accordion, AccordionOptions, AmazonButton, AssetsProvider, BeforeAfterCard, Bundle, ButtonPrimary, ButtonSecondary, ButtonSecondaryOutline, ButtonType, BuyNowPayLater, CTAProps, _default as Card, CardSectionType, CartProductItem, 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, 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, SizeFitGuide, SizeOption, SizeSelector, SizeTable, SliderNavigation, Spacing, Spinner, StarList, StrengthBars, Tab, Tabs, Text, TextButton, TextWithImage, Theme, ThemeAssets, ThemeBasicPallete, ThemeBreakpoints, ThemeColorPallete, ThemeColors, ThemeComponent, ThemeFonts, ThemeProvider, ThemeTypography, ThemeVariables, Timer, Tooltip, Totals, TrackingProgress, TrackingProgressV2, WithTestId, decimalFormat, formatPrice, getSrcSet, imageVideoProps, isEmail, isEmpty, isNumber, isPhoneNumber, isValidDate, mediaQueries, modalEvent, simulateMouseClick, sliceString, useModal, useModalEvent, useOnClickOutside, useTheme, useThemeAssets, useWindowDimensions };