@overmap-ai/core 1.0.31-display-invited-projects.1 → 1.0.31-revamp-forms-builder.2

package/dist/overmap-core.umd.cjs

@@ -5,8 +5,8 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 (function(global2, factory) {
-  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("react"), require("react/jsx-runtime"), require("@overmap-ai/blocks"), require("dependency-graph"), require("@redux-offline/redux-offline"), require("@redux-offline/redux-offline/lib/defaults"), require("localforage"), require("redux-persist-migrate"), require("@reduxjs/toolkit"), require("superagent"), require("react-redux"), require("uuid"), require("color"), require("jwt-decode"), require("@redux-offline/redux-offline/lib/constants"), require("idb"), require("formik"), require("linkify-react"), require("@hello-pangea/dnd"), require("lodash.get"), require("lodash.set"), require("lodash.clonedeep"), require("react-dom")) : typeof define === "function" && define.amd ? define(["exports", "react", "react/jsx-runtime", "@overmap-ai/blocks", "dependency-graph", "@redux-offline/redux-offline", "@redux-offline/redux-offline/lib/defaults", "localforage", "redux-persist-migrate", "@reduxjs/toolkit", "superagent", "react-redux", "uuid", "color", "jwt-decode", "@redux-offline/redux-offline/lib/constants", "idb", "formik", "linkify-react", "@hello-pangea/dnd", "lodash.get", "lodash.set", "lodash.clonedeep", "react-dom"], factory) : (global2 = typeof globalThis !== "undefined" ? globalThis : global2 || self, factory(global2["overmap-core"] = {}, global2.React, global2.jsxRuntime, global2.blocks, global2.dependencyGraph, global2.reduxOffline, global2.offlineConfig, global2.localforage, global2.createMigration, global2.toolkit, global2.request, global2.reactRedux, global2.uuid, global2.ColorCls, global2.jwtDecode, global2.constants, global2.idb, global2.formik, global2.Linkify, global2.dnd, global2.get, global2.set, global2.cloneDeep, global2.ReactDOM));
-})(this, function(exports2, React, jsxRuntime, blocks, dependencyGraph, reduxOffline, offlineConfig, localforage, createMigration, toolkit, request, reactRedux, uuid, ColorCls, jwtDecode, constants, idb, formik, Linkify, dnd, get, set, cloneDeep, ReactDOM) {
+  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("react"), require("react/jsx-runtime"), require("@overmap-ai/blocks"), require("dependency-graph"), require("@redux-offline/redux-offline"), require("@redux-offline/redux-offline/lib/defaults"), require("localforage"), require("redux-persist-migrate"), require("@reduxjs/toolkit"), require("superagent"), require("react-redux"), require("uuid"), require("color"), require("jwt-decode"), require("@redux-offline/redux-offline/lib/constants"), require("idb"), require("formik"), require("lodash.get"), require("linkify-react"), require("@hello-pangea/dnd"), require("lodash.set"), require("lodash.clonedeep"), require("react-dom")) : typeof define === "function" && define.amd ? define(["exports", "react", "react/jsx-runtime", "@overmap-ai/blocks", "dependency-graph", "@redux-offline/redux-offline", "@redux-offline/redux-offline/lib/defaults", "localforage", "redux-persist-migrate", "@reduxjs/toolkit", "superagent", "react-redux", "uuid", "color", "jwt-decode", "@redux-offline/redux-offline/lib/constants", "idb", "formik", "lodash.get", "linkify-react", "@hello-pangea/dnd", "lodash.set", "lodash.clonedeep", "react-dom"], factory) : (global2 = typeof globalThis !== "undefined" ? globalThis : global2 || self, factory(global2["overmap-core"] = {}, global2.React, global2.jsxRuntime, global2.blocks, global2.dependencyGraph, global2.reduxOffline, global2.offlineConfig, global2.localforage, global2.createMigration, global2.toolkit, global2.request, global2.reactRedux, global2.uuid, global2.ColorCls, global2.jwtDecode, global2.constants, global2.idb, global2.formik, global2.get, global2.Linkify, global2.dnd, global2.set, global2.cloneDeep, global2.ReactDOM));
+})(this, function(exports2, React, jsxRuntime, blocks, dependencyGraph, reduxOffline, offlineConfig, localforage, createMigration, toolkit, request, reactRedux, uuid, ColorCls, jwtDecode, constants, idb, formik, get, Linkify, dnd, set, cloneDeep, ReactDOM) {
   var _a;
   "use strict";
   function _interopNamespaceDefault(e) {
@@ -372,7 +372,7 @@ var __publicField = (obj, key, value) => {
   Item.prototype.run = function() {
     this.fun.apply(null, this.array);
   };
-  var title$1 = "browser";
+  var title = "browser";
   var platform = "browser";
   var browser = true;
   var env = {};
@@ -428,7 +428,7 @@ var __publicField = (obj, key, value) => {
   }
   var browser$1 = {
     nextTick,
-    title: title$1,
+    title,
     browser,
     env,
     argv,
@@ -2685,13 +2685,6 @@ var __publicField = (obj, key, value) => {
       deleteProject: (state, action) => {
         delete state.projects[action.payload.id];
         state.recentProjectIds = state.recentProjectIds.filter((id) => id !== action.payload.id);
-      },
-      acceptProjectInvite: (state, action) => {
-        if (action.payload in state.projects) {
-          state.projects[action.payload].invited = false;
-        } else {
-          throw new Error("Accept project invite: user is not in this project");
-        }
       }
     }
   });
@@ -2701,8 +2694,7 @@ var __publicField = (obj, key, value) => {
     updateOrCreateProjects: addOrReplaceProjects,
     setActiveProjectId,
     setCreateProjectType,
-    deleteProject,
-    acceptProjectInvite
+    deleteProject
   } = projectSlice.actions;
   const selectProjects = (state) => state.projectReducer.projects;
   const selectActiveProjectId = (state) => state.projectReducer.activeProjectId;
@@ -2726,10 +2718,6 @@ var __publicField = (obj, key, value) => {
     [selectProjectUsersIds, selectUsersAsMapping],
     (projectUserIds, users) => projectUserIds.reduce((accum, userId) => ({ ...accum, [userId]: users[userId] }), {})
   );
-  const selectProjectsWithAccess = toolkit.createSelector(
-    [selectProjects],
-    (projects) => Object.values(projects).filter((project) => !project.invited)
-  );
   const selectSortedProjectUsers = toolkit.createSelector(
     [selectCurrentUser, selectProjectUsersAsMapping, selectProjectAccessUserMapping],
     (currentUser, userMapping, projectAccessMapping) => {
@@ -4380,7 +4368,7 @@ var __publicField = (obj, key, value) => {
       });
       return promise;
     }
-    async refreshStore(replace2) {
+    async refreshStore(replace) {
       const { store } = this.client;
       const result = await this.enqueueRequest({
         description: "Get components",
@@ -4389,7 +4377,7 @@ var __publicField = (obj, key, value) => {
         blockers: [],
         blocks: []
       });
-      if (replace2) {
+      if (replace) {
         store.dispatch(setComponents(result));
       } else {
         store.dispatch(addComponentsInBatches(result));
@@ -4864,16 +4852,14 @@ var __publicField = (obj, key, value) => {
     //  Don't accept updateStore in ComponentService.list. Just return the offline objects and promise. Here, if
     //  overwrite, use setComponents. Otherwise, use bulkAddComponents.
     async _processInitialData(data, overwrite) {
-      var _a2, _b, _c;
+      var _a2, _b;
       const workspaces = {};
       const projects = [];
       const categories = [];
       const projectsData = data.projects;
       const { store } = this.client;
-      const oldProjectId = (_a2 = projectsData.find(
-        (projectData) => projectData.id === store.getState().projectReducer.activeProjectId && !projectData.invited
-      )) == null ? void 0 : _a2.id;
-      let currentProjectId = oldProjectId ?? ((_b = projectsData.find((projectData) => !projectData.invited)) == null ? void 0 : _b.id);
+      const oldProjectId = store.getState().projectReducer.activeProjectId;
+      let currentProjectId = oldProjectId ?? ((_a2 = projectsData[0]) == null ? void 0 : _a2.id);
       store.dispatch(setActiveProjectId(currentProjectId ?? null));
       let isProjectIdValid = false;
       for (const projectData of projectsData) {
@@ -4882,10 +4868,9 @@ var __publicField = (obj, key, value) => {
           name: projectData.name,
           owner_organization: projectData.organization_owner,
           owner_user: projectData.user_owner,
-          bounds: projectData.bounds,
-          invited: projectData.invited || false
+          bounds: projectData.bounds
         });
-        if (currentProjectId === projectData.id && !projectData.invited) {
+        if (currentProjectId === projectData.id) {
           isProjectIdValid = true;
           for (const workspaceData of projectData.workspaces) {
             const workspace = { ...workspaceData, project: projectData.id };
@@ -4902,7 +4887,6 @@ var __publicField = (obj, key, value) => {
       store.dispatch(setCurrentUser(data.user));
       const organizationsData = data.organizations;
       store.dispatch(setOrganizations(organizationsData));
-      const validProjects = projects.filter((project) => !project.invited);
       const firstOrg = organizationsData[0];
       const currProjObj = projects.find((project) => project.id === currentProjectId);
       const isOrgProject = !!(currProjObj == null ? void 0 : currProjObj.owner_organization);
@@ -4922,21 +4906,19 @@ var __publicField = (obj, key, value) => {
         store.dispatch(addUsers(orgUsersResult));
       }
       if (!isProjectIdValid) {
-        if (validProjects.length !== 0) {
-          currentProjectId = validProjects[0].id;
+        if (projects.length !== 0) {
+          currentProjectId = projects[0].id;
           store.dispatch(setActiveProjectId(currentProjectId));
-          const projectData = projectsData.find((projectData2) => projectData2.id === currentProjectId);
-          if (projectData) {
-            for (const workspaceData of projectData.workspaces) {
-              const workspace = { ...workspaceData, project: projectData.id };
-              if (workspace.categories) {
-                for (const category of workspace.categories) {
-                  categories.push(category);
-                }
+          const projectData = projectsData[0];
+          for (const workspaceData of projectData.workspaces) {
+            const workspace = { ...workspaceData, project: projectData.id };
+            if (workspace.categories) {
+              for (const category of workspace.categories) {
+                categories.push(category);
               }
-              delete workspace.categories;
-              workspaces[workspace.offline_id] = workspace;
             }
+            delete workspace.categories;
+            workspaces[workspace.offline_id] = workspace;
           }
         } else {
           currentProjectId = null;
@@ -4953,7 +4935,7 @@ var __publicField = (obj, key, value) => {
       let currentWorkspaceId;
       const oldWorkspaceId = this.client.store.getState().workspaceReducer.activeWorkspaceId;
       if (overwrite || !oldWorkspaceId) {
-        currentWorkspaceId = (_c = Object.values(workspaces).at(0)) == null ? void 0 : _c.offline_id;
+        currentWorkspaceId = (_b = Object.values(workspaces).at(0)) == null ? void 0 : _b.offline_id;
       } else {
         currentWorkspaceId = oldWorkspaceId;
       }
@@ -5264,17 +5246,6 @@ var __publicField = (obj, key, value) => {
         blocks: []
       });
     }
-    async acceptInvite(projectId) {
-      return this.enqueueRequest({
-        description: "Accept project invite",
-        method: HttpMethod.PATCH,
-        url: `/projects/${projectId}/accept-invite/`,
-        blockers: [projectId.toString()],
-        blocks: [projectId.toString()]
-      }).then(() => {
-        this.client.store.dispatch(acceptProjectInvite(projectId));
-      });
-    }
   }
   class UserFormService extends BaseApiService {
     add(state, initialRevision, url, ownerUser, ownerOrganization) {
@@ -6079,6 +6050,11 @@ var __publicField = (obj, key, value) => {
       };
     }
   }
+  const emptyBaseField = {
+    label: "",
+    required: false,
+    description: ""
+  };
   class BaseField extends BaseFormElement {
     constructor(options) {
       const { label, required, fieldValidators = [], formValidators = [], ...base } = options;
@@ -6143,25 +6119,29 @@ var __publicField = (obj, key, value) => {
   __publicField(BaseField, "fieldTypeName");
   __publicField(BaseField, "fieldTypeDescription");
   const description$1 = "_description_17zed_1";
-  const styles$4 = {
+  const styles$5 = {
     description: description$1
   };
   const InputWithLabel = (props) => {
-    const { label, children, severity, inputId, labelId, flexProps } = props;
+    const { label, children, size, severity, inputId, labelId, flexProps } = props;
     return /* @__PURE__ */ jsxRuntime.jsx(blocks.Flex, { direction: "column", gap: "1", asChild: true, ...flexProps, children: /* @__PURE__ */ jsxRuntime.jsxs("label", { htmlFor: inputId, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(blocks.Text, { severity, id: labelId, children: label }),
+      /* @__PURE__ */ jsxRuntime.jsx(blocks.Text, { size, severity, id: labelId, children: label }),
       children
     ] }) });
   };
-  const InputWithLabelAndHelpText = (props) => {
+  const InputWithHelpText = (props) => {
     const { helpText, children, severity } = props;
     return /* @__PURE__ */ jsxRuntime.jsxs(blocks.Flex, { direction: "column", gap: "1", children: [
       children,
-      /* @__PURE__ */ jsxRuntime.jsx(blocks.Flex, { direction: "column", children: /* @__PURE__ */ jsxRuntime.jsx(blocks.Text, { size: "1", severity, className: styles$4.description, children: helpText }) })
+      /* @__PURE__ */ jsxRuntime.jsx(blocks.Flex, { direction: "column", children: /* @__PURE__ */ jsxRuntime.jsx(blocks.Text, { size: "1", severity, className: styles$5.description, children: helpText }) })
     ] });
   };
+  const InputWithLabelAndHelpText = (props) => {
+    const { children, ...restProps } = props;
+    return /* @__PURE__ */ jsxRuntime.jsx(InputWithHelpText, { ...restProps, children });
+  };
   const useFormikInput = (props) => {
-    const { id, field, formId: formId2, ...rest } = props;
+    const { id, field, formId: formId2, size, ...rest } = props;
     const [fieldProps, meta, helpers] = formik.useField(field.getId());
     const { touched } = meta;
     const helpText = meta.error ?? field.description;
@@ -6190,6 +6170,7 @@ var __publicField = (obj, key, value) => {
     return [
       {
         helpText,
+        size,
         severity,
         inputId,
         labelId,
@@ -6203,12 +6184,13 @@ var __publicField = (obj, key, value) => {
   };
   const truthyValues = [true, "true"];
   const BooleanInput = React.memo(function BooleanInput2(props) {
-    const [{ inputId, labelId, severity, helpText, label, fieldProps }, rest] = useFormikInput(props);
+    const [{ inputId, labelId, size, severity, helpText, label, fieldProps }, rest] = useFormikInput(props);
     const color = blocks.useSeverityColor(severity);
     const value = truthyValues.includes(fieldProps.value);
     return /* @__PURE__ */ jsxRuntime.jsx(InputWithLabelAndHelpText, { helpText, severity, children: /* @__PURE__ */ jsxRuntime.jsx(
       InputWithLabel,
       {
+        size,
         severity,
         inputId,
         labelId,
@@ -6224,6 +6206,7 @@ var __publicField = (obj, key, value) => {
             value: value.toString(),
             checked: value,
             onCheckedChange: fieldProps.onChange,
+            alwaysShow: true,
             onChange: void 0,
             onBlur: void 0
           }
@@ -6245,6 +6228,42 @@ var __publicField = (obj, key, value) => {
     }
     return target;
   }
+  var _excluded$e = ["color"];
+  var ArrowDownIcon = /* @__PURE__ */ React.forwardRef(function(_ref, forwardedRef) {
+    var _ref$color = _ref.color, color = _ref$color === void 0 ? "currentColor" : _ref$color, props = _objectWithoutPropertiesLoose(_ref, _excluded$e);
+    return React.createElement("svg", Object.assign({
+      width: "15",
+      height: "15",
+      viewBox: "0 0 15 15",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg"
+    }, props, {
+      ref: forwardedRef
+    }), React.createElement("path", {
+      d: "M7.5 2C7.77614 2 8 2.22386 8 2.5L8 11.2929L11.1464 8.14645C11.3417 7.95118 11.6583 7.95118 11.8536 8.14645C12.0488 8.34171 12.0488 8.65829 11.8536 8.85355L7.85355 12.8536C7.75979 12.9473 7.63261 13 7.5 13C7.36739 13 7.24021 12.9473 7.14645 12.8536L3.14645 8.85355C2.95118 8.65829 2.95118 8.34171 3.14645 8.14645C3.34171 7.95118 3.65829 7.95118 3.85355 8.14645L7 11.2929L7 2.5C7 2.22386 7.22386 2 7.5 2Z",
+      fill: color,
+      fillRule: "evenodd",
+      clipRule: "evenodd"
+    }));
+  });
+  var _excluded$j = ["color"];
+  var ArrowUpIcon = /* @__PURE__ */ React.forwardRef(function(_ref, forwardedRef) {
+    var _ref$color = _ref.color, color = _ref$color === void 0 ? "currentColor" : _ref$color, props = _objectWithoutPropertiesLoose(_ref, _excluded$j);
+    return React.createElement("svg", Object.assign({
+      width: "15",
+      height: "15",
+      viewBox: "0 0 15 15",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg"
+    }, props, {
+      ref: forwardedRef
+    }), React.createElement("path", {
+      d: "M7.14645 2.14645C7.34171 1.95118 7.65829 1.95118 7.85355 2.14645L11.8536 6.14645C12.0488 6.34171 12.0488 6.65829 11.8536 6.85355C11.6583 7.04882 11.3417 7.04882 11.1464 6.85355L8 3.70711L8 12.5C8 12.7761 7.77614 13 7.5 13C7.22386 13 7 12.7761 7 12.5L7 3.70711L3.85355 6.85355C3.65829 7.04882 3.34171 7.04882 3.14645 6.85355C2.95118 6.65829 2.95118 6.34171 3.14645 6.14645L7.14645 2.14645Z",
+      fill: color,
+      fillRule: "evenodd",
+      clipRule: "evenodd"
+    }));
+  });
   var _excluded$I = ["color"];
   var CalendarIcon = /* @__PURE__ */ React.forwardRef(function(_ref, forwardedRef) {
     var _ref$color = _ref.color, color = _ref$color === void 0 ? "currentColor" : _ref$color, props = _objectWithoutPropertiesLoose(_ref, _excluded$I);
@@ -6353,24 +6372,6 @@ var __publicField = (obj, key, value) => {
       clipRule: "evenodd"
     }));
   });
-  var _excluded$1R = ["color"];
-  var DragHandleDots2Icon = /* @__PURE__ */ React.forwardRef(function(_ref, forwardedRef) {
-    var _ref$color = _ref.color, color = _ref$color === void 0 ? "currentColor" : _ref$color, props = _objectWithoutPropertiesLoose(_ref, _excluded$1R);
-    return React.createElement("svg", Object.assign({
-      width: "15",
-      height: "15",
-      viewBox: "0 0 15 15",
-      fill: "none",
-      xmlns: "http://www.w3.org/2000/svg"
-    }, props, {
-      ref: forwardedRef
-    }), React.createElement("path", {
-      d: "M5.5 4.625C6.12132 4.625 6.625 4.12132 6.625 3.5C6.625 2.87868 6.12132 2.375 5.5 2.375C4.87868 2.375 4.375 2.87868 4.375 3.5C4.375 4.12132 4.87868 4.625 5.5 4.625ZM9.5 4.625C10.1213 4.625 10.625 4.12132 10.625 3.5C10.625 2.87868 10.1213 2.375 9.5 2.375C8.87868 2.375 8.375 2.87868 8.375 3.5C8.375 4.12132 8.87868 4.625 9.5 4.625ZM10.625 7.5C10.625 8.12132 10.1213 8.625 9.5 8.625C8.87868 8.625 8.375 8.12132 8.375 7.5C8.375 6.87868 8.87868 6.375 9.5 6.375C10.1213 6.375 10.625 6.87868 10.625 7.5ZM5.5 8.625C6.12132 8.625 6.625 8.12132 6.625 7.5C6.625 6.87868 6.12132 6.375 5.5 6.375C4.87868 6.375 4.375 6.87868 4.375 7.5C4.375 8.12132 4.87868 8.625 5.5 8.625ZM10.625 11.5C10.625 12.1213 10.1213 12.625 9.5 12.625C8.87868 12.625 8.375 12.1213 8.375 11.5C8.375 10.8787 8.87868 10.375 9.5 10.375C10.1213 10.375 10.625 10.8787 10.625 11.5ZM5.5 12.625C6.12132 12.625 6.625 12.1213 6.625 11.5C6.625 10.8787 6.12132 10.375 5.5 10.375C4.87868 10.375 4.375 10.8787 4.375 11.5C4.375 12.1213 4.87868 12.625 5.5 12.625Z",
-      fill: color,
-      fillRule: "evenodd",
-      clipRule: "evenodd"
-    }));
-  });
   var _excluded$1W = ["color"];
   var DropdownMenuIcon = /* @__PURE__ */ React.forwardRef(function(_ref, forwardedRef) {
     var _ref$color = _ref.color, color = _ref$color === void 0 ? "currentColor" : _ref$color, props = _objectWithoutPropertiesLoose(_ref, _excluded$1W);
@@ -6405,9 +6406,9 @@ var __publicField = (obj, key, value) => {
       fill: color
     }));
   });
-  var _excluded$2E = ["color"];
-  var InputIcon = /* @__PURE__ */ React.forwardRef(function(_ref, forwardedRef) {
-    var _ref$color = _ref.color, color = _ref$color === void 0 ? "currentColor" : _ref$color, props = _objectWithoutPropertiesLoose(_ref, _excluded$2E);
+  var _excluded$2l = ["color"];
+  var GearIcon = /* @__PURE__ */ React.forwardRef(function(_ref, forwardedRef) {
+    var _ref$color = _ref.color, color = _ref$color === void 0 ? "currentColor" : _ref$color, props = _objectWithoutPropertiesLoose(_ref, _excluded$2l);
     return React.createElement("svg", Object.assign({
       width: "15",
       height: "15",
@@ -6417,15 +6418,15 @@ var __publicField = (obj, key, value) => {
     }, props, {
       ref: forwardedRef
     }), React.createElement("path", {
-      d: "M6.5 1C6.22386 1 6 1.22386 6 1.5C6 1.77614 6.22386 2 6.5 2C7.12671 2 7.45718 2.20028 7.65563 2.47812C7.8781 2.78957 8 3.28837 8 4V11C8 11.7116 7.8781 12.2104 7.65563 12.5219C7.45718 12.7997 7.12671 13 6.5 13C6.22386 13 6 13.2239 6 13.5C6 13.7761 6.22386 14 6.5 14C7.37329 14 8.04282 13.7003 8.46937 13.1031C8.47976 13.0886 8.48997 13.0739 8.5 13.0591C8.51003 13.0739 8.52024 13.0886 8.53063 13.1031C8.95718 13.7003 9.62671 14 10.5 14C10.7761 14 11 13.7761 11 13.5C11 13.2239 10.7761 13 10.5 13C9.87329 13 9.54282 12.7997 9.34437 12.5219C9.1219 12.2104 9 11.7116 9 11V4C9 3.28837 9.1219 2.78957 9.34437 2.47812C9.54282 2.20028 9.87329 2 10.5 2C10.7761 2 11 1.77614 11 1.5C11 1.22386 10.7761 1 10.5 1C9.62671 1 8.95718 1.29972 8.53063 1.89688C8.52024 1.91143 8.51003 1.92611 8.5 1.9409C8.48997 1.92611 8.47976 1.91143 8.46937 1.89688C8.04282 1.29972 7.37329 1 6.5 1ZM14 5H11V4H14C14.5523 4 15 4.44772 15 5V10C15 10.5523 14.5523 11 14 11H11V10H14V5ZM6 4V5H1L1 10H6V11H1C0.447715 11 0 10.5523 0 10V5C0 4.44772 0.447715 4 1 4H6Z",
+      d: "M7.07095 0.650238C6.67391 0.650238 6.32977 0.925096 6.24198 1.31231L6.0039 2.36247C5.6249 2.47269 5.26335 2.62363 4.92436 2.81013L4.01335 2.23585C3.67748 2.02413 3.23978 2.07312 2.95903 2.35386L2.35294 2.95996C2.0722 3.2407 2.0232 3.6784 2.23493 4.01427L2.80942 4.92561C2.62307 5.2645 2.47227 5.62594 2.36216 6.00481L1.31209 6.24287C0.924883 6.33065 0.650024 6.6748 0.650024 7.07183V7.92897C0.650024 8.32601 0.924883 8.67015 1.31209 8.75794L2.36228 8.99603C2.47246 9.375 2.62335 9.73652 2.80979 10.0755L2.2354 10.9867C2.02367 11.3225 2.07267 11.7602 2.35341 12.041L2.95951 12.6471C3.24025 12.9278 3.67795 12.9768 4.01382 12.7651L4.92506 12.1907C5.26384 12.377 5.62516 12.5278 6.0039 12.6379L6.24198 13.6881C6.32977 14.0753 6.67391 14.3502 7.07095 14.3502H7.92809C8.32512 14.3502 8.66927 14.0753 8.75705 13.6881L8.99505 12.6383C9.37411 12.5282 9.73573 12.3773 10.0748 12.1909L10.986 12.7653C11.3218 12.977 11.7595 12.928 12.0403 12.6473L12.6464 12.0412C12.9271 11.7604 12.9761 11.3227 12.7644 10.9869L12.1902 10.076C12.3768 9.73688 12.5278 9.37515 12.638 8.99596L13.6879 8.75794C14.0751 8.67015 14.35 8.32601 14.35 7.92897V7.07183C14.35 6.6748 14.0751 6.33065 13.6879 6.24287L12.6381 6.00488C12.528 5.62578 12.3771 5.26414 12.1906 4.92507L12.7648 4.01407C12.9766 3.6782 12.9276 3.2405 12.6468 2.95975L12.0407 2.35366C11.76 2.07292 11.3223 2.02392 10.9864 2.23565L10.0755 2.80989C9.73622 2.62328 9.37437 2.47229 8.99505 2.36209L8.75705 1.31231C8.66927 0.925096 8.32512 0.650238 7.92809 0.650238H7.07095ZM4.92053 3.81251C5.44724 3.44339 6.05665 3.18424 6.71543 3.06839L7.07095 1.50024H7.92809L8.28355 3.06816C8.94267 3.18387 9.5524 3.44302 10.0794 3.81224L11.4397 2.9547L12.0458 3.56079L11.1882 4.92117C11.5573 5.44798 11.8164 6.0575 11.9321 6.71638L13.5 7.07183V7.92897L11.932 8.28444C11.8162 8.94342 11.557 9.55301 11.1878 10.0798L12.0453 11.4402L11.4392 12.0462L10.0787 11.1886C9.55192 11.5576 8.94241 11.8166 8.28355 11.9323L7.92809 13.5002H7.07095L6.71543 11.932C6.0569 11.8162 5.44772 11.5572 4.92116 11.1883L3.56055 12.046L2.95445 11.4399L3.81213 10.0794C3.4431 9.55266 3.18403 8.94326 3.06825 8.2845L1.50002 7.92897V7.07183L3.06818 6.71632C3.18388 6.05765 3.44283 5.44833 3.81171 4.92165L2.95398 3.561L3.56008 2.95491L4.92053 3.81251ZM9.02496 7.50008C9.02496 8.34226 8.34223 9.02499 7.50005 9.02499C6.65786 9.02499 5.97513 8.34226 5.97513 7.50008C5.97513 6.65789 6.65786 5.97516 7.50005 5.97516C8.34223 5.97516 9.02496 6.65789 9.02496 7.50008ZM9.92496 7.50008C9.92496 8.83932 8.83929 9.92499 7.50005 9.92499C6.1608 9.92499 5.07513 8.83932 5.07513 7.50008C5.07513 6.16084 6.1608 5.07516 7.50005 5.07516C8.83929 5.07516 9.92496 6.16084 9.92496 7.50008Z",
       fill: color,
       fillRule: "evenodd",
       clipRule: "evenodd"
     }));
   });
-  var _excluded$2Z = ["color"];
-  var ListBulletIcon = /* @__PURE__ */ React.forwardRef(function(_ref, forwardedRef) {
-    var _ref$color = _ref.color, color = _ref$color === void 0 ? "currentColor" : _ref$color, props = _objectWithoutPropertiesLoose(_ref, _excluded$2Z);
+  var _excluded$2E = ["color"];
+  var InputIcon = /* @__PURE__ */ React.forwardRef(function(_ref, forwardedRef) {
+    var _ref$color = _ref.color, color = _ref$color === void 0 ? "currentColor" : _ref$color, props = _objectWithoutPropertiesLoose(_ref, _excluded$2E);
     return React.createElement("svg", Object.assign({
       width: "15",
       height: "15",
@@ -6435,15 +6436,15 @@ var __publicField = (obj, key, value) => {
     }, props, {
       ref: forwardedRef
     }), React.createElement("path", {
-      d: "M1.5 5.25C1.91421 5.25 2.25 4.91421 2.25 4.5C2.25 4.08579 1.91421 3.75 1.5 3.75C1.08579 3.75 0.75 4.08579 0.75 4.5C0.75 4.91421 1.08579 5.25 1.5 5.25ZM4 4.5C4 4.22386 4.22386 4 4.5 4H13.5C13.7761 4 14 4.22386 14 4.5C14 4.77614 13.7761 5 13.5 5H4.5C4.22386 5 4 4.77614 4 4.5ZM4.5 7C4.22386 7 4 7.22386 4 7.5C4 7.77614 4.22386 8 4.5 8H13.5C13.7761 8 14 7.77614 14 7.5C14 7.22386 13.7761 7 13.5 7H4.5ZM4.5 10C4.22386 10 4 10.2239 4 10.5C4 10.7761 4.22386 11 4.5 11H13.5C13.7761 11 14 10.7761 14 10.5C14 10.2239 13.7761 10 13.5 10H4.5ZM2.25 7.5C2.25 7.91421 1.91421 8.25 1.5 8.25C1.08579 8.25 0.75 7.91421 0.75 7.5C0.75 7.08579 1.08579 6.75 1.5 6.75C1.91421 6.75 2.25 7.08579 2.25 7.5ZM1.5 11.25C1.91421 11.25 2.25 10.9142 2.25 10.5C2.25 10.0858 1.91421 9.75 1.5 9.75C1.08579 9.75 0.75 10.0858 0.75 10.5C0.75 10.9142 1.08579 11.25 1.5 11.25Z",
+      d: "M6.5 1C6.22386 1 6 1.22386 6 1.5C6 1.77614 6.22386 2 6.5 2C7.12671 2 7.45718 2.20028 7.65563 2.47812C7.8781 2.78957 8 3.28837 8 4V11C8 11.7116 7.8781 12.2104 7.65563 12.5219C7.45718 12.7997 7.12671 13 6.5 13C6.22386 13 6 13.2239 6 13.5C6 13.7761 6.22386 14 6.5 14C7.37329 14 8.04282 13.7003 8.46937 13.1031C8.47976 13.0886 8.48997 13.0739 8.5 13.0591C8.51003 13.0739 8.52024 13.0886 8.53063 13.1031C8.95718 13.7003 9.62671 14 10.5 14C10.7761 14 11 13.7761 11 13.5C11 13.2239 10.7761 13 10.5 13C9.87329 13 9.54282 12.7997 9.34437 12.5219C9.1219 12.2104 9 11.7116 9 11V4C9 3.28837 9.1219 2.78957 9.34437 2.47812C9.54282 2.20028 9.87329 2 10.5 2C10.7761 2 11 1.77614 11 1.5C11 1.22386 10.7761 1 10.5 1C9.62671 1 8.95718 1.29972 8.53063 1.89688C8.52024 1.91143 8.51003 1.92611 8.5 1.9409C8.48997 1.92611 8.47976 1.91143 8.46937 1.89688C8.04282 1.29972 7.37329 1 6.5 1ZM14 5H11V4H14C14.5523 4 15 4.44772 15 5V10C15 10.5523 14.5523 11 14 11H11V10H14V5ZM6 4V5H1L1 10H6V11H1C0.447715 11 0 10.5523 0 10V5C0 4.44772 0.447715 4 1 4H6Z",
       fill: color,
       fillRule: "evenodd",
       clipRule: "evenodd"
     }));
   });
-  var _excluded$3n = ["color"];
-  var Pencil1Icon = /* @__PURE__ */ React.forwardRef(function(_ref, forwardedRef) {
-    var _ref$color = _ref.color, color = _ref$color === void 0 ? "currentColor" : _ref$color, props = _objectWithoutPropertiesLoose(_ref, _excluded$3n);
+  var _excluded$2Z = ["color"];
+  var ListBulletIcon = /* @__PURE__ */ React.forwardRef(function(_ref, forwardedRef) {
+    var _ref$color = _ref.color, color = _ref$color === void 0 ? "currentColor" : _ref$color, props = _objectWithoutPropertiesLoose(_ref, _excluded$2Z);
     return React.createElement("svg", Object.assign({
       width: "15",
       height: "15",
@@ -6453,7 +6454,7 @@ var __publicField = (obj, key, value) => {
     }, props, {
       ref: forwardedRef
     }), React.createElement("path", {
-      d: "M11.8536 1.14645C11.6583 0.951184 11.3417 0.951184 11.1465 1.14645L3.71455 8.57836C3.62459 8.66832 3.55263 8.77461 3.50251 8.89155L2.04044 12.303C1.9599 12.491 2.00189 12.709 2.14646 12.8536C2.29103 12.9981 2.50905 13.0401 2.69697 12.9596L6.10847 11.4975C6.2254 11.4474 6.3317 11.3754 6.42166 11.2855L13.8536 3.85355C14.0488 3.65829 14.0488 3.34171 13.8536 3.14645L11.8536 1.14645ZM4.42166 9.28547L11.5 2.20711L12.7929 3.5L5.71455 10.5784L4.21924 11.2192L3.78081 10.7808L4.42166 9.28547Z",
+      d: "M1.5 5.25C1.91421 5.25 2.25 4.91421 2.25 4.5C2.25 4.08579 1.91421 3.75 1.5 3.75C1.08579 3.75 0.75 4.08579 0.75 4.5C0.75 4.91421 1.08579 5.25 1.5 5.25ZM4 4.5C4 4.22386 4.22386 4 4.5 4H13.5C13.7761 4 14 4.22386 14 4.5C14 4.77614 13.7761 5 13.5 5H4.5C4.22386 5 4 4.77614 4 4.5ZM4.5 7C4.22386 7 4 7.22386 4 7.5C4 7.77614 4.22386 8 4.5 8H13.5C13.7761 8 14 7.77614 14 7.5C14 7.22386 13.7761 7 13.5 7H4.5ZM4.5 10C4.22386 10 4 10.2239 4 10.5C4 10.7761 4.22386 11 4.5 11H13.5C13.7761 11 14 10.7761 14 10.5C14 10.2239 13.7761 10 13.5 10H4.5ZM2.25 7.5C2.25 7.91421 1.91421 8.25 1.5 8.25C1.08579 8.25 0.75 7.91421 0.75 7.5C0.75 7.08579 1.08579 6.75 1.5 6.75C1.91421 6.75 2.25 7.08579 2.25 7.5ZM1.5 11.25C1.91421 11.25 2.25 10.9142 2.25 10.5C2.25 10.0858 1.91421 9.75 1.5 9.75C1.08579 9.75 0.75 10.0858 0.75 10.5C0.75 10.9142 1.08579 11.25 1.5 11.25Z",
       fill: color,
       fillRule: "evenodd",
       clipRule: "evenodd"
@@ -6601,6 +6602,10 @@ var __publicField = (obj, key, value) => {
       clipRule: "evenodd"
     }));
   });
+  const emptyBooleanField = {
+    ...emptyBaseField,
+    type: "boolean"
+  };
   const _BooleanField = class _BooleanField extends BaseField {
     constructor(options) {
       super({ ...options, type: "boolean" });
@@ -8025,9 +8030,9 @@ var __publicField = (obj, key, value) => {
     Content: TabsContent
   });
   const NumberInput$1 = React.memo(function NumberInput2(props) {
-    const [{ inputId, labelId, severity, helpText, label, fieldProps, field }, rest] = useFormikInput(props);
+    const [{ inputId, labelId, size, severity, helpText, label, fieldProps, field }, rest] = useFormikInput(props);
     const color = blocks.useSeverityColor(severity);
-    return /* @__PURE__ */ jsxRuntime.jsx(InputWithLabelAndHelpText, { helpText, severity, children: /* @__PURE__ */ jsxRuntime.jsx(InputWithLabel, { severity, inputId, labelId, label, children: /* @__PURE__ */ jsxRuntime.jsx(
+    return /* @__PURE__ */ jsxRuntime.jsx(InputWithLabelAndHelpText, { helpText, severity, children: /* @__PURE__ */ jsxRuntime.jsx(InputWithLabel, { size, severity, inputId, labelId, label, children: /* @__PURE__ */ jsxRuntime.jsx(
       TextField$1.Input,
       {
         ...rest,
@@ -8041,144 +8046,6 @@ var __publicField = (obj, key, value) => {
       }
     ) }) });
   });
-  const _NumberField = class _NumberField extends BaseField {
-    constructor(options) {
-      const {
-        minimum = Number.MIN_SAFE_INTEGER,
-        maximum = Number.MAX_SAFE_INTEGER,
-        integers = false,
-        ...base
-      } = options;
-      super({ ...base, type: "number" });
-      __publicField(this, "minimum");
-      __publicField(this, "maximum");
-      __publicField(this, "integers");
-      this.minimum = minimum;
-      this.maximum = maximum;
-      this.integers = integers;
-    }
-    getValueFromChangeEvent(event) {
-      const number = Number.parseFloat(event.target.value);
-      if (Number.isNaN(number))
-        return "";
-      return number;
-    }
-    static getFieldCreationSchema() {
-      return [
-        new _NumberField({
-          label: "Minimum",
-          description: "Minimum value",
-          integers: true,
-          required: false,
-          identifier: "minimum",
-          formValidators: [this._validateMin]
-        }),
-        new _NumberField({
-          label: "Maximum",
-          description: "Maximum value",
-          integers: true,
-          required: false,
-          identifier: "maximum",
-          formValidators: [this._validateMax]
-        }),
-        new BooleanField({
-          label: "Integers",
-          description: "Whole numbers only",
-          required: false,
-          identifier: "integers"
-        })
-      ];
-    }
-    getFieldValidators() {
-      const validators = super.getFieldValidators();
-      const min = this.minimum;
-      const max = this.maximum;
-      if (typeof min === "number") {
-        validators.push((value) => {
-          if (typeof value === "number" && value < min) {
-            return `Must be at least ${this.minimum}.`;
-          }
-        });
-      }
-      if (typeof max === "number") {
-        validators.push((value) => {
-          if (typeof value === "number" && value > max) {
-            return `Must be at most ${this.maximum}.`;
-          }
-        });
-      }
-      if (this.integers) {
-        validators.push((value) => {
-          if (typeof value === "number" && !Number.isInteger(value)) {
-            return "Must be a whole number.";
-          }
-        });
-      }
-      return validators;
-    }
-    serialize() {
-      return {
-        ...super._serialize(),
-        minimum: this.minimum,
-        maximum: this.maximum,
-        integers: this.integers
-      };
-    }
-    static deserialize(data) {
-      if (data.type !== "number")
-        throw new Error("Type mismatch.");
-      return new _NumberField(data);
-    }
-    getInput(props) {
-      return /* @__PURE__ */ jsxRuntime.jsx(NumberInput$1, { field: this, ...props });
-    }
-  };
-  __publicField(_NumberField, "fieldTypeName", "Number");
-  __publicField(_NumberField, "fieldTypeDescription", "Allows specifying a number within a given range.");
-  __publicField(_NumberField, "Icon", FontFamilyIcon);
-  __publicField(_NumberField, "_validateMin", (value, allValues) => {
-    if (typeof allValues.maximum === "number" && typeof value === "number" && allValues.maximum < value) {
-      return "Minimum cannot be greater than minimum.";
-    }
-    return null;
-  });
-  __publicField(_NumberField, "_validateMax", (value, allValues) => {
-    if (typeof allValues.minimum === "number" && typeof value === "number" && allValues.minimum > value) {
-      return "Maximum cannot be less than minimum.";
-    }
-    return null;
-  });
-  let NumberField = _NumberField;
-  const DateInput = React.memo(function DateInput2(props) {
-    const [{ inputId, labelId, severity, helpText, label, fieldProps }, rest] = useFormikInput(props);
-    const color = blocks.useSeverityColor(severity);
-    const value = fieldProps.value ? fieldProps.value.split("T")[0] : "";
-    return /* @__PURE__ */ jsxRuntime.jsx(InputWithLabelAndHelpText, { helpText, severity, children: /* @__PURE__ */ jsxRuntime.jsx(InputWithLabel, { severity, inputId, labelId, label, children: /* @__PURE__ */ jsxRuntime.jsx(TextField$1.Input, { ...rest, ...fieldProps, type: "date", id: inputId, color, value }) }) });
-  });
-  const _DateField = class _DateField extends BaseField {
-    constructor(options) {
-      super({ ...options, type: "date" });
-      __publicField(this, "onlyValidateAfterTouched", false);
-    }
-    serialize() {
-      return super._serialize();
-    }
-    getValueFromChangeEvent(event) {
-      return new Date(event.target.value).toISOString();
-    }
-    static deserialize(data) {
-      if (data.type !== "date")
-        throw new Error("Type mismatch.");
-      return new _DateField(data);
-    }
-    getInput(props) {
-      return /* @__PURE__ */ jsxRuntime.jsx(DateInput, { field: this, ...props });
-    }
-  };
-  __publicField(_DateField, "fieldTypeName", "Date");
-  __publicField(_DateField, "fieldTypeDescription", "Allows specifying a date.");
-  __publicField(_DateField, "Icon", CalendarIcon);
-  let DateField = _DateField;
   class StringOrTextField extends BaseField {
     constructor(options) {
       const { minLength, maxLength = 5e3, ...base } = options;
@@ -8188,31 +8055,40 @@ var __publicField = (obj, key, value) => {
       this.minLength = minLength ? Math.max(minLength, 0) : void 0;
       this.maxLength = maxLength ? Math.max(maxLength, 0) : 5e3;
     }
-    static getFieldCreationSchema() {
+    static getFieldCreationSchema(parentPath = "") {
+      const path = parentPath && `${parentPath}.`;
       return [
-        // min, max
-        new NumberField({
-          label: "Minimum length",
-          description: "Minimum number of characters",
-          required: false,
-          identifier: "minimum_length",
-          minimum: 0,
-          maximum: 100,
-          formValidators: [this._validateMin],
-          integers: true
-        }),
-        new NumberField({
-          label: "Maximum length",
-          description: "Maximum number of characters",
-          required: false,
-          identifier: "maximum_length",
-          minimum: 1,
-          maximum: 5e3,
-          // TODO: depends on short vs long text
-          formValidators: [this._validateMax],
-          // TODO: default: 500 (see: "Short text fields can hold up to 500 characters on a single line.")
-          integers: true
-        })
+        {
+          field: (
+            // min, max
+            new NumberField({
+              label: "Minimum length",
+              description: "Minimum number of characters",
+              required: false,
+              identifier: `${path}minimum_length`,
+              minimum: 0,
+              maximum: 100,
+              formValidators: [this._validateMin(parentPath)],
+              integers: true
+            })
+          ),
+          showDirectly: false
+        },
+        {
+          field: new NumberField({
+            label: "Maximum length",
+            description: "Maximum number of characters",
+            required: false,
+            identifier: `${path}maximum_length`,
+            minimum: 1,
+            maximum: 5e3,
+            // TODO: depends on short vs long text
+            formValidators: [this._validateMax(parentPath)],
+            // TODO: default: 500 (see: "Short text fields can hold up to 500 characters on a single line.")
+            integers: true
+          }),
+          showDirectly: false
+        }
       ];
     }
     getFieldValidators() {
@@ -8247,23 +8123,24 @@ var __publicField = (obj, key, value) => {
     }
   }
   /**
-   * This function validates that the value given for "minimum length" (when creating a new field) is less than or
+   * This function returns a function that validates that the value given for "minimum length" (when creating a new field) is less than or
    * equal to the value given for "maximum length".
    */
-  __publicField(StringOrTextField, "_validateMin", (value, allValues) => {
-    if (typeof allValues.maximum_length === "number" && typeof value === "number" && allValues.maximum_length < value) {
+  __publicField(StringOrTextField, "_validateMin", (path) => (value, allValues) => {
+    const field = valueIsFormikUserFormRevision(allValues) ? get(allValues, path) : allValues;
+    if (typeof field.maximum_length === "number" && typeof value === "number" && field.maximum_length < value) {
       return "Minimum cannot be greater than maximum.";
     }
     return null;
   });
   /**
-   * This function validates that the value given for "maximum length" (when creating a new field) is greater than or
+   * This function returns a function that validates that the value given for "maximum length" (when creating a new field) is greater than or
    * equal to the value given for "minimum length".
    */
-  __publicField(StringOrTextField, "_validateMax", (value, allValues) => {
+  __publicField(StringOrTextField, "_validateMax", (path) => (value, allValues) => {
     if (typeof value !== "number")
       return null;
-    const { minimum_length: minimumLength } = allValues;
+    const { minimum_length: minimumLength } = valueIsFormikUserFormRevision(allValues) ? get(allValues, path) : allValues;
     if (typeof minimumLength !== "number") {
       return null;
     }
@@ -8274,20 +8151,20 @@ var __publicField = (obj, key, value) => {
   });
   const clickableLinkContainer = "_clickableLinkContainer_1ace7_1";
   const TextFieldInputCopy = "_TextFieldInputCopy_1ace7_5";
-  const styles$3 = {
+  const styles$4 = {
     clickableLinkContainer,
     TextFieldInputCopy
   };
   const StringInput = React.memo(function StringInput2(props) {
-    const [{ inputId, labelId, severity, helpText, label, fieldProps, field }, rest] = useFormikInput(props);
+    const [{ inputId, labelId, size, severity, helpText, label, fieldProps, field }, rest] = useFormikInput(props);
     const color = blocks.useSeverityColor(severity);
-    return /* @__PURE__ */ jsxRuntime.jsx(InputWithLabelAndHelpText, { helpText, severity, children: /* @__PURE__ */ jsxRuntime.jsx(InputWithLabel, { severity, inputId, labelId, label, children: !rest.disabled ? /* @__PURE__ */ jsxRuntime.jsx(TextField$1.Input, { ...rest, ...fieldProps, type: field.inputType, id: inputId, color }) : /* @__PURE__ */ jsxRuntime.jsxs(TextField$1.Root, { className: styles$3.clickableLinkContainer, children: [
+    return /* @__PURE__ */ jsxRuntime.jsx(InputWithLabelAndHelpText, { helpText, severity, children: /* @__PURE__ */ jsxRuntime.jsx(InputWithLabel, { size, severity, inputId, labelId, label, children: !rest.disabled ? /* @__PURE__ */ jsxRuntime.jsx(TextField$1.Input, { ...rest, ...fieldProps, type: field.inputType, id: inputId, color }) : /* @__PURE__ */ jsxRuntime.jsxs(TextField$1.Root, { className: styles$4.clickableLinkContainer, children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         "div",
         {
           className: classNames$1(
             "rt-TextFieldInput rt-r-size-2 rt-variant-surface",
-            styles$3.TextFieldInputCopy
+            styles$4.TextFieldInputCopy
           ),
           children: /* @__PURE__ */ jsxRuntime.jsx(
             Linkify,
@@ -8304,6 +8181,12 @@ var __publicField = (obj, key, value) => {
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rt-TextFieldChrome" })
     ] }) }) });
   });
+  const emptyStringField = {
+    ...emptyBaseField,
+    type: "string",
+    maximum_length: 500,
+    input_type: "text"
+  };
   const _StringField = class _StringField extends StringOrTextField {
     constructor(options) {
       const { inputType = "text", ...rest } = options;
@@ -8331,9 +8214,14 @@ var __publicField = (obj, key, value) => {
   __publicField(_StringField, "Icon", InputIcon);
   let StringField = _StringField;
   const TextInput = React.memo(function TextInput2(props) {
-    const [{ inputId, labelId, severity, helpText, label, fieldProps }, rest] = useFormikInput(props);
-    return /* @__PURE__ */ jsxRuntime.jsx(InputWithLabelAndHelpText, { helpText, severity, children: /* @__PURE__ */ jsxRuntime.jsx(InputWithLabel, { severity, inputId, labelId, label, children: /* @__PURE__ */ jsxRuntime.jsx(blocks.TextArea, { ...rest, ...fieldProps, resize: "vertical", id: inputId, severity }) }) });
+    const [{ inputId, labelId, size, severity, helpText, label, fieldProps }, rest] = useFormikInput(props);
+    return /* @__PURE__ */ jsxRuntime.jsx(InputWithLabelAndHelpText, { helpText, severity, children: /* @__PURE__ */ jsxRuntime.jsx(InputWithLabel, { size, severity, inputId, labelId, label, children: /* @__PURE__ */ jsxRuntime.jsx(blocks.TextArea, { ...rest, ...fieldProps, resize: "vertical", id: inputId, severity }) }) });
   });
+  const emptyTextField = {
+    ...emptyBaseField,
+    type: "text",
+    maximum_length: 5e3
+  };
   const _TextField = class _TextField extends StringOrTextField {
     constructor(options) {
       const maxLength = options.maxLength ? Math.min(5e3, options.maxLength) : 5e3;
@@ -8357,8 +8245,42 @@ var __publicField = (obj, key, value) => {
   __publicField(_TextField, "fieldTypeDescription", "Paragraph fields can hold up to 5000 characters and can have multiple lines.");
   __publicField(_TextField, "Icon", RowsIcon);
   let TextField = _TextField;
+  const DateInput = React.memo(function DateInput2(props) {
+    const [{ inputId, labelId, size, severity, helpText, label, fieldProps }, rest] = useFormikInput(props);
+    const color = blocks.useSeverityColor(severity);
+    const value = fieldProps.value ? fieldProps.value.split("T")[0] : "";
+    return /* @__PURE__ */ jsxRuntime.jsx(InputWithLabelAndHelpText, { helpText, severity, children: /* @__PURE__ */ jsxRuntime.jsx(InputWithLabel, { size, severity, inputId, labelId, label, children: /* @__PURE__ */ jsxRuntime.jsx(TextField$1.Input, { ...rest, ...fieldProps, type: "date", id: inputId, color, value }) }) });
+  });
+  const emptyDateField = {
+    ...emptyBaseField,
+    type: "date"
+  };
+  const _DateField = class _DateField extends BaseField {
+    constructor(options) {
+      super({ ...options, type: "date" });
+      __publicField(this, "onlyValidateAfterTouched", false);
+    }
+    serialize() {
+      return super._serialize();
+    }
+    getValueFromChangeEvent(event) {
+      return new Date(event.target.value).toISOString();
+    }
+    static deserialize(data) {
+      if (data.type !== "date")
+        throw new Error("Type mismatch.");
+      return new _DateField(data);
+    }
+    getInput(props) {
+      return /* @__PURE__ */ jsxRuntime.jsx(DateInput, { field: this, ...props });
+    }
+  };
+  __publicField(_DateField, "fieldTypeName", "Date");
+  __publicField(_DateField, "fieldTypeDescription", "Allows specifying a date.");
+  __publicField(_DateField, "Icon", CalendarIcon);
+  let DateField = _DateField;
   const SelectInput = React.memo(function SelectInput2(props) {
-    const [{ inputId, labelId, severity, helpText, label, fieldProps, field }, rest] = useFormikInput(props);
+    const [{ inputId, labelId, size, severity, helpText, label, fieldProps, field }, rest] = useFormikInput(props);
     const { onChange, onBlur } = fieldProps;
     const options = React.useMemo(
       () => field.options.map((option) => ({ value: option.value, itemContent: option.label })),
@@ -8371,7 +8293,7 @@ var __publicField = (obj, key, value) => {
       },
       [onChange, onBlur]
     );
-    return /* @__PURE__ */ jsxRuntime.jsx(InputWithLabelAndHelpText, { helpText, severity, children: /* @__PURE__ */ jsxRuntime.jsx(InputWithLabel, { severity, inputId, labelId, label, children: /* @__PURE__ */ jsxRuntime.jsx(
+    return /* @__PURE__ */ jsxRuntime.jsx(InputWithLabelAndHelpText, { helpText, severity, children: /* @__PURE__ */ jsxRuntime.jsx(InputWithLabel, { size, severity, inputId, labelId, label, children: /* @__PURE__ */ jsxRuntime.jsx(
       blocks.Select,
       {
         items: options,
@@ -8422,11 +8344,6 @@ var __publicField = (obj, key, value) => {
     result.splice(destination, 0, removed);
     return result;
   }
-  function replace(list, index2, value) {
-    const result = Array.from(list);
-    result[index2] = value;
-    return result;
-  }
   function insert(list, index2, value) {
     const result = Array.from(list ?? []);
     result.splice(index2, 0, value);
@@ -8461,9 +8378,7 @@ var __publicField = (obj, key, value) => {
     return sections.filter((_, i) => i < index2).flatMap((field) => field.fields);
   };
   const getTakenFieldLabels = (fields) => {
-    return fields.flatMap(
-      (field) => field.type === "section" ? [...field.fields.map((f) => f.label), field.label] : field.label
-    ).filter((id) => id !== null);
+    return fields.flatMap((field) => [...field.fields.map((f) => f.label), field.label]).filter((id) => id !== null);
   };
   const incrementFieldLabel = (label, takenLabels) => {
     let count = 1;
@@ -8473,16 +8388,98 @@ var __publicField = (obj, key, value) => {
     }
     return newLabel;
   };
-  const MultiStringInput = React.memo(function MultiStringInput2(props) {
-    const [{ inputId, labelId, severity, helpText, label, fieldProps }, rest] = useFormikInput(props);
-    const color = blocks.useSeverityColor(severity);
-    const value = React.useMemo(
-      () => Array.isArray(fieldProps.value) ? fieldProps.value : [],
-      [fieldProps.value]
+  const createNewField = (parentPath, index2, initialValues2, values, setFieldValue) => {
+    const { label } = initialValues2;
+    const newField = {
+      ...initialValues2,
+      identifier: makeIdentifier(null, label)
+    };
+    const parent = get(values, parentPath);
+    if (parent === void 0) {
+      throw new Error("Parent path must point to an existing field.");
+    }
+    if (!Array.isArray(parent)) {
+      throw new Error("Parent path must point to an array.");
+    }
+    const updatedFields = insert(parent, index2, newField);
+    void setFieldValue(parentPath, updatedFields).then();
+  };
+  const createNewEmptySection = (index2, values, setFieldValue) => {
+    const initialValues2 = {
+      ...emptySection(),
+      label: ""
+    };
+    createNewField("fields", index2, initialValues2, values, setFieldValue);
+  };
+  const useFieldReordering = () => {
+    const { showError } = blocks.useToast();
+    const reorderSection = React.useCallback(
+      (dropState, sectionId, sectionIndex, destinationIndex, values, setFieldValue) => {
+        const state = dropState[sectionId];
+        if (!state)
+          throw new Error("Could not find section context.");
+        let dest = typeof state.conditionIndex !== "undefined" ? (
+          // cannot move a section with a condition before the condition's field
+          Math.max(state.conditionIndex + 1, destinationIndex)
+        ) : destinationIndex;
+        for (const section of Object.values(dropState)) {
+          if (section.conditionIndex === sectionIndex) {
+            dest = Math.min(dest, section.index - 1);
+          }
+        }
+        if (dest !== destinationIndex) {
+          showError({
+            title: "Could not reorder sections",
+            description: "Sections with conditions must be below the fields they reference."
+          });
+          return;
+        }
+        void setFieldValue("fields", reorder(values.fields, sectionIndex, dest));
+      },
+      [showError]
     );
-    const { onChange, onBlur } = fieldProps;
-    const droppableId = `${inputId}-droppable`;
-    const { disabled } = rest;
+    const reorderField = React.useCallback(
+      (srcSection, srcSectionIndex, srcFieldIndex, destSection, destSectionIndex, destFieldIndex, setFieldValue) => {
+        var _a2;
+        if (!(srcSection == null ? void 0 : srcSection.fields) || !destSection)
+          throw new Error("Could not find section with fields.");
+        if (srcSection.identifier === destSection.identifier) {
+          void setFieldValue(
+            `fields.${srcSectionIndex}.fields`,
+            reorder(srcSection.fields, srcFieldIndex, destFieldIndex)
+          ).then();
+        } else {
+          const removed = srcSection.fields[srcFieldIndex];
+          if (!removed)
+            throw new Error("Could not find field to reorder.");
+          if (((_a2 = destSection.condition) == null ? void 0 : _a2.identifier) === removed.identifier) {
+            showError({
+              title: "Could not reorder field",
+              description: "Field must be above the section whose condition references it."
+            });
+            return;
+          }
+          void setFieldValue(`fields.${srcSectionIndex}.fields`, remove(srcSection.fields, srcFieldIndex)).then();
+          void setFieldValue(
+            `fields.${destSectionIndex}.fields`,
+            insert(destSection.fields, destFieldIndex, removed)
+          ).then();
+        }
+      },
+      [showError]
+    );
+    return { reorderSection, reorderField };
+  };
+  const MultiStringInput = React.memo(function MultiStringInput2(props) {
+    const [{ inputId, labelId, size, severity, helpText, label, fieldProps }, rest] = useFormikInput(props);
+    const color = blocks.useSeverityColor(severity);
+    const value = React.useMemo(
+      () => Array.isArray(fieldProps.value) ? fieldProps.value : [],
+      [fieldProps.value]
+    );
+    const { onChange, onBlur } = fieldProps;
+    const droppableId = `${inputId}-droppable`;
+    const { disabled } = rest;
     const [intermediateValue, setIntermediateValue] = React.useState("");
     const [internalError, setInternalError] = React.useState("");
     const updatedHelpText = internalError || helpText;
@@ -8544,7 +8541,7 @@ var __publicField = (obj, key, value) => {
       [setValueAndTouched, value]
     );
     return /* @__PURE__ */ jsxRuntime.jsx(dnd.DragDropContext, { onDragEnd: handleDragEnd, children: /* @__PURE__ */ jsxRuntime.jsxs(blocks.Flex, { direction: "column", gap: "2", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(InputWithLabelAndHelpText, { helpText: updatedHelpText, severity, children: /* @__PURE__ */ jsxRuntime.jsx(InputWithLabel, { severity, inputId, labelId, label, children: (!disabled || value.length === 0) && /* @__PURE__ */ jsxRuntime.jsxs(blocks.Flex, { gap: "2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(InputWithLabelAndHelpText, { helpText: updatedHelpText, severity, children: /* @__PURE__ */ jsxRuntime.jsx(InputWithLabel, { size, severity, inputId, labelId, label, children: (!disabled || value.length === 0) && /* @__PURE__ */ jsxRuntime.jsxs(blocks.Flex, { gap: "2", children: [
         /* @__PURE__ */ jsxRuntime.jsx(Box, { grow: "1", children: /* @__PURE__ */ jsxRuntime.jsx(
           TextField$1.Input,
           {
@@ -8615,6 +8612,12 @@ var __publicField = (obj, key, value) => {
       ] }) })
     ] }) });
   });
+  const emptyMultiStringField = {
+    ...emptyBaseField,
+    type: "multi-string",
+    minimum_length: 0,
+    maximum_length: null
+  };
   const _MultiStringField = class _MultiStringField extends BaseField {
     constructor(options) {
       const { minimum_length, maximum_length, ...rest } = options;
@@ -8689,19 +8692,28 @@ var __publicField = (obj, key, value) => {
         options: this.options
       };
     }
-    static getFieldCreationSchema() {
+    static getFieldCreationSchema(parentPath = "") {
+      const path = parentPath && `${parentPath}.`;
       return [
-        new MultiStringField({
-          label: "Options",
-          description: "List possible options for the user to select from.",
-          required: true,
-          identifier: "options",
-          minimum_length: 2,
-          maximum_length: 20
-        })
+        {
+          field: new MultiStringField({
+            label: "Options",
+            description: "List possible options for the user to select from.",
+            required: true,
+            identifier: `${path}options`,
+            minimum_length: 2,
+            maximum_length: 20
+          }),
+          showDirectly: true
+        }
       ];
     }
   }
+  const emptySelectField = {
+    ...emptyBaseField,
+    type: "select",
+    options: []
+  };
   const _SelectField = class _SelectField extends BaseSelectField {
     constructor(options) {
       super({ ...options, type: "select" });
@@ -8735,7 +8747,7 @@ var __publicField = (obj, key, value) => {
     return [value];
   };
   const MultiSelectInput = React.memo(function MultiSelectInput2(props) {
-    const [{ inputId, labelId, severity, helpText, label, fieldProps, field }, rest] = useFormikInput(props);
+    const [{ inputId, labelId, size, severity, helpText, label, fieldProps, field }, rest] = useFormikInput(props);
     const { onChange, onBlur } = fieldProps;
     const value = React.useMemo(() => parseValueToArray(fieldProps.value), [fieldProps.value]);
     const handleChange = React.useCallback(
@@ -8745,7 +8757,7 @@ var __publicField = (obj, key, value) => {
       },
       [onChange, onBlur]
     );
-    return /* @__PURE__ */ jsxRuntime.jsx(InputWithLabelAndHelpText, { helpText, severity, children: /* @__PURE__ */ jsxRuntime.jsx(InputWithLabel, { severity, inputId, labelId, label, children: /* @__PURE__ */ jsxRuntime.jsx(
+    return /* @__PURE__ */ jsxRuntime.jsx(InputWithLabelAndHelpText, { helpText, severity, children: /* @__PURE__ */ jsxRuntime.jsx(InputWithLabel, { size, severity, inputId, labelId, label, children: /* @__PURE__ */ jsxRuntime.jsx(
       blocks.MultiSelect,
       {
         value,
@@ -8759,6 +8771,11 @@ var __publicField = (obj, key, value) => {
       }
     ) }) });
   });
+  const emptyMultiSelectField = {
+    ...emptyBaseField,
+    type: "multi-select",
+    options: []
+  };
   const _MultiSelectField = class _MultiSelectField extends BaseSelectField {
     constructor(options) {
       super({ ...options, type: "multi-select" });
@@ -8787,16 +8804,10 @@ var __publicField = (obj, key, value) => {
   __publicField(_MultiSelectField, "fieldTypeDescription", "Allows the user to select a multiple options from a list of options.");
   __publicField(_MultiSelectField, "Icon", CheckboxIcon);
   let MultiSelectField = _MultiSelectField;
-  const FieldInputCloner = React.memo(function FieldInputCloner2({ field, ...props }) {
-    const [{ value: identifier }] = formik.useField(field.options.clonedFieldIdentifier);
-    const deserializedField = React.useMemo(() => {
-      const options = field.options.getFieldToClone(identifier);
-      if (!options)
-        return null;
-      return deserialize(options);
-    }, [field.options, identifier]);
-    return useFieldInput(deserializedField, props);
-  });
+  const emptyCustomField = {
+    ...emptyBaseField,
+    type: "custom"
+  };
   class CustomField extends BaseField {
     constructor(options, Component) {
       super({ ...options, type: "custom" });
@@ -8816,13 +8827,8 @@ var __publicField = (obj, key, value) => {
   }
   __publicField(CustomField, "fieldTypeName", "Custom");
   __publicField(CustomField, "fieldTypeDescription", "Allows re-rendering of field already in the form");
-  class FieldInputClonerField extends CustomField {
-    constructor(options) {
-      super(options, FieldInputCloner);
-    }
-  }
   const previewImage = "_previewImage_1ig84_1";
-  const styles$2 = {
+  const styles$3 = {
     previewImage
   };
   const convertBytesToLargestUnit = (bytes) => {
@@ -8843,7 +8849,7 @@ var __publicField = (obj, key, value) => {
   };
   const NumberInput = React.memo(function NumberInput2(props) {
     var _a2;
-    const [{ inputId, labelId, severity, helpText, label, fieldProps, field }, rest] = useFormikInput(props);
+    const [{ inputId, labelId, size, severity, helpText, label, fieldProps, field }, rest] = useFormikInput(props);
     const { onChange } = fieldProps;
     const color = blocks.useSeverityColor(severity);
     const input = React.useRef(null);
@@ -8873,7 +8879,7 @@ var __publicField = (obj, key, value) => {
     const singleButtonText = value ? "Select new file" : "Select a file";
     const buttonText = field.maxFiles > 1 ? multipleButtonText : singleButtonText;
     return /* @__PURE__ */ jsxRuntime.jsxs(blocks.Flex, { direction: "column", gap: "2", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(InputWithLabelAndHelpText, { helpText: updatedHelpText, severity, children: /* @__PURE__ */ jsxRuntime.jsxs(InputWithLabel, { severity, inputId, labelId, label, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(InputWithLabelAndHelpText, { helpText: updatedHelpText, severity, children: /* @__PURE__ */ jsxRuntime.jsxs(InputWithLabel, { size, severity, inputId, labelId, label, children: [
         /* @__PURE__ */ jsxRuntime.jsx(blocks.Flex, { direction: "row", gap: "2", children: /* @__PURE__ */ jsxRuntime.jsx(Box, { width: "max-content", asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(blocks.Button, { ...rest, onClick: handleClick, children: [
           /* @__PURE__ */ jsxRuntime.jsx(UploadIcon, {}),
           " ",
@@ -8954,9 +8960,16 @@ var __publicField = (obj, key, value) => {
           error && /* @__PURE__ */ jsxRuntime.jsx(blocks.Text, { size: "1", severity: "danger", children: error })
         ] })
       ] }),
-      url && /* @__PURE__ */ jsxRuntime.jsx("img", { className: styles$2.previewImage, src: url, alt: name })
+      url && /* @__PURE__ */ jsxRuntime.jsx("img", { className: styles$3.previewImage, src: url, alt: name })
     ] }) });
   });
+  const emptyUploadField = {
+    ...emptyBaseField,
+    type: "upload",
+    extensions: [],
+    maximum_size: void 0,
+    maximum_files: 1
+  };
   const largestSupportedSize = 50;
   const _UploadField = class _UploadField extends BaseField {
     constructor(options) {
@@ -8976,55 +8989,65 @@ var __publicField = (obj, key, value) => {
     isBlank(value) {
       return super.isBlank(value) || value.length === 0;
     }
-    static getFieldCreationSchema() {
+    static getFieldCreationSchema(parentPath = "") {
+      const path = parentPath && `${parentPath}.`;
       return [
-        new NumberField({
-          label: "How many files can be uploaded?",
-          description: "By default, only one file can be uploaded.",
-          required: false,
-          minimum: 1,
-          maximum: 10,
-          identifier: "maximum_files",
-          integers: true
-        }),
-        new NumberField({
-          // TODO: Default value
-          label: "What is the maximum size of each file?",
-          description: `Maximum file size in megabytes (between 1MB–${largestSupportedSize}MB).`,
-          required: false,
-          identifier: "maximum_size",
-          minimum: 1,
-          maximum: largestSupportedSize,
-          integers: true
-        }),
-        new MultiSelectField({
-          label: "Accepted file types",
-          description: "Types of allowed files to upload. If left blank, all files will be accepted.",
-          required: false,
-          identifier: "extensions",
-          options: [
-            {
-              value: "image/*",
-              label: "Images"
-            },
-            {
-              value: "audio/*",
-              label: "Audio files"
-            },
-            {
-              value: "video/*",
-              label: "Videos"
-            },
-            {
-              value: "text/*",
-              label: "Text files"
-            },
-            {
-              value: "application/*",
-              label: "Application files (includes PDFs and Word documents)"
-            }
-          ]
-        })
+        {
+          field: new NumberField({
+            label: "How many files can be uploaded?",
+            description: "By default, only one file can be uploaded.",
+            required: false,
+            minimum: 1,
+            maximum: 10,
+            identifier: `${path}maximum_files`,
+            integers: true
+          }),
+          showDirectly: false
+        },
+        {
+          field: new NumberField({
+            // TODO: Default value
+            label: "What is the maximum size of each file?",
+            description: `Maximum file size in megabytes (between 1MB–${largestSupportedSize}MB).`,
+            required: false,
+            identifier: `${path}maximum_size`,
+            minimum: 1,
+            maximum: largestSupportedSize,
+            integers: true
+          }),
+          showDirectly: false
+        },
+        {
+          field: new MultiSelectField({
+            label: "Accepted file types",
+            description: "Types of allowed files to upload. If left blank, all files will be accepted.",
+            required: false,
+            identifier: `${path}extensions`,
+            options: [
+              {
+                value: "image/*",
+                label: "Images"
+              },
+              {
+                value: "audio/*",
+                label: "Audio files"
+              },
+              {
+                value: "video/*",
+                label: "Videos"
+              },
+              {
+                value: "text/*",
+                label: "Text files"
+              },
+              {
+                value: "application/*",
+                label: "Application files (includes PDFs and Word documents)"
+              }
+            ]
+          }),
+          showDirectly: false
+        }
       ];
     }
     getFieldValidators() {
@@ -9078,44 +9101,33 @@ var __publicField = (obj, key, value) => {
     "multi-string": MultiStringField,
     "multi-select": MultiSelectField
   };
-  const deserializeField = (serializedField) => {
-    const fieldType = serializedField.type;
-    const fieldCls = FieldTypeToClsMapping[fieldType];
-    return fieldCls.deserialize(serializedField);
-  };
-  const deserialize = (serialized) => {
-    if (serialized.type === "section") {
-      return FieldSection.deserialize(serialized);
-    }
-    return deserializeField(serialized);
+  const FieldTypeToEmptyFieldMapping = {
+    date: emptyDateField,
+    number: emptyNumberField,
+    boolean: emptyBooleanField,
+    select: emptySelectField,
+    string: emptyStringField,
+    text: emptyTextField,
+    custom: emptyCustomField,
+    upload: emptyUploadField,
+    // TODO: Underscore
+    "multi-string": emptyMultiStringField,
+    "multi-select": emptyMultiSelectField
   };
-  function formRevisionToSchema(formRevision, meta = {}) {
-    const { readonly = false } = meta;
-    return {
-      title: formRevision.title,
-      description: formRevision.description,
-      fields: formRevision.fields.map((serializedField) => deserialize(serializedField)),
-      meta: { readonly }
-    };
-  }
-  function valueIsFile(v) {
-    return Array.isArray(v) && v.some((v2) => v2 instanceof File || v2 instanceof Promise);
-  }
-  function isConditionMet(condition, value) {
-    if (!condition)
-      return true;
-    if (valueIsFile(value) || valueIsFile(condition.value))
-      throw new Error("Conditions do not support file uploads");
-    const valueAsPrimitive = Array.isArray(value) ? value.map((v) => typeof v === "string" ? v : v.value) : value;
-    const valueToCompare = Array.isArray(condition.value) ? condition.value.map((v) => typeof v === "string" ? v : v.value) : condition.value;
-    if (Array.isArray(valueToCompare) && Array.isArray(valueAsPrimitive)) {
-      for (const v of valueToCompare) {
-        if (!valueAsPrimitive.includes(v))
-          return false;
-      }
-      return true;
+  const FieldInputCloner = React.memo(function FieldInputCloner2({ field, ...props }) {
+    const [{ value: identifier }] = formik.useField(field.options.clonedFieldIdentifier);
+    const deserializedField = React.useMemo(() => {
+      const options = field.options.getFieldToClone(identifier);
+      if (!options)
+        return null;
+      return deserialize(options);
+    }, [field.options, identifier]);
+    return useFieldInput(deserializedField, props);
+  });
+  class FieldInputClonerField extends CustomField {
+    constructor(options) {
+      super(options, FieldInputCloner);
     }
-    return valueToCompare === value;
   }
   const useFieldInput = (field, props) => {
     return React.useMemo(() => {
@@ -9158,7 +9170,7 @@ var __publicField = (obj, key, value) => {
     return /* @__PURE__ */ jsxRuntime.jsx(Card, { children: /* @__PURE__ */ jsxRuntime.jsxs(blocks.Flex, { direction: "column", gap: "3", children: [
       /* @__PURE__ */ jsxRuntime.jsxs(blocks.Flex, { direction: "column", children: [
         /* @__PURE__ */ jsxRuntime.jsx(Heading, { as: "h3", size: "3", children: label }),
-        /* @__PURE__ */ jsxRuntime.jsx(blocks.Text, { className: styles$4.description, children: description2 })
+        /* @__PURE__ */ jsxRuntime.jsx(blocks.Text, { className: styles$5.description, children: description2 })
       ] }),
       inputs
     ] }) });
@@ -9177,85 +9189,89 @@ var __publicField = (obj, key, value) => {
         this.condition = null;
       }
     }
-    static getFieldCreationSchema(options) {
+    static getFieldCreationSchema(options, parentPath) {
       if (options.length === 0)
         return [];
+      const path = parentPath ? `${parentPath}.` : "";
       return [
-        new BooleanField({
-          label: "Conditional",
-          description: "Conditionally show or hide this section.",
-          identifier: "conditional",
-          required: false
-        }),
-        // Declare a section that will hold options for the condition (if any).
-        new _FieldSection({
-          label: "Conditional settings",
-          identifier: "conditional-settings",
-          // This section will only be rendered if the above "Conditional" field is checked.
-          condition: {
-            identifier: "conditional",
-            value: true
-          },
-          // These are the options of the condition.
-          fields: [
-            // Declare a select field that will be used to select the field against which we will check the
-            // condition. This must be selected before the next field is rendered.
-            new SelectField({
-              label: "Field",
-              description: "The field to use for the condition.",
-              // The options (for the field against which we will check the condition) are all the labels of
-              // the fields in the previous section(s) (or fields declared before with no section) that
-              // support conditions. We pass in both the label and the identifier of each supported field. The
-              // identifier becomes the value of the option.
-              options: options.map((option) => {
-                if (!option.label)
-                  return null;
-                if (option.type === "upload")
-                  return null;
-                return {
-                  label: option.label,
-                  value: option.identifier
-                };
-              }).filter((option) => !!option),
-              identifier: "condition.identifier",
-              required: true
-            }),
-            // Declare a custom field that will be used to input a value for the condition. The value of the
-            // conditional field selected in the previous step must be equal to the value the user inputs into
-            // this field for the section to be rendered.
-            new FieldInputClonerField({
-              label: "Value",
-              identifier: "condition.value",
-              required: true,
-              clonedFieldIdentifier: "condition.identifier",
-              getFieldToClone(identifier) {
-                if (!identifier) {
-                  return null;
-                }
-                const option = options.find((option2) => option2.identifier === identifier);
-                if (!option) {
-                  console.error("Could not find field with identifier", identifier);
-                  return null;
+        {
+          field: new BooleanField({
+            label: "Conditionally render section",
+            identifier: `${path}conditional`,
+            required: false
+          }),
+          showDirectly: true
+        },
+        {
+          // Declare a section that will hold options for the condition (if any).
+          field: new _FieldSection({
+            label: "Conditional settings",
+            identifier: `${path}conditional-settings`,
+            // This section will only be rendered if the above "Conditional" field is checked.
+            condition: {
+              identifier: `${path}conditional`,
+              value: true
+            },
+            // These are the options of the condition.
+            fields: [
+              // Declare a select field that will be used to select the field against which we will check the
+              // condition. This must be selected before the next field is rendered.
+              new SelectField({
+                label: "Field",
+                description: "The field to use for the condition.",
+                // The options (for the field against which we will check the condition) are all the labels of
+                // the fields in the previous section(s) (or fields declared before with no section) that
+                // support conditions. We pass in both the label and the identifier of each supported field. The
+                // identifier becomes the value of the option.
+                options: options.map((option) => {
+                  if (!option.label)
+                    return null;
+                  if (option.type === "upload")
+                    return null;
+                  return {
+                    label: option.label,
+                    value: option.identifier
+                  };
+                }).filter((option) => !!option),
+                identifier: `${path}condition.identifier`,
+                required: true
+              }),
+              // Declare a custom field that will be used to input a value for the condition. The value of the
+              // conditional field selected in the previous step must be equal to the value the user inputs into
+              // this field for the section to be rendered.
+              new FieldInputClonerField({
+                label: "Value",
+                identifier: `${path}condition.value`,
+                required: true,
+                clonedFieldIdentifier: `${path}condition.identifier`,
+                getFieldToClone(identifier) {
+                  if (!identifier) {
+                    return null;
+                  }
+                  const option = options.find((option2) => option2.identifier === identifier);
+                  if (!option) {
+                    console.error("Could not find field with identifier", identifier);
+                    return null;
+                  }
+                  return {
+                    ...option,
+                    // Override some options to make it make sense in the context and to make it work with the framework.
+                    label: "Value",
+                    identifier: `${path}condition.value`,
+                    description: "The value to compare against.",
+                    required: option.type !== "boolean"
+                  };
                 }
-                return {
-                  ...option,
-                  // Override some options to make it make sense in the context and to make it work with the framework.
-                  label: "Value",
-                  identifier: "condition.value",
-                  description: "The value to compare against.",
-                  required: option.type !== "boolean"
-                };
-              }
-            })
-          ]
-        })
+              })
+            ]
+          }),
+          showDirectly: false
+        }
       ];
     }
     static deserialize(data) {
       if (data.type !== "section")
         throw new Error("Invalid type");
-      if (!Array.isArray(data.fields))
-        throw new Error(`Invalid fields: ${data.fields} (not an array)`);
       const fields = data.fields.map(deserializeField);
       return new _FieldSection({ ...data, fields });
     }
@@ -9289,89 +9305,258 @@ var __publicField = (obj, key, value) => {
   __publicField(_FieldSection, "fieldTypeName", "Section");
   __publicField(_FieldSection, "fieldTypeDescription", "Sections can be useful for grouping fields together. They can also be conditionally shown or hidden.");
   let FieldSection = _FieldSection;
-  const hasKeys = (errors) => {
-    return Object.keys(errors).length > 0;
+  const deserializeField = (serializedField) => {
+    const fieldType = serializedField.type;
+    const fieldCls = FieldTypeToClsMapping[fieldType];
+    return fieldCls.deserialize(serializedField);
   };
-  const validateForm = (schema, form) => {
-    const errors = {};
-    for (const field of schema.fields) {
-      if (field instanceof FieldSection) {
-        if (field.condition) {
-          const { identifier } = field.condition;
-          if (!isConditionMet(field.condition, get(form, identifier))) {
-            continue;
-          }
-        }
-        Object.assign(errors, field.getErrors(form));
-      } else {
-        if (!(field instanceof BaseField)) {
-          throw new Error("Invalid field type");
-        }
-        const id = field.getId();
-        const error = field.getError(get(form, id), form);
-        if (error)
-          set(errors, id, error);
-      }
+  const deserialize = (serialized) => {
+    if (serialized.type === "section") {
+      return FieldSection.deserialize(serialized);
     }
-    if (hasKeys(errors))
-      return errors;
+    return deserializeField(serialized);
   };
-  const uncontrolledValues = [null, void 0];
-  const initialFormValues = (fields, values) => {
-    return fields.reduce(
-      (acc, field) => {
-        if (field instanceof FieldSection) {
-          return { ...acc, ...initialFormValues(field.fields, values) };
-        }
-        if (uncontrolledValues.includes(get(acc, field.getId()))) {
-          set(acc, field.getId(), "");
-        }
-        return acc;
-      },
-      // TODO: Had to do this because of this error:
-      //  > Uncaught TypeError: can't define property "description":
-      //  > Object is not extensible"
-      //  This means that we can't mutate `acc` because it's frozen for some
-      //  unknown reason.
-      cloneDeep(values)
-    );
+  function formRevisionToSchema(formRevision, meta = {}) {
+    const { readonly = false } = meta;
+    return {
+      title: formRevision.title,
+      description: formRevision.description,
+      fields: formRevision.fields.map((serializedField) => deserialize(serializedField)),
+      meta: { readonly }
+    };
+  }
+  function valueIsFile(v) {
+    return Array.isArray(v) && v.some((v2) => v2 instanceof File || v2 instanceof Promise);
+  }
+  const valueIsFormikUserFormRevision = (form) => {
+    return "fields" in form;
   };
-  const defaultHandleSubmit = () => {
-    throw new Error("onSubmit must be provided if form is not readonly.");
+  function isConditionMet(condition, value) {
+    if (!condition)
+      return true;
+    if (valueIsFile(value) || valueIsFile(condition.value))
+      throw new Error("Conditions do not support file uploads");
+    const valueAsPrimitive = Array.isArray(value) ? value.map((v) => typeof v === "string" ? v : v.value) : value;
+    const valueToCompare = Array.isArray(condition.value) ? condition.value.map((v) => typeof v === "string" ? v : v.value) : condition.value;
+    if (Array.isArray(valueToCompare) && Array.isArray(valueAsPrimitive)) {
+      for (const v of valueToCompare) {
+        if (!valueAsPrimitive.includes(v))
+          return false;
+      }
+      return true;
+    }
+    return valueToCompare === value;
+  }
+  const emptyNumberField = {
+    ...emptyBaseField,
+    type: "number",
+    minimum: Number.MIN_SAFE_INTEGER,
+    maximum: Number.MAX_SAFE_INTEGER,
+    integers: false
   };
-  const FormRenderer = React.memo(
-    React.forwardRef((props, ref) => {
+  const _NumberField = class _NumberField extends BaseField {
+    constructor(options) {
       const {
-        schema,
-        values = {},
-        onSubmit = defaultHandleSubmit,
-        submitText = "Submit",
-        cancelText,
-        onCancel,
-        onDirty,
-        onDirtyChange,
-        // if the title isn't provided, hide it by default
-        hideTitle = !schema.title,
-        hideDescription,
-        className
-      } = props;
-      const { readonly } = schema.meta;
-      const formId2 = React.useMemo(() => crypto.randomUUID(), []);
-      const formik$1 = formik.useFormik({
-        initialValues: initialFormValues(schema.fields, values),
-        onSubmit,
-        validate: (form) => validateForm(schema, form),
-        // only validate the entire form on submit
-        validateOnBlur: false,
-        validateOnChange: false
-      });
+        minimum = Number.MIN_SAFE_INTEGER,
+        maximum = Number.MAX_SAFE_INTEGER,
+        integers = false,
+        ...base
+      } = options;
+      super({ ...base, type: "number" });
+      __publicField(this, "minimum");
+      __publicField(this, "maximum");
+      __publicField(this, "integers");
+      this.minimum = minimum;
+      this.maximum = maximum;
+      this.integers = integers;
+    }
+    getValueFromChangeEvent(event) {
+      const number = Number.parseFloat(event.target.value);
+      if (Number.isNaN(number))
+        return "";
+      return number;
+    }
+    static getFieldCreationSchema(parentPath = "") {
+      const path = parentPath && `${parentPath}.`;
+      return [
+        {
+          field: new _NumberField({
+            label: "Minimum",
+            description: "Minimum value",
+            integers: true,
+            required: false,
+            identifier: `${path}minimum`,
+            formValidators: [this._validateMin(parentPath)]
+          }),
+          showDirectly: false
+        },
+        {
+          field: new _NumberField({
+            label: "Maximum",
+            description: "Maximum value",
+            integers: true,
+            required: false,
+            identifier: `${path}maximum`,
+            formValidators: [this._validateMax(parentPath)]
+          }),
+          showDirectly: false
+        },
+        {
+          field: new BooleanField({
+            label: "Integers",
+            description: "Whole numbers only",
+            required: false,
+            identifier: `${path}integers`
+          }),
+          showDirectly: false
+        }
+      ];
+    }
+    getFieldValidators() {
+      const validators = super.getFieldValidators();
+      const min = this.minimum;
+      const max = this.maximum;
+      if (typeof min === "number") {
+        validators.push((value) => {
+          if (typeof value === "number" && value < min) {
+            return `Must be at least ${this.minimum}.`;
+          }
+        });
+      }
+      if (typeof max === "number") {
+        validators.push((value) => {
+          if (typeof value === "number" && value > max) {
+            return `Must be at most ${this.maximum}.`;
+          }
+        });
+      }
+      if (this.integers) {
+        validators.push((value) => {
+          if (typeof value === "number" && !Number.isInteger(value)) {
+            return "Must be a whole number.";
+          }
+        });
+      }
+      return validators;
+    }
+    serialize() {
+      return {
+        ...super._serialize(),
+        minimum: this.minimum,
+        maximum: this.maximum,
+        integers: this.integers
+      };
+    }
+    static deserialize(data) {
+      if (data.type !== "number")
+        throw new Error("Type mismatch.");
+      return new _NumberField(data);
+    }
+    getInput(props) {
+      return /* @__PURE__ */ jsxRuntime.jsx(NumberInput$1, { field: this, ...props });
+    }
+  };
+  __publicField(_NumberField, "fieldTypeName", "Number");
+  __publicField(_NumberField, "fieldTypeDescription", "Allows specifying a number within a given range.");
+  __publicField(_NumberField, "Icon", FontFamilyIcon);
+  __publicField(_NumberField, "_validateMin", (path) => (value, allValues) => {
+    const field = valueIsFormikUserFormRevision(allValues) ? get(allValues, path) : allValues;
+    if (typeof field.maximum === "number" && typeof value === "number" && field.maximum < value) {
+      return "Minimum cannot be greater than minimum.";
+    }
+    return null;
+  });
+  __publicField(_NumberField, "_validateMax", (path) => (value, allValues) => {
+    const field = valueIsFormikUserFormRevision(allValues) ? get(allValues, path) : allValues;
+    if (typeof field.minimum === "number" && typeof value === "number" && field.minimum > value) {
+      return "Maximum cannot be less than minimum.";
+    }
+    return null;
+  });
+  let NumberField = _NumberField;
+  const hasKeys = (errors) => {
+    return Object.keys(errors).length > 0;
+  };
+  const validateForm = (schema, form) => {
+    const errors = {};
+    for (const field of schema.fields) {
+      if (field instanceof FieldSection) {
+        if (field.condition) {
+          const { identifier } = field.condition;
+          if (!isConditionMet(field.condition, get(form, identifier))) {
+            continue;
+          }
+        }
+        Object.assign(errors, field.getErrors(form));
+      } else {
+        if (!(field instanceof BaseField)) {
+          throw new Error("Invalid field type");
+        }
+        const id = field.getId();
+        const error = field.getError(get(form, id), form);
+        if (error)
+          set(errors, id, error);
+      }
+    }
+    if (hasKeys(errors))
+      return errors;
+  };
+  const uncontrolledValues = [null, void 0];
+  const initialFormValues = (fields, values) => {
+    return fields.reduce(
+      (acc, field) => {
+        if (field instanceof FieldSection) {
+          return { ...acc, ...initialFormValues(field.fields, values) };
+        }
+        if (uncontrolledValues.includes(get(acc, field.getId()))) {
+          set(acc, field.getId(), "");
+        }
+        return acc;
+      },
+      // TODO: Had to do this because of this error:
+      //  > Uncaught TypeError: can't define property "description":
+      //  > Object is not extensible"
+      //  This means that we can't mutate `acc` because it's frozen for some
+      //  unknown reason.
+      cloneDeep(values)
+    );
+  };
+  const defaultHandleSubmit = () => {
+    throw new Error("onSubmit must be provided if form is not readonly.");
+  };
+  const FormRenderer = React.memo(
+    React.forwardRef((props, ref) => {
+      const {
+        schema,
+        values = {},
+        onSubmit = defaultHandleSubmit,
+        submitText = "Submit",
+        cancelText,
+        onCancel,
+        onDirty,
+        onDirtyChange,
+        // if the title isn't provided, hide it by default
+        hideTitle = !schema.title,
+        hideDescription,
+        className
+      } = props;
+      const { readonly } = schema.meta;
+      const formId2 = React.useMemo(() => crypto.randomUUID(), []);
+      const formik$1 = formik.useFormik({
+        initialValues: initialFormValues(schema.fields, values),
+        onSubmit,
+        validate: (form) => validateForm(schema, form),
+        // only validate the entire form on submit
+        validateOnBlur: false,
+        validateOnChange: false
+      });
       const { dirty } = formik$1;
       const Title = React.useMemo(
         () => typeof schema.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(Heading, { children: schema.title }) : schema.title,
         [schema.title]
       );
       const Description = React.useMemo(
-        () => typeof schema.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(blocks.Text, { className: styles$4.description, children: schema.description }) : schema.description,
+        () => typeof schema.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(blocks.Text, { className: styles$5.description, children: schema.description }) : schema.description,
         [schema.description]
       );
       const inputs = useFieldInputs(schema.fields, { formId: formId2, disabled: readonly });
@@ -9387,10 +9572,23 @@ var __publicField = (obj, key, value) => {
           !hideDescription && Description
         ] }) }),
         inputs,
-        !readonly && /* @__PURE__ */ jsxRuntime.jsxs(blocks.Flex, { justify: "end", gap: "2", children: [
-          cancelText && /* @__PURE__ */ jsxRuntime.jsx(blocks.Button, { type: "button", variant: "soft", onClick: onCancel, children: cancelText }),
-          /* @__PURE__ */ jsxRuntime.jsx(blocks.Button, { type: "submit", disabled: !formik$1.isValid, children: submitText })
-        ] })
+        !readonly && /* @__PURE__ */ jsxRuntime.jsxs(
+          blocks.Flex,
+          {
+            justify: "end",
+            gap: "2",
+            align: "center",
+            style: {
+              position: "sticky",
+              bottom: "0px",
+              paddingBottom: "10px"
+            },
+            children: [
+              cancelText && /* @__PURE__ */ jsxRuntime.jsx(blocks.Button, { type: "button", variant: "soft", onClick: onCancel, children: cancelText }),
+              /* @__PURE__ */ jsxRuntime.jsx(blocks.Button, { type: "submit", disabled: !formik$1.isValid, children: submitText })
+            ]
+          }
+        )
       ] }) }) });
     })
   );
@@ -9435,7 +9633,7 @@ var __publicField = (obj, key, value) => {
   );
   const favoriteIcon = "_favoriteIcon_1bixi_1";
   const regularIcon = "_regularIcon_1bixi_9";
-  const styles$1 = {
+  const styles$2 = {
     favoriteIcon,
     regularIcon
   };
@@ -9547,7 +9745,7 @@ var __publicField = (obj, key, value) => {
             /* @__PURE__ */ jsxRuntime.jsx(
               blocks.IconButton,
               {
-                className: classNames$1(form.favorite ? styles$1.favoriteIcon : styles$1.regularIcon),
+                className: classNames$1(form.favorite ? styles$2.favoriteIcon : styles$2.regularIcon),
                 variant: "ghost",
                 onClick: handleFavoriteClick,
                 "aria-label": form.favorite ? "Favorite form" : "Standard form",
@@ -9573,7 +9771,7 @@ var __publicField = (obj, key, value) => {
   };
   const submissionsContainer = "_submissionsContainer_9iirt_1";
   const stopHorizontalOverflow = "_stopHorizontalOverflow_9iirt_6";
-  const styles = {
+  const styles$1 = {
     submissionsContainer,
     stopHorizontalOverflow
   };
@@ -9604,7 +9802,7 @@ var __publicField = (obj, key, value) => {
       }
     }, [submission, onSubmissionClick]);
     const row = /* @__PURE__ */ jsxRuntime.jsx(blocks.ButtonList.Item, { onClick: handleClick, asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(blocks.Flex, { grow: "1", width: "100%", p: "2", gap: "2", justify: "between", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(blocks.Flex, { gap: "2", align: "center", className: styles.stopHorizontalOverflow, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(blocks.Flex, { gap: "2", align: "center", className: styles$1.stopHorizontalOverflow, children: [
         /* @__PURE__ */ jsxRuntime.jsx(Avatar, { src: creatorProfileSrc, size: "1", fallback: creatorProfileFallback }),
         /* @__PURE__ */ jsxRuntime.jsx(blocks.Text, { size: "2", noWrap: true, children: labelType === "creator" ? (createdBy || currentUser).username : revision.title })
       ] }),
@@ -9648,7 +9846,7 @@ var __publicField = (obj, key, value) => {
     return /* @__PURE__ */ jsxRuntime.jsx(
       blocks.ButtonList.Root,
       {
-        className: classNames$1(styles.submissionsContainer, className),
+        className: classNames$1(styles$1.submissionsContainer, className),
         size: "small",
         variant,
         before: !compact && /* @__PURE__ */ jsxRuntime.jsxs(blocks.Text, { severity: "info", children: [
@@ -9672,23 +9870,22 @@ var __publicField = (obj, key, value) => {
     );
   });
   const PatchField = React.memo((props) => {
-    console.log("PatchField props:", props);
     const { name, render } = props;
     const { submitForm } = formik.useFormikContext();
     const [fieldProps, _meta, helpers] = formik.useField(name);
-    const ret = React.useMemo(() => {
+    return React.useMemo(() => {
       const setValue = (value) => {
         void helpers.setValue(value, false);
       };
       return render({
         value: fieldProps.value,
+        meta: _meta,
         setValue,
         patchValue: () => {
           void submitForm();
         }
       });
-    }, [submitForm, helpers, fieldProps.value, render]);
-    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: ret });
+    }, [render, fieldProps.value, _meta, submitForm, helpers]);
   });
   PatchField.displayName = "PatchField";
   const PatchFormProvider = React.memo(
@@ -9737,365 +9934,437 @@ var __publicField = (obj, key, value) => {
       return /* @__PURE__ */ jsxRuntime.jsx(formik.FormikProvider, { value: formik$1, children: /* @__PURE__ */ jsxRuntime.jsx("form", { ...rest, ref, onSubmit: formik$1.handleSubmit, children }) });
     })
   );
-  const CompleteFieldTypeToClsMapping = {
-    ...FieldTypeToClsMapping,
-    section: FieldSection
-  };
-  const FieldToChoose = React.memo(function FieldToChoose2(props) {
-    const { field, setFieldType } = props;
-    const typeName = field.fieldTypeName;
-    const description2 = field.fieldTypeDescription;
-    const Icon = field.Icon;
-    return /* @__PURE__ */ jsxRuntime.jsxs(blocks.Flex, { gap: "4", align: "center", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(blocks.Button, { type: "button", variant: "surface", onClick: setFieldType, style: { width: "135px" }, children: /* @__PURE__ */ jsxRuntime.jsxs(blocks.Flex, { gap: "3", align: "center", grow: "1", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Icon, {}),
-        typeName
-      ] }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(blocks.Text, { children: description2 })
-    ] });
-  });
+  const formId = "form-builder";
   const fieldsToChoose = [
     ["string", "text"],
     ["select", "multi-select", "upload"],
     ["boolean", "date", "number", "multi-string"]
   ];
-  const indexOfLastFieldGroup = fieldsToChoose.length - 1;
-  const ChooseFieldToAdd = React.memo(function ChooseFieldToAdd2(props) {
-    const { setFieldType } = props;
-    return /* @__PURE__ */ jsxRuntime.jsx(blocks.Flex, { direction: "column", gap: "3", children: fieldsToChoose.map((fieldGroup, index2) => /* @__PURE__ */ jsxRuntime.jsxs(blocks.Flex, { direction: "column", gap: "3", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(blocks.Flex, { direction: "column", gap: "2", children: fieldGroup.map((identifier) => /* @__PURE__ */ jsxRuntime.jsx(
-        FieldToChoose,
-        {
-          field: FieldTypeToClsMapping[identifier],
-          setFieldType: () => {
-            setFieldType(identifier);
-          }
-        },
-        identifier
-      )) }),
-      index2 < indexOfLastFieldGroup && /* @__PURE__ */ jsxRuntime.jsx(blocks.Separator, { size: "4" })
-    ] }, index2)) });
-  });
-  const validateNewFieldName = (takenLabels) => {
-    return (value) => {
-      if (!value || typeof value !== "string")
-        return;
-      if (takenLabels.includes(value.trim())) {
-        return "This name is already taken.";
-      }
-    };
-  };
-  const commonFields = (takenLabels, type) => {
-    const base = [
-      new StringField({
-        label: "Label",
-        required: true,
-        maxLength: 200,
-        identifier: "label",
-        fieldValidators: [validateNewFieldName(takenLabels)]
-      }),
-      new TextField({
-        label: "Description",
-        required: false,
-        maxLength: 1e3,
-        identifier: "description"
-      })
-    ];
-    if (type === "section")
-      return base;
-    return [
-      ...base,
-      new BooleanField({ label: "Required", description: null, required: false, identifier: "required" })
-    ];
+  const CompleteFieldTypeToClsMapping = {
+    ...FieldTypeToClsMapping,
+    section: FieldSection
   };
-  const FieldOptionsForm = React.memo(function FieldOptionsForm2(props) {
-    const { fieldType, handleCancel, handleCreateField, handleDirtyChange, defaultField, conditionalSourceFields } = props;
-    const fieldCls = CompleteFieldTypeToClsMapping[fieldType];
-    const formik$1 = formik.useFormikContext();
-    const schema = React.useMemo(() => {
-      const takenFieldLabels = getTakenFieldLabels(formik$1.values.fields).filter((id) => id !== (defaultField == null ? void 0 : defaultField.label));
-      let fields = commonFields(takenFieldLabels, fieldType);
-      if (fieldCls === FieldSection) {
-        if (conditionalSourceFields === void 0) {
-          throw new Error("Conditional source fields must be provided when changing sections.");
-        }
-        fields = fields.concat(fieldCls.getFieldCreationSchema(conditionalSourceFields));
-      } else {
-        if (!(fieldCls.prototype instanceof BaseField)) {
-          throw new Error(`Field must be an instance of BaseField. Got ${fieldCls.toString()}.`);
-        }
-        fields = [...fields, ...fieldCls.getFieldCreationSchema()];
-      }
-      return {
-        fields,
-        meta: { readonly: false },
-        // using the dialog title as the form title
-        title: null
-      };
-    }, [formik$1.values.fields, fieldType, fieldCls, defaultField == null ? void 0 : defaultField.label, conditionalSourceFields]);
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      FormRenderer,
-      {
-        schema,
-        values: defaultField,
-        onSubmit: handleCreateField,
-        cancelText: defaultField ? void 0 : "Back",
-        onCancel: handleCancel,
-        onDirtyChange: handleDirtyChange
-      }
-    );
-  });
-  const FieldBuilder = React.memo(function FieldBuilder2(props) {
-    const { parentPath, index: index2, isOpen, setIsOpen, initial, editing, conditionalSourceFields } = props;
-    const [fieldType, setFieldType] = React.useState();
-    const [formIsDirty, setFormIsDirty] = React.useState(false);
-    const type = (initial == null ? void 0 : initial.type) ?? fieldType;
-    const typeName = type ? CompleteFieldTypeToClsMapping[type].fieldTypeName : void 0;
-    const { setFieldValue, values } = formik.useFormikContext();
-    if (editing && !initial)
-      throw new Error("Initial field must be provided if editing is true.");
-    const openConfirmDiscardChangesDialog = blocks.useDiscardAlertDialog();
-    const showChooseField = !type && !editing && !initial;
-    const title2 = showChooseField ? "Choose a field type" : `${typeName} settings`;
-    const description2 = showChooseField ? "Select a field type to add to this section." : (typeName == null ? void 0 : typeName.toLowerCase()) === "section" ? "Customize your section" : `Customize your ${typeName == null ? void 0 : typeName.toLowerCase()} field.`;
-    const handleCancel = React.useCallback(() => {
-      setFieldType(void 0);
-      setFormIsDirty(false);
-    }, []);
-    const handleCloseDialog = React.useCallback(() => {
-      if (!formIsDirty) {
-        setFieldType(void 0);
-        setIsOpen(false);
-      } else {
-        openConfirmDiscardChangesDialog({
-          onDiscard: () => {
-            setFieldType(void 0);
-            setIsOpen(false);
-          }
+  const useFieldTypeItems = (onSelect = () => null) => {
+    return React.useMemo(() => {
+      return fieldsToChoose.map((fieldGroup) => {
+        return fieldGroup.map((identifier) => {
+          const field = FieldTypeToClsMapping[identifier];
+          const Icon = field.Icon;
+          return {
+            content: /* @__PURE__ */ jsxRuntime.jsxs(blocks.Flex, { align: "center", gap: "2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(Icon, {}),
+              /* @__PURE__ */ jsxRuntime.jsx(blocks.Text, { children: field.fieldTypeName })
+            ] }, identifier),
+            value: identifier,
+            onSelect: () => {
+              onSelect(identifier);
+            }
+          };
         });
-      }
-    }, [formIsDirty, openConfirmDiscardChangesDialog, setIsOpen]);
-    const handleCreateField = React.useCallback(
-      (form) => {
-        const { label } = form;
-        if (!type)
-          throw new Error("Field type must be selected before creating a field.");
-        if (!label || typeof label !== "string")
-          throw new Error("Label must be provided before creating a field.");
-        const field = deserialize({
-          type,
-          ...form,
-          identifier: makeIdentifier(form.identifier, label)
-        }).serialize();
-        const parent = get(values, parentPath);
-        if (parent === void 0) {
-          throw new Error("Parent path must point to an existing field.");
-        }
-        let newFields;
-        if (!Array.isArray(parent))
-          throw new Error("Parent path must point to an array.");
-        if (editing) {
-          newFields = replace(parent, index2, field);
-        } else {
-          newFields = insert(parent, index2, field);
-        }
-        void setFieldValue(parentPath, newFields).then();
-        setIsOpen(false);
-      },
-      [type, values, parentPath, editing, setFieldValue, setIsOpen, index2]
-    );
-    const handleDirtyChange = React.useCallback((dirty) => {
-      setFormIsDirty(dirty);
-    }, []);
-    const dialogContent = React.useCallback(() => {
-      if (showChooseField) {
-        return /* @__PURE__ */ jsxRuntime.jsx(ChooseFieldToAdd, { setFieldType });
-      }
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        FieldOptionsForm,
-        {
-          conditionalSourceFields,
-          handleCancel,
-          handleCreateField,
-          fieldType: type,
-          defaultField: initial,
-          handleDirtyChange
-        }
-      );
-    }, [conditionalSourceFields, handleCancel, handleCreateField, handleDirtyChange, initial, showChooseField, type]);
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      blocks.Dialog,
-      {
-        title: title2,
-        description: description2,
-        content: dialogContent,
-        open: isOpen,
-        onOpenChange: handleCloseDialog
-      }
-    );
+      });
+    }, [onSelect]);
+  };
+  const FieldTypeDropdown = React.memo((props) => {
+    const { setFieldType, children } = props;
+    const fieldTypeItems = useFieldTypeItems(setFieldType);
+    return /* @__PURE__ */ jsxRuntime.jsx(blocks.DropdownItemMenu, { trigger: children, items: fieldTypeItems.flat() });
   });
+  FieldTypeDropdown.displayName = "FieldTypeDropdown";
   const forMobile = (mobile, display) => ({
     initial: mobile ? display : "none",
     sm: mobile ? "none" : display
   });
-  const FieldActions = React.memo(function FieldActions2(props) {
-    const { remove: remove2, dragHandleProps, editProps, insertAfterProps, duplicateProps } = props;
-    const [isEditDialogOpen, setIsEditDialogOpen] = React.useState(false);
-    const [isDuplicateDialogOpen, setIsDuplicateDialogOpen] = React.useState(false);
-    const [isAddDialogOpen, setIsAddDialogOpen] = React.useState(false);
-    const actions = React.useMemo(
-      () => [
-        {
-          SelectedContent: FieldBuilder,
-          selectedContentProps: { ...editProps, isOpen: isEditDialogOpen, setIsOpen: setIsEditDialogOpen },
-          Icon: Pencil1Icon,
-          text: "Edit",
-          buttonProps: {
-            onClick: () => {
-              setIsEditDialogOpen(true);
-            }
-          }
-        },
-        {
-          Icon: TrashIcon,
-          buttonProps: {
-            onClick: remove2
-          },
-          text: "Delete"
-        },
-        {
-          SelectedContent: FieldBuilder,
-          selectedContentProps: {
-            ...duplicateProps,
-            isOpen: isDuplicateDialogOpen,
-            setIsOpen: setIsDuplicateDialogOpen
-          },
-          Icon: CopyIcon,
-          text: "Duplicate",
-          buttonProps: {
-            onClick: () => {
-              setIsDuplicateDialogOpen(true);
-            }
-          }
-        },
-        {
-          SelectedContent: FieldBuilder,
-          selectedContentProps: {
-            ...insertAfterProps,
-            isOpen: isAddDialogOpen,
-            setIsOpen: setIsAddDialogOpen
+  const FieldActions = React.memo((props) => {
+    const { index: index2, sectionIndex, type, remove: remove2, duplicate, addAfter, move } = props;
+    if (type !== "section" && !addAfter) {
+      throw new Error("addAfter is required for non-section fields");
+    }
+    const { values } = formik.useFormikContext();
+    const fieldTypeItems = useFieldTypeItems(addAfter);
+    const [actions, mobileActions] = React.useMemo(() => {
+      const getActions = (isMobile) => {
+        const actions2 = [
+          {
+            Icon: TrashIcon,
+            buttonProps: { onClick: remove2 },
+            key: "delete",
+            text: "Delete"
           },
-          Icon: PlusIcon,
-          text: "Add after",
-          buttonProps: {
-            onClick: () => {
-              setIsAddDialogOpen(true);
-            }
+          {
+            Icon: CopyIcon,
+            key: "duplicate",
+            text: "Duplicate",
+            buttonProps: { onClick: duplicate }
           }
-        },
-        {
-          // 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__ */ jsxRuntime.jsx("div", { ...props2, children: /* @__PURE__ */ jsxRuntime.jsx(DragHandleDots2Icon, {}) }),
-          text: "Reorder",
-          disableOnMobile: true,
-          buttonProps: { ...dragHandleProps, asChild: true }
+        ];
+        if (type !== "section") {
+          actions2.push({
+            // We want to show a dropdown with field types if "Add after" is clicked
+            isComponent: true,
+            Component: isMobile ? /* @__PURE__ */ jsxRuntime.jsx(blocks.DropdownMenuItemGroup, { items: fieldTypeItems.flat() }) : /* @__PURE__ */ jsxRuntime.jsx(FieldTypeDropdown, { setFieldType: addAfter, children: /* @__PURE__ */ jsxRuntime.jsx(blocks.IconButton, { type: "button", variant: "ghost", "aria-label": "Add after", children: /* @__PURE__ */ jsxRuntime.jsx(PlusIcon, {}) }) }),
+            Icon: PlusIcon,
+            key: "add",
+            text: "Add after"
+          });
         }
-      ],
-      [
-        dragHandleProps,
-        duplicateProps,
-        editProps,
-        insertAfterProps,
-        isAddDialogOpen,
-        isDuplicateDialogOpen,
-        isEditDialogOpen,
-        remove2
-      ]
-    );
-    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(blocks.Flex, { gap: "4", display: forMobile(false, "flex"), children: actions.map((action) => {
-        return /* @__PURE__ */ jsxRuntime.jsxs(React.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            blocks.IconButton,
-            {
-              type: "button",
-              variant: "ghost",
-              "aria-label": action.text,
-              ...action.buttonProps,
-              children: /* @__PURE__ */ jsxRuntime.jsx(action.Icon, {})
+        if (sectionIndex === void 0 && index2 !== 0 || sectionIndex !== void 0 && (sectionIndex !== 0 || index2 !== 0)) {
+          actions2.push({
+            Icon: ArrowUpIcon,
+            key: "moveUp",
+            text: "Move up",
+            buttonProps: {
+              onClick: () => {
+                move("up");
+              }
             }
-          ),
-          action.SelectedContent && /* @__PURE__ */ jsxRuntime.jsx(action.SelectedContent, { ...action.selectedContentProps })
-        ] }, action.text);
+          });
+        }
+        if (sectionIndex === void 0 && index2 !== values.fields.length - 1 || sectionIndex !== void 0 && (sectionIndex < values.fields.length - 1 || index2 !== values.fields[sectionIndex].fields.length - 1)) {
+          actions2.push({
+            Icon: ArrowDownIcon,
+            key: "moveDown",
+            text: "Move down",
+            buttonProps: {
+              onClick: () => {
+                move("down");
+              }
+            }
+          });
+        }
+        return actions2;
+      };
+      return [getActions(false), getActions(true)];
+    }, [addAfter, duplicate, fieldTypeItems, index2, move, remove2, sectionIndex, type, values.fields]);
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(blocks.Flex, { gap: "4", display: forMobile(false, "flex"), children: actions.map((Action) => {
+        if (Action.isComponent) {
+          return Action.Component;
+        }
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          blocks.IconButton,
+          {
+            type: "button",
+            variant: "ghost",
+            severity: Action.key.startsWith("move") ? "info" : "primary",
+            "aria-label": Action.text,
+            ...Action.buttonProps,
+            children: /* @__PURE__ */ jsxRuntime.jsx(Action.Icon, {})
+          },
+          Action.key
+        );
       }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(Box, { display: forMobile(true, "block"), children: /* @__PURE__ */ jsxRuntime.jsx(
-        blocks.DropdownItemMenu,
+      /* @__PURE__ */ jsxRuntime.jsx(Box, { display: forMobile(true, "block"), children: /* @__PURE__ */ jsxRuntime.jsxs(
+        blocks.DropdownMenu,
         {
           trigger: /* @__PURE__ */ jsxRuntime.jsx(blocks.IconButton, { variant: "ghost", "aria-label": "Actions menu", children: /* @__PURE__ */ jsxRuntime.jsx(DotsVerticalIcon, {}) }),
-          items: actions.map((action) => {
-            if (action.disableOnMobile)
-              return null;
-            return {
-              ...action.buttonProps,
-              onSelect: (event) => {
-                var _a2, _b;
-                (_b = (_a2 = action.buttonProps) == null ? void 0 : _a2.onClick) == null ? void 0 : _b.call(
-                  _a2,
-                  // TODO: Clean up types
-                  event
-                );
-              },
-              content: /* @__PURE__ */ jsxRuntime.jsxs(React.Fragment, { children: [
-                /* @__PURE__ */ jsxRuntime.jsxs(blocks.Flex, { gap: "2", align: "center", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(action.Icon, {}),
-                  action.text
-                ] }),
-                action.SelectedContent && /* @__PURE__ */ jsxRuntime.jsx(action.SelectedContent, { ...action.selectedContentProps })
-              ] }, action.text)
-            };
-          }).filter((x) => x !== null)
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              blocks.DropdownMenuItemGroup,
+              {
+                items: mobileActions.filter((Action) => !Action.isComponent).map((Action) => {
+                  var _a2;
+                  return {
+                    content: /* @__PURE__ */ jsxRuntime.jsxs(blocks.Flex, { gap: "2", align: "center", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(Action.Icon, {}),
+                      Action.text
+                    ] }, Action.key),
+                    value: Action.key,
+                    onSelect: (_a2 = Action.buttonProps) == null ? void 0 : _a2.onClick
+                  };
+                })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              blocks.DropdownMenuSubMenuGroup,
+              {
+                items: mobileActions.filter((Action) => Action.isComponent).map((Action) => ({
+                  content: /* @__PURE__ */ jsxRuntime.jsxs(blocks.Flex, { gap: "2", align: "center", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(Action.Icon, {}),
+                    Action.text
+                  ] }, Action.key),
+                  subContent: Action.Component,
+                  triggerIndicator: null
+                }))
+              }
+            )
+          ]
         }
       ) })
     ] });
   });
-  const formId = "form-builder";
-  const FieldWithActions = React.memo(function FieldWithActions2(props) {
-    const { field, index: index2, sectionIndex, takenLabels, remove: remove2 } = props;
-    const deserializedField = React.useMemo(() => deserialize(field), [field]);
-    const input = useFieldInput(deserializedField, { formId, disabled: true });
-    const duplicateField = React.useCallback(
-      (field2) => {
-        const fieldLabel = field2.label ?? "Untitled field";
-        return { ...field2, label: incrementFieldLabel(fieldLabel, takenLabels), identifier: "" };
-      },
-      [takenLabels]
+  FieldActions.displayName = "FieldActions";
+  const description = "_description_17zed_1";
+  const styles = {
+    description
+  };
+  const FieldSettingsPopover = React.memo((props) => {
+    const { popoverInputs, hasError } = props;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      blocks.Popover,
+      {
+        size: "1",
+        trigger: /* @__PURE__ */ jsxRuntime.jsxs(
+          blocks.Button,
+          {
+            variant: "soft",
+            size: "small",
+            "aria-label": "settings",
+            ...hasError && { severity: "danger" },
+            hoverEffects: ["spin90Clockwise"],
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(GearIcon, {}),
+              /* @__PURE__ */ jsxRuntime.jsx(blocks.Text, { children: "Settings" })
+            ]
+          },
+          "settings"
+        ),
+        children: () => /* @__PURE__ */ jsxRuntime.jsx(blocks.Flex, { direction: "column", style: { maxWidth: "240px" }, children: popoverInputs })
+      }
+    );
+  });
+  FieldSettingsPopover.displayName = "FieldSettingsPopover";
+  const FieldBuilder = React.memo((props) => {
+    var _a2, _b, _c, _d, _e, _f;
+    const { parentPath, index: index2, initial, conditionalSourceFields } = props;
+    const RADIX_SM_MIN_WIDTH = 576;
+    const [isLargeScreen, setIsLargeScreen] = React.useState(
+      window.matchMedia(`(min-width: ${RADIX_SM_MIN_WIDTH}px)`).matches
     );
+    React.useEffect(() => {
+      const mediaQuery = window.matchMedia(`(min-width: ${RADIX_SM_MIN_WIDTH}px)`);
+      const handleMediaQueryChange = (event) => {
+        setIsLargeScreen(event.matches);
+      };
+      mediaQuery.addEventListener("change", handleMediaQueryChange);
+      return () => {
+        mediaQuery.removeEventListener("change", handleMediaQueryChange);
+      };
+    }, []);
+    const { values, setFieldValue, errors } = formik.useFormikContext();
+    const fieldTypeItems = useFieldTypeItems();
+    const isSection = React.useCallback((field) => {
+      return field.type === "section";
+    }, []);
+    React.useEffect(() => {
+      if (isSection(initial) && !initial.conditional) {
+        void setFieldValue(`${parentPath}.${index2}.condition`, null).then();
+      }
+    }, [index2, initial, isSection, parentPath, setFieldValue]);
+    const conditionLabel = React.useMemo(
+      () => {
+        var _a3, _b2;
+        return isSection(initial) ? (_b2 = findFieldByIdentifier(values.fields, (_a3 = initial.condition) == null ? void 0 : _a3.identifier)) == null ? void 0 : _b2.label : void 0;
+      },
+      [initial, isSection, values.fields]
+    );
+    const conditionComparison = isSection(initial) ? Array.isArray((_a2 = initial.condition) == null ? void 0 : _a2.value) ? "contains all of" : "equals" : void 0;
+    let conditionValue = void 0;
+    if (isSection(initial)) {
+      if (valueIsFile((_b = initial.condition) == null ? void 0 : _b.value)) {
+        throw new Error("File values are not supported for conditions.");
+      }
+      conditionValue = Array.isArray((_c = initial.condition) == null ? void 0 : _c.value) ? initial.condition.value.map((v) => typeof v === "string" ? v : v.label).join(", ") : (_e = (_d = initial.condition) == null ? void 0 : _d.value) == null ? void 0 : _e.toString();
+    }
+    const type = initial.type;
+    const fieldCls = CompleteFieldTypeToClsMapping[type];
+    const [directlyShownFields, popoverFields] = React.useMemo(() => {
+      let directlyShownFields2 = [];
+      let popoverFields2 = [];
+      if (fieldCls === FieldSection) {
+        if (conditionalSourceFields === void 0) {
+          throw new Error("Conditional source fields must be provided when changing sections.");
+        }
+        const fieldObject = fieldCls.getFieldCreationSchema(conditionalSourceFields, `${parentPath}.${index2}`);
+        directlyShownFields2 = directlyShownFields2.concat(
+          fieldObject.filter((field) => field.showDirectly).map((field) => field.field)
+        );
+        popoverFields2 = popoverFields2.concat(
+          fieldObject.filter((field) => !field.showDirectly).map((field) => field.field)
+        );
+      } else {
+        if (!(fieldCls.prototype instanceof BaseField)) {
+          throw new Error(`Field must be an instance of BaseField. Got ${fieldCls.toString()}.`);
+        }
+        const fieldObject = fieldCls.getFieldCreationSchema(
+          `${parentPath}.${index2}`
+        );
+        if (isLargeScreen) {
+          directlyShownFields2 = [
+            ...directlyShownFields2,
+            ...fieldObject.filter((field) => field.showDirectly).map((field) => field.field)
+          ];
+          popoverFields2 = [
+            ...popoverFields2,
+            ...fieldObject.filter((field) => !field.showDirectly).map((field) => field.field)
+          ];
+        } else {
+          popoverFields2 = [...popoverFields2, ...fieldObject.map((field) => field.field)];
+        }
+      }
+      return [directlyShownFields2, popoverFields2];
+    }, [fieldCls, conditionalSourceFields, parentPath, index2, isLargeScreen]);
+    const directlyShownInputs = useFieldInputs(directlyShownFields, {
+      formId,
+      disabled: false,
+      ...fieldCls === FieldSection && { size: "2" }
+    });
+    const popoverInputs = useFieldInputs(popoverFields, {
+      formId,
+      disabled: false
+    });
+    let showPopoverInputs = popoverFields.length > 0;
+    if (isSection(initial) && popoverFields.length > 0) {
+      showPopoverInputs = initial.conditional;
+    }
+    const popoverHasErrors = popoverFields.some((field) => {
+      const error = get(errors, fieldCls === FieldSection ? `${parentPath}.${index2}.condition` : field.getId());
+      return error && (typeof error !== "object" || hasKeys(error));
+    });
+    return /* @__PURE__ */ jsxRuntime.jsxs(blocks.Flex, { align: "center", grow: "1", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(blocks.Flex, { direction: "column", children: [
+        fieldCls === FieldSection && /* @__PURE__ */ jsxRuntime.jsxs(blocks.Flex, { direction: "column", gap: "1", children: [
+          directlyShownFields.length > 0 && directlyShownInputs,
+          /* @__PURE__ */ jsxRuntime.jsxs(blocks.Flex, { align: "center", gap: "2", children: [
+            showPopoverInputs && /* @__PURE__ */ jsxRuntime.jsx(FieldSettingsPopover, { popoverInputs, hasError: popoverHasErrors }),
+            isSection(initial) && initial.conditional && /* @__PURE__ */ jsxRuntime.jsx(blocks.Text, { size: "1", severity: popoverHasErrors ? "danger" : "primary", children: /* @__PURE__ */ jsxRuntime.jsxs(Em, { children: [
+              "Display only if ",
+              /* @__PURE__ */ jsxRuntime.jsx(Strong, { children: conditionLabel }),
+              " ",
+              conditionComparison,
+              " ",
+              /* @__PURE__ */ jsxRuntime.jsx(Strong, { children: conditionValue })
+            ] }) })
+          ] })
+        ] }),
+        fieldCls !== FieldSection && /* @__PURE__ */ jsxRuntime.jsxs(blocks.Flex, { direction: "column", gap: "2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            PatchField,
+            {
+              name: `${parentPath}.${index2}.required`,
+              render: ({ setValue, value }) => /* @__PURE__ */ jsxRuntime.jsx(
+                blocks.Checkbox,
+                {
+                  checked: value,
+                  onCheckedChange: setValue,
+                  label: /* @__PURE__ */ jsxRuntime.jsx(blocks.Text, { size: "2", children: "Required field" }),
+                  alwaysShow: true
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs(blocks.Flex, { align: "center", gap: "3", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(blocks.Badge, { style: { width: "fit-content", height: "24px" }, children: (_f = fieldTypeItems.flat().find((item) => item.value === type)) == null ? void 0 : _f.content }),
+            showPopoverInputs && /* @__PURE__ */ jsxRuntime.jsx(FieldSettingsPopover, { popoverInputs, hasError: popoverHasErrors })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          PatchField,
+          {
+            name: `${parentPath}.${index2}.label`,
+            render: ({ setValue, value }) => /* @__PURE__ */ jsxRuntime.jsx(
+              blocks.Input,
+              {
+                className: styles.Input,
+                placeholder: `Enter a ${type === "section" ? "section" : "field"} label`,
+                value,
+                onChange: (event) => {
+                  setValue(event.target.value);
+                },
+                maxLength: 200,
+                showInputLength: false,
+                variant: "ghost",
+                size: "large"
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          PatchField,
+          {
+            name: `${parentPath}.${index2}.description`,
+            render: ({ setValue, value }) => /* @__PURE__ */ jsxRuntime.jsx(
+              blocks.TextArea,
+              {
+                style: { minHeight: "max-content" },
+                placeholder: `Enter a ${type === "section" ? "section" : "field"} description`,
+                value,
+                onChange: (event) => {
+                  setValue(event.target.value);
+                },
+                resize: "vertical",
+                maxLength: 1e3,
+                showInputLength: false,
+                variant: "ghost"
+              }
+            )
+          }
+        )
+      ] }),
+      fieldCls !== FieldSection && directlyShownFields.length > 0 && directlyShownInputs
+    ] });
+  });
+  FieldBuilder.displayName = "FieldBuilder";
+  const FieldWithActions = React.memo((props) => {
+    const { field, index: index2, sectionIndex, takenLabels, remove: remove2 } = props;
+    const { setFieldValue, values } = formik.useFormikContext();
+    const { reorderField } = useFieldReordering();
+    const parentPath = `fields.${sectionIndex}.fields`;
     const editFieldProps = React.useMemo(
       () => ({
         index: index2,
-        parentPath: `fields.${sectionIndex}.fields`,
-        initial: field,
-        editing: true
+        parentPath,
+        initial: field
       }),
-      [field, index2, sectionIndex]
+      [field, index2, parentPath]
     );
-    const duplicateFieldProps = React.useMemo(
-      () => ({
-        parentPath: `fields.${sectionIndex}.fields`,
-        index: index2 + 1,
-        initial: duplicateField(field)
-      }),
-      [duplicateField, field, index2, sectionIndex]
+    const duplicateField = React.useCallback(() => {
+      const label = field.label ?? "Unlabelled field";
+      const duplicatedField = {
+        ...field,
+        label: incrementFieldLabel(label, takenLabels)
+      };
+      createNewField(parentPath, index2 + 1, duplicatedField, values, setFieldValue);
+    }, [field, takenLabels, parentPath, index2, values, setFieldValue]);
+    const createFieldAfter = React.useCallback(
+      (type) => {
+        if (type === "section") {
+          throw new Error("Section type unexpected");
+        }
+        createNewField(
+          parentPath,
+          index2 + 1,
+          FieldTypeToEmptyFieldMapping[type],
+          values,
+          setFieldValue
+        );
+      },
+      [parentPath, index2, values, setFieldValue]
     );
-    const insertAfterProps = React.useMemo(
-      () => ({
-        parentPath: `fields.${sectionIndex}.fields`,
-        index: index2 + 1,
-        initial: void 0
-      }),
-      [index2, sectionIndex]
+    const moveField = React.useCallback(
+      (direction) => {
+        const srcSectionIndex = sectionIndex;
+        const srcSection = values.fields[srcSectionIndex];
+        let destSectionIndex = sectionIndex;
+        let destFieldIndex = direction === "up" ? index2 - 1 : index2 + 1;
+        if (direction === "up" && index2 === 0) {
+          destSectionIndex = sectionIndex - 1;
+          destFieldIndex = values.fields[destSectionIndex].fields.length;
+        } else if (direction === "down" && index2 === srcSection.fields.length - 1) {
+          destSectionIndex = sectionIndex + 1;
+          destFieldIndex = 0;
+        }
+        const destSection = values.fields[destSectionIndex];
+        reorderField(
+          srcSection,
+          srcSectionIndex,
+          index2,
+          destSection,
+          destSectionIndex,
+          destFieldIndex,
+          setFieldValue
+        );
+      },
+      [sectionIndex, values.fields, index2, reorderField, setFieldValue]
     );
     return /* @__PURE__ */ jsxRuntime.jsx(dnd.Draggable, { draggableId: field.identifier, index: index2, children: (draggableProvided) => /* @__PURE__ */ jsxRuntime.jsx(
       Card,
@@ -10103,30 +10372,38 @@ var __publicField = (obj, key, value) => {
         ref: draggableProvided.innerRef,
         ...draggableProvided.draggableProps,
         ...draggableProvided.dragHandleProps,
+        style: {
+          ...draggableProvided.draggableProps.style,
+          backgroundColor: "var(--accent-1)",
+          borderColor: "var(--accent-3)"
+        },
         mb: "4",
         children: /* @__PURE__ */ jsxRuntime.jsxs(blocks.Flex, { gap: "4", justify: "between", align: "center", children: [
-          input,
+          /* @__PURE__ */ jsxRuntime.jsx(FieldBuilder, { ...editFieldProps }),
           /* @__PURE__ */ jsxRuntime.jsx(
             FieldActions,
             {
+              index: index2,
+              sectionIndex,
+              type: field.type,
               remove: remove2,
-              editProps: editFieldProps,
-              duplicateProps: duplicateFieldProps,
-              insertAfterProps,
-              dragHandleProps: draggableProvided.dragHandleProps
+              duplicate: duplicateField,
+              addAfter: createFieldAfter,
+              move: moveField
             }
           )
         ] })
       }
     ) });
   });
-  const FieldSectionWithActions = React.memo(function FieldSectionWithActions2(props) {
-    var _a2, _b, _c, _d, _e, _f, _g;
+  FieldWithActions.displayName = "FieldWithActions";
+  const FieldSectionWithActions = React.memo((props) => {
+    var _a2;
     const { field, index: sectionIndex, dropState } = props;
     const isDropDisabled = (_a2 = dropState[field.identifier]) == null ? void 0 : _a2.disabled;
-    const [isAddFieldDialogOpen, setIsAddFieldDialogOpen] = React.useState(false);
     const { setFieldValue, values } = formik.useFormikContext();
     const alertDialog = blocks.useAlertDialog();
+    const { reorderSection } = useFieldReordering();
     const takenFieldLabels = getTakenFieldLabels(values.fields);
     const removeSectionConditions = React.useCallback(
       (sectionsToUpdate, allSections) => {
@@ -10213,152 +10490,113 @@ var __publicField = (obj, key, value) => {
       alertDialog,
       removeSectionConditions
     ]);
-    const duplicateSection = React.useCallback(
-      (field2) => {
-        const fieldLabel = field2.label ?? "Untitled section";
-        const newSectionLabel = incrementFieldLabel(fieldLabel, takenFieldLabels);
-        const newFields = field2.fields.map((f) => {
-          const newLabel = incrementFieldLabel(f.label || "Untitled field", takenFieldLabels);
-          return {
-            ...f,
-            label: newLabel,
-            identifier: makeIdentifier(void 0, newLabel)
-          };
-        });
-        return { ...field2, label: newSectionLabel, fields: newFields, identifier: "" };
+    const moveSection = React.useCallback(
+      (direction) => {
+        const destinationIndex = direction === "up" ? sectionIndex - 1 : sectionIndex + 1;
+        reorderSection(dropState, field.identifier, sectionIndex, destinationIndex, values, setFieldValue);
       },
-      [takenFieldLabels]
+      [sectionIndex, reorderSection, dropState, field.identifier, values, setFieldValue]
     );
     const editSectionProps = React.useMemo(
       () => ({
         index: sectionIndex,
         parentPath: "fields",
         initial: field,
-        editing: true,
         conditionalSourceFields: makeConditionalSourceFields(values.fields, sectionIndex)
       }),
       [field, sectionIndex, values.fields]
     );
-    const insertSectionProps = React.useMemo(
-      () => ({
-        index: sectionIndex + 1,
-        parentPath: "fields",
-        initial: emptySection(),
-        conditionalSourceFields: makeConditionalSourceFields(values.fields, sectionIndex + 1)
-      }),
-      [sectionIndex, values.fields]
-    );
-    const insertFieldAtEndOfSection = React.useMemo(
-      () => ({
-        parentPath: `fields.${sectionIndex}.fields`,
-        index: field.fields.length,
-        initial: void 0
-      }),
-      [field.fields.length, sectionIndex]
-    );
-    const duplicateSectionProps = React.useMemo(
-      () => ({
-        index: sectionIndex + 1,
-        parentPath: "fields",
-        initial: duplicateSection(field),
-        conditionalSourceFields: makeConditionalSourceFields(values.fields, sectionIndex + 1)
-      }),
-      [duplicateSection, field, sectionIndex, values.fields]
-    );
-    const conditionLabel = React.useMemo(
-      () => {
-        var _a3, _b2;
-        return (_b2 = findFieldByIdentifier(values.fields, (_a3 = field.condition) == null ? void 0 : _a3.identifier)) == null ? void 0 : _b2.label;
+    const duplicateSection = React.useCallback(() => {
+      const fieldLabel = field.label ?? "Untitled section";
+      const newSectionLabel = incrementFieldLabel(fieldLabel, takenFieldLabels);
+      const newFields = field.fields.map((f) => {
+        const newLabel = incrementFieldLabel(f.label, takenFieldLabels);
+        return {
+          ...f,
+          label: newLabel,
+          identifier: makeIdentifier(null, newLabel)
+        };
+      });
+      const duplicatedField = { ...field, label: newSectionLabel, fields: newFields };
+      createNewField("fields", sectionIndex + 1, duplicatedField, values, setFieldValue);
+    }, [field, takenFieldLabels, sectionIndex, values, setFieldValue]);
+    const handleCreateField = React.useCallback(
+      (type) => {
+        createNewField(
+          `fields.${sectionIndex}.fields`,
+          field.fields.length,
+          FieldTypeToEmptyFieldMapping[type],
+          values,
+          setFieldValue
+        );
       },
-      [(_b = field.condition) == null ? void 0 : _b.identifier, values.fields]
+      [sectionIndex, field.fields.length, values, setFieldValue]
     );
-    const conditionComparison = Array.isArray((_c = field.condition) == null ? void 0 : _c.value) ? "contains all of" : "equals";
-    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) ? field.condition.value.map((v) => typeof v === "string" ? v : v.label).join(", ") : (_g = (_f = field.condition) == null ? void 0 : _f.value) == null ? void 0 : _g.toString();
-    return /* @__PURE__ */ jsxRuntime.jsx(dnd.Draggable, { draggableId: field.identifier, index: sectionIndex, children: (draggableProvided) => /* @__PURE__ */ jsxRuntime.jsx(
-      Card,
-      {
-        ref: draggableProvided.innerRef,
-        ...draggableProvided.draggableProps,
-        ...draggableProvided.dragHandleProps,
-        mb: "4",
-        children: /* @__PURE__ */ jsxRuntime.jsxs(blocks.Flex, { gap: "3", justify: "between", align: "center", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(blocks.Flex, { direction: "column", gap: "2", grow: "1", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs(blocks.Flex, { direction: "column", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(Heading, { as: "h3", size: "3", children: field.label }),
-              /* @__PURE__ */ jsxRuntime.jsx(blocks.Text, { className: styles$4.description, children: field.description })
-            ] }),
-            field.condition && /* @__PURE__ */ jsxRuntime.jsx(blocks.Text, { size: "1", children: /* @__PURE__ */ jsxRuntime.jsxs(Em, { children: [
-              "Display only if ",
-              /* @__PURE__ */ jsxRuntime.jsx(Strong, { children: conditionLabel }),
-              " ",
-              conditionComparison,
-              " ",
-              /* @__PURE__ */ jsxRuntime.jsx(Strong, { children: conditionValue })
-            ] }) }),
-            /* @__PURE__ */ jsxRuntime.jsx(dnd.Droppable, { droppableId: field.identifier, type: "SECTION", isDropDisabled, children: (droppableProvided) => /* @__PURE__ */ jsxRuntime.jsxs(
-              blocks.Flex,
-              {
-                ref: droppableProvided.innerRef,
-                ...droppableProvided.droppableProps,
-                direction: "column",
-                gap: "0",
-                children: [
-                  field.fields.map((child, i) => /* @__PURE__ */ jsxRuntime.jsx(
-                    FieldWithActions,
-                    {
-                      field: child,
-                      index: i,
-                      sectionIndex,
-                      remove: () => {
-                        removeField(i);
-                      },
-                      takenLabels: takenFieldLabels
-                    },
-                    child.identifier
-                  )),
-                  droppableProvided.placeholder,
-                  /* @__PURE__ */ jsxRuntime.jsxs(
-                    blocks.Button,
+    return /* @__PURE__ */ jsxRuntime.jsx(dnd.Draggable, { draggableId: field.identifier, index: sectionIndex, children: (draggableProvided) => {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        Card,
+        {
+          ref: draggableProvided.innerRef,
+          ...draggableProvided.draggableProps,
+          ...draggableProvided.dragHandleProps,
+          mb: "4",
+          children: /* @__PURE__ */ jsxRuntime.jsxs(blocks.Flex, { gap: "3", justify: "between", align: "center", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(blocks.Flex, { direction: "column", gap: "2", grow: "1", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(FieldBuilder, { ...editSectionProps }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                dnd.Droppable,
+                {
+                  droppableId: field.identifier,
+                  type: "SECTION",
+                  isDropDisabled,
+                  children: (droppableProvided) => /* @__PURE__ */ jsxRuntime.jsxs(
+                    blocks.Flex,
                     {
-                      type: "button",
-                      variant: "outline",
-                      onClick: () => {
-                        setIsAddFieldDialogOpen(true);
-                      },
+                      ref: droppableProvided.innerRef,
+                      ...droppableProvided.droppableProps,
+                      direction: "column",
+                      gap: "0",
                       children: [
-                        /* @__PURE__ */ jsxRuntime.jsx(PlusIcon, {}),
-                        " Add a field"
+                        field.fields.map((child, i) => /* @__PURE__ */ jsxRuntime.jsx(
+                          FieldWithActions,
+                          {
+                            field: child,
+                            index: i,
+                            sectionIndex,
+                            remove: () => {
+                              removeField(i);
+                            },
+                            takenLabels: takenFieldLabels
+                          },
+                          child.identifier
+                        )),
+                        droppableProvided.placeholder,
+                        /* @__PURE__ */ jsxRuntime.jsx(FieldTypeDropdown, { setFieldType: handleCreateField, children: /* @__PURE__ */ jsxRuntime.jsxs(blocks.Button, { type: "button", variant: "soft", children: [
+                          /* @__PURE__ */ jsxRuntime.jsx(PlusIcon, {}),
+                          " Add field"
+                        ] }) })
                       ]
                     }
-                  ),
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    FieldBuilder,
-                    {
-                      ...insertFieldAtEndOfSection,
-                      isOpen: isAddFieldDialogOpen,
-                      setIsOpen: setIsAddFieldDialogOpen
-                    }
                   )
-                ]
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              FieldActions,
+              {
+                index: sectionIndex,
+                type: field.type,
+                remove: removeSection,
+                duplicate: duplicateSection,
+                move: moveSection
               }
-            ) })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            FieldActions,
-            {
-              remove: removeSection,
-              insertAfterProps: insertSectionProps,
-              dragHandleProps: draggableProvided.dragHandleProps,
-              editProps: editSectionProps,
-              duplicateProps: duplicateSectionProps
-            }
-          )
-        ] })
-      }
-    ) });
+            )
+          ] })
+        }
+      );
+    } });
   });
+  FieldSectionWithActions.displayName = "FieldSectionWithActions";
   const reducer = (state, action) => {
     var _a2;
     const next = { ...state };
@@ -10420,11 +10658,40 @@ var __publicField = (obj, key, value) => {
         return [section, i];
     }
   };
-  const FieldsEditor = React.memo(function FieldsEditor2() {
+  const BasicFieldSection = React.memo((props) => {
+    const { field, provided } = props;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Card,
+      {
+        ref: provided == null ? void 0 : provided.innerRef,
+        ...provided == null ? void 0 : provided.draggableProps,
+        ...provided == null ? void 0 : provided.dragHandleProps,
+        style: { ...provided == null ? void 0 : provided.draggableProps.style, height: "80px" },
+        children: /* @__PURE__ */ jsxRuntime.jsxs(blocks.Flex, { direction: "column", gap: "2", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(blocks.Flex, { direction: "row", gap: "2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(blocks.Text, { size: "4", children: field.label }),
+            /* @__PURE__ */ jsxRuntime.jsx(blocks.Badge, { style: { width: "fit-content" }, children: /* @__PURE__ */ jsxRuntime.jsxs(blocks.Text, { children: [
+              field.fields.length,
+              " Fields"
+            ] }) })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(blocks.Flex, { direction: "row", gap: "2", children: field.fields.map((child) => {
+            const childInfo = FieldTypeToClsMapping[child.type];
+            const Icon = childInfo.Icon;
+            return /* @__PURE__ */ jsxRuntime.jsx(blocks.Flex, { gap: "3", children: /* @__PURE__ */ jsxRuntime.jsxs(blocks.Badge, { style: { width: "fit-content" }, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(Icon, {}),
+              /* @__PURE__ */ jsxRuntime.jsx(blocks.Text, { children: childInfo.fieldTypeName })
+            ] }) }, child.identifier);
+          }) })
+        ] })
+      }
+    );
+  });
+  BasicFieldSection.displayName = "BasicFieldSection";
+  const FieldsEditor = React.memo(() => {
     const { values, setFieldValue } = formik.useFormikContext();
     const [dropState, dispatch] = React.useReducer(reducer, values.fields, initializer);
-    const [isAddSectionDialogOpen, setIsAddSectionDialogOpen] = React.useState(false);
-    const { showInfo } = blocks.useToast();
+    const { reorderSection, reorderField } = useFieldReordering();
     React.useEffect(() => {
       dispatch({ type: "update", state: initializer(values.fields) });
     }, [dispatch, values.fields]);
@@ -10440,58 +10707,30 @@ var __publicField = (obj, key, value) => {
         if (!destination || reason === "CANCEL")
           return;
         if (type === "ROOT") {
-          const state = dropState[draggableId];
-          if (!state)
-            throw new Error("Could not find section context.");
-          let dest = typeof state.conditionIndex !== "undefined" ? (
-            // cannot move a section with a condition before the condition's field
-            Math.max(state.conditionIndex + 1, destination.index)
-          ) : destination.index;
-          for (const section of Object.values(dropState)) {
-            if (section.conditionIndex === source.index) {
-              dest = Math.min(dest, section.index - 1);
-            }
-          }
-          if (dest != destination.index) {
-            showInfo({
-              title: "Reordered sections",
-              description: "Sections with conditions must be below the fields they reference."
-            });
-          }
-          return setFieldValue("fields", reorder(values.fields, source.index, dest));
+          reorderSection(dropState, draggableId, source.index, destination.index, values, setFieldValue);
+          return;
         }
         if (type !== "SECTION")
           throw new Error("Unexpected droppable type.");
         const [sourceSection, srcIndex] = findSection(values.fields, source.droppableId) ?? [];
         const [destinationSection, destIndex] = findSection(values.fields, destination.droppableId) ?? [];
-        if (!(sourceSection == null ? void 0 : sourceSection.fields) || !destinationSection)
-          throw new Error("Could not find section with fields.");
-        if (sourceSection.identifier === destinationSection.identifier) {
-          void setFieldValue(
-            `fields.${srcIndex}.fields`,
-            reorder(sourceSection.fields, source.index, destination.index)
-          ).then();
-        } else {
-          const removed = sourceSection.fields[source.index];
-          if (!removed)
-            throw new Error("Could not find field to reorder.");
-          void setFieldValue(`fields.${srcIndex}.fields`, remove(sourceSection.fields, source.index)).then();
-          void setFieldValue(
-            `fields.${destIndex}.fields`,
-            insert(destinationSection.fields, destination.index, removed)
-          ).then();
-        }
+        reorderField(
+          sourceSection,
+          srcIndex,
+          source.index,
+          destinationSection,
+          destIndex,
+          destination.index,
+          setFieldValue
+        );
       },
-      [values.fields, setFieldValue, dropState, showInfo]
+      [values, reorderField, setFieldValue, reorderSection, dropState]
     );
-    const makeFieldSectionProps = React.useMemo(
-      () => ({
-        index: values.fields.length,
-        parentPath: "fields",
-        initial: emptySection(),
-        conditionalSourceFields: makeConditionalSourceFields(values.fields, values.fields.length)
-      }),
-      [values.fields]
+    const handleCreateEmptySection = React.useCallback(
+      (index2) => {
+        createNewEmptySection(index2 + 1, values, setFieldValue);
+      },
+      [values, setFieldValue]
     );
     return /* @__PURE__ */ jsxRuntime.jsx(dnd.DragDropContext, { onDragStart: handleDragStart, onDragEnd: handleDragEnd, children: /* @__PURE__ */ jsxRuntime.jsx(dnd.Droppable, { droppableId: "droppable", type: "ROOT", children: (droppableProvided) => /* @__PURE__ */ jsxRuntime.jsxs(
       blocks.Flex,
@@ -10501,123 +10740,200 @@ var __publicField = (obj, key, value) => {
         direction: "column",
         gap: "0",
         children: [
-          values.fields.map((field, index2) => /* @__PURE__ */ jsxRuntime.jsx(
-            FieldSectionWithActions,
-            {
-              field,
-              index: index2,
-              dropState
-            },
-            field.label
-          )),
-          droppableProvided.placeholder,
-          /* @__PURE__ */ jsxRuntime.jsxs(
-            blocks.Button,
-            {
-              type: "button",
-              variant: "outline",
-              onClick: () => {
-                setIsAddSectionDialogOpen(true);
-              },
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx(PlusIcon, {}),
-                " Add a section"
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            FieldBuilder,
-            {
-              ...makeFieldSectionProps,
-              isOpen: isAddSectionDialogOpen,
-              setIsOpen: setIsAddSectionDialogOpen
-            }
-          )
+          values.fields.map((field, index2) => /* @__PURE__ */ jsxRuntime.jsxs(React.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(FieldSectionWithActions, { field, index: index2, dropState }),
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              blocks.Button,
+              {
+                type: "button",
+                variant: "surface",
+                severity: "info",
+                onClick: () => {
+                  handleCreateEmptySection(index2);
+                },
+                style: { marginBottom: "4px" },
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(PlusIcon, {}),
+                  " Add section"
+                ]
+              }
+            )
+          ] }, field.identifier)),
+          droppableProvided.placeholder
         ]
       }
     ) }) });
   });
+  FieldsEditor.displayName = "FieldsEditor";
   const initialValues = {
     title: "",
     description: "",
-    fields: []
-  };
-  const title = new StringField({
-    label: "Title",
-    minLength: 0,
-    maxLength: 100,
-    required: true,
-    identifier: "title"
-  });
-  const titleProps = { formId, placeholder: "Give your form a title." };
-  const description = new TextField({
-    label: "Description",
-    minLength: 0,
-    maxLength: 1e3,
-    required: false,
-    identifier: "description"
-  });
-  const descriptionProps = { formId, placeholder: "Explain the purpose of this form." };
+    fields: [{ ...emptySection(makeIdentifier(null, "")), label: "" }]
+  };
   const previewSubmit = () => {
     alert("This is a form preview, your data will not be saved.");
   };
   const FormBuilder = React.memo(
     React.forwardRef((props, ref) => {
       const { onCancel, onSave, revision } = props;
-      const { heading = revision ? "Edit form" : "Create a new form" } = props;
-      const validate = React.useCallback((form) => {
-        const errors = {};
-        if (!form.title) {
-          errors.title = "Title is required.";
-        }
-        if (!form.fields || form.fields.length === 0) {
-          errors.fields = "At least one field is required.";
-        }
-        if (hasKeys(errors)) {
-          return errors;
-        }
-      }, []);
+      const { showError } = blocks.useToast();
+      const validate = React.useCallback(
+        (form) => {
+          const errors = {};
+          if (!form.title) {
+            errors.title = "Title is required.";
+          }
+          if (form.fields.length === 0) {
+            errors.fields = "At least one field is required.";
+          }
+          let fieldsToValidate = [];
+          for (const [sectionIndex, section] of form.fields.entries()) {
+            const fieldCls = CompleteFieldTypeToClsMapping.section;
+            const sectionSettings = fieldCls.getFieldCreationSchema(
+              makeConditionalSourceFields(form.fields, sectionIndex),
+              `fields.${sectionIndex}`
+            ).map((field) => field.field);
+            fieldsToValidate = [...fieldsToValidate, ...sectionSettings];
+            for (const [fieldIndex, field] of section.fields.entries()) {
+              const fieldCls2 = CompleteFieldTypeToClsMapping[field.type];
+              const fieldSettings = fieldCls2.getFieldCreationSchema(`fields.${sectionIndex}.fields.${fieldIndex}`).map((field2) => field2.field);
+              fieldsToValidate = [...fieldsToValidate, ...fieldSettings];
+            }
+          }
+          const fieldErrors = validateForm(
+            {
+              title: "Validate form builder",
+              fields: fieldsToValidate,
+              meta: { readonly: true }
+            },
+            form
+          );
+          if (fieldErrors) {
+            errors.fields = fieldErrors.fields;
+          }
+          if (hasKeys(errors)) {
+            showError({
+              title: "Some form settings are invalid",
+              description: "Please check settings highlighted in red."
+            });
+            return errors;
+          }
+        },
+        [showError]
+      );
       const formik$1 = formik.useFormik({
         initialValues: wrapRootFieldsWithFieldSection(revision) ?? initialValues,
         validate,
-        onSubmit: onSave,
-        // only validate the entire for on submit
+        // onSubmit: (form) => console.log("SUBMITTED", form),
+        onSubmit: (form) => {
+          onSave(form);
+        },
+        // only validate the entire form on submit
         validateOnChange: false,
         validateOnBlur: false
       });
       const previewSchema = React.useMemo(() => formRevisionToSchema(formik$1.values), [formik$1.values]);
-      const titleInput = useFieldInput(title, titleProps);
-      const descriptionInput = useFieldInput(description, descriptionProps);
-      const FormBuilderHeading = React.useMemo(
-        () => typeof heading === "object" ? heading : /* @__PURE__ */ jsxRuntime.jsx(Heading, { children: heading }),
-        [heading]
-      );
       return /* @__PURE__ */ jsxRuntime.jsx(Tabs.Root, { ref, defaultValue: "edit", children: /* @__PURE__ */ jsxRuntime.jsxs(blocks.Flex, { direction: "column", gap: "2", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(Tabs.List, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Tabs.Trigger, { value: "edit", children: "Edit" }),
-          /* @__PURE__ */ jsxRuntime.jsx(Tabs.Trigger, { value: "preview", children: "Preview" })
-        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          Tabs.List,
+          {
+            style: {
+              display: "flex",
+              position: "sticky",
+              top: 0,
+              zIndex: 2e3,
+              backgroundColor: "var(--color-background)"
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(Tabs.Trigger, { style: { flex: 1 }, value: "edit", children: "Edit" }),
+              /* @__PURE__ */ jsxRuntime.jsx(Tabs.Trigger, { style: { flex: 1 }, value: "preview", children: "Preview" })
+            ]
+          }
+        ),
         /* @__PURE__ */ jsxRuntime.jsxs(Tabs.Content, { value: "edit", children: [
-          FormBuilderHeading,
           /* @__PURE__ */ jsxRuntime.jsxs(blocks.Text, { children: [
-            "Add a new form field by clicking a + button. Specify options for each field, then drag and drop to rearrange them. You can see what a submitted form might look like in the",
+            "Create your form using various field types. Sections can be",
             " ",
-            /* @__PURE__ */ jsxRuntime.jsx("em", { children: "Preview" }),
-            " tab, but",
+            /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "conditionally rendered" }),
+            " based on",
             " ",
-            /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "field values entered on this page will not be saved." })
+            /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "answers to fields in preceding sections. " })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsx(blocks.Flex, { asChild: true, direction: "column", gap: "2", mt: "3", children: /* @__PURE__ */ jsxRuntime.jsxs("form", { id: formId, onSubmit: formik$1.handleSubmit, children: [
             /* @__PURE__ */ jsxRuntime.jsxs(formik.FormikProvider, { value: formik$1, children: [
-              titleInput,
-              descriptionInput,
+              /* @__PURE__ */ jsxRuntime.jsx(
+                PatchField,
+                {
+                  name: "title",
+                  render: ({ setValue, value, meta }) => /* @__PURE__ */ jsxRuntime.jsx(InputWithHelpText, { severity: "danger", helpText: meta.error ?? null, children: /* @__PURE__ */ jsxRuntime.jsx(
+                    blocks.Input,
+                    {
+                      style: {
+                        // var(--accent-a11) for red and var(--accent-1) for gray
+                        border: meta.error ? "1px solid #ff9592" : "1px solid #5a6169",
+                        paddingLeft: "8px",
+                        fontWeight: "bold"
+                      },
+                      placeholder: "Form title",
+                      value,
+                      onChange: (event) => {
+                        setValue(event.target.value);
+                      },
+                      maxLength: 100,
+                      showInputLength: false,
+                      variant: "ghost",
+                      size: "large"
+                    }
+                  ) })
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                PatchField,
+                {
+                  name: "description",
+                  render: ({ setValue, value }) => /* @__PURE__ */ jsxRuntime.jsx(
+                    blocks.TextArea,
+                    {
+                      style: {
+                        minHeight: "max-content",
+                        border: "1px solid #5a6169",
+                        paddingLeft: "8px",
+                        paddingTop: "8px"
+                      },
+                      placeholder: "Explain the purpose of this form",
+                      value,
+                      onChange: (event) => {
+                        setValue(event.target.value);
+                      },
+                      resize: "vertical",
+                      maxLength: 1e3,
+                      showInputLength: false,
+                      variant: "ghost"
+                    }
+                  )
+                }
+              ),
               /* @__PURE__ */ jsxRuntime.jsx(FieldsEditor, {}),
               /* @__PURE__ */ jsxRuntime.jsx(blocks.Text, { severity: "danger", size: "1", children: typeof formik$1.errors.fields === "string" && formik$1.errors.fields })
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs(blocks.Flex, { justify: "end", gap: "2", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(blocks.Button, { type: "button", variant: "soft", onClick: onCancel, children: "Cancel" }),
-              /* @__PURE__ */ jsxRuntime.jsx(blocks.Button, { type: "submit", disabled: !formik$1.isValid, children: "Save" })
-            ] })
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              blocks.Flex,
+              {
+                justify: "end",
+                align: "center",
+                gap: "2",
+                style: {
+                  position: "sticky",
+                  bottom: 0,
+                  paddingBottom: "10px",
+                  paddingRight: "10px"
+                },
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(blocks.Button, { type: "button", variant: "solid", severity: "info", onClick: onCancel, children: "Cancel" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(blocks.Button, { type: "submit", children: "Save form" })
+                ]
+              }
+            )
           ] }) })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx(Tabs.Content, { value: "preview", children: /* @__PURE__ */ jsxRuntime.jsx(FormRenderer, { schema: previewSchema, onSubmit: previewSubmit }) })
@@ -10638,6 +10954,7 @@ var __publicField = (obj, key, value) => {
     FormRenderer,
     FormSubmissionBrowser,
     FormSubmissionViewer,
+    InputWithHelpText,
     InputWithLabel,
     InputWithLabelAndHelpText,
     MultiSelectField,
@@ -10656,12 +10973,22 @@ var __publicField = (obj, key, value) => {
     TextInput,
     deserialize,
     deserializeField,
+    emptyBaseField,
+    emptyBooleanField,
+    emptyDateField,
+    emptyMultiSelectField,
+    emptyMultiStringField,
+    emptyNumberField,
+    emptySelectField,
+    emptyStringField,
+    emptyTextField,
     formRevisionToSchema,
     isConditionMet,
     useFieldInput,
     useFieldInputs,
     useFormikInput,
-    valueIsFile
+    valueIsFile,
+    valueIsFormikUserFormRevision
   }, Symbol.toStringTag, { value: "Module" }));
   exports2.APIError = APIError;
   exports2.AttachmentService = AttachmentService;
@@ -10693,6 +11020,7 @@ var __publicField = (obj, key, value) => {
   exports2.FormSubmissionViewer = FormSubmissionViewer;
   exports2.GREEN = GREEN;
   exports2.HttpMethod = HttpMethod;
+  exports2.InputWithHelpText = InputWithHelpText;
   exports2.InputWithLabel = InputWithLabel;
   exports2.InputWithLabelAndHelpText = InputWithLabelAndHelpText;
   exports2.IssueCommentService = IssueCommentService;
@@ -10736,7 +11064,6 @@ var __publicField = (obj, key, value) => {
   exports2.WorkspaceService = WorkspaceService;
   exports2.YELLOW = YELLOW;
   exports2._setLatestRetryTime = _setLatestRetryTime;
-  exports2.acceptProjectInvite = acceptProjectInvite;
   exports2.addAttachment = addAttachment;
   exports2.addAttachments = addAttachments;
   exports2.addCategory = addCategory;
@@ -10807,6 +11134,15 @@ var __publicField = (obj, key, value) => {
   exports2.emailDomainsReducer = emailDomainsReducer;
   exports2.emailDomainsSlice = emailDomainsSlice;
   exports2.emailRegex = emailRegex;
+  exports2.emptyBaseField = emptyBaseField;
+  exports2.emptyBooleanField = emptyBooleanField;
+  exports2.emptyDateField = emptyDateField;
+  exports2.emptyMultiSelectField = emptyMultiSelectField;
+  exports2.emptyMultiStringField = emptyMultiStringField;
+  exports2.emptyNumberField = emptyNumberField;
+  exports2.emptySelectField = emptySelectField;
+  exports2.emptyStringField = emptyStringField;
+  exports2.emptyTextField = emptyTextField;
   exports2.enqueue = enqueue;
   exports2.enqueueRequest = enqueueRequest;
   exports2.errorColor = errorColor;
@@ -10985,7 +11321,6 @@ var __publicField = (obj, key, value) => {
   exports2.selectProjectUsersAsMapping = selectProjectUsersAsMapping;
   exports2.selectProjectUsersIds = selectProjectUsersIds;
   exports2.selectProjects = selectProjects;
-  exports2.selectProjectsWithAccess = selectProjectsWithAccess;
   exports2.selectRecentIssueIds = selectRecentIssueIds;
   exports2.selectRecentIssuesAsSearchResults = selectRecentIssuesAsSearchResults;
   exports2.selectRecentProjects = selectRecentProjects;
@@ -11091,6 +11426,7 @@ var __publicField = (obj, key, value) => {
   exports2.userReducer = userReducer;
   exports2.userSlice = userSlice;
   exports2.valueIsFile = valueIsFile;
+  exports2.valueIsFormikUserFormRevision = valueIsFormikUserFormRevision;
   exports2.warningColor = warningColor;
   exports2.workspaceReducer = workspaceReducer;
   exports2.workspaceSlice = workspaceSlice;