@envive-ai/react-toolkit-v3 0.3.28 → 0.3.30

package/dist/FloatingChat/FloatingChat.d.cts

@@ -1,5 +1,5 @@
 import { FloatingChatProps } from "./types/types.cjs";
-import * as react_jsx_runtime8 from "react/jsx-runtime";
+import * as react_jsx_runtime3 from "react/jsx-runtime";
 
 //#region src/components/FloatingChat/FloatingChat.d.ts
 declare const FloatingChat: ({
@@ -19,6 +19,6 @@ declare const FloatingChat: ({
   onSwipeClose,
   onToggleCXButton,
   setIsResultsModalOpen
-}: FloatingChatProps) => react_jsx_runtime8.JSX.Element;
+}: FloatingChatProps) => react_jsx_runtime3.JSX.Element;
 //#endregion
 export { FloatingChat };

package/dist/FloatingChat/FloatingChat.d.ts

@@ -1,5 +1,5 @@
 import { FloatingChatProps } from "./types/types.js";
-import * as react_jsx_runtime24 from "react/jsx-runtime";
+import * as react_jsx_runtime27 from "react/jsx-runtime";
 
 //#region src/components/FloatingChat/FloatingChat.d.ts
 declare const FloatingChat: ({
@@ -19,6 +19,6 @@ declare const FloatingChat: ({
   onSwipeClose,
   onToggleCXButton,
   setIsResultsModalOpen
-}: FloatingChatProps) => react_jsx_runtime24.JSX.Element;
+}: FloatingChatProps) => react_jsx_runtime27.JSX.Element;
 //#endregion
 export { FloatingChat };

package/dist/FloatingChat/components/AgentMessage.cjs

@@ -65,6 +65,7 @@ const AgentMessage = ({ theme = require_theme.Theme.GLOBAL_CUSTOM, agentName, ty
 	};
 	if (textContentMessageTypes.has(type)) return messages.map((msg) => {
 		if (msg.type === __envive_ai_react_hooks_application_models.MessageType.Text && msg.metadata.content) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Message.Message, {
+			theme: finalTheme,
 			variant: require_index.MessageVariant.AGENT,
 			agentName: hideAgentName ? void 0 : agentName,
 			showSparkle: isResponseStreaming || isPendingResponse,

package/dist/FloatingChat/components/AgentMessage.js

@@ -64,6 +64,7 @@ const AgentMessage = ({ theme = Theme.GLOBAL_CUSTOM, agentName, type, messages,
 	};
 	if (textContentMessageTypes.has(type)) return messages.map((msg) => {
 		if (msg.type === MessageType.Text && msg.metadata.content) return /* @__PURE__ */ jsx(Message, {
+			theme: finalTheme,
 			variant: MessageVariant.AGENT,
 			agentName: hideAgentName ? void 0 : agentName,
 			showSparkle: isResponseStreaming || isPendingResponse,

package/dist/FloatingChat/components/ChatMessages.cjs

@@ -1,11 +1,11 @@
 const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
 const require_theme = require('../../packages/components-v3/tokens/theme/theme.cjs');
-const require_resolveTheme = require('../../utils/resolveTheme.cjs');
 const require_Stack = require('../../Stack/Stack.cjs');
 require('../../Stack/index.cjs');
 const require_index = require('../../Typography/types/index.cjs');
 const require_Typography = require('../../Typography/Typography.cjs');
 require('../../Typography/index.cjs');
+const require_resolveTheme = require('../../utils/resolveTheme.cjs');
 const require_functions = require('../utils/functions.cjs');
 const require_index$1 = require('../../Message/types/index.cjs');
 const require_Message = require('../../Message/Message.cjs');

package/dist/FloatingChat/components/ChatMessages.js

@@ -1,10 +1,10 @@
 import { Theme } from "../../packages/components-v3/tokens/theme/theme.js";
-import { resolveTheme } from "../../utils/resolveTheme.js";
 import { Stack } from "../../Stack/Stack.js";
 import "../../Stack/index.js";
 import { TypographyColor, TypographyVariant } from "../../Typography/types/index.js";
 import { Typography } from "../../Typography/Typography.js";
 import "../../Typography/index.js";
+import { resolveTheme } from "../../utils/resolveTheme.js";
 import { checkIfHideAgentName, getGroupableMessages } from "../utils/functions.js";
 import { MessageVariant } from "../../Message/types/index.js";
 import { Message } from "../../Message/Message.js";

package/dist/FloatingChat/components/Layout.cjs

@@ -1,10 +1,10 @@
 const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
 const require_theme = require('../../packages/components-v3/tokens/theme/theme.cjs');
-const require_resolveTheme = require('../../utils/resolveTheme.cjs');
-const require_Container = require('../../Container/Container.cjs');
-require('../../Container/index.cjs');
 const require_Stack = require('../../Stack/Stack.cjs');
 require('../../Stack/index.cjs');
+const require_Container = require('../../Container/Container.cjs');
+require('../../Container/index.cjs');
+const require_resolveTheme = require('../../utils/resolveTheme.cjs');
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 let classnames = require("classnames");

package/dist/FloatingChat/components/Layout.js

@@ -1,9 +1,9 @@
 import { Theme } from "../../packages/components-v3/tokens/theme/theme.js";
-import { resolveTheme } from "../../utils/resolveTheme.js";
-import { Container } from "../../Container/Container.js";
-import "../../Container/index.js";
 import { Stack } from "../../Stack/Stack.js";
 import "../../Stack/index.js";
+import { Container } from "../../Container/Container.js";
+import "../../Container/index.js";
+import { resolveTheme } from "../../utils/resolveTheme.js";
 import { isValidElement } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import classNames from "classnames";

package/dist/FloatingChat/components/ResultsGridView.cjs

@@ -1,10 +1,10 @@
 const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
-const require_resolveTheme = require('../../utils/resolveTheme.cjs');
 const require_Stack = require('../../Stack/Stack.cjs');
 require('../../Stack/index.cjs');
 const require_index = require('../../Typography/types/index.cjs');
 const require_Typography = require('../../Typography/Typography.cjs');
 require('../../Typography/index.cjs');
+const require_resolveTheme = require('../../utils/resolveTheme.cjs');
 const require_types = require('../../SalesAgentProductCard/types/types.cjs');
 const require_SalesAgentProductCard = require('../../SalesAgentProductCard/SalesAgentProductCard.cjs');
 let react_jsx_runtime = require("react/jsx-runtime");

package/dist/FloatingChat/components/ResultsGridView.js

@@ -1,9 +1,9 @@
-import { resolveTheme } from "../../utils/resolveTheme.js";
 import { Stack } from "../../Stack/Stack.js";
 import "../../Stack/index.js";
 import { TypographyColor, TypographyVariant } from "../../Typography/types/index.js";
 import { Typography } from "../../Typography/Typography.js";
 import "../../Typography/index.js";
+import { resolveTheme } from "../../utils/resolveTheme.js";
 import { SalesAgentProductCardVariant } from "../../SalesAgentProductCard/types/types.js";
 import { SalesAgentProductCard } from "../../SalesAgentProductCard/SalesAgentProductCard.js";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/FloatingChat/components/SalesAgentBadgeContent.cjs

@@ -1,9 +1,9 @@
 const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
 const require_Stack = require('../../Stack/Stack.cjs');
+const require_ArrowIcon = require('../../Carousel/components/ArrowIcon.cjs');
 const require_index = require('../../Typography/types/index.cjs');
 const require_Typography = require('../../Typography/Typography.cjs');
 require('../../Typography/index.cjs');
-const require_ArrowIcon = require('../../Carousel/components/ArrowIcon.cjs');
 const require_functions = require('../utils/functions.cjs');
 let react = require("react");
 react = require_rolldown_runtime.__toESM(react);

package/dist/FloatingChat/components/SalesAgentBadgeContent.js

@@ -1,8 +1,8 @@
 import { Stack } from "../../Stack/Stack.js";
+import { ArrowIcon } from "../../Carousel/components/ArrowIcon.js";
 import { TypographyColor, TypographyVariant } from "../../Typography/types/index.js";
 import { Typography } from "../../Typography/Typography.js";
 import "../../Typography/index.js";
-import { ArrowIcon } from "../../Carousel/components/ArrowIcon.js";
 import { MOST_RELEVANT_DISPLAY_LIMIT } from "../utils/functions.js";
 import React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/FullPageSalesAgent/FullPageSalesAgent.cjs

@@ -1,7 +1,7 @@
 const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
 const require_theme = require('../packages/components-v3/tokens/theme/theme.cjs');
-require('../Tokens/index.cjs');
 const require_resolveTheme = require('../utils/resolveTheme.cjs');
+require('../Tokens/index.cjs');
 const require_react = require('../node_modules/jotai/esm/react.cjs');
 const require_usePromptCarouselAnalytics = require('../PromptCarousel/hooks/usePromptCarouselAnalytics.cjs');
 const require_PromptButton_types_index = require('../PromptButton/types/index.cjs');
@@ -294,8 +294,7 @@ const FullPageSalesAgent = ({ theme = require_theme.Theme.GLOBAL_CUSTOM, floatin
 		headerContainer,
 		autoHeight,
 		scrollContainerRef,
-		backgroundStyle,
-		overlay: overlayEnabled ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_WelcomeOverlay.WelcomeOverlay, {
+		overlay: overlayEnabled && showOverlay ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_WelcomeOverlay.WelcomeOverlay, {
 			show: showOverlay,
 			theme: resolvedTheme,
 			suggestionButtonType,

package/dist/FullPageSalesAgent/FullPageSalesAgent.d.cts

@@ -1,5 +1,5 @@
 import { Theme } from "../tokens/theme/theme.cjs";
-import * as react_jsx_runtime22 from "react/jsx-runtime";
+import * as react_jsx_runtime5 from "react/jsx-runtime";
 import { FloatingChatConfig, FullPageSalesAgentWidgetV3Config, LookAndFeelConfig } from "@envive-ai/react-hooks/contexts/typesV3";
 import { HardcopyResponse } from "@envive-ai/react-hooks/contexts/hardcopyContext";
 
@@ -19,6 +19,6 @@ declare const FullPageSalesAgent: ({
   widgetConfig,
   hardcopyContent,
   voiceInputEnabled
-}: FullPageSalesAgentProps) => react_jsx_runtime22.JSX.Element;
+}: FullPageSalesAgentProps) => react_jsx_runtime5.JSX.Element;
 //#endregion
 export { FullPageSalesAgent };

package/dist/FullPageSalesAgent/FullPageSalesAgent.d.ts

@@ -1,5 +1,5 @@
 import { Theme } from "../packages/components-v3/tokens/theme/theme.js";
-import * as react_jsx_runtime25 from "react/jsx-runtime";
+import * as react_jsx_runtime31 from "react/jsx-runtime";
 import { FloatingChatConfig, FullPageSalesAgentWidgetV3Config, LookAndFeelConfig } from "@envive-ai/react-hooks/contexts/typesV3";
 import { HardcopyResponse } from "@envive-ai/react-hooks/contexts/hardcopyContext";
 
@@ -19,6 +19,6 @@ declare const FullPageSalesAgent: ({
   widgetConfig,
   hardcopyContent,
   voiceInputEnabled
-}: FullPageSalesAgentProps) => react_jsx_runtime25.JSX.Element;
+}: FullPageSalesAgentProps) => react_jsx_runtime31.JSX.Element;
 //#endregion
 export { FullPageSalesAgent };

package/dist/FullPageSalesAgent/FullPageSalesAgent.js

@@ -1,6 +1,6 @@
 import { Theme } from "../packages/components-v3/tokens/theme/theme.js";
-import "../Tokens/index.js";
 import { resolveTheme } from "../utils/resolveTheme.js";
+import "../Tokens/index.js";
 import { useSetAtom } from "../node_modules/jotai/esm/react.js";
 import { usePromptCarouselAnalytics } from "../PromptCarousel/hooks/usePromptCarouselAnalytics.js";
 import { PromptButtonVariant } from "../PromptButton/types/index.js";
@@ -293,8 +293,7 @@ const FullPageSalesAgent = ({ theme = Theme.GLOBAL_CUSTOM, floatingChatConfig, l
 		headerContainer,
 		autoHeight,
 		scrollContainerRef,
-		backgroundStyle,
-		overlay: overlayEnabled ? /* @__PURE__ */ jsx(WelcomeOverlay, {
+		overlay: overlayEnabled && showOverlay ? /* @__PURE__ */ jsx(WelcomeOverlay, {
 			show: showOverlay,
 			theme: resolvedTheme,
 			suggestionButtonType,

package/dist/FullPageSalesAgent/components/Layout.cjs

@@ -22,39 +22,36 @@ const Layout = ({ theme, welcomeMessage, footer, chatMessages, answerSuggestions
 		headerContainer,
 		autoHeight
 	});
+	if (overlay) return overlay;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: (0, classnames.default)(containerClasses, "envive-tw-relative"),
 		style: {
 			...containerStyles,
 			...backgroundStyle
 		},
-		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				ref: scrollContainerRef,
-				className: contentClasses,
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Stack.Stack, {
-					direction: "column",
-					justify: "between",
-					children: [welcomeMessage, disclaimer]
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Stack.Stack, {
-					direction: "column",
-					gap: "0",
-					className: (0, classnames.default)((!hasWelcomeMessage || hasWelcomeMessage && theme === require_theme.Theme.STANDARD) && !hasAnswerSuggestions && "envive-tw-pb-4", isMobile ? "envive-tw-pt-4" : "envive-tw-pt-6"),
-					children: [chatMessages, answerSuggestions]
-				})]
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: footerContainerClasses,
-				children: [scrollToBottomButton && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "envive-tw-h-[0px]",
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: "envive-tw-ml-auto envive-tw-table envive-tw-translate-x-[-30px] envive-tw-translate-y-[-50px]",
-						children: scrollToBottomButton
-					})
-				}), footer]
-			}),
-			overlay
-		]
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			ref: scrollContainerRef,
+			className: contentClasses,
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Stack.Stack, {
+				direction: "column",
+				justify: "between",
+				children: [welcomeMessage, disclaimer]
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Stack.Stack, {
+				direction: "column",
+				gap: "0",
+				className: (0, classnames.default)((!hasWelcomeMessage || hasWelcomeMessage && theme === require_theme.Theme.STANDARD) && !hasAnswerSuggestions && "envive-tw-pb-4", isMobile ? "envive-tw-pt-4" : "envive-tw-pt-6"),
+				children: [chatMessages, answerSuggestions]
+			})]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: footerContainerClasses,
+			children: [scrollToBottomButton && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "envive-tw-h-[0px]",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "envive-tw-ml-auto envive-tw-table envive-tw-translate-x-[-30px] envive-tw-translate-y-[-50px]",
+					children: scrollToBottomButton
+				})
+			}), footer]
+		})]
 	});
 };
 

package/dist/FullPageSalesAgent/components/Layout.js

@@ -20,39 +20,36 @@ const Layout = ({ theme, welcomeMessage, footer, chatMessages, answerSuggestions
 		headerContainer,
 		autoHeight
 	});
+	if (overlay) return overlay;
 	return /* @__PURE__ */ jsxs("div", {
 		className: classNames(containerClasses, "envive-tw-relative"),
 		style: {
 			...containerStyles,
 			...backgroundStyle
 		},
-		children: [
-			/* @__PURE__ */ jsxs("div", {
-				ref: scrollContainerRef,
-				className: contentClasses,
-				children: [/* @__PURE__ */ jsxs(Stack, {
-					direction: "column",
-					justify: "between",
-					children: [welcomeMessage, disclaimer]
-				}), /* @__PURE__ */ jsxs(Stack, {
-					direction: "column",
-					gap: "0",
-					className: classNames((!hasWelcomeMessage || hasWelcomeMessage && theme === Theme.STANDARD) && !hasAnswerSuggestions && "envive-tw-pb-4", isMobile ? "envive-tw-pt-4" : "envive-tw-pt-6"),
-					children: [chatMessages, answerSuggestions]
-				})]
-			}),
-			/* @__PURE__ */ jsxs("div", {
-				className: footerContainerClasses,
-				children: [scrollToBottomButton && /* @__PURE__ */ jsx("div", {
-					className: "envive-tw-h-[0px]",
-					children: /* @__PURE__ */ jsx("div", {
-						className: "envive-tw-ml-auto envive-tw-table envive-tw-translate-x-[-30px] envive-tw-translate-y-[-50px]",
-						children: scrollToBottomButton
-					})
-				}), footer]
-			}),
-			overlay
-		]
+		children: [/* @__PURE__ */ jsxs("div", {
+			ref: scrollContainerRef,
+			className: contentClasses,
+			children: [/* @__PURE__ */ jsxs(Stack, {
+				direction: "column",
+				justify: "between",
+				children: [welcomeMessage, disclaimer]
+			}), /* @__PURE__ */ jsxs(Stack, {
+				direction: "column",
+				gap: "0",
+				className: classNames((!hasWelcomeMessage || hasWelcomeMessage && theme === Theme.STANDARD) && !hasAnswerSuggestions && "envive-tw-pb-4", isMobile ? "envive-tw-pt-4" : "envive-tw-pt-6"),
+				children: [chatMessages, answerSuggestions]
+			})]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: footerContainerClasses,
+			children: [scrollToBottomButton && /* @__PURE__ */ jsx("div", {
+				className: "envive-tw-h-[0px]",
+				children: /* @__PURE__ */ jsx("div", {
+					className: "envive-tw-ml-auto envive-tw-table envive-tw-translate-x-[-30px] envive-tw-translate-y-[-50px]",
+					children: scrollToBottomButton
+				})
+			}), footer]
+		})]
 	});
 };
 

package/dist/FullPageSalesAgent/components/WelcomeOverlay.cjs

@@ -19,21 +19,14 @@ const WelcomeOverlay = ({ show, theme, title, promptSuggestions, productCarousel
 	const { products, isLoading } = require_useWelcomeOverlayProducts.useWelcomeOverlayProducts(productIds);
 	const showProductCarousel = !isLoading && products.length > 0 && !!productCarouselTitle;
 	const welcomeOverlayClassNames = (0, classnames.default)([
+		"envive-overlay",
 		"envive-tw-inset-0",
 		"envive-tw-absolute",
 		"envive-tw-z-20",
 		"envive-tw-flex",
 		"envive-tw-w-full",
-		"envive-tw-h-full",
-		"envive-tw-max-w-[768px]",
 		"envive-tw-flex-col"
 	]);
-	const titleClassNames = (0, classnames.default)([
-		"envive-tw-flex",
-		"envive-tw-flex-row",
-		"envive-tw-gap-2",
-		"envive-tw-items-center"
-	]);
 	const titleBoxClassNames = (0, classnames.default)([
 		"envive-tw-flex",
 		"envive-tw-py-4",
@@ -46,6 +39,22 @@ const WelcomeOverlay = ({ show, theme, title, promptSuggestions, productCarousel
 		"envive-tw-border",
 		"envive-tw-rounded-global-custom"
 	]);
+	const overlayContentClassNames = (0, classnames.default)([
+		"envive-tw-inset-0",
+		"envive-tw-mx-auto",
+		"envive-tw-flex",
+		"envive-tw-w-full",
+		"envive-tw-max-w-[768px]",
+		"envive-tw-flex-1",
+		"envive-tw-flex-col",
+		"envive-tw-gap-6",
+		"envive-tw-overflow-y-auto",
+		"envive-tw-overflow-x-hidden",
+		"envive-tw-px-4",
+		"envive-tw-pb-4",
+		"envive-tw-pt-6",
+		"lg:envive-tw-gap-10"
+	]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.AnimatePresence, { children: show && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.motion.div, {
 		className: welcomeOverlayClassNames,
 		style: backgroundStyle,
@@ -58,18 +67,19 @@ const WelcomeOverlay = ({ show, theme, title, promptSuggestions, productCarousel
 			}
 		},
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "envive-tw-flex envive-tw-flex-1 envive-tw-flex-col envive-tw-gap-6 envive-tw-overflow-y-auto envive-tw-overflow-x-hidden envive-tw-px-4 envive-tw-pb-4 envive-tw-pt-6 lg:envive-tw-gap-10",
+			className: overlayContentClassNames,
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: titleBoxClassNames,
 				children: [
-					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: titleClassNames,
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography.Typography, {
-							variant: require_index.TypographyVariant.T3_MD,
-							children: title
-						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_SparkleAnimation.SparkleAnimation, {
-							color: sparkleColor,
-							animate: false
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Typography.Typography, {
+						variant: require_index.TypographyVariant.T3_MD,
+						as: "span",
+						children: [title, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "envive-tw-ml-1 envive-tw-inline-block envive-tw-align-top",
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_SparkleAnimation.SparkleAnimation, {
+								color: sparkleColor,
+								animate: false
+							})
 						})]
 					}),
 					chatFooter,

package/dist/FullPageSalesAgent/components/WelcomeOverlay.js

@@ -17,21 +17,14 @@ const WelcomeOverlay = ({ show, theme, title, promptSuggestions, productCarousel
 	const { products, isLoading } = useWelcomeOverlayProducts(productIds);
 	const showProductCarousel = !isLoading && products.length > 0 && !!productCarouselTitle;
 	const welcomeOverlayClassNames = classNames([
+		"envive-overlay",
 		"envive-tw-inset-0",
 		"envive-tw-absolute",
 		"envive-tw-z-20",
 		"envive-tw-flex",
 		"envive-tw-w-full",
-		"envive-tw-h-full",
-		"envive-tw-max-w-[768px]",
 		"envive-tw-flex-col"
 	]);
-	const titleClassNames = classNames([
-		"envive-tw-flex",
-		"envive-tw-flex-row",
-		"envive-tw-gap-2",
-		"envive-tw-items-center"
-	]);
 	const titleBoxClassNames = classNames([
 		"envive-tw-flex",
 		"envive-tw-py-4",
@@ -44,6 +37,22 @@ const WelcomeOverlay = ({ show, theme, title, promptSuggestions, productCarousel
 		"envive-tw-border",
 		"envive-tw-rounded-global-custom"
 	]);
+	const overlayContentClassNames = classNames([
+		"envive-tw-inset-0",
+		"envive-tw-mx-auto",
+		"envive-tw-flex",
+		"envive-tw-w-full",
+		"envive-tw-max-w-[768px]",
+		"envive-tw-flex-1",
+		"envive-tw-flex-col",
+		"envive-tw-gap-6",
+		"envive-tw-overflow-y-auto",
+		"envive-tw-overflow-x-hidden",
+		"envive-tw-px-4",
+		"envive-tw-pb-4",
+		"envive-tw-pt-6",
+		"lg:envive-tw-gap-10"
+	]);
 	return /* @__PURE__ */ jsx(AnimatePresence, { children: show && /* @__PURE__ */ jsx(motion.div, {
 		className: welcomeOverlayClassNames,
 		style: backgroundStyle,
@@ -56,18 +65,19 @@ const WelcomeOverlay = ({ show, theme, title, promptSuggestions, productCarousel
 			}
 		},
 		children: /* @__PURE__ */ jsxs("div", {
-			className: "envive-tw-flex envive-tw-flex-1 envive-tw-flex-col envive-tw-gap-6 envive-tw-overflow-y-auto envive-tw-overflow-x-hidden envive-tw-px-4 envive-tw-pb-4 envive-tw-pt-6 lg:envive-tw-gap-10",
+			className: overlayContentClassNames,
 			children: [/* @__PURE__ */ jsxs("div", {
 				className: titleBoxClassNames,
 				children: [
-					/* @__PURE__ */ jsxs("div", {
-						className: titleClassNames,
-						children: [/* @__PURE__ */ jsx(Typography, {
-							variant: TypographyVariant.T3_MD,
-							children: title
-						}), /* @__PURE__ */ jsx(SparkleAnimation, {
-							color: sparkleColor,
-							animate: false
+					/* @__PURE__ */ jsxs(Typography, {
+						variant: TypographyVariant.T3_MD,
+						as: "span",
+						children: [title, /* @__PURE__ */ jsx("span", {
+							className: "envive-tw-ml-1 envive-tw-inline-block envive-tw-align-top",
+							children: /* @__PURE__ */ jsx(SparkleAnimation, {
+								color: sparkleColor,
+								animate: false
+							})
 						})]
 					}),
 					chatFooter,

package/dist/Image/Image.d.cts

@@ -1,5 +1,5 @@
 import { ImageProps } from "./types/index.cjs";
-import * as react_jsx_runtime12 from "react/jsx-runtime";
+import * as react_jsx_runtime6 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_runtime12.JSX.Element;
+}: ImageProps) => react_jsx_runtime6.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_runtime19 from "react/jsx-runtime";
+import * as react_jsx_runtime26 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_runtime19.JSX.Element;
+}: ImageProps) => react_jsx_runtime26.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_runtime10 from "react/jsx-runtime";
+import * as react_jsx_runtime4 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_runtime10.JSX.Element;
+}: ImageGalleryProps) => react_jsx_runtime4.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_runtime21 from "react/jsx-runtime";
+import * as react_jsx_runtime13 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_runtime21.JSX.Element;
+}: ImageGalleryProps) => react_jsx_runtime13.JSX.Element;
 //#endregion
 export { ImageGallery };

package/dist/ImageGallery/components/Layout.cjs

@@ -1,7 +1,7 @@
 const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
 const require_theme = require('../../packages/components-v3/tokens/theme/theme.cjs');
-const require_Container = require('../../Container/Container.cjs');
 const require_useResponsiveValue = require('../../utils/useResponsiveValue.cjs');
+const require_Container = require('../../Container/Container.cjs');
 const require_utils_useCheckIsMobile = require('../../utils/useCheckIsMobile.cjs');
 const require_types = require('../types/types.cjs');
 const require_useGetContainerProperties = require('../hooks/useGetContainerProperties.cjs');

package/dist/ImageGallery/components/Layout.js

@@ -1,6 +1,6 @@
 import { Theme } from "../../packages/components-v3/tokens/theme/theme.js";
-import { Container } from "../../Container/Container.js";
 import { useResponsiveValue } from "../../utils/useResponsiveValue.js";
+import { Container } from "../../Container/Container.js";
 import { useCheckIsMobile } from "../../utils/useCheckIsMobile.js";
 import { ImageGalleryLayout } from "../types/types.js";
 import { useGetContainerProperties } from "../hooks/useGetContainerProperties.js";

package/dist/MarkdownProcessor/MarkdownProcessor.cjs

@@ -7,14 +7,17 @@ let react_markdown = require("react-markdown");
 react_markdown = require_rolldown_runtime.__toESM(react_markdown);
 
 //#region src/components/MarkdownProcessor/MarkdownProcessor.tsx
-const MarkdownProcessor = ({ content, clampParagraphs = void 0, textColor, textVariant, onLinkClick }) => {
+const MarkdownProcessor = ({ content, clampParagraphs = void 0, textColor, textVariant, onLinkClick, theme }) => {
 	const processedContent = content.replace(/<br\s*[\\/]?>/gi, "\n\n");
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_markdown.default, {
 		components: (0, react.useMemo)(() => ({
 			li: require_index.MarkdownProcessorComponents.MarkdownListItem,
 			ul: require_index.MarkdownProcessorComponents.MarkdownUnorderedList,
 			ol: require_index.MarkdownProcessorComponents.MarkdownOrderedList,
-			a: require_functions.createMarkdownLinkComponent({ onLinkClick }),
+			a: require_functions.createMarkdownLinkComponent({
+				onLinkClick,
+				theme
+			}),
 			p: require_functions.createMarkdownParagraphComponent({
 				clampParagraphs,
 				textColor,
@@ -24,7 +27,8 @@ const MarkdownProcessor = ({ content, clampParagraphs = void 0, textColor, textV
 			clampParagraphs,
 			textColor,
 			textVariant,
-			onLinkClick
+			onLinkClick,
+			theme
 		]),
 		children: processedContent
 	});

package/dist/MarkdownProcessor/MarkdownProcessor.d.cts

@@ -1,5 +1,5 @@
 import { MarkdownProcessorProps } from "./types/types.cjs";
-import * as react_jsx_runtime14 from "react/jsx-runtime";
+import * as react_jsx_runtime10 from "react/jsx-runtime";
 
 //#region src/components/MarkdownProcessor/MarkdownProcessor.d.ts
 declare const MarkdownProcessor: ({
@@ -7,7 +7,8 @@ declare const MarkdownProcessor: ({
   clampParagraphs,
   textColor,
   textVariant,
-  onLinkClick
-}: MarkdownProcessorProps) => react_jsx_runtime14.JSX.Element;
+  onLinkClick,
+  theme
+}: MarkdownProcessorProps) => react_jsx_runtime10.JSX.Element;
 //#endregion
 export { MarkdownProcessor };