Profile page UI and functionality implemented

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

@@ -29,6 +29,7 @@ const TextInputContainer = forwardRef<HTMLInputElement, TextInputProps>(
       showHelpIcon = true,
       textHint = false,
       formHeader = true,
+      maxLength,
       ...props
     },
     ref,
@@ -242,6 +243,7 @@ const TextInputContainer = forwardRef<HTMLInputElement, TextInputProps>(
         focusRingClasses={stateStyles.focusRing}
         textHint={textHint}
         formHeader={formHeader}
+        maxLength={maxLength}
         {...props}
       />
     );

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

@@ -64,4 +64,5 @@ export interface TextInputViewProps {
   focusRingClasses?: string;
   textHint?: boolean | string;
   formHeader?: boolean;
+  maxLength?: number;
 }

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

@@ -28,6 +28,7 @@ export const TextInputView = forwardRef<HTMLInputElement, TextInputViewProps>(
       focusRingClasses = "",
       textHint = false,
       formHeader = true,
+      maxLength,
     },
     ref,
   ) => {
@@ -70,6 +71,7 @@ export const TextInputView = forwardRef<HTMLInputElement, TextInputViewProps>(
               onBlur={handleBlur}
               onMouseDown={handleMouseDown}
               disabled={disabled}
+              maxLength={maxLength}
               className={inputClasses}
               style={{ borderRadius }}
             />