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

package/dist/Stack/Stack.d.cts

@@ -1,10 +1,10 @@
 import { StackProps } from "./types/index.cjs";
-import * as react8 from "react";
+import * as react179 from "react";
 
 //#region src/components/Stack/Stack.d.ts
 /**
  * Stack component for laying out children in a flexible container with gap.
  */
-declare const Stack: react8.ForwardRefExoticComponent<StackProps & react8.RefAttributes<HTMLDivElement>>;
+declare const Stack: react179.ForwardRefExoticComponent<StackProps & react179.RefAttributes<HTMLDivElement>>;
 //#endregion
 export { Stack };

package/dist/Stack/Stack.d.ts

@@ -1,10 +1,10 @@
 import { StackProps } from "./types/index.js";
-import * as react5 from "react";
+import * as react8 from "react";
 
 //#region src/components/Stack/Stack.d.ts
 /**
  * Stack component for laying out children in a flexible container with gap.
  */
-declare const Stack: react5.ForwardRefExoticComponent<StackProps & react5.RefAttributes<HTMLDivElement>>;
+declare const Stack: react8.ForwardRefExoticComponent<StackProps & react8.RefAttributes<HTMLDivElement>>;
 //#endregion
 export { Stack };

package/dist/Stack/hooks/useFormatStackChildren.cjs

@@ -1,6 +1,6 @@
 const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
-let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
+let react = require("react");
 
 //#region src/components/Stack/hooks/useFormatStackChildren.tsx
 const renderDivider = (divider) => {

package/dist/Stack/hooks/useFormatStackChildren.js

@@ -1,5 +1,5 @@
-import { Children, cloneElement, isValidElement, useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
+import { Children, cloneElement, isValidElement, useMemo } from "react";
 
 //#region src/components/Stack/hooks/useFormatStackChildren.tsx
 const renderDivider = (divider) => {

package/dist/Title/components/Image.cjs

@@ -1,6 +1,6 @@
 const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
-let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
+let react = require("react");
 
 //#region src/components/Title/components/Image.tsx
 const Image = ({ logo }) => {

package/dist/Title/components/Image.js

@@ -1,5 +1,5 @@
-import { useEffect, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
 
 //#region src/components/Title/components/Image.tsx
 const Image = ({ logo }) => {

package/dist/TitledPromptCarousel/TitledPromptCarousel.d.cts

@@ -1,5 +1,5 @@
 import { TitledPromptCarouselProps } from "./types/index.cjs";
-import * as react_jsx_runtime16 from "react/jsx-runtime";
+import * as react_jsx_runtime1 from "react/jsx-runtime";
 
 //#region src/components/TitledPromptCarousel/TitledPromptCarousel.d.ts
 declare const TitledPromptCarousel: ({
@@ -15,6 +15,6 @@ declare const TitledPromptCarousel: ({
   handleButtonClick,
   promptButtonTexts,
   promptCarouselAriaLabel
-}: TitledPromptCarouselProps) => react_jsx_runtime16.JSX.Element;
+}: TitledPromptCarouselProps) => react_jsx_runtime1.JSX.Element;
 //#endregion
 export { TitledPromptCarousel };

package/dist/TitledPromptCarousel/TitledPromptCarousel.d.ts

@@ -1,5 +1,5 @@
 import { TitledPromptCarouselProps } from "./types/index.js";
-import * as react_jsx_runtime6 from "react/jsx-runtime";
+import * as react_jsx_runtime11 from "react/jsx-runtime";
 
 //#region src/components/TitledPromptCarousel/TitledPromptCarousel.d.ts
 declare const TitledPromptCarousel: ({
@@ -15,6 +15,6 @@ declare const TitledPromptCarousel: ({
   handleButtonClick,
   promptButtonTexts,
   promptCarouselAriaLabel
-}: TitledPromptCarouselProps) => react_jsx_runtime6.JSX.Element;
+}: TitledPromptCarouselProps) => react_jsx_runtime11.JSX.Element;
 //#endregion
 export { TitledPromptCarousel };

package/dist/TypingAnimation/TypingAnimation.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_AnimatedText = require('../AnimatedText/AnimatedText.cjs');
 require('../AnimatedText/index.cjs');
-const require_theme = require('../packages/components-v3/tokens/theme/theme.cjs');
 require('../Tokens/index.cjs');
 const require_Stack = require('../Stack/Stack.cjs');
 require('../Stack/index.cjs');
@@ -19,8 +19,8 @@ require('../WidgetWrapper/index.cjs');
 const require_WidgetWrapperWithTitle = require('../WidgetWrapperWithTitle/WidgetWrapperWithTitle.cjs');
 require('../WidgetWrapperWithTitle/index.cjs');
 const require_useGetTypographyVariant = require('./hooks/useGetTypographyVariant.cjs');
-let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
+let react = require("react");
 
 //#region src/components/TypingAnimation/TypingAnimation.tsx
 const TypingAnimation = ({ baseProps, widgetContentProps, widgetStyleProps, widgetEventProps }) => {

package/dist/TypingAnimation/TypingAnimation.d.ts

@@ -1,5 +1,5 @@
 import { TypingAnimationProps } from "./types/index.js";
-import * as react_jsx_runtime8 from "react/jsx-runtime";
+import * as react_jsx_runtime12 from "react/jsx-runtime";
 
 //#region src/components/TypingAnimation/TypingAnimation.d.ts
 declare const TypingAnimation: ({
@@ -7,6 +7,6 @@ declare const TypingAnimation: ({
   widgetContentProps,
   widgetStyleProps,
   widgetEventProps
-}: TypingAnimationProps) => react_jsx_runtime8.JSX.Element;
+}: TypingAnimationProps) => react_jsx_runtime12.JSX.Element;
 //#endregion
 export { TypingAnimation };

package/dist/TypingAnimation/TypingAnimation.js

@@ -1,6 +1,6 @@
+import { Theme } from "../packages/components-v3/tokens/theme/theme.js";
 import { AnimatedText } from "../AnimatedText/AnimatedText.js";
 import "../AnimatedText/index.js";
-import { Theme } from "../packages/components-v3/tokens/theme/theme.js";
 import "../Tokens/index.js";
 import { Stack } from "../Stack/Stack.js";
 import "../Stack/index.js";
@@ -18,8 +18,8 @@ import "../WidgetWrapper/index.js";
 import { WidgetWrapperWithTitle } from "../WidgetWrapperWithTitle/WidgetWrapperWithTitle.js";
 import "../WidgetWrapperWithTitle/index.js";
 import { useGetTypographyVariant } from "./hooks/useGetTypographyVariant.js";
-import { useCallback } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback } from "react";
 
 //#region src/components/TypingAnimation/TypingAnimation.tsx
 const TypingAnimation = ({ baseProps, widgetContentProps, widgetStyleProps, widgetEventProps }) => {

package/dist/Typography/Typography.d.cts

@@ -1,5 +1,5 @@
 import { TypographyProps } from "./types/index.cjs";
-import * as react5 from "react";
+import * as react173 from "react";
 
 //#region src/components/Typography/Typography.d.ts
 /**
@@ -18,13 +18,13 @@ declare const Typography: ({
   noWrap,
   as,
   "aria-label": ariaLabel
-}: TypographyProps) => react5.DetailedReactHTMLElement<{
+}: TypographyProps) => react173.DetailedReactHTMLElement<{
   'aria-label': string;
   'aria-level'?: number;
-  role?: react5.AriaRole;
+  role?: react173.AriaRole;
   title?: string;
   className: string;
-  style: react5.CSSProperties;
+  style: react173.CSSProperties;
   id: string;
   'data-testid': string;
 }, HTMLElement>;

package/dist/Typography/Typography.d.ts

@@ -1,5 +1,5 @@
 import { TypographyProps } from "./types/index.js";
-import * as react183 from "react";
+import * as react2 from "react";
 
 //#region src/components/Typography/Typography.d.ts
 /**
@@ -18,13 +18,13 @@ declare const Typography: ({
   noWrap,
   as,
   "aria-label": ariaLabel
-}: TypographyProps) => react183.DetailedReactHTMLElement<{
+}: TypographyProps) => react2.DetailedReactHTMLElement<{
   'aria-label': string;
   'aria-level'?: number;
-  role?: react183.AriaRole;
+  role?: react2.AriaRole;
   title?: string;
   className: string;
-  style: react183.CSSProperties;
+  style: react2.CSSProperties;
   id: string;
   'data-testid': string;
 }, HTMLElement>;

package/dist/WidgetTextField/WidgetTextField.cjs

@@ -1,15 +1,16 @@
 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('../Typography/types/index.cjs');
 const require_types = require('./types/types.cjs');
-const require_index = require('./components/index.cjs');
+const require_index$1 = require('./components/index.cjs');
 let react_jsx_runtime = require("react/jsx-runtime");
 
 //#region src/components/WidgetTextField/WidgetTextField.tsx
-const WidgetTextField = ({ id, testId, style, className, theme = require_theme.Theme.GLOBAL_CUSTOM, iconVariant = require_types.IconVariant.DEFAULT, placeholder, ariaLabel, disabled, isLoading, onClick }) => {
+const WidgetTextField = ({ id, testId, style, className, theme = require_theme.Theme.GLOBAL_CUSTOM, iconVariant = require_types.IconVariant.DEFAULT, textColor = require_index.TypographyColor.TEXT_SECONDARY, placeholder, ariaLabel, disabled, isLoading, onClick }) => {
 	const resolvedTheme = require_resolveTheme.resolveTheme(theme);
-	if (isLoading) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.WidgetTextFieldComponents.Skeleton, { theme: resolvedTheme });
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.WidgetTextFieldComponents.Container, {
+	if (isLoading) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index$1.WidgetTextFieldComponents.Skeleton, { theme: resolvedTheme });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index$1.WidgetTextFieldComponents.Container, {
 		onClick: disabled ? void 0 : onClick,
 		id,
 		testId,
@@ -18,11 +19,15 @@ const WidgetTextField = ({ id, testId, style, className, theme = require_theme.T
 		theme: resolvedTheme,
 		disabled,
 		ariaLabel,
-		icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.WidgetTextFieldComponents.Icon, {
+		icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index$1.WidgetTextFieldComponents.Icon, {
+			textColor,
 			variant: iconVariant,
 			theme: resolvedTheme
 		}),
-		text: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.WidgetTextFieldComponents.FakeTextInput, { placeholder })
+		text: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index$1.WidgetTextFieldComponents.FakeTextInput, {
+			placeholder,
+			textColor
+		})
 	});
 };
 

package/dist/WidgetTextField/WidgetTextField.d.cts

@@ -1,5 +1,5 @@
 import { WidgetTextFieldProps } from "./types/types.cjs";
-import * as react_jsx_runtime13 from "react/jsx-runtime";
+import * as react_jsx_runtime15 from "react/jsx-runtime";
 
 //#region src/components/WidgetTextField/WidgetTextField.d.ts
 declare const WidgetTextField: ({
@@ -9,11 +9,12 @@ declare const WidgetTextField: ({
   className,
   theme,
   iconVariant,
+  textColor,
   placeholder,
   ariaLabel,
   disabled,
   isLoading,
   onClick
-}: WidgetTextFieldProps) => react_jsx_runtime13.JSX.Element;
+}: WidgetTextFieldProps) => react_jsx_runtime15.JSX.Element;
 //#endregion
 export { WidgetTextField };

package/dist/WidgetTextField/WidgetTextField.d.ts

@@ -1,5 +1,5 @@
 import { WidgetTextFieldProps } from "./types/types.js";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as react_jsx_runtime5 from "react/jsx-runtime";
 
 //#region src/components/WidgetTextField/WidgetTextField.d.ts
 declare const WidgetTextField: ({
@@ -9,11 +9,12 @@ declare const WidgetTextField: ({
   className,
   theme,
   iconVariant,
+  textColor,
   placeholder,
   ariaLabel,
   disabled,
   isLoading,
   onClick
-}: WidgetTextFieldProps) => react_jsx_runtime0.JSX.Element;
+}: WidgetTextFieldProps) => react_jsx_runtime5.JSX.Element;
 //#endregion
 export { WidgetTextField };

package/dist/WidgetTextField/WidgetTextField.js

@@ -1,11 +1,12 @@
 import { Theme } from "../packages/components-v3/tokens/theme/theme.js";
 import { resolveTheme } from "../utils/resolveTheme.js";
+import { TypographyColor } from "../Typography/types/index.js";
 import { IconVariant } from "./types/types.js";
 import { WidgetTextFieldComponents } from "./components/index.js";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/components/WidgetTextField/WidgetTextField.tsx
-const WidgetTextField = ({ id, testId, style, className, theme = Theme.GLOBAL_CUSTOM, iconVariant = IconVariant.DEFAULT, placeholder, ariaLabel, disabled, isLoading, onClick }) => {
+const WidgetTextField = ({ id, testId, style, className, theme = Theme.GLOBAL_CUSTOM, iconVariant = IconVariant.DEFAULT, textColor = TypographyColor.TEXT_SECONDARY, placeholder, ariaLabel, disabled, isLoading, onClick }) => {
 	const resolvedTheme = resolveTheme(theme);
 	if (isLoading) return /* @__PURE__ */ jsx(WidgetTextFieldComponents.Skeleton, { theme: resolvedTheme });
 	return /* @__PURE__ */ jsx(WidgetTextFieldComponents.Container, {
@@ -18,10 +19,14 @@ const WidgetTextField = ({ id, testId, style, className, theme = Theme.GLOBAL_CU
 		disabled,
 		ariaLabel,
 		icon: /* @__PURE__ */ jsx(WidgetTextFieldComponents.Icon, {
+			textColor,
 			variant: iconVariant,
 			theme: resolvedTheme
 		}),
-		text: /* @__PURE__ */ jsx(WidgetTextFieldComponents.FakeTextInput, { placeholder })
+		text: /* @__PURE__ */ jsx(WidgetTextFieldComponents.FakeTextInput, {
+			placeholder,
+			textColor
+		})
 	});
 };
 

package/dist/WidgetTextField/components/FakeTextInput.cjs

@@ -5,10 +5,10 @@ require('../../Typography/index.cjs');
 let react_jsx_runtime = require("react/jsx-runtime");
 
 //#region src/components/WidgetTextField/components/FakeTextInput.tsx
-const FakeTextInput = ({ placeholder }) => {
+const FakeTextInput = ({ placeholder, textColor = require_index.TypographyColor.TEXT_SECONDARY }) => {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography.Typography, {
 		variant: require_index.TypographyVariant.B3_RG,
-		color: require_index.TypographyColor.TEXT_SECONDARY,
+		color: textColor,
 		noWrap: true,
 		children: placeholder
 	});

package/dist/WidgetTextField/components/FakeTextInput.js

@@ -4,10 +4,10 @@ import "../../Typography/index.js";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/components/WidgetTextField/components/FakeTextInput.tsx
-const FakeTextInput = ({ placeholder }) => {
+const FakeTextInput = ({ placeholder, textColor = TypographyColor.TEXT_SECONDARY }) => {
 	return /* @__PURE__ */ jsx(Typography, {
 		variant: TypographyVariant.B3_RG,
-		color: TypographyColor.TEXT_SECONDARY,
+		color: textColor,
 		noWrap: true,
 		children: placeholder
 	});

package/dist/WidgetTextField/components/Icon.cjs

@@ -1,6 +1,7 @@
 const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
 const require_theme = require('../../packages/components-v3/tokens/theme/theme.cjs');
 const require_CustomIcon = require('../../utils/CustomIcon.cjs');
+const require_index = require('../../Typography/types/index.cjs');
 const require_types = require('../types/types.cjs');
 let react_jsx_runtime = require("react/jsx-runtime");
 let __envive_ai_react_icons_SendStandard = require("@envive-ai/react-icons/SendStandard");
@@ -15,52 +16,52 @@ let __envive_ai_react_icons_MagnifyingThin = require("@envive-ai/react-icons/Mag
 __envive_ai_react_icons_MagnifyingThin = require_rolldown_runtime.__toESM(__envive_ai_react_icons_MagnifyingThin);
 
 //#region src/components/WidgetTextField/components/Icon.tsx
-const Icon = ({ variant, theme }) => {
+const Icon = ({ variant, theme, textColor }) => {
 	if (theme === require_theme.Theme.STANDARD) {
 		if (variant === require_types.IconVariant.DEFAULT) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_CustomIcon.CustomIcon, {
 			IconComponent: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__envive_ai_react_icons_SendStandard.default, {}),
 			className: "envive-tw-h-6 envive-tw-w-6",
-			fill: "var(--envive-colors-border-medium)"
+			fill: textColor !== require_index.TypographyColor.TEXT_SECONDARY ? `var(--envive-colors-${textColor})` : "var(--envive-colors-border-medium)"
 		});
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_CustomIcon.CustomIcon, {
 			IconComponent: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__envive_ai_react_icons_MagnifyingGlass.default, {}),
 			className: "envive-tw-h-6 envive-tw-w-6",
-			fill: "var(--envive-colors-border-medium)"
+			fill: textColor !== require_index.TypographyColor.TEXT_SECONDARY ? `var(--envive-colors-${textColor})` : "var(--envive-colors-border-medium)"
 		});
 	}
 	if (theme === require_theme.Theme.MODERN) {
 		if (variant === require_types.IconVariant.DEFAULT) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_CustomIcon.CustomIcon, {
 			IconComponent: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__envive_ai_react_icons_SendModern.default, {}),
 			className: "envive-tw-h-6 envive-tw-w-6",
-			fill: "var(--envive-colors-border-medium)"
+			fill: textColor !== require_index.TypographyColor.TEXT_SECONDARY ? `var(--envive-colors-${textColor})` : "var(--envive-colors-border-medium)"
 		});
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_CustomIcon.CustomIcon, {
 			IconComponent: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__envive_ai_react_icons_MagnifyingThin.default, {}),
 			className: "envive-tw-h-6 envive-tw-w-6",
-			stroke: "var(--envive-colors-border-medium)"
+			stroke: textColor !== require_index.TypographyColor.TEXT_SECONDARY ? `var(--envive-colors-${textColor})` : "var(--envive-colors-border-medium)"
 		});
 	}
 	if (theme === require_theme.Theme.MINIMAL) {
 		if (variant === require_types.IconVariant.DEFAULT) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_CustomIcon.CustomIcon, {
 			IconComponent: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__envive_ai_react_icons_SendMinimalist.default, {}),
 			className: "envive-tw-h-6 envive-tw-w-6",
-			stroke: "var(--envive-colors-text-secondary)"
+			stroke: textColor !== require_index.TypographyColor.TEXT_SECONDARY ? `var(--envive-colors-${textColor})` : "var(--envive-colors-text-secondary)"
 		});
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_CustomIcon.CustomIcon, {
 			IconComponent: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__envive_ai_react_icons_SendMinimalist.default, {}),
 			className: "envive-tw-h-6 envive-tw-w-6",
-			stroke: "var(--envive-colors-text-light)"
+			stroke: textColor !== require_index.TypographyColor.TEXT_SECONDARY ? `var(--envive-colors-${textColor})` : "var(--envive-colors-text-light)"
 		});
 	}
 	if (variant === require_types.IconVariant.DEFAULT) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_CustomIcon.CustomIcon, {
 		IconComponent: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__envive_ai_react_icons_SendStandard.default, {}),
 		className: "envive-tw-h-6 envive-tw-w-6",
-		fill: "var(--envive-colors-border-medium)"
+		fill: textColor !== require_index.TypographyColor.TEXT_SECONDARY ? `var(--envive-colors-${textColor})` : "var(--envive-colors-border-medium)"
 	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_CustomIcon.CustomIcon, {
 		IconComponent: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__envive_ai_react_icons_MagnifyingGlass.default, {}),
 		className: "envive-tw-h-6 envive-tw-w-6",
-		fill: "var(--envive-colors-border-medium)"
+		fill: textColor !== require_index.TypographyColor.TEXT_SECONDARY ? `var(--envive-colors-${textColor})` : "var(--envive-colors-border-medium)"
 	});
 };
 

package/dist/WidgetTextField/components/Icon.js

@@ -1,5 +1,6 @@
 import { Theme } from "../../packages/components-v3/tokens/theme/theme.js";
 import { CustomIcon } from "../../utils/CustomIcon.js";
+import { TypographyColor } from "../../Typography/types/index.js";
 import { IconVariant } from "../types/types.js";
 import { jsx } from "react/jsx-runtime";
 import SendStandard from "@envive-ai/react-icons/SendStandard";
@@ -9,52 +10,52 @@ import SvgSendStandard from "@envive-ai/react-icons/MagnifyingGlass";
 import SvgSendModern from "@envive-ai/react-icons/MagnifyingThin";
 
 //#region src/components/WidgetTextField/components/Icon.tsx
-const Icon = ({ variant, theme }) => {
+const Icon = ({ variant, theme, textColor }) => {
 	if (theme === Theme.STANDARD) {
 		if (variant === IconVariant.DEFAULT) return /* @__PURE__ */ jsx(CustomIcon, {
 			IconComponent: /* @__PURE__ */ jsx(SendStandard, {}),
 			className: "envive-tw-h-6 envive-tw-w-6",
-			fill: "var(--envive-colors-border-medium)"
+			fill: textColor !== TypographyColor.TEXT_SECONDARY ? `var(--envive-colors-${textColor})` : "var(--envive-colors-border-medium)"
 		});
 		return /* @__PURE__ */ jsx(CustomIcon, {
 			IconComponent: /* @__PURE__ */ jsx(SvgSendStandard, {}),
 			className: "envive-tw-h-6 envive-tw-w-6",
-			fill: "var(--envive-colors-border-medium)"
+			fill: textColor !== TypographyColor.TEXT_SECONDARY ? `var(--envive-colors-${textColor})` : "var(--envive-colors-border-medium)"
 		});
 	}
 	if (theme === Theme.MODERN) {
 		if (variant === IconVariant.DEFAULT) return /* @__PURE__ */ jsx(CustomIcon, {
 			IconComponent: /* @__PURE__ */ jsx(SendModern, {}),
 			className: "envive-tw-h-6 envive-tw-w-6",
-			fill: "var(--envive-colors-border-medium)"
+			fill: textColor !== TypographyColor.TEXT_SECONDARY ? `var(--envive-colors-${textColor})` : "var(--envive-colors-border-medium)"
 		});
 		return /* @__PURE__ */ jsx(CustomIcon, {
 			IconComponent: /* @__PURE__ */ jsx(SvgSendModern, {}),
 			className: "envive-tw-h-6 envive-tw-w-6",
-			stroke: "var(--envive-colors-border-medium)"
+			stroke: textColor !== TypographyColor.TEXT_SECONDARY ? `var(--envive-colors-${textColor})` : "var(--envive-colors-border-medium)"
 		});
 	}
 	if (theme === Theme.MINIMAL) {
 		if (variant === IconVariant.DEFAULT) return /* @__PURE__ */ jsx(CustomIcon, {
 			IconComponent: /* @__PURE__ */ jsx(SendMinimalist, {}),
 			className: "envive-tw-h-6 envive-tw-w-6",
-			stroke: "var(--envive-colors-text-secondary)"
+			stroke: textColor !== TypographyColor.TEXT_SECONDARY ? `var(--envive-colors-${textColor})` : "var(--envive-colors-text-secondary)"
 		});
 		return /* @__PURE__ */ jsx(CustomIcon, {
 			IconComponent: /* @__PURE__ */ jsx(SendMinimalist, {}),
 			className: "envive-tw-h-6 envive-tw-w-6",
-			stroke: "var(--envive-colors-text-light)"
+			stroke: textColor !== TypographyColor.TEXT_SECONDARY ? `var(--envive-colors-${textColor})` : "var(--envive-colors-text-light)"
 		});
 	}
 	if (variant === IconVariant.DEFAULT) return /* @__PURE__ */ jsx(CustomIcon, {
 		IconComponent: /* @__PURE__ */ jsx(SendStandard, {}),
 		className: "envive-tw-h-6 envive-tw-w-6",
-		fill: "var(--envive-colors-border-medium)"
+		fill: textColor !== TypographyColor.TEXT_SECONDARY ? `var(--envive-colors-${textColor})` : "var(--envive-colors-border-medium)"
 	});
 	return /* @__PURE__ */ jsx(CustomIcon, {
 		IconComponent: /* @__PURE__ */ jsx(SvgSendStandard, {}),
 		className: "envive-tw-h-6 envive-tw-w-6",
-		fill: "var(--envive-colors-border-medium)"
+		fill: textColor !== TypographyColor.TEXT_SECONDARY ? `var(--envive-colors-${textColor})` : "var(--envive-colors-border-medium)"
 	});
 };
 

package/dist/WidgetTextField/components/Skeleton.cjs

@@ -1,8 +1,8 @@
 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');
-let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
+let react = require("react");
 let classnames = require("classnames");
 classnames = require_rolldown_runtime.__toESM(classnames);
 

package/dist/WidgetTextField/components/Skeleton.js

@@ -1,7 +1,7 @@
 import { Theme } from "../../packages/components-v3/tokens/theme/theme.js";
 import { resolveTheme } from "../../utils/resolveTheme.js";
-import { useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
 import classNames from "classnames";
 
 //#region src/components/WidgetTextField/components/Skeleton.tsx

package/dist/WidgetTextField/types/types.d.cts

@@ -1,4 +1,5 @@
 import { Theme } from "../../tokens/theme/theme.cjs";
+import { TypographyColor } from "../../Typography/types/index.cjs";
 
 //#region src/components/WidgetTextField/types/types.d.ts
 
@@ -35,6 +36,8 @@ type WidgetTextFieldProps = {
   placeholder?: string;
   /** Accessible label for screen readers. If not provided, the placeholder will be used. */
   ariaLabel?: string;
+  /** Text color for the text field. */
+  textColor?: TypographyColor;
   /** Whether the text field is disabled. */
   disabled?: boolean;
   /**

package/dist/WidgetTextField/types/types.d.ts

@@ -1,4 +1,5 @@
 import { Theme } from "../../packages/components-v3/tokens/theme/theme.js";
+import { TypographyColor } from "../../Typography/types/index.js";
 
 //#region src/components/WidgetTextField/types/types.d.ts
 
@@ -35,6 +36,8 @@ type WidgetTextFieldProps = {
   placeholder?: string;
   /** Accessible label for screen readers. If not provided, the placeholder will be used. */
   ariaLabel?: string;
+  /** Text color for the text field. */
+  textColor?: TypographyColor;
   /** Whether the text field is disabled. */
   disabled?: boolean;
   /**

package/dist/WidgetWrapper/WidgetWrapper.d.cts

@@ -1,5 +1,5 @@
 import { WidgetWrapperProps } from "./types/types.cjs";
-import * as react_jsx_runtime12 from "react/jsx-runtime";
+import * as react_jsx_runtime14 from "react/jsx-runtime";
 
 //#region src/components/WidgetWrapper/WidgetWrapper.d.ts
 
@@ -16,6 +16,6 @@ declare const WidgetWrapper: ({
   className,
   style,
   ...containerProps
-}: WidgetWrapperProps) => react_jsx_runtime12.JSX.Element;
+}: WidgetWrapperProps) => react_jsx_runtime14.JSX.Element;
 //#endregion
 export { WidgetWrapper };

package/dist/WidgetWrapper/WidgetWrapper.d.ts

@@ -1,5 +1,5 @@
 import { WidgetWrapperProps } from "./types/types.js";
-import * as react_jsx_runtime1 from "react/jsx-runtime";
+import * as react_jsx_runtime34 from "react/jsx-runtime";
 
 //#region src/components/WidgetWrapper/WidgetWrapper.d.ts
 
@@ -16,6 +16,6 @@ declare const WidgetWrapper: ({
   className,
   style,
   ...containerProps
-}: WidgetWrapperProps) => react_jsx_runtime1.JSX.Element;
+}: WidgetWrapperProps) => react_jsx_runtime34.JSX.Element;
 //#endregion
 export { WidgetWrapper };

package/dist/WidgetWrapperWithTitle/WidgetWrapperWithTitle.d.cts

@@ -1,5 +1,5 @@
 import { WidgetWrapperWithTitleProps } from "./types/types.cjs";
-import * as react_jsx_runtime5 from "react/jsx-runtime";
+import * as react_jsx_runtime16 from "react/jsx-runtime";
 
 //#region src/components/WidgetWrapperWithTitle/WidgetWrapperWithTitle.d.ts
 declare const WidgetWrapperWithTitle: ({
@@ -14,6 +14,6 @@ declare const WidgetWrapperWithTitle: ({
   hexCardColor,
   hideLogo,
   fullIsLoading
-}: WidgetWrapperWithTitleProps) => react_jsx_runtime5.JSX.Element;
+}: WidgetWrapperWithTitleProps) => react_jsx_runtime16.JSX.Element;
 //#endregion
 export { WidgetWrapperWithTitle };

package/dist/WidgetWrapperWithTitle/WidgetWrapperWithTitle.d.ts

@@ -1,5 +1,5 @@
 import { WidgetWrapperWithTitleProps } from "./types/types.js";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as react_jsx_runtime6 from "react/jsx-runtime";
 
 //#region src/components/WidgetWrapperWithTitle/WidgetWrapperWithTitle.d.ts
 declare const WidgetWrapperWithTitle: ({
@@ -14,6 +14,6 @@ declare const WidgetWrapperWithTitle: ({
   hexCardColor,
   hideLogo,
   fullIsLoading
-}: WidgetWrapperWithTitleProps) => react_jsx_runtime0.JSX.Element;
+}: WidgetWrapperWithTitleProps) => react_jsx_runtime6.JSX.Element;
 //#endregion
 export { WidgetWrapperWithTitle };