@envive-ai/react-toolkit-v3 0.3.25 → 0.3.27

package/dist/FullPageSalesAgent/components/WelcomeOverlay.cjs

@@ -0,0 +1,102 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_index = require('../../Typography/types/index.cjs');
+const require_Typography = require('../../Typography/Typography.cjs');
+require('../../Typography/index.cjs');
+const require_PromptCarousel_types_types = require('../../PromptCarousel/types/types.cjs');
+const require_PromptCarousel = require('../../PromptCarousel/PromptCarousel.cjs');
+require('../../PromptCarousel/index.cjs');
+const require_SparkleAnimation = require('../../SparkleAnimation/SparkleAnimation.cjs');
+require('../../SparkleAnimation/index.cjs');
+const require_SalesAgentProductCardsCarousel = require('../../FloatingChat/components/SalesAgentProductCardsCarousel.cjs');
+const require_useWelcomeOverlayProducts = require('../hooks/useWelcomeOverlayProducts.cjs');
+let react_jsx_runtime = require("react/jsx-runtime");
+let classnames = require("classnames");
+classnames = require_rolldown_runtime.__toESM(classnames);
+let framer_motion = require("framer-motion");
+
+//#region src/components/FullPageSalesAgent/components/WelcomeOverlay.tsx
+const WelcomeOverlay = ({ show, theme, title, promptSuggestions, productCarouselTitle, productIds, chatFooter, suggestionButtonType, sparkleColor, backgroundStyle = { backgroundColor: "white" }, onSuggestionClick }) => {
+	const { products, isLoading } = require_useWelcomeOverlayProducts.useWelcomeOverlayProducts(productIds);
+	const showProductCarousel = !isLoading && products.length > 0 && !!productCarouselTitle;
+	const welcomeOverlayClassNames = (0, classnames.default)([
+		"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",
+		"envive-tw-px-[14px]",
+		"envive-tw-flex-col",
+		"envive-tw-gap-4",
+		"envive-tw-bg-background-light",
+		"envive-tw-border-border-light",
+		"envive-tw-border-solid",
+		"envive-tw-border",
+		"envive-tw-rounded-global-custom"
+	]);
+	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,
+		initial: { opacity: 1 },
+		exit: {
+			opacity: 0,
+			transition: {
+				duration: .5,
+				ease: "easeIn"
+			}
+		},
+		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",
+			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
+						})]
+					}),
+					chatFooter,
+					promptSuggestions.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_PromptCarousel.PromptCarousel, {
+						theme,
+						promptButtonTexts: promptSuggestions,
+						promptButtonType: suggestionButtonType,
+						promptCarouselRows: require_PromptCarousel_types_types.PromptCarouselRows.ALWAYS_TWO,
+						animationSpeed: require_PromptCarousel_types_types.AnimationSpeed.NONE,
+						handleButtonClick: onSuggestionClick
+					})
+				]
+			}), showProductCarousel && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "envive-tw-flex envive-tw-flex-col envive-tw-gap-3",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography.Typography, {
+					variant: require_index.TypographyVariant.B2_MD,
+					children: productCarouselTitle
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_SalesAgentProductCardsCarousel.SalesAgentProductCardsCarousel, {
+					theme,
+					hideBadgeCount: true,
+					products,
+					hideNavigation: false
+				})]
+			})]
+		})
+	}, "welcome-overlay") });
+};
+
+//#endregion
+exports.WelcomeOverlay = WelcomeOverlay;

package/dist/FullPageSalesAgent/components/WelcomeOverlay.js

@@ -0,0 +1,100 @@
+import { TypographyVariant } from "../../Typography/types/index.js";
+import { Typography } from "../../Typography/Typography.js";
+import "../../Typography/index.js";
+import { AnimationSpeed, PromptCarouselRows } from "../../PromptCarousel/types/types.js";
+import { PromptCarousel } from "../../PromptCarousel/PromptCarousel.js";
+import "../../PromptCarousel/index.js";
+import { SparkleAnimation } from "../../SparkleAnimation/SparkleAnimation.js";
+import "../../SparkleAnimation/index.js";
+import { SalesAgentProductCardsCarousel } from "../../FloatingChat/components/SalesAgentProductCardsCarousel.js";
+import { useWelcomeOverlayProducts } from "../hooks/useWelcomeOverlayProducts.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import classNames from "classnames";
+import { AnimatePresence, motion } from "framer-motion";
+
+//#region src/components/FullPageSalesAgent/components/WelcomeOverlay.tsx
+const WelcomeOverlay = ({ show, theme, title, promptSuggestions, productCarouselTitle, productIds, chatFooter, suggestionButtonType, sparkleColor, backgroundStyle = { backgroundColor: "white" }, onSuggestionClick }) => {
+	const { products, isLoading } = useWelcomeOverlayProducts(productIds);
+	const showProductCarousel = !isLoading && products.length > 0 && !!productCarouselTitle;
+	const welcomeOverlayClassNames = classNames([
+		"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",
+		"envive-tw-px-[14px]",
+		"envive-tw-flex-col",
+		"envive-tw-gap-4",
+		"envive-tw-bg-background-light",
+		"envive-tw-border-border-light",
+		"envive-tw-border-solid",
+		"envive-tw-border",
+		"envive-tw-rounded-global-custom"
+	]);
+	return /* @__PURE__ */ jsx(AnimatePresence, { children: show && /* @__PURE__ */ jsx(motion.div, {
+		className: welcomeOverlayClassNames,
+		style: backgroundStyle,
+		initial: { opacity: 1 },
+		exit: {
+			opacity: 0,
+			transition: {
+				duration: .5,
+				ease: "easeIn"
+			}
+		},
+		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",
+			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
+						})]
+					}),
+					chatFooter,
+					promptSuggestions.length > 0 && /* @__PURE__ */ jsx(PromptCarousel, {
+						theme,
+						promptButtonTexts: promptSuggestions,
+						promptButtonType: suggestionButtonType,
+						promptCarouselRows: PromptCarouselRows.ALWAYS_TWO,
+						animationSpeed: AnimationSpeed.NONE,
+						handleButtonClick: onSuggestionClick
+					})
+				]
+			}), showProductCarousel && /* @__PURE__ */ jsxs("div", {
+				className: "envive-tw-flex envive-tw-flex-col envive-tw-gap-3",
+				children: [/* @__PURE__ */ jsx(Typography, {
+					variant: TypographyVariant.B2_MD,
+					children: productCarouselTitle
+				}), /* @__PURE__ */ jsx(SalesAgentProductCardsCarousel, {
+					theme,
+					hideBadgeCount: true,
+					products,
+					hideNavigation: false
+				})]
+			})]
+		})
+	}, "welcome-overlay") });
+};
+
+//#endregion
+export { WelcomeOverlay };

package/dist/FullPageSalesAgent/components/index.cjs

@@ -1,4 +1,5 @@
 const require_Layout = require('./Layout.cjs');
+const require_WelcomeOverlay = require('./WelcomeOverlay.cjs');
 
 //#region src/components/FullPageSalesAgent/components/index.ts
 const FullPageSAComponents = { Layout: require_Layout.Layout };

package/dist/FullPageSalesAgent/components/index.js

@@ -1,4 +1,5 @@
 import { Layout } from "./Layout.js";
+import { WelcomeOverlay } from "./WelcomeOverlay.js";
 
 //#region src/components/FullPageSalesAgent/components/index.ts
 const FullPageSAComponents = { Layout };

package/dist/FullPageSalesAgent/hooks/useGetFooterStyles.cjs

@@ -1,15 +1,25 @@
 const require_useIsMobile = require('./useIsMobile.cjs');
 
 //#region src/components/FullPageSalesAgent/hooks/useGetFooterStyles.ts
-const useGetFooterStyles = () => {
+const getStyles = ({ isMobile, showOverlay }) => {
+	if (showOverlay) return {
+		padding: 0,
+		borderTopWidth: "0px"
+	};
+	return isMobile ? void 0 : {
+		boxShadow: "0px 2px 10px 0px rgba(0, 0, 0, 0.2)",
+		borderWidth: "1px"
+	};
+};
+const useGetFooterStyles = ({ showOverlay }) => {
 	const { isMobile } = require_useIsMobile.useIsMobile();
 	return {
-		footerStyles: !isMobile ? {
-			boxShadow: "0px 2px 10px 0px rgba(0, 0, 0, 0.2)",
-			borderWidth: "1px"
-		} : null,
+		footerStyles: getStyles({
+			isMobile,
+			showOverlay
+		}),
 		footerClasses: isMobile ? "envive-tw-rounded-t-[var(--envive-global-custom-border-radius)]" : "envive-tw-rounded-[var(--envive-global-custom-border-radius)]",
-		footerContainerClasses: isMobile ? "envive-tw-z-10 envive-tw-absolute envive-tw-bottom-[0] envive-tw-left-[0] envive-tw-right-[0]" : "envive-tw-z-10 envive-tw-absolute envive-tw-bottom-5 envive-tw-left-[calc((100vw-768px)/2)] envive-tw-right-[calc((100vw-768px)/2)] envive-tw-max-w-[768px]"
+		footerContainerClasses: isMobile ? "envive-tw-z-10 envive-tw-absolute envive-tw-bottom-[0] envive-tw-left-[0] envive-tw-right-[0]" : "envive-tw-z-10 envive-tw-absolute envive-tw-bottom-5 envive-tw-w-full envive-tw-left-0 envive-tw-right-0"
 	};
 };
 

package/dist/FullPageSalesAgent/hooks/useGetFooterStyles.js

@@ -1,15 +1,25 @@
 import { useIsMobile } from "./useIsMobile.js";
 
 //#region src/components/FullPageSalesAgent/hooks/useGetFooterStyles.ts
-const useGetFooterStyles = () => {
+const getStyles = ({ isMobile, showOverlay }) => {
+	if (showOverlay) return {
+		padding: 0,
+		borderTopWidth: "0px"
+	};
+	return isMobile ? void 0 : {
+		boxShadow: "0px 2px 10px 0px rgba(0, 0, 0, 0.2)",
+		borderWidth: "1px"
+	};
+};
+const useGetFooterStyles = ({ showOverlay }) => {
 	const { isMobile } = useIsMobile();
 	return {
-		footerStyles: !isMobile ? {
-			boxShadow: "0px 2px 10px 0px rgba(0, 0, 0, 0.2)",
-			borderWidth: "1px"
-		} : null,
+		footerStyles: getStyles({
+			isMobile,
+			showOverlay
+		}),
 		footerClasses: isMobile ? "envive-tw-rounded-t-[var(--envive-global-custom-border-radius)]" : "envive-tw-rounded-[var(--envive-global-custom-border-radius)]",
-		footerContainerClasses: isMobile ? "envive-tw-z-10 envive-tw-absolute envive-tw-bottom-[0] envive-tw-left-[0] envive-tw-right-[0]" : "envive-tw-z-10 envive-tw-absolute envive-tw-bottom-5 envive-tw-left-[calc((100vw-768px)/2)] envive-tw-right-[calc((100vw-768px)/2)] envive-tw-max-w-[768px]"
+		footerContainerClasses: isMobile ? "envive-tw-z-10 envive-tw-absolute envive-tw-bottom-[0] envive-tw-left-[0] envive-tw-right-[0]" : "envive-tw-z-10 envive-tw-absolute envive-tw-bottom-5 envive-tw-w-full envive-tw-left-0 envive-tw-right-0"
 	};
 };
 

package/dist/FullPageSalesAgent/hooks/useWelcomeOverlayProducts.cjs

@@ -0,0 +1,43 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+let react = require("react");
+let __envive_ai_react_hooks_application_commerce_api = require("@envive-ai/react-hooks/application/commerce-api");
+__envive_ai_react_hooks_application_commerce_api = require_rolldown_runtime.__toESM(__envive_ai_react_hooks_application_commerce_api);
+
+//#region src/components/FullPageSalesAgent/hooks/useWelcomeOverlayProducts.ts
+const mapToCardProps = (p) => ({
+	productName: p.title ?? "",
+	currentPrice: p.salePrice ?? 0,
+	previousPrice: p.originalPrice === p.salePrice ? void 0 : p.originalPrice,
+	pricePrefix: "$",
+	rate: p.averageRating ?? 0,
+	numberOfReviews: p.numberReviews ?? 0,
+	image: {
+		src: p.imageUrl ?? "",
+		alt: `${p.title ?? ""} image`
+	},
+	url: p.url
+});
+const useWelcomeOverlayProducts = (productIds) => {
+	const [products, setProducts] = (0, react.useState)([]);
+	const [isLoading, setIsLoading] = (0, react.useState)(productIds.length > 0);
+	(0, react.useEffect)(() => {
+		let cancelled = false;
+		if (productIds.length === 0) return () => {};
+		setIsLoading(true);
+		__envive_ai_react_hooks_application_commerce_api.default.retrieveProducts(productIds).then((result) => {
+			if (!cancelled) setProducts(result.products.map(mapToCardProps));
+		}).catch(() => {}).finally(() => {
+			if (!cancelled) setIsLoading(false);
+		});
+		return () => {
+			cancelled = true;
+		};
+	}, []);
+	return {
+		products,
+		isLoading
+	};
+};
+
+//#endregion
+exports.useWelcomeOverlayProducts = useWelcomeOverlayProducts;

package/dist/FullPageSalesAgent/hooks/useWelcomeOverlayProducts.js

@@ -0,0 +1,41 @@
+import { useEffect, useState } from "react";
+import CommerceApiClient from "@envive-ai/react-hooks/application/commerce-api";
+
+//#region src/components/FullPageSalesAgent/hooks/useWelcomeOverlayProducts.ts
+const mapToCardProps = (p) => ({
+	productName: p.title ?? "",
+	currentPrice: p.salePrice ?? 0,
+	previousPrice: p.originalPrice === p.salePrice ? void 0 : p.originalPrice,
+	pricePrefix: "$",
+	rate: p.averageRating ?? 0,
+	numberOfReviews: p.numberReviews ?? 0,
+	image: {
+		src: p.imageUrl ?? "",
+		alt: `${p.title ?? ""} image`
+	},
+	url: p.url
+});
+const useWelcomeOverlayProducts = (productIds) => {
+	const [products, setProducts] = useState([]);
+	const [isLoading, setIsLoading] = useState(productIds.length > 0);
+	useEffect(() => {
+		let cancelled = false;
+		if (productIds.length === 0) return () => {};
+		setIsLoading(true);
+		CommerceApiClient.retrieveProducts(productIds).then((result) => {
+			if (!cancelled) setProducts(result.products.map(mapToCardProps));
+		}).catch(() => {}).finally(() => {
+			if (!cancelled) setIsLoading(false);
+		});
+		return () => {
+			cancelled = true;
+		};
+	}, []);
+	return {
+		products,
+		isLoading
+	};
+};
+
+//#endregion
+export { useWelcomeOverlayProducts };

package/dist/Image/Image.cjs

@@ -7,9 +7,9 @@ const require_useGetRoundedProperties = require('./hooks/useGetRoundedProperties
 const require_useGetAccessibilityProperties = require('./hooks/useGetAccessibilityProperties.cjs');
 const require_useGetWidthProperties = require('./hooks/useGetWidthProperties.cjs');
 const require_useHandleImageLoading = require('./hooks/useHandleImageLoading.cjs');
+let react_jsx_runtime = require("react/jsx-runtime");
 let classnames = require("classnames");
 classnames = require_rolldown_runtime.__toESM(classnames);
-let react_jsx_runtime = require("react/jsx-runtime");
 
 //#region src/components/Image/Image.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_runtime29 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_runtime29.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_runtime27 from "react/jsx-runtime";
+import * as react_jsx_runtime17 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_runtime17.JSX.Element;
 //#endregion
 export { Image };

package/dist/Image/Image.js

@@ -6,8 +6,8 @@ import { useGetRoundedProperties } from "./hooks/useGetRoundedProperties.js";
 import { useGetAccessibilityProperties } from "./hooks/useGetAccessibilityProperties.js";
 import { useGetWidthProperties } from "./hooks/useGetWidthProperties.js";
 import { useHandleImageLoading } from "./hooks/useHandleImageLoading.js";
-import classNames from "classnames";
 import { jsx, jsxs } from "react/jsx-runtime";
+import classNames from "classnames";
 
 //#region src/components/Image/Image.tsx
 /**

package/dist/ImageGallery/ImageGallery.d.cts

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

package/dist/ImageGallery/components/Layout.cjs

@@ -9,9 +9,9 @@ const require_useValidateImages = require('../hooks/useValidateImages.cjs');
 const require_functions = require('../utils/functions.cjs');
 const require_OverlappedLayout = require('./OverlappedLayout.cjs');
 const require_NormalLayout = require('./NormalLayout.cjs');
+let react_jsx_runtime = require("react/jsx-runtime");
 let classnames = require("classnames");
 classnames = require_rolldown_runtime.__toESM(classnames);
-let react_jsx_runtime = require("react/jsx-runtime");
 
 //#region src/components/ImageGallery/components/Layout.tsx
 const Layout = ({ id, testId, className, style, images, layout, theme = require_theme.Theme.GLOBAL_CUSTOM, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, role, "aria-hidden": ariaHidden }) => {

package/dist/ImageGallery/components/Layout.js

@@ -8,8 +8,8 @@ import { useValidateImages } from "../hooks/useValidateImages.js";
 import { getIsTwoSideStandardOnMobile } from "../utils/functions.js";
 import { OverlappedLayout } from "./OverlappedLayout.js";
 import { NormalLayout } from "./NormalLayout.js";
-import classNames from "classnames";
 import { jsx, jsxs } from "react/jsx-runtime";
+import classNames from "classnames";
 
 //#region src/components/ImageGallery/components/Layout.tsx
 const Layout = ({ id, testId, className, style, images, layout, theme = Theme.GLOBAL_CUSTOM, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, role, "aria-hidden": ariaHidden }) => {

package/dist/ImageGallery/utils/functions.cjs

@@ -1,5 +1,5 @@
-const require_theme = require('../../packages/components-v3/tokens/theme/theme.cjs');
 const require_utils = require('../../DesignTokens/components/utils.cjs');
+const require_theme = require('../../packages/components-v3/tokens/theme/theme.cjs');
 const require_types = require('../types/types.cjs');
 
 //#region src/components/ImageGallery/utils/functions.ts

package/dist/ImageGallery/utils/functions.js

@@ -1,5 +1,5 @@
-import { Theme, ThemeCSSVar } from "../../packages/components-v3/tokens/theme/theme.js";
 import { getComputedCSSVariable } from "../../DesignTokens/components/utils.js";
+import { Theme, ThemeCSSVar } from "../../packages/components-v3/tokens/theme/theme.js";
 import { ImageGalleryLayout } from "../types/types.js";
 
 //#region src/components/ImageGallery/utils/functions.ts

package/dist/MarkdownProcessor/MarkdownProcessor.d.cts

@@ -1,5 +1,5 @@
 import { MarkdownProcessorProps } from "./types/types.cjs";
-import * as react_jsx_runtime17 from "react/jsx-runtime";
+import * as react_jsx_runtime15 from "react/jsx-runtime";
 
 //#region src/components/MarkdownProcessor/MarkdownProcessor.d.ts
 declare const MarkdownProcessor: ({
@@ -8,6 +8,6 @@ declare const MarkdownProcessor: ({
   textColor,
   textVariant,
   onLinkClick
-}: MarkdownProcessorProps) => react_jsx_runtime17.JSX.Element;
+}: MarkdownProcessorProps) => react_jsx_runtime15.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_runtime20 from "react/jsx-runtime";
+import * as react_jsx_runtime24 from "react/jsx-runtime";
 
 //#region src/components/MarkdownProcessor/MarkdownProcessor.d.ts
 declare const MarkdownProcessor: ({
@@ -8,6 +8,6 @@ declare const MarkdownProcessor: ({
   textColor,
   textVariant,
   onLinkClick
-}: MarkdownProcessorProps) => react_jsx_runtime20.JSX.Element;
+}: MarkdownProcessorProps) => react_jsx_runtime24.JSX.Element;
 //#endregion
 export { MarkdownProcessor };

package/dist/Message/components/Layout.cjs

@@ -1,8 +1,8 @@
 const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
 const require_useVariantStyleProperties = require('../hooks/useVariantStyleProperties.cjs');
+let react_jsx_runtime = require("react/jsx-runtime");
 let classnames = require("classnames");
 classnames = require_rolldown_runtime.__toESM(classnames);
-let react_jsx_runtime = require("react/jsx-runtime");
 
 //#region src/components/Message/components/Layout.tsx
 /**

package/dist/Message/components/Layout.js

@@ -1,6 +1,6 @@
 import { useVariantStyleProperties } from "../hooks/useVariantStyleProperties.js";
-import classNames from "classnames";
 import { jsx } from "react/jsx-runtime";
+import classNames from "classnames";
 
 //#region src/components/Message/components/Layout.tsx
 /**

package/dist/Message/components/LinkButton.cjs

@@ -3,9 +3,9 @@ const require_index = require('../../Typography/types/index.cjs');
 const require_Typography = require('../../Typography/Typography.cjs');
 require('../../Typography/index.cjs');
 const require_CustomIcon = require('../../utils/CustomIcon.cjs');
+const require_openUrlInNewTab = require('../utils/openUrlInNewTab.cjs');
 const require_useGetLinkButtonIconProperties = require('../hooks/useGetLinkButtonIconProperties.cjs');
 const require_useGetLinkButtonProperties = require('../hooks/useGetLinkButtonProperties.cjs');
-const require_openUrlInNewTab = require('../utils/openUrlInNewTab.cjs');
 let react_jsx_runtime = require("react/jsx-runtime");
 let __envive_ai_react_icons_VectorUpRight = require("@envive-ai/react-icons/VectorUpRight");
 __envive_ai_react_icons_VectorUpRight = require_rolldown_runtime.__toESM(__envive_ai_react_icons_VectorUpRight);

package/dist/Message/components/LinkButton.js

@@ -2,9 +2,9 @@ import { TypographyColor, TypographyVariant } from "../../Typography/types/index
 import { Typography } from "../../Typography/Typography.js";
 import "../../Typography/index.js";
 import { CustomIcon } from "../../utils/CustomIcon.js";
+import { openUrlInNewTab } from "../utils/openUrlInNewTab.js";
 import { useGetLinkButtonIconProperties } from "../hooks/useGetLinkButtonIconProperties.js";
 import { useGetLinkButtonProperties } from "../hooks/useGetLinkButtonProperties.js";
-import { openUrlInNewTab } from "../utils/openUrlInNewTab.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import VectorUpRight from "@envive-ai/react-icons/VectorUpRight";
 

package/dist/OrderLookupCard/OrderLookupCard.cjs

@@ -10,9 +10,9 @@ const require_getProductImagesToDisplay = require('./utils/getProductImagesToDis
 const require_calculateMoreProductsCount = require('./utils/calculateMoreProductsCount.cjs');
 const require_formatOrderNumber = require('./utils/formatOrderNumber.cjs');
 const require_formatOrderDate = require('./utils/formatOrderDate.cjs');
+let react_jsx_runtime = require("react/jsx-runtime");
 let classnames = require("classnames");
 classnames = require_rolldown_runtime.__toESM(classnames);
-let react_jsx_runtime = require("react/jsx-runtime");
 
 //#region src/components/OrderLookupCard/OrderLookupCard.tsx
 /**

package/dist/OrderLookupCard/OrderLookupCard.js

@@ -9,8 +9,8 @@ import { getProductImagesToDisplay } from "./utils/getProductImagesToDisplay.js"
 import { calculateMoreProductsCount } from "./utils/calculateMoreProductsCount.js";
 import { formatOrderNumber } from "./utils/formatOrderNumber.js";
 import { formatOrderDate } from "./utils/formatOrderDate.js";
-import classNames from "classnames";
 import { jsx, jsxs } from "react/jsx-runtime";
+import classNames from "classnames";
 
 //#region src/components/OrderLookupCard/OrderLookupCard.tsx
 /**

package/dist/OrderLookupCard/components/Layout.cjs

@@ -1,9 +1,9 @@
 const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
 const require_Stack = require('../../Stack/Stack.cjs');
 require('../../Stack/index.cjs');
+let react_jsx_runtime = require("react/jsx-runtime");
 let classnames = require("classnames");
 classnames = require_rolldown_runtime.__toESM(classnames);
-let react_jsx_runtime = require("react/jsx-runtime");
 
 //#region src/components/OrderLookupCard/components/Layout.tsx
 const Layout = ({ productImagesGrid, content, id, testId, className, style, ariaLabel }) => {

package/dist/OrderLookupCard/components/Layout.js

@@ -1,7 +1,7 @@
 import { Stack } from "../../Stack/Stack.js";
 import "../../Stack/index.js";
-import classNames from "classnames";
 import { jsx, jsxs } from "react/jsx-runtime";
+import classNames from "classnames";
 
 //#region src/components/OrderLookupCard/components/Layout.tsx
 const Layout = ({ productImagesGrid, content, id, testId, className, style, ariaLabel }) => {

package/dist/OrderLookupCard/components/MoreProductsOverlay.cjs

@@ -5,9 +5,9 @@ const require_index = require('../../Typography/types/index.cjs');
 const require_Typography = require('../../Typography/Typography.cjs');
 require('../../Typography/index.cjs');
 const require_useGetImageBorderRadiusProperties = require('../hooks/useGetImageBorderRadiusProperties.cjs');
+let react_jsx_runtime = require("react/jsx-runtime");
 let classnames = require("classnames");
 classnames = require_rolldown_runtime.__toESM(classnames);
-let react_jsx_runtime = require("react/jsx-runtime");
 
 //#region src/components/OrderLookupCard/components/MoreProductsOverlay.tsx
 const MoreProductsOverlay = ({ count, theme, label, className, style, id, testId, ariaLabel }) => {

package/dist/OrderLookupCard/components/MoreProductsOverlay.js

@@ -4,8 +4,8 @@ import { TypographyColor, TypographyVariant } from "../../Typography/types/index
 import { Typography } from "../../Typography/Typography.js";
 import "../../Typography/index.js";
 import { useGetImageBorderRadiusProperties } from "../hooks/useGetImageBorderRadiusProperties.js";
-import classNames from "classnames";
 import { jsx, jsxs } from "react/jsx-runtime";
+import classNames from "classnames";
 
 //#region src/components/OrderLookupCard/components/MoreProductsOverlay.tsx
 const MoreProductsOverlay = ({ count, theme, label, className, style, id, testId, ariaLabel }) => {