npm - @envive-ai/react-toolkit-v3 - Versions diffs - 0.3.7 → 0.3.9 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (569) hide show

package/dist/ChatFooter/components/index.d.ts CHANGED Viewed

@@ -1,8 +1,8 @@
 import { LayoutProps } from "./Layout.js";
 import { PromptSuggestionsProps } from "./PromptSuggestions.js";
 import { TextFieldProps } from "../../TextField/types/index.js";
-import * as react10 from "react";
-import * as react_jsx_runtime24 from "react/jsx-runtime";
+import * as react_jsx_runtime32 from "react/jsx-runtime";
+import * as react183 from "react";
 //#region src/components/ChatFooter/components/index.d.ts
 declare const ChatFooterComponents: {
@@ -17,13 +17,13 @@ declare const ChatFooterComponents: {
     testId,
     className,
     style
-  }: LayoutProps) => react_jsx_runtime24.JSX.Element;
+  }: LayoutProps) => react_jsx_runtime32.JSX.Element;
   EnviveLogo: ({
     style
   }: {
     className?: string;
     style?: React.CSSProperties;
-  }) => react10.ReactElement<react10.SVGProps<SVGSVGElement>, string | react10.JSXElementConstructor<any>>;
+  }) => react183.ReactElement<react183.SVGProps<SVGSVGElement>, string | react183.JSXElementConstructor<any>>;
   PromptSuggestions: ({
     theme,
     suggestions,
@@ -31,7 +31,7 @@ declare const ChatFooterComponents: {
     className,
     style,
     disabled
-  }: PromptSuggestionsProps) => react_jsx_runtime24.JSX.Element;
+  }: PromptSuggestionsProps) => react_jsx_runtime32.JSX.Element;
   TextField: ({
     theme,
     placeholder,

package/dist/ChatFooter/hooks/useGetChatScrollProperties.cjs CHANGED Viewed

@@ -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');
 let react = require("react");
 //#region src/components/ChatFooter/hooks/useGetChatScrollProperties.ts

package/dist/ChatFooter/hooks/useGetChatScrollProperties.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { Theme } from "../../tokens/theme/theme.js";
+import { Theme } from "../../packages/components-v3/tokens/theme/theme.js";
 import { useMemo } from "react";
 //#region src/components/ChatFooter/hooks/useGetChatScrollProperties.ts

package/dist/ChatFooter/hooks/useGetContainerProperties.cjs CHANGED Viewed

@@ -1,18 +1,19 @@
 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');
 let react = require("react");
 //#region src/components/ChatFooter/hooks/useGetContainerProperties.ts
 const useGetContainerProperties = ({ isScrolled, theme }) => {
+	const themeContainerClassNames = (0, react.useMemo)(() => {
+		return {
+			[require_theme.Theme.STANDARD]: `${isScrolled ? "envive-tw-p-4" : "envive-tw-border-t envive-tw-p-4"}`,
+			[require_theme.Theme.MODERN]: `${isScrolled ? "envive-tw-p-4" : "envive-tw-border-t envive-tw-p-4"}`,
+			[require_theme.Theme.MINIMAL]: `${isScrolled ? "envive-tw-bg-white envive-tw-pt-2 envive-tw-pb-4 envive-tw-px-4 envive-tw-border-t" : "envive-tw-border-t envive-tw-p-4"}`
+		}[theme] ?? "";
+	}, [theme, isScrolled]);
 	return {
-		baseClassName: "envive-tw-w-full envive-tw-opacity-90 envive-tw-backdrop-blur-[12px] envive-tw-border-border-light ",
-		themeContainerClassNames: (0, react.useMemo)(() => {
-			return {
-				[require_theme.Theme.STANDARD]: `${isScrolled ? "envive-tw-p-4" : "envive-tw-border-t envive-tw-p-4"}`,
-				[require_theme.Theme.MODERN]: `${isScrolled ? "envive-tw-p-4" : "envive-tw-border-t envive-tw-p-4"}`,
-				[require_theme.Theme.MINIMAL]: `${isScrolled ? "envive-tw-bg-white envive-tw-pt-2 envive-tw-pb-4 envive-tw-px-4 envive-tw-border-t" : "envive-tw-border-t envive-tw-p-4"}`
-			}[theme] ?? "";
-		}, [theme, isScrolled])
+		baseClassName: `envive-tw-w-full envive-tw-border-border-light ${!isScrolled ? "envive-tw-opacity-90 envive-tw-backdrop-blur-[12px]" : ""}`,
+		themeContainerClassNames
 	};
 };

package/dist/ChatFooter/hooks/useGetContainerProperties.js CHANGED Viewed

@@ -1,17 +1,18 @@
-import { Theme } from "../../tokens/theme/theme.js";
+import { Theme } from "../../packages/components-v3/tokens/theme/theme.js";
 import { useMemo } from "react";
 //#region src/components/ChatFooter/hooks/useGetContainerProperties.ts
 const useGetContainerProperties = ({ isScrolled, theme }) => {
+	const themeContainerClassNames = useMemo(() => {
+		return {
+			[Theme.STANDARD]: `${isScrolled ? "envive-tw-p-4" : "envive-tw-border-t envive-tw-p-4"}`,
+			[Theme.MODERN]: `${isScrolled ? "envive-tw-p-4" : "envive-tw-border-t envive-tw-p-4"}`,
+			[Theme.MINIMAL]: `${isScrolled ? "envive-tw-bg-white envive-tw-pt-2 envive-tw-pb-4 envive-tw-px-4 envive-tw-border-t" : "envive-tw-border-t envive-tw-p-4"}`
+		}[theme] ?? "";
+	}, [theme, isScrolled]);
 	return {
-		baseClassName: "envive-tw-w-full envive-tw-opacity-90 envive-tw-backdrop-blur-[12px] envive-tw-border-border-light ",
-		themeContainerClassNames: useMemo(() => {
-			return {
-				[Theme.STANDARD]: `${isScrolled ? "envive-tw-p-4" : "envive-tw-border-t envive-tw-p-4"}`,
-				[Theme.MODERN]: `${isScrolled ? "envive-tw-p-4" : "envive-tw-border-t envive-tw-p-4"}`,
-				[Theme.MINIMAL]: `${isScrolled ? "envive-tw-bg-white envive-tw-pt-2 envive-tw-pb-4 envive-tw-px-4 envive-tw-border-t" : "envive-tw-border-t envive-tw-p-4"}`
-			}[theme] ?? "";
-		}, [theme, isScrolled])
+		baseClassName: `envive-tw-w-full envive-tw-border-border-light ${!isScrolled ? "envive-tw-opacity-90 envive-tw-backdrop-blur-[12px]" : ""}`,
+		themeContainerClassNames
 	};
 };

package/dist/ChatFooter/types/types.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import { Theme } from "../../tokens/theme/theme.js";
+import { Theme } from "../../packages/components-v3/tokens/theme/theme.js";
 //#region src/components/ChatFooter/types/types.d.ts

package/dist/ChatHeader/ChatHeader.cjs CHANGED Viewed

@@ -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_resolveTheme = require('../utils/resolveTheme.cjs');
 const require_index = require('./types/index.cjs');
 const require_index$1 = require('./components/index.cjs');

package/dist/ChatHeader/ChatHeader.d.cts CHANGED Viewed

@@ -1,5 +1,5 @@
 import { ChatHeaderProps } from "./types/index.cjs";
-import * as react_jsx_runtime29 from "react/jsx-runtime";
+import * as react_jsx_runtime21 from "react/jsx-runtime";
 //#region src/components/ChatHeader/ChatHeader.d.ts
 declare const ChatHeader: ({
@@ -21,6 +21,6 @@ declare const ChatHeader: ({
   headerBgColor,
   onClose,
   onToggle
-}: ChatHeaderProps) => react_jsx_runtime29.JSX.Element;
+}: ChatHeaderProps) => react_jsx_runtime21.JSX.Element;
 //#endregion
 export { ChatHeader };

package/dist/ChatHeader/ChatHeader.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 import { ChatHeaderProps } from "./types/index.js";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as react_jsx_runtime27 from "react/jsx-runtime";
 //#region src/components/ChatHeader/ChatHeader.d.ts
 declare const ChatHeader: ({
@@ -21,6 +21,6 @@ declare const ChatHeader: ({
   headerBgColor,
   onClose,
   onToggle
-}: ChatHeaderProps) => react_jsx_runtime0.JSX.Element;
+}: ChatHeaderProps) => react_jsx_runtime27.JSX.Element;
 //#endregion
 export { ChatHeader };

package/dist/ChatHeader/ChatHeader.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { Theme } from "../tokens/theme/theme.js";
+import { Theme } from "../packages/components-v3/tokens/theme/theme.js";
 import { resolveTheme } from "../utils/resolveTheme.js";
 import { ChatHeaderOptions, ChatHeaderVariant } from "./types/index.js";
 import { ChatHeaderComponents } from "./components/index.js";

package/dist/ChatHeader/components/CloseButton.cjs CHANGED Viewed

@@ -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_resolveTheme = require('../../utils/resolveTheme.cjs');
 const require_index = require('../types/index.cjs');
 const require_useGetCloseButtonProperties = require('../hooks/useGetCloseButtonProperties.cjs');

package/dist/ChatHeader/components/CloseButton.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { Theme } from "../../tokens/theme/theme.js";
+import { Theme } from "../../packages/components-v3/tokens/theme/theme.js";
 import { resolveTheme } from "../../utils/resolveTheme.js";
 import { ChatHeaderVariant } from "../types/index.js";
 import { useGetCloseButtonProperties } from "../hooks/useGetCloseButtonProperties.js";

package/dist/ChatHeader/components/Handle.cjs CHANGED Viewed

@@ -1,8 +1,8 @@
 const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.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_Stack = require('../../Stack/Stack.cjs');
+require('../../Stack/index.cjs');
 const require_useGetHandleProperties = require('../hooks/useGetHandleProperties.cjs');
 let react_jsx_runtime = require("react/jsx-runtime");
 let framer_motion = require("framer-motion");
@@ -24,13 +24,15 @@ const Handle = ({ theme, variant, state, animationKey }) => {
 				className: leftBar,
 				style: {
 					rotate: leftRotation,
-					x: 1
+					x: 1,
+					display: "block"
 				}
 			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.motion.div, {
 				className: rightBar,
 				style: {
 					rotate: rightRotation,
-					x: -1
+					x: -1,
+					display: "block"
 				}
 			})]
 		})
@@ -39,7 +41,13 @@ const Handle = ({ theme, variant, state, animationKey }) => {
 		className: containerClasses,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Stack.Stack, {
 			direction: "row",
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: leftBar }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: rightBar })]
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: leftBar,
+				style: { display: "block" }
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: rightBar,
+				style: { display: "block" }
+			})]
 		})
 	});
 };

package/dist/ChatHeader/components/Handle.js CHANGED Viewed

@@ -1,7 +1,7 @@
-import { Stack } from "../../Stack/Stack.js";
-import "../../Stack/index.js";
 import { Container } from "../../Container/Container.js";
 import "../../Container/index.js";
+import { Stack } from "../../Stack/Stack.js";
+import "../../Stack/index.js";
 import { useGetHandleProperties } from "../hooks/useGetHandleProperties.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { motion, useMotionValue, useTransform } from "framer-motion";
@@ -23,13 +23,15 @@ const Handle = ({ theme, variant, state, animationKey }) => {
 				className: leftBar,
 				style: {
 					rotate: leftRotation,
-					x: 1
+					x: 1,
+					display: "block"
 				}
 			}), /* @__PURE__ */ jsx(motion.div, {
 				className: rightBar,
 				style: {
 					rotate: rightRotation,
-					x: -1
+					x: -1,
+					display: "block"
 				}
 			})]
 		})
@@ -38,7 +40,13 @@ const Handle = ({ theme, variant, state, animationKey }) => {
 		className: containerClasses,
 		children: /* @__PURE__ */ jsxs(Stack, {
 			direction: "row",
-			children: [/* @__PURE__ */ jsx("div", { className: leftBar }), /* @__PURE__ */ jsx("div", { className: rightBar })]
+			children: [/* @__PURE__ */ jsx("div", {
+				className: leftBar,
+				style: { display: "block" }
+			}), /* @__PURE__ */ jsx("div", {
+				className: rightBar,
+				style: { display: "block" }
+			})]
 		})
 	});
 };

package/dist/ChatHeader/components/Toggle.cjs CHANGED Viewed

@@ -1,10 +1,10 @@
 const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
-const require_theme = require('../../tokens/theme/theme.cjs');
-const require_Stack = require('../../Stack/Stack.cjs');
-require('../../Stack/index.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_resolveTheme = require('../../utils/resolveTheme.cjs');
+const require_Stack = require('../../Stack/Stack.cjs');
+require('../../Stack/index.cjs');
 const require_index = require('../types/index.cjs');
 const require_useGetToggleProperties = require('../hooks/useGetToggleProperties.cjs');
 const require_ToggleItem = require('./ToggleItem.cjs');

package/dist/ChatHeader/components/Toggle.js CHANGED Viewed

@@ -1,9 +1,9 @@
-import { Theme } from "../../tokens/theme/theme.js";
-import { Stack } from "../../Stack/Stack.js";
-import "../../Stack/index.js";
+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 { resolveTheme } from "../../utils/resolveTheme.js";
+import { Stack } from "../../Stack/Stack.js";
+import "../../Stack/index.js";
 import { ChatHeaderOptions } from "../types/index.js";
 import { useGetToggleProperties } from "../hooks/useGetToggleProperties.js";
 import { ToggleItem } from "./ToggleItem.js";

package/dist/ChatHeader/hooks/useGetCloseButtonProperties.cjs CHANGED Viewed

@@ -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('../types/index.cjs');
 let classnames = require("classnames");
 classnames = require_rolldown_runtime.__toESM(classnames);

package/dist/ChatHeader/hooks/useGetCloseButtonProperties.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { Theme } from "../../tokens/theme/theme.js";
+import { Theme } from "../../packages/components-v3/tokens/theme/theme.js";
 import { ChatHeaderVariant } from "../types/index.js";
 import classNames from "classnames";

package/dist/ChatHeader/hooks/useGetHandleProperties.cjs CHANGED Viewed

@@ -1,4 +1,4 @@
-const require_theme = require('../../tokens/theme/theme.cjs');
+const require_theme = require('../../packages/components-v3/tokens/theme/theme.cjs');
 const require_index = require('../types/index.cjs');
 //#region src/components/ChatHeader/hooks/useGetHandleProperties.ts
@@ -9,47 +9,47 @@ const defaultMinimal = `${defaultLayout} envive-tw-h-[29px]`;
 const barDimensions = "envive-tw-w-[22px] envive-tw-h-[4px]";
 const containerClassesMap = {
 	[require_theme.Theme.STANDARD]: {
-		[require_index.ChatHeaderVariant.LIGHT]: `${defaultStandard} envive-tw-bg-[var(--envive-colors-background-tertiary)]`,
-		[require_index.ChatHeaderVariant.DARK]: `${defaultStandard} envive-tw-bg-[var(--envive-colors-background-primary)]`
+		[require_index.ChatHeaderVariant.LIGHT]: `${defaultStandard} envive-tw-bg-background-tertiary`,
+		[require_index.ChatHeaderVariant.DARK]: `${defaultStandard} envive-tw-bg-background-primary`
 	},
 	[require_theme.Theme.MODERN]: {
 		[require_index.ChatHeaderVariant.LIGHT]: `${defaultModern}`,
-		[require_index.ChatHeaderVariant.DARK]: `${defaultModern} envive-tw-bg-[var(--envive-colors-background-dark)]`
+		[require_index.ChatHeaderVariant.DARK]: `${defaultModern} envive-tw-bg-background-dark`
 	},
 	[require_theme.Theme.MINIMAL]: {
 		[require_index.ChatHeaderVariant.LIGHT]: `${defaultMinimal}`,
-		[require_index.ChatHeaderVariant.DARK]: `${defaultMinimal} envive-tw-bg-[var(--envive-colors-background-dark)]`
+		[require_index.ChatHeaderVariant.DARK]: `${defaultMinimal} envive-tw-bg-background-dark`
 	}
 };
 const chev = {
 	[require_theme.Theme.STANDARD]: {
 		[require_index.ChatHeaderVariant.LIGHT]: {
-			leftBar: `${barDimensions} envive-tw-rounded-l-[4px] envive-tw-bg-[var(--envive-colors-background-dark)]`,
-			rightBar: `${barDimensions} envive-tw-rounded-r-[4px] envive-tw-bg-[var(--envive-colors-background-dark)]`
+			leftBar: `${barDimensions} envive-tw-rounded-l-[4px] envive-tw-bg-background-dark`,
+			rightBar: `${barDimensions} envive-tw-rounded-r-[4px] envive-tw-bg-background-dark`
 		},
 		[require_index.ChatHeaderVariant.DARK]: {
-			leftBar: `${barDimensions} envive-tw-rounded-l-[4px] envive-tw-bg-[var(--envive-colors-background-light)]`,
-			rightBar: `${barDimensions} envive-tw-rounded-r-[4px] envive-tw-bg-[var(--envive-colors-background-light)]`
+			leftBar: `${barDimensions} envive-tw-rounded-l-[4px] envive-tw-bg-background-light`,
+			rightBar: `${barDimensions} envive-tw-rounded-r-[4px] envive-tw-bg-background-light`
 		}
 	},
 	[require_theme.Theme.MODERN]: {
 		[require_index.ChatHeaderVariant.LIGHT]: {
-			leftBar: `${barDimensions} envive-tw-rounded-l-[4px] envive-tw-bg-[var(--envive-colors-background-dark)]`,
-			rightBar: `${barDimensions} envive-tw-rounded-r-[4px] envive-tw-bg-[var(--envive-colors-background-dark)]`
+			leftBar: `${barDimensions} envive-tw-rounded-l-[4px] envive-tw-bg-background-dark`,
+			rightBar: `${barDimensions} envive-tw-rounded-r-[4px] envive-tw-bg-background-dark`
 		},
 		[require_index.ChatHeaderVariant.DARK]: {
-			leftBar: `${barDimensions} envive-tw-rounded-l-[4px] envive-tw-bg-[var(--envive-colors-background-light)]`,
-			rightBar: `${barDimensions} envive-tw-rounded-r-[4px] envive-tw-bg-[var(--envive-colors-background-light)]`
+			leftBar: `${barDimensions} envive-tw-rounded-l-[4px] envive-tw-bg-background-light`,
+			rightBar: `${barDimensions} envive-tw-rounded-r-[4px] envive-tw-bg-background-light`
 		}
 	},
 	[require_theme.Theme.MINIMAL]: {
 		[require_index.ChatHeaderVariant.LIGHT]: {
-			leftBar: `${barDimensions} envive-tw-bg-[var(--envive-colors-background-dark)]`,
-			rightBar: `${barDimensions} envive-tw-bg-[var(--envive-colors-background-dark)]`
+			leftBar: `${barDimensions} envive-tw-bg-background-dark`,
+			rightBar: `${barDimensions} envive-tw-bg-background-dark`
 		},
 		[require_index.ChatHeaderVariant.DARK]: {
-			leftBar: `${barDimensions} envive-tw-bg-[var(--envive-colors-background-light)]`,
-			rightBar: `${barDimensions} envive-tw-bg-[var(--envive-colors-background-light)]`
+			leftBar: `${barDimensions} envive-tw-bg-background-light`,
+			rightBar: `${barDimensions} envive-tw-bg-background-light`
 		}
 	}
 };

package/dist/ChatHeader/hooks/useGetHandleProperties.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { Theme } from "../../tokens/theme/theme.js";
+import { Theme } from "../../packages/components-v3/tokens/theme/theme.js";
 import { ChatHeaderVariant, HandleState } from "../types/index.js";
 //#region src/components/ChatHeader/hooks/useGetHandleProperties.ts
@@ -9,47 +9,47 @@ const defaultMinimal = `${defaultLayout} envive-tw-h-[29px]`;
 const barDimensions = "envive-tw-w-[22px] envive-tw-h-[4px]";
 const containerClassesMap = {
 	[Theme.STANDARD]: {
-		[ChatHeaderVariant.LIGHT]: `${defaultStandard} envive-tw-bg-[var(--envive-colors-background-tertiary)]`,
-		[ChatHeaderVariant.DARK]: `${defaultStandard} envive-tw-bg-[var(--envive-colors-background-primary)]`
+		[ChatHeaderVariant.LIGHT]: `${defaultStandard} envive-tw-bg-background-tertiary`,
+		[ChatHeaderVariant.DARK]: `${defaultStandard} envive-tw-bg-background-primary`
 	},
 	[Theme.MODERN]: {
 		[ChatHeaderVariant.LIGHT]: `${defaultModern}`,
-		[ChatHeaderVariant.DARK]: `${defaultModern} envive-tw-bg-[var(--envive-colors-background-dark)]`
+		[ChatHeaderVariant.DARK]: `${defaultModern} envive-tw-bg-background-dark`
 	},
 	[Theme.MINIMAL]: {
 		[ChatHeaderVariant.LIGHT]: `${defaultMinimal}`,
-		[ChatHeaderVariant.DARK]: `${defaultMinimal} envive-tw-bg-[var(--envive-colors-background-dark)]`
+		[ChatHeaderVariant.DARK]: `${defaultMinimal} envive-tw-bg-background-dark`
 	}
 };
 const chev = {
 	[Theme.STANDARD]: {
 		[ChatHeaderVariant.LIGHT]: {
-			leftBar: `${barDimensions} envive-tw-rounded-l-[4px] envive-tw-bg-[var(--envive-colors-background-dark)]`,
-			rightBar: `${barDimensions} envive-tw-rounded-r-[4px] envive-tw-bg-[var(--envive-colors-background-dark)]`
+			leftBar: `${barDimensions} envive-tw-rounded-l-[4px] envive-tw-bg-background-dark`,
+			rightBar: `${barDimensions} envive-tw-rounded-r-[4px] envive-tw-bg-background-dark`
 		},
 		[ChatHeaderVariant.DARK]: {
-			leftBar: `${barDimensions} envive-tw-rounded-l-[4px] envive-tw-bg-[var(--envive-colors-background-light)]`,
-			rightBar: `${barDimensions} envive-tw-rounded-r-[4px] envive-tw-bg-[var(--envive-colors-background-light)]`
+			leftBar: `${barDimensions} envive-tw-rounded-l-[4px] envive-tw-bg-background-light`,
+			rightBar: `${barDimensions} envive-tw-rounded-r-[4px] envive-tw-bg-background-light`
 		}
 	},
 	[Theme.MODERN]: {
 		[ChatHeaderVariant.LIGHT]: {
-			leftBar: `${barDimensions} envive-tw-rounded-l-[4px] envive-tw-bg-[var(--envive-colors-background-dark)]`,
-			rightBar: `${barDimensions} envive-tw-rounded-r-[4px] envive-tw-bg-[var(--envive-colors-background-dark)]`
+			leftBar: `${barDimensions} envive-tw-rounded-l-[4px] envive-tw-bg-background-dark`,
+			rightBar: `${barDimensions} envive-tw-rounded-r-[4px] envive-tw-bg-background-dark`
 		},
 		[ChatHeaderVariant.DARK]: {
-			leftBar: `${barDimensions} envive-tw-rounded-l-[4px] envive-tw-bg-[var(--envive-colors-background-light)]`,
-			rightBar: `${barDimensions} envive-tw-rounded-r-[4px] envive-tw-bg-[var(--envive-colors-background-light)]`
+			leftBar: `${barDimensions} envive-tw-rounded-l-[4px] envive-tw-bg-background-light`,
+			rightBar: `${barDimensions} envive-tw-rounded-r-[4px] envive-tw-bg-background-light`
 		}
 	},
 	[Theme.MINIMAL]: {
 		[ChatHeaderVariant.LIGHT]: {
-			leftBar: `${barDimensions} envive-tw-bg-[var(--envive-colors-background-dark)]`,
-			rightBar: `${barDimensions} envive-tw-bg-[var(--envive-colors-background-dark)]`
+			leftBar: `${barDimensions} envive-tw-bg-background-dark`,
+			rightBar: `${barDimensions} envive-tw-bg-background-dark`
 		},
 		[ChatHeaderVariant.DARK]: {
-			leftBar: `${barDimensions} envive-tw-bg-[var(--envive-colors-background-light)]`,
-			rightBar: `${barDimensions} envive-tw-bg-[var(--envive-colors-background-light)]`
+			leftBar: `${barDimensions} envive-tw-bg-background-light`,
+			rightBar: `${barDimensions} envive-tw-bg-background-light`
 		}
 	}
 };

package/dist/ChatHeader/hooks/useGetLayoutProperties.cjs CHANGED Viewed

@@ -1,6 +1,6 @@
 const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
-const require_colorsConfig = require('../../src/models/colorsConfig.cjs');
-const require_theme = require('../../tokens/theme/theme.cjs');
+const require_utils = require('../../packages/components-v3/tokens/utils.cjs');
+const require_theme = require('../../packages/components-v3/tokens/theme/theme.cjs');
 const require_index = require('../types/index.cjs');
 let classnames = require("classnames");
 classnames = require_rolldown_runtime.__toESM(classnames);
@@ -12,7 +12,7 @@ const useGetLayoutProperties = (variant, theme, headerBgColor) => {
 	const isStandard = theme === require_theme.Theme.STANDARD;
 	const isModern = theme === require_theme.Theme.MODERN;
 	const isMinimal = theme === require_theme.Theme.MINIMAL;
-	const enviveHeaderBgColor = require_colorsConfig.enviveColorVar(headerBgColor);
+	const colorName = require_utils.extractColorNameFromCssVar(headerBgColor);
 	return { containerClasses: (0, classnames.default)({
 		"envive-tw-flex": true,
 		"envive-tw-items-center": true,
@@ -21,11 +21,11 @@ const useGetLayoutProperties = (variant, theme, headerBgColor) => {
 		"envive-tw-h-[52px]": isStandard,
 		"envive-tw-h-[56px]": isModern,
 		"envive-tw-h-[40px]": isMinimal,
-		"envive-tw-bg-[var(--envive-colors-background-light)]": isLight && !isStandard && !headerBgColor,
-		"envive-tw-bg-[var(--envive-colors-background-dark)]": isDark && !isStandard && !headerBgColor,
-		"envive-tw-bg-[var(--envive-colors-background-tertiary)]": isLight && isStandard && !headerBgColor,
-		"envive-tw-bg-[var(--envive-colors-background-primary)]": isDark && isStandard && !headerBgColor,
-		[`envive-tw-bg-[${enviveHeaderBgColor}]`]: !!headerBgColor
+		"envive-tw-bg-background-light": isLight && !isStandard && !headerBgColor,
+		"envive-tw-bg-background-dark": isDark && !isStandard && !headerBgColor,
+		"envive-tw-bg-background-tertiary": isLight && isStandard && !headerBgColor,
+		"envive-tw-bg-background-primary": isDark && isStandard && !headerBgColor,
+		[`envive-tw-bg-${colorName}`]: !!headerBgColor
 	}) };
 };

package/dist/ChatHeader/hooks/useGetLayoutProperties.js CHANGED Viewed

@@ -1,5 +1,5 @@
-import { enviveColorVar } from "../../src/models/colorsConfig.js";
-import { Theme } from "../../tokens/theme/theme.js";
+import { extractColorNameFromCssVar } from "../../packages/components-v3/tokens/utils.js";
+import { Theme } from "../../packages/components-v3/tokens/theme/theme.js";
 import { ChatHeaderVariant } from "../types/index.js";
 import classNames from "classnames";
@@ -10,7 +10,7 @@ const useGetLayoutProperties = (variant, theme, headerBgColor) => {
 	const isStandard = theme === Theme.STANDARD;
 	const isModern = theme === Theme.MODERN;
 	const isMinimal = theme === Theme.MINIMAL;
-	const enviveHeaderBgColor = enviveColorVar(headerBgColor);
+	const colorName = extractColorNameFromCssVar(headerBgColor);
 	return { containerClasses: classNames({
 		"envive-tw-flex": true,
 		"envive-tw-items-center": true,
@@ -19,11 +19,11 @@ const useGetLayoutProperties = (variant, theme, headerBgColor) => {
 		"envive-tw-h-[52px]": isStandard,
 		"envive-tw-h-[56px]": isModern,
 		"envive-tw-h-[40px]": isMinimal,
-		"envive-tw-bg-[var(--envive-colors-background-light)]": isLight && !isStandard && !headerBgColor,
-		"envive-tw-bg-[var(--envive-colors-background-dark)]": isDark && !isStandard && !headerBgColor,
-		"envive-tw-bg-[var(--envive-colors-background-tertiary)]": isLight && isStandard && !headerBgColor,
-		"envive-tw-bg-[var(--envive-colors-background-primary)]": isDark && isStandard && !headerBgColor,
-		[`envive-tw-bg-[${enviveHeaderBgColor}]`]: !!headerBgColor
+		"envive-tw-bg-background-light": isLight && !isStandard && !headerBgColor,
+		"envive-tw-bg-background-dark": isDark && !isStandard && !headerBgColor,
+		"envive-tw-bg-background-tertiary": isLight && isStandard && !headerBgColor,
+		"envive-tw-bg-background-primary": isDark && isStandard && !headerBgColor,
+		[`envive-tw-bg-${colorName}`]: !!headerBgColor
 	}) };
 };

package/dist/ChatHeader/hooks/useGetToggleOptionProperties.cjs CHANGED Viewed

@@ -1,4 +1,4 @@
-const require_theme = require('../../tokens/theme/theme.cjs');
+const require_theme = require('../../packages/components-v3/tokens/theme/theme.cjs');
 const require_index = require('../../Typography/types/index.cjs');
 require('../../Typography/index.cjs');
 const require_index$1 = require('../types/index.cjs');
@@ -11,12 +11,12 @@ const opacity = "envive-tw-opacity-50";
 const optionContainerClassesMap = (selected) => {
 	if (selected) return {
 		[require_theme.Theme.STANDARD]: {
-			[require_index$1.ChatHeaderVariant.LIGHT]: `${defaultContainerStandardClasses} envive-tw-bg-[var(--envive-colors-background-dark)]`,
-			[require_index$1.ChatHeaderVariant.DARK]: `${defaultContainerStandardClasses} envive-tw-bg-[var(--envive-colors-background-light)]`
+			[require_index$1.ChatHeaderVariant.LIGHT]: `${defaultContainerStandardClasses} envive-tw-bg-background-dark`,
+			[require_index$1.ChatHeaderVariant.DARK]: `${defaultContainerStandardClasses} envive-tw-bg-background-light`
 		},
 		[require_theme.Theme.MODERN]: {
-			[require_index$1.ChatHeaderVariant.LIGHT]: `${defaultContainerModernClasses} envive-tw-bg-[var(--envive-colors-background-dark)]`,
-			[require_index$1.ChatHeaderVariant.DARK]: `${defaultContainerModernClasses} envive-tw-bg-[var(--envive-colors-background-light)]`
+			[require_index$1.ChatHeaderVariant.LIGHT]: `${defaultContainerModernClasses} envive-tw-bg-background-dark`,
+			[require_index$1.ChatHeaderVariant.DARK]: `${defaultContainerModernClasses} envive-tw-bg-background-light`
 		},
 		[require_theme.Theme.MINIMAL]: {
 			[require_index$1.ChatHeaderVariant.LIGHT]: defaultMinimalClasses,
@@ -41,30 +41,30 @@ const optionContainerClassesMap = (selected) => {
 const textClassesMap = (selected) => {
 	if (selected) return {
 		[require_theme.Theme.STANDARD]: {
-			[require_index$1.ChatHeaderVariant.LIGHT]: "envive-tw-text-[var(--envive-colors-text-light)]",
-			[require_index$1.ChatHeaderVariant.DARK]: "envive-tw-text-[var(--envive-colors-text-primary)]"
+			[require_index$1.ChatHeaderVariant.LIGHT]: "envive-tw-text-text-light",
+			[require_index$1.ChatHeaderVariant.DARK]: "envive-tw-text-text-primary"
 		},
 		[require_theme.Theme.MODERN]: {
-			[require_index$1.ChatHeaderVariant.LIGHT]: `envive-tw-text-[var(--envive-colors-text-light)]`,
-			[require_index$1.ChatHeaderVariant.DARK]: `envive-tw-text-[var(--envive-colors-text-primary)]                                                                                                                                                        `
+			[require_index$1.ChatHeaderVariant.LIGHT]: `envive-tw-text-text-light`,
+			[require_index$1.ChatHeaderVariant.DARK]: `envive-tw-text-text-primary`
 		},
 		[require_theme.Theme.MINIMAL]: {
-			[require_index$1.ChatHeaderVariant.LIGHT]: "envive-tw-text-[var(--envive-colors-text-primary)]",
-			[require_index$1.ChatHeaderVariant.DARK]: "envive-tw-text-[var(--envive-colors-text-light)]"
+			[require_index$1.ChatHeaderVariant.LIGHT]: "envive-tw-text-text-primary",
+			[require_index$1.ChatHeaderVariant.DARK]: "envive-tw-text-text-light"
 		}
 	};
 	return {
 		[require_theme.Theme.STANDARD]: {
-			[require_index$1.ChatHeaderVariant.LIGHT]: "envive-tw-text-[var(--envive-colors-text-primary)]",
-			[require_index$1.ChatHeaderVariant.DARK]: "envive-tw-text-[var(--envive-colors-text-light)]"
+			[require_index$1.ChatHeaderVariant.LIGHT]: "envive-tw-text-text-primary",
+			[require_index$1.ChatHeaderVariant.DARK]: "envive-tw-text-text-light"
 		},
 		[require_theme.Theme.MODERN]: {
-			[require_index$1.ChatHeaderVariant.LIGHT]: `${opacity} envive-tw-text-[var(--envive-colors-text-primary)]`,
-			[require_index$1.ChatHeaderVariant.DARK]: `${opacity} envive-tw-text-[var(--envive-colors-text-primary)]`
+			[require_index$1.ChatHeaderVariant.LIGHT]: `${opacity} envive-tw-text-text-primary`,
+			[require_index$1.ChatHeaderVariant.DARK]: `${opacity} envive-tw-text-text-primary`
 		},
 		[require_theme.Theme.MINIMAL]: {
-			[require_index$1.ChatHeaderVariant.LIGHT]: `${opacity} envive-tw-text-[var(--envive-colors-text-primary)]`,
-			[require_index$1.ChatHeaderVariant.DARK]: `${opacity} envive-tw-text-[var(--envive-colors-text-light)]`
+			[require_index$1.ChatHeaderVariant.LIGHT]: `${opacity} envive-tw-text-text-primary`,
+			[require_index$1.ChatHeaderVariant.DARK]: `${opacity} envive-tw-text-text-light`
 		}
 	};
 };