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

package/dist/FloatingChat/components/MessageDivider.cjs

@@ -15,13 +15,19 @@ const MessageDivider = ({ label }) => {
 		align: "center",
 		justify: "center",
 		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: lineClassName }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: lineClassName,
+				style: { display: "block" }
+			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography.Typography, {
 				variant: require_index.TypographyVariant.B3_RG,
 				color: require_index.TypographyColor.TEXT_SECONDARY,
 				children: label
 			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: lineClassName })
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: lineClassName,
+				style: { display: "block" }
+			})
 		]
 	});
 };

package/dist/FloatingChat/components/MessageDivider.js

@@ -14,13 +14,19 @@ const MessageDivider = ({ label }) => {
 		align: "center",
 		justify: "center",
 		children: [
-			/* @__PURE__ */ jsx("div", { className: lineClassName }),
+			/* @__PURE__ */ jsx("div", {
+				className: lineClassName,
+				style: { display: "block" }
+			}),
 			/* @__PURE__ */ jsx(Typography, {
 				variant: TypographyVariant.B3_RG,
 				color: TypographyColor.TEXT_SECONDARY,
 				children: label
 			}),
-			/* @__PURE__ */ jsx("div", { className: lineClassName })
+			/* @__PURE__ */ jsx("div", {
+				className: lineClassName,
+				style: { display: "block" }
+			})
 		]
 	});
 };

package/dist/FloatingChat/components/ModalSheet.cjs

@@ -1,9 +1,9 @@
 const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
 const require_useSnapControl = require('../hooks/useSnapControl.cjs');
 const require_usePreventScroll = require('../hooks/usePreventScroll.cjs');
+let react_jsx_runtime = require("react/jsx-runtime");
 let react = require("react");
 react = require_rolldown_runtime.__toESM(react);
-let react_jsx_runtime = require("react/jsx-runtime");
 let framer_motion = require("framer-motion");
 
 //#region src/components/FloatingChat/components/ModalSheet.tsx
@@ -161,7 +161,7 @@ const ModalSheet = ({ animationKey, children, open, height, unit, snaps = [], in
 				width: "100%",
 				height: swipeviewHeightPx + BOTTOM_OFFSET,
 				position: "fixed",
-				bottom: -BOTTOM_OFFSET + 1,
+				bottom: -BOTTOM_OFFSET + 2,
 				right: 0,
 				boxSizing: "content-box",
 				zIndex: 2147483646

package/dist/FloatingChat/components/ModalSheet.js

@@ -1,7 +1,7 @@
 import { useSnapControl } from "../hooks/useSnapControl.js";
 import { usePreventScroll } from "../hooks/usePreventScroll.js";
-import React, { useEffect, useImperativeHandle } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import React, { useEffect, useImperativeHandle } from "react";
 import { AnimatePresence, motion, useAnimate } from "framer-motion";
 
 //#region src/components/FloatingChat/components/ModalSheet.tsx
@@ -159,7 +159,7 @@ const ModalSheet = ({ animationKey, children, open, height, unit, snaps = [], in
 				width: "100%",
 				height: swipeviewHeightPx + BOTTOM_OFFSET,
 				position: "fixed",
-				bottom: -BOTTOM_OFFSET + 1,
+				bottom: -BOTTOM_OFFSET + 2,
 				right: 0,
 				boxSizing: "content-box",
 				zIndex: 2147483646

package/dist/FloatingChat/components/ReviewCardsCarousel.cjs

@@ -6,9 +6,10 @@ require('../../ReviewCard/index.cjs');
 let react_jsx_runtime = require("react/jsx-runtime");
 
 //#region src/components/FloatingChat/components/ReviewCardsCarousel.tsx
-const ReviewCardsCarousel = ({ reviews, theme, showVerifiedBuyer }) => {
+const ReviewCardsCarousel = ({ reviews, theme, showVerifiedBuyer, hideNavigation = false }) => {
 	const finalTheme = require_resolveTheme.resolveTheme(theme);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Carousel.Carousel, {
+		hideNavigation,
 		elements: reviews.map((review) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ReviewCard.ReviewCard, {
 			name: review.name,
 			rating: review.rating,

package/dist/FloatingChat/components/ReviewCardsCarousel.js

@@ -5,9 +5,10 @@ import "../../ReviewCard/index.js";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/components/FloatingChat/components/ReviewCardsCarousel.tsx
-const ReviewCardsCarousel = ({ reviews, theme, showVerifiedBuyer }) => {
+const ReviewCardsCarousel = ({ reviews, theme, showVerifiedBuyer, hideNavigation = false }) => {
 	const finalTheme = resolveTheme(theme);
 	return /* @__PURE__ */ jsx(Carousel, {
+		hideNavigation,
 		elements: reviews.map((review) => /* @__PURE__ */ jsx(ReviewCard, {
 			name: review.name,
 			rating: review.rating,

package/dist/FloatingChat/components/ScrollToBottomButton.cjs

@@ -1,6 +1,6 @@
 const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
-let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
+let react = require("react");
 let __envive_ai_react_icons_ArrowUp = require("@envive-ai/react-icons/ArrowUp");
 __envive_ai_react_icons_ArrowUp = require_rolldown_runtime.__toESM(__envive_ai_react_icons_ArrowUp);
 

package/dist/FloatingChat/components/ScrollToBottomButton.js

@@ -1,5 +1,5 @@
-import { Children, cloneElement } from "react";
 import { jsx } from "react/jsx-runtime";
+import { Children, cloneElement } from "react";
 import ArrowUp from "@envive-ai/react-icons/ArrowUp";
 
 //#region src/components/FloatingChat/components/ScrollToBottomButton.tsx

package/dist/FloatingChat/hooks/useScrollToBottom.cjs

@@ -2,8 +2,15 @@ const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
 let react = require("react");
 
 //#region src/components/FloatingChat/hooks/useScrollToBottom.ts
-const useScrollToBottom = ({ messagesRef, autoScrollDependencies = [], scrollThreshold = 30 }) => {
+const useScrollToBottom = ({ messagesRef, autoScrollDependencies = [], scrollThreshold = 30, useFloatingLayout = false, footerHeight = 120, isOpen = true }) => {
 	const [showScrollButton, setShowScrollButton] = (0, react.useState)(false);
+	const [isFloatingLayout, setIsFloatingLayout] = (0, react.useState)(false);
+	const isTransitioningLayoutRef = (0, react.useRef)(false);
+	const lastScrollTopRef = (0, react.useRef)(0);
+	const scrollDirectionRef = (0, react.useRef)(null);
+	const isInitialMountRef = (0, react.useRef)(true);
+	const previousIsOpenRef = (0, react.useRef)(isOpen);
+	const blockLayoutChangeRef = (0, react.useRef)(false);
 	const getScrollableContainer = (0, react.useCallback)(() => {
 		return messagesRef.current?.closest(".envive-tw-overflow-y-auto");
 	}, [messagesRef]);
@@ -13,36 +20,127 @@ const useScrollToBottom = ({ messagesRef, autoScrollDependencies = [], scrollThr
 		const { scrollTop, scrollHeight, clientHeight } = scrollableContainer;
 		return scrollHeight - scrollTop - clientHeight < scrollThreshold;
 	}, [getScrollableContainer, scrollThreshold]);
+	(0, react.useEffect)(() => {
+		if (isOpen && !previousIsOpenRef.current) {
+			setIsFloatingLayout(false);
+			setShowScrollButton(false);
+			isInitialMountRef.current = true;
+			isTransitioningLayoutRef.current = false;
+			blockLayoutChangeRef.current = true;
+			setTimeout(() => {
+				blockLayoutChangeRef.current = false;
+			}, 500);
+		}
+		previousIsOpenRef.current = isOpen;
+	}, [isOpen]);
+	(0, react.useEffect)(() => {
+		if (useFloatingLayout) {
+			setIsFloatingLayout(false);
+			setShowScrollButton(false);
+			isInitialMountRef.current = true;
+			blockLayoutChangeRef.current = true;
+			setTimeout(() => {
+				blockLayoutChangeRef.current = false;
+			}, 500);
+		}
+	}, [useFloatingLayout]);
+	(0, react.useEffect)(() => {
+		if (!useFloatingLayout) return;
+		const scrollableContainer = getScrollableContainer();
+		if (!scrollableContainer) return;
+		const shouldBeFloating = showScrollButton;
+		if (shouldBeFloating !== isFloatingLayout && !isTransitioningLayoutRef.current) {
+			isTransitioningLayoutRef.current = true;
+			const { scrollTop, scrollHeight, clientHeight } = scrollableContainer;
+			const scrollFromBottom = scrollHeight - scrollTop - clientHeight;
+			setIsFloatingLayout(shouldBeFloating);
+			requestAnimationFrame(() => {
+				requestAnimationFrame(() => {
+					setTimeout(() => {
+						const newScrollTop = scrollableContainer.scrollHeight - scrollableContainer.clientHeight - scrollFromBottom;
+						if (scrollFromBottom > scrollThreshold) scrollableContainer.scrollTop = Math.max(0, newScrollTop);
+						setTimeout(() => {
+							isTransitioningLayoutRef.current = false;
+						}, 250);
+					}, 50);
+				});
+			});
+		}
+	}, [
+		showScrollButton,
+		isFloatingLayout,
+		getScrollableContainer,
+		useFloatingLayout,
+		scrollThreshold
+	]);
 	(0, react.useEffect)(() => {
 		const scrollableContainer = getScrollableContainer();
 		if (scrollableContainer) requestAnimationFrame(() => {
 			scrollableContainer.scrollTop = scrollableContainer.scrollHeight;
 			setShowScrollButton(false);
+			if (useFloatingLayout) {
+				setIsFloatingLayout(false);
+				isInitialMountRef.current = true;
+			}
 		});
-	}, [...autoScrollDependencies, getScrollableContainer]);
+	}, [
+		...autoScrollDependencies,
+		getScrollableContainer,
+		useFloatingLayout
+	]);
 	(0, react.useEffect)(() => {
 		const scrollableContainer = getScrollableContainer();
 		if (!scrollableContainer) return;
 		const handleScroll = () => {
-			setShowScrollButton(!checkIfScrolledToBottom());
+			if (isTransitioningLayoutRef.current || blockLayoutChangeRef.current) return;
+			const { scrollTop, scrollHeight, clientHeight } = scrollableContainer;
+			if (scrollTop > lastScrollTopRef.current) scrollDirectionRef.current = "down";
+			else if (scrollTop < lastScrollTopRef.current) scrollDirectionRef.current = "up";
+			lastScrollTopRef.current = scrollTop;
+			const contentBelowViewport = scrollHeight - scrollTop - clientHeight;
+			const upThreshold = scrollThreshold * 2;
+			if (showScrollButton) {
+				if (scrollDirectionRef.current === "down") {
+					if (contentBelowViewport <= footerHeight + 40) setShowScrollButton(false);
+				} else if (contentBelowViewport <= scrollThreshold) setShowScrollButton(false);
+			} else if (contentBelowViewport > upThreshold) setShowScrollButton(true);
 		};
 		scrollableContainer.addEventListener("scroll", handleScroll);
-		handleScroll();
+		if (!isInitialMountRef.current) handleScroll();
+		else isInitialMountRef.current = false;
 		return () => {
 			scrollableContainer.removeEventListener("scroll", handleScroll);
 		};
-	}, [getScrollableContainer, checkIfScrolledToBottom]);
+	}, [
+		getScrollableContainer,
+		checkIfScrolledToBottom,
+		scrollThreshold,
+		showScrollButton,
+		footerHeight
+	]);
 	return {
 		showScrollButton,
 		scrollToBottom: (0, react.useCallback)(() => {
 			const scrollableContainer = getScrollableContainer();
-			if (scrollableContainer) requestAnimationFrame(() => {
-				scrollableContainer.scrollTo({
-					top: scrollableContainer.scrollHeight,
-					behavior: "smooth"
+			if (scrollableContainer) {
+				blockLayoutChangeRef.current = true;
+				requestAnimationFrame(() => {
+					requestAnimationFrame(() => {
+						const targetScroll = scrollableContainer.scrollHeight;
+						scrollableContainer.scrollTo({
+							top: targetScroll,
+							behavior: "smooth"
+						});
+						setTimeout(() => {
+							blockLayoutChangeRef.current = false;
+							setShowScrollButton(false);
+							if (useFloatingLayout) setIsFloatingLayout(false);
+						}, 500);
+					});
 				});
-			});
-		}, [getScrollableContainer])
+			}
+		}, [getScrollableContainer, useFloatingLayout]),
+		isFloatingLayout: useFloatingLayout ? isFloatingLayout : false
 	};
 };
 

package/dist/FloatingChat/hooks/useScrollToBottom.js

@@ -1,8 +1,15 @@
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 
 //#region src/components/FloatingChat/hooks/useScrollToBottom.ts
-const useScrollToBottom = ({ messagesRef, autoScrollDependencies = [], scrollThreshold = 30 }) => {
+const useScrollToBottom = ({ messagesRef, autoScrollDependencies = [], scrollThreshold = 30, useFloatingLayout = false, footerHeight = 120, isOpen = true }) => {
 	const [showScrollButton, setShowScrollButton] = useState(false);
+	const [isFloatingLayout, setIsFloatingLayout] = useState(false);
+	const isTransitioningLayoutRef = useRef(false);
+	const lastScrollTopRef = useRef(0);
+	const scrollDirectionRef = useRef(null);
+	const isInitialMountRef = useRef(true);
+	const previousIsOpenRef = useRef(isOpen);
+	const blockLayoutChangeRef = useRef(false);
 	const getScrollableContainer = useCallback(() => {
 		return messagesRef.current?.closest(".envive-tw-overflow-y-auto");
 	}, [messagesRef]);
@@ -12,36 +19,127 @@ const useScrollToBottom = ({ messagesRef, autoScrollDependencies = [], scrollThr
 		const { scrollTop, scrollHeight, clientHeight } = scrollableContainer;
 		return scrollHeight - scrollTop - clientHeight < scrollThreshold;
 	}, [getScrollableContainer, scrollThreshold]);
+	useEffect(() => {
+		if (isOpen && !previousIsOpenRef.current) {
+			setIsFloatingLayout(false);
+			setShowScrollButton(false);
+			isInitialMountRef.current = true;
+			isTransitioningLayoutRef.current = false;
+			blockLayoutChangeRef.current = true;
+			setTimeout(() => {
+				blockLayoutChangeRef.current = false;
+			}, 500);
+		}
+		previousIsOpenRef.current = isOpen;
+	}, [isOpen]);
+	useEffect(() => {
+		if (useFloatingLayout) {
+			setIsFloatingLayout(false);
+			setShowScrollButton(false);
+			isInitialMountRef.current = true;
+			blockLayoutChangeRef.current = true;
+			setTimeout(() => {
+				blockLayoutChangeRef.current = false;
+			}, 500);
+		}
+	}, [useFloatingLayout]);
+	useEffect(() => {
+		if (!useFloatingLayout) return;
+		const scrollableContainer = getScrollableContainer();
+		if (!scrollableContainer) return;
+		const shouldBeFloating = showScrollButton;
+		if (shouldBeFloating !== isFloatingLayout && !isTransitioningLayoutRef.current) {
+			isTransitioningLayoutRef.current = true;
+			const { scrollTop, scrollHeight, clientHeight } = scrollableContainer;
+			const scrollFromBottom = scrollHeight - scrollTop - clientHeight;
+			setIsFloatingLayout(shouldBeFloating);
+			requestAnimationFrame(() => {
+				requestAnimationFrame(() => {
+					setTimeout(() => {
+						const newScrollTop = scrollableContainer.scrollHeight - scrollableContainer.clientHeight - scrollFromBottom;
+						if (scrollFromBottom > scrollThreshold) scrollableContainer.scrollTop = Math.max(0, newScrollTop);
+						setTimeout(() => {
+							isTransitioningLayoutRef.current = false;
+						}, 250);
+					}, 50);
+				});
+			});
+		}
+	}, [
+		showScrollButton,
+		isFloatingLayout,
+		getScrollableContainer,
+		useFloatingLayout,
+		scrollThreshold
+	]);
 	useEffect(() => {
 		const scrollableContainer = getScrollableContainer();
 		if (scrollableContainer) requestAnimationFrame(() => {
 			scrollableContainer.scrollTop = scrollableContainer.scrollHeight;
 			setShowScrollButton(false);
+			if (useFloatingLayout) {
+				setIsFloatingLayout(false);
+				isInitialMountRef.current = true;
+			}
 		});
-	}, [...autoScrollDependencies, getScrollableContainer]);
+	}, [
+		...autoScrollDependencies,
+		getScrollableContainer,
+		useFloatingLayout
+	]);
 	useEffect(() => {
 		const scrollableContainer = getScrollableContainer();
 		if (!scrollableContainer) return;
 		const handleScroll = () => {
-			setShowScrollButton(!checkIfScrolledToBottom());
+			if (isTransitioningLayoutRef.current || blockLayoutChangeRef.current) return;
+			const { scrollTop, scrollHeight, clientHeight } = scrollableContainer;
+			if (scrollTop > lastScrollTopRef.current) scrollDirectionRef.current = "down";
+			else if (scrollTop < lastScrollTopRef.current) scrollDirectionRef.current = "up";
+			lastScrollTopRef.current = scrollTop;
+			const contentBelowViewport = scrollHeight - scrollTop - clientHeight;
+			const upThreshold = scrollThreshold * 2;
+			if (showScrollButton) {
+				if (scrollDirectionRef.current === "down") {
+					if (contentBelowViewport <= footerHeight + 40) setShowScrollButton(false);
+				} else if (contentBelowViewport <= scrollThreshold) setShowScrollButton(false);
+			} else if (contentBelowViewport > upThreshold) setShowScrollButton(true);
 		};
 		scrollableContainer.addEventListener("scroll", handleScroll);
-		handleScroll();
+		if (!isInitialMountRef.current) handleScroll();
+		else isInitialMountRef.current = false;
 		return () => {
 			scrollableContainer.removeEventListener("scroll", handleScroll);
 		};
-	}, [getScrollableContainer, checkIfScrolledToBottom]);
+	}, [
+		getScrollableContainer,
+		checkIfScrolledToBottom,
+		scrollThreshold,
+		showScrollButton,
+		footerHeight
+	]);
 	return {
 		showScrollButton,
 		scrollToBottom: useCallback(() => {
 			const scrollableContainer = getScrollableContainer();
-			if (scrollableContainer) requestAnimationFrame(() => {
-				scrollableContainer.scrollTo({
-					top: scrollableContainer.scrollHeight,
-					behavior: "smooth"
+			if (scrollableContainer) {
+				blockLayoutChangeRef.current = true;
+				requestAnimationFrame(() => {
+					requestAnimationFrame(() => {
+						const targetScroll = scrollableContainer.scrollHeight;
+						scrollableContainer.scrollTo({
+							top: targetScroll,
+							behavior: "smooth"
+						});
+						setTimeout(() => {
+							blockLayoutChangeRef.current = false;
+							setShowScrollButton(false);
+							if (useFloatingLayout) setIsFloatingLayout(false);
+						}, 500);
+					});
 				});
-			});
-		}, [getScrollableContainer])
+			}
+		}, [getScrollableContainer, useFloatingLayout]),
+		isFloatingLayout: useFloatingLayout ? isFloatingLayout : false
 	};
 };
 

package/dist/FloatingChat/hooks/useSnapSetup.cjs

@@ -22,11 +22,9 @@ const useSnapSetup = ({ isFloatingChatOpen }) => {
 	const snap100Percent = 0;
 	const mobileHeaderHeight = (0, framer_motion.useTransform)(animationKey, [snap100Percent, snap43Percent], [56, 0]);
 	const [shouldShowHeader, setShouldShowHeader] = (0, react.useState)(false);
-	const [shouldShowScrolled, setShouldShowScrolled] = (0, react.useState)(false);
 	(0, react.useEffect)(() => {
 		return animationKey.on("change", (value) => {
 			setShouldShowHeader(value < snap43Percent - 10);
-			setShouldShowScrolled(value > snap43Percent);
 		});
 	}, [animationKey, snap43Percent]);
 	const isFullView = isMobile && currentSnapPercentage === 100;
@@ -49,7 +47,6 @@ const useSnapSetup = ({ isFloatingChatOpen }) => {
 		snap43Percent,
 		snap100Percent,
 		shouldShowHeader,
-		shouldShowScrolled,
 		isFullView,
 		isPartialView
 	};

package/dist/FloatingChat/hooks/useSnapSetup.js

@@ -21,11 +21,9 @@ const useSnapSetup = ({ isFloatingChatOpen }) => {
 	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;
@@ -48,7 +46,6 @@ const useSnapSetup = ({ isFloatingChatOpen }) => {
 		snap43Percent,
 		snap100Percent,
 		shouldShowHeader,
-		shouldShowScrolled,
 		isFullView,
 		isPartialView
 	};

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

@@ -1,6 +1,7 @@
 import { Theme } from "../../tokens/theme/theme.cjs";
 import { SalesAgent } from "@envive-ai/react-hooks/contexts/salesAgentContext";
 import { FloatingChatConfig, LookAndFeelConfig } from "@envive-ai/react-hooks/contexts/typesV3";
+import { HardcopyResponse } from "@envive-ai/react-hooks/contexts/hardcopyContext";
 
 //#region src/components/FloatingChat/types/types.d.ts
 
@@ -25,11 +26,6 @@ interface FloatingChatProps {
    * Test identifier for testing utilities.
    */
   testId?: string;
-  /**
-   * Whether the chat is in a loading state.
-   * @todo Needs to implement isLoading functionality.
-   */
-  isLoading?: boolean;
   /**
    * Theme variant to apply to the chat interface.
    * @default Theme.GLOBAL_CUSTOM
@@ -63,6 +59,10 @@ interface FloatingChatProps {
    * Whether the chat is open.
    */
   isFloatingChatOpen: boolean;
+  /**
+   * Hardcopy content to display in the chat.
+   */
+  hardcopyContent: HardcopyResponse;
 }
 //#endregion
 export { FloatingChatProps };

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

@@ -1,6 +1,7 @@
-import { Theme } from "../../tokens/theme/theme.js";
+import { Theme } from "../../packages/components-v3/tokens/theme/theme.js";
 import { SalesAgent } from "@envive-ai/react-hooks/contexts/salesAgentContext";
 import { FloatingChatConfig, LookAndFeelConfig } from "@envive-ai/react-hooks/contexts/typesV3";
+import { HardcopyResponse } from "@envive-ai/react-hooks/contexts/hardcopyContext";
 
 //#region src/components/FloatingChat/types/types.d.ts
 
@@ -25,11 +26,6 @@ interface FloatingChatProps {
    * Test identifier for testing utilities.
    */
   testId?: string;
-  /**
-   * Whether the chat is in a loading state.
-   * @todo Needs to implement isLoading functionality.
-   */
-  isLoading?: boolean;
   /**
    * Theme variant to apply to the chat interface.
    * @default Theme.GLOBAL_CUSTOM
@@ -63,6 +59,10 @@ interface FloatingChatProps {
    * Whether the chat is open.
    */
   isFloatingChatOpen: boolean;
+  /**
+   * Hardcopy content to display in the chat.
+   */
+  hardcopyContent: HardcopyResponse;
 }
 //#endregion
 export { FloatingChatProps };

package/dist/FloatingChat/utils/functions.cjs

@@ -66,6 +66,7 @@ const getCleanOrders = (messages) => {
 	if (!order || lineItems.length === 0) return null;
 	return lineItems.map((item) => {
 		if (item.image && item.orderItemId && order.createdAt) return {
+			id: item.orderItemId,
 			productImages: [item.image],
 			orderStatus: item.fulfillmentDisplayStatus,
 			orderNumber: order.metadata.orderNumber,

package/dist/FloatingChat/utils/functions.js

@@ -65,6 +65,7 @@ const getCleanOrders = (messages) => {
 	if (!order || lineItems.length === 0) return null;
 	return lineItems.map((item) => {
 		if (item.image && item.orderItemId && order.createdAt) return {
+			id: item.orderItemId,
 			productImages: [item.image],
 			orderStatus: item.fulfillmentDisplayStatus,
 			orderNumber: order.metadata.orderNumber,

package/dist/Form/Form.cjs

@@ -4,8 +4,8 @@ const require_useFormsTextFieldValues = require('./hooks/useFormsTextFieldValues
 const require_buildSubmitButtonElement = require('./utils/buildSubmitButtonElement.cjs');
 const require_handleFormsSubmit = require('./utils/handleFormsSubmit.cjs');
 const require_mapTextFields = require('./utils/mapTextFields.cjs');
-let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
+let react = require("react");
 let classnames = require("classnames");
 classnames = require_rolldown_runtime.__toESM(classnames);
 

package/dist/Form/Form.js

@@ -3,8 +3,8 @@ import { useFormsTextFieldValues } from "./hooks/useFormsTextFieldValues.js";
 import { buildSubmitButtonElement } from "./utils/buildSubmitButtonElement.js";
 import { handleFormsSubmit } from "./utils/handleFormsSubmit.js";
 import { mapTextFields } from "./utils/mapTextFields.js";
-import { useState } from "react";
 import { jsx } from "react/jsx-runtime";
+import { useState } from "react";
 import classNames from "classnames";
 
 //#region src/components/Form/Form.tsx

package/dist/Image/Image.d.cts

@@ -1,5 +1,5 @@
 import { ImageProps } from "./types/index.cjs";
-import * as react_jsx_runtime21 from "react/jsx-runtime";
+import * as react_jsx_runtime34 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_runtime34.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_runtime20 from "react/jsx-runtime";
+import * as react_jsx_runtime24 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_runtime20.JSX.Element;
+}: ImageProps) => react_jsx_runtime24.JSX.Element;
 //#endregion
 export { Image };

package/dist/ImageGallery/ImageGallery.cjs

@@ -1,5 +1,5 @@
 const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
-const require_theme = require('../tokens/theme/theme.cjs');
+const require_theme = require('../packages/components-v3/tokens/theme/theme.cjs');
 const require_index = require('../Image/types/index.cjs');
 const require_index$1 = require('./components/index.cjs');
 let react_jsx_runtime = require("react/jsx-runtime");

package/dist/ImageGallery/ImageGallery.d.cts

@@ -1,5 +1,5 @@
 import { ImageGalleryProps } from "./types/types.cjs";
-import * as react_jsx_runtime26 from "react/jsx-runtime";
+import * as react_jsx_runtime25 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_runtime26.JSX.Element;
+}: ImageGalleryProps) => react_jsx_runtime25.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_runtime30 from "react/jsx-runtime";
+import * as react_jsx_runtime19 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_runtime30.JSX.Element;
+}: ImageGalleryProps) => react_jsx_runtime19.JSX.Element;
 //#endregion
 export { ImageGallery };

package/dist/ImageGallery/ImageGallery.js

@@ -1,4 +1,4 @@
-import { Theme } from "../tokens/theme/theme.js";
+import { Theme } from "../packages/components-v3/tokens/theme/theme.js";
 import { ImageAspectRatio, ImageObjectFit } from "../Image/types/index.js";
 import { ImageGalleryComponents } from "./components/index.js";
 import { jsx } from "react/jsx-runtime";