@overmap-ai/forms 1.0.10-conditional-arrows-2.5 → 1.0.10-conditional-arrows-2.7

package/dist/builder/FieldActions.d.ts

@@ -1,11 +1,12 @@
 /// <reference types="react" />
+import { DraggableProvidedDragHandleProps } from "@hello-pangea/dnd";
 import { FieldBuilderArgs } from "./FieldBuilder";
 interface FieldActionsProps {
     remove: () => void;
+    dragHandleProps: DraggableProvidedDragHandleProps | null | undefined;
     editProps: FieldBuilderArgs;
     insertAfterProps: FieldBuilderArgs;
     duplicateProps: FieldBuilderArgs;
-    type?: string;
 }
 export declare const FieldActions: import("react").NamedExoticComponent<FieldActionsProps>;
 export {};

package/dist/builder/FieldBuilder.d.ts

@@ -1,5 +1,5 @@
 import { NestedFieldPath } from "./typings";
-import { FC, ReactNode } from "react";
+import { FC, Dispatch, SetStateAction } from "react";
 import { FieldTypeIdentifier, ISerializedField } from "@overmap-ai/core";
 import { Form } from '../typings';
 interface FieldOptionsFormProps {
@@ -11,13 +11,14 @@ interface FieldOptionsFormProps {
     handleDirtyChange: (dirty: boolean) => void;
     handleCreateField: (form: Form) => void;
 }
-interface FieldBuilderProps extends Pick<FieldOptionsFormProps, "conditionalSourceFields"> {
+export interface FieldBuilderProps extends Pick<FieldOptionsFormProps, "conditionalSourceFields"> {
     index: number;
     parentPath: NestedFieldPath;
+    isOpen: boolean;
+    setIsOpen: Dispatch<SetStateAction<boolean>>;
     initial?: ISerializedField;
     editing?: boolean;
-    children: ReactNode;
 }
-export type FieldBuilderArgs = Omit<FieldBuilderProps, "children">;
+export type FieldBuilderArgs = Omit<FieldBuilderProps, "children" | "isOpen" | "setIsOpen">;
 export declare const FieldBuilder: FC<FieldBuilderProps>;
 export {};

package/dist/fields/BaseField/hooks.d.ts

@@ -116,7 +116,7 @@ export declare const useFormikInput: <TField extends AnyField>(props: ComponentP
     readonly accessKey?: string | undefined;
     readonly autoFocus?: boolean | undefined;
     readonly className?: string | undefined;
-    readonly contentEditable?: (boolean | "true" | "false") | "inherit" | undefined;
+    readonly contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
     readonly contextMenu?: string | undefined;
     readonly draggable?: (boolean | "true" | "false") | undefined;
     readonly hidden?: boolean | undefined;

package/dist/fields/BooleanField/BooleanField.d.ts

@@ -2,7 +2,7 @@ import { ISerializedField, SerializedBooleanField } from "@overmap-ai/core";
 import { BaseField, ChildFieldOptions } from "../BaseField";
 import { ChangeEvent, ReactNode } from "react";
 import { ComponentProps } from "../typings";
-import { CheckCircledIcon } from "@overmap-ai/blocks";
+import { CheckCircledIcon } from "@radix-ui/react-icons";
 export declare class BooleanField extends BaseField<boolean, "boolean"> {
     static readonly fieldTypeName = "Checkbox";
     static readonly fieldTypeDescription = "Perfect for both optional and required yes/no questions.";

package/dist/fields/DateField/DateField.d.ts

@@ -2,7 +2,7 @@ import { ISerializedField, SerializedDateField } from "@overmap-ai/core";
 import { BaseField, ChildFieldOptions } from "../BaseField";
 import { GetInputProps } from "../typings";
 import React from "react";
-import { CalendarIcon } from "@overmap-ai/blocks";
+import { CalendarIcon } from "@radix-ui/react-icons";
 export declare class DateField extends BaseField<string, "date"> {
     static readonly fieldTypeName = "Date";
     static readonly fieldTypeDescription = "Allows specifying a date.";

package/dist/fields/MultiStringField/MultiStringField.d.ts

@@ -2,7 +2,7 @@ import { BaseField, ChildFieldOptions } from "../BaseField";
 import { ISerializedField, SelectFieldOption, SerializedMultiStringField } from "@overmap-ai/core";
 import { GetInputProps, InputFieldLevelValidator } from "../typings.ts";
 import { ReactNode } from "react";
-import { ListBulletIcon } from "@overmap-ai/blocks";
+import { ListBulletIcon } from "@radix-ui/react-icons";
 type MultiStringFieldOptions = ChildFieldOptions<SelectFieldOption[]> & {
     minimum_length?: number;
     maximum_length?: number;

package/dist/fields/NumberField/NumberField.d.ts

@@ -3,7 +3,7 @@ import { BooleanField } from "../BooleanField";
 import { BaseField, ChildFieldOptions } from "../BaseField";
 import { GetInputProps, InputFieldLevelValidator, InputValidator } from "../typings";
 import { ChangeEvent, ReactNode } from "react";
-import { FontFamilyIcon } from "@overmap-ai/blocks";
+import { FontFamilyIcon } from "@radix-ui/react-icons";
 export type NumberFieldValue = number | "";
 export interface NumberFieldOptions extends ChildFieldOptions<NumberFieldValue> {
     maximum?: number;

package/dist/fields/SelectField/MultiSelectField.d.ts

@@ -2,7 +2,7 @@ import { ISerializedField, SelectFieldOptionValue, SerializedMultiSelectField }
 import { ReactNode } from "react";
 import { GetInputProps } from "../typings";
 import { BaseSelectField, BaseSelectFieldOptions } from "./BaseSelectField";
-import { CheckboxIcon } from "@overmap-ai/blocks";
+import { CheckboxIcon } from "@radix-ui/react-icons";
 /**
  * The options passed to the constructor of MultiSelectField.
  */

package/dist/fields/SelectField/SelectField.d.ts

@@ -2,7 +2,7 @@ import { ISerializedField, SelectFieldOptionValue, SerializedSelectField } from
 import { ReactNode } from "react";
 import { GetInputProps } from "../typings";
 import { BaseSelectField, BaseSelectFieldOptions } from "./BaseSelectField";
-import { DropdownMenuIcon } from "@overmap-ai/blocks";
+import { DropdownMenuIcon } from "@radix-ui/react-icons";
 /**
  * The options passed to the constructor of SelectField.
  */

package/dist/fields/StringOrTextFields/StringField/StringField.d.ts

@@ -2,7 +2,7 @@ import { ISerializedField, SerializedStringField, StringInputType } from "@overm
 import { StringOrTextField, StringOrTextFieldOptions } from "../StringOrTextField";
 import { GetInputProps } from "../../typings";
 import React from "react";
-import { InputIcon } from "@overmap-ai/blocks";
+import { InputIcon } from "@radix-ui/react-icons";
 interface StringFieldOptions extends Omit<StringOrTextFieldOptions, "type"> {
     inputType?: StringInputType;
 }

package/dist/fields/StringOrTextFields/TextField/TextField.d.ts

@@ -2,7 +2,7 @@ import { ISerializedField, SerializedTextField } from "@overmap-ai/core";
 import { StringOrTextField, StringOrTextFieldOptions } from "../StringOrTextField";
 import { GetInputProps } from "../../typings";
 import React from "react";
-import { RowsIcon } from "@overmap-ai/blocks";
+import { RowsIcon } from "@radix-ui/react-icons";
 export interface TextFieldOptions extends Omit<StringOrTextFieldOptions, "type"> {
 }
 export declare class TextField extends StringOrTextField<"text"> {

package/dist/fields/UploadField/UploadField.d.ts

@@ -2,7 +2,7 @@ import { ISerializedField, SerializedUploadField } from "@overmap-ai/core";
 import { BaseField, ChildFieldOptions } from "../BaseField";
 import { GetInputProps, InputFieldLevelValidator } from "../typings";
 import { ChangeEvent, ReactNode } from "react";
-import { UploadIcon } from "@overmap-ai/blocks";
+import { UploadIcon } from "@radix-ui/react-icons";
 import { NumberField } from "../NumberField";
 import { MultiSelectField } from "../SelectField";
 export interface UploadFieldOptions extends ChildFieldOptions<File[]> {

package/dist/fields/UploadField/utils.d.ts

@@ -1 +1 @@
-export declare const convertBytesToLargestUnit: (bytes: number) => string;
+export declare const convertKilobytesToLargestUnit: (kilobytes: number) => string;

package/dist/forms.js

@@ -5,9 +5,11 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { Flex, Text, useSeverityColor, Checkbox, CheckCircledIcon, TextField as TextField$1, FontFamilyIcon, CalendarIcon, InputIcon, TextArea, RowsIcon, Select, Box, IconButton, PlusIcon, Badge, Cross1Icon, ListBulletIcon, DropdownMenuIcon, MultiSelect, CheckboxIcon, Card, Heading, Button, UploadIcon, ButtonList, divButtonProps, StarFilledIcon, StarIcon, QuestionMarkCircledIcon, PersonIcon, Tooltip, Avatar, Separator, useDiscardAlertDialog, Dialog, Pencil1Icon, TrashIcon, CopyIcon, DropdownItemMenu, DotsVerticalIcon, useAlertDialog, Em, Strong, useToast, Tabs } from "@overmap-ai/blocks";
+import { Flex, Text, useSeverityColor, Checkbox, TextArea, Select, IconButton, Badge, MultiSelect, Button, ButtonList, divButtonProps, Tooltip, Separator, useDiscardAlertDialog, Dialog, DropdownItemMenu, useAlertDialog, useToast } from "@overmap-ai/blocks";
 import { useField, useFormikContext, useFormik, FormikProvider } from "formik";
-import React, { useMemo, memo, useCallback, useState, useEffect, useRef, forwardRef, useReducer } from "react";
+import React, { useMemo, memo, useCallback, useState, useEffect, useRef, forwardRef, Fragment as Fragment$1, useReducer } from "react";
+import { CheckCircledIcon, FontFamilyIcon, CalendarIcon, InputIcon, RowsIcon, PlusIcon, Cross1Icon, ListBulletIcon, DropdownMenuIcon, CheckboxIcon, UploadIcon, StarFilledIcon, StarIcon, QuestionMarkCircledIcon, PersonIcon, Pencil1Icon, TrashIcon, CopyIcon, DragHandleDots2Icon, DotsVerticalIcon } from "@radix-ui/react-icons";
+import { TextField as TextField$1, Box, Card, Heading, Avatar, Em, Strong, Tabs } from "@radix-ui/themes";
 import { DragDropContext, Droppable, Draggable } from "@hello-pangea/dnd";
 import { slugify, useAppSelector, selectFormRevision, useSDK, selectSubmissionAttachments, selectFilteredUserForms, selectUserFormMapping, selectOrganization, selectUser, selectNumberOfUserForms, selectCurrentUser, classNames, isToday, getLocalDateString, selectLatestFormRevision, useFileSrc, selectSubmissionsForForm } from "@overmap-ai/core";
 import get from "lodash.get";
@@ -1146,15 +1148,20 @@ const previewImage = "_previewImage_1ig84_1";
 const styles$2 = {
   previewImage
 };
-const convertBytesToLargestUnit = (bytes) => {
-  const units = ["byte", "kilobyte", "megabyte"];
-  let sizeInUnit = bytes;
+const convertKilobytesToLargestUnit = (kilobytes) => {
+  const units = ["kilobyte", "megabyte"];
+  let sizeInUnit = kilobytes;
   let unitIndex = 0;
   while (sizeInUnit > 1024 && unitIndex < units.length - 1) {
     sizeInUnit /= 1024;
     unitIndex++;
   }
-  const formatter = new Intl.NumberFormat([], { maximumFractionDigits: 2, style: "unit", unit: units[unitIndex] });
+  const formatter = new Intl.NumberFormat([], {
+    // 0 for kilobytes, 1 for megabytes
+    maximumFractionDigits: unitIndex,
+    style: "unit",
+    unit: units[unitIndex]
+  });
   return formatter.format(sizeInUnit);
 };
 const NumberInput = memo(function NumberInput22(props) {
@@ -1168,7 +1175,7 @@ const NumberInput = memo(function NumberInput22(props) {
     if (helpText)
       return helpText;
     if (field.maxFileSize) {
-      const size = convertBytesToLargestUnit(field.maxFileSize);
+      const size = convertKilobytesToLargestUnit(field.maxFileSize);
       return `Maximum file size: ${size}`;
     }
     return null;
@@ -1236,7 +1243,7 @@ const DisplayFile = memo(function DisplayFile2({ file, field, onRemove, disabled
     }
     if (resolvedFile) {
       name2 = resolvedFile.name;
-      size2 = convertBytesToLargestUnit(resolvedFile.size);
+      size2 = convertKilobytesToLargestUnit(resolvedFile.size);
     } else {
       name2 = "Downloading...";
       size2 = "...";
@@ -1272,7 +1279,7 @@ const DisplayFile = memo(function DisplayFile2({ file, field, onRemove, disabled
     url && /* @__PURE__ */ jsx("img", { className: styles$2.previewImage, src: url, alt: name })
   ] }) });
 });
-const largestSupportedSize = 50 * 1024 * 1024;
+const largestSupportedSize = 50 * 1024;
 const _UploadField = class _UploadField extends BaseField {
   constructor(options) {
     const { extensions, maximum_files, maximum_size, ...base } = options;
@@ -1299,11 +1306,13 @@ const _UploadField = class _UploadField extends BaseField {
         required: false,
         minimum: 1,
         maximum: 10,
-        identifier: "maximum_files"
+        identifier: "maximum_files",
+        integers: true
       }),
       new NumberField({
+        // TODO: Default value
         label: "What is the maximum size of each file?",
-        description: "Maximum file size in bytes.",
+        description: "Maximum file size in kilobytes.",
         required: false,
         identifier: "maximum_size",
         minimum: 1,
@@ -1346,7 +1355,7 @@ const _UploadField = class _UploadField extends BaseField {
     const maxFiles = this.maxFiles ?? 1;
     validators.push((value) => {
       if (value && value.some((file) => file.size > maxFileSize)) {
-        return `Files must be at most ${convertBytesToLargestUnit(maxFileSize)}.`;
+        return `Files must be at most ${convertKilobytesToLargestUnit(maxFileSize)}.`;
       }
     });
     validators.push((value) => {
@@ -1986,7 +1995,7 @@ const FieldOptionsForm = memo(function FieldOptionsForm2(props) {
   );
 });
 const FieldBuilder = memo(function FieldBuilder2(props) {
-  const { parentPath, index, children, initial, editing, conditionalSourceFields } = props;
+  const { parentPath, index, isOpen, setIsOpen, initial, editing, conditionalSourceFields } = props;
   const [fieldType, setFieldType] = useState();
   const [formIsDirty, setFormIsDirty] = useState(false);
   const type = (initial == null ? void 0 : initial.type) ?? fieldType;
@@ -2002,24 +2011,21 @@ const FieldBuilder = memo(function FieldBuilder2(props) {
     setFieldType(void 0);
     setFormIsDirty(false);
   }, []);
-  const handleCloseInterrupt = useCallback(
-    (confirmClose) => {
-      if (formIsDirty) {
-        openConfirmDiscardChangesDialog({
-          onDiscard: () => {
-            setFieldType(void 0);
-            confirmClose();
-          }
-        });
-      } else {
-        setFieldType(void 0);
-        confirmClose();
-      }
-    },
-    [formIsDirty, openConfirmDiscardChangesDialog]
-  );
+  const handleCloseDialog = useCallback(() => {
+    if (!formIsDirty) {
+      setFieldType(void 0);
+      setIsOpen(false);
+    } else {
+      openConfirmDiscardChangesDialog({
+        onDiscard: () => {
+          setFieldType(void 0);
+          setIsOpen(false);
+        }
+      });
+    }
+  }, [formIsDirty, openConfirmDiscardChangesDialog, setIsOpen]);
   const handleCreateField = useCallback(
-    (form, closeDialog) => {
+    (form) => {
       const { label } = form;
       if (!type)
         throw new Error("Field type must be selected before creating a field.");
@@ -2043,42 +2049,55 @@ const FieldBuilder = memo(function FieldBuilder2(props) {
         newFields = insert(parent, index, field);
       }
       setFieldValue(parentPath, newFields).then();
-      closeDialog({ force: true });
+      setIsOpen(false);
     },
-    [editing, type, values, parentPath, setFieldValue, index]
+    [type, values, parentPath, editing, setFieldValue, setIsOpen, index]
   );
   const handleDirtyChange = useCallback((dirty) => setFormIsDirty(dirty), []);
-  const dialogContent = useCallback(
-    (closeDialog) => {
-      if (showChooseField) {
-        return /* @__PURE__ */ jsx(ChooseFieldToAdd, { setFieldType });
+  const dialogContent = useCallback(() => {
+    if (showChooseField) {
+      return /* @__PURE__ */ jsx(ChooseFieldToAdd, { setFieldType });
+    }
+    return /* @__PURE__ */ jsx(
+      FieldOptionsForm,
+      {
+        conditionalSourceFields,
+        handleCancel,
+        handleCreateField,
+        fieldType: type,
+        defaultField: initial,
+        handleDirtyChange
       }
-      return /* @__PURE__ */ jsx(
-        FieldOptionsForm,
-        {
-          conditionalSourceFields,
-          handleCancel,
-          handleCreateField: (form) => handleCreateField(form, closeDialog),
-          fieldType: type,
-          defaultField: initial,
-          handleDirtyChange
-        }
-      );
-    },
-    [conditionalSourceFields, handleCancel, handleCreateField, handleDirtyChange, initial, showChooseField, type]
+    );
+  }, [conditionalSourceFields, handleCancel, handleCreateField, handleDirtyChange, initial, showChooseField, type]);
+  return /* @__PURE__ */ jsx(
+    Dialog,
+    {
+      title: title2,
+      description: description2,
+      content: dialogContent,
+      open: isOpen,
+      onOpenChange: handleCloseDialog
+    }
   );
-  return /* @__PURE__ */ jsx(Dialog, { onCloseInterrupt: handleCloseInterrupt, title: title2, description: description2, content: dialogContent, children });
 });
-const DefaultWrapper = ({ children }) => /* @__PURE__ */ jsx(Fragment, { children });
+const forMobile = (mobile, display) => ({
+  initial: mobile ? display : "none",
+  sm: mobile ? "none" : display
+});
 const FieldActions = memo(function FieldActions2(props) {
-  const { remove: remove2, editProps, insertAfterProps, duplicateProps, type } = props;
+  const { remove: remove2, dragHandleProps, editProps, insertAfterProps, duplicateProps } = props;
+  const [isEditDialogOpen, setIsEditDialogOpen] = useState(false);
+  const [isDuplicateDialogOpen, setIsDuplicateDialogOpen] = useState(false);
+  const [isAddDialogOpen, setIsAddDialogOpen] = useState(false);
   const actions = useMemo(
     () => [
       {
-        Wrapper: FieldBuilder,
-        wrapperProps: editProps,
+        SelectedContent: FieldBuilder,
+        selectedContentProps: { ...editProps, isOpen: isEditDialogOpen, setIsOpen: setIsEditDialogOpen },
         Icon: Pencil1Icon,
-        text: "Edit"
+        text: "Edit",
+        buttonProps: { onClick: () => setIsEditDialogOpen(true) }
       },
       {
         Icon: TrashIcon,
@@ -2088,41 +2107,75 @@ const FieldActions = memo(function FieldActions2(props) {
         text: "Delete"
       },
       {
-        Wrapper: FieldBuilder,
-        wrapperProps: duplicateProps,
+        SelectedContent: FieldBuilder,
+        selectedContentProps: {
+          ...duplicateProps,
+          isOpen: isDuplicateDialogOpen,
+          setIsOpen: setIsDuplicateDialogOpen
+        },
         Icon: CopyIcon,
-        text: "Duplicate"
+        text: "Duplicate",
+        buttonProps: { onClick: () => setIsDuplicateDialogOpen(true) }
       },
       {
-        Wrapper: FieldBuilder,
-        wrapperProps: insertAfterProps,
+        SelectedContent: FieldBuilder,
+        selectedContentProps: { ...insertAfterProps, isOpen: isAddDialogOpen, setIsOpen: setIsAddDialogOpen },
         Icon: PlusIcon,
-        text: `Add ${type === "section" ? "section" : "field"}`
+        text: "Add after",
+        buttonProps: { onClick: () => setIsAddDialogOpen(true) }
+      },
+      {
+        // Wrapping icon in a div so that the asChild turns the button into a div
+        // so that the drag handle props are not applied to the icon
+        // Note: b/c the <button> does not handle the space-press event correctly
+        Icon: (props2) => /* @__PURE__ */ jsx("div", { ...props2, children: /* @__PURE__ */ jsx(DragHandleDots2Icon, {}) }),
+        text: "Reorder",
+        disableOnMobile: true,
+        buttonProps: { ...dragHandleProps, asChild: true }
       }
     ],
-    [duplicateProps, editProps, insertAfterProps, remove2, type]
+    [
+      dragHandleProps,
+      duplicateProps,
+      editProps,
+      insertAfterProps,
+      isAddDialogOpen,
+      isDuplicateDialogOpen,
+      isEditDialogOpen,
+      remove2
+    ]
   );
-  const actionDropdownMenuItems = useMemo(() => {
-    return actions.map((Action) => {
-      var _a;
-      const Wrapper = Action.Wrapper ?? DefaultWrapper;
-      return {
-        ...Action.buttonProps,
-        onSelect: (_a = Action.buttonProps) == null ? void 0 : _a.onClick,
-        content: /* @__PURE__ */ jsx(Wrapper, { ...Action.wrapperProps, children: /* @__PURE__ */ jsxs(Flex, { gap: "2", align: "center", role: "button", children: [
-          /* @__PURE__ */ jsx(Action.Icon, {}),
-          Action.text
-        ] }) })
-      };
-    });
-  }, [actions]);
-  return /* @__PURE__ */ jsx(Box, { display: "block", children: /* @__PURE__ */ jsx(
-    DropdownItemMenu,
-    {
-      trigger: /* @__PURE__ */ jsx(IconButton, { variant: "ghost", "aria-label": "Actions menu", children: /* @__PURE__ */ jsx(DotsVerticalIcon, {}) }),
-      items: actionDropdownMenuItems
-    }
-  ) });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Flex, { gap: "4", display: forMobile(false, "flex"), children: actions.map((Action) => {
+      return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+        /* @__PURE__ */ jsx(IconButton, { type: "button", variant: "ghost", "aria-label": Action.text, ...Action.buttonProps, children: /* @__PURE__ */ jsx(Action.Icon, {}) }),
+        Action.SelectedContent && /* @__PURE__ */ jsx(Action.SelectedContent, { ...Action.selectedContentProps })
+      ] }, Action.text);
+    }) }),
+    /* @__PURE__ */ jsx(Box, { display: forMobile(true, "block"), children: /* @__PURE__ */ jsx(
+      DropdownItemMenu,
+      {
+        trigger: /* @__PURE__ */ jsx(IconButton, { variant: "ghost", "aria-label": "Actions menu", children: /* @__PURE__ */ jsx(DotsVerticalIcon, {}) }),
+        closeOnSelect: false,
+        items: actions.map((Action) => {
+          var _a;
+          if (Action.disableOnMobile)
+            return null;
+          return {
+            ...Action.buttonProps,
+            onSelect: (_a = Action.buttonProps) == null ? void 0 : _a.onClick,
+            content: /* @__PURE__ */ jsxs(Fragment$1, { children: [
+              /* @__PURE__ */ jsxs(Flex, { gap: "2", align: "center", children: [
+                /* @__PURE__ */ jsx(Action.Icon, {}),
+                Action.text
+              ] }),
+              Action.SelectedContent && /* @__PURE__ */ jsx(Action.SelectedContent, { ...Action.selectedContentProps })
+            ] }, Action.text)
+          };
+        }).filter((x) => x !== null)
+      }
+    ) })
+  ] });
 });
 const formId = "form-builder";
 const FieldWithActions = memo(function FieldWithActions2(props) {
@@ -2132,10 +2185,8 @@ const FieldWithActions = memo(function FieldWithActions2(props) {
   const updateXarrow = useXarrow();
   const duplicateField = useCallback(
     (field2) => {
-      if (field2.label === null) {
-        throw new Error(`Expected a label for field ${field2.identifier}`);
-      }
-      return { ...field2, label: incrementFieldLabel(field2.label, takenLabels), identifier: "" };
+      const fieldLabel = field2.label ?? "Untitled field";
+      return { ...field2, label: incrementFieldLabel(fieldLabel, takenLabels), identifier: "" };
     },
     [takenLabels]
   );
@@ -2182,7 +2233,8 @@ const FieldWithActions = memo(function FieldWithActions2(props) {
             remove: remove2,
             editProps: editFieldProps,
             duplicateProps: duplicateFieldProps,
-            insertAfterProps
+            insertAfterProps,
+            dragHandleProps: draggableProvided.dragHandleProps
           }
         )
       ] })
@@ -2249,12 +2301,12 @@ const ConditionalArrow = (props) => {
     /* @__PURE__ */ jsx(
       Xarrow,
       {
-        start: `${identifier}-floating-point`,
-        end: `${condition.identifier}-card`,
+        start: `${condition.identifier}-card`,
+        end: `${identifier}-floating-point`,
         startAnchor: "left",
         endAnchor: "right",
         path: "grid",
-        gridBreak: "0",
+        gridBreak: "100%",
         ...settings
       }
     )
@@ -2264,6 +2316,7 @@ const FieldSectionWithActions = memo(function FieldSectionWithActions2(props) {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i;
   const { field, index: sectionIndex, dropState, conditionalFieldCounts } = props;
   const isDropDisabled = (_a = dropState[field.identifier]) == null ? void 0 : _a.disabled;
+  const [isAddFieldDialogOpen, setIsAddFieldDialogOpen] = useState(false);
   const { setFieldValue, values } = useFormikContext();
   const alertDialog = useAlertDialog();
   const updateXarrow = useXarrow();
@@ -2353,12 +2406,10 @@ const FieldSectionWithActions = memo(function FieldSectionWithActions2(props) {
   ]);
   const duplicateSection = useCallback(
     (field2) => {
-      if (field2.label === null) {
-        throw new Error(`Expected a label for field ${field2.identifier}`);
-      }
-      const newSectionLabel = incrementFieldLabel(field2.label, takenFieldLabels);
+      const fieldLabel = field2.label ?? "Untitled section";
+      const newSectionLabel = incrementFieldLabel(fieldLabel, takenFieldLabels);
       const newFields = field2.fields.map((f) => {
-        const newLabel = incrementFieldLabel(f.label, takenFieldLabels);
+        const newLabel = incrementFieldLabel(f.label ?? "Untitled field", takenFieldLabels);
         return {
           ...f,
           label: newLabel,
@@ -2475,10 +2526,26 @@ const FieldSectionWithActions = memo(function FieldSectionWithActions2(props) {
                             child.identifier
                           )),
                           droppableProvided.placeholder,
-                          /* @__PURE__ */ jsx(FieldBuilder, { ...insertFieldAtEndOfSection, children: /* @__PURE__ */ jsxs(Button, { type: "button", variant: "outline", children: [
-                            /* @__PURE__ */ jsx(PlusIcon, {}),
-                            " Add a field"
-                          ] }) })
+                          /* @__PURE__ */ jsxs(
+                            Button,
+                            {
+                              type: "button",
+                              variant: "outline",
+                              onClick: () => setIsAddFieldDialogOpen(true),
+                              children: [
+                                /* @__PURE__ */ jsx(PlusIcon, {}),
+                                " Add a field"
+                              ]
+                            }
+                          ),
+                          /* @__PURE__ */ jsx(
+                            FieldBuilder,
+                            {
+                              ...insertFieldAtEndOfSection,
+                              isOpen: isAddFieldDialogOpen,
+                              setIsOpen: setIsAddFieldDialogOpen
+                            }
+                          )
                         ]
                       }
                     )
@@ -2492,7 +2559,7 @@ const FieldSectionWithActions = memo(function FieldSectionWithActions2(props) {
                   insertAfterProps: insertSectionProps,
                   editProps: editSectionProps,
                   duplicateProps: duplicateSectionProps,
-                  type: "section"
+                  dragHandleProps: draggableProvided.dragHandleProps
                 }
               )
             ] })
@@ -2575,6 +2642,7 @@ const findSection = (fields, sectionId) => {
 const FieldsEditor = memo(function FieldsEditor2() {
   const { values, setFieldValue } = useFormikContext();
   const [dropState, dispatch] = useReducer(reducer, values.fields, initializer);
+  const [isAddSectionDialogOpen, setIsAddSectionDialogOpen] = useState(false);
   const { showInfo } = useToast();
   useEffect(() => {
     dispatch({ type: "update", state: initializer(values.fields) });
@@ -2671,10 +2739,18 @@ const FieldsEditor = memo(function FieldsEditor2() {
           )),
           droppableProvided.placeholder
         ] }),
-        /* @__PURE__ */ jsx(FieldBuilder, { ...makeFieldSectionProps, children: /* @__PURE__ */ jsxs(Button, { type: "button", variant: "outline", children: [
+        /* @__PURE__ */ jsxs(Button, { type: "button", variant: "outline", onClick: () => setIsAddSectionDialogOpen(true), children: [
           /* @__PURE__ */ jsx(PlusIcon, {}),
           " Add a section"
-        ] }) })
+        ] }),
+        /* @__PURE__ */ jsx(
+          FieldBuilder,
+          {
+            ...makeFieldSectionProps,
+            isOpen: isAddSectionDialogOpen,
+            setIsOpen: setIsAddSectionDialogOpen
+          }
+        )
       ]
     }
   ) }) });
@@ -2706,8 +2782,7 @@ const previewSubmit = () => {
 const FormBuilder = memo(
   forwardRef((props, ref) => {
     const { onCancel, onSave, revision } = props;
-    const defaultHeading = revision ? "Edit form" : "Create a new form";
-    const { heading = defaultHeading } = props;
+    const { heading = revision ? "Edit form" : "Create a new form" } = props;
     const validate = useCallback((form) => {
       const errors = {};
       if (!form.title) {