feat: Opentrons AI Client - Steps section (#16748)

# Overview

This PR adds the Steps section to the create protocol flow.


![image](https://github.com/user-attachments/assets/57c91ae7-de64-44b7-88fe-37668d326672)

## Test Plan and Hands on Testing

- On the landing page click Create a new protocol button, you will be
redirected to the new page
- fill up the required information in the Application, Instruments,
Modules and Labwares & Liquids sections and click Confirm
- You now can add individual Steps or paste from document
- The Prompt Preview component is updated with the data entered.

## Changelog

 - Add Steps section

## Review requests

- Verify new section.

## Risk assessment

- low

opentrons-ai-client/src/assets/localization/en/create_protocol.json

@@ -46,8 +46,8 @@
   "tubeRack": "Tube rack",
   "wellPlate": "Well plate",
   "no_labwares_added_yet": "No labware added yet",
-  "labwares_quantity_label": "quantity",
-  "labwares_remove_label": "remove",
+  "labwares_quantity_label": "Quantity",
+  "labwares_remove_label": "Remove",
   "labwares_save_label": "Save",
   "labwares_cancel_label": "Cancel",
   "search_for_labware_placeholder": "Search for labware...",
@@ -59,5 +59,19 @@
   "add_opentrons_liquid": "Add Liquid",
   "add_liquid_caption": "Example: \"Add 1.5mL of master mix to all the wells in the first column of the deep well plate.\"",
   "liquid": "Liquid",
-  "remove_liquid": "Remove"
+  "remove_liquid": "Remove",
+  "steps_section_title": "Steps",
+  "steps_section_textbody": "Give step-by-step instructions on how to handle liquids, with quantities in microliters (µL) and exact source and destination locations within labware. Always err on the side of providing extra information!",
+  "add_individual_step": "Add individual steps",
+  "paste_from_document": "Paste from document",
+  "paste_from_document_title": "Paste the steps from your document. Make sure your steps are clearly numbered.",
+  "paste_from_document_input_title": "Steps",
+  "paste_from_document_input_caption_1": "Example:",
+  "paste_from_document_input_caption_2": "Use right pipette to transfer 15 uL of mastermix from source well to destination well. Use the same pipette tip for all transfers.",
+  "paste_from_document_input_caption_3": "Use left pipette to transfer 10 ul of sample from the source to destination well. Mix the sample and mastermix of 25 ul total volume 9 times. Blow out to `destination well`. Use a new tip for each transfer.",
+  "add_step": "Add step",
+  "remove_step": "Remove",
+  "step": "Step",
+  "add_step_caption": "Example: \"Transfer 10 μL from each of the wells in the source labware to the same wells in the destination labware. Use a new tip for each transfer.",
+  "none": "None"
 }

opentrons-ai-client/src/atoms/ControlledTextAreaField/index.tsx

@@ -0,0 +1,39 @@
+import { Controller } from 'react-hook-form'
+import { TextAreaField } from '../TextAreaField'
+
+interface ControlledTextAreaFieldProps {
+  id?: string
+  name: string
+  rules?: any
+  title?: string
+  caption?: string
+  height?: string
+}
+
+export function ControlledTextAreaField({
+  id,
+  name,
+  rules,
+  title,
+  caption,
+  height,
+}: ControlledTextAreaFieldProps): JSX.Element {
+  return (
+    <Controller
+      name={name}
+      rules={rules}
+      render={({ field }) => (
+        <TextAreaField
+          title={title}
+          caption={caption}
+          id={id}
+          name={name}
+          onChange={field.onChange}
+          value={field.value}
+          onBlur={field.onBlur}
+          height={height}
+        />
+      )}
+    />
+  )
+}