Add button and custom modal flow implemented

app/components/controls/AddCustomField/AddCustomField.types.ts

@@ -1,5 +1,15 @@
+import type { IconName } from "../../asset/icon";
+
 export type AddCustomFieldType = "text" | "badges" | "upload" | "proportion";
 
+/** Icons for each addable field type (wizard + summaries). */
+export const ADD_CUSTOM_FIELD_TYPE_ICONS = {
+  text: "text_block",
+  badges: "tags",
+  upload: "image",
+  proportion: "number",
+} as const satisfies Record<AddCustomFieldType, IconName>;
+
 export interface AddCustomFieldProps {
   /** When true, show the 2×2 field-type grid; when false, show the primary CTA. */
   active: boolean;

app/components/controls/AddCustomField/AddCustomField.view.tsx

@@ -1,20 +1,14 @@
 "use client";
 
 import { memo } from "react";
-import Icon, { type IconName } from "../../asset/icon";
+import Icon from "../../asset/icon";
 import Vertical from "../../buttons/Vertical";
-import type {
-  AddCustomFieldType,
-  AddCustomFieldViewProps,
+import {
+  ADD_CUSTOM_FIELD_TYPE_ICONS,
+  type AddCustomFieldType,
+  type AddCustomFieldViewProps,
 } from "./AddCustomField.types";
 
-const FIELD_TYPE_ICONS: Record<AddCustomFieldType, IconName> = {
-  text: "text_block",
-  badges: "tags", // tag / chip list (filename: tags.svg)
-  upload: "image", // image / file upload (filename: image.svg)
-  proportion: "number", // numeric / proportion field (closest asset: number.svg)
-};
-
 function FieldTypeButton({
   type,
   label,
@@ -32,7 +26,7 @@ function FieldTypeButton({
     >
       <span className="flex h-8 w-8 shrink-0 items-center justify-center">
         <Icon
-          name={FIELD_TYPE_ICONS[type]}
+          name={ADD_CUSTOM_FIELD_TYPE_ICONS[type]}
           size={32}
           className="text-[var(--color-content-default-brand-primary,#fefcc9)]"
         />