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

package/src/components/PromptCarousel/PromptCarousel.tsx

@@ -1,18 +1,14 @@
-import { useCallback } from 'react';
+import { useCallback, useRef } from 'react';
+import { useScrollContainer } from 'react-indiana-drag-scroll';
 import { Theme } from '../../../tokens/theme/theme';
 import { PromptButton, PromptButtonVariant } from '../PromptButton';
 import { useCheckIsMobile } from '../utils/useCheckIsMobile';
-import {
-  AnimationSpeed,
-  PromptCarouselProps,
-  PromptCarouselRows,
-  RepetitionNumberSuffix,
-} from './types/types';
-import { useCarouselAnimation, useCarouselButtons, useCarouselRefs } from './hooks';
-import { PromptCarouselComponents } from './components';
+import { AnimationSpeed, PromptCarouselProps, PromptCarouselRows } from './types/types';
+import { useCarouselButtons, useCoordinatedScrollAnimation, useScrollSync } from './hooks';
 import { Container } from '../Container';
 import { isAnimated, removeSpaces, shouldShowTwoRows } from './utils/functions';
 import { resolveTheme } from '../utils/resolveTheme';
+import { Stack } from '../Stack';
 
 export const PromptCarousel = ({
   id,
@@ -37,21 +33,39 @@ export const PromptCarousel = ({
   const shouldShowTwoRowsValue = shouldShowTwoRows(promptCarouselRows, isMobile);
   const finalTheme = resolveTheme(theme);
 
-  const {
-    firstRowScrollRef,
-    firstRowStackRef,
-    secondRowScrollRef,
-    blockScrollRef,
-    blockFirstRowStackRef,
-    scrollRefs,
-  } = useCarouselRefs({ shouldShowTwoRows: shouldShowTwoRowsValue });
+  const { ref: dragScrollRef1 } = useScrollContainer();
+  const { ref: dragScrollRef2 } = useScrollContainer();
+  const scrollContainerRef1 = useRef<HTMLDivElement>(null);
+  const scrollContainerRef2 = useRef<HTMLDivElement>(null);
 
-  const { isAnimationStopped, shouldUseRowScroll } = useCarouselAnimation({
-    firstRowScrollRef,
-    blockScrollRef,
-    scrollRefs,
+  const setRef1 = useCallback(
+    (el: HTMLDivElement | null) => {
+      if (typeof dragScrollRef1 === 'function') dragScrollRef1(el);
+      scrollContainerRef1.current = el;
+    },
+    [dragScrollRef1],
+  );
+
+  const setRef2 = useCallback(
+    (el: HTMLDivElement | null) => {
+      if (typeof dragScrollRef2 === 'function') dragScrollRef2(el);
+      scrollContainerRef2.current = el;
+    },
+    [dragScrollRef2],
+  );
+
+  const scrollContainerRefs = shouldShowTwoRowsValue
+    ? [scrollContainerRef1, scrollContainerRef2]
+    : [scrollContainerRef1];
+
+  useCoordinatedScrollAnimation({
+    scrollContainerRefs,
     animationSpeed,
-    isAnimated: isAnimatedValue,
+  });
+
+  useScrollSync({
+    scrollContainerRefs,
+    enabled: true,
   });
 
   const { visibleButtonsFirstRow, visibleButtonsSecondRow } = useCarouselButtons({
@@ -60,11 +74,12 @@ export const PromptCarousel = ({
   });
 
   const renderButton = useCallback(
-    (text: string, index: number, repetitionNumber: `${RepetitionNumberSuffix}` = undefined) => {
+    (text: string, index: number, duplicateIndex = 0) => {
       const textWithoutSpaces = removeSpaces(text);
-      const buttonId = repetitionNumber
-        ? `${id}-${textWithoutSpaces}${repetitionNumber}`
-        : `${id}-${textWithoutSpaces}`;
+      const buttonId =
+        duplicateIndex > 0
+          ? `${id}-${textWithoutSpaces}-duplicate-${duplicateIndex}`
+          : `${id}-${textWithoutSpaces}`;
       const buttonKey = `button-${buttonId}`;
 
       return (
@@ -75,7 +90,7 @@ export const PromptCarousel = ({
           variant={promptButtonType}
           theme={finalTheme}
           isLoading={isLoading}
-          bold={boldFirstButton && index === 0}
+          bold={boldFirstButton && index === 0 && duplicateIndex === 0}
           onClick={() => handleButtonClick?.(text)}
         />
       );
@@ -83,6 +98,14 @@ export const PromptCarousel = ({
     [id, promptButtonType, boldFirstButton, handleButtonClick, isLoading, finalTheme],
   );
 
+  const renderButtonRow = (buttons: string[], startIndex: number) => (
+    <>
+      {buttons.map((text, i) => renderButton(text, startIndex + i, 0))}
+      {isAnimatedValue && buttons.map((text, i) => renderButton(text, startIndex + i, 1))}
+      {isAnimatedValue && buttons.map((text, i) => renderButton(text, startIndex + i, 2))}
+    </>
+  );
+
   const defaultAriaLabel = ariaLabel || 'Prompt carousel with suggested actions';
 
   return (
@@ -98,30 +121,45 @@ export const PromptCarousel = ({
       aria-busy={isLoading}
       aria-live={isAnimatedValue && !isLoading ? 'polite' : undefined}
     >
-      {shouldUseRowScroll ? (
-        <PromptCarouselComponents.CarouselContentWithRowScroll
-          visibleButtonsFirstRow={visibleButtonsFirstRow}
-          visibleButtonsSecondRow={visibleButtonsSecondRow}
-          shouldShowTwoRows={shouldShowTwoRowsValue}
-          renderButton={renderButton}
-          isAnimated={isAnimatedValue}
-          isAnimationStopped={isAnimationStopped}
-          firstRowScrollRef={firstRowScrollRef}
-          firstRowStackRef={firstRowStackRef}
-          secondRowScrollRef={secondRowScrollRef}
-        />
-      ) : (
-        <PromptCarouselComponents.CarouselContentWithBlockScroll
-          visibleButtonsFirstRow={visibleButtonsFirstRow}
-          visibleButtonsSecondRow={visibleButtonsSecondRow}
-          shouldShowTwoRows={shouldShowTwoRowsValue}
-          renderButton={renderButton}
-          isAnimated={isAnimatedValue}
-          isAnimationStopped={isAnimationStopped}
-          blockScrollRef={blockScrollRef}
-          blockFirstRowStackRef={blockFirstRowStackRef}
-        />
-      )}
+      <Stack
+        direction="column"
+        className={animationSpeed === AnimationSpeed.NONE ? 'envive-tw-w-full' : ''}
+        gap="2"
+      >
+        <div
+          className="envive-tw-no-scrollbar envive-tw-relative envive-tw-w-full envive-tw-overflow-x-scroll"
+          ref={setRef1}
+          style={{ cursor: 'grab', userSelect: 'none' }}
+        >
+          <div className="envive-tw-relative envive-tw-inline-block envive-tw-whitespace-nowrap">
+            <Stack
+              direction="row"
+              gap="2"
+              className="envive-tw-pl-0 envive-tw-h-full envive-tw-items-center"
+            >
+              {renderButtonRow(visibleButtonsFirstRow, 0)}
+            </Stack>
+          </div>
+        </div>
+
+        {shouldShowTwoRowsValue && (
+          <div
+            className="envive-tw-no-scrollbar envive-tw-relative envive-tw-w-full envive-tw-overflow-x-scroll"
+            ref={setRef2}
+            style={{ cursor: 'grab', userSelect: 'none' }}
+          >
+            <div className="envive-tw-relative envive-tw-inline-block envive-tw-whitespace-nowrap">
+              <Stack
+                direction="row"
+                gap="2"
+                className="envive-tw-pl-0 envive-tw-h-full envive-tw-items-center"
+              >
+                {renderButtonRow(visibleButtonsSecondRow, visibleButtonsFirstRow.length)}
+              </Stack>
+            </div>
+          </div>
+        )}
+      </Stack>
     </Container>
   );
 };

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

@@ -1,5 +1,3 @@
-export { useHorizontalScrollAnimation } from './useHorizontalScrollAnimation';
-export { useButtonScrollPosition } from './useButtonScrollPosition';
-export { useCarouselRefs } from './useCarouselRefs';
 export { useCarouselButtons } from './useCarouselButtons';
-export { useCarouselAnimation } from './useCarouselAnimation';
+export { useCoordinatedScrollAnimation } from './useCoordinatedScrollAnimation';
+export { useScrollSync } from './useScrollSync';

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/TextField/utils/getIconColor.ts

@@ -3,7 +3,7 @@
  */
 export const getIconColor = (hasValue: boolean, disabled: boolean): string => {
   if (disabled || !hasValue) {
-    return 'var(--envive-colors-border-medium)';
+    return 'var(--envive-colors-border-light)';
   }
   return 'var(--envive-colors-text-primary)';
 };

package/src/components/TextField/utils/getSendIconElement.tsx

@@ -30,7 +30,9 @@ export const getSendIconElement = (
         <CustomIcon
           IconComponent={<SendModern />}
           fill={iconColor}
-          stroke={iconColor}
+          stroke={
+            hasValue ? 'var(--envive-colors-background-light)' : 'var(--envive-colors-border-dark)'
+          }
         />
       );
     case Theme.MINIMAL:

package/src/components/WidgetTextField/WidgetTextField.tsx

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

package/src/components/WidgetTextField/components/FakeTextInput.tsx

@@ -3,13 +3,17 @@ import { TypographyColor, TypographyVariant } from '../../Typography/types';
 
 type FakeTextInputProps = {
   placeholder: string;
+  textColor: TypographyColor;
 };
 
-export const FakeTextInput = ({ placeholder }: FakeTextInputProps) => {
+export const FakeTextInput = ({
+  placeholder,
+  textColor = TypographyColor.TEXT_SECONDARY,
+}: FakeTextInputProps) => {
   return (
     <Typography
       variant={TypographyVariant.B3_RG}
-      color={TypographyColor.TEXT_SECONDARY}
+      color={textColor}
       noWrap
     >
       {placeholder}