Second round of formatting

src/components/Form/DynamicForm.tsx

@@ -1,3 +1,8 @@
+import { Button } from "../UI/Button.js";
+import { DynamicFormField, FieldProps } from "./DynamicFormField.js";
+import { FieldWrapper } from "./FormWrapper.js";
+import { H4 } from "@components/UI/Typography/H4.js";
+import { Subtle } from "@components/UI/Typography/Subtle.js";
 import {
   Control,
   DeepPartial,
@@ -6,11 +11,6 @@ import {
   SubmitHandler,
   useForm,
 } from "react-hook-form";
-import { H4 } from "@components/UI/Typography/H4.js";
-import { Subtle } from "@components/UI/Typography/Subtle.js";
-import { DynamicFormField, FieldProps } from "./DynamicFormField.js";
-import { FieldWrapper } from "./FormWrapper.js";
-import { Button } from "../UI/Button.js";
 
 interface DisabledBy<T> {
   fieldName: Path<T>;
@@ -79,9 +79,9 @@ export function DynamicForm<T extends FieldValues>({
             onChange: handleSubmit(onSubmit),
           })}
     >
-      {fieldGroups.map((fieldGroup, index) => (
+      {fieldGroups.map((fieldGroup) => (
         <div
-          key={index}
+          key={fieldGroup.label}
           className="space-y-8 divide-y divide-gray-200 sm:space-y-5"
         >
           <div>
@@ -89,10 +89,10 @@ export function DynamicForm<T extends FieldValues>({
             <Subtle>{fieldGroup.description}</Subtle>
           </div>
 
-          {fieldGroup.fields.map((field, index) => (
+          {fieldGroup.fields.map((field) => (
             <FieldWrapper label={field.label} description={field.description}>
               <DynamicFormField
-                key={index}
+                key={field.label}
                 field={field}
                 control={control}
                 disabled={isDisabled(field.disabledBy)}

src/components/Form/DynamicFormField.tsx

@@ -1,7 +1,7 @@
-import type { Control, FieldValues } from "react-hook-form";
 import { GenericInput, InputFieldProps } from "./FormInput.js";
-import { ToggleFieldProps, ToggleInput } from "./FormToggle.js";
 import { SelectFieldProps, SelectInput } from "./FormSelect.js";
+import { ToggleFieldProps, ToggleInput } from "./FormToggle.js";
+import type { Control, FieldValues } from "react-hook-form";
 
 export type FieldProps<T> =
   | InputFieldProps<T>

src/components/Form/FormInput.tsx

@@ -1,9 +1,9 @@
-import type { LucideIcon } from "lucide-react";
+import { Input } from "../UI/Input.js";
 import type {
   BaseFormBuilderProps,
   GenericFormElementProps,
 } from "./DynamicForm.js";
-import { Input } from "../UI/Input.js";
+import type { LucideIcon } from "lucide-react";
 import { Controller, FieldValues } from "react-hook-form";
 
 export interface InputFieldProps<T> extends BaseFormBuilderProps<T> {

src/components/Form/FormSelect.tsx

@@ -1,8 +1,3 @@
-import type {
-  BaseFormBuilderProps,
-  GenericFormElementProps,
-} from "./DynamicForm.js";
-import { Controller, FieldValues } from "react-hook-form";
 import {
   Select,
   SelectContent,
@@ -10,6 +5,11 @@ import {
   SelectTrigger,
   SelectValue,
 } from "../UI/Select.js";
+import type {
+  BaseFormBuilderProps,
+  GenericFormElementProps,
+} from "./DynamicForm.js";
+import { Controller, FieldValues } from "react-hook-form";
 
 export interface SelectFieldProps<T> extends BaseFormBuilderProps<T> {
   type: "select" | "multiSelect";
@@ -50,8 +50,8 @@ export function SelectInput<T extends FieldValues>({
               <SelectValue />
             </SelectTrigger>
             <SelectContent>
-              {optionsEnumValues.map(([name, value], index) => (
-                <SelectItem key={index} value={value.toString()}>
+              {optionsEnumValues.map(([name, value]) => (
+                <SelectItem key={name} value={value.toString()}>
                   {formatEnumName
                     ? name
                         .replace(/_/g, " ")