From af0888798feca0f93f19b3efd58719e0f155b47a Mon Sep 17 00:00:00 2001
From: adilallo <39313955+adilallo@users.noreply.github.com>
Date: Fri, 6 Feb 2026 17:46:07 -0700
Subject: [PATCH] Update props in components pass 2

---
 .../MultiSelect/MultiSelect.container.tsx     |  7 +++-
 .../controls/MultiSelect/MultiSelect.types.ts | 13 +++++-
 .../controls/MultiSelect/MultiSelect.view.tsx |  3 +-
 .../controls/Switch/Switch.container.tsx      | 11 ++++-
 .../controls/Switch/Switch.types.ts           | 15 +++++++
 .../controls/TextArea/TextArea.container.tsx  |  6 +++
 .../controls/TextArea/TextArea.types.ts       | 18 +++++++++
 .../controls/TextArea/TextArea.view.tsx       | 40 +++++++++++++++----
 app/components/modals/Create/Create.types.ts  | 30 ++++++++++++++
 .../utility/ModalFooter/ModalFooter.types.ts  |  6 +++
 .../utility/ModalFooter/ModalFooter.view.tsx  | 10 ++++-
 11 files changed, 145 insertions(+), 14 deletions(-)

diff --git a/app/components/controls/MultiSelect/MultiSelect.container.tsx b/app/components/controls/MultiSelect/MultiSelect.container.tsx
index 7691976..40a65fb 100644
--- a/app/components/controls/MultiSelect/MultiSelect.container.tsx
+++ b/app/components/controls/MultiSelect/MultiSelect.container.tsx
@@ -14,14 +14,18 @@ const MultiSelectContainer = memo<MultiSelectProps>(
     options,
     onChipClick,
     onAddClick,
-    showAddButton = true,
+    showAddButton: showAddButtonProp,
+    addButton: addButtonProp,
     addButtonText = "Add organization type",
+    formHeader = true,
     onCustomChipConfirm,
     onCustomChipClose,
     className = "",
   }) => {
     const size = normalizeMultiSelectSize(sizeProp);
     const palette = normalizeChipPalette(paletteProp);
+    // Backward compatibility: if addButton is provided, use it; otherwise use showAddButton
+    const showAddButton = addButtonProp !== undefined ? addButtonProp : (showAddButtonProp !== undefined ? showAddButtonProp : true);
 
     return (
       <MultiSelectView
@@ -34,6 +38,7 @@ const MultiSelectContainer = memo<MultiSelectProps>(
         onAddClick={onAddClick}
         showAddButton={showAddButton}
         addButtonText={addButtonText}
+        formHeader={formHeader}
         onCustomChipConfirm={onCustomChipConfirm}
         onCustomChipClose={onCustomChipClose}
         className={className}
diff --git a/app/components/controls/MultiSelect/MultiSelect.types.ts b/app/components/controls/MultiSelect/MultiSelect.types.ts
index 634727c..4f3e0e0 100644
--- a/app/components/controls/MultiSelect/MultiSelect.types.ts
+++ b/app/components/controls/MultiSelect/MultiSelect.types.ts
@@ -40,13 +40,23 @@ export interface MultiSelectProps {
    */
   onAddClick?: () => void;
   /**
-   * Show the add button
+   * Show the add button (backward compatibility - use addButton instead)
    */
   showAddButton?: boolean;
+  /**
+   * Whether to show add button (Figma prop).
+   * @default true
+   */
+  addButton?: boolean;
   /**
    * Text for the add button
    */
   addButtonText?: string;
+  /**
+   * Whether to show form header (label and help icon) above multi-select (Figma prop).
+   * @default true
+   */
+  formHeader?: boolean;
   /**
    * Callback when a custom chip is confirmed (check button clicked)
    */
@@ -68,6 +78,7 @@ export interface MultiSelectViewProps {
   onAddClick?: () => void;
   showAddButton: boolean;
   addButtonText: string;
+  formHeader: boolean;
   onCustomChipConfirm?: (chipId: string, value: string) => void;
   onCustomChipClose?: (chipId: string) => void;
   className: string;
diff --git a/app/components/controls/MultiSelect/MultiSelect.view.tsx b/app/components/controls/MultiSelect/MultiSelect.view.tsx
index eaea8e5..fc96e24 100644
--- a/app/components/controls/MultiSelect/MultiSelect.view.tsx
+++ b/app/components/controls/MultiSelect/MultiSelect.view.tsx
@@ -15,6 +15,7 @@ function MultiSelectView({
   onAddClick,
   showAddButton,
   addButtonText,
+  formHeader = true,
   onCustomChipConfirm,
   onCustomChipClose,
   className,
@@ -32,7 +33,7 @@ function MultiSelectView({
   return (
     <div className={`flex flex-col ${isSmall ? "gap-[var(--measures-spacing-200,8px)]" : "gap-[var(--measures-spacing-300,12px)]"} items-start relative w-full ${className}`}>
       {/* Label using InputLabel component */}
-      {label && (
+      {formHeader && label && (
         <InputLabel
           label={label}
           helpIcon={showHelpIcon}
diff --git a/app/components/controls/Switch/Switch.container.tsx b/app/components/controls/Switch/Switch.container.tsx
index 6844f8e..a0ed656 100644
--- a/app/components/controls/Switch/Switch.container.tsx
+++ b/app/components/controls/Switch/Switch.container.tsx
@@ -8,16 +8,23 @@ import { normalizeState } from "../../../../lib/propNormalization";
 const SwitchContainer = memo(
   forwardRef<HTMLButtonElement, SwitchProps>((props, ref) => {
     const {
-      checked = false,
+      checked: checkedProp,
+      propSwitch: propSwitchProp,
       onChange,
       onFocus,
       onBlur,
       state: stateProp = "default",
-      label,
+      label: labelProp,
+      text: textProp,
       className = "",
       ...rest
     } = props;
     
+    // Backward compatibility: use propSwitch if provided, otherwise use checked
+    const checked = propSwitchProp !== undefined ? propSwitchProp : (checkedProp !== undefined ? checkedProp : false);
+    // Backward compatibility: use text if provided, otherwise use label
+    const label = textProp !== undefined ? textProp : labelProp;
+    
     // Normalize props to handle both PascalCase (Figma) and lowercase (codebase)
     const state = normalizeState(stateProp);
 
diff --git a/app/components/controls/Switch/Switch.types.ts b/app/components/controls/Switch/Switch.types.ts
index 2772f11..7e66bdf 100644
--- a/app/components/controls/Switch/Switch.types.ts
+++ b/app/components/controls/Switch/Switch.types.ts
@@ -4,7 +4,15 @@ export interface SwitchProps extends Omit<
   React.ButtonHTMLAttributes<HTMLButtonElement>,
   "onChange"
 > {
+  /**
+   * Whether the switch is checked (backward compatibility - use propSwitch instead).
+   */
   checked?: boolean;
+  /**
+   * Whether the switch is checked (Figma prop).
+   * @default false
+   */
+  propSwitch?: boolean;
   onChange?: (
     _e:
       | React.MouseEvent<HTMLButtonElement>
@@ -17,7 +25,14 @@ export interface SwitchProps extends Omit<
    * Figma uses PascalCase, codebase uses lowercase - both are supported.
    */
   state?: StateValue;
+  /**
+   * Label text (backward compatibility - use text instead).
+   */
   label?: string;
+  /**
+   * Label text (Figma prop).
+   */
+  text?: string;
   className?: string;
 }
 
diff --git a/app/components/controls/TextArea/TextArea.container.tsx b/app/components/controls/TextArea/TextArea.container.tsx
index 3b1c1d4..b0a7d59 100644
--- a/app/components/controls/TextArea/TextArea.container.tsx
+++ b/app/components/controls/TextArea/TextArea.container.tsx
@@ -24,6 +24,9 @@ const TextAreaContainer = forwardRef<HTMLTextAreaElement, TextAreaProps>(
       name,
       className = "",
       rows,
+      textHint = false,
+      formHeader = true,
+      showHelpIcon = false,
       ...props
     },
     ref,
@@ -174,6 +177,9 @@ const TextAreaContainer = forwardRef<HTMLTextAreaElement, TextAreaProps>(
         handleFocus={handleFocus}
         handleBlur={handleBlur}
         aria-invalid={error}
+        textHint={textHint}
+        formHeader={formHeader}
+        showHelpIcon={showHelpIcon}
         {...props}
       />
     );
diff --git a/app/components/controls/TextArea/TextArea.types.ts b/app/components/controls/TextArea/TextArea.types.ts
index 559bf0d..b482d71 100644
--- a/app/components/controls/TextArea/TextArea.types.ts
+++ b/app/components/controls/TextArea/TextArea.types.ts
@@ -32,6 +32,21 @@ export interface TextAreaProps extends Omit<
   onBlur?: (_e: React.FocusEvent<HTMLTextAreaElement>) => void;
   className?: string;
   rows?: number;
+  /**
+   * Whether to show hint text below textarea (Figma prop).
+   * @default false
+   */
+  textHint?: boolean;
+  /**
+   * Whether to show form header (label and help icon) above textarea (Figma prop).
+   * @default true
+   */
+  formHeader?: boolean;
+  /**
+   * Whether to show help icon in label.
+   * @default false
+   */
+  showHelpIcon?: boolean;
 }
 
 export interface TextAreaViewProps {
@@ -55,4 +70,7 @@ export interface TextAreaViewProps {
   handleChange: (_e: React.ChangeEvent<HTMLTextAreaElement>) => void;
   handleFocus: (_e: React.FocusEvent<HTMLTextAreaElement>) => void;
   handleBlur: (_e: React.FocusEvent<HTMLTextAreaElement>) => void;
+  textHint?: boolean;
+  formHeader?: boolean;
+  showHelpIcon?: boolean;
 }
diff --git a/app/components/controls/TextArea/TextArea.view.tsx b/app/components/controls/TextArea/TextArea.view.tsx
index 523a06e..80bdf25 100644
--- a/app/components/controls/TextArea/TextArea.view.tsx
+++ b/app/components/controls/TextArea/TextArea.view.tsx
@@ -1,4 +1,5 @@
 import { forwardRef } from "react";
+import { getAssetPath, ASSETS } from "../../../../lib/assetUtils";
 import type { TextAreaViewProps } from "./TextArea.types";
 
 export const TextAreaView = forwardRef<HTMLTextAreaElement, TextAreaViewProps>(
@@ -20,20 +21,36 @@ export const TextAreaView = forwardRef<HTMLTextAreaElement, TextAreaViewProps>(
       handleChange,
       handleFocus,
       handleBlur,
+      textHint = false,
+      formHeader = true,
+      showHelpIcon = false,
       ...props
     },
     ref,
   ) => {
     return (
       <div className={containerClasses}>
-        {label && (
-          <label
-            id={labelId}
-            htmlFor={textareaId}
-            className={`${labelClasses} font-inter font-medium text-[var(--color-content-default-secondary)]`}
-          >
-            {label}
-          </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
+                id={labelId}
+                htmlFor={textareaId}
+                className={`${labelClasses} font-inter font-medium text-[var(--color-content-default-secondary)]`}
+              >
+                {label}
+              </label>
+              {showHelpIcon && (
+                <div className="relative shrink-0 size-[12px]">
+                  <img
+                    src={getAssetPath(ASSETS.ICON_HELP)}
+                    alt="Help"
+                    className="block max-w-none size-full"
+                  />
+                </div>
+              )}
+            </div>
+          </div>
         )}
         <div className={disabled ? "opacity-40" : ""}>
           <textarea
@@ -54,6 +71,13 @@ export const TextAreaView = forwardRef<HTMLTextAreaElement, TextAreaViewProps>(
             {...props}
           />
         </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>
     );
   },
diff --git a/app/components/modals/Create/Create.types.ts b/app/components/modals/Create/Create.types.ts
index f0db0f3..481f008 100644
--- a/app/components/modals/Create/Create.types.ts
+++ b/app/components/modals/Create/Create.types.ts
@@ -17,6 +17,36 @@ export interface CreateProps {
   className?: string;
   ariaLabel?: string;
   ariaLabelledBy?: string;
+  /**
+   * Whether to enable Create block array content type (Figma prop).
+   * @default false
+   */
+  createBlockArray?: boolean;
+  /**
+   * Whether to enable Text input content type (Figma prop).
+   * @default false
+   */
+  textInput?: boolean;
+  /**
+   * Whether to enable Text area content type (Figma prop).
+   * @default false
+   */
+  textArea?: boolean;
+  /**
+   * Whether to enable Multi-select content type (Figma prop).
+   * @default false
+   */
+  multiSelect?: boolean;
+  /**
+   * Whether to enable Upload content type (Figma prop).
+   * @default false
+   */
+  upload?: boolean;
+  /**
+   * Whether to enable Proportion content type (Figma prop).
+   * @default false
+   */
+  proportion?: boolean;
 }
 
 export interface CreateViewProps {
diff --git a/app/components/utility/ModalFooter/ModalFooter.types.ts b/app/components/utility/ModalFooter/ModalFooter.types.ts
index 02b9898..9f9d305 100644
--- a/app/components/utility/ModalFooter/ModalFooter.types.ts
+++ b/app/components/utility/ModalFooter/ModalFooter.types.ts
@@ -14,6 +14,12 @@ export interface ModalFooterProps {
   nextButtonDisabled?: boolean;
   currentStep?: number;
   totalSteps?: number;
+  /**
+   * Whether to show the stepper component in the footer (Figma prop).
+   * Defaults to true if currentStep and totalSteps are provided.
+   * @default true
+   */
+  stepper?: boolean;
   footerContent?: React.ReactNode;
   className?: string;
 }
diff --git a/app/components/utility/ModalFooter/ModalFooter.view.tsx b/app/components/utility/ModalFooter/ModalFooter.view.tsx
index da0434f..8efb352 100644
--- a/app/components/utility/ModalFooter/ModalFooter.view.tsx
+++ b/app/components/utility/ModalFooter/ModalFooter.view.tsx
@@ -15,6 +15,7 @@ export function ModalFooterView({
   nextButtonDisabled = false,
   currentStep,
   totalSteps,
+  stepper: stepperProp,
   footerContent,
   className = "",
 }: ModalFooterProps) {
@@ -23,6 +24,13 @@ export function ModalFooterView({
   // Use localized defaults if text not provided
   const defaultBackText = backButtonText || t("buttons.back");
   const defaultNextText = nextButtonText || t("buttons.next");
+  
+  // Determine if stepper should be shown
+  // Defaults to true if currentStep and totalSteps are provided, unless explicitly set to false
+  const shouldShowStepper = stepperProp !== undefined 
+    ? stepperProp 
+    : (currentStep !== undefined && totalSteps !== undefined);
+
   return (
     <div
       className={`h-[64px] bg-[var(--color-surface-default-primary)] rounded-bl-[var(--radius-300,12px)] rounded-br-[var(--radius-300,12px)] shrink-0 relative ${className}`}
@@ -37,7 +45,7 @@ export function ModalFooterView({
       )}
 
       {/* Stepper (Centered) */}
-      {currentStep && totalSteps && (
+      {shouldShowStepper && currentStep && totalSteps && (
         <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
           <Stepper active={currentStep} totalSteps={totalSteps} />
         </div>