@envive-ai/react-toolkit-v3 0.3.21 → 0.3.23

package/dist/AnimatedText/AnimatedText.d.cts

@@ -1,13 +1,13 @@
 import { AnimatedTextProps } from "./types/types.cjs";
-import * as react10 from "react";
+import * as react184 from "react";
 
 //#region src/components/AnimatedText/AnimatedText.d.ts
-declare const AnimatedText: react10.MemoExoticComponent<({
+declare const AnimatedText: react184.MemoExoticComponent<({
   sequence,
   typingDuration,
   transition,
   loop,
   getNodeWrapper
-}: AnimatedTextProps) => react10.ReactNode>;
+}: AnimatedTextProps) => react184.ReactNode>;
 //#endregion
 export { AnimatedText };

package/dist/AnimatedText/AnimatedText.d.ts

@@ -1,13 +1,13 @@
 import { AnimatedTextProps } from "./types/types.js";
-import * as react184 from "react";
+import * as react181 from "react";
 
 //#region src/components/AnimatedText/AnimatedText.d.ts
-declare const AnimatedText: react184.MemoExoticComponent<({
+declare const AnimatedText: react181.MemoExoticComponent<({
   sequence,
   typingDuration,
   transition,
   loop,
   getNodeWrapper
-}: AnimatedTextProps) => react184.ReactNode>;
+}: AnimatedTextProps) => react181.ReactNode>;
 //#endregion
 export { AnimatedText };

package/dist/CSSVariablesEditor/CssVariablesEditorComponent.d.cts

@@ -1,10 +1,10 @@
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as react_jsx_runtime34 from "react/jsx-runtime";
 
 //#region src/components/CSSVariablesEditor/CssVariablesEditorComponent.d.ts
 declare const CssVariablesEditorComponent: ({
   selectedMerchantName
 }: {
   selectedMerchantName: string;
-}) => react_jsx_runtime0.JSX.Element;
+}) => react_jsx_runtime34.JSX.Element;
 //#endregion
 export { CssVariablesEditorComponent };

package/dist/CSSVariablesEditor/CssVariablesEditorComponent.d.ts

@@ -1,10 +1,10 @@
-import * as react_jsx_runtime36 from "react/jsx-runtime";
+import * as react_jsx_runtime31 from "react/jsx-runtime";
 
 //#region src/components/CSSVariablesEditor/CssVariablesEditorComponent.d.ts
 declare const CssVariablesEditorComponent: ({
   selectedMerchantName
 }: {
   selectedMerchantName: string;
-}) => react_jsx_runtime36.JSX.Element;
+}) => react_jsx_runtime31.JSX.Element;
 //#endregion
 export { CssVariablesEditorComponent };

package/dist/Carousel/Carousel.cjs

@@ -1,7 +1,7 @@
 const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
 const require_theme = require('../packages/components-v3/tokens/theme/theme.cjs');
-const require_resolveTheme = require('../utils/resolveTheme.cjs');
 const require_index = require('./components/index.cjs');
+const require_resolveTheme = require('../utils/resolveTheme.cjs');
 let react_jsx_runtime = require("react/jsx-runtime");
 
 //#region src/components/Carousel/Carousel.tsx

package/dist/Carousel/Carousel.d.cts

@@ -1,5 +1,5 @@
 import { CarouselProps } from "./types/types.cjs";
-import * as react_jsx_runtime24 from "react/jsx-runtime";
+import * as react_jsx_runtime27 from "react/jsx-runtime";
 
 //#region src/components/Carousel/Carousel.d.ts
 declare const Carousel: ({
@@ -12,6 +12,6 @@ declare const Carousel: ({
   badgeContent,
   theme,
   hideNavigation
-}: CarouselProps) => react_jsx_runtime24.JSX.Element;
+}: CarouselProps) => react_jsx_runtime27.JSX.Element;
 //#endregion
 export { Carousel };

package/dist/Carousel/Carousel.d.ts

@@ -1,5 +1,5 @@
 import { CarouselProps } from "./types/types.js";
-import * as react_jsx_runtime27 from "react/jsx-runtime";
+import * as react_jsx_runtime32 from "react/jsx-runtime";
 
 //#region src/components/Carousel/Carousel.d.ts
 declare const Carousel: ({
@@ -12,6 +12,6 @@ declare const Carousel: ({
   badgeContent,
   theme,
   hideNavigation
-}: CarouselProps) => react_jsx_runtime27.JSX.Element;
+}: CarouselProps) => react_jsx_runtime32.JSX.Element;
 //#endregion
 export { Carousel };

package/dist/Carousel/Carousel.js

@@ -1,6 +1,6 @@
 import { Theme } from "../packages/components-v3/tokens/theme/theme.js";
-import { resolveTheme } from "../utils/resolveTheme.js";
 import { CarouselComponents } from "./components/index.js";
+import { resolveTheme } from "../utils/resolveTheme.js";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/components/Carousel/Carousel.tsx

package/dist/Carousel/components/Container.cjs

@@ -1,8 +1,8 @@
 const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.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_Container = require('../../Container/Container.cjs');
+require('../../Container/index.cjs');
 const require_useCarouselItems = require('../hooks/useCarouselItems.cjs');
 const require_useCarouselNavigation = require('../hooks/useCarouselNavigation.cjs');
 const require_useCarouselNavigationButtons = require('../hooks/useCarouselNavigationButtons.cjs');

package/dist/Carousel/components/Container.js

@@ -1,7 +1,7 @@
-import { Container } from "../../Container/Container.js";
-import "../../Container/index.js";
 import { Stack } from "../../Stack/Stack.js";
 import "../../Stack/index.js";
+import { Container } from "../../Container/Container.js";
+import "../../Container/index.js";
 import { useCarouselItems } from "../hooks/useCarouselItems.js";
 import { useCarouselNavigation } from "../hooks/useCarouselNavigation.js";
 import { useCarouselNavigationButtons } from "../hooks/useCarouselNavigationButtons.js";

package/dist/ChatFooter/ChatFooter.cjs

@@ -1,7 +1,7 @@
 const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
 const require_theme = require('../packages/components-v3/tokens/theme/theme.cjs');
-require('../Tokens/index.cjs');
 const require_resolveTheme = require('../utils/resolveTheme.cjs');
+require('../Tokens/index.cjs');
 const require_useGetChatScrollProperties = require('./hooks/useGetChatScrollProperties.cjs');
 const require_index = require('./components/index.cjs');
 let react_jsx_runtime = require("react/jsx-runtime");
@@ -9,7 +9,7 @@ let classnames = require("classnames");
 classnames = require_rolldown_runtime.__toESM(classnames);
 
 //#region src/components/ChatFooter/ChatFooter.tsx
-const ChatFooter = ({ id, testId, className, style, theme = require_theme.Theme.GLOBAL_CUSTOM, promptSuggestions, handleButtonClick, isScrolled, onChange, onSubmit, onFocus, textFieldPlaceholderText, hideEnviveWatermark = false, disabled = false, isLoadingPromptSuggestions = false, disabledInput = false, parentWidget }) => {
+const ChatFooter = ({ id, testId, className, style, theme = require_theme.Theme.GLOBAL_CUSTOM, promptSuggestions, handleButtonClick, isScrolled, onChange, onSubmit, onFocus, textFieldPlaceholderText, hideEnviveWatermark = false, disabled = false, isLoadingPromptSuggestions = false, disabledInput = false, inputClassName, parentWidget, voiceInputEnabled = false, onTranscriptionStarted, onTranscriptionCompleted }) => {
 	const finalTheme = require_resolveTheme.resolveTheme(theme);
 	const { textFieldClasses } = require_useGetChatScrollProperties.useGetChatScrollProperties(isScrolled, finalTheme);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.ChatFooterComponents.Layout, {
@@ -35,7 +35,11 @@ const ChatFooter = ({ id, testId, className, style, theme = require_theme.Theme.
 			onSubmit,
 			onFocus,
 			className: (0, classnames.default)(textFieldClasses, className),
-			disabled: disabled || disabledInput
+			inputClassName,
+			disabled: disabled || disabledInput,
+			enableVoiceInput: voiceInputEnabled,
+			onTranscriptionStarted,
+			onTranscriptionCompleted
 		}),
 		enviveLogo: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.ChatFooterComponents.EnviveLogo, { className })
 	});

package/dist/ChatFooter/ChatFooter.d.cts

@@ -1,5 +1,5 @@
 import { ChatFooterProps } from "./types/types.cjs";
-import * as react_jsx_runtime29 from "react/jsx-runtime";
+import * as react_jsx_runtime17 from "react/jsx-runtime";
 
 //#region src/components/ChatFooter/ChatFooter.d.ts
 declare const ChatFooter: ({
@@ -19,7 +19,11 @@ declare const ChatFooter: ({
   disabled,
   isLoadingPromptSuggestions,
   disabledInput,
-  parentWidget
-}: ChatFooterProps) => react_jsx_runtime29.JSX.Element;
+  inputClassName,
+  parentWidget,
+  voiceInputEnabled,
+  onTranscriptionStarted,
+  onTranscriptionCompleted
+}: ChatFooterProps) => react_jsx_runtime17.JSX.Element;
 //#endregion
 export { ChatFooter };

package/dist/ChatFooter/ChatFooter.d.ts

@@ -19,7 +19,11 @@ declare const ChatFooter: ({
   disabled,
   isLoadingPromptSuggestions,
   disabledInput,
-  parentWidget
+  inputClassName,
+  parentWidget,
+  voiceInputEnabled,
+  onTranscriptionStarted,
+  onTranscriptionCompleted
 }: ChatFooterProps) => react_jsx_runtime35.JSX.Element;
 //#endregion
 export { ChatFooter };

package/dist/ChatFooter/ChatFooter.js

@@ -1,13 +1,13 @@
 import { Theme } from "../packages/components-v3/tokens/theme/theme.js";
-import "../Tokens/index.js";
 import { resolveTheme } from "../utils/resolveTheme.js";
+import "../Tokens/index.js";
 import { useGetChatScrollProperties } from "./hooks/useGetChatScrollProperties.js";
 import { ChatFooterComponents } from "./components/index.js";
 import { jsx } from "react/jsx-runtime";
 import classNames from "classnames";
 
 //#region src/components/ChatFooter/ChatFooter.tsx
-const ChatFooter = ({ id, testId, className, style, theme = Theme.GLOBAL_CUSTOM, promptSuggestions, handleButtonClick, isScrolled, onChange, onSubmit, onFocus, textFieldPlaceholderText, hideEnviveWatermark = false, disabled = false, isLoadingPromptSuggestions = false, disabledInput = false, parentWidget }) => {
+const ChatFooter = ({ id, testId, className, style, theme = Theme.GLOBAL_CUSTOM, promptSuggestions, handleButtonClick, isScrolled, onChange, onSubmit, onFocus, textFieldPlaceholderText, hideEnviveWatermark = false, disabled = false, isLoadingPromptSuggestions = false, disabledInput = false, inputClassName, parentWidget, voiceInputEnabled = false, onTranscriptionStarted, onTranscriptionCompleted }) => {
 	const finalTheme = resolveTheme(theme);
 	const { textFieldClasses } = useGetChatScrollProperties(isScrolled, finalTheme);
 	return /* @__PURE__ */ jsx(ChatFooterComponents.Layout, {
@@ -33,7 +33,11 @@ const ChatFooter = ({ id, testId, className, style, theme = Theme.GLOBAL_CUSTOM,
 			onSubmit,
 			onFocus,
 			className: classNames(textFieldClasses, className),
-			disabled: disabled || disabledInput
+			inputClassName,
+			disabled: disabled || disabledInput,
+			enableVoiceInput: voiceInputEnabled,
+			onTranscriptionStarted,
+			onTranscriptionCompleted
 		}),
 		enviveLogo: /* @__PURE__ */ jsx(ChatFooterComponents.EnviveLogo, { className })
 	});

package/dist/ChatFooter/components/Layout.cjs

@@ -1,8 +1,8 @@
 const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.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_Container = require('../../Container/Container.cjs');
+require('../../Container/index.cjs');
 const require_useGetContainerProperties = require('../hooks/useGetContainerProperties.cjs');
 const require_useGetChatScrollProperties = require('../hooks/useGetChatScrollProperties.cjs');
 let react_jsx_runtime = require("react/jsx-runtime");

package/dist/ChatFooter/components/Layout.js

@@ -1,7 +1,7 @@
-import { Container } from "../../Container/Container.js";
-import "../../Container/index.js";
 import { Stack } from "../../Stack/Stack.js";
 import "../../Stack/index.js";
+import { Container } from "../../Container/Container.js";
+import "../../Container/index.js";
 import { useGetContainerProperties } from "../hooks/useGetContainerProperties.js";
 import { useGetChatScrollProperties } from "../hooks/useGetChatScrollProperties.js";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/ChatFooter/components/index.d.cts

@@ -1,8 +1,8 @@
 import { LayoutProps } from "./Layout.cjs";
 import { PromptSuggestionsProps } from "./PromptSuggestions.cjs";
 import { TextFieldProps } from "../../TextField/types/index.cjs";
-import * as react12 from "react";
-import * as react_jsx_runtime27 from "react/jsx-runtime";
+import * as react5 from "react";
+import * as react_jsx_runtime15 from "react/jsx-runtime";
 
 //#region src/components/ChatFooter/components/index.d.ts
 declare const ChatFooterComponents: {
@@ -17,13 +17,13 @@ declare const ChatFooterComponents: {
     testId,
     className,
     style
-  }: LayoutProps) => react_jsx_runtime27.JSX.Element;
+  }: LayoutProps) => react_jsx_runtime15.JSX.Element;
   EnviveLogo: ({
     style
   }: {
     className?: string;
     style?: React.CSSProperties;
-  }) => react12.ReactElement<react12.SVGProps<SVGSVGElement>, string | react12.JSXElementConstructor<any>>;
+  }) => react5.ReactElement<react5.SVGProps<SVGSVGElement>, string | react5.JSXElementConstructor<any>>;
   PromptSuggestions: ({
     theme,
     suggestions,
@@ -32,7 +32,7 @@ declare const ChatFooterComponents: {
     style,
     disabled,
     parentWidget
-  }: PromptSuggestionsProps) => react_jsx_runtime27.JSX.Element;
+  }: PromptSuggestionsProps) => react_jsx_runtime15.JSX.Element;
   TextField: ({
     theme,
     placeholder,
@@ -44,9 +44,13 @@ declare const ChatFooterComponents: {
     id,
     testId,
     className,
+    inputClassName,
     style,
     ariaLabel,
-    isLoading
+    isLoading,
+    enableVoiceInput,
+    onTranscriptionStarted,
+    onTranscriptionCompleted
   }: TextFieldProps) => JSX.Element;
 };
 //#endregion

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

@@ -1,7 +1,7 @@
 import { LayoutProps } from "./Layout.js";
 import { PromptSuggestionsProps } from "./PromptSuggestions.js";
 import { TextFieldProps } from "../../TextField/types/index.js";
-import * as react181 from "react";
+import * as react183 from "react";
 import * as react_jsx_runtime33 from "react/jsx-runtime";
 
 //#region src/components/ChatFooter/components/index.d.ts
@@ -23,7 +23,7 @@ declare const ChatFooterComponents: {
   }: {
     className?: string;
     style?: React.CSSProperties;
-  }) => react181.ReactElement<react181.SVGProps<SVGSVGElement>, string | react181.JSXElementConstructor<any>>;
+  }) => react183.ReactElement<react183.SVGProps<SVGSVGElement>, string | react183.JSXElementConstructor<any>>;
   PromptSuggestions: ({
     theme,
     suggestions,
@@ -44,9 +44,13 @@ declare const ChatFooterComponents: {
     id,
     testId,
     className,
+    inputClassName,
     style,
     ariaLabel,
-    isLoading
+    isLoading,
+    enableVoiceInput,
+    onTranscriptionStarted,
+    onTranscriptionCompleted
   }: TextFieldProps) => JSX.Element;
 };
 //#endregion

package/dist/ChatFooter/types/types.d.cts

@@ -74,10 +74,26 @@ type ChatFooterProps = {
    * Whether the input is disabled
    */
   disabledInput?: boolean;
+  /**
+   * Additional class names applied directly to the input element (e.g. placeholder styling).
+   */
+  inputClassName?: string;
   /**
    * The parent widget that this chat footer belongs to
    */
   parentWidget: WidgetInteractionComponent;
+  /**
+   * Whether to enable voice input.
+   */
+  voiceInputEnabled?: boolean;
+  /**
+   * Callback function invoked when voice transcription starts.
+   */
+  onTranscriptionStarted?: () => void;
+  /**
+   * Callback function invoked when voice transcription completes.
+   */
+  onTranscriptionCompleted?: (transcript: string) => void;
 };
 //#endregion
 export { ChatFooterProps };

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

@@ -74,10 +74,26 @@ type ChatFooterProps = {
    * Whether the input is disabled
    */
   disabledInput?: boolean;
+  /**
+   * Additional class names applied directly to the input element (e.g. placeholder styling).
+   */
+  inputClassName?: string;
   /**
    * The parent widget that this chat footer belongs to
    */
   parentWidget: WidgetInteractionComponent;
+  /**
+   * Whether to enable voice input.
+   */
+  voiceInputEnabled?: boolean;
+  /**
+   * Callback function invoked when voice transcription starts.
+   */
+  onTranscriptionStarted?: () => void;
+  /**
+   * Callback function invoked when voice transcription completes.
+   */
+  onTranscriptionCompleted?: (transcript: string) => void;
 };
 //#endregion
 export { ChatFooterProps };

package/dist/ChatHeader/ChatHeader.cjs

@@ -15,7 +15,8 @@ const ChatHeader = ({ theme = require_theme.Theme.GLOBAL_CUSTOM, variant = requi
 		theme: finalTheme,
 		variant,
 		state: handleState,
-		animationKey: handleAnimationKey
+		animationKey: handleAnimationKey,
+		headerBgColor
 	}), showMainContent && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_index$1.ChatHeaderComponents.Layout, {
 		headerBgColor,
 		variant,

package/dist/ChatHeader/ChatHeader.d.cts

@@ -1,5 +1,5 @@
 import { ChatHeaderProps } from "./types/index.cjs";
-import * as react_jsx_runtime32 from "react/jsx-runtime";
+import * as react_jsx_runtime35 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_runtime32.JSX.Element;
+}: ChatHeaderProps) => react_jsx_runtime35.JSX.Element;
 //#endregion
 export { ChatHeader };

package/dist/ChatHeader/ChatHeader.d.ts

@@ -1,5 +1,5 @@
 import { ChatHeaderProps } from "./types/index.js";
-import * as react_jsx_runtime31 from "react/jsx-runtime";
+import * as react_jsx_runtime36 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_runtime31.JSX.Element;
+}: ChatHeaderProps) => react_jsx_runtime36.JSX.Element;
 //#endregion
 export { ChatHeader };

package/dist/ChatHeader/ChatHeader.js

@@ -14,7 +14,8 @@ const ChatHeader = ({ theme = Theme.GLOBAL_CUSTOM, variant = ChatHeaderVariant.L
 		theme: finalTheme,
 		variant,
 		state: handleState,
-		animationKey: handleAnimationKey
+		animationKey: handleAnimationKey,
+		headerBgColor
 	}), showMainContent && /* @__PURE__ */ jsxs(ChatHeaderComponents.Layout, {
 		headerBgColor,
 		variant,

package/dist/ChatHeader/components/Handle.cjs

@@ -1,16 +1,16 @@
 const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.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_Container = require('../../Container/Container.cjs');
+require('../../Container/index.cjs');
 const require_snapConstants = require('../../FloatingChat/snapConstants.cjs');
 const require_useGetHandleProperties = require('../hooks/useGetHandleProperties.cjs');
 let react_jsx_runtime = require("react/jsx-runtime");
 let framer_motion = require("framer-motion");
 
 //#region src/components/ChatHeader/components/Handle.tsx
-const Handle = ({ theme, variant, state, animationKey }) => {
-	const { containerClasses, leftBar, rightBar } = require_useGetHandleProperties.useGetHandleProperties(theme, variant, state);
+const Handle = ({ theme, variant, state, animationKey, headerBgColor }) => {
+	const { containerClasses, leftBar, rightBar } = require_useGetHandleProperties.useGetHandleProperties(theme, variant, state, headerBgColor);
 	const swipeviewFactor = require_snapConstants.MAX_SWIPEABLE_VIEW_HEIGHT / 100;
 	const closetSheetHeight = Math.floor(window.innerHeight * swipeviewFactor);
 	const snapFullView = 0;

package/dist/ChatHeader/components/Handle.js

@@ -1,15 +1,15 @@
-import { Container } from "../../Container/Container.js";
-import "../../Container/index.js";
 import { Stack } from "../../Stack/Stack.js";
 import "../../Stack/index.js";
+import { Container } from "../../Container/Container.js";
+import "../../Container/index.js";
 import { MAX_SWIPEABLE_VIEW_HEIGHT } from "../../FloatingChat/snapConstants.js";
 import { useGetHandleProperties } from "../hooks/useGetHandleProperties.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { motion, useMotionValue, useTransform } from "framer-motion";
 
 //#region src/components/ChatHeader/components/Handle.tsx
-const Handle = ({ theme, variant, state, animationKey }) => {
-	const { containerClasses, leftBar, rightBar } = useGetHandleProperties(theme, variant, state);
+const Handle = ({ theme, variant, state, animationKey, headerBgColor }) => {
+	const { containerClasses, leftBar, rightBar } = useGetHandleProperties(theme, variant, state, headerBgColor);
 	const swipeviewFactor = MAX_SWIPEABLE_VIEW_HEIGHT / 100;
 	const closetSheetHeight = Math.floor(window.innerHeight * swipeviewFactor);
 	const snapFullView = 0;

package/dist/ChatHeader/components/Toggle.cjs

@@ -1,10 +1,10 @@
 const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.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_Stack = require('../../Stack/Stack.cjs');
 require('../../Stack/index.cjs');
+const require_Container = require('../../Container/Container.cjs');
+require('../../Container/index.cjs');
+const require_resolveTheme = require('../../utils/resolveTheme.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

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

package/dist/ChatHeader/hooks/useGetHandleProperties.cjs

@@ -1,11 +1,12 @@
+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');
 
 //#region src/components/ChatHeader/hooks/useGetHandleProperties.ts
-const defaultLayout = "envive-tw-flex envive-tw-justify-center envive-tw-items-center";
-const defaultStandard = `${defaultLayout} envive-tw-h-[29px] envive-tw-rounded-t-[var(--envive-global-custom-border-radius)]`;
-const defaultModern = `${defaultLayout} envive-tw-h-[33px]`;
-const defaultMinimal = `${defaultLayout} envive-tw-h-[29px]`;
+const defaultLayout = "envive-tw-flex envive-tw-justify-center envive-tw-items-end";
+const defaultStandard = `${defaultLayout} envive-tw-h-[16px] envive-tw-rounded-t-[var(--envive-global-custom-border-radius)]`;
+const defaultModern = `${defaultLayout} envive-tw-h-[16px]`;
+const defaultMinimal = `${defaultLayout} envive-tw-h-[16px]`;
 const barDimensions = "envive-tw-w-[22px] envive-tw-h-[4px]";
 const containerClassesMap = {
 	[require_theme.Theme.STANDARD]: {
@@ -60,8 +61,9 @@ const getHandleStateClasses = (state) => {
 	};
 	return {};
 };
-const useGetHandleProperties = (theme, variant, state) => {
-	const containerClasses = containerClassesMap[theme][variant];
+const useGetHandleProperties = (theme, variant, state, headerBgColor) => {
+	const colorName = require_utils.extractColorNameFromCssVar(headerBgColor);
+	const containerClasses = `${containerClassesMap[theme][variant]} envive-tw-bg-${colorName}`;
 	const { leftBar } = chev[theme][variant];
 	const { rightBar } = chev[theme][variant];
 	return {

package/dist/ChatHeader/hooks/useGetHandleProperties.js

@@ -1,11 +1,12 @@
+import { extractColorNameFromCssVar } from "../../packages/components-v3/tokens/utils.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
-const defaultLayout = "envive-tw-flex envive-tw-justify-center envive-tw-items-center";
-const defaultStandard = `${defaultLayout} envive-tw-h-[29px] envive-tw-rounded-t-[var(--envive-global-custom-border-radius)]`;
-const defaultModern = `${defaultLayout} envive-tw-h-[33px]`;
-const defaultMinimal = `${defaultLayout} envive-tw-h-[29px]`;
+const defaultLayout = "envive-tw-flex envive-tw-justify-center envive-tw-items-end";
+const defaultStandard = `${defaultLayout} envive-tw-h-[16px] envive-tw-rounded-t-[var(--envive-global-custom-border-radius)]`;
+const defaultModern = `${defaultLayout} envive-tw-h-[16px]`;
+const defaultMinimal = `${defaultLayout} envive-tw-h-[16px]`;
 const barDimensions = "envive-tw-w-[22px] envive-tw-h-[4px]";
 const containerClassesMap = {
 	[Theme.STANDARD]: {
@@ -60,8 +61,9 @@ const getHandleStateClasses = (state) => {
 	};
 	return {};
 };
-const useGetHandleProperties = (theme, variant, state) => {
-	const containerClasses = containerClassesMap[theme][variant];
+const useGetHandleProperties = (theme, variant, state, headerBgColor) => {
+	const colorName = extractColorNameFromCssVar(headerBgColor);
+	const containerClasses = `${containerClassesMap[theme][variant]} envive-tw-bg-${colorName}`;
 	const { leftBar } = chev[theme][variant];
 	const { rightBar } = chev[theme][variant];
 	return {

package/dist/ChatHeader/hooks/useGetToggleOptionProperties.cjs

@@ -4,7 +4,7 @@ require('../../Typography/index.cjs');
 const require_index$1 = require('../types/index.cjs');
 
 //#region src/components/ChatHeader/hooks/useGetToggleOptionProperties.ts
-const defaultContainerStandardClasses = "envive-tw-px-[6px] envive-tw-py-1 envive-tw-rounded-[var(--envive-global-custom-border-radius)] envive-tw-cursor-pointer";
+const defaultContainerStandardClasses = "envive-tw-px-[8px] envive-tw-py-1 envive-tw-rounded-[var(--envive-global-custom-border-radius)] envive-tw-cursor-pointer";
 const defaultContainerModernClasses = "envive-tw-px-4 envive-tw-py-2 envive-tw-rounded-[var(--envive-global-custom-border-radius)] envive-tw-cursor-pointer";
 const defaultMinimalClasses = "envive-tw-cursor-pointer";
 const opacity = "envive-tw-opacity-50";

package/dist/ChatHeader/hooks/useGetToggleOptionProperties.js

@@ -4,7 +4,7 @@ import "../../Typography/index.js";
 import { ChatHeaderVariant } from "../types/index.js";
 
 //#region src/components/ChatHeader/hooks/useGetToggleOptionProperties.ts
-const defaultContainerStandardClasses = "envive-tw-px-[6px] envive-tw-py-1 envive-tw-rounded-[var(--envive-global-custom-border-radius)] envive-tw-cursor-pointer";
+const defaultContainerStandardClasses = "envive-tw-px-[8px] envive-tw-py-1 envive-tw-rounded-[var(--envive-global-custom-border-radius)] envive-tw-cursor-pointer";
 const defaultContainerModernClasses = "envive-tw-px-4 envive-tw-py-2 envive-tw-rounded-[var(--envive-global-custom-border-radius)] envive-tw-cursor-pointer";
 const defaultMinimalClasses = "envive-tw-cursor-pointer";
 const opacity = "envive-tw-opacity-50";

package/dist/ChatPreview/ChatPreview.cjs

@@ -1,7 +1,7 @@
 const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
 const require_theme = require('../packages/components-v3/tokens/theme/theme.cjs');
-require('../Tokens/index.cjs');
 const require_resolveTheme = require('../utils/resolveTheme.cjs');
+require('../Tokens/index.cjs');
 const require_PromptButton_types_index = require('../PromptButton/types/index.cjs');
 require('../PromptButton/index.cjs');
 const require_PromptCarousel_types_types = require('../PromptCarousel/types/types.cjs');
@@ -19,8 +19,8 @@ let react_jsx_runtime = require("react/jsx-runtime");
 const ChatPreview = ({ baseProps, widgetContentProps, widgetStyleProps, widgetEventProps }) => {
 	const { id, testId, className, style } = baseProps ?? {};
 	const { theme = require_theme.Theme.GLOBAL_CUSTOM, variant = require_types.WidgetWrapperVariant.CARD_WITH_BORDER, hideTextField, hideLogo, hexCardColor } = widgetStyleProps ?? {};
-	const { messageText, promptButtons, textFieldPlaceholderText, logoSrc, titleLabel } = widgetContentProps ?? {};
-	const { handlePromptButtonClick, handlePromptButtonDrag, handlePromptButtonHover, handlePromptButtonMouseDown, handlePromptButtonMouseUp, handlePromptButtonTouchStart, handlePromptButtonTouchEnd, handleLinkClick, handleTextFieldClick } = widgetEventProps ?? {};
+	const { messageText, promptButtons, textFieldPlaceholderText, logoSrc, titleLabel, voiceInputEnabled } = widgetContentProps ?? {};
+	const { handlePromptButtonClick, handlePromptButtonDrag, handlePromptButtonHover, handlePromptButtonMouseDown, handlePromptButtonMouseUp, handlePromptButtonTouchStart, handlePromptButtonTouchEnd, handleLinkClick, handleTextFieldClick, onTranscriptionStarted, onTranscriptionCompleted } = widgetEventProps ?? {};
 	const suggestionTextMap = (0, react.useMemo)(() => {
 		return Object.fromEntries(promptButtons?.map((suggestion) => [suggestion.content, suggestion]) ?? []);
 	}, [promptButtons]);
@@ -50,7 +50,10 @@ const ChatPreview = ({ baseProps, widgetContentProps, widgetStyleProps, widgetEv
 	const widgetTextField = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_WidgetTextField.WidgetTextField, {
 		theme: finalTheme,
 		placeholder: textFieldPlaceholderText ?? "",
-		onClick: () => handleTextFieldClick?.()
+		onClick: () => handleTextFieldClick?.(),
+		enableVoiceInput: voiceInputEnabled,
+		onTranscriptionStarted,
+		onTranscriptionCompleted
 	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_WidgetWrapperWithTitle.WidgetWrapperWithTitle, {
 		id,