Create Community stage implemented

app/components/controls/TextArea/TextArea.types.ts

@@ -92,7 +92,7 @@ export interface TextAreaViewProps {
   handleChange: (_e: React.ChangeEvent<HTMLTextAreaElement>) => void;
   handleFocus: (_e: React.FocusEvent<HTMLTextAreaElement>) => void;
   handleBlur: (_e: React.FocusEvent<HTMLTextAreaElement>) => void;
-  textHint?: boolean;
+  textHint?: boolean | string;
   formHeader?: boolean;
   showHelpIcon?: boolean;
   appearance?: "default" | "embedded";

app/components/controls/TextArea/TextArea.view.tsx

@@ -78,13 +78,13 @@ export const TextAreaView = forwardRef<HTMLTextAreaElement, TextAreaViewProps>(
             {...props}
           />
         </div>
-        {textHint && (
+        {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
+              {typeof textHint === "string" ? textHint : "Hint text here"}
             </p>
           </div>
-        )}
+        ) : null}
       </div>
     );
   },

app/components/controls/Upload/Upload.container.tsx

@@ -5,12 +5,20 @@ import UploadView from "./Upload.view";
 import type { UploadProps } from "./Upload.types";
 
 const UploadContainer = memo<UploadProps>(
-  ({ active = true, label, showHelpIcon = true, onClick, className = "" }) => {
+  ({
+    active = true,
+    label,
+    showHelpIcon = true,
+    hintText = "Add image from your device",
+    onClick,
+    className = "",
+  }) => {
     return (
       <UploadView
         active={active}
         label={label}
         showHelpIcon={showHelpIcon}
+        hintText={hintText}
         onClick={onClick}
         className={className}
       />

app/components/controls/Upload/Upload.types.ts

@@ -15,6 +15,11 @@ export interface UploadProps {
    * @default true
    */
   showHelpIcon?: boolean;
+  /**
+   * Copy beside the upload button (Figma Flow — Upload `20094:41524`).
+   * @default "Add image from your device"
+   */
+  hintText?: string;
   /**
    * Callback when upload button is clicked
    */
@@ -29,6 +34,7 @@ export interface UploadViewProps {
   active: boolean;
   label?: string;
   showHelpIcon: boolean;
+  hintText: string;
   onClick?: () => void;
   className: string;
 }

app/components/controls/Upload/Upload.view.tsx

@@ -8,6 +8,7 @@ function UploadView({
   active = true,
   label,
   showHelpIcon = true,
+  hintText,
   onClick,
   className = "",
 }: UploadViewProps) {
@@ -54,7 +55,7 @@ function UploadView({
         <button
           type="button"
           onClick={onClick}
-          className={`${buttonBgClass} flex gap-[var(--measures-spacing-150,6px)] items-center justify-center overflow-clip p-[var(--measures-spacing-300,12px)] rounded-[var(--measures-radius-full,9999px)] shrink-0 hover:opacity-80 transition-opacity`}
+          className={`${buttonBgClass} flex gap-[var(--measures-spacing-150,6px)] items-center justify-center overflow-clip px-[var(--space-400,16px)] py-[var(--measures-spacing-300,12px)] rounded-[var(--measures-radius-full,9999px)] shrink-0 hover:opacity-80 transition-opacity`}
           aria-label="Upload"
         >
           {/* Upload icon */}
@@ -105,9 +106,7 @@ function UploadView({
         <div
           className={`flex flex-[1_0_0] flex-col font-inter font-normal h-[32px] justify-center leading-[0] min-h-px min-w-px relative text-[length:var(--sizing-350,14px)] ${descriptionTextColor}`}
         >
-          <p className="leading-[20px] whitespace-pre-wrap">
-            Add images, PDFs, and other files to the policy
-          </p>
+          <p className="leading-[20px] whitespace-pre-wrap">{hintText}</p>
         </div>
       </div>
     </div>