Update props in components

app/components/controls/TextInput/TextInput.container.tsx

@@ -23,6 +23,8 @@ const TextInputContainer = forwardRef<HTMLInputElement, TextInputProps>(
       type = "text",
       className = "",
       showHelpIcon = true,
+      textHint = false,
+      formHeader = true,
       ...props
     },
     ref,
@@ -220,6 +222,8 @@ const TextInputContainer = forwardRef<HTMLInputElement, TextInputProps>(
         isFilled={isFilled}
         inputWrapperClasses={stateStyles.inputWrapper}
         focusRingClasses={stateStyles.focusRing}
+        textHint={textHint}
+        formHeader={formHeader}
         {...props}
       />
     );

app/components/controls/TextInput/TextInput.types.ts

@@ -19,6 +19,16 @@ export interface TextInputProps extends Omit<
   onBlur?: (_e: React.FocusEvent<HTMLInputElement>) => void;
   className?: string;
   showHelpIcon?: boolean;
+  /**
+   * Whether to show hint text below input (Figma prop).
+   * @default false
+   */
+  textHint?: boolean;
+  /**
+   * Whether to show form header (label and help icon) above input (Figma prop).
+   * @default true
+   */
+  formHeader?: boolean;
 }
 
 export interface TextInputViewProps {
@@ -45,4 +55,6 @@ export interface TextInputViewProps {
   isFilled?: boolean;
   inputWrapperClasses?: string;
   focusRingClasses?: string;
+  textHint?: boolean;
+  formHeader?: boolean;
 }

app/components/controls/TextInput/TextInput.view.tsx

@@ -26,12 +26,14 @@ export const TextInputView = forwardRef<HTMLInputElement, TextInputViewProps>(
       showHelpIcon = true,
       inputWrapperClasses = "relative",
       focusRingClasses = "",
+      textHint = false,
+      formHeader = true,
     },
     ref,
   ) => {
     return (
       <div className={containerClasses}>
-        {label && (
+        {formHeader && label && (
           <div className="flex flex-wrap gap-[var(--measures-spacing-200,4px_8px)] items-baseline pr-[var(--measures-spacing-100,4px)] relative shrink-0 w-full">
             <div className="flex gap-[var(--measures-spacing-050,2px)] items-center relative shrink-0">
               <label
@@ -75,6 +77,13 @@ export const TextInputView = forwardRef<HTMLInputElement, TextInputViewProps>(
             <div className={focusRingClasses} aria-hidden="true" />
           )}
         </div>
+        {textHint && (
+          <div className="flex items-start relative shrink-0 w-full">
+            <p className="flex-[1_0_0] font-inter font-normal leading-[16px] min-h-px min-w-px relative text-[color:var(--color-content-default-tertiary,#b4b4b4)] text-[length:var(--sizing-300,12px)]">
+              Hint text here
+            </p>
+          </div>
+        )}
       </div>
     );
   },