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

package/src/components/PromptCarousel/hooks/useCoordinatedScrollAnimation.ts

@@ -0,0 +1,115 @@
+import { useEffect, useRef } from 'react';
+import { AnimationSpeed } from '../types/types';
+
+interface UseCoordinatedScrollAnimationOptions {
+  scrollContainerRefs: React.RefObject<HTMLDivElement>[];
+  animationSpeed?: `${AnimationSpeed}`;
+}
+
+export function useCoordinatedScrollAnimation({
+  scrollContainerRefs,
+  animationSpeed = AnimationSpeed.NONE,
+}: UseCoordinatedScrollAnimationOptions): void {
+  const resumeTimeoutRef = useRef<number | null>(null);
+  const scrollAnimationRefs = useRef<number[]>([]);
+  const isPausedRef = useRef(false);
+
+  let PIXELS_PER_SECOND = 0;
+  switch (animationSpeed) {
+    case AnimationSpeed.FAST:
+      PIXELS_PER_SECOND = 60;
+      break;
+    case AnimationSpeed.SLOW:
+      PIXELS_PER_SECOND = 30;
+      break;
+    default:
+      PIXELS_PER_SECOND = 0;
+  }
+  const RESUME_DELAY_MS = 1500;
+  const isAnimated = animationSpeed !== AnimationSpeed.NONE;
+
+  useEffect(() => {
+    if (!isAnimated || scrollContainerRefs.length === 0) return undefined;
+
+    const containers = scrollContainerRefs
+      .map(ref => ref.current)
+      .filter((el): el is HTMLDivElement => el !== null);
+
+    if (containers.length === 0) return undefined;
+
+    const animationStates = containers.map(() => ({
+      lastTimestamp: null as number | null,
+      accumulatedScroll: 0,
+    }));
+
+    const step = (timestamp: number) => {
+      if (!isPausedRef.current) {
+        containers.forEach((containerElement, index) => {
+          const container = containerElement;
+          if (container.scrollWidth <= container.clientWidth) return;
+
+          const stateElement = animationStates[index];
+          const state = stateElement;
+          if (state.lastTimestamp === null) state.lastTimestamp = timestamp;
+
+          const delta = timestamp - state.lastTimestamp;
+          state.lastTimestamp = timestamp;
+
+          state.accumulatedScroll += PIXELS_PER_SECOND * (delta / 1000);
+
+          const pixelsToScroll = Math.floor(state.accumulatedScroll);
+          if (pixelsToScroll > 0) {
+            container.scrollLeft += pixelsToScroll;
+            state.accumulatedScroll -= pixelsToScroll;
+
+            if (Math.ceil(container.scrollLeft) >= container.scrollWidth - container.clientWidth) {
+              container.scrollLeft = 0;
+              state.accumulatedScroll = 0;
+            }
+          }
+        });
+      }
+
+      const rafId = requestAnimationFrame(step);
+      scrollAnimationRefs.current[0] = rafId;
+    };
+
+    scrollAnimationRefs.current[0] = requestAnimationFrame(step);
+
+    const pauseAnimation = () => {
+      isPausedRef.current = true;
+      if (resumeTimeoutRef.current) {
+        clearTimeout(resumeTimeoutRef.current);
+        resumeTimeoutRef.current = null;
+      }
+    };
+
+    const scheduleResumeAnimation = () => {
+      resumeTimeoutRef.current = window.setTimeout(() => {
+        isPausedRef.current = false;
+        animationStates.forEach(stateElement => {
+          const state = stateElement;
+          state.lastTimestamp = null;
+        });
+      }, RESUME_DELAY_MS);
+    };
+
+    containers.forEach(container => {
+      container.addEventListener('mouseenter', pauseAnimation);
+      container.addEventListener('mouseleave', scheduleResumeAnimation);
+    });
+
+    return () => {
+      scrollAnimationRefs.current.forEach(rafId => {
+        if (rafId) cancelAnimationFrame(rafId);
+      });
+      containers.forEach(container => {
+        container.removeEventListener('mouseenter', pauseAnimation);
+        container.removeEventListener('mouseleave', scheduleResumeAnimation);
+      });
+      if (resumeTimeoutRef.current) {
+        clearTimeout(resumeTimeoutRef.current);
+      }
+    };
+  }, [isAnimated, PIXELS_PER_SECOND, scrollContainerRefs]);
+}

package/src/components/PromptCarousel/hooks/useHorizontalScrollAnimation.ts

@@ -1,103 +1,96 @@
 import { useEffect, useRef } from 'react';
 import { AnimationSpeed } from '../types/types';
 
-export function useHorizontalScrollAnimation(
-  scrollContainerRefs: React.RefObject<HTMLDivElement>[],
-  onStopAll: (mouseX?: number, mouseY?: number) => void,
-  animationSpeed: `${AnimationSpeed}` = 'none',
-) {
-  const animationRefs = useRef<(number | null)[]>([]);
-  const lastTimestampRefs = useRef<(number | null)[]>([]);
-  const accumulatedScrollRefs = useRef<number[]>([]);
-  const isStoppedRef = useRef(false);
-
-  useEffect(() => {
-    if (animationSpeed === AnimationSpeed.NONE) {
-      return undefined;
-    }
-
-    const containers = scrollContainerRefs
-      .map(ref => ref.current)
-      .filter((container): container is HTMLDivElement => container !== null);
-
-    if (containers.length === 0) {
-      return undefined;
-    }
-
-    animationRefs.current = containers.map(() => null);
-    lastTimestampRefs.current = containers.map(() => null);
-    accumulatedScrollRefs.current = containers.map(() => 0);
+interface UseHorizontalScrollAnimationOptions {
+  scrollContainerRef: React.RefObject<HTMLDivElement>;
+  animationSpeed?: `${AnimationSpeed}`;
+}
 
-    const PIXELS_PER_SECOND = animationSpeed === AnimationSpeed.FAST ? 60 : 30;
+export function useHorizontalScrollAnimation({
+  scrollContainerRef,
+  animationSpeed = AnimationSpeed.NONE,
+}: UseHorizontalScrollAnimationOptions): void {
+  const resumeTimeoutRef = useRef<number | null>(null);
+  const scrollAnimationRef = useRef<number | null>(null);
+
+  let PIXELS_PER_SECOND = 0;
+  switch (animationSpeed) {
+    case AnimationSpeed.FAST:
+      PIXELS_PER_SECOND = 60;
+      break;
+    case AnimationSpeed.SLOW:
+      PIXELS_PER_SECOND = 30;
+      break;
+    default:
+      PIXELS_PER_SECOND = 0;
+  }
+  const RESUME_DELAY_MS = 1500;
+  const isAnimated = animationSpeed !== AnimationSpeed.NONE;
 
-    const cancelAllAnimations = () => {
-      animationRefs.current.forEach(rafId => {
-        if (rafId !== null) {
-          cancelAnimationFrame(rafId);
-        }
-      });
-    };
+  useEffect(() => {
+    if (!isAnimated || !scrollContainerRef) return undefined;
 
-    const createAnimationLoop = (index: number) => {
-      const step = (timestamp: number) => {
-        if (isStoppedRef.current) return;
+    const container = scrollContainerRef.current;
+    if (!container) return undefined;
+    if (container.scrollWidth <= container.clientWidth) return undefined;
 
-        const container = containers[index];
-        if (!container || container.scrollWidth <= container.clientWidth) {
-          animationRefs.current[index] = requestAnimationFrame(step);
-          return;
-        }
+    let isPaused = false;
+    let lastTimestamp: number | null = null;
+    let accumulatedScroll = 0;
 
-        if (lastTimestampRefs.current[index] === null) {
-          lastTimestampRefs.current[index] = timestamp;
-        }
+    const step = (timestamp: number) => {
+      if (lastTimestamp === null) lastTimestamp = timestamp;
+      if (!isPaused) {
+        const delta = timestamp - lastTimestamp;
+        lastTimestamp = timestamp;
 
-        const delta = timestamp - lastTimestampRefs.current[index]!;
-        lastTimestampRefs.current[index] = timestamp;
-        accumulatedScrollRefs.current[index] += PIXELS_PER_SECOND * (delta / 1000);
+        accumulatedScroll += PIXELS_PER_SECOND * (delta / 1000);
 
-        const pixelsToScroll = Math.floor(accumulatedScrollRefs.current[index]);
+        const pixelsToScroll = Math.floor(accumulatedScroll);
         if (pixelsToScroll > 0) {
-          const newScrollLeft = container.scrollLeft + pixelsToScroll;
-          const maxScroll = container.scrollWidth - container.clientWidth;
+          container.scrollLeft += pixelsToScroll;
+          accumulatedScroll -= pixelsToScroll;
 
-          if (Math.ceil(newScrollLeft) >= maxScroll) {
+          if (Math.ceil(container.scrollLeft) >= container.scrollWidth - container.clientWidth) {
             container.scrollLeft = 0;
-            accumulatedScrollRefs.current[index] = 0;
-          } else {
-            container.scrollLeft = newScrollLeft;
-            accumulatedScrollRefs.current[index] -= pixelsToScroll;
+            accumulatedScroll = 0;
           }
         }
+      }
+      scrollAnimationRef.current = requestAnimationFrame(step);
+    };
 
-        if (!isStoppedRef.current) {
-          animationRefs.current[index] = requestAnimationFrame(step);
-        }
-      };
+    // Start animation
+    scrollAnimationRef.current = requestAnimationFrame(step);
 
-      return step;
+    const pauseAnimation = () => {
+      isPaused = true;
+      if (resumeTimeoutRef.current) {
+        clearTimeout(resumeTimeoutRef.current);
+        resumeTimeoutRef.current = null;
+      }
     };
 
-    containers.forEach((container, index) => {
-      animationRefs.current[index] = requestAnimationFrame(createAnimationLoop(index));
-    });
-
-    const handleMouseEnter = (event: MouseEvent) => {
-      isStoppedRef.current = true;
-      onStopAll(event.clientX, event.clientY);
-      cancelAllAnimations();
+    const scheduleResumeAnimation = () => {
+      resumeTimeoutRef.current = window.setTimeout(() => {
+        isPaused = false;
+        lastTimestamp = null;
+      }, RESUME_DELAY_MS);
     };
 
-    containers.forEach(container => {
-      container.addEventListener('mouseenter', handleMouseEnter);
-    });
+    // Attach pause/resume listeners for hover behavior
+    container.addEventListener('mouseenter', pauseAnimation);
+    container.addEventListener('mouseleave', scheduleResumeAnimation);
 
     return () => {
-      isStoppedRef.current = true;
-      cancelAllAnimations();
-      containers.forEach(container => {
-        container.removeEventListener('mouseenter', handleMouseEnter);
-      });
+      if (scrollAnimationRef.current) {
+        cancelAnimationFrame(scrollAnimationRef.current);
+      }
+      container.removeEventListener('mouseenter', pauseAnimation);
+      container.removeEventListener('mouseleave', scheduleResumeAnimation);
+      if (resumeTimeoutRef.current) {
+        clearTimeout(resumeTimeoutRef.current);
+      }
     };
-  }, [animationSpeed, scrollContainerRefs, onStopAll]);
+  }, [isAnimated, PIXELS_PER_SECOND, scrollContainerRef]);
 }

package/src/components/PromptCarousel/hooks/useScrollSync.ts

@@ -0,0 +1,83 @@
+import { useEffect, useRef } from 'react';
+
+interface UseScrollSyncOptions {
+  scrollContainerRefs: React.RefObject<HTMLDivElement>[];
+  enabled: boolean;
+}
+
+export function useScrollSync({ scrollContainerRefs, enabled }: UseScrollSyncOptions): void {
+  const isSyncingRef = useRef(false);
+  const isDraggingRef = useRef(false);
+
+  useEffect(() => {
+    if (!enabled || scrollContainerRefs.length === 0) return undefined;
+
+    const containers = scrollContainerRefs
+      .map(ref => ref.current)
+      .filter((el): el is HTMLDivElement => el !== null);
+
+    if (containers.length === 0) return undefined;
+
+    const handleScroll = (sourceContainer: HTMLDivElement) => {
+      // Only sync when user is actively dragging, not during auto-scroll animation
+      if (!isDraggingRef.current) return;
+      if (isSyncingRef.current) return;
+
+      isSyncingRef.current = true;
+      const { scrollLeft } = sourceContainer;
+
+      containers.forEach(container => {
+        if (container !== sourceContainer) {
+          const element = container;
+          element.scrollLeft = scrollLeft;
+        }
+      });
+
+      requestAnimationFrame(() => {
+        isSyncingRef.current = false;
+      });
+    };
+
+    const handleMouseDown = () => {
+      isDraggingRef.current = true;
+    };
+
+    const handleMouseUp = () => {
+      isDraggingRef.current = false;
+    };
+
+    // Prevent all trackpad and mouse wheel scrolling
+    const handleWheel = (e: WheelEvent) => {
+      e.preventDefault();
+    };
+
+    const scrollListeners = containers.map(container => {
+      const listener = () => handleScroll(container);
+      container.addEventListener('scroll', listener);
+      return { container, listener };
+    });
+
+    // Track mouse events to detect when user is dragging
+    containers.forEach(container => {
+      container.addEventListener('mousedown', handleMouseDown);
+      container.addEventListener('mouseup', handleMouseUp);
+      // Disable trackpad and mouse wheel scrolling
+      container.addEventListener('wheel', handleWheel, { passive: false });
+    });
+
+    // Also listen for mouseup on document in case user releases outside container
+    document.addEventListener('mouseup', handleMouseUp);
+
+    return () => {
+      scrollListeners.forEach(({ container, listener }) => {
+        container.removeEventListener('scroll', listener);
+      });
+      containers.forEach(container => {
+        container.removeEventListener('mousedown', handleMouseDown);
+        container.removeEventListener('mouseup', handleMouseUp);
+        container.removeEventListener('wheel', handleWheel);
+      });
+      document.removeEventListener('mouseup', handleMouseUp);
+    };
+  }, [enabled, scrollContainerRefs]);
+}

package/src/components/SocialProof/SocialProof.tsx

@@ -2,13 +2,14 @@ import { ImageGalleryLayout } from '../ImageGallery/types/types';
 import { useCheckIsMobile } from '../utils/useCheckIsMobile';
 import { SocialProofComponents } from './components';
 import { resolveTheme } from '../utils/resolveTheme';
-import { SocialProofProps } from './types/types';
+import { SocialProofProps, WidgetKind } from './types/types';
 import { Theme } from '../Tokens';
 import { WidgetWrapperVariant } from '../WidgetWrapper';
 import { PromptCarouselRows } from '../PromptCarousel';
 import { PromptButtonVariant } from '../PromptButton';
 import { WidgetWrapperWithTitle } from '../WidgetWrapperWithTitle/WidgetWrapperWithTitle';
 import { useSocialProofCount } from './hooks';
+import { IconVariant } from '../WidgetTextField/types/types';
 
 export const SocialProof = ({
   baseProps,
@@ -21,6 +22,7 @@ export const SocialProof = ({
   const {
     theme = Theme.GLOBAL_CUSTOM,
     variant = WidgetWrapperVariant.CARD_WITH_BORDER,
+    kind = WidgetKind.STATIC,
     hexCardColor,
     promptCarouselRows = PromptCarouselRows.TWO_ON_MOBILE_ONE_ON_DESKTOP,
     hideImage,
@@ -56,7 +58,17 @@ export const SocialProof = ({
 
   const { isMobile } = useCheckIsMobile('sm');
 
-  const hasDynamicLayout = dynamicLayout !== undefined;
+  const hasDynamicLayout = kind === WidgetKind.DYNAMIC || dynamicLayout !== undefined;
+
+  const hideImageGallery = hideImage || !images || images.length === 0;
+
+  const isFourGridLayout =
+    !isMobile && imageGalleryLayout === ImageGalleryLayout.FOUR_GRID && !hasDynamicLayout;
+
+  const isFourHorizontalLayout =
+    (imageGalleryLayout === ImageGalleryLayout.FOUR_HORIZONTAL ||
+      (isMobile && imageGalleryLayout === ImageGalleryLayout.FOUR_GRID)) &&
+    !hasDynamicLayout;
 
   const headline = (
     <SocialProofComponents.Headline
@@ -85,12 +97,11 @@ export const SocialProof = ({
       theme={finalTheme}
       placeholder={textFieldPlaceholderText}
       handleTextFieldClick={handleTextFieldClick}
+      iconVariant={hasDynamicLayout ? IconVariant.DEFAULT : IconVariant.SEARCH}
     />
   );
 
-  const hideImageGallery = hideImage || !images || images.length === 0;
-
-  if (!isMobile && imageGalleryLayout === ImageGalleryLayout.FOUR_GRID && !hasDynamicLayout) {
+  if (isFourGridLayout) {
     return (
       <WidgetWrapperWithTitle
         id={id}
@@ -114,11 +125,7 @@ export const SocialProof = ({
     );
   }
 
-  if (
-    (imageGalleryLayout === ImageGalleryLayout.FOUR_HORIZONTAL ||
-      (isMobile && imageGalleryLayout === ImageGalleryLayout.FOUR_GRID)) &&
-    !hasDynamicLayout
-  ) {
+  if (isFourHorizontalLayout) {
     return (
       <WidgetWrapperWithTitle
         id={id}

package/src/components/SocialProof/components/Textfield.tsx

@@ -1,17 +1,20 @@
 import { WidgetTextField } from '../../WidgetTextField';
 import { resolveTheme } from '../../utils/resolveTheme';
 import { Theme } from '../../../../tokens/theme/theme';
+import { IconVariant } from '../../WidgetTextField/types/types';
 
 export type TextfieldProps = {
   theme: Theme;
   placeholder: string;
   handleTextFieldClick: (text: string) => void;
+  iconVariant?: IconVariant;
 };
 
 export const Textfield = ({
   theme = Theme.GLOBAL_CUSTOM,
   placeholder,
   handleTextFieldClick,
+  iconVariant = IconVariant.DEFAULT,
 }: TextfieldProps) => {
   const finalTheme = resolveTheme(theme);
 
@@ -19,6 +22,7 @@ export const Textfield = ({
     <WidgetTextField
       theme={finalTheme}
       placeholder={placeholder}
+      iconVariant={iconVariant}
       onClick={() => handleTextFieldClick(placeholder)}
     />
   );

package/src/components/SocialProof/index.ts

@@ -1,4 +1,4 @@
 export { SocialProof } from './SocialProof';
 export type { SocialProofProps } from './types/types';
-export { DynamicLayout, PageVariant } from './types/types';
+export { DynamicLayout, PageVariant, WidgetKind } from './types/types';
 export { useSocialProofCount } from './hooks';

package/src/components/SocialProof/types/types.ts

@@ -15,6 +15,11 @@ export enum PageVariant {
   PageVisit = 'PageVisit',
 }
 
+export enum WidgetKind {
+  STATIC = 'static',
+  DYNAMIC = 'dynamic',
+}
+
 /**
  * Base props for the SocialProof component container.
  *
@@ -132,6 +137,13 @@ export type WidgetStyleProps = {
    */
   variant?: WidgetWrapperVariant;
 
+  /**
+   * Kind of the social proof widget.
+   *
+   * @default WidgetKind.STATIC
+   */
+  kind?: WidgetKind;
+
   /**
    * Custom hex color for the card background (e.g., "#FF5733").
    * Overrides theme colors when provided.

package/src/components/TextField/components/Input.tsx

@@ -49,7 +49,12 @@ export const Input = ({
       onFocus={onFocus}
       onBlur={onBlur}
       disabled={disabled}
-      className={classNames(inputClasses, className, disabled && 'envive-tw-cursor-not-allowed')}
+      className={classNames(
+        inputClasses,
+        'focus-visible:envive-tw-shadow-none focus-visible:envive-tw-outline-none',
+        className,
+        disabled && 'envive-tw-cursor-not-allowed',
+      )}
       style={style}
       aria-label={ariaLabel}
       aria-disabled={disabled}

package/src/components/TextField/hooks/useGetContainerProperties.ts

@@ -22,7 +22,7 @@ export const useGetContainerProperties = ({
     const containerClassesMap: Record<Theme, ContainerProperties> = {
       [Theme.STANDARD]: {
         containerLayoutClasses:
-          'envive-tw-flex envive-tw-min-w-[358px] envive-tw-h-[40px] envive-tw-py-2 envive-tw-px-4 envive-tw-justify-between envive-tw-items-center envive-tw-flex-shrink-0',
+          'envive-tw-flex envive-tw-h-[40px] envive-tw-py-2 envive-tw-px-4 envive-tw-justify-between envive-tw-items-center envive-tw-flex-shrink-0',
         containerDefaultClasses:
           'envive-tw-border envive-tw-border-solid envive-tw-bg-background-light envive-tw-rounded-global-custom',
         containerBorderClasses: 'envive-tw-border-border-light',
@@ -33,7 +33,7 @@ export const useGetContainerProperties = ({
       },
       [Theme.MODERN]: {
         containerLayoutClasses:
-          'envive-tw-flex envive-tw-min-w-[358px] envive-tw-h-[40px] envive-tw-py-2 envive-tw-pr-2 envive-tw-pl-4 envive-tw-justify-between envive-tw-items-center envive-tw-flex-shrink-0',
+          'envive-tw-flex envive-tw-h-[40px] envive-tw-py-2 envive-tw-pr-2 envive-tw-pl-4 envive-tw-justify-between envive-tw-items-center envive-tw-flex-shrink-0',
         containerDefaultClasses:
           'envive-tw-border envive-tw-border-solid envive-tw-bg-background-light envive-tw-rounded-[4px]',
         containerBorderClasses: 'envive-tw-border-border-light',
@@ -44,7 +44,7 @@ export const useGetContainerProperties = ({
       },
       [Theme.MINIMAL]: {
         containerLayoutClasses:
-          'envive-tw-flex envive-tw-min-w-[358px] envive-tw-h-[40px] envive-tw-py-2 envive-tw-pr-2 envive-tw-justify-between envive-tw-items-center envive-tw-flex-shrink-0',
+          'envive-tw-flex envive-tw-h-[40px] envive-tw-py-2 envive-tw-pr-2 envive-tw-justify-between envive-tw-items-center envive-tw-flex-shrink-0',
         containerDefaultClasses:
           'envive-tw-border-b envive-tw-border-solid envive-tw-bg-background-light',
         containerBorderClasses: 'envive-tw-border-b-border-medium',
@@ -55,7 +55,7 @@ export const useGetContainerProperties = ({
       },
       [Theme.GLOBAL_CUSTOM]: {
         containerLayoutClasses:
-          'envive-tw-flex envive-tw-min-w-[358px] envive-tw-h-[40px] envive-tw-py-2 envive-tw-px-4 envive-tw-justify-between envive-tw-items-center envive-tw-flex-shrink-0',
+          'envive-tw-flex envive-tw-h-[40px] envive-tw-py-2 envive-tw-px-4 envive-tw-justify-between envive-tw-items-center envive-tw-flex-shrink-0',
         containerDefaultClasses:
           'envive-tw-border envive-tw-border-solid envive-tw-bg-background-light envive-tw-rounded-global-custom',
         containerBorderClasses: 'envive-tw-border-border-light',

package/src/components/WelcomeMessage/hooks/useGetSparkleIconProperties.ts

@@ -1,4 +1,5 @@
 import { useMemo } from 'react';
+import { extractColorNameFromCssVar } from 'tokens/utils';
 import { SparkleIconColor } from '../types/types';
 
 export type UseGetSparkleIconPropertiesProps = {
@@ -9,7 +10,9 @@ export const useGetSparkleIconProperties = ({
   sparkleIconColor,
 }: UseGetSparkleIconPropertiesProps) => {
   const sparkleIconStyle = useMemo(() => {
-    const sparkleIconStyleMap: Record<SparkleIconColor, { fill: string; stroke: string }> = {
+    const colorName = extractColorNameFromCssVar(sparkleIconColor);
+
+    const sparkleIconStyleMap: Record<string, { fill: string; stroke: string }> = {
       [SparkleIconColor.ACCENT_PRIMARY]: {
         fill: 'var(--envive-colors-accent-primary)',
         stroke: 'var(--envive-colors-accent-primary)',
@@ -28,7 +31,7 @@ export const useGetSparkleIconProperties = ({
       },
     };
 
-    return sparkleIconStyleMap[sparkleIconColor] ?? { fill: '' };
+    return sparkleIconStyleMap[colorName] ?? { fill: '' };
   }, [sparkleIconColor]);
 
   return sparkleIconStyle;

package/src/components/WidgetTextField/WidgetTextField.tsx

@@ -1,7 +1,8 @@
 import { Theme } from '../../../tokens/theme/theme';
+import { TypographyColor } from '../Typography/types';
 import { resolveTheme } from '../utils/resolveTheme';
 import { WidgetTextFieldComponents } from './components';
-import { type WidgetTextFieldProps } from './types/types';
+import { IconVariant, type WidgetTextFieldProps } from './types/types';
 
 export const WidgetTextField = ({
   id,
@@ -9,6 +10,8 @@ export const WidgetTextField = ({
   style,
   className,
   theme = Theme.GLOBAL_CUSTOM,
+  iconVariant = IconVariant.DEFAULT,
+  textColor = TypographyColor.TEXT_SECONDARY,
   placeholder,
   ariaLabel,
   disabled,
@@ -31,8 +34,19 @@ export const WidgetTextField = ({
       theme={resolvedTheme}
       disabled={disabled}
       ariaLabel={ariaLabel}
-      icon={<WidgetTextFieldComponents.Icon theme={resolvedTheme} />}
-      text={<WidgetTextFieldComponents.FakeTextInput placeholder={placeholder} />}
+      icon={
+        <WidgetTextFieldComponents.Icon
+          textColor={textColor}
+          variant={iconVariant}
+          theme={resolvedTheme}
+        />
+      }
+      text={
+        <WidgetTextFieldComponents.FakeTextInput
+          placeholder={placeholder}
+          textColor={textColor}
+        />
+      }
     />
   );
 };