@envive-ai/react-toolkit-v3 0.3.6 → 0.3.7

package/dist/FloatingChat/hooks/useSnapSetup.js

@@ -0,0 +1,58 @@
+import { useCheckIsMobile } from "../../utils/useCheckIsMobile.js";
+import { useEffect, useRef, useState } from "react";
+import { useMotionValue, useTransform } from "framer-motion";
+
+//#region src/components/FloatingChat/hooks/useSnapSetup.ts
+const useSnapSetup = ({ isFloatingChatOpen }) => {
+	const maxSwipeableViewHeight = 89;
+	const modalSheetControl = useRef(null);
+	const { viewportWidth } = useCheckIsMobile();
+	const isMobile = viewportWidth !== void 0 && viewportWidth < 512;
+	const shouldAutoExpand = Boolean(isMobile && window?._spiffy?.selectedCustomizeOption);
+	const snaps = shouldAutoExpand ? [43, 100] : [
+		0,
+		43,
+		100
+	];
+	const initialSnap = 1;
+	const [currentSnapPercentage, setCurrentSnapPercentage] = useState(snaps[initialSnap] || 43);
+	const animationKey = useMotionValue(0);
+	const snap43Percent = 57 / 100 * window.innerHeight;
+	const snap100Percent = 0;
+	const mobileHeaderHeight = useTransform(animationKey, [snap100Percent, snap43Percent], [56, 0]);
+	const [shouldShowHeader, setShouldShowHeader] = useState(false);
+	const [shouldShowScrolled, setShouldShowScrolled] = useState(false);
+	useEffect(() => {
+		return animationKey.on("change", (value) => {
+			setShouldShowHeader(value < snap43Percent - 10);
+			setShouldShowScrolled(value > snap43Percent);
+		});
+	}, [animationKey, snap43Percent]);
+	const isFullView = isMobile && currentSnapPercentage === 100;
+	const isPartialView = isMobile && currentSnapPercentage >= 0 && currentSnapPercentage <= 43;
+	const handleSnapChange = (snapPercentage) => {
+		setCurrentSnapPercentage(snapPercentage);
+	};
+	return {
+		modalSheetControl,
+		maxSwipeableViewHeight,
+		isOpen: window?._spiffy?.selectedCustomizeOption === "SalesAgent" ? true : Boolean(isFloatingChatOpen),
+		isMobile,
+		snaps,
+		initialSnap,
+		shouldAutoExpand,
+		currentSnapPercentage,
+		handleSnapChange,
+		animationKey,
+		mobileHeaderHeight,
+		snap43Percent,
+		snap100Percent,
+		shouldShowHeader,
+		shouldShowScrolled,
+		isFullView,
+		isPartialView
+	};
+};
+
+//#endregion
+export { useSnapSetup };

package/dist/FloatingChat/types/types.d.cts

@@ -59,6 +59,10 @@ interface FloatingChatProps {
    * Whether the CX button switch is enabled.
    */
   isCXButtonSwitchEnabled: boolean;
+  /**
+   * Whether the chat is open.
+   */
+  isFloatingChatOpen: boolean;
 }
 //#endregion
 export { FloatingChatProps };

package/dist/FloatingChat/types/types.d.ts

@@ -59,6 +59,10 @@ interface FloatingChatProps {
    * Whether the CX button switch is enabled.
    */
   isCXButtonSwitchEnabled: boolean;
+  /**
+   * Whether the chat is open.
+   */
+  isFloatingChatOpen: boolean;
 }
 //#endregion
 export { FloatingChatProps };

package/dist/Image/Image.d.cts

@@ -1,5 +1,5 @@
 import { ImageProps } from "./types/index.cjs";
-import * as react_jsx_runtime22 from "react/jsx-runtime";
+import * as react_jsx_runtime21 from "react/jsx-runtime";
 
 //#region src/components/Image/Image.d.ts
 
@@ -25,6 +25,6 @@ declare const Image: ({
   role,
   "aria-hidden": ariaHidden,
   ...rest
-}: ImageProps) => react_jsx_runtime22.JSX.Element;
+}: ImageProps) => react_jsx_runtime21.JSX.Element;
 //#endregion
 export { Image };

package/dist/Image/Image.d.ts

@@ -1,5 +1,5 @@
 import { ImageProps } from "./types/index.js";
-import * as react_jsx_runtime21 from "react/jsx-runtime";
+import * as react_jsx_runtime20 from "react/jsx-runtime";
 
 //#region src/components/Image/Image.d.ts
 
@@ -25,6 +25,6 @@ declare const Image: ({
   role,
   "aria-hidden": ariaHidden,
   ...rest
-}: ImageProps) => react_jsx_runtime21.JSX.Element;
+}: ImageProps) => react_jsx_runtime20.JSX.Element;
 //#endregion
 export { Image };

package/dist/ImageGallery/ImageGallery.d.cts

@@ -1,5 +1,5 @@
 import { ImageGalleryProps } from "./types/types.cjs";
-import * as react_jsx_runtime19 from "react/jsx-runtime";
+import * as react_jsx_runtime26 from "react/jsx-runtime";
 
 //#region src/components/ImageGallery/ImageGallery.d.ts
 
@@ -40,6 +40,6 @@ declare const ImageGallery: ({
   "aria-describedby": ariaDescribedBy,
   role,
   "aria-hidden": ariaHidden
-}: ImageGalleryProps) => react_jsx_runtime19.JSX.Element;
+}: ImageGalleryProps) => react_jsx_runtime26.JSX.Element;
 //#endregion
 export { ImageGallery };

package/dist/ImageGallery/ImageGallery.d.ts

@@ -1,5 +1,5 @@
 import { ImageGalleryProps } from "./types/types.js";
-import * as react_jsx_runtime20 from "react/jsx-runtime";
+import * as react_jsx_runtime30 from "react/jsx-runtime";
 
 //#region src/components/ImageGallery/ImageGallery.d.ts
 
@@ -40,6 +40,6 @@ declare const ImageGallery: ({
   "aria-describedby": ariaDescribedBy,
   role,
   "aria-hidden": ariaHidden
-}: ImageGalleryProps) => react_jsx_runtime20.JSX.Element;
+}: ImageGalleryProps) => react_jsx_runtime30.JSX.Element;
 //#endregion
 export { ImageGallery };

package/dist/MarkdownProcessor/MarkdownProcessor.d.cts

@@ -1,5 +1,5 @@
 import { MarkdownProcessorProps } from "./types/types.cjs";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as react_jsx_runtime20 from "react/jsx-runtime";
 
 //#region src/components/MarkdownProcessor/MarkdownProcessor.d.ts
 declare const MarkdownProcessor: ({
@@ -9,6 +9,6 @@ declare const MarkdownProcessor: ({
   textVariant,
   subTextVariant,
   subTextColor
-}: MarkdownProcessorProps) => react_jsx_runtime0.JSX.Element;
+}: MarkdownProcessorProps) => react_jsx_runtime20.JSX.Element;
 //#endregion
 export { MarkdownProcessor };

package/dist/MarkdownProcessor/MarkdownProcessor.d.ts

@@ -1,5 +1,5 @@
 import { MarkdownProcessorProps } from "./types/types.js";
-import * as react_jsx_runtime16 from "react/jsx-runtime";
+import * as react_jsx_runtime19 from "react/jsx-runtime";
 
 //#region src/components/MarkdownProcessor/MarkdownProcessor.d.ts
 declare const MarkdownProcessor: ({
@@ -9,6 +9,6 @@ declare const MarkdownProcessor: ({
   textVariant,
   subTextVariant,
   subTextColor
-}: MarkdownProcessorProps) => react_jsx_runtime16.JSX.Element;
+}: MarkdownProcessorProps) => react_jsx_runtime19.JSX.Element;
 //#endregion
 export { MarkdownProcessor };

package/dist/PromptButton/PromptButton.d.cts

@@ -1,5 +1,5 @@
 import { PromptButtonProps } from "./types/index.cjs";
-import * as react_jsx_runtime16 from "react/jsx-runtime";
+import * as react_jsx_runtime17 from "react/jsx-runtime";
 
 //#region src/components/PromptButton/PromptButton.d.ts
 declare const PromptButton: ({
@@ -16,6 +16,6 @@ declare const PromptButton: ({
   onClick,
   ariaLabel,
   ariaDescribedBy
-}: PromptButtonProps) => react_jsx_runtime16.JSX.Element;
+}: PromptButtonProps) => react_jsx_runtime17.JSX.Element;
 //#endregion
 export { PromptButton };

package/dist/PromptButton/PromptButton.d.ts

@@ -1,5 +1,5 @@
 import { PromptButtonProps } from "./types/index.js";
-import * as react_jsx_runtime13 from "react/jsx-runtime";
+import * as react_jsx_runtime14 from "react/jsx-runtime";
 
 //#region src/components/PromptButton/PromptButton.d.ts
 declare const PromptButton: ({
@@ -16,6 +16,6 @@ declare const PromptButton: ({
   onClick,
   ariaLabel,
   ariaDescribedBy
-}: PromptButtonProps) => react_jsx_runtime13.JSX.Element;
+}: PromptButtonProps) => react_jsx_runtime14.JSX.Element;
 //#endregion
 export { PromptButton };

package/dist/PromptButtonCarouselWithImage/PromptButtonCarouselWithImage.d.cts

@@ -1,5 +1,5 @@
 import { PromptButtonCarouselWithImageProps } from "./types/types.cjs";
-import * as react_jsx_runtime24 from "react/jsx-runtime";
+import * as react_jsx_runtime12 from "react/jsx-runtime";
 
 //#region src/components/PromptButtonCarouselWithImage/PromptButtonCarouselWithImage.d.ts
 declare const PromptButtonCarouselWithImage: ({
@@ -18,6 +18,6 @@ declare const PromptButtonCarouselWithImage: ({
   handlePromptButtonClick,
   textFieldPlaceholder,
   handleTextFieldClick
-}: PromptButtonCarouselWithImageProps) => react_jsx_runtime24.JSX.Element;
+}: PromptButtonCarouselWithImageProps) => react_jsx_runtime12.JSX.Element;
 //#endregion
 export { PromptButtonCarouselWithImage };

package/dist/PromptButtonCarouselWithImage/PromptButtonCarouselWithImage.d.ts

@@ -1,5 +1,5 @@
 import { PromptButtonCarouselWithImageProps } from "./types/types.js";
-import * as react_jsx_runtime7 from "react/jsx-runtime";
+import * as react_jsx_runtime18 from "react/jsx-runtime";
 
 //#region src/components/PromptButtonCarouselWithImage/PromptButtonCarouselWithImage.d.ts
 declare const PromptButtonCarouselWithImage: ({
@@ -18,6 +18,6 @@ declare const PromptButtonCarouselWithImage: ({
   handlePromptButtonClick,
   textFieldPlaceholder,
   handleTextFieldClick
-}: PromptButtonCarouselWithImageProps) => react_jsx_runtime7.JSX.Element;
+}: PromptButtonCarouselWithImageProps) => react_jsx_runtime18.JSX.Element;
 //#endregion
 export { PromptButtonCarouselWithImage };

package/dist/PromptCarousel/PromptCarousel.cjs

@@ -31,7 +31,6 @@ const PromptCarousel = ({ id, theme = require_theme.Theme.GLOBAL_CUSTOM, testId,
 		animationSpeed,
 		isAnimated: isAnimatedValue
 	});
-	console.log("PromptCarousel", promptButtonTexts, isLoading);
 	const { visibleButtonsFirstRow, visibleButtonsSecondRow } = require_useCarouselButtons.useCarouselButtons({
 		promptButtonTexts,
 		shouldShowTwoRows: shouldShowTwoRowsValue

package/dist/PromptCarousel/PromptCarousel.d.cts

@@ -1,5 +1,5 @@
 import { PromptCarouselProps } from "./types/types.cjs";
-import * as react_jsx_runtime17 from "react/jsx-runtime";
+import * as react_jsx_runtime6 from "react/jsx-runtime";
 
 //#region src/components/PromptCarousel/PromptCarousel.d.ts
 declare const PromptCarousel: ({
@@ -19,6 +19,6 @@ declare const PromptCarousel: ({
   "aria-labelledby": ariaLabelledBy,
   "aria-describedby": ariaDescribedBy,
   role
-}: PromptCarouselProps) => react_jsx_runtime17.JSX.Element;
+}: PromptCarouselProps) => react_jsx_runtime6.JSX.Element;
 //#endregion
 export { PromptCarousel };

package/dist/PromptCarousel/PromptCarousel.d.ts

@@ -1,5 +1,5 @@
 import { PromptCarouselProps } from "./types/types.js";
-import * as react_jsx_runtime14 from "react/jsx-runtime";
+import * as react_jsx_runtime16 from "react/jsx-runtime";
 
 //#region src/components/PromptCarousel/PromptCarousel.d.ts
 declare const PromptCarousel: ({
@@ -19,6 +19,6 @@ declare const PromptCarousel: ({
   "aria-labelledby": ariaLabelledBy,
   "aria-describedby": ariaDescribedBy,
   role
-}: PromptCarouselProps) => react_jsx_runtime14.JSX.Element;
+}: PromptCarouselProps) => react_jsx_runtime16.JSX.Element;
 //#endregion
 export { PromptCarousel };

package/dist/PromptCarousel/PromptCarousel.js

@@ -30,7 +30,6 @@ const PromptCarousel = ({ id, theme = Theme.GLOBAL_CUSTOM, testId, className, st
 		animationSpeed,
 		isAnimated: isAnimatedValue
 	});
-	console.log("PromptCarousel", promptButtonTexts, isLoading);
 	const { visibleButtonsFirstRow, visibleButtonsSecondRow } = useCarouselButtons({
 		promptButtonTexts,
 		shouldShowTwoRows: shouldShowTwoRowsValue

package/dist/ReviewCard/ReviewCard.d.cts

@@ -1,5 +1,5 @@
 import { ReviewCardProps } from "./types/types.cjs";
-import * as react_jsx_runtime11 from "react/jsx-runtime";
+import * as react_jsx_runtime13 from "react/jsx-runtime";
 
 //#region src/components/ReviewCard/ReviewCard.d.ts
 
@@ -25,6 +25,6 @@ declare const ReviewCard: ({
   readMoreLabel,
   readLessLabel,
   verifiedBuyerLabel
-}: ReviewCardProps) => react_jsx_runtime11.JSX.Element;
+}: ReviewCardProps) => react_jsx_runtime13.JSX.Element;
 //#endregion
 export { ReviewCard };

package/dist/ReviewCard/ReviewCard.d.ts

@@ -1,5 +1,5 @@
 import { ReviewCardProps } from "./types/types.js";
-import * as react_jsx_runtime9 from "react/jsx-runtime";
+import * as react_jsx_runtime12 from "react/jsx-runtime";
 
 //#region src/components/ReviewCard/ReviewCard.d.ts
 
@@ -25,6 +25,6 @@ declare const ReviewCard: ({
   readMoreLabel,
   readLessLabel,
   verifiedBuyerLabel
-}: ReviewCardProps) => react_jsx_runtime9.JSX.Element;
+}: ReviewCardProps) => react_jsx_runtime12.JSX.Element;
 //#endregion
 export { ReviewCard };

package/dist/ReviewCard/components/index.d.cts

@@ -2,8 +2,8 @@ import { Theme } from "../../tokens/theme/theme.cjs";
 import { ContainerProps } from "./Container.cjs";
 import { RatingProps } from "./Rating.cjs";
 import { ReadMoreButtonProps } from "./ReadMoreButton.cjs";
-import * as react5 from "react";
-import * as react_jsx_runtime12 from "react/jsx-runtime";
+import * as react178 from "react";
+import * as react_jsx_runtime14 from "react/jsx-runtime";
 
 //#region src/components/ReviewCard/components/index.d.ts
 declare const ReviewCardComponents: {
@@ -31,12 +31,12 @@ declare const ReviewCardComponents: {
     verifiedBuyerLabel?: string;
     className?: string;
     style?: React.CSSProperties;
-  }) => react_jsx_runtime12.JSX.Element;
+  }) => react_jsx_runtime14.JSX.Element;
   Rating: ({
     rating,
     theme,
     style
-  }: RatingProps) => react_jsx_runtime12.JSX.Element;
+  }: RatingProps) => react_jsx_runtime14.JSX.Element;
   StarIcon: ({
     theme,
     style,
@@ -45,7 +45,7 @@ declare const ReviewCardComponents: {
     theme: Theme;
     style?: React.CSSProperties;
     className?: string;
-  }) => react5.ReactElement<react5.SVGProps<SVGSVGElement>, string | react5.JSXElementConstructor<any>>;
+  }) => react178.ReactElement<react178.SVGProps<SVGSVGElement>, string | react178.JSXElementConstructor<any>>;
   ReviewText: ({
     reviewText,
     isExpanded,
@@ -56,7 +56,7 @@ declare const ReviewCardComponents: {
     isExpanded: boolean;
     className?: string;
     style?: React.CSSProperties;
-  }) => react_jsx_runtime12.JSX.Element;
+  }) => react_jsx_runtime14.JSX.Element;
   ReadMoreButton: ({
     isExpanded,
     onToggle,

package/dist/ReviewCard/components/index.d.ts

@@ -2,8 +2,8 @@ import { Theme } from "../../tokens/theme/theme.js";
 import { ContainerProps } from "./Container.js";
 import { RatingProps } from "./Rating.js";
 import { ReadMoreButtonProps } from "./ReadMoreButton.js";
-import * as react2 from "react";
-import * as react_jsx_runtime10 from "react/jsx-runtime";
+import * as react7 from "react";
+import * as react_jsx_runtime9 from "react/jsx-runtime";
 
 //#region src/components/ReviewCard/components/index.d.ts
 declare const ReviewCardComponents: {
@@ -31,12 +31,12 @@ declare const ReviewCardComponents: {
     verifiedBuyerLabel?: string;
     className?: string;
     style?: React.CSSProperties;
-  }) => react_jsx_runtime10.JSX.Element;
+  }) => react_jsx_runtime9.JSX.Element;
   Rating: ({
     rating,
     theme,
     style
-  }: RatingProps) => react_jsx_runtime10.JSX.Element;
+  }: RatingProps) => react_jsx_runtime9.JSX.Element;
   StarIcon: ({
     theme,
     style,
@@ -45,7 +45,7 @@ declare const ReviewCardComponents: {
     theme: Theme;
     style?: React.CSSProperties;
     className?: string;
-  }) => react2.ReactElement<react2.SVGProps<SVGSVGElement>, string | react2.JSXElementConstructor<any>>;
+  }) => react7.ReactElement<react7.SVGProps<SVGSVGElement>, string | react7.JSXElementConstructor<any>>;
   ReviewText: ({
     reviewText,
     isExpanded,
@@ -56,7 +56,7 @@ declare const ReviewCardComponents: {
     isExpanded: boolean;
     className?: string;
     style?: React.CSSProperties;
-  }) => react_jsx_runtime10.JSX.Element;
+  }) => react_jsx_runtime9.JSX.Element;
   ReadMoreButton: ({
     isExpanded,
     onToggle,

package/dist/SalesAgentProductCard/SalesAgentProductCard.d.cts

@@ -1,5 +1,5 @@
 import { SalesAgentProductCardProps } from "./types/types.cjs";
-import * as react_jsx_runtime5 from "react/jsx-runtime";
+import * as react_jsx_runtime4 from "react/jsx-runtime";
 
 //#region src/components/SalesAgentProductCard/SalesAgentProductCard.d.ts
 
@@ -29,6 +29,6 @@ declare const SalesAgentProductCard: ({
   image,
   url,
   onClick
-}: SalesAgentProductCardProps) => react_jsx_runtime5.JSX.Element;
+}: SalesAgentProductCardProps) => react_jsx_runtime4.JSX.Element;
 //#endregion
 export { SalesAgentProductCard };

package/dist/SalesAgentProductCard/SalesAgentProductCard.d.ts

@@ -1,5 +1,5 @@
 import { SalesAgentProductCardProps } from "./types/types.js";
-import * as react_jsx_runtime4 from "react/jsx-runtime";
+import * as react_jsx_runtime6 from "react/jsx-runtime";
 
 //#region src/components/SalesAgentProductCard/SalesAgentProductCard.d.ts
 
@@ -29,6 +29,6 @@ declare const SalesAgentProductCard: ({
   image,
   url,
   onClick
-}: SalesAgentProductCardProps) => react_jsx_runtime4.JSX.Element;
+}: SalesAgentProductCardProps) => react_jsx_runtime6.JSX.Element;
 //#endregion
 export { SalesAgentProductCard };

package/dist/SalesAgentProductCard/components/index.d.cts

@@ -4,7 +4,7 @@ import { ProductNameProps } from "./ProductName.cjs";
 import { PriceProps } from "./Price.cjs";
 import { RateProps } from "./Rate.cjs";
 import { ProductImageProps } from "./ProductImage.cjs";
-import * as react2 from "react";
+import * as react0 from "react";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/components/SalesAgentProductCard/components/index.d.ts
@@ -54,7 +54,7 @@ declare const SalesAgentProductCardComponents: {
   }: {
     theme: Theme;
     style?: React.CSSProperties;
-  }) => react2.ReactElement<react2.SVGProps<SVGSVGElement>, string | react2.JSXElementConstructor<any>>;
+  }) => react0.ReactElement<react0.SVGProps<SVGSVGElement>, string | react0.JSXElementConstructor<any>>;
 };
 //#endregion
 export { SalesAgentProductCardComponents };

package/dist/SalesAgentProductCard/components/index.d.ts

@@ -4,8 +4,8 @@ import { ProductNameProps } from "./ProductName.js";
 import { PriceProps } from "./Price.js";
 import { RateProps } from "./Rate.js";
 import { ProductImageProps } from "./ProductImage.js";
-import * as react0 from "react";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as react2 from "react";
+import * as react_jsx_runtime1 from "react/jsx-runtime";
 
 //#region src/components/SalesAgentProductCard/components/index.d.ts
 declare const SalesAgentProductCardComponents: {
@@ -22,24 +22,24 @@ declare const SalesAgentProductCardComponents: {
     image,
     url,
     onClick
-  }: ContainerProps) => react_jsx_runtime0.JSX.Element;
+  }: ContainerProps) => react_jsx_runtime1.JSX.Element;
   ProductName: ({
     label,
     theme,
     style,
     className
-  }: ProductNameProps) => react_jsx_runtime0.JSX.Element;
+  }: ProductNameProps) => react_jsx_runtime1.JSX.Element;
   Price: ({
     previousPrice,
     currentPrice,
     pricePrefix,
     forceShowCurrentPriceSpace
-  }: PriceProps) => react_jsx_runtime0.JSX.Element;
+  }: PriceProps) => react_jsx_runtime1.JSX.Element;
   Rate: ({
     rate,
     numberOfReviews,
     theme
-  }: RateProps) => react_jsx_runtime0.JSX.Element;
+  }: RateProps) => react_jsx_runtime1.JSX.Element;
   ProductImage: ({
     src,
     alt,
@@ -47,14 +47,14 @@ declare const SalesAgentProductCardComponents: {
     aspectRatio,
     className,
     ...props
-  }: ProductImageProps) => react_jsx_runtime0.JSX.Element;
+  }: ProductImageProps) => react_jsx_runtime1.JSX.Element;
   StarIcon: ({
     theme,
     style
   }: {
     theme: Theme;
     style?: React.CSSProperties;
-  }) => react0.ReactElement<react0.SVGProps<SVGSVGElement>, string | react0.JSXElementConstructor<any>>;
+  }) => react2.ReactElement<react2.SVGProps<SVGSVGElement>, string | react2.JSXElementConstructor<any>>;
 };
 //#endregion
 export { SalesAgentProductCardComponents };

package/dist/SocialProof/SocialProof.cjs

@@ -12,13 +12,20 @@ require('../WidgetWrapper/index.cjs');
 const require_WidgetWrapperWithTitle = require('../WidgetWrapperWithTitle/WidgetWrapperWithTitle.cjs');
 const require_types$1 = require('../ImageGallery/types/types.cjs');
 const require_index = require('./components/index.cjs');
+const require_useSocialProofCount = require('./hooks/useSocialProofCount.cjs');
+require('./hooks/index.cjs');
 let react_jsx_runtime = require("react/jsx-runtime");
 
 //#region src/components/SocialProof/SocialProof.tsx
 const SocialProof = ({ baseProps, widgetContentProps, widgetStyleProps, widgetEventProps }) => {
-	const { id, testId, className, style } = baseProps ?? {};
+	const { id, testId, className, style, pageVariant, countKey } = baseProps ?? {};
 	const { theme = require_theme.Theme.GLOBAL_CUSTOM, variant = require_types.WidgetWrapperVariant.CARD_WITH_BORDER, hexCardColor, promptCarouselRows = require_PromptCarousel_types_types.PromptCarouselRows.TWO_ON_MOBILE_ONE_ON_DESKTOP, hideImage, imageGalleryLayout, hideTextField, primaryButtonVariant = require_PromptButton_types_index.PromptButtonVariant.DARK, secondaryButtonVariant = require_PromptButton_types_index.PromptButtonVariant.LIGHT, hideLogo, dynamicLayout } = widgetStyleProps ?? {};
-	const { numberOfCustomersText, customerQueryText, primaryButtonText, secondaryButtonTitleText, secondaryButtonTexts, textFieldPlaceholderText, images, logoSrc, titleLabel } = widgetContentProps ?? {};
+	const { customerQueryText, primaryButtonText, secondaryButtonTitleText, secondaryButtonTexts, textFieldPlaceholderText, images, logoSrc, titleLabel } = widgetContentProps ?? {};
+	const numberOfCustomersText = require_useSocialProofCount.useSocialProofCount({
+		pageVariant,
+		countKey,
+		id
+	});
 	const { handlePrimaryButtonClick, handleSecondaryButtonClick, handleTextFieldClick } = widgetEventProps ?? {};
 	const finalTheme = require_resolveTheme.resolveTheme(theme);
 	const { isMobile } = require_useCheckIsMobile.useCheckIsMobile("sm");

package/dist/SocialProof/SocialProof.d.cts

@@ -1,5 +1,5 @@
 import { SocialProofProps } from "./types/types.cjs";
-import * as react_jsx_runtime20 from "react/jsx-runtime";
+import * as react_jsx_runtime5 from "react/jsx-runtime";
 
 //#region src/components/SocialProof/SocialProof.d.ts
 declare const SocialProof: ({
@@ -7,6 +7,6 @@ declare const SocialProof: ({
   widgetContentProps,
   widgetStyleProps,
   widgetEventProps
-}: SocialProofProps) => react_jsx_runtime20.JSX.Element;
+}: SocialProofProps) => react_jsx_runtime5.JSX.Element;
 //#endregion
 export { SocialProof };

package/dist/SocialProof/SocialProof.d.ts

@@ -1,5 +1,5 @@
 import { SocialProofProps } from "./types/types.js";
-import * as react_jsx_runtime5 from "react/jsx-runtime";
+import * as react_jsx_runtime17 from "react/jsx-runtime";
 
 //#region src/components/SocialProof/SocialProof.d.ts
 declare const SocialProof: ({
@@ -7,6 +7,6 @@ declare const SocialProof: ({
   widgetContentProps,
   widgetStyleProps,
   widgetEventProps
-}: SocialProofProps) => react_jsx_runtime5.JSX.Element;
+}: SocialProofProps) => react_jsx_runtime17.JSX.Element;
 //#endregion
 export { SocialProof };

package/dist/SocialProof/SocialProof.js

@@ -11,13 +11,20 @@ import "../WidgetWrapper/index.js";
 import { WidgetWrapperWithTitle } from "../WidgetWrapperWithTitle/WidgetWrapperWithTitle.js";
 import { ImageGalleryLayout } from "../ImageGallery/types/types.js";
 import { SocialProofComponents } from "./components/index.js";
+import { useSocialProofCount } from "./hooks/useSocialProofCount.js";
+import "./hooks/index.js";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/components/SocialProof/SocialProof.tsx
 const SocialProof = ({ baseProps, widgetContentProps, widgetStyleProps, widgetEventProps }) => {
-	const { id, testId, className, style } = baseProps ?? {};
+	const { id, testId, className, style, pageVariant, countKey } = baseProps ?? {};
 	const { theme = Theme.GLOBAL_CUSTOM, variant = WidgetWrapperVariant.CARD_WITH_BORDER, hexCardColor, promptCarouselRows = PromptCarouselRows.TWO_ON_MOBILE_ONE_ON_DESKTOP, hideImage, imageGalleryLayout, hideTextField, primaryButtonVariant = PromptButtonVariant.DARK, secondaryButtonVariant = PromptButtonVariant.LIGHT, hideLogo, dynamicLayout } = widgetStyleProps ?? {};
-	const { numberOfCustomersText, customerQueryText, primaryButtonText, secondaryButtonTitleText, secondaryButtonTexts, textFieldPlaceholderText, images, logoSrc, titleLabel } = widgetContentProps ?? {};
+	const { customerQueryText, primaryButtonText, secondaryButtonTitleText, secondaryButtonTexts, textFieldPlaceholderText, images, logoSrc, titleLabel } = widgetContentProps ?? {};
+	const numberOfCustomersText = useSocialProofCount({
+		pageVariant,
+		countKey,
+		id
+	});
 	const { handlePrimaryButtonClick, handleSecondaryButtonClick, handleTextFieldClick } = widgetEventProps ?? {};
 	const finalTheme = resolveTheme(theme);
 	const { isMobile } = useCheckIsMobile("sm");

package/dist/SocialProof/hooks/index.cjs

@@ -0,0 +1 @@
+const require_useSocialProofCount = require('./useSocialProofCount.cjs');

package/dist/SocialProof/hooks/index.js

@@ -0,0 +1,3 @@
+import { SOCIAL_PROOF_COUNT_KEY, useSocialProofCount } from "./useSocialProofCount.js";
+
+export {  };