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

package/dist/FloatingChat/hooks/useSnapSetup.cjs

@@ -0,0 +1,56 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_useCheckIsMobile = require('../../utils/useCheckIsMobile.cjs');
+let react = require("react");
+let framer_motion = require("framer-motion");
+
+//#region src/components/FloatingChat/hooks/useSnapSetup.ts
+const useSnapSetup = ({ isFloatingChatOpen }) => {
+	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 [currentSnapPercentage, setCurrentSnapPercentage] = (0, react.useState)(snaps[initialSnap] || 43);
+	const animationKey = (0, framer_motion.useMotionValue)(0);
+	const snap43Percent = 57 / 100 * window.innerHeight;
+	const snap100Percent = 0;
+	const mobileHeaderHeight = (0, framer_motion.useTransform)(animationKey, [snap100Percent, snap43Percent], [56, 0]);
+	const [shouldShowHeader, setShouldShowHeader] = (0, react.useState)(false);
+	(0, react.useEffect)(() => {
+		return animationKey.on("change", (value) => {
+			setShouldShowHeader(value < snap43Percent - 10);
+		});
+	}, [animationKey, snap43Percent]);
+	const isFullView = isMobile && currentSnapPercentage === 100;
+	const isPartialView = isMobile && currentSnapPercentage >= 0 && currentSnapPercentage <= 43;
+	const handleSnapChange = (snapPercentage) => {
+		setCurrentSnapPercentage(snapPercentage);
+	};
+	return {
+		modalSheetControl,
+		maxSwipeableViewHeight,
+		isOpen: window?._spiffy?.selectedCustomizeOption === "SalesAgent" ? true : Boolean(isFloatingChatOpen),
+		isMobile,
+		snaps,
+		initialSnap,
+		shouldAutoExpand,
+		currentSnapPercentage,
+		handleSnapChange,
+		animationKey,
+		mobileHeaderHeight,
+		snap43Percent,
+		snap100Percent,
+		shouldShowHeader,
+		isFullView,
+		isPartialView
+	};
+};
+
+//#endregion
+exports.useSnapSetup = useSnapSetup;

package/dist/FloatingChat/hooks/useSnapSetup.js

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

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
@@ -59,6 +55,14 @@ interface FloatingChatProps {
    * Whether the CX button switch is enabled.
    */
   isCXButtonSwitchEnabled: boolean;
+  /**
+   * 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
@@ -59,6 +55,14 @@ interface FloatingChatProps {
    * Whether the CX button switch is enabled.
    */
   isCXButtonSwitchEnabled: boolean;
+  /**
+   * 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/Image/Image.d.cts

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

package/dist/Image/Image.d.ts

@@ -1,5 +1,5 @@
 import { ImageProps } from "./types/index.js";
-import * as react_jsx_runtime21 from "react/jsx-runtime";
+import * as react_jsx_runtime22 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_runtime22.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_runtime19 from "react/jsx-runtime";
+import * as react_jsx_runtime14 from "react/jsx-runtime";
 
 //#region src/components/ImageGallery/ImageGallery.d.ts
 
@@ -40,6 +40,6 @@ declare const ImageGallery: ({
   "aria-describedby": ariaDescribedBy,
   role,
   "aria-hidden": ariaHidden
-}: ImageGalleryProps) => react_jsx_runtime19.JSX.Element;
+}: ImageGalleryProps) => react_jsx_runtime14.JSX.Element;
 //#endregion
 export { ImageGallery };

package/dist/ImageGallery/ImageGallery.d.ts

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

package/dist/ImageGallery/components/Layout.cjs

@@ -1,7 +1,7 @@
 const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
-const require_theme = require('../../tokens/theme/theme.cjs');
-const require_useResponsiveValue = require('../../utils/useResponsiveValue.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_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 "../../tokens/theme/theme.js";
-import { useResponsiveValue } from "../../utils/useResponsiveValue.js";
+import { Theme } from "../../packages/components-v3/tokens/theme/theme.js";
 import { Container } from "../../Container/Container.js";
+import { useResponsiveValue } from "../../utils/useResponsiveValue.js";
 import { useCheckIsMobile } from "../../utils/useCheckIsMobile.js";
 import { ImageGalleryLayout } from "../types/types.js";
 import { useGetContainerProperties } from "../hooks/useGetContainerProperties.js";

package/dist/ImageGallery/types/types.d.ts

@@ -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 { ResponsiveValue } from "../../utils/useResponsiveValue.js";
 

package/dist/ImageGallery/utils/functions.cjs

@@ -1,5 +1,5 @@
 const require_utils = require('../../DesignTokens/components/utils.cjs');
-const require_theme = require('../../tokens/theme/theme.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 { getComputedCSSVariable } from "../../DesignTokens/components/utils.js";
-import { Theme, ThemeCSSVar } from "../../tokens/theme/theme.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_runtime0 from "react/jsx-runtime";
+import * as react_jsx_runtime21 from "react/jsx-runtime";
 
 //#region src/components/MarkdownProcessor/MarkdownProcessor.d.ts
 declare const MarkdownProcessor: ({
@@ -9,6 +9,6 @@ declare const MarkdownProcessor: ({
   textVariant,
   subTextVariant,
   subTextColor
-}: MarkdownProcessorProps) => react_jsx_runtime0.JSX.Element;
+}: MarkdownProcessorProps) => react_jsx_runtime21.JSX.Element;
 //#endregion
 export { MarkdownProcessor };

package/dist/MarkdownProcessor/MarkdownProcessor.d.ts

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

package/dist/MarkdownProcessor/components/MarkdownLink.cjs

@@ -1,11 +1,14 @@
 const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_index = require('../../Typography/types/index.cjs');
+require('../../Typography/index.cjs');
 const require_LinkButton = require('../../Message/components/LinkButton.cjs');
 let react_jsx_runtime = require("react/jsx-runtime");
 
 //#region src/components/MarkdownProcessor/components/MarkdownLink.tsx
 const MarkdownLink = ({ href, children }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_LinkButton.LinkButton, {
 	url: href,
-	text: children?.toString()
+	text: children?.toString(),
+	typographyColor: require_index.TypographyColor.TEXT_SECONDARY
 });
 
 //#endregion

package/dist/MarkdownProcessor/components/MarkdownLink.js

@@ -1,10 +1,13 @@
+import { TypographyColor } from "../../Typography/types/index.js";
+import "../../Typography/index.js";
 import { LinkButton } from "../../Message/components/LinkButton.js";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/components/MarkdownProcessor/components/MarkdownLink.tsx
 const MarkdownLink = ({ href, children }) => /* @__PURE__ */ jsx(LinkButton, {
 	url: href,
-	text: children?.toString()
+	text: children?.toString(),
+	typographyColor: TypographyColor.TEXT_SECONDARY
 });
 
 //#endregion

package/dist/Message/components/AgentContent.cjs

@@ -1,15 +1,19 @@
 const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
-const require_MarkdownProcessor = require('../../MarkdownProcessor/MarkdownProcessor.cjs');
 const require_LoadingSkeleton = require('./LoadingSkeleton.cjs');
+let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 
 //#region src/components/Message/components/AgentContent.tsx
+const MarkdownProcessor = (0, react.lazy)(async () => ({ default: (await Promise.resolve().then(() => require("../../MarkdownProcessor/MarkdownProcessor.cjs"))).MarkdownProcessor }));
 /**
 * Component that renders the message content for the agent.
 */
 const AgentContent = ({ content, isLoading = false }) => {
 	if (isLoading) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_LoadingSkeleton.LoadingSkeleton, {});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_MarkdownProcessor.MarkdownProcessor, { content });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react.Suspense, {
+		fallback: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_LoadingSkeleton.LoadingSkeleton, {}),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MarkdownProcessor, { content })
+	});
 };
 
 //#endregion

package/dist/Message/components/AgentContent.js

@@ -1,14 +1,18 @@
-import { MarkdownProcessor } from "../../MarkdownProcessor/MarkdownProcessor.js";
 import { LoadingSkeleton } from "./LoadingSkeleton.js";
+import { Suspense, lazy } from "react";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/components/Message/components/AgentContent.tsx
+const MarkdownProcessor = lazy(async () => ({ default: (await import("../../MarkdownProcessor/MarkdownProcessor.js")).MarkdownProcessor }));
 /**
 * Component that renders the message content for the agent.
 */
 const AgentContent = ({ content, isLoading = false }) => {
 	if (isLoading) return /* @__PURE__ */ jsx(LoadingSkeleton, {});
-	return /* @__PURE__ */ jsx(MarkdownProcessor, { content });
+	return /* @__PURE__ */ jsx(Suspense, {
+		fallback: /* @__PURE__ */ jsx(LoadingSkeleton, {}),
+		children: /* @__PURE__ */ jsx(MarkdownProcessor, { content })
+	});
 };
 
 //#endregion

package/dist/Message/components/LinkButton.cjs

@@ -1,8 +1,8 @@
 const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_CustomIcon = require('../../utils/CustomIcon.cjs');
 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_useGetLinkButtonProperties = require('../hooks/useGetLinkButtonProperties.cjs');
 const require_useGetLinkButtonIconProperties = require('../hooks/useGetLinkButtonIconProperties.cjs');
 const require_openUrlInNewTab = require('../utils/openUrlInNewTab.cjs');
@@ -15,7 +15,7 @@ __envive_ai_react_icons_VectorUpRight = require_rolldown_runtime.__toESM(__enviv
 * Component that renders an external link with an icon.
 * Uses an inline span with button role for better accessibility and inline text flow.
 */
-const LinkButton = ({ url, text }) => {
+const LinkButton = ({ url, text, typographyColor }) => {
 	const { containerClasses } = require_useGetLinkButtonProperties.useGetLinkButtonProperties();
 	const { iconContainerClasses } = require_useGetLinkButtonIconProperties.useGetLinkButtonIconProperties();
 	const handleClick = () => {
@@ -32,7 +32,7 @@ const LinkButton = ({ url, text }) => {
 		},
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Typography.Typography, {
 			variant: require_index.TypographyVariant.B3_MD,
-			color: require_index.TypographyColor.TEXT_PRIMARY,
+			color: typographyColor ?? require_index.TypographyColor.TEXT_PRIMARY,
 			className: "envive-tw-inline",
 			children: [
 				text,

package/dist/Message/components/LinkButton.d.cts

@@ -1,7 +1,10 @@
+import { TypographyColor } from "../../Typography/types/index.cjs";
+
 //#region src/components/Message/components/LinkButton.d.ts
 type LinkButtonProps = {
   url: string;
   text: string;
+  typographyColor?: TypographyColor;
 };
 /**
  * Component that renders an external link with an icon.
@@ -9,7 +12,8 @@ type LinkButtonProps = {
  */
 declare const LinkButton: ({
   url,
-  text
+  text,
+  typographyColor
 }: LinkButtonProps) => React.ReactNode;
 //#endregion
 export { LinkButton };

package/dist/Message/components/LinkButton.d.ts

@@ -1,7 +1,10 @@
+import { TypographyColor } from "../../Typography/types/index.js";
+
 //#region src/components/Message/components/LinkButton.d.ts
 type LinkButtonProps = {
   url: string;
   text: string;
+  typographyColor?: TypographyColor;
 };
 /**
  * Component that renders an external link with an icon.
@@ -9,7 +12,8 @@ type LinkButtonProps = {
  */
 declare const LinkButton: ({
   url,
-  text
+  text,
+  typographyColor
 }: LinkButtonProps) => React.ReactNode;
 //#endregion
 export { LinkButton };

package/dist/Message/components/LinkButton.js

@@ -1,7 +1,7 @@
+import { CustomIcon } from "../../utils/CustomIcon.js";
 import { TypographyColor, TypographyVariant } from "../../Typography/types/index.js";
 import { Typography } from "../../Typography/Typography.js";
 import "../../Typography/index.js";
-import { CustomIcon } from "../../utils/CustomIcon.js";
 import { useGetLinkButtonProperties } from "../hooks/useGetLinkButtonProperties.js";
 import { useGetLinkButtonIconProperties } from "../hooks/useGetLinkButtonIconProperties.js";
 import { openUrlInNewTab } from "../utils/openUrlInNewTab.js";
@@ -13,7 +13,7 @@ import VectorUpRight from "@envive-ai/react-icons/VectorUpRight";
 * Component that renders an external link with an icon.
 * Uses an inline span with button role for better accessibility and inline text flow.
 */
-const LinkButton = ({ url, text }) => {
+const LinkButton = ({ url, text, typographyColor }) => {
 	const { containerClasses } = useGetLinkButtonProperties();
 	const { iconContainerClasses } = useGetLinkButtonIconProperties();
 	const handleClick = () => {
@@ -30,7 +30,7 @@ const LinkButton = ({ url, text }) => {
 		},
 		children: /* @__PURE__ */ jsxs(Typography, {
 			variant: TypographyVariant.B3_MD,
-			color: TypographyColor.TEXT_PRIMARY,
+			color: typographyColor ?? TypographyColor.TEXT_PRIMARY,
 			className: "envive-tw-inline",
 			children: [
 				text,

package/dist/Message/hooks/useGetLinkButtonProperties.cjs

@@ -7,7 +7,7 @@ let react = require("react");
 */
 const useGetLinkButtonProperties = () => {
 	return { containerClasses: (0, react.useMemo)(() => {
-		return `envive-tw-inline envive-tw-align-middle envive-tw-cursor-pointer hover:envive-tw-underline envive-tw-group envive-tw-transition-all envive-tw-duration-200`;
+		return `envive-tw-inline envive-tw-align-top envive-tw-cursor-pointer hover:envive-tw-underline envive-tw-group envive-tw-transition-all envive-tw-duration-200`;
 	}, []) };
 };
 

package/dist/Message/hooks/useGetLinkButtonProperties.js

@@ -6,7 +6,7 @@ import { useMemo } from "react";
 */
 const useGetLinkButtonProperties = () => {
 	return { containerClasses: useMemo(() => {
-		return `envive-tw-inline envive-tw-align-middle envive-tw-cursor-pointer hover:envive-tw-underline envive-tw-group envive-tw-transition-all envive-tw-duration-200`;
+		return `envive-tw-inline envive-tw-align-top envive-tw-cursor-pointer hover:envive-tw-underline envive-tw-group envive-tw-transition-all envive-tw-duration-200`;
 	}, []) };
 };
 

package/dist/OrderLookupCard/OrderLookupCard.cjs

@@ -1,8 +1,8 @@
 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_resolveTheme = require('../utils/resolveTheme.cjs');
 const require_Stack = require('../Stack/Stack.cjs');
 require('../Stack/index.cjs');
-const require_resolveTheme = require('../utils/resolveTheme.cjs');
 const require_useGetImageBorderRadiusProperties = require('./hooks/useGetImageBorderRadiusProperties.cjs');
 const require_index = require('./components/index.cjs');
 const require_useGetContainerProperties = require('./hooks/useGetContainerProperties.cjs');

package/dist/OrderLookupCard/OrderLookupCard.js

@@ -1,7 +1,7 @@
-import { Theme } from "../tokens/theme/theme.js";
+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 { resolveTheme } from "../utils/resolveTheme.js";
 import { useGetImageBorderRadiusProperties } from "./hooks/useGetImageBorderRadiusProperties.js";
 import { OrderLookupCardComponents } from "./components/index.js";
 import { useGetContainerProperties } from "./hooks/useGetContainerProperties.js";

package/dist/OrderLookupCard/hooks/useGetContainerProperties.cjs

@@ -1,4 +1,4 @@
-const require_theme = require('../../tokens/theme/theme.cjs');
+const require_theme = require('../../packages/components-v3/tokens/theme/theme.cjs');
 
 //#region src/components/OrderLookupCard/hooks/useGetContainerProperties.ts
 /**

package/dist/OrderLookupCard/hooks/useGetContainerProperties.js

@@ -1,4 +1,4 @@
-import { Theme } from "../../tokens/theme/theme.js";
+import { Theme } from "../../packages/components-v3/tokens/theme/theme.js";
 
 //#region src/components/OrderLookupCard/hooks/useGetContainerProperties.ts
 /**

package/dist/OrderLookupCard/hooks/useGetImageBorderRadiusProperties.cjs

@@ -1,4 +1,4 @@
-const require_theme = require('../../tokens/theme/theme.cjs');
+const require_theme = require('../../packages/components-v3/tokens/theme/theme.cjs');
 
 //#region src/components/OrderLookupCard/hooks/useGetImageBorderRadiusProperties.ts
 /**

package/dist/OrderLookupCard/hooks/useGetImageBorderRadiusProperties.js

@@ -1,4 +1,4 @@
-import { Theme } from "../../tokens/theme/theme.js";
+import { Theme } from "../../packages/components-v3/tokens/theme/theme.js";
 
 //#region src/components/OrderLookupCard/hooks/useGetImageBorderRadiusProperties.ts
 /**

package/dist/OrderLookupCard/hooks/useGetStatusLabelProperties.cjs

@@ -1,4 +1,4 @@
-const require_theme = require('../../tokens/theme/theme.cjs');
+const require_theme = require('../../packages/components-v3/tokens/theme/theme.cjs');
 
 //#region src/components/OrderLookupCard/hooks/useGetStatusLabelProperties.ts
 /**

package/dist/OrderLookupCard/hooks/useGetStatusLabelProperties.js

@@ -1,4 +1,4 @@
-import { Theme } from "../../tokens/theme/theme.js";
+import { Theme } from "../../packages/components-v3/tokens/theme/theme.js";
 
 //#region src/components/OrderLookupCard/hooks/useGetStatusLabelProperties.ts
 /**

package/dist/OrderLookupCard/hooks/useGetTrackOrderLinkProperties.cjs

@@ -1,4 +1,4 @@
-const require_theme = require('../../tokens/theme/theme.cjs');
+const require_theme = require('../../packages/components-v3/tokens/theme/theme.cjs');
 
 //#region src/components/OrderLookupCard/hooks/useGetTrackOrderLinkProperties.ts
 /**

package/dist/OrderLookupCard/hooks/useGetTrackOrderLinkProperties.js

@@ -1,4 +1,4 @@
-import { Theme } from "../../tokens/theme/theme.js";
+import { Theme } from "../../packages/components-v3/tokens/theme/theme.js";
 
 //#region src/components/OrderLookupCard/hooks/useGetTrackOrderLinkProperties.ts
 /**