@envive-ai/react-toolkit-v3 0.3.11 → 0.3.13

package/dist/FloatingChat/FloatingChat.js

@@ -30,7 +30,7 @@ const FloatingChat = ({ id, className, style, testId, theme = Theme.GLOBAL_CUSTO
 	const finalTheme = resolveTheme(theme);
 	const [query, setQuery] = useState("");
 	const chatMessagesRef = useRef(null);
-	const { headerBackgroundColor, headerMode, welcomeMessageIconColor, showVerifiedBuyer, userQueryInputEnabled = true, showEnviveLogo, ignoreFirstModelResponse, neverShowSingleProductCards } = floatingChatConfig;
+	const { headerBackgroundColor, headerMode, welcomeMessageIconColor, showVerifiedBuyer, userQueryInputEnabled = true, showEnviveLogo, ignoreFirstModelResponse, neverShowSingleProductCards, partialViewConfig } = floatingChatConfig;
 	const { welcomeMessageTitle, welcomeMessageText, chatFooterTextFieldPlaceholderText, disclaimerText } = hardcopyContent?.values ?? {};
 	const { agentName, chatHeaderLogoDarkSrc, chatHeaderLogoLightSrc } = lookAndFeelConfig;
 	const { messages, isResponseStreaming, isPendingResponse, suggestions, onSuggestionClicked, onTypedMessageSubmitted, onFormResponseSubmitted } = salesAgentData;
@@ -45,7 +45,10 @@ const FloatingChat = ({ id, className, style, testId, theme = Theme.GLOBAL_CUSTO
 			onClose();
 		}
 	};
-	const { modalSheetControl, maxSwipeableViewHeight, isOpen, isMobile, snaps, initialSnap, shouldAutoExpand, currentSnapPercentage, handleSnapChange, animationKey, mobileHeaderHeight, shouldShowHeader, isFullView, isPartialView } = useSnapSetup({ isFloatingChatOpen });
+	const { modalSheetControl, maxSwipeableViewHeight, isOpen, isMobile, snaps, initialSnap, shouldAutoExpand, currentSnapPercentage, handleSnapChange, animationKey, mobileHeaderHeight, shouldShowHeader, isFullView, isPartialView } = useSnapSetup({
+		isFloatingChatOpen,
+		partialViewDisabled: partialViewConfig?.disabled ?? false
+	});
 	const { showScrollButton, scrollToBottom, isFloatingLayout } = useScrollToBottom({
 		messagesRef: chatMessagesRef,
 		autoScrollDependencies: [
@@ -125,7 +128,7 @@ const FloatingChat = ({ id, className, style, testId, theme = Theme.GLOBAL_CUSTO
 			setGeneralSuggestions([]);
 		},
 		textFieldPlaceholderText: chatFooterTextFieldPlaceholderText,
-		promptSuggestions: isPendingResponse || isResponseStreaming || generalSuggestions.length === 0 ? ["Loading suggestions 1...", "Loading suggestions 2..."] : generalSuggestions,
+		promptSuggestions: isPendingResponse || isResponseStreaming ? ["Loading suggestions 1...", "Loading suggestions 2..."] : generalSuggestions,
 		handleButtonClick: (buttonText) => {
 			const suggestion = suggestions.find((s) => s.content === buttonText && !s.isAnswer);
 			if (suggestion) onSuggestionClicked(suggestion, ChatElementDisplayLocationV3.FLOATING_CHAT_PROMPT_BUTTON);

package/dist/FloatingChat/hooks/useSnapSetup.cjs

@@ -4,18 +4,21 @@ let react = require("react");
 let framer_motion = require("framer-motion");
 
 //#region src/components/FloatingChat/hooks/useSnapSetup.ts
-const useSnapSetup = ({ isFloatingChatOpen }) => {
+const useSnapSetup = ({ isFloatingChatOpen, partialViewDisabled }) => {
 	const maxSwipeableViewHeight = 89;
 	const modalSheetControl = (0, react.useRef)(null);
 	const { viewportWidth } = require_useCheckIsMobile.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 snaps = (() => {
+		if (partialViewDisabled) return shouldAutoExpand ? [100] : [0, 100];
+		return shouldAutoExpand ? [43, 100] : [
+			0,
+			43,
+			100
+		];
+	})();
+	const initialSnap = partialViewDisabled ? shouldAutoExpand ? 0 : 1 : 1;
 	const [currentSnapPercentage, setCurrentSnapPercentage] = (0, react.useState)(snaps[initialSnap] || 43);
 	const animationKey = (0, framer_motion.useMotionValue)(0);
 	const snap43Percent = 57 / 100 * window.innerHeight;

package/dist/FloatingChat/hooks/useSnapSetup.js

@@ -3,18 +3,21 @@ import { useEffect, useRef, useState } from "react";
 import { useMotionValue, useTransform } from "framer-motion";
 
 //#region src/components/FloatingChat/hooks/useSnapSetup.ts
-const useSnapSetup = ({ isFloatingChatOpen }) => {
+const useSnapSetup = ({ isFloatingChatOpen, partialViewDisabled }) => {
 	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 snaps = (() => {
+		if (partialViewDisabled) return shouldAutoExpand ? [100] : [0, 100];
+		return shouldAutoExpand ? [43, 100] : [
+			0,
+			43,
+			100
+		];
+	})();
+	const initialSnap = partialViewDisabled ? shouldAutoExpand ? 0 : 1 : 1;
 	const [currentSnapPercentage, setCurrentSnapPercentage] = useState(snaps[initialSnap] || 43);
 	const animationKey = useMotionValue(0);
 	const snap43Percent = 57 / 100 * window.innerHeight;

package/dist/FullPageSalesAgent/FullPageSalesAgent.cjs

@@ -69,7 +69,7 @@ const FullPageSalesAgent = ({ theme = require_theme.Theme.GLOBAL_CUSTOM, floatin
 		isLoadingPromptSuggestions: isPendingResponse || isResponseStreaming || generalSuggestions.length === 0,
 		hideEnviveWatermark: !showEnviveLogo,
 		textFieldPlaceholderText: chatFooterTextFieldPlaceholderText,
-		promptSuggestions: isPendingResponse || isResponseStreaming || generalSuggestions.length === 0 ? ["Loading suggestions 1...", "Loading suggestions 2..."] : generalSuggestions,
+		promptSuggestions: isPendingResponse || isResponseStreaming ? ["Loading suggestions 1...", "Loading suggestions 2..."] : generalSuggestions,
 		handleButtonClick: (buttonText) => {
 			const suggestion = suggestions.find((s) => s.content === buttonText && !s.isAnswer);
 			if (suggestion) onSuggestionClicked(suggestion, __envive_ai_react_hooks_application_models.ChatElementDisplayLocationV3.FLOATING_CHAT_PROMPT_BUTTON);
@@ -80,7 +80,8 @@ const FullPageSalesAgent = ({ theme = require_theme.Theme.GLOBAL_CUSTOM, floatin
 		onSubmit: () => {
 			onTypedMessageSubmitted({
 				query,
-				userTyped: true
+				userTyped: true,
+				displayLocation: __envive_ai_react_hooks_application_models.ChatElementDisplayLocationV3.FLOATING_CHAT_TEXT_INPUT
 			});
 			setAnswerSuggestions([]);
 			setGeneralSuggestions([]);

package/dist/FullPageSalesAgent/FullPageSalesAgent.d.cts

@@ -1,5 +1,5 @@
 import { Theme } from "../tokens/theme/theme.cjs";
-import * as react_jsx_runtime26 from "react/jsx-runtime";
+import * as react_jsx_runtime22 from "react/jsx-runtime";
 import { FloatingChatConfig, LookAndFeelConfig } from "@envive-ai/react-hooks/contexts/typesV3";
 import { HardcopyResponse } from "@envive-ai/react-hooks/contexts/hardcopyContext";
 
@@ -19,6 +19,6 @@ declare const FullPageSalesAgent: ({
   hardcopyContent,
   headerContainer,
   autoHeight
-}: FullPageSalesAgentProps) => react_jsx_runtime26.JSX.Element;
+}: FullPageSalesAgentProps) => react_jsx_runtime22.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_runtime20 from "react/jsx-runtime";
+import * as react_jsx_runtime23 from "react/jsx-runtime";
 import { FloatingChatConfig, LookAndFeelConfig } from "@envive-ai/react-hooks/contexts/typesV3";
 import { HardcopyResponse } from "@envive-ai/react-hooks/contexts/hardcopyContext";
 
@@ -19,6 +19,6 @@ declare const FullPageSalesAgent: ({
   hardcopyContent,
   headerContainer,
   autoHeight
-}: FullPageSalesAgentProps) => react_jsx_runtime20.JSX.Element;
+}: FullPageSalesAgentProps) => react_jsx_runtime23.JSX.Element;
 //#endregion
 export { FullPageSalesAgent };

package/dist/FullPageSalesAgent/FullPageSalesAgent.js

@@ -68,7 +68,7 @@ const FullPageSalesAgent = ({ theme = Theme.GLOBAL_CUSTOM, floatingChatConfig, l
 		isLoadingPromptSuggestions: isPendingResponse || isResponseStreaming || generalSuggestions.length === 0,
 		hideEnviveWatermark: !showEnviveLogo,
 		textFieldPlaceholderText: chatFooterTextFieldPlaceholderText,
-		promptSuggestions: isPendingResponse || isResponseStreaming || generalSuggestions.length === 0 ? ["Loading suggestions 1...", "Loading suggestions 2..."] : generalSuggestions,
+		promptSuggestions: isPendingResponse || isResponseStreaming ? ["Loading suggestions 1...", "Loading suggestions 2..."] : generalSuggestions,
 		handleButtonClick: (buttonText) => {
 			const suggestion = suggestions.find((s) => s.content === buttonText && !s.isAnswer);
 			if (suggestion) onSuggestionClicked(suggestion, ChatElementDisplayLocationV3.FLOATING_CHAT_PROMPT_BUTTON);
@@ -79,7 +79,8 @@ const FullPageSalesAgent = ({ theme = Theme.GLOBAL_CUSTOM, floatingChatConfig, l
 		onSubmit: () => {
 			onTypedMessageSubmitted({
 				query,
-				userTyped: true
+				userTyped: true,
+				displayLocation: ChatElementDisplayLocationV3.FLOATING_CHAT_TEXT_INPUT
 			});
 			setAnswerSuggestions([]);
 			setGeneralSuggestions([]);

package/dist/FullPageSalesAgent/hooks/useContainerResizerObserver.cjs

@@ -5,10 +5,10 @@ let react = require("react");
 const useContainerResizerObserver = ({ headerContainer, autoHeight }) => {
 	const [containerHeight, setContainerHeight] = (0, react.useState)("100%");
 	(0, react.useEffect)(() => {
-		if (!autoHeight) return null;
+		if (!autoHeight) return () => {};
 		const watchResizing = () => {
-			const header = document.querySelector(headerContainer)?.getBoundingClientRect()?.height || 0;
-			setContainerHeight(window.innerHeight - header);
+			const { height = 0, top = 0 } = document.querySelector(headerContainer)?.getBoundingClientRect() || {};
+			setContainerHeight(window.innerHeight - (height + top));
 		};
 		window.addEventListener("resize", watchResizing);
 		watchResizing();

package/dist/FullPageSalesAgent/hooks/useContainerResizerObserver.js

@@ -4,10 +4,10 @@ import { useEffect, useState } from "react";
 const useContainerResizerObserver = ({ headerContainer, autoHeight }) => {
 	const [containerHeight, setContainerHeight] = useState("100%");
 	useEffect(() => {
-		if (!autoHeight) return null;
+		if (!autoHeight) return () => {};
 		const watchResizing = () => {
-			const header = document.querySelector(headerContainer)?.getBoundingClientRect()?.height || 0;
-			setContainerHeight(window.innerHeight - header);
+			const { height = 0, top = 0 } = document.querySelector(headerContainer)?.getBoundingClientRect() || {};
+			setContainerHeight(window.innerHeight - (height + top));
 		};
 		window.addEventListener("resize", watchResizing);
 		watchResizing();

package/dist/Image/Image.cjs

@@ -52,8 +52,13 @@ const Image = ({ id, testId, src, alt, aspectRatio = require_index.ImageAspectRa
 			src,
 			alt,
 			className: (0, classnames.default)("envive-tw-h-full envive-tw-w-full", objectFitClass, isLoading && "envive-tw-opacity-0"),
+			style: {
+				userSelect: "none",
+				WebkitUserDrag: "none"
+			},
 			onLoad: handleLoad,
 			onError: handleError,
+			draggable: false,
 			...accessibilityProps,
 			...rest
 		})]

package/dist/Image/Image.d.cts

@@ -1,5 +1,5 @@
 import { ImageProps } from "./types/index.cjs";
-import * as react_jsx_runtime27 from "react/jsx-runtime";
+import * as react_jsx_runtime25 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_runtime27.JSX.Element;
+}: ImageProps) => react_jsx_runtime25.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_runtime15 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_runtime15.JSX.Element;
+}: ImageProps) => react_jsx_runtime20.JSX.Element;
 //#endregion
 export { Image };

package/dist/Image/Image.js

@@ -50,8 +50,13 @@ const Image = ({ id, testId, src, alt, aspectRatio = ImageAspectRatio.GLOBAL_CUS
 			src,
 			alt,
 			className: classNames("envive-tw-h-full envive-tw-w-full", objectFitClass, isLoading && "envive-tw-opacity-0"),
+			style: {
+				userSelect: "none",
+				WebkitUserDrag: "none"
+			},
 			onLoad: handleLoad,
 			onError: handleError,
+			draggable: false,
 			...accessibilityProps,
 			...rest
 		})]

package/dist/ImageGallery/ImageGallery.d.cts

@@ -1,5 +1,5 @@
 import { ImageGalleryProps } from "./types/types.cjs";
-import * as react_jsx_runtime30 from "react/jsx-runtime";
+import * as react_jsx_runtime18 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_runtime18.JSX.Element;
 //#endregion
 export { ImageGallery };

package/dist/MarkdownProcessor/MarkdownProcessor.cjs

@@ -5,39 +5,26 @@ let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 let react_markdown = require("react-markdown");
 react_markdown = require_rolldown_runtime.__toESM(react_markdown);
-let remark_gfm = require("remark-gfm");
-remark_gfm = require_rolldown_runtime.__toESM(remark_gfm);
-let rehype_raw = require("rehype-raw");
-rehype_raw = require_rolldown_runtime.__toESM(rehype_raw);
 
 //#region src/components/MarkdownProcessor/MarkdownProcessor.tsx
-const MarkdownProcessor = ({ content, clampParagraphs = void 0, textColor, textVariant, subTextVariant, subTextColor }) => {
+const MarkdownProcessor = ({ content, clampParagraphs = void 0, textColor, textVariant }) => {
 	const processedContent = content.replace(/<br\s*[\\/]?>/gi, "\n\n");
-	const components = (0, react.useMemo)(() => ({
-		li: require_index.MarkdownProcessorComponents.MarkdownListItem,
-		ul: require_index.MarkdownProcessorComponents.MarkdownUnorderedList,
-		ol: require_index.MarkdownProcessorComponents.MarkdownOrderedList,
-		a: require_index.MarkdownProcessorComponents.MarkdownLink,
-		p: require_functions.createMarkdownParagraphComponent({
+	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_index.MarkdownProcessorComponents.MarkdownLink,
+			p: require_functions.createMarkdownParagraphComponent({
+				clampParagraphs,
+				textColor,
+				textVariant
+			})
+		}), [
 			clampParagraphs,
 			textColor,
 			textVariant
-		}),
-		sub: require_functions.createMarkdownSubscriptComponent({
-			subTextVariant,
-			subTextColor
-		})
-	}), [
-		clampParagraphs,
-		textColor,
-		textVariant,
-		subTextVariant,
-		subTextColor
-	]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_markdown.default, {
-		remarkPlugins: [remark_gfm.default],
-		rehypePlugins: [rehype_raw.default],
-		components,
+		]),
 		children: processedContent
 	});
 };

package/dist/MarkdownProcessor/MarkdownProcessor.d.cts

@@ -1,14 +1,12 @@
 import { MarkdownProcessorProps } from "./types/types.cjs";
-import * as react_jsx_runtime24 from "react/jsx-runtime";
+import * as react_jsx_runtime17 from "react/jsx-runtime";
 
 //#region src/components/MarkdownProcessor/MarkdownProcessor.d.ts
 declare const MarkdownProcessor: ({
   content,
   clampParagraphs,
   textColor,
-  textVariant,
-  subTextVariant,
-  subTextColor
-}: MarkdownProcessorProps) => react_jsx_runtime24.JSX.Element;
+  textVariant
+}: MarkdownProcessorProps) => react_jsx_runtime17.JSX.Element;
 //#endregion
 export { MarkdownProcessor };

package/dist/MarkdownProcessor/MarkdownProcessor.d.ts

@@ -6,9 +6,7 @@ declare const MarkdownProcessor: ({
   content,
   clampParagraphs,
   textColor,
-  textVariant,
-  subTextVariant,
-  subTextColor
+  textVariant
 }: MarkdownProcessorProps) => react_jsx_runtime18.JSX.Element;
 //#endregion
 export { MarkdownProcessor };

package/dist/MarkdownProcessor/MarkdownProcessor.js

@@ -1,39 +1,28 @@
 import { MarkdownProcessorComponents } from "./components/index.js";
-import { createMarkdownParagraphComponent, createMarkdownSubscriptComponent } from "./utils/functions.js";
+import { createMarkdownParagraphComponent } from "./utils/functions.js";
 import { useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
 import ReactMarkdown from "react-markdown";
-import remarkGfm from "remark-gfm";
-import rehypeRaw from "rehype-raw";
 
 //#region src/components/MarkdownProcessor/MarkdownProcessor.tsx
-const MarkdownProcessor = ({ content, clampParagraphs = void 0, textColor, textVariant, subTextVariant, subTextColor }) => {
+const MarkdownProcessor = ({ content, clampParagraphs = void 0, textColor, textVariant }) => {
 	const processedContent = content.replace(/<br\s*[\\/]?>/gi, "\n\n");
-	const components = useMemo(() => ({
-		li: MarkdownProcessorComponents.MarkdownListItem,
-		ul: MarkdownProcessorComponents.MarkdownUnorderedList,
-		ol: MarkdownProcessorComponents.MarkdownOrderedList,
-		a: MarkdownProcessorComponents.MarkdownLink,
-		p: createMarkdownParagraphComponent({
+	return /* @__PURE__ */ jsx(ReactMarkdown, {
+		components: useMemo(() => ({
+			li: MarkdownProcessorComponents.MarkdownListItem,
+			ul: MarkdownProcessorComponents.MarkdownUnorderedList,
+			ol: MarkdownProcessorComponents.MarkdownOrderedList,
+			a: MarkdownProcessorComponents.MarkdownLink,
+			p: createMarkdownParagraphComponent({
+				clampParagraphs,
+				textColor,
+				textVariant
+			})
+		}), [
 			clampParagraphs,
 			textColor,
 			textVariant
-		}),
-		sub: createMarkdownSubscriptComponent({
-			subTextVariant,
-			subTextColor
-		})
-	}), [
-		clampParagraphs,
-		textColor,
-		textVariant,
-		subTextVariant,
-		subTextColor
-	]);
-	return /* @__PURE__ */ jsx(ReactMarkdown, {
-		remarkPlugins: [remarkGfm],
-		rehypePlugins: [rehypeRaw],
-		components,
+		]),
 		children: processedContent
 	});
 };

package/dist/MarkdownProcessor/components/index.cjs

@@ -3,7 +3,6 @@ const require_MarkdownLink = require('./MarkdownLink.cjs');
 const require_MarkdownOrderedList = require('./MarkdownOrderedList.cjs');
 const require_MarkdownUnorderedList = require('./MarkdownUnorderedList.cjs');
 const require_MarkdownParagraph = require('./MarkdownParagraph.cjs');
-const require_MarkdownSubscript = require('./MarkdownSubscript.cjs');
 
 //#region src/components/MarkdownProcessor/components/index.ts
 const MarkdownProcessorComponents = {
@@ -11,8 +10,7 @@ const MarkdownProcessorComponents = {
 	MarkdownLink: require_MarkdownLink.MarkdownLink,
 	MarkdownOrderedList: require_MarkdownOrderedList.MarkdownOrderedList,
 	MarkdownUnorderedList: require_MarkdownUnorderedList.MarkdownUnorderedList,
-	MarkdownParagraph: require_MarkdownParagraph.MarkdownParagraph,
-	MarkdownSubscript: require_MarkdownSubscript.MarkdownSubscript
+	MarkdownParagraph: require_MarkdownParagraph.MarkdownParagraph
 };
 
 //#endregion

package/dist/MarkdownProcessor/components/index.js

@@ -3,7 +3,6 @@ import { MarkdownLink } from "./MarkdownLink.js";
 import { MarkdownOrderedList } from "./MarkdownOrderedList.js";
 import { MarkdownUnorderedList } from "./MarkdownUnorderedList.js";
 import { MarkdownParagraph } from "./MarkdownParagraph.js";
-import { MarkdownSubscript } from "./MarkdownSubscript.js";
 
 //#region src/components/MarkdownProcessor/components/index.ts
 const MarkdownProcessorComponents = {
@@ -11,8 +10,7 @@ const MarkdownProcessorComponents = {
 	MarkdownLink,
 	MarkdownOrderedList,
 	MarkdownUnorderedList,
-	MarkdownParagraph,
-	MarkdownSubscript
+	MarkdownParagraph
 };
 
 //#endregion

package/dist/MarkdownProcessor/utils/functions.cjs

@@ -13,16 +13,6 @@ const createMarkdownParagraphComponent = ({ clampParagraphs, textColor, textVari
 	Component.displayName = "MarkdownParagraphComponent";
 	return Component;
 };
-const createMarkdownSubscriptComponent = ({ subTextVariant, subTextColor }) => {
-	const Component = ({ children }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.MarkdownProcessorComponents.MarkdownSubscript, {
-		subTextVariant,
-		subTextColor,
-		children
-	});
-	Component.displayName = "MarkdownSubscriptComponent";
-	return Component;
-};
 
 //#endregion
-exports.createMarkdownParagraphComponent = createMarkdownParagraphComponent;
-exports.createMarkdownSubscriptComponent = createMarkdownSubscriptComponent;
+exports.createMarkdownParagraphComponent = createMarkdownParagraphComponent;

package/dist/MarkdownProcessor/utils/functions.js

@@ -12,15 +12,6 @@ const createMarkdownParagraphComponent = ({ clampParagraphs, textColor, textVari
 	Component.displayName = "MarkdownParagraphComponent";
 	return Component;
 };
-const createMarkdownSubscriptComponent = ({ subTextVariant, subTextColor }) => {
-	const Component = ({ children }) => /* @__PURE__ */ jsx(MarkdownProcessorComponents.MarkdownSubscript, {
-		subTextVariant,
-		subTextColor,
-		children
-	});
-	Component.displayName = "MarkdownSubscriptComponent";
-	return Component;
-};
 
 //#endregion
-export { createMarkdownParagraphComponent, createMarkdownSubscriptComponent };
+export { createMarkdownParagraphComponent };

package/dist/ProductCard/ProductCard.d.cts

@@ -1,5 +1,5 @@
 import { ProductCardProps } from "./types/index.cjs";
-import * as react_jsx_runtime13 from "react/jsx-runtime";
+import * as react_jsx_runtime2 from "react/jsx-runtime";
 
 //#region src/components/ProductCard/ProductCard.d.ts
 declare const ProductCard: ({
@@ -18,6 +18,6 @@ declare const ProductCard: ({
   loop,
   onSelect,
   onInputClick
-}: ProductCardProps) => react_jsx_runtime13.JSX.Element;
+}: ProductCardProps) => react_jsx_runtime2.JSX.Element;
 //#endregion
 export { ProductCard };

package/dist/ProductCard/components/Header.cjs

@@ -6,6 +6,7 @@ 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_useAnimatedTextMinHeight = require('../../utils/useAnimatedTextMinHeight.cjs');
 const require_useGetHeaderProperties = require('../hooks/useGetHeaderProperties.cjs');
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
@@ -13,10 +14,15 @@ let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/components/ProductCard/components/Header.tsx
 const Header = ({ headline, italicizeHeadline, animatedText, textTypingDuration, textTransition, loop }) => {
 	const { stackClasses, headlineClasses } = require_useGetHeaderProperties.useGetHeaderProperties(italicizeHeadline);
+	const { measuringRef, minHeight } = require_useAnimatedTextMinHeight.useAnimatedTextMinHeight(animatedText);
+	const biggestText = (0, react.useMemo)(() => {
+		return animatedText.reduce((maxText, currText) => {
+			return currText.length > maxText.length ? currText : maxText;
+		}, "");
+	}, [animatedText]);
 	const animatedTextWrapper = (0, react.useCallback)((text) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography.Typography, {
 		variant: require_index.TypographyVariant.B3_MD,
 		color: require_index.TypographyColor.TEXT_LIGHT,
-		numberOfLines: 2,
 		children: text
 	}), []);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Stack.Stack, {
@@ -28,12 +34,32 @@ const Header = ({ headline, italicizeHeadline, animatedText, textTypingDuration,
 			className: headlineClasses,
 			numberOfLines: 2,
 			children: headline
-		}), animatedText.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_AnimatedText.AnimatedText, {
-			sequence: animatedText,
-			getNodeWrapper: animatedTextWrapper,
-			typingDuration: textTypingDuration,
-			transition: textTransition,
-			loop
+		}), animatedText.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			style: { position: "relative" },
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				ref: measuringRef,
+				"aria-hidden": "true",
+				style: {
+					position: "absolute",
+					visibility: "hidden",
+					pointerEvents: "none",
+					width: "100%"
+				},
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography.Typography, {
+					variant: require_index.TypographyVariant.B3_MD,
+					color: require_index.TypographyColor.TEXT_LIGHT,
+					children: biggestText
+				}) })
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				style: { minHeight },
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_AnimatedText.AnimatedText, {
+					sequence: animatedText,
+					getNodeWrapper: animatedTextWrapper,
+					typingDuration: textTypingDuration,
+					transition: textTransition,
+					loop
+				})
+			})]
 		})]
 	});
 };

package/dist/ProductCard/components/Header.js

@@ -5,17 +5,23 @@ import "../../Stack/index.js";
 import { TypographyColor, TypographyVariant } from "../../Typography/types/index.js";
 import { Typography } from "../../Typography/Typography.js";
 import "../../Typography/index.js";
+import { useAnimatedTextMinHeight } from "../../utils/useAnimatedTextMinHeight.js";
 import { useGetHeaderProperties } from "../hooks/useGetHeaderProperties.js";
-import { useCallback } from "react";
+import { useCallback, useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/components/ProductCard/components/Header.tsx
 const Header = ({ headline, italicizeHeadline, animatedText, textTypingDuration, textTransition, loop }) => {
 	const { stackClasses, headlineClasses } = useGetHeaderProperties(italicizeHeadline);
+	const { measuringRef, minHeight } = useAnimatedTextMinHeight(animatedText);
+	const biggestText = useMemo(() => {
+		return animatedText.reduce((maxText, currText) => {
+			return currText.length > maxText.length ? currText : maxText;
+		}, "");
+	}, [animatedText]);
 	const animatedTextWrapper = useCallback((text) => /* @__PURE__ */ jsx(Typography, {
 		variant: TypographyVariant.B3_MD,
 		color: TypographyColor.TEXT_LIGHT,
-		numberOfLines: 2,
 		children: text
 	}), []);
 	return /* @__PURE__ */ jsxs(Stack, {
@@ -27,12 +33,32 @@ const Header = ({ headline, italicizeHeadline, animatedText, textTypingDuration,
 			className: headlineClasses,
 			numberOfLines: 2,
 			children: headline
-		}), animatedText.length > 0 && /* @__PURE__ */ jsx(AnimatedText, {
-			sequence: animatedText,
-			getNodeWrapper: animatedTextWrapper,
-			typingDuration: textTypingDuration,
-			transition: textTransition,
-			loop
+		}), animatedText.length > 0 && /* @__PURE__ */ jsxs("div", {
+			style: { position: "relative" },
+			children: [/* @__PURE__ */ jsx("div", {
+				ref: measuringRef,
+				"aria-hidden": "true",
+				style: {
+					position: "absolute",
+					visibility: "hidden",
+					pointerEvents: "none",
+					width: "100%"
+				},
+				children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Typography, {
+					variant: TypographyVariant.B3_MD,
+					color: TypographyColor.TEXT_LIGHT,
+					children: biggestText
+				}) })
+			}), /* @__PURE__ */ jsx("div", {
+				style: { minHeight },
+				children: /* @__PURE__ */ jsx(AnimatedText, {
+					sequence: animatedText,
+					getNodeWrapper: animatedTextWrapper,
+					typingDuration: textTypingDuration,
+					transition: textTransition,
+					loop
+				})
+			})]
 		})]
 	});
 };

package/dist/PromptButton/PromptButton.d.cts

@@ -1,5 +1,5 @@
 import { PromptButtonProps } from "./types/index.cjs";
-import * as react_jsx_runtime11 from "react/jsx-runtime";
+import * as react_jsx_runtime1 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_runtime11.JSX.Element;
+}: PromptButtonProps) => react_jsx_runtime1.JSX.Element;
 //#endregion
 export { PromptButton };