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

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

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 (491) hide show

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_runtime18 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_runtime18.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_runtime33 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_runtime33.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`
 		}
 	};
 };

package/dist/ChatHeader/hooks/useGetToggleOptionProperties.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 { TypographyVariant } from "../../Typography/types/index.js";
 import "../../Typography/index.js";
 import { ChatHeaderVariant } from "../types/index.js";
@@ -11,12 +11,12 @@ const opacity = "envive-tw-opacity-50";
 const optionContainerClassesMap = (selected) => {
 	if (selected) return {
 		[Theme.STANDARD]: {
-			[ChatHeaderVariant.LIGHT]: `${defaultContainerStandardClasses} envive-tw-bg-[var(--envive-colors-background-dark)]`,
-			[ChatHeaderVariant.DARK]: `${defaultContainerStandardClasses} envive-tw-bg-[var(--envive-colors-background-light)]`
+			[ChatHeaderVariant.LIGHT]: `${defaultContainerStandardClasses} envive-tw-bg-background-dark`,
+			[ChatHeaderVariant.DARK]: `${defaultContainerStandardClasses} envive-tw-bg-background-light`
 		},
 		[Theme.MODERN]: {
-			[ChatHeaderVariant.LIGHT]: `${defaultContainerModernClasses} envive-tw-bg-[var(--envive-colors-background-dark)]`,
-			[ChatHeaderVariant.DARK]: `${defaultContainerModernClasses} envive-tw-bg-[var(--envive-colors-background-light)]`
+			[ChatHeaderVariant.LIGHT]: `${defaultContainerModernClasses} envive-tw-bg-background-dark`,
+			[ChatHeaderVariant.DARK]: `${defaultContainerModernClasses} envive-tw-bg-background-light`
 		},
 		[Theme.MINIMAL]: {
 			[ChatHeaderVariant.LIGHT]: defaultMinimalClasses,
@@ -41,30 +41,30 @@ const optionContainerClassesMap = (selected) => {
 const textClassesMap = (selected) => {
 	if (selected) return {
 		[Theme.STANDARD]: {
-			[ChatHeaderVariant.LIGHT]: "envive-tw-text-[var(--envive-colors-text-light)]",
-			[ChatHeaderVariant.DARK]: "envive-tw-text-[var(--envive-colors-text-primary)]"
+			[ChatHeaderVariant.LIGHT]: "envive-tw-text-text-light",
+			[ChatHeaderVariant.DARK]: "envive-tw-text-text-primary"
 		},
 		[Theme.MODERN]: {
-			[ChatHeaderVariant.LIGHT]: `envive-tw-text-[var(--envive-colors-text-light)]`,
-			[ChatHeaderVariant.DARK]: `envive-tw-text-[var(--envive-colors-text-primary)]                                                                                                                                                        `
+			[ChatHeaderVariant.LIGHT]: `envive-tw-text-text-light`,
+			[ChatHeaderVariant.DARK]: `envive-tw-text-text-primary`
 		},
 		[Theme.MINIMAL]: {
-			[ChatHeaderVariant.LIGHT]: "envive-tw-text-[var(--envive-colors-text-primary)]",
-			[ChatHeaderVariant.DARK]: "envive-tw-text-[var(--envive-colors-text-light)]"
+			[ChatHeaderVariant.LIGHT]: "envive-tw-text-text-primary",
+			[ChatHeaderVariant.DARK]: "envive-tw-text-text-light"
 		}
 	};
 	return {
 		[Theme.STANDARD]: {
-			[ChatHeaderVariant.LIGHT]: "envive-tw-text-[var(--envive-colors-text-primary)]",
-			[ChatHeaderVariant.DARK]: "envive-tw-text-[var(--envive-colors-text-light)]"
+			[ChatHeaderVariant.LIGHT]: "envive-tw-text-text-primary",
+			[ChatHeaderVariant.DARK]: "envive-tw-text-text-light"
 		},
 		[Theme.MODERN]: {
-			[ChatHeaderVariant.LIGHT]: `${opacity} envive-tw-text-[var(--envive-colors-text-primary)]`,
-			[ChatHeaderVariant.DARK]: `${opacity} envive-tw-text-[var(--envive-colors-text-primary)]`
+			[ChatHeaderVariant.LIGHT]: `${opacity} envive-tw-text-text-primary`,
+			[ChatHeaderVariant.DARK]: `${opacity} envive-tw-text-text-primary`
 		},
 		[Theme.MINIMAL]: {
-			[ChatHeaderVariant.LIGHT]: `${opacity} envive-tw-text-[var(--envive-colors-text-primary)]`,
-			[ChatHeaderVariant.DARK]: `${opacity} envive-tw-text-[var(--envive-colors-text-light)]`
+			[ChatHeaderVariant.LIGHT]: `${opacity} envive-tw-text-text-primary`,
+			[ChatHeaderVariant.DARK]: `${opacity} envive-tw-text-text-light`
 		}
 	};
 };