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

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/FieldSectionWithActions.d.ts

@@ -4,7 +4,6 @@ import { DropState } from "./DropDispatch";
 interface FieldSectionWithActionsProps {
     field: SerializedFieldSection;
     index: number;
-    conditionalFieldCounts: (number | null)[];
     dropState: DropState;
 }
 export declare const FieldSectionWithActions: import("react").NamedExoticComponent<FieldSectionWithActionsProps>;

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/forms.js

@@ -5,15 +5,16 @@ 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 { 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";
 import set from "lodash.set";
 import cloneDeep from "lodash.clonedeep";
-import Xarrow, { useXarrow, Xwrapper } from "react-xarrows";
 class BaseFormElement {
   constructor(options) {
     __publicField(this, "type");
@@ -104,11 +105,9 @@ class BaseField extends BaseFormElement {
 }
 __publicField(BaseField, "fieldTypeName");
 __publicField(BaseField, "fieldTypeDescription");
-const description$1 = "_description_1se5r_1";
-const sectionContainer = "_sectionContainer_1se5r_5";
+const description$1 = "_description_17zed_1";
 const styles$3 = {
-  description: description$1,
-  sectionContainer
+  description: description$1
 };
 const InputWithLabel = (props) => {
   const { label, children, severity, inputId, labelId, flexProps } = props;
@@ -2070,8 +2069,12 @@ const FieldBuilder = memo(function FieldBuilder2(props) {
   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 actions = useMemo(
     () => [
       {
@@ -2097,39 +2100,53 @@ const FieldActions = memo(function FieldActions2(props) {
         Wrapper: FieldBuilder,
         wrapperProps: insertAfterProps,
         Icon: PlusIcon,
-        text: `Add ${type === "section" ? "section" : "field"}`
+        text: "Add after"
+      },
+      {
+        // 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, remove2]
   );
-  const actionDropdownMenuItems = useMemo(() => {
-    return actions.map((Action) => {
-      var _a;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Flex, { gap: "4", display: forMobile(false, "flex"), children: actions.map((Action) => {
       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__ */ jsx(Wrapper, { ...Action.wrapperProps, children: /* @__PURE__ */ jsx(IconButton, { type: "button", variant: "ghost", "aria-label": Action.text, ...Action.buttonProps, children: /* @__PURE__ */ jsx(Action.Icon, {}) }) }, 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;
+          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", children: [
+              /* @__PURE__ */ jsx(Action.Icon, {}),
+              Action.text
+            ] }) })
+          };
+        }).filter((x) => x !== null)
+      }
+    ) })
+  ] });
 });
 const formId = "form-builder";
 const FieldWithActions = memo(function FieldWithActions2(props) {
   const { field, index, sectionIndex, takenLabels, remove: remove2 } = props;
   const deserializedField = useMemo(() => deserialize(field), [field]);
   const input = useFieldInput(deserializedField, { formId, disabled: true });
-  const updateXarrow = useXarrow();
   const duplicateField = useCallback(
     (field2) => {
       if (field2.label === null) {
@@ -2170,9 +2187,6 @@ const FieldWithActions = memo(function FieldWithActions2(props) {
       ref: draggableProvided.innerRef,
       ...draggableProvided.draggableProps,
       ...draggableProvided.dragHandleProps,
-      onDrag: updateXarrow,
-      onDragEnd: updateXarrow,
-      id: `${field.identifier}-card`,
       mb: "4",
       children: /* @__PURE__ */ jsxs(Flex, { gap: "4", justify: "between", align: "center", children: [
         input,
@@ -2182,91 +2196,20 @@ const FieldWithActions = memo(function FieldWithActions2(props) {
             remove: remove2,
             editProps: editFieldProps,
             duplicateProps: duplicateFieldProps,
-            insertAfterProps
+            insertAfterProps,
+            dragHandleProps: draggableProvided.dragHandleProps
           }
         )
       ] })
     }
   ) });
 });
-const ArrowSpacingDiv = memo(function ArrowSpacingDiv2(props) {
-  const { identifier, index, conditionalFieldCounts } = props;
-  const HORIZONTAL_SPACE = 3;
-  const totalConditionals = conditionalFieldCounts.filter((count) => count !== null).length;
-  const conditionalNum = conditionalFieldCounts[index] ?? 0;
-  const marginLeft = HORIZONTAL_SPACE / totalConditionals * conditionalNum;
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      id: `${identifier}-floating-point`,
-      style: {
-        width: `${HORIZONTAL_SPACE - marginLeft}%`,
-        marginLeft: `${marginLeft}%`
-      }
-    }
-  );
-});
-const ConditionalArrow = (props) => {
-  const { identifier, condition } = props;
-  const primaryColor = "var(--gray-a4)";
-  const hoverColor = "var(--primary-color)";
-  const [color, setColor] = useState(primaryColor);
-  const [zIndex, setZIndex] = useState(0);
-  const handleMouseEnter = useCallback(() => {
-    setColor(hoverColor);
-    setZIndex(1);
-  }, [hoverColor]);
-  const handleMouseLeave = useCallback(() => {
-    setColor(primaryColor);
-    setZIndex(0);
-  }, [primaryColor]);
-  const settings = useMemo(() => {
-    return {
-      strokeWidth: 1,
-      showHead: false,
-      color,
-      zIndex,
-      arrowBodyProps: {
-        onMouseEnter: handleMouseEnter,
-        onMouseLeave: handleMouseLeave
-      }
-    };
-  }, [color, handleMouseEnter, handleMouseLeave, zIndex]);
-  if (!condition)
-    return null;
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      Xarrow,
-      {
-        start: `${identifier}-card`,
-        end: `${identifier}-floating-point`,
-        startAnchor: "right",
-        endAnchor: "left",
-        path: "straight",
-        ...settings
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      Xarrow,
-      {
-        start: `${identifier}-floating-point`,
-        end: `${condition.identifier}-card`,
-        startAnchor: "left",
-        endAnchor: "right",
-        path: "grid",
-        gridBreak: "0",
-        ...settings
-      }
-    )
-  ] });
-};
 const FieldSectionWithActions = memo(function FieldSectionWithActions2(props) {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i;
-  const { field, index: sectionIndex, dropState, conditionalFieldCounts } = props;
+  const { field, index: sectionIndex, dropState } = props;
   const isDropDisabled = (_a = dropState[field.identifier]) == null ? void 0 : _a.disabled;
   const { setFieldValue, values } = useFormikContext();
   const alertDialog = useAlertDialog();
-  const updateXarrow = useXarrow();
   const takenFieldLabels = getTakenFieldLabels(values.fields);
   const removeSectionConditions = useCallback(
     (sectionsToUpdate, allSections) => {
@@ -2416,98 +2359,66 @@ const FieldSectionWithActions = memo(function FieldSectionWithActions2(props) {
   if (valueIsFile((_d = field.condition) == null ? void 0 : _d.value))
     throw new Error("File values are not supported for conditions.");
   const conditionValue = Array.isArray((_e = field.condition) == null ? void 0 : _e.value) ? (_g = (_f = field.condition) == null ? void 0 : _f.value) == null ? void 0 : _g.map((v) => typeof v === "string" ? v : v.label).join(", ") : (_i = (_h = field.condition) == null ? void 0 : _h.value) == null ? void 0 : _i.toString();
-  return /* @__PURE__ */ jsx(Draggable, { draggableId: field.identifier, index: sectionIndex, children: (draggableProvided) => /* @__PURE__ */ jsxs(
-    Flex,
+  return /* @__PURE__ */ jsx(Draggable, { draggableId: field.identifier, index: sectionIndex, children: (draggableProvided) => /* @__PURE__ */ jsx(
+    Card,
     {
-      className: styles$3.sectionContainer,
       ref: draggableProvided.innerRef,
       ...draggableProvided.draggableProps,
-      direction: "row",
-      justify: "center",
-      align: "center",
+      ...draggableProvided.dragHandleProps,
       mb: "4",
-      children: [
-        /* @__PURE__ */ jsx(
-          Card,
-          {
-            ...draggableProvided.dragHandleProps,
-            onDrag: updateXarrow,
-            onDragEnd: updateXarrow,
-            id: `${field.identifier}-card`,
-            style: { flexGrow: "1" },
-            children: /* @__PURE__ */ jsxs(Flex, { gap: "3", justify: "between", align: "center", children: [
-              /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: "2", grow: "1", children: [
-                /* @__PURE__ */ jsxs(Flex, { direction: "column", children: [
-                  /* @__PURE__ */ jsx(Heading, { as: "h3", size: "3", children: field.label }),
-                  /* @__PURE__ */ jsx(Text, { className: styles$3.description, children: field.description })
-                ] }),
-                field.condition && /* @__PURE__ */ jsx(Text, { size: "1", children: /* @__PURE__ */ jsxs(Em, { children: [
-                  "Display only if ",
-                  /* @__PURE__ */ jsx(Strong, { children: conditionLabel }),
-                  " ",
-                  conditionComparison,
-                  " ",
-                  /* @__PURE__ */ jsx(Strong, { children: conditionValue })
-                ] }) }),
-                /* @__PURE__ */ jsx(
-                  Droppable,
+      children: /* @__PURE__ */ jsxs(Flex, { gap: "3", justify: "between", align: "center", children: [
+        /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: "2", grow: "1", children: [
+          /* @__PURE__ */ jsxs(Flex, { direction: "column", children: [
+            /* @__PURE__ */ jsx(Heading, { as: "h3", size: "3", children: field.label }),
+            /* @__PURE__ */ jsx(Text, { className: styles$3.description, children: field.description })
+          ] }),
+          field.condition && /* @__PURE__ */ jsx(Text, { size: "1", children: /* @__PURE__ */ jsxs(Em, { children: [
+            "Display only if ",
+            /* @__PURE__ */ jsx(Strong, { children: conditionLabel }),
+            " ",
+            conditionComparison,
+            " ",
+            /* @__PURE__ */ jsx(Strong, { children: conditionValue })
+          ] }) }),
+          /* @__PURE__ */ jsx(Droppable, { droppableId: field.identifier, type: "SECTION", isDropDisabled, children: (droppableProvided) => /* @__PURE__ */ jsxs(
+            Flex,
+            {
+              ref: droppableProvided.innerRef,
+              ...droppableProvided.droppableProps,
+              direction: "column",
+              gap: "0",
+              children: [
+                field.fields.map((child, i) => /* @__PURE__ */ jsx(
+                  FieldWithActions,
                   {
-                    droppableId: field.identifier,
-                    type: "SECTION",
-                    isDropDisabled,
-                    children: (droppableProvided) => /* @__PURE__ */ jsxs(
-                      Flex,
-                      {
-                        ref: droppableProvided.innerRef,
-                        ...droppableProvided.droppableProps,
-                        direction: "column",
-                        gap: "0",
-                        children: [
-                          field.fields.map((child, i) => /* @__PURE__ */ jsx(
-                            FieldWithActions,
-                            {
-                              field: child,
-                              index: i,
-                              sectionIndex,
-                              remove: () => removeField(i),
-                              takenLabels: takenFieldLabels
-                            },
-                            child.identifier
-                          )),
-                          droppableProvided.placeholder,
-                          /* @__PURE__ */ jsx(FieldBuilder, { ...insertFieldAtEndOfSection, children: /* @__PURE__ */ jsxs(Button, { type: "button", variant: "outline", children: [
-                            /* @__PURE__ */ jsx(PlusIcon, {}),
-                            " Add a field"
-                          ] }) })
-                        ]
-                      }
-                    )
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ jsx(
-                FieldActions,
-                {
-                  remove: removeSection,
-                  insertAfterProps: insertSectionProps,
-                  editProps: editSectionProps,
-                  duplicateProps: duplicateSectionProps,
-                  type: "section"
-                }
-              )
-            ] })
-          }
-        ),
-        conditionalFieldCounts.some((count) => count !== null) && /* @__PURE__ */ jsx(
-          ArrowSpacingDiv,
+                    field: child,
+                    index: i,
+                    sectionIndex,
+                    remove: () => removeField(i),
+                    takenLabels: takenFieldLabels
+                  },
+                  child.identifier
+                )),
+                droppableProvided.placeholder,
+                /* @__PURE__ */ jsx(FieldBuilder, { ...insertFieldAtEndOfSection, children: /* @__PURE__ */ jsxs(Button, { type: "button", variant: "outline", children: [
+                  /* @__PURE__ */ jsx(PlusIcon, {}),
+                  " Add a field"
+                ] }) })
+              ]
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ jsx(
+          FieldActions,
           {
-            identifier: field.identifier,
-            index: sectionIndex,
-            conditionalFieldCounts
+            remove: removeSection,
+            insertAfterProps: insertSectionProps,
+            dragHandleProps: draggableProvided.dragHandleProps,
+            editProps: editSectionProps,
+            duplicateProps: duplicateSectionProps
           }
-        ),
-        field.condition && /* @__PURE__ */ jsx(ConditionalArrow, { identifier: field.identifier, condition: field.condition })
-      ]
+        )
+      ] })
     }
   ) });
 });
@@ -2644,12 +2555,6 @@ const FieldsEditor = memo(function FieldsEditor2() {
     }),
     [values.fields]
   );
-  const conditionalFieldCounts = () => {
-    let conditionalCount = 1;
-    return values.fields.map((field) => {
-      return field.conditional ? conditionalCount++ : null;
-    });
-  };
   return /* @__PURE__ */ jsx(DragDropContext, { onDragStart: handleDragStart, onDragEnd: handleDragEnd, children: /* @__PURE__ */ jsx(Droppable, { droppableId: "droppable", type: "ROOT", children: (droppableProvided) => /* @__PURE__ */ jsxs(
     Flex,
     {
@@ -2658,19 +2563,16 @@ const FieldsEditor = memo(function FieldsEditor2() {
       direction: "column",
       gap: "0",
       children: [
-        /* @__PURE__ */ jsxs(Xwrapper, { children: [
-          values.fields.map((field, index) => /* @__PURE__ */ jsx(
-            FieldSectionWithActions,
-            {
-              field,
-              index,
-              dropState,
-              conditionalFieldCounts: conditionalFieldCounts()
-            },
-            field.label
-          )),
-          droppableProvided.placeholder
-        ] }),
+        values.fields.map((field, index) => /* @__PURE__ */ jsx(
+          FieldSectionWithActions,
+          {
+            field,
+            index,
+            dropState
+          },
+          field.label
+        )),
+        droppableProvided.placeholder,
         /* @__PURE__ */ jsx(FieldBuilder, { ...makeFieldSectionProps, children: /* @__PURE__ */ jsxs(Button, { type: "button", variant: "outline", children: [
           /* @__PURE__ */ jsx(PlusIcon, {}),
           " Add a section"